feat: PC 등급 뱃지 색상 CSS 추가 및 Win11 불가 PC 교체 대상 등급 강제 적용

- HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회
- ListFactory: 동일하게 세부 직무명 우선 참조
- 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시
- 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영)
- 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨

server.js

@@ -41,11 +41,19 @@ const pool = mysql.createPool({
         ram_standard VARCHAR(100),
         gpu_standard VARCHAR(100),
         min_score INT DEFAULT 0,
+        required_grade VARCHAR(50) DEFAULT '중급',
         remarks TEXT,
         created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
         updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
       ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
     `);
+    
+    // 테이블이 이미 존재할 경우를 대비하여 required_grade 컬럼 안전 추가
+    try {
+      await connection.query("ALTER TABLE job_spec_standards ADD COLUMN required_grade VARCHAR(50) DEFAULT '중급'");
+    } catch (err) {
+      // 이미 컬럼이 존재하면 에러가 나므로 통과합니다.
+    }
     console.log('✅ job_spec_standards table verification completed.');
   } catch (err) {
     console.error('❌ Failed to verify/create job_spec_standards table:', err);
@@ -586,19 +594,19 @@ app.get('/api/job-specs', async (req, res) => {
 
 // 6.7.2. Save Job Spec Standard (Add or Update)
 app.post('/api/job-specs/save', async (req, res) => {
-  const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks } = req.body;
+  const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, required_grade, remarks } = req.body;
   let connection;
   try {
     connection = await pool.getConnection();
     if (id) {
       await connection.query(
-        'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, remarks = ? WHERE id = ?',
+        'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, required_grade = ?, remarks = ? WHERE id = ?',
-        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
+        [job_name, cpu_standard || '', ram_standard || '', gpu_standard || '', min_score || 0, required_grade || '중급', remarks || '', id]
       );
     } else {
       await connection.query(
-        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
+        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, required_grade, remarks) VALUES (?, ?, ?, ?, ?, ?, ?)',
-        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
+        [job_name, cpu_standard || '', ram_standard || '', gpu_standard || '', min_score || 0, required_grade || '중급', remarks || '']
       );
     }
     res.json({ success: true });

src/components/Modal/JobSpecModal.ts

@@ -10,93 +10,47 @@ class JobSpecModal extends BaseModal {
   }
 
   protected renderFrameHTML(): string {
-    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
-    const inputStyle = sharedStyle;
-
     return `
       <div id="job-spec-asset-modal" class="modal-overlay hidden">
-        <style>
+        <div class="modal-content narrow">
-          .autocomplete-list {
-            position: absolute;
-            top: 100%;
-            left: 0;
-            right: 0;
-            max-height: 150px;
-            overflow-y: auto;
-            background-color: white;
-            border: 1px solid var(--border-color, #E2E8F0);
-            border-top: none;
-            border-radius: 0 0 4px 4px;
-            z-index: 1000;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-          }
-          .autocomplete-item {
-            padding: 8px 12px;
-            font-size: 13px;
-            color: #334155;
-            cursor: pointer;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-          .autocomplete-item:hover {
-            background-color: #F1F5F9;
-            color: #1E5149;
-            font-weight: 600;
-          }
-          .hidden {
-            display: none !important;
-          }
-        </style>
-        <div class="modal-content" style="max-width: 500px; width: 100%;">
           <div class="modal-header">
-            <h2 id="job-spec-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <div class="header-left">
-            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+              <h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
+              <div id="job-spec-header-identity" class="header-identity"></div>
             </div>
-          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">&times;</button>
-            <form id="job-spec-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+          </div>
+          <div class="modal-body">
+            <form id="job-spec-asset-form" class="grid-form vertical-form">
               <input type="hidden" id="job-spec-id" name="id" />
               
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무명</label>
+                <label>직무명</label>
-                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 CPU 사양</label>
+                <label>요구 PC 등급</label>
-                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <select id="job-spec-required-grade" name="required_grade" style="width: 100%; padding: 8px 12px; border: 1px solid var(--border-color, #E2E8F0); border-radius: 6px; background-color: white; font-size: 14px; font-weight: 600; color: #334155;" required>
-                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
+                  <option value="최상급">최상급 (85점 이상)</option>
+                  <option value="상급" selected>상급 (70점 이상)</option>
+                  <option value="중급">중급 (40점 이상)</option>
+                  <option value="보급">보급 (20점 이상)</option>
+                </select>
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 RAM 사양</label>
+                <label>비고 (메모)</label>
-                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
+                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
-                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
-              </div>
-
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px; position: relative;">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">권장 GPU 사양</label>
-                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required style="\${inputStyle} width: 100%;" autocomplete="off" />
-                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
-              </div>
-
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">성능 기준 점수 (이상, 자동 계산됨)</label>
-                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required style="\${inputStyle} width: 100%;" readonly />
-              </div>
-
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">비고 (메모)</label>
-                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" style="box-sizing: border-box !important; font-size: 13px; margin: 0; min-height: 80px; width: 100%; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; resize: vertical;"></textarea>
               </div>
             </form>
           </div>
-          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+          <div class="modal-footer">
-            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
-            <div class="footer-actions" style="display: flex; gap: 8px;">
+            <div class="footer-actions">
-              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
-              <button id="btn-cancel-job-spec-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
-              <button id="btn-save-job-spec-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+              <button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
             </div>
           </div>
         </div>
@@ -118,10 +72,7 @@ class JobSpecModal extends BaseModal {
       }
 
       const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
-      const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
+      const requiredGrade = (document.getElementById('job-spec-required-grade') as HTMLSelectElement).value;
-      const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
-      const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
-      const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
       const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
 
       if (!jobName) {
@@ -132,10 +83,11 @@ class JobSpecModal extends BaseModal {
       const updated = {
         id: this.currentAsset.id || null,
         job_name: jobName,
-        cpu_standard: cpuStd,
+        cpu_standard: '',
-        ram_standard: ramStd,
+        ram_standard: '',
-        gpu_standard: gpuStd,
+        gpu_standard: '',
-        min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
+        min_score: 0,
+        required_grade: requiredGrade,
         remarks: remarks
       };
 
@@ -159,86 +111,14 @@ class JobSpecModal extends BaseModal {
         onSave(); this.close(); closeModals();
       }
     });
-
-    // 자동완성 바인딩
-    this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
-    this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
-    this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
-
-    // 실시간 점수 계산 이벤트 바인딩
-    const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
-    inputs.forEach(id => {
-      const el = document.getElementById(id);
-      el?.addEventListener('input', () => this.updateMinScore());
-      el?.addEventListener('change', () => this.updateMinScore());
-    });
-  }
-
-  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
-    const input = document.getElementById(inputId) as HTMLInputElement;
-    const list = document.getElementById(autocompleteId) as HTMLDivElement;
-    if (!input || !list) return;
-
-    const showList = (filterText: string = '') => {
-      if (!this.isEditMode) return;
-      const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
-      const filtered = filterText 
-        ? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
-        : items;
-
-      if (filtered.length === 0) {
-        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
-      } else {
-        list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
-      }
-      list.classList.remove('hidden');
-    };
-
-    input.addEventListener('focus', () => {
-      showList(input.value);
-    });
-
-    input.addEventListener('input', () => {
-      showList(input.value);
-    });
-
-    list.addEventListener('mousedown', (e) => {
-      const item = (e.target as HTMLElement).closest('.autocomplete-item');
-      if (item && item.getAttribute('data-val')) {
-        input.value = item.getAttribute('data-val') || '';
-        list.classList.add('hidden');
-        this.updateMinScore();
-      }
-    });
-
-    document.addEventListener('mousedown', (e) => {
-      if (e.target !== input && !list.contains(e.target as Node)) {
-        list.classList.add('hidden');
-      }
-    });
-  }
-
-  private updateMinScore(): void {
-    const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
-    const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
-    const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
-    
-    const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
-    
-    const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
-    if (minScoreEl) {
-      minScoreEl.value = score.toString();
-    }
   }
 
   protected fillFormData(asset: any): void {
     setFieldValue('job-spec-id', asset.id || '');
     setFieldValue('job-spec-job-name', asset.job_name || '');
-    setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
+    setFieldValue('job-spec-required-grade', asset.required_grade || '중급');
-    setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
-    setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
-    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
     setFieldValue('job-spec-remarks', asset.remarks || '');
+    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
@@ -257,19 +137,32 @@ class JobSpecModal extends BaseModal {
     
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }
+    this.updateHeaderIdentity(asset);
+  }
 
-    this.updateMinScore();
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('job-spec-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const jobName = asset.job_name || '';
+    const reqGrade = asset.required_grade || '중급';
+
+    container.innerHTML = `
+      <span class="asset-code-title">${jobName}</span>
+      <span class="service-type-badge">${reqGrade} 요구</span>
+    `;
   }
 }
 

src/components/Modal/UserModal.ts

@@ -10,55 +10,57 @@ class UserModal extends BaseModal {
   }
 
   protected renderFrameHTML(): string {
-    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
-    const inputStyle = sharedStyle;
-
     return `
       <div id="user-asset-modal" class="modal-overlay hidden">
-        <div class="modal-content" style="max-width: 500px; width: 100%;">
+        <div class="modal-content narrow">
           <div class="modal-header">
-            <h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
+            <div class="header-left">
-            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+              <h2 id="user-modal-title" class="modal-title">${this.title}</h2>
+              <div id="user-header-identity" class="header-identity"></div>
             </div>
-          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
+            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
-            <form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+          </div>
+          <div class="modal-body">
+            <form id="user-asset-form" class="grid-form vertical-form">
               <input type="hidden" id="user-id" name="id" />
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사번</label>
+                <label>사번</label>
-                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
+                <label>사용자명</label>
-                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
+                <label>사용조직 (부서)</label>
-                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
+                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">직무 (직급)</label>
+                <label>직무</label>
-                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
+                <select id="user-position-input" name="position" required>
+                  <option value="">직무 선택</option>
+                </select>
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
+              <div class="form-group">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">상태</label>
+                <label>상태</label>
-                <select id="user-status" name="status" style="\${sharedStyle}">
+                <select id="user-status" name="status">
                   <option value="재직">재직</option>
                   <option value="퇴직">퇴직</option>
                 </select>
               </div>
             </form>
           </div>
-          <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #f8fafc; border-top: 1px solid var(--border-color);">
+          <div class="modal-footer">
-            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
+            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
-            <div class="footer-actions" style="display: flex; gap: 8px;">
+            <div class="footer-actions">
-              <button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
+              <button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
-              <button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
+              <button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
-              <button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+              <button id="btn-save-user-asset" class="btn btn-primary">수정</button>
             </div>
           </div>
         </div>
@@ -82,7 +84,7 @@ class UserModal extends BaseModal {
       const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
       const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
       const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
-      const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
+      const position = (document.getElementById('user-position-input') as HTMLSelectElement).value.trim();
       const status = (document.getElementById('user-status') as HTMLSelectElement).value;
 
       if (!empNo || !userName || !deptName || !position) {
@@ -119,26 +121,37 @@ class UserModal extends BaseModal {
         onSave(); this.close(); closeModals();
       }
     });
+    
+    createIcons({ icons: { Save, X } });
   }
 
   protected fillFormData(asset: any): void {
+    const positionSelect = document.getElementById('user-position-input') as HTMLSelectElement;
+    if (positionSelect) {
+      positionSelect.innerHTML = '<option value="">직무 선택</option>';
+      if (state.masterData.jobSpecs) {
+        state.masterData.jobSpecs.forEach((spec: any) => {
+          const option = document.createElement('option');
+          option.value = spec.job_name;
+          option.textContent = spec.job_name;
+          positionSelect.appendChild(option);
+        });
+      }
+    }
+
     setFieldValue('user-id', asset.id || '');
     setFieldValue('user-emp-no', asset.emp_no || '');
     setFieldValue('user-name-input', asset.user_name || '');
     setFieldValue('user-dept', asset.dept_name || '');
     setFieldValue('user-position-input', asset.position || '');
     setFieldValue('user-status', asset.status || '재직');
+    this.updateHeaderIdentity(asset);
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
     const titleEl = document.getElementById('user-modal-title');
-
     if (titleEl) {
-      if (mode === 'add') {
+      titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
-        titleEl.textContent = '신규 임직원 등록';
-      } else {
-        titleEl.textContent = '임직원 정보 수정';
-      }
     }
 
     const deleteBtn = document.getElementById('btn-delete-user-asset')!;
@@ -146,26 +159,37 @@ class UserModal extends BaseModal {
 
     deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
 
-    if (mode === 'add') {
+    if (mode === 'add' || mode === 'edit') {
-      this.setEditLockMode('edit');
+      saveBtn.textContent = mode === 'add' ? '등록' : '저장';
-      this.isEditMode = true;
-      saveBtn.textContent = '등록';
       saveBtn.style.display = 'block';
     } else {
-      this.setEditLockMode('view');
-      this.isEditMode = false;
       saveBtn.textContent = '수정';
       saveBtn.style.display = 'block';
     }
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('user-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const empNo = asset.emp_no || '';
+    const userName = asset.user_name || '';
+    const dept = asset.dept_name || '';
+
+    container.innerHTML = `
+      <span class="asset-code-title">${userName}</span>
+      <span class="service-type-badge">${empNo}</span>
+      <span class="asset-type-label">${dept}</span>
+    `;
   }
 }
 
 export const userModal = new UserModal();
-
+export function initUserModal(onSave: () => void, closeModals: () => void) { userModal.init(onSave, closeModals); }
-export function initUserModal(onSave: () => void, closeModals: () => void) {
+export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }
-  userModal.init(onSave, closeModals);
-}
-
-export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
-  userModal.open(asset, mode);
-}

src/core/filterHandler.ts

@@ -1,5 +1,4 @@
 import { ASSET_SCHEMA, UI_TEXT } from './schema';
-import { getActionButtonsHTML } from './utils';
 import { generateOptionsHTML } from '../components/Modal/ModalUtils';
 import { CORP_LIST } from '../components/Modal/SharedData';
 
@@ -16,9 +15,18 @@ export interface FilterOptions {
   showField?: boolean;
   showType?: boolean;
   showStatus?: boolean;
+  showPosition?: boolean;
   extraHTML?: string;
   onFilterChange: (filters: any) => void;
   initialFilters?: any;
+  fullList?: any[]; // For populating dynamic filters
+}
+
+/**
+ * 전역 액션 버튼 그룹 생성 (자산 추가 등)
+ */
+export function getActionButtonsHTML(): string {
+  return `<div id="filter-bar-actions" class="header-action-group"></div>`;
 }
 
 export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
@@ -30,11 +38,31 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
     showField = false, 
     showType = false, 
     showStatus = false,
+    showPosition = false,
     extraHTML = '', 
     onFilterChange,
-    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' }
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '', position: '' },
+    fullList = []
   } = options;
 
+  container.classList.add('search-bar'); // Restored class
+
+  // Helper to get unique sorted values
+  const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
+    const schemaItem = (ASSET_SCHEMA as any)[key];
+    const fieldKey = schemaItem ? schemaItem.key : key;
+    const dbKey = schemaItem ? schemaItem.db : null;
+    return Array.from(new Set(fullList.map(item => {
+      const val = item[fieldKey];
+      if (val !== undefined && val !== null) return val;
+      if (dbKey) return item[dbKey];
+      return null;
+    }).filter(Boolean))).sort() as string[];
+  };
+
+  const hasDeptName = fullList.some(item => 'dept_name' in item);
+  const deptUniqueKey = hasDeptName ? 'dept_name' : 'CURRENT_DEPT';
+
   container.innerHTML = `
     <div class="search-item flex-1">
       <label>${keywordLabel}</label>
@@ -45,6 +73,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       <label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
       <select id="filter-type">
         <option value="">전체 유형</option>
+        ${getUnique('ASSET_TYPE').map(v => `<option value="${v}" ${initialFilters.type === v ? 'selected' : ''}>${v}</option>`).join('')}
       </select>
     </div>` : ''}
     ${showStatus ? `
@@ -52,6 +81,7 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
       <select id="filter-status">
         <option value="">전체 상태</option>
+        ${getUnique('HW_STATUS').map(v => `<option value="${v}" ${initialFilters.status === v ? 'selected' : ''}>${v}</option>`).join('')}
       </select>
     </div>` : ''}
     ${showField ? `
@@ -73,16 +103,30 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
     ${showLoc ? `
     <div class="search-item">
       <label>${ASSET_SCHEMA.LOCATION.ui}</label>
-      <select id="filter-loc"><option value="">전체 위치</option></select>
+      <select id="filter-loc">
+        <option value="">전체 위치</option>
+        ${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
     </div>` : ''}
     ${showDept ? `
     <div class="search-item">
-      <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
+      <label>조직</label>
-      <select id="filter-dept"><option value="">전체 조직</option></select>
+      <select id="filter-dept">
+        <option value="">전체 조직</option>
+        ${getUnique(deptUniqueKey).map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
+    </div>` : ''}
+    ${showPosition ? `
+    <div class="search-item">
+      <label>직무</label>
+      <select id="filter-position">
+        <option value="">전체 직무</option>
+        ${getUnique('position').map(v => `<option value="${v}" ${initialFilters.position === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
     </div>` : ''}
     ${extraHTML}
     <button id="btn-reset-filters" class="btn btn-outline btn-reset">
-      <i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
+      <i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
     </button>
     ${getActionButtonsHTML()}
   `;
@@ -96,7 +140,8 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
       loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
       field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
       type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
-      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
+      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || '',
+      position: (container.querySelector('#filter-position') as HTMLSelectElement)?.value || ''
     };
     onFilterChange(filters);
   };
@@ -108,9 +153,10 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
   container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-type')?.addEventListener('change', triggerChange);
   container.querySelector('#filter-status')?.addEventListener('change', triggerChange);
+  container.querySelector('#filter-position')?.addEventListener('change', triggerChange);
 
   container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
-    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status'].forEach(id => {
+    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status', 'filter-position'].forEach(id => {
       const el = container.querySelector(`#${id}`);
       if (el) (el as any).value = '';
     });
