Taehoon
dff3305da1
- analysis_service.py: AVI 및 VCI(자산 기여도) 산출 로직 구현 - prediction_service.py: 정체 프로젝트 AI 예보 최적화 - js/analysis.js: 전략 매트릭스 및 VCI 등급 시스템 시각화 - templates/analysis.html: UI 용어 최신화 및 스타일 통합 - ANALYSIS_REPORT.md: 분석 지표 공식 및 가이드라인 상세 기술
234 lines
8.2 KiB
CSS
234 lines
8.2 KiB
CSS
/* ==========================================================================
|
|
Project Master Analysis - Specific Styles
|
|
(Inherits base styles from common.css)
|
|
========================================================================== */
|
|
|
|
.analysis-content {
|
|
padding: 24px;
|
|
max-width: 1400px;
|
|
margin: var(--topbar-h, 36px) auto 0;
|
|
}
|
|
|
|
/* AI Badge & Header */
|
|
.ai-badge {
|
|
background: #6366f1;
|
|
color: white;
|
|
padding: 2px 10px;
|
|
border-radius: 20px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
display: inline-block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.analysis-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.analysis-header h2 { font-size: 22px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
|
|
.analysis-header p { font-size: 13px; color: var(--text-sub); }
|
|
|
|
/* Top Info Grid */
|
|
.top-info-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2.2fr;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.dl-model-info, .soi-deep-dive {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--border-color);
|
|
padding: 20px;
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
|
|
.card-header { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; }
|
|
.card-header h4 { font-size: 14px; font-weight: 800; color: var(--primary-color); margin: 0; }
|
|
|
|
.model-desc-vertical { display: flex; flex-direction: column; gap: 12px; }
|
|
.model-item-vertical { display: flex; align-items: center; gap: 12px; }
|
|
.model-tag { background: var(--bg-muted); color: var(--text-sub); padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
|
|
|
|
.soi-info-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
|
.soi-info-column h6 { font-size: 12px; font-weight: 800; color: var(--primary-color); margin: 0 0 8px 0; }
|
|
.soi-info-column p { font-size: 11.5px; color: var(--text-sub); line-height: 1.6; margin: 0; }
|
|
|
|
/* Chart Grid Layout */
|
|
.analysis-charts-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.8fr;
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.chart-container-box {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
height: 360px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
|
|
.chart-container-box h5 { margin: 0 0 15px 0; font-size: 13px; font-weight: 700; color: var(--text-main); }
|
|
|
|
/* Timeline Analysis Card */
|
|
.analysis-card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--box-shadow);
|
|
margin-bottom: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.analysis-card .card-header {
|
|
padding: 16px 24px;
|
|
background: #fff;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.analysis-card .card-body { padding: 24px; }
|
|
|
|
/* SOI Guide Styles */
|
|
.d-war-guide {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 20px;
|
|
padding: 12px;
|
|
background: var(--bg-muted);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
.guide-item {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 4px 10px;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.guide-item.active-low { background: #dcfce7; color: #166534; }
|
|
.guide-item.warning-mid { background: #fef9c3; color: #854d0e; }
|
|
.guide-item.danger-high { background: #ffedd5; color: #9a3412; }
|
|
.guide-item.hazard-critical { background: #fee2e2; color: #991b1b; }
|
|
|
|
/* Data Table Customization */
|
|
.table-scroll-wrapper {
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
max-height: 600px;
|
|
border-radius: var(--radius-lg);
|
|
border: 1px solid var(--border-color);
|
|
background: white;
|
|
}
|
|
|
|
.p-war-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: fixed; /* 컬럼 너비 고정 */
|
|
}
|
|
|
|
.p-war-table th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
background: #f8fafc;
|
|
padding: 16px 15px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: #475569;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.p-war-table td {
|
|
padding: 14px 15px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* 컬럼별 너비 정의 */
|
|
.p-war-table th:nth-child(1), .p-war-table td:nth-child(1) { width: 28%; text-align: left; } /* 프로젝트명 */
|
|
.p-war-table th:nth-child(2), .p-war-table td:nth-child(2) { width: 10%; text-align: right; } /* 파일 수 */
|
|
.p-war-table th:nth-child(3), .p-war-table td:nth-child(3) { width: 10%; text-align: right; } /* 방치일 */
|
|
.p-war-table th:nth-child(4), .p-war-table td:nth-child(4) { width: 10%; text-align: center; } /* 상태 판정 */
|
|
.p-war-table th:nth-child(5), .p-war-table td:nth-child(5) { width: 14%; text-align: right; } /* P-WAR+ */
|
|
.p-war-table th:nth-child(6), .p-war-table td:nth-child(6) { width: 12%; text-align: right; } /* 현재 SOI */
|
|
.p-war-table th:nth-child(7), .p-war-table td:nth-child(7) { width: 12%; text-align: center; } /* 실무 투입 */
|
|
.p-war-table th:nth-child(8), .p-war-table td:nth-child(8) { width: 14%; text-align: center; } /* AI 예보 */
|
|
|
|
.project-row { cursor: pointer; transition: background 0.2s; }
|
|
.project-row:hover { background: var(--hover-bg) !important; }
|
|
|
|
/* SOI Value Styling */
|
|
.p-war-value { font-weight: 800; font-family: 'Consolas', monospace; }
|
|
|
|
/* Accordion Detail Styles */
|
|
.detail-row { display: none; background: #fafafa; }
|
|
.detail-row.active { display: table-row; }
|
|
.detail-container { padding: 20px 24px; }
|
|
|
|
.formula-explanation-card {
|
|
background: white;
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--box-shadow);
|
|
}
|
|
|
|
.formula-header { font-size: 13px; font-weight: 700; color: #6366f1; margin-bottom: 15px; }
|
|
|
|
/* Work Effort Section */
|
|
.work-effort-section { background: var(--bg-muted); padding: 16px; border-radius: var(--radius-lg); margin-bottom: 20px; }
|
|
.work-effort-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
|
.work-effort-bar-bg { width: 100%; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
|
|
|
|
/* Formula Steps Grid */
|
|
.formula-steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
|
.formula-step { display: flex; gap: 12px; }
|
|
.step-num { background: var(--primary-color); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
|
|
.step-title { font-size: 12px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
|
|
.math-logic { font-family: 'Consolas', monospace; background: var(--bg-muted); padding: 4px 8px; border-radius: 4px; font-weight: 700; color: var(--text-main); font-size: 12px; display: inline-block; }
|
|
|
|
.final-result-area { margin-top: 20px; padding-top: 15px; border-top: 2px solid var(--primary-color); display: flex; justify-content: space-between; align-items: center; }
|
|
|
|
/* Modal Analysis Specific */
|
|
.modal-footer {
|
|
padding: 16px 24px;
|
|
background: #fff;
|
|
border-top: 1px solid var(--border-color);
|
|
text-align: right;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Formula & Badges */
|
|
.formula-section { margin-bottom: 20px; }
|
|
.formula-box { background: var(--primary-lv-0); color: var(--primary-color); padding: 15px; border-radius: var(--radius-lg); font-weight: 800; text-align: center; font-family: monospace; font-size: 16px; }
|
|
|
|
.badge-active { background: #dcfce7; color: #166534; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
|
|
.badge-warning { background: #fef9c3; color: #854d0e; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
|
|
.badge-danger { background: #ffedd5; color: #9a3412; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
|
|
.badge-system { background: #fee2e2; color: #991b1b; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
|
|
|
|
.highlight-var { color: #2563eb; }
|
|
.highlight-val { color: #059669; }
|
|
.highlight-penalty { color: #dc2626; }
|
|
.text-plus { color: #059669; font-weight: 700; }
|
|
.text-minus { color: #dc2626; font-weight: 700; }
|
|
.font-bold { font-weight: 700; }
|