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

fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조)
- HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회 - ListFactory: 동일하게 세부 직무명 우선 참조 - 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시 - 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영) - 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨
2026-06-29 10:03:07 +09:00 · 2026-06-18 19:48:23 +09:00 · 2026-06-18 15:56:51 +09:00 · 2026-06-17 09:28:06 +09:00 · 2026-06-17 09:25:16 +09:00 · 2026-06-17 09:22:31 +09:00
25 changed files with 4463 additions and 3227 deletions
--- a/index.html
+++ b/index.html
@@ -19,36 +19,6 @@
 </head>
 <body>
  <!-- Login Screen -->
  <div id="login-container" class="login-layout">
    <div class="login-card">
      <div class="login-header">
        <img src="/image 92.png" alt="Logo" class="login-logo" />
        <h2>ITAM 시스템</h2>
        <p>자산 관리 포털에 오신 것을 환영합니다</p>
      </div>
      <div id="login-selection" class="login-selection">
        <div class="role-card" data-role="admin">
          <div class="role-icon">
            <i data-lucide="settings"></i>
          </div>
          <h3>관리자</h3>
          <p>시스템 설정 및 자산 마스터 관리</p>
        </div>
        <div class="role-card" data-role="user">
          <div class="role-icon">
            <i data-lucide="monitor"></i>
          </div>
          <h3>실무자</h3>
          <p>자산 조회 및 현황 확인</p>
        </div>
      </div>
      <div class="login-footer">
        <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
      </div>
    </div>
  </div>
  <div class="app-layout" id="app-layout" style="display: none;">
    <!-- Single-Line Integrated Header -->
    <header class="main-header">
