\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad<\/title>\r\n <meta name=\"description\" content=\"\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 | \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 MCDI | 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 | 2025\ub144 11\uc6d4 3\uc77c 17:00~20:00 | \uc138\ubbf8\ub098\u00b7\ub9cc\ucc2c \ud3ec\ud568 | \uc120\ucc29\uc21c 50\uba85 \ucd08\uccad\" \/>\r\n <meta property=\"og:title\" content=\"\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad\" \/>\r\n <meta property=\"og:description\" content=\"1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568 \u00b7 \uc120\ucc29\uc21c 50\uba85\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta name=\"format-detection\" content=\"telephone=no\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n :root{\r\n --bg:#0b1220;\r\n --card:#0f1a2e;\r\n --muted:#98a3b8;\r\n --text:#e6edf7;\r\n --primary:#22d3ee;\r\n --accent:#4f46e5;\r\n --ok:#10b981;\r\n --warn:#f59e0b;\r\n --danger:#ef4444;\r\n --glass: rgba(255,255,255,.06);\r\n --border: rgba(255,255,255,.12);\r\n --shadow: 0 10px 40px rgba(0,0,0,.35);\r\n --radius:16px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{height:100%}\r\n body{\r\n margin:0;\r\n font-family:\"Noto Sans KR\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n color:var(--text);\r\n background:\r\n radial-gradient(1200px 600px at 80% -10%, #1b2a46 0%, transparent 60%),\r\n radial-gradient(800px 600px at -10% 30%, #0e2a35 0%, transparent 60%),\r\n linear-gradient(180deg, #06101f, #0b1220 40%, #0b1220 100%);\r\n }\r\n a{color:inherit;text-decoration:none}\r\n .container{max-width:840px;margin:0 auto;padding:18px}\r\n header{\r\n position:sticky;top:0;z-index:30;\r\n backdrop-filter:saturate(140%) blur(10px);\r\n background:linear-gradient(180deg, rgba(8,12,24,.85), rgba(8,12,24,.4));\r\n border-bottom:1px solid var(--border);\r\n }\r\n .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}\r\n .brand{display:flex;align-items:center;gap:10px}\r\n .logo{\r\n width:36px;height:36px;border-radius:10px;\r\n background: radial-gradient(circle at 30% 30%, #22d3ee, #4f46e5 60%, #0ea5e9 100%);\r\n box-shadow: 0 6px 20px rgba(34,211,238,.35);\r\n }\r\n .brand h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px}\r\n .brand .sub{font-size:12px;color:var(--muted)}\r\n .cta-top{\r\n display:inline-flex;align-items:center;gap:8px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#041018;padding:10px 14px;border-radius:12px;font-weight:700;\r\n box-shadow: 0 8px 24px rgba(34,211,238,.35);\r\n border:0;cursor:pointer\r\n }\r\n .cta-top:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n .hero{\r\n padding:22px 18px 8px 18px;\r\n }\r\n .headline{\r\n background:linear-gradient(135deg,#9ae6ff 0%, #e0e7ff 100%);\r\n -webkit-background-clip:text;background-clip:text;color:transparent;\r\n font-size:28px;line-height:1.2;font-weight:800;margin:6px 0 8px;\r\n letter-spacing:-.2px;\r\n }\r\n .eyebrow{\r\n display:inline-flex;gap:8px;align-items:center;\r\n padding:6px 10px;border:1px solid var(--border);\r\n border-radius:999px;background:var(--glass);\r\n color:#b7c3d9;font-size:12px\r\n }\r\n .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}\r\n .chip{\r\n font-size:12px;color:#c3cfe6;border:1px dashed var(--border);\r\n background:rgba(255,255,255,.04);padding:6px 10px;border-radius:999px\r\n }\r\n\r\n .panel{\r\n background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\r\n border:1px solid var(--border);\r\n border-radius:var(--radius);\r\n box-shadow:var(--shadow);\r\n padding:16px;\r\n margin:16px 0;\r\n }\r\n\r\n .stats{\r\n display:grid;grid-template-columns:1fr;gap:12px;\r\n }\r\n .countdown{\r\n display:flex;align-items:center;justify-content:center;gap:10px;\r\n padding:12px;border-radius:12px;background:rgba(15,26,46,.65);border:1px solid var(--border)\r\n }\r\n .cd-item{display:flex;flex-direction:column;align-items:center;min-width:62px}\r\n .cd-num{\r\n font-variant-numeric:tabular-nums;\r\n font-size:22px;font-weight:800;padding:10px 12px;border-radius:12px;\r\n background:linear-gradient(180deg,#0e203c, #0a1a30);\r\n border:1px solid var(--border);box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\r\n }\r\n .cd-label{font-size:11px;color:var(--muted);margin-top:6px}\r\n\r\n .capacity{margin-top:8px}\r\n .cap-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}\r\n .cap-row .left{font-size:13px;color:#cfe3ff}\r\n .cap-row .right{font-size:12px;color:var(--muted)}\r\n .bar{\r\n position:relative;height:10px;border-radius:999px;background:#0c1b2e;border:1px solid var(--border);overflow:hidden\r\n }\r\n .bar .fill{\r\n position:absolute;top:0;left:0;height:100%;width:0%;\r\n background:linear-gradient(90deg,#22d3ee,#60a5fa,#4f46e5);\r\n transition:width .35s ease;\r\n }\r\n\r\n .video, .gallery, .about{margin:16px 0}\r\n .section-title{font-weight:800;font-size:16px;margin:2px 0 10px;color:#d9e4ff}\r\n .video-embed{\r\n position:relative;width:100%;aspect-ratio:16\/9;border-radius:14px;\r\n overflow:hidden;border:1px solid var(--border);background:#000\r\n }\r\n .video-embed iframe{position:absolute;inset:0;width:100%;height:100%}\r\n\r\n .gallery-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#071423}\r\n .slides{display:flex;transition:transform .5s ease}\r\n .slide{min-width:100%;height:220px;background-size:cover;background-position:center}\r\n .g-nav{\r\n position:absolute;inset:auto 0 8px 0;display:flex;justify-content:center;gap:6px;z-index:2\r\n }\r\n .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}\r\n .dot.active{background:#fff}\r\n\r\n .details{\r\n display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px\r\n }\r\n .detail{\r\n display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.04);\r\n padding:12px;border-radius:12px;border:1px dashed var(--border)\r\n }\r\n .detail .icon{width:22px;height:22px;flex:0 0 22px;opacity:.9}\r\n .detail .txt .t{font-weight:700;font-size:14px}\r\n .detail .txt .d{font-size:13px;color:#c2cce2;margin-top:2px}\r\n\r\n .cta-sticky{\r\n position:sticky;bottom:0;z-index:25;padding:10px 12px;\r\n background:linear-gradient(180deg, rgba(7,12,24,0), rgba(7,12,24,.9));\r\n backdrop-filter:saturate(140%) blur(6px);\r\n border-top:1px solid var(--border);\r\n }\r\n .cta-btn{\r\n width:100%;display:flex;align-items:center;justify-content:center;gap:10px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#06121a;border:0;border-radius:14px;padding:14px 16px;font-weight:800;font-size:16px;\r\n box-shadow:0 12px 28px rgba(34,211,238,.28);\r\n cursor:pointer\r\n }\r\n .cta-btn:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n \/* Modal *\/\r\n .modal{\r\n position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:60;\r\n background:rgba(3,6,12,.6);backdrop-filter:blur(4px)\r\n }\r\n .modal[open]{display:flex}\r\n .sheet{\r\n width:100%;max-width:840px;background:linear-gradient(180deg,#0c1730,#0b1326);\r\n border-radius:18px 18px 0 0;border-top:1px solid var(--border);\r\n box-shadow:var(--shadow);padding:16px\r\n }\r\n .sheet header{position:relative;background:none;border:0}\r\n .sheet .title{font-weight:800;font-size:18px;margin:8px 0 10px}\r\n .close{\r\n position:absolute;right:6px;top:6px;background:transparent;border:0;color:#c9d6f2;font-size:22px\r\n }\r\n\r\n form .row{display:flex;flex-direction:column;gap:6px;margin:8px 0}\r\n label{font-size:13px;color:#cfe3ff}\r\n input{\r\n width:100%;padding:12px 12px;border-radius:12px;background:#0a1a30;border:1px solid var(--border);\r\n color:#eaf2ff;font-size:15px;outline:none\r\n }\r\n input::placeholder{color:#99a7c2}\r\n input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.18)}\r\n .agree{display:flex;gap:8px;align-items:flex-start;margin-top:6px;color:#b9c7e6;font-size:12px}\r\n .submit{\r\n margin-top:12px;width:100%;padding:14px;border-radius:14px;border:0;\r\n background:linear-gradient(135deg,#22d3ee,#60a5fa);color:#071626;font-weight:800;font-size:16px;\r\n cursor:pointer\r\n }\r\n .submit:disabled{opacity:.6;cursor:not-allowed}\r\n .helper{font-size:12px;color:#9eb3d8;margin-top:6px}\r\n\r\n .toast{\r\n position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);\r\n background:#0f1a2e;border:1px solid var(--border);padding:12px 16px;border-radius:12px;\r\n opacity:0;pointer-events:none;transition:all .25s ease;z-index:70\r\n }\r\n .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}\r\n footer{color:#8fa3c6;font-size:12px;padding:18px;text-align:center}\r\n \/* Desktop enhancements *\/\r\n @media(min-width:768px){\r\n .headline{font-size:36px}\r\n .slides .slide{height:300px}\r\n .stats{grid-template-columns:1fr 1fr;gap:16px}\r\n .hero{padding-top:28px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"topbar\">\r\n <div class=\"brand\">\r\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <h1>\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI<\/h1>\r\n <div class=\"sub\">\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \u00b7 \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-top\" id=\"openRegTop\">\r\n <span>\ucc38\uac00\ub4f1\ub85d<\/span>\r\n <span style=\"display:inline-flex;width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.18)\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container\">\r\n <section class=\"hero\">\r\n <span class=\"eyebrow\">\ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c<\/span>\r\n <h2 class=\"headline\">\ubca0\ud2b8\ub0a8 \ud604\uc9c0 \ucd5c\uc801\ud654 \uc815\uc218 \uae30\uc220 \ub370\ubaa8 & O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c<\/h2>\r\n <div class=\"chips\">\r\n <div class=\"chip\">2025\ub144 11\uc6d4 3\uc77c(\uc6d4) 17:00\u201320:00<\/div>\r\n <div class=\"chip\">\uc138\ubbf8\ub098 \u00b7 \ub9cc\ucc2c \ud3ec\ud568<\/div>\r\n <div class=\"chip\">\uc120\ucc29\uc21c 50\uba85 \ucd08\uccad<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <div class=\"stats\">\r\n <div>\r\n <div class=\"section-title\">\ud589\uc0ac \uc2dc\uc791\uae4c\uc9c0<\/div>\r\n <div class=\"countdown\" aria-live=\"polite\" aria-label=\"\ud589\uc0ac \uce74\uc6b4\ud2b8\ub2e4\uc6b4\">\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"d\">--<\/div><div class=\"cd-label\">Ng\u00e0y<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"h\">--<\/div><div class=\"cd-label\">\uc2dc\uac04<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"m\">--<\/div><div class=\"cd-label\">\ubd84<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"s\">--<\/div><div class=\"cd-label\">n\u1ebfn<\/div><\/div>\r\n <\/div>\r\n <div class=\"helper\">\uae30\uc900: 2025-11-03 17:00 (\ud0c0\uc784\uc874 \uc124\uc815 \ucf54\ub4dc\uc5d0\uc11c \ubcc0\uacbd \uac00\ub2a5)<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"section-title\">\uc811\uc218 \ud604\ud669<\/div>\r\n <div class=\"capacity\">\r\n <div class=\"cap-row\">\r\n <div class=\"left\">\r\n <strong id=\"countLabel\">0<\/strong> \/ <span id=\"capLabel\">50<\/span> \uba85 \uc811\uc218\r\n <\/div>\r\n <div class=\"right\" id=\"remainingLabel\">\ub0a8\uc740 \uc88c\uc11d 50<\/div>\r\n <\/div>\r\n <div class=\"bar\" aria-hidden=\"true\">\r\n <div class=\"fill\" id=\"capFill\" style=\"width:0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"cta-btn\" id=\"openRegHero\" aria-label=\"\ucc38\uac00 \ub4f1\ub85d\ud558\uae30\">\r\n \ud83d\udce9 \ucc38\uac00\ub4f1\ub85d\r\n <\/button>\r\n <\/section>\r\n\r\n <section class=\"video\">\r\n <div class=\"section-title\">\uc7a5\ube44\u00b7\uae30\uc220 \uc601\uc0c1<\/div>\r\n <div class=\"video-embed\" id=\"videoBox\" data-video-id=\"VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825\">\r\n \r\n <iframe id=\"ytFrame\" src=\"about:blank\" title=\"YouTube video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\r\n <\/div>\r\n <div class=\"helper\">\uc720\ud29c\ube0c \uc601\uc0c1 ID\ub9cc data-video-id\uc5d0 \ub123\uc73c\uba74 \uc790\ub3d9\uc73c\ub85c \ub85c\ub4dc\ub429\ub2c8\ub2e4.<\/div>\r\n <\/section>\r\n\r\n <section class=\"gallery\">\r\n <div class=\"section-title\">\uc0ac\uc9c4 \ub458\ub7ec\ubcf4\uae30<\/div>\r\n <div class=\"gallery-wrap\">\r\n <div class=\"slides\" id=\"slides\">\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1528821154947-1aa3d1b7491a?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"\uc815\uc218 \ud50c\ub79c\ud2b8 \uc804\uacbd\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1564865878688-9a2444440429?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"\ub9c9\uc5ec\uacfc \ubc0f \uc774\uc628\uc81c\uac70 \uc7a5\ube44\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1542326237-94b1c5a538b2?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"\ud604\uc7a5 \uc124\uce58 \ubc0f \uc2dc\uc6b4\uc804\"><\/div>\r\n <\/div>\r\n <div class=\"g-nav\" id=\"dots\" aria-hidden=\"true\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"about\">\r\n <div class=\"section-title\">\ud589\uc0ac \uc548\ub0b4<\/div>\r\n <div class=\"details\">\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 10h10M7 14h6\" stroke=\"#a5b4fc\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" stroke=\"#60a5fa\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\ud504\ub85c\uadf8\ub7a8<\/div>\r\n <div class=\"d\">\uc138\ubbf8\ub098(\uae30\uc220 \uc18c\uac1c\u00b7Q&A) + \uc7a5\ube44 \ub370\ubaa8 + \ub9cc\ucc2c \ub124\ud2b8\uc6cc\ud0b9<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 6v6l4 2\" stroke=\"#34d399\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#93c5fd\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\uc2dc\uac04<\/div>\r\n <div class=\"d\">2025\ub144 11\uc6d4 3\uc77c(\uc6d4) 17:00\u201320:00<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 7h16M4 12h16M4 17h10\" stroke=\"#22d3ee\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\ud575\uc2ec<\/div>\r\n <div class=\"d\">1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 \ubca0\ud2b8\ub0a8 \ud604\uc9c0 \uc218\uc9c8 \ucd5c\uc801\ud654 \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \uc18c\uac1c<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-8 10-4-5-4 6\" stroke=\"#fbbf24\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\uc815\uc6d0<\/div>\r\n <div class=\"d\">\uc120\ucc29\uc21c 50\uba85 (\ud604 \ud398\uc774\uc9c0\uc5d0\uc11c \uc2e4\uc2dc\uac04 \uce74\uc6b4\ud2b8)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <div class=\"section-title\">\ucd08\uccad \ub300\uc0c1<\/div>\r\n <ul style=\"margin:6px 0 0 16px; color:#c8d6f5; font-size:14px; line-height:1.6\">\r\n <li>\uc911\uc559\u00b7\uc9c0\ubc29 \uc815\ubd80\uae30\uad00 \ubc0f \uacf5\uae30\uc5c5<\/li>\r\n <li>\uc0c1\ud558\uc218\ub3c4, \uc218\ucc98\ub9ac, \ud658\uacbd\uc0b0\uc5c5 \uad00\ub828 \uae30\uc5c5<\/li>\r\n <li>\uc5f0\uad6c\uae30\uad00, \ub300\ud559, \uac1c\ubc1c\ud611\ub825\uae30\uad00 \ub4f1<\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n <div class=\"cta-sticky\">\r\n <button class=\"cta-btn\" id=\"openRegSticky\">\ud83d\udce9 \ucc38\uac00\ub4f1\ub85d<\/button>\r\n <\/div>\r\n <\/main>\r\n\r\n <dialog class=\"modal\" id=\"regModal\" aria-labelledby=\"regTitle\" aria-modal=\"true\">\r\n <div class=\"sheet\">\r\n <header>\r\n <div class=\"title\" id=\"regTitle\">\ucc38\uac00\ub4f1\ub85d<\/div>\r\n <button class=\"close\" id=\"closeReg\" aria-label=\"\ub2eb\uae30\">\u2715<\/button>\r\n <\/header>\r\n <form id=\"regForm\" autocomplete=\"on\" action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">\ud68c\uc0ac\/\uae30\uad00\uba85<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" placeholder=\"\uc608) O2&B, \u25cb\u25cb\uc2dc \uc0c1\uc218\ub3c4\uc0ac\uc5c5\ubcf8\ubd80\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"title\">\uc9c1\ud568<\/label>\r\n <input id=\"title\" name=\"title\" type=\"text\" placeholder=\"\uc608) \ud300\uc7a5, \uc5f0\uad6c\uc6d0, \uad6d\uc7a5\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"name\">\uc774\ub984<\/label>\r\n <input id=\"name\" name=\"name\" type=\"text\" placeholder=\"\ud64d\uae38\ub3d9\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"contact\">\uc5f0\ub77d\ucc98 (\ud734\ub300\ud3f0 \ub610\ub294 \uc774\uba54\uc77c)<\/label>\r\n <input id=\"contact\" name=\"contact\" type=\"text\" inputmode=\"email\" placeholder=\"010-1234-5678 \ub610\ub294 name@example.com\" required \/>\r\n <\/div>\r\n <div class=\"agree\">\r\n <input id=\"agree\" type=\"checkbox\" required \/>\r\n <label for=\"agree\">\uac1c\uc778\uc815\ubcf4(\uc774\ub984, \uc5f0\ub77d\ucc98, \uc18c\uc18d\u00b7\uc9c1\ud568)\ub294 \ud589\uc0ac \uc6b4\uc601 \ubaa9\uc801\uc73c\ub85c\ub9cc \uc0ac\uc6a9\ub418\uba70, \ud589\uc0ac \uc885\ub8cc \ud6c4 \ud30c\uae30\ub429\ub2c8\ub2e4.<\/label>\r\n <\/div>\r\n <button class=\"submit\" id=\"submitBtn\" type=\"submit\">\uc811\uc218\ud558\uae30<\/button>\r\n <div class=\"helper\">\uc815\uc6d0 50\uba85 \ucd08\uacfc \uc2dc \uc811\uc218\uac00 \uc790\ub3d9 \ub9c8\uac10\ub429\ub2c8\ub2e4.<\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"vi\"\/><\/form>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!<\/div>\r\n\r\n <footer>\r\n \u00a9 2025 \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \u00b7 \ubcf8 \ud398\uc774\uc9c0\ub294 \ub370\ubaa8\ub85c \ub85c\uceec \uc800\uc7a5(\ube0c\ub77c\uc6b0\uc800) \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc2e4\uc81c \uc6b4\uc601 \uc2dc \uc11c\ubc84 \uc5f0\ub3d9 \ud544\uc694.\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ ===== \uc124\uc815 =====\r\n const CAPACITY = 50;\r\n \/\/ \ud589\uc0ac \uc2dc\uc791 \uc2dc\uac01: \ud55c\uad6d\uc2dc\uac04(KST, UTC+9). \ubca0\ud2b8\ub0a8\uc2dc\uac04(UTC+7)\uc73c\ub85c \ubc14\uafb8\ub824\uba74 +07:00\ub85c \ubcc0\uacbd.\r\n const EVENT_ISO = '2025-11-03T17:00:00+09:00';\r\n\r\n \/\/ ===== \uc800\uc7a5\uc18c \ud0a4 =====\r\n const STORE_KEY = 'mcdi_registrations_v1';\r\n\r\n \/\/ ===== \uc720\ud2f8 =====\r\n const $ = (s) => document.querySelector(s);\r\n const $$ = (s) => document.querySelectorAll(s);\r\n\r\n function loadRegs(){\r\n try{\r\n const v = JSON.parse(localStorage.getItem(STORE_KEY) || '[]');\r\n return Array.isArray(v) ? v : [];\r\n }catch(e){ return []; }\r\n }\r\n function saveRegs(list){\r\n localStorage.setItem(STORE_KEY, JSON.stringify(list));\r\n }\r\n function showToast(msg='\ucc98\ub9ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'){\r\n const t = $('#toast'); t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(()=>t.classList.remove('show'), 2200);\r\n }\r\n\r\n \/\/ ===== \uce74\uc6b4\ud2b8\ub2e4\uc6b4 =====\r\n function startCountdown(){\r\n const target = new Date(EVENT_ISO).getTime();\r\n function tick(){\r\n const now = Date.now();\r\n let diff = Math.max(0, target - now);\r\n const d = Math.floor(diff \/ (1000*60*60*24)); diff -= d*24*60*60*1000;\r\n const h = Math.floor(diff \/ (1000*60*60)); diff -= h*60*60*1000;\r\n const m = Math.floor(diff \/ (1000*60)); diff -= m*60*1000;\r\n const s = Math.floor(diff \/ 1000);\r\n $('#d').textContent = String(d).padStart(2,'0');\r\n $('#h').textContent = String(h).padStart(2,'0');\r\n $('#m').textContent = String(m).padStart(2,'0');\r\n $('#s').textContent = String(s).padStart(2,'0');\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n }\r\n\r\n \/\/ ===== \uc6a9\ub7c9 \ud45c\uc2dc =====\r\n function updateCapacityUI(){\r\n const regs = loadRegs();\r\n const count = regs.length;\r\n const remaining = Math.max(0, CAPACITY - count);\r\n $('#countLabel').textContent = count;\r\n $('#capLabel').textContent = CAPACITY;\r\n $('#remainingLabel').textContent = remaining === 0 ? '\ub9c8\uac10' : `\ub0a8\uc740 \uc88c\uc11d ${remaining}`;\r\n const fill = Math.min(100, Math.round((count \/ CAPACITY) * 100));\r\n $('#capFill').style.width = fill + '%';\r\n\r\n const disabled = count >= CAPACITY;\r\n ['#openRegTop','#openRegHero','#openRegSticky','#submitBtn'].forEach(sel=>{\r\n const el = $(sel); if(!el) return;\r\n el.disabled = disabled;\r\n });\r\n if(disabled){\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4');\r\n }else{\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\uc811\uc218\ud558\uae30');\r\n }\r\n }\r\n\r\n \/\/ ===== \uc911\ubcf5 \uccb4\ud06c: \uc5f0\ub77d\ucc98 \uae30\uc900 =====\r\n function isDuplicateContact(contact){\r\n const regs = loadRegs();\r\n return regs.some(r => (r.contact || '').trim().toLowerCase() === contact.trim().toLowerCase());\r\n }\r\n\r\n \/\/ ===== \uac04\ub2e8\ud55c \uc720\ud6a8\uc131 \uac80\uc0ac =====\r\n function validContact(v){\r\n const s = v.trim();\r\n const email = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/i.test(s);\r\n const phone = \/^(0\\d{1,2}-?\\d{3,4}-?\\d{4}|0\\d{8,10}|\\+?\\d{7,15})$\/.test(s.replace(\/\\s\/g,''));\r\n return email || phone;\r\n }\r\n\r\n \/\/ ===== \ub4f1\ub85d \uc800\uc7a5 (\ub85c\uceec \uc800\uc7a5) =====\r\n function saveRegistration(data){\r\n const regs = loadRegs();\r\n regs.push({\r\n ...data,\r\n ts: Date.now()\r\n });\r\n saveRegs(regs);\r\n updateCapacityUI();\r\n return true;\r\n }\r\n\r\n \/* ===== \uc11c\ubc84 \uc5f0\ub3d9 \uc608\uc2dc (\uc6b4\uc601 \uad8c\uc7a5) =====\r\n async function saveRegistrationToServer(data){\r\n const res = await fetch('https:\/\/YOUR_API_ENDPOINT\/registrations', {\r\n method:'POST',\r\n headers:{'Content-Type':'application\/json'},\r\n body:JSON.stringify(data)\r\n });\r\n if(!res.ok) throw new Error('\uc11c\ubc84 \uc800\uc7a5 \uc2e4\ud328');\r\n const { total } = await res.json(); \/\/ \uc11c\ubc84\uac00 \ucd1d \uc778\uc6d0 \ubc18\ud658\ud55c\ub2e4\uace0 \uac00\uc815\r\n return total; \/\/ total\uc744 UI\uc5d0 \ubc18\uc601\ud558\ub3c4\ub85d updateCapacityUI\ub300\uc2e0 \uc0ac\uc6a9\r\n }\r\n *\/\r\n\r\n \/\/ ===== \ubaa8\ub2ec =====\r\n const regModal = $('#regModal');\r\n function openModal(){\r\n regModal.setAttribute('open','');\r\n document.body.style.overflow='hidden';\r\n $('#org').focus();\r\n }\r\n function closeModal(){\r\n regModal.removeAttribute('open');\r\n document.body.style.overflow='';\r\n $('#regForm').reset();\r\n }\r\n\r\n \/\/ ===== YouTube ID \ub85c\ub529 =====\r\n function loadYouTube(){\r\n const box = $('#videoBox');\r\n const vid = (box.getAttribute('data-video-id') || '').trim();\r\n const frame = $('#ytFrame');\r\n if(vid && vid !== 'VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825'){\r\n const src = `https:\/\/www.youtube.com\/embed\/${encodeURIComponent(vid)}?rel=0&modestbranding=1&playsinline=1`;\r\n frame.src = src;\r\n }else{\r\n frame.src = 'https:\/\/www.youtube.com\/embed\/1La4QzGeaaQ?rel=0&modestbranding=1&playsinline=1';\r\n \/\/ \uc704\ub294 \uc0d8\ud50c \uc601\uc0c1\uc785\ub2c8\ub2e4. data-video-id\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n }\r\n }\r\n\r\n \/\/ ===== \uc2ac\ub77c\uc774\ub354 =====\r\n let slideIndex = 0, slideCount = 0, sliderTimer = null, touchStartX = 0, touchEndX = 0;\r\n function initSlider(){\r\n const slides = $('#slides');\r\n slideCount = slides.children.length;\r\n const dots = $('#dots');\r\n dots.innerHTML = '';\r\n for(let i=0;i<slideCount;i++){\r\n const d = document.createElement('div');\r\n d.className = 'dot' + (i===0 ? ' active':'');\r\n d.dataset.index = i;\r\n d.addEventListener('click', ()=>goSlide(i,true));\r\n dots.appendChild(d);\r\n }\r\n const wrap = slides.parentElement;\r\n wrap.addEventListener('touchstart', e=>{ touchStartX = e.changedTouches[0].screenX; });\r\n wrap.addEventListener('touchend', e=>{\r\n touchEndX = e.changedTouches[0].screenX;\r\n const dx = touchEndX - touchStartX;\r\n if(Math.abs(dx) > 40){\r\n if(dx < 0) goSlide(Math.min(slideIndex+1, slideCount-1), true);\r\n else goSlide(Math.max(slideIndex-1, 0), true);\r\n }\r\n });\r\n autoSlide();\r\n window.addEventListener('visibilitychange', ()=>{\r\n if(document.hidden){ clearInterval(sliderTimer); }\r\n else autoSlide();\r\n });\r\n }\r\n function goSlide(i, stopAuto=false){\r\n slideIndex = i;\r\n const slides = $('#slides');\r\n slides.style.transform = `translateX(-${i*100}%)`;\r\n $$('#dots .dot').forEach((d,idx)=>d.classList.toggle('active', idx===i));\r\n if(stopAuto){ clearInterval(sliderTimer); autoSlide(); }\r\n }\r\n function autoSlide(){\r\n clearInterval(sliderTimer);\r\n sliderTimer = setInterval(()=>{\r\n slideIndex = (slideIndex + 1) % slideCount;\r\n goSlide(slideIndex,false);\r\n }, 3500);\r\n }\r\n\r\n \/\/ ===== \ucd08\uae30\ud654 =====\r\n document.addEventListener('DOMContentLoaded', ()=>{\r\n \/\/ \ubc84\ud2bc \ubc14\uc778\ub529\r\n ['#openRegTop','#openRegHero','#openRegSticky'].forEach(sel=>{\r\n const el = $(sel); el && el.addEventListener('click', openModal);\r\n });\r\n $('#closeReg').addEventListener('click', closeModal);\r\n $('#regModal').addEventListener('click', (e)=>{ if(e.target.id==='regModal') closeModal(); });\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c\r\n $('#regForm').addEventListener('submit', async (e)=>{\r\n e.preventDefault();\r\n const count = loadRegs().length;\r\n if(count >= CAPACITY){\r\n showToast('\uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n updateCapacityUI();\r\n return;\r\n }\r\n const org = $('#org').value.trim();\r\n const title = $('#title').value.trim();\r\n const name = $('#name').value.trim();\r\n const contact = $('#contact').value.trim();\r\n const agree = $('#agree').checked;\r\n\r\n if(!org || !title || !name || !contact || !agree){\r\n showToast('\ud544\uc218 \ud56d\ubaa9\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n return;\r\n }\r\n if(!validContact(contact)){\r\n showToast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n $('#contact').focus();\r\n return;\r\n }\r\n if(isDuplicateContact(contact)){\r\n showToast('\uc774\ubbf8 \uc811\uc218\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n const data = { org, title, name, contact };\r\n \/\/ \ub85c\uceec \uc800\uc7a5\r\n const ok = saveRegistration(data);\r\n if(ok){\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n }\r\n\r\n \/* \uc11c\ubc84 \uc800\uc7a5(\uc6b4\uc601) \uc0ac\uc6a9 \uc2dc:\r\n try{\r\n const total = await saveRegistrationToServer(data);\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n \/\/ \uc11c\ubc84 total\uc744 \uc0ac\uc6a9\ud558\uc5ec UI \uac31\uc2e0\r\n \/\/ \ucee4\uc2a4\ud140: updateCapacityUIFromServer(total);\r\n }catch(err){\r\n console.error(err);\r\n showToast('\uc11c\ubc84 \uc624\ub958\ub85c \uc811\uc218\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.');\r\n }\r\n *\/\r\n });\r\n\r\n \/\/ UI \ucd08\uae30 \uc0c1\ud0dc\r\n updateCapacityUI();\r\n startCountdown();\r\n loadYouTube();\r\n initSlider();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n```\r\n\r\n\uc124\uba85 \uc694\uc57d\r\n- \ucc38\uac00\ub4f1\ub85d \uc800\uc7a5: \ube0c\ub77c\uc6b0\uc800 localStorage\uc5d0 \uc800\uc7a5\ub418\uba70 \uce74\uc6b4\ud130\uac00 \uc2e4\uc2dc\uac04 \ubc18\uc601\ub429\ub2c8\ub2e4. \uc815\uc6d0\uc774 50\uba85\uc5d0 \ub3c4\ub2ec\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ubc84\ud2bc\uc774 \ube44\ud65c\uc131\ud654\ub418\uace0 \u201c\ub9c8\uac10\u201d\uc73c\ub85c \ud45c\uae30\ub429\ub2c8\ub2e4.\r\n- \ud0c0\uc774\uba38: 2025-11-03 17:00 \uae30\uc900\uc73c\ub85c \uce74\uc6b4\ud2b8\ub2e4\uc6b4\ud569\ub2c8\ub2e4. \ubca0\ud2b8\ub0a8 \uc2dc\uac04\uc73c\ub85c \ubcc0\uacbd\ud558\ub824\uba74 EVENT_ISO\uc758 +09:00\uc744 +07:00\uc73c\ub85c \ubc14\uafb8\uc138\uc694.\r\n- \uc720\ud29c\ube0c \uc601\uc0c1: data-video-id \uc18d\uc131\uc5d0 \uc2e4\uc81c \uc601\uc0c1 ID\ub9cc \ub123\uc73c\uba74 \uc790\ub3d9\uc73c\ub85c \ub85c\ub4dc\ub429\ub2c8\ub2e4.\r\n- \uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc: \uc790\ub3d9 \uc7ac\uc0dd \ubc0f \ud130\uce58 \uc2a4\uc640\uc774\ud504 \uc9c0\uc6d0.\r\n\r\n\uc2e4\uc6b4\uc601 \ud301\r\n- \ud604\uc7ac\ub294 \ub85c\uceec \uc800\uc7a5\uc774\ub77c \uc0ac\uc6a9\uc790 \ube0c\ub77c\uc6b0\uc800\ubcc4\ub85c \ub530\ub85c \uc800\uc7a5\ub429\ub2c8\ub2e4. \uc2e4\uc81c \uc9d1\uacc4\uac00 \ud544\uc694\ud558\uba74 \uc8fc\uc11d\uc758 saveRegistrationToServer \uc608\uc2dc\ucc98\ub7fc \uc11c\ubc84 API\ub97c \uc5f0\uacb0\ud574 \ucd1d \uc811\uc218 \uc778\uc6d0\uc744 \uad00\ub9ac\ud558\uc138\uc694.\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\uc544\ub798\ub294 \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \ud589\uc0ac \ucd08\uccad \ub79c\ub529\ud398\uc774\uc9c0 \uc804\uccb4 HTML\uc785\ub2c8\ub2e4. \uadf8\ub300\ub85c \ubcf5\uc0ac\ud574 \ubd99\uc5ec\ub123\uc73c\uba74 \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc800\uc7a5\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \ub85c\uceec \uc800\uc7a5\uc18c(localStorage)\uc5d0 \uc800\uc7a5\ub418\uba70, \uc2e4\uc81c \uc6b4\uc601 \uc2dc\uc5d0\ub294 \uc8fc\uc11d\uc758 API \uc5f0\ub3d9 \ubd80\ubd84\uc744 \ucc38\uace0\ud574 \uc11c\ubc84 \uc800\uc7a5\uc73c\ub85c \ubc14\uafd4\uc8fc\uc138\uc694. “`html \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \u00b7 \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \ucc38\uac00\ub4f1\ub85d \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ubca0\ud2b8\ub0a8 \ud604\uc9c0 \ucd5c\uc801\ud654 […]<\/p>","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-3635","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":0,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/wf_page_folders?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\r\n\t\t\t\t\t

