@dssp/supervision 1.0.0-y.0 → 1.0.1

package/dist-client/pages/building-inspection/building-inspection-detail-ai-measurement.js

@@ -1,100 +1,92 @@
 import { __decorate, __metadata } from "tslib";
+/**
+ * 검측 관리 상세 - AI 자동 검측
+ *
+ * 검측 체크리스트 항목을 AI 엔진(inspection-ai)에 보내:
+ *  1) 촬영 가이드(plan-shots)를 받아 단계별 촬영 슬롯을 표시하고
+ *  2) 촬영된 사진으로 자동 판정(inspect)을 실행한 뒤
+ *  3) 항목별 상세 / 추가 촬영(재검사) / 종합 리포트를 거쳐
+ *  4) 검사 등록 시 감리자 적합/부적합 자동 반영 + AI판단 근거를 첨부한다.
+ */
 import '@material/web/icon/icon.js';
-import '@operato/input/ox-input-switch.js';
-import '@operato/mini-map/ox-zoomable-image.js';
 import '@material/web/progress/circular-progress.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
 import { customElement, state, query } from 'lit/decorators.js';
-import html2canvas from 'html2canvas';
-import { PageView } from '@operato/shell';
-import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { PageView, navigate } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
 import { client } from '@operato/graphql';
 import { notify } from '@operato/layout';
 import './component/building-inspection-detail-header';
+const ENGINE_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
+const ENGINE_RUN_URL = `${ENGINE_BASE_URL}/api/run/inspection-ai`;
+const ENGINE_AUTH = `Basic ${btoa('admin:admin1234')}`;
+const MAX_IMAGES = 8;
+/* 엔진 verdict(기계값) → 화면 라벨. pass/fail만 합/불로 자동 체크, 나머지(보류/미지원/오류)는 감리자 판단 */
+const VERDICT_LABEL = {
+    pass: '적합',
+    fail: '부적합',
+    hold: '보류',
+    pending: '미지원',
+    error: '오류'
+};
+/* 엔진 routing(기계값) → 화면 라벨 */
+const ROUTING_LABEL = {
+    vlm: 'AI 사진판독',
+    cv: '자동 측정',
+    cv_missing: '자동 측정 누락'
+};
 let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement extends PageView {
     constructor() {
         super(...arguments);
-        this.KEYPOINT_RULER_API_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
         this.project = {};
         this.buildingInspection = {};
         this.buildingInspectionId = '';
-        this.capturedVideoUrl = null;
-        this.videoFile = null;
-        this.frame = null;
-        this.analyzing = false;
-        this.selectedPoints = {
-            x1: null,
-            y1: null,
-            x2: null,
-            y2: null
+        this.guide = null; // plan-shots 응답 {shots, total_shots, markdown}
+        this.photos = [];
+        this.result = null; // inspect 응답
+        this.mainPhotoIndex = 0;
+        this.panel = 'none';
+        this.selectedItem = null;
+        this.recaptureBase = 0; // 재촬영 패널 진입 시점의 사진 수
+        this.expandedReportId = null; // 종합 리포트에서 펼친 항목(아코디언)
+        this.loading = false;
+        this.loadingText = '';
+        /* 슬롯 클릭으로 선택기를 연 경우 대상 슬롯 인덱스 (null이면 뒤에 추가) */
+        this.pendingSlotIndex = null;
+        this._resetPhotos = () => {
+            this.photos.forEach(p => URL.revokeObjectURL(p.url));
+            this.photos = [];
         };
-        this.frameNaturalWidth = 0;
-        this.frameNaturalHeight = 0;
-        this.displayedImageRect = null;
-        this.distance = null;
-        this.unit = null;
-        this.analyzingError = null;
-        this._onImageLoad = () => {
-            if (!this.frameImageEl || !this.imageWrapperEl)
-                return;
-            const img = this.frameImageEl;
-            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
-            const imgRect = img.getBoundingClientRect();
-            this.frameNaturalWidth = img.naturalWidth;
-            this.frameNaturalHeight = img.naturalHeight;
-            this.displayedImageRect = {
-                width: imgRect.width,
-                height: imgRect.height,
-                left: imgRect.left - wrapperRect.left,
-                top: imgRect.top - wrapperRect.top
-            };
+        this._openReport = () => {
+            this.panel = 'report';
+            this.selectedItem = null;
+            this.expandedReportId = null;
         };
-        this._onImageClick = (event) => {
-            if (!this.frameImageEl || !this.imageWrapperEl)
-                return;
-            const imgRect = this.frameImageEl.getBoundingClientRect();
-            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
-            const clientX = event.clientX;
-            const clientY = event.clientY;
-            // Ignore clicks outside the displayed image area
-            if (clientX < imgRect.left || clientX > imgRect.right || clientY < imgRect.top || clientY > imgRect.bottom) {
-                return;
-            }
-            // 새로운 마크 입력 시 이전 거리/단위 결과 초기화
-            this.distance = null;
-            this.unit = null;
-            this.analyzingError = null;
-            const relativeX = clientX - imgRect.left;
-            const relativeY = clientY - imgRect.top;
-            const xOnNatural = Math.round((relativeX * this.frameNaturalWidth) / imgRect.width);
-            const yOnNatural = Math.round((relativeY * this.frameNaturalHeight) / imgRect.height);
-            if (this.selectedPoints.x1 === null || this.selectedPoints.y1 === null) {
-                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x1: xOnNatural, y1: yOnNatural });
-            }
-            else if (this.selectedPoints.x2 === null || this.selectedPoints.y2 === null) {
-                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x2: xOnNatural, y2: yOnNatural });
-            }
-            else {
-                // 세 번째 클릭부터는 초기화 후 첫 점으로 설정
-                this.selectedPoints = { x1: xOnNatural, y1: yOnNatural, x2: null, y2: null };
-            }
-            // Update displayed rect cache (in case layout changed)
-            this.displayedImageRect = {
-                width: imgRect.width,
-                height: imgRect.height,
-                left: imgRect.left - wrapperRect.left,
-                top: imgRect.top - wrapperRect.top
-            };
+        this._closePanel = () => {
+            this.panel = 'none';
+            this.selectedItem = null;
         };
     }
     get context() {
         return {
-            title: '검측 관리 상세 - AI 거리 측정'
+            title: '검측 관리 상세 - AI 자동 검측'
         };
     }
