diff --git a/app/pages/checklist/_components/CheckTipBox.vue b/app/pages/checklist/_components/CheckTipBox.vue
index 3a7b49f..1d213f5 100644
--- a/app/pages/checklist/_components/CheckTipBox.vue
+++ b/app/pages/checklist/_components/CheckTipBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-[15px] bg-gray-f5 px-[50px] py-[30px]"
+    class="box-border flex items-center justify-start gap-[23px] rounded-[15px] bg-gray-f5 px-[50px] py-[30px]"
   >
     <div
-      class="flex h-16 w-16 items-center justify-center rounded-[15px] bg-primary text-[40px] text-background"
+      class="flex items-center justify-center rounded-[15px] bg-primary px-[26px] py-[10px] text-[40px] text-background"
     >
       {{ checkNum }}
     </div>
diff --git a/app/pages/checklist/index.vue b/app/pages/checklist/index.vue
index 8324862..caef27a 100644
--- a/app/pages/checklist/index.vue
+++ b/app/pages/checklist/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-[200px] flex flex-col items-center justify-start">
     <div
-      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-[15px] bg-gray-f5 py-[35px]"
+      class="relative flex flex-col items-center justify-center rounded-[15px] bg-gray-f5 px-[267px] py-[36px]"
     >
       <img src="~/assets/image/checklistIcon.jpg" alt="체크리스트" class="h-[147px] w-[107px]" />
       <div
@@ -11,7 +11,7 @@
       </div>
 
       <button
-        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-primary text-[28px] font-[500] text-background"
+        class="justify-start rounded-[10px] bg-primary px-[40px] py-[10px] text-[28px] font-[500] text-background"
         @click="gotoQuiz"
       >
         퀴즈 풀기
@@ -29,7 +29,7 @@
         <div class="mb-[80px] flex justify-center">
           <div class="grid grid-cols-2 items-start gap-x-[70px] gap-y-[50px]">
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="One">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <span class="text-[24px] font-[600] text-primary">보증보험 가입</span>
                 <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
@@ -40,12 +40,12 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="Two">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <span class="text-[24px] font-[600] text-primary">중개업자 신원</span>
                 <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span class="whitespace-nowrap text-[18px] font-[400] text-primary">
+                <span class="whitespace-nowrap text-[18px] font-[500] text-primary">
                   국토부 중개사 조회 사이트
                 </span>
                 <span class="text-[18px] font-[400] text-gray-1a">
@@ -58,35 +58,39 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Three">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <span class="text-[24px] font-[600] text-primary">등기부등본</span>
                 <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span class="text-[18px] font-normal text-gray-1a">등기부등본은 부동산 또는</span>
-                <span class="text-[18px] font-semibold text-primary">대법원 인터넷등기소</span>
-                <span class="text-[18px] font-normal text-gray-1a">
+                <span class="text-[18px] font-[400] text-gray-1a">등기부등본은 부동산 또는</span>
+                <span class="text-[18px] font-[500] text-primary">대법원 인터넷등기소</span>
+                <span class="text-[18px] font-[400] text-gray-1a">
                   를 통해 반드시 확인해야할 정보입니다.
                   <br />
                   실제 집주인이 누구인지 확인하고 근저당이나 압류 여부를 확인할 수 있습니다.
                   <br />
                 </span>
-                <span class="text-base font-normal text-gray-1a">
+                <span class="text-base font-[400] text-gray-1a">
                   <br />
                 </span>
                 <span class="text-[14px] font-[400] text-primary">
                   TIP!
                   <br />
                 </span>
-                <span class="text-base font-normal text-gray-1a">
+                <span class="text-base font-[400] text-gray-1a">
                   등기부등본은 변경 가능성이 있기에 입주 전 반드시 한번 더 확인해야합니다!
                 </span>
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Four">
               <div class="mb-[10px]">
-                <span class="text-[24px] font-[600] text-primary">확정일자 및 전입신고</span>
-                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
+                <span class="whitespace-nowrap text-[24px] font-[600] text-primary">
+                  확정일자 및 전입신고
+                </span>
+                <span class="whitespace-nowrap text-[24px] font-[600] text-gray-1a">
+                  가능 여부 확인
+                </span>
               </div>
               <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 확정일자와 전입신고가 가능해야지만 보증금을 법적으로 보호할 수 있습니다.
@@ -102,12 +106,14 @@
         <div class="flex justify-center">
           <CheckCard :img="Five" card-width="896px" card-height="764px" card-img-height="533px">
             <div class="justify-start">
-              <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
-              <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              <div class="flex gap-1">
+                <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              </div>
               <div class="mt-[10px] w-[836px] justify-start">
                 <span class="text-[18px] font-[400] text-gray-1a">입주하기 전 반드시</span>
                 <span class="text-[18px] font-[400] text-primary"></span>
-                <span class="text-[18px] font-semibold text-primary">
+                <span class="text-[18px] font-[500] text-primary">
                   주민센터나 정부24에서 전세입자의 전출 여부를 확인
                 </span>
                 <span class="text-[18px] font-[400] text-gray-1a">
@@ -125,23 +131,27 @@
         </div>
       </section>
       <div
