Update index.html

index.html

@@ -388,7 +388,7 @@
 
         .option-card {
             background: rgba(255, 255, 255, 0.05);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            border: 2px solid rgba(255, 255, 255, 0.2);
             border-radius: 10px;
             padding: 1rem;
             cursor: pointer;
@@ -398,14 +398,32 @@
         }
 
         .option-card.selected {
-            background: rgba(58, 123, 213, 0.2);
+            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 {
@@ -428,6 +446,38 @@
             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));
@@ -456,10 +506,12 @@
             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 {
@@ -470,8 +522,73 @@
         .component-list-item {
             display: flex;
             justify-content: space-between;
-            padding: 0.5rem 0;
+            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;
+        }
+
+        .timeline-section {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 10px;
+            padding: 1.5rem;
+            margin-top: 1.5rem;
+        }
+
+        .timeline-section h4 {
+            margin-bottom: 1rem;
+            font-size: 1.2rem;
+        }
+
+        .timeline-bar {
+            position: relative;
+            height: 40px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 20px;
+            overflow: hidden;
+            margin-bottom: 1rem;
+        }
+
+        .timeline-progress {
+            height: 100%;
+            background: linear-gradient(90deg, #00d2ff, #3a7bd5);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: 600;
+            transition: width 0.5s ease;
+        }
+
+        .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;
         }
 
         @keyframes fadeInDown {
@@ -729,59 +846,59 @@
                 <div class="component-section">
                     <div class="component-title">
                         <div class="component-icon">🎯</div>
-                        <span>타깃 서비스 유형</span>
+                        <span>타깃 서비스 유형 (필수)</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('service', 'image-gen', 30, 2)">
+                        <div class="option-card" data-category="service" data-id="image-gen" data-cost="30" data-time="2">
                             <div class="option-name">이미지 생성</div>
                             <div class="option-details">
                                 <span>₩30M</span>
                                 <span>2개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'image-edit', 35, 2.5)">
+                        <div class="option-card" data-category="service" data-id="image-edit" data-cost="35" data-time="2.5">
                             <div class="option-name">이미지 편집/합성</div>
                             <div class="option-details">
                                 <span>₩35M</span>
                                 <span>2.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'video-gen', 50, 3)">
+                        <div class="option-card" data-category="service" data-id="video-gen" data-cost="50" data-time="3">
                             <div class="option-name">비디오 생성</div>
                             <div class="option-details">
                                 <span>₩50M</span>
                                 <span>3개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'music-gen', 40, 2.5)">
+                        <div class="option-card" data-category="service" data-id="music-gen" data-cost="40" data-time="2.5">
                             <div class="option-name">음악 및 음향 생성</div>
                             <div class="option-details">
                                 <span>₩40M</span>
                                 <span>2.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'text-chat', 20, 1.5)">
+                        <div class="option-card" data-category="service" data-id="text-chat" data-cost="20" data-time="1.5">
                             <div class="option-name">텍스트 생성(챗봇)</div>
                             <div class="option-details">
                                 <span>₩20M</span>
                                 <span>1.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'text-expert', 25, 2)">
+                        <div class="option-card" data-category="service" data-id="text-expert" data-cost="25" data-time="2">
                             <div class="option-name">텍스트 생성(전문가)</div>
                             <div class="option-details">
                                 <span>₩25M</span>
                                 <span>2개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'voice-clone', 45, 2.5)">
+                        <div class="option-card" data-category="service" data-id="voice-clone" data-cost="45" data-time="2.5">
                             <div class="option-name">음성 복제/생성</div>
                             <div class="option-details">
                                 <span>₩45M</span>
                                 <span>2.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('service', 'vision-ai', 35, 2)">
+                        <div class="option-card" data-category="service" data-id="vision-ai" data-cost="35" data-time="2">
                             <div class="option-name">비전 인식</div>
                             <div class="option-details">
                                 <span>₩35M</span>
@@ -798,21 +915,21 @@
                         <span>DB 관리</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('db', 'basic-db', 5, 0.5)">
+                        <div class="option-card" data-category="db" data-id="basic-db" data-cost="5" data-time="0.5">
                             <div class="option-name">기본 DB</div>
                             <div class="option-details">
                                 <span>₩5M</span>
                                 <span>0.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('db', 'advanced-db', 15, 1)">