--- a/migrate_v6_parts_master.js
+++ b/migrate_v6_parts_master.js
@@ -0,0 +1,195 @@
 import mysql from 'mysql2/promise';
 import dotenv from 'dotenv';
 dotenv.config({ override: true });
 const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
 // 기존의 감점 계산 로직을 그대로 이용해 등급과 감점점수를 도출하는 헬퍼 함수
 function parseCpu(cpu) {
  if (!cpu) return { tier: '기타', deduction: 30 };
  const cpuUpper = cpu.toUpperCase().trim();
  if (cpuUpper === '-' || cpuUpper === '') return { tier: '기타', deduction: 30 };
  let tier = '기타';
  let deduction = 30;
  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
    tier = 'i9 / Ryzen 9';
    deduction = 0;
  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
    tier = 'i7 / Ryzen 7';
    deduction = 5;
  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
    tier = 'i5 / Ryzen 5';
    deduction = 15;
  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
    tier = 'i3 / Ryzen 3';
    deduction = 25;
  }
  // CPU 세대 감점 계산 (최대 -15점)
  let genDeduction = 0;
  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
  let gen = 0;
  if (intelMatch && intelMatch[1]) {
    const numStr = intelMatch[1];
    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
  }
  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
  let amdGen = 0;
  if (amdMatch && amdMatch[1] && !intelMatch) {
    const numStr = amdMatch[1];
    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
  }
  if (intelMatch) {
    if (gen >= 12) genDeduction = 0;
    else if (gen >= 10) genDeduction = 5;
    else if (gen >= 8) genDeduction = 10;
    else genDeduction = 15;
  } else if (amdMatch) {
    if (amdGen >= 5) genDeduction = 0;
    else if (amdGen >= 3) genDeduction = 5;
    else genDeduction = 10;
  } else {
    genDeduction = 15;
  }
  // 최종 등급 감점 + 세대 감점 합산
  return { tier, deduction: deduction + genDeduction };
 }
 function parseGpu(gpu) {
  if (!gpu) return { tier: 'C', deduction: 25 };
  const gpuUpper = gpu.toUpperCase().trim();
  if (gpuUpper === '-' || gpuUpper === '') return { tier: 'C', deduction: 25 };
  if (
    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
  ) {
    return { tier: 'S', deduction: 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')
  ) {
    return { tier: 'A', deduction: 5 };
  } else if (
    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
  ) {
    return { tier: 'B', deduction: 15 };
  } else {
    return { tier: 'C', deduction: 25 };
  }
 }
 function parseRam(ram) {
  if (!ram) return { tier: '부족', deduction: 25 };
  const ramUpper = ram.toUpperCase().trim();
  if (ramUpper === '-' || ramUpper === '') return { tier: '부족', deduction: 25 };
  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
  if (ramMatch && ramMatch[1]) {
    const ramVal = parseInt(ramMatch[1], 10);
    if (ramVal >= 32) return { tier: '최적', deduction: 0 };
    else if (ramVal >= 16) return { tier: '보통', deduction: 10 };
    else if (ramVal >= 8) return { tier: '주의', deduction: 20 };
  }
  return { tier: '부족', deduction: 25 };
 }
 async function runMigration() {
  console.log('🔄 DB 커넥션 연결 중...');
  const connection = await mysql.createConnection({
    host: DB_HOST,
    user: DB_USER,
    password: DB_PASS,
    database: DB_NAME,
    port: parseInt(DB_PORT || '3306')
  });
  try {
    console.log('⚙️ 1. hardware_components_master 테이블 생성...');
    await connection.query('DROP TABLE IF EXISTS hardware_components_master');
    await connection.query(`
      CREATE TABLE hardware_components_master (
        id INT AUTO_INCREMENT PRIMARY KEY,
        category VARCHAR(50) NOT NULL COMMENT 'CPU, GPU, RAM 등',
        component_name VARCHAR(255) NOT NULL UNIQUE COMMENT '부품 표준 명칭',
        score_tier VARCHAR(50) COMMENT '성능 등급',
        deduction INT DEFAULT 0 COMMENT '감점 점수',
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
    `);
    console.log('✅ 테이블 생성 완료.');
    console.log('🔍 2. 기존 asset_spec 테이블에서 부품명 조회...');
    const [specRows] = await connection.query('SELECT DISTINCT cpu, ram, gpu FROM asset_spec');
    const uniqueCpus = new Set();
    const uniqueGpus = new Set();
    const uniqueRams = new Set();
    specRows.forEach(row => {
      if (row.cpu && row.cpu.trim() !== '-' && row.cpu.trim() !== '') uniqueCpus.add(row.cpu.trim());
      if (row.gpu && row.gpu.trim() !== '-' && row.gpu.trim() !== '') uniqueGpus.add(row.gpu.trim());
      if (row.ram && row.ram.trim() !== '-' && row.ram.trim() !== '') uniqueRams.add(row.ram.trim());
    });
    // 만약 데이터가 너무 비어있을 경우를 대비하여 기본 대표 부품 몇 개 추가
    if (uniqueCpus.size === 0) {
      ['Intel Core i9-13900K', 'Intel Core i7-14700K', 'Intel Core i5-12400', 'AMD Ryzen 7 7800X3D', 'Intel Core i3-10100'].forEach(c => uniqueCpus.add(c));
    }
    if (uniqueGpus.size === 0) {
      ['NVIDIA GeForce RTX 4090', 'NVIDIA GeForce RTX 4070', 'NVIDIA GeForce RTX 3060', 'Intel Iris Xe Graphics', 'NVIDIA GeForce GTX 1660 Super'].forEach(g => uniqueGpus.add(g));
    }
    if (uniqueRams.size === 0) {
      ['8GB', '16GB', '32GB', '64GB'].forEach(r => uniqueRams.add(r));
    }
    console.log(`   - 추출된 CPU 개수: ${uniqueCpus.size}`);
    console.log(`   - 추출된 GPU 개수: ${uniqueGpus.size}`);
    console.log(`   - 추출된 RAM 개수: ${uniqueRams.size}`);
    console.log('💾 3. 마스터 테이블에 부품 데이터 및 감점 정보 삽입...');
    // CPU 삽입
    for (const cpu of uniqueCpus) {
      const { tier, deduction } = parseCpu(cpu);
      await connection.query(
        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        ['CPU', cpu, tier, deduction]
      );
    }
    // GPU 삽입
    for (const gpu of uniqueGpus) {
      const { tier, deduction } = parseGpu(gpu);
      await connection.query(
        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        ['GPU', gpu, tier, deduction]
      );
    }
    // RAM 삽입
    for (const ram of uniqueRams) {
      const { tier, deduction } = parseRam(ram);
      await connection.query(
        'INSERT IGNORE INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        ['RAM', ram, tier, deduction]
      );
    }
    console.log('✅ 마이그레이션이 성공적으로 완료되었습니다!');
  } catch (error) {
    console.error('❌ 마이그레이션 오류 발생:', error);
  } finally {
    await connection.end();
  }
 }
 runMigration();
--- a/server.js
+++ b/server.js
@@ -28,6 +28,40 @@ const pool = mysql.createPool({
  queueLimit: 0
 });
 // Database startup check (ensure job_spec_standards table exists)
 (async () => {
  let connection;
  try {
    connection = await pool.getConnection();
    await connection.query(`
      CREATE TABLE IF NOT EXISTS job_spec_standards (
        id INT AUTO_INCREMENT PRIMARY KEY,
        job_name VARCHAR(100) UNIQUE NOT NULL,
        cpu_standard VARCHAR(255),
        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);
  } finally {
    if (connection) connection.release();
  }
 })();
 // Error Handler
 const handleError = (res, err, label) => {
  console.error(`❌ [${label}] Error:`, err);
@@ -36,25 +70,24 @@ const handleError = (res, err, label) => {
 // --- Global Constants ---
 const CATEGORY_TABLE_MAP = {
-  pc: 'asset_pc',
+  pc: 'asset_core',
-  server: 'asset_server',
+  server: 'asset_core',
-  storage: 'asset_storage',
+  storage: 'asset_core',
-  network: 'asset_remote',
+  network: 'asset_core',
-  equipment: 'asset_equipment',
+  equipment: 'asset_core',
-  officeSupplies: 'asset_office_supplies',
+  officeSupplies: 'asset_core',
-  survey: 'asset_survey',
+  survey: 'asset_core',
-  vip: 'asset_vip',
+  vip: 'asset_core',
-  swInternal: 'sw_internal',
+  pcParts: 'asset_core',
-  swExternal: 'sw_external',
+  swInternal: 'asset_software_perpetual',
-  cloud: 'asset_cloud',
+  swExternal: 'asset_software_subscription',
  swUsers: 'asset_software_assignment',
  users: 'system_users',
  swUsers: 'sw_assignment',
  logs: 'asset_history'
 };
 const ASSET_TABLES = [
-  'asset_pc', 'asset_server', 'asset_storage', 'asset_remote', 
+  'asset_core'
  'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
 ];
 // --- API Endpoints ---
@@ -101,15 +134,17 @@ app.post('/api/:table/batch', async (req, res) => {
 // 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
 app.get('/api/assets/master', async (req, res) => {
  let connection;
  try {
-    const connection = await pool.getConnection();
+    connection = await pool.getConnection();
    const masterData = {
      pc: [], server: [], storage: [], network: [],
      equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
-      swInternal: [], swExternal: [], swUsers: [], users: [], logs: []
+      swInternal: [], swExternal: [], swUsers: [], users: [], logs: [], partsMaster: []
    };
    // Load from V3 Normalized Schema
    const [rows] = await connection.query(`
      SELECT 
        c.*, 
@@ -149,17 +184,22 @@ app.get('/api/assets/master', async (req, res) => {
    const [swUsers] = await connection.query('SELECT * FROM asset_software_assignment');
    const [users] = await connection.query('SELECT * FROM system_users');
    const [logs] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC');
    const [partsMaster] = await connection.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
    const [jobSpecs] = await connection.query('SELECT * FROM job_spec_standards ORDER BY job_name');
    masterData.swInternal = swInternal;
    masterData.swExternal = swExternal;
    masterData.swUsers = swUsers;
    masterData.users = users;
    masterData.logs = logs;
    masterData.partsMaster = partsMaster;
    masterData.jobSpecs = jobSpecs;
    connection.release();
    res.json(masterData);
  } catch (err) {
    handleError(res, err, 'MASTER DATA');
  } finally {
    if (connection) connection.release();
  }
 });
@@ -177,15 +217,11 @@ app.post('/api/asset/:category/save', async (req, res) => {
    const oldCore = oldCoreRows[0] || {};
    const oldSpec = oldSpecRows[0] || {};
    console.log(`🔍 [History Check] ID: ${asset.id}`);
    console.log(`   - Dept: [${oldCore.current_dept}] -> [${asset.current_dept}]`);
    console.log(`   - User: [${oldCore.user_current}] -> [${asset.user_current}]`);
    const historyLogs = [];
    const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
    const logUser = '관리자';
-    // 조직 변동 감지 (null/undefined/empty string 세이프 처리)
+    // 3.0.1 Core 변동 감지 (Dept, User)
    const oldDept = oldCore.current_dept || '';
    const newDept = asset.current_dept || '';
    if (newDept !== '' && oldDept !== newDept) {
@@ -198,7 +234,6 @@ app.post('/api/asset/:category/save', async (req, res) => {
        });
    }
    // 사용자 변동 감지
    const oldUser = oldCore.user_current || '';
    const newUser = asset.user_current || '';
    if (newUser !== '' && oldUser !== newUser) {
@@ -211,26 +246,27 @@ app.post('/api/asset/:category/save', async (req, res) => {
        });
    }
-    // 유형/용도 변경 감지
+    // 3.0.2 Spec 변동 감지 (CPU, RAM, GPU, OS, Mainboard 등)
-    const oldType = oldCore.asset_type || '';
+    const specFieldsToTrack = [
-    const newType = asset.asset_type || '';
+        { key: 'cpu', label: 'CPU' },
-    if (newType !== '' && oldType !== newType) {
+        { key: 'ram', label: 'RAM' },
-        historyLogs.push({
+        { key: 'gpu', label: 'GPU' },
-            event_type: 'ROLE_CHANGE',
+        { key: 'os', label: 'OS' },
-            details: `[유형 변경] ${oldType || '(없음)'} -> ${newType}`
+        { key: 'mainboard', label: '메인보드' }
-        });
+    ];
    }
-    const oldRole = oldCore.current_role || '';
+    specFieldsToTrack.forEach(field => {
-    const newRole = asset.current_role || '';
+        const oldVal = String(oldSpec[field.key] || '').trim();
-    if (newRole !== '' && oldRole !== newRole) {
+        const newVal = String(asset[field.key] || '').trim();
-        historyLogs.push({
+        if (newVal !== '' && oldVal !== newVal) {
-            event_type: 'ROLE_CHANGE',
+            historyLogs.push({
-            details: `[용도 변경] ${oldRole || '(없음)'} -> ${newRole}`
+                event_type: 'SPEC_CHANGE',
-        });
+                details: `[사양 변경] ${field.label}: ${oldVal || '(없음)'} -> ${newVal}`
-    }
+            });
        }
    });
-    // 상태 변경 감지
+    // 3.0.3 상태 변경 감지
    const oldStatus = oldSpec.hw_status || '';
    const newStatus = asset.hw_status || '';
    if (newStatus !== '' && oldStatus !== newStatus) {
@@ -240,8 +276,6 @@ app.post('/api/asset/:category/save', async (req, res) => {
        });
    }
    console.log(`   - Logs Generated: ${historyLogs.length}`);
    // 로그 일괄 삽입
    for (const log of historyLogs) {
        await connection.query(
@@ -256,8 +290,23 @@ app.post('/api/asset/:category/save', async (req, res) => {
    const coreData = {};
    coreFields.forEach(f => { if (asset[f] !== undefined) coreData[f] = asset[f]; });
    const coreKeys = Object.keys(coreData);
-    const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')}) ON DUPLICATE KEY UPDATE ${coreKeys.map(k => `${k} = VALUES(${k})`).join(', ')}`;
+
-    await connection.query(coreSql, Object.values(coreData));
+    console.log(`[DEBUG] Saving Asset ID: ${asset.id}, Code: ${asset.asset_code}`);
    const [existingCore] = await connection.query('SELECT id FROM asset_core WHERE id = ?', [asset.id]);
    console.log(`[DEBUG] Existing Core Check for ${asset.id}: Found ${existingCore.length}`);
    if (existingCore.length > 0) {
        // UPDATE
        const updateKeys = coreKeys.filter(k => k !== 'id');
        const coreSql = `UPDATE asset_core SET ${updateKeys.map(k => `${k} = ?`).join(', ')} WHERE id = ?`;
        const [updRes] = await connection.query(coreSql, [...updateKeys.map(k => coreData[k]), asset.id]);
        console.log(`[DEBUG] Core UPDATE result: affectedRows=${updRes.affectedRows}`);
    } else {
        // INSERT
        const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')})`;
        const [insRes] = await connection.query(coreSql, Object.values(coreData));
        console.log(`[DEBUG] Core INSERT result: affectedRows=${insRes.affectedRows}`);
    }
    // 3.2 asset_spec
    const specFields = ['hw_status', 'model_name', 'mainboard', 'os', 'cpu', 'ram', 'gpu', 'monitoring', 'price', 'monitor_inch', 'serial_num'];
@@ -362,19 +411,19 @@ app.post('/api/pc/flow', async (req, res) => {
        [userName, empNo, dept, position, assetId]
      );
      await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
        [assetId]
      );
    } else if (action === 'return') {
      await connection.query(
        `UPDATE asset_core 
         SET previous_user = user_current, previous_dept = current_dept, 
-             user_current = '', emp_no = '', current_dept = '재고창고', user_position = '' 
+             user_current = '', emp_no = '', user_position = '' 
         WHERE id = ?`,
        [assetId]
      );
      await connection.query(
-        `UPDATE asset_spec SET hw_status = '대기' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '재고' WHERE asset_id = ?`,
        [assetId]
      );
    } else if (action === 'move') {
@@ -386,7 +435,7 @@ app.post('/api/pc/flow', async (req, res) => {
        [userName, empNo, dept, position, assetId]
      );
      await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
        [assetId]
      );
    } else {
@@ -483,6 +532,157 @@ app.get('/api/maps', (req, res) => {
  } catch (err) { handleError(res, err, 'GET MAPS'); }
 });
 // 6.5. Get Hardware Components Master List
 app.get('/api/hardware-components', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
    res.json(rows);
  } catch (err) {
    handleError(res, err, 'GET HARDWARE COMPONENTS');
  }
 });
 // 6.6. Save Hardware Component (Add or Update)
 app.post('/api/hardware-components/save', async (req, res) => {
  const { id, category, component_name, score_tier, deduction } = req.body;
  let connection;
  try {
    connection = await pool.getConnection();
    if (id) {
      await connection.query(
        'UPDATE hardware_components_master SET category = ?, component_name = ?, score_tier = ?, deduction = ? WHERE id = ?',
        [category, component_name, score_tier, deduction, id]
      );
    } else {
      await connection.query(
        'INSERT INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
        [category, component_name, score_tier, deduction]
      );
    }
    res.json({ success: true });
  } catch (err) {
    handleError(res, err, 'SAVE HARDWARE COMPONENT');
  } finally {
    if (connection) connection.release();
  }
 });
 // 6.7. Delete Hardware Component
 app.delete('/api/hardware-components/:id', async (req, res) => {
  const { id } = req.params;
  let connection;
  try {
    connection = await pool.getConnection();
    await connection.query('DELETE FROM hardware_components_master WHERE id = ?', [id]);
    res.json({ success: true });
  } catch (err) {
    handleError(res, err, 'DELETE HARDWARE COMPONENT');
  } finally {
    if (connection) connection.release();
  }
 });
 // 6.7.1. Get Job Spec Standards
 app.get('/api/job-specs', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM job_spec_standards ORDER BY job_name');
    res.json(rows);
  } catch (err) {
    handleError(res, err, 'GET JOB SPECS');
  }
 });
 // 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, 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 = ?, required_grade = ?, remarks = ? WHERE 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, required_grade, remarks) VALUES (?, ?, ?, ?, ?, ?, ?)',
        [job_name, cpu_standard || '', ram_standard || '', gpu_standard || '', min_score || 0, required_grade || '중급', remarks || '']
      );
    }
    res.json({ success: true });
  } catch (err) {
    handleError(res, err, 'SAVE JOB SPEC');
  } finally {
    if (connection) connection.release();
  }
 });
 // 6.7.3. Delete Job Spec Standard
 app.delete('/api/job-specs/:id', async (req, res) => {
  const { id } = req.params;
  let connection;
  try {
    connection = await pool.getConnection();
    await connection.query('DELETE FROM job_spec_standards WHERE id = ?', [id]);
    res.json({ success: true });
  } catch (err) {
    handleError(res, err, 'DELETE JOB SPEC');
  } finally {
    if (connection) connection.release();
  }
 });
 // 6.8. Get System Users List
 app.get('/api/system-users', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM system_users ORDER BY user_name');
    res.json(rows);
  } catch (err) {
    handleError(res, err, 'GET SYSTEM USERS');
  }
 });
 // 6.9. Save System User (Add or Update)
 app.post('/api/system-users/save', async (req, res) => {
  const { id, emp_no, user_name, dept_name, position, status } = req.body;
  let connection;
  try {
    connection = await pool.getConnection();
    if (id) {
      await connection.query(
        'UPDATE system_users SET emp_no = ?, user_name = ?, dept_name = ?, position = ?, status = ? WHERE id = ?',
        [emp_no, user_name, dept_name, position, status, id]
      );
    } else {
      const newId = 'USER-' + Math.random().toString(36).substring(2, 9).toUpperCase();
      await connection.query(
        'INSERT INTO system_users (id, emp_no, user_name, dept_name, position, status) VALUES (?, ?, ?, ?, ?, ?)',
        [newId, emp_no, user_name, dept_name, position, status]
      );
    }
    res.json({ success: true });
  } catch (err) {
    handleError(res, err, 'SAVE SYSTEM USER');
  } finally {
    if (connection) connection.release();
  }
 });
 // 6.10. Delete System User
 app.delete('/api/system-users/:id', async (req, res) => {
  const { id } = req.params;
  let connection;
  try {
    connection = await pool.getConnection();
    await connection.query('DELETE FROM system_users WHERE id = ?', [id]);
    res.json({ success: true });
  } catch (err) {
    handleError(res, err, 'DELETE SYSTEM USER');
  } finally {
    if (connection) connection.release();
  }
 });
 app.post('/api/maps/save', (req, res) => {
  try {
    const { path, boxes } = req.body;
--- a/src/components/Modal/HWModal.ts
+++ b/src/components/Modal/HWModal.ts
@@ -1,5 +1,6 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
 import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
 import { 
  generateOptionsHTML, 
  setFieldValue, 
@@ -13,6 +14,7 @@ import { BaseModal } from './BaseModal';
 class HwAssetModal extends BaseModal {
  private dynamicMapConfig: Record<string, any[]> = {};
  private masterComponents: any[] = [];
  constructor() {
    super('hw', '자산 상세 정보');
@@ -24,6 +26,39 @@ class HwAssetModal extends BaseModal {
    const btnStyle = `padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap; cursor: pointer; ${sharedStyle}`;
    return `
      <style>
        .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 id="hw-asset-modal" class="modal-overlay hidden">
        <div class="modal-content wide">
          <div class="modal-header">
@@ -131,22 +166,31 @@ class HwAssetModal extends BaseModal {
                    <label>${ASSET_SCHEMA.OS.ui}</label>
                    <input type="text" id="hw-os" name="os" style="${inputStyle}" />
                  </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                    <label>${ASSET_SCHEMA.CPU.ui}</label>
-                    <input type="text" id="hw-cpu" name="cpu" style="${inputStyle}" />
+                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" placeholder="CPU 부품 검색..." style="${inputStyle}" />
                    <div id="hw-cpu-autocomplete" class="autocomplete-list hidden"></div>
                  </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                    <label>${ASSET_SCHEMA.RAM.ui}</label>
-                    <input type="text" id="hw-ram" name="ram" style="${inputStyle}" />
+                    <input type="text" id="hw-ram" name="ram" autocomplete="off" placeholder="RAM 부품 검색..." style="${inputStyle}" />
                    <div id="hw-ram-autocomplete" class="autocomplete-list hidden"></div>
                  </div>
-                  <div class="form-group spec-only">
+                  <div class="form-group spec-only" style="position: relative;">
                    <label>${ASSET_SCHEMA.GPU.ui}</label>
-                    <input type="text" id="hw-gpu" name="gpu" style="${inputStyle}" />
+                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" placeholder="GPU 부품 검색..." style="${inputStyle}" />
                    <div id="hw-gpu-autocomplete" class="autocomplete-list hidden"></div>
                  </div>
                  <div class="form-group spec-only">
                    <label>${ASSET_SCHEMA.MAINBOARD.ui}</label>
                    <input type="text" id="hw-mainboard" name="mainboard" style="${inputStyle}" />
                  </div>
                  <div class="form-group spec-only">
                    <label>성능 등급</label>
                    <div id="hw-pc-grade-container" style="display: flex; align-items: center; height: 38px;">
                      <span class="badge b-yellow" id="hw-pc-grade-badge">-</span>
                    </div>
                  </div>
                  <div class="form-group monitor-only">
                    <label>${ASSET_SCHEMA.MONITOR_INCH.ui}</label>
                    <input type="text" id="hw-monitor_inch" name="monitor_inch" style="${inputStyle}" />
@@ -257,6 +301,18 @@ class HwAssetModal extends BaseModal {
    bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
    applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
    this.fetchMasterComponents().then(() => {
      this.bindAutocomplete('hw-cpu', 'hw-cpu-autocomplete', 'CPU');
      this.bindAutocomplete('hw-ram', 'hw-ram-autocomplete', 'RAM');
      this.bindAutocomplete('hw-gpu', 'hw-gpu-autocomplete', 'GPU');
    });
    const specInputs = ['hw-cpu', 'hw-ram', 'hw-gpu', 'hw-purchase_date'];
    specInputs.forEach(id => {
      document.getElementById(id)?.addEventListener('input', () => this.updatePcGradeBadge());
      document.getElementById(id)?.addEventListener('change', () => this.updatePcGradeBadge());
    });
    categorySelect.addEventListener('change', () => {
      const types = CATEGORY_TYPE_MAP[categorySelect.value] || [];
      typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
@@ -268,10 +324,21 @@ class HwAssetModal extends BaseModal {
    });
    document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
      const type = typeSelect.value;
      const cat = categorySelect.value;
-      if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
+      if (!type) { alert('유형을 먼저 선택해주세요.'); return; }
-      const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
+      
-      const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+      const purchaseDateEl = document.getElementById('hw-purchase_date') as HTMLInputElement;
      const purchaseDate = purchaseDateEl?.value || '';
      if (!purchaseDate) {
        alert('구매일자를 먼저 입력해야 자산번호 생성이 가능합니다.');
        purchaseDateEl?.focus();
        return;
      }
      // 유형 기반 매핑 우선, 없으면 구분 기반, 그래도 없으면 ETC
      const prefix = TYPE_PREFIX_MAP[type] || TYPE_PREFIX_MAP[cat] || 'ETC';
      try {
        const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
        const data = await res.json();
@@ -362,6 +429,35 @@ class HwAssetModal extends BaseModal {
        return;
      }
      // CPU, RAM, GPU 마스터 테이블 기반 유효성 검사 (완전 강제 방식)
      const category = categorySelect.value;
      const type = typeSelect.value;
      const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
      const hasSpec = specCategories.includes(category) || type.includes('서버PC');
      if (hasSpec) {
        const cpuVal = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
        const ramVal = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
        const gpuVal = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
        const cpuMaster = this.masterComponents.filter(c => c.category === 'CPU').map(c => c.component_name);
        const ramMaster = this.masterComponents.filter(c => c.category === 'RAM').map(c => c.component_name);
        const gpuMaster = this.masterComponents.filter(c => c.category === 'GPU').map(c => c.component_name);
        if (cpuVal && !cpuMaster.includes(cpuVal)) {
          alert(`[입력 오류] '${cpuVal}'은(는) 마스터 테이블에 존재하지 않는 CPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
          return;
        }
        if (ramVal && !ramMaster.includes(ramVal)) {
          alert(`[입력 오류] '${ramVal}'은(는) 마스터 테이블에 존재하지 않는 RAM 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
          return;
        }
        if (gpuVal && !gpuMaster.includes(gpuVal)) {
          alert(`[입력 오류] '${gpuVal}'은(는) 마스터 테이블에 존재하지 않는 GPU 부품명입니다. 자동완성 추천 목록에서 올바른 부품명을 골라 선택해 주세요.`);
          return;
        }
      }
      // 동적 볼륨 데이터 수집
      const vols: any[] = [];
      document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
@@ -603,6 +699,7 @@ class HwAssetModal extends BaseModal {
    parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
    this.renderHistory(asset.id);
    this.applyRoleVisibility();
    this.updatePcGradeBadge();
  }
  protected onAfterOpen(asset: any, mode: string): void {
@@ -690,29 +787,110 @@ class HwAssetModal extends BaseModal {
    overlay.className = 'image-picker-overlay';
    const renderContent = () => {
      const imgPath = imagePaths[currentIdx];
-      const digitalMap = this.generateDynamicSVG(imgPath);
+      const isMulti = imagePaths.length > 1;
      const isHtmlMap = imgPath.toLowerCase().endsWith('.html');
      const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imgPath);
      overlay.innerHTML = `
-        <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
+        <div class="image-picker-header">
-        <div class="image-picker-content"><div class="layout-map-container" id="picker-container"><img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+          <h3>${title} ${isMulti ? `(${currentIdx + 1}/${imagePaths.length})` : ''}</h3>
          <button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button>
        </div>
        <div class="image-picker-content">
          ${isMulti ? `
            <div class="picker-nav prev ${currentIdx === 0 ? 'disabled' : ''}" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">◀</div>
            <div class="picker-nav next ${currentIdx === imagePaths.length - 1 ? 'disabled' : ''}" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 100; cursor: pointer; background: rgba(0,0,0,0.5); color: white; padding: 20px 10px; border-radius: 5px; font-size: 24px; user-select: none;">▶</div>
          ` : ''}
          <div class="layout-map-container" id="picker-container">
            ${isHtmlMap 
              ? `<iframe src="${imgPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
              : `<img src="${imgPath}" class="layout-map-img" /><div id="picker-marker" class="layout-marker hidden"></div><div class="digital-overlay-layer">${digitalMap}</div>`
            }
          </div>
        </div>
        <div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline" style="color:white; border-color:white;">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>`;
      let selectedX = ''; let selectedY = '';
-      const container = overlay.querySelector('#picker-container') as HTMLElement;
+
-      const marker = overlay.querySelector('#picker-marker') as HTMLElement;
+      if (isMulti) {
-      container.addEventListener('click', (e) => {
+        overlay.querySelector('.picker-nav.prev')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx > 0) { currentIdx--; renderContent(); } });
-        const rect = container.getBoundingClientRect();
+        overlay.querySelector('.picker-nav.next')?.addEventListener('click', (e) => { e.stopPropagation(); if (currentIdx < imagePaths.length - 1) { currentIdx++; renderContent(); } });
-        const x = ((e.clientX - rect.left) / rect.width) * 100;
+      }
-        const y = ((e.clientY - rect.top) / rect.height) * 100;
+
-        selectedX = x.toFixed(2); selectedY = y.toFixed(2);
+      if (isHtmlMap) {
-        marker.style.left = `${selectedX}%`; marker.style.top = `${selectedY}%`; marker.classList.remove('hidden');
+        // HTML 지도 메시지 리스너
-      });
+        const handleMessage = (e: MessageEvent) => {
-      overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
+          if (e.data.type === 'PICK_LOCATION') {
-      overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
+            selectedX = e.data.x;
-      overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
+            selectedY = e.data.y;
-        if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
+          }
-        setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
+        };
-        setFieldValue('hw-location_photo', imagePaths[currentIdx]);
+        window.addEventListener('message', handleMessage);
-        this.updateMapButtonVisibility(); overlay.remove();
+        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
-      });
+        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => { window.removeEventListener('message', handleMessage); overlay.remove(); });
        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
          this.updateMapButtonVisibility(); 
          window.removeEventListener('message', handleMessage);
          overlay.remove();
        });
      } else {
        const container = overlay.querySelector('#picker-container') as HTMLElement;
        const marker = overlay.querySelector('#picker-marker') as HTMLElement;
        container.addEventListener('click', (e) => {
          const rectBound = container.getBoundingClientRect();
          const clickX = ((e.clientX - rectBound.left) / rectBound.width) * 100;
          const clickY = ((e.clientY - rectBound.top) / rectBound.height) * 100;
          let snapped = false;
          overlay.querySelectorAll('rect').forEach(rect => {
            const rx = parseFloat(rect.getAttribute('x') || '0');
            const ry = parseFloat(rect.getAttribute('y') || '0');
            const rw = parseFloat(rect.getAttribute('width') || '0');
            const rh = parseFloat(rect.getAttribute('height') || '0');
            if (clickX >= rx && clickX <= rx + rw && clickY >= ry && clickY <= ry + rh) {
              overlay.querySelectorAll('rect').forEach(r => {
                  r.style.fill = 'rgba(30,81,73,0.05)'; 
                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
                  r.style.strokeWidth = '0.2';
              });
              rect.style.fill = 'rgba(255, 61, 0, 0.4)';
              rect.style.stroke = '#FF3D00';
              rect.style.strokeWidth = '0.8';
              selectedX = rx.toFixed(2);
              selectedY = ry.toFixed(2);
              marker.style.left = `${rx + rw/2}%`;
              marker.style.top = `${ry + rh/2}%`;
              marker.classList.remove('hidden');
              snapped = true;
            }
          });
          if (!snapped) {
              selectedX = '';
              selectedY = '';
              marker.classList.add('hidden');
              overlay.querySelectorAll('rect').forEach(r => {
                  r.style.fill = 'rgba(30,81,73,0.05)'; 
                  r.style.stroke = 'rgba(30,81,73,0.2)'; 
                  r.style.strokeWidth = '0.2';
              });
          }
        });
        overlay.querySelector('.btn-close-picker')?.addEventListener('click', () => overlay.remove());
        overlay.querySelector('#btn-picker-cancel')?.addEventListener('click', () => overlay.remove());
        overlay.querySelector('#btn-picker-save')?.addEventListener('click', () => {
          if (!selectedX || !selectedY) { alert('위치를 선택해주세요.'); return; }
          setFieldValue('hw-loc_x', selectedX); setFieldValue('hw-loc_y', selectedY);
          setFieldValue('hw-location_photo', imagePaths[currentIdx]);
          this.updateMapButtonVisibility(); overlay.remove();
        });
      }
    };
    renderContent(); document.body.appendChild(overlay);
  }
