SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: [brochure] v7 1page 개선 - 히어로 SVG, Before/After, 기술태그 추가

Browse Source 
- 히어로 섹션에 대시보드 모니터 SVG 아이콘 추가
- Before/After 인포그래픽 추가
- 6대 핵심기능 2열 그리드 + SVG 아이콘
- 기술 태그 5개 (실시간, PC+모바일, 역할별 권한, 데이터 암호화, 클라우드)
- PPTX 재생성
This commit is contained in:
김보곤
2026-03-01 19:37:52 +09:00
parent 4c9fd233cc
commit b8fa244271
3 changed files with 323 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
sam/docs/brochure/v7/sam-brochure-v7-dashboard-1page.pptx
View File

Binary file not shown.

BIN
sam/docs/brochure/v7/sam-brochure-v7-dashboard-2page.pptx
View File

Binary file not shown.

556
sam/docs/brochure/v7/slides/brochure-dashboard-1page.html
View File

@@ -8,7 +8,7 @@
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FAFAF9;
padding: 18pt 20pt 10pt 20pt;
padding: 22pt 20pt 12pt 20pt;
display: flex; flex-direction: column;
}
</style>
@@ -16,271 +16,361 @@
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 10pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 20pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">CEO DASHBOARD</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #A8A29E;">CEO DASHBOARD v7</p>
</div>
<!-- 히어로 -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #292524;">대표님, 우리 회사 지금 어떤 상태인가요?</p>
<p style="font-size: 7pt; color: #57534E; margin-top: 3pt;">매출, 수주, 조직 실적, 승인 대기 — 더 이상 보고를 기다리지 마세요.</p>
</div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E7E5E4; border-radius: 6pt; padding: 7pt; margin-bottom: 10pt; box-shadow: 0 1pt 3pt rgba(0,0,0,0.04);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 2pt; margin-bottom: 4pt;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; margin-left: 4pt;">SAM CEO Dashboard</p>
<div style="display: flex; align-items: center; gap: 12pt; margin-bottom: 12pt;">
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488; letter-spacing: 0.1em; margin-bottom: 3pt;">EXECUTIVE DASHBOARD</p>
<h1 style="font-size: 16pt; font-weight: 800; color: #292524; line-height: 1.35; margin-bottom: 5pt;">대표님, 우리 회사<br>지금 어떤 상태인가요?</h1>
<p style="font-size: 7.5pt; color: #57534E; line-height: 1.5;">보고 대기 없이, 로그인 한 번이면<br>전사 현황이 한눈에 들어옵니다.</p>
</div>
<!-- KPI 카드 -->
<div style="display: flex; gap: 3pt; margin-bottom: 4pt;">
<div style="flex: 1; background: rgba(13,148,136,0.06); border: 1pt solid rgba(13,148,136,0.12); border-radius: 5pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">5.2억</p>
<p style="white-space: nowrap; font-size: 4pt; color: #0D9488; font-weight: 600;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.06); border: 1pt solid rgba(16,185,129,0.12); border-radius: 5pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">127건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">누적 수주</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.06); border: 1pt solid rgba(139,92,246,0.12); border-radius: 5pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">96%</p>
<p style="white-space: nowrap; font-size: 4pt; color: #8B5CF6; font-weight: 600;">납기 준수율</p>
</div>
<div style="flex: 1; background: rgba(239,68,68,0.06); border: 1pt solid rgba(239,68,68,0.12); border-radius: 5pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600;">승인 대기</p>
</div>
</div>
<!-- 라인 차트 -->
<div style="background: #F5F5F4; border-radius: 4pt; padding: 3pt 4pt;">
<p style="white-space: nowrap; font-size: 4pt; color: #A8A29E; margin-bottom: 1pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 25" width="100%" height="18pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 22 L18 17 L31 19 L44 14 L57 11 L70 8 L83 10 L96 5 L109 7 L122 3 L135 5 L135 24 L5 24 Z" fill="#0D9488" opacity="0.08"/>
<path d="M5 22 L18 17 L31 19 L44 14 L57 11 L70 8 L83 10 L96 5 L109 7 L122 3 L135 5" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="122" cy="3" r="1.5" fill="#0D9488"/>
<!-- 히어로 SVG 아이콘: 대시보드 모니터 -->
<div style="flex-shrink: 0; width: 72pt; height: 72pt;">
<svg viewBox="0 0 80 80" width="72pt" height="72pt" xmlns="http://www.w3.org/2000/svg">
<rect x="8" y="10" width="64" height="44" rx="4" fill="none" stroke="#0D9488" stroke-width="1.5" opacity="0.6"/>
<rect x="12" y="14" width="56" height="36" rx="2" fill="#FFFFFF"/>
<!-- 미니 차트 바 -->
<rect x="16" y="38" width="6" height="8" rx="1" fill="#0D9488" opacity="0.5"/>
<rect x="24" y="34" width="6" height="12" rx="1" fill="#0D9488" opacity="0.65"/>
<rect x="32" y="30" width="6" height="16" rx="1" fill="#0D9488" opacity="0.8"/>
<rect x="40" y="26" width="6" height="20" rx="1" fill="#0D9488" opacity="0.9"/>
<rect x="48" y="22" width="6" height="24" rx="1" fill="#0D9488"/>
<rect x="56" y="28" width="6" height="18" rx="1" fill="#10B981" opacity="0.7"/>
<!-- 상단 KPI 표시 -->
<circle cx="18" cy="20" r="3" fill="#0D9488" opacity="0.7"/>
<circle cx="28" cy="20" r="3" fill="#10B981" opacity="0.7"/>
<circle cx="38" cy="20" r="3" fill="#8B5CF6" opacity="0.7"/>
<circle cx="48" cy="20" r="3" fill="#EF4444" opacity="0.7"/>
<!-- 모니터 받침대 -->
<rect x="32" y="54" width="16" height="3" rx="1" fill="#0D9488" opacity="0.4"/>
<rect x="28" y="57" width="24" height="2" rx="1" fill="#0D9488" opacity="0.3"/>
<!-- 와이파이 시그널 -->
<path d="M58 62 Q62 58 66 62" fill="none" stroke="#10B981" stroke-width="1" opacity="0.5"/>
<path d="M56 66 Q62 60 68 66" fill="none" stroke="#10B981" stroke-width="1" opacity="0.3"/>
<circle cx="62" cy="66" r="1.5" fill="#10B981" opacity="0.6"/>
</svg>
</div>
</div>
<!-- 대표님이 얻는 것 -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488; margin-bottom: 4pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#0D9488" stroke-width="1" opacity="0.4"/>
<path d="M12 7 L12 12 L15 14" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="1" fill="#0D9488"/>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 10pt;"></div>
<!-- 대시보드 Mock UI -->
<div style="background: #FFFFFF; border: 1pt solid #E7E5E4; border-radius: 7pt; padding: 8pt; margin-bottom: 9pt; box-shadow: 0 1pt 4pt rgba(0,0,0,0.05);">
<!-- 타이틀바 -->
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 6pt;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E; margin-left: 5pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI 카드 4개 (SVG 아이콘 포함) -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<!-- 월 매출 -->
<div style="flex: 1; background: rgba(13,148,136,0.05); border: 1pt solid rgba(13,148,136,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M3 16 L3 8 L7 8 L7 16 Z" fill="#0D9488" opacity="0.4"/>
<path d="M8 16 L8 5 L12 5 L12 16 Z" fill="#0D9488" opacity="0.65"/>
<path d="M13 16 L13 3 L17 3 L17 16 Z" fill="#0D9488"/>
<path d="M3 16 L17 16" stroke="#0D9488" stroke-width="0.5" opacity="0.4"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #292524;">즉시 현황 파악</p>
<p style="font-size: 5pt; color: #A8A29E; margin-top: 1pt;">로그인 3초 확인</p>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">5.2억</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 15.3%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #0D9488; font-weight: 600; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="10" r="6" fill="none" stroke="#10B981" stroke-width="1" opacity="0.4"/>
<path d="M9 8 Q12 6 15 8" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
<path d="M9 12 Q12 10 15 12" fill="none" stroke="#10B981" stroke-width="0.8" stroke-linecap="round"/>
<circle cx="8" cy="18" r="1" fill="#10B981" opacity="0.6"/>
<circle cx="12" cy="18" r="1" fill="#10B981" opacity="0.8"/>
<circle cx="16" cy="18" r="1" fill="#10B981"/>
<!-- 수주 잔량 -->
<div style="flex: 1; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="3" width="14" height="14" rx="2" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.5"/>
<path d="M6 10 L9 13 L14 7" fill="none" stroke="#10B981" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #292524;">데이터로 판단</p>
<p style="font-size: 5pt; color: #A8A29E; margin-top: 1pt;">KPI/팀 성과 비교</p>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">127건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">&#9650; 8건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 600; margin-top: 1pt;">수주 잔량</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 5pt; padding: 5pt 3pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="12" cy="12" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.4"/>
<path d="M8 12 L11 15 L16 9" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 납기 준수율 -->
<div style="flex: 1; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.3"/>
<circle cx="10" cy="10" r="7" fill="none" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="40 44" stroke-dashoffset="-11" stroke-linecap="round"/>
<text x="10" y="12" text-anchor="middle" fill="#8B5CF6" font-size="5" font-weight="800">96</text>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #292524;">모바일 승인</p>
<p style="font-size: 5pt; color: #A8A29E; margin-top: 1pt;">이동중 결재 처리</p>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #292524;">96%</p>
<p style="white-space: nowrap; font-size: 5pt; color: #10B981; font-weight: 700;">목표 달성</p>
<p style="white-space: nowrap; font-size: 5pt; color: #8B5CF6; font-weight: 600; margin-top: 1pt;">납기 준수율</p>
</div>
<!-- 승인 대기 -->
<div style="flex: 1; background: rgba(239,68,68,0.05); border: 1pt solid rgba(239,68,68,0.15); border-radius: 6pt; padding: 5pt 4pt; text-align: center;">
<svg viewBox="0 0 20 20" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<path d="M10 3 L17 15 L3 15 Z" fill="none" stroke="#EF4444" stroke-width="1.2" stroke-linejoin="round"/>
<line x1="10" y1="8" x2="10" y2="11" stroke="#EF4444" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10" cy="13" r="0.8" fill="#EF4444"/>
</svg>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 700;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 5pt; color: #EF4444; font-weight: 600; margin-top: 1pt;">승인 대기</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- 핵심 기능 6개 (2열 그리드) -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488; margin-bottom: 4pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-wrap: wrap; gap: 2pt;">
<div style="width: 49%; display: flex; align-items: center; gap: 4pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.08); border-radius: 4pt; padding: 3pt 5pt;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="2" y="10" width="3" height="4" rx="0.5" fill="#0D9488" opacity="0.4"/>
<rect x="6" y="6" width="3" height="8" rx="0.5" fill="#0D9488" opacity="0.7"/>
<rect x="10" y="2" width="3" height="12" rx="0.5" fill="#0D9488"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #292524;">실시간 KPI 카드</p>
</div>
<div style="width: 49%; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.08); border-radius: 4pt; padding: 3pt 5pt;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="8" cy="4" r="2" fill="none" stroke="#10B981" stroke-width="0.8"/>
<line x1="8" y1="6" x2="8" y2="8" stroke="#10B981" stroke-width="0.6"/>
<line x1="4" y1="8" x2="12" y2="8" stroke="#10B981" stroke-width="0.6"/>
<circle cx="4" cy="11" r="1.5" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.6"/>
<circle cx="8" cy="11" r="1.5" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.6"/>
<circle cx="12" cy="11" r="1.5" fill="none" stroke="#10B981" stroke-width="0.6" opacity="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #292524;">조직 실적 트리</p>
</div>
<div style="width: 49%; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.08); border-radius: 4pt; padding: 3pt 5pt;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<circle cx="8" cy="8" r="6" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.3"/>
<text x="8" y="10.5" text-anchor="middle" fill="#8B5CF6" font-size="7" font-weight="800">&#8361;</text>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #292524;">역할별 수당 현황</p>
</div>
<div style="width: 49%; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.08); border-radius: 4pt; padding: 3pt 5pt;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M8 2 C5 2 2 5 2 8 L2 11 L1 12 L15 12 L14 11 L14 8 C14 5 11 2 8 2 Z" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
<circle cx="12" cy="4" r="2.5" fill="#EF4444"/>
<text x="12" y="5.5" text-anchor="middle" fill="#fff" font-size="3.5" font-weight="800">!</text>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #292524;">승인 대기 알림</p>
</div>
<div style="width: 49%; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.08); border-radius: 4pt; padding: 3pt 5pt;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M3 12 L6 9 L9 11 L13 4" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 4 L13 4 L13 6" fill="none" stroke="#F59E0B" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #292524;">기간별 트렌드</p>
</div>
<div style="width: 49%; display: flex; align-items: center; gap: 4pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.08); border-radius: 4pt; padding: 3pt 5pt;">
<svg viewBox="0 0 16 16" width="9pt" height="9pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<rect x="4" y="2" width="8" height="12" rx="1.5" fill="none" stroke="#0D9488" stroke-width="0.8" opacity="0.5"/>
<circle cx="8" cy="12.5" r="0.7" fill="#0D9488" opacity="0.5"/>
<rect x="5.5" y="4" width="5" height="6" rx="0.3" fill="rgba(13,148,136,0.1)"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #292524;">모바일 대응</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- 역할별 맞춤 화면 -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #14B8A6; margin-bottom: 4pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 5pt; padding: 4pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 800; color: #0D9488;">CEO</p>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">전사 KPI 총괄</p>
</div>
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 4pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 800; color: #10B981;">관리자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">팀 실적 관리</p>
</div>
<div style="flex: 1; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 5pt; padding: 4pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 800; color: #F59E0B;">운영자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">인력/승인 관리</p>
</div>
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 5pt; padding: 4pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 800; color: #8B5CF6;">영업자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">내 실적 조회</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- SAM 통합 플랫폼 -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #8B5CF6; margin-bottom: 3pt;">대시보드 + SAM ERP/MES 통합</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #F5F5F4; border-radius: 4pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; font-weight: 600; color: #57534E;">견적/수주</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 4pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; font-weight: 600; color: #57534E;">생산 MES</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 4pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; font-weight: 600; color: #57534E;">품질/검사</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 4pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; font-weight: 600; color: #57534E;">재고/자재</p>
</div>
<div style="flex: 1; background: #F5F5F4; border-radius: 4pt; padding: 3pt 2pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; font-weight: 600; color: #57534E;">인사/회계</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 8pt;"></div>
<!-- 투자 비용 -->
<div style="margin-bottom: 8pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #F59E0B; margin-bottom: 4pt;">투자 비용</p>
<!-- 차트 영역 -->
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 5pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0D9488; margin-bottom: 2pt;">기본 패키지</p>
<p style="white-space: nowrap; font-size: 11pt; font-weight: 800; color: #292524;">2,000만원</p>
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E;">+ 월 50만원 (유지보수)</p>
<!-- 매출 추이 (라인 차트 SVG) -->
<div style="flex: 3; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 160 40" width="100%" height="30pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="10" x2="160" y2="10" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<line x1="0" y1="20" x2="160" y2="20" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<line x1="0" y1="30" x2="160" y2="30" stroke="rgba(41,37,36,0.05)" stroke-width="0.5"/>
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8 L155 38 L5 38 Z" fill="#0D9488" opacity="0.08"/>
<path d="M5 35 L20 28 L35 30 L50 22 L65 18 L80 14 L95 16 L110 10 L125 12 L140 5 L155 8" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="140" cy="5" r="2.5" fill="#0D9488"/>
<circle cx="155" cy="8" r="2" fill="#0D9488" opacity="0.5" stroke="#0D9488" stroke-width="0.5" stroke-dasharray="1 1"/>
</svg>
</div>
<div style="flex: 1; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.12); border-radius: 5pt; padding: 5pt 6pt;">
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #F59E0B; margin-bottom: 2pt;">추가 옵션</p>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">생산공정</p>
<p style="white-space: nowrap; font-size: 5pt; font-weight: 700; color: #F59E0B;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">품질관리</p>
<p style="white-space: nowrap; font-size: 5pt; font-weight: 700; color: #F59E0B;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">AI 견적</p>
<p style="white-space: nowrap; font-size: 5pt; font-weight: 700; color: #F59E0B;">월 10~20만원</p>
<!-- 도넛 차트: 팀별 비중 -->
<div style="flex: 2; background: #F5F5F4; border-radius: 5pt; padding: 4pt 5pt; display: flex; align-items: center; gap: 5pt;">
<svg viewBox="0 0 44 44" width="36pt" height="36pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="16" fill="none" stroke="rgba(41,37,36,0.06)" stroke-width="5"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#0D9488" stroke-width="5" stroke-dasharray="38 62" stroke-dashoffset="25" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#10B981" stroke-width="5" stroke-dasharray="25 75" stroke-dashoffset="-13" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#8B5CF6" stroke-width="5" stroke-dasharray="22 78" stroke-dashoffset="-38" stroke-linecap="round"/>
<circle cx="22" cy="22" r="16" fill="none" stroke="#F59E0B" stroke-width="5" stroke-dasharray="13 87" stroke-dashoffset="-60" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #0D9488; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">영업1팀 38%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">영업2팀 25%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #8B5CF6; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">생산팀 22%</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 4pt; height: 4pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 5pt; color: #57534E;">품질팀 15%</p>
</div>
</div>
</div>
</div>
</div>
<!-- 도입 프로세스 -->
<div style="margin-bottom: 6pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #14B8A6; margin-bottom: 3pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; border-radius: 5pt; padding: 3pt 2pt; text-align: center; background: rgba(13,148,136,0.05); border: 1pt solid rgba(13,148,136,0.12);">
<p style="white-space: nowrap; font-size: 4.5pt; color: #A8A29E;">1~2주</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">현장 인터뷰</p>
<!-- 핵심 가치 3개 (SVG 아이콘) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #0D9488; margin-bottom: 5pt;">대표님이 얻는 것</p>
<div style="display: flex; gap: 4pt;">
<div style="flex: 1; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="10" fill="none" stroke="#0D9488" stroke-width="1.2" opacity="0.4"/>
<path d="M14 8 L14 14 L18 17" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="14" cy="14" r="1.5" fill="#0D9488"/>
<path d="M22 5 L20 10 L23 10 L21 15" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">즉시 현황 파악</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">로그인 3초면<br>전사 현황 확인</p>
</div>
<p style="white-space: nowrap; font-size: 7pt; color: #D6D3D1;">&#9654;</p>
<div style="flex: 1; border-radius: 5pt; padding: 3pt 2pt; text-align: center; background: rgba(16,185,129,0.05); border: 1pt solid rgba(16,185,129,0.12);">
<p style="white-space: nowrap; font-size: 4.5pt; color: #A8A29E;">2~4주</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">맞춤 개발</p>
<div style="flex: 1; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="12" r="8" fill="none" stroke="#10B981" stroke-width="1.2" opacity="0.4"/>
<path d="M11 8 Q14 6 17 8" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M10 12 Q14 10 18 12" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<path d="M11 16 Q14 14 17 16" fill="none" stroke="#10B981" stroke-width="1" stroke-linecap="round"/>
<circle cx="8" cy="22" r="1.2" fill="#10B981" opacity="0.6"/>
<circle cx="14" cy="22" r="1.2" fill="#10B981" opacity="0.8"/>
<circle cx="20" cy="22" r="1.2" fill="#10B981"/>
<line x1="8" y1="22" x2="20" y2="22" stroke="#10B981" stroke-width="0.5" opacity="0.3"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">데이터로 판단</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">감이 아닌 숫자로<br>KPI/팀 성과 비교</p>
</div>
<p style="white-space: nowrap; font-size: 7pt; color: #D6D3D1;">&#9654;</p>
<div style="flex: 1; border-radius: 5pt; padding: 3pt 2pt; text-align: center; background: rgba(139,92,246,0.05); border: 1pt solid rgba(139,92,246,0.12);">
<p style="white-space: nowrap; font-size: 4.5pt; color: #A8A29E;">1~2주</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">데이터 이관</p>
</div>
<p style="white-space: nowrap; font-size: 7pt; color: #D6D3D1;">&#9654;</p>
<div style="flex: 1; border-radius: 5pt; padding: 3pt 2pt; text-align: center; background: rgba(245,158,11,0.05); border: 1pt solid rgba(245,158,11,0.12);">
<p style="white-space: nowrap; font-size: 4.5pt; color: #A8A29E;">1~2주</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #57534E;">교육/안정화</p>
<div style="flex: 1; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.12); border-radius: 7pt; padding: 7pt 5pt; text-align: center;">
<svg viewBox="0 0 28 28" width="18pt" height="18pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="14" cy="14" r="9" fill="none" stroke="#8B5CF6" stroke-width="1.2" opacity="0.4"/>
<path d="M9 14 L12.5 17.5 L19 10.5" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="20" y="19" width="5" height="8" rx="1" fill="none" stroke="#8B5CF6" stroke-width="0.8" opacity="0.5"/>
<circle cx="22.5" cy="25.5" r="0.5" fill="#8B5CF6" opacity="0.5"/>
</svg>
<p style="font-size: 7pt; font-weight: 700; color: #292524; white-space: nowrap;">모바일 승인</p>
<p style="font-size: 5.5pt; color: #A8A29E; margin-top: 2pt; line-height: 1.4;">이동중에도 즉시<br>결재/승인 처리</p>
</div>
</div>
</div>
<!-- CTA 푸터 -->
<div style="margin-top: auto; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.12); border-radius: 6pt; padding: 7pt 10pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 9pt;"></div>
<!-- 대시보드 6대 기능 (SVG 아이콘 + 텍스트) -->
<div style="margin-bottom: 9pt;">
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #F59E0B; margin-bottom: 5pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 2pt;">
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="10" width="3" height="6" rx="0.5" fill="#0D9488" opacity="0.5"/>
<rect x="7" y="6" width="3" height="10" rx="0.5" fill="#0D9488" opacity="0.75"/>
<rect x="12" y="2" width="3" height="14" rx="0.5" fill="#0D9488"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">실시간 <span style="color: #0D9488; font-weight: 700;">매출/수주 KPI</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(16,185,129,0.04); border: 1pt solid rgba(16,185,129,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="4" r="2.5" fill="none" stroke="#10B981" stroke-width="1"/>
<line x1="9" y1="6.5" x2="9" y2="9" stroke="#10B981" stroke-width="0.8"/>
<line x1="4" y1="9" x2="14" y2="9" stroke="#10B981" stroke-width="0.8"/>
<circle cx="4" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="9" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<circle cx="14" cy="12" r="2" fill="none" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="4" y1="9" x2="4" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="9" y1="9" x2="9" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
<line x1="14" y1="9" x2="14" y2="10" stroke="#10B981" stroke-width="0.8" opacity="0.6"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">조직 계층별 <span style="color: #10B981; font-weight: 700;">실적 트리</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(139,92,246,0.04); border: 1pt solid rgba(139,92,246,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="9" cy="9" r="7" fill="none" stroke="#8B5CF6" stroke-width="1" opacity="0.3"/>
<text x="9" y="11.5" text-anchor="middle" fill="#8B5CF6" font-size="8" font-weight="800">&#8361;</text>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">역할별 <span style="color: #8B5CF6; font-weight: 700;">수당 현황</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M9 3 C5 3 3 6 3 9 L3 12 L2 13 L16 13 L15 12 L15 9 C15 6 13 3 9 3 Z" fill="none" stroke="#EF4444" stroke-width="1" opacity="0.6"/>
<circle cx="13" cy="5" r="3" fill="#EF4444"/>
<text x="13" y="6.5" text-anchor="middle" fill="#fff" font-size="4" font-weight="700">5</text>
<path d="M7 14 Q9 16 11 14" fill="none" stroke="#EF4444" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">미승인 <span style="color: #EF4444; font-weight: 700;">실시간 알림</span></p>
</div>
</div>
<div style="display: flex; gap: 2pt;">
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(245,158,11,0.04); border: 1pt solid rgba(245,158,11,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<path d="M3 14 L7 10 L10 12 L15 5" fill="none" stroke="#F59E0B" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5 L15 5 L15 8" fill="none" stroke="#F59E0B" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">기간별 <span style="color: #F59E0B; font-weight: 700;">트렌드 분석</span></p>
</div>
<div style="flex: 1; display: flex; align-items: center; gap: 4pt; background: rgba(236,72,153,0.04); border: 1pt solid rgba(236,72,153,0.1); border-radius: 5pt; padding: 4pt 6pt;">
<svg viewBox="0 0 18 18" width="11pt" height="11pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="3" width="14" height="12" rx="1.5" fill="none" stroke="#EC4899" stroke-width="1" opacity="0.5"/>
<line x1="5" y1="7" x2="13" y2="7" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="9" x2="11" y2="9" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<line x1="5" y1="11" x2="9" y2="11" stroke="#EC4899" stroke-width="0.6" opacity="0.3"/>
<circle cx="14" cy="13" r="3.5" fill="#FAFAF9" stroke="#EC4899" stroke-width="0.8"/>
<path d="M13 13 L15 13 M14 12 L14 14" stroke="#EC4899" stroke-width="0.8" stroke-linecap="round"/>
</svg>
<p style="font-size: 6.5pt; color: #57534E; white-space: nowrap;">수익 <span style="color: #EC4899; font-weight: 700;">시뮬레이터</span></p>
</div>
</div>
</div>
</div>
<!-- 구분선 -->
<div style="height: 1pt; background: #D6D3D1; margin-bottom: 9pt;"></div>
<!-- Before / After 인포그래픽 -->
<div style="display: flex; gap: 4pt; margin-bottom: 9pt;">
<!-- Before -->
<div style="flex: 5; background: rgba(239,68,68,0.04); border: 1pt solid rgba(239,68,68,0.1); border-radius: 7pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#EF4444" stroke-width="1"/>
<line x1="4.5" y1="4.5" x2="9.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
<line x1="9.5" y1="4.5" x2="4.5" y2="9.5" stroke="#EF4444" stroke-width="1.2" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #EF4444;">BEFORE</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">매출? 보고 대기 1~2일</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">수주? Excel 취합 반나절</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">승인? 서류 찾기 30분</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">실적? 각 팀장 개별 보고</p>
</div>
<!-- 화살표 -->
<div style="display: flex; align-items: center; flex-shrink: 0;">
<svg viewBox="0 0 20 20" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10 L14 10" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 6 L15 10 L11 14" fill="none" stroke="#0D9488" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- After -->
<div style="flex: 5; background: rgba(13,148,136,0.04); border: 1pt solid rgba(13,148,136,0.1); border-radius: 7pt; padding: 5pt 6pt 12pt 6pt;">
<div style="display: flex; align-items: center; gap: 3pt; margin-bottom: 3pt;">
<svg viewBox="0 0 14 14" width="8pt" height="8pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="7" cy="7" r="5.5" fill="none" stroke="#0D9488" stroke-width="1"/>
<path d="M4.5 7 L6.5 9 L10 5" fill="none" stroke="#0D9488" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0D9488;">AFTER (SAM)</p>
</div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">로그인 <span style="color:#0D9488;font-weight:600;">3초 전사 현황</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">클릭 <span style="color:#0D9488;font-weight:600;">실시간 수주 데이터</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">뱃지 <span style="color:#0D9488;font-weight:600;">즉시 승인 처리</span></p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #57534E;">트리 <span style="color:#0D9488;font-weight:600;">전 조직 한눈에</span></p>
</div>
</div>
<!-- 기술 태그 -->
<div style="display: flex; gap: 3pt; margin-bottom: 6pt;">
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3.5" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<path d="M5 2.5 L5 5 L7 6.5" fill="none" stroke="#A8A29E" stroke-width="0.6" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">실시간 업데이트</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="1" width="5" height="8" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.5" fill="#A8A29E"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">PC + 모바일</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="2" width="7" height="6" rx="1" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="5" cy="5" r="1.5" fill="none" stroke="#A8A29E" stroke-width="0.6"/>
<line x1="6" y1="3.5" x2="7.5" y2="2" stroke="#A8A29E" stroke-width="0.6"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">역할별 권한</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1 Q8 1 8 4 L8 5 Q8 8 5 8 Q2 8 2 5 L2 4 Q2 1 5 1 Z" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<line x1="5" y1="4" x2="5" y2="6" stroke="#A8A29E" stroke-width="0.6" stroke-linecap="round"/>
<circle cx="5" cy="3.5" r="0.5" fill="#A8A29E"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">데이터 암호화</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt; background: #F5F5F4; border-radius: 4pt; padding: 2pt 5pt;">
<svg viewBox="0 0 10 10" width="6pt" height="6pt" xmlns="http://www.w3.org/2000/svg">
<path d="M2 7 Q5 3 8 7" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<path d="M3.5 7 Q5 5 6.5 7" fill="none" stroke="#A8A29E" stroke-width="0.8"/>
<circle cx="5" cy="7.5" r="0.8" fill="#A8A29E"/>
</svg>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E;">클라우드</p>
</div>
</div>
<!-- 푸터 -->
<div style="margin-top: auto; border-top: 1pt solid #D6D3D1; padding-top: 7pt;">
<div style="display: flex; justify-content: space-between; align-items: flex-end;">
<div>
<p style="white-space: nowrap; font-size: 8pt; font-weight: 800; color: #292524;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #A8A29E; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #57534E;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E; margin-top: 2pt;">www.codebridge-x.com</p>
</div>
<div style="text-align: right;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0D9488;">contact@codebridge-x.com</p>
<p style="white-space: nowrap; font-size: 5pt; color: #A8A29E; margin-top: 1pt;">(주)코드브릿지엑스</p>
<p style="white-space: nowrap; font-size: 6pt; color: #A8A29E;">무료 데모 신청</p>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 600; color: #0D9488;">contact@codebridge-x.com</p>
</div>
</div>
</div>
</body>
</html>
</html>