@@ -121,18 +167,37 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
 /**
  * 공통 필터링 로직
  */
-export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof typeof ASSET_SCHEMA)[]) {
+export function applyCommonFilters(list: any[], filters: any, searchKeys: any[]) {
   return list.filter(item => {
-    const matchKeyword = !filters.keyword || searchKeys.some(key => 
+    // 1. 키워드 검색
-      String(item[ASSET_SCHEMA[key].key] || item[ASSET_SCHEMA[key].db] || '').toLowerCase().includes(filters.keyword)
+    const matchKeyword = !filters.keyword || searchKeys.some(key => {
-    );
+      const schemaItem = (ASSET_SCHEMA as any)[key];
+      if (schemaItem) {
+        return String(item[schemaItem.key] || item[schemaItem.db] || '').toLowerCase().includes(filters.keyword);
+      }
+      return String(item[key] || '').toLowerCase().includes(filters.keyword);
+    });
+
+    // 2. 부서 필터링 (사용자 페이지 dept_name, 자산 페이지 current_dept)
+    let matchDept = true;
+    if (filters.dept) {
+      const itemDept = item.dept_name || item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db];
+      matchDept = itemDept === filters.dept;
+    }
+
+    // 3. 직무 필터링
+    let matchPosition = true;
+    if (filters.position) {
+      matchPosition = item.position === filters.position;
+    }
+
+    // 4. 나머지 필터링
     const matchCorp = !filters.corp || (item[ASSET_SCHEMA.PURCHASE_CORP.key] || item[ASSET_SCHEMA.PURCHASE_CORP.db]) === filters.corp;
-    const matchDept = !filters.dept || (item[ASSET_SCHEMA.CURRENT_DEPT.key] || item[ASSET_SCHEMA.CURRENT_DEPT.db]) === filters.dept;
     const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
     const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
     const matchType = !filters.type || (item[ASSET_SCHEMA.ASSET_TYPE.key] || item[ASSET_SCHEMA.ASSET_TYPE.db]) === filters.type;
     const matchStatus = !filters.status || (item[ASSET_SCHEMA.HW_STATUS.key] || item[ASSET_SCHEMA.HW_STATUS.db]) === filters.status;
 
-    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus && matchPosition;
   });
 }

src/core/utils.ts

@@ -242,7 +242,8 @@ export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string,
     gpuDeduction = 0;
   } else if (
     gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
-    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO') ||
+    gpuUpper.includes('RTX 4060') || gpuUpper.includes('RTX 4050')
   ) {
     gpuDeduction = 5;
   } else if (
@@ -289,10 +290,12 @@ export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string,
  * 성능 점수 기준 등급 뱃지 메타 정보 가져오기
  */
 export function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
+  // Windows 11 업그레이드 불가 PC는 성능 점수와 무관하게 교체 대상으로 분류
+  if (isWin11Incompatible) return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
   if (score >= 85) return { name: '최상급', class: 'b-purple', color: '#7C3AED' };
   if (score >= 70) return { name: '상급', class: 'b-primary', color: '#4F46E5' };
   if (score >= 40) return { name: '중급', class: 'b-green', color: '#10B981' };
-  if (score >= 20 && !isWin11Incompatible) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
+  if (score >= 20) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
   return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
 }
 

src/styles/common.css