-        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-[#B4B4B4]"
+        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-b4"
       ></div>
       <section class="mt-[80px]">
         <div class="mb-[34px] text-[40px] font-[700] text-primary">등기부등본 위조 확인 TIP</div>
         <div class="flex flex-col gap-[44px]">
           <CheckTipBox check-num="1">
-            <div class="w-[634px] justify-start">
-              <div class="text-[32px] font-normal text-gray-1a">
+            <div class="justify-start">
+              <div class="text-[32px] font-[400] text-gray-1a">
                 등기부등본은 말소된 내역이 포함된
               </div>
-              <span class="text-[32px] font-semibold text-primary">등기사항 전부 증명서 유형</span>
-              <span class="text-[32px] font-normal text-gray-1a">으로 발급 받아야합니다.</span>
+              <span class="whitespace-nowrap text-[32px] font-[500] text-primary">
+                등기사항 전부 증명서 유형
+              </span>
+              <span class="whitespace-nowrap text-[32px] font-[400] text-gray-1a">
+                으로 발급 받아야합니다.
+              </span>
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="2">
-            <div class="justify-start text-[32px] font-normal text-gray-1a">
+            <div class="justify-start text-[32px] font-[400] text-gray-1a">
               가압류, 가처분, 가등기, 근저당권 등에 대해 말소된
               <br />
               내역을 찾아야 합니다.
@@ -149,8 +159,8 @@
           </CheckTipBox>
 
           <CheckTipBox check-num="3">
-            <div class="w-[634px] justify-start">
-              <div class="justify-start whitespace-nowrap text-[32px] font-normal text-gray-1a">
+            <div class="justify-start">
+              <div class="justify-start whitespace-nowrap text-[32px] font-[400] text-gray-1a">
                 말소된 이력에 대해 임대인에게 채권자로부터 채권변제
                 <br />
                 확인서 발급을 꼭 요청해야합니다.
@@ -159,13 +169,13 @@
           </CheckTipBox>
 
           <CheckTipBox check-num="4">
-            <div class="w-[634px] justify-start">
+            <div class="justify-start">
               <div class="justify-start whitespace-nowrap">
-                <span class="text-[32px] font-normal text-gray-1a">요청을 거부한다면,</span>
-                <span class="text-[32px] font-semibold text-primary">
+                <span class="text-[32px] font-[400] text-gray-1a">요청을 거부한다면,</span>
+                <span class="text-[31px] font-[500] text-primary">
                   해당 매물은 피하는 것이 안전
                 </span>
-                <span class="text-[32px] font-normal text-gray-1a">합니다.</span>
+                <span class="text-[32px] font-[400] text-gray-1a">합니다.</span>
               </div>
             </div>
           </CheckTipBox>
diff --git a/app/pages/community/_api/types/PostResponse.ts b/app/pages/community/_api/types/PostResponse.ts
index 984bd8e..cd40135 100644
--- a/app/pages/community/_api/types/PostResponse.ts
+++ b/app/pages/community/_api/types/PostResponse.ts
@@ -6,4 +6,5 @@ export interface PostResponse {
   userId: number;
   createdAt: string;
   modifiedAt: string;
+  likeByUser: boolean;
 }
diff --git a/app/pages/community/_components/CommentItem.vue b/app/pages/community/_components/CommentItem.vue
index ca4e2f5..8c016e0 100644
--- a/app/pages/community/_components/CommentItem.vue
+++ b/app/pages/community/_components/CommentItem.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="box-border flex h-[200px] w-[400px] cursor-pointer flex-col rounded-[10px] p-[30px] hover:bg-blue-50"
+    class="box-border flex cursor-pointer flex-col rounded-[10px] px-[30px] py-[26px] hover:bg-secondary"
   >
-    <div class="mb-[5px] justify-start text-lg font-semibold leading-tight text-gray-1a">익명</div>
-    <div class="mb-[15px] justify-start text-base font-normal text-gray-b4">
+    <div class="mb-[5px] justify-start text-[20px] font-[600] text-gray-1a">익명</div>
+    <div class="mb-[15px] justify-start text-[16px] font-[400] text-gray-b4">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
+    <div class="mb-[10px] justify-start text-[20px] font-[400] text-gray-1a">
       {{ comment }}
     </div>
     <div class="flex items-start justify-start gap-[20px]">
-      <div class="flex justify-start gap-[10px]" @click="handleClickLike">
+      <div class="flex justify-start gap-[10px]" @click.stop="handleClickLike">
         <FilledLike
           v-if="isLike"
           class="h-4 w-4"
@@ -19,18 +19,18 @@
         ></FilledLike>
 
         <Like v-else class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div class="justify-start text-base font-normal text-gray-b4">
-          {{ likeCount }}
+        <div class="justify-start text-[18px] font-[400] text-gray-b4">
+          {{ currentLikeCount }}
         </div>
       </div>
       <div class="flex justify-start gap-[10px]">
         <CommentIcon class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div class="justify-start text-base font-normal text-gray-b4">
+        <div class="justify-start text-[18px] font-[400] text-gray-b4">
           {{ commentCount }}
         </div>
       </div>
     </div>
-    <div class="hidden h-48 w-96 rounded-[10px] bg-blue-50" />
+    <div class="hidden h-48 w-96 rounded-[10px] bg-secondary" />
   </div>
 </template>
 
@@ -39,25 +39,75 @@ import CommentIcon from "~/assets/icon/commentIcon.svg";
 import Like from "~/assets/icon/like.svg";
 import FilledLike from "~/assets/icon/filledHeart.svg";
 import dayjs from "dayjs";
-import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useMutation } from "@tanstack/vue-query";
 import { apiInstance } from "~/utils/api";
 
