diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ab114d4..9e300f1 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -118,10 +118,7 @@ export default function Header({
             className={`h-16 ${darkMode ? "invert" : ""}`}
           />
         ) : (
-          <h1
-            className="font-semibold text-[#333333] m-0"
-            style={{ fontSize: "1.2rem" }}
-          >
+          <h1 className="font-semibold text-[#333333] m-0 text-lg">
             {getPageTitle()}
           </h1>
         )}
diff --git a/src/components/common/GradientButton.tsx b/src/components/common/GradientButton.tsx
index 5b7b6bd..0767618 100644
--- a/src/components/common/GradientButton.tsx
+++ b/src/components/common/GradientButton.tsx
@@ -8,12 +8,11 @@ type Props = {
   gradientTo?: string;
   textColor?: string;
   borderWidth?: number;
-  width?: number;
-  height?: number;
   borderRadius?: number;
-  fontSize?: number;
   className?: string;
+  buttonClassName?: string;
   disabled?: boolean;
+  fullWidth?: boolean;
 };
 
 export default function GradientButton({
@@ -24,34 +23,30 @@ export default function GradientButton({
   gradientTo = "#678BF7",
   textColor = "#FFFFFF",
   borderWidth = 3,
-  width = 40,
-  height = 12,
   borderRadius,
-  fontSize,
   className = "",
+  buttonClassName = "",
   disabled = false,
+  fullWidth = false,
 }: Props) {
   return (
-    // 바깥 div: 그라데이션 배경 (테두리 역할)
     <div
-      className={`rounded-full ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
+      className={`rounded-full ${fullWidth ? "w-full" : ""} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
       style={{
-        borderRadius: `${borderRadius}px`,
+        borderRadius: borderRadius ? `${borderRadius}px` : undefined,
         background: `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})`,
         padding: borderWidth,
       }}
     >
-      {/* 안쪽 버튼: 단색 배경 */}
       <button
         onClick={onClick}
         disabled={disabled}
-        className={`flex items-center justify-center gap-2 rounded-full font-semibold text-base transition-opacity ${disabled ? "cursor-not-allowed" : "active:opacity-80"}`}
+        className={`gradient-btn flex items-center justify-center gap-2 rounded-full font-semibold transition-opacity ${fullWidth ? "w-full" : ""} ${disabled ? "cursor-not-allowed" : "active:opacity-80"} ${buttonClassName}`}
         style={{
-          borderRadius: `${borderRadius}px`,
+          borderRadius: borderRadius ? `${borderRadius}px` : undefined,
           backgroundColor: bgColor,
-          padding: `${height}px ${width}px`, // 세로 가로
-          color: `${textColor}`,
-          fontSize: `${fontSize}rem`,
+          padding: "10px 24px",
+          color: textColor,
         }}
       >
         {children}
diff --git a/src/components/common/PolicyScroll.tsx b/src/components/common/PolicyScroll.tsx
index 6ed6db4..c69dab8 100644
--- a/src/components/common/PolicyScroll.tsx
+++ b/src/components/common/PolicyScroll.tsx
@@ -149,12 +149,7 @@ export default function PolicyScroll({
   return (
     <div>
       <div className="flex items-center justify-between mb-4">
-        <h2
-          className="font-semibold text-[#333333]"
-          style={{ fontSize: "1.125em" }}
-        >
-          {title}
-        </h2>
+        <h2 className="font-semibold text-[#333333] text-lg">{title}</h2>
       </div>
 
       <div
@@ -178,10 +173,10 @@ export default function PolicyScroll({
             >
               {getPolicyIcon(policy.type)}
             </div>
-            <div className="text-[#999999] mb-1" style={{ fontSize: "0.75em" }}>
-              [{policy.type}]
+            <div className="text-[#999999] mb-1 text-xs">[{policy.type}]</div>
+            <div className="text-[#333333] font-medium text-base">
+              {policy.title}
             </div>
-            <div className="text-[#333333] font-medium">{policy.title}</div>
           </div>
         ))}
       </div>
diff --git a/src/hooks/usePieChartSize.ts b/src/hooks/usePieChartSize.ts
new file mode 100644
index 0000000..82c1a84
--- /dev/null
+++ b/src/hooks/usePieChartSize.ts
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+
+// usePieChartSize.ts
+export function usePieChartSize() {
+  const calc = () => {
+    const vw = window.innerWidth;
+    if (vw >= 1400) return { size: 320, strokeWidth: 25 };
+    if (vw >= 768)
+      return {
+        size: Math.round(Math.min(vw * 0.5, 460)),
+        strokeWidth: Math.round(Math.min(vw * 0.04, 40)), // vw의 3%, 최대 40
+      };
+    return { size: 320, strokeWidth: 25 };
+  };
+
+  const [chart, setChart] = useState(calc);
+
+  useEffect(() => {
+    const handler = () => setChart(calc());
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+
+  return chart;
+}
diff --git a/src/index.css b/src/index.css
index d5b9bb5..b8e5a90 100644
--- a/src/index.css
+++ b/src/index.css
@@ -123,15 +123,114 @@
 }
 
 /* 큰글씨 모드에서 Tailwind rem 기반 텍스트 클래스 오버라이드 */
-.large-text-content .text-xs { font-size: 0.85em !important; }
-.large-text-content .text-sm { font-size: 0.975em !important; }
-.large-text-content .text-base { font-size: 1.13em !important; }
-.large-text-content .text-lg { font-size: 1.27em !important; }
-.large-text-content .text-xl { font-size: 1.41em !important; }
-.large-text-content .text-2xl { font-size: 1.69em !important; }
-.large-text-content .text-3xl { font-size: 2.1em !important; }
+.large-text-content .text-xs {
+  font-size: 0.85em !important;
+}
+.large-text-content .text-sm {
+  font-size: 0.975em !important;
+}
+.large-text-content .text-base {
+  font-size: 1.13em !important;
+}
+.large-text-content .text-lg {
+  font-size: 1.27em !important;
+}
+.large-text-content .text-xl {
+  font-size: 1.41em !important;
+}
+.large-text-content .text-2xl {
+  font-size: 1.69em !important;
+}
+.large-text-content .text-3xl {
+  font-size: 2.1em !important;
+}
 
 /* 큰글씨 모드에서 상태바는 고정 크기 유지 */
 .large-text-content .status-bar {
   font-size: 14px !important;
 }
+
+/* 400px 이하에서 모든 텍스트 크기 축소 */
+@media (max-width: 400px) {
+  .text-xs {
+    font-size: 0.65rem !important;
+  } /* 10px */
+  .text-sm {
+    font-size: 0.75rem !important;
+  } /* 12px */
+  .text-base {
+    font-size: 0.8rem !important;
+  } /* 13px */
+  .text-lg {
+    font-size: 0.9rem !important;
+  } /* 14px */
+  .text-xl {
+    font-size: 1rem !important;
+  } /* 16px */
+  .text-2xl {
+    font-size: 1.2rem !important;
+  } /* 19px */
+  .text-3xl {
+    font-size: 1.4rem !important;
+  } /* 22px */
+
+  /* 간격도 함께 축소 */
+  .gap-3 {
+    gap: 0.5rem !important;
+  }
+  .gap-4 {
+    gap: 0.75rem !important;
+  }
+  .mb-4 {
+    margin-bottom: 0.75rem !important;
+  }
+  .p-4 {
+    padding: 0.75rem !important;
+  }
+  .px-6 {
+    padding-left: 1rem !important;
+    padding-right: 1rem !important;
+  }
+}
+/* 태블릿 뷰 (768px 이상)에서 텍스트 크기 확대 */
+@media (min-width: 768px) and (max-width: 1399px) {
+  .text-xs {
+    font-size: 0.875rem !important;
+  } /* 14px */
+  .text-sm {
+    font-size: 1rem !important;
+  } /* 16px */
+  .text-base {
+    font-size: 1.125rem !important;
+  } /* 18px */
+  .text-lg {
+    font-size: 1.25rem !important;
+  } /* 20px */
+  .text-xl {
+    font-size: 1.5rem !important;
+  } /* 24px */
+  .text-2xl {
+    font-size: 1.875rem !important;
+  } /* 30px */
+  .text-3xl {
+    font-size: 2.25rem !important;
+  } /* 36px */
+
+  /* 간격도 함께 확대 */
+  .gap-3 {
+    gap: 1rem !important;
+  }
+  .gap-4 {
+    gap: 1.25rem !important;
+  }
+  .mb-4 {
+    margin-bottom: 1.25rem !important;
+  }
+  .p-4 {
+    padding: 1.25rem !important;
+  }
+  .px-6 {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+  }
+}
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
index 8b4f133..05d60c6 100644
--- a/src/layout/Layout.tsx
+++ b/src/layout/Layout.tsx
@@ -37,10 +37,10 @@ export default function Layout({ children }: LayoutProps) {
   return (
     // 1. 전체 화면을 고정하고 스크롤을 막기
     <div
-      className={`flex justify-center h-[100dvh] min-h-[600px] overflow-hidden bg-[#f5f5f5] font-sans ${darkMode ? "dark" : ""}`}
+      className={`flex justify-center h-[100dvh] min-h-[600px] overflow-hidden bg-[#f5f5f5] font-sans tablet:bg-white ${darkMode ? "dark" : ""}`}
     >
       <div
-        className={`relative w-[480px] max-w-full min-w-[330px] h-full flex flex-col bg-no-repeat bg-top transition-all duration-300 ${darkMode ? "invert" : ""} ${largeTextMode ? "large-text-content" : ""}`}
+        className={`relative w-full desktop:w-[480px] max-w-full min-w-[330px] h-full flex flex-col bg-no-repeat bg-top transition-all duration-300 ${darkMode ? "invert" : ""} ${largeTextMode ? "large-text-content" : ""}`}
         style={{
           backgroundImage: `url(${backgroundImg})`,
           backgroundSize: "100% auto",
@@ -65,7 +65,7 @@ export default function Layout({ children }: LayoutProps) {
         {/* 3. 메인 스크롤 영역: min-h-0이 중요!!! flex 자식의 최소 높이를 0으로 풀어야 내부 스크롤이 잡힘 */}
         <main
           ref={mainRef}
-          className="flex-1 overflow-y-auto relative px-2 custom-scrollbar min-h-0"
+          className="flex-1 overflow-y-auto relative px-2 tablet:px-8 desktop:px-2 custom-scrollbar min-h-0"
         >
           {/* pt-10 정도로 늘려서 차트가 헤더를 침범하지 못하게 물리적 공간을 확보하세요. */}
           <div className="pt-5 pb-10">{children}</div>
diff --git a/src/page/Admin/AdminLoginPage.tsx b/src/page/Admin/AdminLoginPage.tsx
index f2de224..7097998 100644
--- a/src/page/Admin/AdminLoginPage.tsx
+++ b/src/page/Admin/AdminLoginPage.tsx
@@ -112,8 +112,12 @@ export default function AdminLoginPage() {
             animate={{ opacity: 1 }}
             transition={{ duration: 0.8, delay: 0.3 }}
           >
-            <h1 className="text-2xl font-semibold text-gray-900">관리자 로그인</h1>
-            <p className="text-gray-600 text-sm mt-1">관리자 계정으로 로그인해주세요</p>
+            <h1 className="text-2xl font-semibold text-gray-900">
+              관리자 로그인
+            </h1>
+            <p className="text-gray-600 text-sm mt-1">
+              관리자 계정으로 로그인해주세요
+            </p>
           </motion.div>
 
           {/* 입력 폼 */}
@@ -124,7 +128,9 @@ export default function AdminLoginPage() {
             transition={{ duration: 0.8, delay: 0.4 }}
           >
             <div>
-              <label className="block text-lg font-medium text-gray-700 mb-3">이메일</label>
+              <label className="block text-lg font-medium text-gray-700 mb-3">
+                이메일
+              </label>
               <input
                 type="email"
                 value={email}
@@ -136,7 +142,9 @@ export default function AdminLoginPage() {
               />
             </div>
             <div>
-              <label className="block text-lg font-medium text-gray-700 mb-3">비밀번호</label>
+              <label className="block text-lg font-medium text-gray-700 mb-3">
+                비밀번호
+              </label>
               <input
                 type="password"
                 value={password}
@@ -157,19 +165,20 @@ export default function AdminLoginPage() {
 
           {/* 로그인 버튼 */}
           <motion.div
-            className="max-w-sm mt-12"
+            className="max-w-sm mt-12 w-full"
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.6 }}
           >
             <GradientButton
+              fullWidth
               onClick={handleLogin}
               bgColor="#678BF7"
               gradientFrom="#A8C8FF"
               gradientTo="#678BF7"
-              width={120}
-              height={16}
               disabled={isLoading}
+              buttonClassName="py-4"
+              borderRadius={15}
             >
               <span className="text-lg font-semibold">
                 {isLoading ? "로그인 중..." : "관리자 로그인"}
diff --git a/src/page/Admin/components/FamilyDetailModal.tsx b/src/page/Admin/components/FamilyDetailModal.tsx
deleted file mode 100644
index 741c82c..0000000
--- a/src/page/Admin/components/FamilyDetailModal.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useQuery } from "@tanstack/react-query";
-import { familyService, sharedPoolService } from "@/api";
-import type { FamilyMembersByLineResponse } from "@/api/services/familyService";
-import type { SharedData } from "@/types/SharedData";
-import Avatar from "@/components/common/Avatar";
-import ClockIcon from "@/assets/icon/clock2.svg";
-import GradientButton from "@/components/common/GradientButton";
-import { useNavigate } from "react-router-dom";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  lineId?: number;
-};
-
-const COLORS = {
-  primary: "#678BF7",
-  secondary: "#9A9CEA",
-  textGray: "#808692",
-  textDark: "#374151",
-  textLight: "#9CA3AF",
-  danger: "#BA7E7D",
-  divider: "#F3F4F6",
-} as const;
-
-function calculateDaysUntilNextMonth(): number {
-  const today = new Date();
-  const nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
-  const diffTime = nextMonth.getTime() - today.getTime();
-  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-}
-
-export default function FamilyDetailModal({ isOpen, onClose, lineId }: Props) {
-  const navigate = useNavigate();
-
-  const { data: familyData, isLoading: isFamilyLoading } = useQuery<FamilyMembersByLineResponse>({
-    queryKey: ["familyMembersByLine", lineId],
-    queryFn: () => familyService.getMembersByLine(lineId!).then((res) => res.data),
-    enabled: isOpen && !!lineId,
-  });
-
-  const { data: sharedPoolData, isLoading: isPoolLoading } = useQuery<SharedData>({
-    queryKey: ["sharedPool"],
-    queryFn: () => sharedPoolService.getMainRemainingAmount(),
-    enabled: isOpen,
-  });
-
-  if (!isOpen) return null;
-
-  const isLoading = isFamilyLoading || isPoolLoading;
-  const remainingDays = calculateDaysUntilNextMonth();
-
-  const usedData = sharedPoolData
-    ? sharedPoolData.sharedPoolTotalData - sharedPoolData.sharedPoolRemainingData
-    : 0;
-
-  const usagePercent = sharedPoolData && sharedPoolData.sharedPoolTotalData > 0
-    ? (usedData / sharedPoolData.sharedPoolTotalData) * 100
-    : 0;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={onClose}>
-      <div
-        className="bg-white rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* 헤더 */}
-        <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl">
-          <h2 className="text-xl font-bold text-gray-900">가족 상세 정보</h2>
-          <button
-            onClick={onClose}
-            className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
-          >
-            <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-
-        {/* 콘텐츠 */}
-        <div className="p-6 space-y-6">
-          {isLoading ? (
-            <div className="flex items-center justify-center py-12">
-              <div className="w-10 h-10 border-4 border-[#678BF7] border-t-transparent rounded-full animate-spin" />
-            </div>
-          ) : (
-            <>
-              {/* 공유 데이터 풀 정보 */}
-              {sharedPoolData && (
-                <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-100">
-                  <div className="flex justify-between items-start mb-4">
-                    <h3 className="text-base font-semibold text-gray-800">총 공유 데이터</h3>
-                    <span className="text-xs font-medium px-2 py-1 rounded-full bg-red-100 text-red-600">
-                      D-{remainingDays}
-                    </span>
-                  </div>
-
-                  <div className="mb-4">
-                    <div className="flex justify-between items-center mb-3">
-                      <div className="text-3xl font-bold" style={{ color: COLORS.primary }}>
-                        {sharedPoolData.sharedPoolTotalData.toFixed(2)} GB
-                      </div>
-                      <GradientButton
-                        onClick={() => {
-                          onClose();
-                          navigate("/log");
-                        }}
-                        width={20}
-                        height={8}
-                        borderRadius={15}
-                      >
-                        <img src={ClockIcon} className="w-4 h-4" alt="clock" />
-                        <span className="text-xs whitespace-nowrap">사용 로그</span>
-                      </GradientButton>
-                    </div>
-
-                    <div className="flex gap-6 text-sm">
-                      <div>
-                        <span className="text-gray-500">기본 공유</span>
-                        <div className="font-semibold text-base text-gray-800">
-                          {sharedPoolData.sharedPoolBaseData.toFixed(2)} GB
-                        </div>
-                      </div>
-                      <div>
-                        <span className="text-gray-500">가족 추가</span>
-                        <div className="font-semibold text-base text-gray-800">
-                          {sharedPoolData.sharedPoolAdditionalData.toFixed(2)} GB
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="border-t border-blue-200 pt-4">
-                    <div className="text-xs mb-2 text-gray-600">현재 사용량</div>
-                    <div className="flex items-center gap-3 text-xs text-gray-600">
-                      <div className="flex-1 h-3 rounded-full bg-white/60 overflow-hidden">
-                        <div
-                          className="h-full rounded-full transition-all duration-500"
-                          style={{
-                            width: `${usagePercent}%`,
-                            background: `linear-gradient(to right, ${COLORS.primary}, ${COLORS.secondary})`,
-                          }}
-                        />
-                      </div>
-                      <span className="whitespace-nowrap">
-                        사용 {usedData.toFixed(2)}GB / 잔여 {sharedPoolData.sharedPoolRemainingData.toFixed(2)}GB
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {/* 가족 구성원 정보 */}
-              {familyData && (
-                <div>
-                  <h3 className="text-base font-semibold text-gray-800 mb-4">가족 구성원</h3>
-                  <div className="space-y-3">
-                    {familyData.members.map((member) => {
-                      const isOwner = member.role === "OWNER";
-
-                      return (
-                        <div
-                          key={member.lineId}
-                          className="bg-white rounded-xl border border-gray-200 p-4 hover:shadow-md transition-shadow"
-                        >
-                          <div className="flex items-center gap-3">
-                            <Avatar
-                              userName={member.userName}
-                              isOwner={isOwner}
-                              colorIndex={member.userId}
-                            />
-                            <div className="flex-1">
-                              <div className="flex items-center gap-2">
-                                <span className="font-semibold text-gray-900">{member.userName}</span>
-                                <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
-                                  {isOwner ? "대표자" : "구성원"}
-                                </span>
-                              </div>
-                              <div className="text-xs text-gray-500">{member.phone}</div>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    })}
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/page/Admin/components/policy/BlockPolicyTab.tsx b/src/page/Admin/components/policy/BlockPolicyTab.tsx
index b0f1e05..b278df6 100644
--- a/src/page/Admin/components/policy/BlockPolicyTab.tsx
+++ b/src/page/Admin/components/policy/BlockPolicyTab.tsx
@@ -9,13 +9,19 @@ type Props = {
 
 const BlockPolicyTab = ({ onBlockApply, lineId, onPolicyChange }: Props) => {
   if (!lineId) return null;
-  
+
   return (
-    <div className="flex flex-col gap-3 py-4 text-center text-gray-500">
+    <div className="flex flex-row gap-3 py-4 items-start">
       <BlockPolicyManager lineId={lineId} onPolicyChange={onPolicyChange} />
-      <ImmediateBlockPolicy lineId={lineId} onApply={onBlockApply} onPolicyChange={onPolicyChange} />
+      <ImmediateBlockPolicy
+        lineId={lineId}
+        onApply={(blockEndAt) => {
+          onBlockApply?.(blockEndAt);
+          onPolicyChange?.();
+        }}
+      />
     </div>
   );
 };
 
-export default BlockPolicyTab;
\ No newline at end of file
+export default BlockPolicyTab;
diff --git a/src/page/Admin/components/policy/LimitPolicyTab.tsx b/src/page/Admin/components/policy/LimitPolicyTab.tsx
index 17b97fb..488b419 100644
--- a/src/page/Admin/components/policy/LimitPolicyTab.tsx
+++ b/src/page/Admin/components/policy/LimitPolicyTab.tsx
@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import SliderCard from "./SliderCard";
 import { limitService } from "@/api";
 
-const LimitPolicyTab = ({ 
-  lineId, 
-  onPolicyChange 
-}: { 
+const LimitPolicyTab = ({
+  lineId,
+  onPolicyChange,
+}: {
   lineId?: number;
   onPolicyChange?: () => void;
 }) => {
@@ -16,7 +16,7 @@ const LimitPolicyTab = ({
   });
 
   return (
-    <div className="flex flex-col gap-3 py-4 text-center text-gray-500">
+    <div className="flex flex-row gap-3 py-4 items-start text-center text-gray-500">
       <SliderCard
         title="월 공유 데이터 사용량 제한"
         type="shared"
diff --git a/src/page/Detail/DetailPage.tsx b/src/page/Detail/DetailPage.tsx
index 40b92e9..45f29e6 100644
--- a/src/page/Detail/DetailPage.tsx
+++ b/src/page/Detail/DetailPage.tsx
@@ -346,28 +346,30 @@ export default function Detail() {
         />
       </motion.div>
 
-      <motion.div
-        variants={itemVariants}
-        transition={{ ...pageTransition, delay: 0.2 }}
-      >
-        <DataBalance
-          personalUsed={dataUsage.personalUsedAmount}
-          personalTotal={dataUsage.personalTotalAmount}
-          sharedUsed={dataUsage.sharedPoolUsedAmount}
-          sharedTotal={dataUsage.sharedPoolTotalAmount}
-        />
-      </motion.div>
+      <div className="grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-1 gap-4">
+        <motion.div
+          variants={itemVariants}
+          transition={{ ...pageTransition, delay: 0.2 }}
+        >
+          <DataBalance
+            personalUsed={dataUsage.personalUsedAmount}
+            personalTotal={dataUsage.personalTotalAmount}
+            sharedUsed={dataUsage.sharedPoolUsedAmount}
+            sharedTotal={dataUsage.sharedPoolTotalAmount}
+          />
+        </motion.div>
 
-      <motion.div
-        variants={itemVariants}
-        transition={{ ...pageTransition, delay: 0.3 }}
-      >
-        <UsageTrend
-          usages={monthlyUsage.usages}
-          averageAmount={monthlyUsage.averageAmount}
-          currentYearMonth={formatYearMonth(currentDate)}
-        />
-      </motion.div>
+        <motion.div
+          variants={itemVariants}
+          transition={{ ...pageTransition, delay: 0.3 }}
+        >
+          <UsageTrend
+            usages={monthlyUsage.usages}
+            averageAmount={monthlyUsage.averageAmount}
+            currentYearMonth={formatYearMonth(currentDate)}
+          />
+        </motion.div>
+      </div>
 
       <motion.div
         variants={itemVariants}
diff --git a/src/page/Login/LoginPage.tsx b/src/page/Login/LoginPage.tsx
index 9d112af..b63a92c 100644
--- a/src/page/Login/LoginPage.tsx
+++ b/src/page/Login/LoginPage.tsx
@@ -173,23 +173,22 @@ export default function LoginPage() {
 
           {/* 로그인 버튼 */}
           <motion.div
-            className="max-w-sm mt-12"
+            className="max-w-sm mt-12 w-full"
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.6 }}
           >
             <GradientButton
+              fullWidth
               onClick={handleLogin}
               bgColor="#678BF7"
               gradientFrom="#A8C8FF"
               gradientTo="#678BF7"
-              width={120}
-              height={16}
               disabled={isLoading}
+              buttonClassName="py-4 text-lg font-semibold"
+              borderRadius={15}
             >
-              <span className="text-lg font-semibold">
-                {isLoading ? "로그인 중..." : "로그인"}
-              </span>
+              {isLoading ? "로그인 중..." : "로그인"}
             </GradientButton>
           </motion.div>
         </div>
diff --git a/src/page/Main/MainPage.tsx b/src/page/Main/MainPage.tsx
index 357290b..94820d2 100644
--- a/src/page/Main/MainPage.tsx
+++ b/src/page/Main/MainPage.tsx
@@ -18,12 +18,14 @@ import {
   pageTransition,
   pageVariants,
 } from "@/utils/pageAnimation";
+import { usePieChartSize } from "@/hooks/usePieChartSize";
 
 export default function Main() {
   const navigate = useNavigate();
   const lineId = useUserStore((state) => state.userInfo?.lineId);
   // store에 저장된 user 정보 가져오기
   const userData = useUserStore((state) => state.userInfo);
+  const { size: pieSize, strokeWidth: pieStrokeWidth } = usePieChartSize();
 
   // 현재 로그인한 사용자가 대표자인가
   const isOwner = userData?.role === "OWNER";
@@ -184,14 +186,23 @@ export default function Main() {
         transition={{ ...pageTransition, delay: 0.1 }}
         className="flex flex-col items-center gap-4 pt-5"
       >
-        <PieChart sharedPoolData={sharedPoolData} />
+        <PieChart
+          sharedPoolData={sharedPoolData}
+          size={pieSize}
+          strokeWidth={pieStrokeWidth}
+        />{" "}
       </motion.div>
       {/* 공유 데이터 담기 페이지 이동 버튼 */}
       <motion.div
         variants={itemVariants}
         transition={{ ...pageTransition, delay: 0.2 }}
+        className="w-auto tablet:w-[40vw] desktop:w-auto"
       >
-        <GradientButton onClick={() => navigate("/shared-data")}>
+        <GradientButton
+          fullWidth
+          buttonClassName="text-xl"
+          onClick={() => navigate("/shared-data")}
+        >
           <img src={PlusIcon} className="w-5 h-5" />
           가족 공유 데이터 담기
         </GradientButton>
@@ -201,7 +212,7 @@ export default function Main() {
       <motion.div
         variants={itemVariants}
         transition={{ ...pageTransition, delay: 0.3 }}
-        className="w-full max-w-md"
+        className="w-full max-w-md tablet:max-w-[60vw] desktop:max-w-md"
       >
         <SharedPoolUsage users={usageUsers} />
       </motion.div>
diff --git a/src/page/Main/components/FamilyMemberList.tsx b/src/page/Main/components/FamilyMemberList.tsx
index 00047ec..fbe9a05 100644
--- a/src/page/Main/components/FamilyMemberList.tsx
+++ b/src/page/Main/components/FamilyMemberList.tsx
@@ -35,19 +35,22 @@ export default function FamilyMemberList({
       });
   });
 
+  // FamilyMemberList.tsx
   return (
     <div className="w-full flex flex-col gap-3">
       <h2 className="text-lg font-bold text-black">가족 구성원</h2>
-      {members.map((member) => (
-        <FamilyMemberCard
-          key={member.lineId}
-          member={member}
-          isEnable={isEnable}
-          isUserOwner={isUserOwner}
-          isDualLine={dualLineUserIds.has(member.userId)}
-          lineIndex={colorIndexMap.get(member.lineId) ?? 0}
-        />
-      ))}
+      <div className="grid grid-cols-1 tablet:grid-cols-2 desktop:grid-cols-1 gap-3">
+        {members.map((member) => (
+          <FamilyMemberCard
+            key={member.lineId}
+            member={member}
+            isEnable={isEnable}
+            isUserOwner={isUserOwner}
+            isDualLine={dualLineUserIds.has(member.userId)}
+            lineIndex={colorIndexMap.get(member.lineId) ?? 0}
+          />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/page/Policy/Policy.tsx b/src/page/Policy/Policy.tsx
index 2c93eb3..beac748 100644
--- a/src/page/Policy/Policy.tsx
+++ b/src/page/Policy/Policy.tsx
@@ -116,24 +116,27 @@ export default function Policy() {
       initial="initial"
       animate="animate"
       transition={pageTransition}
-      className="min-h-full flex flex-col gap-5 px-4 pb-[20px]"
+      className="min-h-full flex flex-col gap-5 px-4 pb-[20px]
+  tablet:grid tablet:grid-cols-2 tablet:items-start tablet:gap-6 tablet:px-8
+  desktop:flex desktop:flex-col desktop:gap-5 desktop:px-4"
     >
-      {/* 사용자 정보 영역 */}
-      {/* /api/data/usages/balances 로 사용자 정보 받아오기 */}
+      {/* 1. UserInfo - 모바일: 1번째 / 태블릿: 왼쪽 상단 */}
       {userData && (
         <motion.div
           variants={itemVariants}
           transition={{ ...pageTransition, delay: 0.1 }}
+          className="tablet:col-span-1 tablet:order-1 desktop:w-full desktop:order-1"
         >
           <UserInfoCard userData={userData} userId={currentUserId} />
         </motion.div>
       )}
 
-      {/* 현재 적용중인 정책 영역 */}
+      {/* 2. 현재 적용중인 정책 - 모바일: 2번째 / 태블릿: 전체 너비 3번째 행 */}
       {appliedPolicies.length > 0 && (
         <motion.div
           variants={itemVariants}
           transition={{ ...pageTransition, delay: 0.2 }}
+          className="tablet:col-span-2 tablet:order-3 desktop:w-full desktop:order-2"
         >
           <PolicyScroll
             policies={appliedPolicies.map((policy, index) => ({
@@ -145,15 +148,12 @@ export default function Policy() {
         </motion.div>
       )}
 
-      {/* 데이터 임계치 설정 영역(가족 공유 데이터 임계치, 개인 데이터 임계치) */}
-      {/* 가족 공유 데이터: 대표자만 접근 가능
-        /api/shared-pools/limit로 데이터 넘기기
-        개인 데이터 임계치 설정: 각자 자신의 것
-        /api/lines/thresholds로 데이터 넘기기 */}
+      {/* 3. 데이터 임계치 - 모바일: 3번째 / 태블릿: 오른쪽 상단 (UserInfo 옆) */}
       {sharedPoolThreshold && lineThreshold && (
         <motion.div
           variants={itemVariants}
           transition={{ ...pageTransition, delay: 0.3 }}
+          className="tablet:col-span-1 tablet:order-2 desktop:w-full desktop:order-3"
         >
           <DataThresholdSlider
             isOwner={isOwner}
@@ -163,21 +163,23 @@ export default function Policy() {
         </motion.div>
       )}
 
-      {/* 권한 관리 */}
+      {/* 4. 권한 관리 - 태블릿: 전체 너비 4번째 행 */}
       {isOwner && (
         <motion.div
           variants={itemVariants}
           transition={{ ...pageTransition, delay: 0.4 }}
+          className="tablet:col-span-2 tablet:order-4 desktop:w-full desktop:order-4"
         >
           <PermissionManager />
         </motion.div>
       )}
 
-      {/* 구성원별 정책 제어 버튼 */}
+      {/* 5. 구성원별 정책 제어 + 권한 양도 - 태블릿: 2컬럼 5번째 행 */}
       {isOwner && (
         <motion.div
           variants={itemVariants}
           transition={{ ...pageTransition, delay: 0.5 }}
+          className="tablet:col-span-1 tablet:order-5 desktop:w-full desktop:order-5"
         >
           <button
             onClick={() => navigate("/policy-detail")}
@@ -198,11 +200,11 @@ export default function Policy() {
         </motion.div>
       )}
 
-      {/* 권한 양도 버튼 */}
       {isOwner && (
         <motion.div
           variants={itemVariants}
           transition={{ ...pageTransition, delay: 0.6 }}
+          className="tablet:col-span-1 tablet:order-6 desktop:w-full desktop:order-6"
         >
           <button
             onClick={() => setIsTransferModalOpen(true)}
diff --git a/src/page/Policy/components/DataRemainingCard.tsx b/src/page/Policy/components/DataRemainingCard.tsx
index 7965a28..0a447da 100644
--- a/src/page/Policy/components/DataRemainingCard.tsx
+++ b/src/page/Policy/components/DataRemainingCard.tsx
@@ -24,22 +24,22 @@ export default function DataRemainingCard({
       bgOpacity={0.8}
       borderWidth={1}
       borderRadius={20}
-      className="flex-1"
+      className="flex-1 overflow-hidden"
     >
-      <div className="flex items-start justify-between">
-        <div>
-          <p className="text-xs text-gray-400 mb-1 whitespace-pre-wrap">
-            {label}
-          </p>
-          <p className="text-xl font-bold text-gray-800">{displayAmount}</p>
-        </div>
-        <div className="w-8 h-8 rounded-full bg-[#EEF0FF] flex items-center justify-center flex-shrink-0">
-          {icon === "share" ? (
-            <img src={shareIcon} />
-          ) : (
-            <img src={personIcon} />
-          )}
+      <div className="flex flex-col gap-1">
+        {/* label + 아이콘 */}
+        <div className="flex items-center justify-between">
+          <p className="text-xs text-gray-400 whitespace-pre-wrap">{label}</p>
+          <div className="w-8 h-8 rounded-full bg-[#EEF0FF] flex items-center justify-center flex-shrink-0">
+            {icon === "share" ? (
+              <img src={shareIcon} />
+            ) : (
+              <img src={personIcon} />
+            )}
+          </div>
         </div>
+        {/* 금액 */}
+        <p className="text-xl font-bold text-gray-800">{displayAmount}</p>
       </div>
     </GlassCard>
   );
diff --git a/src/page/Policy/components/Permisssion.tsx b/src/page/Policy/components/Permisssion.tsx
index 4fec84a..88713e4 100644
--- a/src/page/Policy/components/Permisssion.tsx
+++ b/src/page/Policy/components/Permisssion.tsx
@@ -226,7 +226,7 @@ function PermissionManager() {
                     className="flex items-center justify-between text-sm text-gray-600 bg-gray-50 rounded-lg px-3 py-2"
                   >
                     <span>
-                      회선 {item.lineId} · {permissionName}
+                      {row?.userName} · {permissionName}
                     </span>
                     <span
                       className="font-semibold"
diff --git a/src/page/Policy/components/UserInfoCard.tsx b/src/page/Policy/components/UserInfoCard.tsx
index 182fa62..07824b3 100644
--- a/src/page/Policy/components/UserInfoCard.tsx
+++ b/src/page/Policy/components/UserInfoCard.tsx
@@ -145,9 +145,9 @@ export default function UserInfo({ userData, userId }: Props) {
         </div>
 
         {/* ── 데이터 잔여량 ── */}
-        <div className="flex gap-3 mb-4">
+        <div className="flex gap-3 mb-4 items-start overflow-hidden">
           <DataRemainingCard
-            label={"가족 공유 데이터\n잔여량"}
+            label={"공유 데이터\n잔여량"}
             amount={userData.sharedDataRemaining}
             icon="share"
           />
@@ -159,31 +159,22 @@ export default function UserInfo({ userData, userId }: Props) {
         </div>
 
         {/* ── 액션 버튼 ── */}
-        <div className="flex justify-center gap-3">
-          {/* 공유 데이터 담기 */}
-          <GradientButton
-            width={12}
-            height={8}
-            fontSize={0.8}
-            onClick={() => navigate("/shared-data")}
-          >
-            <img src={PlusIcon} className="w-4 h-4" />
+        <div className="flex flex-col tablet-lg:flex-row desktop:flex-col gap-2">
+          {" "}
+          <GradientButton fullWidth onClick={() => navigate("/shared-data")}>
+            <img src={PlusIcon} className="w-4 h-4 flex-shrink-0" />
             가족 공유 데이터 담기
           </GradientButton>
-
-          {/* 사용 로그 보기 */}
           <GradientButton
-            width={14}
-            height={8}
+            fullWidth
             bgColor="#FED2BF"
             gradientFrom="#FFFFFF"
             gradientTo="#FFA780"
             textColor="#FF5C14"
-            fontSize={0.8}
             onClick={() => navigate("/log")}
           >
-            <img src={ClockIcon} className="w-4 h-4" />
-            사용 로그 보기
+            <img src={ClockIcon} className="w-4 h-4 flex-shrink-0" />
+            공유 데이터 로그 보기
           </GradientButton>
         </div>
       </GlassCard>
@@ -197,7 +188,7 @@ export default function UserInfo({ userData, userId }: Props) {
           />
 
           {/* 바텀시트 */}
-          <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-[480px] max-w-full z-[201] bg-white rounded-t-2xl p-6">
+          <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-full z-[201] bg-white rounded-t-2xl p-6">
             <h3 className="text-base font-semibold text-gray-800 mb-4">
               계정 전환
             </h3>
diff --git a/src/page/PolicyDetail/components/AppPolicyFilters.tsx b/src/page/PolicyDetail/components/AppPolicyFilters.tsx
index e868ee3..1cf28fe 100644
--- a/src/page/PolicyDetail/components/AppPolicyFilters.tsx
+++ b/src/page/PolicyDetail/components/AppPolicyFilters.tsx
@@ -1,6 +1,8 @@
 interface AppPolicyFiltersProps {
   policyFilter: "전체" | "정책없음" | "정책적용" | "정책예외";
-  setPolicyFilter: (filter: "전체" | "정책없음" | "정책적용" | "정책예외") => void;
+  setPolicyFilter: (
+    filter: "전체" | "정책없음" | "정책적용" | "정책예외",
+  ) => void;
   conditionFilters: Set<"사용량 제한" | "속도 제한">;
   toggleConditionFilter: (condition: "사용량 제한" | "속도 제한") => void;
   showPolicyDropdown: boolean;
@@ -16,83 +18,80 @@ const AppPolicyFilters = ({
   setShowPolicyDropdown,
 }: AppPolicyFiltersProps) => {
   return (
-    <div
-      className="flex gap-6 px-2 pb-2 flex-wrap relative"
-      style={{ fontSize: "11px" }}
-    >
+    <div className="flex gap-4 px-2 pb-2 flex-wrap relative items-center text-sm">
       <div className="flex items-center gap-2 relative flex-shrink-0 whitespace-nowrap">
-        <span className="text-gray-700 whitespace-nowrap">정책</span>
-        <button
-          onClick={() => setShowPolicyDropdown(!showPolicyDropdown)}
-          className={`px-3 py-1 rounded-full border flex items-center justify-between whitespace-nowrap flex-shrink-0 transition-all min-w-[80px] ${
-            showPolicyDropdown 
-              ? "bg-[#678BF7] text-white border-[#678BF7]" 
-              : "bg-white text-gray-700 border-gray-300"
-          }`}
-          style={{ fontSize: "11px" }}
-        >
-          {policyFilter}
-          <svg 
-            width="12" 
-            height="12" 
-            viewBox="0 0 12 12" 
-            fill="none"
-            className={`transition-transform ${showPolicyDropdown ? "rotate-180" : ""}`}
+        <span className="text-gray-700 whitespace-nowrap text-sm">정책</span>
+        <div className="relative flex-shrink-0">
+          <button
+            onClick={() => setShowPolicyDropdown(!showPolicyDropdown)}
+            className={`px-3 py-1 xs:py-2 text-xs rounded-full border flex items-center justify-between whitespace-nowrap flex-shrink-0 transition-all min-w-[80px] ${
+              showPolicyDropdown
+                ? "bg-[#678BF7] text-white border-[#678BF7]"
+                : "bg-white text-gray-700 border-gray-300"
+            }`}
           >
-            <path
-              d="M3 4.5L6 7.5L9 4.5"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
+            {policyFilter}
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              className={`transition-transform ${showPolicyDropdown ? "rotate-180" : ""}`}
+            >
+              <path
+                d="M3 4.5L6 7.5L9 4.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
 
-        {showPolicyDropdown && (
-          <>
-            <div 
-              className="fixed inset-0 z-[90]" 
-              onClick={() => setShowPolicyDropdown(false)}
-            />
-            <div className="absolute top-full left-0 mt-2 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-[100] w-[90px] flex flex-col">
-              {(["전체", "정책없음", "정책적용", "정책예외"] as const).map(
-                (filter) => (
-                  <button
-                    key={filter}
-                    onClick={() => {
-                      setPolicyFilter(filter);
-                      setShowPolicyDropdown(false);
-                    }}
-                    className={`w-full px-3 py-2 text-left text-xs hover:bg-gray-50 whitespace-nowrap transition-colors block ${
-                      policyFilter === filter
-                        ? "text-[#678BF7] font-semibold bg-blue-50"
-                        : "text-gray-700"
-                    }`}
-                  >
-                    {filter}
-                  </button>
-                ),
-              )}
-            </div>
-          </>
-        )}
+          {showPolicyDropdown && (
+            <>
+              <div
+                className="fixed inset-0 z-[90]"
+                onClick={() => setShowPolicyDropdown(false)}
+              />
+              <div className="absolute top-full left-0 mt-2 bg-white rounded-xl shadow-xl border border-gray-200 py-2 z-[100] w-[90px] flex flex-col">
+                {(["전체", "정책없음", "정책적용", "정책예외"] as const).map(
+                  (filter) => (
+                    <button
+                      key={filter}
+                      onClick={() => {
+                        setPolicyFilter(filter);
+                        setShowPolicyDropdown(false);
+                      }}
+                      className={`w-full px-3 py-2 text-left text-xs hover:bg-gray-50 whitespace-nowrap transition-colors block ${
+                        policyFilter === filter
+                          ? "text-[#678BF7] font-semibold bg-blue-50"
+                          : "text-gray-700"
+                      }`}
+                    >
+                      {filter}
+                    </button>
+                  ),
+                )}
+              </div>
+            </>
+          )}
+        </div>
       </div>
 
       <div className="flex items-center gap-2 flex-shrink-0 whitespace-nowrap">
-        <span className="text-gray-700 whitespace-nowrap">조건</span>
+        <span className="text-gray-700 whitespace-nowrap text-sm">조건</span>
         <div className="flex gap-1 flex-wrap">
           {(["사용량 제한", "속도 제한"] as const).map((condition) => (
             <button
               key={condition}
               onClick={() => toggleConditionFilter(condition)}
-              className={`relative px-2.5 py-1 rounded-full transition-colors whitespace-nowrap flex-shrink-0 ${
+              className={`relative text-xs px-2.5 py-1 xs:py-2 rounded-full transition-colors whitespace-nowrap flex-shrink-0 ${
                 conditionFilters.has(condition)
                   ? "text-[#003458]"
                   : "text-gray-600"
               }`}
               style={{
-                fontSize: "11px",
                 backgroundColor: conditionFilters.has(condition)
                   ? "rgba(223, 248, 254, 0.6)"
                   : "transparent",
diff --git a/src/page/PolicyDetail/components/BlockTab.tsx b/src/page/PolicyDetail/components/BlockTab.tsx
index 3a123e5..d87a48d 100644
--- a/src/page/PolicyDetail/components/BlockTab.tsx
+++ b/src/page/PolicyDetail/components/BlockTab.tsx
@@ -9,7 +9,7 @@ type Props = {
 
 const BlockTab = ({ onBlockApply, lineId, onPolicyChange }: Props) => {
   return (
-    <div className="flex flex-col gap-3 py-4">
+    <div className="flex flex-col gap-3 py-4 tablet:grid tablet:grid-cols-2 tablet:items-start desktop:flex desktop:flex-col">
       <BlockPolicyManager lineId={lineId} onPolicyChange={onPolicyChange} />
       <ImmediateBlockPolicy
         lineId={lineId}
diff --git a/src/page/PolicyDetail/components/LimitTab.tsx b/src/page/PolicyDetail/components/LimitTab.tsx
index 7cec84d..a7cb5e7 100644
--- a/src/page/PolicyDetail/components/LimitTab.tsx
+++ b/src/page/PolicyDetail/components/LimitTab.tsx
@@ -16,7 +16,7 @@ const LimitTab = ({
   });
 
   return (
-    <div className="flex flex-col gap-3 py-4 text-center text-gray-500">
+    <div className="flex flex-col gap-3 py-4 tablet:grid tablet:grid-cols-2 tablet:items-start desktop:flex desktop:flex-col">
       <SliderCard
         title="월 공유 데이터 사용량 제한"
         type="shared"
diff --git a/src/page/SharedData/components/DataTransferCard.tsx b/src/page/SharedData/components/DataTransferCard.tsx
index 7113a5d..f44f16c 100644
--- a/src/page/SharedData/components/DataTransferCard.tsx
+++ b/src/page/SharedData/components/DataTransferCard.tsx
@@ -302,11 +302,10 @@ function ShareButton({ onClick }: { onClick: () => void }) {
   return (
     <div className="flex items-center justify-center px-8">
       <GradientButton
-        onClick={onClick}
-        width={120}
-        height={15}
+        fullWidth
         borderRadius={20}
-        fontSize={1.5}
+        buttonClassName="text-xl font-semibold"
+        onClick={onClick}
       >
         <img src={SendIcon} className="w-7 h-7 flex-shrink-0" alt="send" />
         <span className="whitespace-nowrap">공유하기</span>
diff --git a/src/page/SharedData/components/SharedPoolCard.tsx b/src/page/SharedData/components/SharedPoolCard.tsx
index 47bb630..e4bc00a 100644
--- a/src/page/SharedData/components/SharedPoolCard.tsx
+++ b/src/page/SharedData/components/SharedPoolCard.tsx
@@ -109,12 +109,7 @@ function DataSummary({
         >
           {totalGB}
         </div>
-        <GradientButton
-          onClick={onViewLog}
-          width={20}
-          height={8}
-          borderRadius={15}
-        >
+        <GradientButton onClick={onViewLog} borderRadius={15}>
           <img src={ClockIcon} className="w-4 h-4 sm:w-5 sm:h-5" alt="clock" />
           <span className="text-xs sm:text-sm whitespace-nowrap">
             사용 로그 보기
diff --git a/src/page/Support/Support.tsx b/src/page/Support/Support.tsx
index f58da73..81d9382 100644
--- a/src/page/Support/Support.tsx
+++ b/src/page/Support/Support.tsx
@@ -132,7 +132,7 @@ export default function Support() {
   return (
     <div className="py-5 pb-[20px]">
       {/* 탭 */}
-      <div className="bg-[#E8E8E8] rounded-2xl p-1 mx-9 mb-6 flex gap-1 justify-center">
+      <div className="bg-[#E8E8E8] rounded-2xl p-1 w-full max-w-[300px] mx-auto mb-6 flex gap-1 justify-center">
         <button
           onClick={() => setActiveTab("inquiry")}
           className={`flex-1 max-w-[200px] py-2 rounded-2xl font-medium transition-colors text-sm ${
diff --git a/tailwind.config.js b/tailwind.config.js
index a466a7a..db44817 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,63 +1,73 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    darkMode: ["class"],
-    content: [
-    "./index.html",
-    "./src/**/*.{ts,tsx}"
-  ],
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
   theme: {
-  	extend: {
-  		fontFamily: {
-  			sans: ['A2G', 'sans-serif'],
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		},
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		}
-  	}
+    extend: {
+      screens: {
+        xs: "400px", // 소형 모바일 이하
+        tablet: "768px", // 태블릿 → 2컬럼 레이아웃
+        "tablet-lg": "1146px",
+        desktop: "1400px", // 데스크톱 → 앱뷰(480px 고정) 복귀
+      },
+      fontFamily: {
+        sans: ["A2G", "sans-serif"],
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+      },
+      fontSize: {
+        "responsive-xs": ["0.65rem", { lineHeight: "1rem" }],
+        "responsive-sm": ["0.75rem", { lineHeight: "1.25rem" }],
+        "responsive-base": ["0.8rem", { lineHeight: "1.5rem" }],
+        "responsive-lg": ["0.9rem", { lineHeight: "1.75rem" }],
+        "responsive-xl": ["1rem", { lineHeight: "1.75rem" }],
+      },
+    },
   },
   plugins: [require("tailwindcss-animate")],
-}
+};