From 08777aa00d20472b98d3ff9c3864443c2926e664 Mon Sep 17 00:00:00 2001
From: cherry2250 <kcr7812@naver.com>
Date: Mon, 27 Oct 2025 17:38:25 +0900
Subject: [PATCH] =?UTF-8?q?=EC=8B=A4=EC=8B=9C=EA=B0=84=20=ED=98=84?=
 =?UTF-8?q?=ED=99=A9=20=EC=B9=B4=EB=93=9C=20=EC=9A=94=EC=86=8C=20=EC=A4=91?=
 =?UTF-8?q?=EC=95=99=20=EC=A0=95=EB=A0=AC=20(320px=20=EC=B5=9C=EC=A0=81?=
 =?UTF-8?q?=ED=99=94)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(main)/analytics/page.tsx        |  206 ++--
 src/app/(main)/events/[eventId]/page.tsx |  292 +++---
 src/app/(main)/events/page.tsx           | 1171 ++++++++++++----------
 src/app/(main)/page.tsx                  |  166 +--
 src/shared/lib/button-styles.ts          |   40 +-
 5 files changed, 1014 insertions(+), 861 deletions(-)

diff --git a/src/app/(main)/analytics/page.tsx b/src/app/(main)/analytics/page.tsx
index a94244f..0703425 100644
--- a/src/app/(main)/analytics/page.tsx
+++ b/src/app/(main)/analytics/page.tsx
@@ -135,24 +135,24 @@ export default function AnalyticsPage() {
           minHeight: '100vh',
         }}
       >
-        <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
+        <Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}>
         {/* Title with Real-time Indicator */}
         <Box
           sx={{
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'space-between',
-            mb: 10,
+            mb: { xs: 4, sm: 10 },
           }}
         >
           <Typography variant="h5" sx={{ ...responsiveText.h3 }}>
             📊 요약 (실시간)
           </Typography>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.5, sm: 1 } }}>
             <Box
               sx={{
-                width: 8,
-                height: 8,
+                width: { xs: 6, sm: 8 },
+                height: { xs: 6, sm: 8 },
                 borderRadius: '50%',
                 bgcolor: colors.mint,
                 animation: 'pulse 2s infinite',
@@ -169,7 +169,7 @@ export default function AnalyticsPage() {
         </Box>
 
         {/* Summary KPI Cards */}
-        <Grid container spacing={6} sx={{ mb: 10 }}>
+        <Grid container spacing={{ xs: 2, sm: 6 }} sx={{ mb: { xs: 4, sm: 10 } }}>
           <Grid item xs={6} md={3}>
             <Card
               elevation={0}
@@ -179,26 +179,26 @@ export default function AnalyticsPage() {
                 borderColor: 'transparent',
               }}
             >
-              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+              <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                 <Typography
                   variant="body2"
                   sx={{
-                    mb: 2,
+                    mb: { xs: 1, sm: 2 },
                     color: 'rgba(255, 255, 255, 0.9)',
                     fontWeight: 500,
-                    fontSize: '1rem',
+                    fontSize: { xs: '0.75rem', sm: '1rem' },
                   }}
                 >
                   참여자 수
                 </Typography>
-                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
+                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
                   {summary.participants}
                 </Typography>
                 <Typography
                   variant="caption"
-                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
+                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
                 >
-                  ↑ {summary.participantsDelta}명 (오늘)
+                  ↑ {summary.participantsDelta}명
                 </Typography>
               </CardContent>
             </Card>
@@ -212,27 +212,26 @@ export default function AnalyticsPage() {
                 borderColor: 'transparent',
               }}
             >
-              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+              <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                 <Typography
                   variant="body2"
                   sx={{
-                    mb: 2,
+                    mb: { xs: 1, sm: 2 },
                     color: 'rgba(255, 255, 255, 0.9)',
                     fontWeight: 500,
-                    fontSize: '1rem',
+                    fontSize: { xs: '0.75rem', sm: '1rem' },
                   }}
                 >
                   총 비용
                 </Typography>
-                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
+                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
                   {Math.floor(summary.totalCost / 10000)}만
                 </Typography>
                 <Typography
                   variant="caption"
-                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
+                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
                 >
-                  경품 {Math.floor(roiDetail.prizeCost / 10000)}만 + 채널{' '}
-                  {Math.floor(roiDetail.channelCost / 10000)}만
+                  경품+채널
                 </Typography>
               </CardContent>
             </Card>
@@ -246,27 +245,26 @@ export default function AnalyticsPage() {
                 borderColor: 'transparent',
               }}
             >
-              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+              <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                 <Typography
                   variant="body2"
                   sx={{
-                    mb: 2,
+                    mb: { xs: 1, sm: 2 },
                     color: 'rgba(255, 255, 255, 0.9)',
                     fontWeight: 500,
-                    fontSize: '1rem',
+                    fontSize: { xs: '0.75rem', sm: '1rem' },
                   }}
                 >
                   예상 수익
                 </Typography>
-                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
+                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
                   {Math.floor(summary.expectedRevenue / 10000)}만
                 </Typography>
                 <Typography
                   variant="caption"
-                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
+                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
                 >
-                  매출 {Math.floor(roiDetail.salesIncrease / 10000)}만 + LTV{' '}
-                  {Math.floor(roiDetail.newCustomerLTV / 10000)}만
+                  매출+LTV
                 </Typography>
               </CardContent>
             </Card>
@@ -280,26 +278,26 @@ export default function AnalyticsPage() {
                 borderColor: 'transparent',
               }}
             >
-              <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+              <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                 <Typography
                   variant="body2"
                   sx={{
-                    mb: 2,
+                    mb: { xs: 1, sm: 2 },
                     color: 'rgba(255, 255, 255, 0.9)',
                     fontWeight: 500,
-                    fontSize: '1rem',
+                    fontSize: { xs: '0.75rem', sm: '1rem' },
                   }}
                 >
-                  투자대비수익률
+                  ROI
                 </Typography>
-                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: '2.5rem' }}>
+                <Typography variant="h3" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '1.5rem', sm: '2.5rem' } }}>
                   {summary.roi}%
                 </Typography>
                 <Typography
                   variant="caption"
