style: 연도별 PC 노후도 예측 표의 왼편 여백 제거 및 레이아웃 정렬

src/views/Dashboard/HwDashboard.ts

@@ -18,7 +18,7 @@ export function renderHwDashboard(container: HTMLElement) {
 
   // 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
   container.innerHTML = `
-    <div class="view-container" style="overflow: hidden; padding: 1.5rem 2rem; background-color: #F8FAFC; height: calc(100vh - var(--header-height) - 28px); box-sizing: border-box; display: flex; flex-direction: column; gap: 1.25rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
+    <div class="view-container" style="overflow: hidden; padding: 0.75rem 1.5rem; background-color: #F8FAFC; height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.9rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
       
       <!-- 대시보드 타이틀 및 사용조직 필터 -->
       <div style="display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; padding-bottom: 0.75rem;">
@@ -44,13 +44,13 @@ export function renderHwDashboard(container: HTMLElement) {
       </div>
 
       <!-- 메인 2단 컬럼 레이아웃 (5:5 비율) -->
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; flex: 1; min-height: 0; margin-bottom: 0.25rem;">
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; flex: 1; min-height: 0; margin-bottom: 0.1rem;">
         
         <!-- 좌측 컬럼 (Left Column) -->
-        <div style="display: flex; flex-direction: column; gap: 1.25rem; min-height: 0;">
+        <div style="display: flex; flex-direction: column; gap: 0.7rem; min-height: 0;">
           
-          <!-- 상단 핵심 지표 그룹 카드 (1개 카드로 통합, 4개 지표 가로 배치) -->
-          <div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.85rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 0;">
+          <!-- 핵심 지표 카드 -->
+          <div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.55rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 0;">
             
             <!-- 1. 보유 자산 수량 -->
             <div style="flex: 1; border-right: 1px solid #EEF2F6; padding-right: 0.85rem;">
@@ -108,51 +108,38 @@ export function renderHwDashboard(container: HTMLElement) {
 
 
           <!-- PC 등급별 보유 현황 (등급별 게이지 + 우측 사양 적정성 도넛차트) -->
-          <div style="background: transparent; border-radius: 0; padding: 1.25rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; flex: 1.1; min-height: 0;">
+          <!-- 등급별 자산 종합 현황 (하나로 통합) -->
+          <div style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1.65fr 1fr; gap: 1.5rem; flex: 1.0; min-height: 0;">
             
-            <!-- 1열: 등급별 보유 현황 리스트 영역 -->
-            <div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: center; padding-left: 0.5rem;">
+            <!-- 1열: 등급별 보유 현황 및 종합 매트릭스 테이블 영역 -->
+            <div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: flex-start; padding-left: 0.5rem;">
               <!-- 메인 제목 -->
-              <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; height: 1.5rem;">
-                <span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">등급별 보유 현황</span>
+              <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.65rem; display: flex; align-items: center; line-height: 1; height: 1.5rem;">
+                <span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">등급별 자산 종합 현황</span>
               </div>
               
-              <!-- 등급 리스트 (바 그래프 제거 및 폰트 확대, 간격 조정) -->
-              <div style="display: flex; flex-direction: column; gap: 0.65rem; padding: 4px 0;">
-                <!-- 최상급 -->
-                <div id="grade-premium" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
-                  <div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
-                    <span style="color: #11302B; white-space: nowrap; width: 260px; display: inline-block;">최상급 PC (85점 이상)</span>
-                    <span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
-                  </div>
-                </div>
-                <!-- 상급 -->
-                <div id="grade-high" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
-                  <div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
-                    <span style="color: #1E8E7C; white-space: nowrap; width: 260px; display: inline-block;">상급 PC (70점 ~ 85점)</span>
-                    <span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
-                  </div>
-                </div>
-                <!-- 중급 -->
-                <div id="grade-normal" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
-                  <div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
-                    <span style="color: #10B981; white-space: nowrap; width: 260px; display: inline-block;">중급 PC (40점 ~ 70점)</span>
-                    <span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
-                  </div>
-                </div>
-                <!-- 보급 -->
-                <div id="grade-entry" style="cursor: pointer; display: flex; flex-direction: column; padding: 2px 0;">
-                  <div style="display: flex; align-items: center; gap: 0.75rem; font-size: 1.36rem; font-weight: 800;">
-                    <span style="color: #64748B; white-space: nowrap; width: 260px; display: inline-block;">보급 PC (40점 미만)</span>
-                    <span class="grade-info" style="color: #334155; display: flex; align-items: center; gap: 4px; white-space: nowrap;"><span class="grade-count">0대</span><span class="grade-rate" style="color:#64748B; font-size:1.21rem;">(0%)</span></span>
-                  </div>
-                </div>
+              <!-- 종합 매트릭스 테이블 -->
+              <div style="width: 100%; overflow-x: auto;">
+                <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.15rem;">
+                  <thead>
+                    <tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 800;">
+                      <th style="padding: 14px 4px; width: 32%;">구분 (등급)</th>
+                      <th style="padding: 14px 4px; text-align: center; width: 17%;">보유량</th>
+                      <th style="padding: 14px 4px; text-align: center; width: 17%;">할당량</th>
+                      <th style="padding: 14px 4px; text-align: center; width: 17%;">여분</th>
+                      <th style="padding: 14px 4px; text-align: center; width: 17%; color: #EF4444;">부족분</th>
+                    </tr>
+                  </thead>
+                  <tbody id="pc-grade-matrix-tbody">
+                    <!-- Dynamic Matrix Contents -->
+                  </tbody>
+                </table>
               </div>
             </div>
             
             <!-- 2열: 등급별 보유 비율 도넛 영역 -->
-            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;">
-              <!-- 서브 제목 (메인 제목과 수평 정렬을 맞추고, 중간정렬을 위해 text-align: center) -->
+            <div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.8rem; padding-top: 0.5rem;">
+              <!-- 서브 제목 -->
               <div style="margin-bottom: 0.35rem; display: flex; align-items: center; justify-content: center; line-height: 1; height: 1.5rem;">
                 <span style="font-size: 1.06rem; font-weight: 800; color: #475569; text-transform: uppercase;">등급별 보유 비율</span>
               </div>
@@ -163,7 +150,7 @@ export function renderHwDashboard(container: HTMLElement) {
                   <canvas id="chart-overall-donut"></canvas>
                 </div>
                 <!-- 커스텀 범례 -->
-                <div style="display: flex; gap: 0.65rem; justify-content: center; align-items: center; margin-top: 4px; font-size: 1.01rem; font-weight: 700; color: #475569;">
+                <div style="display: flex; gap: 0.65rem; justify-content: center; align-items: center; margin-top: 8px; font-size: 1.15rem; font-weight: 700; color: #475569;">
                   <div style="display: flex; align-items: center; gap: 4px;">
                     <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #11302B;"></span>
                     <span>최상급</span>
@@ -185,48 +172,14 @@ export function renderHwDashboard(container: HTMLElement) {
             </div>
             
           </div>
-
-          <!-- 유효 재고 현황 -->
-          <div style="background: transparent; border-radius: 0; padding: 1.25rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; gap: 0.8rem; flex: 0.9; min-height: 0;">
-            <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1;">
-              <span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">유효 재고 현황</span>
-            </div>
-            
-            <div style="display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0.5rem; flex: 1; align-items: center;">
-              <!-- 좌측 열 (최상급 재고, 중급 재고) -->
-              <div style="display: flex; flex-direction: column; gap: 1rem; width: 100%;">
-                <div id="stock-premium-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-                  <div class="summary-grade-stock-premium" style="font-size: 2.01rem; font-weight: 900; color: #11302B; line-height: 1; margin-bottom: 0.25rem;">0대</div>
-                  <span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">최상급 재고</span>
-                </div>
-                <div id="stock-normal-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-                  <div class="summary-grade-stock-normal" style="font-size: 2.01rem; font-weight: 900; color: #10B981; line-height: 1; margin-bottom: 0.25rem;">0대</div>
-                  <span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">중급 재고</span>
-                </div>
-              </div>
-              <!-- 중앙 세로선 -->
-              <div style="width: 1px; height: 80%; background-color: #EEF2F6; align-self: center;"></div>
-              <!-- 우측 열 (상급 재고, 보급 재고) -->
-              <div style="display: flex; flex-direction: column; gap: 1rem; width: 100%;">
-                <div id="stock-high-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-                  <div class="summary-grade-stock-high" style="font-size: 2.01rem; font-weight: 900; color: #1E8E7C; line-height: 1; margin-bottom: 0.25rem;">0대</div>
-                  <span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">상급 재고</span>
-                </div>
-                <div id="stock-entry-card" style="text-align: center; width: 100%; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
-                  <div class="summary-grade-stock-entry" style="font-size: 2.01rem; font-weight: 900; color: #94A3B8; line-height: 1; margin-bottom: 0.25rem;">0대</div>
-                  <span style="font-size: 1.03rem; color: #64748B; font-weight: 700;">보급 재고</span>
-                </div>
-              </div>
-            </div>
-          </div>
           
         </div>
 
         <!-- 우측 컬럼 (Right Column) -->
-        <div style="display: flex; flex-direction: column; gap: 1.25rem; min-height: 0;">
+        <div style="display: flex; flex-direction: column; gap: 0.9rem; min-height: 0;">
           
           <!-- 직무별 사양 적정성 분석 차트 카드 -->
-          <div style="background: transparent; border-radius: 0; padding: 1.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.1; min-height: 0;">
+          <div style="background: transparent; border-radius: 0; padding: 0.85rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.1; min-height: 0;">
             <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.9rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
               <span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">직무별 사양 적정성 분석</span>
             </div>
@@ -236,15 +189,15 @@ export function renderHwDashboard(container: HTMLElement) {
           </div>
           
           <!-- 연도별 PC 노후도 및 교체 주기 예측 카드 -->
-          <div style="background: transparent; border-radius: 0; padding: 1.5rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 0.9; min-height: 0;">
+          <div style="background: transparent; border-radius: 0; padding: 0.85rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 0.9; min-height: 0;">
             <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.9rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
-              <span style="font-size: 1.11rem; font-weight: 800; color: #1E293B;">연도별 PC 노후도 및 교체 주기 예측</span>
+              <span style="font-size: 1.15rem; font-weight: 800; color: #1E293B;">연도별 PC 노후도 및 교체 주기 예측</span>
             </div>
-            <div style="flex: 1; overflow: hidden; min-height: 0;">
-              <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.11rem;">
+            <div style="flex: 1; overflow: hidden; min-height: 0; padding-left: 12px;">
+              <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.15rem;">
                 <thead style="position: sticky; top: 0; background: white; z-index: 5;">
                   <tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 800;">
-                    <th style="padding: 10px 4px; width: 50%;">구분 (사용 연한)</th>
+                    <th style="padding: 10px 4px 10px 0; width: 50%;">구분 (사용 연한)</th>
                     <th style="padding: 10px 4px; width: 25%; text-align: center;">보유 대수</th>
                     <th style="padding: 10px 4px; width: 25%; text-align: center;">권장 조치</th>
                   </tr>
@@ -319,18 +272,18 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     jobScores[job].avg = jobScores[job].count > 0 ? jobScores[job].totalScore / jobScores[job].count : 0;
   });
 
-  // 4. 등급 집계 (보유량 vs 유효 재고량)
+  // 4. 등급 집계 (보유량 vs 실제 할당량 vs 유효 재고량 vs 사양 부족량)
   const isStock = (p: any) => {
     return p.hw_status === '재고' || 
            p.hw_status === '대기' || 
            !(p.user_current || '').trim();
   };
 
-  const gradeCounts = {
-    premium: { total: 0, stock: 0 },
-    high: { total: 0, stock: 0 },
-    normal: { total: 0, stock: 0 },
-    entry: { total: 0, stock: 0 }
+  const matrix = {
+    premium: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
+    high: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
+    normal: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] },
+    entry: { total: 0, active: 0, stock: 0, under: 0, pcs: [] as any[], activePcs: [] as any[], stockPcs: [] as any[], underPcs: [] as any[] }
   };
 
   let scoreSum = 0;
@@ -344,35 +297,45 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     scoreSum += score;
     const stockYn = isStock(p);
 
+    let target: typeof matrix.premium;
     if (score >= 85) {
-      gradeCounts.premium.total++;
-      if (stockYn) gradeCounts.premium.stock++;
+      target = matrix.premium;
     } else if (score >= 70) {
-      gradeCounts.high.total++;
-      if (stockYn) gradeCounts.high.stock++;
+      target = matrix.high;
     } else if (score >= 40) {
-      gradeCounts.normal.total++;
-      if (stockYn) gradeCounts.normal.stock++;
+      target = matrix.normal;
     } else {
-      gradeCounts.entry.total++;
-      if (stockYn) gradeCounts.entry.stock++;
+      target = matrix.entry;
     }
 
-    // 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
-    const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
-    const avg = jobScores[job]?.avg || 0;
+    target.pcs.push(p);
+    target.total++;
 
-    if (avg > 0 && job !== '재고PC' && !stockYn) {
-      if (score < avg * 0.6) {
-        p._spec_status = '사양 부족';
-        criticalList.push(p);
-        underSpecCount++;
-      } else if (score > avg * 1.5) {
-        p._spec_status = '오버스펙';
-        criticalList.push(p);
-        overSpecCount++;
-      } else {
-        p._spec_status = '적정';
+    if (stockYn) {
+      target.stock++;
+      target.stockPcs.push(p);
+    } else {
+      target.active++;
+      target.activePcs.push(p);
+
+      // 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
+      const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+      const avg = jobScores[job]?.avg || 0;
+
+      if (avg > 0 && job !== '재고PC') {
+        if (score < avg * 0.6) {
+          p._spec_status = '사양 부족';
+          criticalList.push(p);
+          underSpecCount++;
+          target.under++;
+          target.underPcs.push(p);
+        } else if (score > avg * 1.5) {
+          p._spec_status = '오버스펙';
+          criticalList.push(p);
+          overSpecCount++;
+        } else {
+          p._spec_status = '적정';
+        }
       }
     }
 
@@ -382,39 +345,107 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     }
   });
 
-  // 5. 핵심 텍스트형 지표 갱신
+  // 5. 핵심 텍스트형 요약 지표 갱신
   document.getElementById('metric-total-pcs')!.textContent = `${filtered.length}대`;
   document.getElementById('metric-under-spec')!.textContent = `${underSpecCount}명`;
   document.getElementById('metric-over-spec')!.textContent = `${overSpecCount}명`;
   document.getElementById('metric-win11-incompatible')!.textContent = `${win11IncompatibleCount}대`;
 
-
-  // 6. 등급별 리스트 데이터 바 업데이트
-  const total = filtered.length || 1;
+  // 6. 종합 매트릭스 테이블 렌더링 및 바인딩
+  const matrixTbody = document.getElementById('pc-grade-matrix-tbody')!;
   
-  const updateCard = (id: string, counts: { total: number; stock: number }) => {
-    const card = document.getElementById(id)!;
-    const rate = Math.round((counts.total / total) * 100);
+  const renderMatrixRow = (gradeKey: keyof typeof matrix, label: string, color: string) => {
+    const data = matrix[gradeKey];
+    const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
     
-    card.querySelector('.grade-count')!.textContent = `${counts.total}대`;
-    card.querySelector('.grade-rate')!.textContent = `(${rate}%)`;
+    const cellStyle = `padding: 9px 4px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s;`;
+    const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
+    
+    return `
+      <tr style="border-bottom: 1px solid #F1F5F9;">
+        <td style="padding: 9px 4px; font-weight: 800; color: ${color};">${label}</td>
+        <td class="matrix-cell" data-grade="${gradeKey}" data-type="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:1.0rem; color:#64748B; font-weight:500;">(${totalRate}%)</span></td>
+        <td class="matrix-cell" data-grade="${gradeKey}" data-type="active" style="${cellStyle}" ${hoverEvents}>${data.active}대</td>
+        <td class="matrix-cell" data-grade="${gradeKey}" data-type="stock" style="${cellStyle}" ${hoverEvents}>${data.stock}대</td>
+        <td class="matrix-cell" data-grade="${gradeKey}" data-type="under" style="${cellStyle} color: #EF4444;" ${hoverEvents}>${data.under}대</td>
+      </tr>
+    `;
   };
 
-  updateCard('grade-premium', gradeCounts.premium);
-  updateCard('grade-high', gradeCounts.high);
-  updateCard('grade-normal', gradeCounts.normal);
-  updateCard('grade-entry', gradeCounts.entry);
+  const totalPcs = filtered.length;
+  const totalActive = matrix.premium.active + matrix.high.active + matrix.normal.active + matrix.entry.active;
+  const totalStock = matrix.premium.stock + matrix.high.stock + matrix.normal.stock + matrix.entry.stock;
+  const totalUnder = matrix.premium.under + matrix.high.under + matrix.normal.under + matrix.entry.under;
 
-  // 6.2 Inventory Summary 수치 업데이트 (골드/민트 텍스트 영역)
-  const container = document.getElementById('view-body')?.parentElement || document.body;
-  const setStockVal = (cls: string, val: number) => {
-    const el = container.querySelector(`.${cls}`);
-    if (el) el.textContent = `${val}대`;
-  };
-  setStockVal('summary-grade-stock-premium', gradeCounts.premium.stock);
-  setStockVal('summary-grade-stock-high', gradeCounts.high.stock);
-  setStockVal('summary-grade-stock-normal', gradeCounts.normal.stock);
-  setStockVal('summary-grade-stock-entry', gradeCounts.entry.stock);
+  const cellStyleHeader = `padding: 9px 4px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC;`;
+  const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
+
+  matrixTbody.innerHTML = `
+    ${renderMatrixRow('premium', '최상급 PC (85점 이상)', '#11302B')}
+    ${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C')}
+    ${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981')}
+    ${renderMatrixRow('entry', '보급 PC (40점 미만)', '#64748B')}
+    <tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;">
+      <td style="padding: 9px 4px; color: #1E293B; font-weight: 800;">합계 (Total)</td>
+      <td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:1.0rem; color:#64748B; font-weight:600;">(100%)</span></td>
+      <td class="matrix-cell" data-grade="all" data-type="active" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalActive}대</td>
+      <td class="matrix-cell" data-grade="all" data-type="stock" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalStock}대</td>
+      <td class="matrix-cell" data-grade="all" data-type="under" style="${cellStyleHeader} color: #EF4444;" ${hoverEventsHeader}>${totalUnder}대</td>
+    </tr>
+  `;
+
+  // 셀별 동적 클릭 리스너 바인딩
+  matrixTbody.querySelectorAll('.matrix-cell').forEach(cell => {
+    cell.addEventListener('click', () => {
+      const grade = cell.getAttribute('data-grade')!;
+      const type = cell.getAttribute('data-type')!;
+      
+      let targetList: any[] = [];
+      let title = '';
+
+      const getGradeLabel = (g: string) => {
+        if (g === 'premium') return '최상급 PC';
+        if (g === 'high') return '상급 PC';
+        if (g === 'normal') return '중급 PC';
+        if (g === 'entry') return '보급 PC';
+        return '전체 PC';
+      };
+
+      const getTypeLabel = (t: string) => {
+        if (t === 'total') return '보유';
+        if (t === 'active') return '할당 (운영)';
+        if (t === 'stock') return '여분 (재고)';
+        if (t === 'under') return '부족 (사양 부족)';
+        return '';
+      };
+
+      if (grade === 'all') {
+        if (type === 'total') {
+          targetList = filtered;
+        } else if (type === 'active') {
+          targetList = filtered.filter(p => !isStock(p));
+        } else if (type === 'stock') {
+          targetList = filtered.filter(p => isStock(p));
+        } else if (type === 'under') {
+          targetList = criticalList.filter(p => p._spec_status === '사양 부족');
+        }
+      } else {
+        const data = matrix[grade as keyof typeof matrix];
+        if (type === 'total') {
+          targetList = data.pcs;
+        } else if (type === 'active') {
+          targetList = data.activePcs;
+        } else if (type === 'stock') {
+          targetList = data.stockPcs;
+        } else if (type === 'under') {
+          targetList = data.underPcs;
+        }
+      }
+
+      title = `${getGradeLabel(grade)} - ${getTypeLabel(type)} 자산 목록`;
+      showMiniListModal(title, targetList);
+    });
+  });
 
   // 7. 연도별 PC 노후도 집계 및 렌더링
   const agingCounts = {
@@ -442,9 +473,9 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
   const renderAgingRow = (label: string, list: any[], badgeText: string, badgeStyle: string, ageGroupKey: string) => {
     return `
       <tr style="border-bottom:1px solid #F1F5F9; cursor:pointer; transition: background 0.2s;" class="aging-row" data-group="${ageGroupKey}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
-        <td style="padding:14px 4px; font-weight:700; color:#334155;">${label}</td>
-        <td style="padding:14px 4px; text-align:center; font-weight:700; color:#334155;">${list.length}대</td>
-        <td style="padding:14px 4px; text-align:center;">
+        <td style="padding:9px 4px 9px 0; font-weight:700; color:#334155;">${label}</td>
+        <td style="padding:9px 4px; text-align:center; font-weight:700; color:#334155;">${list.length}대</td>
+        <td style="padding:9px 4px; text-align:center;">
           <span style="padding:2px 8px; border-radius:4px; font-size:14px; font-weight:800; ${badgeStyle}">${badgeText}</span>
         </td>
       </tr>
@@ -472,7 +503,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     });
   });
 