@@ -720,13 +898,26 @@ class HwAssetModal extends BaseModal {
  private openImagePreview(imagePath: string, title: string, x: string, y: string) {
    const overlay = document.createElement('div');
    overlay.className = 'image-picker-overlay';
-    const digitalMap = this.generateDynamicSVG(imagePath);
+    const isHtmlMap = imagePath.toLowerCase().endsWith('.html');
    const digitalMap = isHtmlMap ? '' : this.generateDynamicSVG(imagePath);
    // HTML 지도인 경우 좌표를 쿼리 파라미터로 전달
    const finalPath = isHtmlMap ? `${imagePath}?markerX=${x}&markerY=${y}` : imagePath;
    overlay.innerHTML = `
      <div class="image-picker-header"><h3>${title}</h3><button class="btn-close-picker" style="background:none; border:none; color:white; font-size:24px; cursor:pointer;">&times;</button></div>
-      <div class="image-picker-content"><div class="layout-map-container readonly"><img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div></div></div>
+      <div class="image-picker-content">
        <div class="layout-map-container readonly">
          ${isHtmlMap 
            ? `<iframe src="${finalPath}" style="width:100%; height:100%; border:none; display:block;"></iframe>`
            : `<img src="${imagePath}" class="layout-map-img" /><div id="preview-marker" class="layout-marker pulse-marker" style="left:${x}%; top:${y}%;"></div><div class="digital-overlay-layer">${digitalMap}</div>`
          }
        </div>
      </div>
      <div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>`;
    document.body.appendChild(overlay);
-    if (digitalMap) {
+    if (!isHtmlMap && digitalMap) {
      const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
      overlay.querySelectorAll('rect').forEach(rect => {
        const sx = parseFloat(rect.getAttribute('x') || '0');
@@ -806,6 +997,77 @@ class HwAssetModal extends BaseModal {
    if (cat === 'PC부품') return 'pcParts';
    return (cat === 'PC' || code.startsWith('PC')) ? 'pc' : 'officeSupplies';
  }
  private async fetchMasterComponents(): Promise<void> {
    try {
      const res = await fetch(`http://${location.hostname}:3000/api/hardware-components`);
      this.masterComponents = await res.json();
    } catch (err) {
      console.error('Failed to fetch master components:', err);
    }
  }
  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 = this.masterComponents.filter(c => c.category === category);
      const filtered = filterText 
        ? items.filter(c => 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 => `<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.updatePcGradeBadge(); // 뱃지 즉시 업데이트
      }
    });
    // 아웃사이드 클릭 시 닫기
    document.addEventListener('mousedown', (e) => {
      if (e.target !== input && !list.contains(e.target as Node)) {
        list.classList.add('hidden');
      }
    });
  }
  private updatePcGradeBadge(): void {
    const cpu = (document.getElementById('hw-cpu') as HTMLInputElement)?.value || '';
    const ram = (document.getElementById('hw-ram') as HTMLInputElement)?.value || '';
    const gpu = (document.getElementById('hw-gpu') as HTMLInputElement)?.value || '';
    const date = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
    const score = calculatePcScoreDeductive(cpu, ram, gpu, date);
    const grade = getPcGrade(score);
    const badge = document.getElementById('hw-pc-grade-badge');
    if (badge) {
      badge.textContent = `${grade.name} (${score}점)`;
      badge.className = `badge ${grade.class}`;
    }
  }
 }
 export const hwModal = new HwAssetModal();
--- a/src/components/Modal/JobSpecModal.ts
+++ b/src/components/Modal/JobSpecModal.ts
@@ -0,0 +1,177 @@
 import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { setFieldValue } from './ModalUtils';
 import { UI_TEXT } from '../../core/schema';
 import { calculatePcScoreDeductive } from '../../core/utils';
 class JobSpecModal extends BaseModal {
  constructor() {
    super('job-spec', '직무별 기준 사양');
  }
  protected renderFrameHTML(): string {
    return `
      <div id="job-spec-asset-modal" class="modal-overlay hidden">
        <div class="modal-content narrow">
          <div class="modal-header">
            <div class="header-left">
              <h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
              <div id="job-spec-header-identity" class="header-identity"></div>
            </div>
            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </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">
                <label>직무명</label>
                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
              </div>
              <div class="form-group">
                <label>요구 PC 등급</label>
                <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>
                  <option value="최상급">최상급 (85점 이상)</option>
                  <option value="상급" selected>상급 (70점 이상)</option>
                  <option value="중급">중급 (40점 이상)</option>
                  <option value="보급">보급 (20점 이상)</option>
                </select>
              </div>
              <div class="form-group">
                <label>비고 (메모)</label>
                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
            <div class="footer-actions">
              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
              <button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
              <button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
            </div>
          </div>
        </div>
      </div>
    `;
  }
  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
    const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
    saveBtn.addEventListener('click', async () => {
      if (!this.currentAsset) return;
      if (!this.isEditMode) {
        this.setEditLockMode('edit');
        this.isEditMode = true;
        return;
      }
      const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
      const requiredGrade = (document.getElementById('job-spec-required-grade') as HTMLSelectElement).value;
      const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
      if (!jobName) {
        alert('직무명을 입력해 주세요.');
        return;
      }
      const updated = {
        id: this.currentAsset.id || null,
        job_name: jobName,
        cpu_standard: '',
        ram_standard: '',
        gpu_standard: '',
        min_score: 0,
        required_grade: requiredGrade,
        remarks: remarks
      };
      if (await saveJobSpec(updated)) {
        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
        onSave(); this.close(); closeModals();
      }
    });
    revertBtn.addEventListener('click', () => {
      this.setEditLockMode('view');
      if (this.currentAsset) this.fillFormData(this.currentAsset);
    });
    deleteBtn.addEventListener('click', async () => {
      if (!this.currentAsset || !this.currentAsset.id) return;
      if (!confirm('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
      if (await deleteJobSpec(this.currentAsset.id)) {
        alert('성공적으로 삭제되었습니다.');
        onSave(); this.close(); closeModals();
      }
    });
  }
  protected fillFormData(asset: any): void {
    setFieldValue('job-spec-id', asset.id || '');
    setFieldValue('job-spec-job-name', asset.job_name || '');
    setFieldValue('job-spec-required-grade', asset.required_grade || '중급');
    setFieldValue('job-spec-remarks', asset.remarks || '');
    this.updateHeaderIdentity(asset);
  }
  protected onAfterOpen(asset: any, mode: string): void {
    const titleEl = document.getElementById('job-spec-modal-title');
    if (titleEl) {
      if (mode === 'add') {
        titleEl.textContent = '신규 직무별 기준 사양 등록';
      } else {
        titleEl.textContent = '직무별 기준 사양 상세 편집';
      }
    }
    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
    if (mode === 'add' || mode === 'edit') {
      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
      saveBtn.style.display = 'block';
    } else {
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
    this.updateHeaderIdentity(asset);
  }
  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>
    `;
  }
 }
 export const jobSpecModal = new JobSpecModal();
 export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
  jobSpecModal.init(onSave, closeModals);
 }
 export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
  jobSpecModal.open(asset, mode);
 }
--- a/src/components/Modal/PCFlowModal.ts
+++ b/src/components/Modal/PCFlowModal.ts
@@ -201,7 +201,7 @@ export class PCFlowModal {
    const showStockSuggestions = () => {
      const query = stockSearch.value.trim().toLowerCase();
-      // Filter available PCs (category PC, status '대기' or '재고창고')
+      // Filter available PCs (category PC, status '대기', '미할당', or '재고')
      const pcs = state.masterData.pc || [];
      const filtered = pcs.filter((p: any) => {
        const status = (p.hw_status || '').trim();
@@ -210,7 +210,7 @@ export class PCFlowModal {
          (p.model_name && p.model_name.toLowerCase().includes(query)) ||
          (p.cpu && p.cpu.toLowerCase().includes(query));
-        return (status === '대기' || status === '재고창고' || status === '미할당') && matchesQuery;
+        return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
      });
      this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {
--- a/src/components/Modal/PartsMasterModal.ts
+++ b/src/components/Modal/PartsMasterModal.ts
@@ -0,0 +1,166 @@
 import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
 import { createIcons, X, Save, Database, Edit2, Plus } from 'lucide';
 import { UI_TEXT } from '../../core/schema';
 class PartsMasterModal extends BaseModal {
  constructor() {
    super('parts-master', '부품 표준 정보');
  }
  protected renderFrameHTML(): string {
    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
    const inputStyle = sharedStyle;
    const selectStyle = sharedStyle;
    return `
      <div id="parts-master-asset-modal" class="modal-overlay hidden">
        <div class="modal-content" style="max-width: 500px; width: 100%;">
          <div class="modal-header">
            <h2 id="parts-master-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">${this.title}</h2>
            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
          </div>
          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
            <form id="parts-master-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
              <input type="hidden" id="parts-master-id" name="id" />
              <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>
                <select id="parts-master-category" name="category" style="${selectStyle}">
                  <option value="CPU">CPU</option>
                  <option value="GPU">GPU</option>
                  <option value="RAM">RAM</option>
                </select>
              </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="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required style="${inputStyle} width: 100%;" />
              </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="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required style="${inputStyle} width: 100%;" />
              </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="parts-master-deduction" name="deduction" placeholder="예: 5" required style="${inputStyle} width: 100%;" />
              </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);">
            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
            <div class="footer-actions" style="display: flex; gap: 8px;">
              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
              <button id="btn-cancel-parts-master-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
              <button id="btn-save-parts-master-asset" class="btn btn-primary" style="height: 42px;">수정</button>
            </div>
          </div>
        </div>
      </div>
    `;
  }
  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
    const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
    saveBtn.addEventListener('click', async () => {
      if (!this.currentAsset) return;
      if (!this.isEditMode) {
        this.setEditLockMode('edit');
        this.isEditMode = true;
        return;
      }
      const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
      const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
      const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
      const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
      if (!compName || !tier || deductStr === '') {
        alert('모든 필드를 올바르게 입력해 주세요.');
        return;
      }
      const updated = {
        id: this.currentAsset.id || null,
        category,
        component_name: compName,
        score_tier: tier,
        deduction: parseInt(deductStr, 10)
      };
      if (await savePartsMaster(updated)) {
        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
        onSave(); this.close(); closeModals();
      }
    });
    revertBtn.addEventListener('click', () => {
      this.setEditLockMode('view');
      if (this.currentAsset) this.fillFormData(this.currentAsset);
    });
    deleteBtn.addEventListener('click', async () => {
      if (!this.currentAsset || !this.currentAsset.id) return;
      if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
      if (await deletePartsMaster(this.currentAsset.id)) {
        alert('성공적으로 삭제되었습니다.');
        onSave(); this.close(); closeModals();
      }
    });
  }
  protected fillFormData(asset: any): void {
    setFieldValue('parts-master-id', asset.id || '');
    setFieldValue('parts-master-category', asset.category || 'CPU');
    setFieldValue('parts-master-component-name', asset.component_name || '');
    setFieldValue('parts-master-score-tier', asset.score_tier || '');
    setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
  }
  protected onAfterOpen(asset: any, mode: string): void {
    const titleEl = document.getElementById('parts-master-modal-title');
    if (titleEl) {
      if (mode === 'add') {
        titleEl.textContent = '신규 부품 마스터 등록';
      } else {
        titleEl.textContent = '부품 마스터 상세 편집';
      }
    }
    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
    // 추가 모드일 때는 삭제 버튼 숨김
    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
    if (mode === 'add') {
      this.setEditLockMode('edit');
      this.isEditMode = true;
      saveBtn.textContent = '등록';
      saveBtn.style.display = 'block';
    } else {
      this.setEditLockMode('view');
      this.isEditMode = false;
      saveBtn.textContent = '수정';
      saveBtn.style.display = 'block';
    }
  }
 }
 export const partsMasterModal = new PartsMasterModal();
 export function initPartsMasterModal(onSave: () => void, closeModals: () => void) {
  partsMasterModal.init(onSave, closeModals);
 }
 export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
  partsMasterModal.open(asset, mode);
 }
--- a/src/components/Modal/SharedData.ts
+++ b/src/components/Modal/SharedData.ts
@@ -30,7 +30,7 @@ export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
 // 설치위치 종속성 데이터
 export const LOCATION_DATA: Record<string, string[]> = {
  '한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
-  '기술개발센터': ['서버실', 'BLUE ZONE', 'GREEN ZONE', 'ORANGE ZONE', '회의실2', '회의실3', '회의실5', '회의실6', '회의실7', '사이니지룸'],
+  '기술개발센터': ['서버실', '센터내부'],
  '유니온빌딩': ['4층', '5층', '6층'],
  '뉴코아빌딩': ['4층', '6층', '7층'],
  'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
@@ -60,10 +60,17 @@ export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
    '서버실': [
      'img/location_photo/기술개발센터/서버실/서버실_1.png',
      'img/location_photo/기술개발센터/서버실/서버실_2.png'
-    ]
+    ],
    '센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
  },
  '한맥빌딩': {
-    '7층': ['img/location_photo/한맥빌딩/7층_로비.png'],
+    '1층': ['img/location_photo/한맥빌딩/1층.png'],
    '2층': ['img/location_photo/한맥빌딩/2층.png'],
    '3층': ['img/location_photo/한맥빌딩/3층.png'],
    '4층': ['img/location_photo/한맥빌딩/4층.png'],
    '5층': ['img/location_photo/한맥빌딩/5층.png'],
    '6층': ['img/location_photo/한맥빌딩/6층.png'],
    '7층': ['img/location_photo/한맥빌딩/7층.png'],
    'MDF실': [
      'img/location_photo/한맥빌딩/MDF실/MDF_1.png',
      'img/location_photo/한맥빌딩/MDF실/MDF_2.png',
--- a/src/components/Modal/UserModal.ts
+++ b/src/components/Modal/UserModal.ts
@@ -0,0 +1,195 @@
 import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { setFieldValue } from './ModalUtils';
 import { createIcons, X, Save } from 'lucide';
 import { UI_TEXT } from '../../core/schema';
 class UserModal extends BaseModal {
  constructor() {
    super('user', '임직원 정보');
  }
  protected renderFrameHTML(): string {
    return `
      <div id="user-asset-modal" class="modal-overlay hidden">
        <div class="modal-content narrow">
          <div class="modal-header">
            <div class="header-left">
              <h2 id="user-modal-title" class="modal-title">${this.title}</h2>
              <div id="user-header-identity" class="header-identity"></div>
            </div>
            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </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">
                <label>사번</label>
                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
              </div>
              <div class="form-group">
                <label>사용자명</label>
                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
              </div>
              <div class="form-group">
                <label>사용조직 (부서)</label>
                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
              </div>
              <div class="form-group">
                <label>직무</label>
                <select id="user-position-input" name="position" required>
                  <option value="">직무 선택</option>
                </select>
              </div>
              <div class="form-group">
                <label>상태</label>
                <select id="user-status" name="status">
                  <option value="재직">재직</option>
                  <option value="퇴직">퇴직</option>
                </select>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
            <div class="footer-actions">
              <button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
              <button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
              <button id="btn-save-user-asset" class="btn btn-primary">수정</button>
            </div>
          </div>
        </div>
      </div>
    `;
  }
  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
    const saveBtn = document.getElementById('btn-save-user-asset')!;
    const revertBtn = document.getElementById('btn-revert-user-edit')!;
    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
    saveBtn.addEventListener('click', async () => {
      if (!this.currentAsset) return;
      if (!this.isEditMode) {
        this.setEditLockMode('edit');
        this.isEditMode = true;
        return;
      }
      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 HTMLSelectElement).value.trim();
      const status = (document.getElementById('user-status') as HTMLSelectElement).value;
      if (!empNo || !userName || !deptName || !position) {
        alert('모든 필수 입력 필드를 채워주세요.');
        return;
      }
      const updated = {
        id: this.currentAsset.id || null,
        emp_no: empNo,
        user_name: userName,
        dept_name: deptName,
        position: position,
        status: status
      };
      if (await saveSystemUser(updated)) {
        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
        onSave(); this.close(); closeModals();
      }
    });
    revertBtn.addEventListener('click', () => {
      this.setEditLockMode('view');
      if (this.currentAsset) this.fillFormData(this.currentAsset);
    });
    deleteBtn.addEventListener('click', async () => {
      if (!this.currentAsset || !this.currentAsset.id) return;
      if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;
      if (await deleteSystemUser(this.currentAsset.id)) {
        alert('성공적으로 삭제되었습니다.');
        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) {
      titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
    }
    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
    const saveBtn = document.getElementById('btn-save-user-asset')!;
    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
    if (mode === 'add' || mode === 'edit') {
      saveBtn.textContent = mode === 'add' ? '등록' : '저장';
      saveBtn.style.display = 'block';
    } else {
      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 openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }
--- a/src/components/Navigation.ts
+++ b/src/components/Navigation.ts
@@ -3,7 +3,7 @@ import { state } from '../core/state';
 const MENU_CONFIG: any = {
  hw: {
    label: '하드웨어',
-    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
  },
  sw: {
    label: '소프트웨어',
@@ -11,7 +11,7 @@ const MENU_CONFIG: any = {
  },
  ops: {
    label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리']
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
  },
  vip: {
    label: '내빈/외빈',
@@ -73,6 +73,7 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
      shelf.className = 'lnb-shelf';
      visibleTabs.forEach((tab: string) => {
        if (tab === '부품 마스터') return; // 메뉴바에서 표시 생략
        const item = document.createElement('div');
        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
        item.textContent = tab;
--- a/src/core/filterHandler.ts
+++ b/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';
@@ -15,23 +14,74 @@ export interface FilterOptions {
  showLoc?: boolean;
  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) {
-  const { keywordLabel = '통합 검색', showCorp = false, showDept = false, showLoc = false, showField = false, showType = false, extraHTML = '', onFilterChange } = options;
+  const { 
    keywordLabel = '통합 검색', 
    showCorp = false, 
    showDept = false, 
    showLoc = false, 
    showField = false, 
    showType = false, 
    showStatus = false,
    showPosition = false,
    extraHTML = '', 
    onFilterChange,
    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>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
    </div>
    ${showType ? `
    <div class="search-item">
      <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 ? `
    <div class="search-item">
      <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 ? `
@@ -39,30 +89,44 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
      <label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
      <select id="filter-field">
        <option value="">전체 분야</option>
-        <option value="업무공통">업무공통</option>
+        <option value="업무공통" ${initialFilters.field === '업무공통' ? 'selected' : ''}>업무공통</option>
-        <option value="개발S/W">개발S/W</option>
+        <option value="개발S/W" ${initialFilters.field === '개발S/W' ? 'selected' : ''}>개발S/W</option>
-        <option value="디자인">디자인</option>
+        <option value="디자인" ${initialFilters.field === '디자인' ? 'selected' : ''}>디자인</option>
-        <option value="설계S/W">설계S/W</option>
+        <option value="설계S/W" ${initialFilters.field === '설계S/W' ? 'selected' : ''}>설계S/W</option>
      </select>
    </div>` : ''}
    ${showCorp ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
+      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, initialFilters.corp || '', true)}</select>
    </div>` : ''}
    ${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()}
  `;
@@ -75,7 +139,9 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
      dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
      loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
      field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
-      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || ''
+      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || '',
      position: (container.querySelector('#filter-position') as HTMLSelectElement)?.value || ''
    };
    onFilterChange(filters);
  };
@@ -86,9 +152,11 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
  container.querySelector('#filter-loc')?.addEventListener('change', triggerChange);
  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'].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 = '';
    });
@@ -99,17 +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;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus && matchPosition;
  });
 }
--- a/src/core/schema.ts
+++ b/src/core/schema.ts
@@ -155,6 +155,21 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
    title: '사무용 가구 관리',
    description: '책상, 의자, 캐비닛 등 사무 환경 구성을 위한 가구 자산의 배치 현황을 관리합니다.',
    icon: 'armchair'
  },
  '사용자': {
    title: '임직원 사용자 관리',
    description: 'IT 자산 할당 및 관리의 기준이 되는 사내 임직원(사용자) 정보를 데이터베이스 기반으로 직접 등록하고 수정합니다.',
    icon: 'users'
  },
  '부품 마스터': {
    title: '부품 표준 정보 관리',
    description: 'PC 사양 적정성 평가의 기준이 되는 부품 표준 정보 및 등급별 감점 점수를 관리합니다.',
    icon: 'cpu'
  },
  '직무별 기준 사양': {
    title: '직무별 기준 사양 관리',
    description: 'BIM 모델러, 개발자, 엔지니어 등 사내 직무별 권장 하드웨어 기준 및 성능 합격 점수를 관리합니다.',
    icon: 'sliders'
  }
 };
--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -11,6 +11,7 @@ export interface MasterAssetData {
  network: any[];
  survey: any[];
  pcParts: any[];
  partsMaster: any[];
  equipment: any[];
  officeSupplies: any[];
  swInternal: any[];
@@ -21,6 +22,7 @@ export interface MasterAssetData {
  vip: any[];
  mobile?: any[]; // Legacy mobile support
  equip?: any[];  // Backward compat
  jobSpecs?: any[];
  // Backward compatibility
  subSw: any[];
@@ -41,6 +43,7 @@ export interface AppState {
  masterData: MasterAssetData;
  activeCharts: any[];
  currentUserRole: 'admin' | 'user';
  listFilters?: Record<string, any>;
 }
 // 초기 상태
@@ -50,15 +53,17 @@ export const state: AppState = {
  viewMode: 'location',
  activeCharts: [],
  currentUserRole: 'user',
  listFilters: {},
  masterData: {
    users: [],
    pc: [], server: [], storage: [], network: [],
-    survey: [], pcParts: [], equipment: [], officeSupplies: [],
+    survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
    swInternal: [], swExternal: [], cloud: [], domain: [],
    cost: [], vip: [],
    subSw: [], permSw: [],
    hw: [], sw: [],
-    swUsers: [], logs: []
+    swUsers: [], logs: [],
    jobSpecs: []
  }
 };
@@ -76,6 +81,7 @@ export async function loadMasterDataFromDB() {
    state.masterData = {
      ...state.masterData,
      ...data,
      jobSpecs: data.jobSpecs || [],
      logs: (data.logs || []).map((l: any) => ({
        ...l,
        assetId: l.asset_id || l.assetId,
@@ -160,3 +166,104 @@ export async function deleteAsset(category: string, assetId: string) {
  }
  return false;
 }
 export async function savePartsMaster(component: any) {
  try {
    const url = `${API_BASE_URL}/api/hardware-components/save`;
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(component)
    });
    if (response.ok) {
        await loadMasterDataFromDB(); // 전역 상태 갱신
        return true;
    }
  } catch (err) {
    console.error('부품 마스터 저장 실패:', err);
  }
  return false;
 }
 export async function deletePartsMaster(id: number) {
  try {
    const url = `${API_BASE_URL}/api/hardware-components/${id}`;
    const response = await fetch(url, { method: 'DELETE' });
    if (response.ok) {
        await loadMasterDataFromDB(); // 전역 상태 갱신
        return true;
    }
  } catch (err) {
    console.error('부품 마스터 삭제 실패:', err);
  }
  return false;
 }
 export async function saveSystemUser(user: any) {
  try {
    const url = `${API_BASE_URL}/api/system-users/save`;
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(user)
    });
    if (response.ok) {
      await loadMasterDataFromDB(); // 전역 상태 갱신
      return true;
    }
  } catch (err) {
    console.error('사용자 정보 저장 실패:', err);
  }
  return false;
 }
 export async function deleteSystemUser(id: string) {
  try {
    const url = `${API_BASE_URL}/api/system-users/${id}`;
    const response = await fetch(url, { method: 'DELETE' });
    if (response.ok) {
      await loadMasterDataFromDB(); // 전역 상태 갱신
      return true;
    }
  } catch (err) {
    console.error('사용자 정보 삭제 실패:', err);
  }
  return false;
 }
 export async function saveJobSpec(spec: any) {
  try {
    const url = `${API_BASE_URL}/api/job-specs/save`;
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(spec)
    });
    if (response.ok) {
        await loadMasterDataFromDB(); // 전역 상태 갱신
        return true;
    }
  } catch (err) {
    console.error('직무별 기준 사양 저장 실패:', err);
  }
  return false;
 }
 export async function deleteJobSpec(id: number) {
  try {
    const url = `${API_BASE_URL}/api/job-specs/${id}`;
    const response = await fetch(url, { method: 'DELETE' });
    if (response.ok) {
        await loadMasterDataFromDB(); // 전역 상태 갱신
        return true;
    }
  } catch (err) {
    console.error('직무별 기준 사양 삭제 실패:', err);
  }
  return false;
 }
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -17,7 +17,7 @@ export function renderPageHeader(container: HTMLElement, pageId: string) {
  header.className = 'page-header';
  header.innerHTML = `
    <div class="page-title-group">
-      <h2 class="page-title"><i data-lucide="${config.icon}"></i> ${config.title}</h2>
+      <h2 class="page-title">${config.title}</h2>
      <p class="page-description">${config.description}</p>
    </div>
  `;
@@ -158,3 +158,205 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
 export function getActionButtonsHTML(): string {
  return '';
 }
 /**
 * 100점 만점 감점형 PC 성능 점수 계산 (CPU + RAM + GPU + 연식)
 */
 export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
  let score = 100;
  if (!cpu) cpu = '';
  if (!ram) ram = '';
  if (!gpu) gpu = '';
  const cpuUpper = cpu.toUpperCase();
  const ramUpper = ram.toUpperCase();
  const gpuUpper = gpu.toUpperCase();
  // 1. CPU 등급 감점 (최대 -30점)
  let cpuDeduction = 0;
  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
    cpuDeduction = 0;
  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
    cpuDeduction = 5;
  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
    cpuDeduction = 15;
  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
    cpuDeduction = 25;
  } else {
    cpuDeduction = 30;
  }
  score -= cpuDeduction;
  // 2. CPU 세대 노후 감점 (최대 -15점)
  let genDeduction = 0;
  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
  let gen = 0;
  if (intelMatch && intelMatch[1]) {
    const numStr = intelMatch[1];
    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
  }
  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
  let amdGen = 0;
  if (amdMatch && amdMatch[1] && !intelMatch) {
    const numStr = amdMatch[1];
    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
  }
  if (intelMatch) {
    if (gen >= 12) genDeduction = 0;
    else if (gen >= 10) genDeduction = 5;
    else if (gen >= 8) genDeduction = 10;
    else genDeduction = 15;
  } else if (amdMatch) {
    if (amdGen >= 5) genDeduction = 0;
    else if (amdGen >= 3) genDeduction = 5;
    else genDeduction = 10;
  } else {
    genDeduction = 15;
  }
  score -= genDeduction;
  // 3. RAM 용량 감점 (최대 -25점)
  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
  let ramDeduction = 25;
  if (ramMatch && ramMatch[1]) {
    const ramVal = parseInt(ramMatch[1], 10);
    if (ramVal >= 32) ramDeduction = 0;
    else if (ramVal >= 16) ramDeduction = 10;
    else if (ramVal >= 8) ramDeduction = 20;
    else ramDeduction = 25;
  }
  score -= ramDeduction;
  // 4. GPU 성능 감점 (최대 -25점)
  let gpuDeduction = 25;
  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
    gpuDeduction = 25;
  } else if (
    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
  ) {
    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 4060') || gpuUpper.includes('RTX 4050')
  ) {
    gpuDeduction = 5;
  } else if (
    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
  ) {
    gpuDeduction = 15;
  } else {
    gpuDeduction = 25;
  }
  score -= gpuDeduction;
  // 5. 연식(노후도) 감점 (최대 -15점)
  let age = 0;
  if (purchaseDate && purchaseDate !== '-') {
    let normalized = purchaseDate.replace(/\./g, '-').trim();
    if (/^\d{6}$/.test(normalized)) {
      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
    }
    const purchase = new Date(normalized);
    if (!isNaN(purchase.getTime())) {
      // 2026년 5월 31일 기준 경과연수 계산
      const mockToday = new Date('2026-05-31');
      const diffMs = mockToday.getTime() - purchase.getTime();
      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
      age = Math.max(0, parseFloat(age.toFixed(1)));
    }
  }
  let ageDeduction = 0;
  if (age < 1) ageDeduction = 0;
  else if (age < 2) ageDeduction = 3;
  else if (age < 3) ageDeduction = 6;
  else if (age < 4) ageDeduction = 9;
  else if (age < 5) ageDeduction = 12;
  else ageDeduction = 15;
  score -= ageDeduction;
  return Math.max(10, score);
 }
 /**
 * 성능 점수 기준 등급 뱃지 메타 정보 가져오기
 */
 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) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
  return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
 }
 /**
 * Windows 11 업그레이드 지원 불가능한 하드웨어 조건인지 판별
 */
 export function isWindows11Incompatible(cpu: string, ram: string): boolean {
  if (!cpu) return true;
  const cpuUpper = cpu.toUpperCase();
  // 1. RAM 4GB 미만은 공식 미지원
  if (ram) {
    const ramMatch = ram.toUpperCase().match(/(\d+)\s*GB/);
    if (ramMatch && ramMatch[1]) {
      const ramVal = parseInt(ramMatch[1], 10);
      if (ramVal < 4) return true;
    }
  }
  // 2. CPU 세대 검사
  // Intel CPU 세대 판정
  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
  if (intelMatch && intelMatch[1]) {
    const numStr = intelMatch[1];
    let gen = 0;
    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
    else if (numStr.length === 3) gen = parseInt(numStr.substring(0, 1), 10); // 3자리수 구형 세대 (예: i5-750)
    if (gen > 0 && gen < 8) return true; // 8세대 미만 불가
    return false;
  }
  // AMD Ryzen CPU 세대 판정
  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
  if (amdMatch && amdMatch[1]) {
    const numStr = amdMatch[1];
    let amdGen = 0;
    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10); // 1xxx, 2xxx 등
    if (amdGen > 0 && amdGen < 2) return true; // Ryzen 1세대 이하는 불가
    return false;
  }
  // Apple Silicon은 지원
  if (cpuUpper.includes('APPLE') || cpuUpper.includes('M1') || cpuUpper.includes('M2') || cpuUpper.includes('M3') || cpuUpper.includes('M4')) {
    return false;
  }
  // 그 외 확실한 구형 CPU 제품군
  const knownOldCpus = ['CORE2', 'CORE 2', 'PENTIUM', 'CELERON', 'ATHLON', 'PHENOM', 'XEON'];
  if (knownOldCpus.some(name => cpuUpper.includes(name))) {
    return true;
  }
  // 세대 매칭은 안되었으나 Intel Core i 시리즈 구조이면 구형(1세대 등)으로 간주
  if (cpuUpper.includes('I3') || cpuUpper.includes('I5') || cpuUpper.includes('I7') || cpuUpper.includes('I9')) {
    // i5-620M 처럼 옛날 구형 모바일 칩 등
    return true;
  }
  return false;
 }
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,6 +8,10 @@ import { initHwModal, openHwModal } from './components/Modal/HWModal';
 import { initSwModal, openSwModal } from './components/Modal/SWModal';
 import { initSwUserModal } from './components/Modal/SWUserModal';
 import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
 import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
 import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
 import { initUserModal, openUserModal } from './components/Modal/UserModal';
 import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
 import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
 import { initGuide } from './components/Guide';
 import { pcFlowModal } from './components/Modal/PCFlowModal';
