@dssp/dkpi 1.0.0-y.0 → 1.0.1

package/dist-client/pages/sv-project-detail.js

@@ -1,23 +1,42 @@
 import { __decorate, __metadata } from "tslib";
 import { navigate, PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
-import { PROJECT_STATE, ProjectState } from './sv-project-list';
+import { PROJECT_STATE } from './sv-project-list';
 import { client } from '@operato/graphql';
 import gql from 'graphql-tag';
+import moment from 'moment-timezone';
+import { isProjectTypeDomain, tenantHeaders } from '@dssp/project/dist-client/shared/domain-context';
+import '../components/kpi-boxplot-chart';
+import '../components/kpi-single-boxplot-chart';
+import '../components/kpi-radar-chart';
+import '../components/kpi-lookup-chart';
+import '../components/kpi-step-lookup-chart';
+import '../components/kpi-2d-lookup-chart';
 let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(PageView) {
     constructor() {
         super(...arguments);
         this.project = {};
+        this.kpiComprehensiveStats = [];
+        this.kpiYComprehensiveStats = [];
+        this.projectXKpiValues = [];
+        this.showScoreDistribution = false;
+        this.selectedKpi = null;
+        /** 이 프로젝트에 아직 한 번도 입력되지 않은 metric (active 한 manual/import 한정) */
+        this.pendingMetrics = [];
+        /** 현재 프로젝트의 모든 KpiMetricValue (metric.name 포함) — 2D lookup chart 의 progressRate / value 도출용. */
+        this.allKpiMetricValues = [];
     }
     get context() {
+        var _a;
         return {
-            title: '프로젝트 상세 정보'
+            title: !isProjectTypeDomain() && this.project ? `프로젝트 상세 정보 - ${(_a = this.project) === null || _a === void 0 ? void 0 : _a.name}` : '프로젝트 상세 정보'
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
         return html `
       <div content>
         <div left>
@@ -25,35 +44,65 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
             <div class="card-title">
               <div>${this.project.name}</div>
               <div class="triangle"></div>
+              <div
+                class="ghost-btn header-btn"
+                @click=${async () => {
+            if (isProjectTypeDomain()) {
+                navigate('project-update');
+                return;
+            }
+            const id = this.project.id || (await this._resolveProjectIdFromDomain());
+            if (id)
+                navigate(`project-update/${id}`);
+        }}
+              >
+                <md-icon slot="">assignment</md-icon>
+                <div>프로젝트 수정</div>
+              </div>
             </div>
 
             <div class="top-info" style="margin-top: 10px;">
-              <img pic src=${((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || '/assets/images/no-image.png'} alt="project" />
+              <img pic src=${((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || '/assets/images/project-image.png'} alt="project" />
               <div class="info">
-                <div class="address">• ${(_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.address}</div>
                 <div class="row">
-                  <div class="label">• 공사기간</div>
+                  <div class="label">• 주소</div>
+                  <div class="value">${(_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.address}</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 계획공사기간</div>
                   <div class="value">${this.project.startDate} ~ ${this.project.endDate}</div>
                 </div>
                 <div class="row">
-                  <div class="label">• 현장상태</div>
+                  <div class="label">• 프로젝트 상태</div>
                   <div class="value status-value">${PROJECT_STATE[this.project.state]}</div>
                 </div>
                 <div class="row">
-                  <div class="label">• 요청상세</div>
-                  <div class="value bold">???</div>
+                  <div class="label">• 유형</div>
+                  <div class="value">
+                    ${this.project.sectorType === 'PUBLIC'
+            ? '공공'
+            : this.project.sectorType === 'PRIVATE'
+                ? '민간'
+                : '-'}
+                  </div>
                 </div>
                 <div class="row">
-                  <div class="label">• 알람</div>
-                  <div class="value">???</div>
+                  <div class="label">• 용도</div>
+                  <div class="value">
+                    ${this.project.buildingUsage === 'RESIDENTIAL'
+            ? '주거'
+            : this.project.buildingUsage === 'NON_RESIDENTIAL'
+                ? '비주거'
+                : '-'}
+                  </div>
                 </div>
               </div>
             </div>
 
             <div class="detail-grid">
               <div class="grid-item row">
-                <div class="label">• 공사비</div>
-                <div class="value">${((_d = (_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.constructionCost) === null || _d === void 0 ? void 0 : _d.toLocaleString()) || '-'} 원</div>
+                <div class="label">• 계획공사비</div>
+                <div class="value">${((_d = (_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.constructionCost) === null || _d === void 0 ? void 0 : _d.toLocaleString()) || '-'} 억원</div>
               </div>
               <div class="grid-item row">
                 <div class="label">• 연면적</div>
@@ -61,11 +110,11 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
               </div>
               <div class="grid-item row">
                 <div class="label">• 용적률</div>
-                <div class="value">??? %</div>
+                <div class="value">${((_h = (_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.floorAreaRatio) === null || _h === void 0 ? void 0 : _h.toLocaleString()) || '-'} %</div>
               </div>
               <div class="grid-item row">
-                <div class="label">• 투입인력</div>
-                <div class="value">??? 명</div>
+                <div class="label">• 총 투입인력(M/M)</div>
+                <div class="value">${((_k = (_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.workerCount) === null || _k === void 0 ? void 0 : _k.toLocaleString()) || '-'} 명</div>
               </div>
             </div>
           </div>
@@ -74,117 +123,286 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
             <div class="card-title">
               <div>입력 대기 중</div>
               <div class="triangle"></div>
+              <div
+                class="ghost-btn header-btn"
+                @click=${async () => {
+            if (isProjectTypeDomain()) {
+                navigate('project-complete');
+                return;
+            }
+            const id = this.project.id || (await this._resolveProjectIdFromDomain());
+            if (id)
+                navigate(`project-complete/${id}`);
+        }}
+              >
+                <md-icon slot="">assignment_turned_in</md-icon>
+                <div>KPI 데이타입력</div>
+              </div>
             </div>
             <div class="sub-desc">
-              현재 입력 기한이 도래했거나, 입력이 지연되고 있는 KPI 항목입니다. 해당 항목에 대한 데이터를 입력 해 주시기 바랍니다.
+              이 프로젝트에 아직 입력되지 않은 KPI 항목입니다. 해당 항목에 대한 데이터를 입력 해 주시기 바랍니다.
             </div>
 
             <div class="list-block">
-              <div class="list-title">• 입력 대기 중 2건</div>
-              <div class="list-text"># 2033312-Y5.1 : 검수자재 불합격률</div>
-              <div class="list-text"># 2033312-Y5.1 : 품질시험 불합격 건수</div>
-            </div>
-            <div class="list-block">
-              <div class="list-title">• 입력 기한 초과 1건</div>
-              <div class="list-text">
-                # 2033312-Y5.2 : 검측 불합격률 <span class="warn">2025.2.12 <md-icon>report</md-icon></span>
-              </div>
-            </div>
-            <div class="list-block">
-              <div class="list-title">• 입력 예정 4건</div>
-              <div class="list-text"># 2033320-Y4.32 : 연면적 대비 공기입력</div>
-              <div class="list-text"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>
-              <div class="list-text"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>
-              <div class="list-text"># 2096412-Y5.31 : 현장별 일정 이탈 수준</div>
-            </div>
-            <div class="list-block">
-              <div class="list-title">• 입력 기한 없음 3건</div>
-              <div class="list-text"># 2033320-Y4.32 : 연면적 대비 공기입력</div>
-              <div class="list-text"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>
-              <div class="list-text"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>
+              <div class="list-title">• 미입력 ${this.pendingMetrics.length}건</div>
+              ${this.pendingMetrics.length === 0
+            ? html `<div class="list-text">모든 항목이 입력되었습니다.</div>`
+            : this.pendingMetrics.map(m => html `
+                        <div
+                          class="list-text"
+                          style="cursor: pointer;"
+                          @click=${async () => {
+                if (isProjectTypeDomain()) {
+                    navigate('project-complete');
+                    return;
+                }
+                const id = this.project.id || (await this._resolveProjectIdFromDomain());
+                if (id)
+                    navigate(`project-complete/${id}`);
+            }}
+                        >
+                          # ${m.name}
+                        </div>
+                      `)}
             </div>
           </div>
         </div>
 
         <div right>
-          ${this.project.state === ProjectState.ONGOING
-            ? html `
-                <div class="button-line">
-                  <div class="ghost-btn" @click=${() => navigate(`project-update/${this.project.id}`)}>
-                    <md-icon slot="">assignment</md-icon>
-                    <div>프로젝트 수정</div>
-                  </div>
-                  <div class="ghost-btn" @click=${() => navigate(`project-complete/${this.project.id}`)}>
-                    <md-icon slot="">assignment_turned_in</md-icon>
-                    <div>프로젝트 완공 처리</div>
-                  </div>
-                </div>
-              `
-            : ''}
-
           <div class="card kpi-box">
             <div class="kpi-header">
-              <div>종합 KPI</div>
-              <div class="triangle"></div>
-            </div>
-            <div class="kpi-desc">
-              프로젝트의 생산성, 품질, 안전, 환경, 비용, 일정 등 6개의 성과를 종합한 종합KPI 포인트 정보와 각 지표별
-              분포차트입니다.
+              <div>
+                <div>종합 KPI</div>
+                <div class="triangle"></div>
+              </div>
+              <div class="kpi-desc">프로젝트의 6개 성과를 종합한 종합 KPI포인트와 각 지표별 분포</div>
             </div>
 
             <div class="kpi-summary">
               <div class="mini-boxplot" title="boxplot placeholder">
-                <div class="boxplot-area">boxplot area</div>
+                <div class="boxplot-area">
+                  <kpi-single-boxplot-chart .data=${this.getBoxPlotDataForProject(this.project)}></kpi-single-boxplot-chart>
+                </div>
 
                 <div class="boxplot-point">
-                  <div class="value">???</div>
+                  <div class="value">${this.project.kpi ? this.project.kpi.toFixed(1) : '-'}</div>
                   <div class="label">Point</div>
                 </div>
               </div>
 
-              <div class="spider-area">spider chart</div>
+              <div class="spider-area">
+                <sv-kpi-radar-chart
+                  .data=${this.getRadarChartData().data}
+                  .categories=${this.getRadarChartData().categories}
+                  .currentGroup=${'프로젝트성과'}
+                ></sv-kpi-radar-chart>
+              </div>
             </div>
           </div>
 
           <div class="card group-box">
             <div class="kpi-header">
-              <div>그룹별 분포</div>
-              <div class="triangle"></div>
+              <div>
+                <div>성과영역별 KPI</div>
+                <div class="triangle"></div>
+              </div>
             </div>
             <div class="desc">
-              Boxplot(박스플롯)은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치 등)를 보여줍니다.
-              박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 검정색 가로선은 중앙값(메디안), 초록색 원은 평균값(Mean)을 의미합니다.
-              이 프로젝트의 값은 진한 오렌지색 원으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수 있습니다.
+              Boxplot(박스플롯)은 박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 파란색 가로선은 중앙값(median), 초록색 원은
+              평균값(Mean)을 의미합니다. 당해 프로젝트의 값은 붉은색 원으로 표시됩니다.
+            </div>
+            <div class="group-chart">
+              <sv-kpi-boxplot-chart .data=${this.getYKpiBoxplotData()}></sv-kpi-boxplot-chart>
+            </div>
+          </div>
+
+          <div class="metrics-card">
+            <div class="metrics-header">
+              <div class="title">
+                <span>성과영역별 KPI 측정값</span>
+                <div class="triangle"></div>
+              </div>
+            </div>
+            <div class="desc">
+              프로젝트의 6개 성과별 상세 주요 매트릭 데이터 (각 세부 항목을 클릭하시면 평가 기준표를 확인할 수 있습니다)
+            </div>
+            <div class="metrics-content">
+              ${Object.values(this.getMetricGroups()).map(group => html `
+                  <div class="metric-group">
+                    <div class="metric-group-header">
+                      <div class="metric-group-icon"></div>
+                      <span>${group.name}</span>
+                      <span style="margin-left: 10px; color: #4caf50; font-weight: 700;">[${group.score}]</span>
+                    </div>
+                    <div class="metric-items">
+                      ${group.metrics.map(metric => html `
+                          <div class="metric-item">
+                            <span
+                              class="metric-label"
+                              @click=${() => this._onMetricLabelClick(metric)}
+                              title="클릭하시면 평가 기준표를 확인할 수 있습니다"
+                            >
+                              ${metric.label}
+                            </span>
+                            <span class="metric-value">${metric.value}</span>
+                          </div>
+                        `)}
+                    </div>
+                  </div>
+                `)}
             </div>
-            <div class="group-chart"></div>
           </div>
         </div>
       </div>
+
+      ${this.showScoreDistribution && this.selectedKpi
+            ? html `
+              <div class="popup-overlay" @click=${this._closePopup}>
+                <div class="popup-content" @click=${(e) => e.stopPropagation()}>
+                  <div class="popup-header">
+                    <div class="popup-title">${this.selectedKpi.kpiName} — 성과 분포</div>
+                    ${this.selectedKpi.score !== undefined && this.selectedKpi.score !== null
+                ? html `
+                          <div class="popup-score">
+                            <span class="score-value">${Number(this.selectedKpi.score).toFixed(1)}</span>
+                          </div>
+                        `
+                : ''}
+                    <button class="popup-close" @click=${this._closePopup}>×</button>
+                  </div>
+                  <div class="popup-chart-container">
+                    ${
+            /*
+             * scoreType 기반 차트 분기:
+             *
+             * CUSTOM (X13 등): 2D 룩업 히트맵 — 단, 증강데이터에서는 value가
+             *   이미 1~5 정수(룩업 결과)이므로 히트맵 대신 게이지로 폴백.
+             *   실제 프로젝트에서는 value가 편차율(소수점)이므로 히트맵 표시.
+             *
+             * LOOKUP: 성과 분포 커브 (kpi-lookup-chart)
+             * ASSESSMENT: 5단계 게이지 (kpi-lookup-chart 자동 감지)
+             */ ''}
+                    ${
+            // SL-PA 결과(X34 품질, X43 안전) 만 계단형 등급 분포 차트로 표시.
+            // (다른 KPI 차트 경로에는 영향 없음)
+            this.selectedKpi.pattern === 'X34' || this.selectedKpi.pattern === 'X43'
+                ? html `
+                          <kpi-step-lookup-chart
+                            .grades=${this.selectedKpi.grades || []}
+                            .value=${this.selectedKpi.value}
+                            .score=${(_l = this.selectedKpi.score) !== null && _l !== void 0 ? _l : null}
+                            unit=${this.selectedKpi.unit || ''}
+                          ></kpi-step-lookup-chart>
+                        `
+                : // 2D lookup KPI (X13 등) 는 항상 등급 기준 + 히트맵 함께 표시 (value 가
+                    // 정수든 소수든 일관). _renderAssessmentGrades 안의 is2D 분기가 히트맵
+                    // 같이 그림. 그 외 ASSESSMENT 도 등급 기준, LOOKUP 은 분포 커브.
+                    this.selectedKpi.scoreType === 'CUSTOM' || ((_m = this.selectedKpi.grades) === null || _m === void 0 ? void 0 : _m.type) === 'PROGRESS_DEVIATION_LOOKUP'
+                        ? this._renderAssessmentGrades()
+                        : this._isAssessmentOrIntegerScore()
+                            ? this._renderAssessmentGrades()
+                            : html `
+                              <kpi-lookup-chart
+                                .grades=${this.selectedKpi.grades || []}
+                                .value=${this.selectedKpi.value}
+                                .score=${(_o = this.selectedKpi.score) !== null && _o !== void 0 ? _o : null}
+                                .scoreType=${this.selectedKpi.scoreType || ''}
+                                .valueType=${this.selectedKpi.valueType || ''}
+                                unit=${this.selectedKpi.unit || ''}
+                              ></kpi-lookup-chart>
+                            `}
+                  </div>
+                </div>
+              </div>
+            `
+            : ''}
     `;
     }
     async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            await this.initProject(lifecycle.resourceId);
+        if (!this.active)
+            return;
+        let projectId = lifecycle.resourceId;
+        // 프로젝트 테넌트 컨텍스트(/project/<code>/) 에서 진입한 경우 resourceId 가 비어있다.
+        // 현재 도메인의 subdomain(= Project.code) 으로 프로젝트를 역조회.
+        if (!projectId) {
+            projectId = await this._resolveProjectIdFromDomain();
         }
+        if (!projectId)
+            return;
+        // initProject 의 GraphQL 응답을 기다리지 않고 project.id 를 즉시 채워서,
+        // 링크의 `project-update/${project.id}` 가 절대 undefined 가 되지 않도록 보장.
+        this.project = Object.assign(Object.assign({}, this.project), { id: projectId });
+        // 후속 query 들이 tenant 컨텍스트로 동작하도록 project.code 를 먼저 가볍게 resolve.
+        // (tenant 컨텍스트에서 진입한 경우는 헤더 불필요 — tenantHeaders 가 빈 객체 반환.)
+        if (!isProjectTypeDomain()) {
+            await this._resolveProjectCode(projectId);
+        }
+        this.initProject(projectId);
+        this.getKpiComprehensiveStats();
+        this.getKpiYComprehensiveStats();
+        this.getProjectXKpiValues(projectId);
+    }
+    async _resolveProjectCode(projectId) {
+        var _a, _b;
+        try {
+            const resp = await client.query({
+                query: gql `
+          query ProjectCode($id: String!) {
+            project(id: $id) {
+              id
+              code
+            }
+          }
+        `,
+                variables: { id: projectId }
+            });
+            const code = (_b = (_a = resp.data) === null || _a === void 0 ? void 0 : _a.project) === null || _b === void 0 ? void 0 : _b.code;
+            if (code) {
+                this.project = Object.assign(Object.assign({}, this.project), { code });
+            }
+        }
+        catch (e) {
+            console.warn('[project-detail] project.code resolve 실패', e);
+        }
+    }
+    async _resolveProjectIdFromDomain() {
+        var _a, _b;
+        const response = await client.query({
+            query: gql `
+        query CurrentProject {
+          currentProject {
+            id
+          }
+        }
+      `
+        });
+        return ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.currentProject) === null || _b === void 0 ? void 0 : _b.id) || '';
     }
     async initProject(projectId = '') {
-        var _a;
+        var _a, _b;
         const response = await client.query({
             query: gql `
         query Project($id: String!) {
           project(id: $id) {
             id
+            code
             name
             state
             startDate
             endDate
             projectType
+            sectorType
+            buildingUsage
             mainPhoto {
               fullpath
             }
             totalProgress
             weeklyProgress
             kpi
+            kpiValues {
+              kpiName
+              value
+            }
             inspPassRate
             robotProgressRate
             structuralSafetyRate
@@ -195,6 +413,10 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
               latitude
               longitude
               area
+              coverageRatio
+              floorAreaRatio
+              siteType
+              workerCount
               clientCompany
               constructionCompany
               supervisoryCompany
@@ -220,14 +442,576 @@ let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(
           }
         }
       `,
-            variables: { id: projectId }
+            variables: { id: projectId },
+            context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
         });
         if (response.errors)
             return;
-        this.project = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.project) || {};
+        this.project = ((_b = response.data) === null || _b === void 0 ? void 0 : _b.project) || {};
+        this.updateContext();
+        this._loadPendingMetrics();
+    }
+    /**
+     * 이 프로젝트의 미입력 KPI metric 들을 조회 — Step 1/2 와 동일 기준.
+     *  - 대상: active=true 인 manual/import metric (자동수집/외부API 제외)
+     *  - 판정:
+     *    · MONTH metric → 전월 row (periodType='MONTH', valueDate startsWith 전월) 없으면 pending
+     *    · 그 외        → (metric, periodType) 매칭 row 없으면 pending
+     */
+    async _loadPendingMetrics() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!((_a = this.project) === null || _a === void 0 ? void 0 : _a.id)) {
+            this.pendingMetrics = [];
+            return;
+        }
+        try {
+            // 1) Active manual/import metric 정의 목록 (periodType 포함)
+            const metricsResp = await client.query({
+                query: gql `
+          query KpiMetrics {
+            kpiMetrics {
+              items {
+                id
+                name
+                description
+                periodType
+                collectType
+                active
+              }
+            }
+          }
+        `,
+                context: { headers: tenantHeaders((_b = this.project) === null || _b === void 0 ? void 0 : _b.code) }
+            });
+            // collectType 필터 제거 — Step 1/2 가 모든 metric 을 보여주므로 동일하게 전체 대상.
+            // active=false 인 metric 만 제외.
+            const targets = (((_d = (_c = metricsResp.data) === null || _c === void 0 ? void 0 : _c.kpiMetrics) === null || _d === void 0 ? void 0 : _d.items) || []).filter((m) => m.active);
+            if (targets.length === 0) {
+                this.pendingMetrics = [];
+                return;
+            }
+            // 2) 이 프로젝트의 모든 KpiMetricValue (metric.name 포함 — 2D 차트의 latest lookup 에도 사용)
+            const valuesResp = await client.query({
+                query: gql `
+          query KpiMetricValues($filters: [Filter!]) {
+            kpiMetricValues(filters: $filters) {
+              items {
+                metricId
+                periodType
+                valueDate
+                value
+                metric {
+                  id
+                  name
+                }
+              }
+            }
+          }
+        `,
+                variables: { filters: [{ name: 'org', operator: 'eq', value: this.project.id }] },
+                context: { headers: tenantHeaders((_e = this.project) === null || _e === void 0 ? void 0 : _e.code) }
+            });
+            const values = ((_g = (_f = valuesResp.data) === null || _f === void 0 ? void 0 : _f.kpiMetricValues) === null || _g === void 0 ? void 0 : _g.items) || [];
+            this.allKpiMetricValues = values;
+            const lastMonthYm = moment().tz('Asia/Seoul').subtract(1, 'month').format('YYYY-MM');
+            // 3) Step 1/2 와 동일 기준으로 미입력 판정 — row 존재 AND value 존재 (null/undefined 아님).
+            const hasValid = (v) => v.value !== null && v.value !== undefined;
+            this.pendingMetrics = targets.filter((m) => {
+                if (m.periodType === 'MONTH') {
+                    return !values.some(v => v.metricId === m.id && v.periodType === 'MONTH' && (v.valueDate || '').startsWith(lastMonthYm) && hasValid(v));
+                }
+                return !values.some(v => v.metricId === m.id && v.periodType === m.periodType && hasValid(v));
+            });
+        }
+        catch (e) {
+            console.error('[입력 대기 중] 조회 실패', e);
+            this.pendingMetrics = [];
+        }
+    }
+    async getKpiComprehensiveStats() {
+        var _a;
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetKpiZValueComprehensiveStats {
+            totalKpiZValueComprehensiveStats {
+              minVal
+              q1Val
+              medVal
+              q3Val
+              maxVal
+            }
+          }
+        `,
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            this.kpiComprehensiveStats = response.data.totalKpiZValueComprehensiveStats || [];
+        }
+        catch (error) {
+            console.error('Failed to fetch KPI comprehensive stats:', error);
+            this.kpiComprehensiveStats = [];
+        }
+    }
+    async getKpiYComprehensiveStats() {
+        var _a;
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetKpiYValueComprehensiveStats {
+            totalKpiYValueComprehensiveStats {
+              kpiName
+              minVal
+              q1Val
+              medVal
+              q3Val
+              maxVal
+              avgVal
+              projectCount
+            }
+          }
+        `,
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            this.kpiYComprehensiveStats = response.data.totalKpiYValueComprehensiveStats || [];
+        }
+        catch (error) {
+            console.error('Failed to fetch KPI Y comprehensive stats:', error);
+            this.kpiYComprehensiveStats = [];
+        }
+    }
+    async getProjectXKpiValues(projectId) {
+        var _a;
+        try {
+            const response = await client.query({
+                query: gql `
+          query GetProjectXKpiValues($projectId: String!) {
+            projectXKpiValues(projectId: $projectId) {
+              id
+              value
+              score
+              valueDate
+              kpi {
+                id
+                name
+                description
+              }
+            }
+          }
+        `,
+                variables: { projectId },
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            this.projectXKpiValues = response.data.projectXKpiValues || [];
+        }
+        catch (error) {
+            console.error('Failed to fetch project X KPI values:', error);
+            this.projectXKpiValues = [];
+        }
+    }
+    _onMetricLabelClick(metric) {
+        // metric.pattern을 사용하여 X-KPI 조회
+        if (!metric.pattern) {
+            console.warn('No pattern found for metric:', metric);
+            return;
+        }
+        // X-KPI 이름 패턴 (예: X11, X12, X21, ...)
+        const kpiNamePattern = metric.pattern;
+        // 해당 KPI 정보 조회
+        this._fetchKpiWithGradesByPattern(kpiNamePattern, metric.label);
+    }
+    async _fetchKpiWithGradesByPattern(kpiNamePattern, displayName) {
+        var _a, _b, _c, _d, _e;
+        try {
+            // X-KPI 이름 패턴으로 전체 이름 찾기 (projectXKpiValues에서) — 선두 코드 토큰 정확 매칭
+            const codeOf = (name) => (name || '').trim().split(/[.\s]/)[0];
+            const kpiValue = this.projectXKpiValues.find(kv => { var _a; return ((_a = kv.kpi) === null || _a === void 0 ? void 0 : _a.name) && codeOf(kv.kpi.name) === kpiNamePattern; });
+            if (!kpiValue || !kpiValue.kpi) {
+                console.warn(`No KPI found for pattern: ${kpiNamePattern}`);
+                return;
+            }
+            // GraphQL로 KPI 상세 정보 (grades 포함) 조회
+            const response = await client.query({
+                query: gql `
+          query Kpi($id: String!) {
+            kpi(id: $id) {
+              id
+              name
+              grades
+              scoreType
+              valueType
+              vizMeta
+            }
+          }
+        `,
+                variables: { id: kpiValue.kpi.id },
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            if (response.errors || !((_b = response.data) === null || _b === void 0 ? void 0 : _b.kpi)) {
+                console.error('KPI not found or error:', response.errors);
+                return;
+            }
+            const kpi = response.data.kpi;
+            // grades가 없으면 경고
+            const is2D = kpi.grades && !Array.isArray(kpi.grades) && kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP';
+            if (!kpi.grades || (!is2D && (!Array.isArray(kpi.grades) || kpi.grades.length === 0))) {
+                console.warn(`No grades found for KPI: ${kpiValue.kpi.name}`);
+            }
+            this.selectedKpi = {
+                kpiName: displayName,
+                pattern: kpiNamePattern, // X34/X43 등 — 계단형 차트 라우팅용
+                grades: kpi.grades || [],
+                scoreType: kpi.scoreType || '',
+                valueType: kpi.valueType || '',
+                value: (_c = kpiValue.value) !== null && _c !== void 0 ? _c : null,
+                score: (_d = kpiValue.score) !== null && _d !== void 0 ? _d : null,
+                unit: ((_e = kpi.vizMeta) === null || _e === void 0 ? void 0 : _e.unit) || ''
+            };
+            this.showScoreDistribution = true;
+        }
+        catch (error) {
+            console.error('Error fetching KPI:', error);
+        }
+    }
+    /**
+     * 등급 기준으로 표시할지 판별 (차트 대신 등급 설명 목록)
+     *
+     * - valueType=ASSESSED: 감리자 직접 평가 → 등급 설명
+     * - CUSTOM/COMPOSITE이지만 value가 1~5 정수 (증강데이터): 등급 설명 + 히트맵
+     * - grades가 배열이 아닌 경우 (2D lookup 객체): 등급 설명 + 히트맵
+     */
+    _isAssessmentOrIntegerScore() {
+        const kpi = this.selectedKpi;
+        if (!kpi)
+            return false;
+        // valueType 기반 판별 (우선)
+        if (kpi.valueType === 'ASSESSED')
+            return true;
+        // CUSTOM/COMPOSITE이지만 value가 1~5 정수 (증강데이터)
+        if ((kpi.scoreType === 'CUSTOM' || kpi.valueType === 'COMPOSITE') &&
+            kpi.value !== null &&
+            kpi.value === Math.floor(kpi.value) &&
+            kpi.value >= 1 &&
+            kpi.value <= 5)
+            return true;
+        // grades가 배열이 아닌 경우 (2D lookup 객체)
+        if (kpi.grades && !Array.isArray(kpi.grades))
+            return true;
+        return false;
+    }
+    /** 등급 기준 표시 (ASSESSED / 1~5 정수 score) — 현재 값 강조 + CUSTOM은 2D 히트맵도 표시 */
+    _renderAssessmentGrades() {
+        var _a;
+        const kpi = this.selectedKpi;
+        // score 가 진짜 등급. kpi.value 는 raw 측정값 (편차율 등) 이라 score 로 쓰면 안 됨.
+        const currentScore = (kpi === null || kpi === void 0 ? void 0 : kpi.score) != null ? Math.round(kpi.score) : 0;
+        const grades = Array.isArray(kpi === null || kpi === void 0 ? void 0 : kpi.grades) ? kpi.grades : [];
+        const colors = ['#e53935', '#ff9800', '#ffca28', '#66bb6a', '#2e7d32'];
+        const is2D = (kpi === null || kpi === void 0 ? void 0 : kpi.scoreType) === 'CUSTOM' ||
+            (kpi === null || kpi === void 0 ? void 0 : kpi.valueType) === 'COMPOSITE' ||
+            ((kpi === null || kpi === void 0 ? void 0 : kpi.grades) &&
+                typeof kpi.grades === 'object' &&
+                !Array.isArray(kpi.grades) &&
+                kpi.grades.type === 'PROGRESS_DEVIATION_LOOKUP');
+        // grades가 있으면 description 사용, 없으면 기본 라벨
+        const defaultLabels = ['매우 미흡', '미흡', '보통', '양호', '우수'];
+        const items = [1, 2, 3, 4, 5].map(score => {
+            const grade = grades.find((g) => g.score === score);
+            return {
+                score,
+                desc: (grade === null || grade === void 0 ? void 0 : grade.description) || (grade === null || grade === void 0 ? void 0 : grade.name) || defaultLabels[score - 1],
+                color: colors[score - 1],
+                active: score === currentScore
+            };
+        });
+        // ASSESSED(감리자 평가)이고 grades에 description이 있는 경우만 한 줄씩 상세 표시
+        // X13 등 COMPOSITE/CUSTOM은 인라인 칩으로 간결하게
+        const hasDescriptions = !is2D && grades.length > 0 && grades.some((g) => g.description);
+        // ASSESSMENT (감리자 평가) 의 등급 description 만 노출. 2D lookup 은 score 가 이미
+        // popup-header 큰 점수로 표시되므로 등급 기준 행/동그라미 중복 제거.
+        return html `
+      <div style="padding: 20px; display: flex; flex-direction: column; height: 100%;">
+        ${hasDescriptions
+            ? items.map(item => html ` <div
+                    style="
+                    display: flex; align-items: center; gap: 10px;
+                    padding: 10px 14px; margin-bottom: 6px;
+                    border-radius: 8px;
+                    background: ${item.active ? item.color + '18' : '#f9f9f9'};
+                    border: 2px solid ${item.active ? item.color : 'transparent'};
+                    transition: all 0.2s;
+                  "
+                  >
+                    <span
+                      style="
+                      width: 32px; height: 32px; border-radius: 50%;
+                      background: ${item.active ? item.color : '#e0e0e0'};
+                      color: ${item.active ? '#fff' : '#999'};
+                      display: flex; align-items: center; justify-content: center;
+                      font-weight: 700; font-size: 14px; flex-shrink: 0;
+                    "
+                      >${item.score}</span
+                    >
+                    <span
+                      style="font-size: 0.9rem; color: ${item.active ? '#333' : '#666'}; font-weight: ${item.active ? '600' : '400'};"
+                    >
+                      ${item.desc}
+                    </span>
+                  </div>`)
+            : ''}
+        ${is2D && ((_a = kpi === null || kpi === void 0 ? void 0 : kpi.grades) === null || _a === void 0 ? void 0 : _a.rows)
+            ? html `
+                <div style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
+                  <div style="font-size: 0.9rem; font-weight: 700; color: #333; margin-bottom: 8px;">
+                    공정률 × 공기편차 성과 분포
+                  </div>
+                  <div style="flex: 1; min-height: 0;">
+                    <kpi-2d-lookup-chart
+                      .grades=${kpi.grades}
+                      .value=${this._getScheduleDeviation()}
+                      .progressRate=${this._getProgressRate()}
+                    ></kpi-2d-lookup-chart>
+                  </div>
+                </div>
+              `
+            : ''}
+      </div>
+    `;
+    }
+    _closePopup() {
+        this.showScoreDistribution = false;
+        this.selectedKpi = null;
+    }
+    getMetricValue(kpiNamePattern) {
+        // KPI 이름 "X52. 환경성과 수준 평가" 의 선두 코드 토큰("X52")을 정확히 매칭.
+        // includes 부분매칭은 유사코드 오매칭 위험이 있어 코드 토큰 === 로 비교한다.
+        const codeOf = (name) => (name || '').trim().split(/[.\s]/)[0];
+        const matches = this.projectXKpiValues.filter(kv => { var _a; return ((_a = kv.kpi) === null || _a === void 0 ? void 0 : _a.name) && codeOf(kv.kpi.name) === kpiNamePattern; });
+        // 같은 코드가 여러 scope/기간으로 중복될 수 있어 최신 valueDate 를 대표값으로 선택.
+        const kpiValue = matches.sort((a, b) => (b.valueDate || '').localeCompare(a.valueDate || ''))[0];
+        const value = (kpiValue === null || kpiValue === void 0 ? void 0 : kpiValue.value) || 0;
+        // 성과영역별 KPI 측정값: 정수는 그대로, 소수는 소숫점 2자리로 표시
+        if (Number.isInteger(value)) {
+            return value.toString();
+        }
+        else {
+            return value.toFixed(2);
+        }
+    }
+    getYKpiScoreFormatted(kpiName) {
+        const value = this.getProjectYKpiValue(kpiName);
+        if (value === 0)
+            return '-';
+        return (value * 100).toFixed(1);
+    }
+    getMetricGroups() {
+        return {
+            Y1: {
+                name: '일정성과 (Y1)',
+                score: this.getYKpiScoreFormatted('일정성과(Y1)'),
+                metrics: [
+                    { label: '연면적 대비 공사기간', pattern: 'X11', value: this.getMetricValue('X11') },
+                    { label: '설계변경 공기 증감률', pattern: 'X12', value: this.getMetricValue('X12') },
+                    { label: '일정 이탈 수준', pattern: 'X13', value: this.getMetricValue('X13') },
+                    { label: '일정성과 정성 평가', pattern: 'X14', value: this.getMetricValue('X14') }
+                ]
+            },
+            Y2: {
+                name: '비용성과 (Y2)',
+                score: this.getYKpiScoreFormatted('비용성과(Y2)'),
+                metrics: [
+                    { label: '연면적 대비 공사비', pattern: 'X21', value: this.getMetricValue('X21') },
+                    { label: '설계변경 공사비 증감률', pattern: 'X22', value: this.getMetricValue('X22') },
+                    { label: '비용성과 정성 평가', pattern: 'X23', value: this.getMetricValue('X23') }
+                ]
+            },
+            Y3: {
+                name: '품질성과 (Y3)',
+                score: this.getYKpiScoreFormatted('품질성과(Y3)'),
+                metrics: [
+                    { label: '검측 불합격률', pattern: 'X33', value: this.getMetricValue('X33') },
+                    { label: '품질 SL-PA 결과', pattern: 'X34', value: this.getMetricValue('X34') },
+                    { label: '품질성과 정성 평가', pattern: 'X35', value: this.getMetricValue('X35') }
+                ]
+            },
+            Y4: {
+                name: '안전성과 (Y4)',
+                score: this.getYKpiScoreFormatted('Y4. 안전성과'),
+                metrics: [
+                    { label: '재해율', pattern: 'X41', value: this.getMetricValue('X41') },
+                    { label: '재해강도율', pattern: 'X42', value: this.getMetricValue('X42') },
+                    { label: '안전 SL-PA 결과', pattern: 'X43', value: this.getMetricValue('X43') },
+                    { label: '안전성과 정성 평가', pattern: 'X44', value: this.getMetricValue('X44') }
+                ]
+            },
+            Y5: {
+                name: '환경성과 (Y5)',
+                score: this.getYKpiScoreFormatted('환경성과(Y5)'),
+                metrics: [
+                    { label: '건설폐기물 발생량', pattern: 'X51', value: this.getMetricValue('X51') },
+                    { label: '환경성과 정성 평가', pattern: 'X52', value: this.getMetricValue('X52') }
+                ]
+            },
+            Y6: {
+                name: '생산성 성과 (Y6)',
+                score: this.getYKpiScoreFormatted('생산성성과(Y6)'),
+                metrics: [
+                    { label: '총 투입인력(M/M) 생산성', pattern: 'X61', value: this.getMetricValue('X61') },
+                    { label: '생산성성과 정성 평가', pattern: 'X62', value: this.getMetricValue('X62') }
+                ]
+            }
+        };
+    }
+    getYKpiBoxplotData() {
+        // kpiName 표기가 환경마다 다양('Y1. 일정성과' / 'Y1. 일정' / '일정성과(Y1)' 등)하므로
+        // Y1~Y6 코드만 추출해 짧은 X축 라벨로 매핑 — 전체 문자열에 의존하지 않아 견고함.
+        const yLabelByCode = {
+            Y1: '일정',
+            Y2: '비용',
+            Y3: '품질',
+            Y4: '안전',
+            Y5: '환경',
+            Y6: '생산성'
+        };
+        const data = [];
+        // Y-KPI 카테고리별로 통합된 통계 생성
+        this.kpiYComprehensiveStats.forEach(stat => {
+            var _a, _b;
+            const category = yLabelByCode[(_b = (_a = (stat.kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''] || stat.kpiName;
+            data.push({
+                org: category, // org 필드 사용 (boxplot 차트가 기대하는 필드명)
+                min: stat.minVal * 100,
+                max: stat.maxVal * 100,
+                q1: stat.q1Val * 100,
+                q3: stat.q3Val * 100,
+                median: stat.medVal * 100,
+                mean: stat.avgVal * 100,
+                value: this.getProjectYKpiValue(stat.kpiName) * 100 // 현재 프로젝트의 실제 Y-KPI 값 (0~1 → 0~20)
+            });
+        });
+        // 가나다순(localeCompare)이 아니라 Y1~Y6 고정 순서로 정렬 (일정·비용·품질·안전·환경·생산성)
+        const ORDER = ['일정', '비용', '품질', '안전', '환경', '생산성'];
+        return data.sort((a, b) => ORDER.indexOf(a.org) - ORDER.indexOf(b.org));
+    }
+    /**
+     * KpiMetric.name 이 주어진 이름인 KpiMetricValue 중 가장 최근 valueDate 의 value.
+     * 2D lookup chart 의 progressRate / value 도출용.
+     */
+    _getLatestMetricValue(metricName) {
+        const candidates = this.allKpiMetricValues
+            .filter(v => { var _a; return ((_a = v.metric) === null || _a === void 0 ? void 0 : _a.name) === metricName && v.value !== null && v.value !== undefined; })
+            .sort((a, b) => (b.valueDate || '').localeCompare(a.valueDate || ''));
+        return candidates.length > 0 ? candidates[0].value : null;
+    }
+    /** 2D lookup chart 의 progressRate (X축, 실적공정율 %) — 이름이 '실적공정' 을 포함하는
+     *  metric 의 latest 값 우선(율/률·공백·코드 접두 차이 허용, '계획공정' 과는 구분). 없으면 fallback. */
+    _getProgressRate() {
+        var _a, _b;
+        const candidates = this.allKpiMetricValues
+            // 월별(MONTH) 행만 — 옛 일별(DAY) 잔재가 valueDate 로 더 최신이라 잘못 집히던 것 방지.
+            .filter(v => { var _a; return (((_a = v.metric) === null || _a === void 0 ? void 0 : _a.name) || '').includes('실적공정') && v.periodType === 'MONTH' && v.value !== null && v.value !== undefined; })
+            .sort((a, b) => (b.valueDate || '').localeCompare(a.valueDate || ''));
+        if (candidates.length > 0)
+            return candidates[0].value;
+        return (_b = (_a = this.project) === null || _a === void 0 ? void 0 : _a.totalProgress) !== null && _b !== void 0 ? _b : 50;
+    }
+    /** 2D lookup chart 의 value (Y축, 공기편차) — X13(일정 이탈 수준)이 formula
+     *  (`[계획공정률] − [실적공정률]`)로 계산한 값을 그대로 사용한다. 산식은 X13 한 곳에만
+     *  두고, 클라는 재계산하지 않는다(단일 소스). 값이 없으면 '일정 이탈 수준' metric 폴백. */
+    _getScheduleDeviation() {
+        var _a, _b;
+        if (((_a = this.selectedKpi) === null || _a === void 0 ? void 0 : _a.value) !== undefined && ((_b = this.selectedKpi) === null || _b === void 0 ? void 0 : _b.value) !== null)
+            return this.selectedKpi.value;
+        return this._getLatestMetricValue('일정 이탈 수준');
+    }
+    getProjectYKpiValue(kpiName) {
+        var _a, _b, _c;
+        // kpiName 표기가 'Y1. 일정성과' / '일정성과(Y1)' 등으로 달라 정확 매칭은 자주 실패함.
+        // Y1~Y6 코드만 추출해 매칭 → 형식 차이와 무관하게 값 조회.
+        const code = (_a = (kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0];
+        const kpiValue = (_c = (_b = this.project) === null || _b === void 0 ? void 0 : _b.kpiValues) === null || _c === void 0 ? void 0 : _c.find(kv => { var _a; return code ? ((_a = (kv.kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0]) === code : kv.kpiName === kpiName; });
+        return (kpiValue === null || kpiValue === void 0 ? void 0 : kpiValue.value) || 0;
+    }
+    getRadarChartData() {
+        // kpiName 표기가 다양하므로 Y1~Y6 코드만 추출해 짧은 라벨로 매핑 (박스플롯과 동일 방식).
+        const yLabelByCode = {
+            Y1: '일정',
+            Y2: '비용',
+            Y3: '품질',
+            Y4: '안전',
+            Y5: '환경',
+            Y6: '생산성'
+        };
+        const data = [];
+        const categories = [];
+        // Create baseline data from comprehensive stats (using avgVal as baseline)
+        this.kpiYComprehensiveStats.forEach(stat => {
+            var _a, _b;
+            const category = yLabelByCode[(_b = (_a = (stat.kpiName || '').match(/Y[1-6]/)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''] || stat.kpiName;
+            if (!categories.includes(category)) {
+                categories.push(category);
+            }
+            // Add baseline average
+            // 성과영역별 측정값(getYKpiScoreFormatted, toFixed(1))과 소수 1자리로 일치시킨다.
+            // 과거엔 Math.round(정수)라 radar 76 vs 측정값 76.2 처럼 반올림 불일치가 있었음.
+            data.push({
+                org: '기준평균',
+                category,
+                value: Number((stat.avgVal * 100).toFixed(1)) // Scale to match expected range (0~1 → 0~100)
+            });
+            // Add current project performance (using project's individual values)
+            data.push({
+                org: '프로젝트성과',
+                category,
+                value: Number((this.getProjectYKpiValue(stat.kpiName) * 100).toFixed(1)) // Y-KPI 값 (0~1 → 0~100)
+            });
+        });
+        return {
+            data,
+            categories: categories.length > 0 ? categories : ['일정', '비용', '품질', '안전', '환경', '생산성']
+        };
+    }
+    getBoxPlotDataForProject(project) {
+        var _a;
+        // 프로젝트의 지역(geo_group)에 해당하는 통계 찾기
+        const stats = (_a = this.kpiComprehensiveStats) === null || _a === void 0 ? void 0 : _a[0];
+        if (!stats) {
+            // 전체 통계의 평균값 사용 또는 기본값 반환
+            const defaultStats = this.kpiComprehensiveStats.length > 0 ? this.kpiComprehensiveStats[0] : null;
+            if (defaultStats) {
+                return {
+                    min: defaultStats.minVal,
+                    max: defaultStats.maxVal,
+                    mean: (defaultStats.q1Val + defaultStats.q3Val) / 2,
+                    median: defaultStats.medVal,
+                    q1: defaultStats.q1Val,
+                    q3: defaultStats.q3Val,
+                    value: project.kpi || 0
+                };
+            }
+            // 완전한 기본값
+            return {
+                min: 0,
+                max: 100,
+                mean: 50,
+                median: 50,
+                q1: 25,
+                q3: 75,
+                value: project.kpi || 0
+            };
+        }
+        return {
+            min: stats.minVal * 100,
+            max: stats.maxVal * 100,
+            mean: ((stats.q1Val + stats.q3Val) / 2) * 100, // 대략적 평균값
+            median: stats.medVal * 100,
+            q1: stats.q1Val * 100,
+            q3: stats.q3Val * 100,
+            value: project.kpi || 0
+        };
     }
 };
 SvProjectDetailPage.styles = [
+    ScrollbarStyles,
     css `
       :host {
         display: flex;
@@ -242,6 +1026,8 @@ SvProjectDetailPage.styles = [
       /* content layout */
       div[content] {
         display: flex;
+        /* 미러링: KPI(right)를 좌측·넓게, 정보(left)를 우측·좁게 */
+        flex-direction: row-reverse;
         gap: 35px;
         padding: 25px;
       }
@@ -273,6 +1059,16 @@ SvProjectDetailPage.styles = [
         color: #35618e;
         font-weight: 700;
       }
+      /* 카드 헤더 우상단 버튼 (프로젝트 수정 / KPI 데이타입력) */
+      .card-title .header-btn {
+        margin-left: auto;
+        padding: 4px 10px;
+        font-size: 13px;
+        font-weight: 500;
+      }
+      .card-title .header-btn md-icon {
+        --md-icon-size: 18px;
+      }
       .triangle {
         width: 0;
         height: 0;
@@ -314,7 +1110,7 @@ SvProjectDetailPage.styles = [
         letter-spacing: -0.05em;
       }
       .value {
-        color: #212529;
+        color: #333;
         font-size: 16px;
       }
       .status-value {
@@ -407,16 +1203,23 @@ SvProjectDetailPage.styles = [
         flex-direction: column;
         gap: 10px;
         padding: 15px;
+        max-height: 420px;
+        min-width: 560px;
       }
       .kpi-header {
         display: flex;
         align-items: center;
-        gap: 5px;
+        justify-content: space-between;
         color: #35618e;
         font-weight: 700;
         font-size: 20px;
         letter-spacing: -0.05em;
       }
+      .kpi-header div {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
       .kpi-desc {
         color: #35618e;
         font-size: 13px;
@@ -425,18 +1228,23 @@ SvProjectDetailPage.styles = [
       .kpi-summary {
         display: flex;
         align-items: center;
-        gap: 35px;
         padding: 0 30px;
+        max-height: 360px;
+        gap: 20px;
       }
       .mini-boxplot {
-        width: 70px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
         height: 100%;
         position: relative;
+        min-width: 120px;
       }
       .boxplot-area {
+        flex: 1;
         width: 100%;
-        height: 190px;
         display: flex;
+        flex-direction: column;
         align-items: center;
         background: #ffffff;
       }
@@ -445,15 +1253,13 @@ SvProjectDetailPage.styles = [
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 6px;
         color: #35618e;
       }
       .boxplot-point .value {
-        font-size: 30px;
-        font-weight: 700;
+        font-size: 42px;
+        font-weight: 800;
         color: #35618e;
         border-radius: 6px;
-        padding: 4px 8px;
       }
       .boxplot-point .label {
         font-size: 14px;
@@ -463,11 +1269,13 @@ SvProjectDetailPage.styles = [
 
       /* spider chart placeholder */
       .spider-area {
+        flex: 5;
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 10px;
-        flex: 1;
+        height: 100%;
       }
 
       /* group distribution */
@@ -478,15 +1286,214 @@ SvProjectDetailPage.styles = [
         margin-top: 4px;
       }
       .group-chart {
-        height: 205px;
+        height: 300px;
         margin-top: 25px;
       }
+
+      kpi-single-boxplot-chart {
+        flex: 1;
+      }
+
+      /* KPI 메트릭 데이터 카드 */
+      .metrics-card {
+        background: #ffffff;
+        border-radius: 10px;
+        padding: 20px;
+        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
+        max-width: 100%;
+        overflow: hidden;
+      }
+      .metrics-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .metrics-header .title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        color: #35618e;
+        font-weight: 700;
+        font-size: 18px;
+      }
+      .metrics-card .desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+        margin-top: 4px;
+        margin-bottom: 15px;
+      }
+      .metrics-content {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .metric-group {
+        border-bottom: 1px dotted #ddd;
+        padding-bottom: 12px;
+      }
+      .metric-group:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+      .metric-group-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 8px;
+        color: #35618e;
+        font-weight: 600;
+        font-size: 16px;
+      }
+      .metric-group-icon {
+        width: 20px;
+        height: 20px;
+        background: #35618e;
+        border-radius: 3px;
+        position: relative;
+      }
+      .metric-group-icon::before {
+        content: '✓';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        font-size: 12px;
+        font-weight: bold;
+      }
+      .metric-items {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 8px 16px;
+        padding-left: 28px;
+      }
+      .metric-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 14px;
+      }
+      .metric-label {
+        color: #333;
+        flex: 1;
+      }
+      .metric-value {
+        color: #35618e;
+        font-weight: 600;
+        min-width: 40px;
+        text-align: right;
+      }
+
+      /* Popup overlay */
+      .popup-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+      }
+      .popup-content {
+        background: white;
+        border-radius: 12px;
+        padding: 24px;
+        max-width: 800px;
+        width: 90%;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      }
+      .popup-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 20px;
+        padding-bottom: 16px;
+        border-bottom: 2px solid #e0e0e0;
+      }
+      .popup-title {
+        font-size: 20px;
+        font-weight: 700;
+        color: #35618e;
+      }
+      .popup-score {
+        display: flex;
+        align-items: baseline;
+        gap: 6px;
+        margin-left: auto;
+        margin-right: 16px;
+      }
+      .popup-score .score-value {
+        font-size: 44px;
+        font-weight: 800;
+        color: #e53935;
+        line-height: 1;
+      }
+      .popup-score .score-label {
+        font-size: 14px;
+        color: #888;
+      }
+      .popup-close {
+        cursor: pointer;
+        font-size: 24px;
+        color: #999;
+        background: none;
+        border: none;
+        padding: 4px 8px;
+      }
+      .popup-close:hover {
+        color: #333;
+      }
+      .popup-chart-container {
+        min-height: 400px;
+        height: 500px;
+      }
+      .metric-label {
+        cursor: pointer;
+      }
+      .metric-label:hover {
+        opacity: 0.7;
+        text-decoration: underline;
+      }
     `
 ];
 __decorate([
     state(),
     __metadata("design:type", Object)
 ], SvProjectDetailPage.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "kpiComprehensiveStats", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "kpiYComprehensiveStats", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "projectXKpiValues", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], SvProjectDetailPage.prototype, "showScoreDistribution", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectDetailPage.prototype, "selectedKpi", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "pendingMetrics", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectDetailPage.prototype, "allKpiMetricValues", void 0);
 SvProjectDetailPage = __decorate([
     customElement('sv-project-detail')
 ], SvProjectDetailPage);