Display remaining budget in graph

Display the remaining budget amount in the expense graph section.

src/components/BudgetCategoriesSection.tsx

@@ -17,7 +17,12 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
   return <>
     <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
     <div className="neuro-card mb-8">
-      {categories.map((category, index) => (
+      {categories.map((category, index) => {
+        // 남은 예산 계산 (음수가 되지 않도록)
+        const remaining = Math.max(0, category.total - category.current);
+        const percentage = Math.min(Math.round((category.current / category.total) * 100), 100);
+        
+        return (
           <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
             <div className="flex items-center gap-2 mb-1">
               <div className="text-neuro-income">
@@ -34,17 +39,21 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
             <div className="relative h-3 neuro-pressed overflow-hidden">
               <div 
                 className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out bg-neuro-income`}
-              style={{ width: `${Math.min(Math.round((category.current / category.total) * 100), 100)}%` }}
+                style={{ width: `${percentage}%` }}
               />
             </div>
             
-          <div className="mt-2 flex justify-end">
+            <div className="mt-2 flex justify-between items-center">
+              <span className="text-xs text-neuro-income font-medium">
+                남은 예산: {formatCurrency(remaining)}
+              </span>
               <span className="text-xs font-medium text-gray-500">
-              {Math.min(Math.round((category.current / category.total) * 100), 100)}%
+                {percentage}%
               </span>
             </div>
           </div>
-      ))}
+        );
+      })}
     </div>
   </>;
 };