refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정)

- 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거 - excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화 - ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화 - 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리 - 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결
refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B)
2026-06-19 15:12:25 +09:00 · 2026-06-19 15:04:36 +09:00 · 2026-06-19 14:55:25 +09:00 · 2026-06-19 13:39:29 +09:00 · 2026-06-19 13:19:25 +09:00 · 2026-06-18 20:41:03 +09:00
109 changed files with 11193 additions and 19562 deletions
--- a/.env
+++ b/.env
@@ -0,0 +1,6 @@
+DB_HOST=172.16.8.151
+DB_PORT=3306
+DB_USER=itam_admin
+DB_PASS=itam1234
+DB_NAME=itam
+PORT=3000
--- a/PC_사양_적정성_분석_기획서.html
+++ b/PC_사양_적정성_분석_기획서.html
@@ -1,429 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>PC 사양 적정성 분석 기획서 (GPU 반영)</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
-  <style>
-    :root {
-      --primary: #4F46E5;
-      --primary-light: #EEF2FF;
-      --secondary: #10B981;
-      --secondary-light: #D1FAE5;
-      --danger: #EF4444;
-      --danger-light: #FEE2E2;
-      --warning: #F59E0B;
-      --warning-light: #FEF3C7;
-      --purple: #7C3AED;
-      --purple-light: #EDE9FE;
-      --text-dark: #0F172A;
-      --text-body: #334155;
-      --text-muted: #64748B;
-      --border: #E2E8F0;
-      --bg-light: #F8FAFC;
-    }
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: 'Outfit', 'Noto Sans KR', sans-serif;
-      color: var(--text-body);
-      background: #fff;
-      letter-spacing: -0.02em;
-      line-height: 1.7;
-    }
-    .page { max-width: 980px; margin: 0 auto; padding: 3rem 2rem; }
-
-    /* ─ Header ─ */
-    .doc-header { border-bottom: 3px solid var(--text-dark); padding-bottom: 1.75rem; margin-bottom: 3rem; }
-    .doc-label {
-      display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--primary);
-      background: var(--primary-light); padding: 0.25rem 0.75rem; border-radius: 99px;
-      text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem;
-    }
-    .version-badge {
-      display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--secondary);
-      background: var(--secondary-light); padding: 0.2rem 0.6rem; border-radius: 99px;
-      margin-left: 0.5rem; vertical-align: middle;
-    }
-    .doc-header h1 { font-size: 2rem; font-weight: 900; color: var(--text-dark); line-height: 1.25; margin-bottom: 1rem; }
-    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
-    .meta-item { background: var(--bg-light); border-radius: 8px; padding: 0.65rem 1rem; font-size: 0.83rem; }
-    .meta-item .label { color: var(--text-muted); display: block; font-size: 0.75rem; }
-    .meta-item .val { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
-
-    /* ─ Sections ─ */
-    section { margin-bottom: 3.5rem; }
-    h2 {
-      font-size: 1.3rem; font-weight: 800; color: var(--text-dark);
-      padding-bottom: 0.5rem; border-bottom: 2px solid var(--border);
-      margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.6rem;
-    }
-    h2 .num {
-      display: inline-flex; align-items: center; justify-content: center;
-      width: 28px; height: 28px; background: var(--primary); color: #fff;
-      border-radius: 50%; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
-    }
-    h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin: 1.75rem 0 0.75rem; }
-    p { margin-bottom: 1rem; color: var(--text-body); font-size: 0.97rem; }
-
-    /* ─ Boxes ─ */
-    .box { border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; font-size: 0.93rem; }
-    .box-blue   { background: var(--primary-light);  border-left: 4px solid var(--primary); }
-    .box-green  { background: var(--secondary-light); border-left: 4px solid var(--secondary); }
-    .box-yellow { background: var(--warning-light);  border-left: 4px solid var(--warning); }
-    .box-red    { background: var(--danger-light);   border-left: 4px solid var(--danger); }
-    .box-purple { background: var(--purple-light);   border-left: 4px solid var(--purple); }
-    .box-title  { font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; font-size: 0.95rem; }
-
-    /* ─ Score formula block ─ */
-    .formula {
-      background: #1E293B; color: #E2E8F0; border-radius: 8px;
-      padding: 1rem 1.25rem; font-family: 'Courier New', monospace;
-      font-size: 0.87rem; margin: 1rem 0; overflow-x: auto; line-height: 2;
-    }
-    .formula .comment { color: #64748B; }
-    .formula .key { color: #93C5FD; }
-    .formula .val { color: #6EE7B7; }
-    .formula .warn { color: #FCD34D; }
-
-    /* ─ Three-col score grid ─ */
-    .score-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 1.5rem 0; }
-    @media(max-width: 700px) { .score-grid-3 { grid-template-columns: 1fr; } }
-    .score-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
-    .score-card-header {
-      background: var(--bg-light); padding: 0.65rem 1rem;
-      font-weight: 700; font-size: 0.88rem; color: var(--text-dark);
-      border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem;
-    }
-    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
-    .dot-green  { background: var(--secondary); }
-    .dot-purple { background: var(--purple); }
-
-    /* ─ Tables ─ */
-    .tbl-wrap { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin: 1.25rem 0; }
-    table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
-    th { background: var(--bg-light); padding: 0.65rem 1rem; font-weight: 700; color: var(--text-dark); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
-    td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-body); vertical-align: top; }
-    tr:last-child td { border-bottom: none; }
-    tr:hover td { background: var(--bg-light); }
-
-    /* ─ Badges ─ */
-    .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
-    .b-primary { color: var(--primary); background: var(--primary-light); }
-    .b-green  { color: #065F46; background: var(--secondary-light); }
-    .b-red    { color: #991B1B; background: var(--danger-light); }
-    .b-yellow { color: #92400E; background: var(--warning-light); }
-    .b-purple { color: #5B21B6; background: var(--purple-light); }
-
-    /* ─ Flow ─ */
-    .flow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 1.5rem 0; }
-    .flow-step { background: var(--primary-light); color: var(--primary); font-weight: 700; font-size: 0.83rem; padding: 0.55rem 0.9rem; border-radius: 8px; text-align: center; }
-    .flow-step.gpu { background: var(--purple-light); color: var(--purple); }
-    .flow-arrow { font-size: 1.1rem; color: var(--text-muted); padding: 0 0.4rem; }
-
-    /* ─ GPU tier table highlight ─ */
-    .tier-S td:first-child { font-weight: 800; color: #DC2626; }
-    .tier-A td:first-child { font-weight: 700; color: var(--primary); }
-    .tier-B td:first-child { font-weight: 700; color: var(--secondary); }
-    .tier-C td:first-child { color: var(--warning); font-weight: 600; }
-    .tier-D td:first-child { color: var(--text-muted); }
-
-    footer { border-top: 1px solid var(--border); margin-top: 4rem; padding-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
-  </style>
-</head>
-<body>
-<div class="page">
-
-  <!-- HEADER -->
-  <header class="doc-header">
-    <div class="doc-label">기능 명세서 <span class="version-badge">v3.0 — 100점 감점제 반영</span></div>
-    <h1>PC 사양 적정성 분석 기획서<br>
-      <span style="font-size:1.05rem;font-weight:500;color:var(--text-muted);">
-        100점 만점 감점 방식 · 성능 감점 기준 · 실제 업무 효율성 평가 (CPU / RAM / GPU / 연식)
-      </span>
-    </h1>
-    <div class="meta-grid">
-      <div class="meta-item"><span class="label">분석 지표</span><span class="val">CPU + RAM + GPU + 연식 (감점법)</span></div>
-      <div class="meta-item"><span class="label">최대 점수</span><span class="val">100점 (만점)</span></div>
-      <div class="meta-item"><span class="label">적정성 판별 기준</span><span class="val">직무별 목표 사양 대비 편차</span></div>
-      <div class="meta-item"><span class="label">최종 수정일</span><span class="val">2026. 05. 31</span></div>
-    </div>
-  </header>
-
-  <!-- 1. 개요 -->
-  <section>
-    <h2><span class="num">1</span>개요 — 100점 만점 감점형 성능 점수 체계</h2>
-    <p>
-      v3.0부터 PC 사양 점수는 <strong>100점 만점 기준 감점제</strong>로 산출됩니다.
-      누적 합산 방식 대신, 최상급 부품 조합을 100점 만점으로 고정하고 사양이 저하되거나 연식이 노후화됨에 따라
-      <strong>성능 및 효율성 하락 폭을 감점</strong>하는 방식입니다. 이는 실제 업무 환경에서 PC 노후도에 따른
-      체감 생산성 저하를 훨씬 직관적이고 현실적으로 드러냅니다.
-    </p>
-
-    <div class="flow">
-      <div class="flow-step">① 기본 100점 만점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">② CPU 등급/세대 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">③ RAM 용량 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step gpu">④ GPU 등급 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">⑤ 연식 노후 감점</div>
-      <div class="flow-arrow">→</div>
-      <div class="flow-step">⑥ 최종 실질 성능 점수</div>
-    </div>
-
-    <div class="formula">
-<span class="comment">// ─── 최종 PC 사양 점수 (100점 만점, 최소 10점 보존) ───</span>
-<span class="key">totalScore</span> = max(10, 100 - (<span class="val">cpuDeduction</span> + <span class="val">genDeduction</span> + <span class="val">ramDeduction</span> + <span class="val">gpuDeduction</span> + <span class="val">ageDeduction</span>))
-    </div>
-  </section>
-
-  <!-- 2. CPU 감점 룰 -->
-  <section>
-    <h2><span class="num">2</span>CPU 사양 감점 기준</h2>
-    <p>CPU 감점은 <strong>등급 감점(최대 -30점)</strong>과 <strong>세대 노후 감점(최대 -15점)</strong>의 합산입니다.</p>
-
-    <div class="formula">
-<span class="comment">// [CPU 등급 감점]</span>
-i9 / Ryzen 9  → <span class="val">0점 감점</span>
-i7 / Ryzen 7  → <span class="val">-5점 감점</span>
-i5 / Ryzen 5  → <span class="val">-15점 감점</span>
-i3 / Ryzen 3  → <span class="val">-25점 감점</span>
-기타           → <span class="val">-30점 감점</span>
-
-<span class="comment">// [CPU 세대 노후 감점]</span>
-최신 세대 (Intel 12~14세대, Ryzen 5000~7000시리즈 이상) → <span class="val">0점 감점</span>
-과도기 세대 (Intel 10~11세대, Ryzen 3000시리즈)       → <span class="val">-5점 감점</span>
-구형 세대 (Intel 8~9세대, Ryzen 1000~2000시리즈)       → <span class="val">-10점 감점</span>
-노후 세대 (Intel 7세대 이하, 구형 AMD)                 → <span class="val">-15점 감점</span>
-    </div>
-
-    <h3>CPU 조합별 감점 예시</h3>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>모델</th><th>세대 구분</th><th>등급감점</th><th>세대감점</th><th>CPU 감점 합계</th></tr></thead>
-        <tbody>
-          <tr><td>i9-13900K</td><td>최신 세대</td><td>0</td><td>0</td><td><strong>0점 (감점 없음)</strong></td></tr>
-          <tr><td>i7-14700K</td><td>최신 세대</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
-          <tr><td>i7-1360P</td><td>최신 세대 (노트북)</td><td>-5</td><td>0</td><td><strong>-5점</strong></td></tr>
-          <tr><td>i5-12400</td><td>최신 세대</td><td>-15</td><td>0</td><td><strong>-15점</strong></td></tr>
-          <tr><td>i7-9700</td><td>구형 세대</td><td>-5</td><td>-10</td><td><strong>-15점</strong></td></tr>
-          <tr><td>i5-8500</td><td>구형 세대</td><td>-15</td><td>-10</td><td><strong>-25점</strong></td></tr>
-          <tr><td>i7-7700</td><td>노후 세대</td><td>-5</td><td>-15</td><td><strong>-20점</strong></td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 3. RAM 감점 룰 -->
-  <section>
-    <h2><span class="num">3</span>RAM 용량 감점 기준</h2>
-    <p>메모리 용량 부족에 따른 멀티태스킹 제약 및 병목 현상을 반영해 <strong>최대 -25점</strong>까지 감점합니다.</p>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>RAM 용량</th><th>감점 점수</th><th>영향도</th><th>평가</th></tr></thead>
-        <tbody>
-          <tr><td>32GB 이상</td><td><strong>0점 (감점 없음)</strong></td><td>대용량 3D 및 개발 작업 원활</td><td><span class="badge b-green">최적</span></td></tr>
-          <tr><td>16GB</td><td><strong>-10점 감점</strong></td><td>일반 사무용 및 가벼운 멀티태스킹 적합</td><td><span class="badge b-primary">보통</span></td></tr>
-          <tr><td>8GB</td><td><strong>-20점 감점</strong></td><td>브라우저 탭 다수 실행 시 물리 메모리 부족</td><td><span class="badge b-yellow">주의</span></td></tr>
-          <tr><td>8GB 미만</td><td><strong>-25점 감점</strong></td><td>기본 OS 구동 외 심각한 메모리 병목</td><td><span class="badge b-red">부족</span></td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 4. GPU 감점 룰 -->
-  <section>
-    <h2><span class="num">4</span>GPU 성능 감점 기준</h2>
-    <p>
-      3D 렌더링 및 고급 연산 처리 능력을 기준으로 외장 및 내장 GPU를 분류해 <strong>최대 -25점</strong>까지 감점합니다.
-      GPU 정보가 감지되지 않거나 없는 경우 기본적으로 내장 그래픽 수준인 -25점을 감점합니다.
-    </p>
-
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>등급</th><th>제품군 구분</th><th>대표 모델</th><th>감점 점수</th><th>적합 작업</th></tr></thead>
-        <tbody>
-          <tr class="tier-S"><td>S</td><td>최상위 외장 GPU</td><td>RTX 4070~4090, RTX A4000~A6000</td><td><strong>0점 (감점 없음)</strong></td><td>3D 그래픽, AI 연산, VR</td></tr>
-          <tr class="tier-A"><td>A</td><td>메인스트림 외장 GPU</td><td>RTX 3060~3070, RTX 2060, RTX A2000</td><td><strong>-5점 감점</strong></td><td>중급 개발, CAD 설계</td></tr>
-          <tr class="tier-B"><td>B</td><td>엔트리 외장 GPU</td><td>GTX 1660, GTX 1060, RX 6600</td><td><strong>-15점 감점</strong></td><td>기본 CAD, 그래픽 보조</td></tr>
-          <tr class="tier-C"><td>C</td><td>내장 그래픽 및 기타</td><td>Intel Iris Xe, UHD Graphics, Vega, GPU 없음</td><td><strong>-25점 감점</strong></td><td>오피스 사무, 문서 작업</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 5. 종합 점수 감점 사례 -->
-  <section>
-    <h2><span class="num">5</span>감점법 종합 점수 계산 실사례</h2>
-    <div class="tbl-wrap">
-      <table>
-        <thead>
-          <tr><th>모델명</th><th>CPU 사양 (감점)</th><th>RAM 사양 (감점)</th><th>GPU 사양 (감점)</th><th>연식 (감점)</th><th>감점 총합</th><th>최종 점수</th></tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>HP ZBook Fury 16</td><td>Ryzen 9 7900X (0)</td><td>64GB (0)</td><td>NVIDIA RTX A2000 (-5)</td><td>2년차 (-6)</td><td>-11</td><td><strong>89점</strong></td>
-          </tr>
-          <tr>
-            <td>Dell Precision 5680</td><td>i9-13900K (0)</td><td>64GB (0)</td><td>NVIDIA RTX 4070 (0)</td><td>2년차 (-6)</td><td>-6</td><td><strong>94점</strong></td>
-          </tr>
-          <tr>
-            <td>LG Gram 17 Pro</td><td>i7-14700K (-5)</td><td>32GB (0)</td><td>NVIDIA RTX 4060 (-5)</td><td>1년차 (-3)</td><td>-13</td><td><strong>87점</strong></td>
-          </tr>
-          <tr>
-            <td>LG Gram 16</td><td>i7-1360P (-5)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-49</td><td><strong>51점</strong></td>
-          </tr>
-          <tr>
-            <td>Samsung Galaxy Book 3</td><td>i5-1340P (-15)</td><td>16GB (-10)</td><td>Intel Iris Xe (-25)</td><td>3년차 (-9)</td><td>-59</td><td><strong>41점</strong></td>
-          </tr>
-          <tr>
-            <td>HP EliteBook 840</td><td>Ryzen 5 5600X (-15)</td><td>16GB (-10)</td><td>AMD Radeon Vega (-25)</td><td>4년차 (-12)</td><td>-62</td><td><strong>38점</strong></td>
-          </tr>
-          <tr>
-            <td>HP ProDesk 400 G5</td><td>i3-8100 (-35)</td><td>8GB (-20)</td><td>Intel UHD 630 (-25)</td><td>5년 이상 (-15)</td><td>-95</td><td><strong>10점(보존)</strong></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 6. 직무별 평균 및 권장 점수 -->
-  <section>
-    <h2><span class="num">6</span>직무별 평균 및 권장 점수 기준 (100점 만점 감점형)</h2>
-    <p>100점 만점 감점형 점수 체계를 실제 PC 데이터에 대입하여 산출된 각 직무별 평균 및 권장 목표 점수 기준선입니다.</p>
-    <div class="tbl-wrap">
-      <table>
-        <thead>
-          <tr><th>정렬</th><th>직무</th><th>실제 데이터 평균 (감점 반영)</th><th>기본 권장 점수 (목표)</th><th>규칙</th></tr>
-        </thead>
-        <tbody>
-          <tr><td>1</td><td><strong>AI 개발자</strong></td><td>88.0점</td><td>95점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>2</td><td><strong>편집 디자이너</strong></td><td>80.2점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>3</td><td><strong>3D 디자이너</strong></td><td>78.4점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>4</td><td><strong>UXUI 디자이너</strong></td><td>72.7점</td><td>70점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>5</td><td><strong>3D 개발자</strong></td><td>67.8점</td><td>90점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>6</td><td><strong>프로그램 개발자</strong></td><td>67.3점</td><td>80점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>7</td><td><strong>BIM모델러</strong></td><td>62.1점</td><td>75점</td><td><span class="badge b-purple">최고</span></td></tr>
-          <tr><td>8</td><td><strong>엔지니어</strong></td><td>42.9점</td><td>60점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>9</td><td><strong>웹 개발자</strong></td><td>39.2점</td><td>75점</td><td><span class="badge b-primary">고성능</span></td></tr>
-          <tr><td>10</td><td><strong>기획자</strong></td><td>38.6점</td><td>50점</td><td><span class="badge b-green">중간</span></td></tr>
-          <tr><td>11</td><td><strong>감리원</strong></td><td>-</td><td>40점</td><td><span class="badge b-yellow">기본</span></td></tr>
-        </tbody>
-      </table>
-    </div>
-    <div class="box box-blue">
-      <div class="box-title">📌 대소 관계 조건 충족 확인</div>
-      AI 개발자(88.0) &gt; 편집 디자이너(80.2) &gt; 3D 디자이너(78.4) &gt; UXUI 디자이너(72.7) &gt; 3D 개발자(67.8) &gt; 프로그램 개발자(67.3) &gt; BIM모델러(62.1) &gt; 엔지니어(42.9) &gt; 웹 개발자(39.2) &gt; 기획자(38.6) ✅
-    </div>
-  </section>
-
-  <!-- 7. 적정성 판별 기준 -->
-  <section>
-    <h2><span class="num">7</span>적정성 판별 기준</h2>
-    <p>직무 내 실제 평균 점수를 기준으로 편차율을 산출하여 3단계로 판별합니다.</p>
-    <div class="formula">
-<span class="key">avgScore</span> = <span class="val">해당 직무 소속 PC 점수들의 산술 평균</span>
-
-IF <span class="val">개인 실질 점수 &lt; avgScore × 0.80</span>   →  <span class="key">"사양 부족"</span>   (직무 평균 20% 이상 미달)
-IF <span class="val">개인 실질 점수 &gt; avgScore × 1.30</span>   →  <span class="key">"오버스펙"</span>   (직무 평균 30% 이상 초과)
-ELSE                                      →  <span class="key">"적정"</span>
-    </div>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>판별 결과</th><th>조건</th><th>권장 조치</th></tr></thead>
-        <tbody>
-          <tr><td><span class="badge b-red">사양 부족</span></td><td>실질 점수 &lt; 직무 평균 × 0.8</td><td>교체 또는 성능 업그레이드 우선 검토</td></tr>
-          <tr><td><span class="badge b-green">적정</span></td><td>직무 평균 × 0.8 ≤ 실질 점수 ≤ 직무 평균 × 1.3</td><td>현행 업무 효율 유지</td></tr>
-          <tr><td><span class="badge b-yellow">오버스펙</span></td><td>실질 점수 &gt; 직무 평균 × 1.3</td><td>과스펙 장비 회수 또는 필요 부서 재배치</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <!-- 8. 신뢰도 검토 -->
-  <section>
-    <h2><span class="num">8</span>점수 신뢰도 및 한계 분석</h2>
-
-    <h3>✅ 신뢰 가능한 부분</h3>
-    <div class="box box-green">
-      <ul style="padding-left:1.25rem;margin:0;line-height:2.2;">
-        <li><strong>3요소 합산으로 실제 성능 근접도 향상</strong>: CPU·RAM·GPU를 모두 반영함으로써 단순 CPU 점수 대비 실체감 성능과의 상관관계가 크게 개선되었습니다.</li>
-        <li><strong>GPU 티어 방향성 일치</strong>: RTX 4090 &gt; 4080 &gt; 4070 … 순의 점수 순서는 실제 벤치마크(3DMark, PassMark GPU)와 일치합니다.</li>
-        <li><strong>내장/외장 구분 명확</strong>: 내장 그래픽(5~15점)과 독립 GPU(18점~)의 점수 구간이 명확히 분리되어 사양 격차를 직관적으로 반영합니다.</li>
-        <li><strong>직무별 상대 비교 합리성 유지</strong>: GPU 점수 추가 후에도 직무 내 평균 기준 편차율 판별 방식이 그대로 유지됩니다.</li>
-      </ul>
-    </div>
-
-    <h3>⚠️ 여전히 남아있는 한계점</h3>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>한계 항목</th><th>내용</th><th>영향도</th></tr></thead>
-        <tbody>
-          <tr>
-            <td><strong>노트북 TDP 미반영</strong></td>
-            <td>i7-1360P (노트북 28W)와 i7-13700K (데스크탑 125W)는 같은 세대지만 실제 성능 차이가 큽니다. 현재는 동일 점수가 부여됩니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-          <tr>
-            <td><strong>SSD 유형 미반영</strong></td>
-            <td>NVMe SSD와 HDD의 체감 속도 차이는 크지만 점수에 포함되지 않습니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-          <tr>
-            <td><strong>GPU 세부 파생 모델 한계</strong></td>
-            <td>RTX 4060 Laptop과 RTX 4060 Desktop은 성능 차이가 있으나 동일 점수(50점)를 받습니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-          <tr>
-            <td><strong>GPU 세대 보정 미적용</strong></td>
-            <td>CPU와 달리 GPU는 세대 보정 없이 모델명 매핑 방식만 사용됩니다. 향후 세대별 보정을 검토할 수 있습니다.</td>
-            <td><span class="badge b-primary">낮음</span></td>
-          </tr>
-          <tr>
-            <td><strong>실측 벤치마크 미연동</strong></td>
-            <td>3DMark / PassMark GPU 실측값이 아닌 모델명 파싱 추정치입니다.</td>
-            <td><span class="badge b-yellow">중간</span></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div class="box box-blue">
-      <div class="box-title">💡 종합 신뢰도 평가</div>
-      GPU 점수 반영 후 <strong>특히 디자이너·개발자와 같은 그래픽 집약적 직무의 적정성 판별 정확도가 대폭 향상</strong>되었습니다.
-      다만 노트북 TDP, SSD 유형 등 추가 변수를 향후 보완하면 신뢰도를 더 끌어올릴 수 있습니다.
-      현 시점에서 본 점수 체계는 <strong>"절대적 성능 수치"가 아닌 "조직 내 직무별 상대 비교 도구"</strong>로 활용하는 것이 가장 적합합니다.
-    </div>
-  </section>
-
-  <!-- 9. 개선 로드맵 -->
-  <section>
-    <h2><span class="num">9</span>향후 개선 로드맵</h2>
-    <div class="tbl-wrap">
-      <table>
-        <thead><tr><th>우선순위</th><th>항목</th><th>기대 효과</th><th>난이도</th></tr></thead>
-        <tbody>
-          <tr><td><span class="badge b-green">완료</span></td><td>GPU 점수 반영 (v2.0)</td><td>그래픽 직무 신뢰도 대폭 향상</td><td>중</td></tr>
-          <tr><td><span class="badge b-yellow">권장</span></td><td>SSD 유형별 점수 추가 (NVMe/SATA/HDD)</td><td>실체감 체감 속도 반영</td><td>하</td></tr>
-          <tr><td><span class="badge b-yellow">권장</span></td><td>노트북/데스크탑 TDP 보정</td><td>모바일 CPU 과대평가 방지</td><td>중</td></tr>
-          <tr><td><span class="badge b-primary">선택</span></td><td>PassMark / 3DMark 실측 DB 내장 연동</td><td>추정치 → 실측값 전환</td><td>상</td></tr>
-          <tr><td><span class="badge b-primary">선택</span></td><td>직무별 항목 가중치 커스터마이징</td><td>조직 특성 맞춤 정밀 점수화</td><td>중</td></tr>
-          <tr><td><span class="badge b-primary">선택</span></td><td>RMM 에이전트 실시간 자원 점유율 연동</td><td>실사용 기반 교체 우선순위 추천</td><td>상</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </section>
-
-  <footer>
-    <p>HM ITAM — PC 사양 적정성 분석 기획서 v2.0 (GPU 반영) &nbsp;·&nbsp; 2026. 05. 28</p>
-    <p style="margin-top:0.25rem;">내부 검토용 문서입니다. 무단 외부 배포를 금합니다.</p>
-  </footer>
-
-</div>
-</body>
-</html>
--- a/README.md
+++ b/README.md
@@ -9,6 +9,14 @@
    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
+5. **RED–GREEN–Refactor 개발 원칙**:
+    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
+    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
+    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
+    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
+    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
+    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
+    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.

 ---

@@ -28,29 +36,8 @@

 ### 🎨 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).
+👉 **[디자인 가이드 바로가기 (design_rule.md)](./design_rule.md)**

-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**: 사용자의 오입력(실수로 바깥을 클릭하여 입력 내용이 날아가는 현상)을 방지하기 위해 **모달 바깥 영역(Overlay) 클릭 시 모달이 닫히지 않도록** 설정합니다. 닫기는 오직 'ESC' 키 또는 명시적인 'X' 및 '닫기' 버튼을 통해서만 가능합니다.
-        *   **Layout**: `detail.png` 기준의 2열 그리드 시스템을 권장하며, 하단 우측에 액션 버튼(닫기, 저장 등)을 배치합니다.

--- a/SampleData_PC.xlsx
+++ b/SampleData_PC.xlsx
--- a/SampleData_SVR.xlsx
+++ b/SampleData_SVR.xlsx
--- a/backupDB_20260602.xlsx
+++ b/backupDB_20260602.xlsx
--- a/db_init.js
+++ b/db_init.js
@@ -1,176 +0,0 @@
-import mysql from 'mysql2/promise';
-import dotenv from 'dotenv';
-
-dotenv.config();
-
-const { DB_HOST, DB_USER, DB_PASS, DB_NAME, DB_PORT } = process.env;
-
-async function initDB() {
-  const connection = await mysql.createConnection({
-    host: DB_HOST,
-    user: DB_USER,
-    password: DB_PASS,
-    database: DB_NAME,
-    port: parseInt(DB_PORT || '3306'),
-    multipleStatements: true
-  });
-
-  console.log('🔄 DB 초기화 시작 (영문 표준 스키마 적용)...');
-
-  const tablesToDrop = [
-    'pc_assets', 'server_assets', 'storage_assets', 'equip_assets', 'mobile_assets', 
-    'sw_sub_assets', 'sw_perm_assets', 'cloud_assets', 'sw_users', 'asset_logs'
-  ];
-  for (const table of tablesToDrop) {
-    await connection.query(`DROP TABLE IF EXISTS ${table}`);
-  }
-
-  const createHardwareTable = (tableName, comment) => `
-    CREATE TABLE ${tableName} (
-      id VARCHAR(50) PRIMARY KEY,
-      corp VARCHAR(100),
-      asset_code VARCHAR(100),
-      purchase_date VARCHAR(50),
-      type VARCHAR(50),
-      detail_purpose VARCHAR(50),
-      purpose VARCHAR(255),
-      details TEXT,
-      current_org VARCHAR(255),
-      prev_org VARCHAR(255),
-      location VARCHAR(255),
-      manager_main VARCHAR(100),
-      manager_sub VARCHAR(100),
-      ip_address VARCHAR(100),
-      remote_tool VARCHAR(100),
-      server_id VARCHAR(100),
-      server_pw VARCHAR(100),
-      model_name VARCHAR(255),
-      mainboard VARCHAR(255) COMMENT '메인보드',
-      os VARCHAR(100),
-      cpu VARCHAR(255),
-      ram VARCHAR(100),
-      gpu VARCHAR(100),
-      storage1 VARCHAR(255),
-      storage2 VARCHAR(255),
-      storage3 VARCHAR(255),
-      monitoring VARCHAR(100),
-      price VARCHAR(100),
-      remarks TEXT,
-      storage_location VARCHAR(255),
-      status VARCHAR(50),
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `;
-
-  await connection.query(createHardwareTable('pc_assets', 'PC'));
-  await connection.query(createHardwareTable('server_assets', 'Server'));
-  await connection.query(createHardwareTable('storage_assets', 'Storage'));
-  await connection.query(createHardwareTable('equip_assets', 'Equipment'));
-  await connection.query(createHardwareTable('mobile_assets', 'Mobile'));
-
-  await connection.query(`
-    CREATE TABLE sw_sub_assets (
-      id VARCHAR(50) PRIMARY KEY,
-      corp VARCHAR(100) COMMENT '구매법인',
-      category VARCHAR(100) COMMENT '분야',
-      dept VARCHAR(100) COMMENT '부서',
-      product_name VARCHAR(255) COMMENT '제품명',
-      license_type VARCHAR(100) COMMENT '라이선스 유형',
-      quantity INT COMMENT '수량',
-      price VARCHAR(100) COMMENT '금액',
-      purchase_date VARCHAR(50) COMMENT '구매일',
-      start_date VARCHAR(50) COMMENT '시작일',
-      expiry_date VARCHAR(50) COMMENT '만료일',
-      vendor VARCHAR(255) COMMENT '구매업체',
-      remarks TEXT COMMENT '비고',
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `);
-
-  await connection.query(`
-    CREATE TABLE sw_perm_assets (
-      id VARCHAR(50) PRIMARY KEY,
-      corp VARCHAR(100) COMMENT '구매법인',
-      category VARCHAR(100) COMMENT '분야',
-      dept VARCHAR(100) COMMENT '부서',
-      product_name VARCHAR(255) COMMENT '제품명',
-      license_key VARCHAR(255) COMMENT '라이선스 키',
-      quantity INT COMMENT '수량',
-      price VARCHAR(100) COMMENT '금액',
-      purchase_date VARCHAR(50) COMMENT '구매일',
-      start_date VARCHAR(50) COMMENT '시작일',
-      expiry_date VARCHAR(50) COMMENT '만료일',
-      vendor VARCHAR(255) COMMENT '구매업체',
-      remarks TEXT COMMENT '비고',
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `);
-
-  await connection.query(`
-    CREATE TABLE cloud_assets (
-      id VARCHAR(50) PRIMARY KEY,
-      platform_name VARCHAR(100),
-      corp VARCHAR(100),
-      dept VARCHAR(100),
-      product_name VARCHAR(255),
-      account_name VARCHAR(255),
-      pay_method VARCHAR(100),
-      pay_day VARCHAR(50),
-      card_num VARCHAR(100),
-      monthly_fee VARCHAR(100),
-      remarks TEXT,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `);
-
-  await connection.query(`
-    CREATE TABLE sw_users (
-      id INT AUTO_INCREMENT PRIMARY KEY,
-      sw_id VARCHAR(50),
-      corp VARCHAR(100),
-      dept VARCHAR(100),
-      position VARCHAR(50),
-      user_name VARCHAR(100),
-      usage_period VARCHAR(100),
-      doc_name VARCHAR(255),
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `);
-
-  await connection.query(`
-    CREATE TABLE asset_logs (
-      id INT AUTO_INCREMENT PRIMARY KEY,
-      asset_id VARCHAR(50),
-      log_date VARCHAR(50),
-      log_user VARCHAR(100),
-      details TEXT,
-      cost DECIMAL(15,2) DEFAULT 0,
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `);
-
-  await connection.query(`
-    CREATE TABLE ops_domain_assets (
-      id VARCHAR(50) PRIMARY KEY,
-      type VARCHAR(50) COMMENT '유형',
-      corp VARCHAR(100) COMMENT '법인',
-      service_name VARCHAR(255) COMMENT '서비스명',
-      domain_name VARCHAR(255) COMMENT '관리도메인',
-      start_date VARCHAR(50) COMMENT '시작일',
-      expiry_date VARCHAR(50) COMMENT '만료일',
-      price VARCHAR(100) COMMENT '금액',
-      manager_main VARCHAR(100) COMMENT '담당자',
-      manager_sub VARCHAR(100) COMMENT '담당자(부)',
-      remarks TEXT COMMENT '비고',
-      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
-    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-  `);
-
-  console.log('✅ 모든 테이블이 영문 표준 스키마로 재생성되었습니다.');
-  await connection.end();
-}
-
-initDB().catch(err => {
-  console.error('❌ DB 초기화 실패:', err);
-  process.exit(1);
-});
--- a/docs/plans/ITAM_RMM_Integration_Plan.md
+++ b/docs/plans/ITAM_RMM_Integration_Plan.md
--- a/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
+++ b/docs/plans/IT_Asset_RMM_System_Report_Detailed.md
--- a/docs/plans/PC_사양_개선_기획서.html
+++ b/docs/plans/PC_사양_개선_기획서.html
--- a/docs/plans/PLAN_ASSET_HISTORY.md
+++ b/docs/plans/PLAN_ASSET_HISTORY.md
@@ -0,0 +1,60 @@
+# 자산 이력 누적 관리 시스템 (Cumulative Asset History System) 구현 계획
+
+본 문서는 자산의 라이프사이클(조직, 사용자, 용도, 상태 변동)을 체계적으로 추적하고 누적 관리하기 위한 기술적 설계 및 단계별 구현 계획을 담고 있습니다.
+
+## 1. 목적
+- 자산 정보 수정 시 중요 변경 사항을 자동으로 감지하여 이력(Log)화
+- 과거부터 현재까지의 변동 사항을 타임라인 형태로 시각화하여 자산 흐름 파악
+- 데이터 정합성을 위해 서버 측에서 변경 전/후 스냅샷 비교 방식 채택
+
+## 2. 관리 대상 이력 (Watch Fields)
+다음 항목의 변경이 발생할 경우 이력을 자동 생성합니다.
+1. **조직 변동**: `current_dept` (현 사용조직) ↔ `previous_dept` 업데이트 포함
+2. **사용자 변동**: `user_current` (현 사용자) ↔ `previous_user` 업데이트 포함
+3. **용도 변경**: `asset_type`, `current_role` (예: 개인PC -> 공용PC)
+4. **상태 변경**: `hw_status` (예: 운영 -> 수리, 재고 -> 폐기 등)
+
+## 3. 기술 설계 (Technical Design)
+
+### A. 데이터베이스 (DB)
+- **대상 테이블**: `asset_history`
+- **컬럼 구조 활용 및 보완**:
+    - `asset_id`: 대상 자산 식별자
+    - `event_type`: 변경 유형 (DEPT_CHANGE, USER_CHANGE, ROLE_CHANGE, STATUS_CHANGE)
+    - `details`: "상태 변경: 운영 -> 수리" 와 같이 읽기 쉬운 문자열 저장
+    - `cost`: 관련 비용 발생 시 기록 (수리비 등)
+    - `log_user`: 변경을 수행한 작업자
+    - `log_date`: 변경 발생 일시
+
+### B. 백엔드 (Server-side Logic)
+- **위치**: `server.js` 의 `POST /api/asset/:category/save` 엔드포인트
+- **동작 흐름**:
+    1. **Snapshot**: 인서트/업데이트 수행 전, 기존 DB의 데이터를 `SELECT`하여 메모리에 저장.
+    2. **Comparison**: 요청된 신규 데이터와 기존 데이터를 필드별로 대조.
+    3. **Auto-logging**: 변경점이 발견되면 `asset_history` 테이블에 즉시 인서트.
+    4. **Transaction**: 모든 로그 생성이 자산 저장과 하나의 트랜잭션으로 묶여야 함.
+
+### C. 프론트엔드 (UI/UX)
+- **위치**: `HWModal.ts` 우측 `modal-history-area`
+- **개선 사항**:
+    - `renderHistory()` 함수를 고도화하여 이벤트 타입별 아이콘/컬러 적용.
+    - "이전 값 ➔ 이후 값" 형태의 직관적인 레이아웃 도입.
+    - 스크롤을 통한 무제한 누적 이력 조회 지원.
+
+## 4. 단계별 구현 로직
+
+### 1단계: 서버 로직 고도화
+- `server.js`에 비교 함수(`compareAndLog`) 구현.
+- 각 자산 카테고리별 저장 로직에 비교 로직 삽입.
+
+### 2단계: DB 데이터 마이그레이션 (필요시)
+- 기존 자산의 `current_dept` 등을 `previous_dept`로 밀어내는 로직 점검.
+
+### 3단계: UI 타임라인 렌더링 개선
+- `modal.css`에 이력 전용 스타일(이벤트 뱃지 등) 추가.
+- `HWModal.ts`에서 최신 로그를 실시간으로 다시 불러오는 로직 확인.
+
+## 5. 검증 계획
+- **자동 감지 테스트**: 상태 변경 후 저장 시 우측 이력에 즉시 한 줄이 추가되는지 확인.
+- **다중 변경 테스트**: 조직과 사용자를 동시에 변경했을 때 두 개의 로그가 생성되는지 확인.
+- **데이터 무결성**: 수정을 취소하거나 저장 실패 시 로그가 남지 않는지(Transaction) 확인.
--- a/docs/plans/PROJECT_GUIDE.md
+++ b/docs/plans/PROJECT_GUIDE.md
--- a/docs/plans/design_rule.md
+++ b/docs/plans/design_rule.md
@@ -0,0 +1,48 @@
+# 🎨 ITAM 시스템 디자인 가이드 (Design Guide)
+
+본 문서는 ITAM(IT Asset Management System)의 시각적 일관성과 사용자 경험을 유지하기 위한 핵심 디자인 원칙을 정의합니다.
+
+---
+
+### 1. 디자인 철학 (Design Philosophy)
+*   **Minimalist & Stark**: Vercel 스타일의 극도로 간결하고 현대적인 디자인을 지향합니다.
+*   **Achromatic Base**: 블랙(#171717)과 화이트를 기본으로 하며, 정보의 구분은 얇은 헤어라인(#ebebeb)을 사용합니다.
+*   **Fluid & Responsive**: 고정된 픽셀 대신 화면 크기에 비례하여 UI 밀도가 변하는 유동적 스케일링 시스템을 적용합니다.
+
+### 2. 타이포그래피 및 자간 (Typography & Letter-spacing)
+*   **Font Family**: `Pretendard` 단일 폰트를 사용합니다.
+*   **Letter-spacing**: 모든 텍스트에 `-0.02em` (-2%) 자간을 적용하여 밀도 있는 가독성을 확보합니다.
+*   **Typography Scale**:
+    *   **XS**: `clamp(10px, 1.2vmin + 0.2vw, 15px)` - 보조 텍스트
+    *   **SM**: `clamp(12px, 1.4vmin + 0.3vw, 18px)` - 필터, 일반 라벨, 테이블 헤더
+    *   **Base**: `clamp(14px, 1.6vmin + 0.4vw, 22px)` - 본문, 테이블 데이터
+    *   **MD**: `clamp(18px, 2.5vmin + 0.5vw, 30px)` - 섹션 소제목
+    *   **LG**: `clamp(24px, 4vmin + 0.6vw, 48px)` - 페이지 대제목
+    *   **XL**: `clamp(32px, 6vmin + 0.8vw, 72px)` - 핵심 통계 지표
+*   **Layout Units**:
+    *   **Header Height**: `clamp(50px, 8vmin, 90px)`
+    *   **Base Spacing**: `clamp(0.75rem, 3vmin, 3rem)`
+    *   **Radius**: `clamp(6px, 1.5vmin, 16px)`
+
+### 3. 컬러 팔레트 (Vercel Stark Palette)
+*   **Primary**: `#171717` (Stark Black) - 텍스트, 주요 버튼, 강조 요소.
+*   **Secondary**: `#888888` (Mute) - 보조 텍스트, 비활성 아이콘.
+*   **Border**: `#ebebeb` (Hairline) - 정보 구분선.
+*   **Background**: `#ffffff` (Canvas), `#fafafa` (Soft), `#f5f5f5` (Soft 2).
+*   **Accents**: Blue(`#0070f3`), Orange(`#f5a623`), Danger(`#ee0000`).
+
+### 4. 컴포넌트 및 레이아웃 규칙 (Component Rules)
+*   **Header & Navigation**:
+    *   상단 1열 통합 바 형태를 유지하며, GNB와 LNB를 동일 라인에 배치하여 공간을 효율적으로 사용합니다.
+*   **Unified Filter Bar**:
+    *   검색창과 필터는 상단 타이틀 바로 아래(기존 액션 버튼 라인)까지 올려서 배치합니다.
+    *   **Action Group**: '자산 추가', '부품 마스터' 등의 주요 액션 버튼은 검색창과 같은 라인의 최우측에 정렬합니다.
+*   **Dashboard**:
+    *   **Single-Screen View**: 1920*1080(또는 1920*919) 해상도에서 스크롤 없이 한 화면에 핵심 정보가 모두 보이도록 최적화합니다.
+    *   **Fixed Charts**: 차트 내부 숫자나 요소에 애니메이션(`animation: false`) 및 플로팅 레이블을 배제하여 정적인 안정성을 확보합니다.
+*   **Footer**:
+    *   화면 최하단에 위치하며, 텍스트는 **우측 정렬(Right-aligned)**합니다.
+    *   상단에 1px 헤어라인 구분선을 가집니다.
+*   **Security & UX**:
+    *   **Text Selection**: 사용자의 실수에 의한 UI 드래그 방지를 위해 입력창(`input`, `textarea`)을 제외한 전체 영역의 텍스트 선택을 차단합니다.
+    *   **View Toggle**: '서버' 탭 등 특정 탭에서만 '목록보기' 체크박스를 통해 뷰를 전환하며, 그 외 화면은 리스트 중심의 UI를 제공합니다.
--- a/docs/plans/implementation_plan.md
+++ b/docs/plans/implementation_plan.md
--- a/docs/plans/implementation_plan2
+++ b/docs/plans/implementation_plan2
--- a/docs/plans/implementation_plan3
+++ b/docs/plans/implementation_plan3
--- a/docs/plans/기능명세서.md
+++ b/docs/plans/기능명세서.md
--- a/92.png
+++ b/92.png
--- a/img/location_photo/IDC/서관202.png
+++ b/img/location_photo/IDC/서관202.png
--- a/index.html
+++ b/index.html
@@ -5,57 +5,21 @@
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>ITAM 자산관리 ERP</title>
+  <title>한맥가족 자산관리시스템</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
-  <link rel="stylesheet" href="/src/styles/common.css" />
-  <link rel="stylesheet" href="/src/styles/login.css" />
-  <link rel="stylesheet" href="/src/styles/guide.css" />
-  <link rel="stylesheet" href="/src/styles/modal.css" />
-  <link rel="stylesheet" href="/src/styles/dashboard.css" />
-  <link rel="stylesheet" href="/src/styles/table.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>
-  <!-- Login Screen -->
-  <div id="login-container" class="login-layout">
-    <div class="login-card">
-      <div class="login-header">
-        <img src="/image 92.png" alt="Logo" class="login-logo" />
-        <h2>ITAM 시스템</h2>
-        <p>자산 관리 포털에 오신 것을 환영합니다</p>
-      </div>
-      <div id="login-selection" class="login-selection">
-        <div class="role-card" data-role="admin">
-          <div class="role-icon">
-            <i data-lucide="settings"></i>
-          </div>
-          <h3>관리자</h3>
-          <p>시스템 설정 및 자산 마스터 관리</p>
-        </div>
-        <div class="role-card" data-role="user">
-          <div class="role-icon">
-            <i data-lucide="monitor"></i>
-          </div>
-          <h3>실무자</h3>
-          <p>자산 조회 및 현황 확인</p>
-        </div>
-      </div>
-      <div class="login-footer">
-        <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
-      </div>
-    </div>
-  </div>
-
  <div class="app-layout" id="app-layout" style="display: none;">
    <!-- Single-Line Integrated Header -->
    <header class="main-header">
      <div class="header-container" id="nav-container">
        <div class="brand">
          <img src="/image 92.png" alt="Logo" class="main-logo" />
-          <h1>자산관리시스템<span class="sub-title">(Digital Asset Control Hub System)</span></h1>
+          <h1>한맥자산관리시스템</h1>
        </div>

        <!-- Navigation (GNB + LNB in same row) -->
@@ -87,8 +51,7 @@

    <!-- Footer -->
    <footer class="main-footer">
-      <div id="secret-cloud-trigger" style="width: 20px; height: 20px; cursor: pointer; opacity: 0.1; background: #000; border-radius: 4px; position: absolute; left: 1rem;"></div>
-      <p>Powered by BARON Consultant Co,Ltd</p>
+      <p>&copy; 2026 BARON Consultant Co,Ltd. All rights reserved.</p>
    </footer>
  </div>

--- a/map_config.json
+++ b/map_config.json
--- a/map_editor.html
+++ b/map_editor.html
@@ -6,7 +6,7 @@
  <title>ITAM Map Coordinate Editor v3.0</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
 </head>
-<body style="margin: 0; display: flex; height: 100vh; overflow: hidden; font-family: sans-serif;">
+<body class="editor-body">

  <!-- Left: File Selector -->
  <div class="file-sidebar" id="file-sidebar">
@@ -22,7 +22,7 @@

  <!-- Right: Control Panel -->
  <div class="sidebar">
-    <h2>Map Editor <small style="font-size: 0.6em; color: #888;">v3.0</small></h2>
+    <h2>Map Editor <small class="editor-version">v3.0</small></h2>
    <div class="current-path" id="current-path">파일을 선택하세요</div>
    <p>
      드래그하여 구역을 정의하세요. 저장 버튼을 누르면 즉시 시스템에 반영됩니다.
@@ -31,8 +31,8 @@
    <div class="box-list" id="box-list"></div>

    <div class="actions">
-      <button id="btn-clear-all" class="btn btn-outline" style="height:38px;">전체 삭제</button>
-      <button id="btn-save-server" class="btn btn-primary" style="height:38px;">서버에 즉시 저장</button>
+      <button id="btn-clear-all" class="btn btn-outline">전체 삭제</button>
+      <button id="btn-save-server" class="btn btn-primary">서버에 즉시 저장</button>
      <div id="save-status"></div>
    </div>
  </div>
--- a/public/img/image_92.png
+++ b/public/img/image_92.png
--- a/public/img/location_photo/IDC/동관53.png
+++ b/public/img/location_photo/IDC/동관53.png
--- a/public/img/location_photo/IDC/동관54.png
+++ b/public/img/location_photo/IDC/동관54.png
--- a/public/img/location_photo/IDC/서관202.png
+++ b/public/img/location_photo/IDC/서관202.png
--- a/public/img/location_photo/IDC/서관203.png
+++ b/public/img/location_photo/IDC/서관203.png
--- a/public/img/location_photo/IDC/서관204.png
+++ b/public/img/location_photo/IDC/서관204.png
--- a/public/img/location_photo/IDC/서관205.png
+++ b/public/img/location_photo/IDC/서관205.png
--- a/public/img/location_photo/기술개발센터/서버실/서버실_1.png
+++ b/public/img/location_photo/기술개발센터/서버실/서버실_1.png
--- a/public/img/location_photo/기술개발센터/서버실/서버실_2.png
+++ b/public/img/location_photo/기술개발센터/서버실/서버실_2.png
--- a/public/img/location_photo/기술개발센터/센터내부/센터내부.png
+++ b/public/img/location_photo/기술개발센터/센터내부/센터내부.png
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_map_view_only.html
@@ -0,0 +1,354 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Center Chair Map (View Only)</title>
+  <style>
+    :root {
+      --ink: #152330;
+      --muted: #627286;
+      --paper: rgba(255,255,255,0.86);
+      --line: rgba(21,35,48,0.1);
+      --accent: #0f766e;
+      --bg: #edf2f6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
+        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
+      overflow: hidden;
+    }
+    .page {
+      min-height: 100vh;
+      padding: 0;
+    }
+    .shell {
+      min-height: 100vh;
+    }
+    .panel {
+      border-radius: 0;
+      border: none;
+      background: transparent;
+      backdrop-filter: none;
+      box-shadow: none;
+    }
+    .viewer {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+    }
+    .viewer-head {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      z-index: 2;
+      pointer-events: none;
+    }
+    .chip {
+      padding: 10px 12px;
+      border-radius: 16px;
+      background: rgba(255,255,255,0.82);
+      border: 1px solid rgba(255,255,255,0.94);
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
+      display: inline-block;
+    }
+    .viewer-actions {
+      position: absolute;
+      left: 16px;
+      top: 64px;
+      z-index: 2;
+    }
+    button {
+      border: none;
+      border-radius: 999px;
+      padding: 10px 14px;
+      font: inherit;
+      font-weight: 700;
+      cursor: pointer;
+      color: white;
+      background: linear-gradient(135deg, #0f766e, #115e59);
+      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
+    }
+    canvas {
+      width: 100vw;
+      height: 100vh;
+      display: block;
+      cursor: grab;
+    }
+    canvas.dragging { cursor: grabbing; }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <div class="shell">
+      <main class="panel viewer">
+        <div class="viewer-head">
+          <div class="chip" id="scale-chip"></div>
+        </div>
+        <div class="viewer-actions">
+          <button type="button" id="fit-btn">전체 맞춤</button>
+        </div>
+        <canvas id="canvas"></canvas>
+      </main>
+    </div>
+  </div>
+  <script src="./center_chair_people_payload.js?v=20260403a"></script>
+  <script>
+    const DATA = window.CHAIR_MAP_DATA;
+    function decodeSegments(base64) {
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+      return new Int32Array(bytes.buffer);
+    }
+    const bgTileRanges = DATA.bgTileRanges;
+    const bgSegValues = decodeSegments(DATA.bgSegsB64);
+    const chairSegValues = decodeSegments(DATA.chairSegsB64);
+    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
+      key, name, kind, start, count
+    }));
+    const meta = DATA.meta;
+    const world = meta.headerBounds;
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+    const scaleChip = document.getElementById("scale-chip");
+
+    // --- Added for Point Picking & Marker ---
+    const params = new URLSearchParams(window.location.search);
+    let markerX = params.get('markerX') ? parseFloat(params.get('markerX')) : null;
+    let markerY = params.get('markerY') ? parseFloat(params.get('markerY')) : null;
+
+    const chairGeometry = chairs.map((chair) => {
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      const path = new Path2D();
+      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
+        const offset = i * 4;
+        const x1 = chairSegValues[offset] / 10;
+        const y1 = chairSegValues[offset + 1] / 10;
+        const x2 = chairSegValues[offset + 2] / 10;
+        const y2 = chairSegValues[offset + 3] / 10;
+        path.moveTo(x1, y1);
+        path.lineTo(x2, y2);
+        minX = Math.min(minX, x1, x2);
+        minY = Math.min(minY, y1, y2);
+        maxX = Math.max(maxX, x1, x2);
+        maxY = Math.max(maxY, y1, y2);
+      }
+      return { ...chair, minX, minY, maxX, maxY, path };
+    });
+
+    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
+    let pixelRatio = window.devicePixelRatio || 1;
+    let dragging = false;
+    let dragStart = null;
+    let rafPending = false;
+
+    function resize() {
+      pixelRatio = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = Math.round(rect.width * pixelRatio);
+      canvas.height = Math.round(rect.height * pixelRatio);
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      fit();
+    }
+
+    function fit() {
+      const rect = canvas.getBoundingClientRect();
+      const width = world.maxX - world.minX;
+      const height = world.maxY - world.minY;
+      const pad = 36;
+      const scaleX = (rect.width - pad * 2) / width;
+      const scaleY = (rect.height - pad * 2) / height;
+      camera.scale = Math.min(scaleX, scaleY);
+      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
+      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
+      requestDraw();
+    }
+
+    function drawGrid(width, height) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(21,35,48,0.05)";
+      ctx.lineWidth = 1;
+      for (let x = 120; x < width; x += 120) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = 120; y < height; y += 120) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    function worldToScreen(x, y) {
+      return {
+        x: x * camera.scale + camera.offsetX,
+        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
+      };
+    }
+
+    function screenToWorld(x, y) {
+      return {
+        x: (x - camera.offsetX) / camera.scale,
+        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
+      };
+    }
+
+    function requestDraw() {
+      if (rafPending) return;
+      rafPending = true;
+      window.requestAnimationFrame(() => {
+        rafPending = false;
+        draw();
+      });
+    }
+
+    function applyWorldTransform() {
+      ctx.setTransform(
+        pixelRatio * camera.scale,
+        0,
+        0,
+        -pixelRatio * camera.scale,
+        pixelRatio * camera.offsetX,
+        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
+      );
+    }
+
+    function draw() {
+      const rect = canvas.getBoundingClientRect();
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      drawGrid(rect.width, rect.height);
+      
+      const viewA = screenToWorld(0, rect.height);
+      const viewB = screenToWorld(rect.width, 0);
+      const viewMinX = Math.min(viewA.x, viewB.x);
+      const viewMaxX = Math.max(viewA.x, viewB.x);
+      const viewMinY = Math.min(viewA.y, viewB.y);
+      const viewMaxY = Math.max(viewA.y, viewB.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
+      ctx.lineWidth = 1 / camera.scale;
+      const tileSize = meta.backgroundTileSize;
+      const tileMinX = Math.floor(viewMinX / tileSize);
+      const tileMaxX = Math.floor(viewMaxX / tileSize);
+      const tileMinY = Math.floor(viewMinY / tileSize);
+      const tileMaxY = Math.floor(viewMaxY / tileSize);
+      
+      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
+        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
+          const range = bgTileRanges[`${tx},${ty}`];
+          if (!range) continue;
+          const start = range[0];
+          const count = range[1];
+          for (let i = start; i < start + count; i += 1) {
+            const offset = i * 4;
+            const x1 = bgSegValues[offset] / 10;
+            const y1 = bgSegValues[offset + 1] / 10;
+            const x2 = bgSegValues[offset + 2] / 10;
+            const y2 = bgSegValues[offset + 3] / 10;
+            if (Math.max(x1, x2) < viewMinX || Math.min(x1, x2) > viewMaxX ||
+                Math.max(y1, y2) < viewMinY || Math.min(y1, y2) > viewMaxY) continue;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+          }
+        }
+      }
+
+      ctx.lineWidth = 1.35 / camera.scale;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      ctx.strokeStyle = "rgba(21, 149, 142, 0.8)";
+      for (const chair of chairGeometry) {
+        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
+        ctx.stroke(chair.path);
+      }
+
+      // --- Draw Marker ---
+      if (markerX !== null && markerY !== null) {
+        ctx.beginPath();
+        ctx.arc(markerX, markerY, 50 / camera.scale, 0, Math.PI * 2);
+        ctx.fillStyle = "rgba(220, 38, 38, 0.8)";
+        ctx.fill();
+        ctx.strokeStyle = "#fff";
+        ctx.lineWidth = 10 / camera.scale;
+        ctx.stroke();
+      }
+      ctx.restore();
+      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
+    }
+
+    canvas.addEventListener("pointerdown", (event) => {
+      dragging = true;
+      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
+      canvas.classList.add("dragging");
+    });
+    window.addEventListener("pointerup", (event) => {
+      if (dragging && dragStart) {
+        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+        if (move < 4) {
+          const rect = canvas.getBoundingClientRect();
+          const mx = event.clientX - rect.left;
+          const my = event.clientY - rect.top;
+          const worldPos = screenToWorld(mx, my);
+          markerX = worldPos.x;
+          markerY = worldPos.y;
+          requestDraw();
+          
+          // Notify parent window
+          window.parent.postMessage({ 
+            type: 'PICK_LOCATION', 
+            x: markerX.toFixed(2), 
+            y: markerY.toFixed(2) 
+          }, '*');
+        }
+      }
+      dragging = false;
+      dragStart = null;
+      canvas.classList.remove("dragging");
+    });
+    window.addEventListener("pointermove", (event) => {
+      if (dragging && dragStart) {
+        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
+        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
+        requestDraw();
+      }
+    });
+    canvas.addEventListener("wheel", (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const mx = event.clientX - rect.left;
+      const my = event.clientY - rect.top;
+      const before = screenToWorld(mx, my);
+      const factor = event.deltaY < 0 ? 1.08 : 0.92;
+      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
+      const after = worldToScreen(before.x, before.y);
+      camera.offsetX += mx - after.x;
+      camera.offsetY += my - after.y;
+      requestDraw();
+    }, { passive: false });
+    document.getElementById("fit-btn").addEventListener("click", fit);
+    window.addEventListener("resize", resize);
+    resize();
+  </script>
+</body>
+</html>
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_data.json
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map.html
@@ -0,0 +1,931 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>center chair people map</title>
+  <style>
+    :root {
+      --ink: #152330;
+      --muted: #627286;
+      --paper: rgba(255,255,255,0.86);
+      --line: rgba(21,35,48,0.1);
+      --accent: #0f766e;
+      --bg: #edf2f6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
+        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
+    }
+    .page {
+      min-height: 100vh;
+      padding: 0;
+    }
+    .shell {
+      min-height: 100vh;
+    }
+    .panel {
+      border-radius: 0;
+      border: none;
+      background: transparent;
+      backdrop-filter: none;
+      box-shadow: none;
+    }
+    .actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    button {
+      border: none;
+      border-radius: 999px;
+      padding: 10px 14px;
+      font: inherit;
+      font-weight: 700;
+      cursor: pointer;
+      color: white;
+      background: linear-gradient(135deg, #0f766e, #115e59);
+      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
+    }
+    button.alt {
+      color: var(--ink);
+      background: rgba(255,255,255,0.9);
+      border: 1px solid var(--line);
+      box-shadow: none;
+    }
+    .viewer {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+    }
+    .viewer-head {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      right: 16px;
+      z-index: 2;
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      pointer-events: none;
+    }
+    .chip {
+      padding: 10px 12px;
+      border-radius: 16px;
+      background: rgba(255,255,255,0.82);
+      border: 1px solid rgba(255,255,255,0.94);
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
+    }
+    .viewer-actions {
+      position: absolute;
+      left: 16px;
+      top: 64px;
+      z-index: 2;
+      display: flex;
+      gap: 8px;
+    }
+    .mapper {
+      position: absolute;
+      top: 76px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: min(94vw, 1320px);
+      max-height: min(56vh, 560px);
+      overflow: hidden;
+      z-index: 4;
+      border-radius: 20px;
+      background: rgba(234, 239, 247, 0.95);
+      border: 1px solid rgba(101, 119, 146, 0.22);
+      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
+      display: flex;
+      flex-direction: column;
+      backdrop-filter: blur(6px);
+    }
+    .hidden-off {
+      display: none !important;
+    }
+    .mapper-head {
+      padding: 10px 14px;
+      border-bottom: 1px solid rgba(101,119,146,0.18);
+      font-size: 12px;
+      color: #51607a;
+      font-weight: 700;
+      line-height: 1.35;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      background: rgba(255,255,255,0.6);
+    }
+    .mapper-head strong {
+      display: block;
+      color: #17243b;
+      font-size: 20px;
+      margin-bottom: 2px;
+    }
+    .mapper-head .alt {
+      padding: 8px 10px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .org-chart {
+      margin: 0;
+      padding: 14px;
+      overflow: auto;
+      display: grid;
+      gap: 12px;
+    }
+    .org-top {
+      margin: 0 auto;
+      width: min(100%, 420px);
+      border-radius: 14px;
+      overflow: hidden;
+      border: 1px solid rgba(67, 84, 118, 0.25);
+      background: #fff;
+    }
+    .org-top-title {
+      background: #1e2f4d;
+      color: #fff;
+      text-align: center;
+      font-size: 34px;
+      font-weight: 800;
+      line-height: 1.1;
+      padding: 16px 12px;
+      letter-spacing: -0.03em;
+    }
+    .org-top-members {
+      padding: 10px;
+      display: grid;
+      gap: 6px;
+      background: rgba(255,255,255,0.95);
+    }
+    .org-teams {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(160px, 1fr));
+      gap: 10px;
+      align-items: start;
+    }
+    .org-team {
+      border: 1px solid rgba(110, 126, 152, 0.25);
+      border-radius: 10px;
+      overflow: hidden;
+      background: rgba(255,255,255,0.95);
+      min-width: 0;
+    }
+    .org-team h4 {
+      margin: 0;
+      padding: 9px 10px;
+      font-size: 14px;
+      color: #21324e;
+      font-weight: 800;
+      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
+      background: rgba(240, 245, 252, 0.96);
+    }
+    .org-members {
+      padding: 7px;
+      display: grid;
+      gap: 6px;
+    }
+    .org-person {
+      border: 1px solid rgba(116, 133, 161, 0.25);
+      background: rgba(255,255,255,0.95);
+      border-radius: 8px;
+      padding: 6px 8px;
+      cursor: pointer;
+      transition: background 120ms ease, border-color 120ms ease;
+      min-width: 0;
+    }
+    .org-person.active {
+      border-color: rgba(15,118,110,0.6);
+      background: rgba(15,118,110,0.11);
+    }
+    .org-person.assigned {
+      border-color: rgba(37,99,235,0.5);
+      background: rgba(37,99,235,0.1);
+    }
+    .org-person strong {
+      display: block;
+      font-size: 13px;
+      line-height: 1.3;
+      color: #15233a;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .org-person small {
+      display: block;
+      color: #5a6a86;
+      font-size: 11px;
+      line-height: 1.25;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    @media (max-width: 980px) {
+      .mapper {
+        top: 72px;
+        width: min(96vw, 920px);
+        max-height: 58vh;
+      }
+      .viewer-actions {
+        top: 64px;
+        left: 12px;
+        right: 12px;
+        flex-wrap: wrap;
+      }
+      .mapper-head strong {
+        font-size: 16px;
+      }
+      .org-top-title {
+        font-size: 24px;
+      }
+      .org-teams {
+        grid-template-columns: repeat(3, minmax(150px, 1fr));
+      }
+    }
+    canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+      cursor: grab;
+    }
+    canvas.dragging { cursor: grabbing; }
+    .tooltip {
+      position: absolute;
+      min-width: 170px;
+      padding: 12px 14px;
+      border-radius: 16px;
+      background: rgba(17,24,39,0.94);
+      color: white;
+      pointer-events: none;
+      opacity: 0;
+      transform: translate(12px, 12px);
+      transition: opacity 120ms ease;
+      z-index: 3;
+    }
+    .tooltip.visible { opacity: 1; }
+    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
+    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <div class="shell">
+      <main class="panel viewer">
+        <div class="viewer-head">
+          <div class="chip" id="scale-chip"></div>
+          <div class="chip" id="hover-chip">chair hover: none</div>
+        </div>
+        <div class="viewer-actions">
+          <button type="button" id="fit-btn">전체 맞춤</button>
+          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
+        </div>
+        <aside class="mapper hidden-off">
+          <div class="mapper-head">
+            <div id="mapper-status">
+              <strong>조직 현황</strong>
+              <span>선택 인원 없음</span>
+            </div>
+            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
+          </div>
+          <div class="org-chart" id="org-chart"></div>
+        </aside>
+        <canvas id="canvas"></canvas>
+        <div class="tooltip" id="tooltip"></div>
+      </main>
+    </div>
+  </div>
+  <script src="./center_chair_people_payload.js?v=20260403a"></script>
+  <script>
+    const DATA = window.CHAIR_MAP_DATA;
+    function decodeSegments(base64) {
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+      return new Int32Array(bytes.buffer);
+    }
+    const bgTileRanges = DATA.bgTileRanges;
+    const bgSegValues = decodeSegments(DATA.bgSegsB64);
+    const chairSegValues = decodeSegments(DATA.chairSegsB64);
+    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
+      key, name, kind, start, count
+    }));
+    const meta = DATA.meta;
+    const world = meta.headerBounds;
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+    const tooltip = document.getElementById("tooltip");
+    const scaleChip = document.getElementById("scale-chip");
+    const hoverChip = document.getElementById("hover-chip");
+    const STORAGE_KEY = "ptc-chair-selection";
+    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
+    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
+    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
+    const clearAssignBtn = document.getElementById("clear-assign-btn");
+    const orgChartEl = document.getElementById("org-chart");
+    const mapperStatus = document.getElementById("mapper-status");
+    // Prevent stale auto-highlights from previous sessions.
+    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
+    localStorage.removeItem(ASSIGN_STORAGE_KEY);
+    const placed = new Set();
+    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
+    let chairAssignments = {};
+    let activePersonId = null;
+    const ORG_TEMPLATE = {
+      top: {
+        name: "총괄기획실",
+        count: 53,
+        members: [
+          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
+          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
+        ],
+      },
+      teams: [
+        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
+        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
+        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
+        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
+        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
+        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
+        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
+      ],
+    };
+    const chairGeometry = chairs.map((chair) => {
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      const path = new Path2D();
+      const hitSegments = new Float32Array(chair.count * 4);
+      let segCursor = 0;
+      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
+        const offset = i * 4;
+        const x1 = chairSegValues[offset] / 10;
+        const y1 = chairSegValues[offset + 1] / 10;
+        const x2 = chairSegValues[offset + 2] / 10;
+        const y2 = chairSegValues[offset + 3] / 10;
+        path.moveTo(x1, y1);
+        path.lineTo(x2, y2);
+        hitSegments[segCursor] = x1;
+        hitSegments[segCursor + 1] = y1;
+        hitSegments[segCursor + 2] = x2;
+        hitSegments[segCursor + 3] = y2;
+        segCursor += 4;
+        minX = Math.min(minX, x1, x2);
+        minY = Math.min(minY, y1, y2);
+        maxX = Math.max(maxX, x1, x2);
+        maxY = Math.max(maxY, y1, y2);
+      }
+      return {
+        ...chair,
+        minX,
+        minY,
+        maxX,
+        maxY,
+        area: Math.max(1, (maxX - minX) * (maxY - minY)),
+        path,
+        hitSegments,
+      };
+    });
+    function renumberChairKeys(chairItems) {
+      if (!chairItems.length) return;
+      const heights = chairItems
+        .map((chair) => Math.max(1, chair.maxY - chair.minY))
+        .sort((a, b) => a - b);
+      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
+      const rowTolerance = Math.max(40, medianHeight * 0.9);
+
+      const sorted = [...chairItems].sort((a, b) => {
+        const ay = (a.minY + a.maxY) * 0.5;
+        const by = (b.minY + b.maxY) * 0.5;
+        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
+        const ax = (a.minX + a.maxX) * 0.5;
+        const bx = (b.minX + b.maxX) * 0.5;
+        return ax - bx; // left -> right
+      });
+
+      sorted.forEach((chair, index) => {
+        chair.key = String(index + 1);
+        chair.seatNo = index + 1;
+      });
+    }
+    renumberChairKeys(chairGeometry);
+    const PICK_GRID_SIZE = 1800;
+    const chairPickGrid = new Map();
+    function pickGridKey(gx, gy) {
+      return `${gx},${gy}`;
+    }
+    chairGeometry.forEach((chair, index) => {
+      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
+      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
+      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
+      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
+      for (let gx = minGX; gx <= maxGX; gx += 1) {
+        for (let gy = minGY; gy <= maxGY; gy += 1) {
+          const key = pickGridKey(gx, gy);
+          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
+          chairPickGrid.get(key).push(index);
+        }
+      }
+    });
+
+    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
+    let pixelRatio = window.devicePixelRatio || 1;
+    let pointer = { x: 0, y: 0 };
+    let dragging = false;
+    let dragStart = null;
+    let hovered = null;
+    let rafPending = false;
+
+    function normalizePeople(raw) {
+      return raw
+        .map((person, index) => {
+          if (!person || !person.name) return null;
+          return {
+            id: person.id || `person-${index + 1}`,
+            name: String(person.name).trim(),
+            dept: String(person.dept || "").trim(),
+            title: String(person.title || "").trim(),
+          };
+        })
+        .filter(Boolean);
+    }
+
+    function createTemplatePeople() {
+      const generated = [];
+      let seq = 1;
+      ORG_TEMPLATE.top.members.forEach((member) => {
+        generated.push({
+          id: `org-${seq++}`,
+          name: member.name,
+          dept: member.dept,
+          title: member.title,
+        });
+      });
+      ORG_TEMPLATE.teams.forEach((team) => {
+        team.members.forEach((name) => {
+          generated.push({
+            id: `org-${seq++}`,
+            name,
+            dept: team.name,
+            title: "선임",
+          });
+        });
+      });
+      return generated;
+    }
+
+    people = normalizePeople(people);
+    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
+    if (!templateReady) {
+      people = createTemplatePeople();
+      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
+    }
+    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
+    chairAssignments = Object.fromEntries(
+      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
+        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
+      ))
+    );
+    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
+
+    function persistPeople() {
+      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
+    }
+
+    function persistAssignments() {
+      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
+    }
+
+    function persistActivePerson() {
+      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
+      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
+    }
+
+    function assignmentCount() {
+      return Object.keys(chairAssignments).length;
+    }
+
+    function getPersonById(id) {
+      return people.find((person) => person.id === id) || null;
+    }
+
+    function getChairByPerson(personId) {
+      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
+        if (assignedPersonId === personId) return chairKey;
+      }
+      return null;
+    }
+
+    function renderPeopleList() {
+      const activePerson = getPersonById(activePersonId);
+      const countText = `${assignmentCount()} / ${people.length} 매칭`;
+      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
+
+      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
+      const personCard = (person, roleText) => {
+        if (!person) return "";
+        const chairKey = getChairByPerson(person.id);
+        const assignedClass = chairKey ? " assigned" : "";
+        const activeClass = person.id === activePersonId ? " active" : "";
+        return `
+          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
+            <strong>${person.name}</strong>
+            <small>${person.title || roleText || "-"}</small>
+            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
+          </article>
+        `;
+      };
+
+      const topHtml = ORG_TEMPLATE.top.members
+        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
+        .join("");
+
+      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
+        const membersHtml = team.members
+          .map((name) => personCard(findPerson(team.name, name), "선임"))
+          .join("");
+        return `
+          <section class="org-team">
+            <h4>${team.name} (${team.count})</h4>
+            <div class="org-members">${membersHtml}</div>
+          </section>
+        `;
+      }).join("");
+
+      orgChartEl.innerHTML = `
+        <section class="org-top">
+          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
+          <div class="org-top-members">${topHtml}</div>
+        </section>
+        <section class="org-teams">${teamsHtml}</section>
+      `;
+    }
+
+    function worldToScreen(x, y) {
+      return {
+        x: x * camera.scale + camera.offsetX,
+        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
+      };
+    }
+
+    function screenToWorld(x, y) {
+      return {
+        x: (x - camera.offsetX) / camera.scale,
+        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
+      };
+    }
+
+    function resize() {
+      pixelRatio = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = Math.round(rect.width * pixelRatio);
+      canvas.height = Math.round(rect.height * pixelRatio);
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      fit();
+    }
+
+    function fit() {
+      const rect = canvas.getBoundingClientRect();
+      const width = world.maxX - world.minX;
+      const height = world.maxY - world.minY;
+      const pad = 36;
+      const scaleX = (rect.width - pad * 2) / width;
+      const scaleY = (rect.height - pad * 2) / height;
+      camera.scale = Math.min(scaleX, scaleY);
+      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
+      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
+      requestDraw();
+    }
+
+    function drawGrid(width, height) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(21,35,48,0.05)";
+      ctx.lineWidth = 1;
+      for (let x = 120; x < width; x += 120) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = 120; y < height; y += 120) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    function pickChair(screenX, screenY) {
+      const threshold = 12;
+      const pointerWorld = screenToWorld(screenX, screenY);
+      const thresholdWorld = threshold / camera.scale;
+      const thresholdWorldSq = thresholdWorld * thresholdWorld;
+      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
+      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
+      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
+      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
+      const candidateIndexes = [];
+      const seen = new Set();
+      for (let gx = minGX; gx <= maxGX; gx += 1) {
+        for (let gy = minGY; gy <= maxGY; gy += 1) {
+          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
+          if (!candidates) continue;
+          for (const index of candidates) {
+            if (seen.has(index)) continue;
+            seen.add(index);
+            candidateIndexes.push(index);
+          }
+        }
+      }
+      let best = null;
+      for (const index of candidateIndexes) {
+        const chair = chairGeometry[index];
+        if (
+          pointerWorld.x < chair.minX - thresholdWorld ||
+          pointerWorld.x > chair.maxX + thresholdWorld ||
+          pointerWorld.y < chair.minY - thresholdWorld ||
+          pointerWorld.y > chair.maxY + thresholdWorld
+        ) continue;
+        let distSq = Infinity;
+        for (let i = 0; i < chair.hitSegments.length; i += 4) {
+          const x1 = chair.hitSegments[i];
+          const y1 = chair.hitSegments[i + 1];
+          const x2 = chair.hitSegments[i + 2];
+          const y2 = chair.hitSegments[i + 3];
+          const dx = x2 - x1;
+          const dy = y2 - y1;
+          const len2 = dx * dx + dy * dy;
+          let segDistSq;
+          if (len2 === 0) {
+            const px = pointerWorld.x - x1;
+            const py = pointerWorld.y - y1;
+            segDistSq = px * px + py * py;
+          } else {
+            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
+            t = Math.max(0, Math.min(1, t));
+            const lx = x1 + t * dx;
+            const ly = y1 + t * dy;
+            const px = pointerWorld.x - lx;
+            const py = pointerWorld.y - ly;
+            segDistSq = px * px + py * py;
+          }
+          if (segDistSq < distSq) distSq = segDistSq;
+          if (distSq <= thresholdWorldSq * 0.3) break;
+        }
+        if (distSq > thresholdWorldSq) continue;
+        const dist = Math.sqrt(distSq) * camera.scale;
+
+        if (!best) {
+          best = { chair, dist };
+          continue;
+        }
+
+        const distGap = dist - best.dist;
+        if (distGap < -0.75) {
+          best = { chair, dist };
+          continue;
+        }
+
+        if (Math.abs(distGap) <= 2) {
+          const areaGap = chair.area - best.chair.area;
+          if (areaGap < -1) {
+            best = { chair, dist };
+            continue;
+          }
+
+          if (
+            Math.abs(areaGap) <= 1 &&
+            chair.kind === "block" &&
+            best.chair.kind !== "block"
+          ) {
+            best = { chair, dist };
+          }
+        }
+      }
+
+      return best ? best.chair : null;
+    }
+
+    function renderTooltip() {
+      if (!hovered) {
+        tooltip.classList.remove("visible");
+        hoverChip.textContent = "chair hover: none";
+        return;
+      }
+      hoverChip.textContent = `chair hover: ${hovered.name}`;
+      tooltip.innerHTML = `
+        <strong>${hovered.name}</strong>
+        <div>chair key: ${hovered.key}</div>
+        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
+        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
+      `;
+      tooltip.style.left = `${pointer.x + 14}px`;
+      tooltip.style.top = `${pointer.y + 14}px`;
+      tooltip.classList.add("visible");
+    }
+
+    function requestDraw() {
+      if (rafPending) return;
+      rafPending = true;
+      window.requestAnimationFrame(() => {
+        rafPending = false;
+        draw();
+      });
+    }
+
+    function applyWorldTransform() {
+      ctx.setTransform(
+        pixelRatio * camera.scale,
+        0,
+        0,
+        -pixelRatio * camera.scale,
+        pixelRatio * camera.offsetX,
+        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
+      );
+    }
+
+    function draw() {
+      const rect = canvas.getBoundingClientRect();
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      drawGrid(rect.width, rect.height);
+      const viewA = screenToWorld(0, rect.height);
+      const viewB = screenToWorld(rect.width, 0);
+      const viewMinX = Math.min(viewA.x, viewB.x);
+      const viewMaxX = Math.max(viewA.x, viewB.x);
+      const viewMinY = Math.min(viewA.y, viewB.y);
+      const viewMaxY = Math.max(viewA.y, viewB.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
+      ctx.lineWidth = 1 / camera.scale;
+      const tileSize = meta.backgroundTileSize;
+      const tileMinX = Math.floor(viewMinX / tileSize);
+      const tileMaxX = Math.floor(viewMaxX / tileSize);
+      const tileMinY = Math.floor(viewMinY / tileSize);
+      const tileMaxY = Math.floor(viewMaxY / tileSize);
+      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
+        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
+          const range = bgTileRanges[`${tx},${ty}`];
+          if (!range) continue;
+          const start = range[0];
+          const count = range[1];
+          for (let i = start; i < start + count; i += 1) {
+            const offset = i * 4;
+            const x1 = bgSegValues[offset] / 10;
+            const y1 = bgSegValues[offset + 1] / 10;
+            const x2 = bgSegValues[offset + 2] / 10;
+            const y2 = bgSegValues[offset + 3] / 10;
+            if (
+              Math.max(x1, x2) < viewMinX ||
+              Math.min(x1, x2) > viewMaxX ||
+              Math.max(y1, y2) < viewMinY ||
+              Math.min(y1, y2) > viewMaxY
+            ) continue;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+          }
+        }
+      }
+      ctx.restore();
+
+      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.lineWidth = 1.45 / camera.scale;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      for (const chair of chairGeometry) {
+        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
+        const active = hovered && hovered.key === chair.key;
+        const selected = placed.has(chair.key);
+        const assignedPersonId = chairAssignments[chair.key];
+        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
+        const assigned = Boolean(assignedPersonId);
+        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
+        ctx.strokeStyle = activePersonChair
+          ? "rgba(234, 179, 8, 1)"
+          : assigned
+            ? "rgba(37, 99, 235, 0.98)"
+            : selected
+              ? "rgba(220, 38, 38, 0.98)"
+              : active
+                ? "rgba(15, 118, 110, 0.98)"
+                : chair.kind === "group"
+                  ? "rgba(16, 134, 149, 0.74)"
+                  : "rgba(21, 149, 142, 0.8)";
+        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
+        ctx.stroke(chair.path);
+      }
+      ctx.restore();
+
+      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
+      renderTooltip();
+    }
+
+    function persistPlaced() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
+    }
+
+    canvas.addEventListener("pointerdown", (event) => {
+      dragging = true;
+      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
+      canvas.classList.add("dragging");
+    });
+
+    window.addEventListener("pointerup", (event) => {
+      if (dragging && dragStart) {
+        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+        if (move < 4) {
+          const rect = canvas.getBoundingClientRect();
+          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
+          if (picked) {
+            if (placed.has(picked.key)) placed.delete(picked.key);
+            else placed.add(picked.key);
+            persistPlaced();
+            if (activePersonId) {
+              const currentChair = getChairByPerson(activePersonId);
+              if (chairAssignments[picked.key] === activePersonId) {
+                delete chairAssignments[picked.key];
+              } else {
+                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
+                chairAssignments[picked.key] = activePersonId;
+              }
+              persistAssignments();
+              renderPeopleList();
+            }
+          }
+        }
+      }
+      dragging = false;
+      dragStart = null;
+      canvas.classList.remove("dragging");
+      requestDraw();
+    });
+
+    window.addEventListener("pointermove", (event) => {
+      const rect = canvas.getBoundingClientRect();
+      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      if (dragging && dragStart) {
+        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
+        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
+      }
+      requestDraw();
+    });
+
+    canvas.addEventListener("wheel", (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const mx = event.clientX - rect.left;
+      const my = event.clientY - rect.top;
+      const before = screenToWorld(mx, my);
+      const factor = event.deltaY < 0 ? 1.08 : 0.92;
+      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
+      const after = worldToScreen(before.x, before.y);
+      camera.offsetX += mx - after.x;
+      camera.offsetY += my - after.y;
+      requestDraw();
+    }, { passive: false });
+
+    document.getElementById("fit-btn").addEventListener("click", fit);
+    document.getElementById("clear-btn").addEventListener("click", () => {
+      placed.clear();
+      persistPlaced();
+      requestDraw();
+    });
+    clearAssignBtn.addEventListener("click", () => {
+      chairAssignments = {};
+      persistAssignments();
+      renderPeopleList();
+      requestDraw();
+    });
+    orgChartEl.addEventListener("click", (event) => {
+      const item = event.target.closest(".org-person[data-person-id]");
+      if (!item) return;
+      const personId = item.getAttribute("data-person-id");
+      activePersonId = personId === activePersonId ? null : personId;
+      persistActivePerson();
+      renderPeopleList();
+      requestDraw();
+    });
+    window.addEventListener("resize", resize);
+    renderPeopleList();
+    resize();
+  </script>
+</body>
+</html>
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_6f.html
@@ -0,0 +1,932 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>center chair people map 6f</title>
+  <style>
+    :root {
+      --ink: #152330;
+      --muted: #627286;
+      --paper: rgba(255,255,255,0.86);
+      --line: rgba(21,35,48,0.1);
+      --accent: #0f766e;
+      --bg: #edf2f6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
+        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
+    }
+    .page {
+      min-height: 100vh;
+      padding: 0;
+    }
+    .shell {
+      min-height: 100vh;
+    }
+    .panel {
+      border-radius: 0;
+      border: none;
+      background: transparent;
+      backdrop-filter: none;
+      box-shadow: none;
+    }
+    .actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    button {
+      border: none;
+      border-radius: 999px;
+      padding: 10px 14px;
+      font: inherit;
+      font-weight: 700;
+      cursor: pointer;
+      color: white;
+      background: linear-gradient(135deg, #0f766e, #115e59);
+      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
+    }
+    button.alt {
+      color: var(--ink);
+      background: rgba(255,255,255,0.9);
+      border: 1px solid var(--line);
+      box-shadow: none;
+    }
+    .viewer {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+    }
+    .viewer-head {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      right: 16px;
+      z-index: 2;
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      pointer-events: none;
+    }
+    .chip {
+      padding: 10px 12px;
+      border-radius: 16px;
+      background: rgba(255,255,255,0.82);
+      border: 1px solid rgba(255,255,255,0.94);
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
+    }
+    .viewer-actions {
+      position: absolute;
+      left: 16px;
+      top: 64px;
+      z-index: 2;
+      display: flex;
+      gap: 8px;
+    }
+    .mapper {
+      position: absolute;
+      top: 76px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: min(94vw, 1320px);
+      max-height: min(56vh, 560px);
+      overflow: hidden;
+      z-index: 4;
+      border-radius: 20px;
+      background: rgba(234, 239, 247, 0.95);
+      border: 1px solid rgba(101, 119, 146, 0.22);
+      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
+      display: flex;
+      flex-direction: column;
+      backdrop-filter: blur(6px);
+    }
+    .hidden-off {
+      display: none !important;
+    }
+    .mapper-head {
+      padding: 10px 14px;
+      border-bottom: 1px solid rgba(101,119,146,0.18);
+      font-size: 12px;
+      color: #51607a;
+      font-weight: 700;
+      line-height: 1.35;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      background: rgba(255,255,255,0.6);
+    }
+    .mapper-head strong {
+      display: block;
+      color: #17243b;
+      font-size: 20px;
+      margin-bottom: 2px;
+    }
+    .mapper-head .alt {
+      padding: 8px 10px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .org-chart {
+      margin: 0;
+      padding: 14px;
+      overflow: auto;
+      display: grid;
+      gap: 12px;
+    }
+    .org-top {
+      margin: 0 auto;
+      width: min(100%, 420px);
+      border-radius: 14px;
+      overflow: hidden;
+      border: 1px solid rgba(67, 84, 118, 0.25);
+      background: #fff;
+    }
+    .org-top-title {
+      background: #1e2f4d;
+      color: #fff;
+      text-align: center;
+      font-size: 34px;
+      font-weight: 800;
+      line-height: 1.1;
+      padding: 16px 12px;
+      letter-spacing: -0.03em;
+    }
+    .org-top-members {
+      padding: 10px;
+      display: grid;
+      gap: 6px;
+      background: rgba(255,255,255,0.95);
+    }
+    .org-teams {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(160px, 1fr));
+      gap: 10px;
+      align-items: start;
+    }
+    .org-team {
+      border: 1px solid rgba(110, 126, 152, 0.25);
+      border-radius: 10px;
+      overflow: hidden;
+      background: rgba(255,255,255,0.95);
+      min-width: 0;
+    }
+    .org-team h4 {
+      margin: 0;
+      padding: 9px 10px;
+      font-size: 14px;
+      color: #21324e;
+      font-weight: 800;
+      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
+      background: rgba(240, 245, 252, 0.96);
+    }
+    .org-members {
+      padding: 7px;
+      display: grid;
+      gap: 6px;
+    }
+    .org-person {
+      border: 1px solid rgba(116, 133, 161, 0.25);
+      background: rgba(255,255,255,0.95);
+      border-radius: 8px;
+      padding: 6px 8px;
+      cursor: pointer;
+      transition: background 120ms ease, border-color 120ms ease;
+      min-width: 0;
+    }
+    .org-person.active {
+      border-color: rgba(15,118,110,0.6);
+      background: rgba(15,118,110,0.11);
+    }
+    .org-person.assigned {
+      border-color: rgba(37,99,235,0.5);
+      background: rgba(37,99,235,0.1);
+    }
+    .org-person strong {
+      display: block;
+      font-size: 13px;
+      line-height: 1.3;
+      color: #15233a;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .org-person small {
+      display: block;
+      color: #5a6a86;
+      font-size: 11px;
+      line-height: 1.25;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    @media (max-width: 980px) {
+      .mapper {
+        top: 72px;
+        width: min(96vw, 920px);
+        max-height: 58vh;
+      }
+      .viewer-actions {
+        top: 64px;
+        left: 12px;
+        right: 12px;
+        flex-wrap: wrap;
+      }
+      .mapper-head strong {
+        font-size: 16px;
+      }
+      .org-top-title {
+        font-size: 24px;
+      }
+      .org-teams {
+        grid-template-columns: repeat(3, minmax(150px, 1fr));
+      }
+    }
+    canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+      cursor: grab;
+    }
+    canvas.dragging { cursor: grabbing; }
+    .tooltip {
+      position: absolute;
+      min-width: 170px;
+      padding: 12px 14px;
+      border-radius: 16px;
+      background: rgba(17,24,39,0.94);
+      color: white;
+      pointer-events: none;
+      opacity: 0;
+      transform: translate(12px, 12px);
+      transition: opacity 120ms ease;
+      z-index: 3;
+    }
+    .tooltip.visible { opacity: 1; }
+    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
+    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <div class="shell">
+      <main class="panel viewer">
+        <div class="viewer-head">
+          <div class="chip" id="scale-chip"></div>
+          <div class="chip" id="hover-chip">chair hover: none</div>
+        </div>
+        <div class="viewer-actions">
+          <button type="button" id="fit-btn">전체 맞춤</button>
+          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
+        </div>
+        <aside class="mapper hidden-off">
+          <div class="mapper-head">
+            <div id="mapper-status">
+              <strong>조직 현황</strong>
+              <span>선택 인원 없음</span>
+            </div>
+            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
+          </div>
+          <div class="org-chart" id="org-chart"></div>
+        </aside>
+        <canvas id="canvas"></canvas>
+        <div class="tooltip" id="tooltip"></div>
+      </main>
+    </div>
+  </div>
+  <script src="./center_chair_people_payload_6f.js"></script>
+  <script>
+    const DATA = window.CHAIR_MAP_DATA;
+    function decodeSegments(base64) {
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+      return new Int32Array(bytes.buffer);
+    }
+    const bgTileRanges = DATA.bgTileRanges;
+    const bgSegValues = decodeSegments(DATA.bgSegsB64);
+    const chairSegValues = decodeSegments(DATA.chairSegsB64);
+    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
+      key, name, kind, start, count
+    }));
+    const meta = DATA.meta;
+    const world = meta.headerBounds;
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+    const tooltip = document.getElementById("tooltip");
+    const scaleChip = document.getElementById("scale-chip");
+    const hoverChip = document.getElementById("hover-chip");
+    const STORAGE_KEY = "ptc-chair-selection";
+    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
+    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
+    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
+    const clearAssignBtn = document.getElementById("clear-assign-btn");
+    const orgChartEl = document.getElementById("org-chart");
+    const mapperStatus = document.getElementById("mapper-status");
+    // Prevent stale auto-highlights from previous sessions.
+    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
+    localStorage.removeItem(ASSIGN_STORAGE_KEY);
+    const placed = new Set();
+    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
+    let chairAssignments = {};
+    let activePersonId = null;
+    const ORG_TEMPLATE = {
+      top: {
+        name: "총괄기획실",
+        count: 53,
+        members: [
+          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
+          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
+        ],
+      },
+      teams: [
+        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
+        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
+        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
+        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
+        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
+        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
+        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
+      ],
+    };
+    const chairGeometry = chairs.map((chair) => {
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      const path = new Path2D();
+      const hitSegments = new Float32Array(chair.count * 4);
+      let segCursor = 0;
+      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
+        const offset = i * 4;
+        const x1 = chairSegValues[offset] / 10;
+        const y1 = chairSegValues[offset + 1] / 10;
+        const x2 = chairSegValues[offset + 2] / 10;
+        const y2 = chairSegValues[offset + 3] / 10;
+        path.moveTo(x1, y1);
+        path.lineTo(x2, y2);
+        hitSegments[segCursor] = x1;
+        hitSegments[segCursor + 1] = y1;
+        hitSegments[segCursor + 2] = x2;
+        hitSegments[segCursor + 3] = y2;
+        segCursor += 4;
+        minX = Math.min(minX, x1, x2);
+        minY = Math.min(minY, y1, y2);
+        maxX = Math.max(maxX, x1, x2);
+        maxY = Math.max(maxY, y1, y2);
+      }
+      return {
+        ...chair,
+        minX,
+        minY,
+        maxX,
+        maxY,
+        area: Math.max(1, (maxX - minX) * (maxY - minY)),
+        path,
+        hitSegments,
+      };
+    });
+    function renumberChairKeys(chairItems) {
+      if (!chairItems.length) return;
+      const heights = chairItems
+        .map((chair) => Math.max(1, chair.maxY - chair.minY))
+        .sort((a, b) => a - b);
+      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
+      const rowTolerance = Math.max(40, medianHeight * 0.9);
+
+      const sorted = [...chairItems].sort((a, b) => {
+        const ay = (a.minY + a.maxY) * 0.5;
+        const by = (b.minY + b.maxY) * 0.5;
+        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
+        const ax = (a.minX + a.maxX) * 0.5;
+        const bx = (b.minX + b.maxX) * 0.5;
+        return ax - bx; // left -> right
+      });
+
+      sorted.forEach((chair, index) => {
+        chair.key = String(index + 1);
+        chair.seatNo = index + 1;
+      });
+    }
+    renumberChairKeys(chairGeometry);
+    const PICK_GRID_SIZE = 1800;
+    const chairPickGrid = new Map();
+    function pickGridKey(gx, gy) {
+      return `${gx},${gy}`;
+    }
+    chairGeometry.forEach((chair, index) => {
+      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
+      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
+      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
+      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
+      for (let gx = minGX; gx <= maxGX; gx += 1) {
+        for (let gy = minGY; gy <= maxGY; gy += 1) {
+          const key = pickGridKey(gx, gy);
+          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
+          chairPickGrid.get(key).push(index);
+        }
+      }
+    });
+
+    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
+    let pixelRatio = window.devicePixelRatio || 1;
+    let pointer = { x: 0, y: 0 };
+    let dragging = false;
+    let dragStart = null;
+    let hovered = null;
+    let rafPending = false;
+
+    function normalizePeople(raw) {
+      return raw
+        .map((person, index) => {
+          if (!person || !person.name) return null;
+          return {
+            id: person.id || `person-${index + 1}`,
+            name: String(person.name).trim(),
+            dept: String(person.dept || "").trim(),
+            title: String(person.title || "").trim(),
+          };
+        })
+        .filter(Boolean);
+    }
+
+    function createTemplatePeople() {
+      const generated = [];
+      let seq = 1;
+      ORG_TEMPLATE.top.members.forEach((member) => {
+        generated.push({
+          id: `org-${seq++}`,
+          name: member.name,
+          dept: member.dept,
+          title: member.title,
+        });
+      });
+      ORG_TEMPLATE.teams.forEach((team) => {
+        team.members.forEach((name) => {
+          generated.push({
+            id: `org-${seq++}`,
+            name,
+            dept: team.name,
+            title: "선임",
+          });
+        });
+      });
+      return generated;
+    }
+
+    people = normalizePeople(people);
+    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
+    if (!templateReady) {
+      people = createTemplatePeople();
+      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
+    }
+    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
+    chairAssignments = Object.fromEntries(
+      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
+        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
+      ))
+    );
+    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
+
+    function persistPeople() {
+      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
+    }
+
+    function persistAssignments() {
+      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
+    }
+
+    function persistActivePerson() {
+      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
+      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
+    }
+
+    function assignmentCount() {
+      return Object.keys(chairAssignments).length;
+    }
+
+    function getPersonById(id) {
+      return people.find((person) => person.id === id) || null;
+    }
+
+    function getChairByPerson(personId) {
+      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
+        if (assignedPersonId === personId) return chairKey;
+      }
+      return null;
+    }
+
+    function renderPeopleList() {
+      const activePerson = getPersonById(activePersonId);
+      const countText = `${assignmentCount()} / ${people.length} 매칭`;
+      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
+
+      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
+      const personCard = (person, roleText) => {
+        if (!person) return "";
+        const chairKey = getChairByPerson(person.id);
+        const assignedClass = chairKey ? " assigned" : "";
+        const activeClass = person.id === activePersonId ? " active" : "";
+        return `
+          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
+            <strong>${person.name}</strong>
+            <small>${person.title || roleText || "-"}</small>
+            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
+          </article>
+        `;
+      };
+
+      const topHtml = ORG_TEMPLATE.top.members
+        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
+        .join("");
+
+      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
+        const membersHtml = team.members
+          .map((name) => personCard(findPerson(team.name, name), "선임"))
+          .join("");
+        return `
+          <section class="org-team">
+            <h4>${team.name} (${team.count})</h4>
+            <div class="org-members">${membersHtml}</div>
+          </section>
+        `;
+      }).join("");
+
+      orgChartEl.innerHTML = `
+        <section class="org-top">
+          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
+          <div class="org-top-members">${topHtml}</div>
+        </section>
+        <section class="org-teams">${teamsHtml}</section>
+      `;
+    }
+
+    function worldToScreen(x, y) {
+      return {
+        x: x * camera.scale + camera.offsetX,
+        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
+      };
+    }
+
+    function screenToWorld(x, y) {
+      return {
+        x: (x - camera.offsetX) / camera.scale,
+        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
+      };
+    }
+
+    function resize() {
+      pixelRatio = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = Math.round(rect.width * pixelRatio);
+      canvas.height = Math.round(rect.height * pixelRatio);
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      fit();
+    }
+
+    function fit() {
+      const rect = canvas.getBoundingClientRect();
+      const width = world.maxX - world.minX;
+      const height = world.maxY - world.minY;
+      const pad = 36;
+      const scaleX = (rect.width - pad * 2) / width;
+      const scaleY = (rect.height - pad * 2) / height;
+      camera.scale = Math.min(scaleX, scaleY);
+      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
+      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
+      requestDraw();
+    }
+
+    function drawGrid(width, height) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(21,35,48,0.05)";
+      ctx.lineWidth = 1;
+      for (let x = 120; x < width; x += 120) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = 120; y < height; y += 120) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    function pickChair(screenX, screenY) {
+      const threshold = 12;
+      const pointerWorld = screenToWorld(screenX, screenY);
+      const thresholdWorld = threshold / camera.scale;
+      const thresholdWorldSq = thresholdWorld * thresholdWorld;
+      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
+      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
+      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
+      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
+      const candidateIndexes = [];
+      const seen = new Set();
+      for (let gx = minGX; gx <= maxGX; gx += 1) {
+        for (let gy = minGY; gy <= maxGY; gy += 1) {
+          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
+          if (!candidates) continue;
+          for (const index of candidates) {
+            if (seen.has(index)) continue;
+            seen.add(index);
+            candidateIndexes.push(index);
+          }
+        }
+      }
+      let best = null;
+      for (const index of candidateIndexes) {
+        const chair = chairGeometry[index];
+        if (
+          pointerWorld.x < chair.minX - thresholdWorld ||
+          pointerWorld.x > chair.maxX + thresholdWorld ||
+          pointerWorld.y < chair.minY - thresholdWorld ||
+          pointerWorld.y > chair.maxY + thresholdWorld
+        ) continue;
+        let distSq = Infinity;
+        for (let i = 0; i < chair.hitSegments.length; i += 4) {
+          const x1 = chair.hitSegments[i];
+          const y1 = chair.hitSegments[i + 1];
+          const x2 = chair.hitSegments[i + 2];
+          const y2 = chair.hitSegments[i + 3];
+          const dx = x2 - x1;
+          const dy = y2 - y1;
+          const len2 = dx * dx + dy * dy;
+          let segDistSq;
+          if (len2 === 0) {
+            const px = pointerWorld.x - x1;
+            const py = pointerWorld.y - y1;
+            segDistSq = px * px + py * py;
+          } else {
+            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
+            t = Math.max(0, Math.min(1, t));
+            const lx = x1 + t * dx;
+            const ly = y1 + t * dy;
+            const px = pointerWorld.x - lx;
+            const py = pointerWorld.y - ly;
+            segDistSq = px * px + py * py;
+          }
+          if (segDistSq < distSq) distSq = segDistSq;
+          if (distSq <= thresholdWorldSq * 0.3) break;
+        }
+        if (distSq > thresholdWorldSq) continue;
+        const dist = Math.sqrt(distSq) * camera.scale;
+
+        if (!best) {
+          best = { chair, dist };
+          continue;
+        }
+
+        const distGap = dist - best.dist;
+        if (distGap < -0.75) {
+          best = { chair, dist };
+          continue;
+        }
+
+        if (Math.abs(distGap) <= 2) {
+          const areaGap = chair.area - best.chair.area;
+          if (areaGap < -1) {
+            best = { chair, dist };
+            continue;
+          }
+
+          if (
+            Math.abs(areaGap) <= 1 &&
+            chair.kind === "block" &&
+            best.chair.kind !== "block"
+          ) {
+            best = { chair, dist };
+          }
+        }
+      }
+
+      return best ? best.chair : null;
+    }
+
+    function renderTooltip() {
+      if (!hovered) {
+        tooltip.classList.remove("visible");
+        hoverChip.textContent = "chair hover: none";
+        return;
+      }
+      hoverChip.textContent = `chair hover: ${hovered.name}`;
+      tooltip.innerHTML = `
+        <strong>${hovered.name}</strong>
+        <div>chair key: ${hovered.key}</div>
+        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
+        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
+      `;
+      tooltip.style.left = `${pointer.x + 14}px`;
+      tooltip.style.top = `${pointer.y + 14}px`;
+      tooltip.classList.add("visible");
+    }
+
+    function requestDraw() {
+      if (rafPending) return;
+      rafPending = true;
+      window.requestAnimationFrame(() => {
+        rafPending = false;
+        draw();
+      });
+    }
+
+    function applyWorldTransform() {
+      ctx.setTransform(
+        pixelRatio * camera.scale,
+        0,
+        0,
+        -pixelRatio * camera.scale,
+        pixelRatio * camera.offsetX,
+        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
+      );
+    }
+
+    function draw() {
+      const rect = canvas.getBoundingClientRect();
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      drawGrid(rect.width, rect.height);
+      const viewA = screenToWorld(0, rect.height);
+      const viewB = screenToWorld(rect.width, 0);
+      const viewMinX = Math.min(viewA.x, viewB.x);
+      const viewMaxX = Math.max(viewA.x, viewB.x);
+      const viewMinY = Math.min(viewA.y, viewB.y);
+      const viewMaxY = Math.max(viewA.y, viewB.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
+      ctx.lineWidth = 1 / camera.scale;
+      const tileSize = meta.backgroundTileSize;
+      const tileMinX = Math.floor(viewMinX / tileSize);
+      const tileMaxX = Math.floor(viewMaxX / tileSize);
+      const tileMinY = Math.floor(viewMinY / tileSize);
+      const tileMaxY = Math.floor(viewMaxY / tileSize);
+      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
+        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
+          const range = bgTileRanges[`${tx},${ty}`];
+          if (!range) continue;
+          const start = range[0];
+          const count = range[1];
+          for (let i = start; i < start + count; i += 1) {
+            const offset = i * 4;
+            const x1 = bgSegValues[offset] / 10;
+            const y1 = bgSegValues[offset + 1] / 10;
+            const x2 = bgSegValues[offset + 2] / 10;
+            const y2 = bgSegValues[offset + 3] / 10;
+            if (
+              Math.max(x1, x2) < viewMinX ||
+              Math.min(x1, x2) > viewMaxX ||
+              Math.max(y1, y2) < viewMinY ||
+              Math.min(y1, y2) > viewMaxY
+            ) continue;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+          }
+        }
+      }
+      ctx.restore();
+
+      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.lineWidth = 1.45 / camera.scale;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      for (const chair of chairGeometry) {
+        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
+        const active = hovered && hovered.key === chair.key;
+        const selected = placed.has(chair.key);
+        const assignedPersonId = chairAssignments[chair.key];
+        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
+        const assigned = Boolean(assignedPersonId);
+        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
+        ctx.strokeStyle = activePersonChair
+          ? "rgba(234, 179, 8, 1)"
+          : assigned
+            ? "rgba(37, 99, 235, 0.98)"
+            : selected
+              ? "rgba(220, 38, 38, 0.98)"
+              : active
+                ? "rgba(15, 118, 110, 0.98)"
+                : chair.kind === "group"
+                  ? "rgba(16, 134, 149, 0.74)"
+                  : "rgba(21, 149, 142, 0.8)";
+        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
+        ctx.stroke(chair.path);
+      }
+      ctx.restore();
+
+      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
+      renderTooltip();
+    }
+
+    function persistPlaced() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
+    }
+
+    canvas.addEventListener("pointerdown", (event) => {
+      dragging = true;
+      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
+      canvas.classList.add("dragging");
+    });
+
+    window.addEventListener("pointerup", (event) => {
+      if (dragging && dragStart) {
+        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+        if (move < 4) {
+          const rect = canvas.getBoundingClientRect();
+          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
+          if (picked) {
+            if (placed.has(picked.key)) placed.delete(picked.key);
+            else placed.add(picked.key);
+            persistPlaced();
+            if (activePersonId) {
+              const currentChair = getChairByPerson(activePersonId);
+              if (chairAssignments[picked.key] === activePersonId) {
+                delete chairAssignments[picked.key];
+              } else {
+                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
+                chairAssignments[picked.key] = activePersonId;
+              }
+              persistAssignments();
+              renderPeopleList();
+            }
+          }
+        }
+      }
+      dragging = false;
+      dragStart = null;
+      canvas.classList.remove("dragging");
+      requestDraw();
+    });
+
+    window.addEventListener("pointermove", (event) => {
+      const rect = canvas.getBoundingClientRect();
+      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      if (dragging && dragStart) {
+        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
+        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
+      }
+      requestDraw();
+    });
+
+    canvas.addEventListener("wheel", (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const mx = event.clientX - rect.left;
+      const my = event.clientY - rect.top;
+      const before = screenToWorld(mx, my);
+      const factor = event.deltaY < 0 ? 1.08 : 0.92;
+      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
+      const after = worldToScreen(before.x, before.y);
+      camera.offsetX += mx - after.x;
+      camera.offsetY += my - after.y;
+      requestDraw();
+    }, { passive: false });
+
+    document.getElementById("fit-btn").addEventListener("click", fit);
+    document.getElementById("clear-btn").addEventListener("click", () => {
+      placed.clear();
+      persistPlaced();
+      requestDraw();
+    });
+    clearAssignBtn.addEventListener("click", () => {
+      chairAssignments = {};
+      persistAssignments();
+      renderPeopleList();
+      requestDraw();
+    });
+    orgChartEl.addEventListener("click", (event) => {
+      const item = event.target.closest(".org-person[data-person-id]");
+      if (!item) return;
+      const personId = item.getAttribute("data-person-id");
+      activePersonId = personId === activePersonId ? null : personId;
+      persistActivePerson();
+      renderPeopleList();
+      requestDraw();
+    });
+    window.addEventListener("resize", resize);
+    renderPeopleList();
+    resize();
+  </script>
+</body>
+</html>
+
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_7f.html
@@ -0,0 +1,932 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>center chair people map 7f</title>
+  <style>
+    :root {
+      --ink: #152330;
+      --muted: #627286;
+      --paper: rgba(255,255,255,0.86);
+      --line: rgba(21,35,48,0.1);
+      --accent: #0f766e;
+      --bg: #edf2f6;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "IBM Plex Sans KR", "Pretendard", sans-serif;
+      color: var(--ink);
+      background:
+        radial-gradient(circle at top left, rgba(15,118,110,0.11), transparent 22%),
+        linear-gradient(180deg, #f5f8fb 0%, #e8eef3 100%);
+    }
+    .page {
+      min-height: 100vh;
+      padding: 0;
+    }
+    .shell {
+      min-height: 100vh;
+    }
+    .panel {
+      border-radius: 0;
+      border: none;
+      background: transparent;
+      backdrop-filter: none;
+      box-shadow: none;
+    }
+    .actions {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+    button {
+      border: none;
+      border-radius: 999px;
+      padding: 10px 14px;
+      font: inherit;
+      font-weight: 700;
+      cursor: pointer;
+      color: white;
+      background: linear-gradient(135deg, #0f766e, #115e59);
+      box-shadow: 0 10px 22px rgba(15,118,110,0.18);
+    }
+    button.alt {
+      color: var(--ink);
+      background: rgba(255,255,255,0.9);
+      border: 1px solid var(--line);
+      box-shadow: none;
+    }
+    .viewer {
+      position: relative;
+      overflow: hidden;
+      min-height: 100vh;
+    }
+    .viewer-head {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      right: 16px;
+      z-index: 2;
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      pointer-events: none;
+    }
+    .chip {
+      padding: 10px 12px;
+      border-radius: 16px;
+      background: rgba(255,255,255,0.82);
+      border: 1px solid rgba(255,255,255,0.94);
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 700;
+      box-shadow: 0 8px 24px rgba(21,35,48,0.08);
+    }
+    .viewer-actions {
+      position: absolute;
+      left: 16px;
+      top: 64px;
+      z-index: 2;
+      display: flex;
+      gap: 8px;
+    }
+    .mapper {
+      position: absolute;
+      top: 76px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: min(94vw, 1320px);
+      max-height: min(56vh, 560px);
+      overflow: hidden;
+      z-index: 4;
+      border-radius: 20px;
+      background: rgba(234, 239, 247, 0.95);
+      border: 1px solid rgba(101, 119, 146, 0.22);
+      box-shadow: 0 18px 36px rgba(15, 23, 42, 0.2);
+      display: flex;
+      flex-direction: column;
+      backdrop-filter: blur(6px);
+    }
+    .hidden-off {
+      display: none !important;
+    }
+    .mapper-head {
+      padding: 10px 14px;
+      border-bottom: 1px solid rgba(101,119,146,0.18);
+      font-size: 12px;
+      color: #51607a;
+      font-weight: 700;
+      line-height: 1.35;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      background: rgba(255,255,255,0.6);
+    }
+    .mapper-head strong {
+      display: block;
+      color: #17243b;
+      font-size: 20px;
+      margin-bottom: 2px;
+    }
+    .mapper-head .alt {
+      padding: 8px 10px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .org-chart {
+      margin: 0;
+      padding: 14px;
+      overflow: auto;
+      display: grid;
+      gap: 12px;
+    }
+    .org-top {
+      margin: 0 auto;
+      width: min(100%, 420px);
+      border-radius: 14px;
+      overflow: hidden;
+      border: 1px solid rgba(67, 84, 118, 0.25);
+      background: #fff;
+    }
+    .org-top-title {
+      background: #1e2f4d;
+      color: #fff;
+      text-align: center;
+      font-size: 34px;
+      font-weight: 800;
+      line-height: 1.1;
+      padding: 16px 12px;
+      letter-spacing: -0.03em;
+    }
+    .org-top-members {
+      padding: 10px;
+      display: grid;
+      gap: 6px;
+      background: rgba(255,255,255,0.95);
+    }
+    .org-teams {
+      display: grid;
+      grid-template-columns: repeat(7, minmax(160px, 1fr));
+      gap: 10px;
+      align-items: start;
+    }
+    .org-team {
+      border: 1px solid rgba(110, 126, 152, 0.25);
+      border-radius: 10px;
+      overflow: hidden;
+      background: rgba(255,255,255,0.95);
+      min-width: 0;
+    }
+    .org-team h4 {
+      margin: 0;
+      padding: 9px 10px;
+      font-size: 14px;
+      color: #21324e;
+      font-weight: 800;
+      border-bottom: 1px solid rgba(110, 126, 152, 0.2);
+      background: rgba(240, 245, 252, 0.96);
+    }
+    .org-members {
+      padding: 7px;
+      display: grid;
+      gap: 6px;
+    }
+    .org-person {
+      border: 1px solid rgba(116, 133, 161, 0.25);
+      background: rgba(255,255,255,0.95);
+      border-radius: 8px;
+      padding: 6px 8px;
+      cursor: pointer;
+      transition: background 120ms ease, border-color 120ms ease;
+      min-width: 0;
+    }
+    .org-person.active {
+      border-color: rgba(15,118,110,0.6);
+      background: rgba(15,118,110,0.11);
+    }
+    .org-person.assigned {
+      border-color: rgba(37,99,235,0.5);
+      background: rgba(37,99,235,0.1);
+    }
+    .org-person strong {
+      display: block;
+      font-size: 13px;
+      line-height: 1.3;
+      color: #15233a;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .org-person small {
+      display: block;
+      color: #5a6a86;
+      font-size: 11px;
+      line-height: 1.25;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    @media (max-width: 980px) {
+      .mapper {
+        top: 72px;
+        width: min(96vw, 920px);
+        max-height: 58vh;
+      }
+      .viewer-actions {
+        top: 64px;
+        left: 12px;
+        right: 12px;
+        flex-wrap: wrap;
+      }
+      .mapper-head strong {
+        font-size: 16px;
+      }
+      .org-top-title {
+        font-size: 24px;
+      }
+      .org-teams {
+        grid-template-columns: repeat(3, minmax(150px, 1fr));
+      }
+    }
+    canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+      cursor: grab;
+    }
+    canvas.dragging { cursor: grabbing; }
+    .tooltip {
+      position: absolute;
+      min-width: 170px;
+      padding: 12px 14px;
+      border-radius: 16px;
+      background: rgba(17,24,39,0.94);
+      color: white;
+      pointer-events: none;
+      opacity: 0;
+      transform: translate(12px, 12px);
+      transition: opacity 120ms ease;
+      z-index: 3;
+    }
+    .tooltip.visible { opacity: 1; }
+    .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
+    .tooltip div { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.82); }
+  </style>
+</head>
+<body>
+  <div class="page">
+    <div class="shell">
+      <main class="panel viewer">
+        <div class="viewer-head">
+          <div class="chip" id="scale-chip"></div>
+          <div class="chip" id="hover-chip">chair hover: none</div>
+        </div>
+        <div class="viewer-actions">
+          <button type="button" id="fit-btn">전체 맞춤</button>
+          <button type="button" class="alt" id="clear-btn">선택 지우기</button>
+        </div>
+        <aside class="mapper hidden-off">
+          <div class="mapper-head">
+            <div id="mapper-status">
+              <strong>조직 현황</strong>
+              <span>선택 인원 없음</span>
+            </div>
+            <button type="button" class="alt" id="clear-assign-btn">매칭 초기화</button>
+          </div>
+          <div class="org-chart" id="org-chart"></div>
+        </aside>
+        <canvas id="canvas"></canvas>
+        <div class="tooltip" id="tooltip"></div>
+      </main>
+    </div>
+  </div>
+  <script src="./center_chair_people_payload_7f.js"></script>
+  <script>
+    const DATA = window.CHAIR_MAP_DATA;
+    function decodeSegments(base64) {
+      const binary = atob(base64);
+      const bytes = new Uint8Array(binary.length);
+      for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+      return new Int32Array(bytes.buffer);
+    }
+    const bgTileRanges = DATA.bgTileRanges;
+    const bgSegValues = decodeSegments(DATA.bgSegsB64);
+    const chairSegValues = decodeSegments(DATA.chairSegsB64);
+    const chairs = DATA.chairs.map(([key, name, kind, start, count]) => ({
+      key, name, kind, start, count
+    }));
+    const meta = DATA.meta;
+    const world = meta.headerBounds;
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
+    const tooltip = document.getElementById("tooltip");
+    const scaleChip = document.getElementById("scale-chip");
+    const hoverChip = document.getElementById("hover-chip");
+    const STORAGE_KEY = "ptc-chair-selection";
+    const PEOPLE_STORAGE_KEY = "ptc-chair-people";
+    const ASSIGN_STORAGE_KEY = "ptc-chair-assignments";
+    const ACTIVE_PERSON_STORAGE_KEY = "ptc-chair-active-person";
+    const clearAssignBtn = document.getElementById("clear-assign-btn");
+    const orgChartEl = document.getElementById("org-chart");
+    const mapperStatus = document.getElementById("mapper-status");
+    // Prevent stale auto-highlights from previous sessions.
+    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
+    localStorage.removeItem(ASSIGN_STORAGE_KEY);
+    const placed = new Set();
+    let people = JSON.parse(localStorage.getItem(PEOPLE_STORAGE_KEY) || "[]");
+    let chairAssignments = {};
+    let activePersonId = null;
+    const ORG_TEMPLATE = {
+      top: {
+        name: "총괄기획실",
+        count: 53,
+        members: [
+          { name: "장종찬", dept: "총괄기획실", title: "기획실장" },
+          { name: "김원식", dept: "총괄기획실", title: "전무이사" },
+        ],
+      },
+      teams: [
+        { name: "경영기획팀", count: 6, members: ["김우진", "임민정", "국혜린", "최선아", "김윤재", "이미영"] },
+        { name: "인재성장팀", count: 5, members: ["조태희", "최근혜", "류원준", "주안기", "정성호"] },
+        { name: "ERP 기획팀", count: 5, members: ["류호성", "문형식", "최요제", "황대일", "이채봉"] },
+        { name: "디자인기획팀", count: 17, members: ["신혜영", "정은혜", "김태식", "최예은", "채선영", "최영환", "윤봄이", "이예진", "허유나", "마희연", "김수현", "박지영", "권순호", "정두휘", "김정석", "정지윤", "양숙영"] },
+        { name: "기술기획팀", count: 11, members: ["김원기", "홍아름", "이경민", "김혜인", "황동환", "최찬호", "이태훈", "김신지", "조찬영", "김용연", "한치영"] },
+        { name: "협업증진팀", count: 3, members: ["성형일", "박주한", "한승민"] },
+        { name: "솔루션통합팀", count: 4, members: ["권혁진", "염승호", "윤준수", "김지영"] },
+      ],
+    };
+    const chairGeometry = chairs.map((chair) => {
+      let minX = Infinity;
+      let minY = Infinity;
+      let maxX = -Infinity;
+      let maxY = -Infinity;
+      const path = new Path2D();
+      const hitSegments = new Float32Array(chair.count * 4);
+      let segCursor = 0;
+      for (let i = chair.start; i < chair.start + chair.count; i += 1) {
+        const offset = i * 4;
+        const x1 = chairSegValues[offset] / 10;
+        const y1 = chairSegValues[offset + 1] / 10;
+        const x2 = chairSegValues[offset + 2] / 10;
+        const y2 = chairSegValues[offset + 3] / 10;
+        path.moveTo(x1, y1);
+        path.lineTo(x2, y2);
+        hitSegments[segCursor] = x1;
+        hitSegments[segCursor + 1] = y1;
+        hitSegments[segCursor + 2] = x2;
+        hitSegments[segCursor + 3] = y2;
+        segCursor += 4;
+        minX = Math.min(minX, x1, x2);
+        minY = Math.min(minY, y1, y2);
+        maxX = Math.max(maxX, x1, x2);
+        maxY = Math.max(maxY, y1, y2);
+      }
+      return {
+        ...chair,
+        minX,
+        minY,
+        maxX,
+        maxY,
+        area: Math.max(1, (maxX - minX) * (maxY - minY)),
+        path,
+        hitSegments,
+      };
+    });
+    function renumberChairKeys(chairItems) {
+      if (!chairItems.length) return;
+      const heights = chairItems
+        .map((chair) => Math.max(1, chair.maxY - chair.minY))
+        .sort((a, b) => a - b);
+      const medianHeight = heights[Math.floor(heights.length / 2)] || 1;
+      const rowTolerance = Math.max(40, medianHeight * 0.9);
+
+      const sorted = [...chairItems].sort((a, b) => {
+        const ay = (a.minY + a.maxY) * 0.5;
+        const by = (b.minY + b.maxY) * 0.5;
+        if (Math.abs(by - ay) > rowTolerance) return by - ay; // top -> bottom
+        const ax = (a.minX + a.maxX) * 0.5;
+        const bx = (b.minX + b.maxX) * 0.5;
+        return ax - bx; // left -> right
+      });
+
+      sorted.forEach((chair, index) => {
+        chair.key = String(index + 1);
+        chair.seatNo = index + 1;
+      });
+    }
+    renumberChairKeys(chairGeometry);
+    const PICK_GRID_SIZE = 1800;
+    const chairPickGrid = new Map();
+    function pickGridKey(gx, gy) {
+      return `${gx},${gy}`;
+    }
+    chairGeometry.forEach((chair, index) => {
+      const minGX = Math.floor(chair.minX / PICK_GRID_SIZE);
+      const maxGX = Math.floor(chair.maxX / PICK_GRID_SIZE);
+      const minGY = Math.floor(chair.minY / PICK_GRID_SIZE);
+      const maxGY = Math.floor(chair.maxY / PICK_GRID_SIZE);
+      for (let gx = minGX; gx <= maxGX; gx += 1) {
+        for (let gy = minGY; gy <= maxGY; gy += 1) {
+          const key = pickGridKey(gx, gy);
+          if (!chairPickGrid.has(key)) chairPickGrid.set(key, []);
+          chairPickGrid.get(key).push(index);
+        }
+      }
+    });
+
+    const camera = { scale: 1, offsetX: 0, offsetY: 0 };
+    let pixelRatio = window.devicePixelRatio || 1;
+    let pointer = { x: 0, y: 0 };
+    let dragging = false;
+    let dragStart = null;
+    let hovered = null;
+    let rafPending = false;
+
+    function normalizePeople(raw) {
+      return raw
+        .map((person, index) => {
+          if (!person || !person.name) return null;
+          return {
+            id: person.id || `person-${index + 1}`,
+            name: String(person.name).trim(),
+            dept: String(person.dept || "").trim(),
+            title: String(person.title || "").trim(),
+          };
+        })
+        .filter(Boolean);
+    }
+
+    function createTemplatePeople() {
+      const generated = [];
+      let seq = 1;
+      ORG_TEMPLATE.top.members.forEach((member) => {
+        generated.push({
+          id: `org-${seq++}`,
+          name: member.name,
+          dept: member.dept,
+          title: member.title,
+        });
+      });
+      ORG_TEMPLATE.teams.forEach((team) => {
+        team.members.forEach((name) => {
+          generated.push({
+            id: `org-${seq++}`,
+            name,
+            dept: team.name,
+            title: "선임",
+          });
+        });
+      });
+      return generated;
+    }
+
+    people = normalizePeople(people);
+    const templateReady = people.some((person) => person.name === "장종찬" && person.dept === "총괄기획실");
+    if (!templateReady) {
+      people = createTemplatePeople();
+      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
+    }
+    const chairKeySet = new Set(chairGeometry.map((chair) => chair.key));
+    chairAssignments = Object.fromEntries(
+      Object.entries(chairAssignments).filter(([chairKey, personId]) => (
+        chairKeySet.has(chairKey) && people.some((person) => person.id === personId)
+      ))
+    );
+    if (activePersonId && !people.some((person) => person.id === activePersonId)) activePersonId = null;
+
+    function persistPeople() {
+      localStorage.setItem(PEOPLE_STORAGE_KEY, JSON.stringify(people));
+    }
+
+    function persistAssignments() {
+      localStorage.setItem(ASSIGN_STORAGE_KEY, JSON.stringify(chairAssignments));
+    }
+
+    function persistActivePerson() {
+      if (!activePersonId) localStorage.removeItem(ACTIVE_PERSON_STORAGE_KEY);
+      else localStorage.setItem(ACTIVE_PERSON_STORAGE_KEY, activePersonId);
+    }
+
+    function assignmentCount() {
+      return Object.keys(chairAssignments).length;
+    }
+
+    function getPersonById(id) {
+      return people.find((person) => person.id === id) || null;
+    }
+
+    function getChairByPerson(personId) {
+      for (const [chairKey, assignedPersonId] of Object.entries(chairAssignments)) {
+        if (assignedPersonId === personId) return chairKey;
+      }
+      return null;
+    }
+
+    function renderPeopleList() {
+      const activePerson = getPersonById(activePersonId);
+      const countText = `${assignmentCount()} / ${people.length} 매칭`;
+      mapperStatus.innerHTML = `<strong>조직 현황</strong><span>${activePerson ? `${activePerson.name} 선택됨` : "선택 인원 없음"} · ${countText}</span>`;
+
+      const findPerson = (dept, name) => people.find((person) => person.dept === dept && person.name === name) || null;
+      const personCard = (person, roleText) => {
+        if (!person) return "";
+        const chairKey = getChairByPerson(person.id);
+        const assignedClass = chairKey ? " assigned" : "";
+        const activeClass = person.id === activePersonId ? " active" : "";
+        return `
+          <article class="org-person${assignedClass}${activeClass}" data-person-id="${person.id}">
+            <strong>${person.name}</strong>
+            <small>${person.title || roleText || "-"}</small>
+            <small>${chairKey ? `좌석 ${chairKey}` : "좌석 미지정"}</small>
+          </article>
+        `;
+      };
+
+      const topHtml = ORG_TEMPLATE.top.members
+        .map((member) => personCard(findPerson(member.dept, member.name), member.title))
+        .join("");
+
+      const teamsHtml = ORG_TEMPLATE.teams.map((team) => {
+        const membersHtml = team.members
+          .map((name) => personCard(findPerson(team.name, name), "선임"))
+          .join("");
+        return `
+          <section class="org-team">
+            <h4>${team.name} (${team.count})</h4>
+            <div class="org-members">${membersHtml}</div>
+          </section>
+        `;
+      }).join("");
+
+      orgChartEl.innerHTML = `
+        <section class="org-top">
+          <div class="org-top-title">${ORG_TEMPLATE.top.name} (${ORG_TEMPLATE.top.count})</div>
+          <div class="org-top-members">${topHtml}</div>
+        </section>
+        <section class="org-teams">${teamsHtml}</section>
+      `;
+    }
+
+    function worldToScreen(x, y) {
+      return {
+        x: x * camera.scale + camera.offsetX,
+        y: (world.maxY - y + world.minY) * camera.scale + camera.offsetY,
+      };
+    }
+
+    function screenToWorld(x, y) {
+      return {
+        x: (x - camera.offsetX) / camera.scale,
+        y: world.maxY + world.minY - (y - camera.offsetY) / camera.scale,
+      };
+    }
+
+    function resize() {
+      pixelRatio = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = Math.round(rect.width * pixelRatio);
+      canvas.height = Math.round(rect.height * pixelRatio);
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      fit();
+    }
+
+    function fit() {
+      const rect = canvas.getBoundingClientRect();
+      const width = world.maxX - world.minX;
+      const height = world.maxY - world.minY;
+      const pad = 36;
+      const scaleX = (rect.width - pad * 2) / width;
+      const scaleY = (rect.height - pad * 2) / height;
+      camera.scale = Math.min(scaleX, scaleY);
+      camera.offsetX = pad - world.minX * camera.scale + (rect.width - pad * 2 - width * camera.scale) / 2;
+      camera.offsetY = pad - world.minY * camera.scale + (rect.height - pad * 2 - height * camera.scale) / 2;
+      requestDraw();
+    }
+
+    function drawGrid(width, height) {
+      ctx.save();
+      ctx.strokeStyle = "rgba(21,35,48,0.05)";
+      ctx.lineWidth = 1;
+      for (let x = 120; x < width; x += 120) {
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+      }
+      for (let y = 120; y < height; y += 120) {
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    function pickChair(screenX, screenY) {
+      const threshold = 12;
+      const pointerWorld = screenToWorld(screenX, screenY);
+      const thresholdWorld = threshold / camera.scale;
+      const thresholdWorldSq = thresholdWorld * thresholdWorld;
+      const minGX = Math.floor((pointerWorld.x - thresholdWorld) / PICK_GRID_SIZE);
+      const maxGX = Math.floor((pointerWorld.x + thresholdWorld) / PICK_GRID_SIZE);
+      const minGY = Math.floor((pointerWorld.y - thresholdWorld) / PICK_GRID_SIZE);
+      const maxGY = Math.floor((pointerWorld.y + thresholdWorld) / PICK_GRID_SIZE);
+      const candidateIndexes = [];
+      const seen = new Set();
+      for (let gx = minGX; gx <= maxGX; gx += 1) {
+        for (let gy = minGY; gy <= maxGY; gy += 1) {
+          const candidates = chairPickGrid.get(pickGridKey(gx, gy));
+          if (!candidates) continue;
+          for (const index of candidates) {
+            if (seen.has(index)) continue;
+            seen.add(index);
+            candidateIndexes.push(index);
+          }
+        }
+      }
+      let best = null;
+      for (const index of candidateIndexes) {
+        const chair = chairGeometry[index];
+        if (
+          pointerWorld.x < chair.minX - thresholdWorld ||
+          pointerWorld.x > chair.maxX + thresholdWorld ||
+          pointerWorld.y < chair.minY - thresholdWorld ||
+          pointerWorld.y > chair.maxY + thresholdWorld
+        ) continue;
+        let distSq = Infinity;
+        for (let i = 0; i < chair.hitSegments.length; i += 4) {
+          const x1 = chair.hitSegments[i];
+          const y1 = chair.hitSegments[i + 1];
+          const x2 = chair.hitSegments[i + 2];
+          const y2 = chair.hitSegments[i + 3];
+          const dx = x2 - x1;
+          const dy = y2 - y1;
+          const len2 = dx * dx + dy * dy;
+          let segDistSq;
+          if (len2 === 0) {
+            const px = pointerWorld.x - x1;
+            const py = pointerWorld.y - y1;
+            segDistSq = px * px + py * py;
+          } else {
+            let t = ((pointerWorld.x - x1) * dx + (pointerWorld.y - y1) * dy) / len2;
+            t = Math.max(0, Math.min(1, t));
+            const lx = x1 + t * dx;
+            const ly = y1 + t * dy;
+            const px = pointerWorld.x - lx;
+            const py = pointerWorld.y - ly;
+            segDistSq = px * px + py * py;
+          }
+          if (segDistSq < distSq) distSq = segDistSq;
+          if (distSq <= thresholdWorldSq * 0.3) break;
+        }
+        if (distSq > thresholdWorldSq) continue;
+        const dist = Math.sqrt(distSq) * camera.scale;
+
+        if (!best) {
+          best = { chair, dist };
+          continue;
+        }
+
+        const distGap = dist - best.dist;
+        if (distGap < -0.75) {
+          best = { chair, dist };
+          continue;
+        }
+
+        if (Math.abs(distGap) <= 2) {
+          const areaGap = chair.area - best.chair.area;
+          if (areaGap < -1) {
+            best = { chair, dist };
+            continue;
+          }
+
+          if (
+            Math.abs(areaGap) <= 1 &&
+            chair.kind === "block" &&
+            best.chair.kind !== "block"
+          ) {
+            best = { chair, dist };
+          }
+        }
+      }
+
+      return best ? best.chair : null;
+    }
+
+    function renderTooltip() {
+      if (!hovered) {
+        tooltip.classList.remove("visible");
+        hoverChip.textContent = "chair hover: none";
+        return;
+      }
+      hoverChip.textContent = `chair hover: ${hovered.name}`;
+      tooltip.innerHTML = `
+        <strong>${hovered.name}</strong>
+        <div>chair key: ${hovered.key}</div>
+        <div>${placed.has(hovered.key) ? "선택됨" : "클릭하면 선택"}</div>
+        <div>${chairAssignments[hovered.key] ? `배치: ${(getPersonById(chairAssignments[hovered.key]) || { name: "알수없음" }).name}` : "배치 인원 없음"}</div>
+      `;
+      tooltip.style.left = `${pointer.x + 14}px`;
+      tooltip.style.top = `${pointer.y + 14}px`;
+      tooltip.classList.add("visible");
+    }
+
+    function requestDraw() {
+      if (rafPending) return;
+      rafPending = true;
+      window.requestAnimationFrame(() => {
+        rafPending = false;
+        draw();
+      });
+    }
+
+    function applyWorldTransform() {
+      ctx.setTransform(
+        pixelRatio * camera.scale,
+        0,
+        0,
+        -pixelRatio * camera.scale,
+        pixelRatio * camera.offsetX,
+        pixelRatio * ((world.maxY + world.minY) * camera.scale + camera.offsetY)
+      );
+    }
+
+    function draw() {
+      const rect = canvas.getBoundingClientRect();
+      ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      drawGrid(rect.width, rect.height);
+      const viewA = screenToWorld(0, rect.height);
+      const viewB = screenToWorld(rect.width, 0);
+      const viewMinX = Math.min(viewA.x, viewB.x);
+      const viewMaxX = Math.max(viewA.x, viewB.x);
+      const viewMinY = Math.min(viewA.y, viewB.y);
+      const viewMaxY = Math.max(viewA.y, viewB.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.strokeStyle = "rgba(100, 116, 139, 0.28)";
+      ctx.lineWidth = 1 / camera.scale;
+      const tileSize = meta.backgroundTileSize;
+      const tileMinX = Math.floor(viewMinX / tileSize);
+      const tileMaxX = Math.floor(viewMaxX / tileSize);
+      const tileMinY = Math.floor(viewMinY / tileSize);
+      const tileMaxY = Math.floor(viewMaxY / tileSize);
+      for (let tx = tileMinX; tx <= tileMaxX; tx += 1) {
+        for (let ty = tileMinY; ty <= tileMaxY; ty += 1) {
+          const range = bgTileRanges[`${tx},${ty}`];
+          if (!range) continue;
+          const start = range[0];
+          const count = range[1];
+          for (let i = start; i < start + count; i += 1) {
+            const offset = i * 4;
+            const x1 = bgSegValues[offset] / 10;
+            const y1 = bgSegValues[offset + 1] / 10;
+            const x2 = bgSegValues[offset + 2] / 10;
+            const y2 = bgSegValues[offset + 3] / 10;
+            if (
+              Math.max(x1, x2) < viewMinX ||
+              Math.min(x1, x2) > viewMaxX ||
+              Math.max(y1, y2) < viewMinY ||
+              Math.min(y1, y2) > viewMaxY
+            ) continue;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+          }
+        }
+      }
+      ctx.restore();
+
+      hovered = dragging ? null : pickChair(pointer.x, pointer.y);
+
+      ctx.save();
+      applyWorldTransform();
+      ctx.lineWidth = 1.45 / camera.scale;
+      ctx.lineCap = "round";
+      ctx.lineJoin = "round";
+      for (const chair of chairGeometry) {
+        if (chair.maxX < viewMinX || chair.minX > viewMaxX || chair.maxY < viewMinY || chair.minY > viewMaxY) continue;
+        const active = hovered && hovered.key === chair.key;
+        const selected = placed.has(chair.key);
+        const assignedPersonId = chairAssignments[chair.key];
+        const activePersonChair = activePersonId && assignedPersonId === activePersonId;
+        const assigned = Boolean(assignedPersonId);
+        const baseWidth = chair.kind === "block" ? 1.45 : 1.35;
+        ctx.strokeStyle = activePersonChair
+          ? "rgba(234, 179, 8, 1)"
+          : assigned
+            ? "rgba(37, 99, 235, 0.98)"
+            : selected
+              ? "rgba(220, 38, 38, 0.98)"
+              : active
+                ? "rgba(15, 118, 110, 0.98)"
+                : chair.kind === "group"
+                  ? "rgba(16, 134, 149, 0.74)"
+                  : "rgba(21, 149, 142, 0.8)";
+        ctx.lineWidth = (activePersonChair ? 2.8 : assigned ? 2.4 : selected ? 2.6 : active ? 2.1 : baseWidth) / camera.scale;
+        ctx.stroke(chair.path);
+      }
+      ctx.restore();
+
+      scaleChip.textContent = `scale ${camera.scale.toFixed(4)}x`;
+      renderTooltip();
+    }
+
+    function persistPlaced() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify([...placed]));
+    }
+
+    canvas.addEventListener("pointerdown", (event) => {
+      dragging = true;
+      dragStart = { x: event.clientX, y: event.clientY, offsetX: camera.offsetX, offsetY: camera.offsetY };
+      canvas.classList.add("dragging");
+    });
+
+    window.addEventListener("pointerup", (event) => {
+      if (dragging && dragStart) {
+        const move = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+        if (move < 4) {
+          const rect = canvas.getBoundingClientRect();
+          const picked = pickChair(event.clientX - rect.left, event.clientY - rect.top);
+          if (picked) {
+            if (placed.has(picked.key)) placed.delete(picked.key);
+            else placed.add(picked.key);
+            persistPlaced();
+            if (activePersonId) {
+              const currentChair = getChairByPerson(activePersonId);
+              if (chairAssignments[picked.key] === activePersonId) {
+                delete chairAssignments[picked.key];
+              } else {
+                if (currentChair && currentChair !== picked.key) delete chairAssignments[currentChair];
+                chairAssignments[picked.key] = activePersonId;
+              }
+              persistAssignments();
+              renderPeopleList();
+            }
+          }
+        }
+      }
+      dragging = false;
+      dragStart = null;
+      canvas.classList.remove("dragging");
+      requestDraw();
+    });
+
+    window.addEventListener("pointermove", (event) => {
+      const rect = canvas.getBoundingClientRect();
+      pointer = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+      if (dragging && dragStart) {
+        camera.offsetX = dragStart.offsetX + (event.clientX - dragStart.x);
+        camera.offsetY = dragStart.offsetY + (event.clientY - dragStart.y);
+      }
+      requestDraw();
+    });
+
+    canvas.addEventListener("wheel", (event) => {
+      event.preventDefault();
+      const rect = canvas.getBoundingClientRect();
+      const mx = event.clientX - rect.left;
+      const my = event.clientY - rect.top;
+      const before = screenToWorld(mx, my);
+      const factor = event.deltaY < 0 ? 1.08 : 0.92;
+      camera.scale = Math.max(0.002, Math.min(2, camera.scale * factor));
+      const after = worldToScreen(before.x, before.y);
+      camera.offsetX += mx - after.x;
+      camera.offsetY += my - after.y;
+      requestDraw();
+    }, { passive: false });
+
+    document.getElementById("fit-btn").addEventListener("click", fit);
+    document.getElementById("clear-btn").addEventListener("click", () => {
+      placed.clear();
+      persistPlaced();
+      requestDraw();
+    });
+    clearAssignBtn.addEventListener("click", () => {
+      chairAssignments = {};
+      persistAssignments();
+      renderPeopleList();
+      requestDraw();
+    });
+    orgChartEl.addEventListener("click", (event) => {
+      const item = event.target.closest(".org-person[data-person-id]");
+      if (!item) return;
+      const personId = item.getAttribute("data-person-id");
+      activePersonId = personId === activePersonId ? null : personId;
+      persistActivePerson();
+      renderPeopleList();
+      requestDraw();
+    });
+    window.addEventListener("resize", resize);
+    renderPeopleList();
+    resize();
+  </script>
+</body>
+</html>
+
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_map_generated.html
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload.js
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_6f.js
--- a/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
+++ b/public/img/location_photo/기술개발센터/팀자리/center_chair_people_payload_7f.js
--- a/public/img/location_photo/한맥빌딩/1층.png
+++ b/public/img/location_photo/한맥빌딩/1층.png
--- a/public/img/location_photo/한맥빌딩/2층.png
+++ b/public/img/location_photo/한맥빌딩/2층.png
--- a/public/img/location_photo/한맥빌딩/3층.png
+++ b/public/img/location_photo/한맥빌딩/3층.png
--- a/public/img/location_photo/한맥빌딩/4층.png
+++ b/public/img/location_photo/한맥빌딩/4층.png
--- a/public/img/location_photo/한맥빌딩/5층.png
+++ b/public/img/location_photo/한맥빌딩/5층.png
--- a/public/img/location_photo/한맥빌딩/6층.png
+++ b/public/img/location_photo/한맥빌딩/6층.png
--- a/public/img/location_photo/한맥빌딩/7층.png
+++ b/public/img/location_photo/한맥빌딩/7층.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_1.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_1.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_2.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_2.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_3.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_3.png
--- a/public/img/location_photo/한맥빌딩/MDF실/MDF_4.png
+++ b/public/img/location_photo/한맥빌딩/MDF실/MDF_4.png
--- a/scratch/calculate_job_averages.js
+++ b/scratch/calculate_job_averages.js
@@ -1,163 +0,0 @@
-import * as fs from 'fs';
-
-// dummyData.ts를 읽어와서 dummyPCs 파싱
-const content = fs.readFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', 'utf-8');
-
-// export const dummyPCs: any[] = [ ... ]; 패턴 추출
-const match = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
-if (!match) {
-  console.error('Failed to parse dummyPCs from dummyData.ts');
-  process.exit(1);
-}
-
-const dummyPCs = JSON.parse(match[1]);
-
-function calculatePcScoreDeductive(cpu, ram, gpu, purchaseDate) {
-  let score = 100;
-  
-  // 1. CPU 등급 감점
-  const cpuUpper = (cpu || '').toUpperCase();
-  let cpuDeduction = 0;
-  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
-    cpuDeduction = 0;
-  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
-    cpuDeduction = 5;
-  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
-    cpuDeduction = 15;
-  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
-    cpuDeduction = 25;
-  } else {
-    cpuDeduction = 30;
-  }
-  score -= cpuDeduction;
-
-  // 2. CPU 세대 감점
-  let genDeduction = 0;
-  let intelMatch = cpuUpper.match(/I\d-?(\d+)/);
-  let gen = 0;
-  if (intelMatch && intelMatch[1]) {
-    const numStr = intelMatch[1];
-    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
-    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
-  }
-  
-  let amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
-  let amdGen = 0;
-  if (amdMatch && amdMatch[1] && !intelMatch) {
-    const numStr = amdMatch[1];
-    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
-  }
-
-  if (intelMatch) {
-    if (gen >= 12) genDeduction = 0;
-    else if (gen >= 10) genDeduction = 5;
-    else if (gen >= 8) genDeduction = 10;
-    else genDeduction = 15;
-  } else if (amdMatch) {
-    if (amdGen >= 5) genDeduction = 0;
-    else if (amdGen >= 3) genDeduction = 5;
-    else genDeduction = 10;
-  } else {
-    genDeduction = 15;
-  }
-  score -= genDeduction;
-
-  // 3. RAM 용량 감점
-  const ramUpper = (ram || '').toUpperCase();
-  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
-  let ramDeduction = 25;
-  if (ramMatch && ramMatch[1]) {
-    const ramVal = parseInt(ramMatch[1], 10);
-    if (ramVal >= 32) ramDeduction = 0;
-    else if (ramVal >= 16) ramDeduction = 10;
-    else if (ramVal >= 8) ramDeduction = 20;
-    else ramDeduction = 25;
-  }
-  score -= ramDeduction;
-
-  // 4. GPU 성능 감점
-  const gpuUpper = (gpu || '').toUpperCase();
-  let gpuDeduction = 25;
-  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
-    gpuDeduction = 25;
-  } else if (
-    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
-    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
-  ) {
-    gpuDeduction = 0;
-  } else if (
-    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
-    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
-  ) {
-    gpuDeduction = 5;
-  } else if (
-    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
-    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
-  ) {
-    gpuDeduction = 15;
-  } else {
-    gpuDeduction = 25;
-  }
-  score -= gpuDeduction;
-
-  // 5. 연식(노후도) 감점
-  let age = 0;
-  if (purchaseDate && purchaseDate !== '-') {
-    let normalized = purchaseDate.replace(/\./g, '-').trim();
-    if (/^\d{6}$/.test(normalized)) {
-      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
-    }
-    const purchase = new Date(normalized);
-    if (!isNaN(purchase.getTime())) {
-      const mockToday = new Date('2026-05-31');
-      const diffMs = mockToday.getTime() - purchase.getTime();
-      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
-      age = Math.max(0, parseFloat(age.toFixed(1)));
-    }
-  }
-  
-  let ageDeduction = 0;
-  if (age < 1) ageDeduction = 0;
-  else if (age < 2) ageDeduction = 3;
-  else if (age < 3) ageDeduction = 6;
-  else if (age < 4) ageDeduction = 9;
-  else if (age < 5) ageDeduction = 12;
-  else ageDeduction = 15;
-  
-  score -= ageDeduction;
-
-  return Math.max(10, score);
-}
-
-const jobScores = {};
-let totalPcs = 0;
-
-const filteredPCs = dummyPCs.filter(pc => pc.user_position !== '재고PC');
-
-filteredPCs.forEach(pc => {
-  const job = pc.user_position || '미분류';
-  const score = calculatePcScoreDeductive(pc.cpu, pc.ram, pc.gpu, pc.purchase_date);
-  
-  if (!jobScores[job]) {
-    jobScores[job] = { total: 0, count: 0 };
-  }
-  jobScores[job].total += score;
-  jobScores[job].count += 1;
-  totalPcs++;
-});
-
-console.log('--- Job Averages (Deductive 100-point) ---');
-const sortedJobs = Object.keys(jobScores).map(job => {
-  const avg = jobScores[job].total / jobScores[job].count;
-  return {
-    job,
-    avg: parseFloat(avg.toFixed(1)),
-    count: jobScores[job].count
-  };
-}).sort((a, b) => b.avg - a.avg);
-
-sortedJobs.forEach((item, index) => {
-  console.log(`${index + 1}. ${item.job}: Avg=${item.avg}점, Count=${item.count}대`);
-});
-
-console.log('Total PCs (excluding Stock):', totalPcs);
--- a/scratch/fix_dates_by_spec.js
+++ b/scratch/fix_dates_by_spec.js
@@ -0,0 +1,118 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const pool = mysql.createPool({
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASS,
+  database: process.env.DB_NAME,
+  port: parseInt(process.env.DB_PORT || '3306'),
+});
+
+// 하드웨어 출시 연도 데이터베이스 (CPU/GPU)
+const RELEASE_DATES = {
+  // Intel CPU Generations (Mainstream desktop release month/year)
+  'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
+  'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
+  'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
+  'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
+  'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
+  'i9-9': '2018-10',  'i7-9': '2018-10',  'i5-9': '2018-10',
+  'i7-8': '2017-10',  'i5-8': '2017-10',
+  'i7-7': '2017-01',  'i5-7': '2017-01',
+  'i7-6': '2015-08',  'i5-6': '2015-08',
+  'i7-4': '2013-06',  'i5-4': '2013-06',
+  'i7-3': '2012-04',  'i5-3': '2012-04',
+  'i7-2': '2011-01',  'i5-2': '2011-01',
+
+  // NVIDIA GPU Series
+  'RTX 4090': '2022-10', 'RTX 4080': '2022-11', 'RTX 4070': '2023-04', 'RTX 4060': '2023-06',
+  'RTX 3090': '2020-09', 'RTX 3080': '2020-09', 'RTX 3070': '2020-10', 'RTX 3060': '2021-02',
+  'RTX 2080': '2018-09', 'RTX 2070': '2018-10', 'RTX 2060': '2019-01',
+  'GTX 1660': '2019-03', 'GTX 1650': '2019-04',
+  'GTX 1080': '2016-05', 'GTX 1070': '2016-06', 'GTX 1060': '2016-07', 'GTX 1050': '2016-10',
+  'GTX 980': '2014-09',  'GTX 970': '2014-09',  'GTX 960': '2015-01'
+};
+
+function inferDateFromSpecs(cpu, gpu) {
+  const cpuStr = (cpu || '').toUpperCase();
+  const gpuStr = (gpu || '').toUpperCase();
+
+  let inferred = null;
+
+  // 1. GPU 기준 (최신 그래픽카드가 꽂혀있으면 그 시기 이후 구매일 확률이 높음)
+  for (const [key, date] of Object.entries(RELEASE_DATES)) {
+    if (gpuStr.includes(key)) {
+      inferred = date;
+      break; 
+    }
+  }
+
+  // 2. CPU 기준 (GPU에서 못 찾았거나, CPU가 더 최신일 경우)
+  if (!inferred) {
+    for (const [key, date] of Object.entries(RELEASE_DATES)) {
+      // i7-13700 등을 찾기 위해 정규식 또는 포함 여부 확인
+      if (cpuStr.includes(key)) {
+        inferred = date;
+        break;
+      }
+    }
+  }
+
+  return inferred ? `${inferred}-01` : null;
+}
+
+async function run() {
+  const connection = await pool.getConnection();
+  try {
+    const [rows] = await connection.query(`
+      SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu 
+      FROM asset_core c
+      LEFT JOIN asset_spec s ON c.id = s.asset_id
+    `);
+    
+    const updates = [];
+    const unchanged = [];
+
+    for (const row of rows) {
+      const currentVal = (row.purchase_date || '').trim();
+      
+      // 구매일자가 없거나 부정확한 경우만 처리
+      if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('2024-01-01')) {
+        const specDate = inferDateFromSpecs(row.cpu, row.gpu);
+        
+        if (specDate) {
+          updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
+        } else {
+          unchanged.push({ code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
+        }
+      }
+    }
+
+    console.log(`🚀 스펙 분석 결과: ${updates.length}건의 자산 구매일자를 보정합니다.`);
+    
+    for (const item of updates) {
+      await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
+      console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
+    }
+
+    if (unchanged.length > 0) {
+      console.log('\n⚠️ 스펙 정보를 찾을 수 없어 보정하지 못한 자산:');
+      unchanged.forEach(u => {
+        if (u.code) console.log(`[Skip] ${u.code.padEnd(15)} | CPU: ${u.cpu || '-'} | GPU: ${u.gpu || '-'}`);
+      });
+    }
+
+    console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
+
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    connection.release();
+    pool.end();
+  }
+}
+
+run();
--- a/scratch/fix_dates_strict.js
+++ b/scratch/fix_dates_strict.js
@@ -0,0 +1,128 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const pool = mysql.createPool({
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASS,
+  database: process.env.DB_NAME,
+  port: parseInt(process.env.DB_PORT || '3306'),
+});
+
+// 하드웨어 출시 연도/월 데이터베이스
+const RELEASE_DATES = {
+  // Intel CPU
+  'i9-14': '2023-10', 'i7-14': '2023-10', 'i5-14': '2023-10',
+  'i9-13': '2022-10', 'i7-13': '2022-10', 'i5-13': '2022-10',
+  'i9-12': '2021-11', 'i7-12': '2021-11', 'i5-12': '2021-11',
+  'i9-11': '2021-03', 'i7-11': '2021-03', 'i5-11': '2021-03',
+  'i9-10': '2020-05', 'i7-10': '2020-05', 'i5-10': '2020-05',
+  'i9-9': '2018-10',  'i7-9': '2018-10',  'i5-9': '2018-10',
+  'i7-8': '2017-10',  'i5-8': '2017-10',
+  'i7-7': '2017-01',  'i5-7': '2017-01',
+  'i7-6': '2015-08',  'i5-6': '2015-08',
+  'i7-5': '2014-06',  'i5-5': '2015-06', // Broadwell
+  'i7-4': '2013-06',  'i5-4': '2013-06',
+  'i7-3': '2012-04',  'i5-3': '2012-04',
+  'i7-2': '2011-01',  'i5-2': '2011-01',
+
+  // NVIDIA GPU
+  'RTX 40': '2022-10',
+  'RTX 30': '2020-09',
+  'RTX 20': '2018-09',
+  'GTX 16': '2019-02',
+  'GTX 10': '2016-05',
+  'GTX 9': '2014-09',
+  'GTX 750': '2014-02',
+  'GTX 7': '2013-05',
+  'GTX 6': '2012-03'
+};
+
+// 출시 연도만 있는 경우 (지시에 따라 후속년도 12월 적용을 위함)
+const YEAR_ONLY = {
+  'I5-4': 2013,
+  'I5-6': 2015,
+  'I7-7': 2017,
+  'GTX 750': 2014
+};
+
+function inferDateFromSpecs(cpu, gpu) {
+  const cpuStr = (cpu || '').toUpperCase();
+  const gpuStr = (gpu || '').toUpperCase();
+
+  let latestYear = 0;
+  let latestMonth = 0;
+
+  // 모든 매핑 데이터를 순회하며 가장 최신 날짜를 찾음
+  for (const [key, dateStr] of Object.entries(RELEASE_DATES)) {
+    if (cpuStr.includes(key) || gpuStr.includes(key)) {
+      const [y, m] = dateStr.split('-').map(Number);
+      if (y > latestYear || (y === latestYear && m > latestMonth)) {
+        latestYear = y;
+        latestMonth = m;
+      }
+    }
+  }
+
+  // 매칭된 정보가 있는 경우
+  if (latestYear > 0) {
+    // 월 정보가 명확히 매핑된 경우 (RELEASE_DATES 사용)
+    // 하지만 지시사항에 따라 "월을 못찾으면 12월" & "후속년도" 규칙 적용 여부 판단
+    // RELEASE_DATES는 월이 이미 있으므로 그대로 사용하되, 
+    // 만약 YEAR_ONLY에만 걸리는 경우를 위해 로직 보강
+    return `${latestYear}-${String(latestMonth).padStart(2, '0')}-01`;
+  }
+
+  // 연도만 매칭되는 경우 (지시사항: 후속년도 12월)
+  for (const [key, year] of Object.entries(YEAR_ONLY)) {
+    if (cpuStr.includes(key) || gpuStr.includes(key)) {
+      return `${year + 1}-12-01`;
+    }
+  }
+
+  return null;
+}
+
+async function run() {
+  const connection = await pool.getConnection();
+  try {
+    const [rows] = await connection.query(`
+      SELECT c.id, c.asset_code, c.purchase_date, s.cpu, s.gpu 
+      FROM asset_core c
+      LEFT JOIN asset_spec s ON c.id = s.asset_id
+    `);
+    
+    const updates = [];
+
+    for (const row of rows) {
+      const currentVal = (row.purchase_date || '').trim();
+      
+      // 구매일자가 없거나 '-', 'undefined'인 경우 + 혹은 아직 보정이 필요한 자산
+      if (!currentVal || currentVal === '-' || currentVal === 'undefined' || currentVal.startsWith('0000') || currentVal === '2024-01-01') {
+        const specDate = inferDateFromSpecs(row.cpu, row.gpu);
+        if (specDate) {
+          updates.push({ id: row.id, date: specDate, code: row.asset_code, cpu: row.cpu, gpu: row.gpu });
+        }
+      }
+    }
+
+    console.log(`🚀 지시사항 반영: ${updates.length}건의 자산을 보정합니다. (후속년도/12월 규칙 적용)`);
+    
+    for (const item of updates) {
+      await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
+      console.log(`[Update] ${item.code.padEnd(15)} | CPU: ${String(item.cpu).padEnd(20)} | GPU: ${String(item.gpu).padEnd(15)} -> ${item.date}`);
+    }
+
+    console.log(`\n✅ 완료: ${updates.length}건 보정됨.`);
+
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    connection.release();
+    pool.end();
+  }
+}
+
+run();
--- a/scratch/fix_purchase_dates.js
+++ b/scratch/fix_purchase_dates.js
@@ -0,0 +1,88 @@
+import mysql from 'mysql2/promise';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const pool = mysql.createPool({
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASS,
+  database: process.env.DB_NAME,
+  port: parseInt(process.env.DB_PORT || '3306'),
+});
+
+async function run() {
+  const connection = await pool.getConnection();
+  try {
+    // 먼저 잘못 들어간 0000-00-01 등 복구
+    console.log('잘못된 형식(0000-00-01 등)을 초기화합니다...');
+    await connection.query("UPDATE asset_core SET purchase_date = '-' WHERE purchase_date LIKE '0000%' OR purchase_date = '2020-01-01'");
+
+    const [rows] = await connection.query('SELECT id, asset_code, purchase_date, category FROM asset_core');
+    
+    const updates = [];
+    const missing = [];
+
+    for (const row of rows) {
+      const code = (row.asset_code || '').trim();
+      const currentVal = (row.purchase_date || '').trim();
+
+      // 구매일자가 없거나 '-', 'undefined' 인 경우 대상
+      if (!currentVal || currentVal === '-' || currentVal === 'undefined') {
+        let inferredDate = null;
+
+        // 1. PREFIX-YYYYMM-NNNN 형식 (예: PC-202406-0001)
+        const match6 = code.match(/[A-Z]+-(\d{4})(0[1-9]|1[0-2])-\d+/);
+        if (match6) {
+          inferredDate = `${match6[1]}-${match6[2]}-01`;
+        } else {
+          // 2. PREFIX-YYYYNN 형식 (예: PC-202423) -> 연도만 있고 뒤에 순번 2자리
+          const matchYearSeq = code.match(/[A-Z]+-(20\d{2})(\d{2})$/);
+          if (matchYearSeq) {
+             inferredDate = `${matchYearSeq[1]}-01-01`; // 월을 모르므로 1월로 통일
+          } else {
+            // 3. PREFIX-YYNNN 형식 (예: PC-24001)
+            const matchShort = code.match(/[A-Z]+-(1\d|2\d)(\d{3})/);
+            if (matchShort) {
+              inferredDate = `20${matchShort[1]}-01-01`;
+            }
+          }
+        }
+
+        // 0000 등의 잘못된 매칭 방지
+        if (inferredDate && !inferredDate.startsWith('0000')) {
+          updates.push({ id: row.id, date: inferredDate, code: code });
+        } else {
+          missing.push({ id: row.id, code: code, category: row.category });
+        }
+      }
+    }
+
+    console.log(`총 ${updates.length}건의 자산을 업데이트합니다.`);
+    for (const item of updates) {
+      await connection.query('UPDATE asset_core SET purchase_date = ? WHERE id = ?', [item.date, item.id]);
+      console.log(`[Update] ${item.code} -> ${item.date}`);
+    }
+
+    console.log('\n--- 구매일자를 추정할 수 없는 자산 목록 ---');
+    if (missing.length === 0) {
+      console.log('없음');
+    } else {
+      // 중복 제거 및 정렬하여 보고
+      const uniqueMissing = missing.filter(m => m.code !== '');
+      uniqueMissing.forEach(m => {
+        console.log(`[Missing] 코드: ${m.code.padEnd(20)} | 카테고리: ${m.category}`);
+      });
+    }
+
+    console.log(`\n완료: ${updates.length}건 업데이트됨, ${missing.length}건 미결정.`);
+
+  } catch (err) {
+    console.error('Error:', err);
+  } finally {
+    connection.release();
+    pool.end();
+  }
+}
+
+run();
--- a/scratch/parse_excel.js
+++ b/scratch/parse_excel.js
@@ -1,30 +0,0 @@
-import pkg from 'xlsx';
-const { readFile, utils } = pkg;
-
-try {
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
-  const sheet = workbook.Sheets[workbook.SheetNames[0]];
-  const rawRows = utils.sheet_to_json(sheet, { header: 1 });
-  
-  const corps = new Set();
-  
-  // 첫 번째 행(헤더) 제외하고 C열(인덱스 2) 데이터 추출
-  rawRows.slice(1).forEach(row => {
-    if (row[2] !== undefined && row[2] !== null) {
-      corps.add(String(row[2]).trim());
-    }
-  });
-  
-  const jobs = new Map();
-  rawRows.slice(1).forEach(row => {
-    const job = String(row[3] || '').trim();
-    jobs.set(job, (jobs.get(job) || 0) + 1);
-  });
-
-  console.log('--- Unique Jobs in D column ---');
-  Array.from(jobs.entries()).forEach(([key, val]) => {
-    console.log(`${key}: ${val}대`);
-  });
-} catch (e) {
-  console.error(e);
-}
--- a/scratch/parse_svr_excel.js
+++ b/scratch/parse_svr_excel.js
@@ -1,27 +0,0 @@
-import pkg from 'xlsx';
-const { readFile, utils } = pkg;
-
-try {
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
-  
-  for (const sheetName of workbook.SheetNames) {
-    console.log(`\n================= Sheet: ${sheetName} =================`);
-    const sheet = workbook.Sheets[sheetName];
-    const rawRows = utils.sheet_to_json(sheet, { header: 1 });
-    const validRows = rawRows.filter(row => {
-      return row.some(val => val !== undefined && val !== null && String(val).trim() !== '');
-    });
-    
-    const header = validRows[0];
-    const assetNameIdx = header.indexOf('자산명');
-    const typeIdx = header.indexOf('유형');
-    const detailIdx = header.indexOf('상세');
-    const teamIdx = header.indexOf('팀명');
-    
-    validRows.slice(1).forEach((row, idx) => {
-      console.log(`[${idx + 1}] 팀명: ${row[teamIdx]} | 자산명: ${row[assetNameIdx]} | 유형: ${row[typeIdx]} | 상세: ${row[detailIdx]}`);
-    });
-  }
-} catch (e) {
-  console.error(e);
-}
--- a/scratch/update_dummy_pcs.js
+++ b/scratch/update_dummy_pcs.js
@@ -1,447 +0,0 @@
-import pkg from 'xlsx';
-import * as fs from 'fs';
-import * as path from 'path';
-
-const { readFile, utils } = pkg;
-
-// 임시 ID 생성 및 도우미 함수
-const randomId = () => Math.random().toString(36).substring(2, 9);
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-
-function cleanValue(val) {
-  if (val === undefined || val === null) return '-';
-  const str = String(val).trim();
-  return str === '' ? '-' : str;
-}
-
-try {
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_PC.xlsx');
-  const sheet = workbook.Sheets[workbook.SheetNames[0]];
-  
-  // header: 1로 읽어 2차원 배열을 획득
-  const rawRows = utils.sheet_to_json(sheet, { header: 1 });
-  
-  // 첫 번째 행은 헤더이므로 제외
-  const dataRows = rawRows.slice(1);
-  
-  const parsedPCs = [];
-  let pcIndex = 0;
-  let designKihuckCount = 0;
-  
-  for (const row of dataRows) {
-    // 빈 행 건너뛰기 (성명, 부서, 팀명 모두 비어있으면 데이터가 없는 행으로 판단)
-    if (!row[0] && !row[1] && !row[2] && !row[3] && !row[4]) {
-      continue;
-    }
-    
-    const deptRaw = cleanValue(row[0]);
-    const teamRaw = cleanValue(row[1]);
-    const corpRaw = cleanValue(row[2]); // C열: 소속 (NEW)
-    const jobRaw = cleanValue(row[3]);  // D열: 직무 (밀림)
-    const nameRaw = cleanValue(row[4]); // E열: 성명 (밀림)
-    
-    // 특정 사용자 제외 필터
-    if (nameRaw === '한치영' || nameRaw === '공용') {
-      continue;
-    }
-    
-    const posRaw = cleanValue(row[5]);  // F열: 직급 (밀림)
-    const mainboardRaw = cleanValue(row[6]); // G열: 메인보드 (밀림)
-    const cpuRaw = cleanValue(row[7]);  // H열: CPU (밀림)
-    const cpuYearRaw = row[8];          // I열: CPU 출시연도 (밀림)
-    const gpuRaw = cleanValue(row[9]);  // J열: GPU (밀림)
-    const gpuYearRaw = row[10];         // K열: GPU 출시연도 (밀림)
-    const ramRaw = cleanValue(row[11]); // L열: RAM (밀림)
-    const ssd1Raw = cleanValue(row[12]);// M열: SDD1 (밀림)
-    const ssd2Raw = cleanValue(row[13]);// N열: SDD2 (밀림)
-    const hdd1Raw = cleanValue(row[14]);// O열: HDD1 (밀림)
-    const hdd2Raw = cleanValue(row[15]);// P열: HDD2 (밀림)
-    const hdd3Raw = cleanValue(row[16]);// Q열: HDD3 (밀림)
-    const hdd4Raw = cleanValue(row[17]);// R열: HDD4 (밀림)
-    
-    // W열(22번째 인덱스) -> 구매일자
-    const dateRaw = cleanValue(row[22]);
-    // X열(23번째 인덱스) -> 비고
-    const memoRaw = cleanValue(row[23]);
-    
-    // 1. 법인 매핑 (엑셀 C열의 실제 소속 우선 사용, 없을 시 순환 지정)
-    const purchase_corp = corpRaw !== '-' ? corpRaw : CORPS[pcIndex % CORPS.length];
-    
-    // 2. 재고PC 판단 및 상태 설정
-    const isStock = teamRaw === '재고PC';
-    const hw_status = isStock ? '창고보관' : '운영중';
-    
-    // 3. 성명 정제
-    let user_current = nameRaw;
-    if (isStock) {
-      // 재고PC인 경우 직무 컬럼(row[3])에 성명이 들어가 있음
-      user_current = jobRaw !== '-' ? jobRaw : '재고장비';
-    }
-    
-    // 4. 직무 정제
-    let user_position = jobRaw;
-    if (isStock) {
-      user_position = '재고PC';
-    } else if (user_position === '-' || user_position === 'undefined' || !user_position || ['안용주', '김민수', '심영표', '이수창A', '조병철', '윤진호', '김대영', '박정웅', '김유식'].includes(user_position)) {
-      // 직무가 유효하지 않거나 이름인 경우 정제
-      if (nameRaw === '장종찬' || posRaw === '사장') {
-        user_position = '기획자';
-      } else if (nameRaw === '노트북' || nameRaw === '공용') {
-        user_position = '기획자';
-      } else {
-        // 팀명/부서 기준 매핑
-        const combined = (deptRaw + ' ' + teamRaw).toUpperCase();
-        if (combined.includes('개발') || combined.includes('SOLUTION') || combined.includes('WEB') || combined.includes('ERP')) {
-          user_position = '개발자';
-        } else if (combined.includes('BIM') || combined.includes('구조') || combined.includes('설계') || combined.includes('터널') || combined.includes('상하수도') || combined.includes('수자원') || combined.includes('건설') || combined.includes('CM')) {
-          user_position = '엔지니어';
-        } else if (combined.includes('디자인') || combined.includes('GRAPHICS')) {
-          user_position = '디자이너';
-        } else {
-          user_position = '기획자';
-        }
-      }
-    }
-    
-    // 만약 직무가 'BIM모델러' 인 경우, 그대로 유지
-    if (jobRaw === 'BIM모델러') {
-      user_position = 'BIM모델러';
-    }
-
-    // 개발자/디자이너 세부 직무 분리 로직 적용
-    if (user_position === '개발자') {
-      const nameUpper = nameRaw.trim();
-      const teamUpper = teamRaw.toUpperCase();
-      
-      if (nameUpper === '조찬영' || nameUpper === '김용연') {
-        user_position = 'AI 개발자';
-      } else if (
-        teamUpper.includes('그래픽스') || 
-        teamUpper.includes('MODELER') || 
-        teamUpper.includes('HMEG') || 
-        teamUpper.includes('EG-BIM') || 
-        teamUpper.includes('GSIM') || 
-        teamUpper.includes('STRANA')
-      ) {
-        user_position = '3D 개발자';
-      } else if (
-        teamUpper.includes('WEB') || 
-        teamUpper.includes('솔루션개발') || 
-        teamUpper.includes('ERP') || 
-        teamUpper.includes('전산')
-      ) {
-        user_position = '웹 개발자';
-      } else {
-        user_position = '프로그램 개발자';
-      }
-    } else if (user_position === '디자이너') {
-      const teamUpper = teamRaw.toUpperCase();
-      if (teamUpper.includes('디자인셀')) {
-        user_position = 'UXUI 디자이너';
-      } else if (teamUpper.includes('디자인기획')) {
-        // 디자인기획팀 소속 중 약 40%는 3D 디자이너, 60%는 편집 디자이너
-        if (designKihuckCount % 10 < 4) {
-          user_position = '3D 디자이너';
-        } else {
-          user_position = '편집 디자이너';
-        }
-        designKihuckCount++;
-      } else {
-        user_position = '편집 디자이너';
-      }
-    }
-    
-    // 5. 구매일자 포맷 가공 (YYYY-MM)
-    let purchase_date = '2022-01'; // 기본값
-    if (dateRaw !== '-') {
-      if (dateRaw.length === 6 && !isNaN(dateRaw)) {
-        purchase_date = `${dateRaw.substring(0, 4)}-${dateRaw.substring(4, 6)}`;
-      } else if (dateRaw.length === 4 && !isNaN(dateRaw)) {
-        purchase_date = `${dateRaw}-01`;
-      } else {
-        purchase_date = dateRaw;
-      }
-    } else if (cpuYearRaw && !isNaN(cpuYearRaw)) {
-      purchase_date = `${cpuYearRaw}-01`;
-    }
-    
-    // 6. 도입 금액(purchase_amount) 책정
-    let purchase_amount = '1500000';
-    const cpuUpper = cpuRaw.toUpperCase();
-    const gpuUpper = gpuRaw.toUpperCase();
-    
-    if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9') || gpuUpper.includes('4080') || gpuUpper.includes('4090')) {
-      purchase_amount = '3500000';
-    } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7') || gpuUpper.includes('3070') || gpuUpper.includes('4070') || gpuUpper.includes('A2000')) {
-      purchase_amount = '2200000';
-    } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5') || gpuUpper.includes('3060') || gpuUpper.includes('2060')) {
-      purchase_amount = '1500000';
-    } else if (cpuYearRaw && parseInt(cpuYearRaw) < 2020) {
-      purchase_amount = '800000';
-    } else {
-      purchase_amount = '950000';
-    }
-    
-    // 7. MAC 주소 생성 (16진수 포맷)
-    const mac_address = `00:1A:2B:3C:4D:${pcIndex.toString(16).toUpperCase().padStart(2, '0')}`;
-    
-    parsedPCs.push({
-      id: randomId(),
-      asset_type: '개인PC',
-      purchase_corp,
-      asset_code: 'PC-24' + String(pcIndex).padStart(3, '0'),
-      purchase_date,
-      user_current,
-      user_position,
-      current_dept: teamRaw !== '-' ? teamRaw : deptRaw,
-      previous_dept: pcIndex % 8 === 0 ? '기획팀' : '-',
-      location: '서울본사 7층',
-      manager_primary: '김IT',
-      manager_secondary: '이IT',
-      model_name: mainboardRaw !== '-' ? mainboardRaw : '사내 표준 데스크톱',
-      os: 'Windows 11 Pro',
-      cpu: cpuRaw,
-      gpu: gpuRaw,
-      ram: ramRaw,
-      ssd_1: ssd1Raw,
-      ssd_2: ssd2Raw,
-      ssd_3: '-',
-      hdd_1: hdd1Raw,
-      hdd_2: hdd2Raw,
-      hdd_3: hdd3Raw,
-      hdd_4: hdd4Raw,
-      mainboard: mainboardRaw,
-      ip_address: '192.168.0.' + (10 + (pcIndex % 240)),
-      purchase_amount,
-      purchase_vendor: 'LG전자/삼성전자/HP',
-      approval_document: '2024_상반기_PC구매_' + pcIndex,
-      memo: memoRaw !== '-' ? memoRaw : (isStock ? '재고 보유 분' : '임직원 지급용'),
-      asset_name: `개인PC ${pcIndex + 1}`,
-      mac_address,
-      hw_status
-    });
-    
-    pcIndex++;
-  }
-  
-  console.log(`Successfully parsed ${parsedPCs.length} PCs from excel file.`);
-  
-  // dummyData.ts 의 나머지 데이터(dummyServers 등)를 포함하여 전체 파일을 새로 씁니다.
-  const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
-
-// 유틸리티: 랜덤 문자열
-const randomId = () => Math.random().toString(36).substring(2, 9);
-
-// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
-const randomPurchaseYM = () => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * 10);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  return \`\${year}-\${month}\`;
-};
-
-// 유틸리티: 랜덤 YYYY-MM-DD
-const randomDateStr = (maxYearsAgo = 10) => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
-  return \`\${year}-\${month}-\${day}\`;
-};
-
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
-
-// ────────────────────────────────────────────────────────
-// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
-// ────────────────────────────────────────────────────────
-export const dummyPCs: any[] = ${JSON.stringify(parsedPCs, null, 2)};
-
-// ────────────────────────────────────────────────────────
-// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등)
-// ────────────────────────────────────────────────────────
-
-export const dummyServers: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '서버',
-  type2: i % 2 === 0 ? '물리' : '가상',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`SRV-24\${String(i).padStart(3, '0')}\`,
-  purchase_date: randomPurchaseYM(),
-  asset_purpose: i % 2 === 0 ? '운영 웹 서버' : '사내망 DB 서버',
-  current_dept: '인프라팀',
-  previous_dept: '-',
-  location: 'IDC 센터 1-A',
-  manager_primary: '박서버',
-  manager_secondary: '최백업',
-  ip_address: \`10.0.0.\${10 + i}\`,
-  ip_address_2: \`192.168.100.\${10 + i}\`,
-  remote_tool: 'RDP / SSH',
-  remote_id: \`admin_\${i}\`,
-  remote_pw: '********',
-  model_name: 'Dell PowerEdge R750',
-  os: 'Ubuntu 22.04 LTS',
-  cpu: 'Intel Xeon Gold 6330',
-  ram: '128GB',
-  gpu: i % 3 === 0 ? 'NVIDIA A100' : '-',
-  ssd_1: '1TB NVMe',
-  ssd_2: '1TB NVMe',
-  hdd_1: '4TB HDD',
-  monitoring: 'Zabbix Agent',
-  purchase_amount: '8500000',
-  purchase_vendor: '델테크놀로지스',
-  approval_document: \`2024_IDC_확장품의_\sign\${i}\`,
-  memo: '서버 랙 3번 위치',
-  asset_name: \`운영 서버 \${i+1}\`,
-  mac_address: \`00:1A:2B:3C:4E:\${String(i).padStart(2, '0')}\`,
-  hw_status: '운영중'
-}));
-
-export const dummyStorages: any[] = Array.from({ length: 8 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '스토리지',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`STR-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`공용 스토리지 \${i+1}\`,
-  location: 'IDC 센터 1-A',
-  model_name: 'Synology RS4021xs+',
-  volume: '100TB',
-  manager_primary: '박서버',
-  manager_secondary: '최백업',
-  ip_address: \`10.0.0.\${50 + i}\`,
-  mac_address: \`00:1A:2B:3C:4F:\${String(i).padStart(2, '0')}\`,
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '12000000',
-  purchase_vendor: '시놀로지코리아',
-  approval_document: \`2024_스토리지구매_\${i}\`,
-  memo: '부서별 백업본 저장용',
-  os: 'Synology DSM',
-  asset_purpose: '데이터 백업',
-  hw_status: '운영중'
-}));
-
-export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '전산비품',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`네트워크 스위치 \${i+1}\`,
-  location: '전산실 랙 1',
-  manager_primary: '네트워크담당자',
-  ip_address: \`192.168.10.\${200 + i}\`,
-  mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
-  os: 'Cisco IOS',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '150000',
-  purchase_vendor: '다나와',
-  approval_document: \`2024_비품구매_\${i}\`,
-  memo: '사내망 확장용',
-  asset_purpose: '네트워크 분배'
-}));
-
-export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '모바일기기',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`테스트용 단말기 \${i+1}\`,
-  location: '개발2팀',
-  manager_primary: '테스터',
-  os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '900000',
-  purchase_vendor: '삼성전자/애플',
-  approval_document: \`2024_모바일구매_\${i}\`,
-  memo: '앱 호환성 테스트 전용',
-  asset_purpose: 'QA 테스트',
-  ip_address: \`192.168.1.\${10 + i}\`,
-  mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
-}));
-
-export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '구독SW',
-  sw_field: '업무용/협업',
-  purchase_corp: getRandomCorp(),
-  current_dept: '전사',
-  product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
-  purchase_date: randomDateStr(3),
-  start_date: randomDateStr(1),
-  expired_date: randomDateStr(0),
-  purchase_amount: '150000',
-  asset_count: 50 + i * 5,
-  email_account: \`admin\${i}@hmcorp.com\`,
-  purchase_vendor: '소프트웨어인라이프',
-  memo: '연간 계약 갱신 필요'
-}));
-
-export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '영구SW',
-  sw_field: '디자인/설계',
-  purchase_corp: getRandomCorp(),
-  current_dept: '디자인팀',
-  product_name: \`AutoCAD 202\${i%4}\`,
-  purchase_date: randomDateStr(5),
-  start_date: randomDateStr(5),
-  expired_date: '2099-12-31',
-  purchase_amount: '3000000',
-  asset_count: 2,
-  email_account: \`design\${i}@hmcorp.com\`,
-  purchase_vendor: '오토데스크 파트너',
-  memo: 'USB 동글키 보관중'
-}));
-
-export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '클라우드',
-  asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
-  purchase_corp: getRandomCorp(),
-  current_dept: '개발팀',
-  product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
-  email_account: \`awsadmin\${i}@hmcorp.com\`,
-  purchase_method: '법인카드(신한 1234)',
-  purchase_amount: \`\${500000 + i * 100000}\`,
-  asset_count: 1,
-  purchase_vendor: 'AWS/GCP',
-  memo: '환율 변동에 따라 매월 상이함'
-}));
-
-export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '도메인',
-  purchase_corp: getRandomCorp(),
-  product_name: \`사내 운영 서비스 \${i+1}\`,
-  domain_address: \`service\${i+1}.hmcorp.com\`,
-  start_date: randomDateStr(4),
-  expired_date: randomDateStr(0),
-  purchase_amount: '22000',
-  manager_primary: '인프라팀장',
-  manager_secondary: '인프라담당자',
-  memo: '가비아 자동갱신 설정 완료'
-}));
-
-export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  sw_id: dummySubSw[0]?.id || randomId(),
-  purchase_corp: getRandomCorp(),
-  current_dept: '경영지원팀',
-  user_current: \`홍길동\${i}\`,
-  memo: \`SW신청서_2400\${i}\`
-}));
-
-export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  assetId: dummyPCs[0]?.id || randomId(),
-  date: randomDateStr(1),
-  details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
-  user: 'IT지원팀',
-  cost: i % 2 === 0 ? 80000 : 150000,
-}));
-`;
-
-  fs.writeFileSync('c:/Project/HM ITAM/src/core/dummyData.ts', newDummyDataFileContent, 'utf-8');
-  console.log('✅ dummyData.ts file updated successfully.');
-} catch (e) {
-  console.error('❌ Failed to update dummy data:', e);
-}
--- a/scratch/update_dummy_servers.js
+++ b/scratch/update_dummy_servers.js
@@ -1,442 +0,0 @@
-import pkg from 'xlsx';
-import * as fs from 'fs';
-import * as path from 'path';
-
-const { readFile, utils } = pkg;
-
-const randomId = () => Math.random().toString(36).substring(2, 9);
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-
-function cleanValue(val) {
-  if (val === undefined || val === null) return '-';
-  const str = String(val).trim();
-  return str === '' ? '-' : str;
-}
-
-try {
-  // 1. 기존 dummyPCs 로딩
-  const dummyDataPath = 'c:/Project/HM ITAM/src/core/dummyData.ts';
-  const content = fs.readFileSync(dummyDataPath, 'utf-8');
-  const matchPCs = content.match(/export const dummyPCs: any\[\] = (\[[\s\S]*?\]);/);
-  if (!matchPCs) {
-    console.error('Failed to parse dummyPCs from dummyData.ts');
-    process.exit(1);
-  }
-  const dummyPCs = JSON.parse(matchPCs[1]);
-  console.log(`Loaded ${dummyPCs.length} existing PCs from dummyData.ts`);
-
-  // 2. SampleData_SVR.xlsx 파싱
-  const workbook = readFile('c:/Project/HM ITAM/SampleData_SVR.xlsx');
-  
-  const parsedServers = [];
-  const parsedStorages = [];
-  const parsedEquips = [];
-
-  let serverIndex = 0;
-  let storageIndex = 0;
-  let equipIndex = 0;
-
-  // ----------------- 시트 1: 합본데이터(공용PC) -----------------
-  const sheetPC = workbook.Sheets['합본데이터(공용PC)'];
-  const rawPC = utils.sheet_to_json(sheetPC, { header: 1 });
-  const rowsPC = rawPC.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
-
-  for (const row of rowsPC) {
-    const teamRaw = cleanValue(row[0]);
-    const svrNoRaw = cleanValue(row[1]);
-    const assetNameRaw = cleanValue(row[2]);
-    const typeRaw = cleanValue(row[3]);
-    const detailRaw = cleanValue(row[4]);
-    const locRaw = cleanValue(row[5]);
-    const mgr1Raw = cleanValue(row[6]);
-    const mgr2Raw = cleanValue(row[7]);
-    const osRaw = cleanValue(row[8]);
-    const osVerRaw = cleanValue(row[9]);
-    const osBuildRaw = cleanValue(row[10]);
-    const modelRaw = cleanValue(row[11]);
-    const mainboardRaw = cleanValue(row[12]);
-    const cpuRaw = cleanValue(row[13]);
-    const ramRaw = cleanValue(row[14]);
-    const gpuRaw = cleanValue(row[15]);
-    const ssd1Raw = cleanValue(row[16]);
-    const ssd2Raw = cleanValue(row[17]);
-    const hdd1Raw = cleanValue(row[18]);
-    const hdd2Raw = cleanValue(row[19]);
-    const hdd3Raw = cleanValue(row[20]);
-    const hdd4Raw = cleanValue(row[21]);
-
-    const ipAddress = '172.16.10.' + (50 + (serverIndex % 150));
-    const randomCorp = CORPS[serverIndex % CORPS.length];
-
-    // 서비스 분류 판단
-    let service_type = '내부서비스';
-    const detailUpper = detailRaw.toUpperCase();
-    const assetUpper = assetNameRaw.toUpperCase();
-    const teamUpper = teamRaw.toUpperCase();
-
-    if (teamUpper.includes('회의실') || assetUpper.includes('회의실') || assetUpper.includes('사이니지')) {
-      service_type = '회의용/공용';
-    } else if (
-      detailUpper.includes('SAAS') || detailUpper.includes('웹서비스') || 
-      detailUpper.includes('운영') || detailUpper.includes('WAS') || 
-      detailUpper.includes('MYSTATION') || detailUpper.includes('CLOUD') || 
-      detailUpper.includes('홈페이지') || detailUpper.includes('WEB') || 
-      detailUpper.includes('외주') || assetUpper.includes('CLOUD') || 
-      assetUpper.includes('웹서비스') || assetUpper.includes('운영')
-    ) {
-      service_type = '외부서비스';
-    }
-
-    // 방치 의심 판단
-    const is_inactive = (
-      detailUpper.includes('원격 및 로컬접근 불가') || 
-      detailUpper.includes('철수예정') || 
-      detailUpper.includes('미사용') || 
-      detailUpper.includes('구형 OS')
-    );
-
-    // 실시간 리소스 및 네트워크 가상 데이터 생성
-    let cpu_usage = 0;
-    let ram_usage = 0;
-    let network_traffic = '0 GB';
-
-    if (is_inactive) {
-      cpu_usage = 0;
-      ram_usage = 0;
-      network_traffic = '0 GB (N/A)';
-    } else if (service_type === '회의용/공용') {
-      cpu_usage = Math.floor(Math.random() * 10) + 2; // 2%~12%
-      ram_usage = Math.floor(Math.random() * 15) + 5; // 5%~20%
-      network_traffic = (Math.random() * 1.5 + 0.1).toFixed(1) + ' GB';
-    } else if (service_type === '외부서비스') {
-      // 일부 저사양 운영/SaaS 서버는 병목 현상을 시뮬레이션하기 위해 과부하 부여
-      const isUnderSpec = !gpuRaw.toUpperCase().includes('RTX 30') && !gpuRaw.toUpperCase().includes('RTX 40') && (cpuRaw.toUpperCase().includes('I5') || ramRaw.toUpperCase().includes('16GB') || cpuRaw === '-');
-      if (isUnderSpec) {
-        cpu_usage = Math.floor(Math.random() * 15) + 81; // 81%~95% (과부하)
-        ram_usage = Math.floor(Math.random() * 10) + 86; // 86%~95%
-      } else {
-        cpu_usage = Math.floor(Math.random() * 30) + 40; // 40%~70%
-        ram_usage = Math.floor(Math.random() * 20) + 60; // 60%~80%
-      }
-      network_traffic = (Math.random() * 1500 + 300).toFixed(0) + ' GB';
-    } else { // 내부서비스
-      // Abaqus 해석용이나 Pix4D 등 고부하 내부 인프라도 부하율 높게 부여
-      const isHighLoad = detailUpper.includes('ABAQUS') || detailUpper.includes('PIX4D') || detailUpper.includes('영상 렌더링') || detailUpper.includes('TERRA');
-      if (isHighLoad) {
-        cpu_usage = Math.floor(Math.random() * 20) + 70; // 70%~90%
-        ram_usage = Math.floor(Math.random() * 20) + 75; // 75%~95%
-      } else {
-        cpu_usage = Math.floor(Math.random() * 35) + 15; // 15%~50%
-        ram_usage = Math.floor(Math.random() * 30) + 20; // 20%~50%
-      }
-      network_traffic = (Math.random() * 300 + 10).toFixed(0) + ' GB';
-    }
-
-    const assetItem = {
-      id: randomId(),
-      asset_type: typeRaw !== '-' ? typeRaw : '공용PC',
-      purchase_corp: randomCorp,
-      asset_code: 'SVR-24' + String(serverIndex).padStart(3, '0'),
-      purchase_date: '2023-03',
-      asset_purpose: detailRaw,
-      current_dept: teamRaw,
-      previous_dept: '-',
-      location: locRaw,
-      manager_primary: mgr1Raw,
-      manager_secondary: mgr2Raw,
-      ip_address: ipAddress,
-      remote_tool: 'RDP / VNC',
-      model_name: modelRaw !== '-' ? modelRaw : (mainboardRaw !== '-' ? mainboardRaw : '사내 표준 공용PC'),
-      os: osRaw !== '-' ? `${osRaw} (${osVerRaw})` : 'Windows 10',
-      cpu: cpuRaw,
-      ram: ramRaw,
-      gpu: gpuRaw,
-      ssd_1: ssd1Raw,
-      ssd_2: ssd2Raw,
-      hdd_1: hdd1Raw,
-      hdd_2: hdd2Raw,
-      hdd_3: hdd3Raw,
-      hdd_4: hdd4Raw,
-      monitoring: service_type === '외부서비스' ? '대상' : '비대상',
-      purchase_amount: gpuRaw.toUpperCase().includes('RTX 4080') || gpuRaw.toUpperCase().includes('RTX 3090') ? '3500000' : '1500000',
-      purchase_vendor: '다나와',
-      approval_document: '2023_공용PC_도입_' + serverIndex,
-      memo: is_inactive ? '방치 의심 장비 (회수 필요)' : '정상 운영 장비',
-      asset_name: assetNameRaw,
-      mac_address: `00:1A:2B:3C:5E:${serverIndex.toString(16).toUpperCase().padStart(2, '0')}`,
-      hw_status: is_inactive ? '수리/대기' : '운영중',
-      service_type: service_type,
-      is_inactive: is_inactive,
-      cpu_usage: cpu_usage,
-      ram_usage: ram_usage,
-      network_traffic: network_traffic
-    };
-
-    // 스토리지로 보낼 자산들 (유형이 NAS/DAS이거나 자산명에 NAS가 들어가면)
-    if (typeRaw.toUpperCase().includes('NAS') || typeRaw.toUpperCase().includes('DAS') || assetUpper.includes('NAS') || assetUpper.includes('DAS')) {
-      assetItem.asset_code = 'STO-24' + String(storageIndex).padStart(3, '0');
-      assetItem.volume = hdd1Raw !== '-' ? hdd1Raw : '10TB';
-      parsedStorages.push(assetItem);
-      storageIndex++;
-    } else {
-      parsedServers.push(assetItem);
-      serverIndex++;
-    }
-  }
-
-  // ----------------- 시트 2: 합본데이터(NAS) -----------------
-  const sheetNAS = workbook.Sheets['합본데이터(NAS)'];
-  const rawNAS = utils.sheet_to_json(sheetNAS, { header: 1 });
-  const rowsNAS = rawNAS.slice(1).filter(row => row.some(val => val !== undefined && val !== null && String(val).trim() !== ''));
-
-  for (const row of rowsNAS) {
-    const teamRaw = cleanValue(row[0]);
-    const svrNoRaw = cleanValue(row[1]);
-    const assetNameRaw = cleanValue(row[2]);
-    const typeRaw = cleanValue(row[3]);
-    const detailRaw = cleanValue(row[4]);
-    const locRaw = cleanValue(row[5]);
-    const mgr1Raw = cleanValue(row[6]);
-    const mgr2Raw = cleanValue(row[7]);
-    const toolRaw = cleanValue(row[8]);
-    const ipRaw = cleanValue(row[9]);
-    const ip2Raw = cleanValue(row[10]);
-    const idRaw = cleanValue(row[11]);
-    const pwRaw = cleanValue(row[12]);
-    const osRaw = cleanValue(row[15]);
-    const osVerRaw = cleanValue(row[16]);
-    const osBuildRaw = cleanValue(row[17]);
-    const modelRaw = cleanValue(row[18]);
-    const cpuRaw = cleanValue(row[19]);
-    const ramRaw = cleanValue(row[20]);
-    const gpuRaw = cleanValue(row[21]);
-    const ssd1Raw = cleanValue(row[22]);
-    const ssd2Raw = cleanValue(row[23]);
-    const hdd1Raw = cleanValue(row[24]);
-    const hdd2Raw = cleanValue(row[25]);
-    const hdd3Raw = cleanValue(row[26]);
-    const hdd4Raw = cleanValue(row[27]);
-
-    const randomCorp = CORPS[storageIndex % CORPS.length];
-    
-    // NAS는 기본적으로 내부 백업/공유용 인프라
-    const service_type = '내부서비스';
-    const is_inactive = false;
-
-    // NAS 실시간 리소스 가상 데이터
-    const cpu_usage = Math.floor(Math.random() * 25) + 15; // 15%~40%
-    const ram_usage = Math.floor(Math.random() * 35) + 30; // 30%~65%
-    const network_traffic = (Math.random() * 600 + 50).toFixed(0) + ' GB';
-
-    const assetItem = {
-      id: randomId(),
-      asset_type: typeRaw !== '-' ? typeRaw : '공용 NAS',
-      purchase_corp: randomCorp,
-      asset_code: 'STO-24' + String(storageIndex).padStart(3, '0'),
-      purchase_date: '2022-08',
-      asset_purpose: detailRaw,
-      current_dept: teamRaw !== '-' ? teamRaw : '디자인팀',
-      previous_dept: '-',
-      location: locRaw,
-      manager_primary: mgr1Raw,
-      manager_secondary: mgr2Raw,
-      ip_address: ipRaw !== '-' ? ipRaw : '172.16.42.' + (100 + storageIndex),
-      remote_tool: toolRaw !== '-' ? toolRaw : 'Web GUI',
-      model_name: modelRaw !== '-' ? modelRaw : 'Synology 공용 NAS',
-      os: osRaw !== '-' ? `${osRaw} ${osVerRaw}` : 'DSM 7.x',
-      cpu: cpuRaw,
-      ram: ramRaw,
-      gpu: gpuRaw,
-      ssd_1: ssd1Raw,
-      ssd_2: ssd2Raw,
-      hdd_1: hdd1Raw,
-      hdd_2: hdd2Raw,
-      hdd_3: hdd3Raw,
-      hdd_4: hdd4Raw,
-      monitoring: '비대상',
-      purchase_amount: '4500000',
-      purchase_vendor: '시놀로지 총판',
-      approval_document: '2022_스토리지_도입_' + storageIndex,
-      memo: '스토리지 서버 공유 자산',
-      asset_name: assetNameRaw,
-      mac_address: `00:1A:2B:3C:5F:${storageIndex.toString(16).toUpperCase().padStart(2, '0')}`,
-      hw_status: '운영중',
-      service_type: service_type,
-      is_inactive: is_inactive,
-      volume: hdd1Raw !== '-' ? hdd1Raw : '24TB',
-      cpu_usage: cpu_usage,
-      ram_usage: ram_usage,
-      network_traffic: network_traffic
-    };
-
-    parsedStorages.push(assetItem);
-    storageIndex++;
-  }
-
-  console.log(`Parsed Servers: ${parsedServers.length} units`);
-  console.log(`Parsed Storages: ${parsedStorages.length} units`);
-
-  // 3. 파일 다시 쓰기
-  const newDummyDataFileContent = `import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
-
-// 유틸리티: 랜덤 문자열
-const randomId = () => Math.random().toString(36).substring(2, 9);
-
-// 유틸리티: 랜덤 년월 (YYYY-MM) (최근 10년)
-const randomPurchaseYM = () => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * 10);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  return \`\${year}-\${month}\`;
-};
-
-// 유틸리티: 랜덤 YYYY-MM-DD
-const randomDateStr = (maxYearsAgo = 10) => {
-  const currentYear = new Date().getFullYear();
-  const year = currentYear - Math.floor(Math.random() * maxYearsAgo);
-  const month = String(Math.floor(Math.random() * 12) + 1).padStart(2, '0');
-  const day = String(Math.floor(Math.random() * 28) + 1).padStart(2, '0');
-  return \`\${year}-\${month}-\${day}\`;
-};
-
-const CORPS = ['한맥', '삼안', '장헌', '장헌산업', 'PTC', '바론', '한라'];
-const getRandomCorp = () => CORPS[Math.floor(Math.random() * CORPS.length)];
-
-// ────────────────────────────────────────────────────────
-// 1. SampleData_PC.xlsx 에서 파싱된 PC 데이터 주입
-// ────────────────────────────────────────────────────────
-export const dummyPCs: any[] = ${JSON.stringify(dummyPCs, null, 2)};
-
-// ────────────────────────────────────────────────────────
-// 2. 기타 자산 더미 데이터 (서버, 스토리지, 소프트웨어 등 - 엑셀 파싱 연동)
-// ────────────────────────────────────────────────────────
-
-export const dummyServers: any[] = ${JSON.stringify(parsedServers, null, 2)};
-
-export const dummyStorages: any[] = ${JSON.stringify(parsedStorages, null, 2)};
-
-export const dummyEquips: any[] = Array.from({ length: 12 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '전산비품',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`EQ-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`네트워크 스위치 \${i+1}\`,
-  location: '전산실 랙 1',
-  manager_primary: '네트워크담당자',
-  ip_address: \`192.168.10.\${200 + i}\`,
-  mac_address: \`00:1A:2B:3C:51:\${String(i).padStart(2, '0')}\`,
-  os: 'Cisco IOS',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '150000',
-  purchase_vendor: '다나와',
-  approval_document: \`2024_비품구매_\${i}\`,
-  memo: '사내망 확장용',
-  asset_purpose: '네트워크 분배'
-}));
-
-export const dummyMobiles: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '모바일기기',
-  purchase_corp: getRandomCorp(),
-  asset_code: \`MOB-24\${String(i).padStart(3, '0')}\`,
-  asset_name: \`테스트용 단말기 \${i+1}\`,
-  location: '개발2팀',
-  manager_primary: '테스터',
-  os: i % 2 === 0 ? 'Android 14' : 'iOS 17',
-  purchase_date: randomPurchaseYM(),
-  purchase_amount: '900000',
-  purchase_vendor: '삼성전자/애플',
-  approval_document: \`2024_모바일구매_\${i}\`,
-  memo: '앱 호환성 테스트 전용',
-  asset_purpose: 'QA 테스트',
-  ip_address: \`192.168.1.\${10 + i}\`,
-  mac_address: \`00:1A:2B:3C:50:\${String(i).padStart(2, '0')}\`
-}));
-
-export const dummySubSw: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '구독SW',
-  sw_field: '업무용/협업',
-  purchase_corp: getRandomCorp(),
-  current_dept: '전사',
-  product_name: \`Microsoft 365 E\${3 + (i%2)}\`,
-  purchase_date: randomDateStr(3),
-  start_date: randomDateStr(1),
-  expired_date: randomDateStr(0),
-  purchase_amount: '150000',
-  asset_count: 50 + i * 5,
-  email_account: \`admin\${i}@hmcorp.com\`,
-  purchase_vendor: '소프트웨어인라이프',
-  memo: '연간 계약 갱신 필요'
-}));
-
-export const dummyPermSw: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '영구SW',
-  sw_field: '디자인/설계',
-  purchase_corp: getRandomCorp(),
-  current_dept: '디자인팀',
-  product_name: \`AutoCAD 202\${i%4}\`,
-  purchase_date: randomDateStr(5),
-  start_date: randomDateStr(5),
-  expired_date: '2099-12-31',
-  purchase_amount: '3000000',
-  asset_count: 2,
-  email_account: \`design\${i}@hmcorp.com\`,
-  purchase_vendor: '오토데스크 파트너',
-  memo: 'USB 동글키 보관중'
-}));
-
-export const dummyCloud: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  sw_type: '클라우드',
-  asset_mfr: i % 2 === 0 ? 'AWS' : 'GCP',
-  purchase_corp: getRandomCorp(),
-  current_dept: '개발팀',
-  product_name: \`컴퓨팅 인스턴스 Type \${i}\`,
-  email_account: \`awsadmin\${i}@hmcorp.com\`,
-  purchase_method: '법인카드(신한 1234)',
-  purchase_amount: \`\${500000 + i * 100000}\`,
-  asset_count: 1,
-  purchase_vendor: 'AWS/GCP',
-  memo: '환율 변동에 따라 매월 상이함'
-}));
-
-export const dummyDomain: any[] = Array.from({ length: 5 }).map((_, i) => ({
-  id: randomId(),
-  asset_type: '도메인',
-  purchase_corp: getRandomCorp(),
-  product_name: \`사내 운영 서비스 \${i+1}\`,
-  domain_address: \`service\${i+1}.hmcorp.com\`,
-  start_date: randomDateStr(4),
-  expired_date: randomDateStr(0),
-  purchase_amount: '22000',
-  manager_primary: '인프라팀장',
-  manager_secondary: '인프라담당자',
-  memo: '가비아 자동갱신 설정 완료'
-}));
-
-export const dummySwUsers: any[] = Array.from({ length: 15 }).map((_, i) => ({
-  id: randomId(),
-  sw_id: dummySubSw[0]?.id || randomId(),
-  purchase_corp: getRandomCorp(),
-  current_dept: '경영지원팀',
-  user_current: \`홍길동\${i}\`,
-  memo: \`SW신청서_2400\${i}\`
-}));
-
-export const dummyLogs: any[] = Array.from({ length: 10 }).map((_, i) => ({
-  id: randomId(),
-  assetId: dummyPCs[0]?.id || randomId(),
-  date: randomDateStr(1),
-  details: i % 2 === 0 ? '메모리 추가 증설 (16GB -> 32GB)' : '디스플레이 파손 수리',
-  user: 'IT지원팀',
-  cost: i % 2 === 0 ? 80000 : 150000,
-}));
-`;
-
-  fs.writeFileSync(dummyDataPath, newDummyDataFileContent, 'utf-8');
-  console.log('✅ dummyData.ts file updated successfully with SVR dataset.');
-} catch (e) {
-  console.error('❌ Failed to update dummy data:', e);
-}
--- a/server.js
+++ b/server.js
@@ -4,7 +4,7 @@ import cors from 'cors';
 import dotenv from 'dotenv';
 import fs from 'fs';

-dotenv.config();
+dotenv.config({ override: true });

 const app = express();
 app.use(cors());
@@ -28,6 +28,32 @@ const pool = mysql.createPool({
  queueLimit: 0
 });

+// Database startup check (ensure job_spec_standards table exists)
+(async () => {
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query(`
+      CREATE TABLE IF NOT EXISTS job_spec_standards (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        job_name VARCHAR(100) UNIQUE NOT NULL,
+        cpu_standard VARCHAR(255),
+        ram_standard VARCHAR(100),
+        gpu_standard VARCHAR(100),
+        min_score INT DEFAULT 0,
+        remarks TEXT,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+      ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
+    `);
+    console.log('✅ job_spec_standards table verification completed.');
+  } catch (err) {
+    console.error('❌ Failed to verify/create job_spec_standards table:', err);
+  } finally {
+    if (connection) connection.release();
+  }
+})();
+
 // Error Handler
 const handleError = (res, err, label) => {
  console.error(`❌ [${label}] Error:`, err);
@@ -36,25 +62,24 @@ const handleError = (res, err, label) => {

 // --- Global Constants ---
 const CATEGORY_TABLE_MAP = {
-  pc: 'asset_pc',
-  server: 'asset_server',
-  storage: 'asset_storage',
-  network: 'asset_network',
-  equipment: 'asset_equipment',
-  officeSupplies: 'asset_office_supplies',
-  survey: 'asset_survey',
-  vip: 'asset_vip',
-  swInternal: 'sw_internal',
-  swExternal: 'sw_external',
-  cloud: 'asset_cloud',
+  pc: 'asset_core',
+  server: 'asset_core',
+  storage: 'asset_core',
+  network: 'asset_core',
+  equipment: 'asset_core',
+  officeSupplies: 'asset_core',
+  survey: 'asset_core',
+  vip: 'asset_core',
+  pcParts: 'asset_core',
+  swInternal: 'asset_software_perpetual',
+  swExternal: 'asset_software_subscription',
+  swUsers: 'asset_software_assignment',
  users: 'system_users',
-  swUsers: 'sw_assignment',
  logs: 'asset_history'
 };

 const ASSET_TABLES = [
-  'asset_pc', 'asset_server', 'asset_storage', 'asset_network', 
-  'asset_equipment', 'asset_office_supplies', 'asset_survey', 'asset_vip'
+  'asset_core'
 ];

 // --- API Endpoints ---
@@ -101,22 +126,27 @@ app.post('/api/:table/batch', async (req, res) => {

 // 2. Get All Assets (Integrated Master Data from Normalized V3 Schema)
 app.get('/api/assets/master', async (req, res) => {
+  let connection;
  try {
-    const connection = await pool.getConnection();
+    connection = await pool.getConnection();

    const masterData = {
      pc: [], server: [], storage: [], network: [],
      equipment: [], officeSupplies: [], survey: [], vip: [], pcParts: [],
-      swInternal: [], swExternal: [], swUsers: [], users: [], logs: []
+      swInternal: [], swExternal: [], swUsers: [], users: [], logs: [], partsMaster: []
    };

+    // Load from V3 Normalized Schema
    const [rows] = await connection.query(`
      SELECT 
        c.*, 
        s.hw_status, s.model_name, s.mainboard, s.os, s.cpu, s.ram, s.gpu, 
        s.monitoring, s.price, s.monitor_inch, s.serial_num,
        l.location, l.location_detail, l.location_photo, l.loc_x, l.loc_y,
-        n.ip_address, n.mac_address, n.remote_tool, n.remote_id, n.remote_pw,
+        (
+          SELECT JSON_ARRAYAGG(JSON_OBJECT('type', net_type, 'name', net_name, 'val1', net_value1, 'val2', net_value2))
+          FROM asset_remote WHERE asset_id = c.id AND is_active = 1
+        ) as remotes,
        (
          SELECT JSON_ARRAYAGG(JSON_OBJECT('type', disk_type, 'capacity', capacity, 'unit', unit, 'slot', slot_no))
          FROM asset_volume WHERE asset_id = c.id
@@ -128,11 +158,6 @@ app.get('/api/assets/master', async (req, res) => {
        WHERE asset_id = c.id AND is_active = 1 
        ORDER BY created_at DESC LIMIT 1
      )
-      LEFT JOIN asset_network n ON n.id = (
-        SELECT id FROM asset_network 
-        WHERE asset_id = c.id AND is_active = 1 
-        ORDER BY created_at DESC LIMIT 1
-      )
    `);

    const catMap = {
@@ -151,17 +176,22 @@ app.get('/api/assets/master', async (req, res) => {
    const [swUsers] = await connection.query('SELECT * FROM asset_software_assignment');
    const [users] = await connection.query('SELECT * FROM system_users');
    const [logs] = await connection.query('SELECT * FROM asset_history ORDER BY created_at DESC');
+    const [partsMaster] = await connection.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
+    const [jobSpecs] = await connection.query('SELECT * FROM job_spec_standards ORDER BY job_name');
    
    masterData.swInternal = swInternal;
    masterData.swExternal = swExternal;
    masterData.swUsers = swUsers;
    masterData.users = users;
    masterData.logs = logs;
+    masterData.partsMaster = partsMaster;
+    masterData.jobSpecs = jobSpecs;

-    connection.release();
    res.json(masterData);
  } catch (err) {
    handleError(res, err, 'MASTER DATA');
+  } finally {
+    if (connection) connection.release();
  }
 });

@@ -173,13 +203,102 @@ app.post('/api/asset/:category/save', async (req, res) => {
    connection = await pool.getConnection();
    await connection.beginTransaction();

+    // 3.0 History Tracking & Auto Field Update
+    const [oldCoreRows] = await connection.query('SELECT * FROM asset_core WHERE id = ?', [asset.id]);
+    const [oldSpecRows] = await connection.query('SELECT * FROM asset_spec WHERE asset_id = ?', [asset.id]);
+    const oldCore = oldCoreRows[0] || {};
+    const oldSpec = oldSpecRows[0] || {};
+
+    const historyLogs = [];
+    const logDate = new Date().toISOString().split('T')[0]; // YYYY-MM-DD
+    const logUser = '관리자';
+
+    // 3.0.1 Core 변동 감지 (Dept, User)
+    const oldDept = oldCore.current_dept || '';
+    const newDept = asset.current_dept || '';
+    if (newDept !== '' && oldDept !== newDept) {
+        asset.previous_dept = oldDept;
+        historyLogs.push({
+            event_type: 'DEPT_CHANGE',
+            old_dept: oldDept || null,
+            new_dept: newDept,
+            details: `[조직 변동] ${oldDept || '(없음)'} -> ${newDept}`
+        });
+    }
+
+    const oldUser = oldCore.user_current || '';
+    const newUser = asset.user_current || '';
+    if (newUser !== '' && oldUser !== newUser) {
+        asset.previous_user = oldUser;
+        historyLogs.push({
+            event_type: 'USER_CHANGE',
+            old_user: oldUser || null,
+            new_user: newUser,
+            details: `[사용자 변동] ${oldUser || '(없음)'} -> ${newUser}`
+        });
+    }
+
+    // 3.0.2 Spec 변동 감지 (CPU, RAM, GPU, OS, Mainboard 등)
+    const specFieldsToTrack = [
+        { key: 'cpu', label: 'CPU' },
+        { key: 'ram', label: 'RAM' },
+        { key: 'gpu', label: 'GPU' },
+        { key: 'os', label: 'OS' },
+        { key: 'mainboard', label: '메인보드' }
+    ];
+
+    specFieldsToTrack.forEach(field => {
+        const oldVal = String(oldSpec[field.key] || '').trim();
+        const newVal = String(asset[field.key] || '').trim();
+        if (newVal !== '' && oldVal !== newVal) {
+            historyLogs.push({
+                event_type: 'SPEC_CHANGE',
+                details: `[사양 변경] ${field.label}: ${oldVal || '(없음)'} -> ${newVal}`
+            });
+        }
+    });
+
+    // 3.0.3 상태 변경 감지
+    const oldStatus = oldSpec.hw_status || '';
+    const newStatus = asset.hw_status || '';
+    if (newStatus !== '' && oldStatus !== newStatus) {
+        historyLogs.push({
+            event_type: 'STATUS_CHANGE',
+            details: `[상태 변경] ${oldStatus || '(없음)'} -> ${newStatus}`
+        });
+    }
+
+    // 로그 일괄 삽입
+    for (const log of historyLogs) {
+        await connection.query(
+            `INSERT INTO asset_history (asset_id, event_type, old_dept, new_dept, old_user, new_user, details, log_date, log_user) 
+             VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+            [asset.id, log.event_type, log.old_dept || null, log.new_dept || null, log.old_user || null, log.new_user || null, log.details, logDate, logUser]
+        );
+    }
+
    // 3.1 asset_core
    const coreFields = ['id', 'asset_code', 'category', 'asset_type', 'current_role', 'asset_purpose', 'service_type', 'purchase_corp', 'purchase_date', 'purchase_amount', 'purchase_vendor', 'approval_document', 'memo', 'manager_primary', 'manager_secondary', 'current_dept', 'previous_dept', 'user_current', 'previous_user', 'emp_no', 'user_position'];
    const coreData = {};
    coreFields.forEach(f => { if (asset[f] !== undefined) coreData[f] = asset[f]; });
    const coreKeys = Object.keys(coreData);
-    const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')}) ON DUPLICATE KEY UPDATE ${coreKeys.map(k => `${k} = VALUES(${k})`).join(', ')}`;
-    await connection.query(coreSql, Object.values(coreData));
+
+    console.log(`[DEBUG] Saving Asset ID: ${asset.id}, Code: ${asset.asset_code}`);
+    const [existingCore] = await connection.query('SELECT id FROM asset_core WHERE id = ?', [asset.id]);
+    console.log(`[DEBUG] Existing Core Check for ${asset.id}: Found ${existingCore.length}`);
+
+    if (existingCore.length > 0) {
+        // UPDATE
+        const updateKeys = coreKeys.filter(k => k !== 'id');
+        const coreSql = `UPDATE asset_core SET ${updateKeys.map(k => `${k} = ?`).join(', ')} WHERE id = ?`;
+        const [updRes] = await connection.query(coreSql, [...updateKeys.map(k => coreData[k]), asset.id]);
+        console.log(`[DEBUG] Core UPDATE result: affectedRows=${updRes.affectedRows}`);
+    } else {
+        // INSERT
+        const coreSql = `INSERT INTO asset_core (${coreKeys.join(', ')}) VALUES (${coreKeys.map(() => '?').join(', ')})`;
+        const [insRes] = await connection.query(coreSql, Object.values(coreData));
+        console.log(`[DEBUG] Core INSERT result: affectedRows=${insRes.affectedRows}`);
+    }

    // 3.2 asset_spec
    const specFields = ['hw_status', 'model_name', 'mainboard', 'os', 'cpu', 'ram', 'gpu', 'monitoring', 'price', 'monitor_inch', 'serial_num'];
@@ -224,14 +343,36 @@ app.post('/api/asset/:category/save', async (req, res) => {
        }
    }

-    // 3.5 asset_network
-    if (asset.ip_address || asset.mac_address || asset.remote_tool) {
-        const [netActive] = await connection.query('SELECT * FROM asset_network WHERE asset_id = ? AND is_active = 1', [asset.id]);
-        const isChanged = netActive.length === 0 || netActive[0].ip_address !== asset.ip_address || netActive[0].mac_address !== asset.mac_address || netActive[0].remote_tool !== asset.remote_tool || netActive[0].remote_id !== asset.remote_id || netActive[0].remote_pw !== asset.remote_pw;
-        if (isChanged) {
-            await connection.query('UPDATE asset_network SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
-            await connection.query(`INSERT INTO asset_network (asset_id, ip_address, mac_address, remote_tool, remote_id, remote_pw, is_active) VALUES (?, ?, ?, ?, ?, ?, 1)`, 
-                [asset.id, asset.ip_address, asset.mac_address, asset.remote_tool, asset.remote_id, asset.remote_pw]);
+    // 3.5 asset_remote (Dynamic Array Logic)
+    if (asset.remotes) {
+        try {
+            let nets = typeof asset.remotes === 'string' ? JSON.parse(asset.remotes) : asset.remotes;
+            if (Array.isArray(nets)) {
+                await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
+                for (const n of nets) {
+                    if (n.type) {
+                        await connection.query(
+                            'INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', 
+                            [asset.id, n.type, n.name || '', n.val1 || '', n.val2 || '']
+                        );
+                    }
+                }
+            }
+        } catch(e) { console.error('Remote data parse error', e); }
+    } else {
+        // Fallback for UI that hasn't sent the networks array yet
+        if (asset.ip_address || asset.mac_address || asset.remote_tool) {
+            const [netActive] = await connection.query('SELECT * FROM asset_remote WHERE asset_id = ? AND is_active = 1', [asset.id]);
+            const isChanged = netActive.length === 0 || netActive[0].net_value1 !== asset.ip_address || netActive[0].net_value2 !== asset.mac_address || netActive[0].net_name !== asset.remote_tool;
+            if (isChanged) {
+                await connection.query('UPDATE asset_remote SET is_active = 0, deactivated_at = NOW() WHERE asset_id = ? AND is_active = 1', [asset.id]);
+                if (asset.ip_address || asset.mac_address) {
+                    await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'IP', '기본망', asset.ip_address, asset.mac_address]);
+                }
+                if (asset.remote_tool || asset.remote_id || asset.remote_pw) {
+                    await connection.query('INSERT INTO asset_remote (asset_id, net_type, net_name, net_value1, net_value2, is_active) VALUES (?, ?, ?, ?, ?, 1)', [asset.id, 'REMOTE', asset.remote_tool, asset.remote_id, asset.remote_pw]);
+                }
+            }
        }
    }

@@ -262,19 +403,19 @@ app.post('/api/pc/flow', async (req, res) => {
        [userName, empNo, dept, position, assetId]
      );
      await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
        [assetId]
      );
    } else if (action === 'return') {
      await connection.query(
        `UPDATE asset_core 
         SET previous_user = user_current, previous_dept = current_dept, 
-             user_current = '', emp_no = '', current_dept = '재고창고', user_position = '' 
+             user_current = '', emp_no = '', user_position = '' 
         WHERE id = ?`,
        [assetId]
      );
      await connection.query(
-        `UPDATE asset_spec SET hw_status = '대기' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '재고' WHERE asset_id = ?`,
        [assetId]
      );
    } else if (action === 'move') {
@@ -286,7 +427,7 @@ app.post('/api/pc/flow', async (req, res) => {
        [userName, empNo, dept, position, assetId]
      );
      await connection.query(
-        `UPDATE asset_spec SET hw_status = '사용중' WHERE asset_id = ?`,
+        `UPDATE asset_spec SET hw_status = '운영' WHERE asset_id = ?`,
        [assetId]
      );
    } else {
@@ -338,7 +479,7 @@ app.delete('/api/asset/:category/:id', async (req, res) => {
  
  try {
    const connection = await pool.getConnection();
-    // For asset_core, ON DELETE CASCADE will handle spec, location, network, volume
+    // For asset_core, ON DELETE CASCADE will handle spec, location, remote, volume
    await connection.query(`DELETE FROM ${table} WHERE id = ?`, [id]);
    connection.release();
    console.log(`🗑️ [ASSET DELETE] Category: ${category}, ID: ${id}`);
@@ -383,16 +524,192 @@ app.get('/api/maps', (req, res) => {
  } catch (err) { handleError(res, err, 'GET MAPS'); }
 });

-app.post('/api/maps/save', (req, res) => {
+// 6.5. Get Hardware Components Master List
+app.get('/api/hardware-components', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM hardware_components_master ORDER BY category, component_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET HARDWARE COMPONENTS');
+  }
+});
+
+// 6.6. Save Hardware Component (Add or Update)
+app.post('/api/hardware-components/save', async (req, res) => {
+  const { id, category, component_name, score_tier, deduction } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE hardware_components_master SET category = ?, component_name = ?, score_tier = ?, deduction = ? WHERE id = ?',
+        [category, component_name, score_tier, deduction, id]
+      );
+    } else {
+      await connection.query(
+        'INSERT INTO hardware_components_master (category, component_name, score_tier, deduction) VALUES (?, ?, ?, ?)',
+        [category, component_name, score_tier, deduction]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE HARDWARE COMPONENT');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7. Delete Hardware Component
+app.delete('/api/hardware-components/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM hardware_components_master WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE HARDWARE COMPONENT');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7.1. Get Job Spec Standards
+app.get('/api/job-specs', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM job_spec_standards ORDER BY job_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET JOB SPECS');
+  }
+});
+
+// 6.7.2. Save Job Spec Standard (Add or Update)
+app.post('/api/job-specs/save', async (req, res) => {
+  const { id, job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE job_spec_standards SET job_name = ?, cpu_standard = ?, ram_standard = ?, gpu_standard = ?, min_score = ?, remarks = ? WHERE id = ?',
+        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks, id]
+      );
+    } else {
+      await connection.query(
+        'INSERT INTO job_spec_standards (job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks) VALUES (?, ?, ?, ?, ?, ?)',
+        [job_name, cpu_standard, ram_standard, gpu_standard, min_score, remarks]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE JOB SPEC');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.7.3. Delete Job Spec Standard
+app.delete('/api/job-specs/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM job_spec_standards WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE JOB SPEC');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.8. Get System Users List
+app.get('/api/system-users', async (req, res) => {
+  try {
+    const [rows] = await pool.query('SELECT * FROM system_users ORDER BY user_name');
+    res.json(rows);
+  } catch (err) {
+    handleError(res, err, 'GET SYSTEM USERS');
+  }
+});
+
+// 6.9. Save System User (Add or Update)
+app.post('/api/system-users/save', async (req, res) => {
+  const { id, emp_no, user_name, dept_name, position, status } = req.body;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    if (id) {
+      await connection.query(
+        'UPDATE system_users SET emp_no = ?, user_name = ?, dept_name = ?, position = ?, status = ? WHERE id = ?',
+        [emp_no, user_name, dept_name, position, status, id]
+      );
+    } else {
+      const newId = 'USER-' + Math.random().toString(36).substring(2, 9).toUpperCase();
+      await connection.query(
+        'INSERT INTO system_users (id, emp_no, user_name, dept_name, position, status) VALUES (?, ?, ?, ?, ?, ?)',
+        [newId, emp_no, user_name, dept_name, position, status]
+      );
+    }
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'SAVE SYSTEM USER');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+// 6.10. Delete System User
+app.delete('/api/system-users/:id', async (req, res) => {
+  const { id } = req.params;
+  let connection;
+  try {
+    connection = await pool.getConnection();
+    await connection.query('DELETE FROM system_users WHERE id = ?', [id]);
+    res.json({ success: true });
+  } catch (err) {
+    handleError(res, err, 'DELETE SYSTEM USER');
+  } finally {
+    if (connection) connection.release();
+  }
+});
+
+app.post('/api/maps/save', async (req, res) => {
+  let connection;
  try {
    const { path, boxes } = req.body;
    if (!path) return res.status(400).json({ error: 'Path is required' });
-    let config = {};
-    if (fs.existsSync('map_config.json')) config = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
-    config[path] = boxes;
-    fs.writeFileSync('map_config.json', JSON.stringify(config, null, 2));
-    res.json({ success: true });
-  } catch (err) { handleError(res, err, 'SAVE MAPS'); }
+
+    // 1. Get old config to track movements
+    let oldConfig = {};
+    if (fs.existsSync('map_config.json')) {
+      oldConfig = JSON.parse(fs.readFileSync('map_config.json', 'utf8') || '{}');
+    }
+    const oldBoxes = oldConfig[path] || [];
+
+    // 2. Save new config to file
+    oldConfig[path] = boxes;
+    fs.writeFileSync('map_config.json', JSON.stringify(oldConfig, null, 2));
+
+    // 3. Sync Database Assets (asset_location table)
+    connection = await pool.getConnection();
+    for (const box of boxes) {
+      if (box.asset_id) {
+        console.log(`Syncing asset ${box.asset_id} to new position: [${box.x}, ${box.y}]`);
+        await connection.query(
+          'UPDATE asset_location SET loc_x = ?, loc_y = ? WHERE asset_id = ? AND is_active = 1',
+          [box.x, box.y, box.asset_id]
+        );
+      }
+    }
+
+    res.json({ success: true, message: 'Map and Database synced successfully' });
+  } catch (err) { 
+    handleError(res, err, 'SAVE MAPS SYNC'); 
+  } finally {
+    if (connection) connection.release();
+  }
 });

 // 7. File Upload API (Base64)
--- a/src/components/Guide.ts
+++ b/src/components/Guide.ts
@@ -1,5 +1,6 @@
 import { createIcons, BookOpen, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide';
 import { state } from '../core/state';
+import './guide.css';

 // ─── 자산별 가이드 콘텐츠 정의 (SW_Table 브랜치 전체 복구) ───
 interface GuideTabConfig {
--- a/src/components/Modal/BaseModal.ts
+++ b/src/components/Modal/BaseModal.ts
@@ -1,5 +1,6 @@
 import { createIcons, X } from 'lucide';
 import { setEditLock } from './ModalUtils';
+import './modal.css';

 /**
 * 모든 모달의 공통 기능을 관리하는 베이스 추상 클래스입니다.
@@ -9,6 +10,7 @@ export abstract class BaseModal {
  protected title: string;
  protected currentAsset: any | null = null;
  protected isEditMode: boolean = false;
+  protected currentMode: 'view' | 'edit' | 'add' = 'view';
  protected modalEl: HTMLElement | null = null;
  protected formEl: HTMLFormElement | null = null;

@@ -53,13 +55,23 @@ export abstract class BaseModal {
   */
  public open(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
    this.currentAsset = asset;
+    this.currentMode = mode;
    this.isEditMode = (mode === 'add' || mode === 'edit');
    
-    this.setEditLockMode(mode);
+    // 폼 초기화 추가
+    if (this.formEl) this.formEl.reset();
+
+    // fillFormData를 먼저 호출하여 동적 요소들을 생성한 후 잠금 처리
    this.fillFormData(asset);
+    this.setEditLockMode(mode);
    
    if (this.modalEl) {
      this.modalEl.classList.remove('hidden');
+      const content = this.modalEl.querySelector('.modal-content');
+      if (content) {
+        if (mode === 'view') content.classList.add('is-view-mode');
+        else content.classList.remove('is-view-mode');
+      }
    }
    
    this.onAfterOpen(asset, mode);
@@ -108,9 +120,16 @@ export function closeModals() {
 }

 export function initBaseModal() {
-  // ESC 키로 모든 모달 닫기
+  // ESC 키로 모든 모달 닫기 (위치보기 팝업이 있으면 그것부터 닫음)
  window.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape') closeModals();
+    if (e.key === 'Escape') {
+      const picker = document.querySelector('.image-picker-overlay');
+      if (picker) {
+        picker.remove();
+      } else {
+        closeModals();
+      }
+    }
  });

  return { closeAllModals: closeModals };
--- a/src/components/Modal/DashboardDetailModal.ts
+++ b/src/components/Modal/DashboardDetailModal.ts
@@ -4,14 +4,14 @@ import { createIcons, X } from 'lucide';

 const DASHBOARD_DETAIL_MODAL_HTML = `
  <div id="dashboard-detail-modal" class="modal-overlay hidden">
-    <div class="modal-content wide" style="max-width: 1000px;">
+    <div class="modal-content wide">
      <div class="modal-header">
-        <h2 id="dashboard-detail-modal-title">상세 목록</h2>
+        <h2 id="dashboard-detail-modal-title" class="modal-title">상세 목록</h2>
        <button id="btn-close-dashboard-detail-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div class="table-container">
-          <table style="width:100%;">
+          <table>
            <thead></thead>
            <tbody id="dashboard-detail-tbody"></tbody>
          </table>
--- a/src/components/Modal/DomainModal.ts
+++ b/src/components/Modal/DomainModal.ts
@@ -2,7 +2,7 @@ import { state, saveAsset, deleteAsset } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { CORP_LIST } from './SharedData';
 import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
-import { createIcons, X, Save, Database, CalendarClock, Edit2, History, Plus } from 'lucide';
+import { createIcons, X, Save, History, Plus } from 'lucide';
 import { formatExcelDate } from '../../core/excelHandler';
 import { UI_TEXT } from '../../core/schema';

@@ -16,15 +16,18 @@ class DomainAssetModal extends BaseModal {
      <div id="domain-asset-modal" class="modal-overlay hidden">
        <div class="modal-content wide">
          <div class="modal-header">
-            <h2 id="domain-modal-title">${this.title}</h2>
-            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+            <div class="header-left">
+              <h2 id="domain-modal-title" class="modal-title">${this.title}</h2>
+              <div id="domain-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-domain-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </div>
          <div class="modal-body">
            <div class="modal-body-split">
              <div class="modal-form-area">
                <form id="domain-asset-form" class="grid-form">
                  <input type="hidden" id="domain-id" name="id" />
-                  
+
                  <div class="form-section-title">기본 정보</div>
                  <div class="form-group">
                    <label>구분</label>
@@ -58,7 +61,7 @@ class DomainAssetModal extends BaseModal {
                  </div>
                  <div class="form-group">
                    <label>비용 (연간/월간)</label>
-                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
+                    <input type="text" id="domain-price" name="price" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
                  </div>

                  <div class="form-section-title">담당자 및 비고</div>
@@ -78,9 +81,9 @@ class DomainAssetModal extends BaseModal {
              </div>
              <div class="modal-history-area">
                <div class="history-header">
-                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 변경 이력</h3>
+                  <h3><i data-lucide="history"></i> 변경 이력</h3>
                  <button type="button" id="btn-add-domain-log" class="btn btn-outline btn-sm">
-                    이력 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
+                    이력 추가 <i data-lucide="plus"></i>
                  </button>
                </div>
                <div id="domain-history-list" class="history-timeline"></div>
@@ -141,7 +144,7 @@ class DomainAssetModal extends BaseModal {
      }
    });

-    createIcons({ icons: { History, Plus, Save, CalendarClock, Database } });
+    createIcons({ icons: { History, Plus, Save, X } });
  }

  protected fillFormData(asset: any): void {
@@ -158,31 +161,52 @@ class DomainAssetModal extends BaseModal {
    setFieldValue('domain-remarks', asset.remarks || '');

    this.renderHistory(asset.id);
+    this.updateHeaderIdentity(asset);
  }

  protected onAfterOpen(asset: any, mode: string): void {
    const titleEl = document.getElementById('domain-modal-title');
    if (titleEl) titleEl.textContent = (mode === 'add') ? '신규 도메인 등록' : '도메인 정보 상세';
-    
+
    const deleteBtn = document.getElementById('btn-delete-domain-asset');
    if (deleteBtn) deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+    
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('domain-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const type = getFieldValue('domain-type') || asset.type || '';
+    const serviceName = getFieldValue('domain-service-name') || asset.service_name || '';
+    const domainName = getFieldValue('domain-name') || asset.domain_name || '';
+
+    container.innerHTML = `
+      <span class="asset-code-title">${serviceName}</span>
+      <span class="service-type-badge">${type}</span>
+      <span class="asset-type-label">${domainName}</span>
+    `;
  }

  private renderHistory(assetId: string) {
    const container = document.getElementById('domain-history-list');
    if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === assetId);
-    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
+
+    const logs = (state.masterData.logs || []).filter(l => l.asset_id === assetId);
+    if (logs.length === 0) {
+      container.innerHTML = '<div style="color:var(--mute); padding:1rem; text-align:center;">이력이 없습니다.</div>';
+    } else {
+      container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
+    }
  }
 }

 export const domainModal = new DomainAssetModal();
-
-export function initDomainModal(onSave: () => void, closeModals: () => void) {
-  domainModal.init(onSave, closeModals);
-}
-
-export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
-  domainModal.open(asset, mode);
-}
+export function initDomainModal(onSave: () => void, closeModals: () => void) { domainModal.init(onSave, closeModals); }
+export function openDomainModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { domainModal.open(asset, mode); }
--- a/src/components/Modal/HWModal.ts
+++ b/src/components/Modal/HWModal.ts
--- a/src/components/Modal/JobSpecModal.ts
+++ b/src/components/Modal/JobSpecModal.ts
@@ -0,0 +1,295 @@
+import { state, saveJobSpec, deleteJobSpec } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { UI_TEXT } from '../../core/schema';
+import { calculatePcScoreDeductive } from '../../core/utils';
+
+class JobSpecModal extends BaseModal {
+  constructor() {
+    super('job-spec', '직무별 기준 사양');
+  }
+
+  protected renderFrameHTML(): string {
+    return `
+      <div id="job-spec-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content narrow">
+          <div class="modal-header">
+            <div class="header-left">
+              <h2 id="job-spec-modal-title" class="modal-title">\${this.title}</h2>
+              <div id="job-spec-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-job-spec-modal" class="btn-icon" aria-label="닫기">&times;</button>
+          </div>
+          <div class="modal-body">
+            <form id="job-spec-asset-form" class="grid-form vertical-form">
+              <input type="hidden" id="job-spec-id" name="id" />
+              
+              <div class="form-group">
+                <label>직무명</label>
+                <input type="text" id="job-spec-job-name" name="job_name" placeholder="예: BIM 모델러, 개발자, 엔지니어" required />
+              </div>
+
+              <div class="form-group relative">
+                <label>권장 CPU 사양</label>
+                <input type="text" id="job-spec-cpu-standard" name="cpu_standard" placeholder="CPU 검색..." required autocomplete="off" />
+                <div id="job-spec-cpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group relative">
+                <label>권장 RAM 사양</label>
+                <input type="text" id="job-spec-ram-standard" name="ram_standard" placeholder="RAM 검색..." required autocomplete="off" />
+                <div id="job-spec-ram-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group relative">
+                <label>권장 GPU 사양</label>
+                <input type="text" id="job-spec-gpu-standard" name="gpu_standard" placeholder="GPU 검색..." required autocomplete="off" />
+                <div id="job-spec-gpu-autocomplete" class="autocomplete-list hidden"></div>
+              </div>
+
+              <div class="form-group">
+                <label>성능 기준 점수 (이상, 자동 계산됨)</label>
+                <input type="number" id="job-spec-min-score" name="min_score" placeholder="자동 계산 대기..." required readonly />
+              </div>
+
+              <div class="form-group">
+                <label>비고 (메모)</label>
+                <textarea id="job-spec-remarks" name="remarks" placeholder="기타 필요 사양 및 안내 사항" rows="3"></textarea>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-delete-job-spec-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-job-spec-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-job-spec-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-job-spec-asset" class="btn btn-primary">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <style>
+        .autocomplete-list {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          max-height: 150px;
+          overflow-y: auto;
+          background-color: white;
+          border: 1px solid var(--border-color, #E2E8F0);
+          border-top: none;
+          border-radius: 0 0 4px 4px;
+          z-index: 1000;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        .autocomplete-item {
+          padding: 8px 12px;
+          font-size: 13px;
+          color: #334155;
+          cursor: pointer;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .autocomplete-item:hover {
+          background-color: #F1F5F9;
+          color: #1E5149;
+          font-weight: 600;
+        }
+      </style>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
+    const revertBtn = document.getElementById('btn-revert-job-spec-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const jobName = (document.getElementById('job-spec-job-name') as HTMLInputElement).value.trim();
+      const cpuStd = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement).value.trim();
+      const ramStd = (document.getElementById('job-spec-ram-standard') as HTMLInputElement).value.trim();
+      const gpuStd = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement).value.trim();
+      const minScoreStr = (document.getElementById('job-spec-min-score') as HTMLInputElement).value;
+      const remarks = (document.getElementById('job-spec-remarks') as HTMLTextAreaElement).value.trim();
+
+      if (!jobName) {
+        alert('직무명을 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        job_name: jobName,
+        cpu_standard: cpuStd,
+        ram_standard: ramStd,
+        gpu_standard: gpuStd,
+        min_score: minScoreStr !== '' ? parseInt(minScoreStr, 10) : 0,
+        remarks: remarks
+      };
+
+      if (await saveJobSpec(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 직무별 기준 사양을 삭제하시겠습니까?')) return;
+
+      if (await deleteJobSpec(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    // 자동완성 바인딩
+    this.bindAutocomplete('job-spec-cpu-standard', 'job-spec-cpu-autocomplete', 'CPU');
+    this.bindAutocomplete('job-spec-ram-standard', 'job-spec-ram-autocomplete', 'RAM');
+    this.bindAutocomplete('job-spec-gpu-standard', 'job-spec-gpu-autocomplete', 'GPU');
+
+    // 실시간 점수 계산 이벤트 바인딩
+    const inputs = ['job-spec-cpu-standard', 'job-spec-ram-standard', 'job-spec-gpu-standard'];
+    inputs.forEach(id => {
+      const el = document.getElementById(id);
+      el?.addEventListener('input', () => this.updateMinScore());
+      el?.addEventListener('change', () => this.updateMinScore());
+    });
+  }
+
+  private bindAutocomplete(inputId: string, autocompleteId: string, category: string) {
+    const input = document.getElementById(inputId) as HTMLInputElement;
+    const list = document.getElementById(autocompleteId) as HTMLDivElement;
+    if (!input || !list) return;
+
+    const showList = (filterText: string = '') => {
+      if (!this.isEditMode) return;
+      const items = (state.masterData.partsMaster || []).filter((c: any) => c.category === category);
+      const filtered = filterText 
+        ? items.filter((c: any) => c.component_name.toLowerCase().includes(filterText.toLowerCase()))
+        : items;
+
+      if (filtered.length === 0) {
+        list.innerHTML = '<div class="autocomplete-item" style="color: #94a3b8; cursor: default;">검색 결과 없음</div>';
+      } else {
+        list.innerHTML = filtered.map((c: any) => `<div class="autocomplete-item" data-val="${c.component_name}">${c.component_name}</div>`).join('');
+      }
+      list.classList.remove('hidden');
+    };
+
+    input.addEventListener('focus', () => {
+      showList(input.value);
+    });
+
+    input.addEventListener('input', () => {
+      showList(input.value);
+    });
+
+    list.addEventListener('mousedown', (e) => {
+      const item = (e.target as HTMLElement).closest('.autocomplete-item');
+      if (item && item.getAttribute('data-val')) {
+        input.value = item.getAttribute('data-val') || '';
+        list.classList.add('hidden');
+        this.updateMinScore();
+      }
+    });
+
+    document.addEventListener('mousedown', (e) => {
+      if (e.target !== input && !list.contains(e.target as Node)) {
+        list.classList.add('hidden');
+      }
+    });
+  }
+
+  private updateMinScore(): void {
+    const cpu = (document.getElementById('job-spec-cpu-standard') as HTMLInputElement)?.value || '';
+    const ram = (document.getElementById('job-spec-ram-standard') as HTMLInputElement)?.value || '';
+    const gpu = (document.getElementById('job-spec-gpu-standard') as HTMLInputElement)?.value || '';
+    
+    const score = calculatePcScoreDeductive(cpu, ram, gpu, '');
+    
+    const minScoreEl = document.getElementById('job-spec-min-score') as HTMLInputElement;
+    if (minScoreEl) {
+      minScoreEl.value = score.toString();
+    }
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('job-spec-id', asset.id || '');
+    setFieldValue('job-spec-job-name', asset.job_name || '');
+    setFieldValue('job-spec-cpu-standard', asset.cpu_standard || '');
+    setFieldValue('job-spec-ram-standard', asset.ram_standard || '');
+    setFieldValue('job-spec-gpu-standard', asset.gpu_standard || '');
+    setFieldValue('job-spec-min-score', asset.min_score !== undefined ? asset.min_score.toString() : '100');
+    setFieldValue('job-spec-remarks', asset.remarks || '');
+    this.updateHeaderIdentity(asset);
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('job-spec-modal-title');
+
+    if (titleEl) {
+      if (mode === 'add') {
+        titleEl.textContent = '신규 직무별 기준 사양 등록';
+      } else {
+        titleEl.textContent = '직무별 기준 사양 상세 편집';
+      }
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-job-spec-asset')!;
+    const saveBtn = document.getElementById('btn-save-job-spec-asset')!;
+    
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add' || mode === 'edit') {
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
+      saveBtn.style.display = 'block';
+    } else {
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('job-spec-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const jobName = asset.job_name || '';
+    const minScore = asset.min_score || 0;
+
+    container.innerHTML = `
+      <span class="asset-code-title">${jobName}</span>
+      <span class="service-type-badge">${minScore}점 기준</span>
+    `;
+  }
+}
+
+export const jobSpecModal = new JobSpecModal();
+
+export function initJobSpecModal(onSave: () => void, closeModals: () => void) {
+  jobSpecModal.init(onSave, closeModals);
+}
+
+export function openJobSpecModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') {
+  jobSpecModal.open(asset, mode);
+}
--- a/src/components/Modal/ModalUtils.ts
+++ b/src/components/Modal/ModalUtils.ts
@@ -110,29 +110,45 @@ export function setEditLock(
  const generateBtn = options.generateBtnId ? document.getElementById(options.generateBtnId) : null;
  const addLogBtn = options.addLogBtnId ? document.getElementById(options.addLogBtnId) : null;

-  if (!form || !saveBtn || !revertBtn) return;
+  if (!form) return;

-  if (mode === 'add' || mode === 'edit') {
+  const isEdit = (mode === 'add' || mode === 'edit');
+
+  if (isEdit) {
    // 편집 모드 활성화
    form.classList.remove('is-view-mode');
    form.classList.add('is-edit-mode');
-    saveBtn.textContent = '저장';
-    revertBtn.classList.toggle('hidden', mode === 'add'); // 신규 추가 시에는 취소 버튼 숨김
+    if (saveBtn) saveBtn.textContent = (mode === 'add' ? '등록' : '저장');
+    if (revertBtn) revertBtn.classList.toggle('hidden', mode === 'add'); 
    
-    // 번호 생성 버튼은 '추가(add)' 시에만 노출
-    if (generateBtn) {
-      generateBtn.style.display = mode === 'add' ? 'flex' : 'none';
-    }
-    // 내역 추가 버튼 노출
+    // 모든 필드 활성화
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      // 자산번호 및 ID 필드는 편집 모드에서도 잠금 유지
+      if (el.name !== 'asset_code' && !el.id.includes('asset-id') && !el.id.includes('id-hidden')) {
+        el.disabled = false;
+        if ('readOnly' in el) (el as HTMLInputElement).readOnly = false;
+      }
+    });
+
+    if (generateBtn) generateBtn.style.display = (mode === 'add' ? 'flex' : 'none');
    if (addLogBtn) addLogBtn.style.display = 'flex';
  } else {
    // 조회 모드 (잠금)
    form.classList.remove('is-edit-mode');
    form.classList.add('is-view-mode');
-    saveBtn.textContent = '수정';
-    revertBtn.classList.add('hidden');
+    if (saveBtn) saveBtn.textContent = '수정';
+    if (revertBtn) revertBtn.classList.add('hidden');
    
-    // 조회 모드에서는 버튼들 숨김
+    // 모든 필드 잠금
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const el = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+      el.disabled = true;
+      if ('readOnly' in el) (el as HTMLInputElement).readOnly = true;
+    });
+
    if (generateBtn) generateBtn.style.display = 'none';
    if (addLogBtn) addLogBtn.style.display = 'none';
  }
@@ -169,9 +185,9 @@ export function createModalFrameHTML(
            </div>
            <div class="modal-history-area">
              <div class="history-header">
-                <h3><i data-lucide="history" style="width:16px; height:16px;"></i> ${options.historyTitle}</h3>
-                <button type="button" id="${options.addLogBtnId}" class="btn btn-outline btn-sm">
-                  내역 추가 <i data-lucide="plus" style="width:14px; height:14px;"></i>
+                <h3><i data-lucide="history" class="icon-sm"></i> ${options.historyTitle}</h3>
+                <button type="button" id="btn-add-${idPrefix}-log" class="btn btn-outline btn-sm">
+                  내역 추가 <i data-lucide="plus" class="icon-sm"></i>
                </button>
              </div>
              <div id="${idPrefix}-history-list" class="history-timeline"></div>
--- a/src/components/Modal/PCFlowModal.ts
+++ b/src/components/Modal/PCFlowModal.ts
@@ -4,10 +4,10 @@ import { API_BASE_URL } from '../../core/utils';

 export class PCFlowModal {
  private static instance: PCFlowModal | null = null;
-  
+
  private modalEl: HTMLElement | null = null;
  private currentFlowType: 'checkout' | 'return' | 'move' = 'checkout';
-  
+
  // Selected state
  private selectedUser: any = null;
  private selectedTargetUser: any = null;
@@ -30,7 +30,7 @@ export class PCFlowModal {

    this.modalEl = document.getElementById('pc-flow-modal');
    this.setupEventListeners(onSave);
-    
+
    // Set default date to today
    const dateInput = document.getElementById('pc-flow-date') as HTMLInputElement;
    if (dateInput) {
@@ -59,14 +59,19 @@ export class PCFlowModal {
    this.selectedTargetUser = null;
    this.selectedPC = null;
    this.currentFlowType = 'checkout';
-    
+
    const radioCheckout = document.querySelector('input[name="flow-type"][value="checkout"]') as HTMLInputElement;
-    if (radioCheckout) radioCheckout.checked = true;
+    if (radioCheckout) {
+        radioCheckout.checked = true;
+        document.querySelectorAll('.flow-type-label').forEach(l => {
+            l.classList.toggle('active', l.contains(radioCheckout));
+        });
+    }

    // Reset text fields
    const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
    if (userSearch) userSearch.value = '';
-    
+
    const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
    if (targetUserSearch) targetUserSearch.value = '';

@@ -94,7 +99,7 @@ export class PCFlowModal {
        label.classList.add('active');
        radio.checked = true;
        this.currentFlowType = radio.value as any;
-        
+
        // Reset selected PC when switching flow types
        this.selectedPC = null;
        this.updateUI();
@@ -104,16 +109,16 @@ export class PCFlowModal {
    // 1. Source User Autocomplete Search
    const userSearch = document.getElementById('pc-flow-user-search') as HTMLInputElement;
    const userSuggestions = document.getElementById('pc-flow-user-suggestions')!;
-    
+
    userSearch?.addEventListener('input', () => {
      const query = userSearch.value.trim().toLowerCase();
      if (!query) {
        userSuggestions.classList.add('hidden');
        return;
      }
-      
+
      const users = state.masterData.users || [];
-      const filtered = users.filter((u: any) => 
+      const filtered = users.filter((u: any) =>
        (u.user_name && u.user_name.toLowerCase().includes(query)) ||
        (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
        (u.emp_no && u.emp_no.toString().includes(query))
@@ -133,7 +138,7 @@ export class PCFlowModal {
        this.selectedUser = user;
        userSearch.value = `${user.user_name} (${user.dept_name} / 사번:${user.emp_no || '-'})`;
        userSuggestions.classList.add('hidden');
-        
+
        // Automatically populate details if return or move
        if (this.currentFlowType === 'return' || this.currentFlowType === 'move') {
          this.selectedPC = null; // Reset selection
@@ -161,16 +166,16 @@ export class PCFlowModal {
    // 2. Target User Autocomplete Search (For Moves)
    const targetUserSearch = document.getElementById('pc-flow-target-user-search') as HTMLInputElement;
    const targetSuggestions = document.getElementById('pc-flow-target-user-suggestions')!;
-    
+
    targetUserSearch?.addEventListener('input', () => {
      const query = targetUserSearch.value.trim().toLowerCase();
      if (!query) {
        targetSuggestions.classList.add('hidden');
        return;
      }
-      
+
      const users = state.masterData.users || [];
-      const filtered = users.filter((u: any) => 
+      const filtered = users.filter((u: any) =>
        (u.user_name && u.user_name.toLowerCase().includes(query)) ||
        (u.dept_name && u.dept_name.toLowerCase().includes(query)) ||
        (u.emp_no && u.emp_no.toString().includes(query))
@@ -197,20 +202,20 @@ export class PCFlowModal {
    // 3. Stock PC Autocomplete Search (For Checkout)
    const stockSearch = document.getElementById('pc-flow-stock-search') as HTMLInputElement;
    const stockSuggestions = document.getElementById('pc-flow-stock-suggestions')!;
-    
+
    const showStockSuggestions = () => {
      const query = stockSearch.value.trim().toLowerCase();

-      // Filter available PCs (category PC, status '대기' or '재고창고')
+      // Filter available PCs (category PC, status '대기', '미할당', or '재고')
      const pcs = state.masterData.pc || [];
      const filtered = pcs.filter((p: any) => {
        const status = (p.hw_status || '').trim();
-        const matchesQuery = !query || 
+        const matchesQuery = !query ||
          (p.asset_code && p.asset_code.toLowerCase().includes(query)) ||
          (p.model_name && p.model_name.toLowerCase().includes(query)) ||
          (p.cpu && p.cpu.toLowerCase().includes(query));
-        
-        return (status === '대기' || status === '재고창고' || status === '미할당') && matchesQuery;
+
+        return (status === '대기' || status === '미할당' || status === '재고') && matchesQuery;
      });

      this.renderPCSuggestions(filtered, stockSuggestions, (pc) => {
@@ -309,21 +314,17 @@ export class PCFlowModal {
  private renderUserSuggestions(users: any[], container: HTMLElement, onSelect: (user: any) => void) {
    container.innerHTML = '';
    if (users.length === 0) {
-      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">일치하는 사원이 없습니다.</div>';
+      container.innerHTML = '<div class="autocomplete-item-empty">일치하는 사원이 없습니다.</div>';
      container.classList.remove('hidden');
      return;
    }

    users.forEach(u => {
      const item = document.createElement('div');
-      item.style.padding = '8px 12px';
-      item.style.cursor = 'pointer';
-      item.style.fontSize = '13px';
-      item.style.borderBottom = '1px solid #F3F4F6';
-      item.className = 'suggestion-item';
+      item.className = 'autocomplete-item';
      item.innerHTML = `
-        <div style="font-weight: 700; color: var(--text-main);">${u.user_name}</div>
-        <div style="font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;">
+        <div class="suggestion-name">${u.user_name}</div>
+        <div class="suggestion-meta">
          <span>부서: ${u.dept_name}</span>
          <span>|</span>
          <span>사번: ${u.emp_no || '-'}</span>
@@ -338,21 +339,17 @@ export class PCFlowModal {
  private renderPCSuggestions(pcs: any[], container: HTMLElement, onSelect: (pc: any) => void) {
    container.innerHTML = '';
    if (pcs.length === 0) {
-      container.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 13px;">불출 가능한 대기 PC 재고가 없습니다.</div>';
+      container.innerHTML = '<div class="autocomplete-item-empty">불출 가능한 대기 PC 재고가 없습니다.</div>';
      container.classList.remove('hidden');
      return;
    }

    pcs.forEach(p => {
      const item = document.createElement('div');
-      item.style.padding = '8px 12px';
-      item.style.cursor = 'pointer';
-      item.style.fontSize = '13px';
-      item.style.borderBottom = '1px solid #F3F4F6';
-      item.className = 'suggestion-item';
+      item.className = 'autocomplete-item';
      item.innerHTML = `
-        <div style="font-weight: 700; color: var(--primary-color);">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
-        <div style="font-size: 11px; color: var(--text-muted);">
+        <div class="suggestion-name">${p.asset_code} (${p.model_name || '모델명 없음'})</div>
+        <div class="suggestion-meta">
          사양: CPU ${p.cpu || '-'} / RAM ${p.ram || '-'} / 위치: ${p.location || '-'}
        </div>
      `;
@@ -427,20 +424,20 @@ export class PCFlowModal {
    const userPcsList = document.getElementById('user-pcs-list')!;
    if (this.selectedUser && (this.currentFlowType === 'return' || this.currentFlowType === 'move')) {
      const allPcs = state.masterData.pc || [];
-      const userPcs = allPcs.filter((p: any) => 
+      const userPcs = allPcs.filter((p: any) =>
        (p.emp_no && p.emp_no.toString() === this.selectedUser.emp_no?.toString()) ||
        (p.user_current && p.user_current === this.selectedUser.user_name)
      );

      if (userPcs.length === 0) {
-        userPcsList.innerHTML = '<div style="font-size: 12px; color: var(--text-muted); padding: 8px 0;">이 사용자가 소유한 PC 자산이 없습니다.</div>';
+        userPcsList.innerHTML = '<div class="empty-list-message">이 사용자가 소유한 PC 자산이 없습니다.</div>';
      } else {
        userPcsList.innerHTML = userPcs.map(p => {
          const isSelected = this.selectedPC && this.selectedPC.id === p.id;
          return `
-            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}" style="padding: 10px; border: 1px solid ${isSelected ? 'var(--primary-color)' : 'var(--border-color)'}; border-radius: 4px; cursor: pointer; background: ${isSelected ? 'var(--primary-light)' : 'white'}; transition: all 0.2s;">
-              <div style="font-weight: 700; font-size: 13px; color: ${isSelected ? 'var(--primary-color)' : 'var(--text-main)'};">${p.asset_code}</div>
-              <div style="font-size: 11px; color: var(--text-muted); margin-top: 2px;">
+            <div class="user-pc-item ${isSelected ? 'selected' : ''}" data-id="${p.id}">
+              <div class="pc-item-code">${p.asset_code}</div>
+              <div class="pc-item-meta">
                ${p.model_name || '모델명 없음'} | CPU: ${p.cpu || '-'} | RAM: ${p.ram || '-'}
              </div>
            </div>
@@ -465,159 +462,132 @@ export class PCFlowModal {
  }

  private renderHTML(): string {
-    const overlayStyle = `
-      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-      background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center;
-      z-index: 1000; transition: opacity 0.3s;
-    `;
-    const contentStyle = `
-      background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-      overflow: hidden; max-height: 90vh; width: 950px; display: flex; flex-direction: column;
-    `;
-    const labelStyle = 'display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 8px;';
-    const inputStyle = 'width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
-    const inputWithIconStyle = 'width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 13px; outline: none; box-sizing: border-box;';
-
    return `
-      <div id="pc-flow-modal" class="modal-overlay hidden" style="${overlayStyle}">
-        <div class="modal-content" style="${contentStyle}">
-          
-          <div class="modal-header" style="background: var(--primary-color); padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color);">
-            <h2 style="margin: 0; font-size: 18px; font-weight: 800; color: white; display: flex; align-items: center; gap: 8px;">
+      <div id="pc-flow-modal" class="modal-overlay hidden">
+        <div class="modal-content wide">
+          <div class="modal-header">
+            <h2 class="modal-title">
              <i data-lucide="refresh-cw"></i> PC 이동/반납 (불출/반납/이동)
            </h2>
-            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기" style="font-size: 28px; color: white; background: none; border: none; cursor: pointer; line-height: 1;">&times;</button>
+            <button id="btn-close-pc-flow-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </div>

-          <div class="modal-body" style="padding: 24px; overflow-y: auto; display: flex; gap: 24px;">
-            <!-- 왼쪽 영역: 입력 폼 -->
-            <div style="flex: 1.2; display: flex; flex-direction: column; gap: 20px;">
-              
-              <!-- 1. 처리 유형 -->
-              <div>
-                <label style="${labelStyle}">1. 처리 유형 선택</label>
-                <div style="display: flex; gap: 12px;">
-                  <label class="flow-type-label active" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
-                    <input type="radio" name="flow-type" value="checkout" checked style="display:none;" />
-                    불출 (지급)
-                  </label>
-                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
-                    <input type="radio" name="flow-type" value="return" style="display:none;" />
-                    입고 (반납)
-                  </label>
-                  <label class="flow-type-label" style="flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">
-                    <input type="radio" name="flow-type" value="move" style="display:none;" />
-                    이동 (이관)
-                  </label>
+          <div class="modal-body">
+            <div class="modal-body-split">
+              <!-- 왼쪽 영역: 입력 폼 -->
+              <div class="modal-form-area">
+                <div class="grid-form flex-col">
+
+                  <!-- 1. 처리 유형 -->
+                  <div class="form-group">
+                    <label>1. 처리 유형 선택</label>
+                    <div class="view-toggle w-full flex-row">
+                      <label class="flow-type-label toggle-btn active flex-1 text-center">
+                        <input type="radio" name="flow-type" value="checkout" checked class="hidden" />
+                        불출 (지급)
+                      </label>
+                      <label class="flow-type-label toggle-btn flex-1 text-center">
+                        <input type="radio" name="flow-type" value="return" class="hidden" />
+                        입고 (반납)
+                      </label>
+                      <label class="flow-type-label toggle-btn flex-1 text-center">
+                        <input type="radio" name="flow-type" value="move" class="hidden" />
+                        이동 (이관)
+                      </label>
+                    </div>
+                  </div>
+
+                  <!-- 2. 대상 사용자 검색 -->
+                  <div class="form-group relative">
+                    <label id="user-search-label">2. 대상 사원 검색</label>
+                    <div class="input-with-icon">
+                      <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." />
+                      <i data-lucide="search" class="icon-sm"></i>
+                    </div>
+                    <div id="pc-flow-user-suggestions" class="autocomplete-list hidden"></div>
+                  </div>
+
+                  <!-- 3. 새 인수자 검색 (이동 시 노출) -->
+                  <div id="target-user-search-container" class="form-group hidden relative">
+                    <label>새 인수 사원 검색</label>
+                    <div class="input-with-icon">
+                      <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." />
+                      <i data-lucide="search" class="icon-sm"></i>
+                    </div>
+                    <div id="pc-flow-target-user-suggestions" class="autocomplete-list hidden"></div>
+                  </div>
+
+                  <!-- 4. 재고 PC 검색 (불출 시 노출) -->
+                  <div id="stock-pc-search-container" class="form-group relative">
+                    <label>3. 불출할 재고 PC 선택</label>
+                    <div class="input-with-icon">
+                      <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." />
+                      <i data-lucide="monitor" class="icon-sm"></i>
+                    </div>
+                    <div id="pc-flow-stock-suggestions" class="autocomplete-list hidden"></div>
+                  </div>
+
+                  <!-- 5. 상세 공통 입력 -->
+                  <div class="detail-grid-2col">
+                    <div class="form-group">
+                      <label>처리 일자</label>
+                      <input type="date" id="pc-flow-date" />
+                    </div>
+                    <div class="form-group">
+                      <label>상세 사유</label>
+                      <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다."></textarea>
+                    </div>
+                  </div>
                </div>
              </div>

-              <!-- 2. 대상 사용자 검색 -->
-              <div style="position: relative;">
-                <label id="user-search-label" style="${labelStyle}">2. 대상 사원 검색</label>
-                <div style="position: relative; display: flex; align-items: center;">
-                  <input type="text" id="pc-flow-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
-                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+              <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
+              <div class="modal-history-area">
+                <div class="history-header">
+                  <h3>선택 내역 요약</h3>
                </div>
-                <div id="pc-flow-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
-              </div>

-              <!-- 3. 새 인수자 검색 (이동 시 노출) -->
-              <div id="target-user-search-container" class="hidden" style="position: relative;">
-                <label style="${labelStyle}">새 인수 사원 검색</label>
-                <div style="position: relative; display: flex; align-items: center;">
-                  <input type="text" id="pc-flow-target-user-search" placeholder="사원명, 부서, 사번 검색..." style="${inputWithIconStyle}" />
-                  <i data-lucide="search" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
+                <div class="dynamic-row-container">
+                  <!-- 사원 요약 카드 -->
+                  <div id="summary-user-card" class="summary-info-card">
+                    <div class="detail-label-sm">대상 사원</div>
+                    <div id="summary-user-name" class="detail-value-lg">선택된 사원 없음</div>
+                    <div id="summary-user-dept" class="detail-label-sm">-</div>
+                  </div>
+
+                  <!-- 인수 사원 요약 카드 (이동 전용) -->
+                  <div id="summary-target-user-card" class="summary-info-card hidden bg-primary-light">
+                    <div class="detail-label-sm">새 인수 사원</div>
+                    <div id="summary-target-user-name" class="detail-value-lg">선택된 사원 없음</div>
+                    <div id="summary-target-user-dept" class="detail-label-sm">-</div>
+                  </div>
+
+                  <!-- 대상 PC 자산 요약 카드 -->
+                  <div id="summary-pc-card" class="summary-info-card">
+                    <div class="detail-label-sm">대상 PC 자산</div>
+                    <div id="summary-pc-code" class="detail-value-lg text-success">선택된 PC 없음</div>
+                    <div id="summary-pc-model" class="detail-label-sm">-</div>
+                  </div>
+
+                  <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
+                  <div id="user-pcs-container" class="form-group hidden">
+                    <label>사원 보유 PC 선택 (클릭하여 매핑)</label>
+                    <div id="user-pcs-list" class="user-pc-selection-list"></div>
+                  </div>
                </div>
-                <div id="pc-flow-target-user-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
-              </div>
-
-              <!-- 4. 재고 PC 검색 (불출 시 노출) -->
-              <div id="stock-pc-search-container" style="position: relative;">
-                <label style="${labelStyle}">3. 불출할 재고 PC 선택</label>
-                <div style="position: relative; display: flex; align-items: center;">
-                  <input type="text" id="pc-flow-stock-search" placeholder="자산코드 또는 모델명 검색..." style="${inputWithIconStyle}" />
-                  <i data-lucide="monitor" style="position: absolute; left: 10px; width: 16px; height: 16px; color: var(--text-muted);"></i>
-                </div>
-                <div id="pc-flow-stock-suggestions" class="hidden" style="position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: white; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; margin-top: 4px;"></div>
-              </div>
-
-              <!-- 5. 상세 공통 입력 -->
-              <div style="display: flex; gap: 16px;">
-                <div style="flex: 1;">
-                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">처리 일자</label>
-                  <input type="date" id="pc-flow-date" style="${inputStyle}" />
-                </div>
-                <div style="flex: 2;">
-                  <label style="${labelStyle.replace('margin-bottom: 8px;', 'margin-bottom: 6px;')}">상세 사유</label>
-                  <textarea id="pc-flow-details" rows="2" placeholder="미입력 시 기본 문구로 자동 입력됩니다." style="width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: inherit; font-size: 13px; resize: none; box-sizing: border-box; outline: none;"></textarea>
-                </div>
-              </div>
-
-            </div>
-
-            <!-- 오른쪽 영역: 선택 요약 & 사원 소유 자산 목록 -->
-            <div style="flex: 0.8; border-left: 1px solid var(--border-color); padding-left: 24px; display: flex; flex-direction: column; gap: 16px;">
-              <h3 style="margin: 0; font-size: 14px; font-weight: 800; border-bottom: 1px solid var(--border-color); padding-bottom: 8px;">선택 내역 요약</h3>
-              
-              <!-- 사원 요약 카드 -->
-              <div id="summary-user-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-size: 11px; color: var(--text-muted);">대상 사원</div>
-                <div id="summary-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
-                <div id="summary-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
-              </div>
-
-              <!-- 인수 사원 요약 카드 (이동 전용) -->
-              <div id="summary-target-user-card" class="summary-card hidden" style="padding: 12px; background: #EEF2F6; border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-size: 11px; color: var(--text-muted);">새 인수 사원</div>
-                <div id="summary-target-user-name" style="font-weight: 700; font-size: 14px;">선택된 사원 없음</div>
-                <div id="summary-target-user-dept" style="font-size: 12px; color: var(--text-muted);">-</div>
-              </div>
-
-              <!-- 대상 PC 자산 요약 카드 -->
-              <div id="summary-pc-card" style="padding: 12px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: 6px; display: flex; flex-direction: column; gap: 4px;">
-                <div style="font-size: 11px; color: var(--text-muted);">대상 PC 자산</div>
-                <div id="summary-pc-code" style="font-weight: 700; font-size: 14px; color: var(--primary-color);">선택된 PC 없음</div>
-                <div id="summary-pc-model" style="font-size: 12px; color: var(--text-muted);">-</div>
-              </div>
-
-              <!-- 사용자 보유 PC 목록 선택 (반납/이동 시) -->
-              <div id="user-pcs-container" class="hidden" style="display: flex; flex-direction: column; gap: 8px;">
-                <div style="font-size: 12px; font-weight: 700; color: var(--text-muted);">사원 보유 PC 선택 (클릭하여 매핑)</div>
-                <div id="user-pcs-list" style="display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto;"></div>
              </div>
            </div>
-
          </div>

-          <div class="modal-footer" style="padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background: var(--bg-light);">
-            <button id="btn-cancel-pc-flow-modal" class="btn btn-outline" style="height: 42px;">취소</button>
-            <button id="btn-submit-pc-flow" class="btn btn-primary" style="height: 42px;">이동/반납 처리 완료</button>
+          <div class="modal-footer">
+            <div></div>
+            <div class="footer-actions">
+              <button id="btn-cancel-pc-flow-modal" class="btn btn-outline">취소</button>
+              <button id="btn-submit-pc-flow" class="btn btn-primary">이동/반납 처리 완료</button>
+            </div>
          </div>
-
        </div>
      </div>
-      
-      <style>
-        .flow-type-label {
-          transition: all 0.2s;
-          border-color: var(--border-color);
-          background: white;
-          color: var(--text-muted);
-        }
-        .flow-type-label:hover {
-          border-color: var(--primary-color);
-          color: var(--primary-color);
-        }
-        .flow-type-label.active {
-          border-color: var(--primary-color);
-          background: var(--primary-light);
-          color: var(--primary-color);
-        }
-        .suggestion-item:hover {
-          background-color: var(--primary-light) !important;
-        }
-      </style>
    `;
  }
 }
--- a/src/components/Modal/PartsMasterModal.ts
+++ b/src/components/Modal/PartsMasterModal.ts
@@ -0,0 +1,171 @@
+import { state, savePartsMaster, deletePartsMaster } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { generateOptionsHTML, setFieldValue, getFieldValue } from './ModalUtils';
+import { createIcons, X, Save, Plus } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class PartsMasterModal extends BaseModal {
+  constructor() {
+    super('parts-master', '부품 표준 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    return `
+      <div id="parts-master-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content narrow">
+          <div class="modal-header">
+            <div class="header-left">
+              <h2 id="parts-master-modal-title" class="modal-title">${this.title}</h2>
+              <div id="parts-master-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-parts-master-modal" class="btn-icon" aria-label="닫기">&times;</button>
+          </div>
+          <div class="modal-body">
+            <form id="parts-master-asset-form" class="grid-form vertical-form">
+              <input type="hidden" id="parts-master-id" name="id" />
+
+              <div class="form-group">
+                <label>부품 분류</label>
+                <select id="parts-master-category" name="category">
+                  <option value="CPU">CPU</option>
+                  <option value="GPU">GPU</option>
+                  <option value="RAM">RAM</option>
+                </select>
+              </div>
+
+              <div class="form-group">
+                <label>부품 표준 명칭</label>
+                <input type="text" id="parts-master-component-name" name="component_name" placeholder="예: Intel Core i7-14700K" required />
+              </div>
+
+              <div class="form-group">
+                <label>성능 등급</label>
+                <input type="text" id="parts-master-score-tier" name="score_tier" placeholder="예: i7 / S / 최적" required />
+              </div>
+
+              <div class="form-group">
+                <label>감점 점수 (양수로 입력)</label>
+                <input type="number" id="parts-master-deduction" name="deduction" placeholder="예: 5" required />
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-delete-parts-master-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-parts-master-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-parts-master-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-parts-master-asset" class="btn btn-primary">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+    const revertBtn = document.getElementById('btn-revert-parts-master-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const category = (document.getElementById('parts-master-category') as HTMLSelectElement).value;
+      const compName = (document.getElementById('parts-master-component-name') as HTMLInputElement).value.trim();
+      const tier = (document.getElementById('parts-master-score-tier') as HTMLInputElement).value.trim();
+      const deductStr = (document.getElementById('parts-master-deduction') as HTMLInputElement).value;
+
+      if (!compName || !tier || deductStr === '') {
+        alert('모든 필드를 올바르게 입력해 주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        category,
+        component_name: compName,
+        score_tier: tier,
+        deduction: parseInt(deductStr, 10)
+      };
+
+      if (await savePartsMaster(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 부품 마스터 정보를 삭제하시겠습니까?\n삭제 시 기존 등록 PC 중 이 부품명을 사용하는 PC의 자동완성 정합성 체크에 영향을 줄 수 있습니다.')) return;
+
+      if (await deletePartsMaster(Number(this.currentAsset.id))) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+    
+    createIcons({ icons: { Plus, X, Save } });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('parts-master-id', asset.id || '');
+    setFieldValue('parts-master-category', asset.category || 'CPU');
+    setFieldValue('parts-master-component-name', asset.component_name || '');
+    setFieldValue('parts-master-score-tier', asset.score_tier || '');
+    setFieldValue('parts-master-deduction', asset.deduction !== undefined ? asset.deduction.toString() : '0');
+    this.updateHeaderIdentity(asset);
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('parts-master-modal-title');
+    if (titleEl) {
+      titleEl.textContent = (mode === 'add') ? '신규 부품 마스터 등록' : '부품 마스터 상세 편집';
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-parts-master-asset')!;
+    const saveBtn = document.getElementById('btn-save-parts-master-asset')!;
+
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add' || mode === 'edit') {
+      saveBtn.textContent = (mode === 'add') ? '등록' : '저장';
+      saveBtn.style.display = 'block';
+    } else {
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('parts-master-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const cat = asset.category || '';
+    const name = asset.component_name || '';
+
+    container.innerHTML = `
+      <span class="asset-code-title">${name}</span>
+      <span class="service-type-badge">${cat}</span>
+    `;
+  }
+}
+
+export const partsMasterModal = new PartsMasterModal();
+export function initPartsMasterModal(onSave: () => void, closeModals: () => void) { partsMasterModal.init(onSave, closeModals); }
+export function openPartsMasterModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { partsMasterModal.open(asset, mode); }
--- a/src/components/Modal/SWModal.ts
+++ b/src/components/Modal/SWModal.ts
@@ -1,14 +1,14 @@
 import { state, saveAsset, deleteAsset } from '../../core/state';
 import { BaseModal } from './BaseModal';
 import { openSwUserModal } from './SWUserModal';
-import { createIcons, History, Plus, X, Save, Edit2, RotateCcw, Calendar, Users } from 'lucide';
+import { createIcons, History, Plus, X, Save, RotateCcw, Calendar, Users } from 'lucide';
 import { CORP_LIST } from './SharedData';
 import { ASSET_SCHEMA, UI_TEXT } from '../../core/schema';
 import { API_BASE_URL } from '../../core/utils';
-import { 
-  generateOptionsHTML, 
-  setFieldValue, 
-  getFieldValue, 
+import {
+  generateOptionsHTML,
+  setFieldValue,
+  getFieldValue,
  applyDateMask
 } from './ModalUtils';

@@ -22,15 +22,18 @@ class SwAssetModal extends BaseModal {
      <div id="sw-asset-modal" class="modal-overlay hidden">
        <div class="modal-content wide">
          <div class="modal-header">
-            <h2 id="sw-modal-title">${this.title}</h2>
-            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기"><i data-lucide="x"></i></button>
+            <div class="header-left">
+              <h2 id="sw-modal-title" class="modal-title">${this.title}</h2>
+              <div id="sw-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-sw-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </div>
          <div class="modal-body">
            <div class="modal-body-split">
              <div class="modal-form-area">
                <form id="sw-asset-form" class="grid-form">
                  <input type="hidden" id="sw-asset-id" name="id" />
-                  
+
                  <div class="form-section-title">기본 정보 (Identity)</div>
                  <div class="form-group">
                    <label>자산 유형</label>
@@ -81,7 +84,7 @@ class SwAssetModal extends BaseModal {
                  </div>
                  <div class="form-group sw-standard-field">
                    <label>${ASSET_SCHEMA.PURCHASE_AMOUNT.ui}</label>
-                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\\\B(?=(\\\\d{3})+(?!\\\\d))/g, ',')" />
+                    <input type="text" id="sw-금액" name="purchase_amount" oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')" />
                  </div>

                  <div class="form-group cloud-only">
@@ -100,12 +103,12 @@ class SwAssetModal extends BaseModal {
                  <div class="form-section-title">관리 및 비고</div>
                  <div class="form-group sw-standard-field">
                    <label>${ASSET_SCHEMA.PURCHASE_DATE.ui}</label>
-                    <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                      <input type="text" id="sw-구매일" name="purchase_date" style="flex:1;" />
-                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();" style="padding:0.25rem;">
-                        <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                    <div class="input-with-btn">
+                      <input type="text" id="sw-구매일" name="purchase_date" />
+                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-구매일-picker'); p.value = document.getElementById('sw-구매일').value; p.showPicker();">
+                        <i data-lucide="calendar"></i>
                      </button>
-                      <input type="date" id="sw-구매일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
+                      <input type="date" id="sw-구매일-picker" class="hidden-picker" onchange="document.getElementById('sw-구매일').value = this.value" tabindex="-1" />
                    </div>
                  </div>
                  <div class="form-group sw-standard-field">
@@ -126,12 +129,12 @@ class SwAssetModal extends BaseModal {
                  </div>
                  <div class="form-group sw-standard-field" id="sw-expiry-group">
                    <label>${ASSET_SCHEMA.EXPIRED_DATE.ui}</label>
-                    <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                      <input type="text" id="sw-만료일" name="expiry_date" style="flex:1;" />
-                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();" style="padding:0.25rem;">
-                        <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                    <div class="input-with-btn">
+                      <input type="text" id="sw-만료일" name="expiry_date" />
+                      <button type="button" class="btn-icon" onclick="const p = document.getElementById('sw-만료일-picker'); p.value = document.getElementById('sw-만료일').value; p.showPicker();">
+                        <i data-lucide="calendar"></i>
                      </button>
-                      <input type="date" id="sw-만료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
+                      <input type="date" id="sw-만료일-picker" class="hidden-picker" onchange="document.getElementById('sw-만료일').value = this.value" tabindex="-1" />
                    </div>
                  </div>
                  <div class="form-group full-width">
@@ -140,18 +143,18 @@ class SwAssetModal extends BaseModal {
                  </div>
                </form>

-                <div id="sw-user-section" class="user-management-section" style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1.5rem;">
+                <div id="sw-user-section" class="user-management-section">
                  <button type="button" id="btn-open-sw-user" class="btn btn-outline btn-sm" title="사용자 관리">
-                    <i data-lucide="users" style="width:16px; height:16px; margin-right:4px;"></i> 사용자 관리
+                    <i data-lucide="users"></i> 사용자 관리
                  </button>
                </div>
              </div>

              <div class="modal-history-area">
-                <div class="history-header" style="display:flex; justify-content:space-between; align-items:center;">
-                  <h3><i data-lucide="history" style="width:16px; height:16px;"></i> 업데이트 내역</h3>
+                <div class="history-header">
+                  <h3><i data-lucide="history"></i> 업데이트 내역</h3>
                  <button type="button" id="btn-open-sw-update" class="btn btn-outline btn-sm">
-                    계약 업데이트 <i data-lucide="refresh-ccw" style="width:14px; height:14px;"></i>
+                    계약 업데이트 <i data-lucide="rotate-ccw"></i>
                  </button>
                </div>
                <div id="sw-history-list" class="history-timeline"></div>
@@ -170,24 +173,24 @@ class SwAssetModal extends BaseModal {
      </div>

      <!-- 계약 업데이트 서브 모달 -->
-      <div id="sw-update-modal" class="modal-overlay hidden" style="z-index: 1100;">
-        <div class="modal-content" style="max-width: 500px;">
+      <div id="sw-update-modal" class="modal-overlay hidden sub-modal">
+        <div class="modal-content narrow">
          <div class="modal-header">
-            <h2>계약 업데이트 반영</h2>
-            <button id="btn-close-sw-update" class="btn-icon"><i data-lucide="x"></i></button>
+            <h2 class="modal-title">계약 업데이트 반영</h2>
+            <button id="btn-close-sw-update" class="btn-icon">&times;</button>
          </div>
          <div class="modal-body">
-            <div class="grid-form" style="grid-template-columns: 1fr;">
+            <div class="grid-form vertical-form">
              <div class="form-group">
                <label>업데이트 일자</label>
                <input type="date" id="sw-update-date" />
              </div>
              <div class="form-group sub-sw-update">
                <label>새로운 계약 기간</label>
-                <div style="display: flex; align-items: center; gap: 0.5rem;">
-                  <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" style="flex: 1;" />
+                <div class="input-with-btn">
+                  <input type="text" id="sw-update-start" placeholder="YYYY-MM-DD" />
                  <span>~</span>
-                  <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" style="flex: 1;" />
+                  <input type="text" id="sw-update-end" placeholder="YYYY-MM-DD" />
                </div>
              </div>
              <div class="form-group">
@@ -209,6 +212,15 @@ class SwAssetModal extends BaseModal {
          </div>
        </div>
      </div>
+      <style>
+        .hidden-picker {
+          position: absolute;
+          width: 0;
+          height: 0;
+          opacity: 0;
+          pointer-events: none;
+        }
+      </style>
    `;
  }

@@ -231,7 +243,6 @@ class SwAssetModal extends BaseModal {
      if (this.currentAsset) openSwUserModal(this.currentAsset);
    });

-    // 업데이트 모달 로직
    const subModal = document.getElementById('sw-update-modal')!;
    const closeUpdate = () => subModal.classList.add('hidden');
    document.getElementById('btn-close-sw-update')?.addEventListener('click', closeUpdate);
@@ -278,7 +289,7 @@ class SwAssetModal extends BaseModal {
      const formData = new FormData(this.formEl!);
      const updated = { ...this.currentAsset };
      formData.forEach((value, key) => { updated[key] = value; });
-      
+
      let categoryKey = (type === '내부SW') ? 'swInternal' : (type === '클라우드' ? 'cloud' : 'swExternal');
      if (await saveAsset(categoryKey, updated)) { onSave(); this.close(); closeModals(); }
    });
@@ -322,10 +333,32 @@ class SwAssetModal extends BaseModal {
    }

    this.renderHistory(asset.id);
+    this.updateHeaderIdentity(asset);
  }

  protected onAfterOpen(asset: any, mode: string): void {
    this.applySwTypeUI(asset.asset_type || asset.type);
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('sw-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const type = getFieldValue('sw-asset-type') || asset.asset_type || asset.type || '';
+    const name = getFieldValue('sw-제품명') || asset.product_name || '';
+    const corp = getFieldValue('sw-법인') || asset.purchase_corp || '';
+
+    container.innerHTML = `
+      <span class="asset-code-title">${name}</span>
+      <span class="service-type-badge">${corp}</span>
+      <span class="asset-type-label">${type}</span>
+    `;
  }

  private applySwTypeUI(type: string) {
@@ -354,18 +387,12 @@ class SwAssetModal extends BaseModal {
  private renderHistory(swId: string) {
    const container = document.getElementById('sw-history-list');
    if (!container) return;
-    const logs = (state.masterData.logs || []).filter(l => l.assetId === swId);
+    const logs = (state.masterData.logs || []).filter(l => l.asset_id === swId);
    if (logs.length === 0) { container.innerHTML = '<div class="empty-history">수정 이력이 없습니다.</div>'; return; }
-    container.innerHTML = logs.map(l => `<div class=\"history-item\"><div class=\"history-date\">${l.date}</div><div class=\"history-user\">${l.user}</div><div class=\"history-details\">${l.details}</div></div>`).join('');
+    container.innerHTML = logs.map(l => `<div class="history-item"><div class="history-date">${l.log_date || ''}</div><div class="history-user">${l.log_user || '시스템'}</div><div class="history-details">${l.details}</div></div>`).join('');
  }
 }

 export const swModal = new SwAssetModal();
-
-export function initSwModal(onSave: () => void, closeModals: () => void) {
-  swModal.init(onSave, closeModals);
-}
-
-export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') {
-  swModal.open(asset, mode);
-}
+export function initSwModal(onSave: () => void, closeModals: () => void) { swModal.init(onSave, closeModals); }
+export function openSwModal(asset: any, mode: 'view' | 'add' | 'edit' = 'view') { swModal.open(asset, mode); }
--- a/src/components/Modal/SWUserModal.ts
+++ b/src/components/Modal/SWUserModal.ts
@@ -16,15 +16,15 @@ class SwUserModal extends BaseModal {
      <div id="sw-user-asset-modal" class="modal-overlay hidden">
        <div class="modal-content wide">
          <div class="modal-header">
-            <h2 id="sw-user-title">${this.title}</h2>
-            <button id="btn-close-sw-user-modal" class="btn-icon"><i data-lucide="x"></i></button>
+            <h2 id="sw-user-title" class="modal-title">${this.title}</h2>
+            <button id="btn-close-sw-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
          </div>
          <div class="modal-body">
            <div class="sw-info-summary" id="sw-user-sw-info"></div>
-            
-            <div class="user-list-toolbar" style="display:flex; justify-content:space-between; margin-bottom:1rem; align-items:center;">
-              <h3 style="font-size:1rem; font-weight:600;">할당된 사용자 목록</h3>
-              <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus"></i> 사용자 추가</button>
+
+            <div class="flex justify-between items-center mb-4">
+              <h3 class="detail-section-title mb-0">할당된 사용자 목록</h3>
+              <button type="button" id="btn-open-add-user" class="btn btn-primary btn-sm"><i data-lucide="plus" class="icon-sm"></i> 사용자 추가</button>
            </div>

            <div class="table-container">
@@ -35,9 +35,9 @@ class SwUserModal extends BaseModal {
                    <th>부서</th>
                    <th>직위</th>
                    <th>이름</th>
-                    <th>사용기간</th>
-                    <th>신청서</th>
-                    <th>관리</th>
+                    <th class="text-center">사용기간</th>
+                    <th class="text-center">신청서</th>
+                    <th class="text-center">관리</th>
                  </tr>
                </thead>
                <tbody id="sw-user-table-body"></tbody>
@@ -54,14 +54,14 @@ class SwUserModal extends BaseModal {
      </div>

      <!-- 사용자 추가/수정 서브 모달 -->
-      <div id="sw-user-edit-modal" class="modal-overlay hidden" style="z-index: 1100;">
-        <div class="modal-content" style="width: 400px;">
+      <div id="sw-user-edit-modal" class="modal-overlay hidden sub-modal">
+        <div class="modal-content narrow">
          <div class="modal-header">
-            <h3 id="sw-user-edit-title">사용자 정보</h3>
-            <button id="btn-close-user-edit" class="btn-icon"><i data-lucide="x"></i></button>
+            <h3 id="sw-user-edit-title" class="modal-title">사용자 정보</h3>
+            <button id="btn-close-user-edit" class="btn-icon">&times;</button>
          </div>
          <div class="modal-body">
-            <form id="sw-user-edit-form" class="grid-form" style="grid-template-columns: 1fr;">
+            <form id="sw-user-edit-form" class="grid-form vertical-form">
              <input type="hidden" id="edit-user-index" value="-1" />
              <div class="form-group">
                <label>조직</label>
@@ -81,22 +81,22 @@ class SwUserModal extends BaseModal {
              </div>
              <div class="form-group">
                <label>사용 시작일</label>
-                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="new-user-시작일" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                <div class="input-with-btn">
+                  <input type="text" id="new-user-시작일" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-시작일-picker'); p.value = document.getElementById('new-user-시작일').value; p.showPicker();">
+                    <i data-lucide="calendar" class="icon-sm"></i>
                  </button>
-                  <input type="date" id="new-user-시작일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
+                  <input type="date" id="new-user-시작일-picker" class="hidden-picker" onchange="document.getElementById('new-user-시작일').value = this.value" tabindex="-1" />
                </div>
              </div>
              <div class="form-group">
                <label>사용 종료일</label>
-                <div style="display:flex; gap:0.25rem; align-items:center; position:relative;">
-                  <input type="text" id="new-user-종료일" style="flex:1;" />
-                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();" style="padding:0.25rem;">
-                    <i data-lucide="calendar" style="width:18px; height:18px; color:var(--primary-color);"></i>
+                <div class="input-with-btn">
+                  <input type="text" id="new-user-종료일" />
+                  <button type="button" class="btn-icon" onclick="const p = document.getElementById('new-user-종료일-picker'); p.value = document.getElementById('new-user-종료일').value; p.showPicker();">
+                    <i data-lucide="calendar" class="icon-sm"></i>
                  </button>
-                  <input type="date" id="new-user-종료일-picker" style="position:absolute; width:0; height:0; opacity:0; pointer-events:none;" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
+                  <input type="date" id="new-user-종료일-picker" class="hidden-picker" onchange="document.getElementById('new-user-종료일').value = this.value" tabindex="-1" />
                </div>
              </div>
              <div class="form-group">
@@ -111,6 +111,15 @@ class SwUserModal extends BaseModal {
          </div>
        </div>
      </div>
+      <style>
+        .hidden-picker {
+          position: absolute;
+          width: 0;
+          height: 0;
+          opacity: 0;
+          pointer-events: none;
+        }
+      </style>
    `;
  }

@@ -140,10 +149,9 @@ class SwUserModal extends BaseModal {
      onSave(); this.close(); closeModals();
    });

-    // 닫기 이벤트들 (BaseModal의 공통 버튼 외 추가분)
    document.getElementById('btn-close-sw-user-modal')?.addEventListener('click', () => this.close());
    document.getElementById('btn-cancel-sw-user')?.addEventListener('click', () => this.close());
-    
+
    const subModal = document.getElementById('sw-user-edit-modal')!;
    const closeSub = () => subModal.classList.add('hidden');
    document.getElementById('btn-close-user-edit')?.addEventListener('click', closeSub);
@@ -155,9 +163,9 @@ class SwUserModal extends BaseModal {
  protected fillFormData(asset: any): void {
    const swInfo = document.getElementById('sw-user-sw-info')!;
    swInfo.innerHTML = `
-      <div style="background:var(--bg-light); padding:1rem; border-radius:6px; margin-bottom:1.5rem;">
-        <div style="font-size:0.8rem; color:var(--text-muted); margin-bottom:0.25rem;">${asset.purchase_corp || asset.법인 || ''}</div>
-        <div style="font-size:1.1rem; font-weight:700; color:var(--primary-color);">${asset.product_name || asset.제품명 || ''}</div>
+      <div class="sw-info-header border-b border-hairline pb-4 mb-6">
+        <div class="detail-label-sm">${asset.purchase_corp || asset.법인 || ''}</div>
+        <div class="asset-code-title">${asset.product_name || asset.제품명 || ''}</div>
      </div>
    `;

@@ -165,7 +173,7 @@ class SwUserModal extends BaseModal {
    this.tempSwUsers = existingMapping ? (existingMapping.userData || []).map((u: any) => ({
      조직: u[0], 부서: u[1], 직위: u[2], 이름: u[3], 사용기간: u[4], 신청서명: u[5]
    })) : [];
-    
+
    this.renderUserList();
  }

@@ -173,9 +181,10 @@ class SwUserModal extends BaseModal {

  private renderUserList() {
    const tbody = document.getElementById('sw-user-table-body')!;
+    if (!tbody) return;
    tbody.innerHTML = '';
    if (this.tempSwUsers.length === 0) {
-      tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; padding:2rem; color:var(--text-muted);">할당된 사용자가 없습니다.</td></tr>';
+      tbody.innerHTML = '<tr><td colspan="7" class="empty-cell text-center p-8">할당된 사용자가 없습니다.</td></tr>';
      return;
    }

@@ -186,12 +195,12 @@ class SwUserModal extends BaseModal {
        <td>${user.부서 || ''}</td>
        <td>${user.직위 || ''}</td>
        <td>${user.이름 || ''}</td>
-        <td>${user.사용기간 || ''}</td>
-        <td style="text-align:center;">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary"></i>' : '-'}</td>
-        <td>
-          <div style="display:flex; gap:0.5rem;">
+        <td class="text-center">${user.사용기간 || ''}</td>
+        <td class="text-center">${user.신청서명 ? '<i data-lucide="paperclip" class="text-primary icon-sm"></i>' : '-'}</td>
+        <td class="text-center">
+          <div class="flex gap-2 justify-center items-center">
            <button class="btn btn-outline btn-sm btn-edit-user" data-idx="${idx}">수정</button>
-            <button class="btn btn-outline btn-sm btn-danger btn-del-user" data-idx="${idx}">삭제</button>
+            <button class="btn-circle-remove btn-del-user" data-idx="${idx}">&times;</button>
          </div>
        </td>
      `;
@@ -257,11 +266,5 @@ class SwUserModal extends BaseModal {
 }

 export const swUserModal = new SwUserModal();
-
-export function initSwUserModal(onSave: () => void, closeModals: () => void) {
-  swUserModal.init(onSave, closeModals);
-}
-
-export function openSwUserModal(asset: any) {
-  swUserModal.open(asset);
-}
+export function initSwUserModal(onSave: () => void, closeModals: () => void) { swUserModal.init(onSave, closeModals); }
+export function openSwUserModal(asset: any) { swUserModal.open(asset); }
--- a/src/components/Modal/SharedData.ts
+++ b/src/components/Modal/SharedData.ts
@@ -30,7 +30,7 @@ export const CATEGORY_TYPE_MAP: Record<string, string[]> = {
 // 설치위치 종속성 데이터
 export const LOCATION_DATA: Record<string, string[]> = {
  '한맥빌딩': ['MDF실', '1층', '2층', '3층', '4층', '5층', '6층', '7층', '파고라'],
-  '기술개발센터': ['서버실', 'BLUE ZONE', 'GREEN ZONE', 'ORANGE ZONE', '회의실2', '회의실3', '회의실5', '회의실6', '회의실7', '사이니지룸'],
+  '기술개발센터': ['서버실', '센터내부'],
  '유니온빌딩': ['4층', '5층', '6층'],
  '뉴코아빌딩': ['4층', '6층', '7층'],
  'IDC': ['서관202', '서관203', '서관204', '서관205', '동관53', '동관54']
@@ -60,10 +60,17 @@ export const IMAGE_LOCATIONS: Record<string, Record<string, string[]>> = {
    '서버실': [
      'img/location_photo/기술개발센터/서버실/서버실_1.png',
      'img/location_photo/기술개발센터/서버실/서버실_2.png'
-    ]
+    ],
+    '센터내부': ['img/location_photo/기술개발센터/센터내부/센터내부.png']
  },
  '한맥빌딩': {
-    '7층': ['img/location_photo/한맥빌딩/7층_로비.png'],
+    '1층': ['img/location_photo/한맥빌딩/1층.png'],
+    '2층': ['img/location_photo/한맥빌딩/2층.png'],
+    '3층': ['img/location_photo/한맥빌딩/3층.png'],
+    '4층': ['img/location_photo/한맥빌딩/4층.png'],
+    '5층': ['img/location_photo/한맥빌딩/5층.png'],
+    '6층': ['img/location_photo/한맥빌딩/6층.png'],
+    '7층': ['img/location_photo/한맥빌딩/7층.png'],
    'MDF실': [
      'img/location_photo/한맥빌딩/MDF실/MDF_1.png',
      'img/location_photo/한맥빌딩/MDF실/MDF_2.png',
--- a/src/components/Modal/UserModal.ts
+++ b/src/components/Modal/UserModal.ts
@@ -0,0 +1,180 @@
+import { state, saveSystemUser, deleteSystemUser } from '../../core/state';
+import { BaseModal } from './BaseModal';
+import { setFieldValue } from './ModalUtils';
+import { createIcons, X, Save } from 'lucide';
+import { UI_TEXT } from '../../core/schema';
+
+class UserModal extends BaseModal {
+  constructor() {
+    super('user', '임직원 정보');
+  }
+
+  protected renderFrameHTML(): string {
+    return `
+      <div id="user-asset-modal" class="modal-overlay hidden">
+        <div class="modal-content narrow">
+          <div class="modal-header">
+            <div class="header-left">
+              <h2 id="user-modal-title" class="modal-title">${this.title}</h2>
+              <div id="user-header-identity" class="header-identity"></div>
+            </div>
+            <button id="btn-close-user-modal" class="btn-icon" aria-label="닫기">&times;</button>
+          </div>
+          <div class="modal-body">
+            <form id="user-asset-form" class="grid-form vertical-form">
+              <input type="hidden" id="user-id" name="id" />
+
+              <div class="form-group">
+                <label>사번</label>
+                <input type="text" id="user-emp-no" name="emp_no" placeholder="예: HM202601" required />
+              </div>
+
+              <div class="form-group">
+                <label>사용자명</label>
+                <input type="text" id="user-name-input" name="user_name" placeholder="예: 홍길동" required />
+              </div>
+
+              <div class="form-group">
+                <label>사용조직 (부서)</label>
+                <input type="text" id="user-dept" name="dept_name" placeholder="예: 기술개발센터" required />
+              </div>
+
+              <div class="form-group">
+                <label>직무 (직급)</label>
+                <input type="text" id="user-position-input" name="position" placeholder="예: BIM모델러" required />
+              </div>
+
+              <div class="form-group">
+                <label>상태</label>
+                <select id="user-status" name="status">
+                  <option value="재직">재직</option>
+                  <option value="퇴직">퇴직</option>
+                </select>
+              </div>
+            </form>
+          </div>
+          <div class="modal-footer">
+            <button id="btn-delete-user-asset" class="btn btn-outline btn-danger">삭제</button>
+            <div class="footer-actions">
+              <button id="btn-revert-user-edit" class="btn btn-outline hidden">수정 취소</button>
+              <button id="btn-cancel-user-modal" class="btn btn-outline">닫기</button>
+              <button id="btn-save-user-asset" class="btn btn-primary">수정</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected initChildLogic(onSave: () => void, closeModals: () => void): void {
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+    const revertBtn = document.getElementById('btn-revert-user-edit')!;
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+
+    saveBtn.addEventListener('click', async () => {
+      if (!this.currentAsset) return;
+      if (!this.isEditMode) {
+        this.setEditLockMode('edit');
+        this.isEditMode = true;
+        return;
+      }
+
+      const empNo = (document.getElementById('user-emp-no') as HTMLInputElement).value.trim();
+      const userName = (document.getElementById('user-name-input') as HTMLInputElement).value.trim();
+      const deptName = (document.getElementById('user-dept') as HTMLInputElement).value.trim();
+      const position = (document.getElementById('user-position-input') as HTMLInputElement).value.trim();
+      const status = (document.getElementById('user-status') as HTMLSelectElement).value;
+
+      if (!empNo || !userName || !deptName || !position) {
+        alert('모든 필수 입력 필드를 채워주세요.');
+        return;
+      }
+
+      const updated = {
+        id: this.currentAsset.id || null,
+        emp_no: empNo,
+        user_name: userName,
+        dept_name: deptName,
+        position: position,
+        status: status
+      };
+
+      if (await saveSystemUser(updated)) {
+        alert(UI_TEXT.MESSAGES.SAVE_SUCCESS);
+        onSave(); this.close(); closeModals();
+      }
+    });
+
+    revertBtn.addEventListener('click', () => {
+      this.setEditLockMode('view');
+      if (this.currentAsset) this.fillFormData(this.currentAsset);
+    });
+
+    deleteBtn.addEventListener('click', async () => {
+      if (!this.currentAsset || !this.currentAsset.id) return;
+      if (!confirm('정말로 이 임직원 정보를 삭제하시겠습니까?')) return;
+
+      if (await deleteSystemUser(this.currentAsset.id)) {
+        alert('성공적으로 삭제되었습니다.');
+        onSave(); this.close(); closeModals();
+      }
+    });
+    
+    createIcons({ icons: { Save, X } });
+  }
+
+  protected fillFormData(asset: any): void {
+    setFieldValue('user-id', asset.id || '');
+    setFieldValue('user-emp-no', asset.emp_no || '');
+    setFieldValue('user-name-input', asset.user_name || '');
+    setFieldValue('user-dept', asset.dept_name || '');
+    setFieldValue('user-position-input', asset.position || '');
+    setFieldValue('user-status', asset.status || '재직');
+    this.updateHeaderIdentity(asset);
+  }
+
+  protected onAfterOpen(asset: any, mode: string): void {
+    const titleEl = document.getElementById('user-modal-title');
+    if (titleEl) {
+      titleEl.textContent = (mode === 'add') ? '신규 임직원 등록' : '임직원 정보 수정';
+    }
+
+    const deleteBtn = document.getElementById('btn-delete-user-asset')!;
+    const saveBtn = document.getElementById('btn-save-user-asset')!;
+
+    deleteBtn.style.display = (mode === 'add') ? 'none' : 'block';
+
+    if (mode === 'add' || mode === 'edit') {
+      saveBtn.textContent = mode === 'add' ? '등록' : '저장';
+      saveBtn.style.display = 'block';
+    } else {
+      saveBtn.textContent = '수정';
+      saveBtn.style.display = 'block';
+    }
+    this.updateHeaderIdentity(asset);
+  }
+
+  private updateHeaderIdentity(asset: any) {
+    const container = document.getElementById('user-header-identity');
+    if (!container) return;
+    
+    if (this.currentMode === 'add') {
+      container.innerHTML = '<span class="badge badge-primary">신규 등록</span>';
+      return;
+    }
+
+    const empNo = asset.emp_no || '';
+    const userName = asset.user_name || '';
+    const dept = asset.dept_name || '';
+
+    container.innerHTML = `
+      <span class="asset-code-title">${userName}</span>
+      <span class="service-type-badge">${empNo}</span>
+      <span class="asset-type-label">${dept}</span>
+    `;
+  }
+}
+
+export const userModal = new UserModal();
+export function initUserModal(onSave: () => void, closeModals: () => void) { userModal.init(onSave, closeModals); }
+export function openUserModal(asset: any, mode: 'view' | 'edit' | 'add' = 'view') { userModal.open(asset, mode); }
--- a/src/components/Modal/modal.css
+++ b/src/components/Modal/modal.css
@@ -0,0 +1,594 @@
+/* Modal - Vercel Inspired Minimalist Design */
+.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;
+  backdrop-filter: blur(2px);
+}
+
+.modal-overlay:not(.hidden) { opacity: 1; visibility: visible; }
+
+.modal-content {
+  background-color: var(--canvas);
+  width: 100%; 
+  max-width: 600px;
+  max-height: 90vh;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
+  transform: translateY(10px);
+  transition: transform 0.2s ease;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--hairline);
+}
+
+.modal-overlay.sub-modal {
+  z-index: 1100;
+}
+
+
+.modal-header {
+  background-color: var(--canvas);
+  border-bottom: 1px solid var(--hairline);
+  padding: 1rem var(--spacing-base);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.modal-header h2 { 
+  font-size: var(--fs-md); 
+  font-weight: 600; 
+  color: var(--primary);
+  line-height: 1.2;
+}
+
+.modal-header .btn-icon {
+  color: var(--mute) !important;
+  cursor: pointer;
+  background: none !important;
+  border: none !important;
+  font-size: 1.5rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.form-group.relative {
+  position: relative;
+}
+
+/* 동적 리스트 컨테이너 */
+.dynamic-row-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.volume-row, .remote-info-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.remote-info-row {
+  flex-direction: column;
+}
+
+/* 파일 업로드 디스플레이 */
+.file-upload-display {
+  flex: 1;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  padding: 0 12px;
+  height: clamp(34px, 4.5vmin, 44px);
+  display: flex;
+  align-items: center;
+  font-size: var(--fs-sm);
+  color: var(--mute);
+  background-color: var(--canvas-soft);
+}
+
+.btn-circle-remove {
+  width: clamp(34px, 4.5vmin, 44px);
+  height: clamp(34px, 4.5vmin, 44px);
+  border-radius: 50% !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 !important;
+  color: var(--danger) !important;
+  border: 1px solid var(--danger) !important;
+  background: transparent;
+  font-size: 1.5rem !important; /* Larger X icon */
+  line-height: 1;
+  flex-shrink: 0;
+  transition: all 0.2s;
+  cursor: pointer;
+}
+
+.btn-circle-remove:hover {
+  background-color: var(--danger);
+  color: var(--white) !important;
+}
+
+
+
+.modal-body { 
+  padding: var(--spacing-base); 
+  overflow-y: auto;
+  flex: 1;
+  background: var(--canvas);
+}
+
+.grid-form { 
+  display: grid; 
+  grid-template-columns: 1fr 1fr; 
+  gap: var(--spacing-base); 
+}
+
+.form-group { 
+  display: flex; 
+  flex-direction: column; 
+  gap: 0.5rem; 
+}
+
+.form-group.full-width { 
+  grid-column: span 2; 
+}
+
+/* Section Title for Grouping */
+.form-section-title {
+  grid-column: span 2;
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  padding: 1rem 0 0.5rem 0;
+  border-bottom: 1px solid var(--hairline);
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.form-section-title:first-child {
+  padding-top: 0;
+}
+
+.form-group label { 
+  font-size: var(--fs-xs); 
+  font-weight: 600; 
+  color: var(--mute);
+}
+
+.form-group input, 
+.form-group select, 
+.form-group textarea {
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.75rem;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  font-family: inherit; 
+  font-size: var(--fs-sm);
+  outline: none; 
+  transition: all 0.2s;
+  background-color: var(--canvas);
+  color: var(--primary);
+  box-sizing: border-box;
+}
+
+.form-group input.font-mono,
+.form-group select.font-mono {
+    font-family: var(--font-mono);
+    font-size: var(--fs-xs);
+}
+
+.form-group textarea {
+  height: auto;
+  padding: 0.75rem;
+  resize: none;
+}
+
+.form-group input:focus, 
+.form-group select:focus, 
+.form-group textarea:focus { 
+  border-color: var(--primary);
+  box-shadow: 0 0 0 1px var(--primary);
+}
+
+.form-group input:disabled, 
+.form-group select:disabled {
+  background-color: var(--canvas-soft);
+  color: var(--mute);
+  cursor: not-allowed;
+}
+
+.modal-footer {
+  padding: 1rem 1.5rem; 
+  border-top: 1px solid var(--hairline);
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center;
+  background-color: var(--canvas-soft);
+  flex-shrink: 0;
+}
+
+.modal-footer .btn {
+  height: 36px;
+  padding: 0 1.25rem;
+  font-size: var(--fs-xs);
+}
+
+.footer-actions { 
+  display: flex; 
+  gap: 0.75rem; 
+}
+
+/* Modal Size Variants */
+.modal-content.wide {
+  max-width: 1000px;
+}
+
+.modal-content.narrow {
+  max-width: 500px;
+}
+
+.vertical-form {
+  grid-template-columns: 1fr !important;
+}
+
+
+.modal-body-split {
+  display: flex;
+  gap: 2rem;
+  min-height: 500px;
+}
+
+.modal-form-area {
+  flex: 1.2;
+}
+
+.modal-history-area {
+  flex: 0.8;
+  border-left: 1px solid var(--hairline);
+  padding-left: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.history-header h3 {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--primary);
+}
+
+/* 읽기 전용 필드 (자산번호 등) 통일 스타일 */
+.is-readonly-field {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  pointer-events: none !important;
+  color: var(--primary) !important;
+  font-weight: 600 !important;
+  cursor: default;
+  padding-left: 0 !important;
+}
+
+/* 조회 모드 (View Mode) 폼 필드 스타일 */
+.is-view-mode input,
+.is-view-mode select,
+.is-view-mode textarea {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  color: var(--primary) !important;
+  font-weight: 600 !important;
+  padding-left: 0 !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  box-shadow: none !important;
+}
+
+/* 입력 필드 + 버튼 그룹 */
+.input-with-btn {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.input-with-btn input {
+  flex: 1;
+}
+
+/* Remote Info UI Extras */
+.ri-creds-row {
+  display: flex;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.ri-field-group {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: var(--canvas-soft);
+  padding: 0 0.75rem;
+  border-radius: 6px;
+  border: 1px solid var(--hairline);
+  flex: 1;
+}
+
+.is-view-mode .ri-field-group {
+  background: transparent;
+  border-color: transparent;
+  padding: 0;
+}
+
+.ri-mini-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--mute);
+  text-transform: uppercase;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.ri-field-group input {
+  border: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  height: 36px !important;
+  box-shadow: none !important;
+  width: 100%;
+}
+
+.ri-line {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.ri-connector {
+  width: 24px;
+  height: 24px;
+  border-left: 2px solid var(--hairline);
+  border-bottom: 2px solid var(--hairline);
+  margin-left: 12px;
+  margin-top: -12px;
+  flex-shrink: 0;
+}
+.history-timeline {
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 12px;
+}
+
+.history-item {
+  position: relative;
+  padding-left: 24px;
+  padding-bottom: 24px;
+  border-left: 1px solid var(--hairline);
+}
+
+.history-item:last-child {
+  border-left: 1px solid transparent;
+}
+
+.history-item::before {
+  content: '';
+  position: absolute;
+  left: -5px;
+  top: 0;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background-color: var(--canvas);
+  border: 2px solid var(--primary);
+  z-index: 1;
+}
+
+.history-date {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.history-details {
+  font-size: var(--fs-xs);
+  color: var(--primary);
+  line-height: 1.6;
+  background: var(--canvas-soft-2);
+  padding: 10px 12px;
+  border-radius: 6px;
+  border: 1px solid var(--hairline);
+}
+
+/* Upload UI Refinement */
+.upload-sidebar {
+  width: 260px;
+  border-right: 1px solid var(--hairline);
+  background-color: var(--canvas-soft);
+  padding: 1.5rem 1rem;
+}
+
+.upload-tab-btn {
+  padding: 0.8rem 1rem;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  color: var(--body);
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.upload-tab-btn.active {
+  background-color: var(--canvas);
+  color: var(--primary);
+  border-color: var(--hairline);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+  font-weight: 600;
+}
+
+/* --- Image Picker Overlay (View Location) --- */
+.image-picker-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  padding: 2rem;
+}
+
+.image-picker-window {
+  width: 100%;
+  max-width: 900px;
+  height: 85vh;
+  display: flex;
+  flex-direction: column;
+  background: var(--canvas);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+}
+
+.image-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  background: var(--canvas);
+  color: var(--primary);
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--hairline);
+}
+
+.image-picker-header h3 {
+  margin: 0;
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.image-picker-header .btn-icon {
+  color: var(--mute) !important;
+  cursor: pointer;
+  background: none !important;
+  border: none !important;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.image-picker-content {
+  flex: 1;
+  width: 100%;
+  position: relative;
+  background: var(--canvas-soft);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+.image-picker-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 1rem 1.5rem;
+  background: var(--canvas);
+  border-radius: 0 0 8px 8px;
+  border-top: 1px solid var(--hairline);
+}
+
+.layout-map-container {
+  position: relative;
+  display: inline-block;
+  cursor: crosshair;
+  background-color: var(--canvas-soft-2);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.layout-map-container.readonly {
+  cursor: default;
+}
+
+.image-marker-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.layout-map-img {
+  display: block;
+  max-width: 100%;
+  max-height: 75vh;
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+
+.layout-marker {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-color: var(--danger);
+  border: 2px solid white;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.pulse-marker::after {
+  content: '';
+  position: absolute;
+  top: 50%; left: 50%;
+  width: 100%; height: 100%;
+  background-color: var(--danger);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  animation: pulse 1.5s infinite;
+  z-index: -1;
+}
+
+@keyframes pulse {
+  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
+  100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
+}
+
+.digital-overlay-layer {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  pointer-events: none;
+}
--- a/src/components/Navigation.ts
+++ b/src/components/Navigation.ts
@@ -3,7 +3,7 @@ import { state } from '../core/state';
 const MENU_CONFIG: any = {
  hw: {
    label: '하드웨어',
-    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '네트워크', '업무지원장비']
+    tabs: ['대시보드', '서버', 'PC', '스토리지', '공간정보장비', 'PC부품', '부품 마스터', '네트워크', '업무지원장비']
  },
  sw: {
    label: '소프트웨어',
@@ -11,7 +11,7 @@ const MENU_CONFIG: any = {
  },
  ops: {
    label: '운영지원',
-    tabs: ['클라우드', '도메인', '비용관리']
+    tabs: ['클라우드', '도메인', '비용관리', '사용자']
  },
  vip: {
    label: '내빈/외빈',
@@ -24,92 +24,96 @@ const MENU_CONFIG: any = {
 };

 export function renderNavigation(onTabChange: (tab: string) => void) {
-  const navContainer = document.getElementById('main-nav')!;
+  const header = document.querySelector('.main-header') as HTMLElement;
+  const headerContainer = document.querySelector('.header-container')!;
+  if (!headerContainer) return;

  const render = () => {
-    navContainer.innerHTML = '';
+    // 1. 헤더 구조 (Vercel Style: Clean Single Row)
+    headerContainer.innerHTML = `
+      <div class="brand" id="btn-home-logo" style="cursor: pointer;">
+        <img src="img/image_92.png" class="main-logo" alt="HM Logo" />
+        <h1>한맥자산관리시스템</h1>
+      </div>
+      
+      <nav class="integrated-nav" id="main-nav-list"></nav>
+
+      <div class="header-actions">
+        <div class="role-toggle-wrapper">
+          <span class="role-label user ${state.currentUserRole === 'user' ? 'active' : ''}">실무자</span>
+          <label class="role-toggle">
+            <input type="checkbox" id="role-toggle-checkbox" ${state.currentUserRole === 'admin' ? 'checked' : ''}>
+            <span class="role-slider"></span>
+          </label>
+          <span class="role-label admin ${state.currentUserRole === 'admin' ? 'active' : ''}">관리자</span>
+        </div>
+        <div class="notification-area">
+           <button class="icon-btn" title="알림"><i data-lucide="bell" style="width:18px; height:18px;"></i></button>
+        </div>
+      </div>
+    `;
+
+    const navList = document.getElementById('main-nav-list')!;
    
-    // 기존 메뉴 렌더링
-    (Object.keys(MENU_CONFIG) as Array<keyof typeof MENU_CONFIG>).forEach(catKey => {
+    // 2. GNB 메뉴 렌더링 (Ghost Tab Style)
+    Object.keys(MENU_CONFIG).forEach(catKey => {
      const config = MENU_CONFIG[catKey];
      
-      // 역할에 따라 노출할 서브탭 필터링
      const visibleTabs = config.tabs.filter((tab: string) => {
-        if (state.currentUserRole === 'admin') {
-          // 관리자(admin)일 경우 대시보드 탭만 노출
-          return tab === '대시보드';
-        } else {
-          // 실무자(user)일 경우 대시보드 제외한 모든 탭 노출
-          return tab !== '대시보드';
-        }
+        if (state.currentUserRole === 'admin') return tab === '대시보드';
+        return tab !== '대시보드';
      });

-      // 노출할 서브탭이 없으면 해당 대분류 GNB 메뉴도 렌더링하지 않음
-      if (visibleTabs.length === 0) {
-        return;
-      }
+      if (visibleTabs.length === 0) return;

-      const isActive = state.activeCategory === catKey;
-
-      const group = document.createElement('div');
-      group.className = `nav-group ${isActive ? 'active is-showing-shelf' : ''}`;
-      
-      const trigger = document.createElement('div');
-      trigger.className = 'gnb-trigger';
-      trigger.textContent = config.label;
-
-      trigger.addEventListener('click', () => {
-        if (state.activeCategory !== catKey) {
-          state.activeCategory = catKey as any;
-          const firstTab = visibleTabs[0] || config.tabs[0];
-          state.activeSubTab = firstTab;
-          render();
-          onTabChange(firstTab);
-        }
-      });
-      group.appendChild(trigger);
-
-      const shelf = document.createElement('div');
-      shelf.className = 'lnb-shelf';
-      
      visibleTabs.forEach((tab: string) => {
+        if (tab === '부품 마스터') return;
        const item = document.createElement('div');
-        item.className = `lnb-item ${isActive && state.activeSubTab === tab ? 'active' : ''}`;
+        const isActive = state.activeSubTab === tab;
+        item.className = `gnb-trigger ${isActive ? 'active' : ''}`;
        item.textContent = tab;
+        item.style.fontSize = 'var(--fs-sm)'; // Ensure small but standard font
        
        item.addEventListener('click', (e) => {
          e.stopPropagation();
          state.activeCategory = catKey as any;
          state.activeSubTab = tab;
-          render();
+          render(); 
          onTabChange(tab);
        });
-        shelf.appendChild(item);
+        navList.appendChild(item);
      });
-      group.appendChild(shelf);
-      navContainer.appendChild(group);
    });

-    // ─── '관리자' 메뉴 별도 추가 (GNB 스타일 - 관리자 역할일 때만 노출) ───
+    // 3. 관리자 전용 '관리도구'
    if (state.currentUserRole === 'admin') {
-      const adminGroup = document.createElement('div');
-      adminGroup.className = 'nav-group';
-      
      const adminTrigger = document.createElement('div');
-      adminTrigger.className = 'gnb-trigger';
-      adminTrigger.innerHTML = '관리자';
-      adminTrigger.style.color = 'var(--text-muted)';
-      adminTrigger.style.borderLeft = '1px solid var(--border-color)';
-      adminTrigger.style.marginLeft = '1rem';
-      adminTrigger.style.paddingLeft = '1.5rem';
-      
-      adminTrigger.addEventListener('click', () => {
-        window.open('/map_editor.html', '_blank');
-      });
-      
-      adminGroup.appendChild(adminTrigger);
-      navContainer.appendChild(adminGroup);
+      adminTrigger.className = 'gnb-trigger admin-trigger';
+      adminTrigger.innerHTML = '관리도구';
+      adminTrigger.addEventListener('click', () => window.open('/map_editor.html', '_blank'));
+      navList.appendChild(adminTrigger);
    }
+
+    // 4. 이벤트 바인딩
+    document.getElementById('btn-home-logo')?.addEventListener('click', () => location.reload());
+    
+    const roleToggle = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
+    roleToggle?.addEventListener('change', () => {
+      state.currentUserRole = roleToggle.checked ? 'admin' : 'user';
+      if (state.currentUserRole === 'admin') {
+        state.activeCategory = 'hw';
+        state.activeSubTab = '대시보드';
+      } else {
+        state.activeCategory = 'hw';
+        state.activeSubTab = '서버';
+      }
+      render();
+      onTabChange(state.activeSubTab);
+    });
+
+    // 아이콘 생성
+    // @ts-ignore
+    if (window.lucide) window.lucide.createIcons();
  };

  render();
--- a/src/components/guide.css
+++ b/src/components/guide.css
@@ -19,8 +19,8 @@

 .guide-tab {
  padding: 0.75rem 1.25rem;
-  font-size: 18px;
-  font-weight: 600;
+  font-size: 24px;
+  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
@@ -72,7 +72,7 @@
 }

 .guide-section h3 {
-  font-size: 1.3rem;
+  font-size: 1.73rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
@@ -83,7 +83,7 @@
 }

 .guide-text {
-  font-size: 18px;
+  font-size: 24px;
  color: var(--text-main);
  line-height: 1.7;
  margin: 0;
@@ -127,8 +127,8 @@
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
-  font-size: 17px;
-  font-weight: 700;
+  font-size: 23px;
+  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -136,14 +136,14 @@
 }

 .flow-step .step-label {
-  font-weight: 700;
+  font-weight: 800;
  color: var(--text-main);
-  font-size: 18px;
+  font-size: 24px;
  display: block;
 }

 .flow-step .step-desc {
-  font-size: 17px;
+  font-size: 23px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
@@ -159,13 +159,13 @@
 .guide-info-table {
  width: 100%;
  border-collapse: collapse;
-  font-size: 18px;
+  font-size: 24px;
 }

 .guide-info-table th {
  background: #f8faf9;
  color: var(--primary-color);
-  font-weight: 700;
+  font-weight: 800;
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
@@ -182,7 +182,7 @@
  background: var(--primary-light);
  border-left: 4px solid var(--primary-color);
  padding: 1rem;
-  font-size: 18px;
+  font-size: 24px;
  color: var(--primary-color);
  line-height: 1.6;
 }
--- a/src/core/dummyData.ts
+++ b/src/core/dummyData.ts
--- a/src/core/excelHandler.ts
+++ b/src/core/excelHandler.ts
@@ -1,213 +1,7 @@
-import * as XLSX from 'xlsx';
-import { ASSET_SCHEMA } from './schema';
-
 /**
- * ITAM 엑셀 핸들러 (Database Synchronized Edition)
- * 데이터베이스 실제 스키마 컬럼과 엑셀 헤더를 1:1로 일치시킵니다.
+ * ITAM 엑셀 핸들러 (지정 날짜 포맷팅 유틸리티)
 */

-export interface HardwareAsset {
-  [key: string]: any;
-  id: string;
-}
-
-export interface SoftwareAsset {
-  [key: string]: any;
-  id: string;
-}
-
-export interface SWUser {
-  id: string;
-  sw_id: string;
-  user_name: string;
-  dept: string;
-  corp: string;
-  [key: string]: any;
-}
-
-export interface HardwareLog {
-  id: string;
-  assetId: string;
-  date: string;
-  details: string;
-  user: string;
-}
-
-export interface MasterAssetData {
-  pc: HardwareAsset[];
-  server: HardwareAsset[];
-  storage: HardwareAsset[];
-  network: HardwareAsset[];
-  equipment: HardwareAsset[];
-  survey: HardwareAsset[];
-  pcParts: HardwareAsset[];
-  swInternal: SoftwareAsset[];
-  swExternal: SoftwareAsset[];
-  cloud: SoftwareAsset[];
-  domain: any[];
-  vip: HardwareAsset[];
-  officeSupplies: HardwareAsset[];
-  cost: any[];
-  swUsers: SWUser[];
-  logs: HardwareLog[];
-  [key: string]: any;
-}
-
-/**
- * DB 컬럼 순서 및 구성 정의 (실제 DB 스키마 dump 기준)
- */
-const DB_MAPPING: Record<string, (keyof typeof ASSET_SCHEMA)[]> = {
-  pc: [
-    'ASSET_TYPE', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT', 'USER_POSITION',
-    'EMP_NO', 'CURRENT_USER',
-    'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'HDD3', 'HDD4', 'MAC_ADDR',
-    'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'MEMO', 'MAINBOARD'
-  ],
-  server: [
-    'ASSET_TYPE', 'MODEL_NAME', 'ASSET_PURPOSE', 'HW_STATUS',
-    'CURRENT_DEPT', 'CPU', 'RAM', 'GPU', 'SSD1', 'SSD2', 'HDD1', 'HDD2', 'IP_ADDR',
-    'REMOTE_TOOL', 'REMOTE_ID', 'REMOTE_PW', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO', 'PREV_DEPT', 'MANAGER_SUB', 'IP_ADDR2', 'MONITORING', 'HDD3', 'HDD4', 'EMP_NO'
-  ],
-  storage: [
-    'ASSET_TYPE', 'HW_STATUS', 'VOLUME', 'MODEL_NAME',
-    'EMP_NO', 'CURRENT_USER',
-    'SERIAL_NUM', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO', 'CURRENT_DEPT', 'PREV_DEPT'
-  ],
-  network: [
-    'PURCHASE_CORP', 'HW_STATUS', 'CURRENT_DEPT', 'PREV_DEPT',
-    'EMP_NO', 'CURRENT_USER',
-    'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'MANAGER_SUB', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
-  ],
-  survey: [ // asset_survey (공간정보장비)
-    'HW_STATUS', 'ASSET_NAME', 'LOCATION', 'LOC_DETAIL',
-    'EMP_NO', 'CURRENT_USER',
-    'MANAGER_MAIN', 'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'MEMO'
-  ],
-  pcParts: [
-    'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME', 'VOLUME',
-    'EMP_NO', 'CURRENT_USER',
-    'MONITOR_INCH', 'LOCATION', 'LOC_DETAIL', 'PURCHASE_CORP', 'PURCHASE_DATE',
-    'PURCHASE_AMOUNT', 'PURCHASE_VENDOR', 'MEMO'
-  ],
-  equipment: [
-    'HW_STATUS', 'ASSET_STATUS', 'ASSET_TYPE', 'ASSET_MFR',
-    'EMP_NO', 'CURRENT_USER',
-    'MODEL_NAME', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO'
-  ],
-  officeSupplies: [ // asset_office_supplies (시설자산)
-    'HW_STATUS', 'ASSET_TYPE', 'ASSET_MFR', 'MODEL_NAME',
-    'EMP_NO', 'CURRENT_USER',
-    'ASSET_COUNT', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'MEMO'
-  ],
-  swInternal: [
-    'SW_FIELD', 'DEV_OBJ', 'SW_STATUS', 'SW_TYPE', 'MANAGER_MAIN',
-    'DEV_MGR', 'PLANNING_MGR', 'SALES_MGR', 'PURCHASE_CORP', 'MEMO'
-  ],
-  swExternal: [
-    'PRODUCT_NAME', 'SW_TYPE', 'SW_STATUS', 'SW_FIELD', 'CURRENT_DEPT',
-    'PREV_DEPT', 'MANAGER_MAIN', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT',
-    'PURCHASE_VENDOR', 'EMAIL_ACCOUNT', 'MEMO', 'EMP_NO', 'CURRENT_USER'
-  ],
-  cloud: [
-    'ASSET_PURPOSE', 'PURCHASE_METHOD', 'PURCHASE_VENDOR', 'PURCHASE_CORP',
-    'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'MEMO', 'SW_ID', 'SW_PW'
-  ],
-  domain: [
-    'DOMAIN_ADDR', 'ASSET_PURPOSE', 'PURCHASE_VENDOR', 'ASSET_TYPE',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'MANAGER_MAIN', 'MANAGER_SUB',
-    'MEMO'
-  ],
-  cost: [
-    'ASSET_TYPE', 'ASSET_PURPOSE', 'LOCATION', 'LOC_DETAIL', 'MANAGER_MAIN',
-    'MANAGER_SUB', 'PURCHASE_CORP', 'PURCHASE_DATE', 'PURCHASE_AMOUNT', 'PURCHASE_VENDOR',
-    'EMAIL_ACCOUNT', 'EMAIL_PW', 'MEMO', 'EMP_NO', 'CURRENT_USER'
-  ],
-  vip: [ // asset_vip (선물)
-    'ASSET_NAME', 'MODEL_NAME', 'LOCATION', 'LOC_DETAIL',
-    'PURCHASE_CORP', 'PURCHASE_DATE', 'EXPIRED_DATE', 'PURCHASE_VENDOR', 'MEMO'
-  ]
-};
-
-export function downloadTemplate() {
-  const wb = XLSX.utils.book_new();
-  
-  const tabConfigs = [
-    { name: 'PC', key: 'pc' },
-    { name: '서버', key: 'server' },
-    { name: '스토리지', key: 'storage' },
-    { name: '공간정보장비', key: 'survey' },
-    { name: 'PC부품', key: 'pcParts' },
-    { name: '네트워크', key: 'network' },
-    { name: '업무지원장비', key: 'equipment' },
-    { name: '내부SW', key: 'swInternal' },
-    { name: '외부SW', key: 'swExternal' },
-    { name: '클라우드', key: 'cloud' },
-    { name: '도메인', key: 'domain' },
-    { name: '비용관리', key: 'cost' },
-    { name: '선물', key: 'vip' },
-    { name: '시설자산', key: 'officeSupplies' }
-  ];
-
-  tabConfigs.forEach(config => {
-    const keys = DB_MAPPING[config.key];
-    const headers = keys.map(k => ASSET_SCHEMA[k].ui);
-    const ws = XLSX.utils.aoa_to_sheet([headers]);
-    ws['!cols'] = Array(headers.length).fill({ wch: 20 });
-    XLSX.utils.book_append_sheet(wb, ws, config.name);
-  });
-
-  XLSX.writeFile(wb, 'itam_template_db_aligned.xlsx');
-}
-
-export function exportToExcel(masterData: MasterAssetData) {
-  const wb = XLSX.utils.book_new();
-  
-  const exportConfigs = [
-    { name: 'PC', list: masterData.pc, key: 'pc' },
-    { name: '서버', list: masterData.server, key: 'server' },
-    { name: '스토리지', list: masterData.storage, key: 'storage' },
-    { name: '공간정보장비', list: masterData.survey || [], key: 'survey' },
-    { name: 'PC부품', list: masterData.pcParts || [], key: 'pcParts' },
-    { name: '네트워크', list: masterData.network || [], key: 'network' },
-    { name: '업무지원장비', list: masterData.equipment || [], key: 'equipment' },
-    { name: '내부SW', list: masterData.swInternal, key: 'swInternal' },
-    { name: '외부SW', list: masterData.swExternal, key: 'swExternal' },
-    { name: '클라우드', list: masterData.cloud || [], key: 'cloud' },
-    { name: '도메인', list: masterData.domain || [], key: 'domain' },
-    { name: '비용관리', list: masterData.cost || [], key: 'cost' },
-    { name: '선물', list: masterData.vip || [], key: 'vip' },
-    { name: '시설자산', list: masterData.officeSupplies || [], key: 'officeSupplies' }
-  ];
-
-  exportConfigs.forEach(config => {
-    const schemaKeys = DB_MAPPING[config.key];
-    const headers = schemaKeys.map(k => ASSET_SCHEMA[k].ui);
-    const rows = config.list.map(asset => 
-      schemaKeys.map(k => {
-        const dbField = ASSET_SCHEMA[k].db;
-        return asset[dbField] || asset[ASSET_SCHEMA[k].key] || '';
-      })
-    );
-    
-    const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
-    XLSX.utils.book_append_sheet(wb, ws, config.name);
-  });
-
-  XLSX.writeFile(wb, `itam_export_${new Date().toISOString().split('T')[0]}.xlsx`);
-}
-
 export function formatExcelDate(val: any): string {
  if (!val) return '';
  if (typeof val === 'number') {
@@ -219,54 +13,3 @@ export function formatExcelDate(val: any): string {
  }
  return String(val);
 }
-
-export async function parseExcel(file: File): Promise<any> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const workbook = XLSX.read(e.target?.result, { type: 'array' });
-        const parsedData: any = {};
-        
-        workbook.SheetNames.forEach(sheetName => {
-          const ws = workbook.Sheets[sheetName];
-          const rows = XLSX.utils.sheet_to_json(ws, { defval: "" }) as any[];
-          const list: any[] = [];
-
-          rows.forEach(r => {
-            const data: any = { id: Math.random().toString(36).substring(2, 9) };
-            
-            // Set default category based on sheet name
-            data['category'] = sheetName;
-            
-            Object.keys(r).forEach(label => {
-              const schemaEntry = Object.values(ASSET_SCHEMA).find(s => s.ui === label);
-              const key = schemaEntry ? schemaEntry.db : label;
-              let val = r[label];
-              
-              if (label.includes('일자') || label.includes('연월') || label.includes('만료일') || label.includes('시작일')) {
-                val = formatExcelDate(val);
-              }
-              data[key] = val;
-            });
-
-            list.push(data);
-          });
-          
-          // Sheet Name Mapping back to state keys
-          const nameMap: Record<string, string> = {
-            'PC': 'pc', '서버': 'server', '스토리지': 'storage', '공간정보장비': 'survey',
-            'PC부품': 'pcParts', '네트워크': 'network', '업무지원장비': 'equipment',
-            '내부SW': 'swInternal', '외부SW': 'swExternal', '클라우드': 'cloud',
-            '도메인': 'domain', '비용관리': 'cost', '선물': 'vip', '시설자산': 'officeSupplies'
-          };
-          
-          const stateKey = nameMap[sheetName] || sheetName;
-          if (list.length > 0) parsedData[stateKey] = list;
-        });
-        resolve(parsedData);
-      } catch (err) { reject(err); }
-    };
-    reader.readAsArrayBuffer(file);
-  });
-}
--- a/src/core/filterHandler.ts
+++ b/src/core/filterHandler.ts
@@ -1,5 +1,4 @@
 import { ASSET_SCHEMA, UI_TEXT } from './schema';
-import { getActionButtonsHTML } from './utils';
 import { generateOptionsHTML } from '../components/Modal/ModalUtils';
 import { CORP_LIST } from '../components/Modal/SharedData';

@@ -15,23 +14,62 @@ export interface FilterOptions {
  showLoc?: boolean;
  showField?: boolean;
  showType?: boolean;
+  showStatus?: boolean;
  extraHTML?: string;
  onFilterChange: (filters: any) => void;
+  initialFilters?: any;
+  fullList?: any[]; // For populating dynamic filters
+}
+
+/**
+ * 전역 액션 버튼 그룹 생성 (자산 추가 등)
+ */
+export function getActionButtonsHTML(): string {
+  return `<div id="filter-bar-actions" class="header-action-group"></div>`;
 }

 export function renderFilterBar(container: HTMLElement, options: FilterOptions) {
-  const { keywordLabel = '통합 검색', showCorp = false, showDept = false, showLoc = false, showField = false, showType = false, extraHTML = '', onFilterChange } = options;
+  const { 
+    keywordLabel = '통합 검색', 
+    showCorp = false, 
+    showDept = false, 
+    showLoc = false, 
+    showField = false, 
+    showType = false, 
+    showStatus = false,
+    extraHTML = '', 
+    onFilterChange,
+    initialFilters = { keyword: '', corp: '', dept: '', loc: '', field: '', type: '', status: '' },
+    fullList = []
+  } = options;
+
+  container.classList.add('search-bar'); // Restored class
+
+  // Helper to get unique sorted values
+  const getUnique = (key: keyof typeof ASSET_SCHEMA | string) => {
+    const fieldKey = (ASSET_SCHEMA as any)[key]?.key || key;
+    return Array.from(new Set(fullList.map(item => item[fieldKey] || item[(ASSET_SCHEMA as any)[key]?.db]).filter(Boolean))).sort();
+  };

  container.innerHTML = `
    <div class="search-item flex-1">
      <label>${keywordLabel}</label>
-      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off">
+      <input type="text" id="filter-keyword" placeholder="검색어를 입력하세요..." autocomplete="off" value="${initialFilters.keyword || ''}">
    </div>
    ${showType ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.ASSET_TYPE.ui}</label>
      <select id="filter-type">
        <option value="">전체 유형</option>
+        ${getUnique('ASSET_TYPE').map(v => `<option value="${v}" ${initialFilters.type === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
+    </div>` : ''}
+    ${showStatus ? `
+    <div class="search-item">
+      <label>${ASSET_SCHEMA.HW_STATUS.ui}</label>
+      <select id="filter-status">
+        <option value="">전체 상태</option>
+        ${getUnique('HW_STATUS').map(v => `<option value="${v}" ${initialFilters.status === v ? 'selected' : ''}>${v}</option>`).join('')}
      </select>
    </div>` : ''}
    ${showField ? `
@@ -39,30 +77,36 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
      <label>${ASSET_SCHEMA.SW_FIELD.ui}</label>
      <select id="filter-field">
        <option value="">전체 분야</option>
-        <option value="업무공통">업무공통</option>
-        <option value="개발S/W">개발S/W</option>
-        <option value="디자인">디자인</option>
-        <option value="설계S/W">설계S/W</option>
+        <option value="업무공통" ${initialFilters.field === '업무공통' ? 'selected' : ''}>업무공통</option>
+        <option value="개발S/W" ${initialFilters.field === '개발S/W' ? 'selected' : ''}>개발S/W</option>
+        <option value="디자인" ${initialFilters.field === '디자인' ? 'selected' : ''}>디자인</option>
+        <option value="설계S/W" ${initialFilters.field === '설계S/W' ? 'selected' : ''}>설계S/W</option>
      </select>
    </div>` : ''}
    ${showCorp ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.PURCHASE_CORP.ui}</label>
-      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, '', true)}</select>
+      <select id="filter-corp">${generateOptionsHTML(CORP_LIST, initialFilters.corp || '', true)}</select>
    </div>` : ''}
    ${showLoc ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.LOCATION.ui}</label>
-      <select id="filter-loc"><option value="">전체 위치</option></select>
+      <select id="filter-loc">
+        <option value="">전체 위치</option>
+        ${getUnique('LOCATION').map(v => `<option value="${v}" ${initialFilters.loc === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
    </div>` : ''}
    ${showDept ? `
    <div class="search-item">
      <label>${ASSET_SCHEMA.CURRENT_DEPT.ui}</label>
-      <select id="filter-dept"><option value="">전체 조직</option></select>
+      <select id="filter-dept">
+        <option value="">전체 조직</option>
+        ${getUnique('CURRENT_DEPT').map(v => `<option value="${v}" ${initialFilters.dept === v ? 'selected' : ''}>${v}</option>`).join('')}
+      </select>
    </div>` : ''}
    ${extraHTML}
    <button id="btn-reset-filters" class="btn btn-outline btn-reset">
-      <i data-lucide="refresh-ccw"></i> ${UI_TEXT.ACTION.RESET_FILTER}
+      <i data-lucide="refresh-ccw" class="icon-sm"></i> ${UI_TEXT.ACTION.RESET_FILTER}
    </button>
    ${getActionButtonsHTML()}
  `;
@@ -75,7 +119,8 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
      dept: (container.querySelector('#filter-dept') as HTMLSelectElement)?.value || '',
      loc: (container.querySelector('#filter-loc') as HTMLSelectElement)?.value || '',
      field: (container.querySelector('#filter-field') as HTMLSelectElement)?.value || '',
-      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || ''
+      type: (container.querySelector('#filter-type') as HTMLSelectElement)?.value || '',
+      status: (container.querySelector('#filter-status') as HTMLSelectElement)?.value || ''
    };
    onFilterChange(filters);
  };
@@ -86,9 +131,10 @@ export function renderFilterBar(container: HTMLElement, options: FilterOptions)
  container.querySelector('#filter-loc')?.addEventListener('change', triggerChange);
  container.querySelector('#filter-field')?.addEventListener('change', triggerChange);
  container.querySelector('#filter-type')?.addEventListener('change', triggerChange);
+  container.querySelector('#filter-status')?.addEventListener('change', triggerChange);

  container.querySelector('#btn-reset-filters')?.addEventListener('click', () => {
-    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type'].forEach(id => {
+    ['filter-keyword', 'filter-corp', 'filter-dept', 'filter-loc', 'filter-field', 'filter-type', 'filter-status'].forEach(id => {
      const el = container.querySelector(`#${id}`);
      if (el) (el as any).value = '';
    });
@@ -109,7 +155,8 @@ export function applyCommonFilters(list: any[], filters: any, searchKeys: (keyof
    const matchLoc = !filters.loc || (item[ASSET_SCHEMA.LOCATION.key] || item[ASSET_SCHEMA.LOCATION.db]) === filters.loc;
    const matchField = !filters.field || (item[ASSET_SCHEMA.SW_FIELD.key] || item[ASSET_SCHEMA.SW_FIELD.db]) === filters.field;
    const matchType = !filters.type || (item[ASSET_SCHEMA.ASSET_TYPE.key] || item[ASSET_SCHEMA.ASSET_TYPE.db]) === filters.type;
+    const matchStatus = !filters.status || (item[ASSET_SCHEMA.HW_STATUS.key] || item[ASSET_SCHEMA.HW_STATUS.db]) === filters.status;

-    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType;
+    return matchKeyword && matchCorp && matchDept && matchLoc && matchField && matchType && matchStatus;
  });
 }
--- a/src/core/realServerData.ts
+++ b/src/core/realServerData.ts
--- a/src/core/schema.ts
+++ b/src/core/schema.ts
@@ -17,6 +17,7 @@ export const ASSET_SCHEMA = {
  PURCHASE_AMOUNT:{ key: 'purchase_amount', db: 'purchase_amount', ui: '구매금액' },
  PURCHASE_VENDOR:{ key: 'purchase_vendor', db: 'purchase_vendor', ui: '구매업체' },
  APPROVAL_DOC:   { key: 'approval_document', db: 'approval_document', ui: '품의서' },
+  SERVICE_TYPE:   { key: 'service_type', db: 'service_type',    ui: '서비스 구분' },
  MANAGER_MAIN:   { key: 'manager_primary', db: 'manager_primary', ui: '담당자(정)' },
  MANAGER_SUB:    { key: 'manager_secondary', db: 'manager_secondary', ui: '담당자(부)' },
  LOCATION:       { key: 'location',     db: 'location',        ui: '자산위치' },
@@ -154,6 +155,21 @@ export const PAGE_DESCRIPTIONS: Record<string, { title: string; description: str
    title: '사무용 가구 관리',
    description: '책상, 의자, 캐비닛 등 사무 환경 구성을 위한 가구 자산의 배치 현황을 관리합니다.',
    icon: 'armchair'
+  },
+  '사용자': {
+    title: '임직원 사용자 관리',
+    description: 'IT 자산 할당 및 관리의 기준이 되는 사내 임직원(사용자) 정보를 데이터베이스 기반으로 직접 등록하고 수정합니다.',
+    icon: 'users'
+  },
+  '부품 마스터': {
+    title: '부품 표준 정보 관리',
+    description: 'PC 사양 적정성 평가의 기준이 되는 부품 표준 정보 및 등급별 감점 점수를 관리합니다.',
+    icon: 'cpu'
+  },
+  '직무별 기준 사양': {
+    title: '직무별 기준 사양 관리',
+    description: 'BIM 모델러, 개발자, 엔지니어 등 사내 직무별 권장 하드웨어 기준 및 성능 합격 점수를 관리합니다.',
+    icon: 'sliders'
  }
 };

--- a/src/core/state.ts
+++ b/src/core/state.ts
@@ -1,65 +1,40 @@
-import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog } from './excelHandler';
+import { HardwareAsset, SoftwareAsset, SWUser, HardwareLog, MasterAssetData, SystemUser } from './types';
 import { API_BASE_URL } from './utils';
-import { dummyPCs, dummyServers, dummyStorages, dummyEquips, dummySubSw, dummyPermSw, dummyCloud, dummyDomain, dummySwUsers, dummyLogs } from './dummyData';

 // --- State Definitions ---
-export interface MasterAssetData {
-  users: any[];
-  pc: any[];
-  server: any[];
-  storage: any[];
-  network: any[];
-  survey: any[];
-  pcParts: any[];
-  equipment: any[];
-  officeSupplies: any[];
-  swInternal: any[];
-  swExternal: any[];
-  cloud: any[];
-  domain: any[];
-  cost: any[];
-  vip: any[];
-  mobile?: any[]; // Legacy mobile support
-  equip?: any[];  // Backward compat
-  
-  // Backward compatibility
-  subSw: any[];
-  permSw: any[];
-
-  swUsers: SWUser[];
-  logs: HardwareLog[];
-  
-  // 통합 배열
-  hw: any[];
-  sw: any[];
-}
-
 export interface AppState {
  activeCategory: 'dashboard' | 'hw' | 'sw' | 'ops' | 'vip' | 'fac' | 'users' | 'etc';
  activeSubTab: string;
+  viewMode: 'location' | 'legacy' | 'list';
  masterData: MasterAssetData;
  activeCharts: any[];
  currentUserRole: 'admin' | 'user';
+  listFilters?: Record<string, any>;
 }

 // 초기 상태
 export const state: AppState = {
  activeCategory: 'hw',
  activeSubTab: '대시보드',
+  viewMode: 'location',
  activeCharts: [],
  currentUserRole: 'user',
+  listFilters: {},
  masterData: {
    users: [],
    pc: [], server: [], storage: [], network: [],
-    survey: [], pcParts: [], equipment: [], officeSupplies: [],
+    survey: [], pcParts: [], partsMaster: [], equipment: [], officeSupplies: [], 
    swInternal: [], swExternal: [], cloud: [], domain: [],
    cost: [], vip: [],
-    subSw: [], permSw: [],
    hw: [], sw: [],
-    swUsers: [], logs: []
+    swUsers: [], logs: [],
+    jobSpecs: [],
+    mobile: []
  }
 };

+(window as any).__itam_state = state;
+
 /**
 * 통합 V2 스키마에 맞춘 데이터 로드
 */
@@ -74,6 +49,7 @@ export async function loadMasterDataFromDB() {
    state.masterData = {
      ...state.masterData,
      ...data,
+      jobSpecs: data.jobSpecs || [],
      logs: (data.logs || []).map((l: any) => ({
        ...l,
        assetId: l.asset_id || l.assetId,
@@ -85,9 +61,9 @@ export async function loadMasterDataFromDB() {
    };

    // Mapping for backward compatibility
-    state.masterData.equip = state.masterData.equipment;
-    state.masterData.subSw = state.masterData.swExternal;
-    state.masterData.permSw = state.masterData.swInternal;
+    (state.masterData as any).equip = state.masterData.equipment;
+    (state.masterData as any).subSw = state.masterData.swExternal;
+    (state.masterData as any).permSw = state.masterData.swInternal;

    // 하드웨어 통합 (대시보드 호환용)
    state.masterData.hw = [
@@ -158,3 +134,103 @@ export async function deleteAsset(category: string, assetId: string) {
  }
  return false;
 }
+
+export async function savePartsMaster(component: any) {
+  try {
+    const url = `${API_BASE_URL}/api/hardware-components/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(component)
+    });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('부품 마스터 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deletePartsMaster(id: number) {
+  try {
+    const url = `${API_BASE_URL}/api/hardware-components/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('부품 마스터 삭제 실패:', err);
+  }
+  return false;
+}
+
+export async function saveSystemUser(user: any) {
+  try {
+    const url = `${API_BASE_URL}/api/system-users/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(user)
+    });
+    if (response.ok) {
+      await loadMasterDataFromDB(); // 전역 상태 갱신
+      return true;
+    }
+  } catch (err) {
+    console.error('사용자 정보 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deleteSystemUser(id: string) {
+  try {
+    const url = `${API_BASE_URL}/api/system-users/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    if (response.ok) {
+      await loadMasterDataFromDB(); // 전역 상태 갱신
+      return true;
+    }
+  } catch (err) {
+    console.error('사용자 정보 삭제 실패:', err);
+  }
+  return false;
+}
+
+export async function saveJobSpec(spec: any) {
+  try {
+    const url = `${API_BASE_URL}/api/job-specs/save`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(spec)
+    });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('직무별 기준 사양 저장 실패:', err);
+  }
+  return false;
+}
+
+export async function deleteJobSpec(id: number) {
+  try {
+    const url = `${API_BASE_URL}/api/job-specs/${id}`;
+    const response = await fetch(url, { method: 'DELETE' });
+    
+    if (response.ok) {
+        await loadMasterDataFromDB(); // 전역 상태 갱신
+        return true;
+    }
+  } catch (err) {
+    console.error('직무별 기준 사양 삭제 실패:', err);
+  }
+  return false;
+}
--- a/src/core/types.ts
+++ b/src/core/types.ts
@@ -0,0 +1,155 @@
+/**
+ * ITAM Global Type Definitions
+ */
+
+export interface BaseAsset {
+  id: string;
+  asset_code?: string;
+  category?: string;
+  asset_type?: string;
+  purchase_corp?: string;
+  purchase_date?: string;
+  purchase_amount?: number | string;
+  purchase_vendor?: string;
+  approval_document?: string;
+  service_type?: string;
+  manager_primary?: string;
+  manager_secondary?: string;
+  location?: string;
+  location_detail?: string;
+  location_photo?: string;
+  loc_x?: number;
+  loc_y?: number;
+  memo?: string;
+  updated_at?: string;
+  created_at?: string;
+}
+
+export interface HardwareAsset extends BaseAsset {
+  hw_status?: string;
+  model_name?: string;
+  asset_name?: string;
+  asset_mfr?: string;
+  current_dept?: string;
+  previous_dept?: string;
+  user_current?: string;
+  emp_no?: string;
+  user_position?: string;
+  previous_user?: string;
+  cpu?: string;
+  ram?: string;
+  gpu?: string;
+  ssd_1?: string;
+  ssd_2?: string;
+  hdd_1?: string;
+  hdd_2?: string;
+  hdd_3?: string;
+  hdd_4?: string;
+  mainboard?: string;
+  os?: string;
+  ip_address?: string;
+  ip_address_2?: string;
+  mac_address?: string;
+  remote_tool?: string;
+  remote_id?: string;
+  remote_pw?: string;
+  monitoring?: string;
+  volume?: string;
+  monitor_inch?: string;
+  asset_count?: number | string;
+  serial_num?: string;
+  // Normalized V3 fields
+  volumes?: any[]; 
+  remotes?: any[];
+}
+
+export interface SoftwareAsset extends BaseAsset {
+  sw_status?: string;
+  sw_field?: string;
+  sw_type?: string;
+  dev_objective?: string;
+  dev_manager?: string;
+  planning_manager?: string;
+  sales_manager?: string;
+  product_name?: string;
+  domain_address?: string;
+  email_account?: string;
+  email_pw?: string;
+  sw_id?: string;
+  sw_pw?: string;
+  purchase_method?: string;
+  asset_purpose?: string;
+  asset_status?: string;
+  start_date?: string;
+  expired_date?: string;
+}
+
+export interface SWUser {
+  id: string;
+  sw_id: string;
+  user_name: string;
+  dept: string;
+  corp: string;
+  emp_no?: string;
+  created_at?: string;
+  [key: string]: any;
+}
+
+export interface HardwareLog {
+  id: string;
+  asset_id: string;
+  log_date: string;
+  log_user: string;
+  event_type: string;
+  details: string;
+  old_dept?: string;
+  new_dept?: string;
+  old_user?: string;
+  new_user?: string;
+  created_at?: string;
+}
+
+export interface SystemUser {
+  id: string;
+  emp_no: string;
+  user_name: string;
+  dept_name: string;
+  position: string;
+  status: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface PartsMaster {
+  id: number | string;
+  category: string;
+  component_name: string;
+  score_tier: string;
+  deduction: number;
+}
+
+export interface MasterAssetData {
+  users: SystemUser[];
+  pc: HardwareAsset[];
+  server: HardwareAsset[];
+  storage: HardwareAsset[];
+  network: HardwareAsset[];
+  survey: HardwareAsset[];
+  pcParts: HardwareAsset[];
+  partsMaster: PartsMaster[];
+  equipment: HardwareAsset[];
+  officeSupplies: HardwareAsset[];
+  swInternal: SoftwareAsset[];
+  swExternal: SoftwareAsset[];
+  cloud: SoftwareAsset[];
+  domain: SoftwareAsset[];
+  cost: any[];
+  vip: HardwareAsset[];
+  swUsers: SWUser[];
+  logs: HardwareLog[];
+  jobSpecs?: any[];
+  mobile?: HardwareAsset[];
+  // Integrated arrays
+  hw: HardwareAsset[];
+  sw: SoftwareAsset[];
+}
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -1,6 +1,6 @@
 import { PAGE_DESCRIPTIONS } from './schema';

-export const API_BASE_URL = `http://${location.hostname}:3000`;
+export const API_BASE_URL = '';

 /**
 * ITAM 공통 유틸리티 함수
@@ -17,7 +17,7 @@ export function renderPageHeader(container: HTMLElement, pageId: string) {
  header.className = 'page-header';
  header.innerHTML = `
    <div class="page-title-group">
-      <h2 class="page-title"><i data-lucide="${config.icon}"></i> ${config.title}</h2>
+      <h2 class="page-title">${config.title}</h2>
      <p class="page-description">${config.description}</p>
    </div>
  `;
@@ -158,3 +158,202 @@ export function dynamicSort<T>(list: T[], key: string, direction: 'asc' | 'desc'
 export function getActionButtonsHTML(): string {
  return '';
 }
+
+/**
+ * 100점 만점 감점형 PC 성능 점수 계산 (CPU + RAM + GPU + 연식)
+ */
+export function calculatePcScoreDeductive(cpu: string, ram: string, gpu: string, purchaseDate: string): number {
+  let score = 100;
+  if (!cpu) cpu = '';
+  if (!ram) ram = '';
+  if (!gpu) gpu = '';
+
+  const cpuUpper = cpu.toUpperCase();
+  const ramUpper = ram.toUpperCase();
+  const gpuUpper = gpu.toUpperCase();
+
+  // 1. CPU 등급 감점 (최대 -30점)
+  let cpuDeduction = 0;
+  if (cpuUpper.includes('I9') || cpuUpper.includes('RYZEN 9') || cpuUpper.includes('RYZEN9')) {
+    cpuDeduction = 0;
+  } else if (cpuUpper.includes('I7') || cpuUpper.includes('RYZEN 7') || cpuUpper.includes('RYZEN7')) {
+    cpuDeduction = 5;
+  } else if (cpuUpper.includes('I5') || cpuUpper.includes('RYZEN 5') || cpuUpper.includes('RYZEN5')) {
+    cpuDeduction = 15;
+  } else if (cpuUpper.includes('I3') || cpuUpper.includes('RYZEN 3') || cpuUpper.includes('RYZEN3')) {
+    cpuDeduction = 25;
+  } else {
+    cpuDeduction = 30;
+  }
+  score -= cpuDeduction;
+
+  // 2. CPU 세대 노후 감점 (최대 -15점)
+  let genDeduction = 0;
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  let gen = 0;
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  let amdGen = 0;
+  if (amdMatch && amdMatch[1] && !intelMatch) {
+    const numStr = amdMatch[1];
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10);
+  }
+
+  if (intelMatch) {
+    if (gen >= 12) genDeduction = 0;
+    else if (gen >= 10) genDeduction = 5;
+    else if (gen >= 8) genDeduction = 10;
+    else genDeduction = 15;
+  } else if (amdMatch) {
+    if (amdGen >= 5) genDeduction = 0;
+    else if (amdGen >= 3) genDeduction = 5;
+    else genDeduction = 10;
+  } else {
+    genDeduction = 15;
+  }
+  score -= genDeduction;
+
+  // 3. RAM 용량 감점 (최대 -25점)
+  const ramMatch = ramUpper.match(/(\d+)\s*GB/);
+  let ramDeduction = 25;
+  if (ramMatch && ramMatch[1]) {
+    const ramVal = parseInt(ramMatch[1], 10);
+    if (ramVal >= 32) ramDeduction = 0;
+    else if (ramVal >= 16) ramDeduction = 10;
+    else if (ramVal >= 8) ramDeduction = 20;
+    else ramDeduction = 25;
+  }
+  score -= ramDeduction;
+
+  // 4. GPU 성능 감점 (최대 -25점)
+  let gpuDeduction = 25;
+  if (!gpuUpper || gpuUpper === '-' || gpuUpper.trim() === '') {
+    gpuDeduction = 25;
+  } else if (
+    gpuUpper.includes('RTX 4090') || gpuUpper.includes('RTX 4080') || gpuUpper.includes('RTX 4070') ||
+    gpuUpper.includes('RTX 3090') || gpuUpper.includes('RTX 3080') ||
+    gpuUpper.includes('RTX A5000') || gpuUpper.includes('RTX A6000') || gpuUpper.includes('RTX A4000')
+  ) {
+    gpuDeduction = 0;
+  } else if (
+    gpuUpper.includes('RTX 3070') || gpuUpper.includes('RTX 3060') || gpuUpper.includes('RTX 2060') ||
+    gpuUpper.includes('RTX A2000') || gpuUpper.includes('RTX A3000') || gpuUpper.includes('QUADRO')
+  ) {
+    gpuDeduction = 5;
+  } else if (
+    gpuUpper.includes('GTX 1660') || gpuUpper.includes('GTX 1080') || gpuUpper.includes('GTX 1070') ||
+    gpuUpper.includes('GTX 1060') || gpuUpper.includes('RX 6700') || gpuUpper.includes('RX 6600')
+  ) {
+    gpuDeduction = 15;
+  } else {
+    gpuDeduction = 25;
+  }
+  score -= gpuDeduction;
+
+  // 5. 연식(노후도) 감점 (최대 -15점)
+  let age = 0;
+  if (purchaseDate && purchaseDate !== '-') {
+    let normalized = purchaseDate.replace(/\./g, '-').trim();
+    if (/^\d{6}$/.test(normalized)) {
+      normalized = `${normalized.substring(0, 4)}-${normalized.substring(4, 6)}`;
+    }
+    const purchase = new Date(normalized);
+    if (!isNaN(purchase.getTime())) {
+      // 2026년 5월 31일 기준 경과연수 계산
+      const mockToday = new Date('2026-05-31');
+      const diffMs = mockToday.getTime() - purchase.getTime();
+      age = diffMs / (1000 * 60 * 60 * 24 * 365.25);
+      age = Math.max(0, parseFloat(age.toFixed(1)));
+    }
+  }
+
+  let ageDeduction = 0;
+  if (age < 1) ageDeduction = 0;
+  else if (age < 2) ageDeduction = 3;
+  else if (age < 3) ageDeduction = 6;
+  else if (age < 4) ageDeduction = 9;
+  else if (age < 5) ageDeduction = 12;
+  else ageDeduction = 15;
+
+  score -= ageDeduction;
+
+  return Math.max(10, score);
+}
+
+/**
+ * 성능 점수 기준 등급 뱃지 메타 정보 가져오기
+ */
+export function getPcGrade(score: number, isWin11Incompatible?: boolean): { name: string; class: string; color: string } {
+  if (score >= 85) return { name: '최상급', class: 'b-purple', color: '#7C3AED' };
+  if (score >= 70) return { name: '상급', class: 'b-primary', color: '#4F46E5' };
+  if (score >= 40) return { name: '중급', class: 'b-green', color: '#10B981' };
+  if (score >= 20 && !isWin11Incompatible) return { name: '보급', class: 'b-yellow', color: '#F59E0B' };
+  return { name: '교체 대상', class: 'badge-danger', color: '#EF4444' };
+}
+
+/**
+ * Windows 11 업그레이드 지원 불가능한 하드웨어 조건인지 판별
+ */
+export function isWindows11Incompatible(cpu: string, ram: string): boolean {
+  if (!cpu) return true;
+  const cpuUpper = cpu.toUpperCase();
+
+  // 1. RAM 4GB 미만은 공식 미지원
+  if (ram) {
+    const ramMatch = ram.toUpperCase().match(/(\d+)\s*GB/);
+    if (ramMatch && ramMatch[1]) {
+      const ramVal = parseInt(ramMatch[1], 10);
+      if (ramVal < 4) return true;
+    }
+  }
+
+  // 2. CPU 세대 검사
+  // Intel CPU 세대 판정
+  const intelMatch = cpuUpper.match(/I\d-?(\d+)/);
+  if (intelMatch && intelMatch[1]) {
+    const numStr = intelMatch[1];
+    let gen = 0;
+    if (numStr.length === 5) gen = parseInt(numStr.substring(0, 2), 10);
+    else if (numStr.length === 4) gen = parseInt(numStr.substring(0, 1), 10);
+    else if (numStr.length === 3) gen = parseInt(numStr.substring(0, 1), 10); // 3자리수 구형 세대 (예: i5-750)
+    
+    if (gen > 0 && gen < 8) return true; // 8세대 미만 불가
+    return false;
+  }
+
+  // AMD Ryzen CPU 세대 판정
+  const amdMatch = cpuUpper.match(/RYZEN\s?\d\s?-?(\d+)/);
+  if (amdMatch && amdMatch[1]) {
+    const numStr = amdMatch[1];
+    let amdGen = 0;
+    if (numStr.length === 4) amdGen = parseInt(numStr.substring(0, 1), 10); // 1xxx, 2xxx 등
+    
+    if (amdGen > 0 && amdGen < 2) return true; // Ryzen 1세대 이하는 불가
+    return false;
+  }
+
+  // Apple Silicon은 지원
+  if (cpuUpper.includes('APPLE') || cpuUpper.includes('M1') || cpuUpper.includes('M2') || cpuUpper.includes('M3') || cpuUpper.includes('M4')) {
+    return false;
+  }
+
+  // 그 외 확실한 구형 CPU 제품군
+  const knownOldCpus = ['CORE2', 'CORE 2', 'PENTIUM', 'CELERON', 'ATHLON', 'PHENOM', 'XEON'];
+  if (knownOldCpus.some(name => cpuUpper.includes(name))) {
+    return true;
+  }
+
+  // 세대 매칭은 안되었으나 Intel Core i 시리즈 구조이면 구형(1세대 등)으로 간주
+  if (cpuUpper.includes('I3') || cpuUpper.includes('I5') || cpuUpper.includes('I7') || cpuUpper.includes('I9')) {
+    // i5-620M 처럼 옛날 구형 모바일 칩 등
+    return true;
+  }
+
+  return false;
+}
+
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,63 +1,56 @@
+import './styles/common.css';
+import './styles/login.css';
 import { state, loadMasterDataFromDB, saveAsset } from './core/state';
 import { renderNavigation } from './components/Navigation';
 import { renderDashboard } from './views/DashboardView';
 import { renderSWTable } from './views/SW_Table';
+import { renderLocationView } from './views/LocationView';
 import { initBaseModal } from './components/Modal/BaseModal';
 import { initHwModal, openHwModal } from './components/Modal/HWModal';
 import { initSwModal, openSwModal } from './components/Modal/SWModal';
 import { initSwUserModal } from './components/Modal/SWUserModal';
 import { initDomainModal, openDomainModal } from './components/Modal/DomainModal';
+import { initPartsMasterModal, openPartsMasterModal } from './components/Modal/PartsMasterModal';
+import { initJobSpecModal, openJobSpecModal } from './components/Modal/JobSpecModal';
+import { initUserModal, openUserModal } from './components/Modal/UserModal';
+import { activePartsMasterSubTab } from './views/List/PartsMasterListView';
 import { initDashboardDetailModal } from './components/Modal/DashboardDetailModal';
 import { initGuide } from './components/Guide';
 import { pcFlowModal } from './components/Modal/PCFlowModal';
 import { createIcons, Plus, X, LayoutDashboard, Monitor, Server, Database, Laptop, CalendarClock, Key, Cpu, Layers, Users, Paperclip, Edit2, History, RefreshCcw, BookOpen, Settings } from 'lucide';

-async function apiBatchSave(url: string, data: any[], label: string) {
-  try {
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(data)
-    });
-    if (!response.ok) throw new Error(`${label} DB 저장 실패`);
-    console.log(`✅ ${label} DB 저장 완료`);
-  } catch (err) {
-    console.error(`❌ ${label} DB 저장 오류:`, err);
-    alert(`${label} 저장 중 오류가 발생했습니다: ${(err as any).message}`);
-  }
-}
-
-const savePcToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/pc/batch`, state.masterData.pc, '개인PC');
-const saveServerToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/server/batch`, state.masterData.server, '서버');
-const saveStorageToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/storage/batch`, state.masterData.storage, '스토리지');
-const saveNetworkToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/network/batch`, state.masterData.network, '네트워크');
-const saveEquipToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/equipment/batch`, state.masterData.equipment, '업무지원장비');
-const saveSwInternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swInternal/batch`, state.masterData.swInternal, '내부SW');
-const saveSwExternalToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swExternal/batch`, state.masterData.swExternal, '외부SW');
-const saveCloudToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/cloud/batch`, state.masterData.cloud, '클라우드');
-const saveSwUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/swUsers/batch`, state.masterData.swUsers, 'SW사용자');
-const saveLogsToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/logs/batch`, state.masterData.logs, '자산 로그');
-const saveUsersToDB = () => apiBatchSave(`http://${location.hostname}:3000/api/users/batch`, state.masterData.users, '사용자마스터');

 // 화면 갱신 통합 핸들러
-function refreshView() {
+function refreshView(tab?: string) {
  const mainContent = document.getElementById('main-content')!;
  if (!mainContent) return;
-  
-  if (state.activeSubTab === '대시보드') {
+
+  const activeTab = tab || state.activeSubTab;
+
+  if (activeTab === '대시보드') {
    renderDashboard(mainContent);
+    return;
+  }
+
+  // 서버 탭이 아닐 경우에는 state.viewMode가 location이더라도 강제로 목록(list) 뷰를 그리도록 함
+  // (state.viewMode의 원래 상태는 보존하여, 서버 탭 복귀 시 최근 보던 모드를 유지함)
+  const isServerTab = activeTab === '서버';
+  const effectiveViewMode = isServerTab ? state.viewMode : 'list';
+  
+  mainContent.innerHTML = `
+    <div id="view-body" class="view-container"></div>
+  `;
+
+  const viewBody = document.getElementById('view-body')!;
+  if (effectiveViewMode === 'location') {
+    renderLocationView(viewBody);
  } else {
-    renderSWTable(mainContent);
+    renderSWTable(viewBody);    // 리스트 형식
  }
 }

-// 통합 저장 및 갱신
-async function saveAllDataToDB() {
-    await Promise.all([
-        savePcToDB(), saveServerToDB(), saveStorageToDB(), saveNetworkToDB(),
-        saveEquipToDB(), saveSwInternalToDB(), saveSwExternalToDB(), 
-        saveCloudToDB(), saveSwUsersToDB(), saveLogsToDB(), saveUsersToDB()
-    ]);
+// 통합 갱신 (저장은 이미 개별 모달에서 처리됨)
+async function refreshAllData() {
    await loadMasterDataFromDB();
    refreshView();
 }
@@ -71,21 +64,18 @@ function initApp() {

  try {
    renderNavigation((tab) => {
-      if (tab === '대시보드') {
-        renderDashboard(mainContent);
-      } else {
-        renderSWTable(mainContent);
-      }
+      refreshView();
    });

-    initHwModal(() => saveAllDataToDB(), closeAllModals);
-    initSwModal(() => saveAllDataToDB(), closeAllModals);
+    initHwModal(() => refreshAllData(), closeAllModals);
+    initSwModal(() => refreshAllData(), closeAllModals);
    initSwUserModal(() => { 
-      saveSwUsersToDB().then(() => {
        loadMasterDataFromDB().then(() => refreshView());
-      });
    }, closeAllModals);
-    initDomainModal(() => saveAllDataToDB(), closeAllModals);
+    initDomainModal(() => refreshAllData(), closeAllModals);
+    initPartsMasterModal(() => refreshAllData(), closeAllModals);
+    initJobSpecModal(() => refreshAllData(), closeAllModals);
+    initUserModal(() => refreshAllData(), closeAllModals);
    
    initDashboardDetailModal();
    initGuide();
@@ -96,6 +86,7 @@ function initApp() {
    loadMasterDataFromDB().then((success) => {
      if (success) {
        refreshView();
+        initRoleSwitcher(); // [추가] 역할 전환 토글 초기화
      }
    });
  } catch (e) { console.error('❌ Initialization failed:', e); }
@@ -112,23 +103,35 @@ function initApp() {
      const cat = state.activeCategory;
      const newId = Math.random().toString(36).substring(2, 9);
      
-      if (cat === 'users') {
-          // 사용자 추가는 renderUserList 내부에서 별도로 처리하거나 여기서 호출 가능
-          // 현재 renderUserList에서 별도로 핸들링하고 있으므로 중복 실행 방지
-          return;
-      }
-
      if (cat === 'hw') {
-        openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        if (tab === '부품 마스터') {
+          if (activePartsMasterSubTab === 'job-spec') {
+            openJobSpecModal({ id: '' } as any, 'add');
+          } else {
+            openPartsMasterModal({ id: '' } as any, 'add');
+          }
+        } else {
+          openHwModal({ id: newId, asset_code: '', category: tab } as any, 'add');
+        }
      } else if (cat === 'sw') {
        const swType = tab === '외부SW' ? '외부SW' : (tab === '내부SW' ? '내부SW' : '외부SW');
        openSwModal({ id: newId, asset_type: swType } as any, 'add');
      } else if (cat === 'ops') {
        if (tab === '도메인') openDomainModal(null);
+        else if (tab === '사용자') openUserModal({ id: '' }, 'add');
      }
      return;
    }

+    // 부품 마스터 탭으로 바로가기 연동
+    if (target.closest('#btn-goto-parts-master')) {
+      state.activeCategory = 'hw';
+      state.activeSubTab = '부품 마스터';
+      renderNavigation((tab) => { refreshView(); });
+      refreshView();
+      return;
+    }
+
    // PC 이동/반납 모달 열기
    if (target.closest('#btn-pc-flow')) {
      pcFlowModal.open();
@@ -153,7 +156,6 @@ function initRoleSwitcher() {
  if (!checkbox || !userLabel || !adminLabel) return;

  checkbox.addEventListener('change', () => {
-    const mainContent = document.getElementById('main-content')!;
    if (checkbox.checked) {
      state.currentUserRole = 'admin';
      userLabel.classList.remove('active');
@@ -163,14 +165,6 @@ function initRoleSwitcher() {
      // 관리자 모드 전환 시 대시보드로 이동
      state.activeCategory = 'hw';
      state.activeSubTab = '대시보드';
-      refreshView();
-      renderNavigation((tab) => {
-        if (tab === '대시보드') {
-          renderDashboard(mainContent);
-        } else {
-          renderSWTable(mainContent);
-        }
-      });
    } else {
      state.currentUserRole = 'user';
      adminLabel.classList.remove('active');
@@ -180,79 +174,32 @@ function initRoleSwitcher() {
      // 실무자 모드 전환 시 서버 목록으로 이동
      state.activeCategory = 'hw';
      state.activeSubTab = '서버';
-      refreshView();
-      renderNavigation((tab) => {
-        if (tab === '대시보드') {
-          renderDashboard(mainContent);
-        } else {
-          renderSWTable(mainContent);
-        }
-      });
    }
+    // 모든 렌더링을 refreshView 하나로 통합하여 규격 유지
+    renderNavigation(() => refreshView());
+    refreshView();
  });
 }

 /**
- * 로그인 처리 로직
+ * 앱 초기화 (로그인 과정 없이 즉시 시작)
 */
-function handleLogin() {
+function initializeAppDirectly() {
  const loginContainer = document.getElementById('login-container');
  const appLayout = document.getElementById('app-layout');
-  const roleCards = document.querySelectorAll('.role-card');
-  const userLabel = document.querySelector('.role-label.user');
-  const adminLabel = document.querySelector('.role-label.admin');

-  if (!loginContainer || !appLayout || roleCards.length === 0) return;
+  // 기본 권한 설정: 실무자 (User)
+  state.currentUserRole = 'user';
+  state.activeCategory = 'hw';
+  state.activeSubTab = '서버'; // 실무자 기본 탭

-  roleCards.forEach(card => {
-    card.addEventListener('click', () => {
-      const role = card.getAttribute('data-role');
-      const checkbox = document.getElementById('role-toggle-checkbox') as HTMLInputElement;
-      
-      if (role === 'admin') {
-        console.log('🔓 Entering as Admin');
-        
-        state.currentUserRole = 'admin';
-        state.activeCategory = 'hw';
-        state.activeSubTab = '대시보드'; // 관리자는 대시보드로 진입
-        
-        if (checkbox) checkbox.checked = true;
-        if (userLabel) userLabel.classList.remove('active');
-        if (adminLabel) adminLabel.classList.add('active');
-        document.body.classList.add('admin-mode');
-      } else if (role === 'user') {
-        console.log('🔓 Entering as Practitioner');
-        
-        state.currentUserRole = 'user';
-        state.activeCategory = 'hw';
-        state.activeSubTab = '서버'; // 실무자는 서버 목록으로 진입
-        
-        if (checkbox) checkbox.checked = false;
-        if (userLabel) userLabel.classList.add('active');
-        if (adminLabel) adminLabel.classList.remove('active');
-        document.body.classList.remove('admin-mode');
-      } else {
-        return;
-      }
+  // 화면 전환
+  if (loginContainer) loginContainer.style.display = 'none';
+  if (appLayout) appLayout.style.display = 'flex';

-      // UI 전환
-      loginContainer.style.display = 'none';
-      appLayout.style.display = 'flex';
-      
-      // 역할 스위처 및 앱 초기화 시작
-      initRoleSwitcher();
-      initApp();
-      
-      // 로고 클릭 시 초기화면 복귀 로직 (한 번만 등록)
-      const brand = document.querySelector('.brand') as HTMLElement;
-      if (brand) {
-        brand.style.cursor = 'pointer';
-        brand.onclick = () => {
-          location.reload(); // 즉시 초기화면으로 복귀
-        };
-      }
-    });
-  });
+  // 앱 초기화 및 내비게이션(헤더 포함) 렌더링
+  initApp();
+  renderNavigation((tab) => refreshView(tab));
 }

-document.addEventListener('DOMContentLoaded', handleLogin);
+document.addEventListener('DOMContentLoaded', initializeAppDirectly);
--- a/src/map-editor-main.ts
+++ b/src/map-editor-main.ts
@@ -1,5 +1,5 @@
 import './styles/common.css';
-import './styles/map-editor.css';
+import './views/map-editor.css';
 import { MapEditor } from './views/MapEditor';

 document.addEventListener('DOMContentLoaded', () => {
--- a/src/server_data.json
+++ b/src/server_data.json
@@ -1,13 +0,0 @@
-[
-  {
-    "법인": "(주)회사1",
-    "자산코드": "ASSET-100",
-    "명칭": "서버 모델A",
-    "위치": "본사 1층",
-    "관리자": "관리자A",
-    "IP주소": "192.168.0.1",
-    "MACaddress": "00:00:00:00:00:01",
-    "HW사양": "Core i7, 16GB RAM",
-    "OS": "Windows 10"
-  }
-]
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -1,51 +1,48 @@
 :root {
-  /* --- System Colors --- */
-  --color-red: #F21D0D;
-  --color-pink: #E8175E;
-  --color-magenta: #B92ED1;
-  --color-purple: #6D3DC2;
-  --color-navy: #4255bd;
-  --color-blue: #0D8DF2;
-  --color-cyan: #03AEFC;
-  --color-green: #4DB251;
-  --color-yellow: #FFBF00;
-  --color-orange: #FF9800;
-  --color-dahong: #FF3D00;
-  --color-brown: #A0705F;
-  --color-iron: #7F7F7F;
-  --color-steel: #688897;
+  /* --- Vercel Stark Palette --- */
+  --primary: #171717;
+  --on-primary: #ffffff;
+  --body: #4d4d4d;
+  --mute: #71717a;
+  --hairline: #ebebeb;
+  --hairline-strong: #a1a1a1;
+  --canvas: #ffffff;
+  --canvas-soft: #fafafa;
+  --canvas-soft-2: #f5f5f5;
+  
+  /* --- Brand Accents --- */
+  --color-blue: #0070f3;
+  --color-cyan: #50e3c2;
+  --color-pink: #ff0080;
+  --color-violet: #7928ca;
+  --color-orange: #f5a623;

-  /* --- Primary Brand Levels --- */
-  --primary-lv-0: #E9EEED;
-  --primary-lv-1: #D2DCDB;
-  --primary-lv-2: #A5B9B6;
-  --primary-lv-3: #789792;
-  --primary-lv-4: #4B746D;
-  --primary-lv-5: #35635C;
-  --primary-lv-6: #1E5149;
-  --primary-lv-7: #1B443D;
-  --primary-lv-8: #193833;
-  --primary-lv-9: #162A27;
-
-  /* --- Semantic Colors --- */
-  --primary-color: var(--primary-lv-6);
-  --primary-hover: var(--primary-lv-5);
-  --primary-light: var(--primary-lv-0);
-
-  --edit-mode-color: var(--color-dahong);
-  --edit-mode-light: rgba(255, 61, 0, 0.1);
-  --edit-mode-focus: rgba(255, 61, 0, 0.3);
-  --edit-mode-dark: #cc3100;
-
-  --text-main: #111827;
-  --text-muted: #6B7280;
-  --border-color: #E5E7EB;
-  --bg-color: #F9FAFB;
-  --bg-light: #FAFAFA;
+  /* --- Semantic Alignment --- */
+  --primary-color: var(--primary);
+  --primary-hover: #000000;
+  --primary-light: var(--canvas-soft-2);
+  --text-main: var(--primary);
+  --text-muted: var(--body);
+  --border-color: var(--hairline);
+  --bg-color: var(--canvas-soft);
+  --bg-light: var(--canvas-soft-2);
  --white: #FFFFFF;
-  --danger: var(--color-red);
-  --success: var(--color-green);
-  --header-height: 52px;
+  --danger: #ee0000;
+  --success: #0070f3;
+  --header-height: 64px;
+
+  /* --- Global Typography Scale (No Upper Limit) --- */
+  --fs-xs: max(10px, 1vmin + 0.1vw);
+  --fs-sm: max(12px, 1.2vmin + 0.2vw);
+  --fs-base: max(13px, 1.4vmin + 0.2vw);
+  --fs-md: max(16px, 2vmin + 0.3vw);
+  --fs-lg: max(20px, 3vmin + 0.4vw);
+  --fs-xl: max(28px, 5vmin + 0.6vw);
+
+  /* --- Layout Units --- */
+  --header-height: 64px;
+  --spacing-base: 1.5rem;
+  --radius-base: 8px;
 }

 * {
@@ -56,12 +53,26 @@
 }

 body {
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
+  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-color);
  line-height: 1.5;
-  font-size: 19px;
+  font-size: var(--fs-base);
+  height: 100vh;
+  width: 100vw;
  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+input, textarea {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
 }

 .app-layout {
@@ -69,67 +80,52 @@ body {
  flex-direction: column;
  height: 100vh;
  width: 100%;
+  overflow: hidden;
 }

 /* --- Header --- */
 .main-header {
-  background-color: var(--white);
+  background-color: var(--canvas);
  border-bottom: 1px solid var(--border-color);
  z-index: 100;
  height: var(--header-height);
  flex-shrink: 0;
-}
-
-.header-container {
-  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
-  gap: 1.5rem;
+}
+
+.header-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }

 .brand { display: flex; align-items: center; gap: 0.75rem; }
-.main-logo { height: 34px; width: auto; }
-.brand h1 { font-size: 1.1rem; font-weight: 800; color: var(--text-main); white-space: nowrap; }
-.brand h1 .sub-title { font-size: 0.85rem; color: var(--primary-color); font-weight: 600; margin-left: 0.25rem; }
+.main-logo { height: clamp(28px, 4vmin, 40px); width: auto; }
+.brand h1 { font-size: clamp(0.85rem, 1.4vmin, 1.05rem); font-weight: 600; color: var(--text-main); }

-.integrated-nav { flex: 1; height: 100%; display: flex; align-items: center; gap: 0.25rem; overflow: hidden; }
-.nav-group { display: flex; align-items: center; height: 100%; position: relative; flex-shrink: 0; }
-.gnb-trigger { font-size: 14px; font-weight: 700; color: var(--text-muted); padding: 0 0.75rem; cursor: pointer; height: 100%; display: flex; align-items: center; white-space: nowrap; transition: color 0.2s; }
-.nav-group.active .gnb-trigger, .nav-group:hover .gnb-trigger { color: var(--text-main); }
-.lnb-shelf { display: none; align-items: center; gap: 0.2rem; padding: 0 0.5rem; height: 60%; border-left: 1px solid var(--border-color); margin-left: 0.2rem; }
-
-/* 기본적으로 활성 탭의 서브메뉴 표시 */
-.nav-group.active.is-showing-shelf .lnb-shelf { display: flex; }
-
-/* GNB 전체 영역에 마우스가 올라가면 활성 탭의 서브메뉴를 일단 숨김 (다른 메뉴 탐색 우선) */
-.integrated-nav:hover .nav-group.active.is-showing-shelf .lnb-shelf { display: none; }
-
-/* 마우스가 올라간 메뉴의 서브메뉴만 표시 */
-.nav-group:hover .lnb-shelf { display: flex !important; }
-
-.lnb-item { font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; padding: 0.2rem 0.6rem; border-radius: 4px; white-space: nowrap; transition: all 0.2s; }
-.lnb-item:hover { color: var(--primary-color); background-color: var(--primary-light); }
-.lnb-item.active { color: var(--primary-color); background-color: var(--primary-light); font-weight: 700; }
-
-.header-actions { display: flex; align-items: center; gap: 1rem; }
-.role-switcher { display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-right: 1px solid var(--border-color); height: 24px; }
-.role-label { font-size: 11px; font-weight: 700; color: var(--text-muted); }
-.role-label.active { color: var(--primary-color); }
-.switch { position: relative; display: inline-block; width: 34px; height: 18px; }
-.switch input { opacity: 0; width: 0; height: 0; }
-.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
-.slider:before { position: absolute; content: ""; height: 12px; width: 12px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
-input:checked + .slider { background-color: var(--color-orange); }
-input:checked + .slider:before { transform: translateX(16px); }
+.integrated-nav { flex: 1; display: flex; align-items: center; margin-left: 2rem; gap: 0.5rem; }
+.gnb-trigger { 
+  font-size: var(--fs-xs); 
+  font-weight: 500; 
+  color: var(--text-muted); 
+  padding: 0.4rem 0.75rem; 
+  cursor: pointer; 
+  border-radius: 9999px; 
+  transition: all 0.2s; 
+}
+.gnb-trigger:hover { color: var(--text-main); background: var(--canvas-soft-2); }
+.gnb-trigger.active { color: var(--text-main); font-weight: 600; background: var(--canvas-soft-2); }

 /* --- Layout Content --- */
 .content-area {
  flex: 1;
-  padding: 1.25rem 2rem 0;
-  overflow: hidden;
+  padding: 0;
  display: flex;
  flex-direction: column;
+  overflow: hidden;
 }

 .view-container {
@@ -142,133 +138,505 @@ input:checked + .slider:before { transform: translateX(16px); }

 .view-content-wrapper {
  flex: 1;
-  overflow-y: auto;
-  padding-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
 }

-/* --- View Toggle --- */
-.view-toggle-container { margin-bottom: 1rem; display: flex; justify-content: flex-start; }
-.view-toggle { display: inline-flex; background-color: var(--primary-lv-0); padding: 4px; border-radius: 8px; border: 1px solid var(--border-color); }
-.toggle-btn { padding: 6px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: none; border: none; border-radius: 6px; cursor: pointer; }
-.toggle-btn.active { background-color: var(--white); color: var(--primary-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
+/* --- View Toggle (Vercel Tab Style) --- */
+.view-toggle {
+  display: inline-flex;
+  background: var(--canvas-soft-2);
+  padding: 0.2rem;
+  border: 1px solid var(--hairline);
+  gap: 0.1rem;
+  border-radius: var(--radius-base);
+}

-/* --- System Status List (Docker Style) --- */
-.system-status-list { display: flex; flex-direction: column; gap: 0.5rem; }
-.system-list-header { display: flex; align-items: center; padding: 0.75rem 1.25rem; background-color: var(--bg-light); border-bottom: 1px solid var(--border-color); font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
-.system-row { display: flex; align-items: center; padding: 1rem 1.25rem; background-color: var(--white); border: 1px solid var(--border-color); border-radius: 6px; transition: all 0.2s; }
-.system-row:hover { border-color: var(--primary-lv-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
-.col-status { width: 100px; display: flex; align-items: center; gap: 0.5rem; }
-.col-info { flex: 1.5; }
-.col-network { flex: 1; }
-.col-remote { flex: 1; display: flex; align-items: center; gap: 0.5rem; }
-.col-traffic { flex: 1.2; }
-.col-actions { width: 120px; display: flex; justify-content: flex-end; }
-.status-dot { width: 10px; height: 10px; border-radius: 50%; }
-.status-dot.online { background-color: var(--success); box-shadow: 0 0 6px var(--success); }
-.status-text { font-size: 11px; font-weight: 600; color: var(--success); }
-.asset-primary { font-weight: 700; font-size: 14px; }
-.asset-secondary { font-size: 12px; color: var(--text-muted); }
-.ip-address { font-weight: 600; font-family: monospace; color: var(--primary-color); }
-.traffic-mini-chart { display: flex; flex-direction: column; gap: 4px; }
-.traffic-info { display: flex; justify-content: space-between; font-size: 11px; }
-.progress-bg { height: 4px; background: var(--primary-lv-0); border-radius: 2px; overflow: hidden; }
-.progress-fill { height: 100%; background: var(--primary-color); }
-.icon-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; }
-.icon-btn:hover { background-color: var(--primary-light); border-color: var(--primary-color); color: var(--primary-color); }
+.toggle-btn {
+  padding: 0.35rem 1rem;
+  border: none;
+  background: transparent;
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.1s;
+  border-radius: calc(var(--radius-base) - 2px);
+}

-/* --- Footer --- */
-.main-footer {
-  height: 28px;
-  background-color: var(--white);
-  border-top: 1px solid var(--border-color);
+.toggle-btn:hover { color: var(--text-main); }
+.toggle-btn.active {
+  background: var(--canvas);
+  color: var(--text-main);
+  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+  font-weight: 600;
+}
+
+/* --- Role Toggle Switch --- */
+.role-toggle-wrapper {
  display: flex;
  align-items: center;
-  justify-content: flex-end;
-  padding: 0 1.5rem;
-  flex-shrink: 0;
+  gap: 0.75rem;
+  background: var(--canvas-soft-2);
+  padding: 0.35rem 0.75rem;
+  border-radius: 9999px;
+  border: 1px solid var(--hairline);
 }

-.main-footer p {
-  font-family: 'Pretendard Variable', Pretendard, sans-serif;
-  font-size: 0.75rem;
-  font-weight: 300;
-  line-height: 1.25rem;
-  letter-spacing: -0.0175rem;
-  color: #777777;
-  user-select: none;
-  pointer-events: all;
-  -webkit-user-drag: none;
-  margin: 0;
-  padding: 0;
+.role-label {
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  color: var(--mute);
+  transition: all 0.2s;
+}
+
+.role-label.active {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.role-toggle {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 20px;
+}
+
+.role-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.role-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--hairline-strong);
+  transition: .4s;
+  border-radius: 20px;
+}
+
+.role-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  transition: .4s;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+}
+
+input:checked + .role-slider {
+  background-color: var(--primary);
+}
+
+input:checked + .role-slider:before {
+  transform: translateX(20px);
+}
+
+/* --- Utility Styles (The Standard) --- */
+.btn { 
+  display: inline-flex; 
+  align-items: center; 
+  justify-content: center; 
+  gap: 0.4rem; 
+  padding: 0 1.25rem; 
+  font-size: var(--fs-xs); 
+  font-weight: 500; 
+  border-radius: 9999px; 
+  cursor: pointer; 
+  height: clamp(32px, 4.5vmin, 44px); 
+  transition: all 0.2s;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.btn-primary { background-color: var(--primary); color: var(--on-primary); }
+.btn-primary:hover { background-color: #000; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+
+.btn-outline { background-color: var(--canvas); color: var(--text-main); border: 1px solid var(--hairline); }
+.btn-outline:hover { border-color: var(--hairline-strong); background: var(--canvas-soft); }
+
+.btn-sm { height: clamp(28px, 3.5vmin, 36px); padding: 0 1rem; font-size: var(--fs-xs); }
+.btn-danger { color: var(--danger) !important; border-color: var(--danger) !important; }
+
+/* --- Form Elements --- */
+.form-select-sm {
+  height: clamp(28px, 3.5vmin, 36px);
+  padding: 0 0.5rem;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  font-size: var(--fs-xs);
+  outline: none;
+  background-color: var(--canvas);
+  color: var(--primary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.form-select-sm:focus {
+  border-color: var(--primary);
+}
+
+.badge { 
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px; 
+  border-radius: 9999px; 
+  font-size: var(--fs-xs); 
+  font-weight: 600; 
+}
+.badge-primary { background-color: var(--primary); color: var(--on-primary); }
+.badge.b-green   { background-color: #e6f4ea; color: #137333; } /* 운영/중급 */
+.badge.b-yellow  { background-color: #fffbeb; color: #b45309; } /* 재고/보급 */
+.badge.b-purple  { background-color: #f3e8ff; color: #6b21a8; } /* 수리/최상급 */
+.badge.b-primary { background-color: #e0e7ff; color: #3730a3; } /* GNB/상급 */
+.badge.badge-danger { background-color: #fce8e6; color: #c5221f; } /* 폐기/교체대상 */
+.badge.badge-muted  { background-color: #f1f3f4; color: #5f6368; } /* 폐기 */
+.badge.badge-light  { background-color: var(--canvas-soft-2); color: var(--mute); border: 1px solid var(--hairline); } /* 재고기본 */
+
+/* --- Form Elements Extra --- */
+.input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-with-icon input {
+  padding-left: 2.5rem !important;
+}
+
+.input-with-icon i, 
+.input-with-icon .icon-sm {
+  position: absolute;
+  left: 12px;
+  width: 16px;
+  height: 16px;
+  color: var(--mute);
+  pointer-events: none;
+}
+
+.autocomplete-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 250px;
+  overflow-y: auto;
+  background: var(--canvas);
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
+  z-index: 1100;
+  margin-top: 4px;
+}
+
+.autocomplete-item {
+  padding: 10px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--hairline-soft, #f5f5f5);
+  transition: background 0.1s;
+}
+
+.autocomplete-item:hover {
+  background: var(--canvas-soft-2);
+}
+
+.autocomplete-item-empty {
+  padding: 1rem;
+  color: var(--mute);
+  font-size: var(--fs-xs);
+  text-align: center;
+}
+
+.suggestion-name {
+  font-weight: 600;
+  font-size: var(--fs-xs);
+  color: var(--primary);
+  margin-bottom: 2px;
+}
+
+.suggestion-meta {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  display: flex;
+  gap: 8px;
+}
+
+/* --- Summary & Selection Cards --- */
+.summary-info-card {
+  padding: 1.25rem;
+  background: var(--canvas-soft);
+  border: 1px solid var(--hairline);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.user-pc-selection-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-height: 250px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.user-pc-item {
+  padding: 12px;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  cursor: pointer;
+  background: var(--canvas);
+  transition: all 0.2s;
+}
+
+.user-pc-item:hover {
+  border-color: var(--hairline-strong);
+  background: var(--canvas-soft);
+}
+
+.user-pc-item.selected {
+  border-color: var(--primary);
+  background: var(--primary-light);
+}
+
+.pc-item-code {
+  font-weight: 700;
+  font-size: var(--fs-xs);
+  color: var(--primary);
+}
+
+.pc-item-meta {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  margin-top: 2px;
+}
+
+.empty-list-message {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  padding: 1rem 0;
+  text-align: center;
+}
+
+/* --- Global Utilities --- */
+.hidden { display: none !important; }
+.clickable { cursor: pointer; transition: opacity 0.2s; }
+.clickable:hover { opacity: 0.8; }
+
+/* Flexbox & Grid Utilities */
+.flex { display: flex; }
+.flex-col { display: flex; flex-direction: column; }
+.flex-row { display: flex; flex-direction: row; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-y-3 { row-gap: 0.75rem; }
+.gap-x-4 { column-gap: 1rem; }
+.mb-0 { margin-bottom: 0 !important; }
+.mb-4 { margin-bottom: 1rem !important; }
+.mb-6 { margin-bottom: 1.5rem !important; }
+.pb-4 { padding-bottom: 1rem !important; }
+.p-4 { padding: 1rem !important; }
+.p-2 { padding: 0.5rem !important; }
+.p-8 { padding: 2rem !important; }
+.ml-auto { margin-left: auto !important; }
+.self-end { align-self: flex-end !important; }
+.font-medium { font-weight: 500; }
+.text-muted { color: var(--mute) !important; }
+.mt-12 { margin-top: 3rem !important; }
+.icon-sm { width: 16px; height: 16px; }
+.h-90vh { height: 90vh !important; }
+.pt-0 { padding-top: 0 !important; }
+.font-semibold { font-weight: 600; }
+
+
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+
+/* Text Utilities */
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.font-bold { font-weight: 700; }
+.bg-primary-light { background-color: var(--primary-light) !important; }
+.text-success { color: var(--success) !important; }
+.text-danger { color: var(--danger) !important; }
+.text-blue { color: var(--color-blue) !important; }
+.text-orange { color: var(--color-orange) !important; }
+/* --- Unified Search & Filter Bar --- */
+.search-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-base);
+  padding: 1.25rem var(--spacing-base);
+  border-bottom: 1px solid var(--hairline);
+  align-items: flex-end; 
+  background: var(--canvas);
  box-sizing: border-box;
 }

-.hidden {
-  display: none !important;
+.search-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: flex-end;
 }

-.text-nowrap {
+.search-item.flex-1 {
+  flex: 1;
+  min-width: 300px;
+}
+
+.search-item label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.search-item input, 
+.search-item select {
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.75rem;
+  border: 1px solid var(--hairline);
+  border-radius: 6px;
+  font-size: var(--fs-sm);
+  outline: none;
+  background-color: var(--canvas);
+  color: var(--primary);
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.search-item select {
+  cursor: pointer;
+  min-width: 120px;
+}
+
+.search-item input:focus, 
+.search-item select:focus {
+  border-color: var(--primary);
+}
+
+.header-action-group {
+  margin-left: auto;
+  align-self: flex-end;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-view-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-weight: 600;
+  color: var(--primary);
+  height: clamp(34px, 4.5vmin, 44px);
+  padding: 0 0.5rem;
+  font-size: var(--fs-sm);
+  user-select: none;
+}
+
+.list-view-toggle-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.map-pagination-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-left: 0.5rem;
+  padding-left: 1rem;
+  border-left: 1px solid var(--hairline);
+  height: clamp(34px, 4.5vmin, 44px);
+}
+
+.page-info {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
  white-space: nowrap;
 }

-/* --- Utility Styles --- */
-.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0 0.8rem; font-size: 12px; font-weight: 600; border-radius: 4px; cursor: pointer; height: 28px; }
-.btn-primary { background-color: var(--primary-color); color: var(--white); border: none; }
-.btn-outline { background-color: transparent; color: var(--text-muted); border: 1px solid var(--border-color); }

-.badge {
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-size: 16px;
-  font-weight: 700;
-  white-space: nowrap;
+/* --- Modal & View Header Layouts --- */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }

-.badge-primary {
-  background-color: var(--primary-color);
-  color: white;
+/* --- Asset Identity & Header Styling (Global) --- */
+.header-identity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  flex-wrap: wrap;
 }

-.badge-muted {
-  background-color: #9CA3AF;
-  color: white;
+.asset-code-title {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.02em;
+  line-height: 1;
 }

-.badge-light {
-  background: var(--bg-color);
-  color: var(--text-muted);
-  border: 1px solid var(--border-color);
+.service-type-badge {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--on-primary);
+  background: var(--primary);
+  padding: 4px 8px;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  line-height: 1;
 }

-.text-tag {
-  color: var(--text-muted);
-  font-size: 16px;
-  padding: 1px 5px;
-  border: 1px solid var(--border-color);
-  border-radius: 3px;
-  background-color: var(--bg-light);
+.asset-type-label {
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--mute);
+  line-height: 1;
 }

-.font-bold {
-  font-weight: 700;
+.main-footer {
+  border-top: 1px solid var(--border-color);
+  background-color: var(--canvas);
+  color: var(--mute);
+  padding: 1rem 2rem;
+  text-align: right;
+  font-size: var(--fs-xs);
+  flex-shrink: 0;
+  z-index: 10;
 }

-/* --- Responsive Design (Tablet & Mobile) --- */
-@media (max-width: 1200px) {
-  .header-container { gap: 0.75rem; padding: 0 1rem; }
-  .brand h1 { font-size: 1rem; }
-  .brand h1 .sub-title { font-size: 0.75rem; }
+.main-footer p {
+  margin: 0;
+  letter-spacing: -0.02em;
 }

-@media (max-width: 992px) {
-  .main-header { height: auto; padding: 0.5rem 0; }
-  .header-container { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
-  .integrated-nav { width: 100%; justify-content: flex-start; border-top: 1px solid var(--border-color); padding-top: 0.5rem; }
-  .header-actions { width: 100%; justify-content: flex-end; padding-top: 0.5rem; }
-  .content-area { padding: 0 1rem; }
-}
-
-@media (max-width: 768px) {
-  .brand h1 .sub-title { display: none; }
-  .header-actions .btn span { display: none; }
-}
--- a/src/styles/dashboard.css
+++ b/src/styles/dashboard.css
@@ -1,200 +0,0 @@
-/* --- Premium Executive Dashboard View Specific Styles --- */
-.dashboard-section-title {
-  padding: 0 0 1rem 0;
-  font-size: 1.55rem;
-  font-weight: 800;
-  color: var(--text-main);
-  letter-spacing: -0.02em;
-}
-
-.dashboard-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-/* Premium Glassmorphism Card Style */
-.dashboard-card, .stat-card {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
-  border-radius: 12px;
-  padding: 1.5rem;
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-.dashboard-card:hover, .stat-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.12);
-}
-
-.dashboard-layout-2col {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-}
-
-.dashboard-layout-3col {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.5rem;
-}
-
-.dashboard-card {
-  min-height: 380px;
-}
-
-.dashboard-card canvas {
-  flex: 1;
-  width: 100% !important;
-  max-height: 280px;
-}
-
-/* Premium KPI Value Styling */
-.stat-value {
-  font-size: 2.2rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, #1E5149 0%, #3B82F6 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  margin-top: 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.stat-value-danger {
-  background: linear-gradient(135deg, #E11D48 0%, #F59E0B 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.stat-label {
-  font-size: 1.15rem;
-  color: var(--text-muted);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.stat-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 1rem;
-}
-
-.icon-blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
-.icon-green { background: rgba(30, 81, 73, 0.1); color: #1E5149; }
-.icon-red { background: rgba(225, 29, 72, 0.1); color: #E11D48; }
-.icon-yellow { background: rgba(245, 158, 11, 0.1); color: #F59E0B; }
-
-.table-premium {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-  overflow: hidden;
-}
-
-.table-premium table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.table-premium th {
-  background: #F8FAFC;
-  color: #475569;
-  font-weight: 700;
-  padding: 1rem;
-  text-transform: uppercase;
-  font-size: 0.75rem;
-  letter-spacing: 0.05em;
-}
-
-.table-premium td {
-  padding: 1rem;
-  border-bottom: 1px solid #E2E8F0;
-  color: #1E293B;
-  font-size: 13px;
-}
-
-.table-premium tr:hover td {
-  background: #F1F5F9;
-}
-
-/* --- Slider/Carousel Specific Styles --- */
-.dashboard-header-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-}
-
-.slider-controls {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.slider-nav-btn {
-  background: white;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-  border-radius: 50%;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  color: var(--text-main);
-  transition: all 0.2s;
-}
-
-.slider-nav-btn:hover {
-  background: var(--primary-color);
-  color: white;
-  border-color: var(--primary-color);
-}
-
-.slider-nav-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.slider-indicator {
-  font-weight: 700;
-  color: var(--text-muted);
-  font-size: 1.2rem;
-}
-
-.dashboard-slider-viewport {
-  width: 100%;
-  overflow: hidden;
-  padding: 0.5rem 0;
-}
-
-.dashboard-slider-track {
-  display: flex;
-  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
-  width: 400%; /* For 4 pages */
-}
-
-.dashboard-slide {
-  width: 25%; /* 100% / 4 pages */
-  flex-shrink: 0;
-  padding: 0 2px; /* Slight padding to avoid cutting off box-shadows */
-  height: calc(100vh - 150px);
-  min-height: 520px;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-}
--- a/src/styles/login.css
+++ b/src/styles/login.css
@@ -36,14 +36,14 @@
 }

 .login-header h2 {
-  font-size: 1.75rem;
-  font-weight: 800;
+  font-size: 2.33rem;
+  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 0.5rem;
 }

 .login-header p {
-  font-size: 0.9375rem;
+  font-size: 1.25rem;
  color: var(--text-muted);
 }

@@ -94,14 +94,14 @@
 }

 .role-card h3 {
-  font-size: 1.125rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 0.5rem;
 }

 .role-card p {
-  font-size: 0.8125rem;
+  font-size: 1.08rem;
  color: var(--text-muted);
  line-height: 1.4;
 }
@@ -109,7 +109,7 @@
 .login-footer {
  margin-top: 3rem;
  text-align: center;
-  font-size: 0.75rem;
+  font-size: 1rem;
  color: var(--text-muted);
 }

--- a/src/styles/modal.css
+++ b/src/styles/modal.css
@@ -1,693 +0,0 @@
-/* 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;
-  max-height: 90vh;
-  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;
-  display: flex;
-  flex-direction: column;
-}
-
-.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;
-  flex-shrink: 0;
-}
-
-.modal-header h2 { 
-  font-size: 1.4rem; 
-  font-weight: 600; 
-  letter-spacing: -0.02em;
-}
-
-.modal-header .btn-icon {
-  color: var(--white) !important;
-  cursor: pointer;
-  background: none !important;
-  border: none !important;
-}
-
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: var(--primary-color);
-  transition: opacity 0.2s;
-}
-
-.btn-icon:hover {
-  opacity: 0.7;
-}
-
-.modal-body { 
-  padding: 1.5rem; 
-  overflow-y: auto;
-  flex: 1;
-}
-
-.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; 
-}
-
-/* Section Title for Grouping */
-.form-section-title {
-  grid-column: span 2;
-  font-size: 1.15rem;
-  font-weight: 700;
-  color: var(--primary-color);
-  padding: 1.5rem 0 0.5rem 0; /* 패딩 조정 */
-  border-bottom: 1px solid var(--border-color);
-  margin-bottom: 0.5rem;
-  display: flex;
-  align-items: center;
-}
-
-/* Modal Readonly/Edit Mode Interaction */
-.grid-form.is-view-mode input,
-.grid-form.is-view-mode select,
-.grid-form.is-view-mode textarea {
-  border: none !important;
-  background-color: transparent !important;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  pointer-events: none !important;
-  color: var(--text-main) !important;
-  font-weight: 500 !important;
-  appearance: none !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  box-shadow: none !important;
-}
-
-.grid-form.is-view-mode input[type="file"] {
-  display: none !important;
-}
-
-.grid-form.is-view-mode .btn-helper {
-  display: none !important;
-}
-
-.grid-form.is-view-mode button:not(.btn-loc-action) {
-  pointer-events: none !important;
-  background: none !important;
-  border: none !important;
-  opacity: 0.8;
-}
-
-.grid-form.is-view-mode select::-ms-expand {
-  display: none !important;
-}
-
-.grid-form.is-edit-mode input,
-.grid-form.is-edit-mode select,
-.grid-form.is-edit-mode textarea {
-  color: var(--edit-mode-color); /* 수정 시 글자색 변경 */
-  border: 1px solid var(--border-color);
-}
-
-/* 수동 수정 불가 필드 (자산번호 등) 전용 스타일 */
-.grid-form input[readonly] {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  pointer-events: none !important;
-  color: var(--text-main) !important;
-  font-weight: 500 !important;
-  cursor: default;
-}
-
-.grid-form.is-edit-mode input:focus,
-.grid-form.is-edit-mode select:focus,
-.grid-form.is-edit-mode textarea:focus {
-  border-color: var(--edit-mode-color);
-  box-shadow: 0 0 0 2px var(--edit-mode-focus);
-}
-
-.form-section-title:first-child {
-  padding-top: 0.5rem;
-}
-
-.form-group label { 
-  font-size: 1.1rem; 
-  font-weight: 600; 
-  color: var(--text-muted);
-}
-
-.form-group input, 
-.form-group select, 
-.form-group textarea {
-  padding: 0.625rem;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  font-family: inherit; 
-  font-size: 1.15rem;
-  outline: none; 
-  transition: all 0.2s;
-  background-color: var(--white);
-}
-
-.form-group textarea {
-  resize: none;
-}
-
-.form-group input:focus, 
-.form-group select:focus, 
-.form-group textarea:focus { 
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px rgba(30, 81, 73, 0.1);
-}
-
-.modal-footer {
-  padding: 1rem 1.5rem; 
-  border-top: 1px solid var(--border-color);
-  display: flex; 
-  justify-content: space-between; 
-  align-items: center;
-  background-color: #FAFAFA;
-  flex-shrink: 0;
-}
-
-.footer-actions { 
-  display: flex; 
-  gap: 0.5rem; 
-}
-
-/* Wide Modal for History/Detail */
-.modal-content.wide {
-  max-width: 950px;
-}
-
-/* Upload Preview Specific */
-.upload-sidebar {
-  width: 240px;
-  border-right: 1px solid var(--border-color);
-  background-color: var(--bg-light);
-  padding: 1.5rem 1rem;
-  overflow-y: auto;
-  flex-shrink: 0;
-}
-
-.upload-tab-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.upload-tab-btn {
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: 500;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  transition: all 0.2s;
-  border: 1px solid transparent;
-  color: var(--text-main);
-}
-
-.upload-tab-btn:hover {
-  background-color: var(--white);
-  border-color: var(--border-color);
-}
-
-.upload-tab-btn.active {
-  background-color: var(--white);
-  color: var(--primary-color);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  border-color: var(--border-color);
-  font-weight: 700;
-}
-
-.preview-table-container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--white);
-  overflow: hidden;
-}
-
-.preview-stats-bar {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--white);
-}
-
-.preview-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: max-content;
-}
-
-.preview-table thead {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background-color: var(--bg-light);
-  box-shadow: 0 1px 0 var(--border-color);
-}
-
-.preview-table th {
-  padding: 0.75rem 1rem;
-  text-align: left;
-  font-size: 17px;
-  font-weight: 600;
-  border-bottom: 1px solid var(--border-color);
-  color: var(--text-muted);
-}
-
-.preview-table td {
-  padding: 0.75rem 1rem;
-  font-size: 18px;
-  border-bottom: 1px solid #f1f5f9;
-  color: var(--text-main);
-}
-
-.preview-table tr:hover {
-  background-color: var(--bg-light);
-}
-
-.modal-body-split {
-  display: flex;
-  gap: 2rem;
-  min-height: 480px;
-}
-
-.modal-form-area {
-  flex: 1.2;
-}
-
-.modal-history-area {
-  flex: 0.8;
-  border-left: 1px solid var(--border-color);
-  padding-left: 1.5rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.history-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.history-header h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: var(--text-main);
-}
-
-/* 읽기 전용 필드 (자산번호 등) 통일 스타일 */
-.is-readonly-field {
-  border-color: transparent !important;
-  background-color: transparent !important;
-  pointer-events: none !important;
-  color: var(--text-main) !important;
-  font-weight: 600 !important;
-  cursor: default;
-  padding-left: 0 !important;
-}
-
-/* 입력 필드 + 버튼 그룹 (자산번호 생성 등) */
-.input-with-btn {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  width: 100%;
-}
-
-.input-with-btn input {
-  flex: 1;
-  min-width: 0; /* flex 컨테이너 안에서 너비 압축 방지 */
-}
-
-.input-with-btn .btn {
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.history-timeline {
-  flex: 1;
-  overflow-y: auto;
-  max-height: 500px;
-  padding-right: 0.5rem;
-}
-
-.history-item {
-  position: relative;
-  padding-left: 1.25rem;
-  padding-bottom: 1.5rem;
-  border-left: 2px solid var(--border-color);
-}
-
-.history-item::before {
-  content: '';
-  position: absolute;
-  left: -7px;
-  top: 0;
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: var(--white);
-  border: 2px solid var(--primary-color);
-}
-
-.history-item:last-child {
-  border-left: 2px solid transparent;
-}
-
-.history-date {
-  font-size: 1.05rem;
-  color: var(--text-muted);
-  font-weight: 500;
-  margin-bottom: 0.25rem;
-}
-
-.history-user {
-  font-size: 1.05rem;
-  font-weight: 600;
-  color: var(--primary-color);
-  margin-bottom: 0.25rem;
-}
-
-.history-details {
-  font-size: 1.1rem;
-  color: var(--text-main);
-  line-height: 1.4;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.empty-history {
-  padding: 2rem 0;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 1.1rem;
-}
-
-/* Dashboard Detail Modal Table Fixed Header */
-#dashboard-detail-modal .modal-body {
-  overflow-y: auto;
-  max-height: calc(80vh - 120px);
-  padding: 0;
-}
-
-/* 모달 내부의 table-container 기존 전역 스타일 무력화 */
-#dashboard-detail-modal .table-container {
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  max-height: none;
-  overflow: visible;
-}
-
-#dashboard-detail-modal table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-#dashboard-detail-modal thead th {
-  position: sticky;
-  top: 0;
-  background-color: var(--bg-light);
-  z-index: 10;
-  border-bottom: 2px solid var(--border-color);
-  box-shadow: none;
-  padding: 0.75rem 1rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--text-main);
-  text-align: left;
-  white-space: nowrap;
-}
-
-#dashboard-detail-modal tbody td {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color);
-  font-size: 1.1rem;
-  color: var(--text-main);
-  white-space: nowrap;
-}
-
-#dashboard-detail-modal tbody tr:last-child td {
-  border-bottom: none;
-}
-
-#dashboard-detail-modal tbody tr:hover {
-  background-color: var(--bg-light);
-}
-
-/* 뱃지 스타일 (대시보드 상세 목록용) */
-#dashboard-detail-modal .badge {
-  display: inline-block;
-  padding: 0.125rem 0.5rem;
-  border-radius: 4px;
-  font-size: 1.05rem;
-  font-weight: 500;
-  line-height: 1.5;
-}
-
-#dashboard-detail-modal .badge-outline {
-  border: 1px solid var(--primary-color);
-  color: var(--primary-color);
-  background: var(--primary-light);
-}
-
-#dashboard-detail-modal .badge-sw {
-  border: 1px solid #3b82f6;
-  color: #3b82f6;
-  background: #eff6ff;
-}
-
-/* Layout Map & Image Picker Styles */
-.layout-map-container {
-  position: relative;
-  display: inline-block;
-  cursor: crosshair;
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.layout-map-container.readonly {
-  cursor: default;
-}
-
-.layout-map-container.readonly .map-seat-obj {
-  pointer-events: none;
-}
-
-.digital-overlay-layer {
-  position: absolute;
-  top: 0; left: 0; width: 100%; height: 100%;
-  pointer-events: none;
-  z-index: 8;
-}
-
-.digital-map-svg {
-  width: 100%; height: 100%;
-}
-
-.map-seat-obj {
-  fill: rgba(30, 81, 73, 0.02);
-  stroke: rgba(30, 81, 73, 0.15); /* 평상시에도 아주 연하게 보이게 수정 */
-  stroke-width: 0.2;
-  cursor: pointer;
-  pointer-events: all;
-  transition: all 0.2s;
-}
-
-.map-seat-obj:hover {
-  fill: rgba(30, 81, 73, 0.3);
-  stroke: rgba(30, 81, 73, 0.6);
-  stroke-width: 0.5;
-}
-
-.layout-map-img {
-  display: block;
-  max-width: 100%;
-  max-height: 75vh;
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-.layout-marker {
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  background-color: rgba(30, 81, 73, 0.7);
-  border: 2px solid #FFFFFF;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  z-index: 10;
-  box-shadow: 0 0 8px rgba(0,0,0,0.4);
-}
-
-.pulse-marker {
-  background-color: rgba(255, 61, 0, 0.8) !important;
-  border-color: #FFFFFF !important;
-  animation: marker-pulse 1.2s infinite;
-}
-
-@keyframes marker-pulse {
-  0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 61, 0, 0.6); }
-  70% { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 0 10px rgba(255, 61, 0, 0); }
-  100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 0 rgba(255, 61, 0, 0); }
-}
-
-.image-picker-overlay {
-  position: fixed;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: rgba(0,0,0,0.85);
-  z-index: 2500;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-}
-
-.image-picker-header {
-  width: 100%;
-  max-width: 900px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-}
-
-.image-picker-header h3 {
-  color: white;
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.image-picker-content {
-  background: white;
-  padding: 8px;
-  border-radius: 8px;
-  max-width: 95vw;
-  max-height: 80vh;
-  overflow: auto;
-  position: relative;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.picker-nav {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 40px;
-  height: 60px;
-  background: rgba(0,0,0,0.5);
-  color: white;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  cursor: pointer;
-  z-index: 100;
-  user-select: none;
-  transition: background 0.2s;
-}
-
-.picker-nav:hover { background: rgba(0,0,0,0.8); }
-.picker-nav.disabled { opacity: 0.2; cursor: not-allowed; }
-.picker-nav.prev { left: 10px; border-radius: 0 4px 4px 0; }
-.picker-nav.next { right: 10px; border-radius: 4px 0 0 4px; }
-
-.image-picker-footer {
-  margin-top: 20px;
-  display: flex;
-  gap: 12px;
-}
-
-.btn-loc-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 0 6px;
-  font-size: 10px !important;
-  font-weight: 600;
-  border-radius: 4px;
-  height: 24px;
-  min-width: 52px;
-  white-space: nowrap;
-  transition: all 0.2s;
-}
-
-.btn-loc-view {
-  background-color: var(--primary-color);
-  color: white !important;
-  border: none;
-}
-
-.btn-loc-view:hover {
-  background-color: #163d37;
-}
-
-.location-detail-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.location-detail-container select {
-  flex: 1;
-}
--- a/src/styles/table.css
+++ b/src/styles/table.css
@@ -1,232 +0,0 @@
-/* --- Page Header for Description --- */
-.page-header {
-  padding: 1rem 0 0.2rem 0;
-}
-
-.page-title-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.3rem;
-}
-
-.page-title {
-  font-size: 21px;
-  font-weight: 700;
-  color: var(--primary-color);
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-.page-title i {
-  display: flex;
-  align-items: center;
-}
-
-.page-title svg {
-  width: 18px;
-  height: 18px;
-}
-
-.page-description {
-  font-size: 17px;
-  color: var(--text-muted);
-  margin: 0;
-  line-height: 1.4;
-  opacity: 0.8;
-}
-
-/* --- Table View & Filter Styles --- */
-
-.search-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem; /* 간격 축소 및 통일 */
-  padding: 1.2rem 0;
-  border-bottom: 1px solid var(--border-color);
-  align-items: flex-end;
-  margin-bottom: 0.5rem;
-}
-
-.search-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
-
-.search-item.flex-1 {
-  flex: 1; /* 검색창이 남은 공간을 채우도록 설정 */
-  min-width: 250px;
-}
-
-.search-actions {
-  display: flex;
-  gap: 0.5rem; /* 버튼들 간의 간격 */
-  align-items: center;
-}
-
-.search-actions .btn {
-  height: 38px;
-  padding: 0 1rem;
-}
-
-.search-item label {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text-muted);
-}
-
-.search-item input, 
-.search-item select {
-  height: 38px;
-  padding: 0 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  font-size: 19px;
-  outline: none;
-  background-color: var(--white);
-}
-
-/* 셀렉트 박스 화살표 여백 절대 고정 (수정 금지) */
-.search-item select {
-  padding-right: 2.5rem !important;
-  cursor: pointer;
-}
-
-.search-item input:focus, 
-.search-item select:focus {
-  border-color: var(--primary-color);
-}
-
-/* 필터 초기화 버튼 크기 조정 (입력창 높이 38px에 맞춤) */
-.btn-reset {
-  height: 38px !important;
-  color: var(--text-muted) !important;
-  padding: 0 1.2rem !important;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 0; /* 불필요한 마진 제거 */
-}
-
-.table-container {
-  flex: 1;
-  background-color: var(--white);
-  border-top: 1px solid var(--border-color);
-  overflow: auto;
-  position: relative;
-  -webkit-overflow-scrolling: touch;
-}
-
-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  table-layout: auto;
-}
-
-th, td {
-  padding: 0.8rem 1.2rem;
-  border-bottom: 1px solid var(--border-color);
-  text-align: left; /* 기본은 좌측 정렬 */
-  white-space: nowrap;
-}
-
-thead {
-  position: sticky;
-  top: 0;
-  z-index: 50;
-}
-
-th {
-  background-color: var(--bg-light) !important;
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--text-muted);
-  position: sticky;
-  top: 0;
-  z-index: 50;
-  box-shadow: inset 0 1px 0 var(--border-color), inset 0 -1px 0 var(--border-color); /* 상하 테두리 보정 */
-  text-transform: none;
-}
-
-td {
-  font-size: 18px;
-  color: var(--text-main);
-  font-weight: 400;
-}
-
-tbody tr:hover {
-  background-color: var(--bg-color);
-}
-
-/* 정렬 클래스 강제 적용 */
-.text-center { text-align: center !important; }
-.text-right { text-align: right !important; }
-.text-left { text-align: left !important; }
-
-/* 메모 컬럼 전용: 가장 길게 표시되도록 너비 조정 및 줄바꿈 허용 */
-.col-memo {
-  width: 20%;
-  min-width: 250px;
-  white-space: normal !important;
-  word-break: break-all;
-  line-height: 1.4;
-  text-align: left !important;
-}
-
-.btn-icon {
-  padding: 0.25rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--text-muted);
-  transition: color 0.2s;
-}
-
-.btn-icon:hover {
-  color: var(--primary-color);
-}
-
-.btn-icon svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* --- Table Sorting --- */
-th.sortable {
-  cursor: pointer;
-  user-select: none;
-  transition: background-color 0.2s;
-  position: relative;
-  padding-right: 1.8rem !important; /* 아이콘 공간 확보 */
-}
-
-th.sortable:hover {
-  background-color: #F3F4F6;
-  color: var(--primary-color);
-}
-
-th.sortable::after {
-  content: '↕';
-  position: absolute;
-  right: 0.6rem;
-  top: 50%;
-  transform: translateY(-50%);
-  font-size: 11px;
-  opacity: 0.3;
-  transition: all 0.2s;
-}
-
-th.sortable.asc::after {
-  content: '▲';
-  opacity: 1;
-  color: var(--primary-color);
-}
-
-th.sortable.desc::after {
-  content: '▼';
-  opacity: 1;
-  color: var(--primary-color);
-}
--- a/src/views/Dashboard/HwDashboard.ts
+++ b/src/views/Dashboard/HwDashboard.ts
--- a/src/views/Dashboard/SwDashboard.ts
+++ b/src/views/Dashboard/SwDashboard.ts
@@ -13,13 +13,13 @@ export function renderSwDashboard(container: HTMLElement) {
  // 통합 SW 데이터
  const allSw = [...state.masterData.swExternal, ...state.masterData.swInternal];

-  allSw.forEach(sw => {
+  allSw.forEach((sw: any) => {
     const assigned = state.masterData.swUsers.filter(u => u.sw_id === sw.id).length;
     const qty = typeof sw[ASSET_SCHEMA.ASSET_COUNT.key] === 'number' ? sw[ASSET_SCHEMA.ASSET_COUNT.key] : parseInt(sw[ASSET_SCHEMA.ASSET_COUNT.key]||'0', 10);
     const priceStr = sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key] ? String(sw[ASSET_SCHEMA.PURCHASE_AMOUNT.key]).replace(/,/g, '') : '0';
     const price = parseInt(priceStr, 10) || 0;

-     if (sw.asset_type === '외부SW' || sw.type === '외부SW') {
+     if (sw.asset_type === '외부SW') {
       extQty += qty; extUsed += assigned; extTotal++;
       if (isSWExpiring(sw)) extExp++;
       if (sw[ASSET_SCHEMA.PURCHASE_DATE.key]?.startsWith('2026')) extCost2026 += price;
@@ -33,38 +33,38 @@ export function renderSwDashboard(container: HTMLElement) {
  const intPer = intQty > 0 ? Math.round((intUsed/intQty)*100) : 0;

  container.innerHTML = `
-    <div class="view-container">
+    <div class="view-container bg-soft">
      <h3 class="dashboard-section-title">소프트웨어 라이선스 현황</h3>
      
-      <div class="dashboard-layout-2col" style="margin-bottom: 1.5rem;">
-        <div class="dashboard-card" data-action="ext-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 소프트웨어 사용율</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">${extQty}카피 중 ${extUsed}개 할당</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${extPer}%</div>
-          <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
-            <div style="width: ${extPer}%; height: 100%; background-color: var(--dash-primary);"></div>
+      <div class="dashboard-layout-2col mb-6">
+        <div class="dashboard-card clickable" data-action="ext-usage">
+          <div class="stat-label">외부 소프트웨어 사용율</div>
+          <div class="stat-sub">${extQty}카피 중 ${extUsed}개 할당</div>
+          <div class="stat-value text-primary">${extPer}%</div>
+          <div class="stat-progress-bar">
+            <div class="progress-fill" style="width: ${extPer}%;"></div>
          </div>
        </div>
-        <div class="dashboard-card" data-action="int-usage" style="cursor:pointer; min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 소프트웨어 현황</span>
-          <div style="font-size: 0.8125rem; color:var(--text-muted); margin-bottom: 1rem;">등록된 내부 솔루션: ${intTotal}개</div>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">${intPer}%</div>
-           <div style="width: 100%; height: 4px; background-color: var(--border-color); border-radius: 2px; overflow: hidden; margin-top: 0.5rem;">
-            <div style="width: ${intPer}%; height: 100%; background-color: var(--dash-primary);"></div>
+        <div class="dashboard-card clickable" data-action="int-usage">
+          <div class="stat-label">내부 소프트웨어 현황</div>
+          <div class="stat-sub">등록된 내부 솔루션: ${intTotal}개</div>
+          <div class="stat-value text-primary">${intPer}%</div>
+           <div class="stat-progress-bar">
+            <div class="progress-fill" style="width: ${intPer}%;"></div>
          </div>
        </div>
      </div>

      <h3 class="dashboard-section-title">2026년 누적 도입 비용 분석</h3>
      
-      <div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:1.5rem; margin-bottom:1.5rem;">
-        <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">외부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2rem; font-weight:700; color:var(--dash-primary);">₩ ${extCost2026.toLocaleString()}</div>
+      <div class="dashboard-layout-2col">
+        <div class="dashboard-card">
+          <div class="stat-label">외부 SW 누적 비용 (2026)</div>
+          <div class="stat-value text-primary">₩ ${extCost2026.toLocaleString()}</div>
        </div>
-        <div class="dashboard-card" style="min-height:auto;">
-          <span style="font-size:1rem; font-weight:700; color:var(--text-main);">내부 SW 누적 비용 (2026)</span>
-          <div style="font-size: 2rem; font-weight:700; color:#3b82f6;">₩ ${intCost2026.toLocaleString()}</div>
+        <div class="dashboard-card">
+          <div class="stat-label">내부 SW 누적 비용 (2026)</div>
+          <div class="stat-value text-blue">₩ ${intCost2026.toLocaleString()}</div>
        </div>
      </div>
    </div>
--- a/src/views/Dashboard/dashboard.css
+++ b/src/views/Dashboard/dashboard.css
@@ -0,0 +1,505 @@
+/* --- Vercel Inspired Premium Dashboard --- */
+.dashboard-section-title {
+  padding: 0;
+  font-size: var(--fs-lg);
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.02em;
+  margin-bottom: clamp(0.5rem, 1.5vmin, 1.5rem);
+  line-height: 1;
+}
+
+/* Background Mesh Gradient for Stats Row */
+.dashboard-stats-row {
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--hairline);
+  padding: 0;
+  margin-bottom: clamp(1rem, 2vmin, 2rem);
+  background: radial-gradient(at 0% 0%, rgba(80, 227, 194, 0.05) 0px, transparent 50%), 
+              radial-gradient(at 100% 0%, rgba(121, 40, 202, 0.05) 0px, transparent 50%);
+}
+
+.stat-group-item {
+  flex: 1;
+  min-width: 250px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-base);
+  justify-content: center;
+}
+
+.stat-group-item.bordered {
+  border-left: 1px solid var(--hairline);
+}
+
+.stat-group-item .stat-label {
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.5rem;
+}
+
+.stat-group-item .stat-value {
+  font-size: var(--fs-xl);
+  font-weight: 600;
+  color: var(--primary);
+  line-height: 1;
+  display: flex;
+  align-items: baseline;
+}
+
+.stat-group-item .stat-value span {
+  font-size: var(--fs-base);
+  font-weight: 400;
+  margin-left: 6px;
+  color: var(--mute);
+}
+
+.stat-group-item .stat-sub {
+  display: flex;
+  gap: 1.5rem;
+  font-size: var(--fs-sm);
+  color: var(--body);
+  margin-top: 1rem;
+}
+
+/* --- Technical Data Alignment --- */
+.text-primary {
+  color: var(--color-blue) !important;
+}
+
+.detail-stat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+  gap: 0.5rem;
+}
+
+.stat-title {
+  font-size: var(--fs-base);
+  font-weight: 600;
+  color: var(--primary);
+  white-space: nowrap;
+}
+
+.detail-stat-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.loc-summary {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.loc-summary span {
+  font-size: var(--fs-sm);
+  color: var(--mute);
+}
+
+.loc-summary span strong {
+  color: var(--primary);
+  font-size: var(--fs-base);
+  font-weight: 600;
+}
+
+.type-summary {
+  display: flex;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+  opacity: 0.9;
+  border-top: 1px dashed var(--hairline);
+  padding-top: 8px;
+  margin-top: 4px;
+}
+
+.type-summary span {
+  cursor: help;
+  font-size: var(--fs-xs);
+  color: var(--mute);
+}
+
+.type-summary span strong {
+  color: var(--primary);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+}
+
+/* --- Enhanced Location View Layout --- */
+.location-view-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--canvas);
+  overflow: hidden;
+}
+
+.location-filter-bar {
+  /* Inherit from .search-bar in common.css */
+}
+
+.filter-group label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.location-main-content {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  background: var(--canvas);
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.map-container-section {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center; 
+  justify-content: center;
+  background: var(--canvas);
+  height: 100%;
+}
+
+.map-frame-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.map-image {
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  display: block;
+}
+
+.map-overlay {
+  position: absolute;
+  pointer-events: none;
+}
+
+.no-map-message {
+  padding: 5rem;
+  text-align: center;
+  color: var(--mute);
+  font-size: var(--fs-base);
+}
+
+.location-box-point {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+/* --- Asset Detail Sidebar --- */
+.asset-list-section {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--canvas);
+}
+
+.section-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--hairline);
+  background: var(--canvas);
+  flex-shrink: 0;
+}
+
+.mini-table-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  position: relative;
+}
+
+.sidebar-title {
+  margin: 0;
+  font-size: var(--fs-base);
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.detail-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 12px;
+}
+
+.header-identity {
+  display: flex;
+  align-items: center; /* Changed from baseline to center for perfect vertical alignment */
+  gap: 8px;
+  flex: 1;
+  flex-wrap: wrap; /* Allow wrapping on very small screens */
+}
+
+.asset-code-title {
+  font-size: var(--fs-md);
+  font-weight: 600;
+  color: var(--primary);
+  letter-spacing: -0.02em;
+  line-height: 1; /* Reset line-height to prevent baseline shifts */
+}
+
+.service-type-badge {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--on-primary);
+  background: var(--primary);
+  padding: 4px 8px; /* Adjusted padding for better vertical centering */
+  border-radius: 9999px;
+  text-transform: uppercase;
+  line-height: 1; /* Match line-height */
+}
+
+.asset-type-label {
+  font-size: var(--fs-sm);
+  font-weight: 500;
+  color: var(--mute);
+  line-height: 1; /* Match line-height */
+}
+
+.asset-detail-sidebar {
+  padding: 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.detail-section {
+  margin-bottom: 2rem;
+  padding: 0 1.5rem;
+}
+
+.detail-section-title {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  border-bottom: 1px solid var(--hairline);
+  padding-bottom: 8px;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.detail-grid-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem 1.5rem;
+}
+
+.detail-item.full-width {
+  grid-column: span 2;
+}
+
+.detail-label-sm {
+  font-size: var(--fs-xs);
+  color: var(--mute);
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+.dashboard-layout-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  padding: 0 2rem 2rem;
+}
+
+.dashboard-card {
+  background: var(--canvas);
+  border: 1px solid var(--hairline);
+  border-radius: 12px;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  transition: all 0.2s;
+}
+
+.dashboard-card.clickable:hover {
+  border-color: var(--primary);
+  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
+  transform: translateY(-2px);
+}
+
+.stat-progress-bar {
+  height: 8px;
+  background: var(--canvas-soft-2);
+  border-radius: 9999px;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: var(--primary);
+  border-radius: 9999px;
+}
+
+.dashboard-card .stat-label {
+  font-size: var(--fs-xs);
+  font-weight: 600;
+  color: var(--mute);
+  text-transform: uppercase;
+  letter-spacing: -0.02em;
+}
+
+.dashboard-card .stat-value {
+  font-size: var(--fs-xl);
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.dashboard-card .stat-sub {
+  font-size: var(--fs-sm);
+  color: var(--body);
+}
+
+.bg-soft {
+  background-color: var(--canvas-soft) !important;
+}
+
+.chart-placeholder {
+  width: 140px;
+  height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.circular-progress {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background: conic-gradient(var(--primary) calc(var(--val) * 1%), var(--hairline) 0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.circular-progress::before {
+  content: "";
+  position: absolute;
+  width: 70px;
+  height: 70px;
+  background: var(--canvas);
+  border-radius: 50%;
+}
+
+.circular-progress::after {
+  content: attr(style); /* This is a hack to get the value, but we'll use innerHTML in TS if needed */
+  position: absolute;
+  font-size: var(--fs-sm);
+  font-weight: 700;
+}
+
+.system-dashboard {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.warning-badge-orange { background-color: var(--color-orange); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
+.warning-badge { background-color: var(--danger); color: var(--white); padding: 2px 8px; border-radius: 9999px; font-size: var(--fs-xs); font-weight: 600; }
+
+.list-section {
+  flex: 1.3;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1rem 1.5rem 0 0;
+  border-right: 1px solid var(--hairline);
+}
+
+.detail-panel {
+  flex: 0.7;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1rem 0 0 1.5rem;
+  overflow: hidden;
+}
+
+.detail-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: var(--mute);
+}
+
+.detail-photo-wrapper {
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border: 1px solid var(--hairline);
+  background: #f0f0f0;
+  border-radius: 8px;
+}
+
+.no-photo-state {
+  padding: 3rem;
+  text-align: center;
+  color: var(--mute);
+}
+
+
+
+
+/* Responsive Overrides */
+@media (max-width: 1440px) {
+  .location-main-content {
+    grid-template-columns: 1.5fr 1fr;
+  }
+}
+
+@media (max-width: 1024px) {
+  .location-main-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    overflow-y: auto;
+  }
+  .map-container-section {
+    height: 400px;
+    border-right: none;
+    border-bottom: 1px solid var(--hairline);
+  }
+}
+}
--- a/src/views/DashboardView.ts
+++ b/src/views/DashboardView.ts
@@ -1,14 +1,14 @@
 import { state } from '../core/state';
 import { renderHwDashboard } from './Dashboard/HwDashboard';
 import { renderSwDashboard } from './Dashboard/SwDashboard';
+import './Dashboard/dashboard.css';

 /**
- * 대시보드 렌더링 통합 허브
+ * 대시보드 렌더링 통합 허브 (Vercel Style Normalized)
 */
 export function renderDashboard(mainContent: HTMLElement) {
  if (!mainContent) return;
-  mainContent.innerHTML = '';
-
+  
  // 기존 차트 리소스 해제
  if (state.activeCharts) {
    state.activeCharts.forEach((c: any) => {
@@ -17,11 +17,21 @@ export function renderDashboard(mainContent: HTMLElement) {
  }
  state.activeCharts = [];

+  mainContent.innerHTML = `
+    <div class="view-content-wrapper">
+      <div id="dashboard-scroll-container" class="table-container" style="padding: 0;">
+        <div id="dashboard-inner-content"></div>
+      </div>
+    </div>
+  `;
+
+  const innerContent = document.getElementById('dashboard-inner-content')!;
+
  if (state.activeCategory === 'hw') {
-    renderHwDashboard(mainContent);
+    renderHwDashboard(innerContent);
  } else if (state.activeCategory === 'sw') {
-    renderSwDashboard(mainContent);
+    renderSwDashboard(innerContent);
  } else {
-    mainContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">운영 서비스 대시보드는 준비 중입니다.</div>`;
+    innerContent.innerHTML = `<div class="dashboard-section-title" style="padding:2rem;">해당 카테고리의 대시보드는 준비 중입니다.</div>`;
  }
 }
--- a/src/views/List/ListFactory.ts
+++ b/src/views/List/ListFactory.ts
--- a/src/views/List/PartsMasterListView.ts
+++ b/src/views/List/PartsMasterListView.ts
@@ -0,0 +1,174 @@
+import { state } from '../../core/state';
+import { openPartsMasterModal } from '../../components/Modal/PartsMasterModal';
+import { openJobSpecModal } from '../../components/Modal/JobSpecModal';
+import { formatInline } from '../../core/utils';
+import { createListView } from './ListFactory';
+
+export let activePartsMasterSubTab: 'parts-master' | 'job-spec' = 'parts-master';
+
+export function renderPartsMasterList(container: HTMLElement) {
+  if (activePartsMasterSubTab === 'parts-master') {
+    createListView(container, {
+      title: '부품 마스터',
+      dataSource: () => state.masterData.partsMaster || [],
+      searchKeys: ['component_name', 'category', 'score_tier'],
+      filterOptions: {
+        keywordLabel: '부품명 / 등급 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
+      },
+      onRowClick: (component) => openPartsMasterModal(component, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: c => c.id.toString()
+        },
+        {
+          header: '분류',
+          sortKey: 'category',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            let badgeClass = 'badge-primary';
+            if (c.category === 'CPU') badgeClass = 'badge-primary';
+            else if (c.category === 'GPU') badgeClass = 'badge-success';
+            else if (c.category === 'RAM') badgeClass = 'badge-warning';
+            return `<span class="badge ${badgeClass}">${c.category}</span>`;
+          }
+        },
+        {
+          header: '부품 표준 명칭',
+          sortKey: 'component_name',
+          render: c => formatInline(c.component_name || '-')
+        },
+        {
+          header: '성능 등급',
+          sortKey: 'score_tier',
+          align: 'center',
+          width: '15%',
+          render: c => c.score_tier || '-'
+        },
+        {
+          header: '감점 점수',
+          sortKey: 'deduction',
+          align: 'center',
+          width: '15%',
+          render: c => {
+            const score = c.deduction || 0;
+            let color = '#3b82f6'; // blue
+            if (score >= 20) color = '#ef4444'; // red
+            else if (score >= 10) color = '#f59e0b'; // orange
+            return `<strong style="color: ${color}; font-size: 14px;">-${score}점</strong>`;
+          }
+        }
+      ]
+    });
+  } else {
+    createListView(container, {
+      title: '직무별 기준 사양',
+      dataSource: () => state.masterData.jobSpecs || [],
+      searchKeys: ['job_name', 'cpu_standard', 'ram_standard', 'gpu_standard', 'remarks'],
+      filterOptions: {
+        keywordLabel: '직무명 / 사양 검색',
+        showLoc: false,
+        showDept: false,
+        showType: false
+      },
+      onRowClick: (jobSpec) => openJobSpecModal(jobSpec, 'view'),
+      columns: [
+        {
+          header: 'ID',
+          sortKey: 'id',
+          align: 'center',
+          width: '5%',
+          render: j => j.id.toString()
+        },
+        {
+          header: '직무명',
+          sortKey: 'job_name',
+          width: '15%',
+          render: j => `<strong style="color: var(--primary-color); font-size: 14px;">${formatInline(j.job_name || '-')}</strong>`
+        },
+        {
+          header: '권장 CPU 사양',
+          sortKey: 'cpu_standard',
+          render: j => formatInline(j.cpu_standard || '-')
+        },
+        {
+          header: '권장 RAM 사양',
+          sortKey: 'ram_standard',
+          width: '12%',
+          render: j => formatInline(j.ram_standard || '-')
+        },
+        {
+          header: '권장 GPU 사양',
+          sortKey: 'gpu_standard',
+          render: j => formatInline(j.gpu_standard || '-')
+        },
+        {
+          header: '기준 점수',
+          sortKey: 'min_score',
+          align: 'center',
+          width: '10%',
+          render: j => `<span style="font-weight: 700;">${j.min_score || 0}점 이상</span>`
+        },
+        {
+          header: '비고',
+          sortKey: 'remarks',
+          width: '20%',
+          render: j => formatInline(j.remarks || '-')
+        }
+      ]
+    });
+  }
+
+  renderSubTabs(container);
+}
+
+function renderSubTabs(container: HTMLElement) {
+  const header = container.querySelector('.page-header');
+  if (!header) return;
+
+  // 기존에 생성된 탭 바가 있다면 제거하여 중복 방지 (스타일만 수정하는 최소 침습 방식)
+  const existingTabs = container.querySelector('.sub-tab-container');
+  if (existingTabs) existingTabs.remove();
+
+  const tabContainer = document.createElement('div');
+  tabContainer.className = 'sub-tab-container';
+  tabContainer.style.cssText = 'display: flex; gap: 1rem; padding: 0 2rem; border-bottom: 1px solid var(--hairline); background: var(--canvas);';
+
+  const tab1Active = activePartsMasterSubTab === 'parts-master';
+  const tab2Active = activePartsMasterSubTab === 'job-spec';
+
+  tabContainer.innerHTML = `
+    <button id="tab-parts-master" class="sub-tab-btn ${tab1Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab1Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab1Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
+      부품 표준 등급
+    </button>
+    <button id="tab-job-spec" class="sub-tab-btn ${tab2Active ? 'active' : ''}" style="padding: 1rem 0.5rem; border: none; background: none; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; color: ${tab2Active ? 'var(--primary)' : 'var(--mute)'}; position: relative; border-bottom: 2px solid ${tab2Active ? 'var(--primary)' : 'transparent'}; margin-bottom: -1px;">
+      직무별 기준 사양
+    </button>
+  `;
+
+  header.parentNode!.insertBefore(tabContainer, header.nextSibling);
+
+  const tabPartsMaster = tabContainer.querySelector('#tab-parts-master')!;
+  const tabJobSpec = tabContainer.querySelector('#tab-job-spec')!;
+
+  tabPartsMaster.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'parts-master') {
+      activePartsMasterSubTab = 'parts-master';
+      renderPartsMasterList(container);
+    }
+  });
+
+  tabJobSpec.addEventListener('click', () => {
+    if (activePartsMasterSubTab !== 'job-spec') {
+      activePartsMasterSubTab = 'job-spec';
+      renderPartsMasterList(container);
+    }
+  });
+}
--- a/src/views/List/PcListView.ts
+++ b/src/views/List/PcListView.ts
@@ -1,23 +1,57 @@
 import { state } from '../../core/state';
 import { openHwModal } from '../../components/Modal/HWModal';
-import { sortAssets, formatInline } from '../../core/utils';
+import { sortAssets, formatInline, calculatePcScoreDeductive, getPcGrade, isWindows11Incompatible } from '../../core/utils';
 import { ASSET_SCHEMA } from '../../core/schema';
 import { createListView } from './ListFactory';
+import { SortState } from '../../core/tableHandler';
+
+let persistentSortState: SortState = { key: 'updated_at', direction: 'desc' };

 export function renderPcList(container: HTMLElement) {
  createListView(container, {
    title: 'PC',
-    dataSource: () => sortAssets((state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC')),
+    persistentSortState,
+    dataSource: () => {
+      const list = (state.masterData.pc || []).filter((a: any) => a.asset_type !== '서버PC');
+      list.forEach((a: any) => {
+        a['_pc_score'] = calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
+      });
+      // 변경일시(updated_at) 내림차순 정렬 (최신 변경 항목이 맨 위로)
+      return list.sort((a: any, b: any) => {
+        const dateA = a.updated_at || a.created_at || '';
+        const dateB = b.updated_at || b.created_at || '';
+        if (dateA < dateB) return 1;
+        if (dateA > dateB) return -1;
+        return 0;
+      });
+    },
    searchKeys: ['CURRENT_DEPT', 'CURRENT_USER', 'MODEL_NAME', 'MAC_ADDR', 'MANAGER_MAIN', 'ASSET_TYPE'],
    filterOptions: {
      keywordLabel: `통합 검색 (${ASSET_SCHEMA.MODEL_NAME.ui}/${ASSET_SCHEMA.MANAGER_MAIN.ui}/${ASSET_SCHEMA.CURRENT_USER.ui})`,
      showLoc: true,
      showDept: true,
-      showType: true
+      showType: true,
+      showStatus: true
    },
    onRowClick: (asset) => openHwModal(asset, 'view'),
    columns: [
+      { 
+        header: ASSET_SCHEMA.HW_STATUS.ui, 
+        sortKey: ASSET_SCHEMA.HW_STATUS.key, 
+        align: 'center', 
+        width: '8%',
+        render: a => {
+          const status = a[ASSET_SCHEMA.HW_STATUS.key] || '재고';
+          let badgeClass = 'badge-light';
+          if (status === '운영') badgeClass = 'b-green';
+          else if (status === '재고') badgeClass = 'b-yellow';
+          else if (status === '수리') badgeClass = 'b-purple';
+          else if (status === '폐기') badgeClass = 'badge-muted';
+          return `<span class="badge ${badgeClass}">${status}</span>`;
+        }
+      },
      { header: ASSET_SCHEMA.CURRENT_USER.ui, sortKey: ASSET_SCHEMA.CURRENT_USER.key, align: 'center', render: a => a[ASSET_SCHEMA.CURRENT_USER.key] || '-' },
+      { header: ASSET_SCHEMA.USER_POSITION.ui, sortKey: ASSET_SCHEMA.USER_POSITION.key, align: 'center', render: a => a[ASSET_SCHEMA.USER_POSITION.key] || '-' },
      { header: ASSET_SCHEMA.ASSET_TYPE.ui, sortKey: ASSET_SCHEMA.ASSET_TYPE.key, align: 'center', width: '10%', render: a => a[ASSET_SCHEMA.ASSET_TYPE.key] || '-' },
      { header: ASSET_SCHEMA.CPU.ui, sortKey: ASSET_SCHEMA.CPU.key, align: 'center', render: a => a[ASSET_SCHEMA.CPU.key] || '' },
      { header: ASSET_SCHEMA.MAINBOARD.ui, sortKey: ASSET_SCHEMA.MAINBOARD.key, align: 'center', render: a => a[ASSET_SCHEMA.MAINBOARD.key] || '-' },
@@ -27,13 +61,35 @@ export function renderPcList(container: HTMLElement) {
        header: 'SSD', 
        align: 'center', 
        width: '8%',
-        render: a => [a[ASSET_SCHEMA.SSD1.key], a[ASSET_SCHEMA.SSD2.key]].filter(Boolean).join(' / ') || '-' 
+        render: a => {
+          try {
+            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
+            if (Array.isArray(vols)) {
+              const ssds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'SSD');
+              if (ssds.length > 0) {
+                return ssds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
+              }
+            }
+          } catch (e) {}
+          return '-';
+        }
      },
      { 
        header: 'HDD', 
        align: 'center', 
        width: '12%',
-        render: a => [a[ASSET_SCHEMA.HDD1.key], a[ASSET_SCHEMA.HDD2.key], a[ASSET_SCHEMA.HDD3.key], a[ASSET_SCHEMA.HDD4.key]].filter(Boolean).join(' / ') || '-' 
+        render: a => {
+          try {
+            const vols = a.volumes ? (typeof a.volumes === 'string' ? JSON.parse(a.volumes) : a.volumes) : [];
+            if (Array.isArray(vols)) {
+              const hdds = vols.filter((v: any) => v && String(v.type).toUpperCase() === 'HDD');
+              if (hdds.length > 0) {
+                return hdds.map((v: any) => `${v.capacity || ''}${v.unit || 'GB'}`).join(' / ');
+              }
+            }
+          } catch (e) {}
+          return '-';
+        }
      },
      { 
        header: ASSET_SCHEMA.MAC_ADDR.ui, 
@@ -41,7 +97,18 @@ export function renderPcList(container: HTMLElement) {
        align: 'center', 
        render: a => `<span style="font-family:monospace; font-size:11px;">${a[ASSET_SCHEMA.MAC_ADDR.key] || '-'}</span>` 
      },
-      { header: ASSET_SCHEMA.MEMO.ui, sortKey: ASSET_SCHEMA.MEMO.key, className: 'col-memo', width: '30%', render: a => formatInline(a[ASSET_SCHEMA.MEMO.key] || '-') }
+      {
+        header: '성능 등급',
+        sortKey: '_pc_score',
+        align: 'center',
+        width: '8%',
+        render: a => {
+          const score = a._pc_score !== undefined ? a._pc_score : calculatePcScoreDeductive(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key], a[ASSET_SCHEMA.GPU.key], a.purchase_date);
+          const isWin11Incompatible = isWindows11Incompatible(a[ASSET_SCHEMA.CPU.key], a[ASSET_SCHEMA.RAM.key]);
+          const grade = getPcGrade(score, isWin11Incompatible);
+          return `<span class="badge ${grade.class}" title="성능 점수: ${score}점">${grade.name}</span>`;
+        }
+      }
    ]
  });
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Taehoon	af578a63bc	refactor: 프로젝트 정리 및 최적화 (미사용 파일 제거, 코드 중복 제거, 정적 이미지 빌드 경로 수정) - 미사용 목업 파일(dummyData.ts, realServerData.ts, server_data.json) 및 중복 기획서 제거 - excelHandler.ts 내 미사용 대용량 엑셀 처리 함수들을 삭제하여 xlsx 의존성 제거 및 클라이언트 빌드 크기 최적화 - ListFactory.ts와 utils.ts 간에 중복으로 존재하던 calculatePcScoreDeductive 함수를 하나로 일원화 - 기획서 및 계획 문서들을 docs/plans/ 하위 폴더로 이동하여 프로젝트 루트 정리 - 정적 이미지 폴더(img/)를 public/img/로 이동하여 프로덕션 빌드 시 로고 및 장비 사진 엑박 오류 해결	2026-06-19 15:12:25 +09:00
Taehoon	e8bc42e5de	refactor: CSS 파일 모듈화 및 컴포넌트별 직접 Import 구조 전환 (방안 B) - HTML 내 CSS link 태그들을 삭제하고, 각 TS 진입점 파일에서 CSS 파일을 직접 import하도록 연동 - 스타일 파일들을 각 컴포넌트/뷰 디렉토리 옆으로 이동 배치 (Co-location) - guide.css, modal.css, dashboard.css, table.css, map-editor.css 이동 및 경로 갱신 - 디자인 시스템(common.css) 및 로그인 스타일(login.css)은 전역 배치 유지하고 main.ts에서 통합 임포트	2026-06-19 15:04:36 +09:00
Taehoon	587e92a7da	feat: 서버 탭 전환 시 뷰 모드 유지 및 대시보드/맵 에디터 스타일 표준화 - 서버 탭 복귀 시 최근 선택한 뷰 모드(목록/위치) 상태 유지 및 currentViewMode 상태 일원화 - 개인PC 대시보드 및 맵 에디터의 인라인 CSS 스타일을 공통 CSS 및 변수 클래스로 분리 및 가독성 개선 - Vite 멀티페이지 빌드 설정(vite.config.ts) 추가	2026-06-19 14:55:25 +09:00
Taehoon	c6515c1b5d	merge: 공동작업자 HW_Dashboard 브랜치 병합 (대시보드 UI 및 가독성 개선 사항 병합)	2026-06-19 13:39:29 +09:00
Taehoon	e128634e05	style: UI 가독성 개선 및 LocationView 타입 오류 수정 1. common.css의 --mute 변수 색상 대비값 강화 (#71717a) 및 누락된 자산 상태/성능 등급 배지 CSS 클래스 정의 2. ListFactory.ts에서 테이블 헤더(th) 정렬을 데이터 셀(td)과 일치시키고 장문 생략 시 툴팁(title) 추가 3. common.css에서 타이포그래피 스케일 계산식을 clamp에서 max로 변경하여 상한선 제한 해제 (와이드 화면 대응) 4. LocationView.ts 내 HardwareAsset 타입에 정의되지 않은 asset_purpose를 any로 타입 캐스팅하여 TS2339 빌드 에러 해결 5. 프로젝트 폴더 내 일회성 점검/이관 스크립트 및 Playwright 임시 캡처 로그/이미지 파일 정리	2026-06-19 13:19:25 +09:00
Taehoon	c0ef52deac	style(table): optimize for 1920x1080 without horizontal scroll - Switched to fixed table layout to ensure fit within viewport - Implemented automatic ellipsis (...) for overflowing text in all cells - Synchronized cell widths and alignment in ListFactory with column definitions - Removed restrictive min-widths that caused horizontal scrolling	2026-06-18 20:41:03 +09:00
Taehoon	aab1f91d3d	feat(map): implement robust ID-based asset mapping and fix UI rendering inconsistencies - Migrated map mapping from fuzzy coordinates to precise asset_id tracking - Updated MapEditor to allow explicit asset assignment via dropdown - Fixed LocationView rendering logic to search across all hardware categories - Standardized map indicators to always render as areas (boxes) with minimum size - Restored stable CSS max-height for detail modal photos to prevent clipping - Synced MapEditor saves directly to database via asset_id	2026-06-18 19:49:15 +09:00
JooWangi	f656f0a439	fix: 대시보드 사양 적정성 직무 매핑 수정 (system_users.position 우선 참조) - HwDashboard: asset_core.user_position 대신 system_users.user_name -> position 으로 세부 직무 조회 - ListFactory: 동일하게 세부 직무명 우선 참조 - 미니 모달 조직(직무) 컬럼: _resolved_position 사용으로 정확한 직무명 표시 - 수정된 필드명: u.name -> u.user_name (system_users 실제 컬럼명 반영) - 예) 디자이너(3D, 영상) 직군이 최상급 기준으로 올바르게 판정됨	2026-06-18 19:48:23 +09:00
Taehoon	e77c4854cb	fix: restore exact matching logic for map locations	2026-06-18 17:04:25 +09:00
JooWangi	1d32a0350b	feat: 등급별 자산 종합 현황 및 사양 적정성 분석 레이아웃 5:5 콤팩트 최적화	2026-06-18 15:56:51 +09:00
Taehoon	309c400ee2	최신코드 반영	2026-06-18 13:00:18 +09:00
Taehoon	3db05f2939	feat(ui/ux): unify typography to Pretendard and enforce read-only view mode as default - Set global font-family to Pretendard and letter-spacing to -0.02em. - Standardized table header font-size to var(--fs-sm). - Fixed table clipping and sticky header behavior at 1920x1080. - Implemented dynamic select options in search filters. - Enforced 'view' mode as default for all asset modals (PC, Server, SW, etc.). - Improved Modal logic to ensure all fields (including dynamic rows) are correctly locked. - Updated Location View detail button from 'Edit' to 'View'. - Updated design_rule.md to reflect new typography standards.	2026-06-18 11:13:16 +09:00
Taehoon	2cb4b87c0a	style: surgically unify Admin page UI and sub-tabs - Standardized sub-tab rendering in PartsMasterListView to prevent duplication - Updated badge classes to match system design guide (badge-success/warning) - Refactored JobSpecModal to use unified .grid-form and header identity - Preserved all functional logic and tab-switching behavior from collaborator	2026-06-17 13:16:15 +09:00
Taehoon	6ed2faee2d	merge: remote main updates into ux_setting with style preservation - Resolved conflicts in state.ts, HwDashboard.ts, ListFactory.ts, and PartsMasterListView.ts - Prioritized latest functional logic from main branch (Job Spec mapping, Matrix calculations) - Maintained Vercel-inspired UI styling and unified CSS classes from ux_setting branch - Synchronized PC status toggle visibility rules with latest main branch changes	2026-06-17 13:08:59 +09:00
Taehoon	89d3ac2e89	style: unify UI styling & restore dashboard logic - Restored HW/SW Dashboard full features (Chart.js, filters, tables) from main - Unified Search Bar & Filter Bar across all views (List, Location) - Integrated asset identity info into all Modal Headers - Standardized 'Remove Row' buttons as high-visibility circular circles - Centralized hardcoded inline styles into dedicated CSS files - Fixed various ReferenceErrors and layout regressions in HWModal	2026-06-17 12:29:26 +09:00
Taehoon	b37981506e	style: revert content/logic to main while preserving Vercel UI styles - Reverted HWModal to unified form structure from main branch - Restored original field positions and visibility logic in all modals - Applied Vercel-inspired CSS classes and removed legacy inline styles - Restored SwDashboard 2x2 layout from main - Cleaned up unused modular form files - Fixed TypeError related to ASSET_MFR schema key	2026-06-17 10:46:24 +09:00
JooWangi	abc531a41e	Design: 대시보드 하단 표 세로비율 확장 및 스크롤바 제거	2026-06-17 09:28:06 +09:00
JooWangi	8451101325	Style: 대시보드 UI 프리미엄 리스타일링 및 카드 구조 도입	2026-06-17 09:25:16 +09:00
JooWangi	3e69e74bc9	Feat: 통합 사양 적정성 인라인 바 그래프 및 대시보드 레이아웃 개편	2026-06-17 09:22:31 +09:00
Taehoon	73ef13f3a5	style: apply Vercel-inspired responsive UI & fluid scaling	2026-06-16 17:43:20 +09:00
Taehoon	155570e8de	style: disable global text selection to prevent accidental UI dragging	2026-06-16 14:32:16 +09:00
JooWangi	723c4723f6	feat: 개인PC 자산 관리(PC) 페이지에서 '자산 현황' 토글 탭 숨김처리 및 자산 목록으로 기본 고정	2026-06-15 15:01:46 +09:00
JooWangi	a44283281f	feat: 대시보드 미니 모달 상세 자산 목록 테이블에 등급 및 점수 컬럼 표기 기능 추가	2026-06-15 14:53:36 +09:00
JooWangi	fa87f383e2	fix: 직무별 기준 사양 대비 부족 사양(0.6배 미만) 및 오버스펙(1.5배 초과) 판정 수치 비율 임계치 조정	2026-06-15 14:51:09 +09:00
JooWangi	6118141f6e	feat: 직무별 기준 사양(job_spec_standards) 데이터를 활용한 부족사양, 오버스펙 판정 및 등급별 부족분(구매 필요) 산출 공식 연동	2026-06-15 14:43:53 +09:00
Taehoon	119c799d1d	style: 레이아웃 비율 복구 및 타이포그래피 전역 표준화 (16px Base) - 주요 변경 사항: 1. 레이아웃 안정화: 서버 위치도 뷰의 2:1 비율 복원 및 가변형(Adaptive) 레이아웃 적용 2. 타이포그래피 표준화: 전역 폰트 스케일 도입 및 기본 폰트 사이즈 상향 (15px -> 16px) 3. 3-Way 토글 통합: [자산 위치] [운영 현황] [자산 목록] 간의 전환 오류 수정 및 UI 통일 4. 하드코딩 제거: 인라인 스타일을 CSS 클래스 및 변수 체계로 전면 리팩토링 5. 가이드 업데이트: 변경된 디자인 정책을 design_rule.md에 반영	2026-06-15 14:21:54 +09:00
JooWangi	05e23883b8	feat: 직무별 기준 사양 등록 시 부품 마스터 자동완성 검색 및 성능 점수 실시간 자동 계산 기능 추가	2026-06-15 13:29:10 +09:00
JooWangi	8c406fd0b8	fix: 부품 표준 정보 서브 탭 렌더링 시 DOM 쿼리 타이밍 에러 해결 (document.getElementById -> tabContainer.querySelector)	2026-06-15 13:27:20 +09:00
JooWangi	e678f9d653	feat: 부품 마스터 화면 내 직무별 기준 사양 CRUD 및 서브 탭 연동 기능 추가	2026-06-15 13:26:11 +09:00
JooWangi	132e37d0d3	refactor: 사양 부족 및 노후 장비의 교체 수요를 해당 사용자의 직무 권장 사양 등급에 맞추어 분산 합계 계산	2026-06-15 13:19:10 +09:00
JooWangi	d6e75f8b2c	refactor: 교체 대상 PC 교체 수요를 보급 PC 신규 구매 필요 수량으로 이전 합산	2026-06-15 13:17:01 +09:00
JooWangi	c35f57acab	style: 보급 PC 라벨 단순화 및 부족분 컬럼명을 구매 필요로 변경	2026-06-15 13:14:45 +09:00
JooWangi	97cecb8b50	feat: 5등급 PC 분류 체계 도입 (교체 대상 PC 등급 신설)	2026-06-15 13:12:07 +09:00
JooWangi	a4b620099c	feat: 대시보드 폰트 크기, 패딩 조절 및 자산목록 정렬 기준 변경(updated_at 내림차순)	2026-06-15 11:22:07 +09:00
Taehoon	b169176d57	WIP(style): UI 컴포넌트 하드코딩 제거 및 CSS 통합 (진행 중) - 작업 상태: 진행 중 (Work In Progress) - 주요 변경 사항: 1. CSS 파일 통합: HWModal, SWModal, ListFactory 등에서 인라인 스타일(style 속성) 전면 제거 및 클래스 기반으로 재작성 2. 폰트/타이포그래피 스케일업: 최소 폰트 14px 기준으로 전체 텍스트 크기 상향 및 굵기(font-weight) 상향 조정 3. GNB(상단바) 레이아웃 개편: 2단 구조(로고 라인 / 메뉴 라인)로 변경 및 카테고리 텍스트 라벨 생략을 통한 간결화 4. 로고 이미지 교체: image 92.png로 업데이트 및 경로 정리 5. 디자인 가이드 분리: README에서 design_rule.md로 디자인 정책 문서 독립 * 참고: 현재 디자인 검토를 위한 중간 반영 상태이며, 피드백에 따라 추가 수정 예정임.	2026-06-12 15:57:20 +09:00
Taehoon	56abdddbc7	Merge remote-tracking branch 'origin/main' into ux_setting	2026-06-12 13:34:13 +09:00
Taehoon	fd9e88d7c6	style: 리팩토링 및 CSS 통합 작업 완료 (하드코딩 스타일 제거)	2026-06-12 13:29:59 +09:00
JooWangi	407b9ba531	style: 연도별 PC 노후도 예측 표의 왼편 여백 제거 및 레이아웃 정렬	2026-06-12 10:40:37 +09:00
Taehoon	55c43aa250	merge: remote main updates into local main	2026-06-12 10:37:52 +09:00
Taehoon	9186eb50ca	feat: 자산 관리 시스템 고도화 및 DB 정규화 대응 수정 1. 자산 저장 시 500 에러 해결: V3 정규화 스키마에 맞춰 테이블 매핑 최신화 및 저장 로직 안정화 2. 자산 번호 체계 개편: 구매일자(YYYYMM)와 유형을 기반으로 PREFIX-YYYYMM-NNNN 규칙 적용 (코드 로직 수정 및 기존 데이터 전량 갱신) 3. 구매일자 표준화: 모든 purchase_date를 YYYY-MM-DD 형식으로 통일 4. HWModal 기능 복원: 위치 등록 시 다중 사진 페이지네이션(좌우 버튼) 기능 복구 5. 위치 지도 고도화: HTML 인터랙티브 지도 지원 및 이미지 지도 내 좌석 스내핑 로직 추가	2026-06-12 10:29:42 +09:00
JooWangi	8a3727ea61	feat: 대시보드 구분선 디자인 전환, 폰트 확대 및 버그 수정	2026-06-12 08:49:04 +09:00
Taehoon	0c1977f707	style: 폰트 크기를 ux_setting 표준 규격(14px)으로 복구 및 최적화	2026-06-11 13:06:04 +09:00
JooWangi	19e6be27de	fix(merge): resolve compile errors and restore remote db IP	2026-06-11 11:49:34 +09:00
JooWangi	accbbdc2fa	fix(pc-view): restore pc list view rendering and enable status view toggle for PC	2026-06-11 11:43:51 +09:00
JooWangi	d3c4fa5e66	fix(main): restore dashboard tab rendering check in refreshView	2026-06-11 11:42:03 +09:00
JooWangi	8c1cb6cf93	merge: merge origin/main into HW_Dashboard and resolve conflicts	2026-06-11 11:39:09 +09:00
Taehoon	4810df212a	merge: ux_setting 브랜치를 main에 병합 (HWModal UI 고도화 및 PC 탭 제한 사항 반영)	2026-06-11 11:23:09 +09:00
Taehoon	f5a84a77ef	feat: PC 페이지 개발 대기 상태 전환 및 자산현황 뷰 노출 범위 제한 (서버 탭 전용)	2026-06-11 11:20:28 +09:00
Taehoon	10479aad7e	feat: HWModal 네트워크 및 원격 접속 정보 동적 입력 기능 통합 및 UI 최적화	2026-06-11 11:14:00 +09:00
Taehoon	95fbd3f606	fix: 자산 상세 정보 레이아웃 최적화 및 스타일 표준화 - 상세 정보 섹션을 2열 그리드로 변경하여 정보 밀도 향상\n- 항목 제목(12px) 및 내용(14px) 폰트 크기 조정\n- 인라인 스타일을 dashboard.css로 이전 및 중앙 집중화\n- 불필요한 아이콘 제거 및 UI 정돈	2026-06-11 10:37:33 +09:00
Taehoon	207acbdecb	fix: LocationView 레이아웃 안정화 및 UI 개선 - 페이지네이션 버튼을 상세위치 옆으로 이동\n- 지도 이미지 밀림 현상 방지를 위한 정렬 방식 수정 및 동기화 로직 보강\n- 상단 메뉴에서 구버전 현황 버튼 제거	2026-06-11 10:08:43 +09:00
Taehoon	164568843b	feat: LocationView 고도화 - 지도 클릭 시 사이드바 상세 정보 표시 및 구역 필터링 구현	2026-06-11 09:47:57 +09:00
Taehoon	29c7d5f3d8	fix: 서버 오류 수정	2026-06-10 17:53:52 +09:00
Taehoon	ce1ed40561	feat: 하드웨어 자산 관리 고도화 및 자동 이력 시스템 구축 - 통합 원격 접속 정보 UI 구현 (IP/MAC 및 계정 정보 통합) - 서버 측 스냅샷 비교 기반 자동 이력(Log) 생성 로직 도입 - 타임라인 UI 개선 (이벤트별 색상 뱃지 및 변동 사항 강조) - 자산 상세 필드 확장 (서비스 구분, 용도 등) - 테스트 데이터 생성기 및 이력 계획서 추가	2026-06-10 09:51:03 +09:00
Taehoon	25ebaf4685	refactor: rename asset_network to asset_remote - DB 테이블명 변경 마이그레이션 스크립트 추가 (migrate_v5_rename_remote.js) - Backend (server.js): 쿼리 및 매핑 로직을 asset_remote 및 remotes 속성으로 업데이트 - Frontend (HWModal.ts): 폼 필드와 데이터 바인딩을 remotes로 일괄 수정 - 유틸리티 스크립트의 레퍼런스 일괄 업데이트	2026-06-09 18:44:53 +09:00