Display remaining budget

Replaced savings with remaining budget and indicated budget overruns.

src/components/analytics/SummaryCards.tsx

@@ -16,6 +16,10 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
   savingsPercentage
 }) => {
   const isMobile = useIsMobile();
+  
+  // 남은 예산 계산
+  const remainingBudget = totalBudget - totalExpense;
+  const isOverBudget = remainingBudget < 0;
 
   return (
     <div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-3'} gap-3 mb-8 w-full desktop-card`}>
@@ -40,11 +44,17 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
       <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>
+          <p className="text-gray-500 text-base">남은 예산</p>
         </div>
-        <p className="text-sm font-bold text-neuro-income">
+        {isOverBudget ? (
-          {savingsPercentage}%
+          <p className="text-sm font-bold text-red-500">
-        </p>
+            예산 초과: {formatCurrency(Math.abs(remainingBudget))}
+          </p>
+        ) : (
+          <p className="text-sm font-bold text-neuro-income">
+            {formatCurrency(remainingBudget)}
+          </p>
+        )}
       </div>
     </div>
   );