style: apply Vercel-inspired responsive UI & fluid scaling

design_rule.md

@@ -5,36 +5,43 @@
 ---
 
 ### 1. 디자인 철학 (Design Philosophy)
-*   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
+*   **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
-*   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
+*   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
-*   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
+*   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
 
-### 2. 타이포그래피 (Typography)
+### 2. 반응형 스케일링 (Fluid Scaling System)
-*   **Font Family**: `Pretendard Variable`, `Pretendard` (전역 적용)
+*   **Core Principle**: 모든 UI 요소는 `vmin`과 `vw` 단위를 조합한 `clamp()` 함수를 통해 화면 크기에 맞춰 동적으로 변화합니다.
-*   **Base Font Size**: 기본 텍스트 크기는 **16px**로 설정합니다.
+*   **Typography Scale**:
-*   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
+    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
-*   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold), 800(ExtraBold), 900(Black).
+    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨
-*   **Standard Scale**:
+    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
-    *   **XS (12px)**: 보조 텍스트, 작은 라벨
+    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
-    *   **SM (14px)**: 일반 항목 라벨, 필터 텍스트
+    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
-    *   **Base (16px)**: 메인 데이터 내용, 테이블 셀, 상세 정보 값
+    *   **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
-    *   **MD (19px)**: 섹션 제목, 강조 문구
+*   **Layout Units**:
-    *   **LG (23px)**: 주요 페이지 타이틀
+    *   **Header Height**: `clamp(50px, 8vmin, 90px)`
-    *   **XL (29px)**: 핵심 통계 수치 (KPI)
+    *   **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
+    *   **Radius**: `clamp(6px, 1.5vmin, 16px)`
 
-### 3. 컬러 팔레트 (Color Palette)
+### 3. 컬러 팔레트 (Vercel Stark Palette)
-*   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
+*   **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
-*   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
+*   **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
-*   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
+*   **Border**: `#ebebeb` (Hairline) - 정보 구분선.
-*   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
+*   **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
+*   **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
 
-### 4. 레이아웃 및 컴포넌트 규칙 (Layout Rules)
+### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
-*   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
+*   **Header & Navigation**:
-*   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
+    *   상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
-*   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
+*   **Unified Filter Bar**:
-*   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
+    *   검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
-    *   **Standard Height**: 입력창 및 선택창은 전역 표준인 `38px`를 유지합니다.
+    *   **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
-*   **Modal (모달 공통 규칙)**:
+*   **Dashboard**:
-    *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
+    *   **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
-    *   **Interaction**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
+    *   **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
-    *   **Layout**: 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
+*   **Footer**:
+    *   화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
+    *   상단에 1px 헤어라인 구분선을 가집니다.
+*   **Security & UX**:
+    *   **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
+    *   **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ITAM 자산관리 ERP</title>
+  <title>한맥가족 자산관리시스템</title>
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
   <link rel="stylesheet" href="/src/styles/common.css" />
@@ -25,7 +25,7 @@
       <div class="header-container" id="nav-container">
         <div class="brand">
           <img src="/image 92.png" alt="Logo" class="main-logo" />
-          <h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
+          <h1>한맥자산관리시스템</h1>
         </div>
 
         <!-- Navigation (GNB + LNB in same row) -->
@@ -57,8 +57,7 @@
 
     <!-- Footer -->
     <footer class="main-footer">
-      <div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
+      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
-      <p>Powered by BARON Consultant Co,Ltd</p>
     </footer>
   </div>
 

src/components/Modal/Forms/CommonHwFields.ts

@@ -0,0 +1,38 @@
+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>
+  `;
+}

src/components/Modal/Forms/PcForm.ts

@@ -0,0 +1,72 @@
+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>
+  `;
+}

src/components/Modal/Forms/ServerForm.ts

@@ -0,0 +1,90 @@
+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>
+  `;
+}

src/components/Modal/PCFlowModal.ts

@@ -309,21 +309,17 @@ export class PCFlowModal {
   private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
     container.innerHTML = '';
     if (users.length === 0) {
-      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
+      container.innerHTML = '<div class="autocomplete-item-empty">일치하는 사원이 없습니다.</div>';
       container.classList.remove('hidden');
       return;
     }
 
     users.forEach(u => {
       const item = document.createElement('div');
-      item.style.padding = '8px 12px';
+      item.className = 'autocomplete-item';
-      item.style.cursor = 'pointer';
-      item.style.fontSize = '13px';
-      item.style.borderBottom = '1px solid #F3F4F6';
-      item.className = 'suggestion-item';
       item.innerHTML = `
-        <div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
+        <div class="suggestion-name">${u.user_name}</div>
-        <div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
+        <div class="suggestion-meta">
           <span>부서: ${u.dept_name}</span>
           <span>|</span>
           <span>사번: ${u.emp_no || '-'}</span>