@@ -82,6 +86,9 @@ function initApp() {
        loadMasterDataFromDB().then(() => refreshView());
    }, closeAllModals);
    initDomainModal(() => refreshAllData(), closeAllModals);
    initPartsMasterModal(() => refreshAllData(), closeAllModals);
    initJobSpecModal(() => refreshAllData(), closeAllModals);
    initUserModal(() => refreshAllData(), closeAllModals);
    initDashboardDetailModal();
    initGuide();
@@ -108,23 +115,35 @@ function initApp() {
      const cat = state.activeCategory;
      const newId = Math.random().toString(36).substring(2, 9);
      if (cat === 'users') {
          // 사용자 추가는 renderUserList 내부에서 별도로 처리하거나 여기서 호출 가능
          // 현재 renderUserList에서 별도로 핸들링하고 있으므로 중복 실행 방지
          return;
      }
      if (cat === 'hw') {
-        openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        if (tab === '부품 마스터') {
          if (activePartsMasterSubTab === 'job-spec') {
            openJobSpecModal({ id: '' } as any, 'add');
          } else {
            openPartsMasterModal({ id: '' } as any, 'add');
          }
        } else {
          openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
        }
      } else if (cat === 'sw') {
        const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
        openSwModal({ id: newId, asset_type: swType } as any, 'add');
      } else if (cat === 'ops') {
        if (tab === '도메인') openDomainModal(null);
        else if (tab === '사용자') openUserModal({ id: '' }, 'add');
      }
      return;
    }
    // 부품 마스터 탭으로 바로가기 연동
    if (target.closest('#btn-goto-parts-master')) {
      state.activeCategory = 'hw';
      state.activeSubTab = '부품 마스터';
      renderNavigation((tab) => { refreshView(); });
      refreshView();
      return;
    }
    // PC 이동/반납 모달 열기
    if (target.closest('#btn-pc-flow')) {
      pcFlowModal.open();
@@ -189,66 +208,40 @@ function initRoleSwitcher() {
 }
 /**
- * 로그인 처리 로직
+ * 앱 초기화 (로그인 과정 없이 즉시 시작)
 */
-function handleLogin() {
+function initializeAppDirectly() {
  const loginContainer = document.getElementById('login-container');
  const appLayout = document.getElementById('app-layout');
-  const roleCards = document.querySelectorAll('.role-card');
+  const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
  const userLabel = document.querySelector('.role-label.user');
  const adminLabel = document.querySelector('.role-label.admin');
-  if (!loginContainer || !appLayout || roleCards.length === 0) return;
+  // 기본 권한 설정: 실무자 (User)
  state.currentUserRole = 'user';
  state.activeCategory = 'hw';
  state.activeSubTab = '서버'; // 실무자 기본 탭
-  roleCards.forEach(card => {
+  // UI 상태 동기화
-    card.addEventListener('click', () => {
+  if (checkbox) checkbox.checked = false;
-      const role = card.getAttribute('data-role');
+  if (userLabel) userLabel.classList.add('active');
-      const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+  if (adminLabel) adminLabel.classList.remove('active');
  document.body.classList.remove('admin-mode');
-      if (role === 'admin') {
+  // 화면 전환
-        console.log('🔓 Entering as Admin');
+  if (loginContainer) loginContainer.style.display = 'none';
  if (appLayout) appLayout.style.display = 'flex';
-        state.currentUserRole = 'admin';
+  // 앱 초기화
-        state.activeCategory = 'hw';
+  initRoleSwitcher();
-        state.activeSubTab = '대시보드'; // 관리자는 대시보드로 진입
+  initApp();
-        if (checkbox) checkbox.checked = true;
+  // 로고 클릭 시 새로고침 (초기 화면 복귀 효과)
-        if (userLabel) userLabel.classList.remove('active');
+  const brand = document.querySelector('.brand') as HTMLElement;
-        if (adminLabel) adminLabel.classList.add('active');
+  if (brand) {
-        document.body.classList.add('admin-mode');
+    brand.style.cursor = 'pointer';
-      } else if (role === 'user') {
+    brand.onclick = () => location.reload();
-        console.log('🔓 Entering as Practitioner');
+  }
        state.currentUserRole = 'user';
        state.activeCategory = 'hw';
        state.activeSubTab = '서버'; // 실무자는 서버 목록으로 진입
        if (checkbox) checkbox.checked = false;
        if (userLabel) userLabel.classList.add('active');
        if (adminLabel) adminLabel.classList.remove('active');
        document.body.classList.remove('admin-mode');
      } else {
        return;
      }
      // UI 전환
      loginContainer.style.display = 'none';
      appLayout.style.display = 'flex';
      // 역할 스위처 및 앱 초기화 시작
      initRoleSwitcher();
      initApp();
      // 로고 클릭 시 초기화면 복귀 로직 (한 번만 등록)
      const brand = document.querySelector('.brand') as HTMLElement;
      if (brand) {
        brand.style.cursor = 'pointer';
        brand.onclick = () => {
          location.reload(); // 즉시 초기화면으로 복귀
        };
      }
    });
  });
 }
-document.addEventListener('DOMContentLoaded', handleLogin);
+document.addEventListener('DOMContentLoaded', initializeAppDirectly);
--- a/src/styles/common.css
+++ b/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: 19px;
+  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,133 +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;
 }
-.text-tag {
+.asset-type-label {
-  color: var(--text-muted);
+  font-size: var(--fs-sm);
-  font-size: 16px;
+  font-weight: 500;
-  padding: 1px 5px;
+  color: var(--mute);
-  border: 1px solid var(--border-color);
+  line-height: 1;
  border-radius: 3px;
  background-color: var(--bg-light);
 }
-.font-bold {
+.main-footer {
-  font-weight: 700;
+  border-top: 1px solid var(--border-color);
  background-color: var(--canvas);
  color: var(--mute);
  padding: 1rem 2rem;
  text-align: right;
  font-size: var(--fs-xs);
  flex-shrink: 0;
  z-index: 10;
 }
-/* --- Responsive Design (Tablet & Mobile) --- */
+.main-footer p {
-@media (max-width: 1200px) {
+  margin: 0;
-  .header-container { gap: 0.75rem; padding: 0 1rem; }
+  letter-spacing: -0.02em;
  .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; }
 }
--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -1,521 +1,503 @@
-/* --- Premium Executive Dashboard View Specific Styles --- */
+/* --- Vercel Inspired Premium Dashboard --- */
 .dashboard-section-title {
-  padding: 0 0 1rem 0;
+  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;
  margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
  line-height: 1;
 }
-.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 Glassmorphism Card Style */
+.stat-group-item {
-.dashboard-card, .stat-card {
+  flex: 1;
-  background: rgba(255, 255, 255, 0.7);
+  min-width: 250px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  padding: var(--spacing-base);
  justify-content: center;
 }
-.dashboard-card:hover, .stat-card:hover {
+.stat-group-item.bordered {
-  transform: translateY(-5px);
+  border-left: 1px solid var(--hairline);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12);
 }
-.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.2rem;
  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.15rem;
  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.75rem;
  letter-spacing: 0.05em;
 }
 .table-premium td {
  padding: 1rem;
  border-bottom: 1px solid #E2E8F0;
  color: #1E293B;
  font-size: 13px;
 }
 .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.75rem;
  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.75rem;
  cursor: pointer;
 }
 .page-btns button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
 }
 .slider-indicator {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 1.2rem;
 }
 .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);
  }
 }
