Adjust card width for mobile

Adjust card width to fit mobile screens.

src/components/analytics/PeriodSelector.tsx

@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface PeriodSelectorProps {
   selectedPeriod: string;
@@ -13,8 +14,10 @@ const PeriodSelector: React.FC<PeriodSelectorProps> = ({
   onPrevPeriod,
   onNextPeriod
 }) => {
+  const isMobile = useIsMobile();
+
   return (
-    <div className="flex items-center justify-between mb-6">
+    <div className={`flex items-center justify-between mb-6 ${isMobile ? 'w-full' : ''}`}>
       <button 
         className="neuro-flat p-2 rounded-full"
         onClick={onPrevPeriod}

src/components/analytics/SummaryCards.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Wallet, CreditCard, PiggyBank } from 'lucide-react';
 import { formatCurrency } from '@/utils/formatters';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 interface SummaryCardsProps {
   totalBudget: number;
@@ -14,9 +15,11 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   totalExpense,
   savingsPercentage
 }) => {
+  const isMobile = useIsMobile();
+
   return (
-    <div className="grid grid-cols-3 gap-3 mb-8">
-      <div className="neuro-card">
+    <div className={`grid ${isMobile ? 'grid-cols-1 gap-3' : 'grid-cols-3 gap-3'} mb-8`}>
+      <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <Wallet size={24} className="text-gray-500" />
           <p className="text-gray-500 text-base">예산</p>
@@ -25,7 +28,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
           {formatCurrency(totalBudget)}
         </p>
       </div>
-      <div className="neuro-card">
+      <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <CreditCard size={24} className="text-gray-500" />
           <p className="text-gray-500 font-medium text-base">지출</p>
@@ -34,7 +37,7 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
           {formatCurrency(totalExpense)}
         </p>
       </div>
-      <div className="neuro-card">
+      <div className="neuro-card w-full">
         <div className="flex items-center gap-2 mb-1 py-[5px]">
           <PiggyBank size={24} className="text-gray-500" />
           <p className="text-gray-500 text-base">저축</p>

src/pages/Analytics.tsx

@@ -110,13 +110,15 @@ const Analytics = () => {
         
         {/* Category Pie Chart */}
         <h2 className="text-lg font-semibold mb-3">카테고리별 지출</h2>
-        {expenseData.some(item => item.value > 0) ? (
-          <ExpenseChart data={expenseData} />
-        ) : (
-          <div className="neuro-card h-52 flex items-center justify-center text-gray-400">
-            <p>데이터가 없습니다</p>
-          </div>
-        )}
+        <div className="w-full">
+          {expenseData.some(item => item.value > 0) ? (
+            <ExpenseChart data={expenseData} />
+          ) : (
+            <div className="neuro-card h-52 w-full flex items-center justify-center text-gray-400">
+              <p>데이터가 없습니다</p>
+            </div>
+          )}
+        </div>
         
         {/* Top Spending Categories */}
         <h2 className="text-lg font-semibold mb-3 mt-6">주요 지출 카테고리</h2>