Files
sam-manage/docs/pptx-output/slides/slide-06.html

130 lines
7.3 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 720pt;
height: 405pt;
font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
background: #ffffff;
display: flex;
flex-direction: column;
padding: 30pt 36pt;
}
p, h1, h2, h3 { margin: 0; }
</style>
</head>
<body>
<!-- 헤더 -->
<div style="display: flex; align-items: center; gap: 10pt; margin-bottom: 18pt;">
<div style="width: 4pt; height: 24pt; background: #FF9800; border-radius: 2pt;"></div>
<h2 style="font-size: 18pt; font-weight: 700; color: #1a1a2e;">수당 계산 예시</h2>
<div style="padding: 3pt 10pt; background: #FFF3E0; border-radius: 4pt;">
<p style="font-size: 8pt; color: #E65100; font-weight: 600;">기준금액 100만원</p>
</div>
</div>
<!-- 기준금액 안내 -->
<div style="background: #f8f9fa; border-radius: 6pt; padding: 8pt 14pt; margin-bottom: 14pt; display: flex; align-items: center; gap: 8pt;">
<p style="font-size: 9pt; color: #666;">계약 개발비 200만원 → 기준금액 (50%) =</p>
<div style="padding: 2pt 8pt; background: #1a1a2e; border-radius: 4pt;">
<p style="font-size: 10pt; font-weight: 700; color: #ffffff;">1,000,000원</p>
</div>
</div>
<!-- 두 예시 비교 -->
<div style="display: flex; gap: 16pt; flex: 1;">
<!-- 개인 파트너 예시 -->
<div style="flex: 1; border: 1.5pt solid #4CAF50; border-radius: 10pt; overflow: hidden; display: flex; flex-direction: column;">
<!-- 헤더 -->
<div style="background: #4CAF50; padding: 10pt 14pt;">
<p style="font-size: 12pt; font-weight: 700; color: #ffffff;">개인 파트너 (유치자 있음)</p>
</div>
<!-- 수당 항목들 -->
<div style="padding: 12pt 14pt; flex: 1; display: flex; flex-direction: column; gap: 6pt;">
<!-- 판매자 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: #f0faf0; border-radius: 6pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<div style="width: 6pt; height: 6pt; background: #4CAF50; border-radius: 50%;"></div>
<p style="font-size: 10pt; color: #333;">판매자 수당 (20%)</p>
</div>
<p style="font-size: 12pt; font-weight: 700; color: #2E7D32;">200,000원</p>
</div>
<!-- 관리자 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: #E3F2FD; border-radius: 6pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<div style="width: 6pt; height: 6pt; background: #2196F3; border-radius: 50%;"></div>
<p style="font-size: 10pt; color: #333;">관리자 수당 (5%)</p>
</div>
<p style="font-size: 12pt; font-weight: 700; color: #1565C0;">50,000원</p>
</div>
<!-- 협업지원금 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: #F3E5F5; border-radius: 6pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<div style="width: 6pt; height: 6pt; background: #9C27B0; border-radius: 50%;"></div>
<p style="font-size: 10pt; color: #333;">협업지원금 (3%)</p>
</div>
<p style="font-size: 12pt; font-weight: 700; color: #7B1FA2;">30,000원</p>
</div>
</div>
<!-- 합계 -->
<div style="background: #2E7D32; padding: 10pt 14pt; display: flex; justify-content: space-between; align-items: center;">
<p style="font-size: 10pt; color: rgba(255,255,255,0.8);">본사 총 지급액</p>
<p style="font-size: 16pt; font-weight: 800; color: #ffffff;">280,000원 (28%)</p>
</div>
</div>
<!-- 단체 파트너 예시 -->
<div style="flex: 1; border: 1.5pt solid #2196F3; border-radius: 10pt; overflow: hidden; display: flex; flex-direction: column;">
<!-- 헤더 -->
<div style="background: #2196F3; padding: 10pt 14pt;">
<p style="font-size: 12pt; font-weight: 700; color: #ffffff;">단체 파트너</p>
</div>
<!-- 수당 항목들 -->
<div style="padding: 12pt 14pt; flex: 1; display: flex; flex-direction: column; gap: 6pt;">
<!-- 단체 수당 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: #f0faf0; border-radius: 6pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<div style="width: 6pt; height: 6pt; background: #4CAF50; border-radius: 50%;"></div>
<p style="font-size: 10pt; color: #333;">단체 수당 (30%)</p>
</div>
<p style="font-size: 12pt; font-weight: 700; color: #2E7D32;">300,000원</p>
</div>
<!-- 관리자 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: #fafafa; border-radius: 6pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<div style="width: 6pt; height: 6pt; background: #e0e0e0; border-radius: 50%;"></div>
<p style="font-size: 10pt; color: #999;">관리자 수당 (0%)</p>
</div>
<p style="font-size: 12pt; font-weight: 700; color: #999;">0원</p>
</div>
<!-- 협업지원금 -->
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8pt 10pt; background: #F3E5F5; border-radius: 6pt;">
<div style="display: flex; align-items: center; gap: 6pt;">
<div style="width: 6pt; height: 6pt; background: #9C27B0; border-radius: 50%;"></div>
<p style="font-size: 10pt; color: #333;">협업지원금 (3%)</p>
</div>
<p style="font-size: 12pt; font-weight: 700; color: #7B1FA2;">30,000원</p>
</div>
</div>
<!-- 합계 -->
<div style="background: #1565C0; padding: 10pt 14pt; display: flex; justify-content: space-between; align-items: center;">
<p style="font-size: 10pt; color: rgba(255,255,255,0.8);">본사 총 지급액</p>
<p style="font-size: 16pt; font-weight: 800; color: #ffffff;">330,000원 (33%)</p>
</div>
</div>
</div>
<!-- 하단 -->
<div style="text-align: right; margin-top: 10pt;">
<p style="font-size: 7pt; color: #bbb;">6 / 7</p>
</div>
</body>
</html>