From b37981506e44344fafe8f45764068f48804b8b4c Mon Sep 17 00:00:00 2001
From: Taehoon <thlee3@samaneng.com>
Date: Wed, 17 Jun 2026 10:46:24 +0900
Subject: [PATCH] style: revert content/logic to main while preserving Vercel
 UI styles

- Reverted HWModal to unified form structure from main branch
- Restored original field positions and visibility logic in all modals
- Applied Vercel-inspired CSS classes and removed legacy inline styles
- Restored SwDashboard 2x2 layout from main
- Cleaned up unused modular form files
- Fixed TypeError related to ASSET_MFR schema key
---
 src/components/Modal/BaseModal.ts            |  11 +-
 src/components/Modal/DomainModal.ts          |  30 +-
 src/components/Modal/Forms/CommonHwFields.ts |  38 -
 src/components/Modal/Forms/PcForm.ts         |  72 --
 src/components/Modal/Forms/ServerForm.ts     |  90 ---
 src/components/Modal/HWModal.ts              | 799 ++++++++++++++-----
 src/components/Modal/ModalUtils.ts           |  21 +-
 src/components/Modal/PCFlowModal.ts          |  47 +-
 src/components/Modal/PartsMasterModal.ts     |  78 +-
 src/components/Modal/SWModal.ts              |  46 +-
 src/components/Modal/SWUserModal.ts          |  67 +-
 src/components/Modal/UserModal.ts            |  78 +-
 src/views/Dashboard/SwDashboard.ts           |  64 +-
 src/views/List/PartsMasterListView.ts        |   2 +-
 14 files changed, 812 insertions(+), 631 deletions(-)
 delete mode 100644 src/components/Modal/Forms/CommonHwFields.ts
 delete mode 100644 src/components/Modal/Forms/PcForm.ts
 delete mode 100644 src/components/Modal/Forms/ServerForm.ts

diff --git a/src/components/Modal/BaseModal.ts b/src/components/Modal/BaseModal.ts
index 09645ea..fd221dd 100644
--- a/src/components/Modal/BaseModal.ts
+++ b/src/components/Modal/BaseModal.ts
@@ -111,9 +111,16 @@ export function closeModals() {
 }
 
 export function initBaseModal() {
-  // ESC 키로 모든 모달 닫기
+  // ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
   window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') closeModals();
+    if (e.key === 'Escape') {
+      const picker = document.querySelector('.image-picker-overlay');
+      if (picker) {
+        picker.remove();
+      } else {
+        closeModals();
+      }
+    }
   });
 
   return { closeAllModals: closeModals };
diff --git a/src/components/Modal/DomainModal.ts b/src/components/Modal/DomainModal.ts
index bb98c9e..32cb261 100644
--- a/src/components/Modal/DomainModal.ts
+++ b/src/components/Modal/DomainModal.ts
@@ -2,7 +2,7 @@ import { state, saveAsset, deleteAsset } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { CORP_LIST } from './SharedData';
 import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
-import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
+import { createIcons, X, Save, History, Plus } from 'lucide';
 import { formatExcelDate } from '../../core/excelHandler';
 import { UI_TEXT } from '../../core/schema';
 