\r\n\t\t\t\t

\n\t\t\t\t\t\uc544\ub798\ub294 \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \ud589\uc0ac \ucd08\uccad \ub79c\ub529\ud398\uc774\uc9c0 \uc804\uccb4 HTML\uc785\ub2c8\ub2e4. \uadf8\ub300\ub85c \ubcf5\uc0ac\ud574 \ubd99\uc5ec\ub123\uc73c\uba74 \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc800\uc7a5\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \ub85c\uceec \uc800\uc7a5\uc18c(localStorage)\uc5d0 \uc800\uc7a5\ub418\uba70, \uc2e4\uc81c \uc6b4\uc601 \uc2dc\uc5d0\ub294 \uc8fc\uc11d\uc758 API \uc5f0\ub3d9 \ubd80\ubd84\uc744 \ucc38\uace0\ud574 \uc11c\ubc84 \uc800\uc7a5\uc73c\ub85c \ubc14\uafd4\uc8fc\uc138\uc694.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad<\/title>\r\n <meta name=\"description\" content=\"\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5 | \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 MCDI | 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 | 2025\ub144 11\uc6d4 3\uc77c 17:00~20:00 | \uc138\ubbf8\ub098\u00b7\ub9cc\ucc2c \ud3ec\ud568 | \uc120\ucc29\uc21c 50\uba85 \ucd08\uccad\" \/>\r\n <meta property=\"og:title\" content=\"\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad\" \/>\r\n <meta property=\"og:description\" content=\"1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568 \u00b7 \uc120\ucc29\uc21c 50\uba85\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta name=\"format-detection\" content=\"telephone=no\" \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n :root{\r\n --bg:#0b1220;\r\n --card:#0f1a2e;\r\n --muted:#98a3b8;\r\n --text:#e6edf7;\r\n --primary:#22d3ee;\r\n --accent:#4f46e5;\r\n --ok:#10b981;\r\n --warn:#f59e0b;\r\n --danger:#ef4444;\r\n --glass: rgba(255,255,255,.06);\r\n --border: rgba(255,255,255,.12);\r\n --shadow: 0 10px 40px rgba(0,0,0,.35);\r\n --radius:16px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{height:100%}\r\n body{\r\n margin:0;\r\n font-family:\"Noto Sans KR\", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n color:var(--text);\r\n background:\r\n radial-gradient(1200px 600px at 80% -10%, #1b2a46 0%, transparent 60%),\r\n radial-gradient(800px 600px at -10% 30%, #0e2a35 0%, transparent 60%),\r\n linear-gradient(180deg, #06101f, #0b1220 40%, #0b1220 100%);\r\n }\r\n a{color:inherit;text-decoration:none}\r\n .container{max-width:840px;margin:0 auto;padding:18px}\r\n header{\r\n position:sticky;top:0;z-index:30;\r\n backdrop-filter:saturate(140%) blur(10px);\r\n background:linear-gradient(180deg, rgba(8,12,24,.85), rgba(8,12,24,.4));\r\n border-bottom:1px solid var(--border);\r\n }\r\n .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}\r\n .brand{display:flex;align-items:center;gap:10px}\r\n .logo{\r\n width:36px;height:36px;border-radius:10px;\r\n background: radial-gradient(circle at 30% 30%, #22d3ee, #4f46e5 60%, #0ea5e9 100%);\r\n box-shadow: 0 6px 20px rgba(34,211,238,.35);\r\n }\r\n .brand h1{font-size:16px;margin:0;font-weight:800;letter-spacing:.2px}\r\n .brand .sub{font-size:12px;color:var(--muted)}\r\n .cta-top{\r\n display:inline-flex;align-items:center;gap:8px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#041018;padding:10px 14px;border-radius:12px;font-weight:700;\r\n box-shadow: 0 8px 24px rgba(34,211,238,.35);\r\n border:0;cursor:pointer\r\n }\r\n .cta-top:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n .hero{\r\n padding:22px 18px 8px 18px;\r\n }\r\n .headline{\r\n background:linear-gradient(135deg,#9ae6ff 0%, #e0e7ff 100%);\r\n -webkit-background-clip:text;background-clip:text;color:transparent;\r\n font-size:28px;line-height:1.2;font-weight:800;margin:6px 0 8px;\r\n letter-spacing:-.2px;\r\n }\r\n .eyebrow{\r\n display:inline-flex;gap:8px;align-items:center;\r\n padding:6px 10px;border:1px solid var(--border);\r\n border-radius:999px;background:var(--glass);\r\n color:#b7c3d9;font-size:12px\r\n }\r\n .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}\r\n .chip{\r\n font-size:12px;color:#c3cfe6;border:1px dashed var(--border);\r\n background:rgba(255,255,255,.04);padding:6px 10px;border-radius:999px\r\n }\r\n\r\n .panel{\r\n background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));\r\n border:1px solid var(--border);\r\n border-radius:var(--radius);\r\n box-shadow:var(--shadow);\r\n padding:16px;\r\n margin:16px 0;\r\n }\r\n\r\n .stats{\r\n display:grid;grid-template-columns:1fr;gap:12px;\r\n }\r\n .countdown{\r\n display:flex;align-items:center;justify-content:center;gap:10px;\r\n padding:12px;border-radius:12px;background:rgba(15,26,46,.65);border:1px solid var(--border)\r\n }\r\n .cd-item{display:flex;flex-direction:column;align-items:center;min-width:62px}\r\n .cd-num{\r\n font-variant-numeric:tabular-nums;\r\n font-size:22px;font-weight:800;padding:10px 12px;border-radius:12px;\r\n background:linear-gradient(180deg,#0e203c, #0a1a30);\r\n border:1px solid var(--border);box-shadow: inset 0 1px 0 rgba(255,255,255,.06);\r\n }\r\n .cd-label{font-size:11px;color:var(--muted);margin-top:6px}\r\n\r\n .capacity{margin-top:8px}\r\n .cap-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}\r\n .cap-row .left{font-size:13px;color:#cfe3ff}\r\n .cap-row .right{font-size:12px;color:var(--muted)}\r\n .bar{\r\n position:relative;height:10px;border-radius:999px;background:#0c1b2e;border:1px solid var(--border);overflow:hidden\r\n }\r\n .bar .fill{\r\n position:absolute;top:0;left:0;height:100%;width:0%;\r\n background:linear-gradient(90deg,#22d3ee,#60a5fa,#4f46e5);\r\n transition:width .35s ease;\r\n }\r\n\r\n .video, .gallery, .about{margin:16px 0}\r\n .section-title{font-weight:800;font-size:16px;margin:2px 0 10px;color:#d9e4ff}\r\n .video-embed{\r\n position:relative;width:100%;aspect-ratio:16\/9;border-radius:14px;\r\n overflow:hidden;border:1px solid var(--border);background:#000\r\n }\r\n .video-embed iframe{position:absolute;inset:0;width:100%;height:100%}\r\n\r\n .gallery-wrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#071423}\r\n .slides{display:flex;transition:transform .5s ease}\r\n .slide{min-width:100%;height:220px;background-size:cover;background-position:center}\r\n .g-nav{\r\n position:absolute;inset:auto 0 8px 0;display:flex;justify-content:center;gap:6px;z-index:2\r\n }\r\n .dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35)}\r\n .dot.active{background:#fff}\r\n\r\n .details{\r\n display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px\r\n }\r\n .detail{\r\n display:flex;gap:10px;align-items:flex-start;background:rgba(255,255,255,.04);\r\n padding:12px;border-radius:12px;border:1px dashed var(--border)\r\n }\r\n .detail .icon{width:22px;height:22px;flex:0 0 22px;opacity:.9}\r\n .detail .txt .t{font-weight:700;font-size:14px}\r\n .detail .txt .d{font-size:13px;color:#c2cce2;margin-top:2px}\r\n\r\n .cta-sticky{\r\n position:sticky;bottom:0;z-index:25;padding:10px 12px;\r\n background:linear-gradient(180deg, rgba(7,12,24,0), rgba(7,12,24,.9));\r\n backdrop-filter:saturate(140%) blur(6px);\r\n border-top:1px solid var(--border);\r\n }\r\n .cta-btn{\r\n width:100%;display:flex;align-items:center;justify-content:center;gap:10px;\r\n background:linear-gradient(135deg,var(--primary),#60a5fa);\r\n color:#06121a;border:0;border-radius:14px;padding:14px 16px;font-weight:800;font-size:16px;\r\n box-shadow:0 12px 28px rgba(34,211,238,.28);\r\n cursor:pointer\r\n }\r\n .cta-btn:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}\r\n\r\n \/* Modal *\/\r\n .modal{\r\n position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:60;\r\n background:rgba(3,6,12,.6);backdrop-filter:blur(4px)\r\n }\r\n .modal[open]{display:flex}\r\n .sheet{\r\n width:100%;max-width:840px;background:linear-gradient(180deg,#0c1730,#0b1326);\r\n border-radius:18px 18px 0 0;border-top:1px solid var(--border);\r\n box-shadow:var(--shadow);padding:16px\r\n }\r\n .sheet header{position:relative;background:none;border:0}\r\n .sheet .title{font-weight:800;font-size:18px;margin:8px 0 10px}\r\n .close{\r\n position:absolute;right:6px;top:6px;background:transparent;border:0;color:#c9d6f2;font-size:22px\r\n }\r\n\r\n form .row{display:flex;flex-direction:column;gap:6px;margin:8px 0}\r\n label{font-size:13px;color:#cfe3ff}\r\n input{\r\n width:100%;padding:12px 12px;border-radius:12px;background:#0a1a30;border:1px solid var(--border);\r\n color:#eaf2ff;font-size:15px;outline:none\r\n }\r\n input::placeholder{color:#99a7c2}\r\n input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.18)}\r\n .agree{display:flex;gap:8px;align-items:flex-start;margin-top:6px;color:#b9c7e6;font-size:12px}\r\n .submit{\r\n margin-top:12px;width:100%;padding:14px;border-radius:14px;border:0;\r\n background:linear-gradient(135deg,#22d3ee,#60a5fa);color:#071626;font-weight:800;font-size:16px;\r\n cursor:pointer\r\n }\r\n .submit:disabled{opacity:.6;cursor:not-allowed}\r\n .helper{font-size:12px;color:#9eb3d8;margin-top:6px}\r\n\r\n .toast{\r\n position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);\r\n background:#0f1a2e;border:1px solid var(--border);padding:12px 16px;border-radius:12px;\r\n opacity:0;pointer-events:none;transition:all .25s ease;z-index:70\r\n }\r\n .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}\r\n footer{color:#8fa3c6;font-size:12px;padding:18px;text-align:center}\r\n \/* Desktop enhancements *\/\r\n @media(min-width:768px){\r\n .headline{font-size:36px}\r\n .slides .slide{height:300px}\r\n .stats{grid-template-columns:1fr 1fr;gap:16px}\r\n .hero{padding-top:28px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <header>\r\n <div class=\"topbar\">\r\n <div class=\"brand\">\r\n <div class=\"logo\" aria-hidden=\"true\"><\/div>\r\n <div>\r\n <h1>\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI<\/h1>\r\n <div class=\"sub\">\ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \u00b7 \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-top\" id=\"openRegTop\">\r\n <span>\ucc38\uac00\ub4f1\ub85d<\/span>\r\n <span style=\"display:inline-flex;width:8px;height:8px;border-radius:999px;background:var(--ok);box-shadow:0 0 0 4px rgba(16,185,129,.18)\"><\/span>\r\n <\/button>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"container\">\r\n <section class=\"hero\">\r\n <span class=\"eyebrow\">\ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c<\/span>\r\n <h2 class=\"headline\">\ubca0\ud2b8\ub0a8 \ud604\uc9c0 \ucd5c\uc801\ud654 \uc815\uc218 \uae30\uc220 \ub370\ubaa8 & O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c<\/h2>\r\n <div class=\"chips\">\r\n <div class=\"chip\">2025\ub144 11\uc6d4 3\uc77c(\uc6d4) 17:00\u201320:00<\/div>\r\n <div class=\"chip\">\uc138\ubbf8\ub098 \u00b7 \ub9cc\ucc2c \ud3ec\ud568<\/div>\r\n <div class=\"chip\">\uc120\ucc29\uc21c 50\uba85 \ucd08\uccad<\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\">\r\n <div class=\"stats\">\r\n <div>\r\n <div class=\"section-title\">\ud589\uc0ac \uc2dc\uc791\uae4c\uc9c0<\/div>\r\n <div class=\"countdown\" aria-live=\"polite\" aria-label=\"\ud589\uc0ac \uce74\uc6b4\ud2b8\ub2e4\uc6b4\">\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"d\">--<\/div><div class=\"cd-label\">Ng\u00e0y<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"h\">--<\/div><div class=\"cd-label\">\uc2dc\uac04<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"m\">--<\/div><div class=\"cd-label\">\ubd84<\/div><\/div>\r\n <div class=\"cd-item\"><div class=\"cd-num\" id=\"s\">--<\/div><div class=\"cd-label\">n\u1ebfn<\/div><\/div>\r\n <\/div>\r\n <div class=\"helper\">\uae30\uc900: 2025-11-03 17:00 (\ud0c0\uc784\uc874 \uc124\uc815 \ucf54\ub4dc\uc5d0\uc11c \ubcc0\uacbd \uac00\ub2a5)<\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"section-title\">\uc811\uc218 \ud604\ud669<\/div>\r\n <div class=\"capacity\">\r\n <div class=\"cap-row\">\r\n <div class=\"left\">\r\n <strong id=\"countLabel\">0<\/strong> \/ <span id=\"capLabel\">50<\/span> \uba85 \uc811\uc218\r\n <\/div>\r\n <div class=\"right\" id=\"remainingLabel\">\ub0a8\uc740 \uc88c\uc11d 50<\/div>\r\n <\/div>\r\n <div class=\"bar\" aria-hidden=\"true\">\r\n <div class=\"fill\" id=\"capFill\" style=\"width:0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"cta-btn\" id=\"openRegHero\" aria-label=\"\ucc38\uac00 \ub4f1\ub85d\ud558\uae30\">\r\n \ud83d\udce9 \ucc38\uac00\ub4f1\ub85d\r\n <\/button>\r\n <\/section>\r\n\r\n <section class=\"video\">\r\n <div class=\"section-title\">\uc7a5\ube44\u00b7\uae30\uc220 \uc601\uc0c1<\/div>\r\n <div class=\"video-embed\" id=\"videoBox\" data-video-id=\"VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825\">\r\n \r\n <iframe id=\"ytFrame\" src=\"about:blank\" title=\"YouTube video\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe>\r\n <\/div>\r\n <div class=\"helper\">\uc720\ud29c\ube0c \uc601\uc0c1 ID\ub9cc data-video-id\uc5d0 \ub123\uc73c\uba74 \uc790\ub3d9\uc73c\ub85c \ub85c\ub4dc\ub429\ub2c8\ub2e4.<\/div>\r\n <\/section>\r\n\r\n <section class=\"gallery\">\r\n <div class=\"section-title\">\uc0ac\uc9c4 \ub458\ub7ec\ubcf4\uae30<\/div>\r\n <div class=\"gallery-wrap\">\r\n <div class=\"slides\" id=\"slides\">\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1528821154947-1aa3d1b7491a?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"\uc815\uc218 \ud50c\ub79c\ud2b8 \uc804\uacbd\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1564865878688-9a2444440429?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"\ub9c9\uc5ec\uacfc \ubc0f \uc774\uc628\uc81c\uac70 \uc7a5\ube44\"><\/div>\r\n <div class=\"slide\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1542326237-94b1c5a538b2?q=80&w=1400&auto=format&fit=crop');\" role=\"img\" aria-label=\"\ud604\uc7a5 \uc124\uce58 \ubc0f \uc2dc\uc6b4\uc804\"><\/div>\r\n <\/div>\r\n <div class=\"g-nav\" id=\"dots\" aria-hidden=\"true\"><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"about\">\r\n <div class=\"section-title\">\ud589\uc0ac \uc548\ub0b4<\/div>\r\n <div class=\"details\">\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M7 10h10M7 14h6\" stroke=\"#a5b4fc\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" stroke=\"#60a5fa\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\ud504\ub85c\uadf8\ub7a8<\/div>\r\n <div class=\"d\">\uc138\ubbf8\ub098(\uae30\uc220 \uc18c\uac1c\u00b7Q&A) + \uc7a5\ube44 \ub370\ubaa8 + \ub9cc\ucc2c \ub124\ud2b8\uc6cc\ud0b9<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M12 6v6l4 2\" stroke=\"#34d399\" stroke-width=\"1.8\" stroke-linecap=\"round\"\/><circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"#93c5fd\" stroke-width=\"1.6\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\uc2dc\uac04<\/div>\r\n <div class=\"d\">2025\ub144 11\uc6d4 3\uc77c(\uc6d4) 17:00\u201320:00<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M4 7h16M4 12h16M4 17h10\" stroke=\"#22d3ee\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\ud575\uc2ec<\/div>\r\n <div class=\"d\">1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 \ubca0\ud2b8\ub0a8 \ud604\uc9c0 \uc218\uc9c8 \ucd5c\uc801\ud654 \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \uc18c\uac1c<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail\">\r\n <svg class=\"icon\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M20 7l-8 10-4-5-4 6\" stroke=\"#fbbf24\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n <div class=\"txt\">\r\n <div class=\"t\">\uc815\uc6d0<\/div>\r\n <div class=\"d\">\uc120\ucc29\uc21c 50\uba85 (\ud604 \ud398\uc774\uc9c0\uc5d0\uc11c \uc2e4\uc2dc\uac04 \uce74\uc6b4\ud2b8)<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"panel\">\r\n <div class=\"section-title\">\ucd08\uccad \ub300\uc0c1<\/div>\r\n <ul style=\"margin:6px 0 0 16px; color:#c8d6f5; font-size:14px; line-height:1.6\">\r\n <li>\uc911\uc559\u00b7\uc9c0\ubc29 \uc815\ubd80\uae30\uad00 \ubc0f \uacf5\uae30\uc5c5<\/li>\r\n <li>\uc0c1\ud558\uc218\ub3c4, \uc218\ucc98\ub9ac, \ud658\uacbd\uc0b0\uc5c5 \uad00\ub828 \uae30\uc5c5<\/li>\r\n <li>\uc5f0\uad6c\uae30\uad00, \ub300\ud559, \uac1c\ubc1c\ud611\ub825\uae30\uad00 \ub4f1<\/li>\r\n <\/ul>\r\n <\/section>\r\n\r\n <div class=\"cta-sticky\">\r\n <button class=\"cta-btn\" id=\"openRegSticky\">\ud83d\udce9 \ucc38\uac00\ub4f1\ub85d<\/button>\r\n <\/div>\r\n <\/main>\r\n\r\n <dialog class=\"modal\" id=\"regModal\" aria-labelledby=\"regTitle\" aria-modal=\"true\">\r\n <div class=\"sheet\">\r\n <header>\r\n <div class=\"title\" id=\"regTitle\">\ucc38\uac00\ub4f1\ub85d<\/div>\r\n <button class=\"close\" id=\"closeReg\" aria-label=\"\ub2eb\uae30\">\u2715<\/button>\r\n <\/header>\r\n <form id=\"regForm\" autocomplete=\"on\" action=\"\">\r\n <div class=\"row\">\r\n <label for=\"org\">\ud68c\uc0ac\/\uae30\uad00\uba85<\/label>\r\n <input id=\"org\" name=\"org\" type=\"text\" placeholder=\"\uc608) O2&B, \u25cb\u25cb\uc2dc \uc0c1\uc218\ub3c4\uc0ac\uc5c5\ubcf8\ubd80\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"title\">\uc9c1\ud568<\/label>\r\n <input id=\"title\" name=\"title\" type=\"text\" placeholder=\"\uc608) \ud300\uc7a5, \uc5f0\uad6c\uc6d0, \uad6d\uc7a5\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"name\">\uc774\ub984<\/label>\r\n <input id=\"name\" name=\"name\" type=\"text\" placeholder=\"\ud64d\uae38\ub3d9\" required \/>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"contact\">\uc5f0\ub77d\ucc98 (\ud734\ub300\ud3f0 \ub610\ub294 \uc774\uba54\uc77c)<\/label>\r\n <input id=\"contact\" name=\"contact\" type=\"text\" inputmode=\"email\" placeholder=\"010-1234-5678 \ub610\ub294 name@example.com\" required \/>\r\n <\/div>\r\n <div class=\"agree\">\r\n <input id=\"agree\" type=\"checkbox\" required \/>\r\n <label for=\"agree\">\uac1c\uc778\uc815\ubcf4(\uc774\ub984, \uc5f0\ub77d\ucc98, \uc18c\uc18d\u00b7\uc9c1\ud568)\ub294 \ud589\uc0ac \uc6b4\uc601 \ubaa9\uc801\uc73c\ub85c\ub9cc \uc0ac\uc6a9\ub418\uba70, \ud589\uc0ac \uc885\ub8cc \ud6c4 \ud30c\uae30\ub429\ub2c8\ub2e4.<\/label>\r\n <\/div>\r\n <button class=\"submit\" id=\"submitBtn\" type=\"submit\">\uc811\uc218\ud558\uae30<\/button>\r\n <div class=\"helper\">\uc815\uc6d0 50\uba85 \ucd08\uacfc \uc2dc \uc811\uc218\uac00 \uc790\ub3d9 \ub9c8\uac10\ub429\ub2c8\ub2e4.<\/div>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"vi\"\/><\/form>\r\n <\/div>\r\n <\/dialog>\r\n\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!<\/div>\r\n\r\n <footer>\r\n \u00a9 2025 \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \u00b7 \ubcf8 \ud398\uc774\uc9c0\ub294 \ub370\ubaa8\ub85c \ub85c\uceec \uc800\uc7a5(\ube0c\ub77c\uc6b0\uc800) \ubc29\uc2dd\uc785\ub2c8\ub2e4. \uc2e4\uc81c \uc6b4\uc601 \uc2dc \uc11c\ubc84 \uc5f0\ub3d9 \ud544\uc694.\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ ===== \uc124\uc815 =====\r\n const CAPACITY = 50;\r\n \/\/ \ud589\uc0ac \uc2dc\uc791 \uc2dc\uac01: \ud55c\uad6d\uc2dc\uac04(KST, UTC+9). \ubca0\ud2b8\ub0a8\uc2dc\uac04(UTC+7)\uc73c\ub85c \ubc14\uafb8\ub824\uba74 +07:00\ub85c \ubcc0\uacbd.\r\n const EVENT_ISO = '2025-11-03T17:00:00+09:00';\r\n\r\n \/\/ ===== \uc800\uc7a5\uc18c \ud0a4 =====\r\n const STORE_KEY = 'mcdi_registrations_v1';\r\n\r\n \/\/ ===== \uc720\ud2f8 =====\r\n const $ = (s) => document.querySelector(s);\r\n const $$ = (s) => document.querySelectorAll(s);\r\n\r\n function loadRegs(){\r\n try{\r\n const v = JSON.parse(localStorage.getItem(STORE_KEY) || '[]');\r\n return Array.isArray(v) ? v : [];\r\n }catch(e){ return []; }\r\n }\r\n function saveRegs(list){\r\n localStorage.setItem(STORE_KEY, JSON.stringify(list));\r\n }\r\n function showToast(msg='\ucc98\ub9ac\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'){\r\n const t = $('#toast'); t.textContent = msg;\r\n t.classList.add('show');\r\n setTimeout(()=>t.classList.remove('show'), 2200);\r\n }\r\n\r\n \/\/ ===== \uce74\uc6b4\ud2b8\ub2e4\uc6b4 =====\r\n function startCountdown(){\r\n const target = new Date(EVENT_ISO).getTime();\r\n function tick(){\r\n const now = Date.now();\r\n let diff = Math.max(0, target - now);\r\n const d = Math.floor(diff \/ (1000*60*60*24)); diff -= d*24*60*60*1000;\r\n const h = Math.floor(diff \/ (1000*60*60)); diff -= h*60*60*1000;\r\n const m = Math.floor(diff \/ (1000*60)); diff -= m*60*1000;\r\n const s = Math.floor(diff \/ 1000);\r\n $('#d').textContent = String(d).padStart(2,'0');\r\n $('#h').textContent = String(h).padStart(2,'0');\r\n $('#m').textContent = String(m).padStart(2,'0');\r\n $('#s').textContent = String(s).padStart(2,'0');\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n }\r\n\r\n \/\/ ===== \uc6a9\ub7c9 \ud45c\uc2dc =====\r\n function updateCapacityUI(){\r\n const regs = loadRegs();\r\n const count = regs.length;\r\n const remaining = Math.max(0, CAPACITY - count);\r\n $('#countLabel').textContent = count;\r\n $('#capLabel').textContent = CAPACITY;\r\n $('#remainingLabel').textContent = remaining === 0 ? '\ub9c8\uac10' : `\ub0a8\uc740 \uc88c\uc11d ${remaining}`;\r\n const fill = Math.min(100, Math.round((count \/ CAPACITY) * 100));\r\n $('#capFill').style.width = fill + '%';\r\n\r\n const disabled = count >= CAPACITY;\r\n ['#openRegTop','#openRegHero','#openRegSticky','#submitBtn'].forEach(sel=>{\r\n const el = $(sel); if(!el) return;\r\n el.disabled = disabled;\r\n });\r\n if(disabled){\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4');\r\n }else{\r\n $('#submitBtn') && ($('#submitBtn').textContent = '\uc811\uc218\ud558\uae30');\r\n }\r\n }\r\n\r\n \/\/ ===== \uc911\ubcf5 \uccb4\ud06c: \uc5f0\ub77d\ucc98 \uae30\uc900 =====\r\n function isDuplicateContact(contact){\r\n const regs = loadRegs();\r\n return regs.some(r => (r.contact || '').trim().toLowerCase() === contact.trim().toLowerCase());\r\n }\r\n\r\n \/\/ ===== \uac04\ub2e8\ud55c \uc720\ud6a8\uc131 \uac80\uc0ac =====\r\n function validContact(v){\r\n const s = v.trim();\r\n const email = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/i.test(s);\r\n const phone = \/^(0\\d{1,2}-?\\d{3,4}-?\\d{4}|0\\d{8,10}|\\+?\\d{7,15})$\/.test(s.replace(\/\\s\/g,''));\r\n return email || phone;\r\n }\r\n\r\n \/\/ ===== \ub4f1\ub85d \uc800\uc7a5 (\ub85c\uceec \uc800\uc7a5) =====\r\n function saveRegistration(data){\r\n const regs = loadRegs();\r\n regs.push({\r\n ...data,\r\n ts: Date.now()\r\n });\r\n saveRegs(regs);\r\n updateCapacityUI();\r\n return true;\r\n }\r\n\r\n \/* ===== \uc11c\ubc84 \uc5f0\ub3d9 \uc608\uc2dc (\uc6b4\uc601 \uad8c\uc7a5) =====\r\n async function saveRegistrationToServer(data){\r\n const res = await fetch('https:\/\/YOUR_API_ENDPOINT\/registrations', {\r\n method:'POST',\r\n headers:{'Content-Type':'application\/json'},\r\n body:JSON.stringify(data)\r\n });\r\n if(!res.ok) throw new Error('\uc11c\ubc84 \uc800\uc7a5 \uc2e4\ud328');\r\n const { total } = await res.json(); \/\/ \uc11c\ubc84\uac00 \ucd1d \uc778\uc6d0 \ubc18\ud658\ud55c\ub2e4\uace0 \uac00\uc815\r\n return total; \/\/ total\uc744 UI\uc5d0 \ubc18\uc601\ud558\ub3c4\ub85d updateCapacityUI\ub300\uc2e0 \uc0ac\uc6a9\r\n }\r\n *\/\r\n\r\n \/\/ ===== \ubaa8\ub2ec =====\r\n const regModal = $('#regModal');\r\n function openModal(){\r\n regModal.setAttribute('open','');\r\n document.body.style.overflow='hidden';\r\n $('#org').focus();\r\n }\r\n function closeModal(){\r\n regModal.removeAttribute('open');\r\n document.body.style.overflow='';\r\n $('#regForm').reset();\r\n }\r\n\r\n \/\/ ===== YouTube ID \ub85c\ub529 =====\r\n function loadYouTube(){\r\n const box = $('#videoBox');\r\n const vid = (box.getAttribute('data-video-id') || '').trim();\r\n const frame = $('#ytFrame');\r\n if(vid && vid !== 'VIDEO_ID_\uc5ec\uae30\uc5d0_\uc785\ub825'){\r\n const src = `https:\/\/www.youtube.com\/embed\/${encodeURIComponent(vid)}?rel=0&modestbranding=1&playsinline=1`;\r\n frame.src = src;\r\n }else{\r\n frame.src = 'https:\/\/www.youtube.com\/embed\/1La4QzGeaaQ?rel=0&modestbranding=1&playsinline=1';\r\n \/\/ \uc704\ub294 \uc0d8\ud50c \uc601\uc0c1\uc785\ub2c8\ub2e4. data-video-id\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n }\r\n }\r\n\r\n \/\/ ===== \uc2ac\ub77c\uc774\ub354 =====\r\n let slideIndex = 0, slideCount = 0, sliderTimer = null, touchStartX = 0, touchEndX = 0;\r\n function initSlider(){\r\n const slides = $('#slides');\r\n slideCount = slides.children.length;\r\n const dots = $('#dots');\r\n dots.innerHTML = '';\r\n for(let i=0;i<slideCount;i++){\r\n const d = document.createElement('div');\r\n d.className = 'dot' + (i===0 ? ' active':'');\r\n d.dataset.index = i;\r\n d.addEventListener('click', ()=>goSlide(i,true));\r\n dots.appendChild(d);\r\n }\r\n const wrap = slides.parentElement;\r\n wrap.addEventListener('touchstart', e=>{ touchStartX = e.changedTouches[0].screenX; });\r\n wrap.addEventListener('touchend', e=>{\r\n touchEndX = e.changedTouches[0].screenX;\r\n const dx = touchEndX - touchStartX;\r\n if(Math.abs(dx) > 40){\r\n if(dx < 0) goSlide(Math.min(slideIndex+1, slideCount-1), true);\r\n else goSlide(Math.max(slideIndex-1, 0), true);\r\n }\r\n });\r\n autoSlide();\r\n window.addEventListener('visibilitychange', ()=>{\r\n if(document.hidden){ clearInterval(sliderTimer); }\r\n else autoSlide();\r\n });\r\n }\r\n function goSlide(i, stopAuto=false){\r\n slideIndex = i;\r\n const slides = $('#slides');\r\n slides.style.transform = `translateX(-${i*100}%)`;\r\n $$('#dots .dot').forEach((d,idx)=>d.classList.toggle('active', idx===i));\r\n if(stopAuto){ clearInterval(sliderTimer); autoSlide(); }\r\n }\r\n function autoSlide(){\r\n clearInterval(sliderTimer);\r\n sliderTimer = setInterval(()=>{\r\n slideIndex = (slideIndex + 1) % slideCount;\r\n goSlide(slideIndex,false);\r\n }, 3500);\r\n }\r\n\r\n \/\/ ===== \ucd08\uae30\ud654 =====\r\n document.addEventListener('DOMContentLoaded', ()=>{\r\n \/\/ \ubc84\ud2bc \ubc14\uc778\ub529\r\n ['#openRegTop','#openRegHero','#openRegSticky'].forEach(sel=>{\r\n const el = $(sel); el && el.addEventListener('click', openModal);\r\n });\r\n $('#closeReg').addEventListener('click', closeModal);\r\n $('#regModal').addEventListener('click', (e)=>{ if(e.target.id==='regModal') closeModal(); });\r\n\r\n \/\/ \ud3fc \uc81c\ucd9c\r\n $('#regForm').addEventListener('submit', async (e)=>{\r\n e.preventDefault();\r\n const count = loadRegs().length;\r\n if(count >= CAPACITY){\r\n showToast('\uc815\uc6d0\uc774 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.');\r\n updateCapacityUI();\r\n return;\r\n }\r\n const org = $('#org').value.trim();\r\n const title = $('#title').value.trim();\r\n const name = $('#name').value.trim();\r\n const contact = $('#contact').value.trim();\r\n const agree = $('#agree').checked;\r\n\r\n if(!org || !title || !name || !contact || !agree){\r\n showToast('\ud544\uc218 \ud56d\ubaa9\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n return;\r\n }\r\n if(!validContact(contact)){\r\n showToast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc744 \ud655\uc778\ud574\uc8fc\uc138\uc694.');\r\n $('#contact').focus();\r\n return;\r\n }\r\n if(isDuplicateContact(contact)){\r\n showToast('\uc774\ubbf8 \uc811\uc218\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.');\r\n return;\r\n }\r\n\r\n const data = { org, title, name, contact };\r\n \/\/ \ub85c\uceec \uc800\uc7a5\r\n const ok = saveRegistration(data);\r\n if(ok){\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n }\r\n\r\n \/* \uc11c\ubc84 \uc800\uc7a5(\uc6b4\uc601) \uc0ac\uc6a9 \uc2dc:\r\n try{\r\n const total = await saveRegistrationToServer(data);\r\n closeModal();\r\n showToast('\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!');\r\n \/\/ \uc11c\ubc84 total\uc744 \uc0ac\uc6a9\ud558\uc5ec UI \uac31\uc2e0\r\n \/\/ \ucee4\uc2a4\ud140: updateCapacityUIFromServer(total);\r\n }catch(err){\r\n console.error(err);\r\n showToast('\uc11c\ubc84 \uc624\ub958\ub85c \uc811\uc218\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.');\r\n }\r\n *\/\r\n });\r\n\r\n \/\/ UI \ucd08\uae30 \uc0c1\ud0dc\r\n updateCapacityUI();\r\n startCountdown();\r\n loadYouTube();\r\n initSlider();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n```\r\n\r\n\uc124\uba85 \uc694\uc57d\r\n- \ucc38\uac00\ub4f1\ub85d \uc800\uc7a5: \ube0c\ub77c\uc6b0\uc800 localStorage\uc5d0 \uc800\uc7a5\ub418\uba70 \uce74\uc6b4\ud130\uac00 \uc2e4\uc2dc\uac04 \ubc18\uc601\ub429\ub2c8\ub2e4. \uc815\uc6d0\uc774 50\uba85\uc5d0 \ub3c4\ub2ec\ud558\uba74 \uc790\ub3d9\uc73c\ub85c \ubc84\ud2bc\uc774 \ube44\ud65c\uc131\ud654\ub418\uace0 \u201c\ub9c8\uac10\u201d\uc73c\ub85c \ud45c\uae30\ub429\ub2c8\ub2e4.\r\n- \ud0c0\uc774\uba38: 2025-11-03 17:00 \uae30\uc900\uc73c\ub85c \uce74\uc6b4\ud2b8\ub2e4\uc6b4\ud569\ub2c8\ub2e4. \ubca0\ud2b8\ub0a8 \uc2dc\uac04\uc73c\ub85c \ubcc0\uacbd\ud558\ub824\uba74 EVENT_ISO\uc758 +09:00\uc744 +07:00\uc73c\ub85c \ubc14\uafb8\uc138\uc694.\r\n- \uc720\ud29c\ube0c \uc601\uc0c1: data-video-id \uc18d\uc131\uc5d0 \uc2e4\uc81c \uc601\uc0c1 ID\ub9cc \ub123\uc73c\uba74 \uc790\ub3d9\uc73c\ub85c \ub85c\ub4dc\ub429\ub2c8\ub2e4.\r\n- \uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc: \uc790\ub3d9 \uc7ac\uc0dd \ubc0f \ud130\uce58 \uc2a4\uc640\uc774\ud504 \uc9c0\uc6d0.\r\n\r\n\uc2e4\uc6b4\uc601 \ud301\r\n- \ud604\uc7ac\ub294 \ub85c\uceec \uc800\uc7a5\uc774\ub77c \uc0ac\uc6a9\uc790 \ube0c\ub77c\uc6b0\uc800\ubcc4\ub85c \ub530\ub85c \uc800\uc7a5\ub429\ub2c8\ub2e4. \uc2e4\uc81c \uc9d1\uacc4\uac00 \ud544\uc694\ud558\uba74 \uc8fc\uc11d\uc758 saveRegistrationToServer \uc608\uc2dc\ucc98\ub7fc \uc11c\ubc84 API\ub97c \uc5f0\uacb0\ud574 \ucd1d \uc811\uc218 \uc778\uc6d0\uc744 \uad00\ub9ac\ud558\uc138\uc694.\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\uc544\ub798\ub294 \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \ud589\uc0ac \ucd08\uccad \ub79c\ub529\ud398\uc774\uc9c0 \uc804\uccb4 HTML\uc785\ub2c8\ub2e4. \uadf8\ub300\ub85c \ubcf5\uc0ac\ud574 \ubd99\uc5ec\ub123\uc73c\uba74 \ub3d9\uc791\ud569\ub2c8\ub2e4. \uc800\uc7a5\uc740 \ube0c\ub77c\uc6b0\uc800\uc758 \ub85c\uceec \uc800\uc7a5\uc18c(localStorage)\uc5d0 \uc800\uc7a5\ub418\uba70, \uc2e4\uc81c \uc6b4\uc601 \uc2dc\uc5d0\ub294 \uc8fc\uc11d\uc758 API \uc5f0\ub3d9 \ubd80\ubd84\uc744 \ucc38\uace0\ud574 \uc11c\ubc84 \uc800\uc7a5\uc73c\ub85c \ubc14\uafd4\uc8fc\uc138\uc694. “`html \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI | \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \ucd08\uccad \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \u00b7 \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \ucc38\uac00\ub4f1\ub85d \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ubca0\ud2b8\ub0a8 \ud604\uc9c0 \ucd5c\uc801\ud654 […]<\/p>","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-3635","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/pages\/3635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/comments?post=3635"}],"version-history":[{"count":0,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/pages\/3635\/revisions"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/media?parent=3635"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/vi\/wp-json\/wp\/v2\/wf_page_folders?post=3635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}