+                        <div class="option-card" data-category="db" data-id="advanced-db" data-cost="15" data-time="1">
                             <div class="option-name">고급 DB + 백업</div>
                             <div class="option-details">
                                 <span>₩15M</span>
                                 <span>1개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('db', 'enterprise-db', 25, 1.5)">
+                        <div class="option-card" data-category="db" data-id="enterprise-db" data-cost="25" data-time="1.5">
                             <div class="option-name">엔터프라이즈 DB</div>
                             <div class="option-details">
                                 <span>₩25M</span>
@@ -829,21 +946,21 @@
                         <span>회원가입 및 로그인</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('auth', 'gmail-only', 3, 0.3)">
+                        <div class="option-card" data-category="auth" data-id="gmail-only" data-cost="3" data-time="0.3">
                             <div class="option-name">Gmail 연동</div>
                             <div class="option-details">
                                 <span>₩3M</span>
                                 <span>0.3개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('auth', 'multi-auth', 8, 0.5)">
+                        <div class="option-card" data-category="auth" data-id="multi-auth" data-cost="8" data-time="0.5">
                             <div class="option-name">다중 소셜 로그인</div>
                             <div class="option-details">
                                 <span>₩8M</span>
                                 <span>0.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('auth', 'custom-auth', 12, 1)">
+                        <div class="option-card" data-category="auth" data-id="custom-auth" data-cost="12" data-time="1">
                             <div class="option-name">커스텀 인증 시스템</div>
                             <div class="option-details">
                                 <span>₩12M</span>
@@ -860,14 +977,14 @@
                         <span>크레딧 관리</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('credit', 'basic-credit', 5, 0.5)">
+                        <div class="option-card" data-category="credit" data-id="basic-credit" data-cost="5" data-time="0.5">
                             <div class="option-name">기본 크레딧 시스템</div>
                             <div class="option-details">
                                 <span>₩5M</span>
                                 <span>0.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('credit', 'advanced-credit', 12, 1)">
+                        <div class="option-card" data-category="credit" data-id="advanced-credit" data-cost="12" data-time="1">
                             <div class="option-name">고급 크레딧 + 구독</div>
                             <div class="option-details">
                                 <span>₩12M</span>
@@ -884,21 +1001,21 @@
                         <span>페이먼트 지원</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('payment', 'basic-payment', 8, 0.5)">
+                        <div class="option-card" data-category="payment" data-id="basic-payment" data-cost="8" data-time="0.5">
                             <div class="option-name">기본 결제 (카드)</div>
                             <div class="option-details">
                                 <span>₩8M</span>
                                 <span>0.5개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('payment', 'multi-payment', 15, 1)">
+                        <div class="option-card" data-category="payment" data-id="multi-payment" data-cost="15" data-time="1">
                             <div class="option-name">다중 결제 수단</div>
                             <div class="option-details">
                                 <span>₩15M</span>
                                 <span>1개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('payment', 'global-payment', 20, 1.5)">
+                        <div class="option-card" data-category="payment" data-id="global-payment" data-cost="20" data-time="1.5">
                             <div class="option-name">글로벌 결제 시스템</div>
                             <div class="option-details">
                                 <span>₩20M</span>
@@ -915,14 +1032,14 @@
                         <span>마케팅 지원</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('marketing', 'basic-marketing', 10, 1)">
+                        <div class="option-card" data-category="marketing" data-id="basic-marketing" data-cost="10" data-time="1">
                             <div class="option-name">기본 마케팅 도구</div>
                             <div class="option-details">
                                 <span>₩10M</span>
                                 <span>1개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('marketing', 'advanced-marketing', 20, 1.5)">
+                        <div class="option-card" data-category="marketing" data-id="advanced-marketing" data-cost="20" data-time="1.5">
                             <div class="option-name">고급 마케팅 자동화</div>
                             <div class="option-details">
                                 <span>₩20M</span>
@@ -939,14 +1056,14 @@
                         <span>개발 및 기술 인력 지원</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('support', 'basic-support', 5, 0)">
+                        <div class="option-card" data-category="support" data-id="basic-support" data-cost="5" data-time="0">
                             <div class="option-name">기본 기술 지원</div>
                             <div class="option-details">
                                 <span>월 ₩5M</span>
                                 <span>즉시</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('support', 'dedicated-support', 15, 0)">
+                        <div class="option-card" data-category="support" data-id="dedicated-support" data-cost="15" data-time="0">
                             <div class="option-name">전담 개발자 지원</div>
                             <div class="option-details">
                                 <span>월 ₩15M</span>
