commit 6bca7beb8ed4255f44cebe4ceb5218922d5d31da
Author: JooWangi <brrr0@baroncs.co.kr>
Date:   Mon Apr 13 14:17:43 2026 +0900

    Initial commit

diff --git a/.gemini/settings.json b/.gemini/settings.json
new file mode 100644
index 0000000..b0948b3
--- /dev/null
+++ b/.gemini/settings.json
@@ -0,0 +1,15 @@
+{
+  "mcpServers": {
+    "gitea": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@andrebuzeli/git-mcp@latest"
+      ],
+      "env": {
+        "GITEA_HOST": "https://gitea.hmac.kr",
+        "GITEA_ACCESS_TOKEN": "0318de8265b9cbabc5e70773e94c59807ec3ad8a"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40b878d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..056e508
--- /dev/null
+++ b/README.md
@@ -0,0 +1,56 @@
+# 🛠️ 개발 및 관리 규칙 (Strict Development Rules)
+
+1. **언어 설정**: 영어로 생각하되, 모든 답변은 **한국어**로 작성한다.
+2. **임의 수정 절대 금지 (Zero-Arbitrary Change)**:
+    - 사용자가 명시적으로 지시한 부분 외에는 **단 한 줄의 코드도, 그 어떤 파일도 임의로 수정, 정리, 리팩토링하지 않는다.**
+    - 지시받지 않은 다른 파트의 코드는 절대 건드리지 않으며, 영향 범위가 요청 범위를 벗어나지 않도록 '외과 수술식(Surgical) 수정'을 원칙으로 한다.
+3. **개선 작업 절차 (Test-First Approach)**:
+    - 사용자가 개선(Refactoring, Optimization 등)을 지시한 경우, **수정 전 현재 시스템이 정상적으로 잘 작동하는지 먼저 전수 확인**한다.
+    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
+    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
+4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
+
+---
+
+### 🚀 서버 구동 및 외부 접속 규칙 (Server Run & External Access)
+
+1.  **포트 고정**: 개발 서버는 반드시 **8080** 포트를 사용한다. (`vite.config.ts` 설정 준수)
+2.  **외부 접속 허용 (Host)**: 사무실 내 타 직원이 접속할 수 있도록 `--host` 모드로 구동한다.
+3.  **구동 명령어**:
+    ```bash
+    npm run dev
+    ```
+    *   해당 명령어 실행 시 `0.0.0.0` 또는 `Network: http://[내-IP]:8080/` 경로로 타인 접속이 가능하다.
+4.  **IP 확인 방법**:
+    *   Windows: `ipconfig` 명령어로 'IPv4 주소' 확인 후 공유.
+
+---
+
+### 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
+
+1.  **디자인 철학 (Design Philosophy)**
+    *   **Minimalist & Border-based**: 불필요한 박스(Card) 사용을 최소화하고, 정보의 구분은 간결한 라인(Border/Divider)을 활용하여 시각적 피로도를 낮춥니다.
+    *   **Professional Achromatic**: 무채색(Black, White, Grey)을 기본으로 하여 정돈된 업무 환경을 제공합니다.
+    *   **Green Accent**: 블루 대신 짙은 그린(`#1E5149`)을 포인트 컬러로 사용하여 차분한 전문성을 강조합니다.
+
+2.  **타이포그래피 (Typography)**
+    *   **Font Family**: `Pretendard` (전역 적용)
+    *   **Letter Spacing**: `-0.02em` (약 -2%) 적용. 자간을 좁게 설정하여 밀도 있고 세련된 가독성을 확보합니다.
+    *   **Weights**: 400(Regular), 500(Medium), 600(SemiBold), 700(Bold).
+
+3.  **컬러 팔레트 (Color Palette)**
+    *   **Point Color**: `#1E5149` (Deep Green) - 강조, 활성화 상태, 주요 액션 버튼.
+    *   **Text**: Main(`#111827` - Near Black), Muted(`#6B7280` - Grey).
+    *   **Border/Divider**: `#E5E7EB` (Light Grey) - 정보 구분을 위한 얇은 실선.
+    *   **Background**: `#FFFFFF` (White) / `#F9FAFB` (Off White).
+
+4.  **레이아웃 및 컴포넌트 규칙 (Layout Rules)**
+    *   **Box-less Design**: 꼭 필요한 정보 묶음(데이터 그룹화 등)이 아니면 박스 형태의 테두리나 배경 사용을 지양합니다.
+    *   **Line-based Division**: 섹션 간의 구분은 1px 두께의 얇은 실선(Border)을 통해 명확히 합니다.
+    *   **Table**: 배경색이나 화려한 효과 없이 행(Row) 간의 얇은 구분선만 사용하여 데이터 본연에 집중하게 합니다.
+    *   **Input/Button**: 입력 필드와 버튼은 최소한의 보더와 포인트 컬러만 사용하여 정갈하게 표현합니다.
+    *   **Modal (모달 공통 규칙)**:
+        *   **Header**: 짙은 그린(`#1E5149`) 배경에 화이트 텍스트를 사용하며, 우측 상단에 명확한 'X' 닫기 버튼을 배치합니다.
+        *   **Interaction**: 사용자의 편의를 위해 `ESC` 키를 누르거나 모달 바깥 영역(Overlay)을 클릭하면 모달이 닫히도록 구현합니다.
+        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.
+
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/00.HW요약정보.png b/Reference/SAMQ 기능 이미지 캡쳐/00.HW요약정보.png
new file mode 100644
index 0000000..c705eef
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/00.HW요약정보.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/00.SW요약정보.png b/Reference/SAMQ 기능 이미지 캡쳐/00.SW요약정보.png
new file mode 100644
index 0000000..6adf117
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/00.SW요약정보.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/01.SW자산 사용자 할당.png b/Reference/SAMQ 기능 이미지 캡쳐/01.SW자산 사용자 할당.png
new file mode 100644
index 0000000..8234fa2
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/01.SW자산 사용자 할당.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/02.개인PC프로그램설치현황.png b/Reference/SAMQ 기능 이미지 캡쳐/02.개인PC프로그램설치현황.png
new file mode 100644
index 0000000..4795416
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/02.개인PC프로그램설치현황.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/03.비인가프로그램실행찯안.png b/Reference/SAMQ 기능 이미지 캡쳐/03.비인가프로그램실행찯안.png
new file mode 100644
index 0000000..8e06abb
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/03.비인가프로그램실행찯안.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/04.개인PC사양정보수집.png b/Reference/SAMQ 기능 이미지 캡쳐/04.개인PC사양정보수집.png
new file mode 100644
index 0000000..2516b59
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/04.개인PC사양정보수집.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/05.구독라이센스등록페이지.png b/Reference/SAMQ 기능 이미지 캡쳐/05.구독라이센스등록페이지.png
new file mode 100644
index 0000000..59626eb
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/05.구독라이센스등록페이지.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/05.영구라이센스등록페이지.png b/Reference/SAMQ 기능 이미지 캡쳐/05.영구라이센스등록페이지.png
new file mode 100644
index 0000000..d17d615
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/05.영구라이센스등록페이지.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/06. 프로그램 할당 현황.png b/Reference/SAMQ 기능 이미지 캡쳐/06. 프로그램 할당 현황.png
new file mode 100644
index 0000000..f650bf3
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/06. 프로그램 할당 현황.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/07.실물자산관리페이지.png b/Reference/SAMQ 기능 이미지 캡쳐/07.실물자산관리페이지.png
new file mode 100644
index 0000000..0d57cfc
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/07.실물자산관리페이지.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/07.실물자산등록페이지.png b/Reference/SAMQ 기능 이미지 캡쳐/07.실물자산등록페이지.png
new file mode 100644
index 0000000..3537b6c
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/07.실물자산등록페이지.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/08.변경내역페이지.png b/Reference/SAMQ 기능 이미지 캡쳐/08.변경내역페이지.png
new file mode 100644
index 0000000..f3a3a6a
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/08.변경내역페이지.png differ
diff --git a/Reference/SAMQ 기능 이미지 캡쳐/09.HW관리페이지.png b/Reference/SAMQ 기능 이미지 캡쳐/09.HW관리페이지.png
new file mode 100644
index 0000000..5d2bc5d
Binary files /dev/null and b/Reference/SAMQ 기능 이미지 캡쳐/09.HW관리페이지.png differ
diff --git a/Reference/SAMQ 매뉴얼/SAMQ_manual_agent.pdf b/Reference/SAMQ 매뉴얼/SAMQ_manual_agent.pdf
new file mode 100644
index 0000000..961f66d
Binary files /dev/null and b/Reference/SAMQ 매뉴얼/SAMQ_manual_agent.pdf differ
diff --git a/Reference/SAMQ 매뉴얼/SAMQ_manual_app.pdf b/Reference/SAMQ 매뉴얼/SAMQ_manual_app.pdf
new file mode 100644
index 0000000..e516327
Binary files /dev/null and b/Reference/SAMQ 매뉴얼/SAMQ_manual_app.pdf differ
diff --git a/Reference/SAMQ 매뉴얼/SAMQ_manual_web_realassets.pdf b/Reference/SAMQ 매뉴얼/SAMQ_manual_web_realassets.pdf
new file mode 100644
index 0000000..194bb8d
Binary files /dev/null and b/Reference/SAMQ 매뉴얼/SAMQ_manual_web_realassets.pdf differ
diff --git a/Reference/SAMQ 매뉴얼/SAMQ_manual_web_software.pdf b/Reference/SAMQ 매뉴얼/SAMQ_manual_web_software.pdf
new file mode 100644
index 0000000..2d8d5e3
Binary files /dev/null and b/Reference/SAMQ 매뉴얼/SAMQ_manual_web_software.pdf differ
diff --git a/create_db.js b/create_db.js
new file mode 100644
index 0000000..f045a75
--- /dev/null
+++ b/create_db.js
@@ -0,0 +1,24 @@
+import * as XLSX from 'xlsx';
+
+const hwTabs = ['개인PC', '서버', '스토리지', '전산비품'];
+const swTabs = ['구독SW', '영구SW'];
+
+const hwHeaders = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS'];
+const swHeaders = ['법인', 'SW명', '라이선스키', '할당자', '사용기간', '비고'];
+
+const wb = XLSX.utils.book_new();
+
+hwTabs.forEach((tab, i) => {
+  const wsData = [hwHeaders, [`(주)회사${i}`, `ASSET-${i}00`, `${tab} 모델A`, '본사 1층', '관리자A', '192.168.0.1', '00:00:00:00:00:01', 'Core i7, 16GB RAM', 'Windows 10']];
+  const ws = XLSX.utils.aoa_to_sheet(wsData);
+  XLSX.utils.book_append_sheet(wb, ws, tab);
+});
+
+swTabs.forEach((tab, i) => {
+  const wsData = [swHeaders, [`(주)회사${i}`, `${tab} Adobe CC`, '1234-5678-ABCD', '홍길동,김철수', '2024.01~2024.12', '본사 전용']];
+  const ws = XLSX.utils.aoa_to_sheet(wsData);
+  XLSX.utils.book_append_sheet(wb, ws, tab);
+});
+
+XLSX.writeFile(wb, 'temp_db.xlsx');
+console.log('temp_db.xlsx created!');
diff --git a/implementation_plan.md b/implementation_plan.md
new file mode 100644
index 0000000..beae5a1
--- /dev/null
+++ b/implementation_plan.md
@@ -0,0 +1,77 @@
+# H/W 자산관리 시스템 프로토타입 구현 계획 (Excel 기반 DB)
+
+현재 프로젝트는 DB 연동 없이 프로토타입으로 개발되며, 초기 H/W 자산을 엑셀 파일로 관리할 수 있도록 설계합니다. 지정된 디자인 가이드라인(`README.md`)에 따라 세련되고 전문적인 UI를 Vite + Vanilla JS (또는 TS) 기반으로 구축합니다.
+
+## User Review Required
+
+> [!IMPORTANT]
+> **엑셀을 DB처럼 사용하는 방식**에 대한 주요 동작 흐름은 다음과 같습니다. 해당 방식이 의도하신 바와 맞는지 확인 부탁드립니다.
+> 1. 화면 진입 시 제공되는 **템플릿 엑셀 파일 다운로드**
+> 2. 해당 양식에 맞춰 데이터 입력 후 브라우저에 **엑셀 파일 업로드(Import)**
+> 3. 웹 상에서 **Data Table 형태로 렌더링** (편집/추가/삭제 기능 제공)
+> 4. 수정이 완료된 후 **엑셀 파일로 다시 다운로드(Export)** 하여 로컬에 저장
+
+## 데이터 스키마 설계 (H/W 자산)
+
+요청하신 항목에 맞춘 필수 H/W 자산 데이터 필드입니다. 엑셀의 열(Column)로 활용됩니다.
+
+- **법인 (Company)**: 소속 법인
+- **자산코드 (AssetCode)**: 자산의 고유 식별자
+- **명칭 (DeviceName)**: 모델명 또는 기기명
+- **위치 (Location)**: 현재 파악된 물리적 위치
+- **관리자 (Manager)**: 실 사용자 또는 담당자
+- **IP주소 (IPAddress)**: 할당된 IP
+- **MAC address (MacAddress)**: 기기 고유 MAC 주소
+- **H/W 사양 (HWSpecs)**: CPU, RAM, Storage 등 사양 요약
+- **OS (OperatingSystem)**: 설치된 운영체제 정보
+
+## Proposed Changes
+
+### 1. 개발 환경 설정 (Vite 기반)
+- `npx create-vite` 를 사용하여 `vanilla-ts` (또는 `vanilla`) 프로젝트를 현재 디렉토리에 초기화합니다.
+- `package.json` 및 `vite.config.ts` 설정 (포트 8080 및 host 허용)
+- Excel 제어를 위해 `xlsx` (SheetJS) 라이브러리를 설치합니다.
+
+#### [NEW] package.json
+#### [NEW] vite.config.ts
+
+---
+
+### 2. UI 및 디자인 컴포넌트 (`README.md` 가이드라인 준수)
+- 디자인: Box-less Design, Line-based Division 적용
+- 컬러: `#1E5149`(Point), `#E5E7EB`(Border), `#F9FAFB`(Background)
+- 폰트: `Pretendard`, `Letter Spacing: -0.02em` 적용
+- 테이블 요소: 구분선만 사용하는 미니멀 테이블
+
+#### [NEW] index.css
+
+---
+
+### 3. 메인 HTML 및 로직 구현
+- **File Upload Area**: 엑셀 파일을 불러오거나 템플릿을 다운로드 할 수 있는 상단 컨트롤 영역.
+- **Data Table**: 파싱된 H/W 자산 리스트를 출력.
+- **Modal Component**: `README.md`에 정의된 2열 그리드와 우측 상단 닫기, 하단 저장 버튼이 포함된 정보 수정/생성 모달.
+- **Excel Logic**: 업로드된 Excel 데이터를 파싱하여 JSON 형태로 브라우저 메모리에 들고 처리한 후 다시 Excel로 내보내는 기능.
+
+#### [NEW] index.html
+#### [NEW] src/main.ts
+#### [NEW] src/excelHandler.ts
+
+## Open Questions
+
+> [!WARNING]
+> 1. 프론트엔드 프레임워크 강제 규정이 없다면, 경량화 및 설정 편의를 위해 `Vite + Vanilla TypeScript` 를 사용하는 것이 괜찮으신가요? (원하신다면 React나 Vue로도 가능합니다.)
+> 2. 추가적인 검색 필터(예: 법인별, 관리자별 검색)가 당장 도입되어야 하는 필수 기능인가요?
+
+## Verification Plan
+
+### Automated Tests
+- `npm run dev` 를 통해 `http://localhost:8080` 포트 개방 성공 여부 확인.
+- 브라우저 기능 테스트:
+    - 템플릿 다운로드 클릭 -> 정상적인 `hw_assets.xlsx` 다운로드 여부
+    - 샘플 엑셀 파일 업로드 -> 데이터 테이블에 행(Row) 생성 여부
+    - 항목 더블 클릭 혹은 [수정] 버튼 클릭 시 -> 모달 팝업 및 데이터 연동 확인
+    - [저장 후 내보내기] 클릭 -> 업데이트된 데이터가 포함된 새 엑셀 파일 다운로드 확인
+
+### Manual Verification
+- 디자인 요구사항(`Pretendard`, `#1E5149`, Border-less 컨셉) 반영 확인을 스크린샷 렌더링으로 사용자와 상호작용합니다.
diff --git a/implementation_plan2 b/implementation_plan2
new file mode 100644
index 0000000..0d9d862
--- /dev/null
+++ b/implementation_plan2
@@ -0,0 +1,51 @@
+# 구조 개선 및 다중 탭(Depth 2) 도입 계획
+
+사용자 요청에 따라 H/W와 S/W를 구분하고, 그 하위에 각각 대시보드 및 상세 항목(개인PC, 서버 등) 탭을 나누는 네비게이션 구조를 도입합니다. 바닐라 JS 기반에서 각 탭마다 다른 데이터 테이블을 그려내는 아키텍처로 개선합니다.
+
+## User Review Required
+
+> [!IMPORTANT]
+> 1. **엑셀 관리 방식 (Sheets 분리)**: 단일 엑셀 파일 안에 여러 개의 시트(Sheet)를 나누어 관리하는 방식으로 제안합니다. 한 번 엑셀을 업로드하면, `개인PC`, `서버`, `스토리지`, `전산비품` 등 각각의 시트를 한방에 파싱하여 각 탭에 적용하도록 구성하겠습니다. 
+> 2. **S/W 스키마**: 현재 H/W 기반 데이터 스키마만 정의되어 있습니다. [구독 소프트웨어]와 [영구 소프트웨어] 탭 개발을 위한 데이터 항목들(예: 사용기간, 라이선스키, 결제방식 등)은 아직 정해지지 않았으므로 일단 공통 S/W 데이터 스키마 임시 템플릿(S/W명, 유형, 라이선스키, 할당된 사용자 등)으로 만들어 두고 추후 수정할 수 있도록 개발해도 될까요?
+
+## Proposed Changes
+
+### 1. UI/UX: 2 Depth 네비게이션 (`index.html`, `style.css`)
+- **좌측(또는 상단) GNB (Global Navigation Bar)**: H/W 와 S/W 를 스위치할 수 있는 메인 탭 생성.
+- **LNB (Local Navigation Bar)**: 메인 탭 전환 시 나타나는 서브 탭(H/W: 대시보드/PC/서버/스토리지/비품, S/W: 대시보드/구독/영구).
+- `README.md` 가이드라인에 따라 화면을 분할하고 정보 밀도를 높이기 위해 Box-less, Line-based Layout 유지.
+
+#### [MODIFY] index.html
+#### [MODIFY] src/style.css
+
+---
+
+### 2. 다중 데이터 구조 및 상태 관리 (`main.ts`)
+- 현재 선택된 메뉴 뎁스(예: `activeCategory = 'HW'`, `activeSubTab = '개인PC'`)에 따라 렌더링 함수가 동기화되도록 라우팅/상태 관리 로직 추가.
+- `Dashboard` 탭 진입 시, 모든 서브 탭 데이터의 갯수(Total PCs, Total Servers 등)를 한눈에 볼 수 있는 요약 영역(Summary Cards/Charts 영역) 예약 및 구현.
+
+#### [MODIFY] src/main.ts
+
+---
+
+### 3. 멀티-시트(Multi-sheet) 엑셀 파싱 (`excelHandler.ts`)
+- `SheetJS` 기능을 확장하여 다운로드/데이터 추출 시 다중 시트 생성.
+- **H/W 템플릿 시트명**: `[개인PC, 서버, 스토리지, 전산비품]`
+- **S/W 템플릿 시트명**: `[구독SW, 영구SW]`
+
+#### [MODIFY] src/excelHandler.ts
+
+## Open Questions
+
+> [!WARNING]
+> * 왼쪽 사이드바로 메뉴를 구성하는 것이 좋을까요, 상단 가로바(Top Nav) 2단으로 구성하는 것이 좋을까요? Reference 이미지가 따로 없다면 범용적으로 관리하기 편한 **왼쪽 사이드바 구조(Sidebar Menu)** 를 제안합니다. (진행 승인 시 사이드바 형태로 구현합니다.)
+
+## Verification Plan
+
+### Automated Tests
+- 좌측 `H/W`, `S/W` 클릭 시 서브 메뉴가 정상 토글되는지 검증(`main.ts` DOM class toggle 확인).
+- 서브 메뉴 `서버` 클릭 시 빈 테이블(또는 서버 자산 테이블)이 그려지는지 확인.
+- 달라진 구조로 `엑셀 템플릿 양식`을 다운로드했을 때 파일에 다수의 시트(Sheet)가 정상 분류되어 있는지 확인.
+
+### Manual Verification
+- 브라우저 에이전트를 통해 바뀐 화면의 스크린샷(LNB 사이드바, Dashboard 화면 등)을 찍어 사용자에게 보고.
diff --git a/implementation_plan3 b/implementation_plan3
new file mode 100644
index 0000000..c6c38e2
--- /dev/null
+++ b/implementation_plan3
@@ -0,0 +1,47 @@
+# 임시 DB 생성 및 S/W 사용자 관리 개편
+
+임시 DB 엑셀 파일 생성과 S/W 목록의 '할당자' 속성 UI 개편에 대한 기술 구현 계획입니다.
+
+## User Review Required
+> [!IMPORTANT]
+> **사용자 관리 데이터 저장 방식에 대한 피드백이 필요합니다.**
+> 엑셀을 임시 DB로 사용하고 있기 때문에, "사용자 관리" 팝업에서 추가/삭제된 사용자 목록을 엑셀에 저장할 때 **쉼표(,)로 구분된 하나의 문자열**(예: `홍길동, 김철수, 이영희`)로 기존 `할당자` 컬럼에 업데이트 하는 방식을 제안합니다. 이 방식이 괜찮으신가요?
+
+## Proposed Changes
+
+### 1. 임시 DB 연동
+임시로 사용할 초기 엑셀 파일(`temp_db.xlsx`)을 프로젝트 루트에 스크립트를 통해 생성합니다.
+- 개인PC, 서버, 구독SW, 영구SW 시트에 각각 구성을 확인할 수 있는 dummy 데이터 1~2개씩을 포함하여 생성합니다.
+- 향후 화면에서 '엑셀 업로드'를 통해 이 파일을 업로드하여 데이터를 화면에 뿌려볼 수 있습니다. (원하시면 페이지 로드 시 이 파일을 임포트하도록 로직을 변경할 수도 있으나, 브라우저 단에서 로컬 파일을 자동 리딩하는 것은 제한이 있으므로 기본적으로는 파일을 제공만 합니다.)
+
+---
+
+### 2. 컴포넌트: HTML 구조 변경
+#### [MODIFY] [index.html](file:///c:/Project/HM%20ITAM/index.html)
+- `sw-asset-modal`의 폼 내용 중 "할당자" 입력 폼(<label> 및 <input>) 제거
+- 관리 팝업을 위한 `sw-user-modal` 모달 오버레이 마크업 추가
+  기존 유저 목록을 보여주고, 새 사용자를 추가하거나 기존 사용자를 삭제할 수 있는 UI (리스트, 추가 인풋, 추가 버튼 기반) 작성
+
+---
+
+### 3. 컴포넌트: 로직 및 스타일
+#### [MODIFY] [src/main.ts](file:///c:/Project/HM%20ITAM/src/main.ts)
+- S/W 렌더링 영역(`renderTable`)에서 데스크탑 뷰의 `<th>할당자</th>` 및 해당하는 셀(`<td>`) 제거
+- S/W `관리` 탭(`<td>`)에 수정 버튼(`btn-edit`) 옆에 사용자 관리 아이콘 (Lucide의 `Users` 또는 `UserCog` 아이콘 활용) 추가
+- 사용자 관리 아이콘 클릭 시 `sw-user-modal` 팝업 띄우는 이벤트 리스너 추가
+- `sw-user-modal` 팝업 내에서 사용자를 추가/삭제하고 '저장' 시, 해당 S/W 자산의 `할당자` 데이터를 갱신하도록 처리 (쉼표 구분 형태)
+
+#### [MODIFY] [src/excelHandler.ts](file:///c:/Project/HM%20ITAM/src/excelHandler.ts)
+- (선택 사항) `SW_HEADERS`나 엑셀 파싱 로직은 그대로 두어 하위 호환성 유지. 사용자가 데이터를 쉼표 형태로 주고 받을 것이므로 별도의 인터페이스 변경은 없음.
+
+## Open Questions
+- 사용자 관리 팝업에서 저장할 때, 이름 말고 '부서'나 '직급' 같은 추가적인 정보도 관리가 필요하신가요? (기본적으로는 엑셀에 단일 텍스트로 보존되므로 '이름'만 관리하는 것으로 설계했습니다.)
+- 개발 환경(Vite)에서 초기 로딩 시 `temp_db.xlsx`를 자동으로 불러오도록 Vite의 플러그인 또는 fetch 로직을 추가하는 것을 원하시나요? 아니면 엑셀 파일만 만들어 드리고 사용자가 '엑셀 업로드' 버튼으로 직접 연동해 쓰는 방식이 좋으신가요?
+
+## Verification Plan
+### Manual Verification
+1. `npm run dev` 후 브라우저 접속
+2. 프로젝트 폴더에 `temp_db.xlsx` 파일이 생성되었는지 확인
+3. 소프트웨어 > 영구/구독 탭 진입 시 "할당자" 테이블 헤더가 사라진 것 확인
+4. 관리 탭의 "사용자 관리" 아이콘 클릭 시, 해당 소프트웨어의 사용자를 등록하고 삭제할 수 있는 팝업 등장하는지 확인
+5. 사용자 아이콘을 클릭해 홍길동, 김철수 등록 후, 전체 엑셀 저장 혹은 다운로드 시 엑셀 파일 내의 '할당자' 열에 `홍길동,김철수` 로 잘 들어가는지 확인
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5bbbd7f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <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>
+    <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/style.css" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
+  </head>
+  <body>
+    <div class="app-layout">
+      <!-- Sidebar Navigation -->
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <h1>HM <span>ITAM</span></h1>
+        </div>
+        
+        <div class="nav-section">
+          <h3><i data-lucide="cpu"></i> 하드웨어</h3>
+          <ul id="nav-hw" class="nav-list">
+            <li class="active" data-category="hw" data-tab="대시보드"><i data-lucide="layout-dashboard"></i> 대시보드</li>
+            <li data-category="hw" data-tab="개인PC"><i data-lucide="monitor"></i> 개인PC</li>
+            <li data-category="hw" data-tab="서버"><i data-lucide="server"></i> 서버</li>
+            <li data-category="hw" data-tab="스토리지"><i data-lucide="database"></i> 스토리지</li>
+            <li data-category="hw" data-tab="전산비품"><i data-lucide="laptop"></i> 전산비품</li>
+          </ul>
+        </div>
+        
+        <div class="nav-section">
+          <h3><i data-lucide="layers"></i> 소프트웨어</h3>
+          <ul id="nav-sw" class="nav-list">
+            <li data-category="sw" data-tab="대시보드"><i data-lucide="layout-dashboard"></i> 대시보드</li>
+            <li data-category="sw" data-tab="구독SW"><i data-lucide="calendar-clock"></i> 구독 소프트웨어</li>
+            <li data-category="sw" data-tab="영구SW"><i data-lucide="key"></i> 영구 소프트웨어</li>
+          </ul>
+        </div>
+      </aside>
+
+      <!-- Main Content Area -->
+      <div class="main-wrapper">
+        <header class="top-header">
+          <div class="header-title">
+            <h2 id="current-tab-title">하드웨어 / 대시보드</h2>
+          </div>
+          <div class="header-actions">
+            <!-- 엑셀 컨트롤러 묶음 -->
+            <button id="btn-download-template" class="btn btn-outline" title="초기 데이터 입력을 위한 전체 엑셀 템플릿 다운로드">
+              <i data-lucide="download"></i> 통합 양식 다운로드
+            </button>
+            <label for="excel-upload" class="btn btn-outline" title="작성된 엑셀 파일 일괄 업로드">
+              <i data-lucide="upload"></i> 엑셀 업로드
+            </label>
+            <input type="file" id="excel-upload" accept=".xlsx, .xls" style="display: none;" />
+            <button id="btn-export-excel" class="btn btn-primary" title="마스터 데이터 전체를 엑셀로 저장">
+              <i data-lucide="file-spreadsheet"></i> 일괄 엑셀 저장
+            </button>
+            <button id="btn-add-asset" class="btn btn-primary hidden">
+              <i data-lucide="plus"></i> 자산 추가
+            </button>
+          </div>
+        </header>
+
+        <main class="content-area" id="main-content">
+          <!-- 대시보드 뷰, 또는 데이터 테이블 뷰가 JavaScript로 주입됩니다 -->
+        </main>
+      </div>
+    </div>
+
+    <!-- HW Asset Modal -->
+    <div id="hw-asset-modal" class="modal-overlay hidden">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 id="hw-modal-title">자산 상세 정보</h2>
+          <button id="btn-close-hw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <form id="hw-asset-form" class="grid-form">
+            <input type="hidden" id="hw-asset-id" />
+            <input type="hidden" id="hw-asset-type" /> <!-- 개인PC, 서버 등 저장용 -->
+
+            <div class="form-group">
+              <label for="hw-법인">법인</label>
+              <input type="text" id="hw-법인" required />
+            </div>
+
+            <div class="form-group" id="hw-비품유형-group" style="display:none;">
+              <label for="hw-비품유형">비품유형</label>
+              <select id="hw-비품유형" class="form-control" style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px;">
+                <option value="노트북">노트북</option>
+                <option value="태블릿">태블릿</option>
+                <option value="휴대폰">휴대폰</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-자산코드">자산코드</label>
+              <input type="text" id="hw-자산코드" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-명칭">명칭</label>
+              <input type="text" id="hw-명칭" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-위치">위치</label>
+              <input type="text" id="hw-위치" />
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-관리자">관리자</label>
+              <input type="text" id="hw-관리자" />
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-IP주소">IP주소</label>
+              <input type="text" id="hw-IP주소" />
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-MACaddress">MAC address</label>
+              <input type="text" id="hw-MACaddress" />
+            </div>
+            
+            <div class="form-group">
+              <label for="hw-OS">OS</label>
+              <input type="text" id="hw-OS" />
+            </div>
+
+            <div class="form-group full-width">
+              <label for="hw-HW사양">H/W 사양</label>
+              <textarea id="hw-HW사양" rows="2"></textarea>
+            </div>
+
+            <div class="form-group">
+              <label for="hw-구매일">구매일</label>
+              <input type="text" id="hw-구매일" placeholder="ex) 2024-01-01" />
+            </div>
+
+            <div class="form-group">
+              <label for="hw-금액">금액</label>
+              <input type="text" id="hw-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+            </div>
+
+            <div class="form-group">
+              <label for="hw-납품업체">납품업체</label>
+              <input type="text" id="hw-납품업체" />
+            </div>
+
+            <div class="form-group full-width">
+              <label style="font-size:0.875rem;">품의서 (파일)</label>
+              <div style="display:flex; align-items:center; gap:0.5rem;">
+                <input type="file" id="hw-품의서" style="font-size:0.875rem;" />
+                <span id="hw-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button id="btn-delete-hw-asset" class="btn btn-outline btn-danger">삭제</button>
+          <div class="footer-actions">
+            <button id="btn-cancel-hw-modal" class="btn btn-outline">취소</button>
+            <button id="btn-save-hw-asset" class="btn btn-primary">저장</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- PC Asset Modal -->
+    <div id="pc-asset-modal" class="modal-overlay hidden">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 id="pc-modal-title">개인PC 상세 정보</h2>
+          <button id="btn-close-pc-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <form id="pc-asset-form" class="grid-form">
+            <input type="hidden" id="pc-asset-id" />
+            <input type="hidden" id="pc-asset-type" value="개인PC" />
+
+            <div class="form-group">
+              <label for="pc-법인">법인</label>
+              <select id="pc-법인" required style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;">
+                <option value="한맥">한맥 (HM)</option>
+                <option value="삼안">삼안 (SM)</option>
+                <option value="바론">바론 (BR)</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="pc-자산코드">자산코드</label>
+              <input type="text" id="pc-자산코드" placeholder="ex) HM-PC-2018-001" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="pc-사용자">사용자</label>
+              <input type="text" id="pc-사용자" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="pc-위치">위치</label>
+              <input type="text" id="pc-위치" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-CPU">CPU</label>
+              <input type="text" id="pc-CPU" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-GPU">GPU</label>
+              <input type="text" id="pc-GPU" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-RAM">RAM</label>
+              <input type="text" id="pc-RAM" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-SSD1">SSD1</label>
+              <input type="text" id="pc-SSD1" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-SSD2">SSD2</label>
+              <input type="text" id="pc-SSD2" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-HDD1">HDD1</label>
+              <input type="text" id="pc-HDD1" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-HDD2">HDD2</label>
+              <input type="text" id="pc-HDD2" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-구매일">구매일</label>
+              <input type="text" id="pc-구매일" placeholder="ex) 2024-01-01" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-금액">금액</label>
+              <input type="text" id="pc-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+            </div>
+
+            <div class="form-group">
+              <label for="pc-납품업체">납품업체</label>
+              <input type="text" id="pc-납품업체" />
+            </div>
+
+            <div class="form-group full-width">
+              <label style="font-size:0.875rem;">품의서 (파일)</label>
+              <div style="display:flex; align-items:center; gap:0.5rem;">
+                <input type="file" id="pc-품의서" style="font-size:0.875rem;" />
+                <span id="pc-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button id="btn-delete-pc-asset" class="btn btn-outline btn-danger">삭제</button>
+          <div class="footer-actions">
+            <button id="btn-cancel-pc-modal" class="btn btn-outline">취소</button>
+            <button id="btn-save-pc-asset" class="btn btn-primary">저장</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Storage Asset Modal -->
+    <div id="storage-asset-modal" class="modal-overlay hidden">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 id="storage-modal-title">스토리지 상세 정보</h2>
+          <button id="btn-close-storage-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <form id="storage-asset-form" class="grid-form">
+            <input type="hidden" id="storage-asset-id" />
+            <input type="hidden" id="storage-asset-type" value="스토리지" />
+
+            <div class="form-group">
+              <label for="storage-법인">법인</label>
+              <select id="storage-법인" required style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;">
+                <option value="한맥">한맥 (HM)</option>
+                <option value="삼안">삼안 (SM)</option>
+                <option value="바론">바론 (BR)</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="storage-유형">유형</label>
+              <select id="storage-유형" required style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;">
+                <option value="NAS">NAS</option>
+                <option value="DAS">DAS</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="storage-자산코드">자산코드</label>
+              <input type="text" id="storage-자산코드" placeholder="ex) HM-NAS-2024-001" required />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-명칭">명칭</label>
+              <input type="text" id="storage-명칭" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="storage-위치">위치</label>
+              <input type="text" id="storage-위치" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-모델명">모델명</label>
+              <input type="text" id="storage-모델명" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-용량">용량</label>
+              <input type="text" id="storage-용량" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-담당자_정">담당자(정)</label>
+              <input type="text" id="storage-담당자_정" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-담당자_부">담당자(부)</label>
+              <input type="text" id="storage-담당자_부" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-IP주소">IP주소</label>
+              <input type="text" id="storage-IP주소" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-MAC주소">MAC 주소</label>
+              <input type="text" id="storage-MAC주소" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-구매일">구매일</label>
+              <input type="text" id="storage-구매일" placeholder="ex) 2024-01-01" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-금액">금액</label>
+              <input type="text" id="storage-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+            </div>
+
+            <div class="form-group">
+              <label for="storage-납품업체">납품업체</label>
+              <input type="text" id="storage-납품업체" />
+            </div>
+
+            <div class="form-group full-width">
+              <label style="font-size:0.875rem;">품의서 (파일)</label>
+              <div style="display:flex; align-items:center; gap:0.5rem;">
+                <input type="file" id="storage-품의서" style="font-size:0.875rem;" />
+                <span id="storage-품의서명" style="font-size:0.75rem; color:var(--text-light)"></span>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button id="btn-delete-storage-asset" class="btn btn-outline btn-danger">삭제</button>
+          <div class="footer-actions">
+            <button id="btn-cancel-storage-modal" class="btn btn-outline">취소</button>
+            <button id="btn-save-storage-asset" class="btn btn-primary">저장</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SW Asset Modal -->
+    <div id="sw-asset-modal" class="modal-overlay hidden">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2 id="sw-modal-title">S/W 상세 정보</h2>
+          <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <form id="sw-asset-form" class="grid-form">
+            <input type="hidden" id="sw-asset-id" />
+            <input type="hidden" id="sw-asset-type" />
+
+            <div class="form-group">
+              <label for="sw-법인">법인</label>
+              <select id="sw-법인" required style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;">
+                <option value="한맥">한맥 (HM)</option>
+                <option value="삼안">삼안 (SM)</option>
+                <option value="바론">바론 (BR)</option>
+              </select>
+            </div>
+            
+            <div class="form-group">
+              <label for="sw-제품명">제품명</label>
+              <input type="text" id="sw-제품명" required />
+            </div>
+
+            <div class="form-group">
+              <label for="sw-구매일">구매일</label>
+              <input type="text" id="sw-구매일" placeholder="ex) 2024-01-01" />
+            </div>
+
+            <div class="form-group" id="sw-구독일-group">
+              <label for="sw-구독일">구독일(시작~끝)</label>
+              <input type="text" id="sw-구독일" placeholder="ex) 2024-01-01 ~ 2024-12-31" />
+            </div>
+
+            <div class="form-group" id="sw-유지보수-group" style="display:none;">
+              <label for="sw-유지보수여부">유지보수 여부</label>
+              <label style="display:flex; align-items:center; gap:0.5rem; height: 38px;">
+                <input type="checkbox" id="sw-유지보수여부" /> 대상 여부
+              </label>
+            </div>
+
+            <div class="form-group">
+              <label for="sw-금액">금액</label>
+              <input type="text" id="sw-금액" placeholder="ex) 1,000,000" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
+            </div>
+
+            <div class="form-group">
+              <label for="sw-수량">수량 (보유량)</label>
+              <input type="number" id="sw-수량" min="1" value="1" style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: 0.875rem;" />
+            </div>
+
+            <div class="form-group">
+              <label for="sw-계정명">계정명</label>
+              <input type="text" id="sw-계정명" />
+            </div>
+
+            <div class="form-group">
+              <label for="sw-납품업체">납품업체</label>
+              <input type="text" id="sw-납품업체" />
+            </div>
+
+            <div class="form-group">
+              <label for="sw-비고">비고</label>
+              <input type="text" id="sw-비고" />
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button id="btn-delete-sw-asset" class="btn btn-outline btn-danger">삭제</button>
+          <div class="footer-actions">
+            <button id="btn-cancel-sw-modal" class="btn btn-outline">취소</button>
+            <button id="btn-save-sw-asset" class="btn btn-primary">저장</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SW User Management Modal -->
+    <div id="sw-user-modal" class="modal-overlay hidden">
+      <div class="modal-content" style="max-width: 600px;">
+        <div class="modal-header">
+          <h2 id="sw-user-modal-title">S/W 할당 사용자 목록</h2>
+          <button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <input type="hidden" id="sw-user-asset-id" />
+          
+          <div style="text-align: right; margin-bottom: 0.5rem;">
+            <button type="button" id="btn-open-add-user" class="btn btn-primary" style="padding: 0.25rem 1rem;"><i data-lucide="plus"></i> 새 사용자 추가</button>
+          </div>
+          
+          <div class="table-container" style="max-height: 250px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 4px; margin-top:0;">
+            <table style="width:100%; border-collapse: collapse; font-size:0.875rem;">
+              <thead style="position: sticky; top: 0; background: var(--bg-light); z-index: 10;">
+                <tr style="border-bottom: 1px solid var(--border);">
+                  <th style="padding:0.5rem; text-align:left;">법인</th>
+                  <th style="padding:0.5rem; text-align:left;">부서/팀</th>
+                  <th style="padding:0.5rem; text-align:left;">직위</th>
+                  <th style="padding:0.5rem; text-align:left;">이름</th>
+                  <th style="padding:0.5rem; text-align:center;">사용기간</th>
+                  <th style="padding:0.5rem; text-align:center;">첨부파일</th>
+                  <th style="padding:0.5rem; text-align:center;">관리</th>
+                </tr>
+              </thead>
+              <tbody id="user-list-body">
+                <!-- Users will be injected here -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div class="modal-footer" style="justify-content: flex-end;">
+          <div class="footer-actions">
+            <button id="btn-cancel-sw-user-modal" class="btn btn-outline">닫기</button>
+            <button id="btn-save-sw-user-mapping" class="btn btn-primary">변경사항 저장</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- SW User Form Modal (Add / Edit) -->
+    <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
+      <div class="modal-content" style="max-width: 500px;">
+        <div class="modal-header">
+          <h2 id="sw-user-edit-modal-title">사용자 추가</h2>
+          <button id="btn-close-sw-user-edit-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body">
+          <input type="hidden" id="edit-user-idx" value="-1" />
+          <div style="display:grid; grid-template-columns: 1fr 1fr; gap:0.5rem;">
+            <div class="form-group">
+              <label for="new-user-법인" style="font-size:0.875rem;">법인</label>
+              <select id="new-user-법인" class="form-control" style="width:100%; padding:0.5rem; border:1px solid var(--border); border-radius:4px;">
+                <option value="한맥">한맥</option><option value="삼안">삼안</option><option value="바론">바론</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label for="new-user-부서" style="font-size:0.875rem;">부서</label>
+              <input type="text" id="new-user-부서" placeholder="ex: 기술부" style="width:100%; padding:0.5rem; border:1px solid var(--border); border-radius:4px;" />
+            </div>
+            <div class="form-group">
+              <label for="new-user-팀" style="font-size:0.875rem;">팀</label>
+              <input type="text" id="new-user-팀" placeholder="ex: 개발1팀" style="width:100%; padding:0.5rem; border:1px solid var(--border); border-radius:4px;" />
+            </div>
+            <div class="form-group">
+              <label for="new-user-직위" style="font-size:0.875rem;">직위</label>
+              <input type="text" id="new-user-직위" placeholder="ex: 대리" style="width:100%; padding:0.5rem; border:1px solid var(--border); border-radius:4px;" />
+            </div>
+            <div class="form-group" style="grid-column: span 2;">
+              <label for="new-user-이름" style="font-size:0.875rem;">이름 <span style="color:var(--danger)">*</span></label>
+              <input type="text" id="new-user-이름" placeholder="ex: 홍길동" style="width:100%; padding:0.5rem; border:1px solid var(--border); border-radius:4px;" required />
+            </div>
+            <div class="form-group" style="grid-column: span 2;">
+              <label for="new-user-사용기간" style="font-size:0.875rem;">사용기간</label>
+              <input type="text" id="new-user-사용기간" placeholder="ex: 2024.01~12" style="width:100%; padding:0.5rem; border:1px solid var(--border); border-radius:4px;" />
+            </div>
+            <div class="form-group" style="grid-column: span 2;">
+              <label style="font-size:0.875rem;">신청서 (파일)</label>
+              <div style="display:flex; align-items:center; gap:0.5rem;">
+                <input type="file" id="new-user-신청서" style="font-size:0.875rem;" />
+                <span id="new-user-신청서명" style="font-size:0.75rem; color:var(--text-light)"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer" style="justify-content: flex-end;">
+          <div class="footer-actions">
+            <button id="btn-cancel-sw-user-edit" class="btn btn-outline">취소</button>
+            <button id="btn-save-edit-user" class="btn btn-primary">확인</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Dashboard Detail Modal -->
+    <div id="dashboard-detail-modal" class="modal-overlay hidden" style="z-index: 1200;">
+      <div class="modal-content" style="max-width: 1000px; max-height: 80vh; display: flex; flex-direction: column;">
+        <div class="modal-header">
+          <h2 id="dashboard-detail-modal-title">상세 자산 목록</h2>
+          <button id="btn-close-dashboard-detail" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+        </div>
+        <div class="modal-body" style="overflow-y: auto; flex: 1; padding: 0;">
+          <div class="table-container" style="box-shadow: none; border-radius: 0;">
+            <table style="width: 100%;">
+              <thead>
+                <tr>
+                  <th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th>
+                  <th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th>
+                </tr>
+              </thead>
+              <tbody id="dashboard-detail-tbody">
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..1cdfe37
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1154 @@
+{
+  "name": "hm-itam",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "hm-itam",
+      "version": "0.0.0",
+      "dependencies": {
+        "lucide": "^0.364.0",
+        "xlsx": "^0.18.5"
+      },
+      "devDependencies": {
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.1.tgz",
+      "integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.1.tgz",
+      "integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.1.tgz",
+      "integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.1.tgz",
+      "integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
+      "integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.1.tgz",
+      "integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.1.tgz",
+      "integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.1.tgz",
+      "integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.1.tgz",
+      "integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.1.tgz",
+      "integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.1.tgz",
+      "integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.1.tgz",
+      "integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.1.tgz",
+      "integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.1.tgz",
+      "integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.1.tgz",
+      "integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.1.tgz",
+      "integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.1.tgz",
+      "integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.1.tgz",
+      "integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.1.tgz",
+      "integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
+      "integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.1.tgz",
+      "integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.1.tgz",
+      "integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/lucide": {
+      "version": "0.364.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.364.0.tgz",
+      "integrity": "sha512-fUicNBP/uinzxvHUch75z2swiNwRDanakwAB3lgKx2vv6nFeJNjteDkwmmbUrlWsVZqZvO9CDQZQepoB3YDbnw==",
+      "license": "ISC"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.9",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.9.tgz",
+      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.60.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.1",
+        "@rollup/rollup-android-arm64": "4.60.1",
+        "@rollup/rollup-darwin-arm64": "4.60.1",
+        "@rollup/rollup-darwin-x64": "4.60.1",
+        "@rollup/rollup-freebsd-arm64": "4.60.1",
+        "@rollup/rollup-freebsd-x64": "4.60.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.1",
+        "@rollup/rollup-linux-arm64-musl": "4.60.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.1",
+        "@rollup/rollup-linux-loong64-musl": "4.60.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-gnu": "4.60.1",
+        "@rollup/rollup-linux-x64-musl": "4.60.1",
+        "@rollup/rollup-openbsd-x64": "4.60.1",
+        "@rollup/rollup-openharmony-arm64": "4.60.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.1",
+        "@rollup/rollup-win32-x64-gnu": "4.60.1",
+        "@rollup/rollup-win32-x64-msvc": "4.60.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..baeec0b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "hm-itam",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "dependencies": {
+    "lucide": "^0.364.0",
+    "xlsx": "^0.18.5"
+  }
+}
diff --git a/src/dummyDataGenerator.ts b/src/dummyDataGenerator.ts
new file mode 100644
index 0000000..3a292a8
--- /dev/null
+++ b/src/dummyDataGenerator.ts
@@ -0,0 +1,212 @@
+import { MasterAssetData, HardwareAsset, SoftwareAsset, SWUser } from './excelHandler';
+
+const corps = ['한맥', '삼안', '바론'];
+const users = ['홍길동', '김철수', '이영희', '박지훈', '김팀장', '신유진', '윤대웅', '마리아'];
+const depts = ['설계팀', '기술팀', '경영지원팀', '영업팀'];
+
+function rand(arr: any[]) {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+function randDate(startYear: number, endYear: number) {
+  const y = Math.floor(Math.random() * (endYear - startYear + 1)) + startYear;
+  const m = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
+  const d = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
+  return `${y}-${m}-${d}`;
+}
+
+function randUser() { // 25% 확률로 유휴자산 할당
+  return Math.random() < 0.25 ? '' : rand(users);
+}
+
+export function generateDummyData(): MasterAssetData {
+  const hw: HardwareAsset[] = [];
+  const sw: SoftwareAsset[] = [];
+  const swUsers: SWUser[] = [];
+  
+  // 1. 개인PC 50개
+  for (let i = 1; i <= 50; i++) {
+    const purchaseYear = Math.floor(Math.random() * 8) + 2017; // 2017~2024
+    hw.push({
+      id: Math.random().toString(36).substring(2, 9),
+      type: '개인PC',
+      법인: rand(corps),
+      자산코드: `HM-PC-${purchaseYear}-${String(i).padStart(3, '0')}`,
+      명칭: '',
+      위치: `${rand(['본사', '지사'])} ${Math.floor(Math.random()*5)+1}층`,
+      사용자: randUser(),
+      CPU: rand(['i5-10400', 'i7-12700', 'Ryzen 5', 'Ryzen 7']),
+      GPU: rand(['-', 'GTX 1660', 'RTX 3060', 'RTX 4070']),
+      RAM: rand(['16GB', '32GB']),
+      SSD1: rand(['256GB', '512GB', '1TB']),
+      SSD2: '',
+      HDD1: rand(['-', '1TB', '2TB']),
+      HDD2: '',
+      구매일: randDate(purchaseYear, purchaseYear),
+      금액: String(Math.floor(Math.random()*100 + 50) * 10000).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','),
+      납품업체: rand(['다나와', '컴퓨존', '오피스디포']),
+      품의서명: '',
+      관리자: '', IP주소: '', MACaddress: '', OS: '', HW사양: ''
+    });
+  }
+
+  // 2. 서버 20개
+  for (let i = 1; i <= 20; i++) {
+    const purchaseYear = Math.floor(Math.random() * 8) + 2017; // 2017~2024
+    hw.push({
+      id: Math.random().toString(36).substring(2, 9),
+      type: '서버',
+      법인: rand(corps),
+      자산코드: `HM-SV-${purchaseYear}-${String(i).padStart(3, '0')}`,
+      명칭: `웹/DB 서버 #${i}`,
+      위치: 'IDC / 전산실',
+      관리자: randUser(),
+      IP주소: `192.168.10.${i}`,
+      MACaddress: '00:11:22:33:44:' + String(i).padStart(2, '0'),
+      OS: rand(['Windows Server 2019', 'Ubuntu 22.04 LTS', 'CentOS 7']),
+      HW사양: 'Xeon 16Core, 64GB RAM',
+      구매일: randDate(purchaseYear, purchaseYear),
+      금액: '5,000,000',
+      납품업체: '서버뱅크',
+      품의서명: ''
+    });
+  }
+
+  // 3. 스토리지 20개
+  for (let i = 1; i <= 20; i++) {
+    const purchaseYear = Math.floor(Math.random() * 8) + 2017; // 2017~2024
+    hw.push({
+      id: Math.random().toString(36).substring(2, 9),
+      type: '스토리지',
+      법인: rand(corps),
+      storage유형: rand(['NAS', 'DAS']),
+      자산코드: `HM-ST-${purchaseYear}-${String(i).padStart(3, '0')}`,
+      명칭: `백업 스토리지 #${i}`,
+      위치: '전산실',
+      모델명: rand(['Synology DS920+', 'QNAP TS-453D']),
+      용량: rand(['16TB', '32TB', '64TB']),
+      담당자_정: randUser(),
+      담당자_부: rand(users),
+      IP주소: `192.168.20.${i}`,
+      MACaddress: '',
+      구매일: randDate(purchaseYear, purchaseYear),
+      금액: '1,500,000',
+      납품업체: '스토리지넷',
+      품의서명: '',
+      관리자: '', OS: '', HW사양: ''
+    });
+  }
+
+  // 4. 전산비품 (노트북, 태블릿, 휴대폰 각각 5개씩)
+  const equips = [
+    { type: '노트북', code: 'NB', name: 'LG 그램 16인치', price: '1,800,000' },
+    { type: '태블릿', code: 'TB', name: '아이패드 프로 12.9', price: '1,500,000' },
+    { type: '휴대폰', code: 'PH', name: '갤럭시 S24', price: '1,200,000' }
+  ];
+  equips.forEach((eq) => {
+    for (let i = 1; i <= 5; i++) {
+      const purchaseYear = Math.floor(Math.random() * 6) + 2019; // 2019~2024
+      hw.push({
+        id: Math.random().toString(36).substring(2, 9),
+        type: '전산비품',
+        법인: rand(corps),
+        비품유형: eq.type,
+        자산코드: `HM-${eq.code}-${purchaseYear}-${String(i).padStart(3, '0')}`,
+        명칭: eq.name,
+        위치: rand(['본사', '지사']),
+        관리자: randUser(),
+        구매일: randDate(purchaseYear, purchaseYear),
+        금액: eq.price,
+        납품업체: '브랜드 총판',
+        품의서명: '',
+        IP주소: '', MACaddress: '', OS: '', HW사양: ''
+      });
+    }
+  });
+
+  // 5. 구독형 S/W 40개
+  for (let i = 1; i <= 40; i++) {
+    const swId = Math.random().toString(36).substring(2, 9);
+    
+    let isExpiring = Math.random() < 0.25;
+    let endDt = new Date();
+    if (isExpiring) {
+      endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
+    } else {
+      endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
+    }
+    const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
+    
+    sw.push({
+      id: swId,
+      type: '구독SW',
+      법인: rand(corps),
+      제품명: rand(['Adobe CC All Apps', 'Microsoft 365', 'Slack Pro', 'Notion Team']),
+      구매일: '2024-01-01',
+      구독일: `2024.01.01 ~ ${endStr}`,
+      금액: '600,000',
+      수량: Math.floor(Math.random() * 5) + 3, // 3~7
+      계정명: `user${i}@hm.com`,
+      납품업체: '총판',
+      비고: '연간구독'
+    });
+    const assignCount = Math.floor(Math.random() * 2) + 1;
+    for (let j=0; j<assignCount; j++) {
+      swUsers.push({
+        id: Math.random().toString(36).substring(2, 9),
+        swId: swId,
+        법인: rand(corps),
+        부서: rand(depts),
+        팀: rand(['1팀', '2팀', '기획팀']),
+        직위: rand(['사원', '대리', '과장']),
+        이름: rand(users),
+        사용기간: '2024.01~12',
+        신청서명: ''
+      });
+    }
+  }
+
+  // 6. 영구형 S/W 40개
+  for (let i = 1; i <= 40; i++) {
+    const swId = Math.random().toString(36).substring(2, 9);
+
+    let isExpiring = Math.random() < 0.25;
+    let endDt = new Date();
+    if (isExpiring) {
+      endDt.setDate(endDt.getDate() + Math.floor(Math.random() * 25) + 1); // 1~25일 뒤 만료
+    } else {
+      endDt.setMonth(endDt.getMonth() + Math.floor(Math.random() * 11) + 2); // 넉넉히 남음
+    }
+    const endStr = `${endDt.getFullYear()}.${String(endDt.getMonth()+1).padStart(2,'0')}.${String(endDt.getDate()).padStart(2,'0')}`;
+
+    sw.push({
+      id: swId,
+      type: '영구SW',
+      법인: rand(corps),
+      제품명: rand(['AutoCAD 2024', 'Windows 10 Pro', '한컴오피스 2022', 'Visual Studio 2022']),
+      구매일: '2020-05-15',
+      유지보수여부: true,
+      비고: `유지보수: ~ ${endStr}`,
+      금액: '1,500,000',
+      수량: Math.floor(Math.random() * 3) + 2, // 2~4
+      계정명: `sn-2020-${i}`,
+      납품업체: '오토데스크 / MS'
+    });
+    const assignCount = Math.floor(Math.random() * 2) + 1;
+    for (let j=0; j<assignCount; j++) {
+      swUsers.push({
+        id: Math.random().toString(36).substring(2, 9),
+        swId: swId,
+        법인: rand(corps),
+        부서: rand(depts),
+        팀: rand(['1팀', '2팀']),
+        직위: rand(['과장', '차장', '부장']),
+        이름: rand(users),
+        사용기간: '영구',
+        신청서명: ''
+      });
+    }
+  }
+
+  return { hw, sw, swUsers };
+}
diff --git a/src/excelHandler.ts b/src/excelHandler.ts
new file mode 100644
index 0000000..36479bc
--- /dev/null
+++ b/src/excelHandler.ts
@@ -0,0 +1,324 @@
+import * as XLSX from 'xlsx';
+
+export interface HardwareAsset {
+  id: string;
+  type: string; // '개인PC', '서버', '스토리지', '전산비품'
+  법인: string;
+  자산코드: string;
+  명칭: string;
+  위치: string;
+  관리자: string;
+  IP주소: string;
+  MACaddress: string;
+  HW사양: string;
+  OS: string;
+  사용자?: string;
+  CPU?: string;
+  GPU?: string;
+  RAM?: string;
+  SSD1?: string;
+  SSD2?: string;
+  HDD1?: string;
+  HDD2?: string;
+  storage유형?: string;
+  비품유형?: string;
+  모델명?: string;
+  용량?: string;
+  담당자_정?: string;
+  담당자_부?: string;
+  구매일?: string;
+  금액?: string;
+  납품업체?: string;
+  품의서명?: string;
+}
+
+export interface SoftwareAsset {
+  id: string;
+  type: string; // '구독SW', '영구SW'
+  법인: string;
+  제품명: string;
+  구매일: string;
+  구독일?: string;
+  유지보수여부?: boolean;
+  금액: string;
+  수량: number;
+  계정명: string;
+  납품업체: string;
+  비고: string;
+}
+
+export interface SWUser {
+  id: string;
+  swId: string;
+  법인: string;
+  부서: string;
+  팀: string;
+  직위: string;
+  이름: string;
+  사용기간: string;
+  신청서명: string;
+}
+
+export interface MasterAssetData {
+  hw: HardwareAsset[];
+  sw: SoftwareAsset[];
+  swUsers: SWUser[];
+}
+
+const HW_TABS = ['개인PC', '서버', '스토리지', '전산비품'];
+const SW_TABS = ['구독SW', '영구SW'];
+
+const HW_HEADERS = ['법인', '자산코드', '명칭', '위치', '관리자', 'IP주소', 'MACaddress', 'HW사양', 'OS', '구매일', '금액', '납품업체', '품의서명'];
+const PC_HEADERS = ['법인', '자산코드', '사용자', '위치', 'CPU', 'GPU', 'RAM', 'SSD1', 'SSD2', 'HDD1', 'HDD2', '구매일', '금액', '납품업체', '품의서명'];
+const STORAGE_HEADERS = ['법인', '유형', '자산코드', '명칭', '위치', '모델명', '용량', '담당자(정)', '담당자(부)', 'IP주소', 'MAC주소', '구매일', '금액', '납품업체', '품의서명'];
+const SUB_SW_HEADERS = ['ID', '법인', '제품명', '구매일', '구독일', '금액', '수량', '계정명', '납품업체', '비고'];
+const PERM_SW_HEADERS = ['ID', '법인', '제품명', '구매일', '유지보수여부', '금액', '수량', '계정명', '납품업체', '비고'];
+const SW_USER_HEADERS = ['id', 'swId', '법인', '부서', '팀', '직위', '이름', '사용기간', '신청서명'];
+
+/**
+ * 템플릿 엑셀 다중 시트로 다운로드
+ */
+export function downloadTemplate() {
+  const wb = XLSX.utils.book_new();
+
+  // HW 탭들 생성
+  HW_TABS.forEach(tab => {
+    if (tab === '개인PC') {
+      const ws = XLSX.utils.aoa_to_sheet([PC_HEADERS]);
+      ws['!cols'] = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+      XLSX.utils.book_append_sheet(wb, ws, tab);
+    } else if (tab === '스토리지') {
+      const ws = XLSX.utils.aoa_to_sheet([STORAGE_HEADERS]);
+      ws['!cols'] = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+      XLSX.utils.book_append_sheet(wb, ws, tab);
+    } else {
+      const ws = XLSX.utils.aoa_to_sheet([HW_HEADERS]);
+      ws['!cols'] = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+      XLSX.utils.book_append_sheet(wb, ws, tab);
+    }
+  });
+
+  // SW 탭들 생성
+  SW_TABS.forEach(tab => {
+    let hd = tab === '구독SW' ? SUB_SW_HEADERS : PERM_SW_HEADERS;
+    const ws = XLSX.utils.aoa_to_sheet([hd]);
+    ws['!cols'] = [{wch:15}, {wch:15}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    XLSX.utils.book_append_sheet(wb, ws, tab);
+  });
+
+  const swUserWs = XLSX.utils.aoa_to_sheet([SW_USER_HEADERS]);
+  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
+
+  XLSX.writeFile(wb, 'itam_assets_template.xlsx');
+}
+
+/**
+ * 마스터 데이터를 여러 시트로 쪼개서 내보내기
+ */
+export function exportToExcel(masterData: MasterAssetData) {
+  const wb = XLSX.utils.book_new();
+
+  // HW
+  HW_TABS.forEach(tab => {
+    const targetAssets = masterData.hw.filter(a => a.type === tab);
+    let wsData;
+    let colsConfig;
+
+    if (tab === '개인PC') {
+      wsData = [
+        PC_HEADERS,
+        ...targetAssets.map(a => [a.법인, a.자산코드, a.사용자, a.위치, a.CPU, a.GPU, a.RAM, a.SSD1, a.SSD2, a.HDD1, a.HDD2, a.구매일, a.금액, a.납품업체, a.품의서명])
+      ];
+      colsConfig = [{wch:15}, {wch:25}, {wch:15}, {wch:20}, {wch:20}, {wch:20}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+    } else if (tab === '스토리지') {
+      wsData = [
+        STORAGE_HEADERS,
+        ...targetAssets.map(a => [a.법인, a.storage유형, a.자산코드, a.명칭, a.위치, a.모델명, a.용량, a.담당자_정, a.담당자_부, a.IP주소, a.MACaddress, a.구매일, a.금액, a.납품업체, a.품의서명])
+      ];
+      colsConfig = [{wch:15}, {wch:15}, {wch:25}, {wch:25}, {wch:20}, {wch:25}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+    } else {
+      wsData = [
+        HW_HEADERS,
+        ...targetAssets.map(a => [a.법인, a.자산코드, a.명칭, a.위치, a.관리자, a.IP주소, a.MACaddress, a.HW사양, a.OS, a.구매일, a.금액, a.납품업체, a.품의서명])
+      ];
+      colsConfig = [{wch:15}, {wch:20}, {wch:25}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:40}, {wch:20}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+    }
+    
+    const ws = XLSX.utils.aoa_to_sheet(wsData);
+    ws['!cols'] = colsConfig;
+    XLSX.utils.book_append_sheet(wb, ws, tab);
+  });
+
+  // SW
+  SW_TABS.forEach(tab => {
+    const targetAssets = masterData.sw.filter(a => a.type === tab);
+    let wsData;
+    if (tab === '구독SW') {
+      wsData = [
+        SUB_SW_HEADERS,
+        ...targetAssets.map(a => [a.id, a.법인, a.제품명, a.구매일, a.구독일, a.금액, a.수량, a.계정명, a.납품업체, a.비고])
+      ];
+    } else {
+      wsData = [
+        PERM_SW_HEADERS,
+        ...targetAssets.map(a => [a.id, a.법인, a.제품명, a.구매일, a.유지보수여부 ? 'Y' : 'N', a.금액, a.수량, a.계정명, a.납품업체, a.비고])
+      ];
+    }
+    const ws = XLSX.utils.aoa_to_sheet(wsData);
+    ws['!cols'] = [{wch:15}, {wch:15}, {wch:30}, {wch:15}, {wch:20}, {wch:15}, {wch:10}, {wch:20}, {wch:20}, {wch:30}];
+    XLSX.utils.book_append_sheet(wb, ws, tab);
+  });
+
+  // SW_사용자
+  const swUserWsData = [
+    SW_USER_HEADERS,
+    ...masterData.swUsers.map(u => [u.id, u.swId, u.법인, u.부서, u.팀, u.직위, u.이름, u.사용기간, u.신청서명])
+  ];
+  const swUserWs = XLSX.utils.aoa_to_sheet(swUserWsData);
+  swUserWs['!cols'] = [{wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:15}, {wch:20}, {wch:25}];
+  XLSX.utils.book_append_sheet(wb, swUserWs, 'SW_사용자');
+  
+  const dateStr = new Date().toISOString().split('T')[0];
+  XLSX.writeFile(wb, `itam_assets_master_${dateStr}.xlsx`);
+}
+
+/**
+ * 업로드된 다중 시트 엑셀을 파싱하여 Master Data 구성
+ */
+export async function parseExcel(file: File): Promise<MasterAssetData> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      try {
+        const data = e.target?.result;
+        const workbook = XLSX.read(data, { type: 'binary' });
+
+        const hwAssets: HardwareAsset[] = [];
+        const swAssets: SoftwareAsset[] = [];
+        const swUsers: SWUser[] = [];
+
+        workbook.SheetNames.forEach(sheetName => {
+          const worksheet = workbook.Sheets[sheetName];
+          const json = XLSX.utils.sheet_to_json(worksheet) as any[];
+
+          if (HW_TABS.includes(sheetName)) {
+            json.forEach(row => {
+              if (sheetName === '개인PC') {
+                hwAssets.push({
+                  id: Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  법인: row['법인'] || '',
+                  자산코드: row['자산코드'] || '',
+                  명칭: '', // 개인PC는 명칭 미사용
+                  위치: row['위치'] || '',
+                  사용자: row['사용자'] || '',
+                  관리자: '',
+                  IP주소: '',
+                  MACaddress: '',
+                  HW사양: '',
+                  OS: '',
+                  CPU: row['CPU'] || '',
+                  GPU: row['GPU'] || '',
+                  RAM: row['RAM'] || '',
+                  SSD1: row['SSD1'] || '',
+                  SSD2: row['SSD2'] || '',
+                  HDD1: row['HDD1'] || '',
+                  HDD2: row['HDD2'] || '',
+                  구매일: row['구매일'] || '',
+                  금액: row['금액'] ? String(row['금액']) : '',
+                  납품업체: row['납품업체'] || '',
+                  품의서명: row['품의서명'] || '',
+                });
+              } else if (sheetName === '스토리지') {
+                hwAssets.push({
+                  id: Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  법인: row['법인'] || '',
+                  자산코드: row['자산코드'] || '',
+                  명칭: row['명칭'] || '',
+                  위치: row['위치'] || '',
+                  관리자: '',
+                  IP주소: row['IP주소'] || '',
+                  MACaddress: row['MAC주소'] || row['MACaddress'] || row['MAC address'] || '',
+                  HW사양: '',
+                  OS: '',
+                  storage유형: row['유형'] || '',
+                  모델명: row['모델명'] || '',
+                  용량: row['용량'] || '',
+                  담당자_정: row['담당자(정)'] || '',
+                  담당자_부: row['담당자(부)'] || '',
+                  구매일: row['구매일'] || '',
+                  금액: row['금액'] ? String(row['금액']) : '',
+                  납품업체: row['납품업체'] || '',
+                  품의서명: row['품의서명'] || '',
+                });
+              } else {
+                hwAssets.push({
+                  id: Math.random().toString(36).substring(2, 9),
+                  type: sheetName,
+                  법인: row['법인'] || '',
+                  자산코드: row['자산코드'] || '',
+                  명칭: row['명칭'] || '',
+                  위치: row['위치'] || '',
+                  관리자: row['관리자'] || '',
+                  IP주소: row['IP주소'] || '',
+                  MACaddress: row['MACaddress'] || row['MAC address'] || '',
+                  HW사양: row['HW사양'] || row['H/W 사양'] || '',
+                  OS: row['OS'] || '',
+                  구매일: row['구매일'] || '',
+                  금액: row['금액'] ? String(row['금액']) : '',
+                  납품업체: row['납품업체'] || '',
+                  품의서명: row['품의서명'] || '',
+                });
+              }
+            });
+          }
+
+          if (SW_TABS.includes(sheetName)) {
+            json.forEach(row => {
+              swAssets.push({
+                id: row['ID'] ? String(row['ID']) : Math.random().toString(36).substring(2, 9),
+                type: sheetName,
+                법인: row['법인'] || '',
+                제품명: row['제품명'] || '',
+                구매일: row['구매일'] || '',
+                구독일: row['구독일'] || '',
+                유지보수여부: row['유지보수여부'] === 'Y' || row['유지보수여부'] === true,
+                금액: row['금액'] ? String(row['금액']) : '',
+                수량: parseInt(row['수량'] || '1', 10),
+                계정명: row['계정명'] || '',
+                납품업체: row['납품업체'] || '',
+                비고: row['비고'] || '',
+              });
+            });
+          }
+
+          if (sheetName === 'SW_사용자') {
+            json.forEach(row => {
+              swUsers.push({
+                id: row['id'] ? String(row['id']) : Math.random().toString(36).substring(2, 9),
+                swId: row['swId'] ? String(row['swId']) : '',
+                법인: row['법인'] || '',
+                부서: row['부서'] || '',
+                팀: row['팀'] || '',
+                직위: row['직위'] || '',
+                이름: row['이름'] || '',
+                사용기간: row['사용기간'] || '',
+                신청서명: row['신청서명'] || '',
+              });
+            });
+          }
+        });
+
+        resolve({ hw: hwAssets, sw: swAssets, swUsers });
+      } catch (err) {
+        reject(err);
+      }
+    };
+
+    reader.onerror = (err) => reject(err);
+    reader.readAsBinaryString(file);
+  });
+}
diff --git a/src/main.ts b/src/main.ts
new file mode 100644
index 0000000..bd7d726
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,1236 @@
+import { createIcons, Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } from 'lucide';
+import { MasterAssetData, HardwareAsset, SoftwareAsset, downloadTemplate, exportToExcel, parseExcel } from './excelHandler';
+import { generateDummyData } from './dummyDataGenerator';
+
+declare var Chart: any;
+
+let activeCharts: any[] = [];
+
+// --- State Management ---
+let masterData: MasterAssetData = generateDummyData();
+let activeCategory: 'hw' | 'sw' = 'hw';
+let activeSubTab: string = '대시보드';
+
+// --- DOM Elements ---
+const mainContent = document.getElementById('main-content') as HTMLElement;
+const titleElement = document.getElementById('current-tab-title') as HTMLHeadingElement;
+const uploadInput = document.getElementById('excel-upload') as HTMLInputElement;
+
+const btnAddAsset = document.getElementById('btn-add-asset') as HTMLButtonElement;
+const btnDownloadTemp = document.getElementById('btn-download-template') as HTMLButtonElement;
+const btnExport = document.getElementById('btn-export-excel') as HTMLButtonElement;
+
+// Nav items
+const navItems = document.querySelectorAll('.nav-list li');
+
+// Modal Elements
+const hwModal = document.getElementById('hw-asset-modal') as HTMLDivElement;
+const swModal = document.getElementById('sw-asset-modal') as HTMLDivElement;
+const pcModal = document.getElementById('pc-asset-modal') as HTMLDivElement;
+const storageModal = document.getElementById('storage-asset-modal') as HTMLDivElement;
+const hwForm = document.getElementById('hw-asset-form') as HTMLFormElement;
+const swForm = document.getElementById('sw-asset-form') as HTMLFormElement;
+const pcForm = document.getElementById('pc-asset-form') as HTMLFormElement;
+const storageForm = document.getElementById('storage-asset-form') as HTMLFormElement;
+
+const dashboardDetailModal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
+const btnCloseDashboardDetail = document.getElementById('btn-close-dashboard-detail') as HTMLButtonElement;
+btnCloseDashboardDetail?.addEventListener('click', () => {
+  dashboardDetailModal.classList.add('hidden');
+});
+
+// Initialize Icons
+createIcons({
+  icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 }
+});
+
+// --- Navigation Logic ---
+navItems.forEach(item => {
+  item.addEventListener('click', (e) => {
+    // 탭 UI 업데이트
+    navItems.forEach(nav => nav.classList.remove('active'));
+    item.classList.add('active');
+
+    // 상태 업데이트
+    activeCategory = item.getAttribute('data-category') as 'hw' | 'sw';
+    activeSubTab = item.getAttribute('data-tab') || '대시보드';
+    
+    // 타이틀 업데이트
+    const catName = activeCategory === 'hw' ? '하드웨어' : '소프트웨어';
+    titleElement.textContent = `${catName} / ${activeSubTab}`;
+
+    // 추가 버튼 노출 여부
+    if (activeSubTab === '대시보드') {
+      btnAddAsset.classList.add('hidden');
+    } else {
+      btnAddAsset.classList.remove('hidden');
+    }
+
+    renderContent();
+  });
+});
+
+// --- Render Logic ---
+function renderContent() {
+  mainContent.innerHTML = ''; // Clear
+
+  if (activeSubTab === '대시보드') {
+    renderDashboard();
+  } else {
+    renderTable();
+  }
+}
+
+function isHwIdle(a: HardwareAsset) {
+  if (a.type === '개인PC') return !a.사용자 || a.사용자.trim() === '' || a.사용자.trim() === '-';
+  if (a.type === '스토리지') return !a.담당자_정 || a.담당자_정.trim() === '' || a.담당자_정.trim() === '-';
+  return !a.관리자 || a.관리자.trim() === '' || a.관리자.trim() === '-';
+}
+
+function getHwAgeYears(a: HardwareAsset) {
+  if (!a.구매일) return 0;
+  return (Date.now() - new Date(a.구매일).getTime()) / (1000 * 60 * 60 * 24 * 365.25);
+}
+
+function isSWExpiring(sw: SoftwareAsset) {
+  if (sw.type === '구독SW' && sw.구독일) {
+    const parts = sw.구독일.split('~');
+    if (parts.length > 1) {
+      const endStr = parts[1].trim();
+      const endMs = new Date(endStr.replace(/\\./g, '-')).getTime();
+      const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
+      return diffDays >= 0 && diffDays <= 30;
+    }
+  } else if (sw.type === '영구SW' && sw.비고 && sw.비고.includes('유지보수: ~')) {
+    const endStr = sw.비고.split('~')[1].trim();
+    const endMs = new Date(endStr.replace(/\\./g, '-')).getTime();
+    const diffDays = (endMs - Date.now()) / (1000 * 60 * 60 * 24);
+    return diffDays >= 0 && diffDays <= 30;
+  }
+  return false;
+}
+
+function openDashboardDetail(title: string, list: HardwareAsset[]) {
+  const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
+  const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
+  const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
+  const thead = tbody.closest('table')!.querySelector('thead')!;
+
+  titleEl.textContent = title;
+  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>자산코드</th><th>명칭/모델</th><th>위치</th><th>담당/사용자</th><th>구매일</th><th>금액</th></tr>`;
+  tbody.innerHTML = '';
+  if (list.length === 0) {
+    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center;">해당 조건의 자산이 없습니다.</td></tr>`;
+  } else {
+    list.forEach((asset, idx) => {
+      let manager = asset.관리자 || asset.사용자 || asset.담당자_정 || '-';
+      let name = asset.명칭 || asset.모델명 || '-';
+      let typeDisplay = asset.type === '전산비품' ? `전산비품(${asset.비품유형||'-'})` : asset.type;
+      
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>${idx+1}</td>
+        <td>${typeDisplay}</td>
+        <td>${asset.자산코드}</td>
+        <td>${name}</td>
+        <td>${asset.위치||'-'}</td>
+        <td>${manager}</td>
+        <td>${asset.구매일||'-'}</td>
+        <td>${asset.금액||'-'}</td>
+      `;
+      tbody.appendChild(tr);
+    });
+  }
+  modal.classList.remove('hidden');
+}
+
+function openSwDashboardDetail(title: string, list: SoftwareAsset[]) {
+  const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
+  const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
+  const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
+  const thead = tbody.closest('table')!.querySelector('thead')!;
+
+  titleEl.textContent = title;
+  thead.innerHTML = `<tr><th>No</th><th>유형</th><th>법인</th><th>제품명</th><th>구독일/비고</th><th>수량</th><th>금액</th></tr>`;
+  tbody.innerHTML = '';
+  if (list.length === 0) {
+    tbody.innerHTML = `<tr><td colspan="7" style="text-align:center;">해당 조건의 소프트웨어가 없습니다.</td></tr>`;
+  } else {
+    list.forEach((sw, idx) => {
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>${idx+1}</td>
+        <td>${sw.type === '구독SW' ? '구독' : '영구'}</td>
+        <td>${sw.법인||'-'}</td>
+        <td>${sw.제품명||'-'}</td>
+        <td>${sw.구독일 || sw.비고 || '-'}</td>
+        <td>${sw.수량||'-'}</td>
+        <td>${sw.금액||'-'}</td>
+      `;
+      tbody.appendChild(tr);
+    });
+  }
+  modal.classList.remove('hidden');
+}
+
+function openSwUsageDetail(title: string, list: SoftwareAsset[]) {
+  const modal = document.getElementById('dashboard-detail-modal') as HTMLDivElement;
+  const titleEl = document.getElementById('dashboard-detail-modal-title') as HTMLHeadingElement;
+  const tbody = document.getElementById('dashboard-detail-tbody') as HTMLTableSectionElement;
+  const thead = tbody.closest('table')!.querySelector('thead')!;
+
+  titleEl.textContent = title;
+  thead.innerHTML = `<tr><th>No</th><th>법인</th><th>제품명</th><th>수량</th><th>사용중</th><th>사용가능</th><th>구매일</th><th>금액</th></tr>`;
+  tbody.innerHTML = '';
+  if (list.length === 0) {
+    tbody.innerHTML = `<tr><td colspan="8" style="text-align:center;">해당 유형의 소프트웨어가 없습니다.</td></tr>`;
+  } else {
+    list.forEach((sw, idx) => {
+      const assigned = masterData.swUsers.filter(u => u.swId === sw.id).length;
+      const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량 || '0', 10);
+      const available = qty - assigned;
+      const availColor = available > 0 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+      
+      const tr = document.createElement('tr');
+      tr.innerHTML = `
+        <td>${idx+1}</td>
+        <td>${sw.법인||'-'}</td>
+        <td>${sw.제품명||'-'}</td>
+        <td>${qty}</td>
+        <td>${assigned}</td>
+        <td style="font-weight:600; color:${availColor};">${available}</td>
+        <td>${sw.구매일||'-'}</td>
+        <td>${sw.금액||'-'}</td>
+      `;
+      tbody.appendChild(tr);
+    });
+  }
+  modal.classList.remove('hidden');
+}
+
+function renderDashboard() {
+  mainContent.innerHTML = '';
+
+  activeCharts.forEach(c => c.destroy());
+  activeCharts = [];
+
+  if (activeCategory === 'hw') {
+    // 1. Data Aggregation
+    const types = ['개인PC', '서버', '스토리지', '전산비품'];
+    const units = ['대', '대', '대', '개'];
+    const groups: any = {};
+    types.forEach(t => {
+      groups[t] = {
+        idle: [], active: [],
+        aged: [], normal: []
+      };
+    });
+
+    masterData.hw.forEach(a => {
+      if (!groups[a.type]) return;
+      if (isHwIdle(a)) groups[a.type].idle.push(a);
+      else groups[a.type].active.push(a);
+
+      const ageY = getHwAgeYears(a);
+      const isAged = a.type === '전산비품' ? ageY >= 3 : ageY >= 5;
+      if (isAged) groups[a.type].aged.push(a);
+      else groups[a.type].normal.push(a);
+    });
+
+    const counts = types.map(t => groups[t].idle.length + groups[t].active.length);
+
+    // 사용현황 카드 생성
+    let usageCards = '';
+    types.forEach((t, i) => {
+      const total = groups[t].idle.length + groups[t].active.length;
+      const used = groups[t].active.length;
+      const per = total > 0 ? Math.round((used / total) * 100) : 0;
+      const barColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+      const perColor = per >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+      const badge = per >= 50
+        ? `<div style="font-size:0.75rem; color:#4a8220; background:var(--dash-light); padding:4px 8px; border-radius:4px; font-weight:500;">잘 사용하고 있어요</div>`
+        : `<div style="font-size:0.75rem; color:var(--dash-danger); background:#fef2f2; padding:4px 8px; border-radius:4px; font-weight:500;">점검이 필요합니다</div>`;
+
+      usageCards += `
+        <div class="dashboard-card" data-action="idle" data-type="${t}" style="padding: 1.25rem 1.5rem; cursor:pointer;">
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.5rem;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 사용현황</span>
+          </div>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
+            ${total}${units[i]} 중 ${used}${units[i]} 사용 중 · 유휴 ${groups[t].idle.length}${units[i]}
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 0.5rem;">
+            <div style="font-size: 2rem; font-weight:700; color:${perColor}; line-height:1;">${per}%</div>
+            ${badge}
+          </div>
+          <div style="width:100%; height:4px; background-color:var(--border-color); border-radius:2px; overflow:hidden; margin-top:0.25rem;">
+            <div style="width:${per}%; height:100%; background-color:${barColor};"></div>
+          </div>
+        </div>`;
+    });
+
+    // 노후화 카드 생성
+    let agedCards = '';
+    types.forEach((t, i) => {
+      const total = groups[t].aged.length + groups[t].normal.length;
+      const agedCount = groups[t].aged.length;
+      const agedPer = total > 0 ? Math.round((agedCount / total) * 100) : 0;
+      const threshold = t === '전산비품' ? '3년' : '5년';
+
+      agedCards += `
+        <div class="dashboard-card" data-action="aged" data-type="${t}" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
+          <div style="flex:1;">
+            <div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <span style="font-size:1rem; font-weight:700; color:var(--text-main);">${t} 노후화 현황</span>
+              <span style="font-size:0.75rem; color:#bfbfbf; background:#f9f9f9; padding:2px 6px; border-radius:4px;">${threshold} 초과</span>
+            </div>
+            <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
+              전체 ${total}${units[i]} 중 ${agedCount}${units[i]} 노후 장비
+            </div>
+            <div style="font-size: 1.5rem; font-weight:700; color:${agedCount > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${agedCount}${units[i]}</div>
+          </div>
+          <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${agedPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
+            <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${agedPer}%</span>
+            </div>
+          </div>
+        </div>`;
+    });
+
+    mainContent.innerHTML = `
+      <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">사용현황</h3>
+      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
+        ${usageCards}
+      </div>
+
+      <h3 style="margin: 0 0 1rem 0; font-size: 1.125rem; color: var(--text-main);">노후화 자산 비율</h3>
+      <div class="dashboard-layout-2col">
+        ${agedCards}
+      </div>
+    `;
+
+    // HW 카드 클릭 이벤트 바인딩
+    mainContent.querySelectorAll('[data-action="idle"]').forEach(card => {
+      card.addEventListener('click', () => {
+        const t = card.getAttribute('data-type')!;
+        openDashboardDetail(`[${t}] 유휴 자산 목록`, groups[t].idle);
+      });
+    });
+    mainContent.querySelectorAll('[data-action="aged"]').forEach(card => {
+      card.addEventListener('click', () => {
+        const t = card.getAttribute('data-type')!;
+        openDashboardDetail(`[${t}] 노후 장비 목록`, groups[t].aged);
+      });
+    });
+
+  } else {
+    // S/W Dashboard
+    let subQty = 0, subUsed = 0, subExp = 0, subTotal = 0;
+    let permQty = 0, permUsed = 0, permExp = 0, permTotal = 0;
+
+    masterData.sw.forEach(sw => {
+       const assigned = masterData.swUsers.filter(u => u.swId === sw.id).length;
+       const qty = typeof sw.수량 === 'number' ? sw.수량 : parseInt(sw.수량||'0', 10);
+       
+       if (sw.type === '구독SW') {
+         subQty += qty; subUsed += assigned; subTotal++;
+         if (isSWExpiring(sw)) subExp++;
+       } else {
+         permQty += qty; permUsed += assigned; permTotal++;
+         if (isSWExpiring(sw)) permExp++;
+       }
+    });
+
+    const subPer = subQty > 0 ? Math.round((subUsed/subQty)*100) : 0;
+    const permPer = permQty > 0 ? Math.round((permUsed/permQty)*100) : 0;
+    const subExpPer = subTotal > 0 ? Math.round((subExp/subTotal)*100) : 0;
+    const permExpPer = permTotal > 0 ? Math.round((permExp/permTotal)*100) : 0;
+
+    // 상태 뱃지 (50% 미만이면 빨간색 경고)
+    const subBadge = subPer >= 50
+      ? `<div style="font-size: 0.75rem; color:#4a8220; background:var(--dash-light); padding:4px 8px; border-radius:4px; font-weight:500;">잘 사용하고 있어요</div>`
+      : `<div style="font-size: 0.75rem; color:var(--dash-danger); background:#fef2f2; padding:4px 8px; border-radius:4px; font-weight:500;">점검이 필요합니다</div>`;
+    const permBadge = permPer >= 50
+      ? `<div style="font-size: 0.75rem; color:#4a8220; background:var(--dash-light); padding:4px 8px; border-radius:4px; font-weight:500;">잘 사용하고 있어요</div>`
+      : `<div style="font-size: 0.75rem; color:var(--dash-danger); background:#fef2f2; padding:4px 8px; border-radius:4px; font-weight:500;">점검이 필요합니다</div>`;
+
+    const subBarColor = subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+    const permBarColor = permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+    const subPerColor = subPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+    const permPerColor = permPer >= 50 ? 'var(--dash-primary)' : 'var(--dash-danger)';
+
+    mainContent.innerHTML = `
+      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
+        <div class="dashboard-card" data-action="sub-usage" style="padding: 1.25rem 1.5rem; cursor:pointer;">
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.5rem;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 소프트웨어 사용정보</span>
+          </div>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
+            ${subQty}개의 제품 중 ${subUsed}개 사용 중
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 0.5rem;">
+            <div style="font-size: 2rem; font-weight:700; color:${subPerColor}; line-height:1;">
+              ${subPer}%
+            </div>
+            ${subBadge}
+          </div>
+          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.25rem;">
+            <div style="width: ${subPer}%; height: 100%; background-color: ${subBarColor};"></div>
+          </div>
+        </div>
+
+        <div class="dashboard-card" data-action="perm-usage" style="padding: 1.25rem 1.5rem; cursor:pointer;">
+          <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom: 0.5rem;">
+            <span style="font-size:1rem; font-weight:700; color:var(--text-main);">영구 소프트웨어 사용정보</span>
+          </div>
+          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">
+            ${permQty}개의 제품 중 ${permUsed}개 사용 중
+          </div>
+          <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 0.5rem;">
+            <div style="font-size: 2rem; font-weight:700; color:${permPerColor}; line-height:1;">
+              ${permPer}%
+            </div>
+            ${permBadge}
+          </div>
+          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.25rem;">
+            <div style="width: ${permPer}%; height: 100%; background-color: ${permBarColor};"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="dashboard-layout-2col">
+        <div class="dashboard-card" data-action="sub-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
+          <div style="flex:1;">
+            <div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <span style="font-size:1rem; font-weight:700; color:var(--text-main);">구독 SW 만료 예정</span>
+            </div>
+            <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
+              30일 이내에 ${subTotal}개의 제품 중 ${subExp}개 만료 예정
+            </div>
+            <div style="font-size: 1.5rem; font-weight:700; color:${subExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${subExp}개</div>
+          </div>
+          <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${subExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
+            <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${subExpPer}%</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dashboard-card" data-action="perm-exp" style="padding: 1.25rem 1.5rem; flex-direction:row; justify-content:space-between; align-items:center; cursor:pointer;">
+          <div style="flex:1;">
+            <div style="display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem;">
+              <span style="font-size:1rem; font-weight:700; color:var(--text-main);">유지보수 만료 예정</span>
+            </div>
+            <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1.25rem;">
+              30일 이내에 ${permTotal}개의 제품 중 ${permExp}개 만료 예정
+            </div>
+            <div style="font-size: 1.5rem; font-weight:700; color:${permExp > 0 ? 'var(--dash-danger)' : 'var(--text-main)'};">${permExp}개</div>
+          </div>
+          <div style="width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(var(--dash-danger) ${permExpPer}%, var(--border-color) 0); display:flex; justify-content:center; align-items:center;">
+            <div style="width: 64px; height: 64px; border-radius: 50%; background: var(--white); display:flex; justify-content:center; align-items:center;">
+              <span style="font-size: 1rem; color:var(--text-muted); font-weight:600;">${permExpPer}%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    // SW 사용정보 카드 클릭 이벤트 - 사용 가능 소프트웨어 목록 표시
+    const subSwList = masterData.sw.filter(sw => sw.type === '구독SW');
+    const permSwList = masterData.sw.filter(sw => sw.type === '영구SW');
+    mainContent.querySelector('[data-action="sub-usage"]')?.addEventListener('click', () => {
+      openSwUsageDetail('구독 소프트웨어 사용 목록', subSwList);
+    });
+    mainContent.querySelector('[data-action="perm-usage"]')?.addEventListener('click', () => {
+      openSwUsageDetail('영구 소프트웨어 사용 목록', permSwList);
+    });
+
+    // SW 만료 카드 클릭 이벤트
+    const expSubList = masterData.sw.filter(sw => sw.type === '구독SW' && isSWExpiring(sw));
+    const expPermList = masterData.sw.filter(sw => sw.type === '영구SW' && isSWExpiring(sw));
+    mainContent.querySelector('[data-action="sub-exp"]')?.addEventListener('click', () => {
+      openSwDashboardDetail('구독 SW 만료 예정 목록', expSubList);
+    });
+    mainContent.querySelector('[data-action="perm-exp"]')?.addEventListener('click', () => {
+      openSwDashboardDetail('유지보수 만료 예정 목록', expPermList);
+    });
+  }
+}
+
+function renderTable() {
+  const container = document.createElement('div');
+  container.className = 'table-container';
+  const table = document.createElement('table');
+
+  if (activeCategory === 'hw') {
+    const list = masterData.hw.filter(a => a.type === activeSubTab);
+    
+    // Header
+    if (activeSubTab === '개인PC') {
+      table.innerHTML = `
+        <thead>
+          <tr>
+            <th>No</th><th>법인</th><th>자산코드</th><th>사용자</th>
+            <th>위치</th><th>CPU</th><th>GPU</th><th>RAM</th>
+            <th>SSD1</th><th>SSD2</th><th>HDD1</th><th>HDD2</th>
+            <th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th>
+          </tr>
+        </thead>
+        <tbody id="dynamic-tbody"></tbody>
+      `;
+      container.appendChild(table);
+      mainContent.appendChild(container);
+
+      const tbody = document.getElementById('dynamic-tbody')!;
+      if (list.length === 0) {
+        tbody.innerHTML = `<tr class="empty-row"><td colspan="13">등록된 [${activeSubTab}] 자산이 없습니다.</td></tr>`;
+        return;
+      }
+
+      list.forEach((asset, idx) => {
+        const tr = document.createElement('tr');
+        tr.style.cursor = 'pointer';
+        tr.innerHTML = `
+          <td>${idx + 1}</td><td>${asset.법인}</td><td>${asset.자산코드}</td><td>${asset.사용자||''}</td>
+          <td>${asset.위치||''}</td><td>${asset.CPU||''}</td><td>${asset.GPU||''}</td><td>${asset.RAM||''}</td>
+          <td>${asset.SSD1||'-'}</td><td>${asset.SSD2||'-'}</td><td>${asset.HDD1||'-'}</td><td>${asset.HDD2||'-'}</td>
+          <td>${asset.구매일||''}</td>
+          <td>${asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : ''}</td>
+          <td>${asset.납품업체||''}</td>
+          <td style="text-align:center;">${asset.품의서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${asset.품의서명}"></i>` : '-'}</td>
+          <td><button class="btn-outline btn-edit" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">수정</button></td>
+        `;
+        tr.addEventListener('click', (e) => {
+           if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
+           openPcModal(asset);
+        });
+        tr.querySelector('.btn-edit')?.addEventListener('click', () => openPcModal(asset));
+        tbody.appendChild(tr);
+      });
+    } else if (activeSubTab === '스토리지') {
+      table.innerHTML = `
+        <thead>
+          <tr>
+            <th>No</th><th>법인</th><th>유형</th><th>자산코드</th><th>명칭</th>
+            <th>위치</th><th>모델명</th><th>용량</th><th>담당자(정)</th><th>담당자(부)</th>
+            <th>IP주소</th><th>MAC 주소</th>
+            <th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th>
+          </tr>
+        </thead>
+        <tbody id="dynamic-tbody"></tbody>
+      `;
+      container.appendChild(table);
+      mainContent.appendChild(container);
+
+      const tbody = document.getElementById('dynamic-tbody')!;
+      if (list.length === 0) {
+        tbody.innerHTML = `<tr class="empty-row"><td colspan="13">등록된 [${activeSubTab}] 자산이 없습니다.</td></tr>`;
+        return;
+      }
+
+      list.forEach((asset, idx) => {
+        const tr = document.createElement('tr');
+        tr.style.cursor = 'pointer';
+        tr.innerHTML = `
+          <td>${idx + 1}</td><td>${asset.법인}</td><td>${asset.storage유형||''}</td><td>${asset.자산코드}</td><td>${asset.명칭}</td>
+          <td>${asset.위치||''}</td><td>${asset.모델명||''}</td><td>${asset.용량||''}</td><td>${asset.담당자_정||''}</td><td>${asset.담당자_부||''}</td>
+          <td>${asset.IP주소||''}</td><td>${asset.MACaddress||''}</td>
+          <td>${asset.구매일||''}</td>
+          <td>${asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : ''}</td>
+          <td>${asset.납품업체||''}</td>
+          <td style="text-align:center;">${asset.품의서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${asset.품의서명}"></i>` : '-'}</td>
+          <td><button class="btn-outline btn-edit" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">수정</button></td>
+        `;
+        tr.addEventListener('click', (e) => {
+           if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
+           openStorageModal(asset);
+        });
+        tr.querySelector('.btn-edit')?.addEventListener('click', () => openStorageModal(asset));
+        tbody.appendChild(tr);
+      });
+    } else {
+      table.innerHTML = `
+        <thead>
+          <tr>
+            <th>No</th><th>법인</th>
+            ${activeSubTab === '전산비품' ? '<th>유형</th>' : ''}
+            <th>자산코드</th><th>명칭</th>
+            <th>위치</th><th>관리자</th><th>IP주소</th><th>MAC 주소</th>
+            <th>H/W 사양</th><th>OS</th>
+            <th>구매일</th><th>금액</th><th>납품업체</th><th>품의서</th><th>관리</th>
+          </tr>
+        </thead>
+        <tbody id="dynamic-tbody"></tbody>
+      `;
+      container.appendChild(table);
+      mainContent.appendChild(container);
+
+      const tbody = document.getElementById('dynamic-tbody')!;
+      if (list.length === 0) {
+        tbody.innerHTML = `<tr class="empty-row"><td colspan="11">등록된 [${activeSubTab}] 자산이 없습니다.</td></tr>`;
+        return;
+      }
+
+      list.forEach((asset, idx) => {
+        const tr = document.createElement('tr');
+        tr.style.cursor = 'pointer';
+        tr.innerHTML = `
+          <td>${idx + 1}</td><td>${asset.법인}</td>
+          ${activeSubTab === '전산비품' ? `<td>${asset.비품유형||'-'}</td>` : ''}
+          <td>${asset.자산코드}</td><td>${asset.명칭}</td>
+          <td>${asset.위치}</td><td>${asset.관리자}</td><td>${asset.IP주소}</td><td>${asset.MACaddress}</td>
+          <td style="max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${asset.HW사양}</td>
+          <td>${asset.OS}</td>
+          <td>${asset.구매일||''}</td>
+          <td>${asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : ''}</td>
+          <td>${asset.납품업체||''}</td>
+          <td style="text-align:center;">${asset.품의서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${asset.품의서명}"></i>` : '-'}</td>
+          <td><button class="btn-outline btn-edit" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">수정</button></td>
+        `;
+        tr.addEventListener('click', (e) => {
+           if ((e.target as HTMLElement).tagName.toLowerCase() === 'button') return;
+           openHwModal(asset);
+        });
+        tr.querySelector('.btn-edit')?.addEventListener('click', () => openHwModal(asset));
+        tbody.appendChild(tr);
+      });
+    }
+
+  } else {
+    // SW
+    const list = masterData.sw.filter(a => a.type === activeSubTab);
+    
+    // Header
+    let theadHTML = '';
+    if (activeSubTab === '구독SW') {
+      theadHTML = `<tr>
+        <th>No</th><th>법인</th><th>제품명</th><th>구매일</th><th>구독일</th>
+        <th>금액</th><th>수량</th><th>사용가능</th><th>계정명</th><th>납품업체</th><th>비고</th><th>관리</th>
+      </tr>`;
+    } else {
+      theadHTML = `<tr>
+        <th>No</th><th>법인</th><th>제품명</th><th>구매일</th><th>유지보수</th>
+        <th>금액</th><th>수량</th><th>사용가능</th><th>계정명</th><th>납품업체</th><th>비고</th><th>관리</th>
+      </tr>`;
+    }
+
+    table.innerHTML = `
+      <thead>${theadHTML}</thead>
+      <tbody id="dynamic-tbody"></tbody>
+    `;
+    container.appendChild(table);
+    mainContent.appendChild(container);
+
+    const tbody = document.getElementById('dynamic-tbody')!;
+    if (list.length === 0) {
+      tbody.innerHTML = `<tr class="empty-row"><td colspan="12">등록된 [${activeSubTab}] 정보가 없습니다.</td></tr>`;
+      createIcons({ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Mouse, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } });
+      return;
+    }
+
+    list.forEach((asset, idx) => {
+      const assignedUsers = masterData.swUsers.filter(u => u.swId === asset.id);
+      const available = asset.수량 - assignedUsers.length;
+
+      const tr = document.createElement('tr');
+      tr.style.cursor = 'pointer';
+
+      let middleRowHTML = '';
+      if (activeSubTab === '구독SW') {
+        middleRowHTML = `<td>${asset.구독일||''}</td>`;
+      } else {
+        middleRowHTML = `<td>${asset.유지보수여부 ? 'Y' : 'N'}</td>`;
+      }
+
+      tr.innerHTML = `
+        <td>${idx + 1}</td>
+        <td>${asset.법인}</td>
+        <td>${asset.제품명}</td>
+        <td>${asset.구매일||''}</td>
+        ${middleRowHTML}
+        <td>${asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : ''}</td>
+        <td>${asset.수량}</td>
+        <td><strong style="color: ${available > 0 ? 'var(--primary)' : 'var(--danger)'}">${available}</strong></td>
+        <td>${asset.계정명||''}</td>
+        <td>${asset.납품업체||''}</td>
+        <td>${asset.비고||''}</td>
+        <td style="display:flex; justify-content:left; gap:0.25rem;">
+          <button class="btn-outline btn-edit" style="padding: 0.25rem 0.5rem; font-size: 0.75rem;">수정</button>
+          <button class="btn-outline btn-users" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; display:flex; align-items:center; gap:0.25rem;" title="사용자 관리">
+            <i data-lucide="users" style="width: 14px; height: 14px;"></i>
+          </button>
+        </td>
+      `;
+      tr.addEventListener('click', (e) => {
+         const target = e.target as HTMLElement;
+         if (target.tagName.toLowerCase() === 'button' || target.closest('button')) return;
+         openSwModal(asset);
+      });
+      tr.querySelector('.btn-edit')?.addEventListener('click', () => openSwModal(asset));
+      tr.querySelector('.btn-users')?.addEventListener('click', () => openSwUserModal(asset));
+      tbody.appendChild(tr);
+    });
+  }
+
+  // BUG FIX: initialize icons for newly inserted DOM blocks
+  createIcons({ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Mouse, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } });
+}
+
+// --- Modals ---
+function closeModals() {
+  hwModal.classList.add('hidden');
+  swModal.classList.add('hidden');
+  pcModal.classList.add('hidden');
+  storageModal.classList.add('hidden');
+  document.getElementById('sw-user-modal')?.classList.add('hidden');
+  document.getElementById('sw-user-edit-modal')?.classList.add('hidden');
+}
+
+document.querySelectorAll('.btn-icon, #btn-cancel-hw-modal, #btn-cancel-sw-modal, #btn-cancel-pc-modal, #btn-cancel-storage-modal').forEach(btn => {
+  btn.addEventListener('click', closeModals);
+});
+
+// ESC키, 외부클릭 닫기
+window.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeModals();
+});
+document.querySelectorAll('.modal-overlay').forEach(overlay => {
+  overlay.addEventListener('click', (e) => {
+    if (e.target === overlay) closeModals();
+  });
+});
+
+// Add Element Button
+btnAddAsset.addEventListener('click', () => {
+  if (activeSubTab === '대시보드') return;
+  if (activeCategory === 'hw') {
+    if (activeSubTab === '개인PC') {
+      openPcModal();
+    } else if (activeSubTab === '스토리지') {
+      openStorageModal();
+    } else {
+      openHwModal();
+    }
+  } else {
+    openSwModal();
+  }
+});
+
+// HW Modal open logic
+function openHwModal(asset?: HardwareAsset) {
+  hwModal.classList.remove('hidden');
+  hwForm.reset();
+  const deleteBtn = document.getElementById('btn-delete-hw-asset')!;
+  
+  if (asset) {
+    document.getElementById('hw-modal-title')!.textContent = '자산 상세 정보 수정';
+    deleteBtn.style.display = 'block';
+    
+    (document.getElementById('hw-asset-id') as HTMLInputElement).value = asset.id;
+    (document.getElementById('hw-asset-type') as HTMLInputElement).value = asset.type;
+    (document.getElementById('hw-법인') as HTMLInputElement).value = asset.법인;
+    (document.getElementById('hw-자산코드') as HTMLInputElement).value = asset.자산코드;
+    (document.getElementById('hw-명칭') as HTMLInputElement).value = asset.명칭;
+    (document.getElementById('hw-위치') as HTMLInputElement).value = asset.위치;
+    (document.getElementById('hw-관리자') as HTMLInputElement).value = asset.관리자;
+    (document.getElementById('hw-IP주소') as HTMLInputElement).value = asset.IP주소;
+    (document.getElementById('hw-MACaddress') as HTMLInputElement).value = asset.MACaddress;
+    (document.getElementById('hw-OS') as HTMLInputElement).value = asset.OS;
+    (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value = asset.HW사양;
+    (document.getElementById('hw-구매일') as HTMLInputElement).value = asset.구매일 || '';
+    (document.getElementById('hw-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
+    (document.getElementById('hw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
+    (document.getElementById('hw-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
+    (document.getElementById('hw-비품유형') as HTMLSelectElement).value = asset.비품유형 || '노트북';
+  } else {
+    document.getElementById('hw-modal-title')!.textContent = `새 ${activeSubTab} 자산 추가`;
+    deleteBtn.style.display = 'none';
+    (document.getElementById('hw-asset-id') as HTMLInputElement).value = '';
+    (document.getElementById('hw-asset-type') as HTMLInputElement).value = activeSubTab;
+    (document.getElementById('hw-품의서명') as HTMLElement).innerText = '';
+    (document.getElementById('hw-비품유형') as HTMLSelectElement).value = '노트북';
+  }
+  
+  if (activeSubTab === '전산비품') {
+    document.getElementById('hw-비품유형-group')!.style.display = 'block';
+  } else {
+    document.getElementById('hw-비품유형-group')!.style.display = 'none';
+  }
+}
+
+// PC Modal open logic
+function openPcModal(asset?: HardwareAsset) {
+  pcModal.classList.remove('hidden');
+  pcForm.reset();
+  const deleteBtn = document.getElementById('btn-delete-pc-asset')!;
+  
+  if (asset) {
+    document.getElementById('pc-modal-title')!.textContent = '개인PC 상세 정보 수정';
+    deleteBtn.style.display = 'block';
+    
+    (document.getElementById('pc-asset-id') as HTMLInputElement).value = asset.id;
+    (document.getElementById('pc-법인') as HTMLSelectElement).value = asset.법인;
+    (document.getElementById('pc-자산코드') as HTMLInputElement).value = asset.자산코드;
+    (document.getElementById('pc-사용자') as HTMLInputElement).value = asset.사용자 || '';
+    (document.getElementById('pc-위치') as HTMLInputElement).value = asset.위치 || '';
+    (document.getElementById('pc-CPU') as HTMLInputElement).value = asset.CPU || '';
+    (document.getElementById('pc-GPU') as HTMLInputElement).value = asset.GPU || '';
+    (document.getElementById('pc-RAM') as HTMLInputElement).value = asset.RAM || '';
+    (document.getElementById('pc-SSD1') as HTMLInputElement).value = asset.SSD1 || '';
+    (document.getElementById('pc-SSD2') as HTMLInputElement).value = asset.SSD2 || '';
+    (document.getElementById('pc-HDD1') as HTMLInputElement).value = asset.HDD1 || '';
+    (document.getElementById('pc-HDD2') as HTMLInputElement).value = asset.HDD2 || '';
+    (document.getElementById('pc-구매일') as HTMLInputElement).value = asset.구매일 || '';
+    (document.getElementById('pc-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
+    (document.getElementById('pc-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
+    (document.getElementById('pc-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
+  } else {
+    document.getElementById('pc-modal-title')!.textContent = '새 개인PC 자산 추가';
+    deleteBtn.style.display = 'none';
+    (document.getElementById('pc-asset-id') as HTMLInputElement).value = '';
+    (document.getElementById('pc-법인') as HTMLSelectElement).value = '한맥';
+    (document.getElementById('pc-품의서명') as HTMLElement).innerText = '';
+  }
+}
+
+// Storage Modal open logic
+function openStorageModal(asset?: HardwareAsset) {
+  storageModal.classList.remove('hidden');
+  storageForm.reset();
+  const deleteBtn = document.getElementById('btn-delete-storage-asset')!;
+  
+  if (asset) {
+    document.getElementById('storage-modal-title')!.textContent = '스토리지 상세 정보 수정';
+    deleteBtn.style.display = 'block';
+    
+    (document.getElementById('storage-asset-id') as HTMLInputElement).value = asset.id;
+    (document.getElementById('storage-법인') as HTMLSelectElement).value = asset.법인;
+    (document.getElementById('storage-유형') as HTMLSelectElement).value = asset.storage유형 || 'NAS';
+    (document.getElementById('storage-자산코드') as HTMLInputElement).value = asset.자산코드;
+    (document.getElementById('storage-명칭') as HTMLInputElement).value = asset.명칭;
+    (document.getElementById('storage-위치') as HTMLInputElement).value = asset.위치 || '';
+    (document.getElementById('storage-모델명') as HTMLInputElement).value = asset.모델명 || '';
+    (document.getElementById('storage-용량') as HTMLInputElement).value = asset.용량 || '';
+    (document.getElementById('storage-담당자_정') as HTMLInputElement).value = asset.담당자_정 || '';
+    (document.getElementById('storage-담당자_부') as HTMLInputElement).value = asset.담당자_부 || '';
+    (document.getElementById('storage-IP주소') as HTMLInputElement).value = asset.IP주소 || '';
+    (document.getElementById('storage-MAC주소') as HTMLInputElement).value = asset.MACaddress || '';
+    (document.getElementById('storage-구매일') as HTMLInputElement).value = asset.구매일 || '';
+    (document.getElementById('storage-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
+    (document.getElementById('storage-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
+    (document.getElementById('storage-품의서명') as HTMLElement).innerText = asset.품의서명 ? `📎${asset.품의서명}` : '';
+  } else {
+    document.getElementById('storage-modal-title')!.textContent = '새 스토리지 자산 추가';
+    deleteBtn.style.display = 'none';
+    (document.getElementById('storage-asset-id') as HTMLInputElement).value = '';
+    (document.getElementById('storage-법인') as HTMLSelectElement).value = '한맥';
+    (document.getElementById('storage-유형') as HTMLSelectElement).value = 'NAS';
+    (document.getElementById('storage-품의서명') as HTMLElement).innerText = '';
+  }
+}
+
+// SW Modal open logic
+function openSwModal(asset?: SoftwareAsset) {
+  swModal.classList.remove('hidden');
+  swForm.reset();
+  const deleteBtn = document.getElementById('btn-delete-sw-asset')!;
+  
+  const subGroup = document.getElementById('sw-구독일-group')!;
+  const permGroup = document.getElementById('sw-유지보수-group')!;
+  if (activeSubTab === '구독SW') {
+    subGroup.style.display = 'block';
+    permGroup.style.display = 'none';
+  } else {
+    subGroup.style.display = 'none';
+    permGroup.style.display = 'block';
+  }
+
+  if (asset) {
+    document.getElementById('sw-modal-title')!.textContent = `${activeSubTab} 상세 정보 수정`;
+    deleteBtn.style.display = 'block';
+    
+    (document.getElementById('sw-asset-id') as HTMLInputElement).value = asset.id;
+    (document.getElementById('sw-asset-type') as HTMLInputElement).value = asset.type;
+    (document.getElementById('sw-법인') as HTMLSelectElement).value = asset.법인;
+    (document.getElementById('sw-제품명') as HTMLInputElement).value = asset.제품명;
+    (document.getElementById('sw-구매일') as HTMLInputElement).value = asset.구매일 || '';
+    (document.getElementById('sw-구독일') as HTMLInputElement).value = asset.구독일 || '';
+    (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked = !!asset.유지보수여부;
+    (document.getElementById('sw-금액') as HTMLInputElement).value = asset.금액 ? Number(asset.금액.replace(/,/g, '')).toLocaleString() : '';
+    (document.getElementById('sw-수량') as HTMLInputElement).value = String(asset.수량);
+    (document.getElementById('sw-계정명') as HTMLInputElement).value = asset.계정명 || '';
+    (document.getElementById('sw-납품업체') as HTMLInputElement).value = asset.납품업체 || '';
+    (document.getElementById('sw-비고') as HTMLInputElement).value = asset.비고 || '';
+  } else {
+    document.getElementById('sw-modal-title')!.textContent = `새 ${activeSubTab} 자산 추가`;
+    deleteBtn.style.display = 'none';
+    (document.getElementById('sw-asset-id') as HTMLInputElement).value = '';
+    (document.getElementById('sw-asset-type') as HTMLInputElement).value = activeSubTab;
+    (document.getElementById('sw-법인') as HTMLSelectElement).value = '한맥';
+  }
+}
+
+// HW Save
+document.getElementById('btn-save-hw-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  if (!hwForm.checkValidity()) { hwForm.reportValidity(); return; }
+  
+  const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
+  const fileInput = document.getElementById('hw-품의서') as HTMLInputElement;
+  const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('hw-품의서명') as HTMLElement).innerText.replace('📎', '');
+
+  const newAsset: HardwareAsset = {
+    id: id || Math.random().toString(36).substring(2, 9),
+    type: (document.getElementById('hw-asset-type') as HTMLInputElement).value,
+    법인: (document.getElementById('hw-법인') as HTMLInputElement).value,
+    자산코드: (document.getElementById('hw-자산코드') as HTMLInputElement).value,
+    명칭: (document.getElementById('hw-명칭') as HTMLInputElement).value,
+    위치: (document.getElementById('hw-위치') as HTMLInputElement).value,
+    관리자: (document.getElementById('hw-관리자') as HTMLInputElement).value,
+    IP주소: (document.getElementById('hw-IP주소') as HTMLInputElement).value,
+    MACaddress: (document.getElementById('hw-MACaddress') as HTMLInputElement).value,
+    OS: (document.getElementById('hw-OS') as HTMLInputElement).value,
+    HW사양: (document.getElementById('hw-HW사양') as HTMLTextAreaElement).value,
+    구매일: (document.getElementById('hw-구매일') as HTMLInputElement).value,
+    금액: (document.getElementById('hw-금액') as HTMLInputElement).value,
+    납품업체: (document.getElementById('hw-납품업체') as HTMLInputElement).value,
+    품의서명,
+    비품유형: (document.getElementById('hw-asset-type') as HTMLInputElement).value === '전산비품' 
+      ? (document.getElementById('hw-비품유형') as HTMLSelectElement).value : undefined
+  };
+
+  if (id) {
+    const idx = masterData.hw.findIndex(a => a.id === id);
+    if(idx !== -1) masterData.hw[idx] = newAsset;
+  } else {
+    masterData.hw.push(newAsset);
+  }
+  closeModals(); renderContent();
+});
+
+// PC Save
+document.getElementById('btn-save-pc-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  if (!pcForm.checkValidity()) { pcForm.reportValidity(); return; }
+  
+  const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
+  const fileInput = document.getElementById('pc-품의서') as HTMLInputElement;
+  const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('pc-품의서명') as HTMLElement).innerText.replace('📎', '');
+
+  const newAsset: HardwareAsset = {
+    id: id || Math.random().toString(36).substring(2, 9),
+    type: '개인PC',
+    법인: (document.getElementById('pc-법인') as HTMLSelectElement).value,
+    자산코드: (document.getElementById('pc-자산코드') as HTMLInputElement).value,
+    명칭: '',
+    위치: (document.getElementById('pc-위치') as HTMLInputElement).value,
+    관리자: '',
+    IP주소: '',
+    MACaddress: '',
+    HW사양: '',
+    OS: '',
+    사용자: (document.getElementById('pc-사용자') as HTMLInputElement).value,
+    CPU: (document.getElementById('pc-CPU') as HTMLInputElement).value,
+    GPU: (document.getElementById('pc-GPU') as HTMLInputElement).value,
+    RAM: (document.getElementById('pc-RAM') as HTMLInputElement).value,
+    SSD1: (document.getElementById('pc-SSD1') as HTMLInputElement).value,
+    SSD2: (document.getElementById('pc-SSD2') as HTMLInputElement).value,
+    HDD1: (document.getElementById('pc-HDD1') as HTMLInputElement).value,
+    HDD2: (document.getElementById('pc-HDD2') as HTMLInputElement).value,
+    구매일: (document.getElementById('pc-구매일') as HTMLInputElement).value,
+    금액: (document.getElementById('pc-금액') as HTMLInputElement).value,
+    납품업체: (document.getElementById('pc-납품업체') as HTMLInputElement).value,
+    품의서명
+  };
+
+  if (id) {
+    const idx = masterData.hw.findIndex(a => a.id === id);
+    if(idx !== -1) masterData.hw[idx] = newAsset;
+  } else {
+    masterData.hw.push(newAsset);
+  }
+  closeModals(); renderContent();
+});
+
+// Storage Save
+document.getElementById('btn-save-storage-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  if (!storageForm.checkValidity()) { storageForm.reportValidity(); return; }
+  
+  const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
+  const fileInput = document.getElementById('storage-품의서') as HTMLInputElement;
+  const 품의서명 = fileInput.files && fileInput.files.length > 0 ? fileInput.files[0].name : (document.getElementById('storage-품의서명') as HTMLElement).innerText.replace('📎', '');
+
+  const newAsset: HardwareAsset = {
+    id: id || Math.random().toString(36).substring(2, 9),
+    type: '스토리지',
+    법인: (document.getElementById('storage-법인') as HTMLSelectElement).value,
+    storage유형: (document.getElementById('storage-유형') as HTMLSelectElement).value,
+    자산코드: (document.getElementById('storage-자산코드') as HTMLInputElement).value,
+    명칭: (document.getElementById('storage-명칭') as HTMLInputElement).value,
+    위치: (document.getElementById('storage-위치') as HTMLInputElement).value,
+    관리자: '',
+    IP주소: (document.getElementById('storage-IP주소') as HTMLInputElement).value,
+    MACaddress: (document.getElementById('storage-MAC주소') as HTMLInputElement).value,
+    HW사양: '',
+    OS: '',
+    모델명: (document.getElementById('storage-모델명') as HTMLInputElement).value,
+    용량: (document.getElementById('storage-용량') as HTMLInputElement).value,
+    담당자_정: (document.getElementById('storage-담당자_정') as HTMLInputElement).value,
+    담당자_부: (document.getElementById('storage-담당자_부') as HTMLInputElement).value,
+    구매일: (document.getElementById('storage-구매일') as HTMLInputElement).value,
+    금액: (document.getElementById('storage-금액') as HTMLInputElement).value,
+    납품업체: (document.getElementById('storage-납품업체') as HTMLInputElement).value,
+    품의서명
+  };
+
+  if (id) {
+    const idx = masterData.hw.findIndex(a => a.id === id);
+    if(idx !== -1) masterData.hw[idx] = newAsset;
+  } else {
+    masterData.hw.push(newAsset);
+  }
+  closeModals(); renderContent();
+});
+
+// SW Save
+document.getElementById('btn-save-sw-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  if (!swForm.checkValidity()) { swForm.reportValidity(); return; }
+  
+  const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
+  const newAsset: SoftwareAsset = {
+    id: id || Math.random().toString(36).substring(2, 9),
+    type: (document.getElementById('sw-asset-type') as HTMLInputElement).value,
+    법인: (document.getElementById('sw-법인') as HTMLSelectElement).value,
+    제품명: (document.getElementById('sw-제품명') as HTMLInputElement).value,
+    구매일: (document.getElementById('sw-구매일') as HTMLInputElement).value,
+    구독일: (document.getElementById('sw-구독일') as HTMLInputElement).value,
+    유지보수여부: (document.getElementById('sw-유지보수여부') as HTMLInputElement).checked,
+    금액: (document.getElementById('sw-금액') as HTMLInputElement).value,
+    수량: parseInt((document.getElementById('sw-수량') as HTMLInputElement).value || '1', 10),
+    계정명: (document.getElementById('sw-계정명') as HTMLInputElement).value,
+    납품업체: (document.getElementById('sw-납품업체') as HTMLInputElement).value,
+    비고: (document.getElementById('sw-비고') as HTMLInputElement).value,
+  };
+
+  if (id) {
+    const idx = masterData.sw.findIndex(a => a.id === id);
+    if(idx !== -1) masterData.sw[idx] = newAsset;
+  } else {
+    masterData.sw.push(newAsset);
+  }
+  closeModals(); renderContent();
+});
+
+// Deletes
+document.getElementById('btn-delete-hw-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  const id = (document.getElementById('hw-asset-id') as HTMLInputElement).value;
+  if (confirm('삭제하시겠습니까?')) {
+    masterData.hw = masterData.hw.filter(a => a.id !== id);
+    closeModals(); renderContent();
+  }
+});
+document.getElementById('btn-delete-pc-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  const id = (document.getElementById('pc-asset-id') as HTMLInputElement).value;
+  if (confirm('삭제하시겠습니까?')) {
+    masterData.hw = masterData.hw.filter(a => a.id !== id);
+    closeModals(); renderContent();
+  }
+});
+document.getElementById('btn-delete-storage-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  const id = (document.getElementById('storage-asset-id') as HTMLInputElement).value;
+  if (confirm('삭제하시겠습니까?')) {
+    masterData.hw = masterData.hw.filter(a => a.id !== id);
+    closeModals(); renderContent();
+  }
+});
+document.getElementById('btn-delete-sw-asset')?.addEventListener('click', (e) => {
+  e.preventDefault();
+  const id = (document.getElementById('sw-asset-id') as HTMLInputElement).value;
+  if (confirm('삭제하시겠습니까?')) {
+    masterData.sw = masterData.sw.filter(a => a.id !== id);
+    closeModals(); renderContent();
+  }
+});
+
+// --- Excel Controls ---
+btnDownloadTemp.addEventListener('click', () => downloadTemplate());
+btnExport.addEventListener('click', () => exportToExcel(masterData));
+
+uploadInput.addEventListener('change', async (e) => {
+  const file = (e.target as HTMLInputElement).files?.[0];
+  if (!file) return;
+  try {
+    masterData = await parseExcel(file);
+    renderContent();
+    alert('모든 시트 데이터 연동 완료');
+  } catch (error) {
+    console.error(error);
+    alert('엑셀 파싱 오류: 템플릿 양식이 다르거나 파일이 손상되었습니다.');
+  } finally {
+    uploadInput.value = '';
+  }
+});
+
+// --- SW User Modal Logic ---
+const swUserModal = document.getElementById('sw-user-modal') as HTMLDivElement;
+const swUserEditModal = document.getElementById('sw-user-edit-modal') as HTMLDivElement;
+let currentSwUserAssetId: string = '';
+let tempSwUsers: import("./excelHandler").SWUser[] = [];
+
+function renderUserList() {
+  const tbody = document.getElementById('user-list-body')!;
+  tbody.innerHTML = '';
+  if (tempSwUsers.length === 0) {
+    tbody.innerHTML = '<tr><td colspan="7" style="padding: 1rem; text-align: center; color: var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
+    return;
+  }
+  
+  tempSwUsers.forEach((user, idx) => {
+    const tr = document.createElement('tr');
+    tr.style.cssText = 'border-bottom: 1px solid var(--border); transition: background-color 0.2s;';
+    tr.addEventListener('mouseenter', () => tr.style.backgroundColor = 'var(--bg-light)');
+    tr.addEventListener('mouseleave', () => tr.style.backgroundColor = 'transparent');
+    
+    // 법인, 부서/팀, 직위, 이름, 사용기간, 첨부파일, 관리
+    const deptTeam = [user.부서, user.팀].filter(Boolean).join(' / ') || '-';
+    const attachIcon = user.신청서명 ? `<i data-lucide="paperclip" class="text-primary" style="width:16px; height:16px;" title="${user.신청서명}"></i>` : '-';
+    
+    tr.innerHTML = `
+      <td style="padding:0.5rem; text-align:left;">${user.법인}</td>
+      <td style="padding:0.5rem; text-align:left;">${deptTeam}</td>
+      <td style="padding:0.5rem; text-align:left;">${user.직위 || '-'}</td>
+      <td style="padding:0.5rem; text-align:left;"><strong>${user.이름}</strong></td>
+      <td style="padding:0.5rem; text-align:center;">${user.사용기간 || '-'}</td>
+      <td style="padding:0.5rem; text-align:center; color: var(--text-light);">${attachIcon}</td>
+      <td style="padding:0.5rem; text-align:center; display:flex; justify-content:center; gap:0.25rem;">
+        <button type="button" class="btn-icon btn-edit-user" data-idx="${idx}" style="color: var(--primary);" title="수정"><i data-lucide="edit-2" style="width:14px; height:14px;"></i></button>
+        <button type="button" class="btn-icon btn-remove-user" data-idx="${idx}" style="color: var(--danger);" title="삭제"><i data-lucide="x" style="width:14px; height:14px;"></i></button>
+      </td>
+    `;
+    tbody.appendChild(tr);
+  });
+  
+  createIcons({ icons: { Download, Upload, FileSpreadsheet, Plus, X, LayoutDashboard, Monitor, Server, Database, Mouse, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2 } });
+  
+  tbody.querySelectorAll('.btn-edit-user').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const idx = parseInt((e.currentTarget as HTMLElement).getAttribute('data-idx')!);
+      openUserEditModal(idx);
+    });
+  });
+  
+  tbody.querySelectorAll('.btn-remove-user').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const idx = parseInt((e.currentTarget as HTMLButtonElement).getAttribute('data-idx')!);
+      tempSwUsers.splice(idx, 1);
+      renderUserList();
+    });
+  });
+}
+
+function openSwUserModal(asset: SoftwareAsset) {
+  swUserModal.classList.remove('hidden');
+  currentSwUserAssetId = asset.id;
+  tempSwUsers = masterData.swUsers.filter(u => u.swId === asset.id).map(u => ({...u}));
+  renderUserList();
+}
+
+function openUserEditModal(idx: number) {
+  swUserEditModal.classList.remove('hidden');
+  (document.getElementById('edit-user-idx') as HTMLInputElement).value = String(idx);
+  
+  if (idx === -1) {
+    document.getElementById('sw-user-edit-modal-title')!.innerText = '새 사용자 추가';
+    (document.getElementById('new-user-법인') as HTMLSelectElement).value = '한맥';
+    (document.getElementById('new-user-부서') as HTMLInputElement).value = '';
+    (document.getElementById('new-user-팀') as HTMLInputElement).value = '';
+    (document.getElementById('new-user-직위') as HTMLInputElement).value = '';
+    (document.getElementById('new-user-이름') as HTMLInputElement).value = '';
+    (document.getElementById('new-user-사용기간') as HTMLInputElement).value = '';
+    (document.getElementById('new-user-신청서') as HTMLInputElement).value = '';
+    document.getElementById('new-user-신청서명')!.innerText = '';
+  } else {
+    document.getElementById('sw-user-edit-modal-title')!.innerText = '사용자 수정';
+    const u = tempSwUsers[idx];
+    (document.getElementById('new-user-법인') as HTMLSelectElement).value = u.법인;
+    (document.getElementById('new-user-부서') as HTMLInputElement).value = u.부서;
+    (document.getElementById('new-user-팀') as HTMLInputElement).value = u.팀;
+    (document.getElementById('new-user-직위') as HTMLInputElement).value = u.직위;
+    (document.getElementById('new-user-이름') as HTMLInputElement).value = u.이름;
+    (document.getElementById('new-user-사용기간') as HTMLInputElement).value = u.사용기간;
+    (document.getElementById('new-user-신청서') as HTMLInputElement).value = ''; // file input cannot be programmatically set
+    document.getElementById('new-user-신청서명')!.innerText = u.신청서명 ? `📎${u.신청서명}` : '';
+  }
+}
+
+document.getElementById('btn-open-add-user')?.addEventListener('click', () => {
+  openUserEditModal(-1);
+});
+
+document.getElementById('btn-save-edit-user')?.addEventListener('click', () => {
+  const idx = parseInt((document.getElementById('edit-user-idx') as HTMLInputElement).value);
+  const 법인 = (document.getElementById('new-user-법인') as HTMLSelectElement).value;
+  const 부서 = (document.getElementById('new-user-부서') as HTMLInputElement).value;
+  const 팀 = (document.getElementById('new-user-팀') as HTMLInputElement).value;
+  const 직위 = (document.getElementById('new-user-직위') as HTMLInputElement).value;
+  const 이름 = (document.getElementById('new-user-이름') as HTMLInputElement).value.trim();
+  const 사용기간 = (document.getElementById('new-user-사용기간') as HTMLInputElement).value;
+  
+  const fileInput = document.getElementById('new-user-신청서') as HTMLInputElement;
+  let 신청서명 = '';
+  if (fileInput.files && fileInput.files.length > 0) {
+    신청서명 = fileInput.files[0].name;
+  } else if (idx !== -1) {
+    // Keep existing file if not changed
+    신청서명 = tempSwUsers[idx].신청서명;
+  }
+
+  if (!이름) { alert('이름을 입력해주세요.'); return; }
+  
+  if (idx === -1) {
+    tempSwUsers.push({
+      id: Math.random().toString(36).substring(2, 9),
+      swId: currentSwUserAssetId,
+      법인, 부서, 팀, 직위, 이름, 사용기간, 신청서명
+    });
+  } else {
+    tempSwUsers[idx] = { ...tempSwUsers[idx], 법인, 부서, 팀, 직위, 이름, 사용기간, 신청서명 };
+  }
+  
+  swUserEditModal.classList.add('hidden');
+  renderUserList();
+});
+
+document.getElementById('btn-cancel-sw-user-edit')?.addEventListener('click', () => {
+  swUserEditModal.classList.add('hidden');
+});
+document.getElementById('btn-close-sw-user-edit-modal')?.addEventListener('click', () => {
+  swUserEditModal.classList.add('hidden');
+});
+
+document.getElementById('btn-save-sw-user-mapping')?.addEventListener('click', () => {
+  // Remove existing mappings for this asset
+  masterData.swUsers = masterData.swUsers.filter(u => u.swId !== currentSwUserAssetId);
+  // Add updated mappings
+  masterData.swUsers.push(...tempSwUsers);
+  
+  swUserModal.classList.add('hidden');
+  renderContent();
+});
+
+document.getElementById('btn-cancel-sw-user-modal')?.addEventListener('click', () => {
+  swUserModal.classList.add('hidden');
+});
+document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => {
+  swUserModal.classList.add('hidden');
+});
+
+
+// Initial Render
+renderContent();
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..4b6238e
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,354 @@
+:root {
+  --primary-color: #1E5149;
+  --primary-hover: #153c36;
+  --primary-light: #edf2f1;
+  --text-main: #111827;
+  --text-muted: #6B7280;
+  --border-color: #E5E7EB;
+  --bg-color: #F9FAFB;
+  --sidebar-bg: #ffffff;
+  --white: #FFFFFF;
+  --danger: #dc2626;
+  
+  --dash-primary: #6cc020;
+  --dash-light: #f2f9ec;
+  --dash-danger: #cf222e;
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
+}
+.rounded-lg {
+  border-radius: 8px;
+}
+.dashboard-card {
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: none;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.dashboard-layout-2col {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+@media (max-width: 768px) {
+  .dashboard-layout-2col {
+    grid-template-columns: 1fr;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+  color: var(--text-main);
+  background-color: var(--bg-color);
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+  font-size: 14px;
+}
+
+/* App Layout - Sidebar & Main Content */
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+}
+
+.sidebar {
+  width: 260px;
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-main);
+}
+
+.sidebar-header h1 span {
+  color: var(--primary-color);
+}
+
+.nav-section {
+  padding: 1.5rem 0 0.5rem;
+}
+
+.nav-section h3 {
+  padding: 0 1.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.nav-section h3 i {
+  width: 14px;
+  height: 14px;
+}
+
+.nav-list {
+  list-style: none;
+}
+
+.nav-list li {
+  padding: 0.75rem 1.5rem;
+  margin: 0.25rem 0.75rem;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-main);
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.nav-list li i {
+  width: 18px;
+  height: 18px;
+  color: var(--text-muted);
+}
+
+.nav-list li:hover {
+  background-color: var(--bg-color);
+}
+
+.nav-list li.active {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+}
+
+.nav-list li.active i {
+  color: var(--primary-color);
+}
+
+/* Main Content Wrapper */
+.main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Header */
+.top-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 2rem;
+  background-color: var(--white);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.header-title h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.content-area {
+  padding: 2rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.stat-card {
+  background-color: var(--white);
+  padding: 1.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-card .title {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.stat-card .value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-main);
+  margin-top: 0.5rem;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  line-height: 1;
+}
+
+.btn i { width: 16px; height: 16px; }
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: var(--white);
+  border: 1px solid var(--primary-color);
+}
+
+.btn-primary:hover {
+  background-color: var(--primary-hover);
+  border-color: var(--primary-hover);
+}
+
+.btn-outline {
+  background-color: transparent;
+  color: var(--text-main);
+  border: 1px solid var(--border-color);
+}
+
+.btn-outline:hover {
+  background-color: var(--border-color);
+}
+
+.btn-danger {
+  color: var(--danger);
+  border-color: #fca5a5;
+}
+
+.btn-danger:hover {
+  background-color: #fef2f2;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+/* Table */
+.table-container {
+  background-color: var(--white);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+th, td {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+th {
+  font-weight: 600;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  background-color: #FAFAFA;
+}
+
+td {
+  font-size: 0.875rem;
+}
+
+tbody tr:last-child td { border-bottom: none; }
+tbody tr:hover { background-color: var(--bg-color); }
+.empty-row td { text-align: center; padding: 3rem; color: var(--text-muted); }
+
+/* Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
+.modal-content {
+  background-color: var(--white);
+  width: 100%; max-width: 600px;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+  transform: translateY(20px);
+  transition: transform 0.2s ease;
+}
+.modal-overlay:not(.hidden) .modal-content { transform: translateY(0); }
+.modal-header {
+  background-color: var(--primary-color);
+  color: var(--white);
+  padding: 1rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.modal-header h2 { font-size: 1.125rem; font-weight: 500; }
+.modal-body { padding: 1.5rem; }
+.grid-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
+.form-group { display: flex; flex-direction: column; gap: 0.375rem; }
+.form-group.full-width { grid-column: span 2; }
+.form-group label { font-size: 0.875rem; font-weight: 500; }
+.form-group input, .form-group textarea {
+  padding: 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  font-family: inherit; font-size: 0.875rem;
+  outline: none; transition: border-color 0.2s;
+}
+.form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); }
+.modal-footer {
+  padding: 1rem 1.5rem; border-top: 1px solid var(--border-color);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.footer-actions { display: flex; gap: 0.5rem; }
diff --git a/start_server.bat b/start_server.bat
new file mode 100644
index 0000000..5630850
--- /dev/null
+++ b/start_server.bat
@@ -0,0 +1,24 @@
+@echo off
+chcp 65001 >nul
+title HM ITAM 서버
+
+echo ============================================
+echo    HM ITAM 개발 서버 시작
+echo ============================================
+echo.
+
+cd /d "%~dp0"
+
+:: node_modules 존재 여부 확인
+if not exist "node_modules" (
+    echo [INFO] node_modules가 없습니다. 패키지를 설치합니다...
+    echo.
+    call npm install
+    echo.
+)
+
+echo [INFO] 개발 서버를 시작합니다...
+echo [INFO] 종료하려면 stop_server.bat을 실행하거나 이 창에서 Ctrl+C를 누르세요.
+echo.
+
+npm run dev
diff --git a/stop_server.bat b/stop_server.bat
new file mode 100644
index 0000000..5ddbb4b
--- /dev/null
+++ b/stop_server.bat
@@ -0,0 +1,35 @@
+@echo off
+chcp 65001 >nul
+title HM ITAM 서버 종료
+
+echo ============================================
+echo    HM ITAM 개발 서버 종료
+echo ============================================
+echo.
+
+:: Vite 개발 서버가 사용하는 node 프로세스 찾기
+set "found=0"
+
+for /f "tokens=2" %%a in ('netstat -ano ^| findstr ":5173" ^| findstr "LISTENING" 2^>nul') do (
+    set "found=1"
+)
+
+if "%found%"=="0" (
+    echo [INFO] 실행 중인 Vite 개발 서버를 찾을 수 없습니다.
+    echo.
+    pause
+    exit /b 0
+)
+
+echo [INFO] 포트 5173에서 실행 중인 서버를 종료합니다...
+echo.
+
+for /f "tokens=5" %%a in ('netstat -ano ^| findstr ":5173" ^| findstr "LISTENING"') do (
+    echo [INFO] PID %%a 프로세스를 종료합니다...
+    taskkill /PID %%a /F >nul 2>&1
+)
+
+echo.
+echo [OK] 서버가 종료되었습니다.
+echo.
+pause
diff --git a/temp_db.xlsx b/temp_db.xlsx
new file mode 100644
index 0000000..11c3e17
Binary files /dev/null and b/temp_db.xlsx differ
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..75abdef
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..3d35e2a
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    port: 8080,
+    host: true, // Listen on all local IPs
+  },
+});
diff --git a/기능명세서.md b/기능명세서.md
new file mode 100644
index 0000000..e644979
--- /dev/null
+++ b/기능명세서.md
@@ -0,0 +1,72 @@
+# HM ITAM (IT Asset Management) ERP 기능 명세서
+
+## 1. 개요 (Overview)
+본 시스템은 데이터베이스(DB) 연결 없이 브라우저 단에서 엑셀(Excel) 파일을 로컬 데이터베이스의 대체재로 활용하여 구동되는 **IT 자산관리(H/W, S/W) 프로토타입 대시보드**입니다. 사용자는 별도의 백엔드 없이 엑셀 파일을 업로드하고, 웹 상에서 조회 및 수정 후 다시 엑셀로 저장(Export)할 수 있습니다.
+
+## 2. 전체 레이아웃 (Layout & Navigation)
+화면은 좌측 사이드바 구조(Depth 2)를 채택하여 정보 탐색의 편의성을 고려하였습니다.
+
+### 2.1. 좌측 메인 내비게이션 (Sidebar)
+*   **하드웨어 (H/W)**: 대시보드, 개인PC, 서버, 스토리지, 전산비품
+*   **소프트웨어 (S/W)**: 대시보드, 구독 소프트웨어, 영구 소프트웨어
+
+### 2.2. 우측 메인 영역 (Main Content)
+*   **상단 컨트롤 패널**: 좌측 탭에 상관없이 데이터를 일괄 제어하는 통합 엑셀 버튼 3종(`통합 양식 다운로드`, `엑셀 업로드`, `일괄 엑셀 저장`)이 위치합니다.
+*   **타이틀 바**: 사용자가 현재 어느 탭(ex. `하드웨어 / 개인PC`)에 위치하고 있는지 동적으로 표시합니다.
+*   **콘텐츠 뷰**: 대시보드 선택 시 각 자산의 요약 맵(Summary Grid)을, 하위 자산 항목 선택 시 Data Table을 렌더링합니다.
+
+---
+
+## 3. 핵심 기능 (Core Features)
+
+### 3.1. 엑셀 연동 기반 CRUD 로직 파이프라인
+*   **통합 양식 다운로드 (Template Export)**: 자산이 없는 경우, 초기 세팅을 돕기 위해 빈 엑셀 템플릿(Master File)을 다운로드할 수 있습니다. 다운로드된 파일은 **다중 시트(Multi-sheet)** 로 `개인PC`, `서버`, `스토리지`, `전산비품`, `구독SW`, `영구SW` 6개의 탭이 분리 생성됩니다.
+*   **엑셀 업로드 (Import/Parse)**: `SheetJS (xlsx)` 라이브러리를 통해 다중 시트 형태의 엑셀 파일을 업로드하면, 한 번에 브라우저 내의 자산 리스트 객체(Array)로 매핑되어 각 탭에 뿌려집니다.
+*   **자산 조회 (Read)**: 각 자산 항목(ex. 서버) 탭을 클릭하여 들어가면, 해당 시트(Type)에 속한 자산 목록만 필터링되어 테이블로 노출됩니다.
+*   **자산 추가/수정 (Create/Update)**: 테이블 우측의 `[수정]` 버튼 또는 상단의 `[자산 추가]`를 클릭하면 모달 팝업이 등장하여 H/W와 S/W에 맞는 각기 다른 양식 폼 데이터를 브라우저 메모리에 업데이트합니다.
+*   **자산 삭제 (Delete)**: 모달 팝업 좌측 하단의 `[삭제]` 버튼을 통해 해당 단일 항목을 삭제할 수 있습니다.
+*   **일괄 엑셀 저장 (Save/Export)**: 모든 추가/수정/삭제 작업이 완료되면 버튼을 눌러 변경된 전체 메모리 데이터를 다시 **다중 시트 엑셀 파일** 형태로 로컬 PC에 떨굽니다.
+
+### 3.2. 대시보드 (Dashboard)
+*   **H/W 대시보드**: 개인PC, 서버, 스토리지, 전산비품의 총 수량을 Grid 기반 카드로 요약하여 보여줍니다.
+*   **S/W 대시보드**: 구독 소프트웨어, 영구 소프트웨어의 총 라이선스 개수를 요약하여 보여줍니다.
+
+---
+
+## 4. 데이터 스키마 (Data Schema)
+
+자산 항목은 H/W와 S/W 두 가지의 다른 구조로 관리됩니다.
+
+### 4.1. H/W 자산 스키마 (Hardware Asset)
+`[개인PC, 서버, 스토리지, 전산비품]` 각각 동일한 스키마 구조를 가집니다.
+
+| 필드명 | 유형 (Type) | 필수여부 | 설명 |
+| :--- | :---: | :---: | :--- |
+| **법인** | `String` | 필 | 자산의 소속 법인 |
+| **자산코드** | `String` | 필 | 고유 자산 식별코드 |
+| **명칭** | `String` | 필 | 모델명 또는 기기명 |
+| **위치** | `String` | 선 | 물리적 위치 (ex. 개발실) |
+| **관리자** | `String` | 선 | 실 사용자 또는 책임자 |
+| **IP주소** | `String` | 선 | 할당된 고정/유동 IP |
+| **MAC address** | `String` | 선 | 기기 고유 물리적 주소 |
+| **OS** | `String` | 선 | 설치된 운영체제 정보 |
+| **H/W 사양** | `String` | 선 | CPU, RAM, Storage 요약 스펙 |
+
+### 4.2. S/W 자산 스키마 (Software Asset)
+`[구독SW, 영구SW]` 각각 동일한 스키마 구조를 가집니다.
+
+| 필드명 | 유형 (Type) | 필수여부 | 설명 |
+| :--- | :---: | :---: | :--- |
+| **법인** | `String` | 필 | 자산의 소속 법인 |
+| **S/W명** | `String` | 필 | 소프트웨어 제품 명칭 |
+| **라이선스키** | `String` | 선 | 발급된 S/W 활성화 키 |
+| **할당자** | `String` | 선 | 사용하는 사용자 또는 팀 |
+| **사용기간** | `String` | 선 | 구독 혹은 만료 기한 표기 |
+| **비고** | `String` | 선 | 기타 참고용 안내 사항 |
+
+---
+
+## 5. UI/UX 디자인 정책 (Design Constraint)
+1. **Color (Achromatic & Green)**: `Deep Green(#1E5149)` 을 메인 포인트 색상으로 사용하여 전문성과 정돈된 느낌을 줍니다. 배경이나 나머지 요소는 무채색 베이스입니다.
+2. **Typography**: 가독성이 우수한 `Pretendard` 서체를 사용하고, 자간을 약간 좁혀 밀도 있고 깔끔한 느낌을 줍니다.
+3. **Box-less 스타일링**: 과도한 박스와 테두리를 없애고(Border-based), 얇은 구분 영역만으로 테이블과 폼의 요소를 분리하여 세련된 데이터 표현을 만듭니다.