그래디언트 배경 카드 텍스트 가독성 개선 및 입체감 추가

- 배경색이 있는 모든 카드의 흰색 글자를 검은색으로 변경하여 가독성 향상
- 아이콘과 텍스트에 그림자 효과를 추가하여 입체감 부여
- Profile 페이지 디자인 통일성 완료

변경 파일:
- src/app/(main)/page.tsx: 대시보드 KPI 카드 (3개)
- src/app/(main)/events/page.tsx: 이벤트 통계 카드 (4개)
- src/app/(main)/events/create/steps/ApprovalStep.tsx: 승인 단계 요약 카드 (4개)
- src/app/(main)/profile/page.tsx: 프로필 페이지 전체 리디자인

적용된 효과:
- 아이콘: drop-shadow(0px 2px 4px rgba(0,0,0,0.2))
- 큰 텍스트: text-shadow 0px 2px 4px rgba(0,0,0,0.15)
- 작은 텍스트: text-shadow 0px 1px 2px rgba(0,0,0,0.1)
- 아이콘 배경: rgba(0,0,0,0.05) (대시보드)
- 글자 색상: colors.gray[900] (제목), colors.gray[700] (라벨)

src/app/(main)/events/create/steps/ApprovalStep.tsx

@@ -97,13 +97,28 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <CheckCircle sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <CheckCircle sx={{
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   이벤트 제목
                 </Typography>
                 <Typography
                   variant="h6"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {eventData.recommendation?.title || '이벤트 제목'}
                 </Typography>
@@ -120,16 +135,36 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <People sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <People sx={{
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   목표 참여자
                 </Typography>
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {eventData.recommendation?.expectedParticipants || 0}
-                  <Typography component="span" sx={{ fontSize: '1rem', ml: 0.5 }}>
+                  <Typography component="span" sx={{
+                    fontSize: '1rem',
+                    ml: 0.5,
+                    color: colors.gray[900],
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}>
                     명
                   </Typography>
                 </Typography>
@@ -146,16 +181,36 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <AttachMoney sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <AttachMoney sx={{
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   예상 비용
                 </Typography>
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {((eventData.recommendation?.estimatedCost || 0) / 10000).toFixed(0)}
-                  <Typography component="span" sx={{ fontSize: '1rem', ml: 0.5 }}>
+                  <Typography component="span" sx={{
+                    fontSize: '1rem',
+                    ml: 0.5,
+                    color: colors.gray[900],
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}>
                     만원
                   </Typography>
                 </Typography>
@@ -172,13 +227,28 @@ export default function ApprovalStep({ eventData, onApprove, onBack }: ApprovalS
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <TrendingUp sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <TrendingUp sx={{
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem', mb: 1 }}>
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  mb: 1,
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   예상 ROI
                 </Typography>
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {eventData.recommendation?.roi || 0}%
                 </Typography>

src/app/(main)/events/page.tsx

@@ -250,14 +250,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <Event sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <Event sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.total}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   전체 이벤트
                 </Typography>
               </CardContent>
@@ -273,14 +288,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <LocalFireDepartment sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <LocalFireDepartment sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.active}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   진행중
                 </Typography>
               </CardContent>
@@ -296,14 +326,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <People sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <People sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.totalParticipants}
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   총 참여자
                 </Typography>
               </CardContent>
@@ -319,14 +364,29 @@ export default function EventsPage() {
               }}
             >
               <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <TrendingUp sx={{ fontSize: 32, color: 'white', mb: 1 }} />
+                <TrendingUp sx={{
+                  fontSize: 32,
+                  color: colors.gray[900],
+                  mb: 1,
+                  filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                }} />
                 <Typography
                   variant="h4"
-                  sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem', mb: 0.5 }}
+                  sx={{
+                    fontWeight: 700,
+                    color: colors.gray[900],
+                    fontSize: '1.75rem',
+                    mb: 0.5,
+                    textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                  }}
                 >
                   {stats.avgROI}%
                 </Typography>
-                <Typography variant="body2" sx={{ color: 'rgba(255,255,255,0.9)', fontSize: '0.875rem' }}>
+                <Typography variant="body2" sx={{
+                  color: colors.gray[700],
+                  fontSize: '0.875rem',
+                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                }}>
                   평균 ROI
                 </Typography>
               </CardContent>

src/app/(main)/page.tsx

@@ -122,7 +122,7 @@ export default function HomePage() {
                       width: 64,
                       height: 64,
                       borderRadius: '50%',
-                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -130,22 +130,32 @@ export default function HomePage() {
                       mb: 3,
                     }}
                   >
-                    <Celebration sx={{ fontSize: 32, color: 'white' }} />
+                    <Celebration sx={{
+                      fontSize: 32,
+                      color: colors.gray[900],
+                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                    }} />
                   </Box>
                   <Typography
                     variant="body2"
                     sx={{
                       mb: 1,
-                      color: 'rgba(255, 255, 255, 0.9)',
+                      color: colors.gray[700],
                       fontWeight: 500,
                       fontSize: '0.875rem',
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
                     진행 중인 이벤트
                   </Typography>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
+                    sx={{
+                      fontWeight: 700,
+                      color: colors.gray[900],
+                      fontSize: '2.25rem',
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
                   >
                     {activeEvents.length}
                   </Typography>
@@ -167,7 +177,7 @@ export default function HomePage() {
                       width: 64,
                       height: 64,
                       borderRadius: '50%',
-                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -175,22 +185,32 @@ export default function HomePage() {
                       mb: 3,
                     }}
                   >
-                    <Group sx={{ fontSize: 32, color: 'white' }} />
+                    <Group sx={{
+                      fontSize: 32,
+                      color: colors.gray[900],
+                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                    }} />
                   </Box>
                   <Typography
                     variant="body2"
                     sx={{
                       mb: 1,
-                      color: 'rgba(255, 255, 255, 0.9)',
+                      color: colors.gray[700],
                       fontWeight: 500,
                       fontSize: '0.875rem',
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
                     총 참여자
                   </Typography>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
+                    sx={{
+                      fontWeight: 700,
+                      color: colors.gray[900],
+                      fontSize: '2.25rem',
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
                   >
                     {totalParticipants.toLocaleString()}
                   </Typography>
@@ -212,7 +232,7 @@ export default function HomePage() {
                       width: 64,
                       height: 64,
                       borderRadius: '50%',
-                      bgcolor: 'rgba(255, 255, 255, 0.2)',
+                      bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -220,22 +240,32 @@ export default function HomePage() {
                       mb: 3,
                     }}
                   >
-                    <TrendingUp sx={{ fontSize: 32, color: 'white' }} />
+                    <TrendingUp sx={{
+                      fontSize: 32,
+                      color: colors.gray[900],
+                      filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
+                    }} />
                   </Box>
                   <Typography
                     variant="body2"
                     sx={{
                       mb: 1,
-                      color: 'rgba(255, 255, 255, 0.9)',
+                      color: colors.gray[700],
                       fontWeight: 500,
                       fontSize: '0.875rem',
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
                     평균 ROI
                   </Typography>
                   <Typography
                     variant="h3"
-                    sx={{ fontWeight: 700, color: 'white', fontSize: '2.25rem' }}
+                    sx={{
+                      fontWeight: 700,
+                      color: colors.gray[900],
+                      fontSize: '2.25rem',
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
                   >
                     {avgROI}%
                   </Typography>

src/app/(main)/profile/page.tsx

@@ -7,10 +7,12 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import {
   Box,
+  Container,
   TextField,
   Button,
   Typography,
-  Paper,
+  Card,
+  CardContent,
   Avatar,
   Select,
   MenuItem,
@@ -26,7 +28,8 @@ import {
 import { Person, Visibility, VisibilityOff, CheckCircle } from '@mui/icons-material';
 import { useAuthStore } from '@/stores/authStore';
 import { useUIStore } from '@/stores/uiStore';
-import { getGradientButtonStyle, responsiveText, containerStyles } from '@/shared/lib/button-styles';
+import Header from '@/shared/ui/Header';
+import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
 
 // 기본 정보 스키마
 const basicInfoSchema = z.object({
@@ -186,33 +189,45 @@ export default function ProfilePage() {
   };
 
   return (
-    <Box sx={{ ...containerStyles.page }}>
+    <>
-      <Box sx={{ maxWidth: 600, mx: 'auto', px: { xs: 3, sm: 4 }, py: { xs: 3, sm: 4 } }}>
+      <Header title="프로필" showBack={true} showMenu={false} showProfile={false} />
-        {/* 사용자 정보 섹션 */}
+      <Box
-        <Paper elevation={0} sx={{ p: 4, mb: 3, textAlign: 'center' }}>
-          <Avatar
         sx={{
-              width: 80,
+          pt: { xs: 7, sm: 8 },
-              height: 80,
+          pb: 10,
-              mx: 'auto',
+          bgcolor: colors.gray[50],
-              mb: 2,
+          minHeight: '100vh',
-              bgcolor: 'grey.100',
-              color: 'grey.400',
         }}
       >
-            <Person sx={{ fontSize: 48 }} />
+        <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
+          {/* 사용자 정보 섹션 */}
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10, textAlign: 'center' }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Avatar
+                sx={{
+                  width: 100,
+                  height: 100,
+                  mx: 'auto',
+                  mb: 3,
+                  bgcolor: colors.purple,
+                  color: 'white',
+                }}
+              >
+                <Person sx={{ fontSize: 56 }} />
               </Avatar>
-          <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 0.5 }}>
+              <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 1 }}>
                 {user?.name}
               </Typography>
-          <Typography variant="body2" color="text.secondary">
+              <Typography variant="body2" color="text.secondary" sx={{ ...responsiveText.body1 }}>
                 {user?.email}
               </Typography>
-        </Paper>
+            </CardContent>
+          </Card>
 
           {/* 기본 정보 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3 }}>
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
-          <Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
                 기본 정보
               </Typography>
 
@@ -264,11 +279,13 @@ export default function ProfilePage() {
                   )}
                 />
               </Box>
-        </Paper>
+            </CardContent>
+          </Card>
 
           {/* 매장 정보 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3 }}>
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
-          <Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
                 매장 정보
               </Typography>
 
@@ -333,11 +350,13 @@ export default function ProfilePage() {
                   )}
                 />
               </Box>
-        </Paper>
+            </CardContent>
+          </Card>
 
           {/* 비밀번호 변경 */}
-        <Paper elevation={0} sx={{ p: 4, mb: 3 }}>
+          <Card elevation={0} sx={{ ...cardStyles.default, mb: 10 }}>
-          <Typography variant="h6" sx={{ ...responsiveText.h4, mb: 3 }}>
+            <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <Typography variant="h6" sx={{ ...responsiveText.h4, fontWeight: 700, mb: 6 }}>
                 비밀번호 변경
               </Typography>
 
@@ -433,28 +452,39 @@ export default function ProfilePage() {
                   onClick={handlePasswordSubmit(onChangePassword)}
                   sx={{
                     mt: 1,
-                py: { xs: 1.5, sm: 1.75 },
+                    py: 3,
-                fontSize: { xs: 15, sm: 16 },
+                    borderRadius: 3,
+                    fontSize: '1rem',
                     fontWeight: 600,
                     borderWidth: 2,
+                    '&:hover': {
+                      borderWidth: 2,
+                    },
                   }}
                 >
                   비밀번호 변경
                 </Button>
               </Box>
-        </Paper>
+            </CardContent>
+          </Card>
 
           {/* 액션 버튼 */}
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
             <Button
               fullWidth
               variant="contained"
               size="large"
               onClick={handleSave}
               sx={{
-              py: { xs: 1.5, sm: 1.75 },
+                py: 3,
-              fontSize: { xs: 15, sm: 16 },
+                borderRadius: 3,
-              ...getGradientButtonStyle('primary'),
+                fontSize: '1rem',
+                fontWeight: 700,
+                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                '&:hover': {
+                  background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                  opacity: 0.9,
+                },
               }}
             >
               저장하기
@@ -466,24 +496,34 @@ export default function ProfilePage() {
               color="error"
               onClick={() => setLogoutDialogOpen(true)}
               sx={{
-              py: { xs: 1.5, sm: 1.75 },
+                py: 3,
-              fontSize: { xs: 15, sm: 16 },
+                fontSize: '1rem',
                 fontWeight: 600,
               }}
             >
               로그아웃
             </Button>
           </Box>
+        </Container>
       </Box>
 
       {/* 저장 완료 다이얼로그 */}
-      <Dialog open={successDialogOpen} onClose={() => setSuccessDialogOpen(false)}>
+      <Dialog
+        open={successDialogOpen}
+        onClose={() => setSuccessDialogOpen(false)}
+        PaperProps={{
+          sx: {
+            borderRadius: 4,
+            minWidth: 300,
+          },
+        }}
+      >
         <DialogContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
           <CheckCircle sx={{ fontSize: 64, color: 'success.main', mb: 2 }} />
-          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1 }}>
+          <Typography variant="h6" sx={{ fontWeight: 700, mb: 1, fontSize: '1.25rem' }}>
             저장 완료
           </Typography>
-          <Typography variant="body2" color="text.secondary">
+          <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem' }}>
             프로필 정보가 업데이트되었습니다.
           </Typography>
         </DialogContent>
@@ -496,8 +536,15 @@ export default function ProfilePage() {
             }}
             sx={{
               minWidth: 120,
-              py: { xs: 1.25, sm: 1.5 },
+              py: 2,
-              ...getGradientButtonStyle('success'),
+              borderRadius: 2,
+              fontSize: '1rem',
+              fontWeight: 700,
+              background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+              '&:hover': {
+                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                opacity: 0.9,
+              },
             }}
           >
             확인
@@ -506,29 +553,51 @@ export default function ProfilePage() {
       </Dialog>
 
       {/* 로그아웃 확인 다이얼로그 */}
-      <Dialog open={logoutDialogOpen} onClose={() => setLogoutDialogOpen(false)}>
+      <Dialog
-        <DialogTitle>로그아웃</DialogTitle>
+        open={logoutDialogOpen}
+        onClose={() => setLogoutDialogOpen(false)}
+        PaperProps={{
+          sx: {
+            borderRadius: 4,
+            minWidth: 300,
+          },
+        }}
+      >
+        <DialogTitle sx={{ fontSize: '1.25rem', fontWeight: 700 }}>로그아웃</DialogTitle>
         <DialogContent>
-          <Typography variant="body1" sx={{ textAlign: 'center', py: 2 }}>
+          <Typography variant="body1" sx={{ textAlign: 'center', py: 2, fontSize: '1rem' }}>
             로그아웃 하시겠습니까?
           </Typography>
         </DialogContent>
-        <DialogActions>
+        <DialogActions sx={{ justifyContent: 'center', gap: 2, pb: 3 }}>
           <Button
             onClick={() => setLogoutDialogOpen(false)}
-            sx={{ fontWeight: 600 }}
+            sx={{
+              fontWeight: 600,
+              fontSize: '1rem',
+              py: 2,
+              px: 4,
+              borderRadius: 2,
+            }}
           >
             취소
           </Button>
           <Button
             variant="contained"
             onClick={handleLogout}
-            sx={{ ...getGradientButtonStyle('error') }}
+            color="error"
+            sx={{
+              fontWeight: 700,
+              fontSize: '1rem',
+              py: 2,
+              px: 4,
+              borderRadius: 2,
+            }}
           >
             확인
           </Button>
         </DialogActions>
       </Dialog>
-    </Box>
+    </>
   );
 }