@@ -963,14 +1080,14 @@
                         <span>원격 모니터링 지원</span>
                     </div>
                     <div class="component-options">
-                        <div class="option-card" onclick="selectOption('monitoring', 'basic-monitor', 3, 0.3)">
+                        <div class="option-card" data-category="monitoring" data-id="basic-monitor" data-cost="3" data-time="0.3">
                             <div class="option-name">기본 모니터링</div>
                             <div class="option-details">
                                 <span>₩3M</span>
                                 <span>0.3개월</span>
                             </div>
                         </div>
-                        <div class="option-card" onclick="selectOption('monitoring', 'advanced-monitor', 8, 0.5)">
+                        <div class="option-card" data-category="monitoring" data-id="advanced-monitor" data-cost="8" data-time="0.5">
                             <div class="option-name">고급 분석 + 알림</div>
                             <div class="option-details">
                                 <span>₩8M</span>
@@ -980,27 +1097,108 @@
                     </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="10" data-time="0.5">
+                            <div class="option-name">관리자 대시보드</div>
+                            <div class="option-details">
+                                <span>₩10M</span>
+                                <span>0.5개월</span>
+                            </div>
+                        </div>
+                        <div class="option-card" data-category="additional" data-id="api-system" data-cost="15" data-time="1">
+                            <div class="option-name">API 시스템</div>
+                            <div class="option-details">
+                                <span>₩15M</span>
+                                <span>1개월</span>
+                            </div>
+                        </div>
+                        <div class="option-card" data-category="additional" data-id="analytics" data-cost="12" data-time="0.5">
+                            <div class="option-name">분석 도구</div>
+                            <div class="option-details">
+                                <span>₩12M</span>
+                                <span>0.5개월</span>
+                            </div>
+                        </div>
+                        <div class="option-card" data-category="additional" data-id="multi-language" data-cost="8" data-time="0.5">
+                            <div class="option-name">다국어 지원</div>
+                            <div class="option-details">
+                                <span>₩8M</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="period-tabs">
+                        <div class="period-tab active" onclick="switchPeriod(3)">3개월</div>
+                        <div class="period-tab" onclick="switchPeriod(6)">6개월</div>
+                        <div class="period-tab" onclick="switchPeriod(12)">12개월</div>
+                    </div>
+
                     <div class="custom-summary">
                         <div class="summary-item">
-                            <div class="summary-label">총 개발 비용</div>
-                            <div class="summary-value" id="totalCost">₩0</div>
+                            <div class="summary-label">초기 개발 비용</div>
+                            <div class="summary-value" id="initialCost">₩0</div>
                         </div>
                         <div class="summary-item">
                             <div class="summary-label">예상 개발 기간</div>
-                            <div class="summary-value" id="totalTime">0개월</div>
+                            <div class="summary-value" id="devTime">0개월</div>
                         </div>
                         <div class="summary-item">
-                            <div class="summary-label">월 운영 비용</div>
-                            <div class="summary-value" id="monthlyCost">₩0</div>
+                            <div class="summary-label">총 비용 (<span id="periodText">3</span>개월)</div>
+                            <div class="summary-value" id="totalCost">₩0</div>
                         </div>
                     </div>
+
                     <div class="selected-components">
-                        <h4>선택한 구성 요소</h4>
+                        <h4>선택한 구성 요소 상세</h4>
                         <div class="component-list" id="componentList"></div>
                     </div>
+
+                    <div class="timeline-section">
+                        <h4>개발 일정 및 진행률</h4>
+                        <div class="timeline-bar">
+                            <div class="timeline-progress" id="timelineProgress" style="width: 0%">
+                                <span id="progressText">0%</span>
+                            </div>
+                        </div>
+                        <p style="text-align: center; color: #a8a8b3; margin-top: 0.5rem;">
+                            예상 개발 기간: <span id="timelineText">0개월</span>
+                        </p>
+                    </div>
+
+                    <div class="monthly-breakdown">
+                        <div class="monthly-item">
+                            <div class="monthly-label">월 서버 비용</div>
+                            <div class="monthly-value" id="serverCost">₩0</div>
+                        </div>
+                        <div class="monthly-item">
+                            <div class="monthly-label">월 API 비용</div>
+                            <div class="monthly-value" id="apiCost">₩0</div>
+                        </div>
+                        <div class="monthly-item">
+                            <div class="monthly-label">월 유지보수</div>
+                            <div class="monthly-value" id="maintenanceCost">₩0</div>
+                        </div>
+                        <div class="monthly-item">
+                            <div class="monthly-label">월 총 운영비</div>
+                            <div class="monthly-value" id="totalMonthlyCost">₩0</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -1009,103 +1207,257 @@
     <script>
         let costChart = null;
         let selectedComponents = {};
