ExperionCrawler/src/Web/wwwroot/panes/pid.html

      <header class="pane-hdr">
        <div>
          <h1>P&ID 추출</h1>
          <p>DXF/PDF 형식의 P&ID 도면에서 장비 및 계기 정보를 AI로 자동 추출합니다.</p>
        </div>
        <div class="pane-tag">P&ID / AI</div>
      </header>

      <!-- Step 1: PC → 서버 전송 -->
      <div class="card" style="margin-bottom:12px">
        <div class="card-cap">① PC → 서버 파일 전송</div>
        <div class="fg" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
          <input type="file" class="inp" id="pid-file-input" accept=".dxf,.pdf" style="flex:1;min-width:200px"/>
          <button class="btn-a" onclick="pidUpload()" style="white-space:nowrap">📤 서버로 전송</button>
        </div>
        <div style="margin-top:6px;font-size:12px;color:var(--t2)">
          <span id="pid-upload-status">파일을 선택하고 서버로 전송하세요.</span>
        </div>
      </div>

      <!-- Step 2: 서버 파일 선택 → 추출 -->
      <div class="card" style="margin-bottom:12px">
        <div class="card-cap">② 서버 파일 선택 → 추출</div>
        <div class="fg" style="margin-bottom:8px">
          <select class="inp" id="pid-server-file">
            <option value="">-- 서버 파일 목록 로드 필요 --</option>
          </select>
        </div>
        <div class="btn-row">
          <button class="btn-b" onclick="pidLoadServerFiles()">🔄 목록 갱신</button>
          <button class="btn-a" onclick="pidExtract()">🚀 추출 시작</button>
          <button class="btn-b" onclick="pidAnalyzeConnections()">🔗 연결 분석</button>
          <button class="btn-b" onclick="pidClearLog()">로그 지우기</button>
          <button class="btn-b" style="margin-left:auto;border-color:var(--red,#e55);color:var(--red,#e55)" onclick="pidDeleteAll()">🗑 전체 삭제</button>
        </div>
        <div style="margin-top:6px;font-size:12px;color:var(--t2);display:flex;align-items:center;gap:8px">
          <span id="pid-status">대기 중...</span>
          <span id="pid-elapsed" style="font-family:var(--mono);display:none"></span>
        </div>
        <div id="pid-log" class="log-box" style="margin-top:8px;max-height:120px;overflow-y:auto;display:none"></div>
      </div>

       <!-- Prefix 분류 정의 (접이식) -->
       <div class="card" style="margin-bottom:12px">
         <div class="card-cap" onclick="pidTogglePrefixPanel()" style="cursor:pointer;user-select:none">
           <span>Prefix 분류 정의 <span id="pid-prefix-toggle">▼</span></span>
           <span style="font-weight:400;font-size:12px;color:var(--t2)">
             태그 prefix 기준으로 카테고리 자동 분류
           </span>
         </div>
         <div id="pid-prefix-panel" style="display:none;padding-top:8px">
           <div id="pid-prefix-groups">
             <div style="text-align:center;padding:12px;color:var(--t2)">로딩 중...</div>
           </div>
           <div style="margin-top:8px;display:flex;gap:4px;flex-wrap:wrap;align-items:center">
             <button class="btn-sm btn-b" onclick="pidRefreshPrefixRules()">새로고침</button>
             <button class="btn-sm btn-b" onclick="pidApplyCategories()" title="기존 미분류 항목에 category 재적용">재적용</button>
           </div>
         </div>
       </div>

      <!-- 추출 결과 테이블 -->
      <div class="card">
        <div class="card-cap" style="display:flex;justify-content:space-between;align-items:center">
          <span>추출 결과</span>
          <div style="display:flex;gap:6px;flex-wrap:wrap">
            <button id="btn-pid-export-csv" class="btn-b btn-sm">CSV</button>
            <button id="btn-pid-export-excel" class="btn-a btn-sm">Excel</button>
          </div>
        </div>
        <div id="pid-table-container" style="overflow-x:auto">
          <table class="table" id="pid-table">
            <thead>
              <tr>
                <th style="width:60px">ID</th>
                <th>태그번호</th>
                <th>장비명</th>
                <th>유형</th>
                <th>라인번호</th>
                <th>도면번호</th>
                <th style="width:80px">신뢰도</th>
                <th style="width:80px">상태</th>
                <th style="width:120px">매핑</th>
                <th style="width:120px">카테고리</th>
                <th style="width:60px">삭제</th>
              </tr>
            </thead>
            <tbody id="pid-table-body"></tbody>
          </table>
        </div>
        <!-- 페이지네이션 -->
        <div id="pid-pagination" class="pagination" style="display:flex;justify-content:center;gap:4px;padding:8px"></div>
      </div>

      <!-- 통계 카드 -->
      <div class="card" style="margin-top:12px">
        <div class="card-cap">통계 정보</div>
        <div class="cols-3">
          <div class="stat-box">
            <div class="stat-label">총 추출 건수</div>
            <div class="stat-value" id="pid-stat-total">0</div>
          </div>
          <div class="stat-box">
            <div class="stat-label">신뢰도 70%+</div>
            <div class="stat-value" id="pid-stat-high">0</div>
          </div>
          <div class="stat-box">
            <div class="stat-label">매핑 완료</div>
            <div class="stat-value" id="pid-stat-mapped">0</div>
          </div>
        </div>
      </div>