{"id":3648,"date":"2025-10-17T04:03:19","date_gmt":"2025-10-16T21:03:19","guid":{"rendered":"https:\/\/cellbio.shop\/?page_id=3648"},"modified":"2025-10-17T04:09:36","modified_gmt":"2025-10-16T21:09:36","slug":"cl-41","status":"publish","type":"page","link":"https:\/\/cellbio.shop\/ko_kr\/cl-41\/","title":{"rendered":"CL-41"},"content":{"rendered":"\t\t
\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n min-height: 100vh;\r\n color: #333;\r\n }\r\n\r\n .container {\r\n max-width: 480px;\r\n margin: 0 auto;\r\n background: white;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* \ud5e4\ub354 \uc139\uc158 *\/\r\n .header {\r\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .header::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);\r\n animation: pulse 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); }\r\n 50% { transform: scale(1.1); }\r\n }\r\n\r\n .gov-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.2);\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-size: 12px;\r\n margin-bottom: 15px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n h1 {\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\r\n }\r\n\r\n .subtitle {\r\n font-size: 16px;\r\n opacity: 0.95;\r\n line-height: 1.5;\r\n }\r\n\r\n \/* \ud0c0\uc774\uba38 \uc139\uc158 *\/\r\n .timer-section {\r\n background: #f8f9fa;\r\n padding: 25px 20px;\r\n border-bottom: 1px solid #e9ecef;\r\n }\r\n\r\n .timer-title {\r\n text-align: center;\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .timer {\r\n display: flex;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .timer-item {\r\n background: white;\r\n padding: 15px;\r\n border-radius: 12px;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.08);\r\n text-align: center;\r\n min-width: 70px;\r\n }\r\n\r\n .timer-value {\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .timer-label {\r\n font-size: 11px;\r\n color: #6c757d;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud604\ud669 *\/\r\n .registration-status {\r\n background: white;\r\n padding: 20px;\r\n margin: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 4px 15px rgba(0,0,0,0.1);\r\n }\r\n\r\n .status-bar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .status-text {\r\n font-size: 14px;\r\n color: #495057;\r\n }\r\n\r\n .status-count {\r\n font-size: 18px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n }\r\n\r\n .progress-bar {\r\n width: 100%;\r\n height: 8px;\r\n background: #e9ecef;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 10px;\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* \uc774\ubca4\ud2b8 \uc815\ubcf4 *\/\r\n .event-info {\r\n padding: 30px 20px;\r\n }\r\n\r\n .info-card {\r\n background: #f8f9fa;\r\n padding: 25px;\r\n border-radius: 15px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .info-title {\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: #1e3c72;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .info-icon {\r\n width: 30px;\r\n height: 30px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 8px;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 10px;\r\n color: white;\r\n }\r\n\r\n .info-item {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 12px;\r\n padding-left: 40px;\r\n }\r\n\r\n .info-label {\r\n color: #6c757d;\r\n font-size: 14px;\r\n margin-right: 10px;\r\n }\r\n\r\n .info-value {\r\n color: #333;\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \uc2ac\ub77c\uc774\ub354 *\/\r\n .slider-container {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .slider {\r\n position: relative;\r\n width: 100%;\r\n height: 250px;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n }\r\n\r\n .slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .slide-caption {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);\r\n color: white;\r\n padding: 20px;\r\n font-size: 14px;\r\n }\r\n\r\n .slider-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-top: 15px;\r\n }\r\n\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #dee2e6;\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n\r\n .dot.active {\r\n background: #667eea;\r\n width: 24px;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* \ube44\ub514\uc624 \uc139\uc158 *\/\r\n .video-section {\r\n padding: 0 20px 30px;\r\n }\r\n\r\n .video-wrapper {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.15);\r\n }\r\n\r\n .video-wrapper iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n }\r\n\r\n \/* \ub4f1\ub85d \ud3fc *\/\r\n .registration-form {\r\n padding: 30px 20px;\r\n background: #f8f9fa;\r\n }\r\n\r\n .form-title {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1e3c72;\r\n text-align: center;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 14px;\r\n color: #495057;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n }\r\n\r\n input {\r\n width: 100%;\r\n padding: 15px;\r\n border: 2px solid #e9ecef;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n background: white;\r\n }\r\n\r\n input:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\r\n }\r\n\r\n .submit-btn {\r\n width: 100%;\r\n padding: 18px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 18px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n margin-top: 10px;\r\n }\r\n\r\n .submit-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .submit-btn:active {\r\n transform: translateY(0);\r\n }\r\n\r\n .submit-btn:disabled {\r\n background: #6c757d;\r\n cursor: not-allowed;\r\n transform: none;\r\n }\r\n\r\n \/* \ud478\ud130 *\/\r\n .footer {\r\n background: #1e3c72;\r\n color: white;\r\n padding: 30px 20px;\r\n text-align: center;\r\n }\r\n\r\n .footer-logo {\r\n font-size: 20px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .footer-text {\r\n font-size: 13px;\r\n opacity: 0.8;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \uc131\uacf5 \uba54\uc2dc\uc9c0 *\/\r\n .success-message {\r\n display: none;\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background: white;\r\n padding: 30px;\r\n border-radius: 20px;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\r\n z-index: 1000;\r\n text-align: center;\r\n max-width: 90%;\r\n width: 350px;\r\n }\r\n\r\n .success-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n font-size: 30px;\r\n }\r\n\r\n .overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 999;\r\n }\r\n\r\n \/* \ubc18\uc751\ud615 *\/\r\n @media (max-width: 380px) {\r\n h1 { font-size: 24px; }\r\n .timer-value { font-size: 24px; }\r\n .timer-item { min-width: 60px; padding: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <!-- \ud5e4\ub354 -->\r\n <div class=\"header\">\r\n <div class=\"gov-badge\">\ud83c\uddf0\ud83c\uddf7 \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<\/div>\r\n <h1>\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI<\/h1>\r\n <div class=\"subtitle\">\r\n \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \uc2dc\uc2a4\ud15c<br>\r\n 1\uc77c 100\ud1a4 \uc815\uc218 \ucc98\ub9ac \uae30\uc220\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ud0c0\uc774\uba38 -->\r\n <div class=\"timer-section\">\r\n <div class=\"timer-title\">\uc138\ubbf8\ub098 \uc2dc\uc791\uae4c\uc9c0<\/div>\r\n <div class=\"timer\" id=\"countdown\">\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"days\">0<\/div>\r\n <div class=\"timer-label\">\uc77c<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"hours\">0<\/div>\r\n <div class=\"timer-label\">\uc2dc\uac04<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"minutes\">0<\/div>\r\n <div class=\"timer-label\">\ubd84<\/div>\r\n <\/div>\r\n <div class=\"timer-item\">\r\n <div class=\"timer-value\" id=\"seconds\">0<\/div>\r\n <div class=\"timer-label\">\ucd08<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ub4f1\ub85d \ud604\ud669 -->\r\n <div class=\"registration-status\">\r\n <div class=\"status-bar\">\r\n <span class=\"status-text\">\ud604\uc7ac \ub4f1\ub85d \uc778\uc6d0<\/span>\r\n <span class=\"status-count\"><span id=\"currentCount\">12<\/span> \/ 50\uba85<\/span>\r\n <\/div>\r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progressBar\" style=\"width: 24%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \uc774\ubca4\ud2b8 \uc815\ubcf4 -->\r\n <div class=\"event-info\">\r\n <div class=\"info-card\">\r\n <div class=\"info-title\">\r\n <span class=\"info-icon\">\ud83d\udcc5<\/span>\r\n \ud589\uc0ac \uc815\ubcf4\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">\uc77c\uc2dc:<\/span>\r\n <span class=\"info-value\">2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">\uc7a5\uc18c:<\/span>\r\n <span class=\"info-value\">\ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ud604\uc7a5<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">\ub0b4\uc6a9:<\/span>\r\n <span class=\"info-value\">O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 & \ub9cc\ucc2c<\/span>\r\n <\/div>\r\n <div class=\"info-item\">\r\n <span class=\"info-label\">\uc815\uc6d0:<\/span>\r\n <span class=\"info-value\">\uc120\ucc29\uc21c 50\uba85 \uc81c\ud55c<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354 -->\r\n <div class=\"slider-container\">\r\n <div class=\"slider\">\r\n <div class=\"slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/4A90E2\/FFFFFF?text=\uc815\uc218+\uc2dc\uc2a4\ud15c+\uc804\uacbd\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c\">\r\n <div class=\"slide-caption\">\ucd5c\ucca8\ub2e8 \uc815\uc218 \ucc98\ub9ac \uc2dc\uc2a4\ud15c<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/7B68EE\/FFFFFF?text=\uae30\uc220+\uc124\uba85\ud68c\" alt=\"\uae30\uc220 \uc124\uba85\">\r\n <div class=\"slide-caption\">\uc804\ubb38\uac00 \uae30\uc220 \uc124\uba85\ud68c<\/div>\r\n <\/div>\r\n <div class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/440x250\/9370DB\/FFFFFF?text=\ud604\uc7a5+\uc124\uce58\" alt=\"\ud604\uc7a5 \uc124\uce58\">\r\n <div class=\"slide-caption\">\ub77c\uc624\uae4c\uc774 \ud604\uc7a5 \uc124\uce58 \ubaa8\uc2b5<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"slider-dots\">\r\n <span class=\"dot active\" onclick=\"currentSlide(1)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(2)\"><\/span>\r\n <span class=\"dot\" onclick=\"currentSlide(3)\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ube44\ub514\uc624 \uc139\uc158 -->\r\n <div class=\"video-section\">\r\n <div class=\"info-title\" style=\"margin-bottom: 15px;\">\r\n <span class=\"info-icon\">\ud83c\udfa5<\/span>\r\n \uae30\uc220 \uc18c\uac1c \uc601\uc0c1\r\n <\/div>\r\n <div class=\"video-wrapper\">\r\n <iframe src=\"https:\/\/www.youtube.com\/embed\/dQw4w9WgXcQ\" \r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \ub4f1\ub85d \ud3fc -->\r\n <div class=\"registration-form\">\r\n <h2 class=\"form-title\">\ucc38\uac00 \ub4f1\ub85d<\/h2>\r\n <form id=\"registrationForm\">\r\n <div class=\"form-group\">\r\n <label for=\"company\">\ud68c\uc0ac\/\uae30\uad00\uba85 *<\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"position\">\uc9c1\ud568 *<\/label>\r\n <input type=\"text\" id=\"position\" name=\"position\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"name\">\uc774\ub984 *<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">\uc5f0\ub77d\ucc98 *<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"010-0000-0000\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\ucc38\uac00 \uc2e0\uccad\ud558\uae30<\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n <!-- \ud478\ud130 -->\r\n <div class=\"footer\">\r\n <div class=\"footer-logo\">MCDI<\/div>\r\n <div class=\"footer-text\">\r\n \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<br>\r\n \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \uc2dc\uc2a4\ud15c<br>\r\n \u00a9 2024 MCDI. All rights reserved.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \uc131\uacf5 \uba54\uc2dc\uc9c0 -->\r\n <div class=\"overlay\" id=\"overlay\"><\/div>\r\n <div class=\"success-message\" id=\"successMessage\">\r\n <div class=\"success-icon\">\u2713<\/div>\r\n <h3 style=\"margin-bottom: 10px;\">\ub4f1\ub85d \uc644\ub8cc!<\/h3>\r\n <p style=\"color: #6c757d; font-size: 14px;\">\ucc38\uac00 \uc2e0\uccad\uc774 \uc131\uacf5\uc801\uc73c\ub85c \uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \uce74\uc6b4\ud2b8\ub2e4\uc6b4 \ud0c0\uc774\uba38\r\n function updateCountdown() {\r\n const targetDate = new Date('2025-11-03T17:00:00+09:00');\r\n const now = new Date();\r\n const difference = targetDate - now;\r\n\r\n if (difference > 0) {\r\n const days = Math.floor(difference \/ (1000 * 60 * 60 * 24));\r\n const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n const minutes = Math.floor((difference % (1000 * 60 * 60)) \/ (1000 * 60));\r\n const seconds = Math.floor((difference % (1000 * 60)) \/ 1000);\r\n\r\n document.getElementById('days').textContent = days;\r\n document.getElementById('hours').textContent = hours;\r\n document.getElementById('minutes').textContent = minutes;\r\n document.getElementById('seconds').textContent = seconds;\r\n } else {\r\n document.getElementById('countdown').innerHTML = '<div style=\"font-size: 20px; color: #e74c3c;\">\ud589\uc0ac\uac00 \uc885\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4<\/div>';\r\n }\r\n }\r\n\r\n setInterval(updateCountdown, 1000);\r\n updateCountdown();\r\n\r\n \/\/ \uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354\r\n let slideIndex = 1;\r\n \r\n function currentSlide(n) {\r\n showSlide(slideIndex = n);\r\n }\r\n\r\n function showSlide(n) {\r\n const slides = document.getElementsByClassName('slide');\r\n const dots = document.getElementsByClassName('dot');\r\n \r\n if (n > slides.length) slideIndex = 1;\r\n if (n < 1) slideIndex = slides.length;\r\n \r\n for (let i = 0; i < slides.length; i++) {\r\n slides[i].classList.remove('active');\r\n }\r\n \r\n for (let i = 0; i < dots.length; i++) {\r\n dots[i].classList.remove('active');\r\n }\r\n \r\n slides[slideIndex - 1].classList.add('active');\r\n dots[slideIndex - 1].classList.add('active');\r\n }\r\n\r\n \/\/ \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc\r\n setInterval(() => {\r\n slideIndex++;\r\n showSlide(slideIndex);\r\n }, 4000);\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uad00\ub9ac (localStorage \uc0ac\uc6a9)\r\n let registrationCount = parseInt(localStorage.getItem('registrationCount') || '12');\r\n \r\n function updateRegistrationCount() {\r\n document.getElementById('currentCount').textContent = registrationCount;\r\n const percentage = (registrationCount \/ 50) * 100;\r\n document.getElementById('progressBar').style.width = percentage + '%';\r\n \r\n if (registrationCount >= 50) {\r\n document.getElementById('submitBtn').disabled = true;\r\n document.getElementById('submitBtn').textContent = '\uc815\uc6d0 \ub9c8\uac10';\r\n }\r\n }\r\n\r\n updateRegistrationCount();\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c \ucc98\ub9ac\r\n document.getElementById('registrationForm').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n \r\n if (registrationCount >= 50) {\r\n alert('\uc8c4\uc1a1\ud569\ub2c8\ub2e4. \uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n \/\/ \ud3fc \ub370\uc774\ud130 \uc218\uc9d1\r\n const formData = {\r\n company: document.getElementById('company').value,\r\n position: document.getElementById('position').value,\r\n name: document.getElementById('name').value,\r\n phone: document.getElementById('phone').value,\r\n timestamp: new Date().toISOString()\r\n };\r\n\r\n \/\/ localStorage\uc5d0 \uc800\uc7a5 (\uc2e4\uc81c\ub85c\ub294 \uc11c\ubc84\ub85c \uc804\uc1a1)\r\n let registrations = JSON.parse(localStorage.getItem('registrations') || '[]');\r\n registrations.push(formData);\r\n localStorage.setItem('registrations', JSON.stringify(registrations));\r\n\r\n \/\/ \ub4f1\ub85d\uc790 \uc218 \uc99d\uac00\r\n registrationCount++;\r\n localStorage.setItem('registrationCount', registrationCount);\r\n updateRegistrationCount();\r\n\r\n \/\/ \uc131\uacf5 \uba54\uc2dc\uc9c0 \ud45c\uc2dc\r\n document.getElementById('overlay').style.display = 'block';\r\n document.getElementById('successMessage').style.display = 'block';\r\n\r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n this.reset();\r\n\r\n \/\/ 3\ucd08 \ud6c4 \uba54\uc2dc\uc9c0 \uc228\uae30\uae30\r\n setTimeout(() => {\r\n document.getElementById('overlay').style.display = 'none';\r\n document.getElementById('successMessage').style.display = 'none';\r\n }, 3000);\r\n\r\n console.log('\ub4f1\ub85d \ub370\uc774\ud130:', formData);\r\n console.log('\uc804\uccb4 \ub4f1\ub85d \ubaa9\ub85d:', registrations);\r\n });\r\n\r\n \/\/ \uc804\ud654\ubc88\ud638 \ud3ec\ub9f7\ud305\r\n document.getElementById('phone').addEventListener('input', function(e) {\r\n let value = e.target.value.replace(\/[^0-9]\/g, '');\r\n if (value.length > 3 && value.length <= 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3);\r\n } else if (value.length > 7) {\r\n value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);\r\n }\r\n e.target.value = value;\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n```\r\n\r\n\uc81c\uc791\ud55c \ub79c\ub529\ud398\uc774\uc9c0\uc758 \uc8fc\uc694 \ud2b9\uc9d5:\r\n\r\n## \u2728 \ub514\uc790\uc778 & UX\r\n- **\ubaa8\ubc14\uc77c \ucd5c\uc801\ud654**: \ubc18\uc751\ud615 \ub514\uc790\uc778\uc73c\ub85c \ubaa8\ub4e0 \ubaa8\ubc14\uc77c \uae30\uae30\uc5d0\uc11c \uc644\ubcbd \uc791\ub3d9\r\n- **\uace0\uae09\uc2a4\ub7ec\uc6b4 \uadf8\ub77c\ub370\uc774\uc158**: \ubcf4\ub77c-\ud30c\ub791 \uacc4\uc5f4\uc758 \uc138\ub828\ub41c \uc0c9\uc0c1 \uc870\ud569\r\n- **\ubd80\ub4dc\ub7ec\uc6b4 \uc560\ub2c8\uba54\uc774\uc158**: \ud638\ubc84 \ud6a8\uacfc\uc640 \ud2b8\ub79c\uc9c0\uc158\uc73c\ub85c \uc778\ud130\ub799\ud2f0\ube0c\ud55c \uacbd\ud5d8\r\n- **\ucd5c\uc801\ud654\ub41c \uac00\ub3c5\uc131**: \ubaa8\ubc14\uc77c\uc5d0 \uc801\ud569\ud55c \ud3f0\ud2b8 \ud06c\uae30(16px \uc774\uc0c1)\uc640 \ucda9\ubd84\ud55c \uc5ec\ubc31\r\n\r\n## \ud83d\udd27 \uc8fc\uc694 \uae30\ub2a5\r\n1. **\uc2e4\uc2dc\uac04 \uce74\uc6b4\ud2b8\ub2e4\uc6b4**: 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc\uae4c\uc9c0 \uc790\ub3d9 \uacc4\uc0b0\r\n2. **\ub4f1\ub85d\uc790 \uc218 \uad00\ub9ac**: 50\uba85 \uc81c\ud55c, \uc2e4\uc2dc\uac04 \uc9c4\ud589\ub960 \ud45c\uc2dc\r\n3. **\uc774\ubbf8\uc9c0 \uc2ac\ub77c\uc774\ub354**: 3\uac1c \uc774\ubbf8\uc9c0 \uc790\ub3d9 \uc804\ud658 (4\ucd08 \uac04\uaca9)\r\n4. **\uc720\ud29c\ube0c \uc601\uc0c1**: \ubc18\uc751\ud615 iframe\uc73c\ub85c \uc644\ubcbd \uc7ac\uc0dd\r\n5. **\ub370\uc774\ud130 \uc800\uc7a5**: localStorage\ub97c \ud65c\uc6a9\ud55c \ub4f1\ub85d \uc815\ubcf4 \uc800\uc7a5\r\n\r\n## \ud83d\udcf1 \ubaa8\ubc14\uc77c \ucd5c\uc801\ud654\r\n- \ud130\uce58 \uce5c\ud654\uc801\uc778 \ubc84\ud2bc \ud06c\uae30 (\ucd5c\uc18c 44px)\r\n- \uc785\ub825 \ud544\ub4dc \uc790\ub3d9 \ud3ec\ucee4\uc2a4 \ud6a8\uacfc\r\n- \uc804\ud654\ubc88\ud638 \uc790\ub3d9 \ud3ec\ub9f7\ud305 (010-0000-0000)\r\n- \ubd80\ub4dc\ub7ec\uc6b4 \uc2a4\ud06c\ub864\uacfc \ud130\uce58 \ubc18\uc751\r\n\r\n## \ud83d\udcbe \ub370\uc774\ud130 \uad00\ub9ac\r\n- \ubaa8\ub4e0 \ub4f1\ub85d \ub370\uc774\ud130\ub294 \ube0c\ub77c\uc6b0\uc800 localStorage\uc5d0 \uc800\uc7a5\r\n- \ucf58\uc194\uc5d0\uc11c \ub4f1\ub85d \ub370\uc774\ud130 \ud655\uc778 \uac00\ub2a5\r\n- 50\uba85 \ucd08\uacfc \uc2dc \uc790\ub3d9\uc73c\ub85c \ub4f1\ub85d \ucc28\ub2e8\r\n\r\n\uc774 \ud398\uc774\uc9c0\ub294 \uc644\uc804\ud788 \uc791\ub3d9\ud558\uba70 \uc989\uc2dc \uc0ac\uc6a9 \uac00\ub2a5\ud569\ub2c8\ub2e4. \uc2e4\uc81c \uc6b4\uc601 \uc2dc\uc5d0\ub294 localStorage \ub300\uc2e0 \uc11c\ubc84 API\uc640 \uc5f0\ub3d9\ud558\uc2dc\uba74 \ub429\ub2c8\ub2e4.\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>MCDI \ubca0\ud2b8\ub0a8 \uc815\uc218 \uc2dc\uc2a4\ud15c \uc138\ubbf8\ub098 | \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ud83c\uddf0\ud83c\uddf7 \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \uc2dc\uc2a4\ud15c 1\uc77c 100\ud1a4 \uc815\uc218 \ucc98\ub9ac \uae30\uc220 \uc138\ubbf8\ub098 \uc2dc\uc791\uae4c\uc9c0 0 \uc77c 0 \uc2dc\uac04 0 \ubd84 0 \ucd08 \ud604\uc7ac \ub4f1\ub85d \uc778\uc6d0 12 \/ 50\uba85 \ud83d\udcc5 \ud589\uc0ac \uc815\ubcf4 \uc77c\uc2dc: 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc \uc7a5\uc18c: \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ud604\uc7a5 \ub0b4\uc6a9: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3648","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/pages\/3648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/comments?post=3648"}],"version-history":[{"count":0,"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/pages\/3648\/revisions"}],"wp:attachment":[{"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/media?parent=3648"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/cellbio.shop\/ko_kr\/wp-json\/wp\/v2\/wf_page_folders?post=3648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}