+    /* 엔진에 보낼 검측요청서: 체크리스트 항목 → {item_id, category, text} */
+    get engineChecklist() {
+        var _a, _b;
+        const items = ((_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.checklist) === null || _b === void 0 ? void 0 : _b.checklistItems) || [];
+        return [...items]
+            .sort((a, b) => (a.sequence || 0) - (b.sequence || 0))
+            .map(item => ({
+            item_id: item.id,
+            category: [item.mainType, item.detailType].filter(Boolean).join(' · '),
+            text: item.name || ''
+        }));
+    }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         return html `
       <building-inspection-detail-header
         .buildingInspectionId=${(_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.id}
@@ -102,80 +94,336 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
         .projectName=${this.project.name}
         .buildingName=${(_f = (_e = (_d = this.buildingInspection) === null || _d === void 0 ? void 0 : _d.buildingLevel) === null || _e === void 0 ? void 0 : _e.building) === null || _f === void 0 ? void 0 : _f.name}
         .buildingLevelFloor=${(_h = (_g = this.buildingInspection) === null || _g === void 0 ? void 0 : _g.buildingLevel) === null || _h === void 0 ? void 0 : _h.floor}
+        .projectId=${this.project.id}
       ></building-inspection-detail-header>
 
       <div body>
-        <!-- Preview selected or recorded video -->
-        <div preview>
-          ${((_j = this.frame) === null || _j === void 0 ? void 0 : _j.download_url)
+        <div class="page-title">
+          AI 자동 검측 – ${((_k = (_j = this.buildingInspection) === null || _j === void 0 ? void 0 : _j.checklist) === null || _k === void 0 ? void 0 : _k.location) || ''}
+          <span target>${((_m = (_l = this.buildingInspection) === null || _l === void 0 ? void 0 : _l.checklist) === null || _m === void 0 ? void 0 : _m.name) || ''}</span>
+        </div>
+
+        ${this.result ? this._renderResult() : this._renderGuide()}
+      </div>
+
+      <!-- 모바일에서 촬영/앨범 선택이 함께 뜨도록 capture 속성 없이 사용 -->
+      <input id="photoInput" type="file" accept="image/*" multiple @change=${this._onPhotosSelected} />
+
+      ${this.loading
+            ? html `
+              <div class="loading-overlay">
+                <div class="box">
+                  <md-circular-progress indeterminate></md-circular-progress>
+                  <span>${this.loadingText}</span>
+                </div>
+              </div>
+            `
+            : ''}
+    `;
+    }
+    /* ─── 1단계: 촬영 가이드 화면 ─── */
+    _renderGuide() {
+        if (!this.guide) {
+            return html `<div class="empty-state">촬영 가이드를 준비 중입니다...</div>`;
+        }
+        const shots = this.guide.shots || [];
+        const total = this.guide.total_shots || shots.length;
+        const taken = this.photos.length;
+        const current = shots[Math.min(taken, shots.length - 1)];
+        const done = taken >= total;
+        return html `
+      <div class="guide-container">
+        <div class="step-badge">${Math.min(taken + 1, total)}단계 · ${(current === null || current === void 0 ? void 0 : current.target) || '촬영'}</div>
+        <div class="guide-title">${(current === null || current === void 0 ? void 0 : current.target) || ''}${done ? ' 촬영 완료' : ''}</div>
+        <div class="guide-desc">이 사진을 토대로 AI가 적용할 체크리스트를 결정하고 일부를 자동 판정합니다.</div>
+
+        <div class="card">
+          <h4>촬영 가이드</h4>
+          <ul>
+            ${shots.map(s => html `<li>${s.target} — ${s.how}</li>`)}
+          </ul>
+        </div>
+
+        <div class="card" style="display: flex; flex-direction: column; gap: 10px;">
+          <div class="progress-row">
+            <span>사진 진행</span>
+            <span>${taken} / ${total}</span>
+          </div>
+          <div class="progress-bar"><div style="width: ${total ? (taken / total) * 100 : 0}%"></div></div>
+          ${!done ? html `<div class="next-shot">다음 촬영: ${(current === null || current === void 0 ? void 0 : current.how) || (current === null || current === void 0 ? void 0 : current.target) || ''}</div>` : ''}
+          <div class="slot-grid">
+            ${shots.map((s, i) => html `
+                <div class="slot" @click=${() => this._openPhotoPicker(i)}>
+                  ${this.photos[i]
+            ? html `<img src=${this.photos[i].url} alt=${s.target} />`
+            : html `<md-icon>add_a_photo</md-icon>${s.target}`}
+                </div>
+              `)}
+          </div>
+        </div>
+
+        <button class="primary-button" ?disabled=${taken === 0} @click=${() => this._runInspection()}>
+          사진 선택 ${taken ? `(${taken}/${total})` : ''}
+        </button>
+        ${taken > 0
             ? html `
-                <div class="image-wrapper" @click=${this._onImageClick}>
-                  <img
-                    id="frameImage"
-                    src="${this.KEYPOINT_RULER_API_BASE_URL + ((_k = this.frame) === null || _k === void 0 ? void 0 : _k.download_url)}"
-                    crossorigin="anonymous"
-                    alt="frame"
-                    loading="eager"
-                    @load=${this._onImageLoad}
-                  />
-                  ${this._renderMarkers()}
+                <div style="display: flex; justify-content: flex-end;">
+                  <button class="text-button" @click=${this._resetPhotos}>사진 초기화</button>
                 </div>
               `
-            : // 동영상 선택 후 동영상 프리뷰
-                this.capturedVideoUrl
-                    ? html `<video src=${this.capturedVideoUrl} controls playsinline></video>`
-                    : // 초기 상태, 동영상 선택 전
-                        html `<md-icon>videocam</md-icon>`}
+            : ''}
+      </div>
+    `;
+    }
+    /* ─── 2단계: 판정 결과 화면 ─── */
+    _renderResult() {
+        const items = this._sortedItems();
+        const autoItems = items.filter(it => it.verdict === 'pass' || it.verdict === 'fail');
+        const moreItems = items.filter(it => it.verdict !== 'pass' && it.verdict !== 'fail');
+        // 클릭한 항목의 used_images만 표시 (선택 없으면 전체 항목 합집합). used_images는 전체 사진 기준 1-based
+        const focusItems = this.selectedItem ? [this.selectedItem] : items;
+        const usedNos = new Set();
+        for (const it of focusItems)
+            for (const n of it.used_images || [])
+                usedNos.add(n);
+        const usedPhotos = this.photos.map((photo, i) => ({ photo, no: i + 1 })).filter(x => usedNos.has(x.no));
+        const mainPhoto = usedPhotos[this.mainPhotoIndex];
+        return html `
+      <div class="result-body">
+        <div class="photo-pane">
+          <div class="caption">판정에 사용된 사진</div>
+          <div class="photo-main">${mainPhoto ? html `<img src=${mainPhoto.photo.url} alt="현장 사진" />` : ''}</div>
+          <div class="photo-thumbs">
+            ${usedPhotos.map((x, i) => html `
+                <img
+                  src=${x.photo.url}
+                  alt="사진 ${x.no}"
+                  ?selected=${i === this.mainPhotoIndex}
+                  @click=${() => (this.mainPhotoIndex = i)}
+                />
+              `)}
+          </div>
         </div>
 
-        <div controls>
-          <span class="controls-title">동영상 촬영</span>
-
-          <!-- 가운데 버튼 -->
-          ${((_l = this.frame) === null || _l === void 0 ? void 0 : _l.download_url) && this._hasTwoPoints() && this.distance && this.unit
-            ? // 거리 측정 완료 시, 사진 저장 버튼 표시
-                html `<button class="save" ?disabled=${this.analyzing} @click=${this._savePhoto}>사진 저장</button>`
-            : // 거리 측정 완료 전, 동영상 촬영 버튼 표시
-                html `<div class="camera-shutter">
-                <md-icon>camera</md-icon>
-                <input id="cameraInput" type="file" accept="video/*" @change="${this._onVideoSelected}" />
-              </div>`}
-
-          <!-- Action buttons -->
-          <div action-buttons>
-            ${this.frame
+        <div class="items-pane">
+          <div class="summary-banner">
+            적용 항목 ${items.length}개 · 자동 판정 ${autoItems.length}개 · 추가 촬영 ${moreItems.length}개
+          </div>
+
+          ${autoItems.length
             ? html `
-                  <button class="photo" ?disabled=${this.analyzing || !this._hasTwoPoints()} @click=${this._onAnalyzePhoto}>
-                    사진 분석
-                  </button>
+                  <div class="group-title">자동 판정 완료 (${autoItems.length})</div>
+                  ${autoItems.map((it, i) => this._renderItemCard(it, i + 1))}
                 `
-            : html `
-                  <button class="save" ?disabled=${this.analyzing || !this.capturedVideoUrl} @click=${this._onAnalyzeVideo}>
-                    동영상 분석
-                  </button>
-                `}
-            <button class="retry" @click=${this._onRetry}>초기화</button>
+            : ''}
+          ${moreItems.length
+            ? html `
+                  <div class="group-title">추가 촬영 필요 (${moreItems.length} 남음)</div>
+                  ${moreItems.map((it, i) => this._renderItemCard(it, i + 1))}
+                `
+            : ''}
+
+          <button class="primary-button" @click=${this._openReport}>종합 검사 리포트</button>
+        </div>
+
+        ${this.panel !== 'none' ? this._renderSidePane() : ''}
+      </div>
+    `;
+    }
+    _renderItemCard(item, no) {
+        var _a;
+        const auto = item.verdict === 'pass' || item.verdict === 'fail';
+        return html `
+      <div class="item-card" ?selected=${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.item_id) === item.item_id} @click=${() => this._openDetail(item)}>
+        <div class="item-no">${no}</div>
+        <div class="item-main">
+          <div class="item-name">${item.text}</div>
+          <div>
+            <span class="chip">${ROUTING_LABEL[item.routing] || item.routing}</span>
+            <span class="chip-verdict">${VERDICT_LABEL[item.verdict] || item.verdict}</span>
           </div>
+          <div class="item-desc">${item.observation ? `관찰: ${item.observation}` : item.reason || ''}</div>
         </div>
+        ${auto
+            ? html `
+                <div class="badge" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'}>
+                  ${VERDICT_LABEL[item.verdict]}
+                </div>
+              `
+            : item.verdict === 'hold'
+                ? html `
+                  <button
+                    class="capture-button"
+                    @click=${(e) => {
+                    e.stopPropagation();
+                    this._openRecapture(item);
+                }}
+                  >
+                    촬영하기
+                  </button>
+                `
+                : html `<div class="badge" etc>${VERDICT_LABEL[item.verdict] || item.verdict}</div>`}
       </div>
+    `;
+    }
+    /* ─── 우측 패널: 상세 / 재촬영 / 리포트 ─── */
+    _renderSidePane() {
+        if (this.panel === 'detail' && this.selectedItem)
+            return this._renderDetailPane(this.selectedItem);
+        if (this.panel === 'recapture' && this.selectedItem)
+            return this._renderRecapturePane(this.selectedItem);
+        if (this.panel === 'report')
+            return this._renderReportPane();
+        return '';
+    }
+    _renderDetailPane(item) {
+        const auto = item.verdict === 'pass' || item.verdict === 'fail';
+        const routingLabel = ROUTING_LABEL[item.routing] || item.routing;
+        const verdictLabel = VERDICT_LABEL[item.verdict] || item.verdict;
+        return html `
+      <div class="side-pane">
+        <div class="detail-header">
+          <span class="badge" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'} ?etc=${!auto}>
+            ${routingLabel}
+          </span>
+          <h3>${verdictLabel}</h3>
+        </div>
+        <div class="detail-summary">${(item.observation || item.ai_report || '').trim()}</div>
+        <div class="kv-grid">
+          <div class="kv">
+            <label>판정</label>
+            <span class="verdict-value" ?pass=${item.verdict === 'pass'} ?fail=${item.verdict === 'fail'}>
+              ${verdictLabel || '-'}
+            </span>
+          </div>
+          ${item.confidence != null
+            ? html `
+                  <div class="kv">
+                    <label>신뢰도</label>
+                    <span>${Math.round(item.confidence * 100)}%</span>
+                  </div>
+                `
+            : ''}
+          <div class="kv">
+            <label>처리</label>
+            <span>${ROUTING_LABEL[item.routing] || item.routing || '-'}</span>
+          </div>
+        </div>
+
+        <div class="reason-box">
+          <div class="reason-verdict">
+            <label style="font-size: 11px;color: #7d2f2f; display: block; font-weight: bold;">판단 근거</label>
+            ${item.reason}
+          </div>
+        </div>
 
-      <!-- 전체 화면을 덮는 로딩 오버레이 -->
-      ${this.analyzing
-            ? html `<div class="loading-overlay">
-            <div class="loading-container">
-              <md-circular-progress indeterminate></md-circular-progress>
-              <div class="loading-text">분석 중...</div>
-            </div>
-          </div>`
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
+    `;
+    }
+    _renderRecapturePane(item) {
+        var _a;
+        const shots = ((_a = item.recapture_shots) === null || _a === void 0 ? void 0 : _a.length)
+            ? item.recapture_shots
+            : [{ target: '추가 사진', how: '항목이 잘 보이도록 촬영해주세요.' }];
+        const taken = this.photos.length - this.recaptureBase;
+        const total = shots.length;
+        return html `
+      <div class="side-pane">
+        <h3>${item.text}</h3>
+        <div class="why-box">
+          <b>왜 추가 촬영이 필요한가요?</b><br />
+          ${item.reason || '판정을 위해 추가 사진이 필요합니다.'}
+        </div>
+        <div>
+          <h4 style="margin: 0 0 8px 0; font-size: 13px;">촬영 가이드</h4>
+          <ul
+            style="margin: 0; padding-left: 18px; font-size: 12px; color: #555; display: flex; flex-direction: column; gap: 6px;"
+          >
+            ${shots.map(s => html `<li>${s.target} — ${s.how}</li>`)}
+          </ul>
+        </div>
+        <div class="progress-row">
+          <span>사진 진행</span>
+          <span>${Math.min(taken, total)} / ${total}</span>
+        </div>
+        <div class="progress-bar"><div style="width: ${total ? Math.min(taken / total, 1) * 100 : 0}%"></div></div>
+        <div class="slot-grid">
+          ${shots.map((s, i) => {
+            const photo = this.photos[this.recaptureBase + i];
+            return html `
+              <div class="slot" @click=${() => this._openPhotoPicker(this.recaptureBase + i)}>
+                ${photo ? html `<img src=${photo.url} alt=${s.target} />` : html `<md-icon>add_a_photo</md-icon>${s.target}`}
+              </div>
+            `;
+        })}
+        </div>
+        ${taken > 0
+            ? html `<button class="primary-button" @click=${() => this._runInspection()}>재검사 실행 (${taken}장)</button>`
             : ''}
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
     `;
     }
