feat: add desktop label printer program files and clean up backup files

fix: 위치보기 수정 (도면 오버플로우 제한 및 API 호출 경로 정상화)
fix: 자산번호 저장 누락 오류 수정 및 위치보기 도면 배치 보완
2026-06-23 14:07:22 +09:00 · 2026-06-22 13:56:52 +09:00 · 2026-06-19 16:25:28 +09:00 · 2026-06-19 15:48:26 +09:00 · 2026-06-19 15:12:25 +09:00 · 2026-06-19 15:04:36 +09:00
173 changed files with 12361 additions and 19563 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,17 @@
    - 기존 동작 방식과 성능을 기준(Baseline)으로 삼고, 수정 후에도 **기존의 모든 기능이 무결하게 유지되는지 반드시 테스트하여 입증**한다.
    - 검증 결과를 바탕으로 "무엇을, 왜, 어떻게" 바꿀지 상세 보고 후, 사용자로부터 **'진행시켜'** 승인을 얻은 뒤에만 집행한다.
 4. **선보고 후승인**: 모든 기능 수정 및 코드 변경 전에는 예상 방안을 먼저 보고하고 승인 절차를 거친다.
+5. **DB 삭제 및 초기화 절대 엄금 (Strict DB Deletion Policy)**:
+    - 어떠한 경우에도 `DELETE`, `DROP`, `TRUNCATE` 등 데이터를 삭제하거나 테이블을 초기화하는 작업은 사전에 사용자에게 상세 사유를 보고하고 **명시적 승인**을 얻은 후에만 시행한다.
+    - 기존 데이터의 가치를 최우선으로 하며, 작업 전 백업 여부를 반드시 확인한다.
+6. **RED–GREEN–Refactor 개발 원칙**:
+    - 모든 기능 개발과 버그 수정은 **RED → GREEN → Refactor** 순서로 진행한다.
+    - **RED**: 요구사항을 명확히 표현하는 테스트를 먼저 작성하고, 해당 테스트가 기능 미구현 또는 결함으로 인해 실패하는지 확인한다.
+    - **GREEN**: 실패한 테스트를 통과시키는 데 필요한 최소한의 코드만 구현하며, 불필요한 기능 추가나 구조 변경을 하지 않는다.
+    - **Refactor**: 관련 테스트와 기존 테스트가 모두 통과하는 상태에서만 중복 제거, 명칭 개선, 책임 분리 등 코드 구조를 개선하며 동작은 변경하지 않는다.
+    - 각 단계가 끝날 때마다 관련 테스트와 기존 기능의 회귀 여부를 검증한다.
+    - 테스트 작성이 현실적으로 불가능한 경우에는 그 사유와 대체 검증 방법을 먼저 보고하고 승인을 받은 후 진행한다.
+    - 본 원칙을 적용할 때에도 기존의 **선보고 후승인** 및 **외과 수술식 수정** 규칙을 준수한다.

 ---

