src/components/common/input/CalcInput.jsx

@@ -361,6 +361,13 @@ export const CalculatorInput = ({ value, onChange, label, options = {}, id, clas
               ÷
             </button>
 
+            {/* 숫자 버튼 */}
+            {[7, 8, 9, 4, 5, 6, 1, 2, 3].map((num) => (
+              <button key={num} onClick={() => handleNumber(num)} className="btn-number">
+                {num}
+              </button>
+            ))}
+
             <button onClick={() => handleOperation('×')} className="btn-operator">
               ×
             </button>
@@ -371,12 +378,6 @@ export const CalculatorInput = ({ value, onChange, label, options = {}, id, clas
               +
             </button>
 
-            {/* 숫자 버튼 */}
-            {[1,2,3,4,5,6,7,8,9].map((num) => (
-              <button key={num} onClick={() => handleNumber(num)} className="btn-number">
-                {num}
-              </button>
-            ))}
             {/* 0 버튼 */}
             <button onClick={() => handleNumber('0')} className="btn-number btn-zero">
               0

src/styles/calc.scss

@@ -112,24 +112,23 @@ $colors: (
       }
 
       .btn-delete {
+        background-color: map-get($colors, 'dark-500');
+
+        &:hover {
+          background-color: map-get($colors, 'dark-300');
+        }
+      }
+
+      .btn-equals {
         background-color: map-get($colors, 'primary');
-        grid-column: span 2;
 
         &:hover {
           background-color: map-get($colors, 'primary-dark');
         }
       }
 
-      .btn-equals {
-        background-color: map-get($colors, 'warning');
-
-        &:hover {
-          background-color: map-get($colors, 'warning-dark');
-        }
-      }
-
       .btn-zero {
-        grid-column: span 1;
+        grid-column: span 2;
       }
     }
   }