@@ -1,51 +1,48 @@
 :root {
-  /* --- System Colors --- */
+  /* --- Vercel Stark Palette --- */
-  --color-red: #F21D0D;
+  --primary: #171717;
-  --color-pink: #E8175E;
+  --on-primary: #ffffff;
-  --color-magenta: #B92ED1;
+  --body: #4d4d4d;
-  --color-purple: #6D3DC2;
+  --mute: #888888;
-  --color-navy: #4255bd;
+  --hairline: #ebebeb;
-  --color-blue: #0D8DF2;
+  --hairline-strong: #a1a1a1;
-  --color-cyan: #03AEFC;
+  --canvas: #ffffff;
-  --color-green: #4DB251;
+  --canvas-soft: #fafafa;
-  --color-yellow: #FFBF00;
+  --canvas-soft-2: #f5f5f5;
-  --color-orange: #FF9800;
-  --color-dahong: #FF3D00;
-  --color-brown: #A0705F;
-  --color-iron: #7F7F7F;
-  --color-steel: #688897;
   
-  /* --- Primary Brand Levels --- */
+  /* --- Brand Accents --- */
-  --primary-lv-0: #E9EEED;
+  --color-blue: #0070f3;
-  --primary-lv-1: #D2DCDB;
+  --color-cyan: #50e3c2;
-  --primary-lv-2: #A5B9B6;
+  --color-pink: #ff0080;
-  --primary-lv-3: #789792;
+  --color-violet: #7928ca;
-  --primary-lv-4: #4B746D;
+  --color-orange: #f5a623;
-  --primary-lv-5: #35635C;
-  --primary-lv-6: #1E5149;
-  --primary-lv-7: #1B443D;
-  --primary-lv-8: #193833;
-  --primary-lv-9: #162A27;
 
-  /* --- Semantic Colors --- */
+  /* --- Semantic Alignment --- */
-  --primary-color: var(--primary-lv-6);
+  --primary-color: var(--primary);
-  --primary-hover: var(--primary-lv-5);
+  --primary-hover: #000000;
-  --primary-light: var(--primary-lv-0);
+  --primary-light: var(--canvas-soft-2);
-
+  --text-main: var(--primary);
-  --edit-mode-color: var(--color-dahong);
+  --text-muted: var(--body);
-  --edit-mode-light: rgba(255, 61, 0, 0.1);
+  --border-color: var(--hairline);
-  --edit-mode-focus: rgba(255, 61, 0, 0.3);
+  --bg-color: var(--canvas-soft);
-  --edit-mode-dark: #cc3100;
+  --bg-light: var(--canvas-soft-2);
-
-  --text-main: #111827;
-  --text-muted: #6B7280;
-  --border-color: #E5E7EB;
-  --bg-color: #F9FAFB;
-  --bg-light: #FAFAFA;
   --white: #FFFFFF;
-  --danger: var(--color-red);
+  --danger: #ee0000;
-  --success: var(--color-green);
+  --success: #0070f3;
-  --header-height: 52px;
+  --header-height: 64px;
+
+  /* --- Global Typography Scale (Tighter Clamps) --- */
+  --fs-xs: clamp(10px, 1vmin + 0.1vw, 13px);
+  --fs-sm: clamp(12px, 1.2vmin + 0.2vw, 15px);
+  --fs-base: clamp(13px, 1.4vmin + 0.2vw, 16px);
+  --fs-md: clamp(16px, 2vmin + 0.3vw, 24px);
+  --fs-lg: clamp(20px, 3vmin + 0.4vw, 32px);
+  --fs-xl: clamp(28px, 5vmin + 0.6vw, 48px);
+
+  /* --- Layout Units --- */
+  --header-height: 64px;
+  --spacing-base: 1.5rem;
+  --radius-base: 8px;
 }
 
 * {
@@ -56,12 +53,26 @@
 }
 
 body {
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
   color: var(--text-main);
   background-color: var(--bg-color);
   line-height: 1.5;
-  font-size: 14px;
+  font-size: var(--fs-base);
+  height: 100vh;
+  width: 100vw;
   overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+input, textarea {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
 }
 
 .app-layout {
@@ -69,67 +80,52 @@ body {
   flex-direction: column;
   height: 100vh;
   width: 100%;
+  overflow: hidden;
 }
 
 /* --- Header --- */
 .main-header {
-  background-color: var(--white);
+  background-color: var(--canvas);
   border-bottom: 1px solid var(--border-color);
   z-index: 100;
   height: var(--header-height);
   flex-shrink: 0;
-}
-
-.header-container {
-  height: 100%;
   display: flex;
   align-items: center;
   padding: 0 1.5rem;
-  gap: 1.5rem;
+}
+
+.header-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .brand { display: flex; align-items: center; gap: 0.75rem; }
-.main-logo { height: 34px; width: auto; }
+.main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
-.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
+.brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }
-.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
 
-.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
+.integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
-.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
+.gnb-trigger { 
-.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
+  font-size: var(--fs-xs); 
-.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
+  font-weight: 500; 
-.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
+  color: var(--text-muted); 
-
+  padding: 0.4rem 0.75rem; 
-/* 기본적으로 활성 탭의 서브메뉴 표시 */
+  cursor: pointer; 
-.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
+  border-radius: 9999px; 
-
+  transition: all 0.2s; 
-/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
+}
-.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
+.gnb-trigger:hover { color: var(--text-main); background: var(--canvas-soft-2); }
-
+.gnb-trigger.active { color: var(--text-main); font-weight: 600; background: var(--canvas-soft-2); }
-/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
-.nav-group:hover .lnb-shelf { display: flex !important; }
-
-.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
-.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
-.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
-
-.header-actions { display: flex; align-items: center; gap: 1rem; }
-.role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
-.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
-.role-label.active { color: var(--primary-color); }
-.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
-.switch input { opacity: 0; width: 0; height: 0; }
-.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
-.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
-input:checked + .slider { background-color: var(--color-orange); }
-input:checked + .slider:before { transform: translateX(16px); }
 
 /* --- Layout Content --- */
 .content-area {
   flex: 1;
-  padding: 1.25rem 2rem 0;
+  padding: 0;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .view-container {
@@ -142,163 +138,507 @@ input:checked + .slider:before { transform: translateX(16px); }
 
 .view-content-wrapper {
   flex: 1;
-  overflow-y: auto;
+  display: flex;
-  padding-bottom: 2rem;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
 }
 
-/* --- View Toggle --- */
+/* --- View Toggle (Vercel Tab Style) --- */
-.view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
+.view-toggle {
-.view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
+  display: inline-flex;
-.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
+  background: var(--canvas-soft-2);
-.toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+  padding: 0.2rem;
+  border: 1px solid var(--hairline);
+  gap: 0.1rem;
+  border-radius: var(--radius-base);
+}
 
-/* --- System Status List (Docker Style) --- */
+.toggle-btn {
-.system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
+  padding: 0.35rem 1rem;
-.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
+  border: none;
-.system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
+  background: transparent;
-.system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
+  font-size: var(--fs-xs);
-.col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
+  font-weight: 500;
-.col-info { flex: 1.5; }
+  color: var(--text-muted);
-.col-network { flex: 1; }
+  cursor: pointer;
-.col-remote { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
+  transition: all 0.1s;
-.col-traffic { flex: 1.2; }
+  border-radius: calc(var(--radius-base) - 2px);
-.col-actions { width: 120px; display: flex; justify-content: flex-end; }
+}
-.status-dot { width: 10px; height: 10px; border-radius: 50%; }
-.status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
-.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
-.asset-primary { font-weight: 700; font-size: 14px; }
-.asset-secondary { font-size: 12px; color: var(--text-muted); }
-.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
-.traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
-.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
-.progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
-.progress-fill { height: 100%; background: var(--primary-color); }
-.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
-.icon-btn:hover { background-color: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
 
-/* --- Footer --- */
+.toggle-btn:hover { color: var(--text-main); }
-.main-footer {
+.toggle-btn.active {
-  height: 28px;
+  background: var(--canvas);
-  background-color: var(--white);
+  color: var(--text-main);
-  border-top: 1px solid var(--border-color);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  font-weight: 600;
+}
+
+/* --- Role Toggle Switch --- */
+.role-toggle-wrapper {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  gap: 0.75rem;
-  padding: 0 1.5rem;
+  background: var(--canvas-soft-2);
-  flex-shrink: 0;
+  padding: 0.35rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--hairline);
 }
 
-.main-footer p {
+.role-label {
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+  font-size: var(--fs-xs);
-  font-size: 0.75rem;
+  font-weight: 500;
-  font-weight: 300;
+  color: var(--mute);
-  line-height: 1.25rem;
+  transition: all 0.2s;
-  letter-spacing: -0.0175rem;
+}
-  color: #777777;
+
-  user-select: none;
+.role-label.active {
-  pointer-events: all;
+  color: var(--primary);
-  -webkit-user-drag: none;
+  font-weight: 700;
-  margin: 0;
+}
-  padding: 0;
+
+.role-toggle {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.role-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.role-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--hairline-strong);
+  transition: .4s;
+  border-radius: 20px;
+}
+
+.role-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+input:checked + .role-slider {
+  background-color: var(--primary);
+}
+
+input:checked + .role-slider:before {
+  transform: translateX(20px);
+}
+
+/* --- Utility Styles (The Standard) --- */
+.btn { 
+  display: inline-flex; 
+  align-items: center; 
+  justify-content: center; 
+  gap: 0.4rem; 
+  padding: 0 1.25rem; 
+  font-size: var(--fs-xs); 
+  font-weight: 500; 
+  border-radius: 9999px; 
+  cursor: pointer; 
+  height: clamp(32px, 4.5vmin, 44px); 
+  transition: all 0.2s;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.btn-primary { background-color: var(--primary); color: var(--on-primary); }
+.btn-primary:hover { background-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+
+.btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
+.btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
+
+.btn-sm { height: clamp(28px, 3.5vmin, 36px); padding: 0 1rem; font-size: var(--fs-xs); }
+.btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
+
+/* --- Form Elements --- */
+.form-select-sm {
+  height: clamp(28px, 3.5vmin, 36px);
+  padding: 0 0.5rem;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  font-size: var(--fs-xs);
+  outline: none;
+  background-color: var(--canvas);
+  color: var(--primary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.form-select-sm:focus {
+  border-color: var(--primary);
+}
+
+.badge { 
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px; 
+  border-radius: 9999px; 
+  font-size: var(--fs-xs); 
+  font-weight: 600; 
+}
+.badge-primary { background-color: var(--primary); color: var(--on-primary); }
+
+/* --- Badge Color Variants (성능 등급 등 컬러 뱃지) --- */
+.b-purple  { background-color: #EDE9FE; color: #6D28D9; }   /* 최상급 - 보라 */
+.b-primary { background-color: #E0E7FF; color: #3730A3; }   /* 상급   - 인디고 */
+.b-green   { background-color: #D1FAE5; color: #065F46; }   /* 중급   - 초록 */
+.b-yellow  { background-color: #FEF3C7; color: #B45309; }   /* 보급   - 노랑/주황 */
+.badge-danger  { background-color: #FFE4E6; color: #BE123C; } /* 교체대상 - 빨강 */
+.badge-muted   { background-color: #F1F5F9; color: #64748B; } /* 폐기   - 회색 */
+.badge-light   { background-color: #F8FAFC; color: #94A3B8; } /* 기타   - 연회색 */
+
+/* --- Form Elements Extra --- */
+.input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-with-icon input {
+  padding-left: 2.5rem !important;
+}
+
+.input-with-icon i, 
+.input-with-icon .icon-sm {
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
+  color: var(--mute);
+  pointer-events: none;
+}
+
+.autocomplete-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 250px;
+  overflow-y: auto;
+  background: var(--canvas);
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
+  z-index: 1100;
+  margin-top: 4px;
+}
+
+.autocomplete-item {
+  padding: 10px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
+  transition: background 0.1s;
+}
+
+.autocomplete-item:hover {
+  background: var(--canvas-soft-2);
+}
+
+.autocomplete-item-empty {
+  padding: 1rem;
+  color: var(--mute);
+  font-size: var(--fs-xs);
+  text-align: center;
+}
+
+.suggestion-name {
+  font-weight: 600;
+  font-size: var(--fs-xs);
+  color: var(--primary);
+  margin-bottom: 2px;
+}
+
+.suggestion-meta {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  display: flex;
+  gap: 8px;
+}
+
+/* --- Summary & Selection Cards --- */
+.summary-info-card {
+  padding: 1.25rem;
+  background: var(--canvas-soft);
+  border: 1px solid var(--hairline);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.user-pc-selection-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 250px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.user-pc-item {
+  padding: 12px;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--canvas);
+  transition: all 0.2s;
+}
+
+.user-pc-item:hover {
+  border-color: var(--hairline-strong);
+  background: var(--canvas-soft);
+}
+
+.user-pc-item.selected {
+  border-color: var(--primary);
+  background: var(--primary-light);
+}
+
+.pc-item-code {
+  font-weight: 700;
+  font-size: var(--fs-xs);
+  color: var(--primary);
+}
+
+.pc-item-meta {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  margin-top: 2px;
+}
+
+.empty-list-message {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  padding: 1rem 0;
+  text-align: center;
+}
+
+/* --- Global Utilities --- */
+.hidden { display: none !important; }
+.clickable { cursor: pointer; transition: opacity 0.2s; }
+.clickable:hover { opacity: 0.8; }
+
+/* Flexbox & Grid Utilities */
+.flex { display: flex; }
+.flex-col { display: flex; flex-direction: column; }
+.flex-row { display: flex; flex-direction: row; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-y-3 { row-gap: 0.75rem; }
+.gap-x-4 { column-gap: 1rem; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-4 { margin-bottom: 1rem !important; }
+.mb-6 { margin-bottom: 1.5rem !important; }
+.pb-4 { padding-bottom: 1rem !important; }
+.p-4 { padding: 1rem !important; }
+.p-2 { padding: 0.5rem !important; }
+.p-8 { padding: 2rem !important; }
+.ml-auto { margin-left: auto !important; }
+.self-end { align-self: flex-end !important; }
+.font-medium { font-weight: 500; }
+.text-muted { color: var(--mute) !important; }
+.mt-12 { margin-top: 3rem !important; }
+.icon-sm { width: 16px; height: 16px; }
+.h-90vh { height: 90vh !important; }
+.pt-0 { padding-top: 0 !important; }
+.font-semibold { font-weight: 600; }
+
+
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+
+/* Text Utilities */
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.font-bold { font-weight: 700; }
+.bg-primary-light { background-color: var(--primary-light) !important; }
+.text-success { color: var(--success) !important; }
+.text-danger { color: var(--danger) !important; }
+.text-blue { color: var(--color-blue) !important; }
+.text-orange { color: var(--color-orange) !important; }
+/* --- Unified Search & Filter Bar --- */
+.search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-base);
+  padding: 1.25rem var(--spacing-base);
+  border-bottom: 1px solid var(--hairline);
+  align-items: flex-end; 
+  background: var(--canvas);
   box-sizing: border-box;
 }
 
-.hidden {
+.search-item {
-  display: none !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: flex-end;
 }
 
-.text-nowrap {
+.search-item.flex-1 {
+  flex: 1;
+  min-width: 300px;
+}
+
+.search-item label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.search-item input, 
+.search-item select {
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.75rem;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  font-size: var(--fs-sm);
+  outline: none;
+  background-color: var(--canvas);
+  color: var(--primary);
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.search-item select {
+  cursor: pointer;
+  min-width: 120px;
+}
+
+.search-item input:focus, 
+.search-item select:focus {
+  border-color: var(--primary);
+}
+
+.header-action-group {
+  margin-left: auto;
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-view-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--primary);
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.5rem;
+  font-size: var(--fs-sm);
+  user-select: none;
+}
+
+.list-view-toggle-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.map-pagination-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-left: 0.5rem;
+  padding-left: 1rem;
+  border-left: 1px solid var(--hairline);
+  height: clamp(34px, 4.5vmin, 44px);
+}
+
+.page-info {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
   white-space: nowrap;
 }
 
-/* --- Utility Styles --- */
-.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
-.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
-.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }
 
-.badge {
+/* --- Modal & View Header Layouts --- */
-  padding: 2px 6px;
+.header-left {
-  border-radius: 4px;
+  display: flex;
-  font-size: 16px;
+  align-items: center;
-  font-weight: 700;
+  gap: 1rem;
-  white-space: nowrap;
 }
 
-.badge-primary {
+/* --- Asset Identity & Header Styling (Global) --- */
-  background-color: var(--primary-color);
+.header-identity {
-  color: white;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  flex-wrap: wrap;
 }
 
-.badge-muted {
+.asset-code-title {
-  background-color: #9CA3AF;
+  font-size: var(--fs-md);
-  color: white;
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.02em;
+  line-height: 1;
 }
 
-.badge-light {
+.service-type-badge {
-  background: var(--bg-color);
+  font-size: var(--fs-xs);
-  color: var(--text-muted);
+  font-weight: 600;
-  border: 1px solid var(--border-color);
+  color: var(--on-primary);
+  background: var(--primary);
+  padding: 4px 8px;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  line-height: 1;
 }
 
-/* PC 성능 등급 뱃지 컬러 스타일 */
+.asset-type-label {
-.badge.b-purple {
+  font-size: var(--fs-sm);
-  background-color: #EDE9FE;
+  font-weight: 500;
-  color: #7C3AED;
+  color: var(--mute);
-  border: 1px solid #DDD6FE;
+  line-height: 1;
-  font-size: 11px;
-  padding: 2px 6px;
-}
-.badge.b-primary {
-  background-color: #DBEAFE;
-  color: #1D4ED8;
-  border: 1px solid #BFDBFE;
-  font-size: 11px;
-  padding: 2px 6px;
-}
-.badge.b-green {
-  background-color: #D1FAE5;
-  color: #047857;
-  border: 1px solid #A7F3D0;
-  font-size: 11px;
-  padding: 2px 6px;
-}
-.badge.b-yellow {
-  background-color: #FEF3C7;
-  color: #D97706;
-  border: 1px solid #FDE68A;
-  font-size: 11px;
-  padding: 2px 6px;
 }
 
-.text-tag {
+.main-footer {
-  color: var(--text-muted);
+  border-top: 1px solid var(--border-color);
-  font-size: 16px;
+  background-color: var(--canvas);
-  padding: 1px 5px;
+  color: var(--mute);
-  border: 1px solid var(--border-color);
+  padding: 1rem 2rem;
-  border-radius: 3px;
+  text-align: right;
-  background-color: var(--bg-light);
+  font-size: var(--fs-xs);
+  flex-shrink: 0;
+  z-index: 10;
 }
 
-.font-bold {
+.main-footer p {
-  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
 }
 
-/* --- Responsive Design (Tablet & Mobile) --- */
-@media (max-width: 1200px) {
-  .header-container { gap: 0.75rem; padding: 0 1rem; }
-  .brand h1 { font-size: 1rem; }
-  .brand h1 .sub-title { font-size: 0.75rem; }
-}
-
-@media (max-width: 992px) {
-  .main-header { height: auto; padding: 0.5rem 0; }
-  .header-container { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
-  .integrated-nav { width: 100%; justify-content: flex-start; border-top: 1px solid var(--border-color); padding-top: 0.5rem; }
-  .header-actions { width: 100%; justify-content: flex-end; padding-top: 0.5rem; }
-  .content-area { padding: 0 1rem; }
-}
-
-@media (max-width: 768px) {
-  .brand h1 .sub-title { display: none; }
-  .header-actions .btn span { display: none; }
-}

src/styles/dashboard.css

@@ -1,526 +1,503 @@
-/* --- Premium Executive Dashboard View Specific Styles --- */
+/* --- Vercel Inspired Premium Dashboard --- */
 .dashboard-section-title {
-  padding: 0 0 0 8px;
+  padding: 0;
-  font-size: 1.55rem;
+  font-size: var(--fs-lg);
-  font-weight: 800;
+  font-weight: 600;
-  color: var(--text-main);
+  color: var(--primary);
   letter-spacing: -0.02em;
-  border-left: 4px solid var(--primary-color);
+  margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
-  margin-bottom: 1rem;
+  line-height: 1;
-  line-height: 1.2;
 }
 
-.dashboard-grid {
+/* Background Mesh Gradient for Stats Row */
-  display: grid;
+.dashboard-stats-row {
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  display: flex;
-  gap: 1.5rem;
+  flex-wrap: wrap;
-  margin-bottom: 2rem;
+  border-bottom: 1px solid var(--hairline);
+  padding: 0;
+  margin-bottom: clamp(1rem, 2vmin, 2rem);
+  background: radial-gradient(at 0% 0%, rgba(80, 227, 194, 0.05) 0px, transparent 50%), 
+              radial-gradient(at 100% 0%, rgba(121, 40, 202, 0.05) 0px, transparent 50%);
 }
 
-/* Premium Executive Divider-based Style (Line-based Division) */
+.stat-group-item {
-.dashboard-card, .stat-card {
+  flex: 1;
-  background: transparent;
+  min-width: 250px;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
-  border: none;
-  border-bottom: 1px solid var(--border-color);
-  box-shadow: none;
-  border-radius: 0;
-  padding: 1.5rem 0.5rem;
   display: flex;
   flex-direction: column;
-  transition: opacity 0.2s ease;
+  padding: var(--spacing-base);
+  justify-content: center;
 }
 
-.dashboard-card:hover, .stat-card:hover {
+.stat-group-item.bordered {
-  transform: none;
+  border-left: 1px solid var(--hairline);
-  box-shadow: none;
-  opacity: 0.85;
 }
 
-.dashboard-layout-2col {
+.stat-group-item .stat-label {
-  display: grid;
+  font-size: var(--fs-xs);
-  grid-template-columns: repeat(2, 1fr);
+  font-weight: 500;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.5rem;
+}
+
+.stat-group-item .stat-value {
+  font-size: var(--fs-xl);
+  font-weight: 600;
+  color: var(--primary);
+  line-height: 1;
+  display: flex;
+  align-items: baseline;
+}
+
+.stat-group-item .stat-value span {
+  font-size: var(--fs-base);
+  font-weight: 400;
+  margin-left: 6px;
+  color: var(--mute);
+}
+
+.stat-group-item .stat-sub {
+  display: flex;
   gap: 1.5rem;
+  font-size: var(--fs-sm);
+  color: var(--body);
+  margin-top: 1rem;
 }
 
-.dashboard-layout-3col {
+/* --- Technical Data Alignment --- */
-  display: grid;
+.text-primary {
-  grid-template-columns: repeat(3, 1fr);
+  color: var(--color-blue) !important;
-  gap: 1.5rem;
 }
 
-.dashboard-card {
+.detail-stat-header {
-  min-height: 380px;
-}
-
-.dashboard-card canvas {
-  flex: 1;
-  width: 100% !important;
-  max-height: 280px;
-}
-
-/* Premium KPI Value Styling */
-.stat-value {
-  font-size: 2.41rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin-top: 0.5rem;
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
   gap: 0.5rem;
 }
 
-.stat-value-danger {
+.stat-title {
-  background: linear-gradient(135deg, #E11D48 0%, #F59E0B 100%);
+  font-size: var(--fs-base);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.stat-label {
-  font-size: 1.36rem;
-  color: var(--text-muted);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.stat-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-}
-
-.icon-blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
-.icon-green { background: rgba(30, 81, 73, 0.1); color: #1E5149; }
-.icon-red { background: rgba(225, 29, 72, 0.1); color: #E11D48; }
-.icon-yellow { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
-
-.table-premium {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-  overflow: hidden;
-}
-
-.table-premium table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-premium th {
-  background: #F8FAFC;
-  color: #475569;
-  font-weight: 700;
-  padding: 1rem;
-  text-transform: uppercase;
-  font-size: 0.96rem;
-  letter-spacing: 0.05em;
-}
-
-.table-premium td {
-  padding: 1rem;
-  border-bottom: 1px solid #E2E8F0;
-  color: #1E293B;
-  font-size: 16px;
-}
-
-.table-premium tr:hover td {
-  background: #F1F5F9;
-}
-
-/* --- Slider/Carousel Specific Styles --- */
-.dashboard-header-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-}
-
-.slider-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.slider-nav-btn {
-  background: white;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--text-main);
-  transition: all 0.2s;
-}
-
-.slider-nav-btn:hover {
-  background: var(--primary-color);
-  color: white;
-  border-color: var(--primary-color);
-}
-
-.slider-nav-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.page-info {
-  font-size: 0.96rem;
-  color: var(--text-muted);
   font-weight: 600;
+  color: var(--primary);
+  white-space: nowrap;
 }
 
-.page-btns button {
+.detail-stat-body {
-  padding: 0.3rem 0.75rem;
-  border: 1px solid var(--border-color);
-  background: var(--white);
-  border-radius: 4px;
-  font-size: 0.96rem;
-  cursor: pointer;
-}
-
-.page-btns button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.slider-indicator {
-  font-weight: 700;
-  color: var(--text-muted);
-  font-size: 1.41rem;
-}
-
-.dashboard-slider-viewport {
-  width: 100%;
-  overflow: hidden;
-  padding: 0.5rem 0;
-}
-
-.dashboard-slider-track {
-  display: flex;
-  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
-  width: 400%; /* For 4 pages */
-}
-
-.dashboard-slide {
-  width: 25%; /* 100% / 4 pages */
-  flex-shrink: 0;
-  padding: 0 2px; /* Slight padding to avoid cutting off box-shadows */
-  height: calc(100vh - 150px);
-  min-height: 520px;
   display: flex;
   flex-direction: column;
-  box-sizing: border-box;
+  gap: 0.5rem;
 }
 
-/* --- Location View Styles --- */
+.loc-summary {
-.location-layout {
-  display: grid;
-  grid-template-columns: 1.2fr 1fr;
-  gap: 2rem;
-  height: calc(100vh - 180px);
-}
-
-.map-section, .asset-section {
   display: flex;
-  flex-direction: column;
-}
-
-.section-title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  color: var(--text-main);
-  display: flex;
-  align-items: center;
-}
-
-.map-wrapper {
-  flex: 1;
-  background: #f8fafc;
-  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-}
-
-.location-box {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-  user-select: none;
-}
-
-.location-box:hover {
-  background: rgba(30, 81, 73, 0.2) !important;
-  transform: scale(1.02);
-  z-index: 10;
-}
-
-.location-box:active {
-  transform: scale(0.98);
-}
-
-.asset-section .table-container {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.status-tag {
-  display: inline-block;
-  padding: 0.25rem 0.625rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  background: #ecfdf5;
-  color: #059669;
-  border: 1px solid #d1fae5;
-}
-
-.view-toggle-btn:hover {
-  border-color: var(--primary-color) !important;
-  color: var(--primary-color) !important;
-}
-
-.view-toggle-btn.active:hover {
-  color: white !important;
-}
-
-/* --- View Toggle Header --- */
-.view-header {
-  padding: 0.5rem 1.5rem;
-  background: var(--white);
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
   gap: 1rem;
+  flex-wrap: wrap;
 }
 
-.view-toggle-container {
+.loc-summary span {
-  display: flex;
+  font-size: var(--fs-sm);
-  background: #f1f5f9;
+  color: var(--mute);
-  padding: 0.25rem;
-  border-radius: 8px;
-  gap: 0.25rem;
 }
 
-.mode-toggle-btn {
+.loc-summary span strong {
-  padding: 0.5rem 1rem;
+  color: var(--primary);
-  border: none;
+  font-size: var(--fs-base);
-  background: transparent;
-  border-radius: 6px;
-  font-size: 0.8125rem;
   font-weight: 600;
-  color: var(--text-muted);
-  cursor: pointer;
-  transition: all 0.2s ease;
 }
 
-.mode-toggle-btn:hover {
+.type-summary {
-  color: var(--text-main);
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+  opacity: 0.9;
+  border-top: 1px dashed var(--hairline);
+  padding-top: 8px;
+  margin-top: 4px;
 }
 
-.mode-toggle-btn.active {
+.type-summary span {
-  background: var(--white);
+  cursor: help;
-  color: var(--primary-color);
+  font-size: var(--fs-xs);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  color: var(--mute);
 }
 
-/* --- Enhanced Location View --- */
+.type-summary span strong {
+  color: var(--primary);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+}
+
+/* --- Enhanced Location View Layout --- */
 .location-view-wrapper {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 120px);
+  height: 100%;
+  background: var(--canvas);
+  overflow: hidden;
 }
 
 .location-filter-bar {
-  padding: 1rem 1.5rem;
+  /* Inherit from .search-bar in common.css */
-  background: var(--white);
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  align-items: center;
-  gap: 2rem;
 }
 
-.filter-group {
+.filter-group label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.filter-row {
   display: flex;
   align-items: center;
   gap: 0.75rem;
 }
 
-.filter-group label {
-  font-size: 0.8125rem;
-  font-weight: 700;
-  color: var(--text-main);
-}
-
-.filter-group select {
-  padding: 0.4rem 0.75rem;
-  border: 1px solid var(--border-color);
-  border-radius: 6px;
-  font-size: 0.8125rem;
-  color: var(--text-main);
-  background: var(--white);
-  min-width: 140px;
-}
-
-.map-pagination {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
 .location-main-content {
   flex: 1;
   display: grid;
-  grid-template-columns: 1.4fr 1fr;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
-  gap: 1.5rem;
+  background: var(--canvas);
-  padding: 1.5rem;
+  gap: 0;
+  padding: 0;
   overflow: hidden;
+  align-items: stretch;
 }
 
 .map-container-section {
+  position: relative;
+  overflow: hidden;
   display: flex;
-  flex-direction: column;
+  align-items: center; 
-  overflow: auto;
+  justify-content: center;
+  background: var(--canvas);
+  height: 100%;
+}
+
+.map-frame-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.map-image {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
+
+.map-overlay {
+  position: absolute;
+  pointer-events: none;
+}
+
+.no-map-message {
+  padding: 5rem;
+  text-align: center;
+  color: var(--mute);
+  font-size: var(--fs-base);
 }
 
 .location-box-point {
+  position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
 }
 
-.box-label-text {
+/* --- Asset Detail Sidebar --- */
-  font-size: 0.65rem;
-  font-weight: 800;
-  color: var(--primary-color);
-  pointer-events: none;
-  text-shadow: 0 0 2px white;
-}
-
 .asset-list-section {
-  background: var(--white);
-  border-radius: 12px;
-  border: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
+  height: 100%;
   overflow: hidden;
+  background: var(--canvas);
 }
 
-.asset-list-section .section-header {
+.section-header {
-  padding: 1rem 1.25rem;
+  padding: 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--hairline);
-  background: #f8fafc;
+  background: var(--canvas);
-}
+  flex-shrink: 0;
-
-.asset-list-section h4 {
-  margin: 0;
-  font-size: 0.9375rem;
-  color: var(--text-main);
 }
 
 .mini-table-wrapper {
   flex: 1;
   overflow-y: auto;
+  position: relative;
 }
 
-.compact-table {
+.sidebar-title {
-  width: 100%;
+  margin: 0;
-  border-collapse: collapse;
+  font-size: var(--fs-base);
-}
-
-.compact-table th {
-  position: sticky;
-  top: 0;
-  background: var(--white);
-  padding: 0.75rem 1rem;
-  text-align: left;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--text-muted);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.compact-table td {
-  padding: 0.75rem 1rem;
-  font-size: 0.8125rem;
-  border-bottom: 1px solid #f1f5f9;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px;
-}
-
-.compact-table tr.clickable-row:hover {
-  background: #f1f5f9;
-  cursor: pointer;
-}
-
-/* --- Asset Detail Sidebar (LocationView) --- */
-.asset-detail-sidebar {
-  padding-top: 1rem;
-  background: var(--white);
-  height: 100%;
-  overflow-y: auto;
-}
-
-.detail-section {
-  margin-bottom: 20px;
-  padding: 0 1.25rem;
-}
-
-.detail-section-title {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--primary-color);
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: 6px;
-  margin-bottom: 12px;
-}
-
-.detail-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(80px, auto) 1fr);
-  gap: 8px 16px;
-}
-
-.detail-label {
-  font-size: 12px;
-  color: var(--text-muted);
   font-weight: 600;
-  display: flex;
+  color: var(--primary);
-  align-items: center;
-}
-
-.detail-value {
-  font-size: 14px;
-  color: var(--text-main);
-  font-weight: 500;
-  word-break: break-all;
-  display: flex;
-  align-items: center;
 }
 
 .detail-header-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
   width: 100%;
+  gap: 12px;
 }
 
-.detail-header-title {
+.header-identity {
+  display: flex;
+  align-items: center; /* Changed from baseline to center for perfect vertical alignment */
+  gap: 8px;
   flex: 1;
-  font-size: 0.95rem;
+  flex-wrap: wrap; /* Allow wrapping on very small screens */
+}
+
+.asset-code-title {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.02em;
+  line-height: 1; /* Reset line-height to prevent baseline shifts */
+}
+
+.service-type-badge {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--on-primary);
+  background: var(--primary);
+  padding: 4px 8px; /* Adjusted padding for better vertical centering */
+  border-radius: 9999px;
+  text-transform: uppercase;
+  line-height: 1; /* Match line-height */
+}
+
+.asset-type-label {
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--mute);
+  line-height: 1; /* Match line-height */
+}
+
+.asset-detail-sidebar {
+  padding: 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-section {
+  margin-bottom: 2rem;
+  padding: 0 1.5rem;
+}
+
+.detail-section-title {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  border-bottom: 1px solid var(--hairline);
+  padding-bottom: 8px;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.detail-grid-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem 1.5rem;
+}
+
+.detail-item.full-width {
+  grid-column: span 2;
+}
+
+.detail-label-sm {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.dashboard-layout-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  padding: 0 2rem 2rem;
+}
+
+.dashboard-card {
+  background: var(--canvas);
+  border: none;
+  border-radius: 0;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  transition: all 0.15s ease;
+}
+
+.dashboard-card.clickable:hover {
+  background-color: var(--canvas-soft-2);
+  border-color: var(--hairline-strong);
+}
+
+.stat-progress-bar {
+  height: 8px;
+  background: var(--canvas-soft-2);
+  border-radius: 9999px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 9999px;
+}
+
+.dashboard-card .stat-label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.dashboard-card .stat-value {
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.dashboard-card .stat-sub {
+  font-size: var(--fs-sm);
+  color: var(--body);
+}
+
+.bg-soft {
+  background-color: var(--canvas-soft) !important;
+}
+
+.chart-placeholder {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.circular-progress {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: conic-gradient(var(--primary) calc(var(--val) * 1%), var(--hairline) 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.circular-progress::before {
+  content: "";
+  position: absolute;
+  width: 70px;
+  height: 70px;
+  background: var(--canvas);
+  border-radius: 50%;
+}
+
+.circular-progress::after {
+  content: attr(style); /* This is a hack to get the value, but we'll use innerHTML in TS if needed */
+  position: absolute;
+  font-size: var(--fs-sm);
   font-weight: 700;
 }
+
+.system-dashboard {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.warning-badge-orange { background-color: var(--color-orange); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
+.warning-badge { background-color: var(--danger); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
+
+.list-section {
+  flex: 1.3;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1rem 1.5rem 0 0;
+  border-right: 1px solid var(--hairline);
+}
+
+.detail-panel {
+  flex: 0.7;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1rem 0 0 1.5rem;
+  overflow: hidden;
+}
+
+.detail-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--mute);
+}
+
+.detail-photo-wrapper {
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: 1px solid var(--hairline);
+  background: #f0f0f0;
+  border-radius: 8px;
+}
+
+.no-photo-state {
+  padding: 3rem;
+  text-align: center;
+  color: var(--mute);
+}
+
+
+
+
+/* Responsive Overrides */
+@media (max-width: 1440px) {
+  .location-main-content {
+    grid-template-columns: 1.5fr 1fr;
+  }
+}
+
+@media (max-width: 1024px) {
+  .location-main-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    overflow-y: auto;
+  }
+  .map-container-section {
+    height: 400px;
+    border-right: none;
+    border-bottom: 1px solid var(--hairline);
+  }
+}

src/views/Dashboard/HwDashboard.ts

@@ -6,10 +6,58 @@ import { createIcons, Laptop, Cpu, Shield, Zap, Monitor, AlertTriangle, ChevronR
 
 declare var Chart: any;
 
-let jobChartInstance: any = null;
 let donutChartInstance: any = null;
 
 export function renderHwDashboard(container: HTMLElement) {
+  // 전역 툴팁 헬퍼 함수 등록
+  (window as any).showSpecTooltip = function(event: MouseEvent, element: HTMLElement, type: string, count: number) {
+    const container = element.closest('.spec-bar-container');
+    if (!container) return;
+    const tooltip = container.querySelector('.spec-tooltip') as HTMLElement;
+    if (!tooltip) return;
+    const textSpan = tooltip.querySelector('.tooltip-text') as HTMLElement;
+    if (textSpan) {
+      let color = '';
+      let label = '';
+      if (type === 'under') {
+        color = '#EF4444';
+        label = '부족';
+      } else if (type === 'normal') {
+        color = '#10B981';
+        label = '적정';
+      } else if (type === 'over') {
+        color = '#F59E0B';
+        label = '오버';
+      } else if (type === 'win11') {
+        color = '#7928ca';
+        label = '윈도우 11 불가';
+      }
+      textSpan.innerHTML = `<span style="color: ${color}; font-weight: 800;">${label} ${count}대</span>`;
+    }
+    tooltip.style.left = event.clientX + 'px';
+    tooltip.style.top = event.clientY + 'px';
+    tooltip.style.opacity = '1';
+  };
+
+  (window as any).updateSpecTooltipPos = function(event: MouseEvent, element: HTMLElement) {
+    const container = element.closest('.spec-bar-container');
+    if (!container) return;
+    const tooltip = container.querySelector('.spec-tooltip') as HTMLElement;
+    if (tooltip) {
+      tooltip.style.left = event.clientX + 'px';
+      tooltip.style.top = event.clientY + 'px';
+    }
+  };
+
+  (window as any).hideSpecTooltip = function(element: HTMLElement) {
+    const container = element.closest('.spec-bar-container');
+    if (!container) return;
+    const tooltip = container.querySelector('.spec-tooltip') as HTMLElement;
+    if (tooltip) {
+      tooltip.style.opacity = '0';
+    }
+  };
+
   // 1. 개인용 PC 데이터 추출 (유형이 '개인PC'이거나 상태가 '재고' 또는 '대기' 상태인 PC 집계)
   const pcs = (state.masterData.pc || []).filter((a: any) => 
     a.asset_type === '개인PC' || 
@@ -18,19 +66,11 @@ export function renderHwDashboard(container: HTMLElement) {
 
   // 2. 1페이지 매거진 리포트(제목바 제거, '| 제목' 미니멀리즘 스타일) HTML 빌드
   container.innerHTML = `
-    <div class="view-container" style="overflow: hidden; padding: 0.4rem 1.2rem; background-color: #F8FAFC; height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.5rem; font-family: 'Pretendard', sans-serif; color: #1E293B;">
+    <div class="view-container" style="overflow: hidden; padding: 0; background-color: #ffffff; height: calc(100vh - var(--header-height) - 48px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0; 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.4rem;">
-        <div style="border-left: 4px solid #1E5149; padding-left: 8px;">
-          <h2 style="font-size: 1.65rem; font-weight: 850; color: #1E5149; margin: 0; letter-spacing: -0.5px; display: flex; align-items: center; gap: 0.6rem;">
-            개인 PC 자산 대시보드
-          </h2>
-        </div>
       
       <!-- 사용조직 필터 (브랜드 그린 매칭 칩 디자인) -->
-        <div style="display: flex; align-items: center; gap: 0.75rem;">
+      <div style="display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; padding: 0.6rem 1.2rem; background: #ffffff;">
-          <span style="font-size: 0.9rem; font-weight: 700; color: #475569; white-space: nowrap;">조직 필터:</span>
+        <div style="display: flex; align-items: center;">
           <div id="dashboard-dept-buttons" style="display: flex; gap: 0.3rem; background: #EEF2F6; padding: 4px; border-radius: 8px; border: 1px solid #E2E8F0;">
             <button class="dept-filter-btn active" data-dept="" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: #1E5149; color: white; cursor: pointer; transition: all 0.2s;">전체</button>
             <button class="dept-filter-btn" data-dept="한맥" style="padding: 6px 14px; font-size: 0.88rem; font-weight: 700; border-radius: 6px; border: none; background: transparent; color: #475569; cursor: pointer; transition: all 0.2s;">한맥</button>
@@ -43,168 +83,108 @@ export function renderHwDashboard(container: HTMLElement) {
         </div>
       </div>
 
-      <!-- 메인 2단 컬럼 레이아웃 (5:5 비율) -->
+      <!-- 상단 섹션 (전체 높이의 약 35% 차지, stat-card와 donut/aging 나열) -->
-      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; flex: 1; min-height: 0; margin-bottom: 0.1rem;">
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 33%; min-height: 0; flex-shrink: 0; padding: 0.5rem 0;">
         
-        <!-- 좌측 컬럼 (Left Column) -->
+        <!-- 상단 좌측: 핵심 지표 4개 격자 그리드 -->
-        <div style="display: flex; flex-direction: column; gap: 0.5rem; min-height: 0;">
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 100%;">
-          
-          <!-- 핵심 지표 카드 -->
-          <div class="stat-card" style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid !important; grid-template-columns: 1fr 1fr; gap: 0.6rem 0.9rem; flex-shrink: 0;">
           
           <!-- 1. 보유 자산 수량 -->
-            <div style="border-right: 1px solid #EEF2F6; border-bottom: 1px solid #EEF2F6; padding-bottom: 0.65rem; padding-right: 1.0rem;">
+          <div id="metric-card-total" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; transition: background-color 0.15s ease;" 
-              <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
+               onmouseover="this.style.backgroundColor='#F8FAFC';" 
-                <span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">보유 자산 수량</span>
+               onmouseout="this.style.backgroundColor='#ffffff';">
-              </div>
+            <div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #1E5149; padding-left: 8px; height: 1.4rem;">
-              <div style="display: flex; align-items: flex-end; justify-content: space-between;">
+              <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">보유 자산 수량</span>
-                <div>
-                  <div id="metric-total-pcs" style="font-size: 2.3rem; font-weight: 900; color: #1E5149; line-height: 1; margin-bottom: 0.35rem;">0대</div>
-                  <span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">전사 보유 개인용 PC</span>
-                </div>
             </div>
+            <div id="metric-total-pcs" style="font-size: 2.1rem; font-weight: 900; color: #1E5149; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
           </div>
 
           <!-- 2. 사양 부족 -->
-            <div id="card-under-spec" style="border-bottom: 1px solid #EEF2F6; padding-bottom: 0.65rem; padding-left: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
+          <div id="card-under-spec" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
-              <div style="border-left: 4px solid #EF4444; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
+            <div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #EF4444; padding-left: 8px; height: 1.4rem;">
-                <span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">사양 부족</span>
+              <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">사양 부족</span>
-              </div>
-              <div style="display: flex; align-items: flex-end; justify-content: space-between;">
-                <div>
-                  <div id="metric-under-spec" style="font-size: 2.3rem; font-weight: 900; color: #EF4444; line-height: 1; margin-bottom: 0.35rem;">0대</div>
-                  <span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 교체 권고 자산</span>
-                </div>
             </div>
+            <div id="metric-under-spec" style="font-size: 2.1rem; font-weight: 900; color: #EF4444; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
           </div>
 
           <!-- 3. 오버 스펙 -->
-            <div id="card-over-spec" style="border-right: 1px solid #EEF2F6; padding-top: 0.65rem; padding-right: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
+          <div id="card-over-spec" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
-              <div style="border-left: 4px solid #F59E0B; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
+            <div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #F59E0B; padding-left: 8px; height: 1.4rem;">
-                <span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">오버 스펙</span>
+              <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">오버 스펙</span>
-              </div>
-              <div style="display: flex; align-items: flex-end; justify-content: space-between;">
-                <div>
-                  <div id="metric-over-spec" style="font-size: 2.3rem; font-weight: 900; color: #F59E0B; line-height: 1; margin-bottom: 0.35rem;">0대</div>
-                  <span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">사양 회수 권고 자산</span>
-                </div>
             </div>
+            <div id="metric-over-spec" style="font-size: 2.1rem; font-weight: 900; color: #F59E0B; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
           </div>
 
           <!-- 4. 윈도우 11 불가 PC -->
-            <div id="card-win11-incompatible" style="padding-top: 0.65rem; padding-left: 1.0rem; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
+          <div id="card-win11-incompatible" style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; position: relative; overflow: hidden; cursor: pointer; transition: background-color 0.15s ease;">
-              <div style="border-left: 4px solid #3B82F6; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1;">
+            <div style="display: flex; align-items: center; z-index: 1; border-left: 4px solid #7928ca; padding-left: 8px; height: 1.4rem;">
-                <span style="font-size: 1.15rem; font-weight: 800; color: #1E293B; white-space: nowrap;">윈도우 11 불가 PC</span>
+              <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; letter-spacing: -0.3px;">윈도우 11 불가</span>
-              </div>
-              <div style="display: flex; align-items: flex-end; justify-content: space-between;">
-                <div>
-                  <div id="metric-win11-incompatible" style="font-size: 2.3rem; font-weight: 900; color: #3B82F6; line-height: 1; margin-bottom: 0.35rem;">0대</div>
-                  <span style="font-size: 1.05rem; color: #64748B; font-weight: 700; white-space: nowrap;">업데이트 미지원 하드웨어</span>
-                </div>
             </div>
+            <div id="metric-win11-incompatible" style="font-size: 2.1rem; font-weight: 900; color: #7928ca; line-height: 1.1; z-index: 1; margin-right: 2rem; margin-top: 1.8rem;">0대</div>
           </div>
 
         </div>
 
+        <!-- 상단 우측: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (두 개의 개별 레이아웃으로 배치) -->
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: 0; height: 100%;">
           
-          <!-- 등급별 자산 종합 현황 (좌측 하단 단독 배치 및 크기 확대) -->
+          <!-- 1열: 조직별 사용 비율 도넛 영역 -->
-          <div style="background: transparent; border-radius: 0; padding: 0.75rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.0; min-height: 0;">
+          <div style="background: #ffffff; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 0; height: 100%;">
-            
-            <div style="display: flex; flex-direction: column; gap: 0.9rem; justify-content: flex-start; padding-left: 0.5rem; height: 100%;">
-              <!-- 메인 제목 -->
-              <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.4rem; display: flex; align-items: center; line-height: 1; height: 1.7rem; flex-shrink: 0;">
-                <span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합 현황</span>
-              </div>
-              
-              <!-- 종합 매트릭스 테이블 (폰트 크기 1.25rem 으로 확대 및 꽉 채우기) -->
-              <div style="width: 100%; overflow-x: auto; flex: 1; display: flex; align-items: stretch;">
-                <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.25rem; height: 100%;">
-                  <thead>
-                    <tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
-                      <th style="padding: 14px 10px; width: 32%; font-size: 1.25rem;">구분 (등급)</th>
-                      <th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">보유량</th>
-                      <th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">운영중</th>
-                      <th style="padding: 14px 10px; text-align: center; width: 17%; font-size: 1.25rem;">재고</th>
-                      <th style="padding: 14px 10px; text-align: center; width: 17%; color: #EF4444; font-size: 1.25rem;">구매 필요</th>
-                    </tr>
-                  </thead>
-                  <tbody id="pc-grade-matrix-tbody">
-                    <!-- Dynamic Matrix Contents -->
-                  </tbody>
-                </table>
-              </div>
-            </div>
-            
-          </div>
-          
-        </div>
-
-        <!-- 우측 컬럼 (Right Column) -->
-        <div style="display: flex; flex-direction: column; gap: 0.5rem; min-height: 0;">
-          
-          <!-- 직무별 사양 적정성 분석 차트 카드 -->
-          <div style="background: transparent; border-radius: 0; padding: 0.7rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: flex; flex-direction: column; flex: 1.0; min-height: 0;">
-            <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0;">
-              <span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">직무별 사양 적정성 분석</span>
-            </div>
-            <div style="flex: 1; min-height: 0; width: 100%; position: relative;">
-              <canvas id="chart-job-scores" style="width: 100%; height: 100%;"></canvas>
-            </div>
-          </div>
-          
-          <!-- 우측 하단: 등급별 보유 비율 도넛 & 연도별 PC 노후도 통합 배치 (너비 축소) -->
-          <div style="background: transparent; border-radius: 0; padding: 0.7rem 0.25rem; border: none; border-bottom: 1px solid #E2E8F0; display: grid; grid-template-columns: 1.15fr 1.25fr; gap: 0.8rem; flex: 1.0; min-height: 0;">
-            
-            <!-- 1열: 등급별 보유 비율 도넛 영역 -->
-            <div style="display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.7rem; padding-top: 0.1rem; min-height: 0; height: 100%;">
             <!-- 서브 제목 -->
-              <div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.5rem;">
+            <div style="width: 100%; border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.15rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
-                <span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 보유 비율</span>
+              <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B;">조직별 사용 비율</span>
             </div>
             
-              <!-- 도넛 그래프 (크기 조절 및 수직 가운데 정렬) -->
+             <!-- 도넛 그래프 -->
             <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; min-height: 0;">
-                <div style="width: 180px; height: 180px; position: relative;">
+              <div style="width: 170px; height: 170px; position: relative;">
                 <canvas id="chart-overall-donut"></canvas>
               </div>
-                <!-- 커스텀 범례 (폰트 최적화) -->
+              <!-- 커스텀 범례 -->
-                <div style="display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; justify-content: center; align-items: center; margin-top: 10px; font-size: 1.05rem; font-weight: 700; color: #475569; width: 100%;">
+              <div style="display: flex; flex-wrap: wrap; gap: 0.15rem 0.35rem; justify-content: center; align-items: center; margin-top: 6px; font-size: 0.8rem; font-weight: 800; color: #64748B; width: 100%;">
-                  <div style="display: flex; align-items: center; gap: 4px;">
+                <div style="display: flex; align-items: center; gap: 3px;">
-                    <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #11302B;"></span>
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #D02121;"></span>
-                    <span>최상급</span>
+                  <span>한맥</span>
                 </div>
-                  <div style="display: flex; align-items: center; gap: 4px;">
+                <div style="display: flex; align-items: center; gap: 3px;">
-                    <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #1E8E7C;"></span>
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #F58120;"></span>
-                    <span>상급</span>
+                  <span>삼안</span>
                 </div>
-                  <div style="display: flex; align-items: center; gap: 4px;">
+                <div style="display: flex; align-items: center; gap: 3px;">
-                    <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10B981;"></span>
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3889C7;"></span>
-                    <span>중급</span>
+                  <span>장헌</span>
                 </div>
-                  <div style="display: flex; align-items: center; gap: 4px;">
+                <div style="display: flex; align-items: center; gap: 3px;">
-                    <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #F59E0B;"></span>
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #79B2D9;"></span>
-                    <span>보급</span>
+                  <span>한라</span>
                 </div>
-                  <div style="display: flex; align-items: center; gap: 4px;">
+                <div style="display: flex; align-items: center; gap: 3px;">
-                    <span style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #EF4444;"></span>
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #10B981;"></span>
-                    <span>교체 대상</span>
+                  <span>기술개발센터</span>
+                </div>
+                <div style="display: flex; align-items: center; gap: 3px;">
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #133D84;"></span>
+                  <span>총괄기획실</span>
+                </div>
+                <div style="display: flex; align-items: center; gap: 3px;">
+                  <span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #94A3B8;"></span>
+                  <span>기타</span>
                 </div>
               </div>
             </div>
           </div>
 
-            <!-- 2열: 연도별 PC 노후도 및 교체 주기 예측 카드 (너비 줄임) -->
+          <!-- 2열: PC 노후도 영역 (표 잘림 방지를 위해 아래 패딩을 줄이고 overflow auto 설정) -->
-            <div style="display: flex; flex-direction: column; min-height: 0;">
+          <div style="background: #ffffff; padding: 1.5rem 1.5rem 0.5rem 1.5rem; display: flex; flex-direction: column; min-height: 0; height: 100%;">
-              <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.5rem;">
+            <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.35rem; display: flex; align-items: center; line-height: 1; flex-shrink: 0; height: 1.4rem;">
-                <span style="font-size: 1.25rem; font-weight: 850; color: #1E293B; white-space: nowrap;">연도별 PC 노후도 및 예측</span>
+              <span style="font-size: 1.1rem; font-weight: 850; color: #1E293B; white-space: nowrap;">PC 노후도</span>
             </div>
-              <div style="flex: 1; overflow: hidden; min-height: 0; padding-right: 0.2rem;">
+            <div style="flex: 1; overflow-y: auto; min-height: 0; padding-right: 0.1rem;">
-                <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.15rem;">
+              <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
                 <thead style="position: sticky; top: 0; background: white; z-index: 5;">
                   <tr style="border-bottom: 2px solid #1E5149; color: #475569; font-weight: 850;">
-                      <th style="padding: 12px 10px; width: 45%; font-size: 1.15rem;">구분 (연한)</th>
+                    <th style="padding: 6px 8px; width: 70%; font-size: 1.02rem; background: white;">구분 (연한)</th>
-                      <th style="padding: 12px 10px; text-align: center; width: 25%; font-size: 1.15rem;">보유</th>
+                    <th style="padding: 6px 8px; text-align: center; width: 30%; font-size: 1.02rem; background: white;">보유</th>
-                      <th style="padding: 12px 10px; text-align: center; width: 30%; font-size: 1.15rem;">권장 조치</th>
                   </tr>
                 </thead>
                 <tbody id="pc-aging-tbody">
@@ -213,11 +193,40 @@ export function renderHwDashboard(container: HTMLElement) {
               </table>
             </div>
           </div>
-          </div>
           
         </div>
         
       </div>
+
+      <!-- 하단 섹션 (등급별 자산 종합 현황 및 사양 적정성 분석 영역 - 높이 비율 65%로 확대) -->
+      <div style="background: #ffffff; padding: 1.5rem 0; display: flex; flex-direction: column; height: 65%; min-height: 0;">
+        <div style="display: flex; flex-direction: column; gap: 0.6rem; justify-content: flex-start; height: 100%;">
+          <!-- 메인 제목 -->
+          <div style="border-left: 4px solid #1E5149; padding-left: 8px; margin-bottom: 0.1rem; display: flex; align-items: center; line-height: 1; height: 1.6rem; flex-shrink: 0;">
+            <span style="font-size: 1.25rem; font-weight: 850; color: #1E293B;">등급별 자산 종합현황</span>
+          </div>
+          
+          <!-- 종합 매트릭스 테이블 -->
+          <div style="width: 100%; overflow-y: hidden; flex: 1; border-radius: 0;">
+            <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 1.05rem;">
+              <thead style="position: sticky; top: 0; background: #F8FAFC; z-index: 10;">
+                <tr style="border-bottom: 2px solid #E2E8F0; color: #475569; font-weight: 850;">
+                  <th style="padding: 16px 10px; width: 18%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">구분 (등급)</th>
+                  <th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">보유량</th>
+                  <th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">운영중</th>
+                  <th style="padding: 16px 10px; text-align: center; width: 8%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">재고</th>
+                  <th style="padding: 16px 10px; text-align: center; width: 8%; color: #EF4444; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">부족분</th>
+                  <th style="padding: 16px 10px; text-align: center; width: 50%; font-size: 1.05rem; background: #F8FAFC; border-bottom: 2px solid #1E5149;">사양 적정성</th>
+                </tr>
+              </thead>
+              <tbody id="pc-grade-matrix-tbody">
+                <!-- Dynamic Matrix Contents -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      
     </div>
   `;
 
@@ -240,7 +249,16 @@ export function renderHwDashboard(container: HTMLElement) {
     });
 
     btn.classList.add('active');
-    btn.style.background = '#1E5149';
+    const dept = btn.getAttribute('data-dept') || '';
+    let bgColor = '#1E5149';
+    if (dept === '한맥') bgColor = '#D02121';
+    else if (dept === '삼안') bgColor = '#F58120';
+    else if (dept === '장헌') bgColor = '#3889C7';
+    else if (dept === '한라') bgColor = '#79B2D9';
+    else if (dept === '기술개발센터') bgColor = '#10B981';
+    else if (dept === '총괄기획실') bgColor = '#133D84';
+
+    btn.style.background = bgColor;
     btn.style.color = 'white';
 
     const selectedDept = btn.getAttribute('data-dept') || '';
@@ -266,13 +284,31 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
   });
 
   // 3. DB 기준 사양 데이터 맵핑 (state.masterData.jobSpecs 이용)
-  const jobSpecsMap: Record<string, number> = {};
+  const jobSpecsMap: Record<string, string> = {};
   if (state.masterData.jobSpecs) {
     state.masterData.jobSpecs.forEach((s: any) => {
-      jobSpecsMap[s.job_name] = s.min_score;
+      jobSpecsMap[s.job_name] = s.required_grade || '중급';
     });
   }
 
+  // 사용자 이름 → 세부 직무 맵 생성 (system_users.position 기준, 더 정확한 직무 구분)
+  const userPositionMap: Record<string, string> = {};
+  if (state.masterData.users) {
+    state.masterData.users.forEach((u: any) => {
+      if (u.user_name && u.position) {
+        userPositionMap[u.user_name.trim()] = u.position.trim();
+      }
+    });
+  }
+
+  const GRADE_RANK: Record<string, number> = {
+    'premium': 4, '최상급': 4,
+    'high': 3,    '상급': 3,
+    'normal': 2,  '중급': 2,
+    'entry': 1,   '보급': 1,
+    'replace': 0, '교체 대상': 0
+  };
+
   const jobScores: Record<string, { totalScore: number; count: number; avg: number }> = {};
   pcs.forEach((p: any) => {
     const score = calculatePcScoreDeductive(p.cpu, p.ram, p.gpu, p.purchase_date);
@@ -320,7 +356,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
       currentGradeKey = 'high';
     } else if (score >= 40) {
       currentGradeKey = 'normal';
-    } else if (score >= 20 && !win11Incompatible) {
+    } else if (score >= 20) {
       currentGradeKey = 'entry';
     } else {
       currentGradeKey = 'replace';
@@ -337,23 +373,32 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
       currentTarget.active++;
       currentTarget.activePcs.push(p);
 
-      // 직무 적정성 계산 (재직 중이고 실 사용자 매핑 자산만 검토 대상)
+      // 직무 적정성 계산: system_users.position 우선 조회 → asset_core.user_position fallback
-      const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+      const userName = (p[ASSET_SCHEMA.CURRENT_USER.key] || '').trim();
-      const standardScore = jobSpecsMap[job] !== undefined ? jobSpecsMap[job] : (jobScores[job]?.avg || 0);
+      const job = userPositionMap[userName] || p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
+      const requiredGrade = jobSpecsMap[job] || jobSpecsMap[p[ASSET_SCHEMA.USER_POSITION.key]] || '중급'; // 세부 직무 우선, 없으면 일반 직무, 없으면 기본 중급
+
+      // 미니 모달 표시용으로 해석된 세부 직무명 저장
+      p._resolved_position = job;
+
+      const actualGrade = currentGradeKey; // premium, high, normal, entry, replace 중 하나
+      
+      const reqRank = GRADE_RANK[requiredGrade] !== undefined ? GRADE_RANK[requiredGrade] : 2; // '중급' rank
+      const actRank = GRADE_RANK[actualGrade] !== undefined ? GRADE_RANK[actualGrade] : 0;
 
       let isUnder = false;
 
-      if (standardScore > 0 && job !== '재고PC') {
+      if (job !== '재고PC') {
-        if (score < standardScore * 0.6) {
+        if (win11Incompatible) {
           isUnder = true;
           p._spec_status = '사양 부족';
-        } else if (score > standardScore * 1.5 && !win11Incompatible) {
+        } else if (actRank < reqRank) {
+          isUnder = true;
+          p._spec_status = '사양 부족';
+        } else if (actRank > reqRank) {
           p._spec_status = '오버스펙';
           criticalList.push(p);
           overSpecCount++;
-        } else if (win11Incompatible) {
-          isUnder = true;
-          p._spec_status = '사양 부족';
         } else {
           p._spec_status = '적정';
         }
@@ -371,16 +416,11 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
         underSpecCount++;
         
         // 2. 사양 부족 시 교체받아야 할 직무별 권장 목표 등급 판정
-        let targetGradeKey: keyof typeof matrix;
+        let targetGradeKey: keyof typeof matrix = 'normal';
-        if (standardScore >= 85) {
+        if (requiredGrade === '최상급') targetGradeKey = 'premium';
-          targetGradeKey = 'premium';
+        else if (requiredGrade === '상급') targetGradeKey = 'high';
-        } else if (standardScore >= 70) {
+        else if (requiredGrade === '중급') targetGradeKey = 'normal';
-          targetGradeKey = 'high';
+        else if (requiredGrade === '보급') targetGradeKey = 'entry';
-        } else if (standardScore >= 40) {
-          targetGradeKey = 'normal';
-        } else {
-          targetGradeKey = 'entry'; // 교체 대상은 최소 보급형 사양으로 교체
-        }
 
         const targetGrade = matrix[targetGradeKey];
         targetGrade.under++;
@@ -403,20 +443,79 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
   // 6. 종합 매트릭스 테이블 렌더링 및 바인딩
   const matrixTbody = document.getElementById('pc-grade-matrix-tbody')!;
 
+  const getSpecStatusCounts = (activePcsList: any[]) => {
+    let win11 = 0;
+    let under = 0;
+    let normal = 0;
+    let over = 0;
+    activePcsList.forEach(p => {
+      if (isWindows11Incompatible(p.cpu, p.ram)) win11++;
+      else if (p._spec_status === '사양 부족') under++;
+      else if (p._spec_status === '오버스펙') over++;
+      else normal++;
+    });
+    return { win11, under, normal, over };
+  };
+  
+  const maxTotal = Math.max(
+    matrix.premium.total,
+    matrix.high.total,
+    matrix.normal.total,
+    matrix.entry.total,
+    matrix.replace.total
+  );
+
   const renderMatrixRow = (gradeKey: keyof typeof matrix, label: string, color: string, shortage: number) => {
     const data = matrix[gradeKey];
     const totalRate = filtered.length > 0 ? Math.round((data.total / filtered.length) * 100) : 0;
     
-    const cellStyle = `padding: 14px 12px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.25rem;`;
+    const cellStyle = `padding: 22px 8px; text-align: center; font-weight: 700; cursor: pointer; transition: background 0.2s; font-size: 1.05rem;`;
     const hoverEvents = `onmouseover="this.style.background='#F1F5F9'" onmouseout="this.style.background='none'"`;
     
+    // 사양 적정성 분석 데이터 계산 (운영중인 자산만)
+    const { win11, under, normal, over } = getSpecStatusCounts(data.activePcs);
+    const activeCount = data.active;
+    
+    const win11Pct = activeCount > 0 ? (win11 / activeCount) * 100 : 0;
+    const underPct = activeCount > 0 ? (under / activeCount) * 100 : 0;
+    const normalPct = activeCount > 0 ? (normal / activeCount) * 100 : 0;
+    const overPct = activeCount > 0 ? (over / activeCount) * 100 : 0;
+
+    const rowTotal = data.total;
+    const barWidthPct = maxTotal > 0 ? (rowTotal / maxTotal) * 100 : 0;
+
+    let barGraphHtml = '';
+    if (activeCount > 0) {
+      barGraphHtml = `
+        <div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
+          <!-- 게이지 바 (보유량 비례) -->
+          <div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: ${barWidthPct}%; min-width: 15px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
+            ${win11 > 0 ? `<div style="width: ${win11Pct}%; background: #7928ca; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="윈도우 11 불가: ${win11}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="윈도우 11 불가" onmouseover="showSpecTooltip(event, this, 'win11', ${win11}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+            ${under > 0 ? `<div style="width: ${underPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${under}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${under}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+            ${normal > 0 ? `<div style="width: ${normalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${normal}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${normal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+            ${over > 0 ? `<div style="width: ${overPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${over}대" class="spec-segment-btn" data-grade="${gradeKey}" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${over}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+          </div>
+          <!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
+          <div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: #1E293B; color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
+            <span class="tooltip-text"></span>
+            <div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E293B;"></div>
+          </div>
+        </div>
+      `;
+    } else {
+      barGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
+    }
+    
     return `
-      <tr style="border-bottom: 1px solid #F1F5F9;">
+      <tr style="border-bottom: 1px solid #E2E8F0;">
-        <td style="padding: 14px 12px; font-weight: 800; color: ${color}; font-size: 1.25rem;">${label}</td>
+        <td style="padding: 22px 10px; font-weight: 800; color: ${color}; font-size: 1.05rem;">${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="total" style="${cellStyle}" ${hoverEvents}>${data.total}대 <span style="font-size:0.88rem; 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}>${shortage}대</td>
+        <td style="padding: 22px 8px; text-align: center; font-weight: 700; font-size: 1.05rem; vertical-align: middle;">
+          ${barGraphHtml}
+        </td>
       </tr>
     `;
   };
@@ -437,7 +536,34 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
   
   const totalShortage = premiumShortage + highShortage + normalShortage + entryShortage + replaceShortage;
 
-  const cellStyleHeader = `padding: 14px 12px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.25rem;`;
+  const totalActivePcs = filtered.filter(p => !isStock(p));
+  const { win11: totWin11, under: totUnder, normal: totNormal, over: totOver } = getSpecStatusCounts(totalActivePcs);
+  const totUnderPct = totalActive > 0 ? (totUnder / totalActive) * 100 : 0;
+  const totNormalPct = totalActive > 0 ? (totNormal / totalActive) * 100 : 0;
+  const totOverPct = totalActive > 0 ? (totOver / totalActive) * 100 : 0;
+
+  let totBarGraphHtml = '';
+  if (totalActive > 0) {
+    totBarGraphHtml = `
+      <div style="position: relative; display: inline-block; width: 100%; max-width: 100%; text-align: left;" class="spec-bar-container">
+        <!-- 게이지 바 (합계는 100% 너비) -->
+        <div class="spec-bar-wrapper" style="display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: #EEF2F6; width: 100%; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); cursor: pointer;">
+          ${totUnder > 0 ? `<div style="width: ${totUnderPct}%; background: #EF4444; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="사양 부족: ${totUnder}대" class="spec-segment-btn" data-grade="all" data-spec-status="사양 부족" onmouseover="showSpecTooltip(event, this, 'under', ${totUnder}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+          ${totNormal > 0 ? `<div style="width: ${totNormalPct}%; background: #1E5149; border-right: 2px solid #ffffff; cursor: pointer; transition: opacity 0.15s;" title="적정 사양: ${totNormal}대" class="spec-segment-btn" data-grade="all" data-spec-status="적정" onmouseover="showSpecTooltip(event, this, 'normal', ${totNormal}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+          ${totOver > 0 ? `<div style="width: ${totOverPct}%; background: #F59E0B; cursor: pointer; transition: opacity 0.15s;" title="오버 스펙: ${totOver}대" class="spec-segment-btn" data-grade="all" data-spec-status="오버스펙" onmouseover="showSpecTooltip(event, this, 'over', ${totOver}); this.style.opacity='0.85';" onmousemove="updateSpecTooltipPos(event, this);" onmouseout="hideSpecTooltip(this); this.style.opacity='1';"></div>` : ''}
+        </div>
+        <!-- 마우스 오버 시 나타날 커스텀 말풍선 툴팁 -->
+        <div class="spec-tooltip" style="position: fixed; transform: translate(-50%, -100%); margin-top: -10px; background: #1E293B; color: #ffffff; padding: 6px 10px; border-radius: 6px; font-size: 11px; white-space: nowrap; box-shadow: 0 4px 6px rgba(0,0,0,0.15); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 9999; display: flex; gap: 8px; align-items: center;">
+          <span class="tooltip-text"></span>
+          <div style="position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1E293B;"></div>
+        </div>
+      </div>
+    `;
+  } else {
+    totBarGraphHtml = `<span style="font-size: 0.88rem; color: #94A3B8; font-weight: 550;">운영중 자산 없음</span>`;
+  }
+
+  const cellStyleHeader = `padding: 12px 10px; text-align: center; font-weight: 800; cursor: pointer; transition: background 0.2s; background: #F8FAFC; font-size: 1.05rem;`;
   const hoverEventsHeader = `onmouseover="this.style.background='#EEF2F6'" onmouseout="this.style.background='#F8FAFC'"`;
 
   matrixTbody.innerHTML = `
@@ -445,14 +571,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     ${renderMatrixRow('high', '상급 PC (70점 ~ 85점)', '#1E8E7C', highShortage)}
     ${renderMatrixRow('normal', '중급 PC (40점 ~ 70점)', '#10B981', normalShortage)}
     ${renderMatrixRow('entry', '보급 PC (20점 ~ 40점)', '#F59E0B', entryShortage)}
-    ${renderMatrixRow('replace', '교체 대상 PC (20점 미만 또는 Win11 불가)', '#EF4444', replaceShortage)}
+    ${renderMatrixRow('replace', '교체 대상 PC (20점 미만)', '#EF4444', replaceShortage)}
-    <tr style="background: #F8FAFC; border-top: 2px solid #E2E8F0; font-weight: 800;">
-      <td style="padding: 14px 12px; color: #1E293B; font-weight: 800; font-size: 1.25rem;">합계 (Total)</td>
-      <td class="matrix-cell" data-grade="all" data-type="total" style="${cellStyleHeader}" ${hoverEventsHeader}>${totalPcs}대 <span style="font-size:1.125rem; 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}>${totalShortage}대</td>
-    </tr>
   `;
 
   // 셀별 동적 클릭 리스너 바인딩
@@ -477,7 +596,7 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
         if (t === 'total') return '보유';
         if (t === 'active') return '운영중';
         if (t === 'stock') return '재고';
-        if (t === 'under') return '구매 필요';
+        if (t === 'under') return '부족분';
         return '';
       };
 
@@ -509,6 +628,48 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
     });
   });
 
+  // 바그래프 세그먼트 또는 텍스트 클릭 리스너 설정
+  const handleSpecClick = (e: Event) => {
+    e.stopPropagation();
+    const target = e.currentTarget as HTMLElement;
+    const grade = target.getAttribute('data-grade')!;
+    const status = target.getAttribute('data-spec-status')!;
+
+    let targetPcs: any[] = [];
+    const filterFn = (p: any) => {
+      if (status === '윈도우 11 불가') {
+        return isWindows11Incompatible(p.cpu, p.ram);
+      } else if (status === '사양 부족') {
+        return !isWindows11Incompatible(p.cpu, p.ram) && p._spec_status === '사양 부족';
+      } else {
+        return p._spec_status === status;
+      }
+    };
+
+    if (grade === 'all') {
+      targetPcs = filtered.filter(p => !isStock(p) && filterFn(p));
+    } else {
+      const data = matrix[grade as keyof typeof matrix];
+      targetPcs = data.activePcs.filter(filterFn);
+    }
+
+    const getGradeLabel = (g: string) => {
+      if (g === 'premium') return '최상급 PC';
+      if (g === 'high') return '상급 PC';
+      if (g === 'normal') return '중급 PC';
+      if (g === 'entry') return '보급 PC';
+      if (g === 'replace') return '교체 대상 PC';
+      return '전체 PC';
+    };
+
+    const title = `${getGradeLabel(grade)} - ${status} 자산 목록`;
+    showMiniListModal(title, targetPcs);
+  };
+
+  matrixTbody.querySelectorAll('.spec-segment-btn, .spec-text-btn').forEach(btn => {
+    btn.addEventListener('click', handleSpecClick);
+  });
+
   // 7. 연도별 PC 노후도 집계 및 렌더링
   const agingCounts = {
     immediate: [] as any[], // 7년 이상
@@ -532,23 +693,20 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
 
   const agingTbody = document.getElementById('pc-aging-tbody')!;
   
-  const renderAgingRow = (label: string, list: any[], badgeText: string, badgeStyle: string, ageGroupKey: string) => {
+  const renderAgingRow = (label: string, list: any[], 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:10px 10px; font-weight:700; color:#334155; font-size: 1.15rem;">${label}</td>
+        <td style="padding:5px 8px; font-weight:700; color:#334155; font-size: 1.05rem;">${label}</td>
-        <td style="padding:10px 10px; text-align:center; font-weight:700; color:#334155; font-size: 1.15rem;">${list.length}대</td>
+        <td style="padding:5px 8px; text-align:center; font-weight:700; color:#334155; font-size: 1.05rem;">${list.length}대</td>
-        <td style="padding:10px 10px; text-align:center;">
-          <span style="padding:2px 8px; border-radius:4px; font-size:14px; font-weight:800; ${badgeStyle}">${badgeText}</span>
-        </td>
       </tr>
     `;
   };
 
   agingTbody.innerHTML = `
-    ${renderAgingRow('즉시 교체 (7년 이상)', agingCounts.immediate, '즉시 교체', 'background:#FFF1F2; color:#EF4444; border:1px solid #FCA5A5;', 'immediate')}
+    ${renderAgingRow('즉시 교체 (7년 이상)', agingCounts.immediate, 'immediate')}
-    ${renderAgingRow('교체 검토 (3년 ~ 7년)', agingCounts.review, '교체 검토', 'background:#FFF7ED; color:#D97706; border:1px solid #FCD34D;', 'review')}
+    ${renderAgingRow('교체 검토 (3년 ~ 7년)', agingCounts.review, 'review')}
-    ${renderAgingRow('정상 운용 (1년 ~ 3년)', agingCounts.normal, '정상 운용', 'background:#ECFDF5; color:#059669; border:1px solid #A7F3D0;', 'normal')}
+    ${renderAgingRow('정상 운용 (1년 ~ 3년)', agingCounts.normal, 'normal')}
-    ${renderAgingRow('최신 도입 (1년 미만)', agingCounts.fresh, '최신 도입', 'background:#F0FDF4; color:#16A34A; border:1px solid #BBF7D0;', 'fresh')}
+    ${renderAgingRow('최신 도입 (1년 미만)', agingCounts.fresh, 'fresh')}
   `;
 
   agingTbody.querySelectorAll('.aging-row').forEach(row => {
@@ -566,14 +724,14 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
   });
 
   // 8. 요약 지표 카드 클릭 리스너 설정
-  const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean) => {
+  const bindCardClick = (id: string, gradeTitle: string, filterFn: (p: any) => boolean, hoverBgColor: string) => {
     const card = document.getElementById(id)!;
     if (!card) return;
     card.style.cursor = 'pointer';
-    card.style.transition = 'opacity 0.2s';
+    card.style.transition = 'background-color 0.15s ease';
     
-    card.onmouseover = () => { card.style.opacity = '0.7'; };
+    card.onmouseover = () => { card.style.backgroundColor = hoverBgColor; };
-    card.onmouseout = () => { card.style.opacity = '1'; };
+    card.onmouseout = () => { card.style.backgroundColor = '#ffffff'; };
 
     card.onclick = () => {
       const pcsInGrade = filtered.filter(filterFn);
@@ -582,54 +740,51 @@ function updateDashboardData(pcs: any[], selectedDept: string) {
   };
 
   // 사양 부족 / 오버 스펙 / 윈도우 11 불가 클릭 리스너 설정
-  bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족');
+  bindCardClick('card-under-spec', '사양 부족 대상', p => p._spec_status === '사양 부족', '#FEF2F2');
-  bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙');
+  bindCardClick('card-over-spec', '오버 스펙 대상', p => p._spec_status === '오버스펙', '#FFFBEB');
-  bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram));
+  bindCardClick('card-win11-incompatible', '윈도우 11 업그레이드 불가 PC', p => isWindows11Incompatible(p.cpu, p.ram), '#F5F3FF');
 
-  // 9. 직무별 사양 적정성 대수 연산 및 차트 데이터 셋 구성 (누적 막대 그래프화)
+  // 9. 조직별 사용 비율 집계 (전체 개인용 PC 기준)
-  const activeJobs = Array.from(
+  const deptCounts: Record<string, number> = {
-    new Set(filtered.map((p: any) => p[ASSET_SCHEMA.USER_POSITION.key] || '미분류').filter(j => j !== '재고PC'))
+    '한맥': 0,
-  ).sort();
+    '삼안': 0,
+    '장헌': 0,
+    '한라': 0,
+    '기술개발센터': 0,
+    '총괄기획실': 0,
+    '기타': 0
+  };
 
-  const underData: number[] = [];
+  pcs.forEach((p: any) => {
-  const normalData: number[] = [];
+    const dept = String(p[ASSET_SCHEMA.CURRENT_DEPT.key] || '').trim();
-  const overData: number[] = [];
+    let matched = false;
-
+    for (const key of Object.keys(deptCounts)) {
-  activeJobs.forEach(job => {
+      if (key !== '기타' && dept.includes(key)) {
-    const jobPcs = filtered.filter((p: any) => (p[ASSET_SCHEMA.USER_POSITION.key] || '미분류') === job);
+        deptCounts[key]++;
-    const totalCount = jobPcs.length;
+        matched = true;
-    if (totalCount === 0) {
+        break;
-      underData.push(0);
-      normalData.push(0);
-      overData.push(0);
-      return;
       }
-    let under = 0;
+    }
-    let normal = 0;
+    if (!matched) {
-    let over = 0;
+      deptCounts['기타']++;
-
-    jobPcs.forEach(p => {
-      const stockYn = isStock(p);
-      if (!stockYn) {
-        if (p._spec_status === '사양 부족') { under++; }
-        else if (p._spec_status === '오버스펙') { over++; }
-        else { normal++; }
-      } else {
-        normal++; // 예외 폴백
     }
   });
 
-    underData.push(under);
+  const deptChartData = [
-    normalData.push(normal);
+    { label: '한맥', count: deptCounts['한맥'], color: '#D02121' },
-    overData.push(over);
+    { label: '삼안', count: deptCounts['삼안'], color: '#F58120' },
-  });
+    { label: '장헌', count: deptCounts['장헌'], color: '#3889C7' },
+    { label: '한라', count: deptCounts['한라'], color: '#79B2D9' },
+    { label: '기술개발센터', count: deptCounts['기술개발센터'], color: '#10B981' },
+    { label: '총괄기획실', count: deptCounts['총괄기획실'], color: '#133D84' },
+    { label: '기타', count: deptCounts['기타'], color: '#94A3B8' }
+  ];
 
-  // 10. 차트들 렌더링 호출
+  // 10. 도넛 차트 렌더링 호출
-  renderChart(activeJobs, underData, normalData, overData, filtered);
+  renderDonutChart(deptChartData);
-  renderDonutChart(matrix.premium.total, matrix.high.total, matrix.normal.total, matrix.entry.total, matrix.replace.total);
 
   // 전역 상태 등록
-  state.activeCharts = [jobChartInstance, donutChartInstance];
+  state.activeCharts = [donutChartInstance];
 }
 
 /**
@@ -695,7 +850,7 @@ function showMiniListModal(title: string, list: any[]) {
                   return `
                     <tr style="border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.2s;" class="mini-modal-row" data-id="${pc.id}" onmouseover="this.style.background='#F8FAFC'" onmouseout="this.style.background='none'">
                       <td style="padding: 12px 4px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${user}">${user}</td>
-                      <td style="padding: 12px 4px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc.user_position || '-'})">${pc.current_dept || '-'} (${pc.user_position || '-'})</td>
+                      <td style="padding: 12px 4px; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})">${pc.current_dept || '-'} (${pc._resolved_position || pc.user_position || '-'})</td>
                       <td style="padding: 12px 4px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${spec}">${spec}</td>
                       <td style="padding: 12px 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${badgeHTML}${scoreHTML}</td>
                       <td style="padding: 12px 4px; font-family: monospace; color: #475569; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="${pc.asset_code || '-'}">${pc.asset_code || '-'}</td>
@@ -746,144 +901,12 @@ function showMiniListModal(title: string, list: any[]) {
   });
 }
 
-/**
- * Chart.js 가로형 100% 스택 막대 차트 (라이트 테마 튜닝)
- */
-function renderChart(labels: string[], underData: number[], normalData: number[], overData: number[], currentFiltered: any[]) {
-  const ctx = document.getElementById('chart-job-scores') as HTMLCanvasElement;
-  if (!ctx || typeof Chart === 'undefined') return;
 
-  if (jobChartInstance) {
-    jobChartInstance.destroy();
-    jobChartInstance = null;
-  }
-
-  jobChartInstance = new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: labels,
-      datasets: [
-        {
-          label: '사양 부족',
-          data: underData,
-          backgroundColor: 'rgba(239, 68, 68, 0.85)', // Rose Red
-          borderColor: 'rgb(239, 68, 68)',
-          borderWidth: 1,
-          borderRadius: 4,
-          barPercentage: 0.45,
-          categoryPercentage: 0.8
-        },
-        {
-          label: '적정 사양',
-          data: normalData,
-          backgroundColor: 'rgba(30, 81, 73, 0.85)', // Hanmac Green
-          borderColor: 'rgb(30, 81, 73)',
-          borderWidth: 1,
-          borderRadius: 4,
-          barPercentage: 0.45,
-          categoryPercentage: 0.8
-        },
-        {
-          label: '오버 스펙',
-          data: overData,
-          backgroundColor: 'rgba(217, 119, 6, 0.85)', // Amber Orange
-          borderColor: 'rgb(217, 119, 6)',
-          borderWidth: 1,
-          borderRadius: 4,
-          barPercentage: 0.45,
-          categoryPercentage: 0.8
-        }
-      ]
-    },
-    options: {
-      indexAxis: 'y', 
-      responsive: true,
-      maintainAspectRatio: false,
-      onHover: (event: any, activeElements: any[]) => {
-        event.chart.canvas.style.cursor = activeElements.length ? 'pointer' : 'default';
-      },
-      onClick: (event: any, activeElements: any[]) => {
-        if (activeElements && activeElements.length > 0) {
-          const activeElement = activeElements[0];
-          const datasetIndex = activeElement.datasetIndex; // 0: 사양 부족, 1: 적정 사양, 2: 오버스펙
-          const index = activeElement.index; // 직무군 인덱스
-          
-          const clickedJob = labels[index];
-          const statusLabels = ['사양 부족', '적정', '오버스펙'];
-          const clickedStatus = statusLabels[datasetIndex] || '적정';
-          
-          // 해당 직무군과 사양 상태가 매칭되는 자산 목록 필터링
-          const matchedPcs = currentFiltered.filter((p: any) => {
-            const job = p[ASSET_SCHEMA.USER_POSITION.key] || '미분류';
-            if (job !== clickedJob) return false;
-            
-            const stockYn = p.hw_status === '재고' || 
-                            p.hw_status === '대기' || 
-                            !(p.user_current || '').trim();
-            
-            let specStatus = '적정';
-            if (!stockYn) {
-              specStatus = p._spec_status || '적정';
-            }
-            return specStatus === clickedStatus;
-          });
-          
-          showMiniListModal(`${clickedJob} - ${clickedStatus === '적정' ? '적정 사양' : (clickedStatus === '오버스펙' ? '오버 스펙' : clickedStatus)} 자산`, matchedPcs);
-        }
-      },
-      plugins: {
-        legend: {
-          position: 'top',
-          align: 'end',
-          labels: {
-            font: { family: 'Pretendard', size: 16, weight: '700' },
-            color: '#475569',
-            boxWidth: 12,
-            boxHeight: 12,
-            usePointStyle: true
-          }
-        },
-        tooltip: {
-          titleFont: { family: 'Pretendard', size: 12, weight: '700' },
-          bodyFont: { family: 'Pretendard', size: 12 },
-          callbacks: {
-            label: function (context: any) {
-               const datasetLabel = context.dataset.label;
-               const value = context.raw; // 실제 대수
-               const total = context.chart.data.datasets.reduce((sum: number, dataset: any) => sum + dataset.data[context.dataIndex], 0);
-               const percentage = total > 0 ? Math.round((value / total) * 100) : 0;
-               return `${datasetLabel}: ${value}대 (${percentage}%)`;
-            }
-          }
-        }
-      },
-      scales: {
-        x: {
-          stacked: true,
-          ticks: {
-            callback: (val: any) => `${val}대`,
-            font: { family: 'Pretendard', size: 14, weight: '600' },
-            color: '#64748B'
-          },
-          grid: { color: '#EEF2F6' }
-        },
-        y: {
-          stacked: true,
-          ticks: {
-            font: { family: 'Pretendard', size: 16, weight: '700' },
-            color: '#475569'
-          },
-          grid: { display: false }
-        }
-      }
-    }
-  });
-}
 
 /**
  * 실시간 사양 적정률 원형 도넛 그래프 (Active Spec Rate)
  */
-function renderDonutChart(premium: number, high: number, normal: number, entry: number, replace: number) {
+function renderDonutChart(deptData: { label: string; count: number; color: string }[]) {
   const ctx = document.getElementById('chart-overall-donut') as HTMLCanvasElement;
   if (!ctx || typeof Chart === 'undefined') return;
 
@@ -892,21 +915,15 @@ function renderDonutChart(premium: number, high: number, normal: number, entry:
     donutChartInstance = null;
   }
 
-  const total = premium + high + normal + entry + replace;
+  const total = deptData.reduce((sum, d) => sum + d.count, 0);
 
   donutChartInstance = new Chart(ctx, {
     type: 'doughnut',
     data: {
-      labels: ['최상급', '상급', '중급', '보급', '교체 대상'],
+      labels: deptData.map(d => d.label),
       datasets: [{
-        data: [premium, high, normal, entry, replace],
+        data: deptData.map(d => d.count),
-        backgroundColor: [
+        backgroundColor: deptData.map(d => d.color),
-          '#11302B', // premium (Hanmac Dark Green)
-          '#1E8E7C', // high (Hanmac Teal)
-          '#10B981', // normal (Hanmac Mint)
-          '#F59E0B', // entry (Yellow-Orange)
-          '#EF4444'  // replace (Red)
-        ],
         borderColor: '#ffffff',
         borderWidth: 2
       }]

src/views/Dashboard/SwDashboard.ts

@@ -13,13 +13,13 @@ export function renderSwDashboard(container: HTMLElement) {
   // 통합 SW 데이터
   const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
 
-  allSw.forEach(sw => {
+  allSw.forEach((sw: any) => {
      const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
      const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
      const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
      const price = parseInt(priceStr, 10) || 0;
 
-     if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
+     if (sw.asset_type === '외부SW') {
        extQty += qty; extUsed += assigned; extTotal++;
        if (isSWExpiring(sw)) extExp++;
        if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
@@ -33,38 +33,38 @@ export function renderSwDashboard(container: HTMLElement) {
   const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;
 
   container.innerHTML = `
-    <div class="view-container">
+    <div class="view-container" style="background-color: var(--canvas); padding: 1.5rem 0;">
-      <h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
+      <h3 class="dashboard-section-title" style="padding: 0 2rem; margin-bottom: 1rem;">소프트웨어 라이선스 현황</h3>
       
-      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
+      <div class="dashboard-layout-2col mb-6">
-        <div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
+        <div class="dashboard-card clickable" data-action="ext-usage">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
+          <div class="stat-label">외부 소프트웨어 사용율</div>
-          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
+          <div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
-          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
+          <div class="stat-value text-primary">${extPer}%</div>
-          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
+          <div class="stat-progress-bar">
-            <div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
+            <div class="progress-fill" style="width: ${extPer}%;"></div>
           </div>
         </div>
-        <div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
+        <div class="dashboard-card clickable" data-action="int-usage">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
+          <div class="stat-label">내부 소프트웨어 현황</div>
-          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
+          <div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
-          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
+          <div class="stat-value text-primary">${intPer}%</div>
-           <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
+           <div class="stat-progress-bar">
-            <div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
+            <div class="progress-fill" style="width: ${intPer}%;"></div>
           </div>
         </div>
       </div>
 
-      <h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
+      <h3 class="dashboard-section-title" style="padding: 0 2rem; margin-bottom: 1rem;">2026년 누적 도입 비용 분석</h3>
       
-      <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
+      <div class="dashboard-layout-2col">
-        <div class="dashboard-card" style="min-height:auto;">
+        <div class="dashboard-card">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
+          <div class="stat-label">외부 SW 누적 비용 (2026)</div>
-          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
+          <div class="stat-value text-primary">₩ ${extCost2026.toLocaleString()}</div>
         </div>
-        <div class="dashboard-card" style="min-height:auto;">
+        <div class="dashboard-card">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
+          <div class="stat-label">내부 SW 누적 비용 (2026)</div>
-          <div style="font-size: 2.21rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
+          <div class="stat-value text-blue">₩ ${intCost2026.toLocaleString()}</div>
         </div>
       </div>
     </div>

src/views/List/PartsMasterListView.ts

@@ -34,9 +34,9 @@ export function renderPartsMasterList(container: HTMLElement) {
           width: '15%',
           render: c => {
             let badgeClass = 'badge-primary';
-            if (c.category === 'CPU') badgeClass = 'b-primary';
+            if (c.category === 'CPU') badgeClass = 'badge-primary';
-            else if (c.category === 'GPU') badgeClass = 'b-purple';
+            else if (c.category === 'GPU') badgeClass = 'badge-success';
-            else if (c.category === 'RAM') badgeClass = 'b-green';
+            else if (c.category === 'RAM') badgeClass = 'badge-warning';
             return `<span class="badge ${badgeClass}">${c.category}</span>`;
           }
         },
@@ -90,36 +90,35 @@ export function renderPartsMasterList(container: HTMLElement) {
         {
           header: '직무명',
           sortKey: 'job_name',
-          width: '15%',
+          width: '25%',
           render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
         },
         {
-          header: '권장 CPU 사양',
+          header: '요구 PC 등급',
-          sortKey: 'cpu_standard',
+          sortKey: 'required_grade',
-          render: j => formatInline(j.cpu_standard || '-')
-        },
-        {
-          header: '권장 RAM 사양',
-          sortKey: 'ram_standard',
-          width: '12%',
-          render: j => formatInline(j.ram_standard || '-')
-        },
-        {
-          header: '권장 GPU 사양',
-          sortKey: 'gpu_standard',
-          render: j => formatInline(j.gpu_standard || '-')
-        },
-        {
-          header: '기준 점수',
-          sortKey: 'min_score',
           align: 'center',
-          width: '10%',
+          width: '20%',
-          render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
+          render: j => {
+            const grade = j.required_grade || '중급';
+            let badgeClass = 'b-green';
+            let style = 'background-color: #10B981; color: white;';
+            if (grade === '최상급') {
+              badgeClass = 'b-purple';
+              style = 'background-color: #7C3AED; color: white;';
+            } else if (grade === '상급') {
+              badgeClass = 'b-primary';
+              style = 'background-color: #4F46E5; color: white;';
+            } else if (grade === '보급') {
+              badgeClass = 'b-yellow';
+              style = 'background-color: #F59E0B; color: white;';
+            }
+            return `<span class="badge ${badgeClass}" style="${style} padding: 4px 10px; font-size: 0.85rem; font-weight: 700;">${grade}</span>`;
+          }
         },
         {
           header: '비고',
           sortKey: 'remarks',
-          width: '20%',
+          width: '50%',
           render: j => formatInline(j.remarks || '-')
         }
       ]
@@ -130,26 +129,36 @@ export function renderPartsMasterList(container: HTMLElement) {
 }
 
 function renderSubTabs(container: HTMLElement) {
-  const header = container.querySelector('.page-header');
+  const searchBar = container.querySelector('.search-bar');
-  if (!header) return;
+  if (!searchBar) return;
+
+  // 기존에 생성된 탭 바가 있다면 제거하여 중복 방지 (스타일만 수정하는 최소 침습 방식)
+  const existingTabs = container.querySelector('.sub-tab-container');
+  if (existingTabs) existingTabs.remove();
 
   const tabContainer = document.createElement('div');
   tabContainer.className = 'sub-tab-container';
-  tabContainer.style.cssText = 'display: flex; gap: 16px; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 0;';
+  tabContainer.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; border-bottom: 1px solid var(--hairline); background: var(--canvas);';
 
   const tab1Active = activePartsMasterSubTab === 'parts-master';
   const tab2Active = activePartsMasterSubTab === 'job-spec';
 
   tabContainer.innerHTML = `
-    <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab1Active ? 'var(--primary-color)' : 'transparent'};">
+    <div style="display: flex; gap: 1rem;">
+      <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab1Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
         부품 표준 등급
       </button>
-    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 10px 16px; border: none; background: none; font-size: 14px; font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary-color)' : 'var(--text-muted)'}; position: relative; border-bottom: 3px solid ${tab2Active ? 'var(--primary-color)' : 'transparent'};">
+      <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab2Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
         직무별 기준 사양
       </button>
+    </div>
+    <div style="font-size: 0.8rem; color: #4B5563; font-weight: 700; display: flex; align-items: center; gap: 4px; background: #F3F4F6; padding: 5px 12px; border-radius: 6px; border: 1px dashed #D1D5DB; margin-bottom: 4px;">
+      <span>💡</span>
+      <span>${tab2Active ? '우측 상단의 [기준 사양 추가] 버튼을 누르거나, 테이블의 행을 클릭하여 관리할 수 있습니다.' : '우측 상단의 [표준 부품 추가] 버튼을 누르거나, 테이블의 행을 클릭하여 관리할 수 있습니다.'}</span>
+    </div>
   `;
 
-  header.parentNode!.insertBefore(tabContainer, header.nextSibling);
+  searchBar.parentNode!.insertBefore(tabContainer, searchBar);
 
   const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
   const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
@@ -168,4 +177,3 @@ function renderSubTabs(container: HTMLElement) {
     }
   });
 }
-

src/views/List/UserListView.ts

@@ -9,9 +9,10 @@ export function renderUserList(container: HTMLElement) {
     dataSource: () => state.masterData.users || [],
     searchKeys: ['emp_no', 'user_name', 'dept_name', 'position', 'status'],
     filterOptions: {
-      keywordLabel: '사번/이름/부서/직급 검색',
+      keywordLabel: '사번/이름/조직/직무 검색',
       showCorp: false,
       showDept: true,
+      showPosition: true,
       showType: false
     },
     onRowClick: (user) => openUserModal(user, 'view'),
@@ -38,7 +39,7 @@ export function renderUserList(container: HTMLElement) {
         render: u => formatInline(u.dept_name || '-')
       },
       {
-        header: '직급 (직무)',
+        header: '직무',
         sortKey: 'position',
         align: 'left',
         width: '25%',