Spaces:

openfree
/

AI-Calcurator

Running

App Files Files Community

AI-Calcurator / index.html

openfree

Update index.html

1eaa353 verified 29 days ago

raw

history blame

77 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI SAAS Build Calculator</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
	color: #ffffff;
	min-height: 100vh;
	overflow-x: hidden;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem;
	}

	header {
	text-align: center;
	margin-bottom: 3rem;
	animation: fadeInDown 0.8s ease-out;
	}

	h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
	background: linear-gradient(45deg, #00d2ff, #3a7bd5, #00d2ff);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradient 3s ease infinite;
	}

	@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
	}

	.subtitle {
	font-size: 1.2rem;
	color: #a8a8b3;
	}

	.tabs {
	display: flex;
	justify-content: center;
	margin-bottom: 3rem;
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border-radius: 15px;
	padding: 0.5rem;
	gap: 0.5rem;
	}

	.tab {
	padding: 1rem 2rem;
	background: transparent;
	border: none;
	color: #a8a8b3;
	cursor: pointer;
	border-radius: 10px;
	transition: all 0.3s ease;
	font-size: 1.1rem;
	font-weight: 500;
	}

	.tab.active {
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	color: #ffffff;
	transform: scale(1.05);
	}

	.tab:hover:not(.active) {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	}

	.tab-content {
	display: none;
	}

	.tab-content.active {
	display: block;
	animation: fadeIn 0.5s ease;
	}

	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	.methods-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
	margin-bottom: 3rem;
	}

	.method-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 2rem;
	transition: all 0.3s ease;
	animation: fadeInUp 0.8s ease-out;
	position: relative;
	overflow: hidden;
	}

	.method-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(58, 123, 213, 0.1) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.method-card:hover::before {
	opacity: 1;
	}

	.method-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	border-color: rgba(58, 123, 213, 0.5);
	}

	.method-header {
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
	}

	.method-icon {
	width: 60px;
	height: 60px;
	margin-right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 15px;
	font-size: 2rem;
	}

	.outsource-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
	.inhouse-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
	.platform-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }

	.method-title {
	font-size: 1.5rem;
	font-weight: 700;
	}

	.method-description {
	color: #a8a8b3;
	margin-bottom: 1.5rem;
	line-height: 1.6;
	}

	.cost-breakdown {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 1.5rem;
	}

	.cost-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.cost-item:last-child {
	border-bottom: none;
	}

	.pros-cons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
	}

	.pros, .cons {
	padding: 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
	}

	.pros {
	background: rgba(46, 213, 115, 0.1);
	border: 1px solid rgba(46, 213, 115, 0.3);
	}

	.cons {
	background: rgba(255, 71, 87, 0.1);
	border: 1px solid rgba(255, 71, 87, 0.3);
	}

	.pros h4, .cons h4 {
	margin-bottom: 0.5rem;
	font-size: 1rem;
	}

	.pros ul, .cons ul {
	list-style: none;
	padding-left: 0;
	}

	.pros li::before {
	content: "✓ ";
	color: #2ed573;
	font-weight: bold;
	}

	.cons li::before {
	content: "✗ ";
	color: #ff4757;
	font-weight: bold;
	}

	.calculator-section {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 2rem;
	margin-bottom: 3rem;
	animation: fadeInUp 1s ease-out;
	}

	.calculator-title {
	font-size: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	}

	.input-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
	}

	.input-field {
	display: flex;
	flex-direction: column;
	}

	.input-field label {
	margin-bottom: 0.5rem;
	color: #a8a8b3;
	font-size: 0.9rem;
	}

	.input-field input, .input-field select {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	padding: 0.75rem 1rem;
	color: #ffffff;
	font-size: 1rem;
	transition: all 0.3s ease;
	}

	.input-field input:focus, .input-field select:focus {
	outline: none;
	border-color: #3a7bd5;
	background: rgba(255, 255, 255, 0.15);
	}

	.input-field select option {
	background: #24243e;
	}

	.calculate-btn {
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	border: none;
	border-radius: 10px;
	padding: 1rem 2rem;
	font-size: 1.1rem;
	font-weight: 600;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease;
	display: block;
	margin: 0 auto;
	}

	.calculate-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(58, 123, 213, 0.3);
	}

	.results-section {
	margin-top: 3rem;
	display: none;
	}

	.results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
	}

	.result-card {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	padding: 1.5rem;
	text-align: center;
	}

	.result-value {
	font-size: 2.5rem;
	font-weight: 700;
	margin: 1rem 0;
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.chart-container {
	position: relative;
	height: 400px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	padding: 1.5rem;
	margin-top: 2rem;
	}

	/* 맞춤 설계 스타일 */
	.custom-design-container {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 20px;
	padding: 2rem;
	}

	.component-section {
	margin-bottom: 2.5rem;
	}

	.component-title {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	}

	.component-icon {
	width: 30px;
	height: 30px;
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	}

	.component-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
	}

	.option-card {
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.2);
	border-radius: 10px;
	padding: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.option-card.selected {
	background: rgba(58, 123, 213, 0.3);
	border-color: #3a7bd5;
	transform: scale(1.05);
	box-shadow: 0 5px 20px rgba(58, 123, 213, 0.3);
	}

	.option-card.selected::after {
	content: '✓';
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	background: #3a7bd5;
	color: white;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	}

	.option-card:hover {
	border-color: #00d2ff;
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-2px);
	}

	.option-name {
	font-weight: 600;
	margin-bottom: 0.5rem;
	}

	.option-details {
	display: flex;
	justify-content: space-between;
	font-size: 0.9rem;
	color: #a8a8b3;
	}

	.custom-result {
	background: rgba(0, 0, 0, 0.3);
	border-radius: 15px;
	padding: 2rem;
	margin-top: 2rem;
	display: none;
	}

	.result-header {
	text-align: center;
	margin-bottom: 2rem;
	}

	.result-header h3 {
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
	color: #00d2ff;
	}

	.period-tabs {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
	}

	.period-tab {
	padding: 0.5rem 1.5rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
	}

	.period-tab.active {
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	border-color: transparent;
	}

	.custom-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem;
	}

	.summary-item {
	text-align: center;
	}

	.summary-label {
	color: #a8a8b3;
	margin-bottom: 0.5rem;
	}

	.summary-value {
	font-size: 2rem;
	font-weight: 700;
	background: linear-gradient(45deg, #00d2ff, #3a7bd5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	}

	.selected-components {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	}

	.selected-components h4 {
	margin-bottom: 1rem;
	font-size: 1.2rem;
	}

	.component-list {
	display: grid;
	gap: 0.5rem;
	}

	.component-list-item {
	display: flex;
	justify-content: space-between;
	padding: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.02);
	border-radius: 5px;
	}

	.component-list-item:last-child {
	border-bottom: none;
	}

	.monthly-breakdown {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-top: 1rem;
	}

	.monthly-item {
	background: rgba(255, 255, 255, 0.05);
	padding: 1rem;
	border-radius: 10px;
	text-align: center;
	}

	.monthly-label {
	font-size: 0.9rem;
	color: #a8a8b3;
	margin-bottom: 0.5rem;
	}

	.monthly-value {
	font-size: 1.2rem;
	font-weight: 600;
	color: #00d2ff;
	}

	.build-method-comparison {
	margin-top: 2rem;
	}

	.comparison-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	}

	.comparison-card {
	background: rgba(118, 75, 162, 0.1);
	border: 1px solid rgba(118, 75, 162, 0.3);
	padding: 1.5rem;
	border-radius: 10px;
	}

	.comparison-card h5 {
	color: #764ba2;
	margin-bottom: 1rem;
	}

	.comparison-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
	}

	.periodDisplay {
	color: #00d2ff;
	}

	@keyframes fadeInDown {
	from {
	opacity: 0;
	transform: translateY(-30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	@media (max-width: 768px) {
	h1 {
	font-size: 2rem;
	}

	.methods-grid {
	grid-template-columns: 1fr;
	}

	.pros-cons {
	grid-template-columns: 1fr;
	}

	.tabs {
	flex-direction: column;
	}

	.tab {
	width: 100%;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>AI SAAS Build Calculator</h1>
	<p class="subtitle">최적의 AI 서비스 구축 방식을 찾아드립니다</p>
	</header>

	<div class="tabs">
	<button class="tab active" onclick="switchTab('custom')">AI SaaS 맞춤 설계 계산기</button>
	</div>

	<!-- AI SaaS 맞춤 설계 탭 -->
	<div id="custom" class="tab-content active">
	<div class="custom-design-container">
	<h2 class="calculator-title">나만의 AI SaaS 맞춤 설계</h2>

	<!-- 타깃 서비스 유형 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">🎯</div>
	<span>타깃 서비스 유형 (필수, 복수 선택 가능)</span>
	</div>

	<!-- AI 이미지 관련 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🖼️ AI 이미지 관련</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="image-gen" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 이미지 생성</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="book-cover" data-cost="7" data-time="1" data-resource="0.7">
	<div class="option-name">책 표지 AI 생성</div>
	<div class="option-details">
	<span>$7K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="bg-removal" data-cost="7" data-time="1" data-resource="0.7">
	<div class="option-name">배경 제거 및 생성</div>
	<div class="option-details">
	<span>$7K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="image-enhance" data-cost="7" data-time="1" data-resource="1.4">
	<div class="option-name">AI 이미지 편집/향상</div>
	<div class="option-details">
	<span>$7K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="image-upscale" data-cost="7" data-time="1" data-resource="1.4">
	<div class="option-name">이미지 업스케일링</div>
	<div class="option-details">
	<span>$7K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="image-custom" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">이미지 엔터프라이즈 커스텀</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 비디오 관련 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🎥 AI 비디오 관련</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="video-gen" data-cost="20" data-time="1" data-resource="10">
	<div class="option-name">AI 비디오 생성</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="video-edit" data-cost="20" data-time="1" data-resource="10">
	<div class="option-name">AI 비디오 편집</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="avatar-video" data-cost="20" data-time="1" data-resource="10">
	<div class="option-name">AI 아바타 비디오</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="auto-subtitle" data-cost="7" data-time="1" data-resource="0.7">
	<div class="option-name">자동 자막 생성</div>
	<div class="option-details">
	<span>$7K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="shortform" data-cost="20" data-time="1" data-resource="100">
	<div class="option-name">AI 숏폼 비디오</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="video-custom" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">비디오 엔터프라이즈 커스텀</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 오디오 관련 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🎵 AI 오디오 관련</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="sound-gen" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 음향 생성</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="music-gen" data-cost="5" data-time="1" data-resource="1.4">
	<div class="option-name">AI 음악 생성</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="song-gen" data-cost="5" data-time="1" data-resource="1.5">
	<div class="option-name">AI 노래 생성 (음악+가사+보컬)</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="music-video" data-cost="5" data-time="1" data-resource="12">
	<div class="option-name">AI 뮤직비디오 생성</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="ai-singer" data-cost="30" data-time="1" data-resource="20">
	<div class="option-name">AI 가수 생성 (풀패키지)</div>
	<div class="option-details">
	<span>$30K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="voice-clone" data-cost="5" data-time="1" data-resource="2.5">
	<div class="option-name">음성 복제/합성</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="tts" data-cost="5" data-time="1" data-resource="1.4">
	<div class="option-name">텍스트 TO 음성 변환</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="stt" data-cost="5" data-time="1" data-resource="3">
	<div class="option-name">음성 TO 텍스트 변환</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="podcast" data-cost="5" data-time="1" data-resource="3">
	<div class="option-name">AI 팟캐스트 제작</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="audio-custom" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">오디오 엔터프라이즈 커스텀</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 텍스트 관련 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">💬 AI 텍스트 관련</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="chatbot-text" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 챗봇 (텍스트)</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="chatbot-rag" data-cost="5" data-time="1" data-resource="1.4">
	<div class="option-name">AI 챗봇 (텍스트+RAG)</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="chatbot-voice" data-cost="5" data-time="1" data-resource="1.5">
	<div class="option-name">AI 챗봇 (텍스트+음성)</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="chatbot-full" data-cost="5" data-time="1" data-resource="3">
	<div class="option-name">AI 챗봇 (텍스트+음성+RAG)</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="translation" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 번역 서비스</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="email-writing" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 이메일/문서 작성</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="code-assistant" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 코드 어시스턴트</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="text-custom" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">텍스트 엔터프라이즈 커스텀</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 분석 도구 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">📊 AI 분석 도구</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="data-analysis" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">AI 데이터 분석</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="ocr" data-cost="5" data-time="1" data-resource="2">
	<div class="option-name">AI OCR 서비스</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="computer-vision" data-cost="5" data-time="1" data-resource="1.4">
	<div class="option-name">컴퓨터 비전</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="sentiment-analysis" data-cost="5" data-time="1" data-resource="0.7">
	<div class="option-name">감정 분석 AI</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="analysis-custom" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">분석 엔터프라이즈 커스텀</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 콘텐츠 생성 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">📝 AI 콘텐츠 생성</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="novel" data-cost="20" data-time="1" data-resource="20">
	<div class="option-name">AI 소설 생성</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="webnovel" data-cost="20" data-time="1" data-resource="20">
	<div class="option-name">AI 웹소설 생성</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="webtoon" data-cost="20" data-time="1" data-resource="20">
	<div class="option-name">AI 웹툰 생성</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="ai-book" data-cost="20" data-time="1" data-resource="2">
	<div class="option-name">AI BOOK 제작</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="ecommerce" data-cost="20" data-time="1" data-resource="20">
	<div class="option-name">이커머스 AI (상품설명)</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 전문 서비스 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">⚕️ AI 전문 서비스</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="medical" data-cost="20" data-time="1" data-resource="5">
	<div class="option-name">AI 의료 어시스턴트</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="legal" data-cost="20" data-time="1" data-resource="5">
	<div class="option-name">AI 법률 어시스턴트</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="education" data-cost="20" data-time="1" data-resource="5">
	<div class="option-name">AI 교육/튜터링</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- AI 시뮬레이션 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🎭 AI 시뮬레이션</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="hairstyle" data-cost="20" data-time="1" data-resource="1.2">
	<div class="option-name">헤어스타일 AI 시뮬레이션</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="fashion" data-cost="7" data-time="1" data-resource="0.7">
	<div class="option-name">패션 가상 피팅 AI</div>
	<div class="option-details">
	<span>$7K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="3d-model" data-cost="20" data-time="1" data-resource="2">
	<div class="option-name">AI 3D 모델 생성</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="nsfw" data-cost="20" data-time="1" data-resource="0.7">
	<div class="option-name">NSFW 이미지 생성</div>
	<div class="option-details">
	<span>$20K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>

	<!-- 커스텀 모델 -->
	<h4 style="color: #00d2ff; margin: 1.5rem 0 1rem 0;">🔧 커스텀 모델</h4>
	<div class="component-options" style="margin-bottom: 2rem;">
	<div class="option-card" data-category="service" data-id="llm-finetune" data-cost="200" data-time="1" data-resource="20">
	<div class="option-name">모델: LLM(파인튜닝)</div>
	<div class="option-details">
	<span>$200K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="image-lora" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">모델: 이미지 생성(LoRA)</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="gen-lora" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">모델: 생성(LoRA)</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="vision-model" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">모델: 비전인식</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="service" data-id="custom-model" data-cost="50" data-time="1" data-resource="20">
	<div class="option-name">맞춤 주문형 모델</div>
	<div class="option-details">
	<span>$50K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- DB 관리 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">💾</div>
	<span>DB 관리</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="db" data-id="basic-db" data-cost="3" data-time="0.5">
	<div class="option-name">기본 DB</div>
	<div class="option-details">
	<span>$3K</span>
	<span>0.5개월</span>
	</div>
	</div>
	<div class="option-card" data-category="db" data-id="advanced-db" data-cost="8" data-time="1">
	<div class="option-name">고급 DB + 백업</div>
	<div class="option-details">
	<span>$8K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="db" data-id="enterprise-db" data-cost="12" data-time="1.5">
	<div class="option-name">엔터프라이즈 DB</div>
	<div class="option-details">
	<span>$12K</span>
	<span>1.5개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 회원가입 및 로그인 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">🔐</div>
	<span>회원가입 및 로그인</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="auth" data-id="gmail-only" data-cost="2" data-time="0.3">
	<div class="option-name">Gmail 연동</div>
	<div class="option-details">
	<span>$2K</span>
	<span>0.3개월</span>
	</div>
	</div>
	<div class="option-card" data-category="auth" data-id="multi-auth" data-cost="4" data-time="0.5">
	<div class="option-name">다중 소셜 로그인</div>
	<div class="option-details">
	<span>$4K</span>
	<span>0.5개월</span>
	</div>
	</div>
	<div class="option-card" data-category="auth" data-id="custom-auth" data-cost="6" data-time="1">
	<div class="option-name">커스텀 인증 시스템</div>
	<div class="option-details">
	<span>$6K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 크레딧 관리 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">💰</div>
	<span>크레딧 관리</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="credit" data-id="basic-credit" data-cost="3" data-time="0.5">
	<div class="option-name">기본 크레딧 시스템</div>
	<div class="option-details">
	<span>$3K</span>
	<span>0.5개월</span>
	</div>
	</div>
	<div class="option-card" data-category="credit" data-id="advanced-credit" data-cost="6" data-time="1">
	<div class="option-name">고급 크레딧 + 구독</div>
	<div class="option-details">
	<span>$6K</span>
	<span>1개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 페이먼트 지원 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">💳</div>
	<span>페이먼트 지원</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="payment" data-id="basic-payment" data-cost="4" data-time="0.5">
	<div class="option-name">기본 결제 (카드)</div>
	<div class="option-details">
	<span>$4K</span>
	<span>0.5개월</span>
	</div>
	</div>
	<div class="option-card" data-category="payment" data-id="multi-payment" data-cost="8" data-time="1">
	<div class="option-name">다중 결제 수단</div>
	<div class="option-details">
	<span>$8K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="payment" data-id="global-payment" data-cost="10" data-time="1.5">
	<div class="option-name">글로벌 결제 시스템</div>
	<div class="option-details">
	<span>$10K</span>
	<span>1.5개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 마케팅 지원 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">📢</div>
	<span>마케팅 지원</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="marketing" data-id="basic-marketing" data-cost="5" data-time="1">
	<div class="option-name">기본 마케팅 도구</div>
	<div class="option-details">
	<span>$5K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="marketing" data-id="advanced-marketing" data-cost="10" data-time="1.5">
	<div class="option-name">고급 마케팅 자동화</div>
	<div class="option-details">
	<span>$10K</span>
	<span>1.5개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 개발 및 기술 인력 지원 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">👨‍💻</div>
	<span>개발 및 기술 인력 지원</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="support" data-id="basic-support" data-cost="3" data-time="0">
	<div class="option-name">기본 기술 지원</div>
	<div class="option-details">
	<span>월 $3K</span>
	<span>즉시</span>
	</div>
	</div>
	<div class="option-card" data-category="support" data-id="dedicated-support" data-cost="8" data-time="0">
	<div class="option-name">전담 개발자 지원</div>
	<div class="option-details">
	<span>월 $8K</span>
	<span>즉시</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 원격 모니터링 지원 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">📊</div>
	<span>원격 모니터링 지원</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="monitoring" data-id="basic-monitor" data-cost="2" data-time="0.3">
	<div class="option-name">기본 모니터링</div>
	<div class="option-details">
	<span>$2K</span>
	<span>0.3개월</span>
	</div>
	</div>
	<div class="option-card" data-category="monitoring" data-id="advanced-monitor" data-cost="4" data-time="0.5">
	<div class="option-name">고급 분석 + 알림</div>
	<div class="option-details">
	<span>$4K</span>
	<span>0.5개월</span>
	</div>
	</div>
	</div>
	</div>

	<!-- 추가 구성 요소 -->
	<div class="component-section">
	<div class="component-title">
	<div class="component-icon">🔧</div>
	<span>추가 기능 (복수 선택 가능)</span>
	</div>
	<div class="component-options">
	<div class="option-card" data-category="additional" data-id="admin-panel" data-cost="5" data-time="0.5">
	<div class="option-name">관리자 대시보드</div>
	<div class="option-details">
	<span>$5K</span>
	<span>0.5개월</span>
	</div>
	</div>
	<div class="option-card" data-category="additional" data-id="api-system" data-cost="8" data-time="1">
	<div class="option-name">API 시스템</div>
	<div class="option-details">
	<span>$8K</span>
	<span>1개월</span>
	</div>
	</div>
	<div class="option-card" data-category="additional" data-id="analytics" data-cost="6" data-time="0.5">
	<div class="option-name">분석 도구</div>
	<div class="option-details">
	<span>$6K</span>
	<span>0.5개월</span>
	</div>
	</div>
	<div class="option-card" data-category="additional" data-id="multi-language" data-cost="4" data-time="0.5">
	<div class="option-name">다국어 지원</div>
	<div class="option-details">
	<span>$4K</span>
	<span>0.5개월</span>
	</div>
	</div>
	</div>
	</div>

	<button class="calculate-btn" onclick="calculateCustomCost()">맞춤 견적 계산하기</button>

	<div class="custom-result" id="customResult">
	<div class="result-header">
	<h3>맞춤 AI SaaS 견적서</h3>
	<p>선택하신 구성으로 산출된 상세 견적입니다</p>
	</div>

	<div class="custom-summary">
	<div class="summary-item">
	<div class="summary-label">초기 개발 비용</div>
	<div class="summary-value" id="initialCost">$0K</div>
	</div>
	<div class="summary-item">
	<div class="summary-label">예상 개발 기간</div>
	<div class="summary-value" id="devTime">0개월</div>
	</div>
	<div class="summary-item">
	<div class="summary-label">총 비용 (<span id="periodText">3</span>개월)</div>
	<div class="summary-value" id="totalCost">$0K</div>
	</div>
	</div>

	<div class="selected-components">
	<h4>선택한 구성 요소 상세</h4>
	<div class="component-list" id="componentList"></div>
	</div>

	<div class="monthly-breakdown">
	<div class="monthly-item">
	<div class="monthly-label">월 서버 비용</div>
	<div class="monthly-value" id="serverCost">$0K</div>
	</div>
	<div class="monthly-item">
	<div class="monthly-label">월 리소스 비용 (GPU/API)</div>
	<div class="monthly-value" id="resourceCost">$0K</div>
	</div>
	<div class="monthly-item">
	<div class="monthly-label">월 유지보수</div>
	<div class="monthly-value" id="maintenanceCost">$0K</div>
	</div>
	<div class="monthly-item">
	<div class="monthly-label">월 총 운영비</div>
	<div class="monthly-value" id="totalMonthlyCost">$0K</div>
	</div>
	</div>

	<!-- 구축 방식별 비교 -->
	<div class="build-method-comparison" style="margin-top: 2rem;">
	<h4 style="margin-bottom: 1.5rem; color: #00d2ff;">구축 방식별 비교</h4>
	<div class="comparison-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
	<div class="comparison-card" style="background: rgba(118, 75, 162, 0.1); border: 1px solid rgba(118, 75, 162, 0.3); padding: 1.5rem; border-radius: 10px;">
	<h5 style="color: #764ba2; margin-bottom: 1rem;">외주 용역 개발</h5>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span>초기 비용</span>
	<span id="outsourceInitial">$0K</span>
	</div>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span>월 운영 비용</span>
	<span id="outsourceMonthly">$0K</span>
	</div>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span><span class="periodDisplay">3</span>개월 총 비용</span>
	<span id="outsourceTotal">$0K</span>
	</div>
	</div>
	<div class="comparison-card" style="background: rgba(245, 87, 108, 0.1); border: 1px solid rgba(245, 87, 108, 0.3); padding: 1.5rem; border-radius: 10px;">
	<h5 style="color: #f5576c; margin-bottom: 1rem;">자체 인력 개발</h5>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span>초기 비용</span>
	<span id="inhouseInitial">$0K</span>
	</div>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span>월 운영 비용</span>
	<span id="inhouseMonthly">$0K</span>
	</div>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span><span class="periodDisplay">3</span>개월 총 비용</span>
	<span id="inhouseTotal">$0K</span>
	</div>
	</div>
	<div class="comparison-card" style="background: rgba(79, 172, 254, 0.1); border: 1px solid rgba(79, 172, 254, 0.3); padding: 1.5rem; border-radius: 10px;">
	<h5 style="color: #4facfe; margin-bottom: 1rem;">플랫폼 대여</h5>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span>초기 비용</span>
	<span id="platformInitial">$0K</span>
	</div>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span>월 운영 비용</span>
	<span id="platformMonthly">$0K</span>
	</div>
	<div class="comparison-item" style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
	<span><span class="periodDisplay">3</span>개월 총 비용</span>
	<span id="platformTotal">$0K</span>
	</div>
	</div>

	```html
	</div>
	</div>

	<!-- 기간별 비용 차트 -->
	<div class="chart-container">
	<canvas id="customChart"></canvas>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// 전역 변수
	let selectedComponents = {
	service: [],
	db: null,
	auth: null,
	credit: null,
	payment: null,
	marketing: null,
	support: null,
	monitoring: null,
	additional: []
	};

	let customChart = null;
	let currentPeriod = 3;

	// 옵션 카드 클릭 이벤트
	document.querySelectorAll('.option-card').forEach(card => {
	card.addEventListener('click', function() {
	const category = this.dataset.category;
	const id = this.dataset.id;

	if (category === 'service' \|\| category === 'additional') {
	// 복수 선택 가능
	this.classList.toggle('selected');

	if (this.classList.contains('selected')) {
	if (!selectedComponents[category].includes(id)) {
	selectedComponents[category].push(id);
	}
	} else {
	const index = selectedComponents[category].indexOf(id);
	if (index > -1) {
	selectedComponents[category].splice(index, 1);
	}
	}
	} else {
	// 단일 선택
	document.querySelectorAll(`[data-category="${category}"]`).forEach(c => {
	c.classList.remove('selected');
	});

	this.classList.add('selected');
	selectedComponents[category] = id;
	}
	});
	});

	// 탭 전환 함수
	function switchTab(tabId) {
	document.querySelectorAll('.tab').forEach(tab => {
	tab.classList.remove('active');
	});
	document.querySelectorAll('.tab-content').forEach(content => {
	content.classList.remove('active');
	});

	event.target.classList.add('active');
	document.getElementById(tabId).classList.add('active');
	}

	// 커스텀 비용 계산 함수
	function calculateCustomCost() {
	let totalInitialCost = 0;
	let totalResourceCost = 0;
	let maxTime = 0;
	let componentDetails = [];

	// 서비스 비용 계산
	selectedComponents.service.forEach(serviceId => {
	const card = document.querySelector(`[data-id="${serviceId}"]`);
	const cost = parseFloat(card.dataset.cost);
	const time = parseFloat(card.dataset.time);
	const resource = parseFloat(card.dataset.resource) \|\| 0;
	const name = card.querySelector('.option-name').textContent;

	totalInitialCost += cost;
	totalResourceCost += resource;
	maxTime = Math.max(maxTime, time);

	componentDetails.push({
	name: name,
	cost: cost,
	type: 'service'
	});
	});

	// 기타 구성 요소 비용 계산
	['db', 'auth', 'credit', 'payment', 'marketing', 'monitoring'].forEach(category => {
	if (selectedComponents[category]) {
	const card = document.querySelector(`[data-category="${category}"][data-id="${selectedComponents[category]}"]`);
	const cost = parseFloat(card.dataset.cost);
	const time = parseFloat(card.dataset.time);
	const name = card.querySelector('.option-name').textContent;

	totalInitialCost += cost;
	maxTime = Math.max(maxTime, time);

	componentDetails.push({
	name: name,
	cost: cost,
	type: category
	});
	}
	});

	// 지원 서비스 (월간 비용)
	let monthlySupport = 0;
	if (selectedComponents.support) {
	const card = document.querySelector(`[data-category="support"][data-id="${selectedComponents.support]}"]`);
	monthlySupport = parseFloat(card.dataset.cost);
	const name = card.querySelector('.option-name').textContent;

	componentDetails.push({
	name: name,
	cost: monthlySupport,
	type: 'monthly'
	});
	}

	// 추가 기능 비용 계산
	selectedComponents.additional.forEach(additionalId => {
	const card = document.querySelector(`[data-category="additional"][data-id="${additionalId}"]`);
	const cost = parseFloat(card.dataset.cost);
	const time = parseFloat(card.dataset.time);
	const name = card.querySelector('.option-name').textContent;

	totalInitialCost += cost;
	maxTime = Math.max(maxTime, time);

	componentDetails.push({
	name: name,
	cost: cost,
	type: 'additional'
	});
	});

	// 월간 운영 비용 계산
	const serverCost = totalInitialCost > 100 ? 5 : totalInitialCost > 50 ? 3 : totalInitialCost > 20 ? 2 : 1;
	const resourceCost = totalResourceCost;
	const maintenanceCost = totalInitialCost * 0.05; // 초기 비용의 5%
	const totalMonthlyCost = serverCost + resourceCost + maintenanceCost + monthlySupport;

	// 결과 표시
	document.getElementById('initialCost').textContent = `$${totalInitialCost}K`;
	document.getElementById('devTime').textContent = `${maxTime}개월`;
	document.getElementById('serverCost').textContent = `$${serverCost}K`;
	document.getElementById('resourceCost').textContent = `$${resourceCost.toFixed(1)}K`;
	document.getElementById('maintenanceCost').textContent = `$${maintenanceCost.toFixed(1)}K`;
	document.getElementById('totalMonthlyCost').textContent = `$${totalMonthlyCost.toFixed(1)}K`;

	// 총 비용 계산 (기간별)
	updateTotalCost(totalInitialCost, totalMonthlyCost);

	// 선택한 구성 요소 목록 표시
	displayComponentList(componentDetails);

	// 구축 방식별 비교
	compareBuilderMethods(totalInitialCost, totalMonthlyCost, maxTime);

	// 차트 업데이트
	updateCustomChart(totalInitialCost, totalMonthlyCost);

	// 결과 섹션 표시
	document.getElementById('customResult').style.display = 'block';
	}

	// 총 비용 업데이트
	function updateTotalCost(initialCost, monthlyCost) {
	const totalCost = initialCost + (monthlyCost * currentPeriod);
	document.getElementById('totalCost').textContent = `$${totalCost.toFixed(1)}K`;
	}

	// 구성 요소 목록 표시
	function displayComponentList(components) {
	const listContainer = document.getElementById('componentList');
	listContainer.innerHTML = '';

	components.forEach(component => {
	const item = document.createElement('div');
	item.className = 'component-list-item';

	let costDisplay = component.type === 'monthly'
	? `월 $${component.cost}K`
	: `$${component.cost}K`;

	item.innerHTML = `
	<span>${component.name}</span>
	<span style="color: #00d2ff;">${costDisplay}</span>
	`;

	listContainer.appendChild(item);
	});
	}

	// 구축 방식별 비교
	function compareBuilderMethods(initialCost, monthlyCost, devTime) {
	// 외주 용역 개발
	const outsourceInitial = initialCost;
	const outsourceMonthly = monthlyCost;
	const outsourceTotal = outsourceInitial + (outsourceMonthly * currentPeriod);

	// 자체 인력 개발
	const developerSalary = 10; // 월 $10K
	const teamSize = Math.ceil(initialCost / 50); // $50K당 1명
	const inhouseDevTime = Math.max(devTime * 1.5, 3); // 최소 3개월
	const inhouseInitial = developerSalary * teamSize * inhouseDevTime;
	const inhouseMonthly = monthlyCost + (developerSalary * Math.ceil(teamSize / 2)); // 유지보수 인력
	const inhouseTotal = inhouseInitial + (inhouseMonthly * currentPeriod);

	// 플랫폼 대여
	const platformInitial = 1; // 설정 비용
	const platformMonthly = monthlyCost * 2 + 5; // 플랫폼 수수료 포함
	const platformTotal = platformInitial + (platformMonthly * currentPeriod);

	// 결과 표시
	document.getElementById('outsourceInitial').textContent = `$${outsourceInitial}K`;
	document.getElementById('outsourceMonthly').textContent = `$${outsourceMonthly.toFixed(1)}K`;
	document.getElementById('outsourceTotal').textContent = `$${outsourceTotal.toFixed(1)}K`;

	document.getElementById('inhouseInitial').textContent = `$${inhouseInitial}K`;
	document.getElementById('inhouseMonthly').textContent = `$${inhouseMonthly.toFixed(1)}K`;
	document.getElementById('inhouseTotal').textContent = `$${inhouseTotal.toFixed(1)}K`;

	document.getElementById('platformInitial').textContent = `$${platformInitial}K`;
	document.getElementById('platformMonthly').textContent = `$${platformMonthly.toFixed(1)}K`;
	document.getElementById('platformTotal').textContent = `$${platformTotal.toFixed(1)}K`;
	}

	// 차트 업데이트
	function updateCustomChart(initialCost, monthlyCost) {
	const ctx = document.getElementById('customChart').getContext('2d');

	if (customChart) {
	customChart.destroy();
	}

	const months = Array.from({length: 12}, (_, i) => `${i + 1}개월`);
	const outsourceData = months.map((_, i) => initialCost + (monthlyCost * (i + 1)));
	const inhouseData = months.map((_, i) => {
	const teamSize = Math.ceil(initialCost / 50);
	const inhouseInitial = 10 * teamSize * 3;
	const inhouseMonthly = monthlyCost + (10 * Math.ceil(teamSize / 2));
	return inhouseInitial + (inhouseMonthly * (i + 1));
	});
	const platformData = months.map((_, i) => 1 + ((monthlyCost * 2 + 5) * (i + 1)));

	customChart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: months,
	datasets: [{
	label: '외주 용역 개발',
	data: outsourceData,
	borderColor: '#764ba2',
	backgroundColor: 'rgba(118, 75, 162, 0.1)',
	tension: 0.4
	}, {
	label: '자체 인력 개발',
	data: inhouseData,
	borderColor: '#f5576c',
	backgroundColor: 'rgba(245, 87, 108, 0.1)',
	tension: 0.4
	}, {
	label: '플랫폼 대여',
	data: platformData,
	borderColor: '#4facfe',
	backgroundColor: 'rgba(79, 172, 254, 0.1)',
	tension: 0.4
	}]
	},
	options: {
	responsive: true,
	maintainAspectRatio: false,
	plugins: {
	legend: {
	labels: {
	color: '#ffffff'
	}
	},
	tooltip: {
	callbacks: {
	label: function(context) {
	return context.dataset.label + ': $' + context.parsed.y.toFixed(1) + 'K';
	}
	}
	}
	},
	scales: {
	x: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#a8a8b3'
	}
	},
	y: {
	grid: {
	color: 'rgba(255, 255, 255, 0.1)'
	},
	ticks: {
	color: '#a8a8b3',
	callback: function(value) {
	return '$' + value + 'K';
	}
	}
	}
	}
	}
	});
	}
	</script>
	</body>
	</html>