Update index.html

index.html

@@ -214,6 +214,12 @@
             position: relative;
             overflow: hidden;
             user-select: none;
+            z-index: 1;
+        }
+
+        .option-card * {
+            pointer-events: none;
+            user-select: none;
         }
 
         .option-card.selected {
@@ -1217,32 +1223,24 @@
         let currentPeriod = 3;
 
         // 페이지 로드 시 이벤트 리스너 등록
-        window.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM loaded, setting up click handlers...'); // 디버깅용
+        window.onload = function() {
+            console.log('Window loaded, setting up click handlers...'); // 디버깅용
             
-            // 이벤트 위임 방식으로 처리
-            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;
-                        }
-                        parent = parent.parentElement;
-                    }
-                }
-            });
-        });
+            // 모든 option-card에 onclick 직접 설정
+            const cards = document.getElementsByClassName('option-card');
+            console.log('Found cards:', cards.length); // 디버깅용
+            
+            for (let i = 0; i < cards.length; i++) {
+                cards[i].onclick = function() {
+                    handleCardClick(this);
+                };
+            }
+        };
 
         // 카드 클릭 처리 함수
         function handleCardClick(card) {
-            const category = card.dataset.category;
-            const id = card.dataset.id;
+            const category = card.getAttribute('data-category');
+            const id = card.getAttribute('data-id');
             
             console.log('Card clicked:', category, id); // 디버깅용
             
@@ -1253,24 +1251,25 @@
             
             if (category === 'service' || category === 'additional') {
                 // 복수 선택 가능
-                card.classList.toggle('selected');
-                
                 if (card.classList.contains('selected')) {
-                    if (!selectedComponents[category].includes(id)) {
-                        selectedComponents[category].push(id);
-                    }
-                } else {
+                    card.classList.remove('selected');
                     const index = selectedComponents[category].indexOf(id);
                     if (index > -1) {
                         selectedComponents[category].splice(index, 1);
                     }
+                } else {
+                    card.classList.add('selected');
+                    if (!selectedComponents[category].includes(id)) {
+                        selectedComponents[category].push(id);
+                    }
                 }
             } else {
                 // 단일 선택
                 // 같은 카테고리의 다른 카드들의 선택 해제
-                document.querySelectorAll(`[data-category="${category}"]`).forEach(c => {
-                    c.classList.remove('selected');
-                });
+                const sameCategory = document.querySelectorAll(`[data-category="${category}"]`);
+                for (let i = 0; i < sameCategory.length; i++) {
+                    sameCategory[i].classList.remove('selected');
+                }
                 
                 // 현재 카드 선택
                 card.classList.add('selected');