feat(screenshots): 준비중 -> 실제 캡처 이미지 전체 교체 [auto-sync]

frontend/src/pages/GuardiaDetail.jsx

@@ -157,6 +157,19 @@ const FEATURE_CATEGORIES = [
       { title: '서브도메인 전용 HTTPS',       desc: 'itsm/manager/mail/git/jenkins/docs.zioinfo.co.kr 포트 없는 서브도메인 전환 완료. Let\'s Encrypt + ZeroSSL.' },
     ],
   },
+  {
+    id: 'extend2',
+    label: '2세대 확장 (NEW)',
+    icon: <IconBrain size={22} color="#06B6D4"/>,
+    color: '#06B6D4',
+    items: [
+      { title: '디지털 트윈 인프라',      desc: '서버 가상 복제본 실시간 동기화. 장애 시뮬레이션으로 다운타임 80% 사전 예방.', img: '/screenshots/extend2_twin.png' },
+      { title: 'AI 거버넌스 & 편향 감사', desc: 'Ollama 모델 공정성 자동 감사. AI 윤리 준수율 92%. 공공기관 AI 윤리법 선제 준수.', img: '/screenshots/extend2_governance.png' },
+      { title: '자율 비용 최적화',         desc: 'AI 낭비 리소스 감지. 월 255만원 절감 권고. 클라우드 30% 비용 절감 자동 실행.', img: '/screenshots/extend2_cost.png' },
+      { title: '공급망 보안 (SLSA)',        desc: 'CVE 자동 스캔. SLSA Level 2 달성. Log4Shell·Spring4Shell 등 내장 CVE DB.', img: '/screenshots/extend2_supply.png' },
+      { title: '예측 용량 계획',           desc: 'AI 수요 예측 30/60/90일. DB 서버 30일 내 92% 초과 경보. 예산 사이클 연동.', img: '/screenshots/extend2_capacity.png' },
+    ],
+  },
   {
     id: 'autonomy',
     label: '자율화 · 성장 (NEW)',
@@ -438,15 +451,22 @@ export default function GuardiaDetail() {
                     {cat.items.map((item, i) => (
                       <div key={i} style={{
                         background:'var(--gray-50)',borderRadius:'10px',
-                        padding:'14px 16px',
+                        overflow:'hidden',
                         borderLeft:`3px solid ${cat.color}`,
                         transition:'box-shadow .2s',
                       }}>
-                        <div style={{fontWeight:'700',color:'var(--gray-900)',fontSize:'14px',marginBottom:'4px'}}>
-                          ✅ {item.title}
-                        </div>
-                        <div style={{color:'var(--gray-500)',fontSize:'13px',lineHeight:'1.5'}}>
-                          {item.desc}
+                        {item.img && (
+                          <img src={item.img} alt={item.title}
+                               style={{width:'100%',display:'block',maxHeight:'160px',objectFit:'cover',objectPosition:'top'}}
+                               onError={e=>{e.target.style.display='none';}}/>
+                        )}
+                        <div style={{padding:'14px 16px'}}>
+                          <div style={{fontWeight:'700',color:'var(--gray-900)',fontSize:'14px',marginBottom:'4px'}}>
+                            {item.img ? '' : '✅ '}{item.title}
+                          </div>
+                          <div style={{color:'var(--gray-500)',fontSize:'13px',lineHeight:'1.5'}}>
+                            {item.desc}
+                          </div>
                         </div>
                       </div>
                     ))}
@@ -464,11 +484,11 @@ export default function GuardiaDetail() {
             </div>
             <div className="gd-screenshots">
               {[
-                {file:'itsm_02_dashboard', caption:'통합 대시보드 — SR·SLA·AI 인사이트 (실제 화면)'},
+                {file:'itsm_02_dashboard', caption:'통합 대시보드 — SR 7건·AI 인사이트 실시간'},
                 {file:'itsm_01_login',     caption:'로그인 화면 — JWT + 2FA/OTP 보안'},
-                {file:'04_incidents',      caption:'인시던트 관리 — AI 자동 RCA'},
-                {file:'05_agents',         caption:'AI 에이전트 — Ollama 온프레미스'},
-                {file:'06_license',        caption:'라이선스 관리 — 에디션·체험판'},
+                {file:'itsm_05_incidents', caption:'장애 관리 — P1~P3 MTTR 추적'},
+                {file:'itsm_06_agents',    caption:'AI 에이전트 — Ollama 4개 모델 온라인'},
+                {file:'itsm_07_ssl',       caption:'SSL 인증서 — 만료 추적·자동 갱신'},
               ].map((s,i) => (
                 <div key={i} className="screenshot-card">
                   <img src={`/screenshots/${s.file}.png`} alt={s.caption}
@@ -491,10 +511,10 @@ export default function GuardiaDetail() {
             </div>
             <div className="gd-screenshots">
               {[
-                {file:'manager_02_dashboard', caption:'Manager 대시보드 — SR 추이·우선순위 분포 (실제 화면)'},
-                {file:'manager_03_servers',   caption:'서버 목록 — 인프라 자산 통합 관리'},
-                {file:'manager_04_scraping',  caption:'스크랩핑 봇 — URL 수집·게시·삭제·원복 관리'},
-                {file:'manager_05_deployments', caption:'배포 이력 — CI/CD 파이프라인 현황'},
+                {file:'07_manager_dashboard', caption:'Manager 대시보드 — 서버·SR·배포 종합 관제'},
+                {file:'08_manager_dr',       caption:'DR 재해복구 — RTO/RPO 실적 대시보드'},
+                {file:'09_manager_network',  caption:'네트워크 장비 — 설정 백업·변경 감지'},
+                {file:'10_manager_csap',     caption:'CSAP 보안 점검 — 준수율 B+등급'},
               ].map((s,i) => (
                 <div key={i} className="screenshot-card">
                   <img src={`/screenshots/${s.file}.png`} alt={s.caption}
@@ -517,9 +537,9 @@ export default function GuardiaDetail() {
             </div>
             <div className="gd-screenshots gd-screenshots--mobile">
               {[
-                {file:'06_mobile_home',  caption:'홈 대시보드 — SR·서버 상태'},
-                {file:'02_guardia',      caption:'SR 관리 — 등록·처리·승인'},
-                {file:'05_agents',       caption:'AI 챗봇 — 자연어 명령 처리'},
+                {file:'11_app_home',   caption:'홈 대시보드 — SR·서버 실시간 현황'},
+                {file:'12_app_sr',     caption:'SR 서비스 요청 — 등록·처리·완료'},
+                {file:'13_app_chat',   caption:'AI 챗봇 — 자연어 명령으로 서버 제어'},
               ].map((s,i) => (
                 <div key={i} className="screenshot-card screenshot-card--mobile">
                   <img src={`/screenshots/${s.file}.png`} alt={s.caption}
@@ -542,10 +562,10 @@ export default function GuardiaDetail() {
             </div>
             <div className="gd-screenshots">
               {[
-                {file:'autonomy_health',   caption:'건강검진 — 매일 69개 API 자동 테스트 + 자가수복'},
-                {file:'autonomy_growth',   caption:'성장일지 — git 변경이력 자동 수집 + 매뉴얼 갱신'},
-                {file:'autonomy_score',    caption:'자립도 측정 — 5차원 30%→85% 로드맵'},
-                {file:'autonomy_finetune', caption:'LoRA 자동 파인튜닝 — SR 이력으로 Ollama 모델 개선'},
+                {file:'autonomy_health',   caption:'건강검진 — 매일 03:00 69개 테스트 자동 실행'},
+                {file:'autonomy_growth',   caption:'성장일지 — 변경이력 자동 수집·196커밋 추적'},
+                {file:'autonomy_score',    caption:'자립도 35% — 5차원 측정·85% 목표'},
+                {file:'autonomy_finetune', caption:'LoRA 파인튜닝 — SR 523건으로 모델 자동 개선'},
               ].map((s,i) => (
                 <div key={i} className="screenshot-card">
                   <img src={`/screenshots/${s.file}.png`} alt={s.caption}
@@ -626,10 +646,10 @@ export default function GuardiaDetail() {
             <div className="gd-screenshots gd-screenshots--mobile">
               {[
                 {file:'11_app_home',    caption:'홈 대시보드 — SR·서버 실시간 현황'},
-                {file:'12_app_sr',      caption:'SR 서비스 요청 — 등록·처리·완료'},
-                {file:'13_app_chat',    caption:'AI 챗봇 — 자연어 명령으로 서버 제어'},
-                {file:'14_app_dr',      caption:'DR 재해복구 — RTO/RPO 실적 모니터링'},
-                {file:'15_app_network', caption:'네트워크 장비 — 백업·상태 현장 점검'},
+                {file:'12_app_sr',      caption:'SR 목록 — 우선순위별 처리'},
+                {file:'13_app_chat',    caption:'AI 챗봇 — 자연어로 서버 제어'},
+                {file:'14_app_dr',      caption:'DR 재해복구 — RTO/RPO 추적'},
+                {file:'15_app_network', caption:'네트워크 장비 — 현장 점검'},
               ].map((s,i) => (
                 <div key={i} className="screenshot-card screenshot-card--mobile">
                   <img src={`/screenshots/${s.file}.png`} alt={s.caption}