\uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n }\n\n h1 {\n color: white;\n text-align: center;\n margin-bottom: 30px;\n font-size: 2rem;\n text-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n \/* \ub0a0\uc9dc \uce74\ub4dc \uc2a4\ud0c0\uc77c *\/\n .date-card {\n background: white;\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n animation: fadeInUp 0.4s ease;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .date-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n padding-bottom: 15px;\n border-bottom: 2px solid #f0f0f0;\n }\n\n .date-title {\n font-size: 1.3rem;\n font-weight: 600;\n color: #333;\n }\n\n .delete-date-btn {\n background: #ff4757;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: all 0.3s;\n }\n\n .delete-date-btn:hover {\n background: #ff3838;\n transform: scale(1.05);\n }\n\n \/* \uc77c\uc815 \uce74\ub4dc \uc2a4\ud0c0\uc77c *\/\n .schedule-item {\n display: flex;\n align-items: center;\n padding: 12px;\n margin-bottom: 10px;\n background: #f8f9fa;\n border-radius: 12px;\n transition: all 0.3s;\n position: relative;\n }\n\n .schedule-item:hover {\n background: #e9ecef;\n transform: translateX(5px);\n }\n\n \/* \uc2dc\uac04 \uc120\ud0dd \ud720\uc774 \uc5f4\ub838\uc744 \ub54c \uc77c\uc815 \uce74\ub4dc\uc758 z-index \uc870\uc815 *\/\n .schedule-item:has(.time-container:hover) {\n z-index: 999;\n overflow: visible;\n }\n\n \/* \uc2dc\uac04 \ud45c\uc2dc\/\uc120\ud0dd \uc601\uc5ed *\/\n .time-container {\n width: 140px;\n height: 40px;\n position: relative;\n z-index: 10;\n }\n\n .time-container:hover {\n z-index: 1000;\n }\n\n .time-display {\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: #667eea;\n cursor: pointer;\n background: white;\n border: 2px solid #667eea;\n border-radius: 8px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .time-picker-wrapper {\n width: 140px;\n height: 40px;\n background: white;\n border: 2px solid #667eea;\n border-radius: 8px;\n overflow: hidden;\n position: relative;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .time-container:hover .time-picker-wrapper {\n height: 240px;\n border-radius: 12px;\n box-shadow: 0 15px 40px rgba(0,0,0,0.25);\n transform: translateY(-100px);\n position: relative;\n z-index: 9999;\n }\n\n .time-container:hover .time-display {\n opacity: 0;\n transform: scale(0.9);\n pointer-events: none;\n }\n\n .time-picker-expanded {\n width: 100%;\n height: 240px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n transition: opacity 0.3s ease 0.1s;\n pointer-events: none;\n z-index: 9999;\n }\n\n .time-container:hover .time-picker-expanded {\n opacity: 1;\n pointer-events: auto;\n }\n\n .time-picker-column {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n scroll-snap-type: y mandatory;\n scroll-behavior: smooth;\n position: relative;\n }\n\n .time-picker-column::-webkit-scrollbar {\n width: 0;\n }\n\n \/* \uac00\uc6b4\ub370 \ud558\uc774\ub77c\uc774\ud2b8 \uc601\uc5ed \ud45c\uc2dc *\/\n .time-picker-column::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 40px;\n transform: translateY(-50%);\n background: linear-gradient(to bottom, \n transparent, \n rgba(102, 126, 234, 0.1) 20%, \n rgba(102, 126, 234, 0.1) 80%, \n transparent);\n pointer-events: none;\n z-index: 1;\n }\n\n \/* \uc120\ud0dd \uc911\uc2ec\uc120 \uc778\ub514\ucf00\uc774\ud130 *\/\n .time-picker-column::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 10px;\n right: 10px;\n height: 2px;\n transform: translateY(-50%);\n background: linear-gradient(90deg, \n transparent, \n rgba(102, 126, 234, 0.3) 20%, \n rgba(102, 126, 234, 0.3) 80%, \n transparent);\n pointer-events: none;\n z-index: 2;\n }\n\n .time-picker-item {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: center;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 500;\n color: #666;\n transition: all 0.2s;\n position: relative;\n padding: 0 10px;\n white-space: nowrap;\n opacity: 0.6;\n transform: scale(0.9);\n }\n\n .time-picker-item:hover {\n background: rgba(102, 126, 234, 0.08);\n opacity: 0.8;\n transform: scale(0.95);\n }\n\n .time-picker-item.preview {\n color: #8b9cef;\n font-weight: 600;\n opacity: 0.9;\n transform: scale(0.95);\n background: rgba(102, 126, 234, 0.03);\n }\n\n .time-picker-item.active {\n color: #667eea;\n font-weight: 700;\n font-size: 0.9rem;\n opacity: 1;\n transform: scale(1);\n background: rgba(102, 126, 234, 0.1);\n }\n\n .time-picker-item.current {\n background: rgba(102, 126, 234, 0.1);\n }\n\n .time-picker-item .time-diff {\n font-size: 0.75rem;\n opacity: 0.8;\n margin-right: 5px;\n }\n\n .time-picker-item.spacer {\n height: 100px;\n pointer-events: none;\n }\n\n \/* \ud398\uc774\ub4dc \ud6a8\uacfc *\/\n .time-picker-wrapper::before,\n .time-picker-wrapper::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n height: 40px;\n pointer-events: none;\n z-index: 10;\n opacity: 0;\n transition: opacity 0.3s ease 0.2s;\n }\n\n .time-picker-wrapper::before {\n top: 0;\n background: linear-gradient(to bottom, white 0%, transparent 100%);\n }\n\n .time-picker-wrapper::after {\n bottom: 0;\n background: linear-gradient(to top, white 0%, transparent 100%);\n }\n\n .time-container:hover .time-picker-wrapper::before,\n .time-container:hover .time-picker-wrapper::after {\n opacity: 1;\n }\n\n .schedule-title {\n flex: 1;\n padding: 0 15px;\n font-size: 1rem;\n color: #333;\n border: none;\n background: transparent;\n outline: none;\n }\n\n .schedule-title:focus {\n background: white;\n padding: 8px 15px;\n border-radius: 8px;\n }\n\n .delete-schedule-btn {\n background: #ff6b6b;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 6px;\n cursor: pointer;\n opacity: 0;\n transition: all 0.3s;\n font-size: 0.85rem;\n }\n\n .schedule-item:hover .delete-schedule-btn {\n opacity: 1;\n }\n\n .delete-schedule-btn:hover {\n background: #ff5252;\n transform: scale(1.1);\n }\n\n \/* \ucd94\uac00 \ubc84\ud2bc \uc2a4\ud0c0\uc77c *\/\n .add-btn {\n width: 100%;\n padding: 12px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 500;\n transition: all 0.3s;\n margin-top: 10px;\n position: relative;\n overflow: hidden;\n }\n\n .add-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n\n .add-btn:active {\n transform: translateY(0);\n }\n\n \/* \ube60\ub978 \ucd94\uac00 \ud6a8\uacfc *\/\n .add-btn::after {\n content: '\u2193 \ub2e4\uc74c \ub0a0\uc9dc \uc790\ub3d9 \ucd94\uac00';\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n padding: 12px;\n background: linear-gradient(135deg, #48c774 0%, #3ec46d 100%);\n transition: top 0.3s;\n font-size: 0.9rem;\n }\n\n .add-btn.has-dates::after {\n display: block;\n }\n\n .add-btn:not(.has-dates)::after {\n display: none;\n }\n\n .add-btn.has-dates:hover::after {\n top: 0;\n }\n\n .add-schedule-btn {\n background: linear-gradient(135deg, #48c774 0%, #3ec46d 100%);\n margin-top: 5px;\n opacity: 0;\n transition: all 0.3s;\n }\n\n .date-card:hover .add-schedule-btn {\n opacity: 1;\n }\n\n \/* \ubaa8\ub2ec \uc2a4\ud0c0\uc77c *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 1000;\n animation: fadeIn 0.3s;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .modal-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n animation: slideUp 0.3s;\n }\n\n @keyframes slideUp {\n from {\n transform: translate(-50%, -40%);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n }\n\n .modal-header {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 20px;\n color: #333;\n text-align: center;\n }\n\n \/* \ud720 \ud53c\ucee4 \uc2a4\ud0c0\uc77c *\/\n .picker-container {\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-bottom: 25px;\n }\n\n .picker-column {\n width: 80px;\n height: 200px;\n overflow-y: auto;\n scroll-snap-type: y mandatory;\n scroll-behavior: smooth;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n background: #f8f9fa;\n position: relative;\n }\n\n .picker-column::-webkit-scrollbar {\n width: 0;\n }\n\n \/* \uac00\uc6b4\ub370 \ud558\uc774\ub77c\uc774\ud2b8 \uc601\uc5ed *\/\n .picker-column::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 40px;\n transform: translateY(-50%);\n background: linear-gradient(to bottom, \n transparent, \n rgba(102, 126, 234, 0.15) 20%, \n rgba(102, 126, 234, 0.15) 80%, \n transparent);\n pointer-events: none;\n z-index: 1;\n border-radius: 8px;\n }\n\n .picker-item {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: center;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 500;\n color: #666;\n position: relative;\n }\n\n .picker-item:hover {\n background: rgba(102, 126, 234, 0.05);\n }\n\n .picker-item.active {\n color: #667eea;\n font-weight: 700;\n font-size: 1.1rem;\n }\n\n .picker-label {\n text-align: center;\n font-size: 0.9rem;\n color: #666;\n margin-bottom: 5px;\n }\n\n .modal-buttons {\n display: flex;\n gap: 10px;\n justify-content: center;\n }\n\n .modal-btn {\n padding: 10px 30px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 500;\n transition: all 0.3s;\n }\n\n .confirm-btn {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n\n .confirm-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n\n .cancel-btn {\n background: #e0e0e0;\n color: #333;\n }\n\n .cancel-btn:hover {\n background: #d0d0d0;\n }\n\n \/* \ucd08\uae30 \uc0c1\ud0dc *\/\n .empty-state {\n text-align: center;\n color: white;\n padding: 40px;\n }\n\n .empty-state h2 {\n font-size: 1.5rem;\n margin-bottom: 10px;\n }\n\n .empty-state p {\n opacity: 0.9;\n margin-bottom: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\ud83d\uddd3\ufe0f \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac<\/h1>\n \n <div id=\"dateCards\"><\/div>\n \n <div class=\"empty-state\" id=\"emptyState\">\n <h2>\uc5ec\ud589 \uc77c\uc815\uc744 \ucd94\uac00\ud574\ubcf4\uc138\uc694!<\/h2>\n <p>\uc544\ub798 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \ub0a0\uc9dc\ub97c \ucd94\uac00\ud558\uace0 \uc77c\uc815\uc744 \uad00\ub9ac\ud558\uc138\uc694.<\/p>\n <\/div>\n \n <button class=\"add-btn\" onclick=\"handleAddDate()\">+ \uc0c8 \ub0a0\uc9dc \ucd94\uac00<\/button>\n <\/div>\n\n \n <div id=\"dateModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\ub0a0\uc9dc \uc120\ud0dd<\/div>\n \n <div class=\"picker-container\">\n <div>\n <div class=\"picker-label\">\ub144<\/div>\n <div class=\"picker-column\" id=\"yearPicker\"><\/div>\n <\/div>\n <div>\n <div class=\"picker-label\">\uc6d4<\/div>\n <div class=\"picker-column\" id=\"monthPicker\"><\/div>\n <\/div>\n <div>\n <div class=\"picker-label\">\uc77c<\/div>\n <div class=\"picker-column\" id=\"dayPicker\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"modal-buttons\">\n <button class=\"modal-btn confirm-btn\" onclick=\"confirmDate()\">\ud655\uc778<\/button>\n <button class=\"modal-btn cancel-btn\" onclick=\"closeDateModal()\">\ucde8\uc18c<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let dates = [];\n let lastScheduleTime = { hour: 9, minute: 0 };\n let scheduleCounter = 0;\n\n \/\/ \ucd08\uae30\ud654\n function init() {\n updateEmptyState();\n }\n\n \/\/ \ub144\ub3c4 \ud53c\ucee4 \ucd08\uae30\ud654\n function initYearPicker() {\n const yearPicker = document.getElementById('yearPicker');\n yearPicker.innerHTML = '';\n const currentYear = new Date().getFullYear();\n \n \/\/ \uc0c1\ub2e8 \uc5ec\ubc31\n for (let i = 0; i < 3; i++) {\n yearPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n for (let year = currentYear - 2; year <= currentYear + 10; year++) {\n const item = document.createElement('div');\n item.className = 'picker-item';\n item.textContent = year;\n item.dataset.value = year;\n if (year === currentYear) item.classList.add('active');\n yearPicker.appendChild(item);\n }\n \n \/\/ \ud558\ub2e8 \uc5ec\ubc31\n for (let i = 0; i < 3; i++) {\n yearPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n \/\/ \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 \uc124\uc815\n setupPickerScroll(yearPicker);\n \n \/\/ \ud604\uc7ac \ub144\ub3c4\ub85c \uc2a4\ud06c\ub864\n setTimeout(() => {\n const active = yearPicker.querySelector('.active');\n if (active) {\n active.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n }, 50);\n }\n\n \/\/ \uc6d4 \ud53c\ucee4 \ucd08\uae30\ud654\n function initMonthPicker() {\n const monthPicker = document.getElementById('monthPicker');\n monthPicker.innerHTML = '';\n const currentMonth = new Date().getMonth() + 1;\n \n for (let i = 0; i < 3; i++) {\n monthPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n for (let month = 1; month <= 12; month++) {\n const item = document.createElement('div');\n item.className = 'picker-item';\n item.textContent = month + '\uc6d4';\n item.dataset.value = month;\n if (month === currentMonth) item.classList.add('active');\n monthPicker.appendChild(item);\n }\n \n for (let i = 0; i < 3; i++) {\n monthPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n setupPickerScroll(monthPicker);\n \n setTimeout(() => {\n const active = monthPicker.querySelector('.active');\n if (active) {\n active.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n }, 50);\n }\n\n \/\/ \uc77c \ud53c\ucee4 \ucd08\uae30\ud654\n function initDayPicker() {\n const dayPicker = document.getElementById('dayPicker');\n dayPicker.innerHTML = '';\n const currentDay = new Date().getDate();\n \n for (let i = 0; i < 3; i++) {\n dayPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n for (let day = 1; day <= 31; day++) {\n const item = document.createElement('div');\n item.className = 'picker-item';\n item.textContent = day + '\uc77c';\n item.dataset.value = day;\n if (day === currentDay) item.classList.add('active');\n dayPicker.appendChild(item);\n }\n \n for (let i = 0; i < 3; i++) {\n dayPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n setupPickerScroll(dayPicker);\n \n setTimeout(() => {\n const active = dayPicker.querySelector('.active');\n if (active) {\n active.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n }, 50);\n }\n\n \/\/ \ud53c\ucee4 \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 \uc124\uc815\n function setupPickerScroll(picker) {\n let scrollTimer;\n \n picker.addEventListener('scroll', function() {\n clearTimeout(scrollTimer);\n scrollTimer = setTimeout(() => {\n updateActiveItem(picker);\n }, 50);\n });\n \n \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8\n picker.querySelectorAll('.picker-item:not(.spacer)').forEach(item => {\n item.addEventListener('click', function() {\n this.scrollIntoView({ block: 'center', behavior: 'smooth' });\n });\n });\n }\n\n \/\/ \uac00\uc6b4\ub370 \uc704\uce58\ud55c \uc544\uc774\ud15c \ud65c\uc131\ud654\n function updateActiveItem(picker) {\n const items = picker.querySelectorAll('.picker-item:not(.spacer)');\n const containerRect = picker.getBoundingClientRect();\n const center = containerRect.top + containerRect.height \/ 2;\n \n let closest = null;\n let minDistance = Infinity;\n \n items.forEach(item => {\n const rect = item.getBoundingClientRect();\n const itemCenter = rect.top + rect.height \/ 2;\n const distance = Math.abs(center - itemCenter);\n \n if (distance < minDistance) {\n minDistance = distance;\n closest = item;\n }\n });\n \n if (closest) {\n items.forEach(item => item.classList.remove('active'));\n closest.classList.add('active');\n }\n }\n\n \/\/ \ub0a0\uc9dc \ubaa8\ub2ec \uc5f4\uae30\n function openDateModal() {\n document.getElementById('dateModal').style.display = 'block';\n initYearPicker();\n initMonthPicker();\n initDayPicker();\n }\n\n \/\/ \ub0a0\uc9dc \ubaa8\ub2ec \ub2eb\uae30\n function closeDateModal() {\n document.getElementById('dateModal').style.display = 'none';\n }\n\n \/\/ \ub0a0\uc9dc \ud655\uc778\n function confirmDate() {\n const year = document.querySelector('#yearPicker .active')?.dataset.value;\n const month = document.querySelector('#monthPicker .active')?.dataset.value;\n const day = document.querySelector('#dayPicker .active')?.dataset.value;\n \n if (year && month && day) {\n \/\/ \uc911\ubcf5 \ub0a0\uc9dc \uccb4\ud06c\n const isDuplicate = dates.some(date => \n date.year === parseInt(year) && \n date.month === parseInt(month) && \n date.day === parseInt(day)\n );\n \n if (isDuplicate) {\n alert('\uc774\ubbf8 \ub4f1\ub85d\ub41c \ub0a0\uc9dc\uc785\ub2c8\ub2e4.');\n return;\n }\n \n addDateCard(year, month, day);\n closeDateModal();\n }\n }\n\n \/\/ \ub0a0\uc9dc \uce74\ub4dc \ucd94\uac00\n function addDateCard(year, month, day) {\n const dateId = `date-${Date.now()}`;\n const date = {\n id: dateId,\n year: parseInt(year),\n month: parseInt(month),\n day: parseInt(day),\n schedules: []\n };\n \n dates.push(date);\n \n \/\/ \ub0a0\uc9dc\uc21c\uc73c\ub85c \uc815\ub82c\n sortDates();\n \n \/\/ \ubaa8\ub4e0 \ub0a0\uc9dc \uce74\ub4dc \uc7ac\ub80c\ub354\ub9c1\n renderAllDateCards();\n \n \/\/ \uc0c8\ub85c \ucd94\uac00\ub41c \ub0a0\uc9dc \uce74\ub4dc\ub85c \uc2a4\ud06c\ub864\n setTimeout(() => {\n const newCard = document.getElementById(dateId);\n if (newCard) {\n newCard.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }, 100);\n \n \/\/ \uccab \uc77c\uc815 \uc790\ub3d9 \ucd94\uac00\n const addedDate = dates.find(d => d.id === dateId);\n if (addedDate && addedDate.schedules.length === 0) {\n \/\/ \uccab \uc77c\uc815\uc740 \uc624\uc804 9\uc2dc\ub85c \uc124\uc815\n lastScheduleTime = { hour: 8, minute: 0 };\n addSchedule(dateId);\n }\n }\n\n \/\/ \ub0a0\uc9dc \uc815\ub82c\n function sortDates() {\n dates.sort((a, b) => {\n \/\/ \ub144\ub3c4 \ube44\uad50\n if (a.year !== b.year) return a.year - b.year;\n \/\/ \uc6d4 \ube44\uad50\n if (a.month !== b.month) return a.month - b.month;\n \/\/ \uc77c \ube44\uad50\n return a.day - b.day;\n });\n }\n\n \/\/ \ubaa8\ub4e0 \ub0a0\uc9dc \uce74\ub4dc \ub80c\ub354\ub9c1\n function renderAllDateCards() {\n const dateCards = document.getElementById('dateCards');\n dateCards.innerHTML = '';\n \n dates.forEach(date => {\n const card = document.createElement('div');\n card.className = 'date-card';\n card.id = date.id;\n card.innerHTML = `\n <div class=\"date-header\">\n <div class=\"date-title\">${date.year}\ub144 ${date.month}\uc6d4 ${date.day}\uc77c<\/div>\n <button class=\"delete-date-btn\" onclick=\"deleteDate('${date.id}')\">\uc0ad\uc81c<\/button>\n <\/div>\n <div class=\"schedules\" id=\"schedules-${date.id}\"><\/div>\n <button class=\"add-btn add-schedule-btn\" onclick=\"addSchedule('${date.id}')\">+ \uc77c\uc815 \ucd94\uac00<\/button>\n `;\n \n dateCards.appendChild(card);\n \n \/\/ \uac01 \ub0a0\uc9dc\uc758 \uc77c\uc815\ub4e4 \ub80c\ub354\ub9c1\n if (date.schedules.length > 0) {\n renderSchedules(date.id);\n }\n });\n \n updateEmptyState();\n }\n\n \/\/ \ub0a0\uc9dc \uc0ad\uc81c\n function deleteDate(dateId) {\n if (confirm('\uc774 \ub0a0\uc9dc\uc758 \ubaa8\ub4e0 \uc77c\uc815\uc774 \uc0ad\uc81c\ub429\ub2c8\ub2e4. \uacc4\uc18d\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) {\n dates = dates.filter(d => d.id !== dateId);\n document.getElementById(dateId).remove();\n updateEmptyState();\n }\n }\n\n \/\/ \uc2dc\uac04\uc744 AM\/PM \ud615\uc2dd\uc73c\ub85c \ubcc0\ud658\n function formatTime(hour, minute) {\n const period = hour >= 12 ? 'PM' : 'AM';\n const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;\n return `${displayHour}:${String(minute).padStart(2, '0')} ${period}`;\n }\n\n \/\/ \uc2dc\uac04 \ud53c\ucee4 \uc0dd\uc131\n function createTimePicker(hour, minute) {\n const pickerId = `picker-${++scheduleCounter}`;\n \n \/\/ \uc2dc\uac04 \uc635\uc158 \uc0dd\uc131 (15\ubd84 \uac04\uaca9, \u00b112\uc2dc\uac04)\n let timeOptions = [];\n const currentMinutes = hour * 60 + minute;\n \n \/\/ -12\uc2dc\uac04\ubd80\ud130 +12\uc2dc\uac04\uae4c\uc9c0 15\ubd84 \uac04\uaca9\n for (let diff = -720; diff <= 720; diff += 15) {\n const totalMinutes = currentMinutes + diff;\n if (totalMinutes >= 0 && totalMinutes < 1440) { \/\/ 0:00 ~ 23:59 \ubc94\uc704\n const h = Math.floor(totalMinutes \/ 60);\n const m = totalMinutes % 60;\n \n let label = '';\n if (diff < 0) {\n const hours = Math.abs(Math.floor(diff \/ 60));\n const mins = Math.abs(diff % 60);\n if (hours > 0 && mins > 0) {\n label = `-${hours}\uc2dc\uac04 ${mins}\ubd84`;\n } else if (hours > 0) {\n label = `-${hours}\uc2dc\uac04`;\n } else {\n label = `-${mins}\ubd84`;\n }\n } else if (diff > 0) {\n const hours = Math.floor(diff \/ 60);\n const mins = diff % 60;\n if (hours > 0 && mins > 0) {\n label = `+${hours}\uc2dc\uac04 ${mins}\ubd84`;\n } else if (hours > 0) {\n label = `+${hours}\uc2dc\uac04`;\n } else {\n label = `+${mins}\ubd84`;\n }\n } else {\n label = '\ud604\uc7ac';\n }\n \n timeOptions.push({\n hour: h,\n minute: m,\n diff: diff,\n label: label,\n time: formatTime(h, m)\n });\n }\n }\n \n \/\/ HTML \uc0dd\uc131\n let optionsHTML = '<div class=\"time-picker-item spacer\"> <\/div>';\n \n timeOptions.forEach(option => {\n const isActive = option.diff === 0;\n const isCurrent = option.diff === 0;\n optionsHTML += `\n <div class=\"time-picker-item ${isActive ? 'active' : ''} ${isCurrent ? 'current' : ''}\" \n data-hour=\"${option.hour}\" \n data-minute=\"${option.minute}\">\n <span class=\"time-diff\">${option.label}<\/span>\n <span>${option.time}<\/span>\n <\/div>\n `;\n });\n \n optionsHTML += '<div class=\"time-picker-item spacer\"> <\/div>';\n \n return {\n displayHTML: `<div class=\"time-display\" id=\"display-${pickerId}\">${formatTime(hour, minute)}<\/div>`,\n pickerHTML: `\n <div class=\"time-picker-wrapper\">\n <div class=\"time-picker-expanded\" id=\"picker-${pickerId}\">\n <div class=\"time-picker-column\" id=\"time-${pickerId}\">\n ${optionsHTML}\n <\/div>\n <\/div>\n <\/div>\n `,\n pickerId: pickerId\n };\n }\n\n \/\/ \uc77c\uc815 \ucd94\uac00\n function addSchedule(dateId) {\n const date = dates.find(d => d.id === dateId);\n if (!date) return;\n \n const scheduleId = `schedule-${Date.now()}`;\n \n \/\/ \ub2e4\uc74c \uc2dc\uac04 \uacc4\uc0b0\n let nextHour = lastScheduleTime.hour + 1;\n let nextMinute = lastScheduleTime.minute;\n \n if (nextHour > 23) {\n nextHour = 9;\n nextMinute = 0;\n }\n \n const schedule = {\n id: scheduleId,\n title: '\uc0c8 \uc77c\uc815',\n hour: nextHour,\n minute: nextMinute\n };\n \n date.schedules.push(schedule);\n lastScheduleTime = { hour: nextHour, minute: nextMinute };\n \n \/\/ \uc2dc\uac04 \uc21c\uc73c\ub85c \uc815\ub82c\n sortSchedules(date);\n \n \/\/ \ubaa8\ub4e0 \uc77c\uc815 \ub2e4\uc2dc \ub80c\ub354\ub9c1\n renderSchedules(dateId);\n }\n\n \/\/ \uc77c\uc815 \uc815\ub82c\n function sortSchedules(date) {\n date.schedules.sort((a, b) => {\n const timeA = a.hour * 60 + a.minute;\n const timeB = b.hour * 60 + b.minute;\n return timeA - timeB;\n });\n }\n\n \/\/ \uc77c\uc815 \ub80c\ub354\ub9c1\n function renderSchedules(dateId) {\n const date = dates.find(d => d.id === dateId);\n if (!date) return;\n \n const schedulesContainer = document.getElementById(`schedules-${dateId}`);\n schedulesContainer.innerHTML = '';\n \n date.schedules.forEach(schedule => {\n const picker = createTimePicker(schedule.hour, schedule.minute);\n \n const scheduleItem = document.createElement('div');\n scheduleItem.className = 'schedule-item';\n scheduleItem.id = schedule.id;\n scheduleItem.innerHTML = `\n <div class=\"time-container\" data-schedule-id=\"${schedule.id}\" data-date-id=\"${dateId}\">\n ${picker.displayHTML}\n ${picker.pickerHTML}\n <\/div>\n <input type=\"text\" class=\"schedule-title\" value=\"${schedule.title}\" \n onchange=\"updateScheduleTitle('${dateId}', '${schedule.id}', this.value)\"\n placeholder=\"\uc77c\uc815 \uc81c\ubaa9\uc744 \uc785\ub825\ud558\uc138\uc694\">\n <button class=\"delete-schedule-btn\" onclick=\"deleteSchedule('${dateId}', '${schedule.id}')\">\uc0ad\uc81c<\/button>\n `;\n \n schedulesContainer.appendChild(scheduleItem);\n \n \/\/ \uc2dc\uac04 \ud53c\ucee4 \uc774\ubca4\ud2b8 \uc124\uc815\n setTimeout(() => {\n setupTimePickerEvents(scheduleItem, dateId, schedule.id, picker.pickerId);\n }, 10);\n });\n }\n\n \/\/ \uc2dc\uac04 \ud53c\ucee4 \uc774\ubca4\ud2b8 \uc124\uc815 (\uc218\uc815)\n function setupTimePickerEvents(scheduleItem, dateId, scheduleId, pickerId) {\n const timeColumn = scheduleItem.querySelector(`#time-${pickerId}`);\n const display = scheduleItem.querySelector(`#display-${pickerId}`);\n \n \/\/ \ucd08\uae30 \uc2a4\ud06c\ub864 \uc704\uce58 (\ud604\uc7ac \uc2dc\uac04\uc73c\ub85c)\n const currentItem = timeColumn.querySelector('.current');\n if (currentItem) {\n currentItem.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n \n \/\/ \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 - \ubbf8\ub9ac\ubcf4\uae30\ub9cc \ud45c\uc2dc\n let scrollTimer;\n \n timeColumn.addEventListener('scroll', function() {\n clearTimeout(scrollTimer);\n scrollTimer = setTimeout(() => {\n updatePreviewItem(timeColumn);\n }, 50);\n });\n \n \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8 - \uc2e4\uc81c \uc120\ud0dd \ubc0f \uc800\uc7a5\n timeColumn.querySelectorAll('.time-picker-item:not(.spacer)').forEach(item => {\n item.addEventListener('click', function(e) {\n e.stopPropagation();\n \n \/\/ \ubaa8\ub4e0 \uc544\uc774\ud15c\uc5d0\uc11c active \uc81c\uac70\n timeColumn.querySelectorAll('.time-picker-item').forEach(el => {\n el.classList.remove('active');\n el.classList.remove('current');\n });\n \n \/\/ \ud074\ub9ad\ud55c \uc544\uc774\ud15c active \uc124\uc815\n this.classList.add('active');\n this.classList.add('current');\n \n \/\/ \uc2dc\uac04 \uc5c5\ub370\uc774\ud2b8\n const hour = parseInt(this.dataset.hour);\n const minute = parseInt(this.dataset.minute);\n \n display.textContent = formatTime(hour, minute);\n \n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\n const date = dates.find(d => d.id === dateId);\n if (date) {\n const sched = date.schedules.find(s => s.id === scheduleId);\n if (sched) {\n sched.hour = hour;\n sched.minute = minute;\n lastScheduleTime = { hour, minute };\n \n \/\/ \uc2dc\uac04 \ubcc0\uacbd \ud6c4 \uc815\ub82c \ubc0f \uc7ac\ub80c\ub354\ub9c1\n sortSchedules(date);\n renderSchedules(dateId);\n }\n }\n \n \/\/ \ud074\ub9ad\ud55c \uc544\uc774\ud15c\uc73c\ub85c \uc2a4\ud06c\ub864\n this.scrollIntoView({ block: 'center', behavior: 'smooth' });\n });\n });\n }\n\n \/\/ \uc2a4\ud06c\ub864 \uc2dc \ubbf8\ub9ac\ubcf4\uae30 \uc544\uc774\ud15c \ud45c\uc2dc (\uc800\uc7a5\ud558\uc9c0 \uc54a\uc74c)\n function updatePreviewItem(column) {\n const items = column.querySelectorAll('.time-picker-item:not(.spacer)');\n const containerRect = column.getBoundingClientRect();\n const center = containerRect.top + containerRect.height \/ 2;\n \n let closest = null;\n let minDistance = Infinity;\n \n items.forEach(item => {\n const rect = item.getBoundingClientRect();\n const itemCenter = rect.top + rect.height \/ 2;\n const distance = Math.abs(center - itemCenter);\n \n if (distance < minDistance) {\n minDistance = distance;\n closest = item;\n }\n });\n \n if (closest) {\n \/\/ preview \ud074\ub798\uc2a4\ub9cc \uc801\uc6a9 (active\ub294 \uc801\uc6a9\ud558\uc9c0 \uc54a\uc74c)\n items.forEach(item => item.classList.remove('preview'));\n closest.classList.add('preview');\n }\n }\n\n \/\/ \uc2dc\uac04 \uc544\uc774\ud15c \ud65c\uc131\ud654 \ubc0f \uc5c5\ub370\uc774\ud2b8 (\ud074\ub9ad \uc2dc\uc5d0\ub9cc \ud638\ucd9c)\n function updateActiveTimeItem(column, display, dateId, scheduleId) {\n \/\/ \uc774 \ud568\uc218\ub294 \ub354 \uc774\uc0c1 \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8\uc5d0\uc11c \ud638\ucd9c\ub418\uc9c0 \uc54a\uc74c\n \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8\uc5d0\uc11c \uc9c1\uc811 \ucc98\ub9ac\n }\n\n \/\/ \uc77c\uc815 \uc81c\ubaa9 \uc5c5\ub370\uc774\ud2b8\n function updateScheduleTitle(dateId, scheduleId, title) {\n const date = dates.find(d => d.id === dateId);\n if (date) {\n const schedule = date.schedules.find(s => s.id === scheduleId);\n if (schedule) {\n schedule.title = title;\n }\n }\n }\n\n \/\/ \uc77c\uc815 \uc0ad\uc81c\n function deleteSchedule(dateId, scheduleId) {\n const date = dates.find(d => d.id === dateId);\n if (date) {\n date.schedules = date.schedules.filter(s => s.id !== scheduleId);\n document.getElementById(scheduleId).remove();\n }\n }\n\n \/\/ \ube48 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\n function updateEmptyState() {\n const emptyState = document.getElementById('emptyState');\n const addBtn = document.querySelector('.container > .add-btn');\n \n if (dates.length === 0) {\n emptyState.style.display = 'block';\n if (addBtn) addBtn.classList.remove('has-dates');\n } else {\n emptyState.style.display = 'none';\n if (addBtn) addBtn.classList.add('has-dates');\n }\n }\n\n \/\/ \ubaa8\ub2ec \uc678\ubd80 \ud074\ub9ad \uc2dc \ub2eb\uae30\n window.onclick = function(event) {\n const modal = document.getElementById('dateModal');\n if (event.target === modal) {\n closeDateModal();\n }\n }\n\n \/\/ \ucd08\uae30\ud654 \uc2e4\ud589\n init();\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac \ud83d\uddd3\ufe0f \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac \uc5ec\ud589 \uc77c\uc815\uc744 \ucd94\uac00\ud574\ubcf4\uc138\uc694! \uc544\ub798 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \ub0a0\uc9dc\ub97c \ucd94\uac00\ud558\uace0 \uc77c\uc815\uc744 \uad00\ub9ac\ud558\uc138\uc694. + \uc0c8 \ub0a0\uc9dc \ucd94\uac00 \ub0a0\uc9dc \uc120\ud0dd \ub144 \uc6d4 \uc77c \ud655\uc778 \ucde8\uc18c<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2277","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2277"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2277\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2277,"date":"2025-08-22T12:08:10","date_gmt":"2025-08-22T12:08:10","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2277"},"modified":"2025-08-27T03:50:07","modified_gmt":"2025-08-27T03:50:07","slug":"%ec%9d%bc%ec%a0%95-%ea%b4%80%eb%a6%ac","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/%ec%9d%bc%ec%a0%95-%ea%b4%80%eb%a6%ac\/","title":{"rendered":"\uc77c\uc815 \uad00\ub9ac"},"content":{"rendered":"\n\n\n \n \n \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 800px;\n margin: 0 auto;\n }\n\n h1 {\n color: white;\n text-align: center;\n margin-bottom: 30px;\n font-size: 2rem;\n text-shadow: 0 2px 4px rgba(0,0,0,0.2);\n }\n\n \/* \ub0a0\uc9dc \uce74\ub4dc \uc2a4\ud0c0\uc77c *\/\n .date-card {\n background: white;\n border-radius: 16px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n animation: fadeInUp 0.4s ease;\n }\n\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .date-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n padding-bottom: 15px;\n border-bottom: 2px solid #f0f0f0;\n }\n\n .date-title {\n font-size: 1.3rem;\n font-weight: 600;\n color: #333;\n }\n\n .delete-date-btn {\n background: #ff4757;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 8px;\n cursor: pointer;\n font-size: 0.9rem;\n transition: all 0.3s;\n }\n\n .delete-date-btn:hover {\n background: #ff3838;\n transform: scale(1.05);\n }\n\n \/* \uc77c\uc815 \uce74\ub4dc \uc2a4\ud0c0\uc77c *\/\n .schedule-item {\n display: flex;\n align-items: center;\n padding: 12px;\n margin-bottom: 10px;\n background: #f8f9fa;\n border-radius: 12px;\n transition: all 0.3s;\n position: relative;\n }\n\n .schedule-item:hover {\n background: #e9ecef;\n transform: translateX(5px);\n }\n\n \/* \uc2dc\uac04 \uc120\ud0dd \ud720\uc774 \uc5f4\ub838\uc744 \ub54c \uc77c\uc815 \uce74\ub4dc\uc758 z-index \uc870\uc815 *\/\n .schedule-item:has(.time-container:hover) {\n z-index: 999;\n overflow: visible;\n }\n\n \/* \uc2dc\uac04 \ud45c\uc2dc\/\uc120\ud0dd \uc601\uc5ed *\/\n .time-container {\n width: 140px;\n height: 40px;\n position: relative;\n z-index: 10;\n }\n\n .time-container:hover {\n z-index: 1000;\n }\n\n .time-display {\n width: 140px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: #667eea;\n cursor: pointer;\n background: white;\n border: 2px solid #667eea;\n border-radius: 8px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .time-picker-wrapper {\n width: 140px;\n height: 40px;\n background: white;\n border: 2px solid #667eea;\n border-radius: 8px;\n overflow: hidden;\n position: relative;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\n }\n\n .time-container:hover .time-picker-wrapper {\n height: 240px;\n border-radius: 12px;\n box-shadow: 0 15px 40px rgba(0,0,0,0.25);\n transform: translateY(-100px);\n position: relative;\n z-index: 9999;\n }\n\n .time-container:hover .time-display {\n opacity: 0;\n transform: scale(0.9);\n pointer-events: none;\n }\n\n .time-picker-expanded {\n width: 100%;\n height: 240px;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n transition: opacity 0.3s ease 0.1s;\n pointer-events: none;\n z-index: 9999;\n }\n\n .time-container:hover .time-picker-expanded {\n opacity: 1;\n pointer-events: auto;\n }\n\n .time-picker-column {\n width: 100%;\n height: 100%;\n overflow-y: auto;\n scroll-snap-type: y mandatory;\n scroll-behavior: smooth;\n position: relative;\n }\n\n .time-picker-column::-webkit-scrollbar {\n width: 0;\n }\n\n \/* \uac00\uc6b4\ub370 \ud558\uc774\ub77c\uc774\ud2b8 \uc601\uc5ed \ud45c\uc2dc *\/\n .time-picker-column::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 40px;\n transform: translateY(-50%);\n background: linear-gradient(to bottom, \n transparent, \n rgba(102, 126, 234, 0.1) 20%, \n rgba(102, 126, 234, 0.1) 80%, \n transparent);\n pointer-events: none;\n z-index: 1;\n }\n\n \/* \uc120\ud0dd \uc911\uc2ec\uc120 \uc778\ub514\ucf00\uc774\ud130 *\/\n .time-picker-column::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 10px;\n right: 10px;\n height: 2px;\n transform: translateY(-50%);\n background: linear-gradient(90deg, \n transparent, \n rgba(102, 126, 234, 0.3) 20%, \n rgba(102, 126, 234, 0.3) 80%, \n transparent);\n pointer-events: none;\n z-index: 2;\n }\n\n .time-picker-item {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: center;\n cursor: pointer;\n font-size: 0.85rem;\n font-weight: 500;\n color: #666;\n transition: all 0.2s;\n position: relative;\n padding: 0 10px;\n white-space: nowrap;\n opacity: 0.6;\n transform: scale(0.9);\n }\n\n .time-picker-item:hover {\n background: rgba(102, 126, 234, 0.08);\n opacity: 0.8;\n transform: scale(0.95);\n }\n\n .time-picker-item.preview {\n color: #8b9cef;\n font-weight: 600;\n opacity: 0.9;\n transform: scale(0.95);\n background: rgba(102, 126, 234, 0.03);\n }\n\n .time-picker-item.active {\n color: #667eea;\n font-weight: 700;\n font-size: 0.9rem;\n opacity: 1;\n transform: scale(1);\n background: rgba(102, 126, 234, 0.1);\n }\n\n .time-picker-item.current {\n background: rgba(102, 126, 234, 0.1);\n }\n\n .time-picker-item .time-diff {\n font-size: 0.75rem;\n opacity: 0.8;\n margin-right: 5px;\n }\n\n .time-picker-item.spacer {\n height: 100px;\n pointer-events: none;\n }\n\n \/* \ud398\uc774\ub4dc \ud6a8\uacfc *\/\n .time-picker-wrapper::before,\n .time-picker-wrapper::after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n height: 40px;\n pointer-events: none;\n z-index: 10;\n opacity: 0;\n transition: opacity 0.3s ease 0.2s;\n }\n\n .time-picker-wrapper::before {\n top: 0;\n background: linear-gradient(to bottom, white 0%, transparent 100%);\n }\n\n .time-picker-wrapper::after {\n bottom: 0;\n background: linear-gradient(to top, white 0%, transparent 100%);\n }\n\n .time-container:hover .time-picker-wrapper::before,\n .time-container:hover .time-picker-wrapper::after {\n opacity: 1;\n }\n\n .schedule-title {\n flex: 1;\n padding: 0 15px;\n font-size: 1rem;\n color: #333;\n border: none;\n background: transparent;\n outline: none;\n }\n\n .schedule-title:focus {\n background: white;\n padding: 8px 15px;\n border-radius: 8px;\n }\n\n .delete-schedule-btn {\n background: #ff6b6b;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 6px;\n cursor: pointer;\n opacity: 0;\n transition: all 0.3s;\n font-size: 0.85rem;\n }\n\n .schedule-item:hover .delete-schedule-btn {\n opacity: 1;\n }\n\n .delete-schedule-btn:hover {\n background: #ff5252;\n transform: scale(1.1);\n }\n\n \/* \ucd94\uac00 \ubc84\ud2bc \uc2a4\ud0c0\uc77c *\/\n .add-btn {\n width: 100%;\n padding: 12px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 500;\n transition: all 0.3s;\n margin-top: 10px;\n position: relative;\n overflow: hidden;\n }\n\n .add-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n\n .add-btn:active {\n transform: translateY(0);\n }\n\n \/* \ube60\ub978 \ucd94\uac00 \ud6a8\uacfc *\/\n .add-btn::after {\n content: '\u2193 \ub2e4\uc74c \ub0a0\uc9dc \uc790\ub3d9 \ucd94\uac00';\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n padding: 12px;\n background: linear-gradient(135deg, #48c774 0%, #3ec46d 100%);\n transition: top 0.3s;\n font-size: 0.9rem;\n }\n\n .add-btn.has-dates::after {\n display: block;\n }\n\n .add-btn:not(.has-dates)::after {\n display: none;\n }\n\n .add-btn.has-dates:hover::after {\n top: 0;\n }\n\n .add-schedule-btn {\n background: linear-gradient(135deg, #48c774 0%, #3ec46d 100%);\n margin-top: 5px;\n opacity: 0;\n transition: all 0.3s;\n }\n\n .date-card:hover .add-schedule-btn {\n opacity: 1;\n }\n\n \/* \ubaa8\ub2ec \uc2a4\ud0c0\uc77c *\/\n .modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0,0,0,0.5);\n z-index: 1000;\n animation: fadeIn 0.3s;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .modal-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: white;\n padding: 30px;\n border-radius: 20px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n animation: slideUp 0.3s;\n }\n\n @keyframes slideUp {\n from {\n transform: translate(-50%, -40%);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -50%);\n opacity: 1;\n }\n }\n\n .modal-header {\n font-size: 1.5rem;\n font-weight: 600;\n margin-bottom: 20px;\n color: #333;\n text-align: center;\n }\n\n \/* \ud720 \ud53c\ucee4 \uc2a4\ud0c0\uc77c *\/\n .picker-container {\n display: flex;\n gap: 15px;\n justify-content: center;\n margin-bottom: 25px;\n }\n\n .picker-column {\n width: 80px;\n height: 200px;\n overflow-y: auto;\n scroll-snap-type: y mandatory;\n scroll-behavior: smooth;\n border: 2px solid #e0e0e0;\n border-radius: 12px;\n background: #f8f9fa;\n position: relative;\n }\n\n .picker-column::-webkit-scrollbar {\n width: 0;\n }\n\n \/* \uac00\uc6b4\ub370 \ud558\uc774\ub77c\uc774\ud2b8 \uc601\uc5ed *\/\n .picker-column::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 40px;\n transform: translateY(-50%);\n background: linear-gradient(to bottom, \n transparent, \n rgba(102, 126, 234, 0.15) 20%, \n rgba(102, 126, 234, 0.15) 80%, \n transparent);\n pointer-events: none;\n z-index: 1;\n border-radius: 8px;\n }\n\n .picker-item {\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n scroll-snap-align: center;\n cursor: pointer;\n transition: all 0.2s;\n font-weight: 500;\n color: #666;\n position: relative;\n }\n\n .picker-item:hover {\n background: rgba(102, 126, 234, 0.05);\n }\n\n .picker-item.active {\n color: #667eea;\n font-weight: 700;\n font-size: 1.1rem;\n }\n\n .picker-label {\n text-align: center;\n font-size: 0.9rem;\n color: #666;\n margin-bottom: 5px;\n }\n\n .modal-buttons {\n display: flex;\n gap: 10px;\n justify-content: center;\n }\n\n .modal-btn {\n padding: 10px 30px;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n font-size: 1rem;\n font-weight: 500;\n transition: all 0.3s;\n }\n\n .confirm-btn {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n }\n\n .confirm-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\n }\n\n .cancel-btn {\n background: #e0e0e0;\n color: #333;\n }\n\n .cancel-btn:hover {\n background: #d0d0d0;\n }\n\n \/* \ucd08\uae30 \uc0c1\ud0dc *\/\n .empty-state {\n text-align: center;\n color: white;\n padding: 40px;\n }\n\n .empty-state h2 {\n font-size: 1.5rem;\n margin-bottom: 10px;\n }\n\n .empty-state p {\n opacity: 0.9;\n margin-bottom: 20px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\ud83d\uddd3\ufe0f \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac<\/h1>\n \n <div id=\"dateCards\"><\/div>\n \n <div class=\"empty-state\" id=\"emptyState\">\n <h2>\uc5ec\ud589 \uc77c\uc815\uc744 \ucd94\uac00\ud574\ubcf4\uc138\uc694!<\/h2>\n <p>\uc544\ub798 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \ub0a0\uc9dc\ub97c \ucd94\uac00\ud558\uace0 \uc77c\uc815\uc744 \uad00\ub9ac\ud558\uc138\uc694.<\/p>\n <\/div>\n \n <button class=\"add-btn\" onclick=\"handleAddDate()\">+ \uc0c8 \ub0a0\uc9dc \ucd94\uac00<\/button>\n <\/div>\n\n \n <div id=\"dateModal\" class=\"modal\">\n <div class=\"modal-content\">\n <div class=\"modal-header\">\ub0a0\uc9dc \uc120\ud0dd<\/div>\n \n <div class=\"picker-container\">\n <div>\n <div class=\"picker-label\">\ub144<\/div>\n <div class=\"picker-column\" id=\"yearPicker\"><\/div>\n <\/div>\n <div>\n <div class=\"picker-label\">\uc6d4<\/div>\n <div class=\"picker-column\" id=\"monthPicker\"><\/div>\n <\/div>\n <div>\n <div class=\"picker-label\">\uc77c<\/div>\n <div class=\"picker-column\" id=\"dayPicker\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"modal-buttons\">\n <button class=\"modal-btn confirm-btn\" onclick=\"confirmDate()\">\ud655\uc778<\/button>\n <button class=\"modal-btn cancel-btn\" onclick=\"closeDateModal()\">\ucde8\uc18c<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let dates = [];\n let lastScheduleTime = { hour: 9, minute: 0 };\n let scheduleCounter = 0;\n\n \/\/ \ucd08\uae30\ud654\n function init() {\n updateEmptyState();\n }\n\n \/\/ \ub144\ub3c4 \ud53c\ucee4 \ucd08\uae30\ud654\n function initYearPicker() {\n const yearPicker = document.getElementById('yearPicker');\n yearPicker.innerHTML = '';\n const currentYear = new Date().getFullYear();\n \n \/\/ \uc0c1\ub2e8 \uc5ec\ubc31\n for (let i = 0; i < 3; i++) {\n yearPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n for (let year = currentYear - 2; year <= currentYear + 10; year++) {\n const item = document.createElement('div');\n item.className = 'picker-item';\n item.textContent = year;\n item.dataset.value = year;\n if (year === currentYear) item.classList.add('active');\n yearPicker.appendChild(item);\n }\n \n \/\/ \ud558\ub2e8 \uc5ec\ubc31\n for (let i = 0; i < 3; i++) {\n yearPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n \/\/ \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 \uc124\uc815\n setupPickerScroll(yearPicker);\n \n \/\/ \ud604\uc7ac \ub144\ub3c4\ub85c \uc2a4\ud06c\ub864\n setTimeout(() => {\n const active = yearPicker.querySelector('.active');\n if (active) {\n active.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n }, 50);\n }\n\n \/\/ \uc6d4 \ud53c\ucee4 \ucd08\uae30\ud654\n function initMonthPicker() {\n const monthPicker = document.getElementById('monthPicker');\n monthPicker.innerHTML = '';\n const currentMonth = new Date().getMonth() + 1;\n \n for (let i = 0; i < 3; i++) {\n monthPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n for (let month = 1; month <= 12; month++) {\n const item = document.createElement('div');\n item.className = 'picker-item';\n item.textContent = month + '\uc6d4';\n item.dataset.value = month;\n if (month === currentMonth) item.classList.add('active');\n monthPicker.appendChild(item);\n }\n \n for (let i = 0; i < 3; i++) {\n monthPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n setupPickerScroll(monthPicker);\n \n setTimeout(() => {\n const active = monthPicker.querySelector('.active');\n if (active) {\n active.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n }, 50);\n }\n\n \/\/ \uc77c \ud53c\ucee4 \ucd08\uae30\ud654\n function initDayPicker() {\n const dayPicker = document.getElementById('dayPicker');\n dayPicker.innerHTML = '';\n const currentDay = new Date().getDate();\n \n for (let i = 0; i < 3; i++) {\n dayPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n for (let day = 1; day <= 31; day++) {\n const item = document.createElement('div');\n item.className = 'picker-item';\n item.textContent = day + '\uc77c';\n item.dataset.value = day;\n if (day === currentDay) item.classList.add('active');\n dayPicker.appendChild(item);\n }\n \n for (let i = 0; i < 3; i++) {\n dayPicker.innerHTML += '<div class=\"picker-item spacer\"> <\/div>';\n }\n \n setupPickerScroll(dayPicker);\n \n setTimeout(() => {\n const active = dayPicker.querySelector('.active');\n if (active) {\n active.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n }, 50);\n }\n\n \/\/ \ud53c\ucee4 \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 \uc124\uc815\n function setupPickerScroll(picker) {\n let scrollTimer;\n \n picker.addEventListener('scroll', function() {\n clearTimeout(scrollTimer);\n scrollTimer = setTimeout(() => {\n updateActiveItem(picker);\n }, 50);\n });\n \n \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8\n picker.querySelectorAll('.picker-item:not(.spacer)').forEach(item => {\n item.addEventListener('click', function() {\n this.scrollIntoView({ block: 'center', behavior: 'smooth' });\n });\n });\n }\n\n \/\/ \uac00\uc6b4\ub370 \uc704\uce58\ud55c \uc544\uc774\ud15c \ud65c\uc131\ud654\n function updateActiveItem(picker) {\n const items = picker.querySelectorAll('.picker-item:not(.spacer)');\n const containerRect = picker.getBoundingClientRect();\n const center = containerRect.top + containerRect.height \/ 2;\n \n let closest = null;\n let minDistance = Infinity;\n \n items.forEach(item => {\n const rect = item.getBoundingClientRect();\n const itemCenter = rect.top + rect.height \/ 2;\n const distance = Math.abs(center - itemCenter);\n \n if (distance < minDistance) {\n minDistance = distance;\n closest = item;\n }\n });\n \n if (closest) {\n items.forEach(item => item.classList.remove('active'));\n closest.classList.add('active');\n }\n }\n\n \/\/ \ub0a0\uc9dc \ubaa8\ub2ec \uc5f4\uae30\n function openDateModal() {\n document.getElementById('dateModal').style.display = 'block';\n initYearPicker();\n initMonthPicker();\n initDayPicker();\n }\n\n \/\/ \ub0a0\uc9dc \ubaa8\ub2ec \ub2eb\uae30\n function closeDateModal() {\n document.getElementById('dateModal').style.display = 'none';\n }\n\n \/\/ \ub0a0\uc9dc \ud655\uc778\n function confirmDate() {\n const year = document.querySelector('#yearPicker .active')?.dataset.value;\n const month = document.querySelector('#monthPicker .active')?.dataset.value;\n const day = document.querySelector('#dayPicker .active')?.dataset.value;\n \n if (year && month && day) {\n \/\/ \uc911\ubcf5 \ub0a0\uc9dc \uccb4\ud06c\n const isDuplicate = dates.some(date => \n date.year === parseInt(year) && \n date.month === parseInt(month) && \n date.day === parseInt(day)\n );\n \n if (isDuplicate) {\n alert('\uc774\ubbf8 \ub4f1\ub85d\ub41c \ub0a0\uc9dc\uc785\ub2c8\ub2e4.');\n return;\n }\n \n addDateCard(year, month, day);\n closeDateModal();\n }\n }\n\n \/\/ \ub0a0\uc9dc \uce74\ub4dc \ucd94\uac00\n function addDateCard(year, month, day) {\n const dateId = `date-${Date.now()}`;\n const date = {\n id: dateId,\n year: parseInt(year),\n month: parseInt(month),\n day: parseInt(day),\n schedules: []\n };\n \n dates.push(date);\n \n \/\/ \ub0a0\uc9dc\uc21c\uc73c\ub85c \uc815\ub82c\n sortDates();\n \n \/\/ \ubaa8\ub4e0 \ub0a0\uc9dc \uce74\ub4dc \uc7ac\ub80c\ub354\ub9c1\n renderAllDateCards();\n \n \/\/ \uc0c8\ub85c \ucd94\uac00\ub41c \ub0a0\uc9dc \uce74\ub4dc\ub85c \uc2a4\ud06c\ub864\n setTimeout(() => {\n const newCard = document.getElementById(dateId);\n if (newCard) {\n newCard.scrollIntoView({ behavior: 'smooth', block: 'center' });\n }\n }, 100);\n \n \/\/ \uccab \uc77c\uc815 \uc790\ub3d9 \ucd94\uac00\n const addedDate = dates.find(d => d.id === dateId);\n if (addedDate && addedDate.schedules.length === 0) {\n \/\/ \uccab \uc77c\uc815\uc740 \uc624\uc804 9\uc2dc\ub85c \uc124\uc815\n lastScheduleTime = { hour: 8, minute: 0 };\n addSchedule(dateId);\n }\n }\n\n \/\/ \ub0a0\uc9dc \uc815\ub82c\n function sortDates() {\n dates.sort((a, b) => {\n \/\/ \ub144\ub3c4 \ube44\uad50\n if (a.year !== b.year) return a.year - b.year;\n \/\/ \uc6d4 \ube44\uad50\n if (a.month !== b.month) return a.month - b.month;\n \/\/ \uc77c \ube44\uad50\n return a.day - b.day;\n });\n }\n\n \/\/ \ubaa8\ub4e0 \ub0a0\uc9dc \uce74\ub4dc \ub80c\ub354\ub9c1\n function renderAllDateCards() {\n const dateCards = document.getElementById('dateCards');\n dateCards.innerHTML = '';\n \n dates.forEach(date => {\n const card = document.createElement('div');\n card.className = 'date-card';\n card.id = date.id;\n card.innerHTML = `\n <div class=\"date-header\">\n <div class=\"date-title\">${date.year}\ub144 ${date.month}\uc6d4 ${date.day}\uc77c<\/div>\n <button class=\"delete-date-btn\" onclick=\"deleteDate('${date.id}')\">\uc0ad\uc81c<\/button>\n <\/div>\n <div class=\"schedules\" id=\"schedules-${date.id}\"><\/div>\n <button class=\"add-btn add-schedule-btn\" onclick=\"addSchedule('${date.id}')\">+ \uc77c\uc815 \ucd94\uac00<\/button>\n `;\n \n dateCards.appendChild(card);\n \n \/\/ \uac01 \ub0a0\uc9dc\uc758 \uc77c\uc815\ub4e4 \ub80c\ub354\ub9c1\n if (date.schedules.length > 0) {\n renderSchedules(date.id);\n }\n });\n \n updateEmptyState();\n }\n\n \/\/ \ub0a0\uc9dc \uc0ad\uc81c\n function deleteDate(dateId) {\n if (confirm('\uc774 \ub0a0\uc9dc\uc758 \ubaa8\ub4e0 \uc77c\uc815\uc774 \uc0ad\uc81c\ub429\ub2c8\ub2e4. \uacc4\uc18d\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) {\n dates = dates.filter(d => d.id !== dateId);\n document.getElementById(dateId).remove();\n updateEmptyState();\n }\n }\n\n \/\/ \uc2dc\uac04\uc744 AM\/PM \ud615\uc2dd\uc73c\ub85c \ubcc0\ud658\n function formatTime(hour, minute) {\n const period = hour >= 12 ? 'PM' : 'AM';\n const displayHour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;\n return `${displayHour}:${String(minute).padStart(2, '0')} ${period}`;\n }\n\n \/\/ \uc2dc\uac04 \ud53c\ucee4 \uc0dd\uc131\n function createTimePicker(hour, minute) {\n const pickerId = `picker-${++scheduleCounter}`;\n \n \/\/ \uc2dc\uac04 \uc635\uc158 \uc0dd\uc131 (15\ubd84 \uac04\uaca9, \u00b112\uc2dc\uac04)\n let timeOptions = [];\n const currentMinutes = hour * 60 + minute;\n \n \/\/ -12\uc2dc\uac04\ubd80\ud130 +12\uc2dc\uac04\uae4c\uc9c0 15\ubd84 \uac04\uaca9\n for (let diff = -720; diff <= 720; diff += 15) {\n const totalMinutes = currentMinutes + diff;\n if (totalMinutes >= 0 && totalMinutes < 1440) { \/\/ 0:00 ~ 23:59 \ubc94\uc704\n const h = Math.floor(totalMinutes \/ 60);\n const m = totalMinutes % 60;\n \n let label = '';\n if (diff < 0) {\n const hours = Math.abs(Math.floor(diff \/ 60));\n const mins = Math.abs(diff % 60);\n if (hours > 0 && mins > 0) {\n label = `-${hours}\uc2dc\uac04 ${mins}\ubd84`;\n } else if (hours > 0) {\n label = `-${hours}\uc2dc\uac04`;\n } else {\n label = `-${mins}\ubd84`;\n }\n } else if (diff > 0) {\n const hours = Math.floor(diff \/ 60);\n const mins = diff % 60;\n if (hours > 0 && mins > 0) {\n label = `+${hours}\uc2dc\uac04 ${mins}\ubd84`;\n } else if (hours > 0) {\n label = `+${hours}\uc2dc\uac04`;\n } else {\n label = `+${mins}\ubd84`;\n }\n } else {\n label = '\ud604\uc7ac';\n }\n \n timeOptions.push({\n hour: h,\n minute: m,\n diff: diff,\n label: label,\n time: formatTime(h, m)\n });\n }\n }\n \n \/\/ HTML \uc0dd\uc131\n let optionsHTML = '<div class=\"time-picker-item spacer\"> <\/div>';\n \n timeOptions.forEach(option => {\n const isActive = option.diff === 0;\n const isCurrent = option.diff === 0;\n optionsHTML += `\n <div class=\"time-picker-item ${isActive ? 'active' : ''} ${isCurrent ? 'current' : ''}\" \n data-hour=\"${option.hour}\" \n data-minute=\"${option.minute}\">\n <span class=\"time-diff\">${option.label}<\/span>\n <span>${option.time}<\/span>\n <\/div>\n `;\n });\n \n optionsHTML += '<div class=\"time-picker-item spacer\"> <\/div>';\n \n return {\n displayHTML: `<div class=\"time-display\" id=\"display-${pickerId}\">${formatTime(hour, minute)}<\/div>`,\n pickerHTML: `\n <div class=\"time-picker-wrapper\">\n <div class=\"time-picker-expanded\" id=\"picker-${pickerId}\">\n <div class=\"time-picker-column\" id=\"time-${pickerId}\">\n ${optionsHTML}\n <\/div>\n <\/div>\n <\/div>\n `,\n pickerId: pickerId\n };\n }\n\n \/\/ \uc77c\uc815 \ucd94\uac00\n function addSchedule(dateId) {\n const date = dates.find(d => d.id === dateId);\n if (!date) return;\n \n const scheduleId = `schedule-${Date.now()}`;\n \n \/\/ \ub2e4\uc74c \uc2dc\uac04 \uacc4\uc0b0\n let nextHour = lastScheduleTime.hour + 1;\n let nextMinute = lastScheduleTime.minute;\n \n if (nextHour > 23) {\n nextHour = 9;\n nextMinute = 0;\n }\n \n const schedule = {\n id: scheduleId,\n title: '\uc0c8 \uc77c\uc815',\n hour: nextHour,\n minute: nextMinute\n };\n \n date.schedules.push(schedule);\n lastScheduleTime = { hour: nextHour, minute: nextMinute };\n \n \/\/ \uc2dc\uac04 \uc21c\uc73c\ub85c \uc815\ub82c\n sortSchedules(date);\n \n \/\/ \ubaa8\ub4e0 \uc77c\uc815 \ub2e4\uc2dc \ub80c\ub354\ub9c1\n renderSchedules(dateId);\n }\n\n \/\/ \uc77c\uc815 \uc815\ub82c\n function sortSchedules(date) {\n date.schedules.sort((a, b) => {\n const timeA = a.hour * 60 + a.minute;\n const timeB = b.hour * 60 + b.minute;\n return timeA - timeB;\n });\n }\n\n \/\/ \uc77c\uc815 \ub80c\ub354\ub9c1\n function renderSchedules(dateId) {\n const date = dates.find(d => d.id === dateId);\n if (!date) return;\n \n const schedulesContainer = document.getElementById(`schedules-${dateId}`);\n schedulesContainer.innerHTML = '';\n \n date.schedules.forEach(schedule => {\n const picker = createTimePicker(schedule.hour, schedule.minute);\n \n const scheduleItem = document.createElement('div');\n scheduleItem.className = 'schedule-item';\n scheduleItem.id = schedule.id;\n scheduleItem.innerHTML = `\n <div class=\"time-container\" data-schedule-id=\"${schedule.id}\" data-date-id=\"${dateId}\">\n ${picker.displayHTML}\n ${picker.pickerHTML}\n <\/div>\n <input type=\"text\" class=\"schedule-title\" value=\"${schedule.title}\" \n onchange=\"updateScheduleTitle('${dateId}', '${schedule.id}', this.value)\"\n placeholder=\"\uc77c\uc815 \uc81c\ubaa9\uc744 \uc785\ub825\ud558\uc138\uc694\">\n <button class=\"delete-schedule-btn\" onclick=\"deleteSchedule('${dateId}', '${schedule.id}')\">\uc0ad\uc81c<\/button>\n `;\n \n schedulesContainer.appendChild(scheduleItem);\n \n \/\/ \uc2dc\uac04 \ud53c\ucee4 \uc774\ubca4\ud2b8 \uc124\uc815\n setTimeout(() => {\n setupTimePickerEvents(scheduleItem, dateId, schedule.id, picker.pickerId);\n }, 10);\n });\n }\n\n \/\/ \uc2dc\uac04 \ud53c\ucee4 \uc774\ubca4\ud2b8 \uc124\uc815 (\uc218\uc815)\n function setupTimePickerEvents(scheduleItem, dateId, scheduleId, pickerId) {\n const timeColumn = scheduleItem.querySelector(`#time-${pickerId}`);\n const display = scheduleItem.querySelector(`#display-${pickerId}`);\n \n \/\/ \ucd08\uae30 \uc2a4\ud06c\ub864 \uc704\uce58 (\ud604\uc7ac \uc2dc\uac04\uc73c\ub85c)\n const currentItem = timeColumn.querySelector('.current');\n if (currentItem) {\n currentItem.scrollIntoView({ block: 'center', behavior: 'auto' });\n }\n \n \/\/ \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8 - \ubbf8\ub9ac\ubcf4\uae30\ub9cc \ud45c\uc2dc\n let scrollTimer;\n \n timeColumn.addEventListener('scroll', function() {\n clearTimeout(scrollTimer);\n scrollTimer = setTimeout(() => {\n updatePreviewItem(timeColumn);\n }, 50);\n });\n \n \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8 - \uc2e4\uc81c \uc120\ud0dd \ubc0f \uc800\uc7a5\n timeColumn.querySelectorAll('.time-picker-item:not(.spacer)').forEach(item => {\n item.addEventListener('click', function(e) {\n e.stopPropagation();\n \n \/\/ \ubaa8\ub4e0 \uc544\uc774\ud15c\uc5d0\uc11c active \uc81c\uac70\n timeColumn.querySelectorAll('.time-picker-item').forEach(el => {\n el.classList.remove('active');\n el.classList.remove('current');\n });\n \n \/\/ \ud074\ub9ad\ud55c \uc544\uc774\ud15c active \uc124\uc815\n this.classList.add('active');\n this.classList.add('current');\n \n \/\/ \uc2dc\uac04 \uc5c5\ub370\uc774\ud2b8\n const hour = parseInt(this.dataset.hour);\n const minute = parseInt(this.dataset.minute);\n \n display.textContent = formatTime(hour, minute);\n \n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\n const date = dates.find(d => d.id === dateId);\n if (date) {\n const sched = date.schedules.find(s => s.id === scheduleId);\n if (sched) {\n sched.hour = hour;\n sched.minute = minute;\n lastScheduleTime = { hour, minute };\n \n \/\/ \uc2dc\uac04 \ubcc0\uacbd \ud6c4 \uc815\ub82c \ubc0f \uc7ac\ub80c\ub354\ub9c1\n sortSchedules(date);\n renderSchedules(dateId);\n }\n }\n \n \/\/ \ud074\ub9ad\ud55c \uc544\uc774\ud15c\uc73c\ub85c \uc2a4\ud06c\ub864\n this.scrollIntoView({ block: 'center', behavior: 'smooth' });\n });\n });\n }\n\n \/\/ \uc2a4\ud06c\ub864 \uc2dc \ubbf8\ub9ac\ubcf4\uae30 \uc544\uc774\ud15c \ud45c\uc2dc (\uc800\uc7a5\ud558\uc9c0 \uc54a\uc74c)\n function updatePreviewItem(column) {\n const items = column.querySelectorAll('.time-picker-item:not(.spacer)');\n const containerRect = column.getBoundingClientRect();\n const center = containerRect.top + containerRect.height \/ 2;\n \n let closest = null;\n let minDistance = Infinity;\n \n items.forEach(item => {\n const rect = item.getBoundingClientRect();\n const itemCenter = rect.top + rect.height \/ 2;\n const distance = Math.abs(center - itemCenter);\n \n if (distance < minDistance) {\n minDistance = distance;\n closest = item;\n }\n });\n \n if (closest) {\n \/\/ preview \ud074\ub798\uc2a4\ub9cc \uc801\uc6a9 (active\ub294 \uc801\uc6a9\ud558\uc9c0 \uc54a\uc74c)\n items.forEach(item => item.classList.remove('preview'));\n closest.classList.add('preview');\n }\n }\n\n \/\/ \uc2dc\uac04 \uc544\uc774\ud15c \ud65c\uc131\ud654 \ubc0f \uc5c5\ub370\uc774\ud2b8 (\ud074\ub9ad \uc2dc\uc5d0\ub9cc \ud638\ucd9c)\n function updateActiveTimeItem(column, display, dateId, scheduleId) {\n \/\/ \uc774 \ud568\uc218\ub294 \ub354 \uc774\uc0c1 \uc2a4\ud06c\ub864 \uc774\ubca4\ud2b8\uc5d0\uc11c \ud638\ucd9c\ub418\uc9c0 \uc54a\uc74c\n \/\/ \ud074\ub9ad \uc774\ubca4\ud2b8\uc5d0\uc11c \uc9c1\uc811 \ucc98\ub9ac\n }\n\n \/\/ \uc77c\uc815 \uc81c\ubaa9 \uc5c5\ub370\uc774\ud2b8\n function updateScheduleTitle(dateId, scheduleId, title) {\n const date = dates.find(d => d.id === dateId);\n if (date) {\n const schedule = date.schedules.find(s => s.id === scheduleId);\n if (schedule) {\n schedule.title = title;\n }\n }\n }\n\n \/\/ \uc77c\uc815 \uc0ad\uc81c\n function deleteSchedule(dateId, scheduleId) {\n const date = dates.find(d => d.id === dateId);\n if (date) {\n date.schedules = date.schedules.filter(s => s.id !== scheduleId);\n document.getElementById(scheduleId).remove();\n }\n }\n\n \/\/ \ube48 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8\n function updateEmptyState() {\n const emptyState = document.getElementById('emptyState');\n const addBtn = document.querySelector('.container > .add-btn');\n \n if (dates.length === 0) {\n emptyState.style.display = 'block';\n if (addBtn) addBtn.classList.remove('has-dates');\n } else {\n emptyState.style.display = 'none';\n if (addBtn) addBtn.classList.add('has-dates');\n }\n }\n\n \/\/ \ubaa8\ub2ec \uc678\ubd80 \ud074\ub9ad \uc2dc \ub2eb\uae30\n window.onclick = function(event) {\n const modal = document.getElementById('dateModal');\n if (event.target === modal) {\n closeDateModal();\n }\n }\n\n \/\/ \ucd08\uae30\ud654 \uc2e4\ud589\n init();\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac \ud83d\uddd3\ufe0f \uc5ec\ud589 \uc77c\uc815 \uad00\ub9ac \uc5ec\ud589 \uc77c\uc815\uc744 \ucd94\uac00\ud574\ubcf4\uc138\uc694! \uc544\ub798 \ubc84\ud2bc\uc744 \ud074\ub9ad\ud558\uc5ec \ub0a0\uc9dc\ub97c \ucd94\uac00\ud558\uace0 \uc77c\uc815\uc744 \uad00\ub9ac\ud558\uc138\uc694. + \uc0c8 \ub0a0\uc9dc \ucd94\uac00 \ub0a0\uc9dc \uc120\ud0dd \ub144 \uc6d4 \uc77c \ud655\uc778 \ucde8\uc18c<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2277","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2277"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2277\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}