@@ -16,15 +16,15 @@ class DomainAssetModal extends BaseModal {
       <div id="domain-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <h2 id="domain-modal-title">${this.title}</h2>
-            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+            <h2 id="domain-modal-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
           <div class="modal-body">
             <div class="modal-body-split">
               <div class="modal-form-area">
                 <form id="domain-asset-form" class="grid-form">
                   <input type="hidden" id="domain-id" name="id" />
-                  
+
                   <div class="form-section-title">기본 정보</div>
                   <div class="form-group">
                     <label>구분</label>
@@ -58,7 +58,7 @@ class DomainAssetModal extends BaseModal {
                   </div>
                   <div class="form-group">
                     <label>비용 (연간/월간)</label>
-                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
+                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
                   </div>
 
                   <div class="form-section-title">담당자 및 비고</div>
@@ -78,9 +78,9 @@ class DomainAssetModal extends BaseModal {
               </div>
               <div class="modal-history-area">
                 <div class="history-header">
-                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
+                  <h3><i data-lucide="history"></i> 변경 이력</h3>
                   <button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
-                    이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
+                    이력 추가 <i data-lucide="plus"></i>
                   </button>
                 </div>
                 <div id="domain-history-list" class="history-timeline"></div>
@@ -141,7 +141,7 @@ class DomainAssetModal extends BaseModal {
       }
     });
 
-    createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
+    createIcons({ icons: { History, Plus, Save, X } });
   }
 
   protected fillFormData(asset: any): void {
@@ -163,7 +163,7 @@ class DomainAssetModal extends BaseModal {
   protected onAfterOpen(asset: any, mode: string): void {
     const titleEl = document.getElementById('domain-modal-title');
     if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
-    
+
     const deleteBtn = document.getElementById('btn-delete-domain-asset');
     if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
   }
@@ -173,16 +173,10 @@ class DomainAssetModal extends BaseModal {
     if (!container) return;
     const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
     if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
+    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
   }
 }
 
 export const domainModal = new DomainAssetModal();
-
-export function initDomainModal(onSave: () => void, closeModals: () => void) {
-  domainModal.init(onSave, closeModals);
-}
-
-export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
-  domainModal.open(asset, mode);
-}
+export function initDomainModal(onSave: () => void, closeModals: () => void) { domainModal.init(onSave, closeModals); }
+export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { domainModal.open(asset, mode); }
diff --git a/src/components/Modal/Forms/CommonHwFields.ts b/src/components/Modal/Forms/CommonHwFields.ts
deleted file mode 100644
index 4d2d9e4..0000000
--- a/src/components/Modal/Forms/CommonHwFields.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { ASSET_SCHEMA } from '../../../core/schema';
-import { generateOptionsHTML } from '../ModalUtils';
-import { CORP_LIST, ORG_LIST } from '../SharedData';
-
-export function renderCommonHwFields(): string {
-  return `
-    <div class="form-section-title">구매 및 증빙 정보</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
-      <input type="text" id="hw-purchase_date" name="purchase_date" placeholder="YYYY-MM-DD" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
-      <input type="text" id="hw-purchase_vendor" name="purchase_vendor" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
-      <input type="text" id="hw-purchase_amount" name="purchase_amount" placeholder="0" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.APPROVAL_DOC.ui} (첨부파일)</label>
-      <div class="file-upload-wrapper">
-        <input type="file" id="hw-approval_document_file" style="display:none;" />
-        <div class="input-with-btn">
-          <button type="button" id="btn-file-select" onclick="document.getElementById('hw-approval_document_file').click()" class="btn btn-outline btn-loc-action">
-            <span id="hw-file-name-display">파일 선택...</span>
-          </button>
-        </div>
-        <input type="hidden" id="hw-approval_document" name="approval_document" />
-        <div id="hw-file-link-container"></div>
-      </div>
-    </div>
-    <div class="form-group full-width">
-      <label>${ASSET_SCHEMA.MEMO.ui}</label>
-      <textarea id="hw-memo" name="memo" rows="3"></textarea>
-    </div>
-  `;
-}
diff --git a/src/components/Modal/Forms/PcForm.ts b/src/components/Modal/Forms/PcForm.ts
deleted file mode 100644
index 547b02e..0000000
--- a/src/components/Modal/Forms/PcForm.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { ASSET_SCHEMA } from '../../../core/schema';
-import { generateOptionsHTML } from '../ModalUtils';
-import { CORP_LIST, ORG_LIST, HW_STATUS_LIST } from '../SharedData';
-
-export function renderPcForm(): string {
-  return `
-    <div class="form-section-title">기본 정보 (PC/노트북)</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
-      <div class="input-with-btn">
-        <input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
-        <button type="button" id="btn-gen-hw-code" class="btn btn-outline">생성</button>
-      </div>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
-      <select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
-    </div>
-    <div class="form-group full-width">
-      <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
-      <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" />
-    </div>
-
-    <div class="form-section-title">사용자 및 조직</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
-      <select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
-      <input type="text" id="hw-user_current" name="user_current" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
-      <input type="text" id="hw-user_position" name="user_position" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.EMP_NO.ui}</label>
-      <input type="text" id="hw-emp_no" name="emp_no" />
-    </div>
-
-    <div class="form-section-title">시스템 사양</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
-      <input type="text" id="hw-model_name" name="model_name" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.OS.ui}</label>
-      <input type="text" id="hw-os" name="os" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.CPU.ui}</label>
-      <input type="text" id="hw-cpu" name="cpu" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.RAM.ui}</label>
-      <input type="text" id="hw-ram" name="ram" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.GPU.ui}</label>
-      <input type="text" id="hw-gpu" name="gpu" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.MAC_ADDR.ui}</label>
-      <input type="text" id="hw-mac_address" name="mac_address" />
-    </div>
-  `;
-}
diff --git a/src/components/Modal/Forms/ServerForm.ts b/src/components/Modal/Forms/ServerForm.ts
deleted file mode 100644
index e482636..0000000
--- a/src/components/Modal/Forms/ServerForm.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { ASSET_SCHEMA } from '../../../core/schema';
-import { generateOptionsHTML } from '../ModalUtils';
-import { CORP_LIST, LOCATION_DATA, HW_STATUS_LIST } from '../SharedData';
-
-export function renderServerForm(): string {
-  return `
-    <div class="form-section-title">기본 정보 (서버)</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
-      <div class="input-with-btn">
-        <input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
-        <button type="button" id="btn-gen-hw-code" class="btn btn-outline">생성</button>
-      </div>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
-      <select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.MONITORING.ui}</label>
-      <select id="hw-monitoring" name="monitoring">
-        <option value="비대상">비대상</option>
-        <option value="대상">대상</option>
-      </select>
-    </div>
-    <div class="form-group full-width">
-      <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
-      <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="서버의 용도를 입력하세요" />
-    </div>
-
-    <div class="form-section-title">시스템 사양</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
-      <input type="text" id="hw-model_name" name="model_name" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.OS.ui}</label>
-      <input type="text" id="hw-os" name="os" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.CPU.ui}</label>
-      <input type="text" id="hw-cpu" name="cpu" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.RAM.ui}</label>
-      <input type="text" id="hw-ram" name="ram" />
-    </div>
-
-    <div class="form-section-title">네트워크 및 접속 정보</div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.IP_ADDR.ui}</label>
-      <input type="text" id="hw-ip_address" name="ip_address" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.IP_ADDR2.ui}</label>
-      <input type="text" id="hw-ip_address_2" name="ip_address_2" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.REMOTE_TOOL.ui}</label>
-      <input type="text" id="hw-remote_tool" name="remote_tool" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.REMOTE_ID.ui}</label>
-      <input type="text" id="hw-remote_id" name="remote_id" />
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.REMOTE_PW.ui}</label>
-      <input type="text" id="hw-remote_pw" name="remote_pw" />
-    </div>
-
-    <div class="form-section-title">설치 위치</div>
-    <div class="form-group">
-      <label>건물/위치</label>
-      <select id="hw-bldg-select" name="location">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
-    </div>
-    <div class="form-group">
-      <label>${ASSET_SCHEMA.LOC_DETAIL.ui}</label>
-      <div class="input-with-btn">
-        <select id="hw-location_detail" name="location_detail" style="flex: 1;"><option value="">선택</option></select>
-        <button type="button" id="btn-reg-loc-map" class="btn btn-primary hidden">위치등록</button>
-        <button type="button" id="btn-view-loc-map" class="btn btn-primary hidden">위치보기</button>
-      </div>
-      <input type="hidden" id="hw-loc_x" name="loc_x" /><input type="hidden" id="hw-loc_y" name="loc_y" /><input type="hidden" id="hw-location_photo" name="location_photo" />
-    </div>
-  `;
-}
diff --git a/src/components/Modal/HWModal.ts b/src/components/Modal/HWModal.ts
index c0b2a25..8292059 100644
--- a/src/components/Modal/HWModal.ts
+++ b/src/components/Modal/HWModal.ts
@@ -1,24 +1,25 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
-import { 
-  generateOptionsHTML, 
-  setFieldValue, 
-  getFieldValue, 
-  parseAndSetLocation, 
-  bindLocationEvents, 
+import { calculatePcScoreDeductive, getPcGrade } from '../../core/utils';
+import {
+  generateOptionsHTML,
+  setFieldValue,
+  getFieldValue,
+  parseAndSetLocation,
+  bindLocationEvents,
   applyDateMask
 } from './ModalUtils';
 import { CORP_LIST, LOCATION_DATA, CATEGORY_TYPE_MAP, HW_STATUS_LIST, ORG_LIST, IMAGE_LOCATIONS, TYPE_PREFIX_MAP } from './SharedData';
 import { BaseModal } from './BaseModal';
-import { renderPcForm } from './Forms/PcForm';
-import { renderServerForm } from './Forms/ServerForm';
-import { renderCommonHwFields } from './Forms/CommonHwFields';
 
 /**
- * 하드웨어 자산 상세 모달 (Modular Edition)
+ * 하드웨어 자산 상세 모달 (Styled Main Edition)
+ * - 내용/순서는 main 버전 준수
+ * - 스타일은 ux_setting의 Vercel 디자인 준수
  */
 class HwAssetModal extends BaseModal {
   private dynamicMapConfig: Record<string, any[]> = {};
+  private masterComponents: any[] = [];
 
   constructor() {
     super('hw', '자산 상세 정보');
@@ -29,7 +30,7 @@ class HwAssetModal extends BaseModal {
       <div id="hw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <div class="header-left">
+            <div class="header-left" style="display: flex; align-items: center; gap: 0.75rem;">
               <h2 id="hw-modal-title" class="modal-title">${this.title}</h2>
               <div class="category-badge-wrapper" id="hw-category-badge-container"></div>
             </div>
@@ -40,8 +41,22 @@ class HwAssetModal extends BaseModal {
               <div class="modal-form-area">
                 <form id="hw-asset-form" class="grid-form">
                   <input type="hidden" id="hw-id" name="id" />
-                  
-                  <!-- 기본 분류 필드 (항상 표시) -->
+                  <input type="hidden" id="hw-remotes-data" name="remotes" />
+                  <input type="hidden" id="hw-volumes-data" name="volumes" />
+
+                  <!-- [SECTION 1] 기본 관리 정보 -->
+                  <div class="form-section-title">기본 관리 정보</div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.ASSET_CODE.ui}</label>
+                    <div class="input-with-btn">
+                      <input type="text" id="hw-asset_code" name="asset_code" placeholder="자동 생성" readonly />
+                      <button type="button" id="btn-gen-hw-code" class="btn btn-outline">생성</button>
+                    </div>
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
+                    <select id="hw-purchase_corp" name="purchase_corp">${generateOptionsHTML(CORP_LIST)}</select>
+                  </div>
                   <div class="form-group">
                     <label>${ASSET_SCHEMA.CATEGORY.ui}</label>
                     <select id="hw-category" name="category">
@@ -55,19 +70,161 @@ class HwAssetModal extends BaseModal {
                       <option value="">구분을 먼저 선택하세요</option>
                     </select>
                   </div>
-
-                  <hr class="form-divider" style="grid-column: 1 / -1; margin: 1rem 0; border: none; border-top: 1px solid var(--hairline);" />
-
-                  <!-- 동적 폼 영역 -->
-                  <div id="dynamic-form-content" class="dynamic-form-container" style="grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
-                    <div style="grid-column: 1 / -1; padding: 3rem; text-align: center; color: var(--mute);">
-                      자산 구분을 선택하면 해당 서식이 표시됩니다.
-                    </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
+                    <select id="hw-hw_status" name="hw_status">${generateOptionsHTML(HW_STATUS_LIST)}</select>
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.SERVICE_TYPE.ui}</label>
+                    <select id="hw-service_type" name="service_type">
+                      <option value="외부">외부</option>
+                      <option value="내부">내부</option>
+                    </select>
+                  </div>
+                  <div class="form-group full-width">
+                    <label>${ASSET_SCHEMA.ASSET_PURPOSE.ui}</label>
+                    <input type="text" id="hw-asset_purpose" name="asset_purpose" placeholder="자산의 용도를 입력하세요" />
+                  </div>
+                  <div class="form-group infra-only monitoring-field">
+                    <label>${ASSET_SCHEMA.MONITORING.ui}</label>
+                    <select id="hw-monitoring" name="monitoring">
+                      <option value="비대상">비대상</option>
+                      <option value="대상">대상</option>
+                    </select>
                   </div>
 
-                  <!-- 공통 필드 영역 (구매 정보 등) -->
-                  <div id="common-form-content" class="common-form-container hidden" style="grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
-                    ${renderCommonHwFields()}
+                  <!-- [SECTION 2] 조직 및 사용자 정보 -->
+                  <div class="form-section-title">사용자 및 조직 정보</div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
+                    <select id="hw-current_dept" name="current_dept">${generateOptionsHTML(ORG_LIST)}</select>
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.MANAGER_MAIN.ui}</label>
+                    <input type="text" id="hw-manager_primary" name="manager_primary" />
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.MANAGER_SUB.ui}</label>
+                    <input type="text" id="hw-manager_secondary" name="manager_secondary" />
+                  </div>
+                  <div class="form-group personal-only">
+                    <label>${ASSET_SCHEMA.CURRENT_USER.ui}</label>
+                    <input type="text" id="hw-user_current" name="user_current" />
+                  </div>
+                  <div class="form-group personal-only">
+                    <label>${ASSET_SCHEMA.USER_POSITION.ui}</label>
+                    <input type="text" id="hw-user_position" name="user_position" />
+                  </div>
+                  <div class="form-group personal-only">
+                    <label>${ASSET_SCHEMA.PREV_USER.ui}</label>
+                    <input type="text" id="hw-previous_user" name="previous_user" />
+                  </div>
+
+                  <!-- [SECTION 3] 하드웨어 사양 -->
+                  <div class="form-section-title hardware-section">시스템 사양 정보</div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.MODEL_NAME.ui}</label>
+                    <input type="text" id="hw-model_name" name="model_name" />
+                  </div>
+                  <div class="form-group sn-only">
+                    <label>${ASSET_SCHEMA.SERIAL_NUM.ui}</label>
+                    <input type="text" id="hw-serial_num" name="serial_num" />
+                  </div>
+                  <div class="form-group spec-only">
+                    <label>${ASSET_SCHEMA.OS.ui}</label>
+                    <input type="text" id="hw-os" name="os" />
+                  </div>
+                  <div class="form-group spec-only" style="position: relative;">
+                    <label>${ASSET_SCHEMA.CPU.ui}</label>
+                    <input type="text" id="hw-cpu" name="cpu" autocomplete="off" />
+                    <div id="hw-cpu-list" class="autocomplete-list hidden"></div>
+                  </div>
+                  <div class="form-group spec-only" style="position: relative;">
+                    <label>${ASSET_SCHEMA.RAM.ui}</label>
+                    <input type="text" id="hw-ram" name="ram" autocomplete="off" />
+                    <div id="hw-ram-list" class="autocomplete-list hidden"></div>
+                  </div>
+                  <div class="form-group spec-only" style="position: relative;">
+                    <label>${ASSET_SCHEMA.GPU.ui}</label>
+                    <input type="text" id="hw-gpu" name="gpu" autocomplete="off" />
+                    <div id="hw-gpu-list" class="autocomplete-list hidden"></div>
+                  </div>
+                  <div class="form-group spec-only">
+                    <label>적정성 등급</label>
+                    <div id="hw-pc-grade-badge" class="badge">정보 부족</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" />
+                  </div>
+                  <div class="form-group spec-only">
+                    <label>${ASSET_SCHEMA.ASSET_MFR.ui}</label>
+                    <input type="text" id="hw-asset_mfr" name="asset_mfr" />
+                  </div>
+
+                  <!-- 동적 볼륨 정보 -->
+                  <div class="form-group full-width spec-only">
+                    <label>디스크 구성 (Volume)</label>
+                    <div id="hw-volume-container" style="display: flex; flex-direction: column; gap: 8px;"></div>
+                    <button type="button" id="btn-add-volume" class="btn btn-outline btn-sm" style="margin-top: 8px;">+ 볼륨 추가</button>
+                  </div>
+
+                  <!-- [SECTION 4] 네트워크 및 원격 정보 -->
+                  <div class="form-section-title net-only">네트워크 및 원격 관리</div>
+                  <div class="form-group full-width net-only">
+                    <label>접속 정보 (IP / MAC / Remote)</label>
+                    <div id="hw-remote-info-container" style="display: flex; flex-direction: column; gap: 12px;"></div>
+                    <button type="button" id="btn-add-remote-info" class="btn btn-outline btn-sm" style="margin-top: 8px;">+ 접속 정보 추가</button>
+                  </div>
+
+                  <!-- [SECTION 5] 위치 정보 -->
+                  <div class="form-section-title location-section">물리적 위치 정보</div>
+                  <div class="form-group location-field">
+                    <label>건물/층</label>
+                    <select id="hw-bldg-select">${generateOptionsHTML(Object.keys(LOCATION_DATA))}</select>
+                  </div>
+                  <div class="form-group location-field">
+                    <label>상세 위치</label>
+                    <div class="input-with-btn">
+                      <select id="hw-location_detail" name="location_detail" style="flex: 1;">
+                        <option value="">층을 먼저 선택하세요</option>
+                      </select>
+                      <button type="button" id="btn-reg-loc-map" class="btn btn-outline hidden">위치 등록</button>
+                      <button type="button" id="btn-view-loc-map" class="btn btn-outline hidden">위치 확인</button>
+                    </div>
+                  </div>
+                  <!-- 숨김 처리된 좌표 필드 -->
+                  <input type="hidden" id="hw-loc_x" name="loc_x" />
+                  <input type="hidden" id="hw-loc_y" name="loc_y" />
+                  <input type="hidden" id="hw-location_photo" name="location_photo" />
+
+                  <!-- [SECTION 6] 구매 및 기타 정보 -->
+                  <div class="form-section-title">구매 및 기타 정보</div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
+                    <input type="text" id="hw-purchase_date" name="purchase_date" placeholder="YYYY-MM-DD" />
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.PURCHASE_VENDOR.ui}</label>
+                    <input type="text" id="hw-purchase_vendor" name="purchase_vendor" />
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
+                    <input type="text" id="hw-purchase_amount" name="purchase_amount" />
+                  </div>
+                  <div class="form-group">
+                    <label>${ASSET_SCHEMA.APPROVAL_DOC.ui}</label>
+                    <div class="input-with-btn">
+                      <input type="hidden" id="hw-approval_document" name="approval_document" />
+                      <div id="hw-file-name-display" class="is-readonly-field" style="flex: 1; border: 1px solid var(--hairline); border-radius: 6px; padding: 0 12px; height: clamp(34px, 4.5vmin, 44px); display: flex; align-items: center; font-size: var(--fs-sm); color: var(--mute);">파일 선택...</div>
+                      <div id="hw-file-link-container"></div>
+                      <input type="file" id="hw-approval_document_file" style="display: none;" />
+                      <button type="button" id="btn-file-select" class="btn btn-outline">파일 찾기</button>
+                    </div>
+                  </div>
+                  <div class="form-group full-width">
+                    <label>${ASSET_SCHEMA.MEMO.ui}</label>
+                    <textarea id="hw-memo" name="memo" rows="3" placeholder="기타 참고 사항을 입력하세요"></textarea>
                   </div>
                 </form>
               </div>
