feat(homepage): GUARDiA 소개 화면 실제 스크린샷 업데이트

- Playwright headless 촬영으로 실제 배포 화면 스크린샷 10장 캡쳐
  ITSM: 대시보드/SR목록/인시던트/AI에이전트/라이선스 (5장)
  Manager: 대시보드/DR관제/네트워크장비/CSAP점검 (4장)
  Messenger: 모바일 앱 화면 (1장)

- GuardiaDetail.jsx: 3개 섹션으로 분리 표시
  - GUARDiA ITSM 5장 (3열 그리드)
  - GUARDiA Manager 4장 (2열 그리드)
  - GUARDiA Messenger 모바일 앱 (세로 비율)

- 탭 메뉴: 'Manager' 탭 신규 추가 (4장 2열 뷰)
- GuardiaDetail.css: 모바일 앱 세로 스크린샷 스타일 추가

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/GuardiaDetail.css

@@ -85,6 +85,18 @@
   gap: 20px;
   margin-top: 40px;
 }
+/* 모바일 앱 스크린샷: 세로 비율 */
+.gd-screenshots--mobile {
+  grid-template-columns: repeat(3, 1fr);
+  max-width: 720px;
+  margin-left: auto;
+  margin-right: auto;
+}
+.screenshot-card--mobile .screenshot-img {
+  aspect-ratio: 9/16;
+  object-fit: cover;
+  border-radius: 12px 12px 0 0;
+}
 .screenshot-card {
   border-radius: var(--radius);
   overflow: hidden;

frontend/src/pages/GuardiaDetail.jsx

@@ -139,6 +139,7 @@ export default function GuardiaDetail() {
             {[
               {id:'features',   label:'핵심 기능'},
               {id:'messenger',  label:'Messenger Bot'},
+              {id:'manager',    label:'Manager'},
               {id:'editions',   label:'에디션 비교'},
               {id:'tech',       label:'기술 스택'},
               {id:'usecase',    label:'도입 사례'},
@@ -163,11 +164,17 @@ export default function GuardiaDetail() {
               <div className="divider" />
             </div>
             {/* 실행 화면 스크린샷 */}
+            {/* GUARDiA ITSM 실행 화면 */}
+            <div className="section-header" style={{marginBottom:'24px'}}>
+              <span className="section-label" style={{fontSize:'12px'}}>GUARDiA ITSM</span>
+              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
+                IT 서비스 관리 플랫폼
+              </h3>
+            </div>
             <div className="gd-screenshots">
               {[
                 {file:'01_dashboard',  caption:'통합 대시보드 — SR·SLA·AI 인사이트'},
                 {file:'02_sr_list',    caption:'SR 서비스 요청 — 칸반/목록 뷰'},
-                {file:'03_si_project', caption:'PMS 프로젝트 — WBS·산출물·보고서'},
                 {file:'04_incidents',  caption:'인시던트 관리 — AI 자동 RCA'},
                 {file:'05_agents',     caption:'AI 에이전트 — Ollama 온프레미스'},
                 {file:'06_license',    caption:'라이선스 관리 — 에디션·체험판'},
@@ -184,6 +191,57 @@ export default function GuardiaDetail() {
               ))}
             </div>
 
+            {/* GUARDiA Manager 실행 화면 */}
+            <div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
+              <span className="section-label" style={{fontSize:'12px'}}>GUARDiA Manager</span>
+              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
+                통합 관제 관리자 포털
+              </h3>
+            </div>
+            <div className="gd-screenshots">
+              {[
+                {file:'07_manager_dashboard', caption:'Manager 대시보드 — 서버·배포·SLA 통합 관제'},
+                {file:'08_manager_dr',        caption:'DR 재해복구 관제 — RTO/RPO 실적 추적'},
+                {file:'09_manager_network',   caption:'네트워크 장비 관제 — 스위치·방화벽 설정 백업'},
+                {file:'10_manager_csap',      caption:'CSAP 보안 점검 — 준수율 자동 대시보드'},
+              ].map((s,i) => (
+                <div key={i} className="screenshot-card">
+                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
+                       className="screenshot-img"
+                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
+                  <div className="screenshot-placeholder" style={{display:'none'}}>
+                    <span className="icon">🖥️</span><span>준비 중</span>
+                  </div>
+                  <div className="screenshot-caption">{s.caption}</div>
+                </div>
+              ))}
+            </div>
+
+            {/* GUARDiA Messenger 모바일 앱 */}
+            <div className="section-header" style={{marginTop:'48px',marginBottom:'24px'}}>
+              <span className="section-label" style={{fontSize:'12px'}}>GUARDiA Messenger</span>
+              <h3 style={{fontSize:'22px',fontWeight:'700',color:'var(--gray-900)',margin:'8px 0 0'}}>
+                모바일 앱 (Android · iOS)
+              </h3>
+            </div>
+            <div className="gd-screenshots gd-screenshots--mobile">
+              {[
+                {file:'06_mobile_home',  caption:'홈 대시보드 — SR·서버 상태'},
+                {file:'02_guardia',      caption:'SR 관리 — 등록·처리·승인'},
+                {file:'05_agents',       caption:'AI 챗봇 — 자연어 명령 처리'},
+              ].map((s,i) => (
+                <div key={i} className="screenshot-card screenshot-card--mobile">
+                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
+                       className="screenshot-img"
+                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
+                  <div className="screenshot-placeholder" style={{display:'none'}}>
+                    <span className="icon">📱</span><span>준비 중</span>
+                  </div>
+                  <div className="screenshot-caption">{s.caption}</div>
+                </div>
+              ))}
+            </div>
+
             <div className="section-header" style={{marginTop:'60px',marginBottom:'32px'}}>
               <h3 style={{fontSize:'28px',fontWeight:'800',color:'var(--gray-900)'}}>핵심 기능 상세</h3>
             </div>
@@ -302,6 +360,41 @@ export default function GuardiaDetail() {
         </section>
       )}
 
+      {/* ── GUARDiA Manager ──────────────────────────────── */}
+      {activeTab === 'manager' && (
+        <section className="section">
+          <div className="container">
+            <div className="section-header">
+              <span className="section-label">GUARDiA Manager</span>
+              <h2 className="section-title">통합 관제 관리자 포털<br/><em>네이버 클라우드 콘솔 스타일</em></h2>
+              <div className="divider" />
+              <p className="section-desc">
+                ITSM·서버·배포·네트워크·보안·AI를 하나의 화면에서 관제합니다.<br/>
+                DR 자동화, 네트워크 장비 설정 백업, CSAP 준수율까지 통합 대시보드로 제공합니다.
+              </p>
+            </div>
+            <div className="gd-screenshots" style={{gridTemplateColumns:'repeat(2,1fr)'}}>
+              {[
+                {file:'07_manager_dashboard', caption:'통합 운영 대시보드 — 서버·SR·배포 현황'},
+                {file:'08_manager_dr',        caption:'DR 재해복구 — RTO/RPO 실적 대시보드'},
+                {file:'09_manager_network',   caption:'네트워크 장비 — 설정 백업·변경 감지'},
+                {file:'10_manager_csap',      caption:'CSAP 보안 점검 — 준수율 A~D 등급'},
+              ].map((s,i) => (
+                <div key={i} className="screenshot-card">
+                  <img src={`/screenshots/${s.file}.png`} alt={s.caption}
+                       className="screenshot-img"
+                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='flex';}}/>
+                  <div className="screenshot-placeholder" style={{display:'none'}}>
+                    <span className="icon">🖥️</span><span>준비 중</span>
+                  </div>
+                  <div className="screenshot-caption">{s.caption}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
       {/* ── 에디션 비교 ──────────────────────────────────── */}
       {activeTab === 'editions' && (
         <section className="section">