diff --git a/frontend/src/pages/SolutionPage.jsx b/frontend/src/pages/SolutionPage.jsx
index 03874f7..ddea5b8 100644
--- a/frontend/src/pages/SolutionPage.jsx
+++ b/frontend/src/pages/SolutionPage.jsx
@@ -1,292 +1,293 @@
-import React from 'react';
-import { Routes, Route, NavLink } from 'react-router-dom';
-import { Link } from 'react-router-dom';
-import './Common.css';
-import './SolutionPage.css';
-
-const SUB_NAV = [
-  { path: '/solution/guardia', label: 'GUARDiA ITSM', badge: 'NEW' },
-  { path: '/solution/erp',     label: 'ERP' },
-  { path: '/solution/crm',     label: 'CRM' },
-  { path: '/solution/bi',      label: 'BI' },
-];
-
-function SubNav({ title }) {
-  return (
-    <>
-      <div className="page-hero">
-        <div className="container">
-          <span className="section-label">Solution</span>
-          <h1 className="page-hero-title">{title}</h1>
-        </div>
-      </div>
-      <nav className="sub-nav">
-        <div className="container">
-          {SUB_NAV.map(n => (
-            <NavLink key={n.path} to={n.path}
-              className={({ isActive }) => 'sub-nav-item' + (isActive ? ' active' : '')}>
-              {n.label}
-              {n.badge && <span className="badge badge-new" style={{ marginLeft: '6px', fontSize: '10px' }}>{n.badge}</span>}
-            </NavLink>
-          ))}
-        </div>
-      </nav>
-    </>
-  );
-}
-
-/* ── 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 실적, 경영 보고서' },
-  ];
-  return (
-    <main id="main-content" className="inner-page">
-      <SubNav title="ERP 솔루션" />
-      <section className="section">
-        <div className="container">
-          <div className="sol-hero-grid">
-            <div>
-              <span className="section-label">Enterprise Resource Planning</span>
-              <h2 className="sol-title">공공·중견기업 맞춤형<br /><em>통합 ERP 솔루션</em></h2>
-              <p className="sol-desc">
-                20년 이상 현대모비스, 한화그룹, 이마트 등 국내 주요 기업의 핵심 업무 시스템을 구축한 경험을 바탕으로,
-                고객사의 업무 프로세스에 최적화된 맞춤형 ERP를 제공합니다.
-              </p>
-              <div className="sol-features">
-                {['공공기관 표준 회계 기준 적용', 'Oracle / Tibero DB 지원', '모바일 결재·보고 지원', '기존 레거시 시스템 연계'].map((f, i) => (
-                  <div key={i} className="sol-feature-item">
-                    <span className="sol-check">✓</span> {f}
-                  </div>
-                ))}
-              </div>
-              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
-                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">무료 데모 신청</Link>
-                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그 다운로드</Link>
-              </div>
-            </div>
-            <div className="sol-visual erp-visual">
-              <div className="sol-screen">
-                <div className="sol-screen-header"><span />재무 대시보드</div>
-                <div className="sol-chart-bar-wrap">
-                  {[80, 65, 90, 72, 88, 55, 95].map((h, i) => (
-                    <div key={i} className="sol-chart-bar" style={{ height: h + '%' }} />
-                  ))}
-                </div>
-                <div className="sol-stat-row">
-                  <div className="sol-stat"><strong>₩12.4억</strong><span>이번달 매출</span></div>
-                  <div className="sol-stat"><strong>98.2%</strong><span>예산 집행률</span></div>
-                  <div className="sol-stat"><strong>+18%</strong><span>전월 대비</span></div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* 모듈 */}
-          <div style={{ marginTop: '80px' }}>
-            <div className="section-header">
-              <span className="section-label">Modules</span>
-              <h2 className="section-title">6대 핵심 모듈</h2>
-            </div>
-            <div className="grid-3">
-              {modules.map((m, i) => (
-                <div key={i} className="card sol-module-card">
-                  <div className="sol-module-icon">{m.icon}</div>
-                  <h3>{m.name}</h3>
-                  <p>{m.desc}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  );
-}
-
-/* ── 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, 고객 만족도, 전환율 리포트' },
-  ];
-  return (
-    <main id="main-content" className="inner-page">
-      <SubNav title="CRM 솔루션" />
-      <section className="section">
-        <div className="container">
-          <div className="sol-hero-grid">
-            <div>
-              <span className="section-label">Customer Relationship Management</span>
-              <h2 className="sol-title">AI 기반<br /><em>고객 관계 관리 플랫폼</em></h2>
-              <p className="sol-desc">
-                삼성전자 차세대 CRM, LG U+ VAN 고도화, 현대캐피탈 차세대 시스템 등
-                국내 최대 규모 CRM 프로젝트를 성공적으로 수행한 전문 역량으로 구축합니다.
-                온프레미스 AI(Ollama) 연동으로 데이터 외부 유출 없이 지능형 상담을 실현합니다.
-              </p>
-              <div className="sol-features">
-                {['삼성전자·LG·현대 구축 레퍼런스', '온프레미스 AI 상담 추천', 'CTI 연동 (콜센터 솔루션)', '공공기관 개인정보보호법 준수'].map((f, i) => (
-                  <div key={i} className="sol-feature-item">
-                    <span className="sol-check">✓</span> {f}
-                  </div>
-                ))}
-              </div>
-              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
-                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">데모 신청</Link>
-                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그</Link>
-              </div>
-            </div>
-            <div className="sol-visual crm-visual">
-              <div className="sol-screen">
-                <div className="sol-screen-header"><span />고객 상담 현황</div>
-                <div className="crm-items">
-                  {[
-                    { name: '김민준', type: '제품문의', status: '처리중', color: '#f59e0b' },
-                    { name: '이서연', type: '기술지원', status: '완료',   color: '#10b981' },
-                    { name: '박지후', type: '불만접수', status: '대기',   color: '#ef4444' },
-                    { name: '최수아', type: '데모신청', status: '완료',   color: '#10b981' },
-                  ].map((c, i) => (
-                    <div key={i} className="crm-item">
-                      <div className="crm-avatar">{c.name[0]}</div>
-                      <div className="crm-info">
-                        <strong>{c.name}</strong>
-                        <span>{c.type}</span>
-                      </div>
-                      <span className="crm-status" style={{ color: c.color }}>{c.status}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div style={{ marginTop: '80px' }}>
-            <div className="section-header">
-              <span className="section-label">Features</span>
-              <h2 className="section-title">주요 기능</h2>
-            </div>
-            <div className="grid-3">
-              {features.map((f, i) => (
-                <div key={i} className="card sol-module-card">
-                  <div className="sol-module-icon">{f.icon}</div>
-                  <h3>{f.name}</h3>
-                  <p>{f.desc}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  );
-}
-
-/* ── 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 등 다양한 소스 데이터 연계' },
-  ];
-  return (
-    <main id="main-content" className="inner-page">
-      <SubNav title="BI 솔루션" />
-      <section className="section">
-        <div className="container">
-          <div className="sol-hero-grid">
-            <div>
-              <span className="section-label">Business Intelligence</span>
-              <h2 className="sol-title">데이터 기반<br /><em>의사결정 플랫폼</em></h2>
-              <p className="sol-desc">
-                OZ Report, MiPlatform, JasperReports 등 다양한 보고 도구와의 연동 경험을 바탕으로,
-                공공기관·중견기업 맞춤형 BI 플랫폼을 구축합니다.
-                기존 레거시 DB에서 실시간 데이터를 수집해 경영 인사이트를 제공합니다.
-              </p>
-              <div className="sol-features">
-                {['OZ·MiPlatform·JasperReport 연동', '실시간 대시보드 (WebSocket)', 'Oracle·Tibero·PostgreSQL 지원', '공공기관 표준 보고서 양식'].map((f, i) => (
-                  <div key={i} className="sol-feature-item">
-                    <span className="sol-check">✓</span> {f}
-                  </div>
-                ))}
-              </div>
-              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
-                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">데모 신청</Link>
-                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그</Link>
-              </div>
-            </div>
-            <div className="sol-visual bi-visual">
-              <div className="sol-screen">
-                <div className="sol-screen-header"><span />경영 대시보드</div>
-                <div className="bi-kpis">
-                  {[
-                    { label:'매출', val:'₩48.2억', up:true,  delta:'+12%' },
-                    { label:'비용', val:'₩31.7억', up:false, delta:'-3%' },
-                    { label:'이익', val:'₩16.5억', up:true,  delta:'+28%' },
-                    { label:'고객', val:'1,240명',  up:true,  delta:'+8%' },
-                  ].map((k, i) => (
-                    <div key={i} className="bi-kpi">
-                      <span className="bi-kpi-label">{k.label}</span>
-                      <strong className="bi-kpi-val">{k.val}</strong>
-                      <span className="bi-kpi-delta" style={{ color: k.up ? '#10b981' : '#ef4444' }}>
-                        {k.delta}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-                <div className="bi-bar-chart">
-                  {['1Q','2Q','3Q','4Q'].map((q, i) => (
-                    <div key={i} className="bi-bar-group">
-                      <div className="bi-bar-pair">
-                        <div className="bi-bar revenue" style={{ height: [60, 75, 85, 100][i] + '%' }} />
-                        <div className="bi-bar cost"    style={{ height: [70, 65, 60, 55][i] + '%' }} />
-                      </div>
-                      <span>{q}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div style={{ marginTop: '80px' }}>
-            <div className="section-header">
-              <span className="section-label">Features</span>
-              <h2 className="section-title">주요 기능</h2>
-            </div>
-            <div className="grid-3">
-              {charts.map((c, i) => (
-                <div key={i} className="card sol-module-card">
-                  <div className="sol-module-icon">{c.icon}</div>
-                  <h3>{c.name}</h3>
-                  <p>{c.desc}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  );
-}
-
-export default function SolutionPage() {
-  return (
-    <Routes>
-      <Route path="erp" element={<ERP />} />
-      <Route path="crm" element={<CRM />} />
-      <Route path="bi"  element={<BI />} />
-    </Routes>
-  );
-}
+import React from 'react';
+import { Routes, Route, NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+import './Common.css';
+import './SolutionPage.css';
+
+const SUB_NAV = [
+  { path: '/solution/guardia', label: 'GUARDiA ITSM', badge: 'NEW' },
+  { path: '/solution/erp',     label: 'ERP' },
+  { path: '/solution/crm',     label: 'CRM' },
+  { path: '/solution/bi',      label: 'BI' },
+];
+
+function SubNav({ title }) {
+  return (
+    <>
+      <div className="page-hero">
+        <div className="container">
+          <span className="section-label">Solution</span>
+          <h1 className="page-hero-title">{title}</h1>
+        </div>
+      </div>
+      <nav className="sub-nav">
+        <div className="container">
+          {SUB_NAV.map(n => (
+            <NavLink key={n.path} to={n.path}
+              className={({ isActive }) => 'sub-nav-item' + (isActive ? ' active' : '')}>
+              {n.label}
+              {n.badge && <span className="badge badge-new" style={{ marginLeft: '6px', fontSize: '10px' }}>{n.badge}</span>}
+            </NavLink>
+          ))}
+        </div>
+      </nav>
+    </>
+  );
+}
+
+/* ── 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 실적, 경영 보고서' },
+  ];
+  return (
+    <main id="main-content" className="inner-page">
+      <SubNav title="ERP 솔루션" />
+      <section className="section">
+        <div className="container">
+          <div className="sol-hero-grid">
+            <div>
+              <span className="section-label">Enterprise Resource Planning</span>
+              <h2 className="sol-title">공공·중견기업 맞춤형<br /><em>통합 ERP 솔루션</em></h2>
+              <p className="sol-desc">
+                20년 이상 현대모비스, 한화그룹, 이마트 등 국내 주요 기업의 핵심 업무 시스템을 구축한 경험을 바탕으로,
+                고객사의 업무 프로세스에 최적화된 맞춤형 ERP를 제공합니다.
+              </p>
+              <div className="sol-features">
+                {['공공기관 표준 회계 기준 적용', 'Oracle / Tibero DB 지원', '모바일 결재·보고 지원', '기존 레거시 시스템 연계'].map((f, i) => (
+                  <div key={i} className="sol-feature-item">
+                    <span className="sol-check">✓</span> {f}
+                  </div>
+                ))}
+              </div>
+              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
+                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">무료 데모 신청</Link>
+                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그 다운로드</Link>
+              </div>
+            </div>
+            <div className="sol-visual erp-visual">
+              <div className="sol-screen">
+                <div className="sol-screen-header"><span />재무 대시보드</div>
+                <div className="sol-chart-bar-wrap">
+                  {[80, 65, 90, 72, 88, 55, 95].map((h, i) => (
+                    <div key={i} className="sol-chart-bar" style={{ height: h + '%' }} />
+                  ))}
+                </div>
+                <div className="sol-stat-row">
+                  <div className="sol-stat"><strong>₩12.4억</strong><span>이번달 매출</span></div>
+                  <div className="sol-stat"><strong>98.2%</strong><span>예산 집행률</span></div>
+                  <div className="sol-stat"><strong>+18%</strong><span>전월 대비</span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 모듈 */}
+          <div style={{ marginTop: '80px' }}>
+            <div className="section-header">
+              <span className="section-label">Modules</span>
+              <h2 className="section-title">6대 핵심 모듈</h2>
+            </div>
+            <div className="grid-3">
+              {modules.map((m, i) => (
+                <div key={i} className="card sol-module-card">
+                  <div className="sol-module-icon">{m.icon}</div>
+                  <h3>{m.name}</h3>
+                  <p>{m.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+/* ── 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, 고객 만족도, 전환율 리포트' },
+  ];
+  return (
+    <main id="main-content" className="inner-page">
+      <SubNav title="CRM 솔루션" />
+      <section className="section">
+        <div className="container">
+          <div className="sol-hero-grid">
+            <div>
+              <span className="section-label">Customer Relationship Management</span>
+              <h2 className="sol-title">AI 기반<br /><em>고객 관계 관리 플랫폼</em></h2>
+              <p className="sol-desc">
+                삼성전자 차세대 CRM, LG U+ VAN 고도화, 현대캐피탈 차세대 시스템 등
+                국내 최대 규모 CRM 프로젝트를 성공적으로 수행한 전문 역량으로 구축합니다.
+                온프레미스 AI(Ollama) 연동으로 데이터 외부 유출 없이 지능형 상담을 실현합니다.
+              </p>
+              <div className="sol-features">
+                {['삼성전자·LG·현대 구축 레퍼런스', '온프레미스 AI 상담 추천', 'CTI 연동 (콜센터 솔루션)', '공공기관 개인정보보호법 준수'].map((f, i) => (
+                  <div key={i} className="sol-feature-item">
+                    <span className="sol-check">✓</span> {f}
+                  </div>
+                ))}
+              </div>
+              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
+                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">데모 신청</Link>
+                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그</Link>
+              </div>
+            </div>
+            <div className="sol-visual crm-visual">
+              <div className="sol-screen">
+                <div className="sol-screen-header"><span />고객 상담 현황</div>
+                <div className="crm-items">
+                  {[
+                    { name: '김민준', type: '제품문의', status: '처리중', color: '#f59e0b' },
+                    { name: '이서연', type: '기술지원', status: '완료',   color: '#10b981' },
+                    { name: '박지후', type: '불만접수', status: '대기',   color: '#ef4444' },
+                    { name: '최수아', type: '데모신청', status: '완료',   color: '#10b981' },
+                  ].map((c, i) => (
+                    <div key={i} className="crm-item">
+                      <div className="crm-avatar">{c.name[0]}</div>
+                      <div className="crm-info">
+                        <strong>{c.name}</strong>
+                        <span>{c.type}</span>
+                      </div>
+                      <span className="crm-status" style={{ color: c.color }}>{c.status}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div style={{ marginTop: '80px' }}>
+            <div className="section-header">
+              <span className="section-label">Features</span>
+              <h2 className="section-title">주요 기능</h2>
+            </div>
+            <div className="grid-3">
+              {features.map((f, i) => (
+                <div key={i} className="card sol-module-card">
+                  <div className="sol-module-icon">{f.icon}</div>
+                  <h3>{f.name}</h3>
+                  <p>{f.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+/* ── 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 등 다양한 소스 데이터 연계' },
+  ];
+  return (
+    <main id="main-content" className="inner-page">
+      <SubNav title="BI 솔루션" />
+      <section className="section">
+        <div className="container">
+          <div className="sol-hero-grid">
+            <div>
+              <span className="section-label">Business Intelligence</span>
+              <h2 className="sol-title">데이터 기반<br /><em>의사결정 플랫폼</em></h2>
+              <p className="sol-desc">
+                OZ Report, MiPlatform, JasperReports 등 다양한 보고 도구와의 연동 경험을 바탕으로,
+                공공기관·중견기업 맞춤형 BI 플랫폼을 구축합니다.
+                기존 레거시 DB에서 실시간 데이터를 수집해 경영 인사이트를 제공합니다.
+              </p>
+              <div className="sol-features">
+                {['OZ·MiPlatform·JasperReport 연동', '실시간 대시보드 (WebSocket)', 'Oracle·Tibero·PostgreSQL 지원', '공공기관 표준 보고서 양식'].map((f, i) => (
+                  <div key={i} className="sol-feature-item">
+                    <span className="sol-check">✓</span> {f}
+                  </div>
+                ))}
+              </div>
+              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
+                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">데모 신청</Link>
+                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그</Link>
+              </div>
+            </div>
+            <div className="sol-visual bi-visual">
+              <div className="sol-screen">
+                <div className="sol-screen-header"><span />경영 대시보드</div>
+                <div className="bi-kpis">
+                  {[
+                    { label:'매출', val:'₩48.2억', up:true,  delta:'+12%' },
+                    { label:'비용', val:'₩31.7억', up:false, delta:'-3%' },
+                    { label:'이익', val:'₩16.5억', up:true,  delta:'+28%' },
+                    { label:'고객', val:'1,240명',  up:true,  delta:'+8%' },
+                  ].map((k, i) => (
+                    <div key={i} className="bi-kpi">
+                      <span className="bi-kpi-label">{k.label}</span>
+                      <strong className="bi-kpi-val">{k.val}</strong>
+                      <span className="bi-kpi-delta" style={{ color: k.up ? '#10b981' : '#ef4444' }}>
+                        {k.delta}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+                <div className="bi-bar-chart">
+                  {['1Q','2Q','3Q','4Q'].map((q, i) => (
+                    <div key={i} className="bi-bar-group">
+                      <div className="bi-bar-pair">
+                        <div className="bi-bar revenue" style={{ height: [60, 75, 85, 100][i] + '%' }} />
+                        <div className="bi-bar cost"    style={{ height: [70, 65, 60, 55][i] + '%' }} />
+                      </div>
+                      <span>{q}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div style={{ marginTop: '80px' }}>
+            <div className="section-header">
+              <span className="section-label">Features</span>
+              <h2 className="section-title">주요 기능</h2>
+            </div>
+            <div className="grid-3">
+              {charts.map((c, i) => (
+                <div key={i} className="card sol-module-card">
+                  <div className="sol-module-icon">{c.icon}</div>
+                  <h3>{c.name}</h3>
+                  <p>{c.desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+
+export default function SolutionPage() {
+  return (
+    <Routes>
+      <Route path="erp" element={<ERP />} />
+      <Route path="crm" element={<CRM />} />
+      <Route path="bi"  element={<BI />} />
+      <Route path="*"   element={<ERP />} />
+    </Routes>
+  );
+}