@@ -338,21 +334,17 @@ export class PCFlowModal {
   private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
     container.innerHTML = '';
     if (pcs.length === 0) {
-      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
+      container.innerHTML = '<div class="autocomplete-item-empty">불출 가능한 대기 PC 재고가 없습니다.</div>';
       container.classList.remove('hidden');
       return;
     }
 
     pcs.forEach(p => {
       const item = document.createElement('div');
-      item.style.padding = '8px 12px';
+      item.className = 'autocomplete-item';
-      item.style.cursor = 'pointer';
-      item.style.fontSize = '13px';
-      item.style.borderBottom = '1px solid #F3F4F6';
-      item.className = 'suggestion-item';
       item.innerHTML = `
-        <div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
+        <div class="suggestion-name">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
-        <div style="font-size: 11px; color: var(--text-muted);">
+        <div class="suggestion-meta">
           사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
         </div>
       `;
@@ -433,14 +425,14 @@ export class PCFlowModal {
       );
 
       if (userPcs.length === 0) {
-        userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 PC 자산이 없습니다.</div>';
+        userPcsList.innerHTML = '<div class="empty-list-message">이 사용자가 소유한 PC 자산이 없습니다.</div>';
       } else {
         userPcsList.innerHTML = userPcs.map(p => {
           const isSelected = this.selectedPC && this.selectedPC.id === p.id;
           return `
-            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
+            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}">
-              <div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
+              <div class="pc-item-code">${p.asset_code}</div>
-              <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+              <div class="pc-item-meta">
                 ${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
               </div>
             </div>
@@ -465,159 +457,134 @@ export class PCFlowModal {
   }
 
   private renderHTML(): string {
-    const overlayStyle = `
-      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
-      z-index: 1000; transition: opacity 0.3s;
-    `;
-    const contentStyle = `
-      background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-      overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
-    `;
-    const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
-    const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
-    const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
-
     return `
-      <div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
+      <div id="pc-flow-modal" class="modal-overlay hidden">
-        <div class="modal-content" style="${contentStyle}">
+        <div class="modal-content wide">
           
-          <div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
+          <div class="modal-header">
-            <h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
+            <h2 class="modal-title">
               <i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
             </h2>
-            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기">&times;</button>
           </div>
 
-          <div class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
+          <div class="modal-body">
-            <!-- 왼쪽 영역: 입력 폼 -->
+            <div class="modal-body-split">
-            <div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
+              <!-- 왼쪽 영역: 입력 폼 -->
-              
+              <div class="modal-form-area">
-              <!-- 1. 처리 유형 -->
+                <div class="grid-form flex-col">
-              <div>
+                  
-                <label style="${labelStyle}">1. 처리 유형 선택</label>
+                  <!-- 1. 처리 유형 -->
-                <div style="display: flex; gap: 12px;">
+                  <div class="form-group">
-                  <label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                    <label>1. 처리 유형 선택</label>
-                    <input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
+                    <div class="view-toggle w-full flex-row">
-                    불출 (지급)
+                      <label class="flow-type-label toggle-btn active flex-1 text-center">
-                  </label>
+                        <input type="radio" name="flow-type" value="checkout" checked class="hidden" />
-                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                        불출 (지급)
-                    <input type="radio" name="flow-type" value="return" style="display:none;" />
+                      </label>
-                    입고 (반납)
+                      <label class="flow-type-label toggle-btn flex-1 text-center">
-                  </label>
+                        <input type="radio" name="flow-type" value="return" class="hidden" />
-                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
+                        입고 (반납)
-                    <input type="radio" name="flow-type" value="move" style="display:none;" />
+                      </label>
-                    이동 (이관)
+                      <label class="flow-type-label toggle-btn flex-1 text-center">
-                  </label>
+                        <input type="radio" name="flow-type" value="move" class="hidden" />
+                        이동 (이관)
+                      </label>
+                    </div>
+                  </div>
+
+                  <!-- 2. 대상 사용자 검색 -->
+                  <div class="form-group relative">
+                    <label id="user-search-label">2. 대상 사원 검색</label>
+                    <div class="input-with-icon">
+                      <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." />
+                      <i data-lucide="search" class="icon-sm"></i>
+                    </div>
+                    <div id="pc-flow-user-suggestions" class="autocomplete-list hidden"></div>
+                  </div>
+
+                  <!-- 3. 새 인수자 검색 (이동 시 노출) -->
+                  <div id="target-user-search-container" class="form-group hidden" style="position: relative;">
+                    <label>새 인수 사원 검색</label>
+                    <div class="input-with-icon">
+                      <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." />
+                      <i data-lucide="search" class="icon-sm"></i>
+                    </div>
+                    <div id="pc-flow-target-user-suggestions" class="autocomplete-list hidden"></div>
+                  </div>
+
+                  <!-- 4. 재고 PC 검색 (불출 시 노출) -->
+                  <div id="stock-pc-search-container" class="form-group" style="position: relative;">
+                    <label>3. 불출할 재고 PC 선택</label>
+                    <div class="input-with-icon">
+                      <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." />
+                      <i data-lucide="monitor" class="icon-sm"></i>
+                    </div>
+                    <div id="pc-flow-stock-suggestions" class="autocomplete-list hidden"></div>
+                  </div>
+
+                  <!-- 5. 상세 공통 입력 -->
+                  <div class="detail-grid-2col">
+                    <div class="form-group">
+                      <label>처리 일자</label>
+                      <input type="date" id="pc-flow-date" />
+                    </div>
+                    <div class="form-group">
+                      <label>상세 사유</label>
+                      <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다."></textarea>
+                    </div>
+                  </div>
                 </div>
               </div>
 
-              <!-- 2. 대상 사용자 검색 -->
+              <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
-              <div style="position: relative;">
+              <div class="modal-history-area">
-                <label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
+                <div class="history-header">
-                <div style="position: relative; display: flex; align-items: center;">
+                  <h3>선택 내역 요약</h3>
-                  <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
-                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
                 </div>
-                <div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
+                
-              </div>
+                <div style="display: flex; flex-direction: column; gap: 1rem;">
+                  <!-- 사원 요약 카드 -->
+                  <div id="summary-user-card" class="summary-info-card">
+                    <div class="detail-label-sm">대상 사원</div>
+                    <div id="summary-user-name" class="detail-value-lg">선택된 사원 없음</div>
+                    <div id="summary-user-dept" class="detail-label-sm">-</div>
+                  </div>
 
-              <!-- 3. 새 인수자 검색 (이동 시 노출) -->
+                  <!-- 인수 사원 요약 카드 (이동 전용) -->
-              <div id="target-user-search-container" class="hidden" style="position: relative;">
+                  <div id="summary-target-user-card" class="summary-info-card hidden" style="background: var(--primary-light);">
-                <label style="${labelStyle}">새 인수 사원 검색</label>
+                    <div class="detail-label-sm">새 인수 사원</div>
-                <div style="position: relative; display: flex; align-items: center;">
+                    <div id="summary-target-user-name" class="detail-value-lg">선택된 사원 없음</div>
-                  <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
+                    <div id="summary-target-user-dept" class="detail-label-sm">-</div>
-                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                  </div>
+
+                  <!-- 대상 PC 자산 요약 카드 -->
+                  <div id="summary-pc-card" class="summary-info-card">
+                    <div class="detail-label-sm">대상 PC 자산</div>
+                    <div id="summary-pc-code" class="detail-value-lg" style="color: var(--success);">선택된 PC 없음</div>
+                    <div id="summary-pc-model" class="detail-label-sm">-</div>
+                  </div>
+
+                  <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
+                  <div id="user-pcs-container" class="form-group hidden">
+                    <label>사원 보유 PC 선택 (클릭하여 매핑)</label>
+                    <div id="user-pcs-list" class="user-pc-selection-list"></div>
+                  </div>
                 </div>
-                <div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
-              </div>
-
-              <!-- 4. 재고 PC 검색 (불출 시 노출) -->
-              <div id="stock-pc-search-container" style="position: relative;">
-                <label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
-                <div style="position: relative; display: flex; align-items: center;">
-                  <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
-                  <i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
-                </div>
-                <div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
-              </div>
-
-              <!-- 5. 상세 공통 입력 -->
-              <div style="display: flex; gap: 16px;">
-                <div style="flex: 1;">
-                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
-                  <input type="date" id="pc-flow-date" style="${inputStyle}" />
-                </div>
-                <div style="flex: 2;">
-                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
-                  <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
-                </div>
-              </div>
-
-            </div>
-
-            <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
-            <div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
-              <h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
-              
-              <!-- 사원 요약 카드 -->
-              <div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
-                <div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
-                <div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
-              </div>
-
-              <!-- 인수 사원 요약 카드 (이동 전용) -->
-              <div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
-                <div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
-                <div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
-              </div>
-
-              <!-- 대상 PC 자산 요약 카드 -->
-              <div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
-                <div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
-                <div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
-              </div>
-
-              <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
-              <div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
-                <div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
-                <div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></div>
               </div>
             </div>
-
           </div>
 
-          <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
+          <div class="modal-footer">
-            <button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
+            <div></div>
-            <button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
+            <div class="footer-actions">
+              <button id="btn-cancel-pc-flow-modal" class="btn btn-outline">취소</button>
+              <button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
+            </div>
           </div>
 
         </div>
       </div>
-      
-      <style>
-        .flow-type-label {
-          transition: all 0.2s;
-          border-color: var(--border-color);
-          background: white;
-          color: var(--text-muted);
-        }
-        .flow-type-label:hover {
-          border-color: var(--primary-color);
-          color: var(--primary-color);
-        }
-        .flow-type-label.active {
-          border-color: var(--primary-color);
-          background: var(--primary-light);
-          color: var(--primary-color);
-        }
-        .suggestion-item:hover {
-          background-color: var(--primary-light) !important;
-        }
-      </style>
     `;
   }
 }

src/components/Navigation.ts

@@ -24,43 +24,39 @@ const MENU_CONFIG: any = {
 };
 
 export function renderNavigation(onTabChange: (tab: string) => void) {
+  const header = document.querySelector('.main-header') as HTMLElement;
   const headerContainer = document.querySelector('.header-container')!;
   if (!headerContainer) return;
 
   const render = () => {
-    // 1. 헤더 레이아웃 구조 생성
+    // 1. 헤더 구조 (Vercel Style: Clean Single Row)
     headerContainer.innerHTML = `
-      <!-- [TOP ROW] 로고 및 사용자 액션 -->
+      <div class="brand" id="btn-home-logo" style="cursor: pointer;">
-      <div class="header-top-row">
+        <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
-        <div class="brand" id="btn-home-logo" style="cursor: pointer;">
+        <h1>한맥자산관리시스템</h1>
-          <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
-          <h1>IT 자산 통합 관리 <span class="sub-title">ITAM</span></h1>
-        </div>
-        <div class="header-actions">
-          <div class="role-switcher">
-            <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
-            <label class="switch">
-              <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
-              <span class="slider"></span>
-            </label>
-            <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
-          </div>
-          <div class="notification-area">
-             <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
-          </div>
-        </div>
       </div>
+      
+      <nav class="integrated-nav" id="main-nav-list"></nav>
 
-      <!-- [BOTTOM ROW] 통합 내비게이션 (2단 메뉴) -->
+      <div class="header-actions">
-      <div class="header-bottom-row">
+        <div class="role-toggle-wrapper">
-        <nav class="integrated-nav" id="main-nav-list"></nav>
+          <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
+          <label class="role-toggle">
+            <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
+            <span class="role-slider"></span>
+          </label>
+          <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
+        </div>
+        <div class="notification-area">
+           <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
+        </div>
       </div>
     `;
 
     const navList = document.getElementById('main-nav-list')!;
     
-    // 2. 메뉴 그룹화 및 렌더링 (대분류 제목 제외, 간격으로 구분)
+    // 2. GNB 메뉴 렌더링 (Ghost Tab Style)
-    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
+    Object.keys(MENU_CONFIG).forEach(catKey => {
       const config = MENU_CONFIG[catKey];
       
       const visibleTabs = config.tabs.filter((tab: string) => {
@@ -70,46 +66,35 @@ export function renderNavigation(onTabChange: (tab: string) => void) {
 
       if (visibleTabs.length === 0) return;
 
-      const group = document.createElement('div');
-      group.className = 'nav-group';
-      
-      const itemsContainer = document.createElement('div');
-      itemsContainer.className = 'nav-group-items';
-
       visibleTabs.forEach((tab: string) => {
         if (tab === '부품 마스터') return;
         const item = document.createElement('div');
         const isActive = state.activeSubTab === tab;
         item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
         item.textContent = tab;
+        item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
         
         item.addEventListener('click', (e) => {
           e.stopPropagation();
           state.activeCategory = catKey as any;
           state.activeSubTab = tab;
-          render(); // 재렌더링하여 활성 상태 반영
+          render(); 
           onTabChange(tab);
         });
-        itemsContainer.appendChild(item);
+        navList.appendChild(item);
       });
-      
-      group.appendChild(itemsContainer);
-      navList.appendChild(group);
     });
 
-    // 3. 관리자 전용 '관리도구' (원래 '관리자' 메뉴)
+    // 3. 관리자 전용 '관리도구'
     if (state.currentUserRole === 'admin') {
-      const adminGroup = document.createElement('div');
-      adminGroup.className = 'nav-group';
       const adminTrigger = document.createElement('div');
       adminTrigger.className = 'gnb-trigger admin-trigger';
       adminTrigger.innerHTML = '관리도구';
       adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
-      adminGroup.appendChild(adminTrigger);
+      navList.appendChild(adminTrigger);
-      navList.appendChild(adminGroup);
     }
 
-    // 4. 이벤트 바인딩 (로고 클릭 및 역할 전환)
+    // 4. 이벤트 바인딩
     document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
     
     const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;

src/core/excelHandler.ts

@@ -1,63 +1,12 @@
 import * as XLSX from 'xlsx';
 import { ASSET_SCHEMA } from './schema';
+import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData } from './types';
 
 /**
  * ITAM 엑셀 핸들러 (Database Synchronized Edition)
  * 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
  */
 
-export interface HardwareAsset {
-  [key: string]: any;
-  id: string;
-}
-
-export interface SoftwareAsset {
-  [key: string]: any;
-  id: string;
-}
-
-export interface SWUser {
-  id: string;
-  sw_id: string;
-  user_name: string;
-  dept: string;
-  corp: string;
-  [key: string]: any;
-}
-
-export interface HardwareLog {
-  id: string;
-  assetId?: string;
-  asset_id?: string;
-  date?: string;
-  log_date?: string;
-  created_at?: string;
-  details: string;
-  user?: string;
-  log_user?: string;
-  event_type?: string;
-}
-
-export interface MasterAssetData {
-  pc: HardwareAsset[];
-  server: HardwareAsset[];
-  storage: HardwareAsset[];
-  network: HardwareAsset[];
-  equipment: HardwareAsset[];
-  survey: HardwareAsset[];
-  pcParts: HardwareAsset[];
-  swInternal: SoftwareAsset[];
-  swExternal: SoftwareAsset[];
-  cloud: SoftwareAsset[];
-  domain: any[];
-  vip: HardwareAsset[];
-  officeSupplies: HardwareAsset[];
-  cost: any[];
-  swUsers: SWUser[];
-  logs: HardwareLog[];
-  [key: string]: any;
-}
-
 /**
  * DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
  */

src/core/filterHandler.ts

@@ -1,5 +1,4 @@
 import { ASSET_SCHEMA, UI_TEXT } from './schema';
-import { getActionButtonsHTML } from './utils';
 import { generateOptionsHTML } from '../components/Modal/ModalUtils';
 import { CORP_LIST } from '../components/Modal/SharedData';
 
@@ -21,6 +20,13 @@ export interface FilterOptions {
   initialFilters?: any;
 }
 
+/**
+ * 전역 액션 버튼 그룹 생성 (자산 추가 등)
+ */
+export function getActionButtonsHTML(): string {
+  return `<div id="filter-bar-actions" class="header-action-group" style="display: flex; gap: 8px; margin-left: auto; align-self: flex-end;"></div>`;
+}
+
 export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
   const { 
     keywordLabel = '통합 검색', 

src/core/state.ts

@@ -1,40 +1,8 @@
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
+import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
 import { API_BASE_URL } from './utils';
 import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';
 
 // --- State Definitions ---
-export interface MasterAssetData {
-  users: any[];
-  pc: any[];
-  server: any[];
-  storage: any[];
-  network: any[];
-  survey: any[];
-  pcParts: any[];
-  partsMaster: any[];
-  equipment: any[];
-  officeSupplies: any[];
-  swInternal: any[];
-  swExternal: any[];
-  cloud: any[];
-  domain: any[];
-  cost: any[];
-  vip: any[];
-  mobile?: any[]; // Legacy mobile support
-  equip?: any[];  // Backward compat
-  
-  // Backward compatibility
-  subSw: any[];
-  permSw: any[];
-
-  swUsers: SWUser[];
-  logs: HardwareLog[];
-  
-  // 통합 배열
-  hw: any[];
-  sw: any[];
-}
-
 export interface AppState {
   activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
   activeSubTab: string;
@@ -59,7 +27,6 @@ export const state: AppState = {
     survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [],
     swInternal: [], swExternal: [], cloud: [], domain: [],
     cost: [], vip: [],
-    subSw: [], permSw: [],
     hw: [], sw: [],
     swUsers: [], logs: []
   }

src/core/types.ts

@@ -0,0 +1,153 @@
+/**
+ * ITAM Global Type Definitions
+ */
+
+export interface BaseAsset {
+  id: string;
+  asset_code?: string;
+  category?: string;
+  asset_type?: string;
+  purchase_corp?: string;
+  purchase_date?: string;
+  purchase_amount?: number | string;
+  purchase_vendor?: string;
+  approval_document?: string;
+  service_type?: string;
+  manager_primary?: string;
+  manager_secondary?: string;
+  location?: string;
+  location_detail?: string;
+  location_photo?: string;
+  loc_x?: number;
+  loc_y?: number;
+  memo?: string;
+  updated_at?: string;
+  created_at?: string;
+}
+
+export interface HardwareAsset extends BaseAsset {
+  hw_status?: string;
+  model_name?: string;
+  asset_name?: string;
+  asset_mfr?: string;
+  current_dept?: string;
+  previous_dept?: string;
+  user_current?: string;
+  emp_no?: string;
+  user_position?: string;
+  previous_user?: string;
+  cpu?: string;
+  ram?: string;
+  gpu?: string;
+  ssd_1?: string;
+  ssd_2?: string;
+  hdd_1?: string;
+  hdd_2?: string;
+  hdd_3?: string;
+  hdd_4?: string;
+  mainboard?: string;
+  os?: string;
+  ip_address?: string;
+  ip_address_2?: string;
+  mac_address?: string;
+  remote_tool?: string;
+  remote_id?: string;
+  remote_pw?: string;
+  monitoring?: string;
+  volume?: string;
+  monitor_inch?: string;
+  asset_count?: number | string;
+  serial_num?: string;
+  // Normalized V3 fields
+  volumes?: any[]; 
+  remotes?: any[];
+}
+
+export interface SoftwareAsset extends BaseAsset {
+  sw_status?: string;
+  sw_field?: string;
+  sw_type?: string;
+  dev_objective?: string;
+  dev_manager?: string;
+  planning_manager?: string;
+  sales_manager?: string;
+  product_name?: string;
+  domain_address?: string;
+  email_account?: string;
+  email_pw?: string;
+  sw_id?: string;
+  sw_pw?: string;
+  purchase_method?: string;
+  asset_purpose?: string;
+  asset_status?: string;
+  start_date?: string;
+  expired_date?: string;
+}
+
+export interface SWUser {
+  id: string;
+  sw_id: string;
+  user_name: string;
+  dept: string;
+  corp: string;
+  emp_no?: string;
+  created_at?: string;
+  [key: string]: any;
+}
+
+export interface HardwareLog {
+  id: string;
+  asset_id: string;
+  log_date: string;
+  log_user: string;
+  event_type: string;
+  details: string;
+  old_dept?: string;
+  new_dept?: string;
+  old_user?: string;
+  new_user?: string;
+  created_at?: string;
+}
+
+export interface SystemUser {
+  id: string;
+  emp_no: string;
+  user_name: string;
+  dept_name: string;
+  position: string;
+  status: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface PartsMaster {
+  id: number | string;
+  category: string;
+  component_name: string;
+  score_tier: string;
+  deduction: number;
+}
+
+export interface MasterAssetData {
+  users: SystemUser[];
+  pc: HardwareAsset[];
+  server: HardwareAsset[];
+  storage: HardwareAsset[];
+  network: HardwareAsset[];
+  survey: HardwareAsset[];
+  pcParts: HardwareAsset[];
+  partsMaster: PartsMaster[];
+  equipment: HardwareAsset[];
+  officeSupplies: HardwareAsset[];
+  swInternal: SoftwareAsset[];
+  swExternal: SoftwareAsset[];
+  cloud: SoftwareAsset[];
+  domain: SoftwareAsset[];
+  cost: any[];
+  vip: HardwareAsset[];
+  swUsers: SWUser[];
+  logs: HardwareLog[];
+  // Integrated arrays
+  hw: HardwareAsset[];
+  sw: SoftwareAsset[];
+}

src/styles/common.css

@@ -31,13 +31,18 @@
   --success: #0070f3;
   --header-height: 64px;
 
-  /* --- Global Typography Scale (Strict 16px Base) --- */
+  /* --- Global Typography Scale (Enhanced Fluid Base) --- */
-  --fs-xs: 12px;
+  --fs-xs: clamp(10px, 1.2vmin + 0.2vw, 15px);
-  --fs-sm: 14px;
+  --fs-sm: clamp(12px, 1.4vmin + 0.3vw, 18px);
-  --fs-base: 16px;
+  --fs-base: clamp(14px, 1.6vmin + 0.4vw, 22px);
-  --fs-md: 20px;
+  --fs-md: clamp(18px, 2.5vmin + 0.5vw, 30px);
-  --fs-lg: 32px;
+  --fs-lg: clamp(24px, 4vmin + 0.6vw, 48px);
-  --fs-xl: 48px;
+  --fs-xl: clamp(32px, 6vmin + 0.8vw, 72px);
+
+  /* --- Fluid Layout Units (Aggressive) --- */
+  --header-height: clamp(50px, 8vmin, 90px);
+  --spacing-base: clamp(0.75rem, 3vmin, 3rem);
+  --radius-base: clamp(6px, 1.5vmin, 16px);
 }
 
 * {
@@ -102,8 +107,8 @@ input, textarea {
 }
 
 .brand { display: flex; align-items: center; gap: 0.75rem; }
-.main-logo { height: 26px; width: auto; }
+.main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
-.brand h1 { font-size: 1.1rem; font-weight: 600; color: var(--text-main); }
+.brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }
 
 .integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
 .gnb-trigger { 
@@ -142,7 +147,7 @@ input, textarea {
   padding: 0.2rem;
   border: 1px solid var(--hairline);
   gap: 0.1rem;
-  border-radius: 8px;
+  border-radius: var(--radius-base);
 }
 
 .toggle-btn {
@@ -154,7 +159,7 @@ input, textarea {
   color: var(--text-muted);
   cursor: pointer;
   transition: all 0.1s;
-  border-radius: 6px;
+  border-radius: calc(var(--radius-base) - 2px);
 }
 
 .toggle-btn:hover { color: var(--text-main); }
@@ -245,7 +250,7 @@ input:checked + .role-slider:before {
   font-weight: 500; 
   border-radius: 9999px; 
   cursor: pointer; 
-  height: 36px; 
+  height: clamp(32px, 4.5vmin, 44px); 
   transition: all 0.2s;
   border: 1px solid transparent;
   white-space: nowrap;
@@ -257,12 +262,12 @@ input:checked + .role-slider:before {
 .btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
 .btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
 
-.btn-sm { height: 30px; padding: 0 1rem; font-size: var(--fs-xs); }
+.btn-sm { height: clamp(28px, 3.5vmin, 36px); padding: 0 1rem; font-size: var(--fs-xs); }
 .btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
 
 /* --- Form Elements --- */
 .form-select-sm {
-  height: 32px;
+  height: clamp(28px, 3.5vmin, 36px);
   padding: 0 0.5rem;
   border: 1px solid var(--hairline);
   border-radius: 6px;
@@ -419,3 +424,40 @@ input:checked + .role-slider:before {
 .clickable { cursor: pointer; transition: opacity 0.2s; }
 .clickable:hover { opacity: 0.8; }
 
+/* Flexbox & Grid Utilities */
+.flex { display: flex; }
+.flex-col { display: flex; flex-direction: column; }
+.flex-row { display: flex; flex-direction: row; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-4 { gap: 1rem; }
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+
+/* Text Utilities */
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.font-bold { font-weight: 700; }
+.font-semibold { font-weight: 600; }
+
+/* --- Footer --- */
+.main-footer {
+  border-top: 1px solid var(--border-color);
+  background-color: var(--canvas);
+  color: var(--mute);
+  padding: 1rem 2rem;
+  text-align: right;
+  font-size: var(--fs-xs);
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.main-footer p {
+  margin: 0;
+  letter-spacing: 0.02em;
+}
+

src/styles/dashboard.css

@@ -1,160 +1,88 @@
-/* --- Premium Executive Dashboard View Specific Styles --- */
+/* --- Vercel Inspired Premium Dashboard --- */
 .dashboard-section-title {
-  padding: 0 0 0 8px;
-  font-size: 2.06rem;
-  font-weight: 900;
-  color: var(--text-main);
-  letter-spacing: -0.02em;
-  border-left: 4px solid var(--primary-color);
-  margin-bottom: 1rem;
-  line-height: 1.2;
-}
-
-.dashboard-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 0;
-  border-top: 1px solid var(--border-color);
-}
-
-.dashboard-card, .stat-card {
-  background: #fff;
-  border: none;
-  border-right: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-  box-shadow: none;
-  border-radius: 0;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.dashboard-stats-grid {
-  display: grid; 
-  grid-template-columns: repeat(3, 1fr); 
-  gap: 0;
-  border-top: 1px solid var(--border-color);
-}
-
-.stat-value {
-  font-size: var(--fs-xl);
-  font-weight: 900;
-  color: var(--text-main);
-  margin-top: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.stat-label {
-  font-size: var(--fs-base);
-  color: var(--text-muted);
-  font-weight: 800;
-  text-transform: uppercase;
-}
-
-.table-premium {
-  background: white;
-  border: none;
-  box-shadow: none;
-  border-radius: 0;
-  border-bottom: 1px solid var(--border-color);
-  overflow: hidden;
-}
-
-.table-premium th {
-  background: #F8FAFC;
-  color: #475569;
-  font-weight: 800;
-  padding: 0.75rem 1rem;
-  font-size: var(--fs-sm);
-  border-bottom: 2px solid var(--border-color);
-}
-
-.table-premium td {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #E2E8F0;
-  color: #1E293B;
-  font-size: var(--fs-base);
-}
-
-/* --- System Dashboard Stats Row (ListFactory) --- */
-.dashboard-stats-row {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr 1.5fr;
-  gap: 0;
-  border-bottom: 1px solid var(--border-color);
   padding: 0;
-  margin-bottom: 1rem;
+  font-size: var(--fs-lg);
-  flex-shrink: 0;
+  font-weight: 600;
-  background: #fff;
+  color: var(--primary);
+  letter-spacing: -0.05em;
+  margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
+  line-height: 1;
+}
+
+/* Background Mesh Gradient for Stats Row */
+.dashboard-stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--hairline);
+  padding: 0;
+  margin-bottom: clamp(1rem, 2vmin, 2rem);
+  background: radial-gradient(at 0% 0%, rgba(80, 227, 194, 0.05) 0px, transparent 50%), 
+              radial-gradient(at 100% 0%, rgba(121, 40, 202, 0.05) 0px, transparent 50%);
 }
 
 .stat-group-item {
-  min-width: 0;
+  flex: 1;
+  min-width: 250px;
   display: flex;
   flex-direction: column;
-  padding: 1.5rem;
+  padding: var(--spacing-base);
+  justify-content: center;
 }
 
 .stat-group-item.bordered {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--hairline);
-  padding-left: 1.5rem;
 }
 
 .stat-group-item .stat-label {
-  font-size: var(--fs-sm);
+  font-size: var(--fs-xs);
-  font-weight: 600;
+  font-weight: 500;
-  color: var(--text-muted);
+  color: var(--mute);
-  margin-bottom: 0.25rem;
+  text-transform: uppercase;
-  letter-spacing: 0;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.5rem;
 }
 
 .stat-group-item .stat-value {
   font-size: var(--fs-xl);
-  font-weight: 900;
+  font-weight: 600;
-  color: var(--text-main);
+  color: var(--primary);
-  line-height: 1.1;
+  line-height: 1;
   display: flex;
   align-items: baseline;
 }
 
 .stat-group-item .stat-value span {
-  font-size: var(--fs-sm);
+  font-size: var(--fs-base);
-  font-weight: 700;
+  font-weight: 400;
-  margin-left: 4px;
+  margin-left: 6px;
-  color: var(--text-muted);
+  color: var(--mute);
 }
 
 .stat-group-item .stat-sub {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
-  font-size: var(--fs-base);
+  font-size: var(--fs-sm);
-  color: var(--text-muted);
+  color: var(--body);
-  margin-top: 0.5rem;
+  margin-top: 1rem;
-}
-
-.stat-group-item .stat-sub strong {
-  font-size: var(--fs-md);
-  font-weight: 800;
 }
 
+/* --- Technical Data Alignment --- */
 .text-primary {
-  color: var(--primary-color) !important;
+  color: var(--color-blue) !important;
 }
 
 .detail-stat-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.75rem;
   gap: 0.5rem;
 }
 
 .stat-title {
   font-size: var(--fs-base);
-  font-weight: 900;
+  font-weight: 600;
-  color: var(--text-main);
+  color: var(--primary);
   white-space: nowrap;
 }
 
@@ -172,13 +100,13 @@
 
 .loc-summary span {
   font-size: var(--fs-sm);
-  color: var(--text-muted);
+  color: var(--mute);
 }
 
 .loc-summary span strong {
-  color: var(--text-main);
+  color: var(--primary);
   font-size: var(--fs-base);
-  font-weight: 800;
+  font-weight: 600;
 }
 
 .type-summary {
@@ -186,35 +114,29 @@
   gap: 0.8rem;
   flex-wrap: wrap;
   opacity: 0.9;
-  border-top: 1px dashed var(--border-color);
+  border-top: 1px dashed var(--hairline);
-  padding-top: 6px;
+  padding-top: 8px;
   margin-top: 4px;
 }
 
 .type-summary span {
   cursor: help;
   font-size: var(--fs-xs);
-  color: var(--text-muted);
+  color: var(--mute);
 }
 
 .type-summary span strong {
-  color: var(--text-main);
+  color: var(--primary);
   font-size: var(--fs-sm);
-  font-weight: 800;
+  font-weight: 600;
 }
 
-.text-danger {
+/* --- Enhanced Location View Layout --- */
-  color: var(--danger) !important;
-  font-weight: 800;
-}
-
-/* --- Location View (Strict Zero-Scroll Layout) --- */
 .location-view-wrapper {
   display: flex;
   flex-direction: column;
-  height: 100%; /* 부모(view-container)의 100% 강제 */
+  height: 100%;
-  width: 100%;
+  background: var(--canvas);
-  background: var(--white);
   overflow: hidden;
 }
 
@@ -222,57 +144,71 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 1.5rem;
+  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--hairline);
-  background: var(--white);
+  background: var(--canvas);
   flex-shrink: 0;
 }
 
+.filter-actions-group {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.filter-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.filter-group label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.map-pagination-group {
+  margin-left: 0;
+  padding-left: 0.5rem;
+  border-left: 1px solid var(--hairline);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.page-info {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
+}
+
 .location-main-content {
   flex: 1;
   display: grid;
-  grid-template-columns: 2fr 1fr; /* Default: Very wide screens */
+  grid-template-columns: 2fr 1fr;
-  background: var(--white);
+  background: var(--canvas);
+  gap: 0;
+  padding: 0;
   overflow: hidden;
   align-items: stretch;
-  min-height: 0;
-}
-
-/* --- Responsive Layout for Location View --- */
-@media (max-width: 1600px) {
-  .location-main-content {
-    grid-template-columns: 1.5fr 1fr; /* Normal Desktops */
-  }
-}
-
-@media (max-width: 1200px) {
-  .location-main-content {
-    grid-template-columns: 1.2fr 1fr; /* Tablets / Small Laptops */
-  }
-}
-
-@media (max-width: 768px) {
-  .location-main-content {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto 1fr; /* Stacked on mobile */
-    overflow-y: auto;
-  }
-  
-  .map-container-section {
-    border-right: none;
-    border-bottom: 1px solid var(--border-color);
-    height: 350px;
-  }
 }
 
 .map-container-section {
   position: relative;
   overflow: hidden;
-  border-right: 1px solid var(--border-color);
   display: flex;
   align-items: center; 
   justify-content: center;
-  background: #f1f5f9;
+  background: var(--canvas);
   height: 100%;
 }
 
@@ -291,7 +227,7 @@
   max-height: 100%;
   width: auto;
   height: auto;
-  object-fit: contain; /* 공간에 맞춰 자동 축소, 절대 넘치지 않음 */
+  object-fit: contain;
   display: block;
 }
 
@@ -300,53 +236,118 @@
   pointer-events: none;
 }
 
+.no-map-message {
+  padding: 5rem;
+  text-align: center;
+  color: var(--mute);
+  font-size: var(--fs-base);
+}
+
+.location-box-point {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+/* --- Asset Detail Sidebar --- */
 .asset-list-section {
   display: flex;
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  background: var(--white);
+  background: var(--canvas);
 }
 
 .section-header {
-  padding: 1rem 1.25rem;
+  padding: 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--hairline);
-  background: #f8fafc;
+  background: var(--canvas);
   flex-shrink: 0;
 }
 
 .mini-table-wrapper {
   flex: 1;
   overflow-y: auto;
-  min-height: 0;
+  position: relative;
+}
+
+.sidebar-title {
+  margin: 0;
+  font-size: var(--fs-base);
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.detail-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 12px;
+}
+
+.header-identity {
+  display: flex;
+  align-items: center; /* Changed from baseline to center for perfect vertical alignment */
+  gap: 8px;
+  flex: 1;
+  flex-wrap: wrap; /* Allow wrapping on very small screens */
+}
+
+.asset-code-title {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.05em;
+  line-height: 1; /* Reset line-height to prevent baseline shifts */
+}
+
+.service-type-badge {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--on-primary);
+  background: var(--primary);
+  padding: 4px 8px; /* Adjusted padding for better vertical centering */
+  border-radius: 9999px;
+  text-transform: uppercase;
+  line-height: 1; /* Match line-height */
+}
+
+.asset-type-label {
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--mute);
+  line-height: 1; /* Match line-height */
 }
 
-/* --- Asset Details (Refined Typography) --- */
 .asset-detail-sidebar {
-  padding: 1rem 0;
+  padding: 1.5rem 0;
-  height: 100%;
+  display: flex;
-  overflow-y: auto;
+  flex-direction: column;
 }
 
 .detail-section {
-  margin-bottom: 24px;
+  margin-bottom: 2rem;
-  padding: 0 1.25rem;
+  padding: 0 1.5rem;
 }
 
 .detail-section-title {
   font-size: var(--fs-xs);
-  font-weight: 800;
+  font-weight: 600;
-  color: var(--primary-color);
+  color: var(--mute);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--hairline);
-  padding-bottom: 4px;
+  padding-bottom: 8px;
-  margin-bottom: 12px;
+  margin-bottom: 1rem;
   text-transform: uppercase;
+  letter-spacing: 0.1em;
 }
 
 .detail-grid-2col {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px 16px;
+  gap: 1rem 1.5rem;
 }
 
 .detail-item.full-width {
@@ -355,19 +356,39 @@
 
 .detail-label-sm {
   font-size: var(--fs-xs);
-  color: var(--text-muted);
+  color: var(--mute);
-  font-weight: 700;
+  font-weight: 500;
+  margin-bottom: 4px;
 }
 
 .detail-value-lg {
   font-size: var(--fs-base);
-  color: var(--text-main);
+  color: var(--primary);
-  font-weight: 600;
+  font-weight: 500;
-  line-height: 1.3;
+  line-height: 1.4;
 }
 
-.asset-code-title {
+.text-danger {
-  font-size: var(--fs-md);
+  color: var(--danger) !important;
-  font-weight: 900;
+  font-weight: 600;
-  color: var(--text-main);
+}
+
+/* Responsive Overrides */
+@media (max-width: 1440px) {
+  .location-main-content {
+    grid-template-columns: 1.5fr 1fr;
+  }
+}
+
+@media (max-width: 1024px) {
+  .location-main-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    overflow-y: auto;
+  }
+  .map-container-section {
+    height: 400px;
+    border-right: none;
+    border-bottom: 1px solid var(--hairline);
+  }
 }

src/styles/table.css

@@ -1,86 +1,76 @@
 /* --- Page Header for Description --- */
 .page-header {
-  padding: 1rem 0 0.2rem 0;
+  padding: 1.5rem 2rem 0.5rem; /* Padding added for better whitespace */
 }
 
 .page-title-group {
   display: flex;
   flex-direction: column;
-  gap: 0.3rem;
+  gap: 0.5rem;
 }
 
 .page-title {
-  font-size: 21px;
+  font-size: var(--fs-lg);
-  font-weight: 800;
+  font-weight: 600;
-  color: var(--primary-color);
+  color: var(--primary);
   display: flex;
   align-items: center;
   margin: 0;
-  border-left: 4px solid var(--primary-color);
+  line-height: 1.1;
-  padding-left: 8px;
+  letter-spacing: -0.05em;
-  line-height: 1.2;
 }
 
 .page-description {
-  font-size: 16px;
+  font-size: var(--fs-base);
-  color: var(--text-muted);
+  color: var(--mute);
   margin: 0;
-  line-height: 1.4;
+  line-height: 1.5;
-  opacity: 0.8;
 }
 
 /* --- Table View & Filter Styles --- */
-
 .search-bar {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem; /* 간격 축소 및 통일 */
+  gap: var(--spacing-base);
-  padding: 1.2rem 0;
+  padding: 1.25rem var(--spacing-base);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--hairline);
-  align-items: flex-end;
+  align-items: flex-end; /* This aligns inputs and buttons at the bottom */
-  margin-bottom: 0.5rem;
+  background: var(--canvas);
 }
 
 .search-item {
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
+  gap: 0.5rem;
+  justify-content: flex-end;
 }
 
 .search-item.flex-1 {
-  flex: 1; /* 검색창이 남은 공간을 채우도록 설정 */
+  flex: 1;
-  min-width: 250px;
+  min-width: 300px;
-}
-
-.search-actions {
-  display: flex;
-  gap: 0.5rem; /* 버튼들 간의 간격 */
-  align-items: center;
-}
-
-.search-actions .btn {
-  height: 38px;
-  padding: 0 1rem;
 }
 
 .search-item label {
-  font-size: 15px;
+  font-size: var(--fs-xs);
-  font-weight: 800;
+  font-weight: 600;
-  color: var(--text-muted);
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .search-item input, 
 .search-item select {
-  height: 38px;
+  height: clamp(34px, 4.5vmin, 44px);
-  padding: 0 1rem;
+  padding: 0 0.75rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--hairline);
-  border-radius: 4px;
+  border-radius: 6px;
-  font-size: 19px;
+  font-size: var(--fs-sm);
   outline: none;
-  background-color: var(--white);
+  background-color: var(--canvas);
+  color: var(--primary);
+  transition: border-color 0.2s;
 }
 
-/* 셀렉트 박스 화살표 여백 절대 고정 (수정 금지) */
 .search-item select {
   padding-right: 2.5rem !important;
   cursor: pointer;
@@ -88,40 +78,31 @@
 
 .search-item input:focus, 
 .search-item select:focus {
-  border-color: var(--primary-color);
+  border-color: var(--primary);
 }
 
-/* 필터 초기화 버튼 크기 조정 (입력창 높이 38px에 맞춤) */
 .btn-reset {
   height: 38px !important;
-  color: var(--text-muted) !important;
+  color: var(--mute) !important;
-  padding: 0 1.2rem !important;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 0; /* 불필요한 마진 제거 */
 }
 
 .table-container {
   flex: 1;
-  background-color: var(--white);
+  background-color: var(--canvas);
-  border-top: 1px solid var(--border-color);
   overflow: auto;
   position: relative;
-  -webkit-overflow-scrolling: touch;
 }
 
 table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
-  table-layout: auto;
 }
 
 th, td {
-  padding: 0.5rem 1rem;
+  padding: 0.8rem 1rem;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--hairline);
-  text-align: left; /* 기본은 좌측 정렬 */
+  text-align: left;
   white-space: nowrap;
 }
 
@@ -132,181 +113,89 @@ thead {
 }
 
 th {
-  background-color: var(--bg-light) !important;
+  background-color: var(--canvas-soft) !important;
-  font-size: 17px;
+  font-size: var(--fs-xs);
-  font-weight: 700;
+  font-weight: 600;
-  color: var(--text-muted);
+  color: var(--mute);
-  position: sticky;
+  text-transform: uppercase;
-  top: 0;
+  letter-spacing: 0.05em;
-  z-index: 50;
+  box-shadow: inset 0 -1px 0 var(--hairline);
-  box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color); /* 상하 테두리 보정 */
+  text-align: center; /* Set default header alignment to center */
-  text-transform: none;
 }
 
 td {
-  font-size: 17px;
+  font-size: var(--fs-base);
-  color: var(--text-main);
+  color: var(--primary);
-  font-weight: 500;
+  font-weight: 400;
+  text-align: left; /* Set default data alignment to left */
 }
 
 tbody tr:hover {
-  background-color: var(--bg-color);
+  background-color: var(--canvas-soft-2);
 }
 
-/* 정렬 클래스 강제 적용 */
+/* 정렬 클래스 */
 .text-center { text-align: center !important; }
 .text-right { text-align: right !important; }
 .text-left { text-align: left !important; }
 
-/* 메모 컬럼 전용: 가장 길게 표시되도록 너비 조정 및 줄바꿈 허용 */
+/* 메모 컬럼 전용 */
 .col-memo {
-  width: 20%;
+  width: 25%;
-  min-width: 250px;
+  min-width: 300px;
   white-space: normal !important;
   word-break: break-all;
-  line-height: 1.4;
+  line-height: 1.5;
-  text-align: left !important;
-}
-
-.btn-icon {
-  padding: 0.25rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--text-muted);
-  transition: color 0.2s;
-}
-
-.btn-icon:hover {
-  color: var(--primary-color);
-}
-
-.btn-icon svg {
-  width: 16px;
-  height: 16px;
 }
 
 /* --- Table Sorting --- */
 th.sortable {
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.2s;
   position: relative;
-  padding-right: 1.8rem !important; /* 아이콘 공간 확보 */
+  padding-right: 1.8rem !important;
 }
 
 th.sortable:hover {
-  background-color: #F3F4F6;
+  background-color: var(--canvas-soft-2) !important;
-  color: var(--primary-color);
+  color: var(--primary);
 }
 
 th.sortable::after {
   content: '↕';
   position: absolute;
-  right: 0.6rem;
+  right: 0.75rem;
   top: 50%;
   transform: translateY(-50%);
-  font-size: 15px;
+  font-size: var(--fs-xs);
-  opacity: 0.3;
+  opacity: 0.4;
-  transition: all 0.2s;
 }
 
-th.sortable.asc::after {
+th.sortable.asc::after { content: '▲'; opacity: 1; color: var(--primary); }
-  content: '▲';
+th.sortable.desc::after { content: '▼'; opacity: 1; color: var(--primary); }
-  opacity: 1;
-  color: var(--primary-color);
-}
 
-th.sortable.desc::after {
+/* --- Compact Table (Used in Dashboards/Modals) --- */
-  content: '▼';
+.compact-table {
-  opacity: 1;
-  color: var(--primary-color);
-}
-
-/* --- Mini Table for System Status --- */
-.mini-table {
   width: 100%;
   border-collapse: collapse;
-  table-layout: fixed;
 }
 
-.mini-table thead {
+.compact-table th {
-  position: sticky;
+  padding: 0.75rem 0.5rem;
-  top: 0;
+  font-size: var(--fs-xs);
-  background: var(--white);
+  font-weight: 600;
-  z-index: 10;
+  color: var(--mute);
+  border-bottom: 1px solid var(--hairline);
+  background: var(--canvas);
 }
 
-.mini-table th {
+.compact-table td {
-  padding: 10px 0;
+  padding: 0.75rem 0.5rem;
-  font-size: 15px;
+  font-size: var(--fs-base);
-  font-weight: 800;
+  border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
-  color: var(--text-muted);
-  border-bottom: 2px solid var(--border-color);
-  background: var(--white);
-  text-align: center;
 }
 
-.mini-table th:nth-child(2) {
+.compact-table tr.clickable-row:hover {
-  text-align: left;
+  background: var(--canvas-soft);
-}
-
-.mini-row {
-  border-bottom: 1px solid var(--border-color);
   cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.2s;
 }
-
-.mini-row:hover {
-  background-color: #F8FAFA;
-}
-
-.mini-row.active {
-  background-color: #EBF2F1 !important;
-}
-
-.mini-row td {
-  padding: 10px 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-
-.mini-row td:nth-child(2) {
-  text-align: left;
-  font-weight: 700;
-}
-
-.mini-row.warning {
-  background-color: #FFF1F2 !important;
-  border-left: 3px solid #E11D48;
-}
-
-.mini-row.warning td {
-  color: #991B1B !important;
-}
-
-.warning-badge {
-  background: #FFF1F2;
-  color: #E11D48;
-  font-size: 14px;
-  font-weight: 900;
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid #FDA4AF;
-  white-space: nowrap;
-}
-
-.warning-badge-orange {
-  background: #FFF7ED;
-  color: #C2410C;
-  font-size: 14px;
-  font-weight: 900;
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid #FFEDD5;
-  white-space: nowrap;
-}
-

src/views/List/ListFactory.ts

@@ -161,11 +161,8 @@ export interface ListViewConfig {
 }
 
 export function createListView(container: HTMLElement, config: ListViewConfig) {
-  // 1. 컨테이너 초기화 및 헤더 렌더링 (서버 탭은 상단 공간 확보를 위해 헤더 생략)
+  // 1. 컨테이너 초기화
   container.innerHTML = '';
-  if (config.title !== '서버') {
-    renderPageHeader(container, config.title);
-  }
 
   const fullList = config.dataSource();
   let sortState: SortState = config.persistentSortState || { key: '', direction: 'asc' };
@@ -179,49 +176,40 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   }
   let currentFilters: any = (state as any).listFilters[filterKey];
   
+  const isServer = config.title === '서버';
+
   // 서버 및 PC 탭이 아닐 경우 '자산 현황' 뷰 진입 방지 및 강제 'asset' 모드
-  const isServerOrPc = config.title === '서버' || config.title === 'PC';
+  if (!(state as any).currentViewMode || (state as any).currentViewMode === 'system') {
-  if (!isServerOrPc) {
     (state as any).currentViewMode = 'asset';
-  } else if (!(state as any).currentViewMode) {
-    (state as any).currentViewMode = 'system';
   }
 
-  // 2. 뷰 전환 토글 바 생성 (Unified Header Style)
+  // 1. 컨텐츠 영역 생성 (먼저 생성하여 참조 가능하게 함)
-  const toggleWrapper = document.createElement('div');
+  const contentWrapper = document.createElement('div');
-  toggleWrapper.className = 'location-filter-bar'; // Use unified class for the bar
+  contentWrapper.className = 'view-content-wrapper';
+
+  // 2. 필터 바 생성 (자산 목록에서만 사용)
+  const filterBar = document.createElement('div');
+  filterBar.className = 'search-bar';
   
+  // 자산 추가 버튼 및 목록 보기 체크박스 추가 로직
   const showPcFlowBtn = config.title === 'PC';
-  toggleWrapper.innerHTML = `
+  const extraActionHTML = `
-    <div class="view-toggle" style="display: ${isServerOrPc ? 'inline-flex' : 'none'};">
+    <div class="header-action-group flex items-center gap-2" style="margin-left: auto; align-self: flex-end;">
-      ${config.title === '서버' ? `<button class="toggle-btn ${state.viewMode === 'location' ? 'active' : ''}" data-mode="location">자산 위치</button>` : ''}
-      <button class="toggle-btn ${(state as any).currentViewMode === 'system' && state.viewMode === 'list' ? 'active' : ''}" data-mode="system">${config.title === '서버' ? '운영 현황' : '자산 현황'}</button>
-      <button class="toggle-btn ${(state as any).currentViewMode === 'asset' && state.viewMode === 'list' ? 'active' : ''}" data-mode="asset">자산 목록</button>
-    </div>
-    <div class="header-action-group" style="display: flex; gap: 8px;">
       ${showPcFlowBtn ? `
         <button id="btn-goto-parts-master" class="btn btn-outline btn-sm">
-          <i data-lucide="settings" style="width: 14px; height: 14px;"></i> 부품 마스터
+          <i data-lucide="settings" class="icon-sm"></i> 부품 마스터
         </button>
         <button id="btn-pc-flow" class="btn btn-outline btn-sm">
           PC 이동/반납
         </button>
       ` : ''}
-      <button id="btn-add-asset" class="btn btn-primary btn-sm">
+      <button id="btn-add-asset" class="btn btn-primary">
-        <span style="font-size: 16px; line-height: 1;">+</span> 자산 추가
+        <i data-lucide="plus" class="icon-sm"></i> 자산 추가
       </button>
     </div>
   `;
-  container.appendChild(toggleWrapper);
 
-  // 3. 필터 바 생성 (자산 목록에서만 사용)
-  const filterBar = document.createElement('div');
-  filterBar.className = 'search-bar';
   container.appendChild(filterBar);
-
-  // 4. 컨텐츠 영역 생성
-  const contentWrapper = document.createElement('div');
-  contentWrapper.className = 'view-content-wrapper';
   container.appendChild(contentWrapper);
 
   // --- 내부 상태 ---
@@ -340,42 +328,42 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
 
         <div style="display: flex; flex: 1; min-height: 0; border-top: 1px solid var(--border-color);">
           <!-- 좌측: 자산 현황 목록 (Border-based Separation) -->
-          <div class="list-section" style="flex: 1.3; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 0 0; border-right: 1px solid var(--border-color);">
+          <div class="list-section" style="flex: 1.3; display: flex; flex-direction: column; min-height: 0; padding: 1rem 1.5rem 0 0; border-right: 1px solid var(--hairline);">
             <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0;">
-              <h4 id="list-section-title" style="font-size: 14px; font-weight: 700; color: var(--text-main); margin:0;">
+              <h4 id="list-section-title" class="sidebar-title">
                 ${isPcView ? `🔄 PC 유동 이력 (${new Date().getMonth() + 1}월)` : '자산 현황 목록'}
               </h4>
               ${!isPcView ? `
-              <div style="display: flex; align-items: center; gap: 8px;">
+              <div class="filter-row">
-                <span style="font-size: 11px; font-weight: 600; color: var(--text-muted);">위치:</span>
+                <span class="detail-label-sm">위치:</span>
-                <select id="select-loc" style="padding: 2px 8px; font-size: 11px; border-radius: 4px; border: 1px solid var(--border-color); outline: none; background: white; cursor:pointer; font-family: 'Pretendard';">
+                <select id="select-loc" class="form-select-sm">
                   <option value="">전체</option>
                   ${validLocations.map(l => `<option value="${l}" ${l === selectedLocation ? 'selected' : ''}>${l}</option>`).join('')}
                 </select>
-                <select id="select-detail-loc" class="filter-select select-detail-loc"></select>
+                <select id="select-detail-loc" class="form-select-sm"></select>
               </div>
               ` : ''}
             </div>
             <div style="flex: 1; overflow-y: auto;">
-              <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
+              <table class="compact-table">
-                <thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
+                <thead>
                   ${isPcView ? `
-                    <tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
+                    <tr>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 120px; background: #fff; white-space: nowrap;">일자</th>
+                      <th class="text-center" style="width: 120px;">일자</th>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 100px; background: #fff; white-space: nowrap; text-align: center;">담당자</th>
+                      <th class="text-center" style="width: 100px;">담당자</th>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 60px; background: #fff; white-space: nowrap; text-align: center;">구분</th>
+                      <th class="text-center" style="width: 60px;">구분</th>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 90px; background: #fff; white-space: nowrap; text-align: center;">사용자</th>
+                      <th class="text-center" style="width: 90px;">사용자</th>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 90px; background: #fff; white-space: nowrap; text-align: center;">인수자</th>
+                      <th class="text-center" style="width: 90px;">인수자</th>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 160px; background: #fff; white-space: nowrap; text-align: center;">자산번호</th>
+                      <th class="text-center" style="width: 160px;">자산번호</th>
-                      <th style="padding: 10px 8px; font-weight: 700; border-bottom: 2px solid var(--border-color); background: #fff; white-space: nowrap;">상세</th>
+                      <th class="text-center">상세</th>
                     </tr>
                   ` : `
-                    <tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
+                    <tr>
-                      <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 80px; text-align:center; background: #fff;">분류</th>
+                      <th class="text-center" style="width: 80px;">분류</th>
-                      <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 130px; background: #fff;">용도/자산명</th>
+                      <th class="text-center">용도/자산명</th>
-                      <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(정)</th>
+                      <th class="text-center" style="width: 90px;">관리자(정)</th>
-                      <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); text-align:center; width: 90px; background: #fff;">관리자(부)</th>
+                      <th class="text-center" style="width: 90px;">관리자(부)</th>
-                      <th style="padding: 10px 0; text-align: center; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 100px; background: #fff;">상세위치</th>
+                      <th class="text-center" style="width: 100px;">상세위치</th>
                     </tr>
                   `}
                 </thead>
@@ -386,63 +374,55 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
 
           <!-- 우측: 상세 정보 패널 (Box-less, Line-based) -->
           <div id="system-detail-panel" style="flex: 0.7; display: flex; flex-direction: column; min-height: 0; padding: 1rem 0 0 1.5rem; overflow: hidden;">
-             <div id="detail-empty-state" style="height: 100%; display: flex; flex-direction: column; color: var(--text-muted); text-align: center; overflow-y: auto; box-sizing: border-box; width: 100%; justify-content: ${isPcView ? 'flex-start' : 'center'}; align-items: ${isPcView ? 'stretch' : 'center'};">
+             <div id="detail-empty-state" class="detail-empty-state" style="justify-content: ${isPcView ? 'flex-start' : 'center'}; align-items: ${isPcView ? 'stretch' : 'center'};">
                 ${isPcView ? `
                   <div style="display: flex; flex-direction: column; min-height: 0; height: 100%; text-align: left;">
                     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-shrink: 0;">
-                      <h4 style="margin: 0; font-size: 14px; font-weight: 700; color: #E11D48; display: flex; align-items: center; gap: 6px; white-space: nowrap;">
+                      <h4 class="sidebar-title text-danger">
                         ⚠️ 사양 주의 장비 현황 (부족/오버스펙)
                       </h4>
                     </div>
                     <div style="flex: 1; overflow-y: auto;">
-                      <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
+                      <table class="compact-table">
-                        <thead style="position: sticky; top: 0; background: #fff; z-index: 10;">
+                        <thead>
-                          <tr style="text-align: left; font-size: 11px; color: var(--text-muted);">
+                          <tr>
-                            <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 65px; background: #fff; white-space: nowrap;">사용자</th>
+                            <th style="width: 65px;">사용자</th>
-                            <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 115px; background: #fff; white-space: nowrap;">부서 (직무)</th>
+                            <th style="width: 115px;">부서 (직무)</th>
-                            <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); width: 65px; background: #fff; white-space: nowrap; text-align: center;">상태</th>
+                            <th class="text-center" style="width: 65px;">상태</th>
-                            <th style="padding: 10px 0; font-weight: 700; border-bottom: 2px solid var(--border-color); background: #fff; white-space: nowrap;">자산코드</th>
+                            <th>자산코드</th>
                           </tr>
                         </thead>
-                        <tbody id="spec-mismatch-tbody" style="font-size: 12px;">
+                        <tbody id="spec-mismatch-tbody">
-                          <tr><td colspan="4" style="text-align:center; padding:1.5rem; color:#94A3B8;">사양 주의 자산이 없습니다.</td></tr>
+                          <tr><td colspan="4" class="empty-cell">사양 주의 자산이 없습니다.</td></tr>
                         </tbody>
                       </table>
                     </div>
                   </div>
                 ` : `
-                  <p style="font-size: 1.125rem; font-weight: 500; color: #94A3B8;">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
+                  <p class="empty-list-message">목록에서 자산을 선택하면<br>상세 정보와 배치도가 표시됩니다.</p>
                 `}
              </div>
-             <div id="detail-content" class="detail-content hidden">
+             <div id="detail-content" class="detail-content hidden" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
-                <div class="detail-summary-header">
+                <div class="detail-header-actions" style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--hairline); background: white;">
-                  <div class="summary-items">
+                  <div class="header-identity">
-                    <div class="summary-item"><label>자산번호</label><div id="detail-asset-code" class="code-value"></div></div>
+                    <span class="asset-code-title" id="detail-asset-code"></span>
-                    <div class="summary-item"><label>유형</label><div id="detail-asset-type" class="type-value"></div></div>
+                    <span class="asset-type-label" id="detail-asset-type"></span>
-                    <div class="summary-item flex-1"><label>메모 요약</label><div id="detail-memo" class="memo-value"></div></div>
                   </div>
-                  <button id="btn-view-flow-logs" style="flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; background: white; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 4px; cursor: pointer; transition: opacity 0.2s; margin-right: 8px;">
+                  <button id="btn-view-full-detail" class="btn btn-primary btn-sm">상세 보기</button>
-                    ${isPcView ? '목록 보기' : '이력 보기'}
-                  </button>
-                  <button id="btn-view-full-detail" style="flex-shrink: 0; padding: 6px 16px; font-size: 12px; font-weight: 700; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: opacity 0.2s;">상세 보기</button>
                 </div>
 
                 <!-- 메인 배치도 영역 -->
-                <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden;">
+                <div style="flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 1rem;">
-                  <div style="margin-bottom: 0.75rem; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center;">
+                  <div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--hairline); background: #f0f0f0; border-radius: 8px;">
-                    <label style="font-size: 11px; font-weight: 700; color: var(--text-main); text-transform: uppercase;">설치 위치 배치도</label>
-                  </div>
-                  <div id="detail-photo-wrapper" style="width: 100%; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid var(--border-color); background: #f0f0f0;">
                     <div class="layout-map-container readonly" style="position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
                       <img id="detail-photo" src="" style="display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none;" />
                       <iframe id="detail-html-map" src="" style="display: none; width: 100%; height: 100%; border: none;"></iframe>
                       <div id="detail-marker" class="layout-marker pulse-marker" style="display: none; position: absolute; z-index: 20;"></div>
-                      <div id="detail-overlay-layer" class="digital-overlay-layer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: flex; align-items: center; justify-content: center;"></div>
+                      <div id="detail-overlay-layer" style="position: absolute; pointer-events: none;"></div>
                     </div>
-                    <div id="detail-no-photo" style="display: none; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;">
+                    <div id="detail-no-photo" class="no-photo-state hidden" style="padding: 3rem; text-align: center; color: var(--mute);">
-                      <span style="color: #94A3B8; font-size: 13px; font-weight: 500;">등록된 배치도가 없습니다.</span>
+                      <span>등록된 배치도가 없습니다.</span>
                     </div>
-                    <div id="detail-no-photo" class="no-photo-state hidden"><span>등록된 배치도가 없습니다.</span></div>
                   </div>
                 </div>
              </div>
@@ -578,108 +558,67 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
           const tbody = document.getElementById('system-status-tbody');
           if (tbody) {
             tbody.querySelectorAll('.mini-row').forEach(r => {
-              const rIsWarning = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)';
+              r.classList.remove('active');
-              (r as HTMLElement).style.backgroundColor = rIsWarning ? '#FFF1F2' : 'transparent';
             });
           }
-          updateFlowLogsSection();
+          if (isPcView) {
+            updateTableOnly();
+          }
         };
       }
     };
 
