diff --git a/frontend/src/components/Icons.jsx b/frontend/src/components/Icons.jsx
index 15516db..d1b5211 100644
--- a/frontend/src/components/Icons.jsx
+++ b/frontend/src/components/Icons.jsx
@@ -162,3 +162,20 @@ export const IconRecycle  = p => <Ico {...p}><path d="M7 19H4.8a1 1 0 01-.8-1.6L
 export const IconDownload2= p => <Ico {...p}><path d="M4 17v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 11l5 5 5-5M12 4v12"/></Ico>;
 export const IconPencilRule= p => <Ico {...p}><rect x="2" y="14" width="4" height="8"/><path d="M6 16h12a2 2 0 002-2V4l-4-2-4 2-4-2-4 2"/><path d="M10 4v8M14 4v8"/></Ico>;
 export const IconBranch   = p => <Ico {...p}><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 01-9 9"/></Ico>;
+
+/* ── 추가 아이콘 ── */
+export const IconBell     = p => <Ico {...p}><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 01-3.4 0"/></Ico>;
+export const IconCalendar = p => <Ico {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></Ico>;
+export const IconHelpCircle=p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 015.8 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17" strokeWidth="3"/></Ico>;
+export const IconFactory  = p => <Ico {...p}><path d="M2 20V8l5 4V8l5 4V4l5 4v12H2z"/><path d="M6 20v-5h4v5"/></Ico>;
+export const IconPackage  = p => <Ico {...p}><line x1="16.5" y1="9.4" x2="7.5" y2="4.2"/><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 002 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></Ico>;
+export const IconCart     = p => <Ico {...p}><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 002 1.6h9.7a2 2 0 002-1.6L23 6H6"/></Ico>;
+export const IconRuler    = p => <Ico {...p}><path d="M5 3l16 16M14 14l-2 4M10 10l-2 4M6 6L4 10"/><path d="M3 21L21 3"/></Ico>;
+export const IconCog      = p => <Ico {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></Ico>;
+export const IconKakao    = p => <Ico {...p}><path d="M12 4C7 4 3 7.1 3 11c0 2.5 1.5 4.7 3.8 6l-.8 3 3.4-2.2c.8.2 1.7.2 2.6.2 5 0 9-3.1 9-7S17 4 12 4z"/></Ico>;
+export const IconPeople   = p => <Ico {...p}><circle cx="9" cy="7" r="3"/><path d="M3 20v-1c0-3.3 2.7-6 6-6s6 2.7 6 6v1"/><circle cx="18" cy="8" r="2.5" opacity=".5"/><path d="M22 20v-.5c0-2.5-1.8-4.5-4-4.5" opacity=".5"/></Ico>;
+export const IconHouse    = p => <Ico {...p}><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H4a1 1 0 01-1-1V9.5z"/><path d="M9 21V12h6v9"/></Ico>;
+export const IconEnvelope = p => <Ico {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/><path d="M2 18l6-5M22 18l-6-5"/></Ico>;
+export const IconQuestion = p => <Ico {...p}><circle cx="12" cy="12" r="10"/><path d="M9 9a3 3 0 116 0c0 1.5-1.5 2.5-3 3"/><circle cx="12" cy="17" r="1" fill="currentColor" stroke="none"/></Ico>;
+export const IconPerson   = p => <Ico {...p}><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></Ico>;
+export const IconFire2    = p => <Ico {...p}><path d="M12 22C6.5 22 2 17.5 2 12c0-2 .8-4 2.3-5.6C5.6 5 6 4.3 6 3c2 0 3 1.5 4 3 .7-1.2 2-2.5 4-3 0 1.5.7 2.5 1.7 3.5C17.2 8 18 9.8 18 12c0 5.5-4.5 10-6 10z"/></Ico>;
diff --git a/frontend/src/pages/Company.jsx b/frontend/src/pages/Company.jsx
index ea8d33e..fe81345 100644
--- a/frontend/src/pages/Company.jsx
+++ b/frontend/src/pages/Company.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { IconTarget, IconBolt, IconHandshake, IconLeaf, IconPhone, IconEmail, IconMapPin, IconClock, IconBuilding, IconUser, IconAI, IconCheckCircle } from '../components/Icons';
+import { IconTarget, IconBolt, IconHandshake, IconLeaf, IconPhone, IconEmail, IconMapPin, IconClock, IconBuilding, IconUser, IconAI, IconCheckCircle, IconLaptop, IconCog, IconClipboard, IconZap, IconRocket, IconShield } from '../components/Icons';
 import { Routes, Route, NavLink, useNavigate } from 'react-router-dom';
 import './Common.css';
 import './Company.css';
@@ -177,7 +177,7 @@ function History() {
 /* ── 조직도 ── */
 const DEPTS = [
   {
-    name: '개발본부', color: '#0051A2', icon: '💻',
+    name: '개발본부', color: '#0051A2', icon: <IconLaptop size={20} color="#0051A2"/>,
     teams: [
       { name: 'AI개발팀',     ai: true  },
       { name: '플랫폼개발팀', ai: true  },
@@ -185,7 +185,7 @@ const DEPTS = [
     ]
   },
   {
-    name: '기술본부', color: '#0891b2', icon: '⚙️',
+    name: '기술본부', color: '#0891b2', icon: <IconCog size={20} color="#0891b2"/>,
     teams: [
       { name: '인프라팀', ai: true  },
       { name: 'DBA팀',    ai: true  },
@@ -193,7 +193,7 @@ const DEPTS = [
     ]
   },
   {
-    name: 'PM본부', color: '#7c3aed', icon: '📋',
+    name: 'PM본부', color: '#7c3aed', icon: <IconClipboard size={20} color="#7c3aed"/>,
     teams: [
       { name: 'SI사업팀',  ai: true  },
       { name: 'SM운영팀',  ai: true  },
@@ -201,7 +201,7 @@ const DEPTS = [
     ]
   },
   {
-    name: '경영지원본부', color: '#059669', icon: '🏢',
+    name: '경영지원본부', color: '#059669', icon: <IconBuilding size={20} color="#059669"/>,
     teams: [
       { name: '경영기획팀', ai: false },
       { name: '영업팀',     ai: false },
@@ -335,13 +335,13 @@ function Organization() {
           {/* 인원 현황 */}
           <div className="grid-4" style={{ marginTop: '40px' }}>
             {[
-              { label: 'AI Agent', value: '50+', unit: '개', icon: '🤖' },
-              { label: 'AI 운영 비율', value: '75', unit: '%', icon: '⚡' },
-              { label: '평균 응답시간', value: '0.3', unit: '초', icon: '🚀' },
-              { label: '운영 가용성', value: '99.9', unit: '%', icon: '🛡️' },
+              { label: 'AI Agent', value: '50+', unit: '개', icon: <IconAI size={28} color="#00A0C8"/> },
+              { label: 'AI 운영 비율', value: '75', unit: '%', icon: <IconZap size={28} color="#00A0C8"/> },
+              { label: '평균 응답시간', value: '0.3', unit: '초', icon: <IconRocket size={28} color="#00A0C8"/> },
+              { label: '운영 가용성', value: '99.9', unit: '%', icon: <IconShield size={28} color="#00A0C8"/> },
             ].map((s, i) => (
               <div key={i} className="card" style={{ padding: '28px', textAlign: 'center' }}>
-                <div style={{ fontSize: '28px', marginBottom: '6px' }}>{s.icon}</div>
+                <div style={{ marginBottom: '6px', display:'flex', justifyContent:'center' }}>{s.icon}</div>
                 <div style={{ fontSize: '32px', fontWeight: '900', color: 'var(--primary)' }}>
                   {s.value}<span style={{ fontSize: '16px' }}>{s.unit}</span>
                 </div>
diff --git a/frontend/src/pages/GuardiaDetail.jsx b/frontend/src/pages/GuardiaDetail.jsx
index 7c1f79f..5367267 100644
--- a/frontend/src/pages/GuardiaDetail.jsx
+++ b/frontend/src/pages/GuardiaDetail.jsx
@@ -1,5 +1,9 @@
 import React, { useState } from 'react';
-import { IconAI, IconClipboard, IconCloud, IconShield, IconLink, IconGovt, IconBriefcase, IconCode, IconLeaf } from '../components/Icons';
+import { IconAI, IconClipboard, IconCloud, IconShield, IconLink, IconGovt, IconBriefcase, IconCode, IconLeaf,
+  IconWrench, IconMessage, IconSearch, IconBulb, IconFileText, IconMobile, IconLock, IconKey,
+  IconBrain, IconCheckCircle, IconRocket, IconTrendUp, IconShuffle, IconGlobe, IconDatabase,
+  IconServer, IconZap, IconNetwork, IconBarChart, IconPieChart, IconStar, IconAward,
+  IconUsers, IconBell, IconCalendar, IconCog, IconBuilding, IconTarget } from '../components/Icons';
 import { Link } from 'react-router-dom';
 import './GuardiaDetail.css';
 import { useSeoMeta } from '../hooks/useSeoMeta';
@@ -174,35 +178,36 @@ const FEATURE_CATEGORIES = [
   },
 ];
 
-/* 하이라이트 카드 16개 (히어로 섹션용) */
+/* 하이라이트 카드 (히어로 섹션용) */
+const IC = (c,s=22) => ({ color:c, size:s });
 const FEATURES = [
-  { icon:'🤖', title:'AI 에이전트 자동화',       desc:'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
-  { icon:'🔧', title:'에이전트리스 아키텍처',     desc:'SSH/SFTP만으로 Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
-  { icon:'💬', title:'ChatOps 자연어 명령',       desc:'"서버1 헬스체크"·"SR-XXXX 배포" — 자연어를 자동으로 봇 명령어로 변환.' },
-  { icon:'🔍', title:'RAG 하이브리드 검색',       desc:'BM25 + pgvector RRF. 자연어 질의로 KB·SR 통합 검색 + Ollama 답변 생성.' },
-  { icon:'💡', title:'Text-to-SQL 어시스턴트',   desc:'"이번 달 HIGH SR는?" — 자연어로 ITSM DB 직접 조회. SELECT 전용 안전 실행.' },
-  { icon:'📄', title:'Document AI (OCR)',         desc:'Upstage 연동. 계약서·납품서·청구서 자동 파싱 → ITSM 자동 등록.' },
-  { icon:'☁️', title:'멀티클라우드 통합',         desc:'NCloud·AWS·KT Cloud 단일 관제. 비용 최적화 AI 권고. K-Cloud 전환 지원.' },
-  { icon:'🔍', title:'CMDB 자동 발견',            desc:'SSH/SNMP 에이전트리스 스캔. 서버·장비·의존성 자동 등록. 드리프트 실시간 감지.' },
-  { icon:'📊', title:'KPI + BI 대시보드',         desc:'MTTR·FCR·SLA 내장 5종 KPI. SR 트렌드·히트맵·MTTR 차트. 예측 분석.' },
-  { icon:'🔒', title:'보안 자동화',               desc:'PAM·MFA·CSAP 100항목·취약점 스캔·불변 감사로그. LDAP·SSO·드리프트 교정.' },
-  { icon:'🏛️', title:'공공기관 특화',             desc:'나라장터·CSAP·ISP·K-Cloud·공공API·행정망 분리. 공공 IT 표준 완전 지원.' },
-  { icon:'🛡️', title:'DR + 네트워크 관리',        desc:'Failover·RTO/RPO 추적. 스위치·방화벽 설정 백업·변경 감지·토폴로지 갱신.' },
-  { icon:'🔗', title:'엔터프라이즈 통합',          desc:'Jira·Slack·ServiceNow·ERP·SSO·카카오 알림톡. 계약서 OCR 자동화 포함.' },
-  { icon:'🤖', title:'자율 워크플로우 엔진',       desc:'조건 기반 자동화 규칙. SR 생성 트리거 → 자동 배정·알림·교정 시퀀스.' },
-  { icon:'💼', title:'SaaS 멀티테넌트',            desc:'화이트라벨·구독·과금·셀프서비스 포털. 기관별 완전 격리. 1,000+ 기관 지원.' },
-  { icon:'📱', title:'APK QR 직접 배포',            desc:'Manager에서 APK 업로드 → QR 생성. 스캔 즉시 설치. 앱스토어 불필요. 내부망 배포 최적.' },
-  { icon:'⚡', title:'배치 SSH + 자산 QR',          desc:'수십 서버 동시 SSH 실행·결과 수집. QR 라벨로 자산 실사 체크인 자동화.' },
-  { icon:'🎨', title:'디자인 AI SR 자동화',          desc:'Ollama llava 비전 분석→CSS/SVG 자동 생성. 디자인 SR 90% AI 처리. 스크린샷→개선 제안.' },
-  { icon:'🎤', title:'음성인식 + 다음명령 제시',      desc:'expo-speech-recognition 온디바이스. 한국어 STT. Messenger 명령 칩 자동 추천.' },
-  { icon:'🧠', title:'AI Brain 지능화 엔진',         desc:'영구 메모리(pgvector)·자동 스킬·LoRA 파인튜닝·지식 그래프. 운영 경험 누적→자기 개선.' },
-  { icon:'🔐', title:'Zero Trust + SBOM + N²SF',    desc:'ZTNA 정책·디바이스 신뢰·SBOM CycloneDX·국정원 N²SF 준수. EU CRA 공공 조달 완전 지원.' },
-  { icon:'🌱', title:'GreenOps + Edge/IoT',          desc:'Scope 2 탄소 추적(EU CSRD)·9.21억 IoT 디바이스. Carbon-aware 스케줄링.' },
-  { icon:'🏗️', title:'IDP 개발자 플랫폼',           desc:'소프트웨어 카탈로그·Golden Path 템플릿·셀프서비스 포털. 30~50% 배포 단축.' },
-  { icon:'🚀', title:'CI/CD 파이프라인',             desc:'Jenkins + Gitea. 5개 시스템 자동 빌드·배포·롤백·알림. 서버 빌드 방식.' },
-  { icon:'🌱', title:'자가수복 + 건강검진',          desc:'매일 03:00 자동 테스트(69개). 장애 감지 시 서비스 자동 재시작 + "🔧 스스로 고쳤습니다" 보고.' },
-  { icon:'📈', title:'자립도 측정 30→85%',           desc:'5차원 자립도 점수. 현재 30% → 목표 85%. 주간 보고서 자동 발송. LoRA 파인튜닝 자동화.' },
-  { icon:'🔀', title:'git commit → 자동 배포',        desc:'post-commit 훅. workspace 변경 감지 → Gitea push → webhook → 서버 자동 배포. 수동 불필요.' },
+  { icon:<IconAI {...IC('#6366F1')}/>,       title:'AI 에이전트 자동화',       desc:'Ollama 온프레미스 sLLM. 메신저 한 줄 → 자동 배포·운영. 폐쇄망 완전 지원.' },
+  { icon:<IconWrench {...IC('#0EA5E9')}/>,    title:'에이전트리스 아키텍처',     desc:'SSH/SFTP만으로 Tomcat·JBoss·WebLogic 원격 관리. 대상 서버 소프트웨어 설치 불필요.' },
+  { icon:<IconMessage {...IC('#10B981')}/>,   title:'ChatOps 자연어 명령',       desc:'"서버1 헬스체크"·"SR-XXXX 배포" — 자연어를 자동으로 봇 명령어로 변환.' },
+  { icon:<IconSearch {...IC('#F59E0B')}/>,    title:'RAG 하이브리드 검색',       desc:'BM25 + pgvector RRF. 자연어 질의로 KB·SR 통합 검색 + Ollama 답변 생성.' },
+  { icon:<IconBulb {...IC('#EF4444')}/>,      title:'Text-to-SQL 어시스턴트',   desc:'"이번 달 HIGH SR는?" — 자연어로 ITSM DB 직접 조회. SELECT 전용 안전 실행.' },
+  { icon:<IconFileText {...IC('#8B5CF6')}/>,  title:'Document AI (OCR)',         desc:'Upstage 연동. 계약서·납품서·청구서 자동 파싱 → ITSM 자동 등록.' },
+  { icon:<IconCloud {...IC('#0891B2')}/>,     title:'멀티클라우드 통합',         desc:'NCloud·AWS·KT Cloud 단일 관제. 비용 최적화 AI 권고. K-Cloud 전환 지원.' },
+  { icon:<IconServer {...IC('#059669')}/>,    title:'CMDB 자동 발견',            desc:'SSH/SNMP 에이전트리스 스캔. 서버·장비·의존성 자동 등록. 드리프트 실시간 감지.' },
+  { icon:<IconBarChart {...IC('#D97706')}/>,  title:'KPI + BI 대시보드',         desc:'MTTR·FCR·SLA 내장 5종 KPI. SR 트렌드·히트맵·MTTR 차트. 예측 분석.' },
+  { icon:<IconShield {...IC('#DC2626')}/>,    title:'보안 자동화',               desc:'PAM·MFA·CSAP 100항목·취약점 스캔·불변 감사로그. LDAP·SSO·드리프트 교정.' },
+  { icon:<IconGovt {...IC('#0369A1')}/>,      title:'공공기관 특화',             desc:'나라장터·CSAP·ISP·K-Cloud·공공API·행정망 분리. 공공 IT 표준 완전 지원.' },
+  { icon:<IconShield {...IC('#7C3AED')}/>,    title:'DR + 네트워크 관리',        desc:'Failover·RTO/RPO 추적. 스위치·방화벽 설정 백업·변경 감지·토폴로지 갱신.' },
+  { icon:<IconLink {...IC('#EC4899')}/>,      title:'엔터프라이즈 통합',          desc:'Jira·Slack·ServiceNow·ERP·SSO·카카오 알림톡. 계약서 OCR 자동화 포함.' },
+  { icon:<IconNetwork {...IC('#6366F1')}/>,   title:'자율 워크플로우 엔진',       desc:'조건 기반 자동화 규칙. SR 생성 트리거 → 자동 배정·알림·교정 시퀀스.' },
+  { icon:<IconBriefcase {...IC('#8B5CF6')}/>, title:'SaaS 멀티테넌트',            desc:'화이트라벨·구독·과금·셀프서비스 포털. 기관별 완전 격리. 1,000+ 기관 지원.' },
+  { icon:<IconMobile {...IC('#0EA5E9')}/>,    title:'APK QR 직접 배포',            desc:'Manager에서 APK 업로드 → QR 생성. 스캔 즉시 설치. 앱스토어 불필요. 내부망 배포 최적.' },
+  { icon:<IconZap {...IC('#F59E0B')}/>,       title:'배치 SSH + 자산 QR',          desc:'수십 서버 동시 SSH 실행·결과 수집. QR 라벨로 자산 실사 체크인 자동화.' },
+  { icon:<IconPieChart {...IC('#10B981')}/>,  title:'디자인 AI SR 자동화',          desc:'Ollama llava 비전 분석→CSS/SVG 자동 생성. 디자인 SR 90% AI 처리. 스크린샷→개선 제안.' },
+  { icon:<IconMessage {...IC('#EF4444')}/>,   title:'음성인식 + 다음명령 제시',      desc:'expo-speech-recognition 온디바이스. 한국어 STT. Messenger 명령 칩 자동 추천.' },
+  { icon:<IconBrain {...IC('#7C3AED')}/>,     title:'AI Brain 지능화 엔진',         desc:'영구 메모리(pgvector)·자동 스킬·LoRA 파인튜닝·지식 그래프. 운영 경험 누적→자기 개선.' },
+  { icon:<IconLock {...IC('#0369A1')}/>,      title:'Zero Trust + SBOM + N²SF',    desc:'ZTNA 정책·디바이스 신뢰·SBOM CycloneDX·국정원 N²SF 준수. EU CRA 공공 조달 완전 지원.' },
+  { icon:<IconLeaf {...IC('#059669')}/>,      title:'GreenOps + Edge/IoT',          desc:'Scope 2 탄소 추적(EU CSRD)·9.21억 IoT 디바이스. Carbon-aware 스케줄링.' },
+  { icon:<IconBuilding {...IC('#0891B2')}/>,  title:'IDP 개발자 플랫폼',           desc:'소프트웨어 카탈로그·Golden Path 템플릿·셀프서비스 포털. 30~50% 배포 단축.' },
+  { icon:<IconCode {...IC('#0891B2')}/>,      title:'CI/CD 파이프라인',             desc:'Jenkins + Gitea. 5개 시스템 자동 빌드·배포·롤백·알림. 서버 빌드 방식.' },
+  { icon:<IconCheckCircle {...IC('#059669')}/>, title:'자가수복 + 건강검진',        desc:'매일 03:00 자동 테스트(69개). 장애 감지 시 서비스 자동 재시작 + 자동 보고.' },
+  { icon:<IconTrendUp {...IC('#059669')}/>,   title:'자립도 측정 30→85%',           desc:'5차원 자립도 점수. 현재 30% → 목표 85%. 주간 보고서 자동 발송. LoRA 파인튜닝 자동화.' },
+  { icon:<IconShuffle {...IC('#6366F1')}/>,   title:'git commit → 자동 배포',        desc:'post-commit 훅. workspace 변경 감지 → Gitea push → webhook → 서버 자동 배포. 수동 불필요.' },
 ];
 
 const EDITIONS = [
@@ -938,7 +943,7 @@ export default function GuardiaDetail() {
                   <div key={i} style={{background:'#fff',border:'1px solid #e2e8f0',borderRadius:12,padding:20,
                                        borderTop:`3px solid #003366`}}>
                     <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
-                      <span style={{fontSize:24}}>{f.icon}</span>
+                      <span style={{display:'flex',alignItems:'center'}}>{f.icon}</span>
                       <span style={{fontWeight:700,fontSize:15,color:'#003366'}}>{f.title}</span>
                       <span style={{background:'#003366',color:'#fff',fontSize:10,padding:'2px 7px',
                                     borderRadius:8,marginLeft:'auto'}}>{f.badge}</span>
diff --git a/frontend/src/pages/MemberLogin.jsx b/frontend/src/pages/MemberLogin.jsx
index ca5058a..ee3b206 100644
--- a/frontend/src/pages/MemberLogin.jsx
+++ b/frontend/src/pages/MemberLogin.jsx
@@ -153,7 +153,7 @@ export default function MemberLogin() {
             <div className="sns-divider"><span>또는 SNS 로그인</span></div>
             <div className="sns-buttons">
               <button type="button" className="sns-btn sns-kakao" onClick={loginKakao}>
-                <span className="sns-icon">💬</span> 카카오로 로그인
+                <span className="sns-icon" style={{background:'#FAE100',borderRadius:'50%',width:20,height:20,display:'inline-flex',alignItems:'center',justifyContent:'center'}}><svg width="12" height="12" viewBox="0 0 24 24" fill="#3C1E1E"><path d="M12 4C7 4 3 7.1 3 11c0 2.5 1.5 4.7 3.8 6l-.8 3 3.4-2.2c.8.2 1.7.2 2.6.2 5 0 9-3.1 9-7S17 4 12 4z"/></svg></span> 카카오로 로그인
               </button>
               <button type="button" className="sns-btn sns-naver" onClick={loginNaver}>
                 <span className="sns-icon">N</span> 네이버로 로그인
@@ -209,7 +209,7 @@ export default function MemberLogin() {
             <div className="sns-divider"><span>또는 SNS로 간편 가입</span></div>
             <div className="sns-buttons">
               <button type="button" className="sns-btn sns-kakao" onClick={loginKakao}>
-                <span className="sns-icon">💬</span> 카카오로 시작
+                <span className="sns-icon" style={{background:'#FAE100',borderRadius:'50%',width:20,height:20,display:'inline-flex',alignItems:'center',justifyContent:'center'}}><svg width="12" height="12" viewBox="0 0 24 24" fill="#3C1E1E"><path d="M12 4C7 4 3 7.1 3 11c0 2.5 1.5 4.7 3.8 6l-.8 3 3.4-2.2c.8.2 1.7.2 2.6.2 5 0 9-3.1 9-7S17 4 12 4z"/></svg></span> 카카오로 시작
               </button>
               <button type="button" className="sns-btn sns-naver" onClick={loginNaver}>
                 <span className="sns-icon">N</span> 네이버로 시작
diff --git a/frontend/src/pages/Recruit.jsx b/frontend/src/pages/Recruit.jsx
index 2fe8c9e..1444085 100644
--- a/frontend/src/pages/Recruit.jsx
+++ b/frontend/src/pages/Recruit.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Routes, Route, NavLink } from 'react-router-dom';
 import './Common.css';
 import './Recruit.css';
-import { IconClock, IconHome, IconLaptop, IconTarget, IconBook, IconTrophy, IconGradCap, IconHospital, IconGift, IconUtensils, IconParty, IconBriefcase, IconAward, IconFlag, IconCheckCircle, IconBolt } from '../components/Icons';
+import { IconClock, IconHome, IconLaptop, IconTarget, IconBook, IconTrophy, IconGradCap, IconHospital, IconGift, IconUtensils, IconParty, IconBriefcase, IconAward, IconFlag, IconCheckCircle, IconBolt, IconFire2, IconHandshake } from '../components/Icons';
 
 const SUB_NAV = [
   { path: '/recruit/jobs',    label: '채용공고' },
@@ -213,9 +213,9 @@ function Welfare() {
             </div>
             <div className="grid-3">
               {[
-                { icon: '🔥', title: '도전하는 인재', desc: '새로운 기술과 문제에 두려움 없이 도전하는 분' },
-                { icon: '🤝', title: '협력하는 인재', desc: '팀과 함께 성장하며 지식을 나누는 분' },
-                { icon: '🎯', title: '책임지는 인재', desc: '맡은 업무에 오너십을 갖고 끝까지 완수하는 분' },
+                { icon: <IconFire2 size={36} color="#00A0C8"/>,    title: '도전하는 인재', desc: '새로운 기술과 문제에 두려움 없이 도전하는 분' },
+                { icon: <IconHandshake size={36} color="#00A0C8"/>, title: '협력하는 인재', desc: '팀과 함께 성장하며 지식을 나누는 분' },
+                { icon: <IconTarget size={36} color="#00A0C8"/>,    title: '책임지는 인재', desc: '맡은 업무에 오너십을 갖고 끝까지 완수하는 분' },
               ].map((t, i) => (
                 <div key={i} className="card" style={{ padding: '36px 28px', textAlign: 'center' }}>
                   <div style={{ fontSize: '48px', marginBottom: '16px' }}>{t.icon}</div>
diff --git a/frontend/src/pages/Sitemap.jsx b/frontend/src/pages/Sitemap.jsx
index e0b83e5..e5fbeb0 100644
--- a/frontend/src/pages/Sitemap.jsx
+++ b/frontend/src/pages/Sitemap.jsx
@@ -2,14 +2,17 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import './Common.css';
 import { useSeoMeta } from '../hooks/useSeoMeta';
+import { IconHouse, IconBuilding, IconShield, IconBarChart, IconMessage, IconUsers, IconNewspaper, IconKey, IconClipboard } from '../components/Icons';
+
+const IC = { size:20, color:'#00A0C8' };
 
 const MAP = [
   {
-    title: '홈', icon: '🏠',
+    title: '홈', icon: <IconHouse {...IC}/>,
     links: [{ label: '메인 홈페이지', path: '/' }],
   },
   {
-    title: '회사소개', icon: '🏢',
+    title: '회사소개', icon: <IconBuilding {...IC}/>,
     links: [
       { label: 'CEO 인사말',  path: '/company/greeting' },
       { label: '연혁',        path: '/company/history' },
@@ -19,7 +22,7 @@ const MAP = [
     ],
   },
   {
-    title: '솔루션', icon: '🛡️',
+    title: '솔루션', icon: <IconShield {...IC}/>,
     links: [
       { label: 'GUARDiA ITSM', path: '/solution/guardia', badge: 'NEW' },
       { label: 'ERP 솔루션',   path: '/solution/erp' },
@@ -28,14 +31,14 @@ const MAP = [
     ],
   },
   {
-    title: '사업실적', icon: '📊',
+    title: '사업실적', icon: <IconBarChart {...IC}/>,
     links: [
       { label: '구축 레퍼런스', path: '/business/reference' },
       { label: '파트너',        path: '/business/partner' },
     ],
   },
   {
-    title: '고객지원', icon: '💬',
+    title: '고객지원', icon: <IconMessage {...IC}/>,
     links: [
       { label: '공지사항',  path: '/support/notice' },
       { label: 'FAQ',       path: '/support/faq' },
@@ -44,7 +47,7 @@ const MAP = [
     ],
   },
   {
-    title: '채용', icon: '👥',
+    title: '채용', icon: <IconUsers {...IC}/>,
     links: [
       { label: '채용공고',  path: '/recruit/jobs' },
       { label: '복리후생',  path: '/recruit/welfare' },
@@ -52,20 +55,20 @@ const MAP = [
     ],
   },
   {
-    title: '뉴스', icon: '📰',
+    title: '뉴스', icon: <IconNewspaper {...IC}/>,
     links: [
       { label: '뉴스룸',      path: '/news/newsroom' },
       { label: '기술 블로그', path: '/news/blog' },
     ],
   },
   {
-    title: '회원', icon: '🔑',
+    title: '회원', icon: <IconKey {...IC}/>,
     links: [
       { label: '로그인 / 회원가입', path: '/login' },
     ],
   },
   {
-    title: '정책', icon: '📋',
+    title: '정책', icon: <IconClipboard {...IC}/>,
     links: [
       { label: '개인정보처리방침', path: '/privacy' },
       { label: '이용약관',        path: '/terms' },
diff --git a/frontend/src/pages/SolutionPage.jsx b/frontend/src/pages/SolutionPage.jsx
index ed7ab5a..0e4b465 100644
--- a/frontend/src/pages/SolutionPage.jsx
+++ b/frontend/src/pages/SolutionPage.jsx
@@ -3,6 +3,10 @@ import { Routes, Route, NavLink } from 'react-router-dom';
 import { Link } from 'react-router-dom';
 import './Common.css';
 import './SolutionPage.css';
+import { IconMoney, IconFactory, IconPackage, IconUsers, IconCart, IconBarChart, IconPhone, IconTarget,
+  IconEmail, IconAI, IconTrendUp, IconPieChart, IconGlobe, IconBulb, IconClipboard, IconLink,
+  IconDatabase, IconFileText, IconSearch, IconStar } from '../components/Icons';
+const IC=(c='#003366')=>({size:20,color:c});
 
 const SUB_NAV = [
   { path: '/solution/guardia', label: 'GUARDiA ITSM', badge: 'NEW' },
@@ -38,12 +42,12 @@ function SubNav({ title }) {
 /* ── ERP ── */
 function ERP() {
   const modules = [
-    { icon: '💰', name: '재무·회계', desc: '전표처리, 결산, 세무신고, 원가계산 자동화' },
-    { icon: '🏭', name: '생산관리', desc: 'BOM 관리, 생산계획, 공정관리, 품질관리' },
-    { icon: '📦', name: '구매·재고', desc: '발주, 입출고, 재고 현황, 협력사 포털' },
-    { icon: '👥', name: '인사·급여', desc: '근태관리, 급여계산, 조직도, 인사평가' },
-    { icon: '🛒', name: '영업·물류', desc: '수주관리, 배송, 매출 분석, 고객 관리' },
-    { icon: '📊', name: '경영 분석', desc: 'KPI 대시보드, 예산 vs 실적, 경영 보고서' },
+    { icon: <IconMoney {...IC()}/>,   name: '재무·회계', desc: '전표처리, 결산, 세무신고, 원가계산 자동화' },
+    { icon: <IconFactory {...IC()}/>, name: '생산관리', desc: 'BOM 관리, 생산계획, 공정관리, 품질관리' },
+    { icon: <IconPackage {...IC()}/>, name: '구매·재고', desc: '발주, 입출고, 재고 현황, 협력사 포털' },
+    { icon: <IconUsers {...IC()}/>,   name: '인사·급여', desc: '근태관리, 급여계산, 조직도, 인사평가' },
+    { icon: <IconCart {...IC()}/>,    name: '영업·물류', desc: '수주관리, 배송, 매출 분석, 고객 관리' },
+    { icon: <IconBarChart {...IC()}/>,name: '경영 분석', desc: 'KPI 대시보드, 예산 vs 실적, 경영 보고서' },
   ];
   return (
     <main id="main-content" className="inner-page">
@@ -112,12 +116,12 @@ function ERP() {
 /* ── CRM ── */
 function CRM() {
   const features = [
-    { icon: '📇', name: '고객 360˚', desc: '고객 정보, 구매이력, 상담이력, 선호도를 단일 뷰로 통합' },
-    { icon: '📞', name: '멀티채널 상담', desc: '전화·이메일·채팅·SNS 통합 인입, 상담 이력 자동 기록' },
-    { icon: '🎯', name: '영업 파이프라인', desc: '리드 발굴부터 계약까지 전 단계 시각화 관리' },
-    { icon: '📨', name: '마케팅 자동화', desc: '고객 세그먼트별 자동 캠페인, 이메일·SMS 발송' },
-    { icon: '🤖', name: 'AI 상담 추천', desc: 'Ollama LLM 기반 최적 답변 자동 추천 및 요약' },
-    { icon: '📈', name: '성과 분석', desc: '상담사별·채널별 KPI, 고객 만족도, 전환율 리포트' },
+    { icon: <IconSearch {...IC()}/>,  name: '고객 360˚', desc: '고객 정보, 구매이력, 상담이력, 선호도를 단일 뷰로 통합' },
+    { icon: <IconPhone {...IC()}/>,   name: '멀티채널 상담', desc: '전화·이메일·채팅·SNS 통합 인입, 상담 이력 자동 기록' },
+    { icon: <IconTarget {...IC()}/>,  name: '영업 파이프라인', desc: '리드 발굴부터 계약까지 전 단계 시각화 관리' },
+    { icon: <IconEmail {...IC()}/>,   name: '마케팅 자동화', desc: '고객 세그먼트별 자동 캠페인, 이메일·SMS 발송' },
+    { icon: <IconAI {...IC()}/>,      name: 'AI 상담 추천', desc: 'Ollama LLM 기반 최적 답변 자동 추천 및 요약' },
+    { icon: <IconTrendUp {...IC()}/>, name: '성과 분석', desc: '상담사별·채널별 KPI, 고객 만족도, 전환율 리포트' },
   ];
   return (
     <main id="main-content" className="inner-page">
@@ -193,12 +197,12 @@ function CRM() {
 /* ── BI ── */
 function BI() {
   const charts = [
-    { icon: '📊', name: '경영 대시보드', desc: '실시간 KPI 모니터링, 부서별 성과 지표, 경영진 요약 보고' },
-    { icon: '📉', name: '매출·비용 분석', desc: '기간별·제품별·채널별 매출 트렌드, 비용 구조 분석' },
-    { icon: '🗺️', name: '지역별 분석', desc: '지도 기반 시각화, 공공기관 지역별 서비스 현황' },
-    { icon: '🔮', name: 'AI 예측 분석', desc: '머신러닝 기반 수요 예측, 이상 패턴 자동 탐지' },
-    { icon: '📋', name: '자동 보고서', desc: '일·주·월 보고서 자동 생성, 이메일·메신저 배포' },
-    { icon: '🔗', name: 'ETL 파이프라인', desc: 'Oracle, SAP, 공공DB 등 다양한 소스 데이터 연계' },
+    { icon: <IconBarChart {...IC()}/>, name: '경영 대시보드', desc: '실시간 KPI 모니터링, 부서별 성과 지표, 경영진 요약 보고' },
+    { icon: <IconPieChart {...IC()}/>, name: '매출·비용 분석', desc: '기간별·제품별·채널별 매출 트렌드, 비용 구조 분석' },
+    { icon: <IconGlobe {...IC()}/>,    name: '지역별 분석', desc: '지도 기반 시각화, 공공기관 지역별 서비스 현황' },
+    { icon: <IconBulb {...IC()}/>,     name: 'AI 예측 분석', desc: '머신러닝 기반 수요 예측, 이상 패턴 자동 탐지' },
+    { icon: <IconClipboard {...IC()}/>,name: '자동 보고서', desc: '일·주·월 보고서 자동 생성, 이메일·메신저 배포' },
+    { icon: <IconLink {...IC()}/>,     name: 'ETL 파이프라인', desc: 'Oracle, SAP, 공공DB 등 다양한 소스 데이터 연계' },
   ];
   return (
     <main id="main-content" className="inner-page">
diff --git a/frontend/src/pages/Support.jsx b/frontend/src/pages/Support.jsx
index 422778f..5d9ddaa 100644
--- a/frontend/src/pages/Support.jsx
+++ b/frontend/src/pages/Support.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { IconZap, IconRuler, IconMoney, IconPhone, IconBarChart, IconBuilding, IconDownload } from '../components/Icons';
 import { Routes, Route, NavLink } from 'react-router-dom';
 import './Common.css';
 import './Support.css';
@@ -162,12 +163,12 @@ function FAQ() {
 
 /* ── 카탈로그 ── */
 const CATALOGS = [
-  { title:'GUARDiA ITSM v2.0 제품 카탈로그',   desc:'GUARDiA ITSM 전체 기능 및 도입 가이드',        pages:'24p', size:'4.2MB', date:'2026.05', icon:'⚡', color:'var(--primary)' },
-  { title:'GUARDiA ITSM 기술 명세서',          desc:'API 명세, 아키텍처, 보안 설계 문서',            pages:'48p', size:'8.1MB', date:'2026.05', icon:'📐', color:'#7c3aed' },
-  { title:'ERP 솔루션 카탈로그',               desc:'공공·중견기업 맞춤형 ERP 모듈 소개',           pages:'16p', size:'3.5MB', date:'2026.03', icon:'💰', color:'#059669' },
-  { title:'CRM 솔루션 카탈로그',               desc:'AI 기반 고객관리 플랫폼 소개',                 pages:'12p', size:'2.8MB', date:'2026.03', icon:'📞', color:'#d97706' },
-  { title:'BI 솔루션 카탈로그',                desc:'경영 분석 및 대시보드 플랫폼 소개',            pages:'12p', size:'2.4MB', date:'2026.02', icon:'📊', color:'#0891b2' },
-  { title:'지오정보기술 회사 소개서',           desc:'회사 연혁, 사업 영역, 주요 레퍼런스',          pages:'20p', size:'5.6MB', date:'2026.01', icon:'🏢', color:'var(--secondary)' },
+  { title:'GUARDiA ITSM v2.0 제품 카탈로그',   desc:'GUARDiA ITSM 전체 기능 및 도입 가이드',        pages:'24p', size:'4.2MB', date:'2026.05', icon:<IconZap size={28} color="var(--primary)"/>,    color:'var(--primary)' },
+  { title:'GUARDiA ITSM 기술 명세서',          desc:'API 명세, 아키텍처, 보안 설계 문서',            pages:'48p', size:'8.1MB', date:'2026.05', icon:<IconRuler size={28} color="#7c3aed"/>,           color:'#7c3aed' },
+  { title:'ERP 솔루션 카탈로그',               desc:'공공·중견기업 맞춤형 ERP 모듈 소개',           pages:'16p', size:'3.5MB', date:'2026.03', icon:<IconMoney size={28} color="#059669"/>,            color:'#059669' },
+  { title:'CRM 솔루션 카탈로그',               desc:'AI 기반 고객관리 플랫폼 소개',                 pages:'12p', size:'2.8MB', date:'2026.03', icon:<IconPhone size={28} color="#d97706"/>,            color:'#d97706' },
+  { title:'BI 솔루션 카탈로그',                desc:'경영 분석 및 대시보드 플랫폼 소개',            pages:'12p', size:'2.4MB', date:'2026.02', icon:<IconBarChart size={28} color="#0891b2"/>,         color:'#0891b2' },
+  { title:'지오정보기술 회사 소개서',           desc:'회사 연혁, 사업 영역, 주요 레퍼런스',          pages:'20p', size:'5.6MB', date:'2026.01', icon:<IconBuilding size={28} color="var(--secondary)"/>, color:'var(--secondary)' },
 ];
 
 function Catalog() {
@@ -185,7 +186,7 @@ function Catalog() {
             {CATALOGS.map((c, i) => (
               <div key={i} className="card catalog-card">
                 <div className="catalog-icon-wrap" style={{ background: c.color + '18' }}>
-                  <span className="catalog-icon" style={{ color: c.color }}>{c.icon}</span>
+                  <span className="catalog-icon" style={{ color: c.color, display:'flex' }}>{c.icon}</span>
                 </div>
                 <div className="catalog-info">
                   <h3 className="catalog-title">{c.title}</h3>
diff --git a/frontend/src/pages/admin/AdminDashboard.jsx b/frontend/src/pages/admin/AdminDashboard.jsx
index cd8affd..5be76b9 100644
--- a/frontend/src/pages/admin/AdminDashboard.jsx
+++ b/frontend/src/pages/admin/AdminDashboard.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
+import { IconNewspaper, IconEmail, IconUsers, IconBell } from '../../components/Icons';
 
 const API = (path) => fetch(path, {
   headers: { Authorization: `Bearer ${localStorage.getItem('admin_token')}` },
@@ -19,9 +20,9 @@ export default function AdminDashboard() {
   if (!stats) return null;
 
   const STAT_CARDS = [
-    { icon: '📰', label: '전체 뉴스', value: stats.totalNews, sub: `공개 ${stats.visibleNews}건`, color: 'blue' },
-    { icon: '📩', label: '전체 문의', value: stats.totalInquiries, sub: `미답변 ${stats.pendingInquiries}건`, color: stats.pendingInquiries > 0 ? 'red' : 'green' },
-    { icon: '👥', label: '채용공고', value: stats.totalRecruits, sub: `진행중 ${stats.activeRecruits}건`, color: 'green' },
+    { icon: <IconNewspaper size={22} color="#fff"/>, label: '전체 뉴스', value: stats.totalNews, sub: `공개 ${stats.visibleNews}건`, color: 'blue' },
+    { icon: <IconEmail size={22} color="#fff"/>, label: '전체 문의', value: stats.totalInquiries, sub: `미답변 ${stats.pendingInquiries}건`, color: stats.pendingInquiries > 0 ? 'red' : 'green' },
+    { icon: <IconUsers size={22} color="#fff"/>, label: '채용공고', value: stats.totalRecruits, sub: `진행중 ${stats.activeRecruits}건`, color: 'green' },
   ];
 
   return (
@@ -39,7 +40,7 @@ export default function AdminDashboard() {
         ))}
         {stats.pendingInquiries > 0 && (
           <div className="stat-card" style={{ borderLeft: '3px solid #ef4444' }}>
-            <div className="stat-icon red">🔔</div>
+            <div className="stat-icon red"><IconBell size={18} color="#fff"/></div>
             <div className="stat-info">
               <h4 style={{ color: '#ef4444' }}>{stats.pendingInquiries}</h4>
               <p>미답변 문의<br /><Link to="/admin/inquiries" style={{ fontSize: 11, color: '#ef4444' }}>바로가기 →</Link></p>
diff --git a/frontend/src/pages/admin/AdminLayout.jsx b/frontend/src/pages/admin/AdminLayout.jsx
index bc5064f..d5977c2 100644
--- a/frontend/src/pages/admin/AdminLayout.jsx
+++ b/frontend/src/pages/admin/AdminLayout.jsx
@@ -1,20 +1,23 @@
 import { useEffect, useState } from 'react';
 import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom';
 import './admin.css';
+import { IconBarChart, IconNewspaper, IconQuestion, IconCalendar, IconUsers, IconEmail, IconUser, IconCog } from '../../components/Icons';
+
+const IC = (color='#64748b') => ({ size:16, color });
 
 const NAV = [
   { section: '메인' },
-  { path: '/admin/dashboard', icon: '📊', label: '대시보드' },
+  { path: '/admin/dashboard', icon: <IconBarChart {...IC()}/>, label: '대시보드' },
   { section: '콘텐츠 관리' },
-  { path: '/admin/news',    icon: '📰', label: '뉴스/블로그/공지' },
-  { path: '/admin/faq',     icon: '❓', label: 'FAQ 관리' },
-  { path: '/admin/history', icon: '📅', label: '회사 연혁' },
-  { path: '/admin/recruit', icon: '👥', label: '채용공고' },
+  { path: '/admin/news',    icon: <IconNewspaper {...IC()}/>, label: '뉴스/블로그/공지' },
+  { path: '/admin/faq',     icon: <IconQuestion {...IC()}/>,  label: 'FAQ 관리' },
+  { path: '/admin/history', icon: <IconCalendar {...IC()}/>,  label: '회사 연혁' },
+  { path: '/admin/recruit', icon: <IconUsers {...IC()}/>,     label: '채용공고' },
   { section: '고객 관리' },
-  { path: '/admin/inquiries', icon: '📩', label: '문의 관리', badgeKey: 'pendingInquiries' },
-  { path: '/admin/members',   icon: '👤', label: '회원 관리' },
+  { path: '/admin/inquiries', icon: <IconEmail {...IC()}/>,   label: '문의 관리', badgeKey: 'pendingInquiries' },
+  { path: '/admin/members',   icon: <IconUser {...IC()}/>,    label: '회원 관리' },
   { section: '시스템' },
-  { path: '/admin/settings', icon: '⚙️', label: '설정' },
+  { path: '/admin/settings', icon: <IconCog {...IC()}/>,      label: '설정' },
 ];
 
 export default function AdminLayout() {