{"id":3640,"date":"2025-10-17T03:55:18","date_gmt":"2025-10-16T20:55:18","guid":{"rendered":"https:\/\/hcbiopharm.net\/?page_id=3640"},"modified":"2025-10-17T04:00:20","modified_gmt":"2025-10-16T21:00:20","slug":"mc-gpt5","status":"publish","type":"page","link":"https:\/\/hcbiopharm.net\/en\/mc-gpt5\/","title":{"rendered":"MC-GPT5"},"content":{"rendered":"
\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 \ubc14\ub85c \ubc30\ud3ec \uac00\ub2a5\ud55c \ub2e8\uc77c HTML \ud30c\uc77c\uc785\ub2c8\ub2e4. \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \uace0\uae09 \ub514\uc790\uc778, \uc720\ud29c\ube0c \uc601\uc0c1, \uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc, \uc811\uc218 \uce74\uc6b4\ud2b8(50\uba85), \ud0c0\uc774\uba38(2025-11-03 17:00 \uae30\uc900), \ub85c\uceec \uc800\uc7a5(localStorage) \uae30\ubc18\uc758 \ucc38\uac00 \ub4f1\ub85d \uc800\uc7a5\uacfc \uc911\ubcf5 \ubc29\uc9c0, \uc811\uc218 \ub9c8\uac10 \ucc98\ub9ac\uae4c\uc9c0 \ud3ec\ud568\ud588\uc2b5\ub2c8\ub2e4. \ud544\uc694 \uc2dc \uc8fc\uc11d\uc5d0 \ub530\ub77c \uc2e4\uc81c \uc11c\ubc84 \uc800\uc7a5 API\ub85c \uad50\uccb4\ub3c4 \uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\r\n\r\n\ucc38\uace0:\r\n- \ub370\uc774\ud130 \uc800\uc7a5: \uae30\ubcf8\uc740 localStorage\ub85c \ub3d9\uc791(\ube0c\ub77c\uc6b0\uc800\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5). \uc11c\ubc84 \uc5f0\ub3d9 \uc2dc saveRegistration, getRegistrationCount \ud568\uc218\ub9cc \uad50\uccb4\ud558\uba74 \ub429\ub2c8\ub2e4.\r\n- \ud0c0\uc784\uc874: 2025-11-03 17:00 KST(+09:00) \uae30\uc900\uc73c\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.\r\n- \uc811\uc218 \uc81c\ud55c: 50\uba85 \ub3c4\ub2ec \uc2dc \ubc84\ud2bc\uc774 \uc790\ub3d9\uc73c\ub85c \u201c\ub9c8\uac10\u201d \ucc98\ub9ac\ub429\ub2c8\ub2e4.\r\n\r\n\ubcf5\uc0ac \ud6c4 .html\ub85c \uc800\uc7a5\ud574 \ubaa8\ubc14\uc77c \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \ud655\uc778\ud574\ubcf4\uc138\uc694.\r\n\r\n```html\r\n\r\n\r\n\r\n \r\n \r\n \r\n \ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \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, 1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58. 2025\ub144 11\uc6d4 3\uc77c \uc624\ud6c4 5\uc2dc~8\uc2dc. O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c, \uc138\ubbf8\ub098\uc640 \ub9cc\ucc2c \ud3ec\ud568. 50\uba85 \uc81c\ud55c \ucd08\uccad. \ucc38\uac00\ub4f1\ub85d \ud544\uc218.\">\r\n <meta property=\"og:title\" content=\"\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \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 2025.11.03 17:00~20:00 \u00b7 \uc138\ubbf8\ub098 & \ub9cc\ucc2c \u00b7 50\uba85 \uc81c\ud55c\">\r\n <meta property=\"og:type\" content=\"website\">\r\n <meta property=\"og:image\" content=\"https:\/\/images.unsplash.com\/photo-1529101091764-c3526daf38fe?q=80&w=1600&auto=format&fit=crop\">\r\n <meta property=\"og:locale\" content=\"ko_KR\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" crossorigin>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root{\r\n --bg:#0b0b10;\r\n --bg-soft:#11121a;\r\n --card:#141621;\r\n --text:#eef1f7;\r\n --text-dim:#b9bfd1;\r\n --line:#23283b;\r\n --gold:#d4af37;\r\n --gold-2:#f5d06f;\r\n --accent: linear-gradient(135deg, #f5d06f 0%, #d4af37 100%);\r\n --brand:#57c1ff;\r\n --ok:#1fd290;\r\n --warn:#ffb020;\r\n --err:#ff5c5c;\r\n --shadow: 0 10px 30px rgba(0,0,0,.45);\r\n --radius-2:14px;\r\n --radius-3:22px;\r\n --radius-pill:999px;\r\n --gap: 16px;\r\n --fz-1: clamp(12px, 3vw, 14px);\r\n --fz-2: clamp(14px, 4vw, 16px);\r\n --fz-3: clamp(16px, 5vw, 18px);\r\n --fz-4: clamp(18px, 6vw, 22px);\r\n --fz-5: clamp(22px, 7vw, 28px);\r\n --fz-6: clamp(28px, 9vw, 40px);\r\n }\r\n *{box-sizing:border-box}\r\n html,body{height:100%}\r\n body{\r\n margin:0; background:radial-gradient(1200px 800px at 100% -10%, rgba(212,175,55,.08), transparent 60%), var(--bg);\r\n color:var(--text); font-family:\"Noto Sans KR\",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;\r\n }\r\n a{color:inherit;text-decoration:none}\r\n .wrap{max-width:980px;margin:0 auto;padding:16px 16px 120px}\r\n header.top{\r\n display:flex;align-items:center;justify-content:space-between;gap:10px;\r\n padding:12px; border:1px solid var(--line); border-radius:var(--radius-2);\r\n background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0));\r\n box-shadow:var(--shadow);\r\n position:sticky; top:12px; z-index:30; backdrop-filter: blur(10px);\r\n }\r\n .tag{\r\n font-size:var(--fz-1); color:var(--text-dim);\r\n border:1px solid var(--line); padding:6px 10px; border-radius:var(--radius-pill);\r\n display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.02)\r\n }\r\n .tag .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}\r\n .brand{display:flex;align-items:center;gap:8px;font-weight:700}\r\n .brand .logo{\r\n width:34px;height:34px;border-radius:10px; background:var(--accent);\r\n display:grid;place-items:center;color:#111;font-weight:900;letter-spacing:.5px;\r\n border:1px solid rgba(255,255,255,.4);\r\n }\r\n .cta-small{\r\n padding:8px 14px;border-radius:var(--radius-pill);border:1px solid var(--line);\r\n background:linear-gradient(180deg, #192033, #141621);\r\n font-size:var(--fz-1); color:var(--text); display:inline-flex; gap:8px; align-items:center;\r\n }\r\n .hero{\r\n margin-top:18px; border:1px solid var(--line); border-radius:var(--radius-3);\r\n background:\r\n radial-gradient(1200px 600px at -20% -10%, rgba(87,193,255,.12), transparent 60%),\r\n linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)),\r\n var(--card);\r\n padding:22px; position:relative; overflow:hidden;\r\n }\r\n .hero h1{\r\n font-size:var(--fz-6); line-height:1.1; margin:6px 0 10px; letter-spacing:-.3px;\r\n font-weight:800;\r\n }\r\n .hero h1 .accent{background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent}\r\n .hero p.sub{font-size:var(--fz-3); color:var(--text-dim); margin:0 0 18px}\r\n .pill{\r\n display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px\r\n }\r\n .pill .chip{\r\n border:1px solid var(--line); padding:8px 12px; border-radius:var(--radius-pill);\r\n font-size:var(--fz-1); color:var(--text-dim); background:rgba(255,255,255,.02)\r\n }\r\n .countdown{\r\n display:flex; gap:10px; align-items:stretch; margin:14px 0 8px\r\n }\r\n .box{\r\n flex:1; min-width:0; background:rgba(255,255,255,.03); border:1px solid var(--line);\r\n border-radius:12px; padding:12px; text-align:center\r\n }\r\n .box .num{font-size:clamp(18px, 8vw, 36px); font-weight:800; letter-spacing:-.5px}\r\n .box .lab{font-size:var(--fz-1); color:var(--text-dim)}\r\n .meta{\r\n display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px\r\n }\r\n .meta .card{\r\n background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px;\r\n display:flex; gap:10px; align-items:center;\r\n }\r\n .icon{\r\n width:34px;height:34px;border-radius:10px; display:grid;place-items:center;\r\n background:linear-gradient(135deg, rgba(245,208,111,.2), rgba(212,175,55,.12));\r\n border:1px solid rgba(212,175,55,.35); color:#f6e7ab\r\n }\r\n .title{font-size:var(--fz-2); font-weight:700}\r\n .muted{color:var(--text-dim); font-size:var(--fz-1)}\r\n .progress{\r\n height:10px; background:#0e111a; border-radius:999px; border:1px solid var(--line); overflow:hidden\r\n }\r\n .progress .bar{\r\n height:100%; background:var(--accent); width:0%; transition:width .4s ease\r\n }\r\n .actions{display:flex; gap:10px; margin-top:16px}\r\n .btn{\r\n border:none; cursor:pointer; border-radius:var(--radius-pill); padding:14px 18px; font-size:var(--fz-2);\r\n font-weight:700; letter-spacing:.2px; transition:transform .06s ease, filter .2s ease, opacity .2s ease;\r\n display:inline-flex; align-items:center; gap:10px;\r\n }\r\n .btn:active{transform:translateY(1px)}\r\n .btn-primary{\r\n background:var(--accent); color:#111; box-shadow:0 12px 28px rgba(245,208,111,.24)\r\n }\r\n .btn-ghost{\r\n background:transparent; border:1px solid var(--line); color:var(--text)\r\n }\r\n\r\n \/* Video + Gallery *\/\r\n section{\r\n margin-top:22px; border:1px solid var(--line); border-radius:var(--radius-3);\r\n background:var(--card); padding:18px;\r\n }\r\n .section-title{\r\n font-size:var(--fz-4); font-weight:800; margin:2px 0 14px;\r\n }\r\n .vid{\r\n position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16\/9;\r\n border:1px solid var(--line); background:#000; box-shadow:var(--shadow);\r\n }\r\n .gallery{\r\n display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scroll-snap-type:x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n .gallery::-webkit-scrollbar{height:6px}\r\n .gallery::-webkit-scrollbar-thumb{background:#31364d;border-radius:999px}\r\n .slide{\r\n min-width:78%; max-width:78%; scroll-snap-align:start; position:relative; border-radius:14px; overflow:hidden;\r\n border:1px solid var(--line)\r\n }\r\n .slide img{width:100%; height:230px; object-fit:cover; display:block}\r\n .slide .cap{\r\n position:absolute; left:0; right:0; bottom:0; padding:10px 12px; font-size:var(--fz-1);\r\n background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6))\r\n }\r\n\r\n \/* Info list *\/\r\n .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}\r\n .info-card{\r\n background:rgba(255,255,255,.03); border:1px solid var(--line); padding:12px; border-radius:12px\r\n }\r\n .info-card .hd{display:flex; align-items:center; gap:8px; font-weight:700; margin-bottom:6px}\r\n\r\n \/* Floating CTA *\/\r\n .dock{\r\n position:fixed; left:0; right:0; bottom:0; padding:10px 14px 14px; background:linear-gradient(180deg, rgba(11,11,16,.0), rgba(11,11,16,.88) 30%, rgba(11,11,16,.98));\r\n display:grid; gap:10px; z-index:40;\r\n -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\r\n }\r\n .dock .panel{\r\n border:1px solid var(--line); background:linear-gradient(180deg, #121525, #0f1220);\r\n padding:10px; border-radius:16px; display:flex; align-items:center; justify-content:space-between; gap:10px\r\n }\r\n .dock .mini{display:flex; flex-direction:column}\r\n .dock .mini .when{font-size:var(--fz-1); color:var(--text-dim)}\r\n .dock .mini .remain{font-size:var(--fz-2)}\r\n .dock .btn-primary{padding:12px 16px}\r\n\r\n \/* Modal (bottom sheet) *\/\r\n .sheet{\r\n position:fixed; inset:0; display:none; z-index:60; background:rgba(0,0,0,.52);\r\n }\r\n .sheet.active{display:block}\r\n .sheet .body{\r\n position:absolute; left:0; right:0; bottom:0; border-radius:18px 18px 0 0; border:1px solid var(--line);\r\n background:linear-gradient(180deg, #141621, #0f1120); max-height:84%; overflow:auto; padding:14px 16px 22px; box-shadow:var(--shadow);\r\n transform:translateY(100%); animation:slideUp .22s ease forwards;\r\n }\r\n @keyframes slideUp{to{transform:translateY(0)}}\r\n .dragbar{width:44px;height:4px;border-radius:999px;background:#2d3147;margin:8px auto 10px}\r\n\r\n form .row{display:grid; gap:8px; margin:10px 0}\r\n label{font-size:var(--fz-1); color:var(--text-dim)}\r\n input,select{\r\n width:100%; padding:14px 12px; border-radius:12px; border:1px solid var(--line); background:#0d1020; color:var(--text);\r\n font-size:var(--fz-2); outline:none; transition:border-color .2s ease, box-shadow .2s ease;\r\n }\r\n input:focus{border-color:#3a62ff; box-shadow:0 0 0 3px rgba(58,98,255,.2)}\r\n .helper{font-size:var(--fz-1); color:var(--text-dim)}\r\n .form-actions{display:flex; gap:8px; margin-top:10px}\r\n .btn-line{border:1px solid var(--line); background:transparent; color:var(--text)}\r\n\r\n \/* Toast *\/\r\n .toast{\r\n position:fixed; left:50%; transform:translateX(-50%); bottom:90px; z-index:80; display:none;\r\n background:#0e1326; border:1px solid #2b3250; color:#eaf2ff; padding:12px 14px; border-radius:12px; box-shadow:var(--shadow); font-size:var(--fz-2)\r\n }\r\n .toast.show{display:block; animation:fade .2s ease}\r\n @keyframes fade{from{opacity:0; transform:translateX(-50%) translateY(6px)} to{opacity:1; transform:translateX(-50%) translateY(0)}}\r\n\r\n \/* Desktop tweaks *\/\r\n @media(min-width:840px){\r\n .hero{padding:28px 28px 24px}\r\n .slide img{height:280px}\r\n .gallery .slide{min-width:48%; max-width:48%}\r\n .wrap{padding-bottom:140px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <header class=\"top\">\r\n <span class=\"tag\"><span class=\"dot\"><\/span> \ud55c\uad6d\uc815\ubd80 \uae30\uc220\uc9c0\uc6d0 \uc0ac\uc5c5<\/span>\r\n <div class=\"brand\">\r\n <div class=\"logo\">M<\/div>\r\n <div>\r\n <div style=\"font-size:var(--fz-2);line-height:1;font-weight:800\">MCDI x O2&B<\/div>\r\n <div class=\"muted\" style=\"font-size:var(--fz-1)\">\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654 \uc815\uc218 \ud601\uc2e0<\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"cta-small\" id=\"btnAddCalendar\" aria-label=\"\uce98\ub9b0\ub354\uc5d0 \ucd94\uac00\">\r\n \ud83d\udcc5 \uce98\ub9b0\ub354 \ucd94\uac00\r\n <\/button>\r\n <\/header>\r\n\r\n <section class=\"hero\" aria-label=\"\ud589\uc0ac \uc18c\uac1c\">\r\n <h1>\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, <span class=\"accent\">\ubbf8\ub798\ub97c \uc5ec\ub294 MCDI<\/span><\/h1>\r\n <p class=\"sub\">1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58 \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c<\/p>\r\n <div class=\"pill\">\r\n <span class=\"chip\">\uc138\ubbf8\ub098 \u00b7 \ub9cc\ucc2c \ud3ec\ud568<\/span>\r\n <span class=\"chip\">\ucd08\uccad \uc81c\ud55c 50\uba85<\/span>\r\n <span class=\"chip\">2025.11.03 (\uc6d4) 17:00~20:00<\/span>\r\n <\/div>\r\n\r\n <div class=\"countdown\" role=\"timer\" aria-live=\"polite\">\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"dd\">0<\/div>\r\n <div class=\"lab\">Day<\/div>\r\n <\/div>\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"hh\">00<\/div>\r\n <div class=\"lab\">\uc2dc\uac04<\/div>\r\n <\/div>\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"mm\">00<\/div>\r\n <div class=\"lab\">\ubd84<\/div>\r\n <\/div>\r\n <div class=\"box\">\r\n <div class=\"num\" id=\"ss\">00<\/div>\r\n <div class=\"lab\">candle<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"meta\">\r\n <div class=\"card\">\r\n <div class=\"icon\">\u23f1\ufe0f<\/div>\r\n <div>\r\n <div class=\"title\">\ud589\uc0ac \uc77c\uc815<\/div>\r\n <div class=\"muted\">2025.11.03 \uc6d4\uc694\uc77c 17:00~20:00 (KST)<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <div class=\"icon\">\ud83d\udc65<\/div>\r\n <div style=\"flex:1\">\r\n <div class=\"title\">\ucc38\uac00 \ud604\ud669<\/div>\r\n <div class=\"muted\"><span id=\"countText\">0<\/span> \/ <span id=\"capText\">50<\/span>\uba85<\/div>\r\n <div class=\"progress\" aria-label=\"\uc811\uc218 \uc9c4\ud589\ub960\">\r\n <div class=\"bar\" id=\"progressBar\" style=\"width:0%\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"actions\">\r\n <button class=\"btn btn-primary\" id=\"btnOpenForm\" aria-haspopup=\"dialog\">\ud83c\udf9f\ufe0f \ucc38\uac00\ub4f1\ub85d<\/button>\r\n <a class=\"btn btn-ghost\" href=\"#video\">\u25b6\ufe0f \uc7a5\ube44\u00b7\uae30\uc220 \uc601\uc0c1<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"video\" aria-label=\"\uc7a5\ube44\uc640 \uae30\uc220 \uc601\uc0c1\">\r\n <div class=\"section-title\">\uc7a5\ube44\uc640 \uae30\uc220\uc744 \uc601\uc0c1\uc73c\ub85c<\/div>\r\n <div class=\"vid\">\r\n <!-- \uc6d0\ud558\ub294 \uc7a5\ube44\/\uae30\uc220 \uc601\uc0c1\uc73c\ub85c \uad50\uccb4 \uac00\ub2a5 -->\r\n <iframe width=\"100%\" height=\"100%\" src=\"https:\/\/www.youtube.com\/embed\/_dW9Efz0U-w?rel=0&modestbranding=1&playsinline=1&color=white\"\r\n title=\"Water Treatment Technology\" frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\r\n allowfullscreen><\/iframe>\r\n <\/div>\r\n <p class=\"helper\" style=\"margin-top:8px\">\uc601\uc0c1\uc740 \ucc38\uc870\uc6a9\uc785\ub2c8\ub2e4. \uc2e4\uc81c \uc2dc\uc5f0\uc740 \ud604\uc7a5\uc5d0\uc11c \uc9c4\ud589\ub429\ub2c8\ub2e4.<\/p>\r\n <\/section>\r\n\r\n <section aria-label=\"\uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc\">\r\n <div class=\"section-title\">\uc2dc\uc2a4\ud15c \uc0ac\uc9c4 \ubbf8\ub9ac\ubcf4\uae30<\/div>\r\n <div class=\"gallery\" id=\"gallery\">\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1509391366360-2e959784a276?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc815\uc218 \uc2dc\uc2a4\ud15c \ubaa8\ub4c8\" loading=\"lazy\">\r\n <figcaption class=\"cap\">\ubaa8\ub4c8\ud615 \uc815\uc218 \uc2dc\uc2a4\ud15c<\/figcaption>\r\n <\/figure>\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1502304877804-088d480482c7?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc218\ucc98\ub9ac \uacf5\uc815 \ud30c\uc774\ud504\ub77c\uc778\" loading=\"lazy\">\r\n <figcaption class=\"cap\">\uace0\ud6a8\uc728 \ud30c\uc774\ud504\ub77c\uc778 \uc124\uacc4<\/figcaption>\r\n <\/figure>\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551292831-023188e78222?q=80&w=1600&auto=format&fit=crop\" alt=\"\ud488\uc9c8 \uad00\ub9ac \ubc0f \ubaa8\ub2c8\ud130\ub9c1\" loading=\"lazy\">\r\n <figcaption class=\"cap\">\uc2e4\uc2dc\uac04 \ud488\uc9c8 \ubaa8\ub2c8\ud130\ub9c1<\/figcaption>\r\n <\/figure>\r\n <figure class=\"slide\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1581093458791-9d42e3b7a3f2?q=80&w=1600&auto=format&fit=crop\" alt=\"\uc5d0\ub108\uc9c0 \ucd5c\uc801\ud654 \uc7a5\ube44\" loading=\"lazy\">\r\n <figcaption class=\"cap\">\uc5d0\ub108\uc9c0 \ucd5c\uc801\ud654 \uc124\ube44<\/figcaption>\r\n <\/figure>\r\n <\/div>\r\n <\/section>\r\n\r\n <section aria-label=\"\ud589\uc0ac \uc548\ub0b4\">\r\n <div class=\"section-title\">\ud589\uc0ac \uac1c\uc694<\/div>\r\n <div class=\"grid-2\">\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83d\udccd \uc7a5\uc18c<\/div>\r\n <div class=\"muted\">\ub77c\uc624\uae4c\uc774(\ubca0\ud2b8\ub0a8) \uc2dc\ubc94 \uc124\uce58 \ud604\uc7a5<\/div>\r\n <\/div>\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83d\uddd3\ufe0f \uc77c\uc815<\/div>\r\n <div class=\"muted\">2025\ub144 11\uc6d4 3\uc77c(\uc6d4) 17:00~20:00<\/div>\r\n <\/div>\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83c\udfa4 \ud504\ub85c\uadf8\ub7a8<\/div>\r\n <div class=\"muted\">\uc138\ubbf8\ub098 \u00b7 \ud604\uc7a5 \uc2dc\uc5f0 \u00b7 \ub124\ud2b8\uc6cc\ud0b9 \ub9cc\ucc2c<\/div>\r\n <\/div>\r\n <div class=\"info-card\">\r\n <div class=\"hd\">\ud83c\udf81 \uc81c\uacf5<\/div>\r\n <div class=\"muted\">O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \uc2dc\uc5f0 \u00b7 \uc790\ub8cc\uc9d1<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <!-- Floating Dock CTA -->\r\n <div class=\"dock\" role=\"region\" aria-label=\"\ud558\ub2e8 \uace0\uc815 \ucd08\ub300 \uc601\uc5ed\">\r\n <div class=\"panel\">\r\n <div class=\"mini\">\r\n <div class=\"when\">2025.11.03 17:00 (KST)<\/div>\r\n <div class=\"remain\"><strong id=\"dockRemain\">\uc794\uc5ec 50<\/strong> \u00b7 <span id=\"dockCount\">0\/50<\/span><\/div>\r\n <\/div>\r\n <button class=\"btn btn-primary\" id=\"btnOpenForm2\">\ucc38\uac00\ub4f1\ub85d<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Registration Sheet -->\r\n <div class=\"sheet\" id=\"sheet\">\r\n <div class=\"body\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"regTitle\">\r\n <div class=\"dragbar\"><\/div>\r\n <h2 id=\"regTitle\" style=\"margin:4px 0 6px; font-size:var(--fz-4)\">\ud589\uc0ac \ucc38\uac00 \ub4f1\ub85d<\/h2>\r\n <p class=\"helper\">\ucd08\uccad \uc81c\ud55c 50\uba85 \u00b7 \uc911\ubcf5 \ub4f1\ub85d\uc740 \uc5f0\ub77d\ucc98 \uae30\uc900\uc73c\ub85c \ubc29\uc9c0\ub429\ub2c8\ub2e4.<\/p>\r\n <form id=\"regForm\" autocomplete=\"on\" novalidate 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\" inputmode=\"text\" placeholder=\"\uc608) O2&B\" 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\" inputmode=\"text\" placeholder=\"\uc608) \uac1c\ubc1c\uc774\uc0ac\" 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\" inputmode=\"text\" placeholder=\"\ud64d\uae38\ub3d9\" required>\r\n <\/div>\r\n <div class=\"row\">\r\n <label for=\"phone\">\uc5f0\ub77d\ucc98<\/label>\r\n <input id=\"phone\" name=\"phone\" type=\"tel\" inputmode=\"tel\" placeholder=\"010-1234-5678\" required>\r\n <div class=\"helper\">\ud558\uc774\ud508(-) \uc5c6\uc774 \uc785\ub825\ud574\ub3c4 \ub429\ub2c8\ub2e4.<\/div>\r\n <\/div>\r\n <div class=\"form-actions\">\r\n <button type=\"button\" class=\"btn btn-line\" id=\"btnClose\">\ucde8\uc18c<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" id=\"btnSubmit\">\uc811\uc218\ud558\uae30<\/button>\r\n <\/div>\r\n <p class=\"helper\" style=\"margin-top:8px\">\uc81c\ucd9c \uc2dc \ube0c\ub77c\uc6b0\uc800\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5\ub418\uba70, \uad00\ub9ac\uc790 \uc694\uccad \uc2dc \uc11c\ubc84 \uc800\uc7a5\uc73c\ub85c \uc804\ud658 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\r\n <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Toast -->\r\n <div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\">\uc811\uc218\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ud655\uc778 \ubb38\uc790\ub97c \uace7 \ubcf4\ub0b4\ub4dc\ub9bd\ub2c8\ub2e4.<\/div>\r\n\r\n <script>\r\n \/\/ ====== \uc124\uc815 ======\r\n const MAX_CAPACITY = 50;\r\n const EVENT_ISO = '2025-11-03T17:00:00+09:00'; \/\/ KST \uae30\uc900\r\n const LS_KEY = 'mcdi_event_registrations_v1';\r\n\r\n \/\/ ====== \uc720\ud2f8 ======\r\n const $ = (q)=>document.querySelector(q);\r\n const $$ = (q)=>document.querySelectorAll(q);\r\n const toast = (msg, ms=2200)=>{\r\n const t = $('#toast');\r\n t.textContent = msg; t.classList.add('show');\r\n clearTimeout(t._t); t._t = setTimeout(()=>t.classList.remove('show'), ms);\r\n };\r\n const sanitizePhone = (v)=> (v||'').replace(\/[^\\d]\/g, '');\r\n const formatCount = (n)=>`${n}\/${MAX_CAPACITY}`;\r\n\r\n \/\/ ====== \ub85c\uceec \uc800\uc7a5\uc18c(\uae30\ubcf8) ======\r\n function loadRegs(){\r\n try{\r\n const raw = localStorage.getItem(LS_KEY);\r\n const arr = raw ? JSON.parse(raw) : [];\r\n return Array.isArray(arr) ? arr : [];\r\n }catch(e){ return []; }\r\n }\r\n function saveRegs(arr){\r\n localStorage.setItem(LS_KEY, JSON.stringify(arr));\r\n }\r\n function existsByPhone(phone){\r\n const p = sanitizePhone(phone);\r\n return loadRegs().some(x=> x.phone === p);\r\n }\r\n function getRegistrationCount(){\r\n return loadRegs().length;\r\n }\r\n function saveRegistration(data){\r\n \/\/ \uc11c\ubc84 \uc5f0\ub3d9\uc774 \ud544\uc694\ud558\uba74 \uc774 \ud568\uc218\ub97c fetch POST\ub85c \uad50\uccb4\ud558\uc138\uc694.\r\n const regs = loadRegs();\r\n regs.push(data);\r\n saveRegs(regs);\r\n return true;\r\n }\r\n\r\n \/\/ ====== UI \uac31\uc2e0 ======\r\n function updateCounts(){\r\n const n = getRegistrationCount();\r\n const remain = Math.max(0, MAX_CAPACITY - n);\r\n const pct = Math.max(0, Math.min(100, Math.round((n \/ MAX_CAPACITY) * 100)));\r\n $('#countText').textContent = n;\r\n $('#capText').textContent = MAX_CAPACITY;\r\n $('#dockCount').textContent = formatCount(n);\r\n $('#dockRemain').textContent = `\uc794\uc5ec ${remain}`;\r\n $('#progressBar').style.width = pct + '%';\r\n\r\n const buttons = [$('#btnOpenForm'), $('#btnOpenForm2'), $('#btnSubmit')].filter(Boolean);\r\n if(n >= MAX_CAPACITY){\r\n buttons.forEach(b=>{\r\n b.disabled = true;\r\n if(b.id === 'btnSubmit') b.textContent = '\ub9c8\uac10';\r\n else b.textContent = '\uc811\uc218 \ub9c8\uac10';\r\n b.style.opacity = .7;\r\n });\r\n }else{\r\n buttons.forEach(b=>{\r\n b.disabled = false;\r\n if(b.id === 'btnSubmit') b.textContent = '\uc811\uc218\ud558\uae30';\r\n else b.textContent = '\ucc38\uac00\ub4f1\ub85d';\r\n b.style.opacity = 1;\r\n });\r\n }\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 const dd = $('#dd'), hh = $('#hh'), mm = $('#mm'), ss = $('#ss');\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*(1000*60*60*24);\r\n const h = Math.floor(diff \/ (1000*60*60)); diff -= h*(1000*60*60);\r\n const m = Math.floor(diff \/ (1000*60)); diff -= m*(1000*60);\r\n const s = Math.floor(diff \/ 1000);\r\n dd.textContent = d;\r\n hh.textContent = String(h).padStart(2,'0');\r\n mm.textContent = String(m).padStart(2,'0');\r\n ss.textContent = String(s).padStart(2,'0');\r\n }\r\n tick();\r\n setInterval(tick, 1000);\r\n }\r\n\r\n \/\/ ====== \ud3fc \ucc98\ub9ac ======\r\n function openSheet(){ $('#sheet').classList.add('active'); setTimeout(()=>$('#org').focus(), 150); }\r\n function closeSheet(){ $('#sheet').classList.remove('active'); }\r\n\r\n function validateForm(form){\r\n const org = form.org.value.trim();\r\n const title = form.title.value.trim();\r\n const name = form.name.value.trim();\r\n const phone = sanitizePhone(form.phone.value);\r\n if(!org || !title || !name || !phone){\r\n toast('\ud544\uc218 \ud56d\ubaa9\uc744 \ubaa8\ub450 \uc785\ub825\ud574\uc8fc\uc138\uc694.'); return null;\r\n }\r\n if(phone.length < 8){\r\n toast('\uc5f0\ub77d\ucc98 \ud615\uc2dd\uc774 \uc62c\ubc14\ub974\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.'); return null;\r\n }\r\n return { org, title, name, phone };\r\n }\r\n\r\n function attachForm(){\r\n $('#btnOpenForm')?.addEventListener('click', openSheet);\r\n $('#btnOpenForm2')?.addEventListener('click', openSheet);\r\n $('#btnClose')?.addEventListener('click', closeSheet);\r\n\r\n $('#regForm')?.addEventListener('submit', (e)=>{\r\n e.preventDefault();\r\n if(getRegistrationCount() >= MAX_CAPACITY){\r\n toast('\uc811\uc218\uac00 \ub9c8\uac10\ub418\uc5c8\uc2b5\ub2c8\ub2e4.'); updateCounts(); return;\r\n }\r\n const data = validateForm(e.target);\r\n if(!data) return;\r\n if(existsByPhone(data.phone)){\r\n toast('\uc774\ubbf8 \ub4f1\ub85d\ub41c \uc5f0\ub77d\ucc98\uc785\ub2c8\ub2e4.'); return;\r\n }\r\n \/\/ \uc800\uc7a5\r\n const payload = {\r\n ...data,\r\n ts: new Date().toISOString()\r\n };\r\n const ok = saveRegistration(payload);\r\n if(ok){\r\n updateCounts();\r\n toast('\uc811\uc218 \uc644\ub8cc! \ucc38\uc11d\uc744 \ud658\uc601\ud569\ub2c8\ub2e4.');\r\n e.target.reset();\r\n closeSheet();\r\n }else{\r\n toast('\uc800\uc7a5 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4. \uc7a0\uc2dc \ud6c4 \ub2e4\uc2dc \uc2dc\ub3c4\ud574\uc8fc\uc138\uc694.');\r\n }\r\n });\r\n }\r\n\r\n \/\/ ====== \uce98\ub9b0\ub354 \ucd94\uac00 (ICS) ======\r\n function addCalendar(){\r\n const start = new Date(EVENT_ISO);\r\n const end = new Date(start.getTime() + 3*60*60*1000); \/\/ 3\uc2dc\uac04 \ud589\uc0ac\r\n const toICS = (d)=> d.toISOString().replace(\/[-:]\/g,'').replace(\/\\.\\d{3}Z$\/,'Z');\r\n const ics =\r\n`BEGIN:VCALENDAR\r\nVERSION:2.0\r\nPRODID:-\/\/MCDI\/\/Invitation\/\/KR\r\nCALSCALE:GREGORIAN\r\nMETHOD:PUBLISH\r\nBEGIN:VEVENT\r\nUID:${crypto.randomUUID ? crypto.randomUUID() : ('mcdi-'+Date.now())}\r\nDTSTAMP:${toICS(new Date())}\r\nDTSTART:${toICS(start)}\r\nDTEND:${toICS(end)}\r\nSUMMARY:\ubca0\ud2b8\ub0a8 \ucd5c\uc801\ud654, \ubbf8\ub798\ub97c \uc5ec\ub294 MCDI \u2014 \ub77c\uc624\uae4c\uc774 \uc2dc\ubc94\uc124\uce58\r\nDESCRIPTION:1\uc77c 100\ud1a4 \uc815\uc218 \uc2dc\uc2a4\ud15c \u00b7 O2&B \ubb34\uc0c1 \uc2dc\uc2a4\ud15c \u00b7 \uc138\ubbf8\ub098 & \ub9cc\ucc2c \ud3ec\ud568\r\nLOCATION:\ub77c\uc624\uae4c\uc774(\ubca0\ud2b8\ub0a8) \uc2dc\ubc94 \uc124\uce58 \ud604\uc7a5\r\nEND:VEVENT\r\nEND:VCALENDAR`;\r\n const blob = new Blob([ics], {type:'text\/calendar'});\r\n const url = URL.createObjectURL(blob);\r\n const a = document.createElement('a');\r\n a.href = url; a.download = 'MCDI_invite_2025-11-03.ics'; a.click();\r\n setTimeout(()=>URL.revokeObjectURL(url), 2000);\r\n }\r\n\r\n \/\/ ====== \uac24\ub7ec\ub9ac \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc(\ubd80\ub4dc\ub7ec\uc6b4 \uc790\ub3d9 \uc2a4\ud06c\ub864) ======\r\n function autoScrollGallery(){\r\n const g = $('#gallery'); if(!g) return;\r\n let idx = 0;\r\n const slides = g.querySelectorAll('.slide');\r\n if(slides.length <= 1) return;\r\n function go(){\r\n idx = (idx + 1) % slides.length;\r\n const target = slides[idx];\r\n target.scrollIntoView({behavior:'smooth', inline:'start'});\r\n }\r\n let t = setInterval(go, 3600);\r\n \/\/ \uc0ac\uc6a9\uc790\uac00 \uc2a4\ud06c\ub864\ud558\uba74 \uc790\ub3d9 \uc2ac\ub77c\uc774\ub4dc \uc7a0\uc2dc \uc911\uc9c0\r\n let isUser = false, userTimer;\r\n g.addEventListener('scroll', ()=>{\r\n isUser = true; clearTimeout(userTimer); clearInterval(t);\r\n userTimer = setTimeout(()=>{ isUser=false; t = setInterval(go, 3600); }, 4000);\r\n }, {passive:true});\r\n }\r\n\r\n \/\/ ====== \ucd08\uae30\ud654 ======\r\n function init(){\r\n updateCounts();\r\n startCountdown();\r\n attachForm();\r\n autoScrollGallery();\r\n $('#btnAddCalendar')?.addEventListener('click', addCalendar);\r\n\r\n \/\/ \uc811\uadfc\uc131: \uc2dc\ud2b8 \ubc14\uae65 \ud074\ub9ad \ub2eb\uae30\r\n $('#sheet')?.addEventListener('click', (e)=>{ if(e.target.id === 'sheet') closeSheet(); });\r\n }\r\n document.addEventListener('DOMContentLoaded', init);\r\n\r\n \/\/ ====== \uc11c\ubc84 \uc5f0\ub3d9 \ud301 ======\r\n \/\/ 1) saveRegistration()\ub97c fetch('\/api\/register', { method: 'POST', body: JSON.stringify(payload) })\ub85c \uad50\uccb4\r\n \/\/ 2) getRegistrationCount()\ub97c \uc11c\ubc84\uc758 \ucd1d\ud569 \uce74\uc6b4\ud2b8\ub97c \ubc18\ud658\ud558\ub294 fetch('\/api\/count')\ub85c \uad50\uccb4\r\n \/\/ 3) \uad50\uccb4 \uc2dc \ub85c\uceec \uc800\uc7a5 loadRegs\/saveRegs\ub294 \uc81c\uac70 \uac00\ub2a5\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n```\r\n\r\n\uc6d0\ud558\uc2dc\uba74:\r\n- \uc2e4\uc81c \uc11c\ubc84 \uc800\uc7a5 API \uc5f0\ub3d9(Firebase\/Supabase\/Google Apps Script) \ubc84\uc804\uc73c\ub85c\ub3c4 \uc218\uc815\ud574\ub4dc\ub9b4\uac8c\uc694.\r\n- \ud589\uc0ac \ub85c\uace0\/\ube0c\ub79c\ub4dc \uc0c9\uc0c1\uc5d0 \ub9de\ucdb0 \uc0c9\uac10 \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5, \uc601\uc0c1\/\uc774\ubbf8\uc9c0 \uad50\uccb4, \ud504\ub85c\uadf8\ub7a8 \uc0c1\uc138 \uc139\uc158 \ucd94\uac00 \ub4f1\ub3c4 \uac00\ub2a5\ud569\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>","protected":false},"excerpt":{"rendered":"<p>\uc544\ub798\ub294 \ubc14\ub85c \ubc30\ud3ec \uac00\ub2a5\ud55c \ub2e8\uc77c HTML \ud30c\uc77c\uc785\ub2c8\ub2e4. \ubaa8\ubc14\uc77c\uc5d0 \ucd5c\uc801\ud654\ub41c \uace0\uae09 \ub514\uc790\uc778, \uc720\ud29c\ube0c \uc601\uc0c1, \uc0ac\uc9c4 \uc2ac\ub77c\uc774\ub4dc, \uc811\uc218 \uce74\uc6b4\ud2b8(50\uba85), \ud0c0\uc774\uba38(2025-11-03 17:00 \uae30\uc900), \ub85c\uceec \uc800\uc7a5(localStorage) \uae30\ubc18\uc758 \ucc38\uac00 \ub4f1\ub85d \uc800\uc7a5\uacfc \uc911\ubcf5 \ubc29\uc9c0, \uc811\uc218 \ub9c8\uac10 \ucc98\ub9ac\uae4c\uc9c0 \ud3ec\ud568\ud588\uc2b5\ub2c8\ub2e4. \ud544\uc694 \uc2dc \uc8fc\uc11d\uc5d0 \ub530\ub77c \uc2e4\uc81c \uc11c\ubc84 \uc800\uc7a5 API\ub85c \uad50\uccb4\ub3c4 \uc27d\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ucc38\uace0: – \ub370\uc774\ud130 \uc800\uc7a5: \uae30\ubcf8\uc740 localStorage\ub85c \ub3d9\uc791(\ube0c\ub77c\uc6b0\uc800\uc5d0 \uc548\uc804\ud558\uac8c \uc800\uc7a5). \uc11c\ubc84 […]<\/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-3640","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/comments?post=3640"}],"version-history":[{"count":0,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/pages\/3640\/revisions"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/media?parent=3640"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/en\/wp-json\/wp\/v2\/wf_page_folders?post=3640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}