Enhance budget display and alerts

- Increase font size of "예산 목표 설정하기" text.
- Change budget bar color to yellow if remaining budget is less than 10%, and to red if over budget.
- Display "예산 초과" and the exceeded amount when the budget is exceeded.

src/components/BudgetCategoriesSection.tsx

@@ -18,9 +18,27 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
     <h2 className="text-lg font-semibold mb-3 mt-8">지출 그래프</h2>
     <div className="neuro-card mb-8">
       {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);
+        // 예산 초과 여부 확인
+        const isOverBudget = category.current > category.total && category.total > 0;
+        // 예산이 얼마 남지 않은 경우 (10% 미만)
+        const percentage = Math.min(Math.round((category.current / (category.total || 1)) * 100), 100);
+        const isLowBudget = category.total > 0 && percentage >= 90 && percentage < 100;
+        
+        // 프로그레스 바 색상 결정
+        const progressBarColor = isOverBudget 
+          ? 'bg-red-500' 
+          : isLowBudget 
+            ? 'bg-yellow-400' 
+            : 'bg-neuro-income';
+        
+        // 남은 예산 또는 초과 예산
+        const budgetStatusText = isOverBudget 
+          ? '예산 초과: ' 
+          : '남은 예산: ';
+        
+        const budgetAmount = isOverBudget 
+          ? Math.abs(category.total - category.current)
+          : Math.max(0, category.total - category.current);
         
         return (
           <div key={index} className={`${index !== 0 ? 'mt-4 pt-4 border-t border-gray-100' : ''}`}>
@@ -38,14 +56,14 @@ 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`}
+                className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
                 style={{ width: `${percentage}%` }}
               />
             </div>
             
             <div className="mt-2 flex justify-between items-center">
-              <span className="text-xs text-neuro-income font-medium">
-                남은 예산: {formatCurrency(remaining)}
+              <span className={`text-xs font-medium ${isOverBudget ? 'text-red-500' : 'text-neuro-income'}`}>
+                {budgetStatusText}{formatCurrency(budgetAmount)}
               </span>
               <span className="text-xs font-medium text-gray-500">
                 {percentage}%