Update index.html

index.html

@@ -10,22 +10,51 @@
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-    </script>
-</body>
-</html>
+        }
 
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            color: #ffffff;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
+            position: relative;
             overflow-x: hidden;
         }
 
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            z-index: -2;
+        }
+
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(270deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
+            z-index: -1;
+            animation: gradientShift 10s ease infinite;
+        }
+
+        @keyframes gradientShift {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+
         .container {
             max-width: 1400px;
             margin: 0 auto;
             padding: 2rem;
+            color: #ffffff;
+            position: relative;
+            z-index: 1;
         }
 
         header {
@@ -185,12 +214,6 @@
             position: relative;
             overflow: hidden;
             user-select: none;
-            pointer-events: auto;
-        }
-
-        /* 중요: 하위 요소들이 클릭 이벤트를 방해하지 않도록 설정 */
-        .option-card * {
-            pointer-events: none;
         }
 
         .option-card.selected {
@@ -214,19 +237,18 @@
             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 {
             font-weight: 600;
             margin-bottom: 0.5rem;
+            pointer-events: none;
         }
 
         .option-details {
@@ -234,6 +256,11 @@
             justify-content: space-between;
             font-size: 0.9rem;
             color: #a8a8b3;
+            pointer-events: none;
+        }
+
+        .option-details span {
+            pointer-events: none;
         }
 
         .custom-result {
@@ -1190,57 +1217,69 @@
         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); // 디버깅용
+        window.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM loaded, setting up click handlers...'); // 디버깅용
             
-            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);
-                            }
+            // 이벤트 위임 방식으로 처리
+            document.addEventListener('click', function(e) {
+                // 클릭된 요소가 option-card이거나 그 하위 요소인지 확인
+                if (e.target.classList.contains('option-card')) {
+                    handleCardClick(e.target);
+                } else {
+                    // 부모 요소 중에 option-card가 있는지 확인
+                    let parent = e.target.parentElement;
+                    while (parent && parent !== document.body) {
+                        if (parent.classList.contains('option-card')) {
+                            handleCardClick(parent);
+                            break;
                         }
-                    } else {
-                        // 단일 선택
-                        document.querySelectorAll(`[data-category="${category}"]`).forEach(c => {
-                            c.classList.remove('selected');
-                        });
-                        
-                        this.classList.add('selected');
-                        selectedComponents[category] = id;
+                        parent = parent.parentElement;
                     }
-                    
-                    console.log('Selected components:', selectedComponents); // 디버깅용
-                });
+                }
             });
         });
 
+        // 카드 클릭 처리 함수
+        function handleCardClick(card) {
+            const category = card.dataset.category;
+            const id = card.dataset.id;
+            
+            console.log('Card clicked:', category, id); // 디버깅용
+            
+            if (!category || !id) {
+                console.error('Missing category or id');
+                return;
+            }
+            
+            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 => {
@@ -1513,3 +1552,6 @@
                 }
             });
         }
+    </script>
+</body>
+</html>