+        let currentPeriod = 3;
 
+        // 탭 전환 함수
         function switchTab(tabName) {
-            // 모��� 탭 내용 숨기기
             document.querySelectorAll('.tab-content').forEach(content => {
                 content.classList.remove('active');
             });
             
-            // 모든 탭 버튼 비활성화
             document.querySelectorAll('.tab').forEach(tab => {
                 tab.classList.remove('active');
             });
             
-            // 선택한 탭 활성화
             document.getElementById(tabName).classList.add('active');
             event.target.classList.add('active');
         }
 
-        function selectOption(category, optionId, cost, time) {
-            // 이전 선택 제거
-            document.querySelectorAll(`.component-section:has(.component-title:has(.component-icon:contains('${getCategoryIcon(category)}'))) .option-card`).forEach(card => {
-                card.classList.remove('selected');
+        // 맞춤 설계 옵션 선택 함수
+        document.addEventListener('DOMContentLoaded', function() {
+            // 모든 option-card에 클릭 이벤트 추가
+            document.querySelectorAll('.option-card').forEach(card => {
+                card.addEventListener('click', function() {
+                    const category = this.dataset.category;
+                    const id = this.dataset.id;
+                    const cost = parseFloat(this.dataset.cost);
+                    const time = parseFloat(this.dataset.time);
+                    const name = this.querySelector('.option-name').textContent;
+
+                    // 같은 카테고리의 다른 선택 제거
+                    document.querySelectorAll(`.option-card[data-category="${category}"]`).forEach(c => {
+                        c.classList.remove('selected');
+                    });
+
+                    // 현재 카드 선택
+                    this.classList.add('selected');
+
+                    // 선택 정보 저장
+                    selectedComponents[category] = {
+                        id: id,
+                        name: name,
+                        cost: cost,
+                        time: time,
+                        category: category
+                    };
+                });
             });
-            
-            // 새 선택 추가
-            event.currentTarget.classList.add('selected');
-            
-            // 선택 정보 저장
-            selectedComponents[category] = {
-                id: optionId,
-                name: event.currentTarget.querySelector('.option-name').textContent,
-                cost: cost,
-                time: time
-            };
-        }
+        });
 
-        function getCategoryIcon(category) {
-            const icons = {
-                'service': '🎯',
-                'db': '💾',
-                'auth': '🔐',
-                'credit': '💰',
-                'payment': '💳',
-                'marketing': '📢',
-                'support': '👨‍💻',
-                'monitoring': '📊'
-            };
-            return icons[category];
+        // 기간 전환 함수
+        function switchPeriod(period) {
+            currentPeriod = period;
+            document.querySelectorAll('.period-tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            
+            if (Object.keys(selectedComponents).length > 0) {
+                displayCustomResults();
+            }
         }
 
+        // 맞춤 비용 계산 함수
         function calculateCustomCost() {
-            if (Object.keys(selectedComponents).length === 0) {
-                alert('구성 요소를 선택해주세요.');
+            // 필수 항목 체크
+            if (!selectedComponents.service) {
+                alert('타깃 서비스 유형을 선택해주세요.');
                 return;
             }
 
-            let totalCost = 0;
-            let totalTime = 0;
-            let monthlyCost = 0;
+            displayCustomResults();
+            document.getElementById('customResult').style.display = 'block';
+            document.getElementById('customResult').scrollIntoView({ behavior: 'smooth' });
+        }
+
+        // 결과 표시 함수
+        function displayCustomResults() {
+            let initialCost = 0;
+            let maxTime = 0;
             let componentListHTML = '';
+            let monthlySupport = 0;
+
+            // 카테고리별 이름
+            const categoryNames = {
+                'service': '타깃 서비스',
+                'db': 'DB 관리',
+                'auth': '인증 시스템',
+                'credit': '크레딧 관리',
+                'payment': '결제 시스템',
+                'marketing': '마케팅 도구',
+                'support': '기술 지원',
+                'monitoring': '모니터링',
+                'additional': '추가 기능'
+            };
 
+            // 초기 비용 계산 및 구성 요소 목록 생성
             Object.values(selectedComponents).forEach(component => {
-                totalCost += component.cost;
-                totalTime = Math.max(totalTime, component.time);
-                
-                // 월 운영 비용 계산 (support는 월 비용)
-                if (component.id.includes('support')) {
-                    monthlyCost += component.cost;
+                if (component.category === 'support') {
+                    monthlySupport += component.cost;
+                } else {
+                    initialCost += component.cost;
                 }
+                maxTime = Math.max(maxTime, component.time);
                 
                 componentListHTML += `
                     <div class="component-list-item">
-                        <span>${component.name}</span>
-                        <span>₩${component.cost}M</span>
+                        <span><strong>${categoryNames[component.category]}</strong>: ${component.name}</span>
+                        <span>${component.category === 'support' ? '월 ' : ''}₩${component.cost}M</span>
                     </div>
                 `;
             });
 
-            // 기본 월 운영 비용 추가 (서버, API 등)
-            monthlyCost += totalCost * 0.05; // 초기 비용의 5%를 월 운영비로 가정
+            // 월별 운영 비용 계산
+            const serverCost = Math.round(initialCost * 0.02); // 초기 비용의 2%
+            const apiCost = Math.round(initialCost * 0.03); // 초기 비용의 3%
+            const maintenanceCost = Math.round(initialCost * 0.01); // 초기 비용의 1%
+            const totalMonthly = serverCost + apiCost + maintenanceCost + monthlySupport;
+
+            // 총 비용 계산 (기간별)
+            const totalCost = initialCost + (totalMonthly * currentPeriod);
+
+            // 개발 기간 조정 (최소 3개월)
+            const adjustedTime = Math.max(3, Math.ceil(maxTime));
+
+            // 결과 표시
+            document.getElementById('outsourceCost').textContent = `₩${Math.round(outsourceCost)}M`;
+            document.getElementById('inhouseCost').textContent = `₩${Math.round(inhouseCost)}M`;
+            document.getElementById('platformCost').textContent = `₩${Math.round(platformCost)}M`;
+            document.getElementById('results').style.display = 'block';
+
+            // 차트 그리기
+            drawChart(duration, baseCosts[scale], multiplier);
+        }
 
+        function drawChart(duration, costs, multiplier) {
+            const ctx = document.getElementById('costChart').getContext('2d');
+            
+            if (costChart) {
+                costChart.destroy();
+            }
+
+            const months = Array.from({length: duration}, (_, i) => i + 1);
+            
+            costChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: months.map(m => `${m}개월`),
+                    datasets: [
+                        {
+                            label: '외주 용역',
+                            data: months.map(m => costs.outsource.initial + (costs.outsource.monthly * m * multiplier)),
+                            borderColor: '#764ba2',
+                            backgroundColor: 'rgba(118, 75, 162, 0.1)',
+                            tension: 0.4
+                        },
+                        {
+                            label: '자체 인력',
+                            data: months.map(m => costs.inhouse.initial + (costs.inhouse.monthly * m * multiplier)),
+                            borderColor: '#f5576c',
+                            backgroundColor: 'rgba(245, 87, 108, 0.1)',
+                            tension: 0.4
+                        },
+                        {
+                            label: '플랫폼 대여',
+                            data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
+                            borderColor: '#00f2fe',
+                            backgroundColor: 'rgba(0, 242, 254, 0.1)',
+                            tension: 0.4
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '시간에 따른 누적 비용 추이',
+                            color: '#ffffff',
+                            font: {
+                                size: 16
+                            }
+                        },
+                        legend: {
+                            labels: {
+                                color: '#ffffff'
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#ffffff'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#ffffff',
+                                callback: function(value) {
+                                    return '₩' + value + 'M';
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        // 애니메이션 효과를 위한 Intersection Observer
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';
+                }
+            });
+        });
+
+        document.querySelectorAll('.method-card').forEach(card => {
+            observer.observe(card);
+        });
+    </script> 표시
+            document.getElementById('initialCost').textContent = `₩${initialCost}M`;
+            document.getElementById('devTime').textContent = `${adjustedTime}개월`;
             document.getElementById('totalCost').textContent = `₩${totalCost}M`;
-            document.getElementById('totalTime').textContent = `${totalTime}개월`;
-            document.getElementById('monthlyCost').textContent = `₩${monthlyCost.toFixed(1)}M`;
+            document.getElementById('periodText').textContent = currentPeriod;
             document.getElementById('componentList').innerHTML = componentListHTML;
-            document.getElementById('customResult').style.display = 'block';
 
-            // 스크롤 다운
-            document.getElementById('customResult').scrollIntoView({ behavior: 'smooth' });
+            // 타임라인 업데이트
+            const progressPercent = Math.min(100, (adjustedTime / 12) * 100);
+            document.getElementById('timelineProgress').style.width = `${progressPercent}%`;
+            document.getElementById('progressText').textContent = `${Math.round(progressPercent)}%`;
+            document.getElementById('timelineText').textContent = `${adjustedTime}개월`;
+
+            // 월별 비용 표시
+            document.getElementById('serverCost').textContent = `₩${serverCost}M`;
+            document.getElementById('apiCost').textContent = `₩${apiCost}M`;
+            document.getElementById('maintenanceCost').textContent = `₩${maintenanceCost}M`;
+            document.getElementById('totalMonthlyCost').textContent = `₩${totalMonthly}M`;
         }
 
+        // 기존 비용 계산 함수
         function calculateCosts() {
             const scale = document.getElementById('projectScale').value;
             const duration = parseInt(document.getElementById('duration').value);
             const users = parseInt(document.getElementById('users').value);
             const features = document.getElementById('features').value;
 
-            // 기본 비용 설정
             const baseCosts = {
                 outsource: {
                     small: { initial: 50, monthly: 5 },
@@ -1124,17 +1476,13 @@
                 }
             };
 
-            // 복잡도에 따른 가중치
             const complexityMultiplier = {
                 basic: 1,
                 advanced: 1.5,
                 enterprise: 2
             };
 
-            // 사용자 수에 따른 추가 비용
             const userCostFactor = Math.log10(users) / 3;
-
-            // 비용 계산
             const multiplier = complexityMultiplier[features] * userCostFactor;
             
             const outsourceCost = baseCosts.outsource[scale].initial + 
@@ -1144,7 +1492,95 @@
             const platformCost = baseCosts.platform[scale].initial + 
                                 (baseCosts.platform[scale].monthly * duration * multiplier);
 
-            // 결과 표시
+            document.getElementById('outsourceCost').textContent = `₩${Math.round(outsourceCost)}M`;
+            document.getElementById('inhouseCost').textContent = `₩${Math.round(inhouseCost)}M`;
+            document.getElementById('platformCost').textContent = `₩${Math.round(platformCost)}M`;
+            document.getElementById('results').style.display = 'block';
+
+            drawChart(duration, baseCosts[scale], multiplier);
+        }
+
+        // 차트 그리기 함수
+        function drawChart(duration, costs, multiplier) {
+            const ctx = document.getElementById('costChart').getContext('2d');
+            
+            if (costChart) {
+                costChart.destroy();
+            }
+
+            const months = Array.from({length: duration}, (_, i) => i + 1);
+            
+            costChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: months.map(m => `${m}개월`),
+                    datasets: [
+                        {
+                            label: '외주 용역',
+                            data: months.map(m => costs.outsource.initial + (costs.outsource.monthly * m * multiplier)),
+                            borderColor: '#764ba2',
+                            backgroundColor: 'rgba(118, 75, 162, 0.1)',
+                            tension: 0.4
+                        },
+                        {
+                            label: '자체 인력',
+                            data: months.map(m => costs.inhouse.initial + (costs.inhouse.monthly * m * multiplier)),
+                            borderColor: '#f5576c',
+                            backgroundColor: 'rgba(245, 87, 108, 0.1)',
+                            tension: 0.4
+                        },
+                        {
+                            label: '플랫폼 대여',
+                            data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
+                            borderColor: '#00f2fe',
+                            backgroundColor: 'rgba(0, 242, 254, 0.1)',
+                            tension: 0.4
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: '시간에 따른 누적 비용 추이',
+                            color: '#ffffff',
+                            font: {
+                                size: 16
+                            }
+                        },
+                        legend: {
+                            labels: {
+                                color: '#ffffff'
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#ffffff'
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: '#ffffff',
+                                callback: function(value) {
+                                    return '₩' + value + 'M';
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    </script> 표시
             document.getElementById('outsourceCost').textContent = `₩${Math.round(outsourceCost)}M`;
             document.getElementById('inhouseCost').textContent = `₩${Math.round(inhouseCost)}M`;
             document.getElementById('platformCost').textContent = `₩${Math.round(platformCost)}M`;