Display remaining budget

Replaced savings with remaining budget and indicated budget overruns.

src/components/analytics/SummaryCards.tsx

@@ -17,6 +17,10 @@ const SummaryCards: React.FC<SummaryCardsProps> = ({
 }) => {
   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`}>
       <div className="neuro-card w-full">
@@ -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">
-          {savingsPercentage}%
-        </p>
+        {isOverBudget ? (
+          <p className="text-sm font-bold text-red-500">
+            예산 초과: {formatCurrency(Math.abs(remainingBudget))}
+          </p>
+        ) : (
+          <p className="text-sm font-bold text-neuro-income">
+            {formatCurrency(remainingBudget)}
+          </p>
+        )}
       </div>
     </div>
   );