feat(screenshots+fonts): 나눔고딕 통일 + 실제 화면 스크린샷 홈페이지 반영 [auto-sync]

frontend/src/pages/GuardiaDetail.jsx

@@ -892,12 +892,14 @@ export default function GuardiaDetail() {
             </div>
             <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:24}}>
               {[
-                {src:'/screenshots/itsm_main.png',   title:'GUARDiA ITSM 대시보드',   desc:'SR 현황·서버 상태·KPI 실시간 모니터링'},
-                {src:'/screenshots/manager_main.png', title:'GUARDiA Manager',         desc:'네이버 클라우드 콘솔 스타일 관제 포털'},
-                {src:'/screenshots/webmail_main.png', title:'GUARDiA Webmail',         desc:'Postfix/Dovecot 연동 기업 웹메일'},
-                {src:'/screenshots/itsm_02_dashboard.png', title:'ITSM 운영 대시보드',  desc:'AI 이상 탐지·SLA·KPI 종합 현황'},
-                {src:'/screenshots/manager_03_servers.png', title:'서버 자산 관리',     desc:'CMDB 서버 목록·상태·배포 이력'},
-                {src:'/screenshots/manager_05_deployments.png', title:'배포 관리',      desc:'CI/CD 파이프라인·배포 이력·롤백'},
+                {src:'/screenshots/itsm_02_dashboard.png', title:'GUARDiA ITSM 대시보드',    desc:'SR 7건·승인대기·진행중 실시간 현황. 운영 상태 한눈에 파악.'},
+                {src:'/screenshots/itsm_06_agents.png',    title:'AI 에이전트 관리',          desc:'Ollama 4개 모델 온라인. llava·codellama·llama3 동작 중.'},
+                {src:'/screenshots/itsm_05_incidents.png', title:'장애 관리 (인시던트)',      desc:'P1~P4 등급별 장애 관리. MTTR 자동 측정. AI RCA 분석.'},
+                {src:'/screenshots/itsm_07_ssl.png',       title:'SSL 인증서 관리',           desc:'만료일 추적·자동 갱신 알림·배포 자동화.'},
+                {src:'/screenshots/itsm_01_login.png',     title:'GUARDiA ITSM 로그인',       desc:'JWT + 2FA/OTP 보안. 역할별 계정 (관리자·엔지니어·PM·고객).'},
+                {src:'/screenshots/manager_01_login.png',  title:'GUARDiA Manager',           desc:'GUARDiA ITSM 통합 관제 관리자 포털.'},
+                {src:'/screenshots/mail_01_webmail.png',   title:'zioinfo 웹메일',            desc:'Postfix/Dovecot 연동. @zioinfo.co.kr 기업 웹메일.'},
+                {src:'/screenshots/home_07_guardia.png',   title:'GUARDiA 홈페이지 소개',     desc:'160+ 기능 · 1,000+ API · 9개 카테고리 완전 구현.'},
               ].map((sc,i) => (
                 <div key={i} style={{borderRadius:12,overflow:'hidden',border:'1px solid #e2e8f0',boxShadow:'0 2px 12px rgba(0,51,102,.08)'}}>
                   <div style={{background:'#f1f5f9',height:8,display:'flex',gap:4,padding:'8px 12px',alignItems:'center'}}>
@@ -920,15 +922,15 @@ export default function GuardiaDetail() {
               </h3>
               <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:16}}>
                 {[
-                  {icon:'🎨',title:'디자인 AI SR 자동화',badge:'NEW',
+                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="8" cy="10" r="1.5" fill="#00A0C8" stroke="none"/><circle cx="13" cy="8" r="1.5" fill="#00A0C8" stroke="none"/><circle cx="16" cy="12" r="1.5" fill="#00A0C8" stroke="none"/><path d="M12 22c0-2.5-2-4-4-4h-2a2 2 0 010-4"/></svg>,title:'디자인 AI SR 자동화',badge:'NEW',
                    desc:'Ollama llava 비전으로 스크린샷 분석. CSS 변경·SVG 아이콘·UI 리뷰를 AI가 자동 처리. 디자인 SR 처리 시간 90% 단축.'},
-                  {icon:'🎤',title:'음성인식 명령 실행',badge:'NEW',
+                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M19 10a7 7 0 01-14 0M12 17v5M8 22h8"/></svg>,title:'음성인식 명령 실행',badge:'NEW',
                    desc:'expo-speech-recognition 온디바이스. 폐쇄망 완전 지원. "서버 상태 확인해줘" → /server status 자동 매핑.'},
-                  {icon:'💡',title:'다음명령 제시 (Smart UX)',badge:'NEW',
+                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 017 7c0 2.4-1.1 4.5-2.8 6H7.8A7 7 0 0112 2z"/></svg>,title:'다음명령 제시 (Smart UX)',badge:'NEW',
                    desc:'Ollama 대화 컨텍스트 분석→추천 명령 3개. 사용 이력 학습. Messenger Bot·Mobile App 통합.'},
-                  {icon:'🧠',title:'AI 뇌 엔진 (Brain)',badge:'NEW',
+                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5a3 3 0 10-3 3H12"/><path d="M12 5a3 3 0 113 3H12"/><path d="M6 8a4 4 0 000 8h.5M18 8a4 4 0 010 8h-.5"/><path d="M8 16a4 4 0 008 0v-4H8v4z"/></svg>,title:'AI 뇌 엔진 (Brain)',badge:'NEW',
                    desc:'영구 메모리(pgvector)·자동 스킬 발굴·LoRA 파인튜닝·관찰형 AI. 운영 경험 누적→스스로 진화.'},
-                  {icon:'🔐',title:'Zero Trust + SBOM',badge:'NEW',
+                  {icon:<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l9 4v5c0 5.2-3.9 10-9 11C6.9 21 3 16.2 3 11V6l9-4z"/><path d="M9 12l2 2 4-4"/></svg>,title:'Zero Trust + SBOM',badge:'NEW',
                    desc:'ZTNA 정책 엔진·디바이스 신뢰 점수. SBOM CycloneDX 1.4 생성·VEX. EU CRA/공공 조달 준수.'},
                   {icon:'🌱',title:'GreenOps + Edge IoT',badge:'NEW',
                    desc:'Scope 2 탄소 배출 추적(EU CSRD). 9.21억 IoT 디바이스 텔레메트리. Carbon-aware 스케줄링.'},

frontend/src/styles/global.css

@@ -28,9 +28,9 @@
   --warning: #F59E0B;
   --danger:  #EF4444;
 
-  /* ── 타이포그래피 (Pretendard 우선) ── */
-  --font-sans: 'Pretendard', 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
-  --font-en:   'Inter', sans-serif;
+  /* ── 타이포그래피 (나눔고딕 통일) ── */
+  --font-sans: 'NanumGothic', 'Nanum Gothic', 'NanumBarunGothic', 'Pretendard', 'Apple SD Gothic Neo', -apple-system, sans-serif;
+  --font-en:   'NanumGothic', 'Inter', sans-serif;
 
   /* ── 레이아웃 ── */
   --container:  1280px;

frontend/src/styles/tokens.css

@@ -1,5 +1,5 @@
 /* ── zio Variant 디자인 토큰 ── */
-@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
+@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&family=Nanum+Gothic+Coding&display=swap');
 
 :root {
   /* Variant 색상 팔레트 */