-    async updated(changes) { }
+    _renderReportPane() {
+        var _a;
+        const items = this._sortedItems();
+        const summary = ((_a = this.result) === null || _a === void 0 ? void 0 : _a.summary) || {};
+        const etcCount = (summary.hold || 0) + (summary.pending || 0) + (summary.error || 0);
+        return html `
+      <div class="side-pane">
+        <h3>종합 검사 리포트</h3>
+        <div class="report-counts">
+          <div pass><b>${summary.pass || 0}</b><small>적합</small></div>
+          <div fail><b>${summary.fail || 0}</b><small>부적합</small></div>
+          <div etc><b>${etcCount}</b><small>미검사</small></div>
+        </div>
+        <div style="overflow-y: auto; max-height: 380px;">
+          ${items.map((it, i) => {
+            var _a;
+            const expanded = this.expandedReportId === it.item_id;
+            return html `
+              <div class="report-item">
+                <div class="report-head" @click=${() => this._toggleReportItem(it.item_id)}>
+                  <span class="report-text">${i + 1}. ${it.text}</span>
+                  <span
+                    class="verdict"
+                    ?pass=${it.verdict === 'pass'}
+                    ?fail=${it.verdict === 'fail'}
+                    ?etc=${it.verdict !== 'pass' && it.verdict !== 'fail'}
+                  >
+                    ${VERDICT_LABEL[it.verdict] || it.verdict}
+                  </span>
+                  <md-icon class="report-caret" ?open=${expanded}>expand_more</md-icon>
+                </div>
+                ${expanded
+                ? html `
+                        <div class="report-basis">
+                          ${it.ai_report ? html `<div class="report-ai">${(it.ai_report || '').trim()}</div>` : ''}
+                          ${it.observation ? html `<div>관찰: ${it.observation}</div>` : ''}
+                          ${it.reason ? html `<div>판단: ${it.reason}</div>` : ''}
+                          ${((_a = it.used_images) === null || _a === void 0 ? void 0 : _a.length)
+                    ? html `<div class="report-used">근거 사진: ${it.used_images.map(n => `#${n}`).join(', ')}</div>`
+                    : ''}
+                        </div>
+                      `
+                : ''}
+              </div>
+            `;
+        })}
+        </div>
+        <button class="primary-button" @click=${this._registerInspection}>검사 등록</button>
+        <button class="text-button" @click=${this._closePanel}>닫기</button>
+      </div>
+    `;
+    }
+    /* ─── 라이프사이클 ─── */
     async pageUpdated(changes, lifecycle) {
         if (this.active) {
-            this._onRetry();
+            this._resetAll();
             this.buildingInspectionId = lifecycle.resourceId || '';
             await this.initBuildingInspection(this.buildingInspectionId);
+            await this._loadShotGuide();
         }
     }
     async initBuildingInspection(buildingInspectionId = '') {
@@ -186,22 +434,21 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
           buildingInspection(id: $buildingInspectionId) {
             id
             status
-            requestDate
-            drawingMarker
             checklist {
               id
+              name
               location
-              inspectionDrawingType
+              checklistItems {
+                id
+                sequence
+                mainType
+                detailType
+                name
+              }
             }
             buildingLevel {
               id
               floor
-              mainDrawing {
-                id
-                name
-                fullpath
-              }
-              mainDrawingImage
               building {
                 id
                 name
@@ -213,9 +460,7 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
           }
         }
       `,
-            variables: {
-                buildingInspectionId
-            }
+            variables: { buildingInspectionId }
         });
         if (response.errors)
             return;
@@ -232,245 +477,251 @@ let BuildingInspectionAiMeasurement = class BuildingInspectionAiMeasurement exte
           }
         }
       `,
-            variables: {
-                buildingComplexId
-            }
+            variables: { buildingComplexId }
         });
         if (response.errors)
             return;
         this.project = response.data.project;
     }
