Update index.html

index.html

@@ -10,7 +10,9 @@
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-        }
+    </script>
+</body>
+</html>
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -101,197 +103,12 @@
             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;
@@ -311,34 +128,6 @@
             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;
@@ -396,6 +185,12 @@
             position: relative;
             overflow: hidden;
             user-select: none;
+            pointer-events: auto;
+        }
+
+        /* 중요: 하위 요소들이 클릭 이벤트를 방해하지 않도록 설정 */
+        .option-card * {
+            pointer-events: none;
         }
 
         .option-card.selected {
@@ -419,12 +214,14 @@
             align-items: center;
             justify-content: center;
             font-weight: bold;
+            pointer-events: none;
         }
 
         .option-card:hover:not(.selected) {
             border-color: #00d2ff;
             background: rgba(255, 255, 255, 0.1);
             transform: translateY(-2px);
+            z-index: 10;
         }
 
         .option-name {
@@ -458,27 +255,6 @@
             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));
@@ -618,14 +394,6 @@
                 font-size: 2rem;
             }
             
-            .methods-grid {
-                grid-template-columns: 1fr;
-            }
-            
-            .pros-cons {
-                grid-template-columns: 1fr;
-            }
-
             .tabs {
                 flex-direction: column;
             }
@@ -1392,360 +1160,356 @@
                                     <span id="platformTotal">$0K</span>
                                 </div>
                             </div>
+                        </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.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, registering click events...'); // 디버깅용
+            
+            // 모든 옵션 카드에 직접 이벤트 리스너 추가
+            const optionCards = document.querySelectorAll('.option-card');
+            console.log('Found option cards:', optionCards.length); // 디버깅용
+            
+            optionCards.forEach(card => {
+                card.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    
+                    const category = this.dataset.category;
+                    const id = this.dataset.id;
+                    
+                    console.log('Card clicked:', category, id); // 디버깅용
+                    
+                    if (!category || !id) {
+                        console.error('Missing category or id:', category, id);
+                        return;
+                    }
+                    
+                    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;
+                    }
+                    
+                    console.log('Selected components:', selectedComponents); // 디버깅용
+                });
+            });
+        });
 
+        // 탭 전환 함수
+        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');
+        }
 
-</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.addEventListener('DOMContentLoaded', function() {
-           console.log('DOM loaded, registering click events...'); // 디버깅용
-           
-           // 옵션 카드 클릭 이벤트 - 이벤트 위임 방식으로 변경
-           document.body.addEventListener('click', function(e) {
-               // option-card 또는 그 하위 요소를 클릭했는지 확인
-               const card = e.target.closest('.option-card');
-               if (!card) return;
-               
-               e.preventDefault();
-               e.stopPropagation();
-               
-               const category = card.dataset.category;
-               const id = card.dataset.id;
-               
-               console.log('Card clicked:', category, id); // 디버깅용
-               
-               if (category === 'service' || category === 'additional') {
-                   // 복수 선택 가능
-                   card.classList.toggle('selected');
-                   
-                   if (card.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');
-                   });
-                   
-                   card.classList.add('selected');
-                   selectedComponents[category] = id;
-               }
-               
-               console.log('Selected components:', selectedComponents); // 디버깅용
-           });
-       });
-
-
-
-       // 탭 전환 함수
-       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-category="service"][data-id="${serviceId}"]`);
-        if (!card) return;
-        
-        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]}"]`);
-            if (!card) return;
+        // 커스텀 비용 계산 함수
+        function calculateCustomCost() {
+            let totalInitialCost = 0;
+            let totalResourceCost = 0;
+            let maxTime = 0;
+            let componentDetails = [];
+            
+            // 서비스 비용 계산
+            selectedComponents.service.forEach(serviceId => {
+                const card = document.querySelector(`[data-category="service"][data-id="${serviceId}"]`);
+                if (!card) return;
+                
+                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]}"]`);
+                    if (!card) return;
+                    
+                    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]}"]`);
+                if (card) {
+                    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}"]`);
+                if (!card) return;
+                
+                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);
             
-            const cost = parseFloat(card.dataset.cost);
-            const time = parseFloat(card.dataset.time);
-            const name = card.querySelector('.option-name').textContent;
+            // 선택한 구성 요소 목록 표시
+            displayComponentList(componentDetails);
             
-            totalInitialCost += cost;
-            maxTime = Math.max(maxTime, time);
+            // 구축 방식별 비교
+            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 = '';
             
-            componentDetails.push({
-                name: name,
-                cost: cost,
-                type: category
+            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);
             });
         }
-    });
-    
-    // 지원 서비스 (월간 비용)
-    let monthlySupport = 0;
-    if (selectedComponents.support) {
-        const card = document.querySelector(`[data-category="support"][data-id="${selectedComponents.support]}"]`);
-        if (card) {
-            monthlySupport = parseFloat(card.dataset.cost);
-            const name = card.querySelector('.option-name').textContent;
+
+        // 구축 방식별 비교
+        function compareBuilderMethods(initialCost, monthlyCost, devTime) {
+            // 외주 용역 개발
+            const outsourceInitial = initialCost;
+            const outsourceMonthly = monthlyCost;
+            const outsourceTotal = outsourceInitial + (outsourceMonthly * currentPeriod);
             
-            componentDetails.push({
-                name: name,
-                cost: monthlySupport,
-                type: 'monthly'
+            // 자체 인력 개발
+            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';
+                                }
+                            }
+                        }
+                    }
+                }
             });
         }
-    }
-    
-    // 추가 기능 비용 계산
-    selectedComponents.additional.forEach(additionalId => {
-        const card = document.querySelector(`[data-category="additional"][data-id="${additionalId}"]`);
-        if (!card) return;
-        
-        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>