diff --git a/app/FAQ/_components/ScreenQAPage.tsx b/app/FAQ/_components/ScreenQAPage.tsx
index 208e671..d104d8d 100644
--- a/app/FAQ/_components/ScreenQAPage.tsx
+++ b/app/FAQ/_components/ScreenQAPage.tsx
@@ -22,7 +22,7 @@ const ScreenQAPage = () => {
         {QA_LIST.map((item) => (
           <div
             key={item.question}
-            className="flex flex-col gap-3 rounded-[24px] border border-white/30 bg-white/40 p-5 shadow-[0_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[20px]"
+            className="flex flex-col gap-3 rounded-3xl border border-white/30 bg-white/40 p-5 shadow-[0_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[20px]"
           >
             <div className="flex gap-2">
               <span className="typo-18-700 text-color-brand-primary-flame">
diff --git a/app/_components/LoginMethodDrawer.tsx b/app/_components/LoginMethodDrawer.tsx
index 223b2ea..4882437 100644
--- a/app/_components/LoginMethodDrawer.tsx
+++ b/app/_components/LoginMethodDrawer.tsx
@@ -29,7 +29,7 @@
 //       </div>
 //       <DrawerContent
 //         showHandle={false}
-//         className="mx-auto flex h-auto min-h-[44.33dvh] w-full flex-col items-center px-4 pt-6 pb-[32px] md:max-w-[430px]"
+//         className="mx-auto flex h-auto min-h-[44.33dvh] w-full flex-col items-center px-4 pt-6 pb-8 md:max-w-[430px]"
 //       >
 //         <DrawerTitle className="sr-only">다른 로그인 방법</DrawerTitle>
 //         <div className="flex w-full flex-col items-start gap-2">
diff --git a/app/adminpage/dashboard/_components/AdminDashboard.tsx b/app/adminpage/dashboard/_components/AdminDashboard.tsx
index bae76c1..2efdea6 100644
--- a/app/adminpage/dashboard/_components/AdminDashboard.tsx
+++ b/app/adminpage/dashboard/_components/AdminDashboard.tsx
@@ -24,7 +24,8 @@ export default function AdminDashboard() {
   } = useAdminOrders();
   const { status: socketStatus } = useAdminOrderSocket();
 
-  const orders = ordersData?.data ?? [];
+  // useAdminOrders가 이미 content 배열만 추출하여 반환하므로 바로 사용
+  const orders = ordersData ?? [];
 
   // PENDING 주문을 먼저, 나머지는 뒤에
   const sortedOrders = [...orders].sort((a, b) => {
diff --git a/app/adminpage/dashboard/page.tsx b/app/adminpage/dashboard/page.tsx
index fb22f65..9b89800 100644
--- a/app/adminpage/dashboard/page.tsx
+++ b/app/adminpage/dashboard/page.tsx
@@ -5,6 +5,11 @@ import {
 } from "@tanstack/react-query";
 import { serverApi } from "@/lib/server-api";
 import AdminDashboard from "./_components/AdminDashboard";
+import {
+  AdminOrder,
+  ApiResponse,
+  PaginatedResponse,
+} from "@/hooks/admin/useAdminOrders";
 
 export default async function AdminDashboardPage() {
   const queryClient = new QueryClient();
@@ -13,10 +18,25 @@ export default async function AdminDashboardPage() {
   await queryClient.prefetchQuery({
     queryKey: ["adminOrders"],
     queryFn: async () => {
-      const res = await serverApi.get({
-        path: "/api/v1/admin/payment/requests",
-      });
-      return res.data;
+      let allOrders: AdminOrder[] = [];
+      let page = 0;
+      let hasNext = true;
+
+      while (hasNext) {
+        const res = await serverApi.get<
+          ApiResponse<PaginatedResponse<AdminOrder>>
+        >({
+          path: `/api/v1/admin/payment/requests?page=${page}&size=100&sort=requestedAt,desc`,
+        });
+        const responseData = res.data?.data;
+        if (!responseData) break;
+
+        allOrders = [...allOrders, ...(responseData.content || [])];
+        hasNext = responseData.hasNext;
+        page += 1;
+      }
+
+      return allOrders;
     },
   });
 
diff --git a/app/adminpage/main/_components/MenuCard.tsx b/app/adminpage/main/_components/MenuCard.tsx
index ff03963..6ad91c8 100644
--- a/app/adminpage/main/_components/MenuCard.tsx
+++ b/app/adminpage/main/_components/MenuCard.tsx
@@ -36,7 +36,7 @@ export default function MenuCard({ item }: MenuCardProps) {
             <h3 className="text-base font-semibold text-[#6b7094]">
               {item.title}
             </h3>
-            <span className="rounded-md bg-[#1e2030] px-2 py-0.5 text-[10px] font-bold tracking-wider text-[#4a4e69] uppercase">
+            <span className="typo-10-700 rounded-md bg-[#1e2030] px-2 py-0.5 tracking-wider text-[#4a4e69] uppercase">
               준비 중
             </span>
           </div>
@@ -70,7 +70,7 @@ export default function MenuCard({ item }: MenuCardProps) {
         </div>
 
         {item.badge && (
-          <span className="flex items-center gap-1 rounded-full bg-[#ff4d61]/10 px-2.5 py-1 text-[10px] font-bold tracking-wider text-[#ff4d61] uppercase">
+          <span className="typo-10-700 flex items-center gap-1 rounded-full bg-[#ff4d61]/10 px-2.5 py-1 tracking-wider text-[#ff4d61] uppercase">
             <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-[#ff4d61]" />
             {item.badge}
           </span>
diff --git a/app/adminpage/notices/_components/AdminNotices.tsx b/app/adminpage/notices/_components/AdminNotices.tsx
index 7e01602..acb8d19 100644
--- a/app/adminpage/notices/_components/AdminNotices.tsx
+++ b/app/adminpage/notices/_components/AdminNotices.tsx
@@ -165,7 +165,7 @@ function NoticeForm({
             placeholder="공지사항 제목을 입력하세요"
             className="rounded-xl border border-[#2a2d42] bg-[#0f1117] px-4 py-3 text-sm text-white placeholder:text-[#4a4e69] focus:border-[#10b981] focus:outline-none"
           />
-          <span className="text-right text-[10px] text-[#4a4e69]">
+          <span className="typo-10-500 text-right text-[#4a4e69]">
             {title.length}/200
           </span>
         </div>
@@ -396,7 +396,7 @@ export default function AdminNotices() {
                       {notice.title}
                     </h3>
                     <span
-                      className={`flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-bold ${status.bg} ${status.color}`}
+                      className={`typo-10-700 flex items-center gap-1 rounded-full px-2 py-0.5 ${status.bg} ${status.color}`}
                     >
                       {status.label}
                     </span>
diff --git a/app/adminpage/products/_components/AdminProducts.tsx b/app/adminpage/products/_components/AdminProducts.tsx
index 77ef953..6781b1c 100644
--- a/app/adminpage/products/_components/AdminProducts.tsx
+++ b/app/adminpage/products/_components/AdminProducts.tsx
@@ -174,18 +174,18 @@ export default function AdminProducts() {
                   {/* 상태 배지 */}
                   <div className="flex items-center gap-1.5">
                     {product.isActive ? (
-                      <span className="flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[10px] font-bold text-emerald-400">
+                      <span className="typo-10-700 flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-emerald-400">
                         <ToggleRight size={10} />
                         판매 중
                       </span>
                     ) : (
-                      <span className="flex items-center gap-1 rounded-full bg-red-500/10 px-2 py-0.5 text-[10px] font-bold text-red-400">
+                      <span className="typo-10-700 flex items-center gap-1 rounded-full bg-red-500/10 px-2 py-0.5 text-red-400">
                         <ToggleLeft size={10} />
                         판매 중지
                       </span>
                     )}
                     {product.isBundle && (
-                      <span className="rounded-full bg-[#6366f1]/10 px-2 py-0.5 text-[10px] font-bold text-[#818cf8]">
+                      <span className="typo-10-700 rounded-full bg-[#6366f1]/10 px-2 py-0.5 text-[#818cf8]">
                         번들
                       </span>
                     )}
@@ -222,7 +222,7 @@ export default function AdminProducts() {
                   <p className="text-sm font-bold text-white">
                     {formatPrice(product.price)}
                   </p>
-                  <p className="text-[10px] text-[#4a4e69]">
+                  <p className="typo-10-500 text-[#4a4e69]">
                     순서: {product.displayOrder}
                   </p>
                 </div>
diff --git a/app/adminpage/stats/_components/AdminStats.tsx b/app/adminpage/stats/_components/AdminStats.tsx
index dd692fd..7273e8d 100644
--- a/app/adminpage/stats/_components/AdminStats.tsx
+++ b/app/adminpage/stats/_components/AdminStats.tsx
@@ -328,7 +328,7 @@ export default function AdminStats() {
 
                   {/* 중앙 성비 요약 라벨 */}
                   <div className="absolute flex flex-col items-center justify-center text-center">
-                    <span className="text-[10px] font-bold tracking-wider text-[#6b7094] uppercase">
+                    <span className="typo-10-700 tracking-wider text-[#6b7094] uppercase">
                       Dominant
                     </span>
                     <span className="text-xl font-extrabold text-white">
@@ -429,7 +429,7 @@ export default function AdminStats() {
                     </div>
                     <div className="mt-2 grid grid-cols-2 gap-4">
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           남성 평균
                         </span>
                         <span className="text-sm font-extrabold text-blue-400">
@@ -437,7 +437,7 @@ export default function AdminStats() {
                         </span>
                       </div>
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           여성 평균
                         </span>
                         <span className="text-sm font-extrabold text-rose-400">
@@ -462,7 +462,7 @@ export default function AdminStats() {
                     </div>
                     <div className="mt-2 grid grid-cols-2 gap-4">
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           남성 평균
                         </span>
                         <span className="text-sm font-extrabold text-blue-400">
@@ -470,7 +470,7 @@ export default function AdminStats() {
                         </span>
                       </div>
                       <div>
-                        <span className="block text-[10px] text-[#6b7094]">
+                        <span className="typo-10-500 block text-[#6b7094]">
                           여성 평균
                         </span>
                         <span className="text-sm font-extrabold text-rose-400">
diff --git a/app/adminpage/users/_components/AdminMembers.tsx b/app/adminpage/users/_components/AdminMembers.tsx
index 1837bf6..fddd594 100644
--- a/app/adminpage/users/_components/AdminMembers.tsx
+++ b/app/adminpage/users/_components/AdminMembers.tsx
@@ -312,7 +312,7 @@ export default function AdminMembers() {
                       {member.nickname}
                     </span>
                     <span
-                      className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${
+                      className={`typo-10-700 rounded-full px-2 py-0.5 ${
                         member.gender === "FEMALE"
                           ? "bg-rose-500/10 text-rose-400"
                           : "bg-blue-500/10 text-blue-400"
@@ -339,7 +339,7 @@ export default function AdminMembers() {
                       height={18}
                     />
                     <div className="flex flex-col">
-                      <span className="text-[10px] text-[#6b7094]">매칭권</span>
+                      <span className="typo-10-500 text-[#6b7094]">매칭권</span>
                       <span className="text-xs font-bold text-white">
                         {member.matchingTicketCount}개
                       </span>
@@ -354,7 +354,7 @@ export default function AdminMembers() {
                       height={18}
                     />
                     <div className="flex flex-col">
-                      <span className="text-[10px] text-[#6b7094]">옵션권</span>
+                      <span className="typo-10-500 text-[#6b7094]">옵션권</span>
                       <span className="text-xs font-bold text-white">
                         {member.optionTicketCount}개
                       </span>
@@ -480,7 +480,7 @@ export default function AdminMembers() {
                     height={20}
                   />
                   <span className="text-xs font-bold text-white">매칭권</span>
-                  <span className="text-[10px] text-[#6b7094]">
+                  <span className="typo-10-500 text-[#6b7094]">
                     (보유: {editingMember.matchingTicketCount}개)
                   </span>
                 </div>
@@ -572,7 +572,7 @@ export default function AdminMembers() {
                     height={20}
                   />
                   <span className="text-xs font-bold text-white">옵션권</span>
-                  <span className="text-[10px] text-[#6b7094]">
+                  <span className="typo-10-500 text-[#6b7094]">
                     (보유: {editingMember.optionTicketCount}개)
                   </span>
                 </div>
@@ -670,7 +670,7 @@ export default function AdminMembers() {
 
             {/* 실시간 계산결과 미리보기 */}
             <div className="mt-5 space-y-2 rounded-xl border border-[#1e2030] bg-[#1e2030]/30 p-3 text-xs">
-              <div className="mb-1 text-[10px] font-bold tracking-wider text-[#8b8fa3] uppercase">
+              <div className="typo-10-700 mb-1 tracking-wider text-[#8b8fa3] uppercase">
                 최종 수량 변동 예상
               </div>
 
diff --git a/app/chat-list/_components/ScreenChatList.tsx b/app/chat-list/_components/ScreenChatList.tsx
index 860d7e8..c725e72 100644
--- a/app/chat-list/_components/ScreenChatList.tsx
+++ b/app/chat-list/_components/ScreenChatList.tsx
@@ -58,7 +58,7 @@ function ChatListRow({ item }: { item: ChatListItem }) {
         {item.unread &&
         item.unreadCount !== undefined &&
         item.unreadCount > 0 ? (
-          <div className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-[#FF4D61] px-1.5 text-[11px] leading-none font-bold text-white shadow-sm">
+          <div className="flex h-5 min-w-5 items-center justify-center rounded-full bg-[#FF4D61] px-1.5 text-[11px] leading-none font-bold text-white shadow-sm">
             {item.unreadCount > 99 ? "99+" : item.unreadCount}
           </div>
         ) : (
diff --git a/app/chat/[chatid]/_components/PartnerProfileModal.tsx b/app/chat/[chatid]/_components/PartnerProfileModal.tsx
index da1889d..e424479 100644
--- a/app/chat/[chatid]/_components/PartnerProfileModal.tsx
+++ b/app/chat/[chatid]/_components/PartnerProfileModal.tsx
@@ -63,12 +63,12 @@ const PartnerProfileModal = ({
           {/* 카드 + 닫기 버튼 그룹 */}
           <div className="relative flex max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] flex-col items-center gap-4">
             {/* 모달 컨테이너 (MatchingListCard 스타일 계승) */}
-            <div className="flex w-full flex-col overflow-hidden rounded-[24px] shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
+            <div className="flex w-full flex-col overflow-hidden rounded-3xl shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
               {/* 카드 본체 (내부 내용에 따라 높이 조절, 최대 높이시 스크롤) */}
               <div className="scrollbar-hide flex w-full flex-col overflow-y-auto border border-b-0 border-white/30 bg-white px-4 pt-6 pb-4">
                 {/* 헤더 */}
                 <div className="flex w-full items-center gap-4">
-                  <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-[2px] shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
+                  <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-0.5 shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
                     <div className="relative h-11 w-11 overflow-hidden rounded-full bg-[#D9D9D9]">
                       <Image
                         src={getProfileImageUrl(
@@ -104,7 +104,7 @@ const PartnerProfileModal = ({
                         )}
                       />
                     </button>
-                    <div className="flex h-4 w-4 flex-col items-center justify-center gap-[2px]">
+                    <div className="flex h-4 w-4 flex-col items-center justify-center gap-0.5">
                       <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />
                       <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />
                       <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />
diff --git a/app/chat/[chatid]/_components/ScreenChatRoom.tsx b/app/chat/[chatid]/_components/ScreenChatRoom.tsx
index 0497bf7..e01fa3d 100644
--- a/app/chat/[chatid]/_components/ScreenChatRoom.tsx
+++ b/app/chat/[chatid]/_components/ScreenChatRoom.tsx
@@ -87,7 +87,7 @@ const IncomingMessage = ({
           <div className="max-w-[244px] rounded-[16px_16px_16px_8px] bg-white p-3 text-sm leading-[140%] text-[#1A1A1A] shadow-[0px_4px_16px_rgba(0,0,0,0.12)]">
             {message.text}
           </div>
-          <div className="flex items-center gap-2 text-[10px] leading-[130%] font-medium">
+          <div className="typo-10-500 flex items-center gap-2 leading-[130%]">
             <span className="text-[#B3B3B3]">{message.time}</span>
             {message.readCount === 1 && (
               <span className="text-[#999999]">1</span>
@@ -102,7 +102,7 @@ const IncomingMessage = ({
 const OutgoingMessage = ({ message }: { message: ChatMessage }) => {
   return (
     <div className="flex w-full items-end justify-end gap-2">
-      <div className="flex items-center gap-2 text-[10px] leading-[130%] font-medium">
+      <div className="typo-10-500 flex items-center gap-2 leading-[130%]">
         {message.readCount === 1 && <span className="text-[#999999]">1</span>}
         <span className="text-[#B3B3B3]">{message.time}</span>
       </div>
@@ -391,7 +391,7 @@ export default function ScreenChatRoom({ chatId }: ScreenChatRoomProps) {
             <Loader2 className="h-8 w-8 animate-spin text-[#FF4D61]" />
           </div>
         ) : messages.length === 0 ? (
-          <div className="absolute top-1/2 left-1/2 flex h-[192.32px] w-[285px] -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-between gap-4 rounded-[24px] border border-white/30 bg-white/50 px-6 py-8 shadow-[0px_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[15px]">
+          <div className="absolute top-1/2 left-1/2 flex h-[192.32px] w-[285px] -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-between gap-4 rounded-3xl border border-white/30 bg-white/50 px-6 py-8 shadow-[0px_4px_16px_rgba(0,0,0,0.05)] backdrop-blur-[15px]">
             <div className="flex h-[92.32px] w-[116px] flex-col items-center justify-center gap-3">
               <Image
                 src="/chat/heart.png"
@@ -463,7 +463,7 @@ export default function ScreenChatRoom({ chatId }: ScreenChatRoomProps) {
         className="fixed right-0 bottom-5 left-0 z-20 pb-2"
         style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
       >
-        <div className="relative mx-auto flex h-12 w-[calc(100%-32px)] max-w-93.75 items-center rounded-[24px] border border-white/30 bg-white/70 pr-[52px] pl-4 shadow-[0px_4px_8px_rgba(0,0,0,0.08),0px_0px_16px_rgba(0,0,0,0.1)] backdrop-blur-[15px]">
+        <div className="relative mx-auto flex h-12 w-[calc(100%-32px)] max-w-93.75 items-center rounded-3xl border border-white/30 bg-white/70 pr-[52px] pl-4 shadow-[0px_4px_8px_rgba(0,0,0,0.08),0px_0px_16px_rgba(0,0,0,0.1)] backdrop-blur-[15px]">
           <input
             ref={inputRef}
             type="text"
@@ -483,7 +483,7 @@ export default function ScreenChatRoom({ chatId }: ScreenChatRoomProps) {
             disabled={!isSendEnabled}
             onClick={handleSendMessage}
             className={cn(
-              "absolute top-1/2 right-1 flex h-10 w-12 shrink-0 -translate-y-1/2 items-center justify-center rounded-[24px] border border-white/30 transition-colors",
+              "absolute top-1/2 right-1 flex h-10 w-12 shrink-0 -translate-y-1/2 items-center justify-center rounded-3xl border border-white/30 transition-colors",
               isSendEnabled
                 ? "bg-button-primary text-button-primary-text-default"
                 : "bg-[#E5E5E5] text-[#CCCCCC]",
diff --git a/app/extra-info/detail/_components/ScreenExtraInfoDetail.tsx b/app/extra-info/detail/_components/ScreenExtraInfoDetail.tsx
index 8677b95..a5cb46f 100644
--- a/app/extra-info/detail/_components/ScreenExtraInfoDetail.tsx
+++ b/app/extra-info/detail/_components/ScreenExtraInfoDetail.tsx
@@ -89,7 +89,7 @@ const ScreenExtraInfoDetail = () => {
         <div className="flex flex-row items-center justify-between gap-2">
           <div className="flex flex-col">
             <label className="typo-16-600 text-black">제 장점은요...</label>
-            <p className="typo-14-500 flex h-[32px] items-center text-gray-400">
+            <p className="typo-14-500 flex h-8 items-center text-gray-400">
               내가 생각하는 나의 장점을 골라주세요
             </p>
           </div>
@@ -111,7 +111,7 @@ const ScreenExtraInfoDetail = () => {
             {advantages.map((adv) => (
               <div
                 key={adv}
-                className="flex h-8 items-center justify-center gap-[10px] rounded-full border border-[#DFDFDF] bg-[#B3B3B3]/15 px-3 py-2 backdrop-blur-[50px]"
+                className="flex h-8 items-center justify-center gap-2.5 rounded-full border border-[#DFDFDF] bg-[#B3B3B3]/15 px-3 py-2 backdrop-blur-[50px]"
               >
                 <span className="typo-14-500 text-black">{adv}</span>
               </div>
@@ -128,7 +128,7 @@ const ScreenExtraInfoDetail = () => {
                 key={opt.key}
                 type="button"
                 className={cn(
-                  "flex h-[48px] min-w-0 flex-1 flex-col items-center justify-center rounded-[16px] border px-0 transition-colors",
+                  "flex h-12 min-w-0 flex-1 flex-col items-center justify-center rounded-2xl border px-0 transition-colors",
                   contactType === opt.key
                     ? "border-gray-100 bg-[#FFFFFF]"
                     : "border-[#E8E8E8]",
diff --git a/app/hobby-select/_components/HobbySearchInput.tsx b/app/hobby-select/_components/HobbySearchInput.tsx
index 09525c3..7a9d492 100644
--- a/app/hobby-select/_components/HobbySearchInput.tsx
+++ b/app/hobby-select/_components/HobbySearchInput.tsx
@@ -19,7 +19,7 @@ const HobbySearchInput = ({ onSearch }: HobbySearchInputProps) => {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex h-9 w-full items-center rounded-[12px] border border-[#C2C2C2] bg-[#B3B3B31A]"
+      className="flex h-9 w-full items-center rounded-xl border border-[#C2C2C2] bg-[#B3B3B31A]"
     >
       <input
         ref={inputRef}
diff --git a/app/main/_components/ChargeRequestWaiting.tsx b/app/main/_components/ChargeRequestWaiting.tsx
index d8a72f1..8030a93 100644
--- a/app/main/_components/ChargeRequestWaiting.tsx
+++ b/app/main/_components/ChargeRequestWaiting.tsx
@@ -7,7 +7,7 @@ const ChargeRequestWaiting = () => {
   const { refetch, isFetching } = useRequestStatus();
 
   return (
-    <div className="flex h-[120px] w-full flex-col items-center justify-center gap-[11px] rounded-[24px] border border-white/30 bg-white/50 p-6 shadow-[0px_0px_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
+    <div className="flex h-[120px] w-full flex-col items-center justify-center gap-[11px] rounded-3xl border border-white/30 bg-white/50 p-6 shadow-[0px_0px_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
       <div className="flex h-[72px] w-full items-center gap-4">
         {/* 커스텀 7도트 로더 영역 */}
         <div className="relative flex h-10 w-10 shrink-0 items-center justify-center">
@@ -34,7 +34,7 @@ const ChargeRequestWaiting = () => {
         {/* 텍스트 영역 */}
         <div className="flex flex-1 flex-col items-start gap-2">
           {/* 타이틀 행 */}
-          <div className="flex w-full items-center justify-between gap-[10px]">
+          <div className="flex w-full items-center justify-between gap-2.5">
             <span className="typo-20-600 text-color-text-black leading-6">
               대기중
             </span>
diff --git a/app/main/_components/FloatingButton.tsx b/app/main/_components/FloatingButton.tsx
index c4e4bed..fc3656a 100644
--- a/app/main/_components/FloatingButton.tsx
+++ b/app/main/_components/FloatingButton.tsx
@@ -74,15 +74,15 @@ const FloatingButton = ({ fixed = false }: FloatingButtonProps) => {
         className="flex shrink-0 items-center gap-1.5 transition-opacity hover:opacity-70 focus:outline-none"
       >
         <Send size={18} className="text-[#454545]" />
-        <span className="text-[12px] leading-[14px] font-semibold whitespace-nowrap text-[#454545]">
+        <span className="text-xs leading-[14px] font-semibold whitespace-nowrap text-[#454545]">
           채팅
         </span>
         {/* 배지 영역을 항상 렌더링하고 너비/스케일/투명도를 동시 트랜지션 처리하여 좌우 흔들림 완벽 제거 */}
         <div
           className={cn(
-            "flex h-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#FF4D61] text-[10px] leading-[110%] font-semibold text-white transition-all duration-300",
+            "typo-10-500 flex h-4 shrink-0 items-center justify-center overflow-hidden rounded-full bg-[#FF4D61] leading-[110%] text-white transition-all duration-300",
             isMounted && hasUnread
-              ? "ml-0.5 max-w-[28px] min-w-[16px] scale-100 px-1 opacity-100"
+              ? "ml-0.5 max-w-7 min-w-4 scale-100 px-1 opacity-100"
               : "ml-0 max-w-0 min-w-0 scale-0 px-0 opacity-0",
           )}
         >
@@ -99,7 +99,7 @@ const FloatingButton = ({ fixed = false }: FloatingButtonProps) => {
         className="flex shrink-0 items-center gap-1.5 transition-opacity hover:opacity-70 focus:outline-none"
       >
         <UserRound size={18} className="text-[#454545]" />
-        <span className="text-[12px] leading-[14px] font-semibold whitespace-nowrap text-[#454545]">
+        <span className="text-xs leading-[14px] font-semibold whitespace-nowrap text-[#454545]">
           마이
         </span>
       </Link>
diff --git a/app/main/_components/FooterButtonList.tsx b/app/main/_components/FooterButtonList.tsx
index e9a95c1..7045b38 100644
--- a/app/main/_components/FooterButtonList.tsx
+++ b/app/main/_components/FooterButtonList.tsx
@@ -12,7 +12,7 @@ const MatchingButton = () => {
         background:
           "linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #E83ABC 0%, #FF775E 100%) border-box",
       }}
-      className="flex h-[13.11vh] w-full flex-col items-center justify-center gap-1 rounded-[24px] border border-transparent backdrop-blur-[50px]"
+      className="flex h-[13.11vh] w-full flex-col items-center justify-center gap-1 rounded-3xl border border-transparent backdrop-blur-[50px]"
     >
       <div className="flex items-center gap-2">
         <span className="typo-24-600 text-gray-900">AI 매칭하기</span>
@@ -41,7 +41,7 @@ const SearchMyListButton = () => {
         background:
           "radial-gradient(100% 99.65% at 0% -4.11%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%)",
       }}
-      className="flex h-[56px] flex-1 items-center justify-center rounded-[16px] border-[1.5px] border-white/30 shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]"
+      className="flex h-14 flex-1 items-center justify-center rounded-2xl border-[1.5px] border-white/30 shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]"
     >
       <div className="flex items-center gap-3">
         <span className="typo-18-600 text-color-gray-700">🔍</span>
@@ -60,7 +60,7 @@ const QAButton = () => {
         background:
           "radial-gradient(100% 99.65% at 0% -4.11%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%)",
       }}
-      className="flex h-[56px] flex-1 items-center justify-center rounded-[16px] border-[1.5px] border-white/30 shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]"
+      className="flex h-14 flex-1 items-center justify-center rounded-2xl border-[1.5px] border-white/30 shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]"
     >
       <div className="flex items-center gap-3">
         <span className="typo-18-600 text-color-gray-700">📖</span>
diff --git a/app/main/_components/NoContactSection.tsx b/app/main/_components/NoContactSection.tsx
index 91061db..72d88b3 100644
--- a/app/main/_components/NoContactSection.tsx
+++ b/app/main/_components/NoContactSection.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 const NoContactSection = () => {
   return (
-    <section className="flex h-[29.56vh] w-full flex-col items-center justify-center gap-4 rounded-[24px] border border-white/30 bg-white/50">
+    <section className="flex h-[29.56vh] w-full flex-col items-center justify-center gap-4 rounded-3xl border border-white/30 bg-white/50">
       <Image src="/main/no-contact.png" alt="" width={79} height={48} />
       <span className="typo-16-400 text-center leading-none text-gray-600">
         아직 매칭된 상대가 없어요.
diff --git a/app/main/_components/NoticeSection.tsx b/app/main/_components/NoticeSection.tsx
index 960e3c0..9c5c190 100644
--- a/app/main/_components/NoticeSection.tsx
+++ b/app/main/_components/NoticeSection.tsx
@@ -16,9 +16,7 @@ const NoticeSection = ({ title, detail }: NoticeSectionProps) => {
   return (
     <section
       className={`flex w-full flex-col justify-center border border-white/30 bg-white/50 shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px] transition-all duration-300 ease-in-out ${
-        isExpanded
-          ? "gap-4 rounded-[24px] p-6"
-          : "gap-0 rounded-[16px] px-5 py-3"
+        isExpanded ? "gap-4 rounded-3xl p-6" : "gap-0 rounded-2xl px-5 py-3"
       }`}
     >
       {/* Header: 클릭 시 접힘/펼침 토글 */}
@@ -30,9 +28,7 @@ const NoticeSection = ({ title, detail }: NoticeSectionProps) => {
       >
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <Megaphone className="h-4 w-4 shrink-0 text-[#E83ABC]" />
-          <span className="typo-16-600 truncate font-semibold text-[#373737]">
-            {title}
-          </span>
+          <span className="typo-16-600 truncate text-[#373737]">{title}</span>
         </div>
         <ChevronDown
           className={`h-4 w-4 shrink-0 text-[#858585] transition-transform duration-300 ${
diff --git a/app/main/_components/ProfileCard.tsx b/app/main/_components/ProfileCard.tsx
index d18b6af..8428b51 100644
--- a/app/main/_components/ProfileCard.tsx
+++ b/app/main/_components/ProfileCard.tsx
@@ -46,7 +46,7 @@ const ProfileHeader = ({
 }) => (
   <div className="flex w-full items-center gap-4">
     {/* 프로필 이미지 (48x48 container, 44x44 image) */}
-    <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-[2px] shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
+    <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-0.5 shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
       <div className="relative h-11 w-11 overflow-hidden rounded-full bg-[#D9D9D9]">
         <Image
           src={profile.profileImageUrl || "/default-profile.png"}
@@ -97,7 +97,7 @@ const ProfileHeader = ({
       <button
         type="button"
         aria-label="더 보기"
-        className="flex h-4 w-4 flex-col items-center justify-center gap-[2px]"
+        className="flex h-4 w-4 flex-col items-center justify-center gap-0.5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="bg-color-gray-800 h-[2.57px] w-[2.57px] rounded-full" />
@@ -290,7 +290,7 @@ const ProfileCard = ({
   };
 
   return (
-    <div className="flex w-full flex-col overflow-hidden rounded-[24px] border border-b-0 border-white/30 bg-white/50 backdrop-blur-[50px]">
+    <div className="flex w-full flex-col overflow-hidden rounded-3xl border border-b-0 border-white/30 bg-white/50 backdrop-blur-[50px]">
       {/* 카드 본체 */}
       <div
         role="button"
diff --git a/app/main/_components/RouletteEntrySection.tsx b/app/main/_components/RouletteEntrySection.tsx
index 2053014..2d96ecb 100644
--- a/app/main/_components/RouletteEntrySection.tsx
+++ b/app/main/_components/RouletteEntrySection.tsx
@@ -12,7 +12,7 @@ const RouletteEntrySection = () => {
     >
       <div className="flex w-15 shrink-0 flex-col items-center justify-center gap-1.5">
         <Image
-          src="/main/main-roulette.png"
+          src="/roulette/special.png"
           alt=""
           width={60}
           height={60}
diff --git a/app/matching-list/_components/MatchingListCard.tsx b/app/matching-list/_components/MatchingListCard.tsx
index 060fbdd..3fb746d 100644
--- a/app/matching-list/_components/MatchingListCard.tsx
+++ b/app/matching-list/_components/MatchingListCard.tsx
@@ -21,7 +21,7 @@ import {
 
 /* ── 태그 컴포넌트 ── */
 const Tag = ({ text }: { text: string }) => (
-  <div className="flex h-8 items-center justify-center gap-[10px] rounded-full border border-[#DFDFDF] bg-[#B3B3B31A] px-3 py-2 backdrop-blur-[50px]">
+  <div className="flex h-8 items-center justify-center gap-2.5 rounded-full border border-[#DFDFDF] bg-[#B3B3B31A] px-3 py-2 backdrop-blur-[50px]">
     <span className="typo-14-500 text-color-text-black whitespace-nowrap">
       {text}
     </span>
@@ -42,7 +42,7 @@ const CardHeader = ({
 }) => (
   <div className="flex w-full items-center gap-4">
     {/* 프로필 이미지 (48x48 container, 44x44 image) */}
-    <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-[2px] shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
+    <div className="border-color-gray-0 flex h-12 w-12 items-center justify-center rounded-full border-2 bg-white/0 p-0.5 shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]">
       <div className="relative h-11 w-11 overflow-hidden rounded-full bg-[#D9D9D9]">
         <Image
           src={getProfileImageUrl(partner.profileImageUrl, partner.gender)}
@@ -92,7 +92,7 @@ const CardHeader = ({
       <button
         type="button"
         aria-label="더 보기"
-        className="flex h-4 w-4 flex-col items-center justify-center gap-[2px]"
+        className="flex h-4 w-4 flex-col items-center justify-center gap-0.5"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="bg-color-gray-500 h-[2.57px] w-[2.57px] rounded-full" />
@@ -262,7 +262,7 @@ const MatchingListCard = ({
   };
 
   return (
-    <div className="flex w-full flex-col overflow-hidden rounded-[24px] shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
+    <div className="flex w-full flex-col overflow-hidden rounded-3xl shadow-[0_0_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
       {/* 카드 본체 */}
       <div
         role="button"
@@ -318,7 +318,7 @@ const MatchingListCard = ({
             e.stopPropagation();
             setIsExpanded((prev) => !prev);
           }}
-          className="ml-auto flex items-center gap-1 rounded-full border border-white/20 bg-[linear-gradient(111.41deg,rgba(255,255,255,0.3)_5.28%,rgba(255,255,255,0.5)_101.41%)] px-[6px] py-[2px] backdrop-blur-[50px]"
+          className="ml-auto flex items-center gap-1 rounded-full border border-white/20 bg-[linear-gradient(111.41deg,rgba(255,255,255,0.3)_5.28%,rgba(255,255,255,0.5)_101.41%)] px-1.5 py-0.5 backdrop-blur-[50px]"
         >
           <span className="typo-10-500 text-white">
             {isExpanded ? "접기" : "펼치기"}
diff --git a/app/matching-list/_components/NoMatchingList.tsx b/app/matching-list/_components/NoMatchingList.tsx
index 8676b9c..efdbb90 100644
--- a/app/matching-list/_components/NoMatchingList.tsx
+++ b/app/matching-list/_components/NoMatchingList.tsx
@@ -23,7 +23,7 @@ const NoMatchingList = ({
   return (
     <div className="flex w-[345px] flex-col items-center gap-4">
       {/* her image */}
-      <div className="relative h-[48px] w-[78.96px]">
+      <div className="relative h-12 w-[78.96px]">
         <Image
           src="/main/no-contact.png"
           alt="her"
diff --git a/app/matching-list/_components/SortDrawer.tsx b/app/matching-list/_components/SortDrawer.tsx
index cda3492..ddc6535 100644
--- a/app/matching-list/_components/SortDrawer.tsx
+++ b/app/matching-list/_components/SortDrawer.tsx
@@ -42,7 +42,7 @@ export default function SortDrawer({
         className="rounded-t-[32px] bg-white outline-none"
         showHandle={false}
       >
-        <div className="flex flex-col items-center gap-[10px] px-6 pt-6 pb-12">
+        <div className="flex flex-col items-center gap-2.5 px-6 pt-6 pb-12">
           {/* 옵션 리스트 */}
           <div className="flex w-full flex-col gap-2">
             {SORT_OPTIONS.map((option) => {
@@ -52,12 +52,12 @@ export default function SortDrawer({
                   key={option.value}
                   type="button"
                   onClick={() => setSelected(option.value)}
-                  className={`flex w-full items-center justify-between rounded-[16px] px-4 py-[14px] transition-colors ${
+                  className={`flex w-full items-center justify-between rounded-2xl px-4 py-3.5 transition-colors ${
                     isActive ? "bg-[#F2F2F2]" : "bg-transparent"
                   }`}
                 >
                   <span
-                    className={`text-[16px] leading-[19px] font-medium ${
+                    className={`text-base leading-[19px] font-medium ${
                       isActive ? "text-[#1A1A1A]" : "text-[#999999]"
                     }`}
                   >
@@ -74,9 +74,9 @@ export default function SortDrawer({
             <button
               type="button"
               onClick={() => onSortChange(selected)}
-              className="flex w-full items-center justify-center rounded-[16px] bg-[#F2F2F2] px-4 py-4"
+              className="flex w-full items-center justify-center rounded-2xl bg-[#F2F2F2] px-4 py-4"
             >
-              <span className="text-[16px] leading-[19px] font-medium text-[#1A1A1A]">
+              <span className="text-base leading-[19px] font-medium text-[#1A1A1A]">
                 확인
               </span>
             </button>
diff --git a/app/matching-list/_components/YesMatchingList.tsx b/app/matching-list/_components/YesMatchingList.tsx
index 077516b..d679609 100644
--- a/app/matching-list/_components/YesMatchingList.tsx
+++ b/app/matching-list/_components/YesMatchingList.tsx
@@ -108,7 +108,7 @@ const YesMatchingList = ({
   return (
     <div className="flex w-full flex-col items-center gap-4 pb-10">
       {/* 검색 바 */}
-      <div className="flex h-9 w-full items-center justify-between rounded-[12px] bg-[#B3B3B31A] px-4 py-[11px]">
+      <div className="flex h-9 w-full items-center justify-between rounded-xl bg-[#B3B3B31A] px-4 py-[11px]">
         <input
           type="text"
           placeholder="닉네임, 나이, 전공, MBTI 등을 입력하세요"
diff --git a/app/matching-result/_components/MatchingResult.tsx b/app/matching-result/_components/MatchingResult.tsx
index a9a6e4e..f6b0b17 100644
--- a/app/matching-result/_components/MatchingResult.tsx
+++ b/app/matching-result/_components/MatchingResult.tsx
@@ -82,11 +82,11 @@ const MatchingResult = ({ data }: MatchingResultProps) => {
   const socialLabel = data.socialType === "KAKAO" ? "KakaoTalk" : "Instagram";
 
   return (
-    <div className="mt-6 flex w-full flex-col gap-6 rounded-[24px] border border-white/30 bg-white/50 p-6 shadow-[0px_0px_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
+    <div className="mt-6 flex w-full flex-col gap-6 rounded-3xl border border-white/30 bg-white/50 p-6 shadow-[0px_0px_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
       <div className="flex w-full flex-col gap-4">
         {/* Header Section */}
         <div className="flex w-full flex-row items-center gap-4">
-          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 border-white bg-white/0 p-[2px] shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]">
+          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-2 border-white bg-white/0 p-0.5 shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]">
             <div className="relative h-11 w-11 overflow-hidden rounded-full">
               <Image
                 src={data.profileImageUrl || "/animal/cat_female 1.png"}
diff --git a/app/matching-result/_components/ResultFooter.tsx b/app/matching-result/_components/ResultFooter.tsx
index 02b55b9..535b77f 100644
--- a/app/matching-result/_components/ResultFooter.tsx
+++ b/app/matching-result/_components/ResultFooter.tsx
@@ -133,7 +133,7 @@ const ResultFooter = ({ lastPayload }: ResultFooterProps) => {
   return (
     <div className="mt-6 flex w-full flex-col gap-3">
       {/* Top Row: Home & Mail Buttons */}
-      <div className="flex w-full flex-row gap-[10px]">
+      <div className="flex w-full flex-row gap-2.5">
         {/* Home Button */}
         <button
           onClick={handleHome}
@@ -169,7 +169,7 @@ const ResultFooter = ({ lastPayload }: ResultFooterProps) => {
       >
         {!isHolding && !isTriggered && !isPending && (
           <div
-            className="flex h-6 flex-row items-center gap-[10px] rounded-[36px] px-2 py-1 shadow-[0px_4px_16px_rgba(0,0,0,0.12)] backdrop-blur-[50px]"
+            className="flex h-6 flex-row items-center gap-2.5 rounded-[36px] px-2 py-1 shadow-[0px_4px_16px_rgba(0,0,0,0.12)] backdrop-blur-[50px]"
             style={{
               background:
                 "radial-gradient(100% 99.65% at 0% -4.11%, #FFFFFF 0%, rgba(255, 255, 255, 0.85) 100%)",
diff --git a/app/matching-result/_components/WaitingFrame.tsx b/app/matching-result/_components/WaitingFrame.tsx
index 7953431..06fa026 100644
--- a/app/matching-result/_components/WaitingFrame.tsx
+++ b/app/matching-result/_components/WaitingFrame.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 const WaitingFrame = () => {
   return (
-    <div className="mt-6 flex h-[200px] w-full flex-col items-center gap-[10px] rounded-[24px] border border-white/30 bg-white/50 p-6 shadow-[0px_0px_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
+    <div className="mt-6 flex h-[200px] w-full flex-col items-center gap-2.5 rounded-3xl border border-white/30 bg-white/50 p-6 shadow-[0px_0px_8px_rgba(0,0,0,0.08)] backdrop-blur-[50px]">
       <div className="flex w-full flex-col self-stretch">
         <p
           className="animate-shimmer typo-16-500 bg-linear-to-r from-[#666666] via-[#B3B3B3] to-[#666666] bg-[length:200%_auto] bg-clip-text text-start leading-[19px] text-transparent"
diff --git a/app/matching/_components/AgeRangeDrawer.tsx b/app/matching/_components/AgeRangeDrawer.tsx
index 1e8400c..adde35e 100644
--- a/app/matching/_components/AgeRangeDrawer.tsx
+++ b/app/matching/_components/AgeRangeDrawer.tsx
@@ -69,14 +69,14 @@ export default function AgeRangeDrawer({
         <div className="flex flex-col px-6">
           <DrawerHeader className="gap-4 px-0 pt-6 pb-0">
             <div className="relative flex items-center justify-between">
-              <div className="w-[40px]" />
+              <div className="w-10" />
               <DrawerTitle className="typo-16-700 text-color-text-black flex-1 text-center">
                 나이 구간 설정
               </DrawerTitle>
               <DrawerClose asChild>
                 <button
                   type="button"
-                  className="typo-16-500 text-color-text-caption3 w-[40px] text-right"
+                  className="typo-16-500 text-color-text-caption3 w-10 text-right"
                 >
                   닫기
                 </button>
diff --git a/app/matching/_components/ImportantOptionDrawer.tsx b/app/matching/_components/ImportantOptionDrawer.tsx
index 2cd5508..bca34b8 100644
--- a/app/matching/_components/ImportantOptionDrawer.tsx
+++ b/app/matching/_components/ImportantOptionDrawer.tsx
@@ -208,11 +208,11 @@ export default function ImportantOptionDrawer({
         <div className="relative flex h-full flex-col px-6 select-none">
           <DrawerHeader className="gap-4 px-0 pt-6 pb-0">
             <div className="relative flex items-center justify-between">
-              <div className="w-[40px]" />
+              <div className="w-10" />
               <DrawerTitle className="typo-16-700 text-color-text-black flex-1 text-center">
                 중요한 옵션 선택
               </DrawerTitle>
-              <DrawerClose className="typo-16-500 text-color-text-caption3 w-[40px] text-right">
+              <DrawerClose className="typo-16-500 text-color-text-caption3 w-10 text-right">
                 닫기
               </DrawerClose>
             </div>
@@ -233,7 +233,7 @@ export default function ImportantOptionDrawer({
               )}
             >
               {!selectedOption ? (
-                <div className="pointer-events-none flex flex-col items-center gap-[12px]">
+                <div className="pointer-events-none flex flex-col items-center gap-3">
                   <ArrowUpToLine
                     className="text-color-text-disabled h-6 w-6"
                     strokeWidth={2}
@@ -245,7 +245,7 @@ export default function ImportantOptionDrawer({
               ) : (
                 <div className="relative mx-auto flex w-[calc(100%-12px)] flex-col items-end gap-1 pt-3">
                   {typingStep >= 1 && (
-                    <div className="bg-button-primary flex items-center justify-center rounded-t-[16px] rounded-br-[8px] rounded-bl-[16px] px-3 py-[12px] shadow-[0px_4px_16px_rgba(0,0,0,0.12)]">
+                    <div className="bg-button-primary flex items-center justify-center rounded-t-[16px] rounded-br-[8px] rounded-bl-[16px] px-3 py-3 shadow-[0px_4px_16px_rgba(0,0,0,0.12)]">
                       <span className="typo-14-500 text-right text-white">
                         <TypingText
                           key={selectedOption}
@@ -272,7 +272,7 @@ export default function ImportantOptionDrawer({
                   {typingStep >= 2 && (
                     <button
                       onClick={() => onSelect(null)}
-                      className="animate-in fade-in bg-color-gray-100 typo-12-700 text-color-text-caption2 mx-auto mt-4 flex h-[26px] items-center justify-center rounded-[99px] px-3 py-[6px] transition-colors duration-500 active:bg-gray-300"
+                      className="animate-in fade-in bg-color-gray-100 typo-12-700 text-color-text-caption2 mx-auto mt-4 flex h-[26px] items-center justify-center rounded-[99px] px-3 py-1.5 transition-colors duration-500 active:bg-gray-300"
                     >
                       선택 취소
                     </button>
@@ -299,7 +299,7 @@ export default function ImportantOptionDrawer({
 
           <div className="touch-pan-y">
             <DrawerClose asChild>
-              <button className="bg-color-main-900 typo-20-700 flex h-[48px] w-full items-center justify-center rounded-[16px] border-[0.8px] border-white/30 text-white transition-transform active:scale-[0.98]">
+              <button className="bg-color-main-900 typo-20-700 flex h-12 w-full items-center justify-center rounded-2xl border-[0.8px] border-white/30 text-white transition-transform active:scale-[0.98]">
                 NEXT
               </button>
             </DrawerClose>
@@ -331,10 +331,10 @@ export default function ImportantOptionDrawer({
                         }
                       </span>
                     </div>
-                    <div className="flex flex-col gap-[2px]">
-                      <div className="bg-color-gray-200 h-[2px] w-4 rounded-[1px]" />
-                      <div className="bg-color-gray-200 h-[2px] w-4 rounded-[1px]" />
-                      <div className="bg-color-gray-200 h-[2px] w-4 rounded-[1px]" />
+                    <div className="flex flex-col gap-0.5">
+                      <div className="bg-color-gray-200 h-0.5 w-4 rounded-[1px]" />
+                      <div className="bg-color-gray-200 h-0.5 w-4 rounded-[1px]" />
+                      <div className="bg-color-gray-200 h-0.5 w-4 rounded-[1px]" />
                     </div>
                   </div>
                 </div>
diff --git a/app/matching/_components/MatchingAgeOption.tsx b/app/matching/_components/MatchingAgeOption.tsx
index bdf5bb0..f6245bc 100644
--- a/app/matching/_components/MatchingAgeOption.tsx
+++ b/app/matching/_components/MatchingAgeOption.tsx
@@ -89,7 +89,7 @@ export default function MatchingAgeOption({
             )}
           >
             <Check
-              className="text-color-pink-700 h-[14px] w-[14px]"
+              className="text-color-pink-700 h-3.5 w-3.5"
               strokeWidth={3}
             />
           </div>
@@ -99,10 +99,7 @@ export default function MatchingAgeOption({
               !showCheck ? "opacity-100" : "opacity-0",
             )}
           >
-            <Delete
-              className="text-color-pink-700 h-[20px] w-[20px]"
-              strokeWidth={2}
-            />
+            <Delete className="text-color-pink-700 h-5 w-5" strokeWidth={2} />
           </div>
         </button>
       </div>
diff --git a/app/matching/_components/MatchingImportantOptionSection.tsx b/app/matching/_components/MatchingImportantOptionSection.tsx
index 969ab47..0d76122 100644
--- a/app/matching/_components/MatchingImportantOptionSection.tsx
+++ b/app/matching/_components/MatchingImportantOptionSection.tsx
@@ -79,7 +79,7 @@ export default function MatchingImportantOptionSection({
                 )}
               >
                 <Check
-                  className="text-color-pink-700 h-[14px] w-[14px]"
+                  className="text-color-pink-700 h-3.5 w-3.5"
                   strokeWidth={3}
                 />
               </div>
@@ -92,7 +92,7 @@ export default function MatchingImportantOptionSection({
                 )}
               >
                 <Delete
-                  className="text-color-pink-700 h-[20px] w-[20px]"
+                  className="text-color-pink-700 h-5 w-5"
                   strokeWidth={2}
                 />
               </div>
diff --git a/app/matching/_components/MatchingOptionCard.tsx b/app/matching/_components/MatchingOptionCard.tsx
index b26b700..d473a3f 100644
--- a/app/matching/_components/MatchingOptionCard.tsx
+++ b/app/matching/_components/MatchingOptionCard.tsx
@@ -44,10 +44,10 @@ export default function MatchingOptionCard({
         </span>
       </div>
       {/* 드래그 핸들 아이콘 (Hamburger 형태) */}
-      <div className="flex flex-col gap-[2px]" aria-hidden="true">
-        <div className="bg-color-gray-200 h-[2px] w-4 rounded-[1px]" />
-        <div className="bg-color-gray-200 h-[2px] w-4 rounded-[1px]" />
-        <div className="bg-color-gray-200 h-[2px] w-4 rounded-[1px]" />
+      <div className="flex flex-col gap-0.5" aria-hidden="true">
+        <div className="bg-color-gray-200 h-0.5 w-4 rounded-[1px]" />
+        <div className="bg-color-gray-200 h-0.5 w-4 rounded-[1px]" />
+        <div className="bg-color-gray-200 h-0.5 w-4 rounded-[1px]" />
       </div>
     </button>
   );
diff --git a/app/matching/_components/MatchingSameMajorSection.tsx b/app/matching/_components/MatchingSameMajorSection.tsx
index d09ba39..5e3ba84 100644
--- a/app/matching/_components/MatchingSameMajorSection.tsx
+++ b/app/matching/_components/MatchingSameMajorSection.tsx
@@ -79,7 +79,7 @@ export default function MatchingSameMajorSection({
             )}
           >
             <Check
-              className="text-color-pink-700 h-[14px] w-[14px]"
+              className="text-color-pink-700 h-3.5 w-3.5"
               strokeWidth={3}
             />
           </div>
@@ -91,10 +91,7 @@ export default function MatchingSameMajorSection({
               !showCheck ? "opacity-100" : "opacity-0",
             )}
           >
-            <Delete
-              className="text-color-pink-700 h-[20px] w-[20px]"
-              strokeWidth={2}
-            />
+            <Delete className="text-color-pink-700 h-5 w-5" strokeWidth={2} />
           </div>
         </button>
       ) : (
diff --git a/app/mypage/_components/ScreenMyPage.tsx b/app/mypage/_components/ScreenMyPage.tsx
index 7d0e52f..7ee8eeb 100644
--- a/app/mypage/_components/ScreenMyPage.tsx
+++ b/app/mypage/_components/ScreenMyPage.tsx
@@ -691,7 +691,7 @@ const ScreenMyPage = ({ initialProfile }: ScreenMyPageProps) => {
                   setEditableBirthYear(val);
                 }}
                 placeholder="출생연도"
-                className="typo-16-600 w-[64px] bg-transparent text-right text-[#999999] underline outline-none placeholder:text-[#B3B3B3]"
+                className="typo-16-600 w-16 bg-transparent text-right text-[#999999] underline outline-none placeholder:text-[#B3B3B3]"
               />
               {editableBirthYear && (
                 <span className="typo-16-600 text-[#999999]">년생</span>
diff --git a/app/profile-image/_components/IntroSection.tsx b/app/profile-image/_components/IntroSection.tsx
index 9f0bd32..a03f5ae 100644
--- a/app/profile-image/_components/IntroSection.tsx
+++ b/app/profile-image/_components/IntroSection.tsx
@@ -15,7 +15,7 @@ const IntroSection = ({ intro, onIntroChange }: IntroSectionProps) => {
         자기소개
       </label>
 
-      <div className="relative box-border flex h-30 w-full items-start rounded-[16px] border border-[#0E1013]/10 bg-white p-4">
+      <div className="relative box-border flex h-30 w-full items-start rounded-2xl border border-[#0E1013]/10 bg-white p-4">
         <textarea
           id="intro"
           name="intro"
diff --git a/app/profile-image/_components/NicknameSection.tsx b/app/profile-image/_components/NicknameSection.tsx
index 923546a..87e56a3 100644
--- a/app/profile-image/_components/NicknameSection.tsx
+++ b/app/profile-image/_components/NicknameSection.tsx
@@ -28,7 +28,7 @@ const NicknameSection = ({
             placeholder="닉네임을 입력해주세요"
             value={nickname}
             onChange={(e) => onNicknameChange(e.target.value)}
-            className="typo-16-500 h-[48px] rounded-none border-b-2 border-[#E5E5E5] px-4 py-[3px] leading-[19px] text-[#0E1013] placeholder:text-[#BDC1C6]"
+            className="typo-16-500 h-12 rounded-none border-b-2 border-[#E5E5E5] px-4 py-[3px] leading-[19px] text-[#0E1013] placeholder:text-[#BDC1C6]"
             style={{
               background:
                 "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 100%)",
@@ -38,7 +38,7 @@ const NicknameSection = ({
         <button
           type="button"
           onClick={onRandomClick}
-          className="flex h-[48px] w-[120px] items-center justify-center gap-[8px] rounded-[16px] border border-[#0E1013]/10 bg-white active:bg-gray-50"
+          className="flex h-12 w-[120px] items-center justify-center gap-2 rounded-2xl border border-[#0E1013]/10 bg-white active:bg-gray-50"
         >
           <Shuffle size={16} color="#5F6368" />
           <span className="typo-18-600 leading-none text-[#5F6368]">랜덤</span>
diff --git a/app/profile-image/_components/ProfileImageSelection.tsx b/app/profile-image/_components/ProfileImageSelection.tsx
index 6b66246..790b693 100644
--- a/app/profile-image/_components/ProfileImageSelection.tsx
+++ b/app/profile-image/_components/ProfileImageSelection.tsx
@@ -27,7 +27,7 @@ export const SelectCheckButton = ({
       aria-label={label}
       aria-pressed={isSelected}
       onClick={onClick}
-      className={`${marginClassName} typo-14-400 flex h-[20px] w-[20px] items-center justify-center rounded-full border leading-none ${
+      className={`${marginClassName} typo-14-400 flex h-5 w-5 items-center justify-center rounded-full border leading-none ${
         isSelected
           ? "border-[#FF4D61] text-white"
           : "border-gray-300 bg-white text-transparent"
@@ -171,7 +171,7 @@ const ProfileImageSelection = ({
           >
             <button
               type="button"
-              className="typo-14-600 flex h-[33px] items-center justify-center gap-[10px] rounded-[99px] bg-[#E5E5E5] px-4 py-2 leading-[17px] tracking-[-0.03em] text-[#4D4D4D]"
+              className="typo-14-600 flex h-[33px] items-center justify-center gap-2.5 rounded-[99px] bg-[#E5E5E5] px-4 py-2 leading-[17px] tracking-[-0.03em] text-[#4D4D4D]"
             >
               {actionLabel}
             </button>
@@ -179,7 +179,7 @@ const ProfileImageSelection = ({
         ) : (
           <label
             htmlFor="profile-image-upload"
-            className="typo-14-600 flex h-[33px] cursor-pointer items-center justify-center gap-[10px] rounded-[99px] bg-[#E5E5E5] px-4 py-2 leading-[17px] tracking-[-0.03em] text-[#4D4D4D]"
+            className="typo-14-600 flex h-[33px] cursor-pointer items-center justify-center gap-2.5 rounded-[99px] bg-[#E5E5E5] px-4 py-2 leading-[17px] tracking-[-0.03em] text-[#4D4D4D]"
           >
             {actionLabel}
             <input
diff --git a/app/register/_components/PasswordStep.tsx b/app/register/_components/PasswordStep.tsx
index 2f24549..e1f5a72 100644
--- a/app/register/_components/PasswordStep.tsx
+++ b/app/register/_components/PasswordStep.tsx
@@ -73,14 +73,14 @@ export const PasswordStep = ({
                 type="button"
                 aria-label="입력 초기화"
                 onClick={() => onPasswordChange("")}
-                className="flex h-[20px] w-[20px] items-center justify-center rounded-full border border-(--inputfield-close-stroke) bg-(--inputfield-close-fill) text-gray-400"
+                className="flex h-5 w-5 items-center justify-center rounded-full border border-(--inputfield-close-stroke) bg-(--inputfield-close-fill) text-gray-400"
               >
                 <X width={12} height={12} strokeWidth={2.5} />
               </button>
             )}
           </div>
         </div>
-        <div className="typo-14-400 flex flex-col gap-[8px]">
+        <div className="typo-14-400 flex flex-col gap-2">
           <span
             className={`flex items-center gap-1 ${password && isLengthValid ? "text-color-text-highlight" : "text-color-text-caption2"}`}
           >
diff --git a/app/register/_components/VerificationStep.tsx b/app/register/_components/VerificationStep.tsx
index 60302f3..bbc4770 100644
--- a/app/register/_components/VerificationStep.tsx
+++ b/app/register/_components/VerificationStep.tsx
@@ -125,7 +125,7 @@ export const VerificationStep = ({
               type="button"
               onClick={handleResend}
               disabled={resendCooldown > 0 || isSending}
-              className="bg-bubble-background-white text-color-text-caption1 typo-18-600 h-[48px] w-[120px] shrink-0"
+              className="bg-bubble-background-white text-color-text-caption1 typo-18-600 h-12 w-[120px] shrink-0"
               shadow={false}
             >
               {isSending
@@ -143,7 +143,7 @@ export const VerificationStep = ({
         </div>
 
         <div className="mt-auto flex w-full flex-col gap-4">
-          <div className="bg-color-gray-50-a80 w-full rounded-[16px] border-[#b3b3b34d] p-4 leading-normal">
+          <div className="bg-color-gray-50-a80 w-full rounded-2xl border-[#b3b3b34d] p-4 leading-normal">
             <span className="typo-12-500 text-color-text-caption3">
               인증번호가 오지 않았나요?
               <br /> 이전 단계에서 이메일을 재확인하거나, 스팸함을 확인해
diff --git a/app/reset/_components/InfoCard.tsx b/app/reset/_components/InfoCard.tsx
index 0ce9201..f24f17a 100644
--- a/app/reset/_components/InfoCard.tsx
+++ b/app/reset/_components/InfoCard.tsx
@@ -20,13 +20,13 @@ const InfoCard = ({
   const CardContent = (
     <div
       className={cn(
-        "box-border flex w-full flex-col items-start gap-4 rounded-[16px] p-6 transition-all",
+        "box-border flex w-full flex-col items-start gap-4 rounded-2xl p-6 transition-all",
         disabled
           ? "border border-[#E9E9E9] bg-[#F1F1F1]"
           : "border border-[rgba(255,255,255,0.3)] bg-[rgba(255,255,255,0.5)] shadow-[0px_2px_8px_rgba(0,0,0,0.12)] backdrop-blur-sm",
       )}
     >
-      <div className="flex flex-col items-start gap-[16px] p-0">
+      <div className="flex flex-col items-start gap-4 p-0">
         <h3
           className={cn(
             "typo-20-700 flex items-center",
diff --git a/app/reset/password/_components/ScreenPasswordResetPage.tsx b/app/reset/password/_components/ScreenPasswordResetPage.tsx
index 9a2c8d8..d57d020 100644
--- a/app/reset/password/_components/ScreenPasswordResetPage.tsx
+++ b/app/reset/password/_components/ScreenPasswordResetPage.tsx
@@ -75,7 +75,7 @@ const ScreenPasswordResetPage = () => {
               onChange={(e) => setEmail(e.target.value)}
               required
             />
-            <p className="typo-14-500 text-color-flame-500 mt-1 min-h-[20px]">
+            <p className="typo-14-500 text-color-flame-500 mt-1 min-h-5">
               {message.text ? `*${message.text}` : ""}
             </p>
           </div>
diff --git a/app/reset/password/verification/_components/ScreenVerificationPage.tsx b/app/reset/password/verification/_components/ScreenVerificationPage.tsx
index 5334254..592e9b4 100644
--- a/app/reset/password/verification/_components/ScreenVerificationPage.tsx
+++ b/app/reset/password/verification/_components/ScreenVerificationPage.tsx
@@ -207,7 +207,7 @@ const ScreenVerificationPage = () => {
           </div>
 
           <div className="mt-auto flex w-full flex-col gap-4">
-            <div className="bg-color-gray-50-a80 w-full rounded-[16px] border-[#b3b3b34d] p-4">
+            <div className="bg-color-gray-50-a80 w-full rounded-2xl border-[#b3b3b34d] p-4">
               <span className="typo-12-500 text-color-text-caption3 block text-left">
                 인증번호가 오지 않았나요?
                 <br /> 이전 단계에서 이메일을 재확인하거나, 스팸함을 확인해
diff --git a/app/roulette/_components/Roulette.tsx b/app/roulette/_components/Roulette.tsx
index 2c431d8..9fb4c75 100644
--- a/app/roulette/_components/Roulette.tsx
+++ b/app/roulette/_components/Roulette.tsx
@@ -28,7 +28,7 @@ const ROULETTE_CONFIG: Record<
   { imageSrc: string; items: RouletteItem[] }
 > = {
   free: {
-    imageSrc: "/roulette/roulette3.png",
+    imageSrc: "/roulette/free_roulette.png",
     items: [
       { id: 1, label: "옵션권 1장" },
       { id: 2, label: "옵션권 2장" },
diff --git a/app/roulette/_components/RouletteCards.tsx b/app/roulette/_components/RouletteCards.tsx
index 4ddc14a..5aabf0c 100644
--- a/app/roulette/_components/RouletteCards.tsx
+++ b/app/roulette/_components/RouletteCards.tsx
@@ -20,7 +20,7 @@ export const FreeRouletteCard = ({
 
   return (
     <div
-      className={`relative flex w-full flex-col justify-between gap-4 rounded-[24px] border border-white/30 bg-white/80 p-6 shadow-sm backdrop-blur-[15px] transition-opacity ${
+      className={`relative flex w-full flex-col justify-between gap-4 rounded-3xl border border-white/30 bg-white/80 p-6 shadow-sm backdrop-blur-[15px] transition-opacity ${
         !hasChances ? "opacity-50" : ""
       }`}
     >
@@ -40,11 +40,15 @@ export const FreeRouletteCard = ({
           {/* Status Checkbox */}
           <div className="flex items-center gap-2">
             <div
-              className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${
+              className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full"
+              style={
                 hasChances
-                  ? "from-color-brand-primary-orange via-color-brand-primary-flame to-color-brand-primary-pink bg-gradient-to-br"
-                  : "bg-[#E5E5E5]"
-              }`}
+                  ? {
+                      background:
+                        "linear-gradient(135deg, #FF9B40, #FF4D61, #FF8CB3)",
+                    }
+                  : { background: "#E5E5E5" }
+              }
             >
               <Check
                 size={12}
@@ -72,7 +76,7 @@ export const FreeRouletteCard = ({
         {/* Right Image Area */}
         <div className="relative flex h-[130px] w-[130px] shrink-0 items-center justify-center">
           {/* Shadow Ellipse */}
-          <div className="absolute bottom-1 h-[11px] w-[112px] rounded-full bg-black/30 blur-[6px]" />
+          <div className="absolute bottom-1 h-[11px] w-28 rounded-full bg-black/30 blur-[6px]" />
           {/* Free Roulette Graphic */}
           <Image
             src="/roulette/free.png"
@@ -89,7 +93,7 @@ export const FreeRouletteCard = ({
         type="button"
         disabled={!hasChances}
         onClick={() => router.push("/roulette/free")}
-        className={`flex h-14 w-full items-center justify-center rounded-[16px] border border-white/30 transition-transform ${
+        className={`flex h-14 w-full items-center justify-center rounded-2xl border border-white/30 transition-transform ${
           hasChances
             ? "bg-color-flame-700 hover:opacity-95 active:scale-[0.98]"
             : "cursor-not-allowed bg-[rgba(179,179,179,0.4)] backdrop-blur-[15px]"
@@ -122,12 +126,13 @@ export const SpecialRouletteCard = ({
   isSpecialParticipated = false,
 }: SpecialRouletteCardProps) => {
   const router = useRouter();
-  const hasChances = !isSpecialParticipated && currentAmount >= targetAmount;
+  const isAmountSatisfied = currentAmount >= targetAmount;
+  const hasChances = !isSpecialParticipated && isAmountSatisfied;
   const isDisabled = !hasChances;
 
   return (
     <div
-      className={`relative flex w-full flex-col justify-between gap-4 rounded-[24px] border border-white/30 bg-white/80 p-6 shadow-sm backdrop-blur-[15px] transition-opacity ${
+      className={`relative flex w-full flex-col justify-between gap-4 rounded-3xl border border-white/30 bg-white/80 p-6 shadow-sm backdrop-blur-[15px] transition-opacity ${
         isDisabled ? "opacity-50" : ""
       }`}
     >
@@ -148,7 +153,7 @@ export const SpecialRouletteCard = ({
           <div className="flex items-center gap-2">
             <div
               className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full ${
-                hasChances
+                isAmountSatisfied
                   ? "from-color-brand-primary-orange via-color-brand-primary-flame to-color-brand-primary-pink bg-gradient-to-br"
                   : "bg-[#E5E5E5]"
               }`}
@@ -156,7 +161,7 @@ export const SpecialRouletteCard = ({
               <Check
                 size={12}
                 className={`stroke-[2] ${
-                  hasChances ? "text-white" : "text-[#B3B3B3]"
+                  isAmountSatisfied ? "text-white" : "text-[#B3B3B3]"
                 }`}
               />
             </div>
@@ -165,7 +170,7 @@ export const SpecialRouletteCard = ({
               <br />
               <span
                 className={
-                  hasChances
+                  isAmountSatisfied
                     ? "text-color-brand-primary-flame"
                     : "text-[#858585]"
                 }
@@ -180,7 +185,7 @@ export const SpecialRouletteCard = ({
         {/* Right Image Area */}
         <div className="relative flex h-[130px] w-[130px] shrink-0 items-center justify-center">
           {/* Shadow Ellipse */}
-          <div className="absolute bottom-1 h-[11px] w-[112px] rounded-full bg-black/30 blur-[6px]" />
+          <div className="absolute bottom-1 h-[11px] w-28 rounded-full bg-black/30 blur-[6px]" />
           {/* Special Roulette Graphic */}
           <Image
             src="/roulette/special.png"
@@ -197,7 +202,7 @@ export const SpecialRouletteCard = ({
         type="button"
         disabled={isDisabled}
         onClick={() => router.push("/roulette/special")}
-        className={`flex h-14 w-full items-center justify-center rounded-[16px] border border-white/30 transition-transform ${
+        className={`flex h-14 w-full items-center justify-center rounded-2xl border border-white/30 transition-transform ${
           isDisabled
             ? "cursor-not-allowed bg-[rgba(179,179,179,0.4)] backdrop-blur-[15px]"
             : "bg-button-primary hover:opacity-95 active:scale-[0.98]"
@@ -208,7 +213,11 @@ export const SpecialRouletteCard = ({
             isDisabled ? "text-[#B3B3B3]" : "text-white"
           }`}
         >
-          {isDisabled ? "오늘은 이미 참여했어요" : "스페셜 룰렛 입장"}
+          {isSpecialParticipated
+            ? "오늘은 이미 참여했어요"
+            : !hasChances
+              ? `${(targetAmount - currentAmount).toLocaleString()}원 더 결제 시 입장`
+              : "스페셜 룰렛 입장"}
         </span>
       </button>
     </div>
diff --git a/app/roulette/_components/RouletteHeader.tsx b/app/roulette/_components/RouletteHeader.tsx
index 7466584..645f693 100644
--- a/app/roulette/_components/RouletteHeader.tsx
+++ b/app/roulette/_components/RouletteHeader.tsx
@@ -33,7 +33,7 @@ const RouletteHeader = ({ title, sidebar, onBack }: RouletteHeaderProps) => {
   };
 
   return (
-    <header className="flex h-[64px] w-full items-center justify-between py-2">
+    <header className="flex h-16 w-full items-center justify-between py-2">
       <BackButton className="shrink-0" onClick={handleBack} />
 
       {title && (
diff --git a/app/roulette/_components/RouletteProbabilityBottomSheet.tsx b/app/roulette/_components/RouletteProbabilityBottomSheet.tsx
index 42d4b3e..b55a01b 100644
--- a/app/roulette/_components/RouletteProbabilityBottomSheet.tsx
+++ b/app/roulette/_components/RouletteProbabilityBottomSheet.tsx
@@ -124,7 +124,7 @@ export default function RouletteProbabilityBottomSheet({
               {/* Header - Frame 1171276915 */}
               <div className="flex w-full flex-row items-center justify-between border-b-[2px] border-[#1A1A1A] py-2">
                 <span className="typo-14-600 text-[#1A1A1A]">보상</span>
-                <span className="typo-14-600 w-[44px] text-center text-[#1A1A1A]">
+                <span className="typo-14-600 w-11 text-center text-[#1A1A1A]">
                   확률
                 </span>
               </div>
@@ -139,7 +139,7 @@ export default function RouletteProbabilityBottomSheet({
                     <span className="typo-14-500 text-[#808080]">
                       {item.reward}
                     </span>
-                    <span className="typo-14-500 w-[44px] text-center text-[#808080]">
+                    <span className="typo-14-500 w-11 text-center text-[#808080]">
                       {item.probability}
                     </span>
                   </div>
diff --git a/app/roulette/_components/RouletteResultModal.tsx b/app/roulette/_components/RouletteResultModal.tsx
index 0b4b8a9..f17523d 100644
--- a/app/roulette/_components/RouletteResultModal.tsx
+++ b/app/roulette/_components/RouletteResultModal.tsx
@@ -47,10 +47,10 @@ const ITEM_DESCRIPTION_MAP: Record<string, string> = {
 const ConfettiLeft = () => (
   <div className="pointer-events-none absolute top-[59px] left-[25px] h-[153px] w-[70.87px]">
     <div className="absolute top-0 left-[1.5px] h-[5px] w-[5px] bg-[#FE4F80]" />
-    <div className="absolute top-[29px] left-[35.5px] h-[4px] w-[6.5px] bg-[#FDD087]" />
+    <div className="absolute top-[29px] left-[35.5px] h-1 w-[6.5px] bg-[#FDD087]" />
     <div className="absolute top-[14.63px] left-[64.13px] h-[5px] w-[5px] rotate-[-62.51deg] bg-[#FF5380]" />
     <div className="absolute top-[69px] left-[60px] h-[8.53px] w-[10.5px] bg-[#FDC36C]" />
-    <div className="absolute top-[77.5px] left-[28px] h-[5px] w-[4.5px] bg-[#FD66A5]" />
+    <div className="absolute top-[77.5px] left-7 h-[5px] w-[4.5px] bg-[#FD66A5]" />
     <div className="absolute top-[97.5px] left-0 h-[5.5px] w-[4.5px] bg-[#FE489F]" />
     <div className="absolute top-[123.5px] left-[13.5px] h-[5.5px] w-[4.5px] bg-[#E26DF7]" />
     <div className="absolute top-[148.5px] left-[51.5px] h-[4.5px] w-[4.5px] bg-[#A7DFB2]" />
@@ -60,9 +60,9 @@ const ConfettiLeft = () => (
 const ConfettiRight = () => (
   <div className="pointer-events-none absolute top-[53px] right-[26px] h-[144.55px] w-[67.5px]">
     <div className="absolute top-0 left-[18px] h-[4.5px] w-[5px] bg-[#FB87D2]" />
-    <div className="absolute top-[26.93px] left-[14px] h-[6.98px] w-[6px] bg-[#B0E6EF]" />
-    <div className="absolute top-[64px] left-0 h-[3.5px] w-[3.5px] bg-[#FE939A]" />
-    <div className="absolute top-[56.5px] left-[24px] h-[4.5px] w-[3.5px] bg-[#9D8CFB]" />
+    <div className="absolute top-[26.93px] left-3.5 h-[6.98px] w-1.5 bg-[#B0E6EF]" />
+    <div className="absolute top-16 left-0 h-[3.5px] w-[3.5px] bg-[#FE939A]" />
+    <div className="absolute top-[56.5px] left-6 h-[4.5px] w-[3.5px] bg-[#9D8CFB]" />
     <div className="absolute top-[51px] left-[59px] h-[6.41px] w-[8.5px] bg-[#92E595]" />
     <div className="absolute top-[135.5px] left-[39.5px] h-[6.41px] w-[8.5px] rotate-[95.26deg] bg-[#FB87D2]" />
   </div>
@@ -99,7 +99,7 @@ export default function RouletteResultModal({
         </DialogDescription>
 
         {/* 찐 모달 본체 */}
-        <div className="relative flex w-full max-w-[343px] flex-col items-center overflow-hidden rounded-[16px] bg-white px-4 pt-10 pb-6 shadow-[0px_8px_8px_rgba(0,0,0,0.08),0px_0px_16px_rgba(0,0,0,0.1)]">
+        <div className="relative flex w-full max-w-[343px] flex-col items-center overflow-hidden rounded-2xl bg-white px-4 pt-10 pb-6 shadow-[0px_8px_8px_rgba(0,0,0,0.08),0px_0px_16px_rgba(0,0,0,0.1)]">
           {/* 컨페티 (장식용이므로 얘네만 absolute 유지) */}
           <ConfettiLeft />
           <ConfettiRight />
@@ -123,7 +123,7 @@ export default function RouletteResultModal({
               />
             </div>
             {/* 바닥 그림자 */}
-            <div className="absolute bottom-[-10px] h-[20px] w-[100px] rounded-full bg-black/30 blur-[17px]" />
+            <div className="absolute bottom-[-10px] h-5 w-[100px] rounded-full bg-black/30 blur-[17px]" />
           </div>
 
           {/* 하단 텍스트 영역 */}
@@ -137,7 +137,7 @@ export default function RouletteResultModal({
           </div>
 
           {/* 하단 버튼 영역 */}
-          <div className="mt-[24px] flex w-full flex-col items-center gap-6">
+          <div className="mt-6 flex w-full flex-col items-center gap-6">
             <Button onClick={onClose}>확인</Button>
             {item.label !== "꽝" && (
               <button
diff --git a/app/roulette/_components/ScreenRouletteMain.tsx b/app/roulette/_components/ScreenRouletteMain.tsx
index ee48c1f..65686dc 100644
--- a/app/roulette/_components/ScreenRouletteMain.tsx
+++ b/app/roulette/_components/ScreenRouletteMain.tsx
@@ -36,7 +36,7 @@ const ScreenRouletteMain = () => {
       {/* Content */}
       <div className="relative z-10 mt-2 flex w-full flex-col items-center">
         {/* Title */}
-        <p className="typo-14-500 text-color-gray-500 h-[34px] text-center leading-[17px] tracking-[-0.025em]">
+        <p className="typo-14-500 text-color-gray-500 h-9 text-center leading-[17px] tracking-[-0.025em]">
           오늘의 행운을 확인해보세요!
           <br />
           매일 1회 무료로 돌릴 수 있어요
@@ -45,13 +45,18 @@ const ScreenRouletteMain = () => {
         {/* Cards */}
         <div className="mt-6 flex w-full flex-col items-center gap-4">
           <FreeRouletteCard
-            remainingChances={rouletteStatus?.isFreeParticipated ? 1 : 0}
+            remainingChances={
+              // 데이터가 아직 없거나(로딩 중), 이미 참여한 경우 → 0회
+              // 참여하지 않았음이 명확히 확인된 경우에만 → 1회
+              rouletteStatus && !rouletteStatus.isFreeParticipated ? 1 : 0
+            }
           />
           <SpecialRouletteCard
             currentAmount={rouletteStatus?.totalPay ?? 0}
             targetAmount={3000}
             isSpecialParticipated={
-              rouletteStatus?.isSpecialParticipated ?? false
+              // 데이터가 없을 때는 참여 완료로 간주(true) → 버튼 비활성화
+              rouletteStatus?.isSpecialParticipated ?? true
             }
           />
         </div>
diff --git a/app/roulette/free/_components/ScreenRouletteFree.tsx b/app/roulette/free/_components/ScreenRouletteFree.tsx
index 1412f80..903f56f 100644
--- a/app/roulette/free/_components/ScreenRouletteFree.tsx
+++ b/app/roulette/free/_components/ScreenRouletteFree.tsx
@@ -1,6 +1,5 @@
 "use client";
 import React, { useRef, useState } from "react";
-import { useRouter } from "next/navigation";
 import { CircleAlert } from "lucide-react";
 import RouletteHeader from "../../_components/RouletteHeader";
 import Button from "@/components/ui/Button";
@@ -14,11 +13,11 @@ import { useRouletteStatus } from "@/hooks/useRouletteStatus";
 import { useSpinRoulette } from "@/hooks/useSpinRoulette";
 
 const ScreenRouletteFree = () => {
-  const router = useRouter();
   const { data: rouletteStatus, isLoading } = useRouletteStatus();
 
-  // isFreeParticipated: true = 아직 참여 안 함(1회 남음), false = 이미 참여함(0회)
-  const hasChances = rouletteStatus?.isFreeParticipated ?? false;
+  // isFreeParticipated: false = 아직 참여 안 함(1회 남음), true = 이미 참여함(0회)
+  const isFreeParticipated = rouletteStatus?.isFreeParticipated ?? true;
+  const hasChances = !isFreeParticipated;
   const remainingChances = hasChances ? 1 : 0;
 
   const rouletteRef = useRef<RouletteHandle>(null);
diff --git a/app/roulette/free/page.tsx b/app/roulette/free/page.tsx
index 965a6c9..ddda8bf 100644
--- a/app/roulette/free/page.tsx
+++ b/app/roulette/free/page.tsx
@@ -12,6 +12,10 @@ export const metadata = {
   description: "이벤트 룰렛 진행",
 };
 
+// 페이지 이동 시마다 서버에서 항상 최신 데이터를 가져와 HydrationBoundary로 주입
+// useEffect + refetch 없이도 신선한 상태를 보장
+export const dynamic = "force-dynamic";
+
 interface RoulettePageApiResponse {
   code: string;
   status: number;
diff --git a/app/roulette/special/[amount]/page.tsx b/app/roulette/special/[amount]/page.tsx
index e75a419..7fb6998 100644
--- a/app/roulette/special/[amount]/page.tsx
+++ b/app/roulette/special/[amount]/page.tsx
@@ -32,12 +32,12 @@ export default function SpecialAmountPage({
     >
       {/* Decorative Vectors (별/빛 모양 등) */}
       <div className="pointer-events-none absolute top-[102px] left-[69px] h-[32.5px] w-[22.5px]">
-        <div className="absolute top-0 left-[10px] h-[14.5px] w-[12.5px] bg-[#FFB6D2]" />
+        <div className="absolute top-0 left-2.5 h-[14.5px] w-[12.5px] bg-[#FFB6D2]" />
         <div className="absolute top-[23.5px] left-0 h-[9px] w-[8.16px] bg-[#FFB6D2]" />
       </div>
       <div className="pointer-events-none absolute top-[132px] left-[283px] h-[43.5px] w-[41.5px]">
         <div className="absolute top-0 left-0 h-[10.5px] w-[10.5px] bg-[#FFB7D3]" />
-        <div className="absolute top-[34px] left-[32px] h-[9.5px] w-[9.5px] bg-[#FFDAE6]" />
+        <div className="absolute top-[34px] left-8 h-[9.5px] w-[9.5px] bg-[#FFDAE6]" />
       </div>
 
       {/* 닫기 버튼 */}
@@ -60,21 +60,21 @@ export default function SpecialAmountPage({
         </h1>
 
         {/* 당첨 금액 */}
-        <h2 className="text-color-text-black mt-[20px] text-center text-[40px] leading-[140%] font-bold">
+        <h2 className="text-color-text-black mt-5 text-center text-[40px] leading-[140%] font-bold">
           {displayAmount}원
         </h2>
 
         {/* 바우처 라벨 구분선 (Voucher container) */}
-        <div className="mt-[20px] flex w-[218px] items-center gap-[16px]">
+        <div className="mt-5 flex w-[218px] items-center gap-4">
           <div className="h-0 flex-1 border border-[#FF4D61]" />
-          <div className="flex h-[30px] shrink-0 items-center justify-center rounded-full bg-[#FF4D61] px-[12px] py-[4px]">
+          <div className="flex h-[30px] shrink-0 items-center justify-center rounded-full bg-[#FF4D61] px-3 py-1">
             <span className="typo-16-600 text-white">상품권</span>
           </div>
           <div className="h-0 flex-1 border border-[#FF4D61]" />
         </div>
 
         {/* 바우처 이미지 */}
-        <div className="relative mt-6 h-[92px] w-[256px]">
+        <div className="relative mt-6 h-[92px] w-64">
           <Image
             src={`/roulette/item/gift_card_${amount}.png`}
             alt={`${displayAmount}원 상품권`}
@@ -84,11 +84,11 @@ export default function SpecialAmountPage({
         </div>
 
         {/* 사용 방법 안내 (Redemption instructions container) */}
-        <div className="mt-[60px] flex w-full flex-col gap-[32px]">
+        <div className="mt-[60px] flex w-full flex-col gap-8">
           {/* Way 1 */}
-          <div className="flex w-full flex-col gap-[16px]">
-            <div className="flex items-center gap-[8px]">
-              <div className="flex items-center justify-center rounded-full bg-[#999999]/30 px-[12px] py-[4px]">
+          <div className="flex w-full flex-col gap-4">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center justify-center rounded-full bg-[#999999]/30 px-3 py-1">
                 <span className="typo-12-600 text-color-gray-400">
                   수령 방법 1
                 </span>
@@ -103,9 +103,9 @@ export default function SpecialAmountPage({
           </div>
 
           {/* Way 2 */}
-          <div className="flex w-full flex-col gap-[16px]">
-            <div className="flex items-center gap-[8px]">
-              <div className="flex items-center justify-center rounded-full bg-[#999999]/30 px-[12px] py-[4px]">
+          <div className="flex w-full flex-col gap-4">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center justify-center rounded-full bg-[#999999]/30 px-3 py-1">
                 <span className="typo-12-600 text-color-gray-400">
                   수령 방법 2
                 </span>
diff --git a/app/roulette/special/_components/SpecialRouletteChanceCard.tsx b/app/roulette/special/_components/SpecialRouletteChanceCard.tsx
index 5d0e7bb..d9acb16 100644
--- a/app/roulette/special/_components/SpecialRouletteChanceCard.tsx
+++ b/app/roulette/special/_components/SpecialRouletteChanceCard.tsx
@@ -41,7 +41,7 @@ export default function SpecialRouletteChanceCard({
   return (
     <div
       className={cn(
-        "mt-2 box-border flex h-[76px] w-[278px] flex-col justify-center gap-2 rounded-[16px] border border-white/30 bg-white/30 p-2 shadow-[0px_0px_8px_rgba(0,0,0,0.04),0px_4px_8px_rgba(0,0,0,0.1)] backdrop-blur-[15px]",
+        "mt-2 box-border flex h-[76px] w-[278px] flex-col justify-center gap-2 rounded-2xl border border-white/30 bg-white/30 p-2 shadow-[0px_0px_8px_rgba(0,0,0,0.04),0px_4px_8px_rgba(0,0,0,0.1)] backdrop-blur-[15px]",
         className,
       )}
     >
@@ -81,7 +81,7 @@ export default function SpecialRouletteChanceCard({
           >
             {/* Progress indicator bar */}
             {percent > 0 && percent < 100 && (
-              <div className="absolute -top-[1px] -right-[1px] -bottom-[1px] w-[2px] rounded-[1px] bg-white shadow-[0px_0px_4px_rgba(255,77,97,0.5)]" />
+              <div className="absolute -top-[1px] -right-[1px] -bottom-[1px] w-0.5 rounded-[1px] bg-white shadow-[0px_0px_4px_rgba(255,77,97,0.5)]" />
             )}
           </div>
         </div>
diff --git a/app/roulette/special/page.tsx b/app/roulette/special/page.tsx
index d348b0e..9cff2a4 100644
--- a/app/roulette/special/page.tsx
+++ b/app/roulette/special/page.tsx
@@ -9,9 +9,12 @@ import { RoulettePageResponse } from "@/hooks/useRouletteStatus";
 
 export const metadata = {
   title: "스페셜 룰렛",
-  description: "스페셜 룰렛 진행",
+  description: "스페셜 이벤트 룰렛 진행",
 };
 
+// 페이지 이동 시마다 서버에서 항상 최신 데이터를 가져와 HydrationBoundary로 주입
+export const dynamic = "force-dynamic";
+
 interface RoulettePageApiResponse {
   code: string;
   status: number;
diff --git a/components/common/ToastContainer.tsx b/components/common/ToastContainer.tsx
index 1782467..b952286 100644
--- a/components/common/ToastContainer.tsx
+++ b/components/common/ToastContainer.tsx
@@ -25,7 +25,7 @@ export default function ToastContainer() {
     >
       <div className="flex w-full cursor-pointer items-start gap-3 rounded-[20px] border border-gray-100 bg-white/95 p-4 shadow-[0px_10px_30px_rgba(0,0,0,0.15)] backdrop-blur-md transition-transform active:scale-[0.98]">
         {/* 알림 아이콘: COMAtching 그라데이션 브랜드 테두리 적용 */}
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-[12px] bg-gradient-to-tr from-[#FF775E] to-[#E83ABC] p-[1.5px]">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-tr from-[#FF775E] to-[#E83ABC] p-[1.5px]">
           <div className="flex h-full w-full items-center justify-center rounded-[10px] bg-white">
             <Image
               src="/logo/icon.png"
@@ -39,7 +39,7 @@ export default function ToastContainer() {
 
         {/* 텍스트 내용 */}
         <div className="flex min-w-0 flex-1 flex-col gap-0.5 pr-4">
-          <span className="typo-14-700 truncate font-bold text-[#1A1A1A]">
+          <span className="typo-14-700 truncate text-[#1A1A1A]">
             {toast.title}
           </span>
           <span className="typo-12-500 line-clamp-2 leading-[1.4] text-gray-500">
diff --git a/components/common/charge-confirm/DirectChargeDrawer.tsx b/components/common/charge-confirm/DirectChargeDrawer.tsx
index 2b2e47a..55508d3 100644
--- a/components/common/charge-confirm/DirectChargeDrawer.tsx
+++ b/components/common/charge-confirm/DirectChargeDrawer.tsx
@@ -46,6 +46,7 @@ export default function DirectChargeDrawer({
     depositorName || realNameData?.data?.realName || "",
   );
   const [agreed, setAgreed] = React.useState(false);
+  const [quantity, setQuantity] = React.useState(1);
 
   // 실명이 로드되면 이름 업데이트
   React.useEffect(() => {
@@ -55,10 +56,11 @@ export default function DirectChargeDrawer({
     }
   }, [realNameData, depositorName, name]);
 
-  // Drawer가 닫힐 때 동의 상태 리셋
+  // Drawer가 닫힐 때 상태 리셋
   React.useEffect(() => {
     if (!open) {
       setAgreed(false);
+      setQuantity(1);
     }
   }, [open]);
 
@@ -75,7 +77,7 @@ export default function DirectChargeDrawer({
   };
 
   /* 충전 완료 알림 */
-  const handleConfirmAction = (customAmount: number) => {
+  const handleConfirmAction = () => {
     if (!name) {
       alert("먼저 입금자명을 설정해 주세요.");
       onOpenChange(false);
@@ -83,40 +85,47 @@ export default function DirectChargeDrawer({
       return;
     }
 
-    purchase(productId, {
-      onSuccess: async () => {
-        try {
-          await navigator.clipboard.writeText(BANK_INFO.account);
-        } catch (err) {
-          console.error("Failed to copy account number: ", err);
-        }
-        alert("계좌번호가 복사되었습니다.");
-        onOpenChange(false);
-        queryClient.invalidateQueries({ queryKey: ["myProfile"] });
-      },
-      onError: (error: AxiosError<{ code?: string; message?: string }>) => {
-        const errorData = error.response?.data;
-        if (errorData?.code === "PAY-003") {
-          alert("이미 입금 확인 대기 중인 주문이 존재합니다.");
-          onOpenChange(false);
-        } else if (
-          errorData?.code === "PAY-004" ||
-          errorData?.message?.includes("사용자명") ||
-          errorData?.message?.includes("입금자명")
-        ) {
-          alert(errorData?.message || "먼저 입금자명을 설정해 주세요.");
+    purchase(
+      { productId, quantity },
+      {
+        onSuccess: async () => {
+          try {
+            await navigator.clipboard.writeText(BANK_INFO.account);
+          } catch (err) {
+            console.error("Failed to copy account number: ", err);
+          }
+          alert("계좌번호가 복사되었습니다.");
           onOpenChange(false);
-          drawerContext?.setActiveTab(2);
-        } else {
-          alert(
-            errorData?.message ||
-              "충전 요청 중 오류가 발생했습니다. 다시 시도해 주세요.",
-          );
-        }
+          queryClient.invalidateQueries({ queryKey: ["myProfile"] });
+        },
+        onError: (error: AxiosError<{ code?: string; message?: string }>) => {
+          const errorData = error.response?.data;
+          if (errorData?.code === "PAY-003") {
+            alert("이미 입금 확인 대기 중인 주문이 존재합니다.");
+            onOpenChange(false);
+          } else if (
+            errorData?.code === "PAY-004" ||
+            errorData?.message?.includes("사용자명") ||
+            errorData?.message?.includes("입금자명")
+          ) {
+            alert(errorData?.message || "먼저 입금자명을 설정해 주세요.");
+            onOpenChange(false);
+            drawerContext?.setActiveTab(2);
+          } else {
+            alert(
+              errorData?.message ||
+                "충전 요청 중 오류가 발생했습니다. 다시 시도해 주세요.",
+            );
+          }
+        },
       },
-    });
+    );
   };
 
+  const isQuantityItem =
+    productName?.includes("옵션권") || productName?.includes("뽑기권");
+  const totalAmount = amount * quantity;
+
   return (
     <Drawer open={open} onOpenChange={onOpenChange}>
       <DrawerContent
@@ -140,10 +149,10 @@ export default function DirectChargeDrawer({
             {/* ── Content ── */}
             <div className="flex w-full flex-col gap-6">
               {/* ── 입금 정보 카드 ── */}
-              <div className="bg-color-gray-50 flex flex-col gap-4 rounded-[16px] p-4">
+              <div className="bg-color-gray-50 flex flex-col gap-4 rounded-2xl p-4">
                 {/* 입금계좌 라벨 + 복사 */}
                 <div className="flex flex-col gap-4">
-                  <div className="flex items-center gap-[10px]">
+                  <div className="flex items-center gap-2.5">
                     <span className="typo-16-600 text-[#777777]">입금계좌</span>
                     <button
                       type="button"
@@ -155,7 +164,7 @@ export default function DirectChargeDrawer({
                   </div>
 
                   {/* 계좌 정보 박스 */}
-                  <div className="flex flex-col items-center gap-2 rounded-[8px] bg-white py-4 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
+                  <div className="flex flex-col items-center gap-2 rounded-lg bg-white py-4 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
                     <span className="typo-16-500 text-color-gray-900 text-center">
                       {BANK_INFO.bank}
                     </span>
@@ -168,28 +177,62 @@ export default function DirectChargeDrawer({
                   </div>
                 </div>
 
-                {/* 입금자명 */}
-                <div className="flex items-center gap-2">
-                  <span className="typo-16-600 pb-[2px] text-[#777777]">
-                    입금자명
-                  </span>
-                  <div className="flex items-center gap-1 border-b border-[#6A6A6A] pb-[2px]">
-                    <span className="typo-16-700 text-color-gray-900 leading-none">
-                      {name || "미지정"}
+                {/* 구매 수량 (조건부) */}
+                {isQuantityItem && (
+                  <div className="mt-2 flex items-center justify-start gap-4">
+                    <span className="typo-16-600 text-[#777777]">
+                      구매 수량
                     </span>
+                    <div className="flex items-center gap-3 rounded-md border border-[#E5E5E5] bg-white px-2 py-1">
+                      <button
+                        type="button"
+                        onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                        disabled={quantity <= 1}
+                        className="flex h-6 w-6 items-center justify-center text-[#777777] disabled:opacity-30"
+                      >
+                        -
+                      </button>
+                      <span className="typo-16-700 text-color-gray-900 w-4 text-center">
+                        {quantity}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => setQuantity((q) => Math.min(3, q + 1))}
+                        disabled={quantity >= 3}
+                        className="flex h-6 w-6 items-center justify-center text-[#777777] disabled:opacity-30"
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                <div className="mt-2 flex flex-col gap-2">
+                  {/* 입금자명 */}
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="typo-16-600 pb-0.5 text-[#777777]">
+                      입금자명
+                    </span>
+                    <div className="flex items-center gap-1 border-b border-[#6A6A6A] pb-0.5">
+                      <span className="typo-16-700 text-color-gray-900 leading-none">
+                        {name || "미지정"}
+                      </span>
+                    </div>
                   </div>
-                </div>
 
-                {/* 입금액 */}
-                <div className="flex items-center gap-2">
-                  <span className="typo-16-600 pb-[2px] text-[#777777]">
-                    입금액
-                  </span>
-                  <div className="flex items-center gap-1 pb-[2px]">
-                    <span className="typo-16-700 text-color-gray-900">
-                      {amount.toLocaleString()}
+                  {/* 입금액 */}
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="typo-16-600 pb-0.5 text-[#777777]">
+                      총 입금액
                     </span>
-                    <span className="typo-16-700 text-color-gray-900">원</span>
+                    <div className="flex items-center gap-1 pb-0.5">
+                      <span className="typo-16-700 text-color-gray-900">
+                        {totalAmount.toLocaleString()}
+                      </span>
+                      <span className="typo-16-700 text-color-gray-900">
+                        원
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -220,7 +263,7 @@ export default function DirectChargeDrawer({
             <div className="flex w-full flex-col items-center gap-4">
               <Button
                 disabled={!agreed || isPending}
-                onClick={() => handleConfirmAction(amount)}
+                onClick={handleConfirmAction}
               >
                 {isPending ? "요청 중..." : "충전 확인 요청하기"}
               </Button>
@@ -228,7 +271,7 @@ export default function DirectChargeDrawer({
                 <button
                   type="button"
                   onClick={onSwitchToToss}
-                  className="text-center text-[12px] font-medium text-[#999999] transition-colors hover:text-[#666666]"
+                  className="text-center text-xs font-medium text-[#999999] transition-colors hover:text-[#666666]"
                 >
                   혹은 Toss로 계좌이체하기
                 </button>
diff --git a/components/common/charge-confirm/TossChargeDrawer.tsx b/components/common/charge-confirm/TossChargeDrawer.tsx
index 0fa87fc..6fb23c9 100644
--- a/components/common/charge-confirm/TossChargeDrawer.tsx
+++ b/components/common/charge-confirm/TossChargeDrawer.tsx
@@ -49,6 +49,7 @@ export default function TossChargeDrawer({
 
   const [isEditingName, setIsEditingName] = React.useState(false);
   const [nameInput, setNameInput] = React.useState("");
+  const [quantity, setQuantity] = React.useState(1);
 
   // 실명이 로드되면 이름 업데이트
   React.useEffect(() => {
@@ -63,6 +64,7 @@ export default function TossChargeDrawer({
     if (open) {
       setIsEditingName(false);
       setNameInput(name || realNameData?.data?.realName || "");
+      setQuantity(1);
     }
   }, [open, name, realNameData]);
 
@@ -125,40 +127,47 @@ export default function TossChargeDrawer({
       return;
     }
 
-    purchase(productId, {
-      onSuccess: () => {
-        alert(
-          "충전 요청이 완료되었습니다! 토스가 설치되어 있다면 토스로 바로 이동합니다.",
-        );
-        onOpenChange(false);
-        queryClient.invalidateQueries({ queryKey: ["myProfile"] });
-
-        // 토스 송금 앱으로 즉시 자동 연동
-        handleTossTransfer(customAmount);
-      },
-      onError: (error: AxiosError<{ code?: string; message?: string }>) => {
-        const errorData = error.response?.data;
-        if (errorData?.code === "PAY-003") {
-          alert("이미 입금 확인 대기 중인 주문이 존재합니다.");
-          onOpenChange(false);
-        } else if (
-          errorData?.code === "PAY-004" ||
-          errorData?.message?.includes("사용자명") ||
-          errorData?.message?.includes("입금자명")
-        ) {
-          alert(errorData?.message || "먼저 입금자명을 설정해 주세요.");
-          onOpenChange(false);
-          drawerContext?.setActiveTab(2);
-        } else {
+    purchase(
+      { productId, quantity },
+      {
+        onSuccess: () => {
           alert(
-            errorData?.message ||
-              "충전 요청 중 오류가 발생했습니다. 다시 시도해 주세요.",
+            "충전 요청이 완료되었습니다! 토스가 설치되어 있다면 토스로 바로 이동합니다.",
           );
-        }
+          onOpenChange(false);
+          queryClient.invalidateQueries({ queryKey: ["myProfile"] });
+
+          // 토스 송금 앱으로 즉시 자동 연동
+          handleTossTransfer(customAmount);
+        },
+        onError: (error: AxiosError<{ code?: string; message?: string }>) => {
+          const errorData = error.response?.data;
+          if (errorData?.code === "PAY-003") {
+            alert("이미 입금 확인 대기 중인 주문이 존재합니다.");
+            onOpenChange(false);
+          } else if (
+            errorData?.code === "PAY-004" ||
+            errorData?.message?.includes("사용자명") ||
+            errorData?.message?.includes("입금자명")
+          ) {
+            alert(errorData?.message || "먼저 입금자명을 설정해 주세요.");
+            onOpenChange(false);
+            drawerContext?.setActiveTab(2);
+          } else {
+            alert(
+              errorData?.message ||
+                "충전 요청 중 오류가 발생했습니다. 다시 시도해 주세요.",
+            );
+          }
+        },
       },
-    });
+    );
   };
 
+  const isQuantityItem =
+    productName?.includes("옵션권") || productName?.includes("뽑기권");
+  const totalAmount = amount * quantity;
+
   return (
     <Drawer open={open} onOpenChange={onOpenChange}>
       <DrawerContent
@@ -169,7 +178,7 @@ export default function TossChargeDrawer({
         <div className="mx-auto flex w-full max-w-md flex-col items-center gap-8 px-4 pt-6 pb-10 outline-none">
           {/* ── Header (CONTENTS) ── */}
           <div className="flex h-6 w-full items-center justify-between">
-            <DrawerTitle className="font-sans text-[20px] leading-[24px] font-bold text-black">
+            <DrawerTitle className="font-sans text-xl leading-[24px] font-bold text-black">
               결제하기
             </DrawerTitle>
             <DrawerClose
@@ -183,22 +192,52 @@ export default function TossChargeDrawer({
           {/* ── Content (Frame 2612290) ── */}
           <div className="flex w-full flex-col items-center gap-6">
             {/* ── Product Card (Frame 2612294) ── */}
-            <div className="flex w-full flex-col items-start gap-4 rounded-[16px] bg-[#F5F5F5] p-4">
+            <div className="flex w-full flex-col items-start gap-4 rounded-2xl bg-[#F5F5F5] p-4">
               {/* Row 1 (Product Name & Price) */}
               <div className="flex w-full flex-row items-center justify-between border-b border-[#EAEAEA] pb-3">
-                <span className="text-[16px] font-semibold text-[#1A1A1A]">
+                <span className="text-base font-semibold text-[#1A1A1A]">
                   {productName || "뽑기권"}
                 </span>
-                <span className="text-[16px] font-semibold text-[#808080]">
+                <span className="text-base font-semibold text-[#808080]">
                   {amount.toLocaleString()}원
                 </span>
               </div>
 
               {/* Row 2 (Pricing/Depositor) */}
               <div className="flex w-full flex-col gap-3">
+                {/* 구매 수량 (조건부) */}
+                {isQuantityItem && (
+                  <div className="flex w-full flex-row items-center justify-start gap-4">
+                    <span className="text-base leading-[19px] font-semibold text-[#999999]">
+                      구매 수량
+                    </span>
+                    <div className="flex items-center gap-3 rounded-md border border-[#E5E5E5] bg-white px-2 py-1">
+                      <button
+                        type="button"
+                        onClick={() => setQuantity((q) => Math.max(1, q - 1))}
+                        disabled={quantity <= 1}
+                        className="flex h-6 w-6 items-center justify-center text-[#777777] disabled:opacity-30"
+                      >
+                        -
+                      </button>
+                      <span className="typo-16-700 text-color-gray-900 w-4 text-center">
+                        {quantity}
+                      </span>
+                      <button
+                        type="button"
+                        onClick={() => setQuantity((q) => Math.min(3, q + 1))}
+                        disabled={quantity >= 3}
+                        className="flex h-6 w-6 items-center justify-center text-[#777777] disabled:opacity-30"
+                      >
+                        +
+                      </button>
+                    </div>
+                  </div>
+                )}
+
                 {/* Depositor Name (Frame 2612281) */}
                 <div className="flex w-full flex-row items-center justify-end gap-2">
-                  <span className="text-[16px] leading-[19px] font-semibold text-[#999999]">
+                  <span className="text-base leading-[19px] font-semibold text-[#999999]">
                     입금자명
                   </span>
                   <div
@@ -220,11 +259,11 @@ export default function TossChargeDrawer({
                         }}
                         autoFocus
                         maxLength={6}
-                        className="w-16 border-none bg-transparent text-right text-[16px] font-bold text-[#1A1A1A] outline-none"
+                        className="w-16 border-none bg-transparent text-right text-base font-bold text-[#1A1A1A] outline-none"
                       />
                     ) : (
                       <>
-                        <span className="text-[16px] leading-[19px] font-bold text-[#1A1A1A]">
+                        <span className="text-base leading-[19px] font-bold text-[#1A1A1A]">
                           {name || "미지정"}
                         </span>
                         <Pencil size={12} className="text-[#B3B3B3]" />
@@ -235,14 +274,14 @@ export default function TossChargeDrawer({
 
                 {/* Total Price (Frame 2612282) */}
                 <div className="flex w-full flex-row items-center justify-end gap-2">
-                  <span className="text-[16px] leading-[19px] font-semibold text-[#999999]">
-                    결제 금액
+                  <span className="text-base leading-[19px] font-semibold text-[#999999]">
+                    총 결제 금액
                   </span>
                   <div className="flex flex-row items-center justify-center gap-1">
-                    <span className="text-[16px] leading-[19px] font-bold text-[#1A1A1A]">
-                      {amount.toLocaleString()}
+                    <span className="text-base leading-[19px] font-bold text-[#1A1A1A]">
+                      {totalAmount.toLocaleString()}
                     </span>
-                    <span className="text-[16px] leading-[19px] font-bold text-[#1A1A1A]">
+                    <span className="text-base leading-[19px] font-bold text-[#1A1A1A]">
                       원
                     </span>
                   </div>
@@ -257,8 +296,8 @@ export default function TossChargeDrawer({
             <button
               type="button"
               disabled={isPending}
-              onClick={() => handleConfirmAction(amount)}
-              className="flex h-12 w-full max-w-[345px] flex-row items-center justify-center gap-[10px] rounded-[8px] bg-[#1A1A1A] px-[18px] py-[3px] transition-colors hover:bg-black"
+              onClick={() => handleConfirmAction(totalAmount)}
+              className="flex h-12 w-full max-w-[345px] flex-row items-center justify-center gap-2.5 rounded-lg bg-[#1A1A1A] px-[18px] py-[3px] transition-colors hover:bg-black"
             >
               <Image
                 src="/charge/toss.png"
@@ -267,22 +306,22 @@ export default function TossChargeDrawer({
                 height={26}
                 className="order-0 h-[26px] w-[26px] flex-none flex-grow-0 object-contain"
               />
-              <span className="order-1 flex h-[24px] w-auto flex-none flex-grow-0 items-center justify-center text-center font-sans text-[20px] leading-[24px] font-semibold text-white">
+              <span className="order-1 flex h-6 w-auto flex-none flex-grow-0 items-center justify-center text-center font-sans text-xl leading-[24px] font-semibold text-white">
                 {isPending
                   ? "요청 중..."
-                  : `Toss로 ${amount.toLocaleString()}원 결제하기`}
+                  : `Toss로 ${totalAmount.toLocaleString()}원 결제하기`}
               </span>
             </button>
 
             {/* Manual Transfer Link */}
             <div className="flex flex-col items-center gap-1">
-              <span className="text-center text-[12px] leading-[160%] font-medium text-[#999999]">
+              <span className="text-center text-xs leading-[160%] font-medium text-[#999999]">
                 토스앱을 설치하지 않으셨나요?
               </span>
               <button
                 type="button"
                 onClick={onSwitchToDirect}
-                className="text-center text-[12px] leading-[160%] font-medium text-[#999999] underline underline-offset-4 transition-colors hover:text-[#666666]"
+                className="text-center text-xs leading-[160%] font-medium text-[#999999] underline underline-offset-4 transition-colors hover:text-[#666666]"
               >
                 수동으로 계좌이체하기
               </button>
diff --git a/components/common/charge/ChargeInventoryCard.tsx b/components/common/charge/ChargeInventoryCard.tsx
index 912e9e4..0ff3a01 100644
--- a/components/common/charge/ChargeInventoryCard.tsx
+++ b/components/common/charge/ChargeInventoryCard.tsx
@@ -25,7 +25,7 @@ export default function ChargeInventoryCard() {
   };
 
   return (
-    <div className="bg-color-gray-50 flex flex-col gap-2 rounded-[16px] p-4">
+    <div className="bg-color-gray-50 flex flex-col gap-2 rounded-2xl p-4">
       {/* 보유 수량 */}
       <div className="border-color-gray-100 flex flex-col gap-2 border-b pb-3">
         {INVENTORY_ROWS.map((row) => {
diff --git a/components/common/charge/DepositorNameContent.tsx b/components/common/charge/DepositorNameContent.tsx
index a3c93bc..e0b1347 100644
--- a/components/common/charge/DepositorNameContent.tsx
+++ b/components/common/charge/DepositorNameContent.tsx
@@ -47,7 +47,7 @@ export default function DepositorNameContent() {
       <div className="flex flex-col gap-2">
         <span className="typo-14-500 text-[#666666]">입금자명</span>
         <div
-          className="flex h-[48px] items-center border-b border-[#B3B3B3] px-2"
+          className="flex h-12 items-center border-b border-[#B3B3B3] px-2"
           style={{
             background:
               "linear-gradient(180deg, rgba(245, 245, 245, 0.03) 0%, rgba(245, 245, 245, 0.24) 100%)",
@@ -65,7 +65,7 @@ export default function DepositorNameContent() {
       </div>
 
       {/* ── 안내 가이드 (Frame 2612440) ── */}
-      <div className="bg-color-gray-50 flex flex-col gap-6 rounded-[16px] p-4">
+      <div className="bg-color-gray-50 flex flex-col gap-6 rounded-2xl p-4">
         {/* 유의사항 */}
         <div className="flex flex-col gap-2">
           <span className="typo-14-600 text-[#808080]">유의사항</span>
diff --git a/components/common/charge/QuickBundleCard.tsx b/components/common/charge/QuickBundleCard.tsx
index 061dce1..ff728ec 100644
--- a/components/common/charge/QuickBundleCard.tsx
+++ b/components/common/charge/QuickBundleCard.tsx
@@ -21,7 +21,7 @@ export default function QuickBundleCard({
     .join("+");
 
   return (
-    <div className="border-color-gray-64 bg-color-gray-50 flex flex-1 flex-col items-center justify-between rounded-[16px] border p-2 pt-4">
+    <div className="border-color-gray-64 bg-color-gray-50 flex flex-1 flex-col items-center justify-between rounded-2xl border p-2 pt-4">
       <div className="flex flex-col items-center gap-2">
         <Image
           src={imageUrl}
@@ -70,7 +70,7 @@ export default function QuickBundleCard({
           <button
             type="button"
             disabled={product.remainingPurchaseCount === 0}
-            className={`typo-16-600 mt-4 flex h-10 w-full items-center justify-center rounded-[8px] text-white transition-colors ${
+            className={`typo-16-600 mt-4 flex h-10 w-full items-center justify-center rounded-lg text-white transition-colors ${
               product.remainingPurchaseCount === 0
                 ? "bg-color-gray-200 text-color-gray-400 cursor-not-allowed"
                 : "bg-color-flame-700"
diff --git a/components/common/charge/ShopRows.tsx b/components/common/charge/ShopRows.tsx
index 0e6c223..da8d893 100644
--- a/components/common/charge/ShopRows.tsx
+++ b/components/common/charge/ShopRows.tsx
@@ -16,7 +16,7 @@ export function ShopItemRow({ product }: ShopItemRowProps) {
         trigger={
           <button
             type="button"
-            className="typo-16-600 bg-color-flame-700 flex h-10 w-24 items-center justify-center rounded-[8px] text-white"
+            className="typo-16-600 bg-color-flame-700 flex h-10 w-24 items-center justify-center rounded-lg text-white"
           >
             {product.price.toLocaleString()}원
           </button>
@@ -67,7 +67,7 @@ export function ShopBundleRow({ product }: ShopBundleRowProps) {
         </div>
 
         {/* 두 번째 줄: 리워드 목록 상세 */}
-        <span className="text-[10px] leading-[12px] font-semibold text-[#808080]">
+        <span className="typo-10-500 leading-[12px] text-[#808080]">
           {description}
         </span>
 
@@ -85,7 +85,7 @@ export function ShopBundleRow({ product }: ShopBundleRowProps) {
           <button
             type="button"
             disabled={product.remainingPurchaseCount === 0}
-            className={`typo-16-600 flex h-10 w-24 shrink-0 items-center justify-center rounded-[8px] text-white transition-colors ${
+            className={`typo-16-600 flex h-10 w-24 shrink-0 items-center justify-center rounded-lg text-white transition-colors ${
               product.remainingPurchaseCount === 0
                 ? "bg-color-gray-200 text-color-gray-400 cursor-not-allowed"
                 : "bg-color-flame-700"
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 2eb1025..6eac661 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -49,7 +49,7 @@ export default function Button({
       disabled={disabled}
       className={cn(
         // 기본 스타일
-        "flex h-12 w-full shrink-0 items-center justify-center rounded-[16px] transition-colors duration-100",
+        "flex h-12 w-full shrink-0 items-center justify-center rounded-2xl transition-colors duration-100",
         // typo- 클래스가 명시되지 않은 경우에만 기본 typo-20-600 적용
         !className?.includes("typo-") && "typo-20-600",
         fixed && "fixed z-50 mx-auto",
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 863a025..a621470 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -111,7 +111,7 @@ function DialogFooter({
       {children}
       {showCloseButton && (
         <DialogPrimitive.Close asChild>
-          <button className="flex h-10 items-center justify-center rounded-[12px] border border-gray-200 bg-transparent px-4 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-50">
+          <button className="flex h-10 items-center justify-center rounded-xl border border-gray-200 bg-transparent px-4 text-sm font-medium text-gray-500 transition-colors hover:bg-gray-50">
             Close
           </button>
         </DialogPrimitive.Close>
diff --git a/hooks/admin/useAdminOrderSocket.ts b/hooks/admin/useAdminOrderSocket.ts
index 0c61f35..6f72203 100644
--- a/hooks/admin/useAdminOrderSocket.ts
+++ b/hooks/admin/useAdminOrderSocket.ts
@@ -58,17 +58,17 @@ export function useAdminOrderSocket() {
 
   const handleOrderCreated = useCallback(
     (payload: OrderCreatedPayload) => {
-      queryClient.setQueryData<AdminOrdersResponse>(["adminOrders"], (old) => {
+      queryClient.setQueryData<AdminOrder[]>(["adminOrders"], (old) => {
         if (!old) return old;
 
-        const exists = old.data.some(
-          (order) => order.requestId === payload.orderId,
-        );
+        const exists = old.some((order) => order.requestId === payload.orderId);
         if (exists) return old;
 
         const newOrder: AdminOrder = {
           requestId: payload.orderId,
           memberId: payload.memberId,
+          productId: -1, // Web Socket 페이로드에 없는 경우 기본값
+          productCode: "UNKNOWN",
           requestedItemName: payload.requestedItemName,
           requesterRealName: payload.requesterRealName,
           requesterUsername: payload.requesterUsername,
@@ -81,10 +81,7 @@ export function useAdminOrderSocket() {
           expiresAt: payload.expiresAt,
         };
 
-        return {
-          ...old,
-          data: [newOrder, ...old.data],
-        };
+        return [newOrder, ...old];
       });
     },
     [queryClient],
@@ -92,20 +89,17 @@ export function useAdminOrderSocket() {
 
   const handleOrderStatusChanged = useCallback(
     (payload: OrderStatusChangedPayload) => {
-      queryClient.setQueryData<AdminOrdersResponse>(["adminOrders"], (old) => {
+      queryClient.setQueryData<AdminOrder[]>(["adminOrders"], (old) => {
         if (!old) return old;
 
-        return {
-          ...old,
-          data: old.data.map((order) =>
-            order.requestId === payload.orderId
-              ? {
-                  ...order,
-                  status: payload.toStatus as AdminOrder["status"],
-                }
-              : order,
-          ),
-        };
+        return old.map((order) =>
+          order.requestId === payload.orderId
+            ? {
+                ...order,
+                status: payload.toStatus as AdminOrder["status"],
+              }
+            : order,
+        );
       });
     },
     [queryClient],
diff --git a/hooks/admin/useAdminOrders.ts b/hooks/admin/useAdminOrders.ts
index 3f79b3d..b209e4c 100644
--- a/hooks/admin/useAdminOrders.ts
+++ b/hooks/admin/useAdminOrders.ts
@@ -6,6 +6,8 @@ import { AxiosError } from "axios";
 export interface AdminOrder {
   requestId: number;
   memberId: number;
+  productId: number;
+  productCode: string;
   requestedItemName: string;
   requesterRealName: string;
   requesterUsername: string;
@@ -18,7 +20,18 @@ export interface AdminOrder {
   expiresAt: string;
 }
 
-interface ApiResponse<T> {
+/* ── 페이징 응답 구조 ── */
+export interface PaginatedResponse<T> {
+  content: T[];
+  currentPage: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+  hasNext: boolean;
+  hasPrevious: boolean;
+}
+
+export interface ApiResponse<T> {
   code: string;
   status: number;
   message: string;
@@ -26,11 +39,22 @@ interface ApiResponse<T> {
 }
 
 /* ── 대기 주문 목록 조회 ── */
-const fetchAdminOrders = async (): Promise<ApiResponse<AdminOrder[]>> => {
-  const { data } = await api.get<ApiResponse<AdminOrder[]>>(
-    "/api/v1/admin/payment/requests",
-  );
-  return data;
+const fetchAdminOrders = async (): Promise<AdminOrder[]> => {
+  let allOrders: AdminOrder[] = [];
+  let page = 0;
+  let hasNext = true;
+
+  while (hasNext) {
+    const { data } = await api.get<ApiResponse<PaginatedResponse<AdminOrder>>>(
+      "/api/v1/admin/payment/requests",
+      { params: { page, size: 100, sort: "requestedAt,desc" } },
+    );
+    allOrders = [...allOrders, ...data.data.content];
+    hasNext = data.data.hasNext;
+    page += 1;
+  }
+
+  return allOrders;
 };
 
 /* ── 승인 ── */
diff --git a/hooks/usePurchaseProduct.ts b/hooks/usePurchaseProduct.ts
index b15a10b..a4745f5 100644
--- a/hooks/usePurchaseProduct.ts
+++ b/hooks/usePurchaseProduct.ts
@@ -12,11 +12,15 @@ interface PurchaseResponse {
 /**
  * 상품 구매(주문 생성) API 호출 함수
  */
-export const postPurchaseProduct = async (
-  productId: number,
-): Promise<PurchaseResponse> => {
+export const postPurchaseProduct = async ({
+  productId,
+  quantity = 1,
+}: {
+  productId: number;
+  quantity?: number;
+}): Promise<PurchaseResponse> => {
   const { data } = await api.post<PurchaseResponse>(
-    `/api/v1/shop/purchase/${productId}`,
+    `/api/v1/shop/purchase/${productId}?quantity=${quantity}`,
     {},
   );
   return data;
@@ -29,7 +33,13 @@ export const usePurchaseProduct = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: (productId: number) => postPurchaseProduct(productId),
+    mutationFn: ({
+      productId,
+      quantity,
+    }: {
+      productId: number;
+      quantity?: number;
+    }) => postPurchaseProduct({ productId, quantity }),
     onSuccess: (data) => {
       console.log("✅ 주문 생성 성공:", data);
       queryClient.invalidateQueries({ queryKey: ["requestStatus"] });
diff --git a/lib/axios.ts b/lib/axios.ts
index da49f9f..d1e6605 100644
--- a/lib/axios.ts
+++ b/lib/axios.ts
@@ -1,8 +1,11 @@
 import axios from "axios";
 
 // 1. 공통 설정 (URL, 헤더 등)
+// 개발 환경에서는 프록시(rewrites)를 타도록 빈 문자열 지정 (브라우저가 알아서 localhost:3000으로 보냄)
 const API_URL =
-  process.env.NEXT_PUBLIC_API_URL || "https://srv.comatching.site";
+  process.env.NODE_ENV === "development"
+    ? ""
+    : process.env.NEXT_PUBLIC_API_URL || "https://srv.comatching.site";
 
 const axiosConfig = {
   baseURL: API_URL,
diff --git a/public/main/main-roulette.png b/public/main/main-roulette.png
deleted file mode 100644
index b18d3c3..0000000
Binary files a/public/main/main-roulette.png and /dev/null differ
diff --git a/public/roulette/roulette3.png b/public/roulette/free_roulette.png
similarity index 100%
rename from public/roulette/roulette3.png
rename to public/roulette/free_roulette.png
diff --git a/public/sw.js b/public/sw.js
index 9a323d1..febf4b8 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -34,18 +34,46 @@ self.addEventListener("fetch", (event) => {
   // Do not intercept FCM route or API calls
   if (
     event.request.url.includes("/api/") ||
-    event.request.url.includes("firebase")
+    event.request.url.includes("firebase") ||
+    event.request.url.includes("/ws/")
   ) {
     return;
   }
 
+  // HTML 문서 요청(Navigation)이거나 루트("/") 요청일 경우 Network First 전략 사용
+  // 이유: 캐시된 예전 HTML이 새 빌드의 CSS/JS 청크를 참조하여 404가 발생하는 것을 방지
+  if (
+    event.request.mode === "navigate" ||
+    new URL(event.request.url).pathname === "/"
+  ) {
+    event.respondWith(
+      fetch(event.request)
+        .then((networkResponse) => {
+          // 2xx 성공 응답일 때만 캐시 갱신
+          // 4xx·5xx 오류 응답으로 정상 캐시를 덮어쓰지 않도록 방지
+          if (networkResponse.ok) {
+            const clonedResponse = networkResponse.clone();
+            caches.open(CACHE_NAME).then((cache) => {
+              cache.put(event.request, clonedResponse);
+            });
+          }
+          return networkResponse;
+        })
+        .catch(() => {
+          // 네트워크 실패 시 오프라인 캐시 반환
+          return caches.match(event.request);
+        }),
+    );
+    return;
+  }
+
+  // 그 외 정적 에셋은 기존처럼 Cache First 전략
   event.respondWith(
     caches.match(event.request).then((cachedResponse) => {
       if (cachedResponse) {
         return cachedResponse;
       }
       return fetch(event.request).catch(() => {
-        // 네트워크 연결 실패 시 브라우저가 에러를 뿜지 않도록 503 에러 Response 반환
         return new Response("Network Error", {
           status: 503,
           statusText: "Network Error",