+    // [자산 현황] 테이블 렌더러
     const updateTableOnly = () => {
-      const now = new Date();
+      let filtered = selectedLocation 
-      const currentYear = now.getFullYear();
+        ? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation)
-      const currentMonthNum = now.getMonth() + 1;
+        : fullList;
-      const currentYearMonth = `${currentYear}-${String(currentMonthNum).padStart(2, '0')}`;
+      const currentDetailLocs = Array.from(new Set(filtered.map(a => a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정'))).sort();
+      if (selectedDetailLocation) filtered = filtered.filter(a => (a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정') === selectedDetailLocation);
+      const finalDisplayList = (!selectedLocation && !selectedDetailLocation) ? filtered.slice(0, 20) : filtered;
 
-      if (isPcView) {
+      const titleEl = document.getElementById('list-section-title');
-        const recentTbody = document.getElementById('system-status-tbody');
+      if (titleEl) titleEl.textContent = selectedLocation ? `${selectedLocation} 자산 현황 (${finalDisplayList.length}대)` : '위치별 자산등록현황 (최근 등록)';
-        if (!recentTbody) return;
+      
-        const titleEl = document.getElementById('list-section-title');
+      const selectEl = document.getElementById('select-detail-loc') as HTMLSelectElement;
-        if (titleEl) titleEl.textContent = `🔄 PC 유동 이력 (${currentMonthNum}월)`;
+      if (selectEl && !selectedDetailLocation) {
-        const logs = state.masterData.logs || [];
+        selectEl.innerHTML = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
-        const flowLogs = logs.filter((log: any) => {
+      }
-          const details = log.details || '';
+
-          if (details.trim().startsWith('{')) {
+      const tbody = document.getElementById('system-status-tbody');
-            try {
+      if (tbody) {
-              const info = JSON.parse(details);
+        tbody.innerHTML = finalDisplayList.length === 0 
-              return info && (info.type === 'checkout' || info.type === 'return' || info.type === 'move');
+          ? `<tr><td colspan="5" class="empty-cell">조회된 자산이 없습니다.</td></tr>`
-            } catch (e) {}
+          : finalDisplayList.map(asset => {
-          }
+              const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
-          return details.includes('[불출]') || details.includes('[반납]') || details.includes('[입고]') || details.includes('[이동]') || details.includes('[이관]');
+              const serviceType = asset.service_type || '외부';
-        });
+              const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
-        const monthlyFlowLogs = flowLogs.filter((log: any) => (log.log_date || '').startsWith(currentYearMonth));
+              const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
-        if (monthlyFlowLogs.length === 0) {
+              
-          recentTbody.innerHTML = `<tr><td colspan="7" style="text-align:center; padding:1.5rem; color:#94A3B8;">${currentMonthNum}월 유동 이력이 없습니다.</td></tr>`;
+              const isWarning = serviceType === '외부SW' && (loc !== 'IDC' || type.toLowerCase().includes('서버pc'));
-        } else {
+              const managerMain = asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-';
-          recentTbody.innerHTML = monthlyFlowLogs.map((log: any) => {
+              const managerSub = asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-';
-            const details = log.details || '';
+              
-            let typeDisplay = '-'; let userDisplay = '-'; let targetUserDisplay = '-'; let assetCodeDisplay = '-'; let memoDisplay = '-';
+              return `
-            try {
+              <tr class="mini-row ${isWarning ? 'warning' : ''}" data-id="${asset.id}">
-              const info = JSON.parse(details);
+                <td class="text-center">
-              typeDisplay = info.type; userDisplay = info.user || '-'; targetUserDisplay = info.targetUser || '-'; assetCodeDisplay = info.assetCode || '-'; memoDisplay = info.memo || '-';
+                  <span class="badge ${isWarning ? 'badge-danger' : 'badge-primary'}">${serviceType}</span>
-            } catch (e) {
+                </td>
-              if (details.includes('[불출]')) typeDisplay = 'checkout';
+                <td class="font-bold">${purpose || '-'}</td>
-              else if (details.includes('[반납]') || details.includes('[입고]')) typeDisplay = 'return';
+                <td class="text-center">${managerMain}</td>
-              else if (details.includes('[이동]') || details.includes('[이관]')) typeDisplay = 'move';
+                <td class="text-center">${managerSub}</td>
-              const codeMatch = details.match(/PC-\d{6}-\d{4}|HW-PC-\d+/i); if (codeMatch) assetCodeDisplay = codeMatch[0];
+                <td class="text-center">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
-            }
-            let badgeHtml = '';
-            if (typeDisplay === 'checkout') badgeHtml = '<span style="background:#E0F2FE;color:#0369A1;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">불출</span>';
-            else if (typeDisplay === 'return') badgeHtml = '<span style="background:#DCFCE7;color:#15803D;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">입고</span>';
-            else if (typeDisplay === 'move') badgeHtml = '<span style="background:#FEF3C7;color:#B45309;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">이동</span>';
-            else badgeHtml = '<span style="background:#F1F5F9;color:#475569;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:700;">기타</span>';
-            return `
-              <tr style="border-bottom: 1px solid var(--border-color);">
-                <td style="padding: 10px 8px; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;">${log.log_date || '-'}</td>
-                <td style="padding: 10px 8px; font-weight: 500; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; text-align: center;">${log.log_user || '시스템'}</td>
-                <td style="padding: 10px 8px; white-space: nowrap; text-align: center;">${badgeHtml}</td>
-                <td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;">${userDisplay}</td>
-                <td style="padding: 10px 8px; font-weight: 600; color: #1E293B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; text-align: center;">${targetUserDisplay}</td>
-                <td style="padding: 10px 8px; font-family: monospace; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; text-align: center;">${assetCodeDisplay}</td>
-                <td style="padding: 10px 8px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;">${memoDisplay}</td>
               </tr>`;
-          }).join('');
+            }).join('');
-        }
+
-      } else {
+        tbody.querySelectorAll('.mini-row').forEach(row => {
-        let filtered = selectedLocation ? fullList.filter(a => (a[ASSET_SCHEMA.LOCATION.key] || '미지정') === selectedLocation) : fullList;
+          row.addEventListener('click', () => {
-        const currentDetailLocs = Array.from(new Set(filtered.map(a => a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정'))).sort();
+            tbody.querySelectorAll('.mini-row').forEach(r => r.classList.remove('active'));
-        if (selectedDetailLocation) filtered = filtered.filter(a => (a[ASSET_SCHEMA.LOC_DETAIL.key] || '미지정') === selectedDetailLocation);
+            row.classList.add('active');
-        const finalDisplayList = (!selectedLocation && !selectedDetailLocation) ? filtered.slice(0, 10) : filtered;
+            const asset = fullList.find(a => a.id === row.getAttribute('data-id'));
-        const titleEl = document.getElementById('list-section-title');
+            if (asset) updateDetailPanel(asset);
-        if (titleEl) titleEl.textContent = selectedLocation ? `${selectedLocation} 자산 현황 (${finalDisplayList.length}대)` : '위치별 자산등록현황 (최근 등록)';
-        const selectEl = document.getElementById('select-detail-loc') as HTMLSelectElement;
-        if (selectEl && !selectedDetailLocation) {
-          selectEl.innerHTML = `<option value="">전체보기</option>` + currentDetailLocs.map(dl => `<option value="${dl}">${dl}</option>`).join('');
-        }
-        const tbody = document.getElementById('system-status-tbody');
-        if (tbody) {
-          tbody.innerHTML = finalDisplayList.length === 0 ? `<tr><td colspan="5" style="padding: 3rem; text-align: center; color: var(--text-muted);">조회된 자산이 없습니다.</td></tr>`
-            : finalDisplayList.map(asset => {
-                const purpose = asset[ASSET_SCHEMA.ASSET_PURPOSE.key] || '';
-                const serviceType = asset.service_type || '외부';
-                const type = asset[ASSET_SCHEMA.ASSET_TYPE.key] || '';
-                const loc = asset[ASSET_SCHEMA.LOCATION.key] || '';
-                const isWarning = serviceType === '외부SW' && (loc !== 'IDC' || type.toLowerCase().includes('서버pc'));
-                return `
-                <tr style="border-bottom: 1px solid var(--border-color); cursor: pointer; ${isWarning ? 'background-color:#FFF1F2; border-left:3px solid #E11D48;' : ''}" class="mini-row" data-id="${asset.id}">
-                  <td style="padding: 10px 0; text-align:center;"><span style="font-weight:800; font-size:12px; color:${isWarning ? '#E11D48' : '#35635C'}">${serviceType}</span></td>
-                  <td style="padding: 10px 0; font-weight: 600; font-size: 13px;">${purpose || '-'}</td>
-                  <td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.MANAGER_MAIN.key] || '-'}</td>
-                  <td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.MANAGER_SUB.key] || '-'}</td>
-                  <td style="padding: 10px 0; text-align: center; font-size: 12px;">${asset[ASSET_SCHEMA.LOC_DETAIL.key] || '-'}</td>
-                </tr>`;
-              }).join('');
-          tbody.querySelectorAll('.mini-row').forEach(row => {
-            row.addEventListener('click', () => {
-              tbody.querySelectorAll('.mini-row').forEach(r => (r as HTMLElement).style.backgroundColor = (r as HTMLElement).style.borderLeftColor === 'rgb(225, 29, 72)' ? '#FFF1F2' : 'transparent');
-              (row as HTMLElement).style.backgroundColor = '#EBF2F1';
-              const asset = fullList.find(a => a.id === (row as HTMLElement).getAttribute('data-id'));
-              if (asset) updateDetailPanel(asset);
-            });
           });
-        }
+        });
       }
     };
 
@@ -704,9 +643,17 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
   const updateTable = () => {
     let filtered = applyCommonFilters(fullList, currentFilters, config.searchKeys as any[]);
     if (sortState.key) filtered = dynamicSort(filtered, sortState.key, sortState.direction);
-    thead.innerHTML = `<tr>${config.columns.map(col => `<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}" class="${col.align ? `text-${col.align}` : ''}">${col.header}</th>`).join('')}</tr>`;
+    
+    // Headers are naturally centered via CSS now. Only apply specific widths or sorting.
+    thead.innerHTML = `<tr>${config.columns.map(col => `<th ${col.sortKey ? `data-sort="${col.sortKey}"` : ''} style="${col.width ? `width:${col.width};` : ''}">${col.header}</th>`).join('')}</tr>`;
+    
     tbody.innerHTML = filtered.length === 0 ? `<tr><td colspan="${config.columns.length}" class="text-center empty-cell">${UI_TEXT.MESSAGES.NO_DATA}</td></tr>`
-      : filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => `<td class="${col.align ? `text-${col.align}` : ''}">${col.render(asset)}</td>`).join('')}</tr>`).join('');
+      : filtered.map(asset => `<tr class="asset-row clickable" data-id="${asset.id}">${config.columns.map(col => {
+          // Date columns should remain centered. Everything else defaults to left (via CSS).
+          const isDateCol = col.header.includes('일') || col.header.includes('날짜') || col.header.includes('연월');
+          return `<td class="${isDateCol ? 'text-center' : ''}">${col.render(asset)}</td>`;
+        }).join('')}</tr>`).join('');
+    
     tbody.querySelectorAll('.asset-row').forEach((tr, idx) => { tr.addEventListener('click', () => config.onRowClick && config.onRowClick(filtered[idx])); });
     setupTableSorting(table, sortState, (key, dir) => { sortState = { key, direction: dir }; updateTable(); });
   };
@@ -722,37 +669,74 @@ export function createListView(container: HTMLElement, config: ListViewConfig) {
     }
   };
 
-  toggleWrapper.addEventListener('click', (e) => {
+  // 2. 필터 바 렌더링
-    const btn = (e.target as HTMLElement).closest('.toggle-btn') as HTMLButtonElement;
-    if (!btn) return;
-    const mode = btn.getAttribute('data-mode');
-    if (mode === 'location') state.viewMode = 'location';
-    else { state.viewMode = 'list'; (state as any).currentViewMode = mode; }
-    window.dispatchEvent(new Event('refresh-view'));
-  });
-
   renderFilterBar(filterBar, {
-    ...config.filterOptions, initialFilters: currentFilters,
+    ...config.filterOptions, 
+    initialFilters: currentFilters,
+    extraHTML: isServer ? `
+      <div class="search-item">
+        <label class="flex items-center gap-2 cursor-pointer font-semibold" style="color: var(--primary); height: clamp(34px, 4.5vmin, 44px); padding: 0 0.5rem;">
+          <input type="checkbox" id="chk-list-view" ${(state as any).currentViewMode === 'asset' ? 'checked' : ''} style="width: 16px; height: 16px; cursor: pointer;" />
+          목록보기
+        </label>
+      </div>
+    ` : '',
     onFilterChange: (filters) => { Object.assign(currentFilters, filters); updateTable(); }
   });
 
-  const populateSelect = (selector: string, dataKey: string, initialValue?: string) => {
+  // 3. 필터 바 내 액션 버튼 배치 (자산 추가, 부품 마스터 등)
-    const select = container.querySelector(selector) as HTMLSelectElement;
+  const actionContainer = filterBar.querySelector('#filter-bar-actions');
-    if (select) {
+  if (actionContainer) {
-      const uniqueValues = Array.from(new Set(fullList.map(a => a[dataKey]))).filter(Boolean).sort();
+    actionContainer.innerHTML = `
-      uniqueValues.forEach(val => {
+      ${showPcFlowBtn ? `
-        const opt = document.createElement('option'); opt.value = String(val); opt.textContent = String(val);
+        <button id="btn-goto-parts-master" class="btn btn-outline">
-        if (initialValue && String(val) === initialValue) opt.selected = true;
+          <i data-lucide="settings" style="width: 18px; height: 18px;"></i> 부품 마스터
-        select.appendChild(opt);
+        </button>
-      });
+        <button id="btn-pc-flow" class="btn btn-outline">
-    }
+          PC 이동/반납
-  };
+        </button>
+      ` : ''}
+      <button id="btn-add-asset" class="btn btn-primary">
+        <i data-lucide="plus" style="width: 18px; height: 18px;"></i> 자산 추가
+      </button>
+    `;
+    
+    // 버튼 이벤트 바인딩
+    actionContainer.querySelector('#btn-add-asset')?.addEventListener('click', () => {
+        const dummyAsset = { id: '', category: config.title };
+        config.onRowClick && config.onRowClick(dummyAsset);
+    });
+    actionContainer.querySelector('#btn-pc-flow')?.addEventListener('click', () => {
+        window.dispatchEvent(new CustomEvent('open-pc-flow'));
+    });
+    actionContainer.querySelector('#btn-goto-parts-master')?.addEventListener('click', () => {
+        state.activeSubTab = '부품 마스터';
+        window.dispatchEvent(new Event('refresh-view'));
+    });
+  }
 
-  if (config.filterOptions.showLoc) populateSelect('#filter-loc', ASSET_SCHEMA.LOCATION.key, currentFilters.loc);
+  // 서버 탭 전용 목록보기 체크박스 이벤트
-  if (config.filterOptions.showDept) populateSelect('#filter-dept', ASSET_SCHEMA.CURRENT_DEPT.key, currentFilters.dept);
+  if (isServer) {
-  if (config.filterOptions.showCorp) populateSelect('#filter-corp', ASSET_SCHEMA.PURCHASE_CORP.key, currentFilters.corp);
+    const toggleBtn = filterBar.querySelector('#btn-toggle-list-view');
-  if (config.filterOptions.showType) populateSelect('#filter-type', ASSET_SCHEMA.ASSET_TYPE.key, currentFilters.type);
+    const chkBox = filterBar.querySelector('#chk-list-view') as HTMLInputElement;
-  if (config.filterOptions.showStatus) populateSelect('#filter-status', ASSET_SCHEMA.HW_STATUS.key, currentFilters.status);
+    
+    const handleToggle = () => {
+        const isListMode = (state as any).currentViewMode === 'asset';
+        if (isListMode) {
+            state.viewMode = 'location';
+            (state as any).currentViewMode = 'location';
+        } else {
+            state.viewMode = 'list';
+            (state as any).currentViewMode = 'asset';
+        }
+        window.dispatchEvent(new Event('refresh-view'));
+    };
+
+    toggleBtn?.addEventListener('click', (e) => {
+        if (e.target !== chkBox) handleToggle();
+    });
+    chkBox?.addEventListener('change', handleToggle);
+  }
 
   switchView();
 }

src/views/List/ServerListView.ts

@@ -22,10 +22,11 @@ export function renderServerList(container: HTMLElement) {
     onRowClick: (asset) => openHwModal(asset, 'view'),
     columns: [
       { header: ASSET_SCHEMA.CURRENT_DEPT.ui, sortKey: ASSET_SCHEMA.CURRENT_DEPT.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_DEPT.key] || '-' },
-      { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
+      { header: ASSET_SCHEMA.ASSET_PURPOSE.ui, sortKey: ASSET_SCHEMA.ASSET_PURPOSE.key, align: 'center', width: '15%', render: a => formatInline(a[ASSET_SCHEMA.ASSET_PURPOSE.key] || '-') },
       { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { 
         header: '모델/메인보드', 
+        align: 'center',
         width: '15%',
         render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || a[ASSET_SCHEMA.MAINBOARD.key] || '-') 
       },

src/views/List/StorageListView.ts

@@ -21,7 +21,7 @@ export function renderStorageList(container: HTMLElement) {
       { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
       { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
       { header: ASSET_SCHEMA.VOLUME.ui, sortKey: ASSET_SCHEMA.VOLUME.key, align: 'center', render: a => a[ASSET_SCHEMA.VOLUME.key] || '-' },
-      { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
+      { header: ASSET_SCHEMA.MODEL_NAME.ui, sortKey: ASSET_SCHEMA.MODEL_NAME.key, align: 'center', render: a => formatInline(a[ASSET_SCHEMA.MODEL_NAME.key] || a[ASSET_SCHEMA.ASSET_NAME.key] || '-') },
       { header: ASSET_SCHEMA.SERIAL_NUM.ui, sortKey: ASSET_SCHEMA.SERIAL_NUM.key, align: 'center', render: a => a[ASSET_SCHEMA.SERIAL_NUM.key] || '-' },
       { 
         header: ASSET_SCHEMA.LOCATION.ui, 

src/views/LocationView.ts

@@ -4,12 +4,11 @@ import { ASSET_SCHEMA } from '../core/schema';
 import { LOCATION_DATA, IMAGE_LOCATIONS } from '../components/Modal/SharedData';
 
 /**
- * 위치 중심 자산 현황 뷰 (Refined)
+ * 위치 중심 자산 현황 뷰 (Vercel Integrated)
  */
 export async function renderLocationView(container: HTMLElement) {
   if (!container) return;
 
-  // 로컬 상태 (UI 제어용)
   let currentLoc = '기술개발센터';
   let currentDetail = '서버실';
   let currentPage = 0; 
@@ -26,7 +25,7 @@ export async function renderLocationView(container: HTMLElement) {
                      : [];
     const mapPath = locImages[currentPage] || '';
     
-    // 자산이 등록된(좌표가 일치하는) 구역만 필터링하여 표시
+    // 자산이 등록된 구역만 필터링
     const allBoxes = mapConfig[mapPath] || [];
     const boxes = allBoxes.filter((box: any) => 
       state.masterData.hw.some(a => 
@@ -39,38 +38,36 @@ export async function renderLocationView(container: HTMLElement) {
 
     container.innerHTML = `
       <div class="location-view-wrapper">
-        <!-- 상단 통합 바 (토글 + 필터) -->
+        <!-- 상단 통합 바 (Vercel Style) -->
-        <div class="location-filter-bar" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.5rem; border-bottom: 1px solid var(--border-color); background: white;">
+        <div class="location-filter-bar">
-          <!-- 좌측: 3-way 토글 -->
+          <div class="filter-actions-group">
-          <div class="view-toggle">
+            <div class="filter-group">
-            <button class="toggle-btn active" data-mode="location">자산 위치</button>
+              <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: none; font-weight: 500; color: var(--primary);">
-            <button class="toggle-btn" data-mode="system">운영 현황</button>
+                <input type="checkbox" id="chk-list-view-loc" style="width: 16px; height: 16px; cursor: pointer;" />
-            <button class="toggle-btn" data-mode="asset">자산 목록</button>
+                목록보기
-          </div>
+              </label>
-
+            </div>
-          <!-- 우측: 위치 필터 -->
+            <div class="filter-group">
-          <div style="display: flex; align-items: center; gap: 1.5rem;">
+              <label>건물/위치</label>
-            <div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
+              <select id="sel-loc-main" class="form-select-sm">
-              <label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">건물/위치</label>
-              <select id="sel-loc-main" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
                 ${Object.keys(LOCATION_DATA).map(loc => `<option value="${loc}" ${loc === currentLoc ? 'selected' : ''}>${loc}</option>`).join('')}
               </select>
             </div>
-            <div class="filter-group" style="display: flex; align-items: center; gap: 0.75rem;">
+            <div class="filter-group">
-              <label style="font-size: 13px; font-weight: 700; color: var(--text-muted);">상세 위치</label>
+              <label>상세 위치</label>
-              <div style="display: flex; align-items: center; gap: 0.5rem;">
+              <div class="filter-row">
-                <select id="sel-loc-detail" style="padding: 4px 8px; border: 1px solid var(--border-color); font-family: inherit; font-size: 13px; outline: none; background: #fff; cursor: pointer; border-radius: 4px;">
+                <select id="sel-loc-detail" class="form-select-sm">
                   ${(LOCATION_DATA[currentLoc] || []).map(det => `<option value="${det}" ${det === currentDetail ? 'selected' : ''}>${det}</option>`).join('')}
                 </select>
 
                 <!-- 페이지네이션 -->
                 ${locImages.length > 1 ? `
-                <div class="map-pagination" style="margin-left: 0; padding-left: 0.5rem; border-left: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.5rem;">
+                <div class="map-pagination-group">
-                  <div class="page-btns" style="display: flex; gap: 4px;">
+                  <div class="page-btns">
-                    <button id="btn-prev-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
+                    <button id="btn-prev-page" class="btn btn-outline btn-sm" ${currentPage === 0 ? 'disabled' : ''}>이전</button>
-                    <button id="btn-next-page" style="background: none; border: 1px solid var(--border-color); padding: 2px 8px; cursor: pointer; font-size: 12px; border-radius: 4px;" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
+                    <button id="btn-next-page" class="btn btn-outline btn-sm" ${currentPage === locImages.length - 1 ? 'disabled' : ''}>다음</button>
                   </div>
-                  <span class="page-info" style="font-size: 12px; color: var(--text-muted);">(${currentPage + 1} / ${locImages.length})</span>
+                  <span class="page-info">(${currentPage + 1} / ${locImages.length})</span>
                 </div>
                 ` : ''}
               </div>
@@ -79,12 +76,12 @@ export async function renderLocationView(container: HTMLElement) {
         </div>
 
         <div class="location-main-content">
-          <!-- 지도 섹션: Border-only -->
+          <!-- 지도 섹션 -->
           <div class="map-container-section">
-            <div class="map-frame-wrapper" style="position: relative; width: 100%; height: 100%; display: flex; align-items: flex-start; justify-content: center;">
+            <div class="map-frame-wrapper">
               ${mapPath ? `
-                <img src="${mapPath}" id="main-map-img" style="max-width: 100%; max-height: 100%; object-fit: contain; display: block;">
+                <img src="${mapPath}" id="main-map-img" class="map-image">
-                <div id="box-overlay" style="position: absolute; pointer-events: none; transition: none;">
+                <div id="box-overlay" class="map-overlay">
                   ${boxes.map((box: any, idx: number) => {
                     const name = box.name || `#${idx+1}`;
                     return `
@@ -92,22 +89,22 @@ export async function renderLocationView(container: HTMLElement) {
                          data-name="${name}"
                          data-x="${box.x}"
                          data-y="${box.y}"
-                         style="position: absolute; left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
+                         style="left:${box.x}%; top:${box.y}%; width:${box.w}%; height:${box.h}%;
                                 border: 2px solid var(--primary-color); background: rgba(30, 81, 73, 0.1); cursor:pointer; pointer-events: auto;">
                     </div>
                   `}).join('')}
                 </div>
-              ` : '<div style="padding: 5rem; text-align:center; color: #999;">해당 위치의 도면이 등록되지 않았습니다.</div>'}
+              ` : '<div class="no-map-message">해당 위치의 도면이 등록되지 않았습니다.</div>'}
             </div>
           </div>
 
-          <!-- 상세 정보 섹션: Border-only -->
+          <!-- 상세 정보 섹션 -->
-          <div class="asset-list-section" style="display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #fff;">
+          <div class="asset-list-section">
-            <div class="section-header" style="flex-shrink: 0; background: #f8fafc; border-bottom: 1px solid var(--border-color); padding: 1rem;">
+            <div class="section-header">
-               <h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>
+               <h4 id="loc-list-title" class="sidebar-title">구역을 선택하세요</h4>
             </div>
-            <div id="loc-asset-table-container" class="mini-table-wrapper" style="flex: 1; overflow-y: auto; padding: 0;">
+            <div id="loc-asset-table-container" class="mini-table-wrapper">
-               <div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>
+               <div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>
             </div>
           </div>
         </div>
@@ -117,25 +114,8 @@ export async function renderLocationView(container: HTMLElement) {
     const syncOverlaySize = () => {
       const img = container.querySelector('#main-map-img') as HTMLImageElement;
       const overlay = container.querySelector('#box-overlay') as HTMLElement;
-      const mainContent = container.querySelector('.location-main-content') as HTMLElement;
 
       if (img && overlay && img.complete) {
-        // 1. 이미지 실제 크기와 가로세로 비율 계산
-        const naturalRatio = img.naturalWidth / img.naturalHeight;
-        
-        // 2. 비율에 따른 동적 레이아웃 조정 (Adaptive Layout)
-        if (naturalRatio < 0.85) {
-          // 세로로 긴 사진: 상세정보를 대폭 넓힘
-          mainContent.style.gridTemplateColumns = '0.9fr 1.1fr';
-        } else if (naturalRatio < 1.25) {
-          // 정사각형에 가까운 사진: 균형 배치
-          mainContent.style.gridTemplateColumns = '1.2fr 1fr';
-        } else {
-          // 가로로 넓은 사진: 지도 중심 (예전 2:1 비율)
-          mainContent.style.gridTemplateColumns = '2fr 1fr';
-        }
-
-        // 3. 오버레이 크기와 위치 동기화
         overlay.style.width = img.clientWidth + 'px';
         overlay.style.height = img.clientHeight + 'px';
         overlay.style.left = img.offsetLeft + 'px';
@@ -156,7 +136,6 @@ export async function renderLocationView(container: HTMLElement) {
     window.removeEventListener('resize', syncOverlaySize);
     window.addEventListener('resize', syncOverlaySize);
 
-    // 이벤트 바인딩
     const selMain = container.querySelector('#sel-loc-main') as HTMLSelectElement;
     selMain?.addEventListener('change', () => {
       currentLoc = selMain.value;
@@ -175,19 +154,23 @@ export async function renderLocationView(container: HTMLElement) {
     container.querySelector('#btn-prev-page')?.addEventListener('click', () => { currentPage--; render(); });
     container.querySelector('#btn-next-page')?.addEventListener('click', () => { currentPage++; render(); });
 
-    // 뷰 모드 전환 이벤트 바인딩 (Unified Logic)
+    const chkBox = container.querySelector('#chk-list-view-loc') as HTMLInputElement;
-    container.querySelectorAll('.toggle-btn').forEach(btn => {
+
-      btn.addEventListener('click', () => {
+    if (chkBox) {
-        const mode = btn.getAttribute('data-mode');
+        chkBox.checked = (state as any).currentViewMode === 'asset';
-        if (mode === 'location') {
+        const handleToggle = () => {
-          state.viewMode = 'location';
+            const isListMode = chkBox.checked;
-        } else {
+            if (isListMode) {
-          state.viewMode = 'list';
+                state.viewMode = 'list';
-          (state as any).currentViewMode = mode;
+                (state as any).currentViewMode = 'asset';
-        }
+            } else {
-        window.dispatchEvent(new Event('refresh-view'));
+                state.viewMode = 'location';
-      });
+                (state as any).currentViewMode = 'location';
-    });
+            }
+            window.dispatchEvent(new Event('refresh-view'));
+        };
+        chkBox.addEventListener('change', handleToggle);
+    }
 
     container.querySelectorAll('.location-box-point').forEach(box => {
       box.addEventListener('click', () => {
@@ -201,10 +184,7 @@ export async function renderLocationView(container: HTMLElement) {
           String(a.loc_y) === String(y)
         );
 
-        if (targetAsset) {
+        if (targetAsset) renderAssetDetail(targetAsset);
-          renderAssetDetail(targetAsset);
-        }
-
         container.querySelectorAll('.location-box-point').forEach(b => (b as HTMLElement).style.background = 'rgba(30, 81, 73, 0.1)');
         (box as HTMLElement).style.background = 'rgba(30, 81, 73, 0.4)';
       });
@@ -215,7 +195,6 @@ export async function renderLocationView(container: HTMLElement) {
     const title = container.querySelector('#loc-list-title')!;
     const tableContainer = container.querySelector('#loc-asset-table-container')!;
     
-    // 헤더: 자산상세정보 대신 자산번호 + 구분/유형 배치 (CSS Class 사용)
     title.innerHTML = `
       <div class="detail-header-actions">
         <div class="header-identity">
@@ -227,11 +206,27 @@ export async function renderLocationView(container: HTMLElement) {
       </div>
     `;
 
-    // 섹션 렌더러: 2열 구성 및 폰트 대비 강화 (CSS Class 사용)
+    const fields = [
-    const renderSection = (title: string, fields: { label: string; value: any; fullWidth?: boolean }[]) => `
+      { label: ASSET_SCHEMA.CURRENT_DEPT.ui, value: asset.current_dept },
-      <div class="detail-section">
+      { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
-        <div class="detail-section-title">${title}</div>
+      { label: ASSET_SCHEMA.MANAGER_MAIN.ui, value: asset.manager_primary },
-        <div class="detail-grid-2col">
+      { label: ASSET_SCHEMA.MANAGER_SUB.ui, value: asset.manager_secondary },
+      { label: ASSET_SCHEMA.ASSET_PURPOSE.ui, value: asset.asset_purpose, fullWidth: true },
+      { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
+      { label: ASSET_SCHEMA.OS.ui, value: asset.os },
+      { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
+      { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
+      { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true },
+      { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
+      { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
+      { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool },
+      { label: ASSET_SCHEMA.MONITORING.ui, value: asset.monitoring },
+      { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
+    ];
+
+    const sectionsHTML = `
+      <div class="detail-section" style="margin-bottom: 0;">
+        <div class="detail-grid-2col" style="gap: 0.75rem 1rem;">
           ${fields.map(f => `
             <div class="detail-item ${f.fullWidth ? 'full-width' : ''}">
               <div class="detail-label-sm">${f.label}</div>
@@ -242,41 +237,12 @@ export async function renderLocationView(container: HTMLElement) {
       </div>
     `;
 
-    const sectionsHTML = [
-      renderSection('시스템 사양', [
-        { label: ASSET_SCHEMA.MODEL_NAME.ui, value: asset.model_name },
-        { label: ASSET_SCHEMA.OS.ui, value: asset.os },
-        { label: ASSET_SCHEMA.CPU.ui, value: asset.cpu },
-        { label: ASSET_SCHEMA.RAM.ui, value: asset.ram },
-        { label: ASSET_SCHEMA.GPU.ui, value: asset.gpu, fullWidth: true }
-      ]),
-      renderSection('네트워크 및 상태', [
-        { label: ASSET_SCHEMA.IP_ADDR.ui, value: asset.ip_address },
-        { label: ASSET_SCHEMA.MAC_ADDR.ui, value: asset.mac_address },
-        { label: ASSET_SCHEMA.HW_STATUS.ui, value: asset.hw_status },
-        { label: ASSET_SCHEMA.REMOTE_TOOL.ui, value: asset.remote_tool }
-      ]),
-      renderSection('상세 메모리', [
-        { label: ASSET_SCHEMA.MEMO.ui, value: asset.memo, fullWidth: true }
-      ])
-    ].join('');
-
     tableContainer.innerHTML = `
       <div class="asset-detail-sidebar">
         ${sectionsHTML}
       </div>
     `;
 
-    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
-      title.innerHTML = `<h4 id="loc-list-title" class="sidebar-title">📍 구역을 선택하세요</h4>`;
-      tableContainer.innerHTML = `<div class="empty-state">지도에서 자산 위치를 클릭하세요.</div>`;
-    });
-
-    container.querySelector('#btn-back-to-list')?.addEventListener('click', () => {
-      title.innerHTML = `<h4 id="loc-list-title" style="margin:0; font-size: 0.95rem; font-weight: 800; color: var(--primary-color);">📍 구역을 선택하세요</h4>`;
-      tableContainer.innerHTML = `<div class="empty-state" style="padding: 3rem 1rem; color: var(--text-muted); text-align: center;">지도에서 자산 위치를 클릭하세요.</div>`;
-    });
-
     container.querySelector('#btn-edit-from-loc')?.addEventListener('click', () => {
       openHwModal(asset, 'edit');
     });