@@ -28,29 +39,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/label/DevExpress.Data.v14.1.dll
+++ b/label/DevExpress.Data.v14.1.dll
--- a/label/DevExpress.Printing.v14.1.Core.dll
+++ b/label/DevExpress.Printing.v14.1.Core.dll
--- a/label/DevExpress.Utils.v14.1.dll
+++ b/label/DevExpress.Utils.v14.1.dll
--- a/label/DevExpress.XtraEditors.v14.1.dll
+++ b/label/DevExpress.XtraEditors.v14.1.dll
--- a/label/DevExpress.XtraGrid.v14.1.dll
+++ b/label/DevExpress.XtraGrid.v14.1.dll
--- a/label/DevExpress.XtraLayout.v14.1.dll
+++ b/label/DevExpress.XtraLayout.v14.1.dll
--- a/label/DevExpress.XtraPrinting.v14.1.dll
+++ b/label/DevExpress.XtraPrinting.v14.1.dll
--- a/label/LabelPrinter.exe
+++ b/label/LabelPrinter.exe
--- a/label/Newtonsoft.Json.dll
+++ b/label/Newtonsoft.Json.dll
--- a/label/WebQuery.dll
+++ b/label/WebQuery.dll
--- a/label/config.ini
+++ b/label/config.ini
@@ -0,0 +1,4 @@
+[PRINT]
+FONT=8
+LEFT=143
+TOP=40
--- a/label/de/DevExpress.Data.v14.1.resources.dll
+++ b/label/de/DevExpress.Data.v14.1.resources.dll
--- a/label/de/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/de/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/de/DevExpress.Utils.v14.1.resources.dll
+++ b/label/de/DevExpress.Utils.v14.1.resources.dll
--- a/label/de/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/de/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/de/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/de/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/de/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/es/DevExpress.Data.v14.1.resources.dll
+++ b/label/es/DevExpress.Data.v14.1.resources.dll
--- a/label/es/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/es/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/es/DevExpress.Utils.v14.1.resources.dll
+++ b/label/es/DevExpress.Utils.v14.1.resources.dll
--- a/label/es/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/es/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/es/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/es/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/es/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/ja/DevExpress.Data.v14.1.resources.dll
+++ b/label/ja/DevExpress.Data.v14.1.resources.dll
--- a/label/ja/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/ja/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/ja/DevExpress.Utils.v14.1.resources.dll
+++ b/label/ja/DevExpress.Utils.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/ja/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/ja/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/ru/DevExpress.Data.v14.1.resources.dll
+++ b/label/ru/DevExpress.Data.v14.1.resources.dll
--- a/label/ru/DevExpress.Printing.v14.1.Core.resources.dll
+++ b/label/ru/DevExpress.Printing.v14.1.Core.resources.dll
--- a/label/ru/DevExpress.Utils.v14.1.resources.dll
+++ b/label/ru/DevExpress.Utils.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraEditors.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraEditors.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraGrid.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraGrid.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraLayout.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraLayout.v14.1.resources.dll
--- a/label/ru/DevExpress.XtraPrinting.v14.1.resources.dll
+++ b/label/ru/DevExpress.XtraPrinting.v14.1.resources.dll
--- a/label/tmp/file_1.txt
+++ b/label/tmp/file_1.txt
@@ -0,0 +1,7 @@
+자산번호 : 210312
+자산명   : 가을-PC(i5-12400F)
+공급사   : (주)가을디에스
+자산위치 : 지반부
+관리부서 : 전산
+사용자   : 박노석
+취득일자 : 2024-08-05
--- a/label/tmp/file_1.txt
+++ b/label/tmp/file_1.txt
--- 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/analyze_codes.cjs
+++ b/scratch/analyze_codes.cjs
@@ -0,0 +1,24 @@
+const mysql = require('mysql2/promise');
+require('dotenv').config();
+
+async function analyzeCodes() {
+  const connection = await mysql.createConnection({
+    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 [years] = await connection.query('SELECT DISTINCT purchase_date FROM asset_core WHERE id LIKE "PC_20260615_%"');
+  console.log('New assets years:', years.map(y => y.purchase_date));
+
+  // 기존 자산 코드 패턴 확인
+  const [existing] = await connection.query('SELECT asset_code FROM asset_core WHERE asset_code LIKE "PC-%" LIMIT 5');
+  console.log('Existing code sample:', existing);
+
+  await connection.end();
+}
+
+analyzeCodes().catch(console.error);
--- 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/check_backup_excel.cjs
+++ b/scratch/check_backup_excel.cjs
@@ -0,0 +1,11 @@
+const XLSX = require('xlsx');
+const workbook = XLSX.readFile('backupDB_20260602.xlsx');
+console.log('Sheet Names:', workbook.SheetNames);
+if (workbook.SheetNames.includes('system_users')) {
+  const sheet = workbook.Sheets['system_users'];
+  const data = XLSX.utils.sheet_to_json(sheet);
+  console.log('system_users found! Count:', data.length);
+  console.log('Sample:', data.slice(0, 2));
+} else {
+  console.log('system_users sheet not found in backupDB_20260602.xlsx');
+}
--- a/scratch/check_codes.cjs
+++ b/scratch/check_codes.cjs
@@ -0,0 +1,24 @@
+const mysql = require('mysql2/promise');
+require('dotenv').config();
+
+async function checkCodes() {
+  const connection = await mysql.createConnection({
+    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')
+  });
+
+  console.log('--- Asset Codes Sample ---');
+  const [rows] = await connection.query('SELECT id, asset_code, purchase_date FROM asset_core WHERE id LIKE "PC_20260615_%" LIMIT 10');
+  console.log(rows);
+  
+  console.log('\n--- Other Asset Codes Sample ---');
+  const [rows2] = await connection.query('SELECT id, asset_code, purchase_date FROM asset_core WHERE id NOT LIKE "PC_20260615_%" AND asset_code IS NOT NULL LIMIT 5');
+  console.log(rows2);
+
+  await connection.end();
+}
+
+checkCodes().catch(console.error);
--- a/scratch/check_public_pcs.cjs
+++ b/scratch/check_public_pcs.cjs
@@ -0,0 +1,40 @@
+const mysql = require('mysql2/promise');
+require('dotenv').config();
+
+async function checkPublicPCs() {
+  const connection = await mysql.createConnection({
+    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')
+  });
+
+  console.log('🔍 공용 PC(Public PC)로 추정되는 자산 조회 중...');
+
+  // 사번이 없거나, 사용자명에 '공용'이 포함된 데이터 조회
+  const [rows] = await connection.query(`
+    SELECT id, asset_code, user_current, emp_no, current_dept, asset_type 
+    FROM asset_core 
+    WHERE (emp_no IS NULL OR emp_no = '' OR user_current LIKE '%공용%')
+      AND id LIKE 'PC_20260615_%'
+  `);
+
+  console.log(`📊 발견된 공용 PC 후보: ${rows.length}건`);
+  
+  if (rows.length > 0) {
+    console.table(rows.slice(0, 20)); // 상위 20개 샘플 출력
+    
+    // 요약 통계
+    const summary = {
+      only_no_emp: rows.filter(r => (!r.emp_no) && !r.user_current.includes('공용')).length,
+      only_public_name: rows.filter(r => r.emp_no && r.user_current.includes('공용')).length,
+      both: rows.filter(r => (!r.emp_no) && r.user_current.includes('공용')).length
+    };
+    console.log('\n📈 요약 통계:', summary);
+  }
+
+  await connection.end();
+}
+
+checkPublicPCs().catch(console.error);
--- a/scratch/compare_and_cleanup.cjs
+++ b/scratch/compare_and_cleanup.cjs
@@ -0,0 +1,77 @@
+const mysql = require('mysql2/promise');
+require('dotenv').config();
+
+async function updateAndCompare() {
+  const connection = await mysql.createConnection({
+    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')
+  });
+
+  console.log('🚀 [Step 1 & 2] "undefined" 사번 및 빈 사용자명 정리 중...');
+  const [updateResult] = await connection.query(`
+    UPDATE asset_core 
+    SET user_current = '공용', emp_no = NULL 
+    WHERE id LIKE "PC_20260615_%" AND (emp_no = 'undefined' OR emp_no IS NULL OR emp_no = '')
+  `);
+  console.log(`✅ 업데이트 완료: ${updateResult.affectedRows}건`);
+
+  console.log('\n🔍 [Step 3] 엑셀 데이터와 DB asset_type 비교 분석 중...');
+  const XLSX = require('xlsx');
+  const workbook = XLSX.readFile('asset_pc (2026.06.15).xlsx');
+  const sheet = workbook.Sheets[workbook.SheetNames[0]];
+  const excelData = XLSX.utils.sheet_to_json(sheet);
+
+  // DB 데이터 로드
+  const [dbRows] = await connection.query('SELECT id, asset_type, user_current, emp_no FROM asset_core WHERE id LIKE "PC_20260615_%"');
+  const dbMap = new Map();
+  dbRows.forEach(r => dbMap.set(r.id, r));
+
+  const mismatches = [];
+  const publicButExcelPersonal = [];
+
+  for (let i = 0; i < excelData.length; i++) {
+    const excelRow = excelData[i];
+    const assetId = `PC_20260615_${String(i + 1).padStart(4, '0')}`;
+    const dbRow = dbMap.get(assetId);
+
+    if (!dbRow) continue;
+
+    const excelType = excelRow.asset_type || '개인PC';
+    
+    // 1. 단순 타입 불일치 체크
+    if (dbRow.asset_type !== excelType) {
+      mismatches.push({
+        id: assetId,
+        excel_type: excelType,
+        db_type: dbRow.asset_type,
+        user: dbRow.user_current
+      });
+    }
+
+    // 2. 엑셀은 '개인PC'인데 데이터는 공용(사번없음)인 경우 탐색
+    if (excelType === '개인PC' && (!dbRow.emp_no || dbRow.user_current === '공용')) {
+      publicButExcelPersonal.push({
+        id: assetId,
+        excel_user: excelRow.user_current,
+        excel_dept: excelRow.current_dept,
+        db_user: dbRow.user_current
+      });
+    }
+  }
+
+  console.log(`\n📊 분석 결과:`);
+  console.log(`- 엑셀과 DB의 asset_type 불일치: ${mismatches.length}건`);
+  console.log(`- 엑셀은 '개인PC'이나 사번이 없어 '공용'으로 잡힌 항목: ${publicButExcelPersonal.length}건`);
+
+  if (publicButExcelPersonal.length > 0) {
+    console.log('\n⚠️ 엑셀은 개인PC이나 데이터가 미비한 항목 (상위 10개):');
+    console.table(publicButExcelPersonal.slice(0, 10));
+  }
+
+  await connection.end();
+}
+
+updateAndCompare().catch(console.error);
--- a/scratch/debug_public.cjs
+++ b/scratch/debug_public.cjs
@@ -0,0 +1,25 @@
+const mysql = require('mysql2/promise');
+require('dotenv').config();
+
+async function debugPublic() {
+  const connection = await mysql.createConnection({
+    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 [rows] = await connection.query(`
+    SELECT user_current, emp_no, COUNT(*) as count 
+    FROM asset_core 
+    WHERE id LIKE "PC_20260615_%"
+    GROUP BY user_current, emp_no
+    HAVING emp_no IS NULL OR emp_no = '' OR user_current LIKE '%공용%' OR user_current = ''
+  `);
+
+  console.table(rows);
+  await connection.end();
+}
+
+debugPublic().catch(console.error);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
이태훈	9f165faf13	feat: add desktop label printer program files and clean up backup files	2026-06-23 14:07:22 +09:00
이태훈	237ac9ee25	fix: 위치보기 수정 (도면 오버플로우 제한 및 API 호출 경로 정상화)	2026-06-22 13:56:52 +09:00
Taehoon	f41f2378d7	fix: 자산번호 저장 누락 오류 수정 및 위치보기 도면 배치 보완	2026-06-19 16:25:28 +09:00
Taehoon	41406f56e8	Merge branch 'ux_setting' into db_setting # Conflicts: # README.md	2026-06-19 15:48:26 +09:00
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
Taehoon	b9d28736e2	docs: add work log for 2026-06-15 and update DB deletion policy in README	2026-06-15 11:47:46 +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