--- a/src/styles/table.css
+++ b/src/styles/table.css
@@ -10,27 +10,19 @@
 }
 .page-title {
-  font-size: 21px;
+  font-size: 16px;
  font-weight: 700;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
-}
+  border-left: 4px solid var(--primary-color);
-
+  padding-left: 8px;
-.page-title i {
+  line-height: 1.2;
  display: flex;
  align-items: center;
 }
 .page-title svg {
  width: 18px;
  height: 18px;
 }
 .page-description {
-  font-size: 17px;
+  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
@@ -72,7 +64,7 @@
 }
 .search-item label {
-  font-size: 16px;
+  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
 }
@@ -83,7 +75,7 @@
  padding: 0 1rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
-  font-size: 19px;
+  font-size: 14px;
  outline: none;
  background-color: var(--white);
 }
@@ -141,7 +133,7 @@ thead {
 th {
  background-color: var(--bg-light) !important;
-  font-size: 18px;
+  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  position: sticky;
@@ -152,7 +144,7 @@ th {
 }
 td {
-  font-size: 18px;
+  font-size: 13px;
  color: var(--text-main);
  font-weight: 400;
 }
--- a/src/views/Dashboard/HwDashboard.ts
+++ b/src/views/Dashboard/HwDashboard.ts
--- a/src/views/Dashboard/SwDashboard.ts
+++ b/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:1rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
+          <div class="stat-label">외부 소프트웨어 사용율</div>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
+          <div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
-          <div style="font-size: 2rem; 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:1rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
+          <div class="stat-label">내부 소프트웨어 현황</div>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
+          <div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
-          <div style="font-size: 2rem; 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:1rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
+          <div class="stat-label">외부 SW 누적 비용 (2026)</div>
-          <div style="font-size: 2rem; 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:1rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
+          <div class="stat-label">내부 SW 누적 비용 (2026)</div>
-          <div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
+          <div class="stat-value text-blue">₩ ${intCost2026.toLocaleString()}</div>
        </div>
      </div>
    </div>
--- a/src/views/List/ListFactory.ts
+++ b/src/views/List/ListFactory.ts
--- a/src/views/List/PartsMasterListView.ts
+++ b/src/views/List/PartsMasterListView.ts
@@ -0,0 +1,179 @@
 import { state } from '../../core/state';
 import { openPartsMasterModal } from '../../components/Modal/PartsMasterModal';
 import { openJobSpecModal } from '../../components/Modal/JobSpecModal';
 import { formatInline } from '../../core/utils';
 import { createListView } from './ListFactory';
 export let activePartsMasterSubTab: 'parts-master' | 'job-spec' = 'parts-master';
 export function renderPartsMasterList(container: HTMLElement) {
  if (activePartsMasterSubTab === 'parts-master') {
    createListView(container, {
      title: '부품 마스터',
      dataSource: () => state.masterData.partsMaster || [],
      searchKeys: ['component_name', 'category', 'score_tier'],
      filterOptions: {
        keywordLabel: '부품명 / 등급 검색',
        showLoc: false,
        showDept: false,
        showType: false
      },
      onRowClick: (component) => openPartsMasterModal(component, 'view'),
      columns: [
        {
          header: 'ID',
          sortKey: 'id',
          align: 'center',
          width: '5%',
          render: c => c.id.toString()
        },
        {
          header: '분류',
          sortKey: 'category',
          align: 'center',
          width: '15%',
          render: c => {
            let badgeClass = 'badge-primary';
            if (c.category === 'CPU') badgeClass = 'badge-primary';
            else if (c.category === 'GPU') badgeClass = 'badge-success';
            else if (c.category === 'RAM') badgeClass = 'badge-warning';
            return `<span class="badge ${badgeClass}">${c.category}</span>`;
          }
        },
        {
          header: '부품 표준 명칭',
          sortKey: 'component_name',
          render: c => formatInline(c.component_name || '-')
        },
        {
          header: '성능 등급',
          sortKey: 'score_tier',
          align: 'center',
          width: '15%',
          render: c => c.score_tier || '-'
        },
        {
          header: '감점 점수',
          sortKey: 'deduction',
          align: 'center',
          width: '15%',
          render: c => {
            const score = c.deduction || 0;
            let color = '#3b82f6'; // blue
            if (score >= 20) color = '#ef4444'; // red
            else if (score >= 10) color = '#f59e0b'; // orange
            return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
          }
        }
      ]
    });
  } else {
    createListView(container, {
      title: '직무별 기준 사양',
      dataSource: () => state.masterData.jobSpecs || [],
      searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'],
      filterOptions: {
        keywordLabel: '직무명 / 사양 검색',
        showLoc: false,
        showDept: false,
        showType: false
      },
      onRowClick: (jobSpec) => openJobSpecModal(jobSpec, 'view'),
      columns: [
        {
          header: 'ID',
          sortKey: 'id',
          align: 'center',
          width: '5%',
          render: j => j.id.toString()
        },
        {
          header: '직무명',
          sortKey: 'job_name',
          width: '25%',
          render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
        },
        {
          header: '요구 PC 등급',
          sortKey: 'required_grade',
          align: 'center',
          width: '20%',
          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: '50%',
          render: j => formatInline(j.remarks || '-')
        }
      ]
    });
  }
  renderSubTabs(container);
 }
 function renderSubTabs(container: HTMLElement) {
  const searchBar = container.querySelector('.search-bar');
  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; 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 = `
    <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: 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>
  `;
  searchBar.parentNode!.insertBefore(tabContainer, searchBar);
  const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
  const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
  tabPartsMaster.addEventListener('click', () => {
    if (activePartsMasterSubTab !== 'parts-master') {
      activePartsMasterSubTab = 'parts-master';
      renderPartsMasterList(container);
    }
  });
  tabJobSpec.addEventListener('click', () => {
    if (activePartsMasterSubTab !== 'job-spec') {
      activePartsMasterSubTab = 'job-spec';
      renderPartsMasterList(container);
    }
  });
 }
--- a/src/views/List/PcListView.ts
+++ b/src/views/List/PcListView.ts
@@ -1,23 +1,57 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { sortAssets, formatInline } from '../../core/utils';
+import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade, isWindows11Incompatible } from '../../core/utils';
 import { ASSET_SCHEMA } from '../../core/schema';
 import { createListView } from './ListFactory';
 import { SortState } from '../../core/tableHandler';
 let persistentSortState: SortState = { key: 'updated_at', direction: 'desc' };
 export function renderPcList(container: HTMLElement) {
  createListView(container, {
    title: 'PC',
-    dataSource: () => sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC')),
+    persistentSortState,
    dataSource: () => {
      const list = (state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC');
      list.forEach((a: any) => {
        a['_pc_score'] = calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
      });
      // 변경일시(updated_at) 내림차순 정렬 (최신 변경 항목이 맨 위로)
      return list.sort((a: any, b: any) => {
        const dateA = a.updated_at || a.created_at || '';
        const dateB = b.updated_at || b.created_at || '';
        if (dateA < dateB) return 1;
        if (dateA > dateB) return -1;
        return 0;
      });
    },
    searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
    filterOptions: {
      keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
      showLoc: true,
      showDept: true,
-      showType: true
+      showType: true,
      showStatus: true
    },
    onRowClick: (asset) => openHwModal(asset, 'view'),
    columns: [
      { 
        header: ASSET_SCHEMA.HW_STATUS.ui, 
        sortKey: ASSET_SCHEMA.HW_STATUS.key, 
        align: 'center', 
        width: '8%',
        render: a => {
          const status = a[ASSET_SCHEMA.HW_STATUS.key] || '재고';
          let badgeClass = 'badge-light';
          if (status === '운영') badgeClass = 'b-green';
          else if (status === '재고') badgeClass = 'b-yellow';
          else if (status === '수리') badgeClass = 'b-purple';
          else if (status === '폐기') badgeClass = 'badge-muted';
          return `<span class="badge ${badgeClass}">${status}</span>`;
        }
      },
      { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
      { header: ASSET_SCHEMA.USER_POSITION.ui, sortKey: ASSET_SCHEMA.USER_POSITION.key, align: 'center', render: a => a[ASSET_SCHEMA.USER_POSITION.key] || '-' },
      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
      { header: ASSET_SCHEMA.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' },
      { header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' },
@@ -27,13 +61,35 @@ export function renderPcList(container: HTMLElement) {
        header: 'SSD', 
        align: 'center', 
        width: '8%',
-        render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-' 
+        render: a => {
          try {
            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
            if (Array.isArray(vols)) {
              const ssds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'SSD');
              if (ssds.length > 0) {
                return ssds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
              }
            }
          } catch (e) {}
          return '-';
        }
      },
      { 
        header: 'HDD', 
        align: 'center', 
        width: '12%',
-        render: a => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-' 
+        render: a => {
          try {
            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
            if (Array.isArray(vols)) {
              const hdds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'HDD');
              if (hdds.length > 0) {
                return hdds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
              }
            }
          } catch (e) {}
          return '-';
        }
      },
      { 
        header: ASSET_SCHEMA.MAC_ADDR.ui, 
@@ -41,7 +97,18 @@ export function renderPcList(container: HTMLElement) {
        align: 'center', 
        render: a => `<span style="font-family:monospace; font-size:11px;">${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}</span>` 
      },
-      { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', width: '30%', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
+      {
        header: '성능 등급',
        sortKey: '_pc_score',
        align: 'center',
        width: '8%',
        render: a => {
          const score = a._pc_score !== undefined ? a._pc_score : calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
          const isWin11Incompatible = isWindows11Incompatible(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key]);
          const grade = getPcGrade(score, isWin11Incompatible);
          return `<span class="badge ${grade.class}" title="성능 점수: ${score}점">${grade.name}</span>`;
        }
      }
    ]
  });
 }
--- a/src/views/List/UserListView.ts
+++ b/src/views/List/UserListView.ts
@@ -0,0 +1,61 @@
 import { state } from '../../core/state';
 import { openUserModal } from '../../components/Modal/UserModal';
 import { formatInline } from '../../core/utils';
 import { createListView } from './ListFactory';
 export function renderUserList(container: HTMLElement) {
  createListView(container, {
    title: '사용자',
    dataSource: () => state.masterData.users || [],
    searchKeys: ['emp_no', 'user_name', 'dept_name', 'position', 'status'],
    filterOptions: {
      keywordLabel: '사번/이름/조직/직무 검색',
      showCorp: false,
      showDept: true,
      showPosition: true,
      showType: false
    },
    onRowClick: (user) => openUserModal(user, 'view'),
    columns: [
      {
        header: '사번',
        sortKey: 'emp_no',
        align: 'center',
        width: '15%',
        render: u => formatInline(u.emp_no || '-')
      },
      {
        header: '이름',
        sortKey: 'user_name',
        align: 'center',
        width: '15%',
        render: u => formatInline(u.user_name || '-')
      },
      {
        header: '조직 (부서)',
        sortKey: 'dept_name',
        align: 'left',
        width: '25%',
        render: u => formatInline(u.dept_name || '-')
      },
      {
        header: '직무',
        sortKey: 'position',
        align: 'left',
        width: '25%',
        render: u => formatInline(u.position || '-')
      },
      {
        header: '상태',
        sortKey: 'status',
        align: 'center',
        width: '10%',
        render: u => {
          const status = u.status || '재직';
          const badgeClass = status === '퇴직' ? 'badge-danger' : 'badge-success';
          return `<span class="badge ${badgeClass}">${status}</span>`;
        }
      }
    ]
  });
 }
--- a/src/views/SW_Table.ts
+++ b/src/views/SW_Table.ts
@@ -9,11 +9,13 @@ import { renderCloudList } from './List/CloudListView';
 import { renderDomainList } from './List/DomainListView';
 import { renderNetworkList } from './List/NetworkListView';
 import { renderPcPartList } from './List/PcPartListView';
 import { renderPartsMasterList } from './List/PartsMasterListView';
 import { renderSpaceInfoList } from './List/SpaceInfoListView';
 import { renderGiftList } from './List/GiftListView';
 import { renderFacilityList } from './List/FacilityListView';
 import { renderCostList } from './List/CostListView';
-import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw } from 'lucide';
+import { renderUserList } from './List/UserListView';
 import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings } from 'lucide';
 /**
 * 자산 목록 테이블 렌더링 통합 허브
@@ -36,6 +38,7 @@ export function renderSWTable(mainContent: HTMLElement) {
      else if (tab === '업무지원장비') renderEquipmentList(container);
      else if (tab === '네트워크') renderNetworkList(container);
      else if (tab === 'PC부품') renderPcPartList(container);
      else if (tab === '부품 마스터') renderPartsMasterList(container);
      else if (tab === '공간정보장비') renderSpaceInfoList(container);
      else {
        container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 하드웨어 리스트 뷰가 정의되지 않았습니다.</div>`;
@@ -50,6 +53,7 @@ export function renderSWTable(mainContent: HTMLElement) {
      if (tab === '도메인') renderDomainList(container);
      else if (tab === '클라우드') renderCloudList(container);
      else if (tab === '비용관리') renderCostList(container);
      else if (tab === '사용자') renderUserList(container);
      else {
        container.innerHTML = `<div style="padding:2rem; color:var(--text-muted);">"${tab}" 탭에 대한 운영지원 리스트 뷰가 정의되지 않았습니다.</div>`;
      }
@@ -69,7 +73,7 @@ export function renderSWTable(mainContent: HTMLElement) {
    // 전역 아이콘 초기화 (한 번 더 실행하여 누락 방지)
    createIcons({
-      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw }
+      icons: { Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, RefreshCcw, Settings }
    });
  } catch (err: any) {
    console.error('❌ Error rendering table view:', err);
Author	SHA1	Message	Date
JooWangi	d1378d127a	feat: PC 등급 뱃지 색상 CSS 추가 및 Win11 불가 PC 교체 대상 등급 강제 적용	2026-06-29 10:03:07 +09:00
JooWangi	f656f0a439	fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조) - HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회 - ListFactory: 동일하게 세부 직무명 우선 참조 - 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시 - 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영) - 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨	2026-06-18 19:48:23 +09:00
JooWangi	1d32a0350b	feat: 등급별 자산 종합 현황 및 사양 적정성 분석 레이아웃 5:5 콤팩트 최적화	2026-06-18 15:56:51 +09:00
JooWangi	abc531a41e	Design: 대시보드 하단 표 세로비율 확장 및 스크롤바 제거	2026-06-17 09:28:06 +09:00
JooWangi	8451101325	Style: 대시보드 UI 프리미엄 리스타일링 및 카드 구조 도입	2026-06-17 09:25:16 +09:00
JooWangi	3e69e74bc9	Feat: 통합 사양 적정성 인라인 바 그래프 및 대시보드 레이아웃 개편	2026-06-17 09:22:31 +09:00
JooWangi	723c4723f6	feat: 개인PC 자산 관리(PC) 페이지에서 '자산 현황' 토글 탭 숨김처리 및 자산 목록으로 기본 고정	2026-06-15 15:01:46 +09:00
JooWangi	a44283281f	feat: 대시보드 미니 모달 상세 자산 목록 테이블에 등급 및 점수 컬럼 표기 기능 추가	2026-06-15 14:53:36 +09:00
JooWangi	fa87f383e2	fix: 직무별 기준 사양 대비 부족 사양(0.6배 미만) 및 오버스펙(1.5배 초과) 판정 수치 비율 임계치 조정	2026-06-15 14:51:09 +09:00
JooWangi	6118141f6e	feat: 직무별 기준 사양(job_spec_standards) 데이터를 활용한 부족사양, 오버스펙 판정 및 등급별 부족분(구매 필요) 산출 공식 연동	2026-06-15 14:43:53 +09:00
JooWangi	05e23883b8	feat: 직무별 기준 사양 등록 시 부품 마스터 자동완성 검색 및 성능 점수 실시간 자동 계산 기능 추가	2026-06-15 13:29:10 +09:00
JooWangi	8c406fd0b8	fix: 부품 표준 정보 서브 탭 렌더링 시 DOM 쿼리 타이밍 에러 해결 (document.getElementById -> tabContainer.querySelector)	2026-06-15 13:27:20 +09:00
JooWangi	e678f9d653	feat: 부품 마스터 화면 내 직무별 기준 사양 CRUD 및 서브 탭 연동 기능 추가	2026-06-15 13:26:11 +09:00
JooWangi	132e37d0d3	refactor: 사양 부족 및 노후 장비의 교체 수요를 해당 사용자의 직무 권장 사양 등급에 맞추어 분산 합계 계산	2026-06-15 13:19:10 +09:00
JooWangi	d6e75f8b2c	refactor: 교체 대상 PC 교체 수요를 보급 PC 신규 구매 필요 수량으로 이전 합산	2026-06-15 13:17:01 +09:00
JooWangi	c35f57acab	style: 보급 PC 라벨 단순화 및 부족분 컬럼명을 구매 필요로 변경	2026-06-15 13:14:45 +09:00
JooWangi	97cecb8b50	feat: 5등급 PC 분류 체계 도입 (교체 대상 PC 등급 신설)	2026-06-15 13:12:07 +09:00
JooWangi	a4b620099c	feat: 대시보드 폰트 크기, 패딩 조절 및 자산목록 정렬 기준 변경(updated_at 내림차순)	2026-06-15 11:22:07 +09:00
JooWangi	407b9ba531	style: 연도별 PC 노후도 예측 표의 왼편 여백 제거 및 레이아웃 정렬	2026-06-12 10:40:37 +09:00
Taehoon	55c43aa250	merge: remote main updates into local main	2026-06-12 10:37:52 +09:00
Taehoon	9186eb50ca	feat: 자산 관리 시스템 고도화 및 DB 정규화 대응 수정 1. 자산 저장 시 500 에러 해결: V3 정규화 스키마에 맞춰 테이블 매핑 최신화 및 저장 로직 안정화 2. 자산 번호 체계 개편: 구매일자(YYYYMM)와 유형을 기반으로 PREFIX-YYYYMM-NNNN 규칙 적용 (코드 로직 수정 및 기존 데이터 전량 갱신) 3. 구매일자 표준화: 모든 purchase_date를 YYYY-MM-DD 형식으로 통일 4. HWModal 기능 복원: 위치 등록 시 다중 사진 페이지네이션(좌우 버튼) 기능 복구 5. 위치 지도 고도화: HTML 인터랙티브 지도 지원 및 이미지 지도 내 좌석 스내핑 로직 추가	2026-06-12 10:29:42 +09:00
JooWangi	8a3727ea61	feat: 대시보드 구분선 디자인 전환, 폰트 확대 및 버그 수정	2026-06-12 08:49:04 +09:00
Taehoon	0c1977f707	style: 폰트 크기를 ux_setting 표준 규격(14px)으로 복구 및 최적화	2026-06-11 13:06:04 +09:00