-  // 8. 각 등급 행 클릭 리스너 설정
+  // 8. 요약 지표 카드 클릭 리스너 설정
   const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean) => {
     const card = document.getElementById(id)!;
     if (!card) return;
@@ -488,23 +519,11 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     };
   };
 
-  bindCardClick('grade-premium', '최상급 PC', p => p._pc_score >= 85);
-  bindCardClick('grade-high', '상급 PC', p => p._pc_score >= 70 && p._pc_score < 85);
-  bindCardClick('grade-normal', '중급 PC', p => p._pc_score >= 40 && p._pc_score < 70);
-  bindCardClick('grade-entry', '보급 PC', p => p._pc_score < 40);
-
   // 사양 부족 / 오버스펙 / 윈도우 11 불가 클릭 리스너 설정
   bindCardClick('card-under-spec', '사양 부족 검토 대상', p => p._spec_status === '사양 부족');
   bindCardClick('card-over-spec', '오버스펙 검토 대상', p => p._spec_status === '오버스펙');
   bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
 
-
-  // 8.2 유효 재고 현황 클릭 리스너 설정
-  bindCardClick('stock-premium-card', '최상급 유효 재고', p => p._pc_score >= 85 && isStock(p));
-  bindCardClick('stock-high-card', '상급 유효 재고', p => p._pc_score >= 70 && p._pc_score < 85 && isStock(p));
-  bindCardClick('stock-normal-card', '중급 유효 재고', p => p._pc_score >= 40 && p._pc_score < 70 && isStock(p));
-  bindCardClick('stock-entry-card', '보급 유효 재고', p => p._pc_score < 40 && isStock(p));
-
   // 9. 직무별 사양 적정성 대수 연산 및 차트 데이터 셋 구성 (누적 막대 그래프화)
   const activeJobs = Array.from(
     new Set(filtered.map((p: any) => p[ASSET_SCHEMA.USER_POSITION.key] || '미분류').filter(j => j !== '재고PC'))
@@ -545,7 +564,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
 
   // 10. 차트들 렌더링 호출
   renderChart(activeJobs, underData, normalData, overData, filtered);
-  renderDonutChart(gradeCounts.premium.total, gradeCounts.high.total, gradeCounts.normal.total, gradeCounts.entry.total);
+  renderDonutChart(matrix.premium.total, matrix.high.total, matrix.normal.total, matrix.entry.total);
 
   // 전역 상태 등록
   state.activeCharts = [jobChartInstance, donutChartInstance];
@@ -849,7 +868,7 @@ function renderDonutChart(premium: number, high: number, normal: number, entry:
       top: 50%;
       left: 50%;
       transform: translate(-50%, -46%);
-      font-size: 1.56rem;
+      font-size: 1.75rem;
       font-weight: 900;
       color: #1E5149;
       font-family: 'Pretendard', sans-serif;