@@ -75,7 +232,6 @@ class HwAssetModal extends BaseModal {
               <div class="modal-history-area">
                 <div class="history-header">
                   <h3>자산 변동 이력</h3>
-                  <button type="button" id="btn-add-hw-log" class="btn btn-outline btn-sm">이력 추가</button>
                 </div>
                 <div id="hw-history-list" class="history-timeline"></div>
               </div>
@@ -84,86 +240,151 @@ class HwAssetModal extends BaseModal {
           <div class="modal-footer">
             <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
             <div class="footer-actions">
-              <button id="btn-revert-hw-edit" class="btn btn-outline hidden">수정 취소</button>
               <button id="btn-cancel-hw-modal" class="btn btn-outline">닫기</button>
               <button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
             </div>
           </div>
         </div>
       </div>
+      <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>
     `;
   }
 
-  private renderDynamicForm(category: string) {
-    const dynamicContainer = document.getElementById('dynamic-form-content');
-    const commonContainer = document.getElementById('common-form-content');
-    const badgeContainer = document.getElementById('hw-category-badge-container');
-    if (!dynamicContainer || !commonContainer || !badgeContainer) return;
-
-    if (!category) {
-      dynamicContainer.innerHTML = `<div style="grid-column: 1 / -1; padding: 3rem; text-align: center; color: var(--mute);">자산 구분을 선택하면 해당 서식이 표시됩니다.</div>`;
-      commonContainer.classList.add('hidden');
-      badgeContainer.innerHTML = '';
-      return;
-    }
-
-    commonContainer.classList.remove('hidden');
-    badgeContainer.innerHTML = `<span class="badge badge-primary">${category}</span>`;
-
-    if (category === 'PC' || category === '노트북') {
-      dynamicContainer.innerHTML = renderPcForm();
-    } else if (category === '서버' || category === '스토리지' || category === '네트워크') {
-      dynamicContainer.innerHTML = renderServerForm();
-    } else {
-      // 기타 하드웨어 (업무지원장비 등) - 서버 폼의 기본 필드를 재활용하거나 범용 폼 사용
-      dynamicContainer.innerHTML = renderServerForm(); 
-    }
-
-    // 폼 변경 후 이벤트 재바인딩
-    this.rebindDynamicEvents();
-  }
-
-  private rebindDynamicEvents() {
-    const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
-    if (bldgSelect) {
-      bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
-      bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
-      document.getElementById('hw-location_detail')?.addEventListener('change', () => this.updateMapButtonVisibility());
-    }
-    
-    const purchaseDate = document.getElementById('hw-purchase_date') as HTMLInputElement;
-    if (purchaseDate) applyDateMask(purchaseDate);
-
-    // 파일 업로드 이벤트 재연동
-    const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
-    fileInput?.addEventListener('change', async (e) => this.handleFileUpload(e));
-
-    // 코드 생성 이벤트 재연동
-    document.getElementById('btn-gen-hw-code')?.addEventListener('click', () => this.handleGenerateCode());
-
-    // 위치 맵 관련 이벤트
-    document.getElementById('btn-reg-loc-map')?.addEventListener('click', (e) => this.handleRegLocMap(e));
-    document.getElementById('btn-view-loc-map')?.addEventListener('click', (e) => this.handleViewLocMap(e));
-  }
-
   protected initChildLogic(onSave: () => void, closeModals: () => void): void {
     const saveBtn = document.getElementById('btn-save-hw-asset')!;
-    const revertBtn = document.getElementById('btn-revert-hw-edit')!;
     const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
     const categorySelect = document.getElementById('hw-category') as HTMLSelectElement;
     const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
+    const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
+    const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
+
+    this.fetchMapConfig();
+    this.fetchMasterComponents().then(() => {
+        this.bindAutocomplete('hw-cpu', 'hw-cpu-list', 'CPU');
+        this.bindAutocomplete('hw-ram', 'hw-ram-list', 'RAM');
+        this.bindAutocomplete('hw-gpu', 'hw-gpu-list', 'GPU');
+    });
 
     categorySelect.addEventListener('change', () => {
       const cat = categorySelect.value;
       const types = CATEGORY_TYPE_MAP[cat] || [];
       typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, '', true) : '<option value="">구분을 먼저 선택하세요</option>';
-      this.renderDynamicForm(cat);
-      if (this.currentAsset) {
-        // 새로 생성된 폼에 기존 데이터 다시 채우기
-        this.fillFormData(this.currentAsset);
+      this.applyRoleVisibility();
+      
+      const badgeContainer = document.getElementById('hw-category-badge-container');
+      if (badgeContainer) {
+          badgeContainer.innerHTML = cat ? `<span class="badge badge-primary">${cat}</span>` : '';
       }
     });
 
+    typeSelect.addEventListener('change', () => this.applyRoleVisibility());
+
+    bindLocationEvents('hw-bldg-select', 'hw-location_detail', '', '');
+    bldgSelect.addEventListener('change', () => setTimeout(() => this.updateMapButtonVisibility(), 100));
+    detailSelect.addEventListener('change', () => this.updateMapButtonVisibility());
+
+    applyDateMask(document.getElementById('hw-purchase_date') as HTMLInputElement);
+
+    document.getElementById('btn-gen-hw-code')?.addEventListener('click', async () => {
+      const cat = categorySelect.value;
+      if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
+      const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
+      const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
+      try {
+        const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
+        const data = await res.json();
+        if (data.nextCode) setFieldValue('hw-asset_code', data.nextCode);
+      } catch (err) { console.error('코드 생성 실패:', err); }
+    });
+
+    const fileSelectBtn = document.getElementById('btn-file-select');
+    const fileInput = document.getElementById('hw-approval_document_file') as HTMLInputElement;
+    fileSelectBtn?.addEventListener('click', () => fileInput.click());
+    fileInput?.addEventListener('change', async (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (!file) return;
+      const fileNameDisplay = document.getElementById('hw-file-name-display');
+      const fileLinkContainer = document.getElementById('hw-file-link-container');
+      if (fileNameDisplay) fileNameDisplay.textContent = file.name;
+      const reader = new FileReader();
+      reader.onload = async () => {
+        try {
+          const res = await fetch(`http://${location.hostname}:3000/api/upload`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ fileName: file.name, fileData: reader.result })
+          });
+          const data = await res.json();
+          if (data.success) {
+            setFieldValue('hw-approval_document', data.filePath);
+            if (fileLinkContainer) {
+              fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${data.filePath}" target="_blank" class="btn btn-outline btn-sm">[파일 보기]</a>`;
+            }
+          }
+        } catch (err) { console.error('파일 업로드 실패:', err); alert('파일 업로드 중 오류가 발생했습니다.'); }
+      };
+      reader.readAsDataURL(file);
+    });
+
+    document.getElementById('btn-reg-loc-map')?.addEventListener('click', async (e) => {
+      e.preventDefault(); e.stopPropagation();
+      const bldg = bldgSelect.value;
+      const detail = detailSelect.value;
+      await this.fetchMapConfig();
+      const images = this.getImagesForLocation(bldg, detail);
+      if (images) this.openImagePicker(images, `${detail} 위치 등록`);
+    });
+
+    document.getElementById('btn-view-loc-map')?.addEventListener('click', async (e) => {
+      e.preventDefault(); e.stopPropagation();
+      await this.fetchMapConfig();
+      const x = getFieldValue('hw-loc_x');
+      const y = getFieldValue('hw-loc_y');
+      const savedImg = getFieldValue('hw-location_photo');
+      const bldg = bldgSelect.value;
+      const detail = detailSelect.value;
+      const images = this.getImagesForLocation(bldg, detail);
+      if (images) {
+        const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
+        this.openImagePreview(imgPath, `${detail} 위치 확인`, x, y);
+      }
+    });
+
+    document.getElementById('btn-add-volume')?.addEventListener('click', () => this.addVolumeRow());
+    document.getElementById('btn-add-remote-info')?.addEventListener('click', () => this.addRemoteInfoRow());
+
     deleteBtn.addEventListener('click', async () => {
       if (!this.currentAsset || !confirm(UI_TEXT.MESSAGES.CONFIRM_DELETE)) return;
       if (await deleteAsset(this.getCategoryKey(this.currentAsset), this.currentAsset.id)) {
@@ -171,26 +392,42 @@ class HwAssetModal extends BaseModal {
       }
     });
 
-    revertBtn.addEventListener('click', () => {
-      this.setEditLockMode('view');
-      if (this.currentAsset) this.fillFormData(this.currentAsset);
-    });
-
     saveBtn.addEventListener('click', async () => {
       if (!this.currentAsset) return;
-      if (!this.isEditMode) {
-        this.setEditLockMode('edit');
-        this.isEditMode = true;
-        this.updateMapButtonVisibility();
-        this.toggleFileUploadUI(true);
-        return;
-      }
+
+      // 동적 볼륨 데이터 수집
+      const vols: any[] = [];
+      document.querySelectorAll('#hw-volume-container .volume-row').forEach((row, idx) => {
+        const type = (row.querySelector('.vol-type') as HTMLSelectElement).value;
+        const cap = (row.querySelector('.vol-cap') as HTMLInputElement).value;
+        const unit = (row.querySelector('.vol-unit') as HTMLSelectElement).value;
+        if (cap) vols.push({ type, capacity: parseFloat(cap), unit, slot: idx + 1 });
+      });
+      setFieldValue('hw-volumes-data', JSON.stringify(vols));
+
+      // 동적 네트워크/원격 데이터 수집
+      const nets: any[] = [];
+      document.querySelectorAll('#hw-remote-info-container .remote-info-row').forEach(row => {
+        const type = (row.querySelector('.ri-type') as HTMLSelectElement).value;
+        const val1 = (row.querySelector('.ri-val1') as HTMLInputElement).value;
+
+        if (type === 'IP' && val1) {
+            const tool = (row.querySelector('.ri-tool') as HTMLSelectElement)?.value || '';
+            const id = (row.querySelector('.ri-id') as HTMLInputElement)?.value || '';
+            const pw = (row.querySelector('.ri-pw') as HTMLInputElement)?.value || '';
+            const val2Str = (id || pw) ? JSON.stringify({ id, pw }) : '';
+            nets.push({ type: 'IP', name: tool, val1: val1, val2: val2Str });
+        } else if (type === 'MAC' && val1) {
+            nets.push({ type: 'MAC', name: 'MAC 주소', val1: val1, val2: '' });
+        }
+      });
+      setFieldValue('hw-remotes-data', JSON.stringify(nets));
+
       const formData = new FormData(this.formEl!);
       const updated = { ...this.currentAsset };
       formData.forEach((value, key) => { if (key !== 'id') updated[key] = value; });
-      const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
-      if (bldgSelect) updated.location = bldgSelect.value;
-      
+      updated.location = bldgSelect.value;
+
       if (await saveAsset(this.getCategoryKey(updated), updated)) {
         alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
         onSave(); this.close(); closeModals();
@@ -198,109 +435,185 @@ class HwAssetModal extends BaseModal {
     });
   }
 
-  private async handleGenerateCode() {
-    const categorySelect = document.getElementById('hw-category') as HTMLSelectElement;
-    const cat = categorySelect.value;
-    if (!cat) { alert('구분을 먼저 선택해주세요.'); return; }
-    const prefix = TYPE_PREFIX_MAP[cat] || 'ETC';
-    const purchaseDate = (document.getElementById('hw-purchase_date') as HTMLInputElement)?.value || '';
-    try {
-      const res = await fetch(`http://${location.hostname}:3000/api/generate-asset-code?prefix=${prefix}&purchaseDate=${purchaseDate}`);
-      const data = await res.json();
-      if (data.nextCode) setFieldValue('hw-asset_code', data.nextCode);
-    } catch (err) { console.error('코드 생성 실패:', err); }
+  private addVolumeRow(vol: any = { type: 'SSD', capacity: '', unit: 'GB' }) {
+    const container = document.getElementById('hw-volume-container');
+    if (!container) return;
+    const row = document.createElement('div');
+    row.className = 'volume-row flex items-center gap-2';
+    const inputStyle = 'height: clamp(34px, 4.5vmin, 44px) !important; box-sizing: border-box !important; font-size: var(--fs-sm); margin: 0; padding: 0 8px;';
+    row.innerHTML = `
+      <select class="vol-type" style="${inputStyle} width: 80px;" ${!this.isEditMode ? 'disabled' : ''}>
+        <option value="SSD" ${vol.type === 'SSD' ? 'selected' : ''}>SSD</option>
+        <option value="HDD" ${vol.type === 'HDD' ? 'selected' : ''}>HDD</option>
+        <option value="NVMe" ${vol.type === 'NVMe' ? 'selected' : ''}>NVMe</option>
+      </select>
+      <input type="number" class="vol-cap" value="${vol.capacity || ''}" placeholder="용량" style="${inputStyle} flex: 1;" ${!this.isEditMode ? 'readonly' : ''} />
+      <select class="vol-unit" style="${inputStyle} width: 70px;" ${!this.isEditMode ? 'disabled' : ''}>
+        <option value="GB" ${vol.unit === 'GB' ? 'selected' : ''}>GB</option>
+        <option value="TB" ${vol.unit === 'TB' ? 'selected' : ''}>TB</option>
+      </select>
+      <button type="button" class="btn btn-outline btn-remove-row edit-only-btn" style="height: clamp(34px, 4.5vmin, 44px) !important; padding: 0 12px; color: var(--danger); border-color: var(--danger); display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+    `;
+    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
+    container.appendChild(row);
   }
 
-  private async handleFileUpload(e: Event) {
-    const file = (e.target as HTMLInputElement).files?.[0];
-    if (!file) return;
-    const fileNameDisplay = document.getElementById('hw-file-name-display');
-    const fileLinkContainer = document.getElementById('hw-file-link-container');
-    if (fileNameDisplay) fileNameDisplay.textContent = file.name;
-    const reader = new FileReader();
-    reader.onload = async () => {
-      try {
-        const res = await fetch(`http://${location.hostname}:3000/api/upload`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ fileName: file.name, fileData: reader.result })
-        });
-        const data = await res.json();
-        if (data.success) {
-          setFieldValue('hw-approval_document', data.filePath);
-          if (fileLinkContainer) {
-            fileLinkContainer.innerHTML = `<a href="http://${location.hostname}:3000${data.filePath}" target="_blank" class="btn btn-outline btn-sm">[업로드 완료: 파일 보기]</a>`;
-          }
+  private addRemoteInfoRow(info: any = { type: 'IP', name: '원격접속', val1: '', val2: '' }) {
+    const container = document.getElementById('hw-remote-info-container');
+    if (!container) return;
+
+    let parsedId = '';
+    let parsedPw = '';
+    if (info.type === 'IP' && info.val2) {
+        try {
+            const parsed = typeof info.val2 === 'string' ? JSON.parse(info.val2) : info.val2;
+            parsedId = parsed.id || '';
+            parsedPw = parsed.pw || '';
+        } catch (e) {
+            parsedId = info.val2;
         }
-      } catch (err) { console.error('파일 업로드 실패:', err); alert('파일 업로드 중 오류가 발생했습니다.'); }
-    };
-    reader.readAsDataURL(file);
-  }
-
-  private async handleRegLocMap(e: MouseEvent) {
-    e.preventDefault(); e.stopPropagation();
-    const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
-    const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
-    await this.fetchMapConfig();
-    const images = this.getImagesForLocation(bldgSelect.value, detailSelect.value);
-    if (images) this.openImagePicker(images, `${detailSelect.value} 위치 등록`);
-  }
-
-  private async handleViewLocMap(e: MouseEvent) {
-    e.preventDefault(); e.stopPropagation();
-    await this.fetchMapConfig();
-    const x = getFieldValue('hw-loc_x');
-    const y = getFieldValue('hw-loc_y');
-    const savedImg = getFieldValue('hw-location_photo');
-    const bldg = getFieldValue('hw-bldg-select');
-    const detail = getFieldValue('hw-location_detail');
-    const images = this.getImagesForLocation(bldg, detail);
-    if (images) {
-      const imgPath = savedImg && images.includes(savedImg) ? savedImg : images[0];
-      this.openImagePreview(imgPath, `${detail} 위치 확인`, x, y);
     }
+
+    const row = document.createElement('div');
+    row.className = 'remote-info-row flex-col gap-1 w-full';
+    const baseStyle = 'height: clamp(34px, 4.5vmin, 44px) !important; box-sizing: border-box !important; margin: 0;';
+    const compactStyle = `${baseStyle} font-size: var(--fs-xs); padding: 0 6px;`;
+
+    const line1 = document.createElement('div');
+    line1.className = 'ri-line flex items-center gap-1.5';
+    line1.innerHTML = `
+      <select class="ri-type" ${!this.isEditMode ? 'disabled' : ''} style="${compactStyle} width: 75px; flex-shrink: 0;">
+        <option value="IP" ${info.type === 'IP' ? 'selected' : ''}>IP 주소</option>
+        <option value="MAC" ${info.type === 'MAC' ? 'selected' : ''}>MAC 주소</option>
+      </select>
+      <input type="text" class="ri-val1" value="${info.val1 || ''}" placeholder="주소 입력" ${!this.isEditMode ? 'readonly' : ''} style="${compactStyle} flex: 1; min-width: 0;" />
+      <button type="button" class="btn-outline btn-remove-row ri-remove-btn edit-only-btn" style="height: clamp(34px, 4.5vmin, 44px) !important; padding: 0 10px; color: var(--danger); border-color: var(--danger); flex-shrink: 0; display: ${this.isEditMode ? 'inline-flex' : 'none'};">&times;</button>
+    `;
+
+    const line2 = document.createElement('div');
+    line2.className = 'ri-line ri-cred-line flex items-center gap-1.5';
+    if (info.type !== 'IP') line2.classList.add('hidden');
+    
+    line2.innerHTML = `
+      <div class="ri-connector" style="width: 16px; border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); height: 16px; margin-left: 10px; margin-top: -12px; flex-shrink: 0;"></div>
+      <select class="ri-tool" ${!this.isEditMode ? 'disabled' : ''} style="${compactStyle} width: 85px; flex-shrink: 0;">
+        <option value="원격접속" ${info.name === '원격접속' ? 'selected' : ''}>원격접속</option>
+        <option value="리눅스" ${info.name === '리눅스' ? 'selected' : ''}>리눅스</option>
+        <option value="기타" ${info.name === '기타' ? 'selected' : ''}>기타</option>
+      </select>
+      <input type="text" class="ri-id" value="${parsedId}" placeholder="원격 ID" ${!this.isEditMode ? 'readonly' : ''} style="${compactStyle} flex: 1; min-width: 0;" />
+      <input type="text" class="ri-pw" value="${parsedPw}" placeholder="원격 PW" ${!this.isEditMode ? 'readonly' : ''} style="${compactStyle} flex: 1; min-width: 0;" />
+    `;
+
+    row.appendChild(line1);
+    row.appendChild(line2);
+
+    const typeSelect = row.querySelector('.ri-type') as HTMLSelectElement;
+    typeSelect.addEventListener('change', (e) => {
+        const isIP = (e.target as HTMLSelectElement).value === 'IP';
+        line2.classList.toggle('hidden', !isIP);
+        if (!isIP) {
+            (row.querySelector('.ri-id') as HTMLInputElement).value = '';
+            (row.querySelector('.ri-pw') as HTMLInputElement).value = '';
+        }
+    });
+
+    row.querySelector('.btn-remove-row')?.addEventListener('click', () => row.remove());
+    container.appendChild(row);
+  }
+
+  private toggleEditOnlyBtns(isEdit: boolean) {
+    ['btn-add-volume', 'btn-add-remote-info'].forEach(id => {
+        const btn = document.getElementById(id);
+        if (btn) btn.classList.toggle('hidden', !isEdit);
+    });
+    document.querySelectorAll('.edit-only-btn').forEach(btn => {
+        (btn as HTMLElement).style.display = isEdit ? 'inline-flex' : 'none';
+    });
+
+    const containers = ['#hw-volume-container', '#hw-remote-info-container'];
+    containers.forEach(selector => {
+      document.querySelectorAll(`${selector} input`).forEach(input => {
+          if (isEdit) input.removeAttribute('readonly');
+          else input.setAttribute('readonly', 'true');
+      });
+      document.querySelectorAll(`${selector} select`).forEach(select => {
+          if (isEdit) select.removeAttribute('disabled');
+          else select.setAttribute('disabled', 'true');
+      });
+    });
   }
 
   protected fillFormData(asset: any): void {
-    // 1. 분류 먼저 설정 및 동적 폼 렌더링
+    setFieldValue('hw-id', asset.id);
+    setFieldValue('hw-asset_code', asset.asset_code || '');
+    setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
     setFieldValue('hw-category', asset.category || '');
-    this.renderDynamicForm(asset.category || '');
-
-    // 2. 타입 설정
     const types = CATEGORY_TYPE_MAP[asset.category] || [];
     const typeSelect = document.getElementById('hw-asset_type') as HTMLSelectElement;
     if (typeSelect) typeSelect.innerHTML = types.length > 0 ? generateOptionsHTML(types, asset.asset_type, true) : '<option value="">구분을 먼저 선택하세요</option>';
     setFieldValue('hw-asset_type', asset.asset_type || '');
-
-    // 3. 나머지 데이터 채우기 (공통 및 동적 필드)
-    setFieldValue('hw-id', asset.id);
-    setFieldValue('hw-asset_code', asset.asset_code || '');
-    setFieldValue('hw-purchase_corp', asset.purchase_corp || '');
     setFieldValue('hw-hw_status', asset.hw_status || '운영');
+    setFieldValue('hw-service_type', asset.service_type || '외부');
+    setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
     setFieldValue('hw-current_dept', asset.current_dept || '');
     setFieldValue('hw-manager_primary', asset.manager_primary || '');
     setFieldValue('hw-manager_secondary', asset.manager_secondary || '');
     setFieldValue('hw-user_current', asset.user_current || '');
     setFieldValue('hw-user_position', asset.user_position || '');
-    setFieldValue('hw-emp_no', asset.emp_no || '');
+    setFieldValue('hw-previous_user', asset.previous_user || '');
     setFieldValue('hw-model_name', asset.model_name || '');
+    setFieldValue('hw-asset_mfr', asset.asset_mfr || '');
+    setFieldValue('hw-os', asset.os || '');
     setFieldValue('hw-cpu', asset.cpu || '');
     setFieldValue('hw-ram', asset.ram || '');
-    setFieldValue('hw-os', asset.os || '');
     setFieldValue('hw-gpu', asset.gpu || '');
-    setFieldValue('hw-mac_address', asset.mac_address || '');
-    setFieldValue('hw-ip_address', asset.ip_address || '');
-    setFieldValue('hw-ip_address_2', asset.ip_address_2 || '');
-    setFieldValue('hw-remote_tool', asset.remote_tool || '');
-    setFieldValue('hw-remote_id', asset.remote_id || '');
-    setFieldValue('hw-remote_pw', asset.remote_pw || '');
+    setFieldValue('hw-mainboard', asset.mainboard || '');
+
+    // 동적 볼륨 렌더링
+    const volumeContainer = document.getElementById('hw-volume-container');
+    if (volumeContainer) volumeContainer.innerHTML = '';
+    let vols = [];
+    try { vols = asset.volumes ? (typeof asset.volumes === 'string' ? JSON.parse(asset.volumes) : asset.volumes) : []; } catch(e) {}
+    vols.forEach((v: any) => this.addVolumeRow(v));
+
+    // 통합 원격 접속 정보 렌더링 초기화 및 생성
+    const remoteInfoContainer = document.getElementById('hw-remote-info-container');
+    if (remoteInfoContainer) {
+        remoteInfoContainer.innerHTML = '';
+        let nets = [];
+        try {
+            nets = asset.remotes ? (typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes) : [];
+        } catch(e) {}
+
+        // Fallback for legacy data
+        if (nets.length === 0 && (asset.ip_address || asset.mac_address || asset.remote_tool || asset.remote_id)) {
+            if (asset.ip_address) {
+                const tool = asset.remote_tool || '원격접속';
+                const creds = (asset.remote_id || asset.remote_pw) ? JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' }) : '';
+                nets.push({ type: 'IP', name: tool, val1: asset.ip_address, val2: creds });
+            }
+            if (asset.mac_address) {
+                nets.push({ type: 'MAC', name: 'MAC 주소', val1: asset.mac_address, val2: '' });
+            }
+            if (!asset.ip_address && (asset.remote_tool || asset.remote_id)) {
+                const creds = JSON.stringify({ id: asset.remote_id || '', pw: asset.remote_pw || '' });
+                nets.push({ type: 'IP', name: asset.remote_tool || '기타', val1: '', val2: creds });
+            }
+        }
+        nets.forEach((n: any) => this.addRemoteInfoRow(n));
+    }
+
     setFieldValue('hw-monitoring', asset.monitoring || '비대상');
+    setFieldValue('hw-serial_num', asset.serial_num || '');
+    setFieldValue('hw-monitor_inch', asset.monitor_inch || '');
+    setFieldValue('hw-volume', asset.volume || '');
+    setFieldValue('hw-asset_count', asset.asset_count || '');
     setFieldValue('hw-purchase_date', asset.purchase_date || '');
     setFieldValue('hw-purchase_vendor', asset.purchase_vendor || '');
     setFieldValue('hw-purchase_amount', asset.purchase_amount || '');
     setFieldValue('hw-approval_document', asset.approval_document || '');
-    setFieldValue('hw-asset_purpose', asset.asset_purpose || '');
-    
+
     const docName = document.getElementById('hw-file-name-display');
     if (docName) docName.textContent = asset.approval_document ? asset.approval_document.split('/').pop() : '파일 선택...';
     const fileLinkContainer = document.getElementById('hw-file-link-container');
@@ -309,25 +622,31 @@ class HwAssetModal extends BaseModal {
     } else if (fileLinkContainer) {
       fileLinkContainer.innerHTML = '';
     }
+
     setFieldValue('hw-memo', asset.memo || '');
     setFieldValue('hw-location_detail', asset.location_detail || '');
     setFieldValue('hw-loc_x', asset.loc_x || '');
     setFieldValue('hw-loc_y', asset.loc_y || '');
     setFieldValue('hw-location_photo', asset.location_photo || asset.loc_img || '');
-    
-    const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
-    if (bldgSelect) {
-      parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
-    }
+    parseAndSetLocation(asset.location || '', asset.location_detail || '', 'hw-bldg-select', 'hw-location_detail');
     
     this.renderHistory(asset.id);
+    this.applyRoleVisibility();
+    this.updatePcGradeBadge();
+    
+    const badgeContainer = document.getElementById('hw-category-badge-container');
+    if (badgeContainer) {
+        badgeContainer.innerHTML = asset.category ? `<span class="badge badge-primary">${asset.category}</span>` : '';
+    }
   }
 
   protected onAfterOpen(asset: any, mode: string): void {
     const genBtn = document.getElementById('btn-gen-hw-code');
     if (genBtn) genBtn.style.display = (mode === 'add') ? 'inline-flex' : 'none';
     this.toggleFileUploadUI(mode !== 'view');
+    this.toggleEditOnlyBtns(mode !== 'view');
     this.updateMapButtonVisibility();
+    this.applyRoleVisibility();
   }
 
   private toggleFileUploadUI(showUpload: boolean) {
@@ -335,13 +654,37 @@ class HwAssetModal extends BaseModal {
     if (fileBtn) fileBtn.style.display = showUpload ? 'inline-flex' : 'none';
   }
 
-  private updateMapButtonVisibility() {
-    const bldgSelect = document.getElementById('hw-bldg-select') as HTMLSelectElement;
-    const detailSelect = document.getElementById('hw-location_detail') as HTMLSelectElement;
-    if (!bldgSelect || !detailSelect) return;
+  private applyRoleVisibility(): void {
+    const category = (document.getElementById('hw-category') as HTMLSelectElement)?.value || '';
+    const type = (document.getElementById('hw-asset_type') as HTMLSelectElement)?.value || '';
 
-    const bldg = bldgSelect.value;
-    const detail = detailSelect.value;
+    const infraCategories = ['서버', '저장매체', '네트워크', '보안장비', '공간정보장비'];
+    const isInfra = infraCategories.includes(category) || type.includes('서버') || type.includes('저장시스템');
+    const personalCategories = ['PC', '노트북', '모바일', '태블릿'];
+    const isPersonal = (personalCategories.includes(category) || type.includes('개인PC') || type.includes('노트북')) && !type.includes('서버PC');
+    const specCategories = ['PC', '서버', '노트북', '스토리지', '워크스테이션'];
+    const hasSpec = specCategories.includes(category) || type.includes('서버PC');
+    const noNetCategories = ['저장매체', '네트워크', '공간정보장비', 'PC부품', '사무가구'];
+    const showNet = (isInfra || isPersonal) && !noNetCategories.includes(category);
+    const hasSN = !['사무가구', 'PC부품'].includes(category);
+    const isParts = ['PC부품', '사무가구'].includes(category);
+    const showRemote = category === '서버' || type.includes('서버');
+
+    document.querySelectorAll('.remote-section, .remote-field, .monitoring-field').forEach(el => (el as HTMLElement).style.display = showRemote ? '' : 'none');
+    document.querySelectorAll('.net-only').forEach(el => (el as HTMLElement).style.display = showNet ? '' : 'none');
+    document.querySelectorAll('.spec-only').forEach(el => (el as HTMLElement).style.display = hasSpec ? '' : 'none');
+    document.querySelectorAll('.location-section, .location-field').forEach(el => (el as HTMLElement).style.display = (isInfra || category === '공간정보장비') ? '' : 'none');
+    document.querySelectorAll('.org-user-section, .org-user-field').forEach(el => (el as HTMLElement).style.display = (isPersonal || isParts || category === '업무지원장비') ? '' : 'none');
+    document.querySelectorAll('.personal-only').forEach(el => (el as HTMLElement).style.display = isPersonal ? '' : 'none');
+    document.querySelectorAll('.sn-only').forEach(el => (el as HTMLElement).style.display = hasSN ? '' : 'none');
+    document.querySelectorAll('.monitor-only').forEach(el => (el as HTMLElement).style.display = type.includes('모니터') ? '' : 'none');
+    document.querySelectorAll('.parts-only').forEach(el => (el as HTMLElement).style.display = isParts ? '' : 'none');
+    document.querySelectorAll('.hardware-section').forEach(el => (el as HTMLElement).style.display = (hasSpec || isParts) ? '' : 'none');
+  }
+
+  private updateMapButtonVisibility() {
+    const bldg = getFieldValue('hw-bldg-select');
+    const detail = getFieldValue('hw-location_detail');
     const x = getFieldValue('hw-loc_x');
     const y = getFieldValue('hw-loc_y');
     const hasCoords = (x !== '' && y !== '' && x !== 'null' && y !== 'null');
@@ -349,17 +692,11 @@ class HwAssetModal extends BaseModal {
     const regLocBtn = document.getElementById('btn-reg-loc-map')!;
     const viewLocBtn = document.getElementById('btn-view-loc-map')!;
 
-    if (hasImage && this.isEditMode) {
-        regLocBtn.classList.remove('hidden');
-    } else {
-        regLocBtn.classList.add('hidden');
-    }
+    if (hasImage && this.isEditMode) regLocBtn.classList.remove('hidden');
+    else regLocBtn.classList.add('hidden');
 
-    if (hasImage && hasCoords) {
-        viewLocBtn.classList.remove('hidden');
-    } else {
-        viewLocBtn.classList.add('hidden');
-    }
+    if (hasImage && hasCoords) viewLocBtn.classList.remove('hidden');
+    else viewLocBtn.classList.add('hidden');
   }
 
   private getImagesForLocation(bldg: string, detail: string): string[] | null {
@@ -399,7 +736,7 @@ class HwAssetModal extends BaseModal {
                 </div>
             </div>
           </div>
-          <div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline" style="color:var(--mute); border-color:var(--hairline);">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>
+          <div class="image-picker-footer"><button id="btn-picker-cancel" class="btn btn-outline">취소</button><button id="btn-picker-save" class="btn btn-primary">위치 확정</button></div>
         </div>`;
       let selectedX = ''; let selectedY = '';
       const container = overlay.querySelector('#picker-container') as HTMLElement;
@@ -415,7 +752,7 @@ class HwAssetModal extends BaseModal {
       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; } 
+        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();
@@ -444,7 +781,6 @@ class HwAssetModal extends BaseModal {
         </div>
         <div class="image-picker-footer"><button id="btn-preview-close" class="btn btn-primary">확인</button></div>
       </div>`;
-    
     document.body.appendChild(overlay);
     if (!isHtmlMap && digitalMap) {
       const curX = parseFloat(x || '0'); const curY = parseFloat(y || '0');
@@ -452,9 +788,8 @@ class HwAssetModal extends BaseModal {
         const sx = parseFloat(rect.getAttribute('x') || '0');
         const sy = parseFloat(rect.getAttribute('y') || '0');
         if (Math.abs(sx - curX) < 0.1 && Math.abs(sy - curY) < 0.1) {
-          rect.style.fill = 'rgba(255, 61, 0, 0.5)'; // 주황색 강조
-          rect.style.stroke = '#FF3D00'; 
-          rect.style.strokeWidth = '1.2';
+          rect.style.fill = 'rgba(255, 61, 0, 0.5)';
+          rect.style.stroke = '#FF3D00'; rect.style.strokeWidth = '1.2';
           rect.style.filter = 'drop-shadow(0 0 6px rgba(255, 61, 0, 0.8))';
         }
       });
@@ -466,8 +801,8 @@ class HwAssetModal extends BaseModal {
   private renderHistory(assetId: string) {
     const container = document.getElementById('hw-history-list');
     if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId || l.asset_id === assetId);
-    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
+    const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId || l.assetId === assetId);
+    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">기록된 변동 이력이 없습니다.</div>'; return; }
     container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || l.date || ''}</div><div class="history-user">${l.log_user || l.user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
   }
 
@@ -483,6 +818,64 @@ 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();
diff --git a/src/components/Modal/ModalUtils.ts b/src/components/Modal/ModalUtils.ts
index 266149e..fe2f984 100644
--- a/src/components/Modal/ModalUtils.ts
+++ b/src/components/Modal/ModalUtils.ts
@@ -117,13 +117,22 @@ export function setEditLock(
     form.classList.remove('is-view-mode');
     form.classList.add('is-edit-mode');
     saveBtn.textContent = '저장';
-    revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
+    revertBtn.classList.toggle('hidden', mode === 'add'); 
     
+    // 모든 필드 활성화
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      if (el.name !== 'asset_code' && !el.id.includes('asset-id')) { // 자산번호 등 일부는 편집 모드에서도 잠금 유지
+        el.disabled = false;
+        if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
+      }
+    });
+
     // 번호 생성 버튼은 '추가(add)' 시에만 노출
     if (generateBtn) {
       generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
     }
-    // 내역 추가 버튼 노출
     if (addLogBtn) addLogBtn.style.display = 'flex';
   } else {
     // 조회 모드 (잠금)
@@ -132,7 +141,13 @@ export function setEditLock(
     saveBtn.textContent = '수정';
     revertBtn.classList.add('hidden');
     
-    // 조회 모드에서는 버튼들 숨김
+    // 모든 필드 잠금
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      el.disabled = true; // select의 경우 disabled 필요
+    });
+
     if (generateBtn) generateBtn.style.display = 'none';
     if (addLogBtn) addLogBtn.style.display = 'none';
   }
diff --git a/src/components/Modal/PCFlowModal.ts b/src/components/Modal/PCFlowModal.ts
index 74f0419..1cf6384 100644
--- a/src/components/Modal/PCFlowModal.ts
+++ b/src/components/Modal/PCFlowModal.ts
@@ -4,10 +4,10 @@ import { API_BASE_URL } from '../../core/utils';
 
 export class PCFlowModal {
   private static instance: PCFlowModal | null = null;
-  
+
   private modalEl: HTMLElement | null = null;
   private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
-  
+
   // Selected state
   private selectedUser: any = null;
   private selectedTargetUser: any = null;
@@ -30,7 +30,7 @@ export class PCFlowModal {
 
     this.modalEl = document.getElementById('pc-flow-modal');
     this.setupEventListeners(onSave);
-    
+
     // Set default date to today
     const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
     if (dateInput) {
@@ -59,14 +59,19 @@ export class PCFlowModal {
     this.selectedTargetUser = null;
     this.selectedPC = null;
     this.currentFlowType = 'checkout';
-    
+
     const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
-    if (radioCheckout) radioCheckout.checked = true;
+    if (radioCheckout) {
+        radioCheckout.checked = true;
+        document.querySelectorAll('.flow-type-label').forEach(l => {
+            l.classList.toggle('active', l.contains(radioCheckout));
+        });
+    }
 
     // Reset text fields
     const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
     if (userSearch) userSearch.value = '';
-    
+
     const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
     if (targetUserSearch) targetUserSearch.value = '';
 
@@ -94,7 +99,7 @@ export class PCFlowModal {
         label.classList.add('active');
         radio.checked = true;
         this.currentFlowType = radio.value as any;
-        
+
         // Reset selected PC when switching flow types
         this.selectedPC = null;
         this.updateUI();
@@ -104,16 +109,16 @@ export class PCFlowModal {
     // 1. Source User Autocomplete Search
     const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
     const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
-    
+
     userSearch?.addEventListener('input', () => {
       const query = userSearch.value.trim().toLowerCase();
       if (!query) {
         userSuggestions.classList.add('hidden');
         return;
       }
-      
+
       const users = state.masterData.users || [];
-      const filtered = users.filter((u: any) => 
+      const filtered = users.filter((u: any) =>
         (u.user_name && u.user_name.toLowerCase().includes(query)) ||
         (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
         (u.emp_no && u.emp_no.toString().includes(query))
@@ -133,7 +138,7 @@ export class PCFlowModal {
         this.selectedUser = user;
         userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
         userSuggestions.classList.add('hidden');
-        
+
         // Automatically populate details if return or move
         if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
           this.selectedPC = null; // Reset selection
@@ -161,16 +166,16 @@ export class PCFlowModal {
     // 2. Target User Autocomplete Search (For Moves)
     const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
     const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
-    
+
     targetUserSearch?.addEventListener('input', () => {
       const query = targetUserSearch.value.trim().toLowerCase();
       if (!query) {
         targetSuggestions.classList.add('hidden');
         return;
       }
-      
+
       const users = state.masterData.users || [];
-      const filtered = users.filter((u: any) => 
+      const filtered = users.filter((u: any) =>
         (u.user_name && u.user_name.toLowerCase().includes(query)) ||
         (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
         (u.emp_no && u.emp_no.toString().includes(query))
@@ -197,7 +202,7 @@ export class PCFlowModal {
     // 3. Stock PC Autocomplete Search (For Checkout)
     const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
     const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
-    
+
     const showStockSuggestions = () => {
       const query = stockSearch.value.trim().toLowerCase();
 
@@ -205,11 +210,11 @@ export class PCFlowModal {
       const pcs = state.masterData.pc || [];
       const filtered = pcs.filter((p: any) => {
         const status = (p.hw_status || '').trim();
-        const matchesQuery = !query || 
+        const matchesQuery = !query ||
           (p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
           (p.model_name && p.model_name.toLowerCase().includes(query)) ||
           (p.cpu && p.cpu.toLowerCase().includes(query));
-        
+
         return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
       });
 
@@ -419,7 +424,7 @@ export class PCFlowModal {
     const userPcsList = document.getElementById('user-pcs-list')!;
     if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
       const allPcs = state.masterData.pc || [];
-      const userPcs = allPcs.filter((p: any) => 
+      const userPcs = allPcs.filter((p: any) =>
         (p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
         (p.user_current && p.user_current === this.selectedUser.user_name)
       );
@@ -460,7 +465,6 @@ export class PCFlowModal {
     return `
       <div id="pc-flow-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
-          
           <div class="modal-header">
             <h2 class="modal-title">
               <i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
@@ -473,7 +477,7 @@ export class PCFlowModal {
               <!-- 왼쪽 영역: 입력 폼 -->
               <div class="modal-form-area">
                 <div class="grid-form flex-col">
-                  
+
                   <!-- 1. 처리 유형 -->
                   <div class="form-group">
                     <label>1. 처리 유형 선택</label>
@@ -542,7 +546,7 @@ export class PCFlowModal {
                 <div class="history-header">
                   <h3>선택 내역 요약</h3>
                 </div>
-                
+
                 <div style="display: flex; flex-direction: column; gap: 1rem;">
                   <!-- 사원 요약 카드 -->
                   <div id="summary-user-card" class="summary-info-card">
@@ -582,7 +586,6 @@ export class PCFlowModal {
               <button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
             </div>
           </div>
-
         </div>
       </div>
     `;
diff --git a/src/components/Modal/PartsMasterModal.ts b/src/components/Modal/PartsMasterModal.ts
index 210935d..10495e0 100644
--- a/src/components/Modal/PartsMasterModal.ts
+++ b/src/components/Modal/PartsMasterModal.ts
@@ -1,7 +1,7 @@
 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 { createIcons, X, Save, Plus } from 'lucide';
 import { UI_TEXT } from '../../core/schema';
 
 class PartsMasterModal extends BaseModal {
@@ -10,52 +10,48 @@ class PartsMasterModal extends BaseModal {
   }
 
   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-content" style="max-width: 500px;">
           <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>
+            <h2 id="parts-master-modal-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">&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;">
+          <div class="modal-body">
+            <form id="parts-master-asset-form" class="grid-form" style="grid-template-columns: 1fr;">
               <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}">
+
+              <div class="form-group">
+                <label>부품 분류</label>
+                <select id="parts-master-category" name="category">
                   <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 class="form-group">
+                <label>부품 표준 명칭</label>
+                <input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required />
               </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 class="form-group">
+                <label>성능 등급</label>
+                <input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
               </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 class="form-group">
+                <label>감점 점수 (양수로 입력)</label>
+                <input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
               </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 class="modal-footer">
+            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-parts-master-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-parts-master-asset" class="btn btn-primary">수정</button>
             </div>
           </div>
         </div>
@@ -109,11 +105,13 @@ class PartsMasterModal extends BaseModal {
       if (!this.currentAsset || !this.currentAsset.id) return;
       if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
 
-      if (await deletePartsMaster(this.currentAsset.id)) {
+      if (await deletePartsMaster(Number(this.currentAsset.id))) {
         alert('성공적으로 삭제되었습니다.');
         onSave(); this.close(); closeModals();
       }
     });
+    
+    createIcons({ icons: { Plus, X, Save } });
   }
 
   protected fillFormData(asset: any): void {
@@ -126,19 +124,13 @@ class PartsMasterModal extends BaseModal {
 
   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 = '부품 마스터 상세 편집';
-      }
+      titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
     }
 
     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') {
@@ -156,11 +148,5 @@ class PartsMasterModal extends BaseModal {
 }
 
 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);
-}
+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); }
diff --git a/src/components/Modal/SWModal.ts b/src/components/Modal/SWModal.ts
index f700112..5571aae 100644
--- a/src/components/Modal/SWModal.ts
+++ b/src/components/Modal/SWModal.ts
@@ -1,14 +1,14 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { openSwUserModal } from './SWUserModal';
-import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
+import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
 import { CORP_LIST } from './SharedData';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
 import { API_BASE_URL } from '../../core/utils';
-import { 
-  generateOptionsHTML, 
-  setFieldValue, 
-  getFieldValue, 
+import {
+  generateOptionsHTML,
+  setFieldValue,
+  getFieldValue,
   applyDateMask
 } from './ModalUtils';
 
@@ -22,15 +22,15 @@ class SwAssetModal extends BaseModal {
       <div id="sw-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <h2 id="sw-modal-title">${this.title}</h2>
-            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+            <h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
           <div class="modal-body">
             <div class="modal-body-split">
               <div class="modal-form-area">
                 <form id="sw-asset-form" class="grid-form">
                   <input type="hidden" id="sw-asset-id" name="id" />
-                  
+
                   <div class="form-section-title">기본 정보 (Identity)</div>
                   <div class="form-group">
                     <label>자산 유형</label>
@@ -81,7 +81,7 @@ class SwAssetModal extends BaseModal {
                   </div>
                   <div class="form-group sw-standard-field">
                     <label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
-                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
+                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
                   </div>
 
                   <div class="form-group cloud-only">
@@ -151,7 +151,7 @@ class SwAssetModal extends BaseModal {
                 <div class="history-header">
                   <h3><i data-lucide="history"></i> 업데이트 내역</h3>
                   <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
-                    계약 업데이트 <i data-lucide="refresh-ccw"></i>
+                    계약 업데이트 <i data-lucide="rotate-ccw"></i>
                   </button>
                 </div>
                 <div id="sw-history-list" class="history-timeline"></div>
@@ -174,7 +174,7 @@ class SwAssetModal extends BaseModal {
         <div class="modal-content" style="max-width: 500px;">
           <div class="modal-header">
             <h2 class="modal-title">계약 업데이트 반영</h2>
-            <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
+            <button id="btn-close-sw-update" class="btn-icon">&times;</button>
           </div>
           <div class="modal-body">
             <div class="grid-form" style="grid-template-columns: 1fr;">
@@ -209,6 +209,15 @@ class SwAssetModal extends BaseModal {
           </div>
         </div>
       </div>
+      <style>
+        .hidden-picker {
+          position: absolute;
+          width: 0;
+          height: 0;
+          opacity: 0;
+          pointer-events: none;
+        }
+      </style>
     `;
   }
 
@@ -231,7 +240,6 @@ class SwAssetModal extends BaseModal {
       if (this.currentAsset) openSwUserModal(this.currentAsset);
     });
 
-    // 업데이트 모달 로직
     const subModal = document.getElementById('sw-update-modal')!;
     const closeUpdate = () => subModal.classList.add('hidden');
     document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
@@ -278,7 +286,7 @@ class SwAssetModal extends BaseModal {
       const formData = new FormData(this.formEl!);
       const updated = { ...this.currentAsset };
       formData.forEach((value, key) => { updated[key] = value; });
-      
+
       let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
       if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
     });
@@ -356,16 +364,10 @@ class SwAssetModal extends BaseModal {
     if (!container) return;
     const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
     if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
+    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.date}</div><div class="history-user">${l.user}</div><div class="history-details">${l.details}</div></div>`).join('');
   }
 }
 
 export const swModal = new SwAssetModal();
-
-export function initSwModal(onSave: () => void, closeModals: () => void) {
-  swModal.init(onSave, closeModals);
-}
-
-export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
-  swModal.open(asset, mode);
-}
+export function initSwModal(onSave: () => void, closeModals: () => void) { swModal.init(onSave, closeModals); }
+export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') { swModal.open(asset, mode); }
diff --git a/src/components/Modal/SWUserModal.ts b/src/components/Modal/SWUserModal.ts
index ac16f9a..414c670 100644
--- a/src/components/Modal/SWUserModal.ts
+++ b/src/components/Modal/SWUserModal.ts
@@ -16,14 +16,14 @@ class SwUserModal extends BaseModal {
       <div id="sw-user-asset-modal" class="modal-overlay hidden">
         <div class="modal-content wide">
           <div class="modal-header">
-            <h2 id="sw-user-title">${this.title}</h2>
-            <button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
+            <h2 id="sw-user-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
           <div class="modal-body">
             <div class="sw-info-summary" id="sw-user-sw-info"></div>
-            
+
             <div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
-              <h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
+              <h3 class="detail-section-title">할당된 사용자 목록</h3>
               <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
             </div>
 
@@ -55,10 +55,10 @@ class SwUserModal extends BaseModal {
 
       <!-- 사용자 추가/수정 서브 모달 -->
       <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
-        <div class="modal-content" style="width: 400px;">
+        <div class="modal-content" style="max-width: 400px;">
           <div class="modal-header">
-            <h3 id="sw-user-edit-title">사용자 정보</h3>
-            <button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
+            <h3 id="sw-user-edit-title" class="modal-title">사용자 정보</h3>
+            <button id="btn-close-user-edit" class="btn-icon">&times;</button>
           </div>
           <div class="modal-body">
             <form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
@@ -81,22 +81,22 @@ class SwUserModal extends BaseModal {
               </div>
               <div class="form-group">
                 <label>사용 시작일</label>
-                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="new-user-시작일" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                <div class="input-with-btn">
+                  <input type="text" id="new-user-시작일" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();">
+                    <i data-lucide="calendar"></i>
                   </button>
-                  <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
+                  <input type="date" id="new-user-시작일-picker" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
                 </div>
               </div>
               <div class="form-group">
                 <label>사용 종료일</label>
-                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="new-user-종료일" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                <div class="input-with-btn">
+                  <input type="text" id="new-user-종료일" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();">
+                    <i data-lucide="calendar"></i>
                   </button>
-                  <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
+                  <input type="date" id="new-user-종료일-picker" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
                 </div>
               </div>
               <div class="form-group">
@@ -111,6 +111,15 @@ class SwUserModal extends BaseModal {
           </div>
         </div>
       </div>
+      <style>
+        .hidden-picker {
+          position: absolute;
+          width: 0;
+          height: 0;
+          opacity: 0;
+          pointer-events: none;
+        }
+      </style>
     `;
   }
 
@@ -140,10 +149,9 @@ class SwUserModal extends BaseModal {
       onSave(); this.close(); closeModals();
     });
 
-    // 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
     document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
     document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
-    
+
     const subModal = document.getElementById('sw-user-edit-modal')!;
     const closeSub = () => subModal.classList.add('hidden');
     document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
@@ -155,9 +163,9 @@ class SwUserModal extends BaseModal {
   protected fillFormData(asset: any): void {
     const swInfo = document.getElementById('sw-user-sw-info')!;
     swInfo.innerHTML = `
-      <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-        <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.purchase_corp || asset.법인 || ''}</div>
-        <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
+      <div class="sw-info-header" style="margin-bottom: 1.5rem; border-bottom: 1px solid var(--hairline); padding-bottom: 1rem;">
+        <div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
+        <div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
       </div>
     `;
 
@@ -165,7 +173,7 @@ class SwUserModal extends BaseModal {
     this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
       조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
     })) : [];
-    
+
     this.renderUserList();
   }
 
@@ -173,9 +181,10 @@ class SwUserModal extends BaseModal {
 
   private renderUserList() {
     const tbody = document.getElementById('sw-user-table-body')!;
+    if (!tbody) return;
     tbody.innerHTML = '';
     if (this.tempSwUsers.length === 0) {
-      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
+      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--mute);">할당된 사용자가 없습니다.</td></tr>';
       return;
     }
 
@@ -257,11 +266,5 @@ class SwUserModal extends BaseModal {
 }
 
 export const swUserModal = new SwUserModal();
-
-export function initSwUserModal(onSave: () => void, closeModals: () => void) {
-  swUserModal.init(onSave, closeModals);
-}
-
-export function openSwUserModal(asset: any) {
-  swUserModal.open(asset);
-}
+export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
+export function openSwUserModal(asset: any) { swUserModal.open(asset); }
diff --git a/src/components/Modal/UserModal.ts b/src/components/Modal/UserModal.ts
index e2ec645..d1422d9 100644
--- a/src/components/Modal/UserModal.ts
+++ b/src/components/Modal/UserModal.ts
@@ -10,55 +10,52 @@ class UserModal extends BaseModal {
   }
 
   protected renderFrameHTML(): string {
-    const sharedStyle = 'height: 38px !important; box-sizing: border-box !important; font-size: 13px; margin: 0;';
-    const inputStyle = sharedStyle;
-
     return `
       <div id="user-asset-modal" class="modal-overlay hidden">
-        <div class="modal-content" style="max-width: 500px; width: 100%;">
+        <div class="modal-content" style="max-width: 500px;">
           <div class="modal-header">
-            <h2 id="user-modal-title" style="margin: 0; font-size: 18px; font-weight: 800; color: white;">\${this.title}</h2>
-            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+            <h2 id="user-modal-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
-          <div class="modal-body" style="padding: 24px; overflow-y: auto;">
-            <form id="user-asset-form" class="grid-form" style="display: flex; flex-direction: column; gap: 16px;">
+          <div class="modal-body">
+            <form id="user-asset-form" class="grid-form" style="grid-template-columns: 1fr;">
               <input type="hidden" id="user-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>
-                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required style="\${inputStyle} width: 100%;" />
+
+              <div class="form-group">
+                <label>사번</label>
+                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용자명</label>
-                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required style="\${inputStyle} width: 100%;" />
+              <div class="form-group">
+                <label>사용자명</label>
+                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
               </div>
 
-              <div class="form-group" style="display: flex; flex-direction: column; gap: 6px;">
-                <label style="font-size: 11px; font-weight: 700; color: var(--text-muted);">사용조직 (부서)</label>
-                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required style="\${inputStyle} width: 100%;" />
+              <div class="form-group">
+                <label>사용조직 (부서)</label>
+                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
               </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="user-position-input" name="position" placeholder="예: BIM모델러" required style="\${inputStyle} width: 100%;" />
+              <div class="form-group">
+                <label>직무 (직급)</label>
+                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
               </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>
-                <select id="user-status" name="status" style="\${sharedStyle}">
+              <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" 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-user-asset" class="btn btn-outline btn-danger" style="height: 42px;">삭제</button>
-            <div class="footer-actions" style="display: flex; gap: 8px;">
-              <button id="btn-revert-user-edit" class="btn btn-outline hidden" style="height: 42px;">수정 취소</button>
-              <button id="btn-cancel-user-modal" class="btn btn-outline" style="height: 42px;">닫기</button>
-              <button id="btn-save-user-asset" class="btn btn-primary" style="height: 42px;">수정</button>
+          <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>
@@ -119,6 +116,8 @@ class UserModal extends BaseModal {
         onSave(); this.close(); closeModals();
       }
     });
+    
+    createIcons({ icons: { Save, X } });
   }
 
   protected fillFormData(asset: any): void {
@@ -132,18 +131,13 @@ class UserModal extends BaseModal {
 
   protected onAfterOpen(asset: any, mode: string): void {
     const titleEl = document.getElementById('user-modal-title');
-
     if (titleEl) {
-      if (mode === 'add') {
-        titleEl.textContent = '신규 임직원 등록';
-      } else {
-        titleEl.textContent = '임직원 정보 수정';
-      }
+      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') {
@@ -161,11 +155,5 @@ class UserModal extends BaseModal {
 }
 
 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);
-}
+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); }
diff --git a/src/views/Dashboard/SwDashboard.ts b/src/views/Dashboard/SwDashboard.ts
index 3bb5ea5..2af98db 100644
--- a/src/views/Dashboard/SwDashboard.ts
+++ b/src/views/Dashboard/SwDashboard.ts
@@ -1,16 +1,15 @@
 import { state } from '../../core/state';
-import { openSwDashboardDetail, openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
+import { openSwUsageDetail } from '../../components/Modal/DashboardDetailModal';
 import { normalizeDate } from '../../core/utils';
 import { ASSET_SCHEMA } from '../../core/schema';
 
 export function renderSwDashboard(container: HTMLElement) {
-  let extQty = 0, extUsed = 0, extExp = 0, extTotal = 0;
-  let intQty = 0, intUsed = 0, intExp = 0, intTotal = 0;
-  
+  let extQty = 0, extUsed = 0, extTotal = 0;
+  let intQty = 0, intUsed = 0, intTotal = 0;
+
   let extCost2026 = 0;
   let intCost2026 = 0;
-  
-  // 통합 SW 데이터
+
   const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];
 
   allSw.forEach(sw => {
@@ -21,7 +20,6 @@ export function renderSwDashboard(container: HTMLElement) {
 
      if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
        extQty += qty; extUsed += assigned; extTotal++;
-       if (isSWExpiring(sw)) extExp++;
        if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
      } else {
        intQty += qty; intUsed += assigned; intTotal++;
@@ -35,36 +33,36 @@ export function renderSwDashboard(container: HTMLElement) {
   container.innerHTML = `
     <div class="view-container">
       <h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
-      
-      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
-        <div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
-          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
-          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
-          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
-            <div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
+
+      <div class="dashboard-layout-2col">
+        <div class="dashboard-card clickable" data-action="ext-usage">
+          <div class="stat-label">외부 소프트웨어 사용율</div>
+          <div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
+          <div class="stat-value"><span>${extPer}</span><span>%</span></div>
+          <div class="stat-progress-bar">
+            <div class="progress-fill" style="width: ${extPer}%;"></div>
           </div>
         </div>
-        <div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
-          <div style="font-size: 1.02rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
-          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
-           <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
-            <div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
+        <div class="dashboard-card clickable" data-action="int-usage">
+          <div class="stat-label">내부 소프트웨어 현황</div>
+          <div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
+          <div class="stat-value"><span>${intPer}</span><span>%</span></div>
+          <div class="stat-progress-bar">
+            <div class="progress-fill" style="width: ${intPer}%;"></div>
           </div>
         </div>
       </div>
 
       <h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
-      
-      <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
-        <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2.21rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
+
+      <div class="dashboard-layout-2col">
+        <div class="dashboard-card">
+          <div class="stat-label">외부 SW 누적 비용 (2026)</div>
+          <div class="stat-value"><span>₩ ${extCost2026.toLocaleString()}</span></div>
         </div>
-        <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1.21rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2.21rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
+        <div class="dashboard-card">
+          <div class="stat-label">내부 SW 누적 비용 (2026)</div>
+          <div class="stat-value" style="color: var(--color-blue);"><span>₩ ${intCost2026.toLocaleString()}</span></div>
         </div>
       </div>
     </div>
@@ -73,11 +71,3 @@ export function renderSwDashboard(container: HTMLElement) {
   container.querySelector('[data-action="ext-usage"]')?.addEventListener('click', () => openSwUsageDetail('외부 소프트웨어 사용 목록', state.masterData.swExternal));
   container.querySelector('[data-action="int-usage"]')?.addEventListener('click', () => openSwUsageDetail('내부 소프트웨어 사용 목록', state.masterData.swInternal));
 }
-
-function isSWExpiring(sw: any) {
-  const expiry = sw[ASSET_SCHEMA.EXPIRED_DATE.key];
-  if (!expiry) return false;
-  const endMs = new Date(normalizeDate(expiry)).getTime();
-  const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
-  return diffDays >= 0 && diffDays <= 30;
-}
diff --git a/src/views/List/PartsMasterListView.ts b/src/views/List/PartsMasterListView.ts
index 6608e9f..87df486 100644
--- a/src/views/List/PartsMasterListView.ts
+++ b/src/views/List/PartsMasterListView.ts
@@ -58,7 +58,7 @@ export function renderPartsMasterList(container: HTMLElement) {
           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>`;
+          return `<strong style="color: ${color};">-${score}점</strong>`;
         }
       }
     ]