-                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: '0.875rem' }}
+                  sx={{ color: 'rgba(255, 255, 255, 0.8)', fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}
                 >
-                  목표 {summary.targetRoi}% 달성
+                  목표 {summary.targetRoi}%
                 </Typography>
               </CardContent>
             </Card>
@@ -307,16 +305,16 @@ export default function AnalyticsPage() {
         </Grid>
 
         {/* Charts Grid */}
-        <Grid container spacing={6} sx={{ mb: 10 }}>
+        <Grid container spacing={{ xs: 3, sm: 6 }} sx={{ mb: { xs: 4, sm: 10 } }}>
           {/* Channel Performance */}
           <Grid item xs={12} md={6}>
             <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
-              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
+              <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
                   <Box
                     sx={{
-                      width: 40,
-                      height: 40,
+                      width: { xs: 32, sm: 40 },
+                      height: { xs: 32, sm: 40 },
                       borderRadius: '12px',
                       background: `linear-gradient(135deg, ${colors.pink} 0%, ${colors.pinkLight} 100%)`,
                       display: 'flex',
@@ -324,9 +322,9 @@ export default function AnalyticsPage() {
                       justifyContent: 'center',
                     }}
                   >
-                    <PieChartIcon sx={{ fontSize: 24, color: 'white' }} />
+                    <PieChartIcon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
                   </Box>
-                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
+                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
                     채널별 성과
                   </Typography>
                 </Box>
@@ -335,9 +333,9 @@ export default function AnalyticsPage() {
                 <Box
                   sx={{
                     width: '100%',
-                    maxWidth: 300,
+                    maxWidth: { xs: 200, sm: 300 },
                     mx: 'auto',
-                    mb: 3,
+                    mb: { xs: 2, sm: 3 },
                     flex: 1,
                     display: 'flex',
                     alignItems: 'center',
@@ -380,7 +378,7 @@ export default function AnalyticsPage() {
                 </Box>
 
                 {/* Legend */}
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
                   {channelPerformance.map((item) => (
                     <Box
                       key={item.channel}
@@ -389,17 +387,17 @@ export default function AnalyticsPage() {
                       <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                         <Box
                           sx={{
-                            width: 12,
-                            height: 12,
+                            width: { xs: 10, sm: 12 },
+                            height: { xs: 10, sm: 12 },
                             borderRadius: '50%',
                             bgcolor: item.color,
                           }}
                         />
-                        <Typography variant="body2" sx={{ color: colors.gray[700] }}>
+                        <Typography variant="body2" sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           {item.channel}
                         </Typography>
                       </Box>
-                      <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
+                      <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                         {item.percentage}% ({item.participants}명)
                       </Typography>
                     </Box>
@@ -412,12 +410,12 @@ export default function AnalyticsPage() {
           {/* Time Trend */}
           <Grid item xs={12} md={6}>
             <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
-              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
+              <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
                   <Box
                     sx={{
-                      width: 40,
-                      height: 40,
+                      width: { xs: 32, sm: 40 },
+                      height: { xs: 32, sm: 40 },
                       borderRadius: '12px',
                       background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
                       display: 'flex',
@@ -425,9 +423,9 @@ export default function AnalyticsPage() {
                       justifyContent: 'center',
                     }}
                   >
-                    <ShowChartIcon sx={{ fontSize: 24, color: 'white' }} />
+                    <ShowChartIcon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
                   </Box>
-                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
+                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
                     시간대별 참여 추이
                   </Typography>
                 </Box>
@@ -436,11 +434,11 @@ export default function AnalyticsPage() {
                 <Box
                   sx={{
                     width: '100%',
-                    mb: 3,
+                    mb: { xs: 2, sm: 3 },
                     flex: 1,
                     display: 'flex',
                     alignItems: 'center',
-                    minHeight: 200,
+                    minHeight: { xs: 150, sm: 200 },
                   }}
                 >
                   <Line
@@ -514,10 +512,10 @@ export default function AnalyticsPage() {
 
                 {/* Stats */}
                 <Box>
-                  <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600] }}>
+                  <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                     피크 시간: {timePerformance.peakTime} ({timePerformance.peakParticipants}명)
                   </Typography>
-                  <Typography variant="body2" sx={{ color: colors.gray[600] }}>
+                  <Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                     평균 시간당: {timePerformance.avgPerHour}명
                   </Typography>
                 </Box>
@@ -527,16 +525,16 @@ export default function AnalyticsPage() {
         </Grid>
 
         {/* ROI Detail & Participant Profile */}
-        <Grid container spacing={6}>
+        <Grid container spacing={{ xs: 3, sm: 6 }}>
           {/* ROI Detail */}
           <Grid item xs={12} md={6}>
             <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
-              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
+              <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
                   <Box
                     sx={{
-                      width: 40,
-                      height: 40,
+                      width: { xs: 32, sm: 40 },
+                      height: { xs: 32, sm: 40 },
                       borderRadius: '12px',
                       background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
                       display: 'flex',
@@ -544,32 +542,32 @@ export default function AnalyticsPage() {
                       justifyContent: 'center',
                     }}
                   >
-                    <Payments sx={{ fontSize: 24, color: 'white' }} />
+                    <Payments sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
                   </Box>
-                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
-                    투자대비수익률 상세
+                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
+                    ROI 상세
                   </Typography>
                 </Box>
 
-                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 2, sm: 3 } }}>
                   <Box>
-                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
+                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: { xs: 1, sm: 1.5 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
                       총 비용: {Math.floor(roiDetail.totalCost / 10000)}만원
                     </Typography>
-                    <Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Box sx={{ pl: { xs: 1.5, sm: 2 }, display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
                       <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
+                        <Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           • 경품 비용
                         </Typography>
-                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
+                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           {Math.floor(roiDetail.prizeCost / 10000)}만원
                         </Typography>
                       </Box>
                       <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
+                        <Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           • 채널 비용
                         </Typography>
-                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900] }}>
+                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           {Math.floor(roiDetail.channelCost / 10000)}만원
                         </Typography>
                       </Box>
@@ -577,23 +575,23 @@ export default function AnalyticsPage() {
                   </Box>
 
                   <Box>
-                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.gray[900] }}>
+                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: { xs: 1, sm: 1.5 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
                       예상 수익: {Math.floor(roiDetail.expectedRevenue / 10000)}만원
                     </Typography>
-                    <Box sx={{ pl: 2, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                    <Box sx={{ pl: { xs: 1.5, sm: 2 }, display: 'flex', flexDirection: 'column', gap: { xs: 0.75, sm: 1 } }}>
                       <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
+                        <Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           • 매출 증가
                         </Typography>
-                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
+                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint, fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           {Math.floor(roiDetail.salesIncrease / 10000)}만원
                         </Typography>
                       </Box>
                       <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                        <Typography variant="body2" sx={{ color: colors.gray[600] }}>
+                        <Typography variant="body2" sx={{ color: colors.gray[600], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           • 신규 고객 LTV
                         </Typography>
-                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint }}>
+                        <Typography variant="body2" sx={{ fontWeight: 600, color: colors.mint, fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                           {Math.floor(roiDetail.newCustomerLTV / 10000)}만원
                         </Typography>
                       </Box>
@@ -601,26 +599,26 @@ export default function AnalyticsPage() {
                   </Box>
 
                   <Box>
-                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5, color: colors.mint }}>
+                    <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: { xs: 1, sm: 1.5 }, color: colors.mint, fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
                       투자대비수익률
                     </Typography>
                     <Box
                       sx={{
-                        p: 2.5,
+                        p: { xs: 2, sm: 2.5 },
                         bgcolor: colors.gray[100],
                         borderRadius: 2,
                         textAlign: 'center',
                       }}
                     >
-                      <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700] }}>
+                      <Typography variant="body2" sx={{ mb: 0.5, color: colors.gray[700], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
                         (수익 - 비용) ÷ 비용 × 100
                       </Typography>
-                      <Typography variant="body2" sx={{ mb: 1.5, color: colors.gray[600] }}>
+                      <Typography variant="body2" sx={{ mb: { xs: 1, sm: 1.5 }, color: colors.gray[600], fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}>
                         ({Math.floor(roiDetail.expectedRevenue / 10000)}만 -{' '}
                         {Math.floor(roiDetail.totalCost / 10000)}만) ÷{' '}
                         {Math.floor(roiDetail.totalCost / 10000)}만 × 100
                       </Typography>
-                      <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
+                      <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint, fontSize: { xs: '1.25rem', sm: '1.5rem' } }}>
                         = {summary.roi}%
                       </Typography>
                     </Box>
@@ -633,12 +631,12 @@ export default function AnalyticsPage() {
           {/* Participant Profile */}
           <Grid item xs={12} md={6}>
             <Card elevation={0} sx={{ ...cardStyles.default, height: '100%' }}>
-              <CardContent sx={{ p: { xs: 6, sm: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 3, mb: 6 }}>
+              <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 3 }, mb: { xs: 3, sm: 6 } }}>
                   <Box
                     sx={{
-                      width: 40,
-                      height: 40,
+                      width: { xs: 32, sm: 40 },
+                      height: { xs: 32, sm: 40 },
                       borderRadius: '12px',
                       background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
                       display: 'flex',
@@ -646,29 +644,29 @@ export default function AnalyticsPage() {
                       justifyContent: 'center',
                     }}
                   >
-                    <People sx={{ fontSize: 24, color: 'white' }} />
+                    <People sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
                   </Box>
-                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
+                  <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
                     참여자 프로필
                   </Typography>
                 </Box>
 
                 {/* Age Distribution */}
-                <Box sx={{ mb: 4 }}>
-                  <Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
+                <Box sx={{ mb: { xs: 3, sm: 4 } }}>
+                  <Typography variant="body1" sx={{ fontWeight: 600, mb: { xs: 1.5, sm: 2 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
                     연령별
                   </Typography>
-                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 1.25, sm: 1.5 } }}>
                     {participantProfile.age.map((item) => (
                       <Box key={item.label}>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                          <Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 1.5 } }}>
+                          <Typography variant="body2" sx={{ minWidth: { xs: 45, sm: 60 }, color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                             {item.label}
                           </Typography>
                           <Box
                             sx={{
                               flex: 1,
-                              height: 28,
+                              height: { xs: 24, sm: 28 },
                               bgcolor: colors.gray[200],
                               borderRadius: 1.5,
                               overflow: 'hidden',
@@ -682,12 +680,12 @@ export default function AnalyticsPage() {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'flex-end',
-                                pr: 1.5,
+                                pr: { xs: 1, sm: 1.5 },
                               }}
                             >
                               <Typography
                                 variant="caption"
-                                sx={{ color: 'white', fontWeight: 600, fontSize: 12 }}
+                                sx={{ color: 'white', fontWeight: 600, fontSize: { xs: 10, sm: 12 } }}
                               >
                                 {item.percentage}%
                               </Typography>
@@ -701,20 +699,20 @@ export default function AnalyticsPage() {
 
                 {/* Gender Distribution */}
                 <Box>
-                  <Typography variant="body1" sx={{ fontWeight: 600, mb: 2, color: colors.gray[900] }}>
+                  <Typography variant="body1" sx={{ fontWeight: 600, mb: { xs: 1.5, sm: 2 }, color: colors.gray[900], fontSize: { xs: '0.9375rem', sm: '1rem' } }}>
                     성별
                   </Typography>
-                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
+                  <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 1.25, sm: 1.5 } }}>
                     {participantProfile.gender.map((item) => (
                       <Box key={item.label}>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                          <Typography variant="body2" sx={{ minWidth: 60, color: colors.gray[700] }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 1.5 } }}>
+                          <Typography variant="body2" sx={{ minWidth: { xs: 45, sm: 60 }, color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
                             {item.label}
                           </Typography>
                           <Box
                             sx={{
                               flex: 1,
-                              height: 28,
+                              height: { xs: 24, sm: 28 },
                               bgcolor: colors.gray[200],
                               borderRadius: 1.5,
                               overflow: 'hidden',
@@ -728,12 +726,12 @@ export default function AnalyticsPage() {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'flex-end',
-                                pr: 1.5,
+                                pr: { xs: 1, sm: 1.5 },
                               }}
                             >
                               <Typography
                                 variant="caption"
-                                sx={{ color: 'white', fontWeight: 600, fontSize: 12 }}
+                                sx={{ color: 'white', fontWeight: 600, fontSize: { xs: 10, sm: 12 } }}
                               >
                                 {item.percentage}%
                               </Typography>
diff --git a/src/app/(main)/events/[eventId]/page.tsx b/src/app/(main)/events/[eventId]/page.tsx
index 578ecd4..fed6ccd 100644
--- a/src/app/(main)/events/[eventId]/page.tsx
+++ b/src/app/(main)/events/[eventId]/page.tsx
@@ -254,12 +254,12 @@ export default function EventDetailPage() {
   };
 
   return (
-    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: 10 }}>
-      <Container maxWidth="lg" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 8, md: 10 } }}>
+    <Box sx={{ minHeight: '100vh', bgcolor: 'background.default', pb: { xs: 5, sm: 10 } }}>
+      <Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 8 }, px: { xs: 3, sm: 6, md: 10 } }}>
         {/* Event Header */}
-        <Box sx={{ mb: 8 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 4 }}>
-            <Typography variant="h4" sx={{ fontWeight: 700, fontSize: '2rem' }}>
+        <Box sx={{ mb: { xs: 4, sm: 8 } }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: { xs: 2, sm: 4 } }}>
+            <Typography variant="h4" sx={{ fontWeight: 700, fontSize: { xs: '1.25rem', sm: '2rem' } }}>
               {event.title}
             </Typography>
             <IconButton onClick={handleMenuOpen}>
@@ -282,61 +282,62 @@ export default function EventDetailPage() {
             </Menu>
           </Box>
 
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 4 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1, sm: 2 }, flexWrap: 'wrap', mb: { xs: 2, sm: 4 } }}>
             <Chip
               label={getStatusText(event.status)}
               color={getStatusColor(event.status) as any}
               size="medium"
+              sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
             />
             {event.isAIRecommended && (
-              <Chip label="AI 추천" size="medium" sx={{ bgcolor: colors.purpleLight, color: colors.purple }} />
+              <Chip label="AI 추천" size="medium" sx={{ bgcolor: colors.purpleLight, color: colors.purple, fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }} />
             )}
             {event.isUrgent && (
               <Chip
-                icon={<Warning />}
+                icon={<Warning sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
                 label="마감임박"
                 size="medium"
-                sx={{ bgcolor: '#FEF3C7', color: '#92400E' }}
+                sx={{ bgcolor: '#FEF3C7', color: '#92400E', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
               />
             )}
             {event.isPopular && (
               <Chip
-                icon={<LocalFireDepartment />}
+                icon={<LocalFireDepartment sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
                 label="인기"
                 size="medium"
-                sx={{ bgcolor: '#FEE2E2', color: '#991B1B' }}
+                sx={{ bgcolor: '#FEE2E2', color: '#991B1B', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
               />
             )}
             {event.isHighROI && (
               <Chip
-                icon={<Star />}
+                icon={<Star sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
                 label="높은 ROI"
                 size="medium"
-                sx={{ bgcolor: '#DCFCE7', color: '#166534' }}
+                sx={{ bgcolor: '#DCFCE7', color: '#166534', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
               />
             )}
             {event.isNew && (
               <Chip
-                icon={<NewReleases />}
+                icon={<NewReleases sx={{ fontSize: { xs: '1rem', sm: '1.25rem' } }} />}
                 label="신규"
                 size="medium"
-                sx={{ bgcolor: '#DBEAFE', color: '#1E40AF' }}
+                sx={{ bgcolor: '#DBEAFE', color: '#1E40AF', fontSize: { xs: '0.75rem', sm: '0.875rem' }, height: { xs: 24, sm: 32 } }}
               />
             )}
           </Box>
 
-          <Typography variant="body1" color="text.secondary" sx={{ fontSize: '1rem', mb: 4 }}>
+          <Typography variant="body1" color="text.secondary" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' }, mb: { xs: 2, sm: 4 } }}>
             📅 {event.startDate} ~ {event.endDate}
           </Typography>
 
           {/* 진행률 바 (진행중인 이벤트만) */}
           {event.status === 'active' && (
             <Box>
-              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
-                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: { xs: 1, sm: 2 } }}>
+                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
                   이벤트 진행률
                 </Typography>
-                <Typography variant="body2" sx={{ fontWeight: 600 }}>
+                <Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
                   {Math.round(calculateProgress(event))}%
                 </Typography>
               </Box>
@@ -344,7 +345,7 @@ export default function EventDetailPage() {
                 variant="determinate"
                 value={calculateProgress(event)}
                 sx={{
-                  height: 10,
+                  height: { xs: 6, sm: 10 },
                   borderRadius: 5,
                   bgcolor: colors.gray[100],
                   '& .MuiLinearProgress-bar': {
@@ -358,16 +359,16 @@ export default function EventDetailPage() {
         </Box>
 
         {/* Real-time KPIs */}
-        <Box sx={{ mb: 10 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}>
-            <Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
+        <Box sx={{ mb: { xs: 4, sm: 10 } }}>
+          <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'center' }, justifyContent: 'space-between', gap: { xs: 1.5, sm: 0 }, mb: { xs: 2.5, sm: 6 } }}>
+            <Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '1rem', sm: '1.5rem' } }}>
               실시간 현황
             </Typography>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, color: 'success.main' }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.75, sm: 1.5 }, color: 'success.main' }}>
               <Box
                 sx={{
-                  width: 10,
-                  height: 10,
+                  width: { xs: 6, sm: 10 },
+                  height: { xs: 6, sm: 10 },
                   borderRadius: '50%',
                   bgcolor: 'success.main',
                   animation: 'pulse 2s infinite',
@@ -377,33 +378,42 @@ export default function EventDetailPage() {
                   },
                 }}
               />
-              <Typography variant="body2" sx={{ fontWeight: 600 }}>
+              <Typography variant="body2" sx={{ fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.875rem' } }}>
                 실시간 업데이트
               </Typography>
             </Box>
           </Box>
 
-          <Grid container spacing={6}>
+          <Grid container spacing={{ xs: 1.5, sm: 6 }}>
             <Grid item xs={6} md={3}>
               <Card
                 elevation={0}
                 sx={{
-                  borderRadius: 4,
+                  borderRadius: { xs: 2, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
+                  height: '100%',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
-                  <Group sx={{ fontSize: 40, mb: 2, color: 'white' }} />
-                  <Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
+                <CardContent sx={{
+                  textAlign: 'center',
+                  py: { xs: 2, sm: 6 },
+                  px: { xs: 1, sm: 4 },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  height: '100%',
+                }}>
+                  <Group sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
+                  <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
                     참여자
                   </Typography>
-                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
+                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
                     {event.participants}명
                   </Typography>
-                  <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', mt: 1, display: 'block' }}>
-                    목표: {event.targetParticipants}명 (
-                    {Math.round((event.participants / event.targetParticipants) * 100)}%)
+                  <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.8)', mt: { xs: 0.25, sm: 1 }, display: 'block', fontSize: { xs: '0.5rem', sm: '0.75rem' }, lineHeight: 1.3, minHeight: { xs: '1.3em', sm: 'auto' } }}>
+                    목표: {event.targetParticipants}명<br />
+                    ({Math.round((event.participants / event.targetParticipants) * 100)}%)
                   </Typography>
                 </CardContent>
               </Card>
@@ -412,19 +422,29 @@ export default function EventDetailPage() {
               <Card
                 elevation={0}
                 sx={{
-                  borderRadius: 4,
+                  borderRadius: { xs: 2, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   background: `linear-gradient(135deg, ${colors.blue} 0%, #93C5FD 100%)`,
+                  height: '100%',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
-                  <Visibility sx={{ fontSize: 40, mb: 2, color: 'white' }} />
-                  <Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
+                <CardContent sx={{
+                  textAlign: 'center',
+                  py: { xs: 2, sm: 6 },
+                  px: { xs: 1, sm: 4 },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  height: '100%',
+                }}>
+                  <Visibility sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
+                  <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
                     조회수
                   </Typography>
-                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
+                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
                     {event.views}
                   </Typography>
+                  <Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
                 </CardContent>
               </Card>
             </Grid>
@@ -432,19 +452,29 @@ export default function EventDetailPage() {
               <Card
                 elevation={0}
                 sx={{
-                  borderRadius: 4,
+                  borderRadius: { xs: 2, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   background: `linear-gradient(135deg, ${colors.mint} 0%, #6EE7B7 100%)`,
+                  height: '100%',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
-                  <TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
-                  <Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
+                <CardContent sx={{
+                  textAlign: 'center',
+                  py: { xs: 2, sm: 6 },
+                  px: { xs: 1, sm: 4 },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  height: '100%',
+                }}>
+                  <TrendingUp sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
+                  <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
                     ROI
                   </Typography>
-                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
+                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
                     {event.roi}%
                   </Typography>
+                  <Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
                 </CardContent>
               </Card>
             </Grid>
@@ -452,19 +482,29 @@ export default function EventDetailPage() {
               <Card
                 elevation={0}
                 sx={{
-                  borderRadius: 4,
+                  borderRadius: { xs: 2, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   background: `linear-gradient(135deg, ${colors.orange} 0%, #FCD34D 100%)`,
+                  height: '100%',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
-                  <TrendingUp sx={{ fontSize: 40, mb: 2, color: 'white' }} />
-                  <Typography variant="caption" display="block" sx={{ mb: 2, color: 'rgba(255,255,255,0.9)' }}>
+                <CardContent sx={{
+                  textAlign: 'center',
+                  py: { xs: 2, sm: 6 },
+                  px: { xs: 1, sm: 4 },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  height: '100%',
+                }}>
+                  <TrendingUp sx={{ fontSize: { xs: 20, sm: 40 }, mb: { xs: 0.5, sm: 2 }, color: 'white' }} />
+                  <Typography variant="caption" display="block" sx={{ mb: { xs: 0.5, sm: 2 }, color: 'rgba(255,255,255,0.9)', fontSize: { xs: '0.5625rem', sm: '0.75rem' } }}>
                     전환율
                   </Typography>
-                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: '1.75rem' }}>
+                  <Typography variant="h4" sx={{ fontWeight: 700, color: 'white', fontSize: { xs: '0.9375rem', sm: '1.75rem' }, lineHeight: 1.2 }}>
                     {event.conversion}%
                   </Typography>
+                  <Box sx={{ mt: { xs: 0.25, sm: 1 }, minHeight: { xs: '1.3em', sm: 0 } }} />
                 </CardContent>
               </Card>
             </Grid>
@@ -472,18 +512,18 @@ export default function EventDetailPage() {
         </Box>
 
         {/* Chart Section - 참여 추이 */}
-        <Box sx={{ mb: 10 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
+        <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+          <Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
             📈 참여 추이
           </Typography>
-          <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-            <CardContent sx={{ p: 6 }}>
-              <Box sx={{ display: 'flex', gap: 2, mb: 6 }}>
+          <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+            <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
+              <Box sx={{ display: 'flex', gap: { xs: 1, sm: 2 }, mb: { xs: 3, sm: 6 } }}>
                 <Button
                   size="medium"
                   variant={chartPeriod === '7d' ? 'contained' : 'outlined'}
                   onClick={() => setChartPeriod('7d')}
-                  sx={{ borderRadius: 2 }}
+                  sx={{ borderRadius: 2, fontSize: { xs: '0.75rem', sm: '0.875rem' }, py: { xs: 0.5, sm: 1 }, px: { xs: 1.5, sm: 2 } }}
                 >
                   7일
                 </Button>
@@ -491,7 +531,7 @@ export default function EventDetailPage() {
                   size="medium"
                   variant={chartPeriod === '30d' ? 'contained' : 'outlined'}
                   onClick={() => setChartPeriod('30d')}
-                  sx={{ borderRadius: 2 }}
+                  sx={{ borderRadius: 2, fontSize: { xs: '0.75rem', sm: '0.875rem' }, py: { xs: 0.5, sm: 1 }, px: { xs: 1.5, sm: 2 } }}
                 >
                   30일
                 </Button>
@@ -499,13 +539,13 @@ export default function EventDetailPage() {
                   size="medium"
                   variant={chartPeriod === 'all' ? 'contained' : 'outlined'}
                   onClick={() => setChartPeriod('all')}
-                  sx={{ borderRadius: 2 }}
+                  sx={{ borderRadius: 2, fontSize: { xs: '0.75rem', sm: '0.875rem' }, py: { xs: 0.5, sm: 1 }, px: { xs: 1.5, sm: 2 } }}
                 >
                   전체
                 </Button>
               </Box>
 
-              <Box sx={{ height: 320 }}>
+              <Box sx={{ height: { xs: 200, sm: 320 } }}>
                 <Line
                   data={generateParticipationTrendData(chartPeriod)}
                   options={{
@@ -544,14 +584,14 @@ export default function EventDetailPage() {
         </Box>
 
         {/* Chart Section - 채널별 성과 & ROI 추이 */}
-        <Grid container spacing={6} sx={{ mb: 10 }}>
+        <Grid container spacing={{ xs: 2, sm: 6 }} sx={{ mb: { xs: 5, sm: 10 } }}>
           <Grid item xs={12} md={6}>
-            <Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
+            <Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
               📊 채널별 참여자
             </Typography>
-            <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-              <CardContent sx={{ p: 6 }}>
-                <Box sx={{ height: 320 }}>
+            <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+              <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
+                <Box sx={{ height: { xs: 200, sm: 320 } }}>
                   <Bar
                     data={channelPerformanceData}
                     options={{
@@ -589,12 +629,12 @@ export default function EventDetailPage() {
           </Grid>
 
           <Grid item xs={12} md={6}>
-            <Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
+            <Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
               💰 ROI 추이
             </Typography>
-            <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-              <CardContent sx={{ p: 6 }}>
-                <Box sx={{ height: 320 }}>
+            <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+              <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
+                <Box sx={{ height: { xs: 200, sm: 320 } }}>
                   <Line
                     data={roiTrendData}
                     options={{
@@ -634,62 +674,62 @@ export default function EventDetailPage() {
         </Grid>
 
         {/* Event Details */}
-        <Box sx={{ mb: 10 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
+        <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+          <Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
             🎯 이벤트 정보
           </Typography>
 
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
-                <CardGiftcard sx={{ fontSize: 28, color: colors.pink }} />
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 2, sm: 4 } }}>
+            <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
+                <CardGiftcard sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.pink }} />
                 <Box sx={{ flex: 1 }}>
-                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
+                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
                     경품
                   </Typography>
-                  <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                  <Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
                     {event.prize}
                   </Typography>
                 </Box>
               </CardContent>
             </Card>
 
-            <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
+            <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
                 {getMethodIcon(event.method)}
                 <Box sx={{ flex: 1 }}>
-                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
+                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
                     참여 방법
                   </Typography>
-                  <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                  <Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
                     {event.method}
                   </Typography>
                 </Box>
               </CardContent>
             </Card>
 
-            <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
-                <AttachMoney sx={{ fontSize: 28, color: colors.mint }} />
+            <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
+                <AttachMoney sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.mint }} />
                 <Box sx={{ flex: 1 }}>
-                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1 }}>
+                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 0.5, sm: 1 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
                     예상 비용
                   </Typography>
-                  <Typography variant="h6" sx={{ fontWeight: 600 }}>
+                  <Typography variant="h6" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
                     {event.cost.toLocaleString()}원
                   </Typography>
                 </Box>
               </CardContent>
             </Card>
 
-            <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, p: 4 }}>
-                <Share sx={{ fontSize: 28, color: colors.blue }} />
+            <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+              <CardContent sx={{ display: 'flex', alignItems: 'flex-start', gap: { xs: 1.5, sm: 3 }, p: { xs: 3, sm: 4 } }}>
+                <Share sx={{ fontSize: { xs: 20, sm: 28 }, color: colors.blue }} />
                 <Box sx={{ flex: 1 }}>
-                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 2 }}>
+                  <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: { xs: 1, sm: 2 }, fontSize: { xs: '0.625rem', sm: '0.75rem' } }}>
                     배포 채널
                   </Typography>
-                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: { xs: 1, sm: 2 } }}>
                     {event.channels.map((channel) => (
                       <Chip
                         key={channel}
@@ -699,6 +739,8 @@ export default function EventDetailPage() {
                           bgcolor: colors.purpleLight,
                           color: colors.purple,
                           fontWeight: 600,
+                          fontSize: { xs: '0.75rem', sm: '0.875rem' },
+                          height: { xs: 24, sm: 32 },
                         }}
                       />
                     ))}
@@ -710,17 +752,17 @@ export default function EventDetailPage() {
         </Box>
 
         {/* Quick Actions */}
-        <Box sx={{ mb: 10 }}>
-          <Typography variant="h5" sx={{ fontWeight: 700, mb: 6, fontSize: '1.5rem' }}>
+        <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+          <Typography variant="h5" sx={{ fontWeight: 700, mb: { xs: 3, sm: 6 }, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
             ⚡ 빠른 작업
           </Typography>
-          <Grid container spacing={4}>
+          <Grid container spacing={{ xs: 2, sm: 4 }}>
             <Grid item xs={6} md={3}>
               <Card
                 elevation={0}
                 sx={{
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: { xs: 3, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   transition: 'all 0.2s',
                   '&:hover': {
@@ -730,9 +772,9 @@ export default function EventDetailPage() {
                 }}
                 onClick={() => router.push(`/events/${eventId}/participants`)}
               >
-                <CardContent sx={{ textAlign: 'center', py: 5 }}>
-                  <People sx={{ fontSize: 40, mb: 2, color: colors.pink }} />
-                  <Typography variant="body1" sx={{ fontWeight: 600 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
+                  <People sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.pink }} />
+                  <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                     참여자 목록
                   </Typography>
                 </CardContent>
@@ -743,7 +785,7 @@ export default function EventDetailPage() {
                 elevation={0}
                 sx={{
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: { xs: 3, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   transition: 'all 0.2s',
                   '&:hover': {
@@ -752,9 +794,9 @@ export default function EventDetailPage() {
                   },
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 5 }}>
-                  <Edit sx={{ fontSize: 40, mb: 2, color: colors.blue }} />
-                  <Typography variant="body1" sx={{ fontWeight: 600 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
+                  <Edit sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.blue }} />
+                  <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                     이벤트 수정
                   </Typography>
                 </CardContent>
@@ -765,7 +807,7 @@ export default function EventDetailPage() {
                 elevation={0}
                 sx={{
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: { xs: 3, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   transition: 'all 0.2s',
                   '&:hover': {
@@ -774,9 +816,9 @@ export default function EventDetailPage() {
                   },
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 5 }}>
-                  <Share sx={{ fontSize: 40, mb: 2, color: colors.purple }} />
-                  <Typography variant="body1" sx={{ fontWeight: 600 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
+                  <Share sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.purple }} />
+                  <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                     공유하기
                   </Typography>
                 </CardContent>
@@ -787,7 +829,7 @@ export default function EventDetailPage() {
                 elevation={0}
                 sx={{
                   cursor: 'pointer',
-                  borderRadius: 4,
+                  borderRadius: { xs: 3, sm: 4 },
                   boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                   transition: 'all 0.2s',
                   '&:hover': {
@@ -796,9 +838,9 @@ export default function EventDetailPage() {
                   },
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 5 }}>
-                  <Download sx={{ fontSize: 40, mb: 2, color: colors.mint }} />
-                  <Typography variant="body1" sx={{ fontWeight: 600 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 3, sm: 5 } }}>
+                  <Download sx={{ fontSize: { xs: 24, sm: 40 }, mb: { xs: 1, sm: 2 }, color: colors.mint }} />
+                  <Typography variant="body1" sx={{ fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                     데이터 다운
                   </Typography>
                 </CardContent>
@@ -808,32 +850,32 @@ export default function EventDetailPage() {
         </Box>
 
         {/* Recent Participants */}
-        <Box sx={{ mb: 10 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 6 }}>
-            <Typography variant="h5" sx={{ fontWeight: 700, fontSize: '1.5rem' }}>
+        <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+          <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'center' }, justifyContent: 'space-between', gap: { xs: 2, sm: 0 }, mb: { xs: 3, sm: 6 } }}>
+            <Typography variant="h5" sx={{ fontWeight: 700, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
               👥 최근 참여자
             </Typography>
             <Button
               size="medium"
-              endIcon={<span className="material-icons" style={{ fontSize: 18 }}>chevron_right</span>}
+              endIcon={<Box component="span" className="material-icons" sx={{ fontSize: { xs: 14, sm: 18 } }}>chevron_right</Box>}
               onClick={() => router.push(`/events/${eventId}/participants`)}
-              sx={{ color: colors.pink, fontWeight: 600 }}
+              sx={{ color: colors.pink, fontWeight: 600, fontSize: { xs: '0.875rem', sm: '1rem' } }}
             >
               전체보기
             </Button>
           </Box>
 
-          <Card elevation={0} sx={{ borderRadius: 4, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
-            <CardContent sx={{ p: 6 }}>
+          <Card elevation={0} sx={{ borderRadius: { xs: 3, sm: 4 }, boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)' }}>
+            <CardContent sx={{ p: { xs: 3, sm: 6 } }}>
               {recentParticipants.map((participant, index) => (
                 <Box key={index}>
-                  {index > 0 && <Divider sx={{ my: 4 }} />}
+                  {index > 0 && <Divider sx={{ my: { xs: 2, sm: 4 } }} />}
                   <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 1.5, sm: 3 } }}>
                       <Box
                         sx={{
-                          width: 48,
-                          height: 48,
+                          width: { xs: 32, sm: 48 },
+                          height: { xs: 32, sm: 48 },
                           borderRadius: '50%',
                           bgcolor: colors.purpleLight,
                           display: 'flex',
@@ -841,18 +883,18 @@ export default function EventDetailPage() {
                           justifyContent: 'center',
                         }}
                       >
-                        <Person sx={{ color: colors.purple, fontSize: 24 }} />
+                        <Person sx={{ color: colors.purple, fontSize: { xs: 16, sm: 24 } }} />
                       </Box>
                       <Box>
-                        <Typography variant="body1" sx={{ fontWeight: 600, mb: 0.5 }}>
+                        <Typography variant="body1" sx={{ fontWeight: 600, mb: { xs: 0.25, sm: 0.5 }, fontSize: { xs: '0.875rem', sm: '1rem' } }}>
                           {participant.name}
                         </Typography>
-                        <Typography variant="body2" color="text.secondary">
+                        <Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
                           {participant.phone}
                         </Typography>
                       </Box>
                     </Box>
-                    <Typography variant="body2" color="text.secondary">
+                    <Typography variant="body2" color="text.secondary" sx={{ fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
                       {participant.time}
                     </Typography>
                   </Box>
diff --git a/src/app/(main)/events/page.tsx b/src/app/(main)/events/page.tsx
index 1a2dea4..bf80422 100644
--- a/src/app/(main)/events/page.tsx
+++ b/src/app/(main)/events/page.tsx
@@ -36,11 +36,7 @@ import {
   Star,
 } from '@mui/icons-material';
 import Header from '@/shared/ui/Header';
-import {
-  cardStyles,
-  colors,
-  responsiveText,
-} from '@/shared/lib/button-styles';
+import { cardStyles, colors, responsiveText } from '@/shared/lib/button-styles';
 
 // Mock 데이터
 const mockEvents = [
@@ -208,7 +204,7 @@ export default function EventsPage() {
     }
   };
 
-  const calculateProgress = (event: typeof mockEvents[0]) => {
+  const calculateProgress = (event: (typeof mockEvents)[0]) => {
     if (event.status !== 'active') return 0;
     const total = new Date(event.endDate).getTime() - new Date(event.startDate).getTime();
     const elapsed = Date.now() - new Date(event.startDate).getTime();
@@ -237,552 +233,647 @@ export default function EventsPage() {
           minHeight: '100vh',
         }}
       >
-        <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
-        {/* Summary Statistics */}
-        <Grid container spacing={4} sx={{ mb: 8 }}>
-          <Grid item xs={6} sm={3}>
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
-                borderColor: 'transparent',
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <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: 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: colors.gray[700],
-                  fontSize: '0.875rem',
-                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
-                }}>
-                  전체 이벤트
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={6} sm={3}>
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
-                borderColor: 'transparent',
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <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: 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: colors.gray[700],
-                  fontSize: '0.875rem',
-                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
-                }}>
-                  진행중
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={6} sm={3}>
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
-                borderColor: 'transparent',
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <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: 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: colors.gray[700],
-                  fontSize: '0.875rem',
-                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
-                }}>
-                  총 참여자
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-          <Grid item xs={6} sm={3}>
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-                background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
-                borderColor: 'transparent',
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 4, px: 3 }}>
-                <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: 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: colors.gray[700],
-                  fontSize: '0.875rem',
-                  textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
-                }}>
-                  평균 ROI
-                </Typography>
-              </CardContent>
-            </Card>
-          </Grid>
-        </Grid>
-
-        {/* Search Section */}
-        <Box sx={{ mb: 8 }}>
-          <TextField
-            fullWidth
-            placeholder="이벤트명 검색..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <Search sx={{ color: colors.gray[400] }} />
-                </InputAdornment>
-              ),
-            }}
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                borderRadius: 3,
-                bgcolor: 'white',
-                '& fieldset': {
-                  borderColor: colors.gray[200],
-                },
-                '&:hover fieldset': {
-                  borderColor: colors.gray[300],
-                },
-                '&.Mui-focused fieldset': {
-                  borderColor: colors.purple,
-                },
-              },
-            }}
-          />
-        </Box>
-
-        {/* Filters */}
-        <Box sx={{ mb: 8 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
-            <FilterList sx={{ color: colors.purple }} />
-            <FormControl sx={{ flex: 1, minWidth: 120 }}>
-              <InputLabel>상태</InputLabel>
-              <Select
-                value={statusFilter}
-                label="상태"
-                onChange={(e) => setStatusFilter(e.target.value as EventStatus)}
+        <Container
+          maxWidth="lg"
+          sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}
+        >
+          {/* Summary Statistics */}
+          <Grid container spacing={{ xs: 2, sm: 4 }} sx={{ mb: { xs: 4, sm: 8 } }}>
+            <Grid item xs={6} sm={3}>
+              <Card
+                elevation={0}
                 sx={{
-                  borderRadius: 2,
-                  bgcolor: 'white',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.gray[200],
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.gray[300],
-                  },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.purple,
-                  },
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
+                  borderColor: 'transparent',
                 }}
               >
-                <MenuItem value="all">전체</MenuItem>
-                <MenuItem value="active">진행중</MenuItem>
-                <MenuItem value="scheduled">예정</MenuItem>
-                <MenuItem value="ended">종료</MenuItem>
-              </Select>
-            </FormControl>
-            <FormControl sx={{ flex: 1, minWidth: 140 }}>
-              <InputLabel>기간</InputLabel>
-              <Select
-                value={periodFilter}
-                label="기간"
-                onChange={(e) => setPeriodFilter(e.target.value as Period)}
-                sx={{
-                  borderRadius: 2,
-                  bgcolor: 'white',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.gray[200],
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.gray[300],
-                  },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.purple,
-                  },
-                }}
-              >
-                <MenuItem value="1month">최근 1개월</MenuItem>
-                <MenuItem value="3months">최근 3개월</MenuItem>
-                <MenuItem value="6months">최근 6개월</MenuItem>
-                <MenuItem value="1year">최근 1년</MenuItem>
-                <MenuItem value="all">전체</MenuItem>
-              </Select>
-            </FormControl>
-          </Box>
-        </Box>
-
-        {/* Sorting */}
-        <Box sx={{ mb: 8 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
-              정렬
-            </Typography>
-            <FormControl sx={{ width: 160 }}>
-              <Select
-                value={sortBy}
-                onChange={(e) => setSortBy(e.target.value as SortBy)}
-                size="small"
-                sx={{
-                  borderRadius: 2,
-                  bgcolor: 'white',
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.gray[200],
-                  },
-                  '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.gray[300],
-                  },
-                  '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-                    borderColor: colors.purple,
-                  },
-                }}
-              >
-                <MenuItem value="latest">최신순</MenuItem>
-                <MenuItem value="participants">참여자순</MenuItem>
-                <MenuItem value="roi">투자대비수익률순</MenuItem>
-              </Select>
-            </FormControl>
-          </Box>
-        </Box>
-
-        {/* Event List */}
-        <Box sx={{ mb: 10 }}>
-          {pageEvents.length === 0 ? (
-            <Card
-              elevation={0}
-              sx={{
-                ...cardStyles.default,
-              }}
-            >
-              <CardContent sx={{ textAlign: 'center', py: 20 }}>
-                <Box sx={{ color: colors.gray[300], mb: 3 }}>
-                  <span className="material-icons" style={{ fontSize: 72 }}>
-                    event_busy
-                  </span>
-                </Box>
-                <Typography variant="h6" sx={{ mb: 2, color: colors.gray[700] }}>
-                  검색 결과가 없습니다
-                </Typography>
-                <Typography variant="body2" sx={{ color: colors.gray[500] }}>
-                  다른 검색 조건으로 다시 시도해보세요
-                </Typography>
-              </CardContent>
-            </Card>
-          ) : (
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {pageEvents.map((event) => (
-                <Card
-                  key={event.id}
-                  elevation={0}
-                  sx={{
-                    ...cardStyles.clickable,
-                  }}
-                  onClick={() => handleEventClick(event.id)}
+                <CardContent
+                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
                 >
-                  <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
-                    {/* Header with Badges */}
-                    <Box sx={{ mb: 4 }}>
-                      <Box
-                        sx={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'start',
-                          mb: 3,
-                        }}
-                      >
-                        <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], flex: 1 }}>
-                          {event.title}
-                        </Typography>
-                        <Box
-                          sx={{
-                            px: 2.5,
-                            py: 0.75,
-                            borderRadius: 2,
-                            fontSize: '0.875rem',
-                            fontWeight: 600,
-                            ...getStatusStyle(event.status),
-                          }}
-                        >
-                          {getStatusText(event.status)}
-                          {event.status === 'active'
-                            ? ` | D-${event.daysLeft}`
-                            : event.status === 'scheduled'
-                              ? ` | D+${event.daysLeft}`
-                              : ''}
-                        </Box>
-                      </Box>
+                  <Event
+                    sx={{
+                      fontSize: { xs: 24, sm: 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: colors.gray[900],
+                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
+                      mb: 0.5,
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
+                  >
+                    {stats.total}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: colors.gray[700],
+                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                    }}
+                  >
+                    전체 이벤트
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={6} sm={3}>
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.mintLight} 100%)`,
+                  borderColor: 'transparent',
+                }}
+              >
+                <CardContent
+                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
+                >
+                  <LocalFireDepartment
+                    sx={{
+                      fontSize: { xs: 24, sm: 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: colors.gray[900],
+                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
+                      mb: 0.5,
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
+                  >
+                    {stats.active}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: colors.gray[700],
+                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                    }}
+                  >
+                    진행중
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={6} sm={3}>
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.blueLight} 100%)`,
+                  borderColor: 'transparent',
+                }}
+              >
+                <CardContent
+                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
+                >
+                  <People
+                    sx={{
+                      fontSize: { xs: 24, sm: 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: colors.gray[900],
+                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
+                      mb: 0.5,
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
+                  >
+                    {stats.totalParticipants}
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: colors.gray[700],
+                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                    }}
+                  >
+                    총 참여자
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+            <Grid item xs={6} sm={3}>
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                  background: `linear-gradient(135deg, ${colors.orange} 0%, ${colors.orangeLight} 100%)`,
+                  borderColor: 'transparent',
+                }}
+              >
+                <CardContent
+                  sx={{ textAlign: 'center', py: { xs: 3, sm: 4 }, px: { xs: 2, sm: 3 } }}
+                >
+                  <TrendingUp
+                    sx={{
+                      fontSize: { xs: 24, sm: 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: colors.gray[900],
+                      fontSize: { xs: '1.25rem', sm: '1.75rem' },
+                      mb: 0.5,
+                      textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
+                    }}
+                  >
+                    {stats.avgROI}%
+                  </Typography>
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      color: colors.gray[700],
+                      fontSize: { xs: '0.6875rem', sm: '0.875rem' },
+                      textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
+                    }}
+                  >
+                    평균 ROI
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          </Grid>
 
-                      {/* Status Badges */}
-                      <Box sx={{ display: 'flex', gap: 1.5, flexWrap: 'wrap' }}>
-                        {event.isUrgent && (
-                          <Chip
-                            icon={<Warning sx={{ fontSize: 16 }} />}
-                            label="마감임박"
-                            size="small"
-                            sx={{
-                              bgcolor: '#FEF3C7',
-                              color: '#92400E',
-                              fontWeight: 600,
-                              fontSize: '0.75rem',
-                              '& .MuiChip-icon': { color: '#92400E' },
-                            }}
-                          />
-                        )}
-                        {event.isPopular && (
-                          <Chip
-                            icon={<LocalFireDepartment sx={{ fontSize: 16 }} />}
-                            label="인기"
-                            size="small"
-                            sx={{
-                              bgcolor: '#FEE2E2',
-                              color: '#991B1B',
-                              fontWeight: 600,
-                              fontSize: '0.75rem',
-                              '& .MuiChip-icon': { color: '#991B1B' },
-                            }}
-                          />
-                        )}
-                        {event.isHighROI && (
-                          <Chip
-                            icon={<Star sx={{ fontSize: 16 }} />}
-                            label="높은 ROI"
-                            size="small"
-                            sx={{
-                              bgcolor: '#DCFCE7',
-                              color: '#166534',
-                              fontWeight: 600,
-                              fontSize: '0.75rem',
-                              '& .MuiChip-icon': { color: '#166534' },
-                            }}
-                          />
-                        )}
-                        {event.isNew && (
-                          <Chip
-                            icon={<NewReleases sx={{ fontSize: 16 }} />}
-                            label="신규"
-                            size="small"
-                            sx={{
-                              bgcolor: '#DBEAFE',
-                              color: '#1E40AF',
-                              fontWeight: 600,
-                              fontSize: '0.75rem',
-                              '& .MuiChip-icon': { color: '#1E40AF' },
-                            }}
-                          />
-                        )}
-                      </Box>
-                    </Box>
-
-                    {/* Progress Bar for Active Events */}
-                    {event.status === 'active' && (
-                      <Box sx={{ mb: 4 }}>
-                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1 }}>
-                          <Typography variant="caption" sx={{ color: colors.gray[600], fontSize: '0.75rem' }}>
-                            이벤트 진행률
-                          </Typography>
-                          <Typography variant="caption" sx={{ color: colors.gray[700], fontWeight: 600, fontSize: '0.75rem' }}>
-                            {Math.round(calculateProgress(event))}%
-                          </Typography>
-                        </Box>
-                        <LinearProgress
-                          variant="determinate"
-                          value={calculateProgress(event)}
-                          sx={{
-                            height: 8,
-                            borderRadius: 4,
-                            bgcolor: colors.gray[200],
-                            '& .MuiLinearProgress-bar': {
-                              borderRadius: 4,
-                              background: `linear-gradient(90deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
-                            },
-                          }}
-                        />
-                      </Box>
-                    )}
-
-                    {/* Event Info and Stats Container */}
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
-                      {/* Left: Event Info */}
-                      <Box>
-                        <Box sx={{ mb: 4, display: 'flex', flexDirection: 'column', gap: 2 }}>
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                            <CardGiftcard sx={{ fontSize: 18, color: colors.pink }} />
-                            <Typography variant="body2" sx={{ color: colors.gray[700], fontSize: '0.875rem' }}>
-                              {event.prize}
-                            </Typography>
-                          </Box>
-                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                            {getMethodIcon(event.method)}
-                            <Typography variant="body2" sx={{ color: colors.gray[700], fontSize: '0.875rem' }}>
-                              {event.method}
-                            </Typography>
-                          </Box>
-                        </Box>
-
-                        {/* Date */}
-                        <Typography
-                          variant="body2"
-                          sx={{
-                            color: colors.gray[600],
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                          }}
-                        >
-                          <span>📅</span>
-                          <span>
-                            {event.startDate} ~ {event.endDate}
-                          </span>
-                        </Typography>
-                      </Box>
-
-                      {/* Right: Stats */}
-                      <Box sx={{ display: 'flex', gap: 8, textAlign: 'right' }}>
-                        <Box>
-                          <Typography
-                            variant="body2"
-                            sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
-                          >
-                            참여자
-                          </Typography>
-                          <Typography variant="h5" sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5 }}>
-                            {event.participants.toLocaleString()}
-                            <Typography
-                              component="span"
-                              variant="body2"
-                              sx={{ ml: 0.5, color: colors.gray[600] }}
-                            >
-                              명
-                            </Typography>
-                          </Typography>
-                          {event.targetParticipants > 0 && (
-                            <Typography variant="caption" sx={{ color: colors.gray[500], fontSize: '0.75rem' }}>
-                              목표: {event.targetParticipants}명 ({Math.round((event.participants / event.targetParticipants) * 100)}%)
-                            </Typography>
-                          )}
-                        </Box>
-                        <Box>
-                          <Typography
-                            variant="body2"
-                            sx={{ mb: 1, color: colors.gray[600], fontWeight: 500 }}
-                          >
-                            ROI
-                          </Typography>
-                          <Typography variant="h5" sx={{ fontWeight: 700, color: event.roi >= 400 ? colors.mint : event.roi >= 200 ? colors.orange : colors.gray[500] }}>
-                            {event.roi}%
-                          </Typography>
-                        </Box>
-                      </Box>
-                    </Box>
-                  </CardContent>
-                </Card>
-              ))}
-            </Box>
-          )}
-        </Box>
-
-        {/* Pagination */}
-        {totalPages > 1 && (
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-            <Pagination
-              count={totalPages}
-              page={currentPage}
-              onChange={(_, page) => setCurrentPage(page)}
-              size="large"
+          {/* Search Section */}
+          <Box sx={{ mb: { xs: 4, sm: 8 } }}>
+            <TextField
+              fullWidth
+              placeholder="이벤트명 검색..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search sx={{ color: colors.gray[400], fontSize: { xs: 20, sm: 24 } }} />
+                  </InputAdornment>
+                ),
+              }}
               sx={{
-                '& .MuiPaginationItem-root': {
-                  color: colors.gray[700],
-                  fontWeight: 600,
-                  '&.Mui-selected': {
-                    background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
-                    color: 'white',
-                    '&:hover': {
-                      background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
-                    },
+                '& .MuiOutlinedInput-root': {
+                  borderRadius: 3,
+                  bgcolor: 'white',
+                  fontSize: { xs: '0.875rem', sm: '1rem' },
+                  '& fieldset': {
+                    borderColor: colors.gray[200],
                   },
-                  '&:hover': {
-                    bgcolor: colors.gray[100],
+                  '&:hover fieldset': {
+                    borderColor: colors.gray[300],
+                  },
+                  '&.Mui-focused fieldset': {
+                    borderColor: colors.purple,
                   },
                 },
               }}
             />
           </Box>
-        )}
-      </Container>
+
+          {/* Filters */}
+          <Box sx={{ mb: { xs: 4, sm: 8 } }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 2, sm: 4 }, flexWrap: 'wrap' }}>
+              <FormControl sx={{ flex: 1, minWidth: 120 }}>
+                <InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>상태</InputLabel>
+                <Select
+                  value={statusFilter}
+                  label="상태"
+                  onChange={(e) => setStatusFilter(e.target.value as EventStatus)}
+                  sx={{
+                    borderRadius: 2,
+                    bgcolor: 'white',
+                    fontSize: { xs: '0.875rem', sm: '1rem' },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.gray[200],
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.gray[300],
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.purple,
+                    },
+                  }}
+                >
+                  <MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
+                  <MenuItem value="active" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>진행중</MenuItem>
+                  <MenuItem value="scheduled" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>예정</MenuItem>
+                  <MenuItem value="ended" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>종료</MenuItem>
+                </Select>
+              </FormControl>
+              <FormControl sx={{ flex: 1, minWidth: 140 }}>
+                <InputLabel sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>기간</InputLabel>
+                <Select
+                  value={periodFilter}
+                  label="기간"
+                  onChange={(e) => setPeriodFilter(e.target.value as Period)}
+                  sx={{
+                    borderRadius: 2,
+                    bgcolor: 'white',
+                    fontSize: { xs: '0.875rem', sm: '1rem' },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.gray[200],
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.gray[300],
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.purple,
+                    },
+                  }}
+                >
+                  <MenuItem value="1month" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1개월</MenuItem>
+                  <MenuItem value="3months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 3개월</MenuItem>
+                  <MenuItem value="6months" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 6개월</MenuItem>
+                  <MenuItem value="1year" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>최근 1년</MenuItem>
+                  <MenuItem value="all" sx={{ fontSize: { xs: '0.875rem', sm: '1rem' } }}>전체</MenuItem>
+                </Select>
+              </FormControl>
+            </Box>
+          </Box>
+
+          {/* Sorting */}
+          <Box sx={{ mb: { xs: 4, sm: 8 } }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+              <Typography variant="body2" sx={{ ...responsiveText.body2, fontWeight: 600 }}>
+                정렬
+              </Typography>
+              <FormControl sx={{ width: { xs: 140, sm: 160 } }}>
+                <Select
+                  value={sortBy}
+                  onChange={(e) => setSortBy(e.target.value as SortBy)}
+                  size="small"
+                  sx={{
+                    borderRadius: 2,
+                    bgcolor: 'white',
+                    fontSize: { xs: '0.8125rem', sm: '0.875rem' },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.gray[200],
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.gray[300],
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor: colors.purple,
+                    },
+                  }}
+                >
+                  <MenuItem value="latest" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>최신순</MenuItem>
+                  <MenuItem value="participants" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>참여자순</MenuItem>
+                  <MenuItem value="roi" sx={{ fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>투자대비수익률순</MenuItem>
+                </Select>
+              </FormControl>
+            </Box>
+          </Box>
+
+          {/* Event List */}
+          <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+            {pageEvents.length === 0 ? (
+              <Card
+                elevation={0}
+                sx={{
+                  ...cardStyles.default,
+                }}
+              >
+                <CardContent sx={{ textAlign: 'center', py: { xs: 10, sm: 20 } }}>
+                  <Box sx={{ color: colors.gray[300], mb: { xs: 2, sm: 3 } }}>
+                    <Box
+                      component="span"
+                      className="material-icons"
+                      sx={{ fontSize: { xs: 48, sm: 72 } }}
+                    >
+                      event_busy
+                    </Box>
+                  </Box>
+                  <Typography variant="h6" sx={{ mb: { xs: 1, sm: 2 }, color: colors.gray[700], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
+                    검색 결과가 없습니다
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: colors.gray[500], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}>
+                    다른 검색 조건으로 다시 시도해보세요
+                  </Typography>
+                </CardContent>
+              </Card>
+            ) : (
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
+                {pageEvents.map((event) => (
+                  <Card
+                    key={event.id}
+                    elevation={0}
+                    sx={{
+                      ...cardStyles.clickable,
+                    }}
+                    onClick={() => handleEventClick(event.id)}
+                  >
+                    <CardContent sx={{ p: { xs: 3, sm: 6, md: 8 } }}>
+                      {/* Header with Badges */}
+                      <Box sx={{ mb: { xs: 2, sm: 4 } }}>
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'start',
+                            mb: { xs: 2, sm: 3 },
+                            flexDirection: { xs: 'column', sm: 'row' },
+                            gap: { xs: 1.5, sm: 0 },
+                          }}
+                        >
+                          <Typography
+                            variant="h6"
+                            sx={{ fontWeight: 700, color: colors.gray[900], flex: 1, fontSize: { xs: '1rem', sm: '1.25rem' } }}
+                          >
+                            {event.title}
+                          </Typography>
+                          <Box
+                            sx={{
+                              px: { xs: 2, sm: 2.5 },
+                              py: { xs: 0.5, sm: 0.75 },
+                              borderRadius: 2,
+                              fontSize: { xs: '0.75rem', sm: '0.875rem' },
+                              fontWeight: 600,
+                              ...getStatusStyle(event.status),
+                            }}
+                          >
+                            {getStatusText(event.status)}
+                            {event.status === 'active'
+                              ? ` | D-${event.daysLeft}`
+                              : event.status === 'scheduled'
+                                ? ` | D+${event.daysLeft}`
+                                : ''}
+                          </Box>
+                        </Box>
+
+                        {/* Status Badges */}
+                        <Box sx={{ display: 'flex', gap: { xs: 1, sm: 1.5 }, flexWrap: 'wrap' }}>
+                          {event.isUrgent && (
+                            <Chip
+                              icon={<Warning sx={{ fontSize: { xs: 14, sm: 16 } }} />}
+                              label="마감임박"
+                              size="small"
+                              sx={{
+                                bgcolor: '#FEF3C7',
+                                color: '#92400E',
+                                fontWeight: 600,
+                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
+                                height: { xs: 24, sm: 28 },
+                                '& .MuiChip-icon': { color: '#92400E' },
+                              }}
+                            />
+                          )}
+                          {event.isPopular && (
+                            <Chip
+                              icon={<LocalFireDepartment sx={{ fontSize: { xs: 14, sm: 16 } }} />}
+                              label="인기"
+                              size="small"
+                              sx={{
+                                bgcolor: '#FEE2E2',
+                                color: '#991B1B',
+                                fontWeight: 600,
+                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
+                                height: { xs: 24, sm: 28 },
+                                '& .MuiChip-icon': { color: '#991B1B' },
+                              }}
+                            />
+                          )}
+                          {event.isHighROI && (
+                            <Chip
+                              icon={<Star sx={{ fontSize: { xs: 14, sm: 16 } }} />}
+                              label="높은 ROI"
+                              size="small"
+                              sx={{
+                                bgcolor: '#DCFCE7',
+                                color: '#166534',
+                                fontWeight: 600,
+                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
+                                height: { xs: 24, sm: 28 },
+                                '& .MuiChip-icon': { color: '#166534' },
+                              }}
+                            />
+                          )}
+                          {event.isNew && (
+                            <Chip
+                              icon={<NewReleases sx={{ fontSize: { xs: 14, sm: 16 } }} />}
+                              label="신규"
+                              size="small"
+                              sx={{
+                                bgcolor: '#DBEAFE',
+                                color: '#1E40AF',
+                                fontWeight: 600,
+                                fontSize: { xs: '0.6875rem', sm: '0.75rem' },
+                                height: { xs: 24, sm: 28 },
+                                '& .MuiChip-icon': { color: '#1E40AF' },
+                              }}
+                            />
+                          )}
+                        </Box>
+                      </Box>
+
+                      {/* Progress Bar for Active Events */}
+                      {event.status === 'active' && (
+                        <Box sx={{ mb: { xs: 2, sm: 4 } }}>
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              justifyContent: 'space-between',
+                              alignItems: 'center',
+                              mb: 1,
+                            }}
+                          >
+                            <Typography
+                              variant="caption"
+                              sx={{ color: colors.gray[600], fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
+                            >
+                              이벤트 진행률
+                            </Typography>
+                            <Typography
+                              variant="caption"
+                              sx={{ color: colors.gray[700], fontWeight: 600, fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
+                            >
+                              {Math.round(calculateProgress(event))}%
+                            </Typography>
+                          </Box>
+                          <LinearProgress
+                            variant="determinate"
+                            value={calculateProgress(event)}
+                            sx={{
+                              height: { xs: 6, sm: 8 },
+                              borderRadius: 4,
+                              bgcolor: colors.gray[200],
+                              '& .MuiLinearProgress-bar': {
+                                borderRadius: 4,
+                                background: `linear-gradient(90deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
+                              },
+                            }}
+                          />
+                        </Box>
+                      )}
+
+                      {/* Event Info and Stats Container */}
+                      <Box
+                        sx={{
+                          display: 'flex',
+                          justifyContent: 'space-between',
+                          alignItems: 'flex-end',
+                          flexDirection: { xs: 'column', sm: 'row' },
+                          gap: { xs: 3, sm: 0 },
+                        }}
+                      >
+                        {/* Left: Event Info */}
+                        <Box sx={{ width: { xs: '100%', sm: 'auto' } }}>
+                          <Box sx={{ mb: { xs: 2, sm: 4 }, display: 'flex', flexDirection: 'column', gap: { xs: 1.5, sm: 2 } }}>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                              <CardGiftcard sx={{ fontSize: { xs: 16, sm: 18 }, color: colors.pink }} />
+                              <Typography
+                                variant="body2"
+                                sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}
+                              >
+                                {event.prize}
+                              </Typography>
+                            </Box>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                              {getMethodIcon(event.method)}
+                              <Typography
+                                variant="body2"
+                                sx={{ color: colors.gray[700], fontSize: { xs: '0.8125rem', sm: '0.875rem' } }}
+                              >
+                                {event.method}
+                              </Typography>
+                            </Box>
+                          </Box>
+
+                          {/* Date */}
+                          <Typography
+                            variant="body2"
+                            sx={{
+                              color: colors.gray[600],
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: { xs: 1.5, sm: 2 },
+                              fontSize: { xs: '0.75rem', sm: '0.875rem' },
+                            }}
+                          >
+                            <span>📅</span>
+                            <span>
+                              {event.startDate} ~ {event.endDate}
+                            </span>
+                          </Typography>
+                        </Box>
+
+                        {/* Right: Stats */}
+                        <Box sx={{ display: 'flex', gap: { xs: 4, sm: 8 }, textAlign: 'right', width: { xs: '100%', sm: 'auto' }, justifyContent: { xs: 'flex-start', sm: 'flex-end' } }}>
+                          <Box>
+                            <Typography
+                              variant="body2"
+                              sx={{ mb: { xs: 0.5, sm: 1 }, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
+                            >
+                              참여자
+                            </Typography>
+                            <Typography
+                              variant="h5"
+                              sx={{ fontWeight: 700, color: colors.gray[900], mb: 0.5, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}
+                            >
+                              {event.participants.toLocaleString()}
+                              <Typography
+                                component="span"
+                                variant="body2"
+                                sx={{ ml: 0.5, color: colors.gray[600], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
+                              >
+                                명
+                              </Typography>
+                            </Typography>
+                            {event.targetParticipants > 0 && (
+                              <Typography
+                                variant="caption"
+                                sx={{ color: colors.gray[500], fontSize: { xs: '0.6875rem', sm: '0.75rem' } }}
+                              >
+                                목표: {event.targetParticipants}명 (
+                                {Math.round((event.participants / event.targetParticipants) * 100)}
+                                %)
+                              </Typography>
+                            )}
+                          </Box>
+                          <Box>
+                            <Typography
+                              variant="body2"
+                              sx={{ mb: { xs: 0.5, sm: 1 }, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
+                            >
+                              ROI
+                            </Typography>
+                            <Typography
+                              variant="h5"
+                              sx={{
+                                fontWeight: 700,
+                                fontSize: { xs: '1.125rem', sm: '1.5rem' },
+                                color:
+                                  event.roi >= 400
+                                    ? colors.mint
+                                    : event.roi >= 200
+                                      ? colors.orange
+                                      : colors.gray[500],
+                              }}
+                            >
+                              {event.roi}%
+                            </Typography>
+                          </Box>
+                        </Box>
+                      </Box>
+                    </CardContent>
+                  </Card>
+                ))}
+              </Box>
+            )}
+          </Box>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+              <Pagination
+                count={totalPages}
+                page={currentPage}
+                onChange={(_, page) => setCurrentPage(page)}
+                size="large"
+                sx={{
+                  '& .MuiPaginationItem-root': {
+                    color: colors.gray[700],
+                    fontWeight: 600,
+                    '&.Mui-selected': {
+                      background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
+                      color: 'white',
+                      '&:hover': {
+                        background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
+                      },
+                    },
+                    '&:hover': {
+                      bgcolor: colors.gray[100],
+                    },
+                  },
+                }}
+              />
+            </Box>
+          )}
+        </Container>
       </Box>
     </>
   );
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index a6888e0..dc04e81 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -88,14 +88,14 @@ export default function HomePage() {
           minHeight: '100vh',
         }}
       >
-        <Container maxWidth="lg" sx={{ pt: 8, pb: 6, px: { xs: 6, sm: 8, md: 10 } }}>
+        <Container maxWidth="lg" sx={{ pt: { xs: 4, sm: 8 }, pb: { xs: 4, sm: 6 }, px: { xs: 3, sm: 6, md: 10 } }}>
           {/* Welcome Section */}
-          <Box sx={{ mb: 10 }}>
+          <Box sx={{ mb: { xs: 5, sm: 10 } }}>
             <Typography
               variant="h3"
               sx={{
                 ...responsiveText.h2,
-                mb: 4,
+                mb: { xs: 2, sm: 4 },
               }}
             >
               안녕하세요, {mockUser.name}님! 👋
@@ -106,7 +106,7 @@ export default function HomePage() {
           </Box>
 
           {/* KPI Cards */}
-          <Grid container spacing={6} sx={{ mb: 10 }}>
+          <Grid container spacing={{ xs: 3, sm: 6 }} sx={{ mb: { xs: 5, sm: 10 } }}>
             <Grid item xs={12} sm={4}>
               <Card
                 elevation={0}
@@ -116,22 +116,22 @@ export default function HomePage() {
                   borderColor: 'transparent',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                   <Box
                     sx={{
-                      width: 64,
-                      height: 64,
+                      width: { xs: 48, sm: 64 },
+                      height: { xs: 48, sm: 64 },
                       borderRadius: '50%',
                       bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
                       margin: '0 auto',
-                      mb: 3,
+                      mb: { xs: 2, sm: 3 },
                     }}
                   >
                     <Celebration sx={{
-                      fontSize: 32,
+                      fontSize: { xs: 24, sm: 32 },
                       color: colors.gray[900],
                       filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                     }} />
@@ -139,10 +139,10 @@ export default function HomePage() {
                   <Typography
                     variant="body2"
                     sx={{
-                      mb: 1,
+                      mb: 0.5,
                       color: colors.gray[700],
                       fontWeight: 500,
-                      fontSize: '0.875rem',
+                      fontSize: { xs: '0.75rem', sm: '0.875rem' },
                       textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
@@ -153,7 +153,7 @@ export default function HomePage() {
                     sx={{
                       fontWeight: 700,
                       color: colors.gray[900],
-                      fontSize: '2.25rem',
+                      fontSize: { xs: '1.5rem', sm: '2.25rem' },
                       textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                     }}
                   >
@@ -171,22 +171,22 @@ export default function HomePage() {
                   borderColor: 'transparent',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                   <Box
                     sx={{
-                      width: 64,
-                      height: 64,
+                      width: { xs: 48, sm: 64 },
+                      height: { xs: 48, sm: 64 },
                       borderRadius: '50%',
                       bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
                       margin: '0 auto',
-                      mb: 3,
+                      mb: { xs: 2, sm: 3 },
                     }}
                   >
                     <Group sx={{
-                      fontSize: 32,
+                      fontSize: { xs: 24, sm: 32 },
                       color: colors.gray[900],
                       filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                     }} />
@@ -194,10 +194,10 @@ export default function HomePage() {
                   <Typography
                     variant="body2"
                     sx={{
-                      mb: 1,
+                      mb: 0.5,
                       color: colors.gray[700],
                       fontWeight: 500,
-                      fontSize: '0.875rem',
+                      fontSize: { xs: '0.75rem', sm: '0.875rem' },
                       textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
@@ -208,7 +208,7 @@ export default function HomePage() {
                     sx={{
                       fontWeight: 700,
                       color: colors.gray[900],
-                      fontSize: '2.25rem',
+                      fontSize: { xs: '1.5rem', sm: '2.25rem' },
                       textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                     }}
                   >
@@ -226,22 +226,22 @@ export default function HomePage() {
                   borderColor: 'transparent',
                 }}
               >
-                <CardContent sx={{ textAlign: 'center', py: 6, px: 4 }}>
+                <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 }, px: { xs: 2, sm: 4 } }}>
                   <Box
                     sx={{
-                      width: 64,
-                      height: 64,
+                      width: { xs: 48, sm: 64 },
+                      height: { xs: 48, sm: 64 },
                       borderRadius: '50%',
                       bgcolor: 'rgba(0, 0, 0, 0.05)',
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
                       margin: '0 auto',
-                      mb: 3,
+                      mb: { xs: 2, sm: 3 },
                     }}
                   >
                     <TrendingUp sx={{
-                      fontSize: 32,
+                      fontSize: { xs: 24, sm: 32 },
                       color: colors.gray[900],
                       filter: 'drop-shadow(0px 2px 4px rgba(0,0,0,0.2))',
                     }} />
@@ -249,10 +249,10 @@ export default function HomePage() {
                   <Typography
                     variant="body2"
                     sx={{
-                      mb: 1,
+                      mb: 0.5,
                       color: colors.gray[700],
                       fontWeight: 500,
-                      fontSize: '0.875rem',
+                      fontSize: { xs: '0.75rem', sm: '0.875rem' },
                       textShadow: '0px 1px 2px rgba(0,0,0,0.1)',
                     }}
                   >
@@ -263,7 +263,7 @@ export default function HomePage() {
                     sx={{
                       fontWeight: 700,
                       color: colors.gray[900],
-                      fontSize: '2.25rem',
+                      fontSize: { xs: '1.5rem', sm: '2.25rem' },
                       textShadow: '0px 2px 4px rgba(0,0,0,0.15)',
                     }}
                   >
@@ -275,11 +275,11 @@ export default function HomePage() {
           </Grid>
 
           {/* Quick Actions */}
-          <Box sx={{ mb: 10 }}>
-            <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
+          <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+            <Typography variant="h5" sx={{ ...responsiveText.h3, mb: { xs: 3, sm: 6 } }}>
               빠른 시작
             </Typography>
-            <Grid container spacing={6}>
+            <Grid container spacing={{ xs: 3, sm: 6 }}>
               <Grid item xs={6} sm={6}>
                 <Card
                   elevation={0}
@@ -288,24 +288,24 @@ export default function HomePage() {
                   }}
                   onClick={handleCreateEvent}
                 >
-                  <CardContent sx={{ textAlign: 'center', py: 6 }}>
+                  <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 } }}>
                     <Box
                       sx={{
-                        width: 72,
-                        height: 72,
-                        borderRadius: '20px',
+                        width: { xs: 56, sm: 72 },
+                        height: { xs: 56, sm: 72 },
+                        borderRadius: { xs: '16px', sm: '20px' },
                         background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         margin: '0 auto',
-                        mb: 3,
+                        mb: { xs: 2, sm: 3 },
                         boxShadow: '0 4px 14px 0 rgba(167, 139, 250, 0.39)',
                       }}
                     >
-                      <Add sx={{ fontSize: 36, color: 'white' }} />
+                      <Add sx={{ fontSize: { xs: 28, sm: 36 }, color: 'white' }} />
                     </Box>
-                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
+                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
                       새 이벤트
                     </Typography>
                   </CardContent>
@@ -319,24 +319,24 @@ export default function HomePage() {
                   }}
                   onClick={handleViewAnalytics}
                 >
-                  <CardContent sx={{ textAlign: 'center', py: 6 }}>
+                  <CardContent sx={{ textAlign: 'center', py: { xs: 4, sm: 6 } }}>
                     <Box
                       sx={{
-                        width: 72,
-                        height: 72,
-                        borderRadius: '20px',
+                        width: { xs: 56, sm: 72 },
+                        height: { xs: 56, sm: 72 },
+                        borderRadius: { xs: '16px', sm: '20px' },
                         background: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
                         margin: '0 auto',
-                        mb: 3,
+                        mb: { xs: 2, sm: 3 },
                         boxShadow: '0 4px 14px 0 rgba(96, 165, 250, 0.39)',
                       }}
                     >
-                      <Analytics sx={{ fontSize: 36, color: 'white' }} />
+                      <Analytics sx={{ fontSize: { xs: 28, sm: 36 }, color: 'white' }} />
                     </Box>
-                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: '1.125rem' }}>
+                    <Typography variant="body1" sx={{ fontWeight: 600, color: colors.gray[900], fontSize: { xs: '0.875rem', sm: '1.125rem' } }}>
                       성과분석
                     </Typography>
                   </CardContent>
@@ -346,20 +346,21 @@ export default function HomePage() {
           </Box>
 
           {/* Active Events */}
-          <Box sx={{ mb: 10 }}>
+          <Box sx={{ mb: { xs: 5, sm: 10 } }}>
             <Box
-              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 6 }}
+              sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: { xs: 3, sm: 6 } }}
             >
               <Typography variant="h5" sx={{ ...responsiveText.h3 }}>
                 진행 중인 이벤트
               </Typography>
               <Button
-                size="medium"
-                endIcon={<span className="material-icons">chevron_right</span>}
+                size="small"
+                endIcon={<span className="material-icons" style={{ fontSize: '18px' }}>chevron_right</span>}
                 onClick={() => router.push('/events')}
                 sx={{
                   color: colors.purple,
                   fontWeight: 600,
+                  fontSize: { xs: '0.8125rem', sm: '0.875rem' },
                   '&:hover': { bgcolor: 'rgba(167, 139, 250, 0.08)' },
                 }}
               >
@@ -402,7 +403,7 @@ export default function HomePage() {
                 </CardContent>
               </Card>
             ) : (
-              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: { xs: 3, sm: 6 } }}>
                 {activeEvents.map((event) => (
                   <Card
                     key={event.id}
@@ -412,27 +413,29 @@ export default function HomePage() {
                     }}
                     onClick={() => handleEventClick(event.id)}
                   >
-                    <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+                    <CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
                       <Box
                         sx={{
                           display: 'flex',
                           justifyContent: 'space-between',
                           alignItems: 'start',
-                          mb: 6,
+                          mb: { xs: 3, sm: 6 },
+                          gap: 2,
                         }}
                       >
-                        <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900] }}>
+                        <Typography variant="h6" sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1rem', sm: '1.25rem' } }}>
                           {event.title}
                         </Typography>
                         <Box
                           sx={{
-                            px: 2.5,
+                            px: { xs: 2, sm: 2.5 },
                             py: 0.75,
                             bgcolor: colors.mint,
                             color: 'white',
                             borderRadius: 2,
-                            fontSize: '0.875rem',
+                            fontSize: { xs: '0.75rem', sm: '0.875rem' },
                             fontWeight: 600,
+                            flexShrink: 0,
                           }}
                         >
                           {event.status}
@@ -441,11 +444,12 @@ export default function HomePage() {
                       <Typography
                         variant="body2"
                         sx={{
-                          mb: 6,
+                          mb: { xs: 3, sm: 6 },
                           color: colors.gray[600],
                           display: 'flex',
                           alignItems: 'center',
-                          gap: 2,
+                          gap: 1,
+                          fontSize: { xs: '0.75rem', sm: '0.875rem' },
                         }}
                       >
                         <span>📅</span>
@@ -453,23 +457,23 @@ export default function HomePage() {
                           {event.startDate} ~ {event.endDate}
                         </span>
                       </Typography>
-                      <Box sx={{ display: 'flex', gap: 12 }}>
+                      <Box sx={{ display: 'flex', gap: { xs: 6, sm: 12 } }}>
                         <Box>
                           <Typography
                             variant="body2"
-                            sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
+                            sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                           >
                             참여자
                           </Typography>
                           <Typography
                             variant="h5"
-                            sx={{ fontWeight: 700, color: colors.gray[900] }}
+                            sx={{ fontWeight: 700, color: colors.gray[900], fontSize: { xs: '1.125rem', sm: '1.5rem' } }}
                           >
                             {event.participants.toLocaleString()}
                             <Typography
                               component="span"
                               variant="body2"
-                              sx={{ ml: 0.5, color: colors.gray[600] }}
+                              sx={{ ml: 0.5, color: colors.gray[600], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                             >
                               명
                             </Typography>
@@ -478,11 +482,11 @@ export default function HomePage() {
                         <Box>
                           <Typography
                             variant="body2"
-                            sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500 }}
+                            sx={{ mb: 0.5, color: colors.gray[600], fontWeight: 500, fontSize: { xs: '0.75rem', sm: '0.875rem' } }}
                           >
                             ROI
                           </Typography>
-                          <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint }}>
+                          <Typography variant="h5" sx={{ fontWeight: 700, color: colors.mint, fontSize: { xs: '1.125rem', sm: '1.5rem' } }}>
                             {event.roi}%
                           </Typography>
                         </Box>
@@ -495,8 +499,8 @@ export default function HomePage() {
           </Box>
 
           {/* Recent Activity */}
-          <Box sx={{ mb: 10 }}>
-            <Typography variant="h5" sx={{ ...responsiveText.h3, mb: 6 }}>
+          <Box sx={{ mb: { xs: 5, sm: 10 } }}>
+            <Typography variant="h5" sx={{ ...responsiveText.h3, mb: { xs: 3, sm: 6 } }}>
               최근 활동
             </Typography>
             <Card
@@ -505,24 +509,24 @@ export default function HomePage() {
                 ...cardStyles.default,
               }}
             >
-              <CardContent sx={{ p: { xs: 6, sm: 8 } }}>
+              <CardContent sx={{ p: { xs: 4, sm: 6, md: 8 } }}>
                 {mockActivities.map((activity, index) => (
                   <Box
                     key={index}
                     sx={{
                       display: 'flex',
-                      gap: 4,
-                      pt: index > 0 ? 6 : 0,
-                      mt: index > 0 ? 6 : 0,
+                      gap: { xs: 2, sm: 4 },
+                      pt: index > 0 ? { xs: 3, sm: 6 } : 0,
+                      mt: index > 0 ? { xs: 3, sm: 6 } : 0,
                       borderTop: index > 0 ? 1 : 0,
                       borderColor: colors.gray[200],
                     }}
                   >
                     <Box
                       sx={{
-                        width: 48,
-                        height: 48,
-                        borderRadius: '14px',
+                        width: { xs: 40, sm: 48 },
+                        height: { xs: 40, sm: 48 },
+                        borderRadius: { xs: '12px', sm: '14px' },
                         background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.purpleLight} 100%)`,
                         display: 'flex',
                         alignItems: 'center',
@@ -530,16 +534,16 @@ export default function HomePage() {
                         flexShrink: 0,
                       }}
                     >
-                      <activity.icon sx={{ fontSize: 24, color: 'white' }} />
+                      <activity.icon sx={{ fontSize: { xs: 20, sm: 24 }, color: 'white' }} />
                     </Box>
-                    <Box sx={{ flex: 1 }}>
+                    <Box sx={{ flex: 1, minWidth: 0 }}>
                       <Typography
                         variant="body1"
-                        sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5 }}
+                        sx={{ fontWeight: 600, color: colors.gray[900], mb: 0.5, fontSize: { xs: '0.8125rem', sm: '1rem' } }}
                       >
                         {activity.text}
                       </Typography>
-                      <Typography variant="body2" sx={{ color: colors.gray[500] }}>
+                      <Typography variant="body2" sx={{ color: colors.gray[500], fontSize: { xs: '0.75rem', sm: '0.875rem' } }}>
                         {activity.time}
                       </Typography>
                     </Box>
@@ -554,10 +558,10 @@ export default function HomePage() {
         <Fab
           sx={{
             position: 'fixed',
-            bottom: { xs: 80, sm: 90 },
-            right: { xs: 20, sm: 32 },
-            width: { xs: 64, sm: 72 },
-            height: { xs: 64, sm: 72 },
+            bottom: { xs: 72, sm: 90 },
+            right: { xs: 16, sm: 32 },
+            width: { xs: 56, sm: 72 },
+            height: { xs: 56, sm: 72 },
             ...getGradientButtonStyle('primary'),
             boxShadow:
               '0 10px 25px -5px rgba(167, 139, 250, 0.5), 0 8px 10px -6px rgba(167, 139, 250, 0.5)',
@@ -568,7 +572,7 @@ export default function HomePage() {
           }}
           onClick={handleCreateEvent}
         >
-          <Add sx={{ color: 'white', fontSize: { xs: 28, sm: 32 } }} />
+          <Add sx={{ color: 'white', fontSize: { xs: 24, sm: 32 } }} />
         </Fab>
       </Box>
     </>
diff --git a/src/shared/lib/button-styles.ts b/src/shared/lib/button-styles.ts
index c95443a..1ebf70d 100644
--- a/src/shared/lib/button-styles.ts
+++ b/src/shared/lib/button-styles.ts
@@ -118,39 +118,57 @@ export const containerStyles = {
   },
 };
 
-// 공통 반응형 텍스트 스타일
+// 공통 반응형 텍스트 스타일 (모바일 최적화)
 export const responsiveText = {
   h1: {
-    fontSize: { xs: '1.875rem', sm: '2.25rem', md: '3rem' },
+    fontSize: { xs: '1.5rem', sm: '2.25rem', md: '3rem' }, // 모바일 30px → 24px
     fontWeight: 700,
     color: colors.gray[900],
     letterSpacing: '-0.025em',
   },
   h2: {
-    fontSize: { xs: '1.5rem', sm: '1.875rem', md: '2.25rem' },
+    fontSize: { xs: '1.25rem', sm: '1.875rem', md: '2.25rem' }, // 모바일 24px → 20px
     fontWeight: 700,
     color: colors.gray[900],
     letterSpacing: '-0.025em',
   },
   h3: {
-    fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.875rem' },
+    fontSize: { xs: '1.125rem', sm: '1.5rem', md: '1.875rem' }, // 모바일 20px → 18px
     fontWeight: 600,
     color: colors.gray[900],
     letterSpacing: '-0.025em',
   },
   h4: {
-    fontSize: { xs: '1.125rem', sm: '1.25rem', md: '1.5rem' },
+    fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' }, // 모바일 18px → 16px
     fontWeight: 600,
     color: colors.gray[800],
   },
   body1: {
-    fontSize: { xs: '0.875rem', sm: '1rem' },
+    fontSize: { xs: '0.8125rem', sm: '1rem' }, // 모바일 14px → 13px
     color: colors.gray[700],
-    lineHeight: 1.6,
-  },
-  body2: {
-    fontSize: { xs: '0.8125rem', sm: '0.875rem' },
-    color: colors.gray[600],
     lineHeight: 1.5,
   },
+  body2: {
+    fontSize: { xs: '0.75rem', sm: '0.875rem' }, // 모바일 13px → 12px
+    color: colors.gray[600],
+    lineHeight: 1.4,
+  },
+};
+
+// 모바일 최적화 간격 (px 단위, MUI sx에서 사용)
+export const spacing = {
+  mobile: {
+    xs: 2,   // 8px
+    sm: 3,   // 12px
+    md: 4,   // 16px
+    lg: 5,   // 20px
+    xl: 6,   // 24px
+  },
+  desktop: {
+    xs: 4,   // 16px
+    sm: 6,   // 24px
+    md: 8,   // 32px
+    lg: 10,  // 40px
+    xl: 12,  // 48px
+  },
 };