refactor(stats): 예산·수입 대비 지출을 '이번 달 현황' 단일 패널로 통합

두 패널을 하나로 합쳐 지출 중복 표기 제거·화면 밀도 완화(도넛+수입/지출 좌우 배치, 모바일 세로).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/views/account/AccountDashboardView.vue

@@ -382,10 +382,11 @@ onMounted(async () => {
         </template>
       </div>
 
-      <!-- 상단: 예산 대비 지출(도넛) + 수입 대비 지출 -->
-      <div class="top-grid">
-        <div class="panel donut-panel">
-          <h2>예산 대비 지출</h2>
+      <!-- 이번 달 현황 (예산 도넛 + 수입/지출 통합) -->
+      <div class="panel month-overview">
+        <h2>이번 달 현황</h2>
+        <div class="mo-grid">
+          <div class="mo-budget">
           <div v-if="budgetTotal > 0" class="donut-wrap">
             <svg viewBox="0 0 120 120" class="donut">
               <circle cx="60" cy="60" :r="R" fill="none" stroke="var(--color-background-mute)" stroke-width="14" />
@@ -407,8 +408,6 @@ onMounted(async () => {
           <p v-else class="empty">설정된 예산이 없습니다.</p>
           </div>
 
-        <div class="panel">
-          <h2>수입 대비 지출</h2>
           <div class="ie">
             <div class="ie-row"><span>수입</span><b class="income">{{ won(monthIncome) }}</b></div>
             <div class="ie-row"><span>지출</span><b class="expense">{{ won(monthExpense) }}</b></div>
@@ -652,6 +651,26 @@ h2 {
 .top-grid .panel {
   margin-bottom: 1rem;
 }
+/* 이번 달 현황: 예산 도넛 + 수입/지출을 한 패널에 좌우로 */
+.month-overview .mo-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem 1.5rem;
+  align-items: center;
+}
+.mo-budget {
+  min-width: 0;
+}
+@media (max-width: 700px) {
+  .month-overview .mo-grid {
+    grid-template-columns: 1fr;
+    gap: 0.9rem;
+  }
+  .mo-budget {
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 0.9rem;
+  }
+}
 .donut-wrap {
   display: flex;
   align-items: center;