-const isLike = ref(false);
+const props = defineProps({
+  writer: {
+    type: String,
+    default: "작성자",
+  },
+  date: {
+    type: String,
+    default: "",
+  },
+  comment: {
+    type: String,
+    default: "",
+  },
+  commentCount: {
+    type: Number,
+    default: 1,
+  },
+  likeCount: {
+    type: Number,
+    default: 1,
+  },
+  userId: {
+    type: Number,
+    default: 1,
+  },
+  postId: {
+    type: Number,
+    required: true,
+  },
+  likeByUser: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// props.likeByUser로 초기값 설정
+const isLike = ref(props.likeByUser);
+const currentLikeCount = ref(props.likeCount);
+
+// props가 변경될 때 isLike 상태도 업데이트
+watch(
+  () => props.likeByUser,
+  (newValue) => {
+    isLike.value = newValue;
+  }
+);
+
+// likeCount props가 변경될 때 currentLikeCount도 업데이트
+watch(
+  () => props.likeCount,
+  (newValue) => {
+    currentLikeCount.value = newValue;
+  }
+);
 
 const handleClickLike = () => {
-  isLike.value = !isLike.value;
-  if (isLike.value === true) {
+  if (isLike.value) {
+    handleDelete();
+  } else {
     clickLike({
       userId: props.userId,
       postId: props.postId,
     });
-  } else {
-    handleDelete();
   }
 };
 
-const queryClient = useQueryClient();
-
 const { mutate: clickLike } = useMutation({
   mutationFn: async (postData: { userId: number; postId: number }) => {
     console.log("게시글 좋아요 누른 데이터:", postData);
@@ -69,9 +119,8 @@ const { mutate: clickLike } = useMutation({
   },
   onSuccess: (data) => {
     console.log("좋아요 생성 성공:", data);
-    queryClient.invalidateQueries({
-      queryKey: ["post", props.postId],
-    });
+    isLike.value = true;
+    currentLikeCount.value += 1;
   },
   onError: (error) => {
     console.error("좋아요 생성 실패:", error);
@@ -91,9 +140,8 @@ const { mutate: cancelLike } = useMutation({
   },
   onSuccess: () => {
     console.log("좋아요 삭제 성공");
-    queryClient.invalidateQueries({
-      queryKey: ["replies", props.postId],
-    });
+    isLike.value = false;
+    currentLikeCount.value = Math.max(0, currentLikeCount.value - 1);
   },
   onError: (error) => {
     console.error(`좋아요 삭제 실패했습니다: ${error.message}`);
@@ -103,35 +151,4 @@ const { mutate: cancelLike } = useMutation({
 const handleDelete = () => {
   cancelLike(props.postId);
 };
-
-const props = defineProps({
-  writer: {
-    type: String,
-    default: "작성자",
-  },
-  date: {
-    type: String,
-    default: "",
-  },
-  comment: {
-    type: String,
-    default: "",
-  },
-  commentCount: {
-    type: Number,
-    default: 1,
-  },
-  likeCount: {
-    type: Number,
-    default: 1,
-  },
-  userId: {
-    type: Number,
-    default: 1,
-  },
-  postId: {
-    type: Number,
-    required: true,
-  },
-});
 </script>
diff --git a/app/pages/community/_components/CommentWrap.vue b/app/pages/community/_components/CommentWrap.vue
index c0f8880..abf6983 100644
--- a/app/pages/community/_components/CommentWrap.vue
+++ b/app/pages/community/_components/CommentWrap.vue
@@ -1,18 +1,18 @@
 <template>
   <div class="mt-[30px] flex-col pr-[20px]">
     <div
-      class="my-[30px] box-border flex h-[60px] cursor-pointer items-center justify-start rounded-[10px] border-[#B4B4B4] px-[15px] py-[25px] outline outline-[1.50px] outline-offset-[-1.50px] outline-zinc-400"
+      class="my-[30px] box-border flex h-[60px] cursor-pointer items-center justify-start rounded-[10px] border-gray-b4 px-[15px] py-[25px] outline outline-[1.50px] outline-offset-[-1.50px] outline-zinc-400"
       @click="handlePostModal"
     >
-      <div class="justify-start text-[20px] font-medium text-gray-b4">
+      <div class="justify-start text-[20px] font-[500] text-gray-b4">
         선택 지역의 리뷰 게시글을 작성해보세요.
       </div>
       <Stick class="ml-[50px] h-[60px]" filled="false" :font-controlled="false"></Stick>
       <Pencil class="ml-[20px] h-[22px] w-[22px]" filled="false" :font-controlled="false"></Pencil>
     </div>
 
-    <div class="justify-start text-[24px] font-semibold text-zinc-900">
-      <span class="text-[24px] font-semibold text-primary">
+    <div class="justify-start text-[24px] font-[400] text-gray-1a">
+      <span class="text-[24px] font-[600] text-primary">
         {{ selectedAddress || "지역을 선택해주세요" }}
       </span>
       의
@@ -21,19 +21,19 @@
     </div>
 
     <div class="mt-[28px] flex justify-between">
-      <div class="justify-start text-[24px] font-semibold text-zinc-900">
-        <span class="text-[24px] font-semibold text-gray-1a">총 {{ " " }}</span>
-        <span class="text-[24px] font-semibold text-primary">
+      <div class="justify-start text-[24px] font-[600] text-gray-1a">
+        <span class="text-[24px] font-[600] text-gray-1a">총 {{ " " }}</span>
+        <span class="text-[24px] font-[600] text-primary">
           {{ posts?.length || 0 }}
         </span>
-        <span class="font-['Pretendard'] text-2xl font-semibold text-gray-1a">개</span>
+        <span class="font-['Pretendard'] text-[24px] font-[600] text-gray-1a">개</span>
       </div>
       <div class="relative">
         <div
-          class="flex h-8 w-20 items-center justify-center gap-1 rounded-[5px] border border-gray-b4 bg-background"
+          class="flex items-center justify-center gap-1 rounded-[5px] border border-gray-b4 bg-background px-[10px] py-[5px]"
           @click="handleToggle"
         >
-          <p class="cursor-pointer justify-start text-[16px] font-semibold text-gray-b4">
+          <p class="cursor-pointer justify-start text-[16px] font-[600] text-gray-b4">
             {{ selectedOption }}
           </p>
           <DropDownIcon class="h-[19px] w-[19px]" filled="false" :font-controlled="false" />
@@ -45,7 +45,7 @@
           <div
             v-for="option in options"
             :key="option"
-            class="cursor-pointer px-3 py-2 text-[16px] font-semibold text-gray-b4 hover:bg-gray-50"
+            class="cursor-pointer px-3 py-2 text-[16px] font-[600] text-gray-b4"
             @click="selectOption(option)"
           >
             {{ option }}
@@ -78,24 +78,24 @@
           :comment="post.content"
           :comment-count="post.commentCount"
           :like-count="post.likeCount"
-          :like-by-user="true"
+          :like-by-user="post.likeByUser"
           :user-id="1"
           :post-id="post.postId"
           @click="handlePostClick(post.postId)"
         />
 
-        <div v-if="openedPostId === post.postId" class="relative mt-[10px] bg-gray-50 p-4">
-          <div v-if="isReplyLoading" class="text-zinc-400">댓글을 불러오는 중...</div>
+        <div v-if="openedPostId === post.postId" class="relative mt-[10px] bg-gray-50 p-[16px]">
+          <div v-if="isReplyLoading" class="text-gray-d9">댓글을 불러오는 중...</div>
           <!-- <div v-else-if="isReplyError" class="text-red-500">댓글을 불러오는데 실패했습니다.</div> -->
           <div v-for="reply in replyData?.data" :key="reply?.postId" class="mb-[10px] last:mb-0">
             <ReplyItem
               :writer="'익명'"
               :date="reply.createdAt"
               :comment="reply.content"
-              class="border border-gray-200 bg-white shadow-sm"
+              class="border border-gray-d9 bg-background shadow-sm"
             />
           </div>
-          <div v-if="!replyData || replyData.data.length === 0" class="mb-[30px] text-zinc-400">
+          <div v-if="!replyData || replyData.data.length === 0" class="mb-[30px] text-gray-b4">
             댓글이 없습니다.
           </div>
           <div class="sticky bottom-0">
@@ -138,7 +138,6 @@ import PostReply from "./PostReply.vue";
 import type { ReplyResponse } from "../_api/types/ReplyResponse";
 import type { PostResponse } from "../_api/types/PostResponse";
 
-// Props 정의
 const props = defineProps({
   posts: {
     type: Array,
diff --git a/app/pages/community/_components/PostReply.vue b/app/pages/community/_components/PostReply.vue
index de9176f..aed8e0c 100644
--- a/app/pages/community/_components/PostReply.vue
+++ b/app/pages/community/_components/PostReply.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative box-border flex h-[62px] w-[360px] items-center justify-start rounded-[10px] border-[1.50px] border-gray-d9 bg-background p-[30px]"
+    class="relative box-border flex items-center justify-start rounded-[10px] border-[1.50px] border-gray-d9 bg-background p-[30px]"
   >
     <div class="absolute left-0">
       <input
@@ -14,7 +14,7 @@
       :disabled="isSubmitting"
       :class="[
         'absolute right-0 top-0 flex items-center justify-center rounded-br-[10px] rounded-tr-[10px] px-[21px] py-[16px] transition-colors',
-        isSubmitting ? 'cursor-not-allowed bg-gray-300' : 'hover:bg-primary-dark bg-primary',
+        isSubmitting ? 'cursor-not-allowed bg-gray-d9' : 'hover:bg-primary-dark bg-primary',
       ]"
       @click="handleSubmit"
     >
@@ -24,7 +24,7 @@
     <button
       v-else
       disabled
-      class="absolute right-0 top-0 flex cursor-not-allowed items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-zinc-300 px-[21px] py-[16px]"
+      class="absolute right-0 top-0 flex cursor-not-allowed items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-gray-d9 px-[21px] py-[16px]"
     >
       <SendIcon filled="false" :font-controlled="false" class="h-[30px] w-[30px] opacity-50" />
     </button>
diff --git a/app/pages/community/_components/ReplyItem.vue b/app/pages/community/_components/ReplyItem.vue
index 737f166..d5391d9 100644
--- a/app/pages/community/_components/ReplyItem.vue
+++ b/app/pages/community/_components/ReplyItem.vue
@@ -1,14 +1,12 @@
 <template>
-  <div
-    class="hover:bg-gray-70 box-border flex h-[150px] cursor-pointer flex-col rounded-[10px] p-[30px]"
-  >
-    <div class="mb-[5px] justify-start text-[20px] font-semibold leading-tight text-gray-1a">
+  <div class="hover:bg-gray-70 box-border flex cursor-pointer flex-col rounded-[10px] p-[30px]">
+    <div class="mb-[5px] justify-start text-[20px] font-[600] text-gray-1a">
       {{ writer }}
     </div>
-    <div class="mb-[15px] justify-start text-base font-normal text-gray-8f">
+    <div class="mb-[15px] justify-start text-base font-[400] text-gray-8f">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
+    <div class="mb-[10px] justify-start text-base font-[400] text-gray-1a">
       {{ comment }}
     </div>
 
diff --git a/app/pages/community/_modals/PostComment.vue b/app/pages/community/_modals/PostComment.vue
index c4f7a3b..dd149cf 100644
--- a/app/pages/community/_modals/PostComment.vue
+++ b/app/pages/community/_modals/PostComment.vue
@@ -14,12 +14,12 @@
         v-if="selectedAddress"
         class="mr-[198px] justify-start whitespace-nowrap text-[32px] font-[600] text-gray-1a"
       >
-        <span class="text-[32px] font-semibold text-primary">
+        <span class="text-[32px] font-[600] text-primary">
           {{ selectedAddress }}
         </span>
         에 게시글 작성
       </div>
-      <div v-else class="mr-[198px] justify-start text-[32px] font-semibold text-gray-1a">
+      <div v-else class="mr-[198px] justify-start text-[32px] font-[600] text-gray-1a">
         지역을 검색해주세요.
       </div>
       <button
@@ -31,7 +31,7 @@
     </div>
 
     <!-- 구분선 -->
-    <div class="mb-[20px] h-[1px] w-full bg-[#B4B4B4]"></div>
+    <div class="mb-[20px] h-[1px] w-full bg-gray-b4"></div>
 
     <!-- 입력 영역 -->
     <textarea
diff --git a/app/pages/community/index.vue b/app/pages/community/index.vue
index c282a65..31ee42f 100644
--- a/app/pages/community/index.vue
+++ b/app/pages/community/index.vue
@@ -39,7 +39,7 @@
           <div v-if="!roadCode || !buildingNumber">
             <div class="mt-[264px] flex flex-col items-center justify-center gap-[30px]">
               <MapIcon class="h-[122px] w-[110px]" filled="false" :font-controlled="false" />
-              <div class="justify-start text-center text-[26px] font-medium text-gray-8f">
+              <div class="justify-start text-center text-[26px] font-[400] text-gray-8f">
                 지도에서 위치를 검색하여
                 <br />
                 커뮤니티 게시글을 확인하세요.
@@ -128,11 +128,6 @@ const {
   },
 });
 
-//const selectedPost = ref(null);
-// const handlePost = () => {
-//   selectedPost.value = post;
-// };
-
 const config = useRuntimeConfig();
 const kakaoKey = config.public.kakaoJavascriptKey;
 const map = ref(null); // 지도 인스턴스를 저장할 ref
diff --git a/app/pages/credit/_components/StoreItem.vue b/app/pages/credit/_components/StoreItem.vue
index 68f81a0..6f8c80d 100644
--- a/app/pages/credit/_components/StoreItem.vue
+++ b/app/pages/credit/_components/StoreItem.vue
@@ -2,14 +2,10 @@
   <div class="flex cursor-pointer items-center gap-[43px] pt-11">
     <img class="h-[120px] w-[120px] rounded-2xl" :src="storeImg" />
     <div class="flex flex-col">
-      <div
-        class="h-12 w-auto justify-start font-['Pretendard'] text-[24px] font-semibold leading-[50.31px] text-zinc-900"
-      >
+      <div class="justify-start font-['Pretendard'] text-[24px] font-[600] text-gray-1a">
         {{ storeName }}
       </div>
-      <div
-        class="h-12 w-auto justify-start font-['Pretendard'] text-[20px] font-normal leading-[50.31px] text-zinc-900"
-      >
+      <div class="justify-start font-['Pretendard'] text-[20px] font-[400] text-gray-1a">
         {{ address }}
       </div>
     </div>
diff --git a/app/pages/credit/_modals/Barcode.vue b/app/pages/credit/_modals/Barcode.vue
index b30f0c9..24a9901 100644
--- a/app/pages/credit/_modals/Barcode.vue
+++ b/app/pages/credit/_modals/Barcode.vue
@@ -1,22 +1,20 @@
 <template>
   <div class="flex items-center justify-center">
-    <div
-      class="flex h-[556px] w-[820px] flex-col items-center rounded-2xl bg-white px-[139px] py-[59px]"
-    >
-      <div class="mb-[20px] whitespace-nowrap text-[28px] text-stone-500">
-        <span class="text-blue-500">해당 바코드를 저장</span>
+    <div class="flex flex-col items-center rounded-2xl bg-background px-[139px] py-[59px]">
+      <div class="mb-[20px] whitespace-nowrap text-[28px] text-gray-66">
+        <span class="font-[500] text-primary">해당 바코드를 저장</span>
         하여 제휴매장에서 사용하세요.
       </div>
       <img src="~/assets/image/barcode.png" alt="바코드" />
       <div class="mt-[40px] flex justify-center gap-[40px]">
         <button
-          class="flex items-center justify-center rounded-[10px] bg-[#B4B4B4] px-[70px] py-[30px] text-3xl text-white"
+          class="flex items-center justify-center rounded-[10px] bg-gray-b4 px-[80px] py-[30px] text-[30px] text-background"
           @click="$emit('close')"
         >
           취소
         </button>
         <button
-          class="flex items-center justify-center rounded-[10px] bg-blue-500 px-[70px] py-[30px] text-3xl text-white"
+          class="flex items-center justify-center rounded-[10px] bg-primary px-[70px] py-[30px] text-[30px] text-background"
           @click="saveBarcodeImage"
         >
           이미지로 저장
diff --git a/app/pages/credit/creditStore.vue b/app/pages/credit/creditStore.vue
index f1cb180..d60ea5b 100644
--- a/app/pages/credit/creditStore.vue
+++ b/app/pages/credit/creditStore.vue
@@ -3,44 +3,44 @@
     <div class="flex justify-center gap-5">
       <div class="h-[60px] justify-start">
         <div class="justify-start">
-          <div class="font-['Pretendard'] text-xl font-[500] text-zinc-900">
+          <div class="font-['Pretendard'] text-[20px] font-[600] text-gray-1a">
             사용 가능한 제휴 매장이 가까이 있습니다.
           </div>
-          <div class="font-['Pretendard'] text-xl font-[600] text-blue-500">
+          <div class="font-['Pretendard'] text-[20px] font-[700] text-primary">
             지금 제휴처를 확인하고, 크레딧을 사용해보세요.
           </div>
         </div>
       </div>
     </div>
     <div
-      class="mt-[20px] flex h-[230px] w-[446px] flex-col items-center justify-center rounded-2xl bg-blue-50 px-[50px] py-[30px]"
+      class="mt-[20px] flex flex-col items-center justify-center rounded-2xl bg-secondary px-[50px] py-[30px]"
     >
       <img src="~/assets/icon/creditIcon.png" class="h-[75px] w-[66px]" />
       <div class="justify-start text-center">
-        <span class="font-['Pretendard'] text-xl font-semibold leading-10 text-zinc-900">
+        <span class="font-['Pretendard'] text-[20px] font-[600] text-gray-1a">
           현재 보유 크레딧 :
         </span>
-        <span class="font-['Pretendard'] text-xl font-semibold leading-10 text-blue-500">
+        <span class="font-['Pretendard'] text-[20px] font-[600] text-primary">
           {{ currentCredit.toLocaleString() }}
         </span>
       </div>
       <div
-        class="relative my-[5px] h-11 w-80 rounded-[10px] border-[1.50px] border-zinc-300 bg-white"
+        class="relative my-[5px] h-11 w-80 rounded-[10px] border-[1.50px] border-gray-b4 bg-background"
       >
         <button
-          class="absolute right-0 top-0 flex h-11 w-20 items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-blue-500 text-[#FEFEFE]"
+          class="absolute right-0 top-0 flex h-11 w-20 items-center justify-center rounded-br-[10px] rounded-tr-[10px] bg-primary text-background"
           @click="openBarcodeModal"
         >
           생성
         </button>
         <input
           v-model="usingCredit"
-          class="absolute left-[21px] top-0 justify-start font-['Pretendard'] text-base font-semibold leading-10 text-zinc-900 outline-none"
+          class="absolute left-[21px] top-0 items-center justify-start font-['Pretendard'] text-base font-[600] text-gray-1a outline-none"
           placeholder="사용할 크레딧 입력"
         />
       </div>
     </div>
-    <div class="h-[480px] overflow-y-auto overflow-x-hidden">
+    <div class="h-[450px] overflow-y-auto overflow-x-hidden">
       <div v-for="(store, index) in dummy" :key="store.id">
         <StoreItem
           :store-name="store?.storeName"
@@ -49,7 +49,7 @@
         />
         <div v-if="index !== dummy.length - 1" class="my-[43px]">
           <div
-            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-[#D9D9D9]"
+            class="h-0 w-[446px] outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-d9"
           />
         </div>
       </div>
diff --git a/app/pages/credit/index.vue b/app/pages/credit/index.vue
index 572b953..5829994 100644
--- a/app/pages/credit/index.vue
+++ b/app/pages/credit/index.vue
@@ -4,10 +4,10 @@
       <div class="absolute left-[66px] top-[248px] z-20 max-w-[600px]">
         <div class="mb-[30px]">
           <div class="justify-start">
-            <span class="font-['Pretendard'] text-3xl font-semibold leading-10 text-zinc-900">
+            <span class="font-['Pretendard'] text-[20px] font-[600] text-gray-1a">
               사용 가능한 제휴 매장이 가까이 있습니다.
             </span>
-            <div class="font-['Pretendard'] text-3xl font-bold leading-10 text-blue-500">
+            <div class="font-['Pretendard'] text-[20px] font-[700] text-primary">
               지금 제휴처를 확인하고, 크레딧을 사용해보세요.
             </div>
           </div>
diff --git a/app/pages/pricing/_components/PriceBox.vue b/app/pages/pricing/_components/PriceBox.vue
index ffa7102..caeeb4d 100644
--- a/app/pages/pricing/_components/PriceBox.vue
+++ b/app/pages/pricing/_components/PriceBox.vue
@@ -2,7 +2,7 @@
   <div class="rounded-[20px] px-[54px] py-[40px] outline outline-[1.50px]" :class="cardClass">
     <div class="flex flex-col items-start">
       <div
-        class="mb-[10px] mt-[34px] justify-start text-center font-['Pretendard'] text-[28px] font-semibold leading-10"
+        class="mb-[10px] mt-[34px] justify-start text-center font-['Pretendard'] text-[28px] font-[600] leading-10"
         :style="{ color: textColor }"
       >
         {{ option }}
diff --git a/app/pages/pricing/index.vue b/app/pages/pricing/index.vue
index 90dcad7..6ff564f 100644
--- a/app/pages/pricing/index.vue
+++ b/app/pages/pricing/index.vue
@@ -19,31 +19,31 @@ useHead({
   <div class="flex flex-col items-center justify-center gap-[40px]">
     <div class="flex flex-col items-center">
       <div class="justify-start text-center">
-        <span class="font-['Pretendard'] text-[32px] font-semibold leading-10 text-primary">
+        <span class="font-['Pretendard'] text-[32px] font-[600] text-primary">
           한 달간 무제한으로
         </span>
-        <span class="font-['Pretendard'] text-[32px] font-semibold leading-10 text-zinc-900">
+        <span class="font-['Pretendard'] text-[32px] font-[600] text-gray-1a">
           매물의 안전지수를 확인해보세요.
         </span>
       </div>
       <div
-        class="justify-start text-center font-['Pretendard'] text-[20px] font-normal leading-10 text-neutral-400"
+        class="justify-start text-center font-['Pretendard'] text-[20px] font-[400] text-gray-8f"
       >
         PLUS 서비스 구독을 통해 더 다양한 셋방살이의 혜택을 이용하실 수 있습니다.
       </div>
     </div>
     <div class="flex gap-[40px]">
-      <PriceBox option="PLUS" text-color="#2D8AE7" card-class="flex-1 outline-blue-500 bg-blue-50">
+      <PriceBox option="PLUS" text-color="primary" card-class="flex-1 outline-primary bg-secondary">
         <template #price>
-          <div class="text-[24px] font-normal">
+          <div class="text-[24px] font-[400]">
             월
-            <span class="text-[36px] font-semibold text-zinc-900">8,900</span>
+            <span class="text-[36px] font-[600] text-gray-1a">8,900</span>
             원
           </div>
         </template>
         <template #button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-primary px-10 py-[10px] text-[20px] font-semibold text-white"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-primary px-10 py-[10px] text-[20px] font-[600] text-background"
           >
             현재 PLUS 서비스 이용중
             <!--{{ isPlusUser ? '현재 PLUS 서비스 이용중' : 'PLUS 서비스 이용하기' }}-->
@@ -76,22 +76,26 @@ useHead({
               전월세 사기 이력이 있는 임대인 정보를
               <br />
               고려하여
-              <span class="font-normal text-primary">더 정확한 전월세 안전지수 제공</span>
+              <span class="font-[400] text-primary">더 정확한 전월세 안전지수 제공</span>
             </div>
           </div>
         </template>
       </PriceBox>
 
-      <PriceBox option="Free" text-color="#1A1A1A" card-class="flex-1 outline-zinc-300 bg-white">
+      <PriceBox
+        option="Free"
+        text-color="gray-1a"
+        card-class="flex-1 outline-gray-d9 bg-background"
+      >
         <template #price>
-          <div class="text-[36px] font-semibold text-zinc-900">
+          <div class="text-[36px] font-[600] text-gray-1a">
             0
-            <span class="text-[20px] font-normal text-zinc-900">원</span>
+            <span class="text-[20px] font-[400] text-gray-1a">원</span>
           </div>
         </template>
         <template #button>
           <button
-            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-[#B4B4B4] px-10 py-[10px] text-[20px] font-semibold text-white"
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-[10px] bg-gray-b4 px-10 py-[10px] text-[20px] font-[600] text-background"
           >
             서비스 구독 취소하기
             <!--{{ isPlusUser ? '서비스 구독 취소하기' : '현재 사용 서비스' }}-->
diff --git a/app/pages/quiz/Correct.vue b/app/pages/quiz/Correct.vue
index d03e7a0..19a4792 100644
--- a/app/pages/quiz/Correct.vue
+++ b/app/pages/quiz/Correct.vue
@@ -1,10 +1,10 @@
 <template>
   <Explain :correct="true">
     <template #result>
-      <div class="mb-[30px] text-[48px] font-[700] text-[#2D8AE7]">정답입니다.</div>
+      <div class="mb-[30px] text-[48px] font-[700] text-primary">정답입니다.</div>
     </template>
     <template #resultExplain>
-      <div class="text-[28px] font-[600] text-[#1A1A1A]">
+      <div class="text-[28px] font-[600] text-gray-1a">
         전입신고를 하면 확정일자가 자동으로 부여된다.
       </div>
     </template>
diff --git a/app/pages/quiz/False.vue b/app/pages/quiz/False.vue
index a893a4d..f455716 100644
--- a/app/pages/quiz/False.vue
+++ b/app/pages/quiz/False.vue
@@ -1,10 +1,10 @@
 <template>
   <Explain :correct="false">
     <template #result>
-      <div class="mb-[30px] text-[48px] font-[700] text-[#FF615E]">오답입니다.</div>
+      <div class="mb-[30px] text-[48px] font-[700] text-destructive">오답입니다.</div>
     </template>
     <template #resultExplain>
-      <div class="text-[28px] font-[600] text-[#1A1A1A]">
+      <div class="text-[28px] font-[600] text-gray-1a">
         정답: 전입신고를 하면 확정일자가 자동으로 부여된다.
       </div>
     </template>
diff --git a/app/pages/quiz/_components/Explain.vue b/app/pages/quiz/_components/Explain.vue
index 308f2c2..2d88f15 100644
--- a/app/pages/quiz/_components/Explain.vue
+++ b/app/pages/quiz/_components/Explain.vue
@@ -4,30 +4,30 @@
       <slot name="result"></slot>
       <slot name="resultExplain"></slot>
       <div
-        class="my-[40px] h-0 w-[1003px] outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-300"
+        class="my-[40px] h-0 w-[1003px] outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-d9"
       ></div>
       <div class="flex flex-col items-start">
-        <div class="justify-start text-[28px] font-[600] leading-[50px] text-zinc-900">해설:</div>
-        <div class="mb-[50px] justify-start text-[28px] font-[600] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[600] text-gray-1a">해설:</div>
+        <div class="mb-[50px] justify-start text-[28px] font-[600] text-gray-1a">
           전입신고가 되었더라도
           <span class="text-primary">확정일자는 별도로</span>
           받아야 합니다.
         </div>
-        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[400] text-gray-1a">
           1. 보증금 보호를 위해 전입신고는 필수다.
         </div>
-        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[400] text-gray-1a">
           2. 전입신고는 동사무소나 온라인에서 할 수 있다.
         </div>
-        <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+        <div class="justify-start text-[28px] font-[400] text-gray-1a">
           4. 전입신고를 하면 주민등록 주소가 해당 집으로 변경된다.
         </div>
         <div class="mt-[40px] flex gap-[500px]">
-          <div class="justify-start text-[28px] font-[400] leading-[50px] text-zinc-900">
+          <div class="justify-start text-[28px] font-[400] text-gray-1a">
             -> 나머지 보기는 모두 맞는 사실입니다.
           </div>
           <button
-            class="item-center flex justify-center rounded-[10px] bg-primary px-[27px] py-[15px] text-[45px] text-white"
+            class="item-center flex justify-center rounded-[10px] bg-primary px-[27px] py-[15px] text-[45px] text-background"
             @click="props.correct ? handleModal() : navigateTo('/checklist')"
           >
             ->
diff --git a/app/pages/quiz/_modals/CompleteQuiz.vue b/app/pages/quiz/_modals/CompleteQuiz.vue
index 7a51b0c..688be9d 100644
--- a/app/pages/quiz/_modals/CompleteQuiz.vue
+++ b/app/pages/quiz/_modals/CompleteQuiz.vue
@@ -1,33 +1,31 @@
 <template>
-  <div
-    class="flex h-[487px] w-[676px] flex-col items-center rounded-[15px] bg-white px-[100px] py-[60px]"
-  >
+  <div class="flex flex-col items-center rounded-[15px] bg-white px-[100px] py-[60px]">
     <CheckIcon filled="false" :font-controlled="false" class="h-[95px] w-[95px]"></CheckIcon>
     <div
-      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-3xl font-semibold text-zinc-900"
+      class="mb-[20px] mt-[34px] justify-start font-['Pretendard'] text-[32px] font-[600] text-gray-1a"
     >
       문제 풀이가 완료되었습니다
     </div>
     <div class="mb-[30px] justify-start text-center">
-      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
+      <span class="font-['Pretendard'] text-[24px] font-[400] text-gray-8f">
         참여 감사합니다.
         <br />
         감사 크레딧
       </span>
-      <span class="font-['Pretendard'] text-2xl font-semibold leading-6 text-blue-500">500P</span>
-      <span class="font-['Pretendard'] text-2xl font-normal leading-6 text-neutral-400">
+      <span class="font-['Pretendard'] text-[24px] font-[600] text-primary">500P</span>
+      <span class="font-['Pretendard'] text-[24px] font-[400] text-gray-8f">
         가 적립되었습니다.
       </span>
     </div>
     <div class="flex gap-10">
       <button
-        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-[#B4B4B4] text-[26px] font-semibold text-white"
+        class="flex items-center justify-center rounded-[10px] bg-gray-b4 px-[86px] py-[22px] text-[26px] font-[600] text-background"
         @click="handleClose"
       >
         닫기
       </button>
       <button
-        class="flex h-16 w-56 items-center justify-center rounded-[10px] bg-blue-500 text-[26px] font-semibold text-white"
+        class="flex items-center justify-center rounded-[10px] bg-primary px-[50px] py-[22px] text-[26px] font-[600] text-background"
         @click="handleCreditCheck"
       >
         크레딧 확인
diff --git a/app/pages/quiz/index.vue b/app/pages/quiz/index.vue
index 1972d84..1f9b6ea 100644
--- a/app/pages/quiz/index.vue
+++ b/app/pages/quiz/index.vue
@@ -72,7 +72,7 @@ useHead({
   title: "퀴즈 풀기",
 });
 
-const selectedOption = ref<number | null>(null); //선택한 정답 저장
+const selectedOption = ref<number | null>(null);
 
 const submitQuizMutation = useMutation({
   mutationFn: async (answerData: { selectedOption: number; quizId: number; userId: number }) => {
diff --git a/app/pages/report/_components/Upload.vue b/app/pages/report/_components/Upload.vue
index b242011..ff4f302 100644
--- a/app/pages/report/_components/Upload.vue
+++ b/app/pages/report/_components/Upload.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="relative z-10 flex h-[439px] w-[341px] flex-col items-center gap-[25px]">
-    <div class="justify-start text-center text-[24px] font-[400] leading-loose text-foreground">
+    <div class="justify-start text-center text-[24px] font-[400] text-foreground">
       {{ fileName }}
     </div>
-    <div
-      class="flex w-[341px] flex-col items-center rounded-[15px] bg-secondary px-[40px] py-[47px]"
-    >
+    <div class="flex flex-col items-center rounded-[15px] bg-secondary px-[40px] py-[47px]">
       <CloudIcon
         alt="cloud"
         class="mb-[20px] h-[60px] w-[60px]"
@@ -13,7 +11,7 @@
         :font-controlled="false"
       />
       <button
-        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[8px] text-center text-[18px] font-[500] leading-7 text-gray-fe"
+        class="mb-[40px] justify-start whitespace-nowrap rounded-[10px] bg-primary px-[30px] py-[8px] text-center text-[18px] font-[500] text-gray-fe"
         @click="openModal"
       >
         {{ btnName }}
@@ -24,8 +22,8 @@
         - 업로드 유의사항 -
       </div>
       <div class="flex flex-col justify-center text-center">
-        <div class="text-[20px] font-normal text-gray-8f">파일 형식 : PDF 지원 (1개)</div>
-        <div class="text-[20px] font-normal text-gray-8f">파일 크기 : 50MB 이내</div>
+        <div class="text-[20px] font-[400] text-gray-8f">파일 형식 : PDF 지원 (1개)</div>
+        <div class="text-[20px] font-[400] text-gray-8f">파일 크기 : 50MB 이내</div>
       </div>
     </div>
     <div class="flex flex-col items-center justify-center gap-[15px]">
@@ -33,7 +31,7 @@
         업로드 된 파일
       </div>
       <div
-        class="flex h-[90px] w-[341px] items-center justify-center gap-[30px] rounded-[10px] border border-gray-8f bg-background"
+        class="flex items-center justify-center gap-[30px] rounded-[10px] border border-gray-8f bg-background px-[30px] py-[18px]"
       >
         <div class="justify-start text-center text-[20px] font-[400] text-foreground">
           {{ displayFileName }}
diff --git a/app/pages/report/_modals/UploadComplete.vue b/app/pages/report/_modals/UploadComplete.vue
index fd3ba84..535a3e1 100644
--- a/app/pages/report/_modals/UploadComplete.vue
+++ b/app/pages/report/_modals/UploadComplete.vue
@@ -9,13 +9,13 @@
       신고 접수가 완료되었습니다.
     </div>
     <div class="mb-[30px] justify-start text-center">
-      <span class="text-[24px] font-[400] leading-6 text-gray-8f">
+      <span class="text-[24px] font-[400] text-gray-8f">
         소중한 신고 감사합니다.
         <br />
         감사 크레딧
       </span>
-      <span class="text-[24px] font-[600] leading-6 text-primary">500P</span>
-      <span class="text-[24px] font-[400] leading-6 text-gray-8f">가 적립되었습니다.</span>
+      <span class="text-[24px] font-[600] text-primary">500P</span>
+      <span class="text-[24px] font-[400] text-gray-8f">가 적립되었습니다.</span>
     </div>
     <div class="flex gap-10">
       <button
diff --git a/app/pages/report/index.vue b/app/pages/report/index.vue
index b5691b4..715a036 100644
--- a/app/pages/report/index.vue
+++ b/app/pages/report/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="mt-[30px] flex flex-col items-center">
-    <div class="flex flex-col items-center justify-center leading-10">
-      <div class="text-[28px] font-bold leading-10 text-primary">
+    <div class="flex flex-col items-center justify-center">
+      <div class="text-[28px] font-[700] text-primary">
         신고해주신 정보는 다른 임차인들의 피해 예방을 위해 소중히 활용 됩니다.
       </div>
-      <div class="text-[28px] font-bold leading-10 text-primary">
+      <div class="text-[28px] font-[700] text-primary">
         신고시 소중한 제보에 감사한 마음을 담아 크레딧을 드립니다.
       </div>
       <div class="mt-[50px] flex h-[643px] justify-center gap-[80px]">
@@ -24,7 +24,7 @@
       </div>
       <button
         :class="[
-          'mb-[160px] mt-[35px] flex h-20 w-[762px] items-center justify-center rounded-[10px] text-3xl font-[600]',
+          'mb-[160px] mt-[35px] flex items-center justify-center rounded-[10px] px-[332px] py-[28px] text-[28px] font-[600]',
           fileStore.canSubmit ? 'bg-primary text-background' : 'bg-gray-b4 text-background',
         ]"
         :disabled="!fileStore.canSubmit"