-    _onVideoSelected(event) {
-        var _a;
-        const input = event.target;
-        const file = (_a = input === null || input === void 0 ? void 0 : input.files) === null || _a === void 0 ? void 0 : _a[0];
-        if (!file)
-            return;
-        // Only allow video files
-        if (!file.type.startsWith('video/')) {
-            console.warn('선택된 파일이 동영상이 아닙니다.');
-            return;
-        }
-        // Revoke old object URL if exists
-        if (this.capturedVideoUrl) {
-            URL.revokeObjectURL(this.capturedVideoUrl);
+    /* ─── 엔진 호출 ─── */
+    /* 엔진 실행 공통 호출: input(JSON) + 사진 파일들을 multipart로 전송 */
+    async _callEngine(input, files = []) {
+        const form = new FormData();
+        form.append('input', JSON.stringify(input));
+        for (const file of files)
+            form.append('files', file, file.name);
+        const response = await fetch(ENGINE_RUN_URL, {
+            method: 'POST',
+            headers: { Authorization: ENGINE_AUTH },
+            body: form
+        });
+        const raw = await response.json();
+        const data = (raw === null || raw === void 0 ? void 0 : raw.result) || {};
+        if ((data === null || data === void 0 ? void 0 : data.status) !== 'success') {
+            throw new Error((data === null || data === void 0 ? void 0 : data.error) || (raw === null || raw === void 0 ? void 0 : raw.error) || 'AI 엔진 호출에 실패했습니다.');
         }
-        this.videoFile = file;
-        this.capturedVideoUrl = URL.createObjectURL(file);
+        return data.result;
     }
-    async _onAnalyzeVideo() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        if (!this.videoFile) {
-            console.warn('선택된 동영상이 없습니다.');
+    /* [1단계] 촬영 가이드 생성 (plan-shots) */
+    async _loadShotGuide() {
+        const checklist = this.engineChecklist;
+        if (!checklist.length) {
+            notify({ message: '체크리스트 항목이 없습니다.', level: 'warn' });
             return;
         }
         try {
-            this.analyzing = true;
-            const form = new FormData();
-            form.append('files', this.videoFile, this.videoFile.name);
-            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
-                method: 'POST',
-                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
-                body: form
-            });
-            const data = await response.json();
-            this.frame = {
-                file_id: (_b = (_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.output_files[0]) === null || _b === void 0 ? void 0 : _b.file_id,
-                download_url: (_d = (_c = data === null || data === void 0 ? void 0 : data.result) === null || _c === void 0 ? void 0 : _c.output_files[0]) === null || _d === void 0 ? void 0 : _d.download_url,
-                file_path: (_f = (_e = data === null || data === void 0 ? void 0 : data.result) === null || _e === void 0 ? void 0 : _e.frames[0]) === null || _f === void 0 ? void 0 : _f.file_path,
-                calibration: (_g = data === null || data === void 0 ? void 0 : data.result) === null || _g === void 0 ? void 0 : _g.calibration
-            };
+            this.loading = true;
+            this.loadingText = 'AI 촬영 가이드 생성 중...';
+            this.guide = await this._callEngine({ action: 'plan-shots', checklist });
         }
         catch (error) {
-            console.error('동영상 업로드 실패:', error);
+            console.error('촬영 가이드 생성 실패:', error);
+            notify({ message: error.message, level: 'error' });
         }
         finally {
-            this.analyzing = false;
-        }
-    }
-    _onRetry() {
-        // Clear current selection and reopen camera
-        if (this.capturedVideoUrl) {
-            URL.revokeObjectURL(this.capturedVideoUrl);
+            this.loading = false;
         }
-        this.capturedVideoUrl = null;
-        this.videoFile = null;
-        this.frame = null;
-        this.selectedPoints = { x1: null, y1: null, x2: null, y2: null };
-        this.displayedImageRect = null;
-        this.frameNaturalWidth = 0;
-        this.frameNaturalHeight = 0;
-        this.cameraInputEl.value = '';
-        this.distance = null;
-        this.unit = null;
-        this.analyzingError = null;
     }
-    _hasTwoPoints() {
-        const { x1, y1, x2, y2 } = this.selectedPoints;
-        return x1 !== null && y1 !== null && x2 !== null && y2 !== null;
-    }
-    _renderMarkers() {
-        if (!this.displayedImageRect)
-            return html ``;
-        const { left, top, width, height } = this.displayedImageRect;
-        const { x1, y1, x2, y2 } = this.selectedPoints;
-        const toDisplay = (x, y) => {
-            const dx = left + (x * width) / (this.frameNaturalWidth || 1);
-            const dy = top + (y * height) / (this.frameNaturalHeight || 1);
-            return { dx, dy };
-        };
-        return html `
-      <!-- 첫 번째 점 -->
-      ${x1 !== null && y1 !== null
-            ? (() => {
-                const p = toDisplay(x1, y1);
-                return html `<div class="point-marker point-1" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
-            })()
-            : ''}
-      <!-- 두 번째 점 -->
-      ${x2 !== null && y2 !== null
-            ? (() => {
-                const p = toDisplay(x2, y2);
-                return html `<div class="point-marker point-2" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
-            })()
-            : ''}
-      <!-- 두점 사이 선 -->
-      ${this._hasTwoPoints()
-            ? (() => {
-                const p1 = toDisplay(x1, y1);
-                const p2 = toDisplay(x2, y2);
-                const cx = (p1.dx + p2.dx) / 2;
-                const cy = (p1.dy + p2.dy) / 2;
-                // 선의 길이와 각도 계산
-                const length = Math.sqrt(Math.pow(p2.dx - p1.dx, 2) + Math.pow(p2.dy - p1.dy, 2));
-                const angle = Math.atan2(p2.dy - p1.dy, p2.dx - p1.dx) * (180 / Math.PI);
-                return html `
-              <!-- DIV로 그린 선 -->
-              <div
-                class="line-overlay"
-                style="
-                  left: ${p1.dx}px; 
-                  top: ${p1.dy}px; 
-                  width: ${length}px; 
-                  height: 3px;
-                  transform: rotate(${angle}deg);
-                "
-              ></div>
-              <!-- 거리 라벨 -->
-              ${this.analyzingError
-                    ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.analyzingError}</div>`
-                    : this.distance && this.unit
-                        ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.distance} ${this.unit}</div>`
-                        : ''}
-            `;
-            })()
-            : ''}
-    `;
-    }
-    async _onAnalyzePhoto() {
-        if (!this.frame) {
-            console.warn('분석할 사진이 없습니다.');
-            return;
-        }
-        if (!this._hasTwoPoints()) {
-            console.warn('두 점을 먼저 선택해 주세요.');
+    /* [2단계] 자동 판정 실행 (inspect)
+     * - 최초 판정: 전체 사진 + 전체 체크리스트
+     * - 재검사(재촬영 패널): 이번에 새로 찍은 사진만 + 해당 항목만 재판정 후 결과 병합 */
+    async _runInspection() {
+        const isRecapture = this.panel === 'recapture' && !!this.selectedItem;
+        // 재검사는 recaptureBase 이후에 찍은 사진만 전송
+        const files = (isRecapture ? this.photos.slice(this.recaptureBase) : this.photos).map(p => p.file);
+        if (!files.length) {
+            notify({ message: '촬영된 사진이 없습니다.', level: 'warn' });
             return;
         }
+        const checklist = isRecapture
+            ? this.engineChecklist.filter(c => c.item_id === this.selectedItem.item_id)
+            : this.engineChecklist;
         try {
-            this.analyzing = true;
-            const payload = {
-                x1: this.selectedPoints.x1,
-                y1: this.selectedPoints.y1,
-                x2: this.selectedPoints.x2,
-                y2: this.selectedPoints.y2,
-                file_path: this.frame.file_path,
-                calibration: this.frame.calibration
-            };
-            const form = new FormData();
-            form.append('input', JSON.stringify(payload));
-            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
-                method: 'POST',
-                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
-                body: form
-            });
-            const result = await response.json();
-            const { distance, unit, error } = result.result || {};
-            this.distance = distance;
-            this.unit = unit;
-            this.analyzingError = error;
+            this.loading = true;
+            this.loadingText = 'AI 자동 판정 중... (최대 1~2분 소요)';
+            const result = await this._callEngine({ action: 'inspect', checklist }, files);
+            if (isRecapture) {
+                this._mergeRecaptureResult(result);
+            }
+            else {
+                this.result = result;
+            }
+            this.panel = 'none';
+            this.selectedItem = null;
+            this.mainPhotoIndex = 0;
         }
         catch (error) {
-            console.error('사진 분석 실패:', error);
+            console.error('AI 자동 판정 실패:', error);
+            notify({ message: error.message, level: 'error' });
         }
         finally {
-            this.analyzing = false;
+            this.loading = false;
         }
     }
-    async _savePhoto() {
-        var _a, _b, _c;
-        if (!this.frame || !this._hasTwoPoints() || this.distance === null || !this.unit) {
-            notify({ message: '분석 완료 후 저장할 수 있습니다.', level: 'warn' });
+    /* 재검사(부분 전송) 결과를 기존 전체 결과에 병합
+     * - used_images는 전송한 부분집합 기준 1-based → 전체 사진 인덱스로 보정(recaptureBase 가산)
+     * - 해당 항목만 교체 후 summary 재계산 */
+    _mergeRecaptureResult(result) {
+        var _a, _b;
+        const base = this.recaptureBase;
+        const updated = ((result === null || result === void 0 ? void 0 : result.items_sorted) || (result === null || result === void 0 ? void 0 : result.items) || []).map((it) => (Object.assign(Object.assign({}, it), { used_images: (it.used_images || []).map((n) => n + base) })));
+        const byId = new Map(updated.map((it) => [it.item_id, it]));
+        const replace = (arr) => (arr || []).map(it => byId.get(it.item_id) || it);
+        const items = replace((_a = this.result) === null || _a === void 0 ? void 0 : _a.items);
+        const itemsSorted = ((_b = this.result) === null || _b === void 0 ? void 0 : _b.items_sorted) ? replace(this.result.items_sorted) : undefined;
+        const summary = { pass: 0, fail: 0, hold: 0, pending: 0, error: 0 };
+        for (const it of itemsSorted || items)
+            summary[it.verdict] = (summary[it.verdict] || 0) + 1;
+        this.result = Object.assign(Object.assign(Object.assign(Object.assign({}, this.result), { items }), (itemsSorted ? { items_sorted: itemsSorted } : {})), { summary });
+    }
+    /* ─── 사진 선택 ─── */
+    /* 슬롯 클릭 → 사진 선택기 열기 (모바일: 촬영/앨범 선택 팝업, 채워진 슬롯이면 교체) */
+    _openPhotoPicker(slotIndex = null) {
+        var _a;
+        this.pendingSlotIndex = slotIndex;
+        (_a = this.photoInputEl) === null || _a === void 0 ? void 0 : _a.click();
+    }
+    _onPhotosSelected(event) {
+        const input = event.target;
+        const files = Array.from((input === null || input === void 0 ? void 0 : input.files) || []).filter(f => f.type.startsWith('image/') || /\.heic$/i.test(f.name));
+        input.value = '';
+        const slotIndex = this.pendingSlotIndex;
+        this.pendingSlotIndex = null;
+        if (!files.length)
             return;
-        }
-        const checklistId = (_b = (_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.checklist) === null || _b === void 0 ? void 0 : _b.id;
-        let file;
-        try {
-            file = await this.getCurrentImage();
-        }
-        catch (e) {
-            notify({ message: '이미지 합성에 실패했습니다.', level: 'error' });
+        // 채워진 슬롯을 클릭한 경우 → 해당 사진 교체 (첫 파일만 사용)
+        if (slotIndex !== null && slotIndex < this.photos.length) {
+            URL.revokeObjectURL(this.photos[slotIndex].url);
+            const next = [...this.photos];
+            next[slotIndex] = { file: files[0], url: URL.createObjectURL(files[0]) };
+            this.photos = next;
             return;
         }
-        const response = await client.mutate({
-            mutation: gql `
-        mutation ($attachments: [NewAttachment!]!) {
-          createAttachments(attachments: $attachments) {
-            id
-          }
+        // 빈 슬롯/추가 → 순서대로 뒤에 추가
+        // 엔진 제한은 요청(호출)당 MAX_IMAGES장. 재검사는 새로 찍은 사진만 별도 전송되므로
+        // 누적 합계가 아니라 이번 회차(최초=전체, 재검사=recaptureBase 이후) 기준으로만 제한한다.
+        const batchBase = this.panel === 'recapture' ? this.recaptureBase : 0;
+        const cap = batchBase + MAX_IMAGES;
+        if (this.photos.length + files.length > cap) {
+            notify({ message: `사진은 회차당 최대 ${MAX_IMAGES}장까지 사용할 수 있습니다.`, level: 'warn' });
+            files.length = Math.max(0, cap - this.photos.length);
+            if (!files.length)
+                return;
         }
-      `,
-            variables: {
-                attachments: [{ file, refBy: checklistId, refType: 'Checklist', description: (_c = this.buildingInspection) === null || _c === void 0 ? void 0 : _c.status }]
-            },
-            context: { hasUpload: true }
-        });
-        if (!response.errors) {
-            notify({ message: '사진 대지를 저장하였습니다.', level: 'info' });
+        this.photos = [...this.photos, ...files.map(file => ({ file, url: URL.createObjectURL(file) }))];
+    }
+    _resetAll() {
+        this._resetPhotos();
+        this.guide = null;
+        this.result = null;
+        this.panel = 'none';
+        this.selectedItem = null;
+        this.mainPhotoIndex = 0;
+        this.recaptureBase = 0;
+    }
+    /* ─── 패널 열기/닫기 ─── */
+    _openDetail(item) {
+        // 보류(hold)는 추가 촬영이 필요한 케이스 → 상세 대신 추가 촬영 UI를 바로 표시
+        if (item.verdict === 'hold') {
+            this._openRecapture(item);
             return;
         }
-        return response.data.createAttachments;
+        this.selectedItem = item;
+        this.mainPhotoIndex = 0; // 선택 항목의 첫 사용 사진부터 표시
+        this.panel = 'detail';
+    }
+    _openRecapture(item) {
+        this.selectedItem = item;
+        this.recaptureBase = this.photos.length;
+        this.panel = 'recapture';
+    }
+    /* 종합 리포트 항목 펼치기/접기 (한 번에 하나만 펼침) */
+    _toggleReportItem(id) {
+        this.expandedReportId = this.expandedReportId === id ? null : id;
+    }
+    _sortedItems() {
+        var _a, _b;
+        return ((_a = this.result) === null || _a === void 0 ? void 0 : _a.items_sorted) || ((_b = this.result) === null || _b === void 0 ? void 0 : _b.items) || [];
     }
-    async getCurrentImage() {
-        if (!this.imageWrapperEl) {
-            throw new Error('이미지 영역을 찾을 수 없습니다.');
+    /* ─── [6단계] 검사 등록: 감리자 판정 자동 반영 + AI판단 근거 첨부 ─── */
+    async _registerInspection() {
+        var _a, _b;
+        const items = this._sortedItems();
+        if (!items.length) {
+            notify({ message: '판정 결과가 없습니다.', level: 'warn' });
+            return;
         }
+        // 적합/부적합으로 자동 판정된 항목만 반영 (보류/미지원/오류는 미검사로 건너뜀)
+        const judged = items.filter(it => it.verdict === 'pass' || it.verdict === 'fail');
         try {
-            // html2canvas로 .image-wrapper 영역 캡처
-            const canvas = await html2canvas(this.imageWrapperEl, {
-                backgroundColor: null, // 투명 배경
-                scale: 1, // 1:1 스케일
-                useCORS: true, // CORS 이미지 허용
-                allowTaint: false, // 보안상 false
-                logging: false // 로그 비활성화
-            });
-            // 캔버스를 Blob으로 변환
-            const blob = await new Promise(resolve => {
-                canvas.toBlob(resolve, 'image/png', 1.0);
-            });
-            // File 객체로 변환하여 반환
-            return new File([blob], `inspection_${Date.now()}.png`, {
-                type: 'image/png'
-            });
+            this.loading = true;
+            this.loadingText = '검사 결과 등록 중...';
+            // 1) 감리자 적합/부적합 자동 채움 (적합/부적합 판정된 항목만, 없으면 건너뜀)
+            if (judged.length) {
+                const response = await client.mutate({
+                    mutation: gql `
+            mutation UpdateChecklistItemsAiJudgment($items: [ChecklistItemAiJudgment!]!) {
+              updateChecklistItemsAiJudgment(items: $items)
+            }
+          `,
+                    variables: {
+                        items: judged.map(it => ({
+                            id: it.item_id,
+                            supervisoryConfirmStatus: it.verdict === 'pass' ? 'T' : 'F'
+                        }))
+                    }
+                });
+                if (response.errors)
+                    throw new Error(((_a = response.errors[0]) === null || _a === void 0 ? void 0 : _a.message) || '검사 등록에 실패했습니다.');
+            }
+            // 2) 항목별 첨부: 판단 근거(AI판단 텍스트) + 근거 사진 (판정 여부와 무관하게 전체 항목)
+            const attachments = [];
+            for (const it of items) {
+                if (it.ai_report) {
+                    attachments.push({
+                        file: new File([it.ai_report], `AI판단_${(it.text || it.item_id).slice(0, 30)}.txt`, { type: 'text/plain' }),
+                        refBy: it.item_id,
+                        refType: 'ChecklistItem',
+                        description: 'AI판단'
+                    });
+                }
+                for (const n of it.used_images || []) {
+                    const photo = this.photos[n - 1];
+                    if (photo) {
+                        attachments.push({ file: photo.file, refBy: it.item_id, refType: 'ChecklistItem', description: 'AI판단' });
+                    }
+                }
+            }
+            if (attachments.length) {
+                const attachResponse = await client.mutate({
+                    mutation: gql `
+            mutation CreateAttachments($attachments: [NewAttachment!]!) {
+              createAttachments(attachments: $attachments) {
+                id
+              }
+            }
+          `,
+                    variables: { attachments },
+                    context: { hasUpload: true }
+                });
+                if (attachResponse.errors)
+                    throw new Error(((_b = attachResponse.errors[0]) === null || _b === void 0 ? void 0 : _b.message) || 'AI판단 자료 첨부에 실패했습니다.');
+            }
+            notify({ message: `검사 결과를 등록하였습니다. (자동 판정 ${judged.length}건 반영)` });
+            // 등록 후 체크리스트 화면으로 이동
+            navigate(`building-inspection-detail-checklist/${this.buildingInspectionId}`);
         }
         catch (error) {
-            console.error('html2canvas 캡처 실패:', error);
-            throw new Error('화면 캡처에 실패했습니다.');
+            console.error('검사 등록 실패:', error);
+            notify({ message: error.message, level: 'error' });
+        }
+        finally {
+            this.loading = false;
         }
     }
 };
 BuildingInspectionAiMeasurement.styles = [
     ScrollbarStyles,
-    CommonGristStyles,
     css `
       :host {
         display: grid;
@@ -481,272 +732,613 @@ BuildingInspectionAiMeasurement.styles = [
         background-color: #f7f7f7;
       }
 
+      * {
+        box-sizing: border-box;
+      }
+
       div[body] {
         display: flex;
-        justify-items: center;
-        gap: var(--spacing-medium);
-        margin: var(--spacing-medium);
+        flex-direction: column;
         min-height: 0;
+        overflow-y: auto;
+        padding: var(--spacing-medium);
+        gap: 12px;
       }
 
-      div[preview] {
-        flex: 1;
-        border: 2px solid #ddd;
-        border-radius: 10px;
+      .page-title {
+        text-align: center;
+        font-size: 16px;
+        font-weight: 700;
+        color: #333;
+      }
 
+      .page-title span[target] {
+        color: #7d2f2f;
+        text-decoration: underline;
+      }
+
+      /* ─── 1단계: 촬영 가이드 ─── */
+      .guide-container {
+        max-width: 560px;
+        width: 100%;
+        margin: 0 auto;
         display: flex;
-        justify-content: center;
-        align-items: center;
-        min-height: 0;
-        overflow: hidden;
+        flex-direction: column;
+        gap: 14px;
       }
 
-      div[preview] img {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
+      .step-badge {
+        align-self: flex-start;
+        background: #f7e9e9;
+        color: #7d2f2f;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 4px 10px;
+        border-radius: 12px;
       }
 
-      div[preview] video {
-        max-width: 100%;
-        max-height: 100%;
-        object-fit: contain;
+      .guide-title {
+        font-size: 26px;
+        font-weight: 800;
+        color: #222;
+        line-height: 1.3;
+        white-space: pre-line;
       }
 
-      div[preview] md-icon {
-        --md-icon-size: 160px;
+      .guide-desc {
+        font-size: 13px;
+        color: #777;
       }
 
-      .loading-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
+      .card {
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 10px;
+        padding: 16px;
       }
 
-      .loading-text {
+      .card h4 {
+        margin: 0 0 10px 0;
         font-size: 14px;
-        color: #666;
+        color: #333;
       }
 
-      .frame-container {
-        width: 100%;
-        height: 100%;
-        max-height: 100%;
-        min-height: 0;
-        overflow-y: auto;
+      .card ul {
+        margin: 0;
+        padding-left: 4px;
+        list-style: none;
         display: flex;
         flex-direction: column;
-        gap: 12px;
-        padding: 12px;
+        gap: 8px;
       }
 
-      .frames-header {
+      .card ul li {
+        font-size: 13px;
+        color: #555;
         display: flex;
+        gap: 8px;
+      }
+
+      .card ul li::before {
+        content: '';
+        flex-shrink: 0;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #7d2f2f;
+        margin-top: 6px;
+      }
+
+      .progress-row {
+        display: flex;
+        justify-content: space-between;
         align-items: center;
-        justify-content: center;
-        gap: 12px;
-        font-size: 20px;
+        font-size: 13px;
+        color: #555;
+        font-weight: 600;
+      }
+
+      .progress-bar {
+        height: 6px;
+        border-radius: 3px;
+        background: #eee;
+        overflow: hidden;
+      }
+
+      .progress-bar div {
+        height: 100%;
+        background: #7d2f2f;
+        transition: width 0.3s;
+      }
+
+      .next-shot {
+        font-size: 13px;
         font-weight: 700;
         color: #333;
+      }
+
+      .slot-grid {
+        display: flex;
+        gap: 8px;
+      }
+
+      .slot {
+        flex: 1;
+        aspect-ratio: 1;
+        border: 1px dashed #ccc;
+        border-radius: 8px;
+        background: #fafafa;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+        font-size: 12px;
+        color: #999;
         text-align: center;
-        padding-block: 8px;
+        padding: 4px;
+        overflow: hidden;
+        cursor: pointer;
+      }
+
+      .slot md-icon {
+        --md-icon-size: 28px;
+        color: #b5b5b5;
+      }
+
+      .slot img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: 6px;
       }
 
-      .frames-count {
+      .primary-button {
+        width: 100%;
+        border: none;
+        border-radius: 8px;
+        background: #7d2f2f;
+        color: #fff;
         font-size: 16px;
-        color: #777;
-        font-weight: 600;
+        font-weight: 700;
+        padding: 14px;
+        cursor: pointer;
       }
 
-      .frames-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-        gap: 12px;
+      .primary-button:disabled {
+        background: #ccc;
+        cursor: default;
       }
 
-      .frame-item {
+      .text-button {
         border: 1px solid #ddd;
         border-radius: 8px;
-        overflow: hidden;
         background: #fff;
+        color: #555;
+        font-size: 13px;
+        padding: 8px 14px;
         cursor: pointer;
-        transition:
-          box-shadow 0.2s,
-          transform 0.1s;
       }
 
-      .frame-item:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transform: translateY(-1px);
+      input[type='file'] {
+        display: none;
       }
 
-      .frame-item img {
-        display: block;
-        width: 100%;
-        height: 120px;
-        object-fit: cover;
+      /* ─── 2단계: 판정 결과 ─── */
+      .result-body {
+        display: flex;
+        gap: 14px;
+        align-items: flex-start;
+        min-height: 0;
       }
 
-      .image-wrapper {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        align-content: center;
+      .photo-pane {
+        flex: 1.1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .photo-pane .caption {
         text-align: center;
+        font-size: 12px;
+        color: #999;
       }
 
-      .point-marker {
-        position: absolute;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-        border: 2px solid #fff;
-        transform: translate(-50%, -50%);
-        pointer-events: none;
-        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
+      .photo-main {
+        border-radius: 10px;
+        overflow: hidden;
+        background: #000;
+        display: flex;
+        justify-content: center;
+        max-height: 480px;
       }
 
-      .point-1 {
-        background-color: #e53935;
+      .photo-main img {
+        max-width: 100%;
+        max-height: 480px;
+        object-fit: contain;
       }
 
-      .point-2 {
-        background-color: #1e88e5;
+      .photo-thumbs {
+        display: flex;
+        gap: 8px;
+        overflow-x: auto;
+        padding-bottom: 4px;
       }
 
-      .line-overlay {
-        position: absolute;
-        pointer-events: none;
-        background-color: #ff9800;
-        transform-origin: left center;
+      .photo-thumbs img {
+        width: 96px;
+        height: 72px;
+        object-fit: cover;
+        border-radius: 6px;
+        cursor: pointer;
+        border: 2px solid transparent;
       }
 
-      .distance-label {
-        position: absolute;
-        background: rgba(0, 0, 0, 0.7);
-        color: #fff;
-        font-size: 14px;
-        padding: 2px 6px;
-        border-radius: 4px;
-        transform: translate(-50%, -120%);
-        pointer-events: none;
-        white-space: nowrap;
+      .photo-thumbs img[selected] {
+        border-color: #7d2f2f;
       }
 
-      div[controls] {
-        width: 240px;
+      .items-pane {
+        flex: 1.4;
+        min-width: 0;
         display: flex;
         flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
+        gap: 10px;
       }
 
-      div[action-buttons] {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        gap: 15px;
+      .summary-banner {
+        background: #f7e9e9;
+        border: 1px solid #eedada;
+        color: #7d2f2f;
+        font-size: 13px;
+        font-weight: 700;
+        border-radius: 8px;
+        padding: 10px 14px;
       }
 
-      .switch-container {
+      .group-title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #333;
+        margin-top: 4px;
+      }
+
+      .item-card {
         display: flex;
-        align-items: center;
         gap: 10px;
-        font-size: 24px;
-        font-weight: bold;
+        align-items: flex-start;
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 10px;
+        padding: 12px;
+        cursor: pointer;
       }
 
-      ox-input-switch {
-        --ox-simple-switch-fullwidth: 68px;
-        --ox-simple-switch-fullheight: 34px;
-        --ox-simple-switch-thumbnail-size: 34px;
+      .item-card[selected] {
+        border-color: #7d2f2f;
+        box-shadow: 0 0 0 1px #7d2f2f inset;
       }
 
-      .camera-shutter {
+      .item-no {
+        flex-shrink: 0;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: #7d2f2f;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 700;
         display: flex;
         justify-content: center;
         align-items: center;
+      }
+
+      .item-main {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .item-name {
+        font-size: 14px;
+        font-weight: 700;
+        color: #222;
+        margin-bottom: 4px;
+      }
+
+      .item-desc {
+        font-size: 12px;
+        color: #777;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .chip {
+        display: inline-block;
+        font-size: 11px;
+        font-weight: 700;
+        border-radius: 4px;
+        padding: 2px 6px;
+        margin-right: 6px;
+        background: #eef2f7;
+        color: #3f71a0;
+      }
+
+      .chip-verdict {
+        font-size: 12px;
+        font-weight: 700;
+        color: #555;
+      }
+
+      .badge {
+        flex-shrink: 0;
+        font-size: 12px;
+        font-weight: 700;
+        border-radius: 14px;
+        padding: 5px 12px;
+        white-space: nowrap;
+      }
+
+      .badge[pass] {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
+
+      .badge[fail] {
+        background: #fdecea;
+        color: #c62828;
+      }
+
+      .badge[etc] {
+        background: #fff8e1;
+        color: #b7791f;
+      }
+
+      .capture-button {
+        flex-shrink: 0;
+        border: none;
+        border-radius: 14px;
+        background: #fff3e0;
+        color: #b7791f;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 6px 12px;
         cursor: pointer;
-        position: relative;
       }
 
-      .controls-title {
+      /* ─── 우측 패널 (상세/재촬영/리포트) ─── */
+      .side-pane {
+        flex: 1;
+        min-width: 280px;
+        max-width: 360px;
+        background: #fff;
+        border: 1px solid #e5e5e5;
+        border-radius: 10px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .side-pane h3 {
+        margin: 0;
+        font-size: 16px;
+        color: #222;
+      }
+
+      .detail-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .detail-header h3 {
         font-size: 18px;
+      }
+
+      .detail-summary {
+        font-size: 12px;
+        color: #555;
+        line-height: 1.7;
+        white-space: pre-line;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 10px;
+      }
+
+      .kv-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px;
+      }
+
+      .kv {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        padding: 10px 12px;
+        background: #fff;
+      }
+
+      .kv label {
+        font-size: 11px;
+        color: #999;
+      }
+
+      .kv span {
+        font-size: 15px;
         font-weight: 700;
         color: #333;
-        margin-bottom: 8px;
+      }
+
+      .kv .verdict-value[pass] {
+        color: #2e7d32;
+      }
+
+      .kv .verdict-value[fail] {
+        color: #c62828;
+      }
+
+      .reason-box {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        font-size: 12px;
+        line-height: 1.7;
+      }
+
+      .reason-verdict {
+        border-left: 3px solid #7d2f2f;
+        background: #fdf6f6;
+        color: #333;
+        padding: 8px 10px;
+      }
+
+      .why-box {
+        background: #fff8e1;
+        border: 1px solid #f4e4b5;
+        border-radius: 8px;
+        padding: 10px;
+        font-size: 12px;
+        color: #7a5c14;
+        line-height: 1.6;
+      }
+
+      .report-counts {
+        display: flex;
         text-align: center;
+        border: 1px solid #eee;
+        border-radius: 8px;
+        overflow: hidden;
       }
 
-      .camera-shutter md-icon {
-        --md-icon-size: 100px;
+      .report-counts div {
+        flex: 1;
+        padding: 10px 0;
       }
 
-      .camera-shutter input {
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        cursor: pointer;
+      .report-counts b {
+        display: block;
+        font-size: 20px;
       }
 
-      button {
-        padding: 10px 20px;
-        font-size: 16px;
-        border-radius: 5px;
-        border: none;
+      .report-counts small {
+        font-size: 11px;
+        color: #888;
+      }
+
+      .report-counts div[pass] b {
+        color: #2e7d32;
+      }
+
+      .report-counts div[fail] b {
+        color: #c62828;
+      }
+
+      .report-counts div[etc] b {
+        color: #b7791f;
+      }
+
+      .report-item {
+        border-bottom: 1px solid #f0f0f0;
+        font-size: 13px;
+        color: #333;
+      }
+
+      .report-head {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 0;
         cursor: pointer;
       }
 
-      button.save {
-        background-color: #4caf50;
-        color: white;
+      .report-head .report-text {
+        flex: 1;
+        min-width: 0;
+      }
 
-        &:disabled {
-          background-color: #ccc;
-          cursor: default;
-        }
+      .report-caret {
+        --md-icon-size: 20px;
+        color: #999;
+        transition: transform 0.2s;
       }
 
-      button.retry {
-        background-color: #f0ad4e;
-        color: white;
+      .report-caret[open] {
+        transform: rotate(180deg);
       }
 
-      button.photo {
-        background-color: #1e88e5;
-        color: white;
+      .report-basis {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        font-size: 12px;
+        color: #555;
+        background: #f7f7f7;
+        border-radius: 6px;
+        padding: 10px;
+        margin: 0 0 10px 0;
+      }
 
-        &:disabled {
-          background-color: #ccc;
-          cursor: default;
-        }
+      .report-basis .report-ai {
+        white-space: pre-line;
+        color: #333;
       }
 
+      .report-basis .report-used {
+        color: #888;
+      }
+
+      .report-item .verdict {
+        font-weight: 700;
+        flex-shrink: 0;
+      }
+
+      .report-item .verdict[pass] {
+        color: #2e7d32;
+      }
+
+      .report-item .verdict[fail] {
+        color: #c62828;
+      }
+
+      .report-item .verdict[etc] {
+        color: #b7791f;
+      }
+
+      /* ─── 로딩 오버레이 ─── */
       .loading-overlay {
         position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background: rgba(0, 0, 0, 0.5);
         display: flex;
-        flex-direction: column;
-        align-items: center;
         justify-content: center;
-        gap: 12px;
+        align-items: center;
         z-index: 2000;
       }
 
-      .loading-overlay .loading-container {
-        background: white;
-        padding: 32px;
+      .loading-overlay .box {
+        background: #fff;
+        padding: 32px 48px;
         border-radius: 12px;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 12px;
+        font-size: 14px;
+        color: #555;
+      }
+
+      .empty-state {
+        text-align: center;
+        color: #999;
+        font-size: 14px;
+        padding: 60px 0;
       }
     `
 ];
@@ -765,59 +1357,49 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "capturedVideoUrl", void 0);
+], BuildingInspectionAiMeasurement.prototype, "guide", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "videoFile", void 0);
+    __metadata("design:type", Array)
+], BuildingInspectionAiMeasurement.prototype, "photos", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "frame", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Boolean)
-], BuildingInspectionAiMeasurement.prototype, "analyzing", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "selectedPoints", void 0);
+], BuildingInspectionAiMeasurement.prototype, "result", void 0);
 __decorate([
     state(),
     __metadata("design:type", Number)
-], BuildingInspectionAiMeasurement.prototype, "frameNaturalWidth", void 0);
+], BuildingInspectionAiMeasurement.prototype, "mainPhotoIndex", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Number)
-], BuildingInspectionAiMeasurement.prototype, "frameNaturalHeight", void 0);
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "panel", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "displayedImageRect", void 0);
+], BuildingInspectionAiMeasurement.prototype, "selectedItem", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "distance", void 0);
+    __metadata("design:type", Number)
+], BuildingInspectionAiMeasurement.prototype, "recaptureBase", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "unit", void 0);
+], BuildingInspectionAiMeasurement.prototype, "expandedReportId", void 0);
 __decorate([
     state(),
-    __metadata("design:type", Object)
-], BuildingInspectionAiMeasurement.prototype, "analyzingError", void 0);
-__decorate([
-    query('img#frameImage'),
-    __metadata("design:type", HTMLImageElement)
-], BuildingInspectionAiMeasurement.prototype, "frameImageEl", void 0);
+    __metadata("design:type", Boolean)
+], BuildingInspectionAiMeasurement.prototype, "loading", void 0);
 __decorate([
-    query('div.image-wrapper'),
-    __metadata("design:type", HTMLDivElement)
-], BuildingInspectionAiMeasurement.prototype, "imageWrapperEl", void 0);
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionAiMeasurement.prototype, "loadingText", void 0);
 __decorate([
-    query('#cameraInput'),
-    __metadata("design:type", HTMLInputElement)
-], BuildingInspectionAiMeasurement.prototype, "cameraInputEl", void 0);
+    query('#photoInput'),
+    __metadata("design:type", HTMLInputElement
+    /* 슬롯 클릭으로 선택기를 연 경우 대상 슬롯 인덱스 (null이면 뒤에 추가) */
+    )
+], BuildingInspectionAiMeasurement.prototype, "photoInputEl", void 0);
 BuildingInspectionAiMeasurement = __decorate([
     customElement('building-inspection-detail-ai-measurement')
 ], BuildingInspectionAiMeasurement);