{"id":2966,"date":"2025-09-03T06:07:27","date_gmt":"2025-09-02T21:07:27","guid":{"rendered":"http:\/\/jbgmna.com\/?page_id=2966"},"modified":"2025-09-03T06:08:22","modified_gmt":"2025-09-02T21:08:22","slug":"%ec%9a%94%ec%96%91%ea%b8%b0%ea%b4%80%ed%95%99%ec%9b%90%ec%84%a4%eb%a6%bd%ec%9a%b4%ec%98%81","status":"publish","type":"page","link":"http:\/\/jbgmna.com\/?page_id=2966","title":{"rendered":"\uc694\uc591\uae30\uad00\ud559\uc6d0\uc124\ub9bd\uc6b4\uc601"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\r\n\r\n\r\n \r\n \r\n \uc694\uc591\uae30\uad00 \ubc0f \ud559\uc6d0 \uc124\ub9bd \uc778\ud130\ub799\ud2f0\ube0c \uac00\uc774\ub4dc<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap\" rel=\"stylesheet\">\r\n <!-- Chosen Palette: Warm Neutrals -->\r\n <!-- Application Structure Plan: \uc0ac\uc6a9\uc790\uac00 '\uc694\uc591\uae30\uad00'\uacfc '\ud559\uc6d0'\uc774\ub77c\ub294 \ub450 \uac00\uc9c0 \uba85\ud655\ud55c \uc815\ubcf4 \uce74\ud14c\uace0\ub9ac \uc911 \ud558\ub098\ub97c \uc120\ud0dd\ud558\ub294 \ud0ed \uae30\ubc18 \uad6c\uc870\ub97c \ucc44\ud0dd\ud588\uc2b5\ub2c8\ub2e4. \uc774 \ubc29\uc2dd\uc740 \uc0ac\uc6a9\uc790\uac00 \uc6d0\ud558\ub294 \uc815\ubcf4\uc5d0 \ube60\ub974\uac8c \uc811\uadfc\ud558\uac8c \ud558\uc5ec \uc774\ud0c8\ub960\uc744 \uc904\uc785\ub2c8\ub2e4. \uac01 \uce74\ud14c\uace0\ub9ac \ub0b4\uc5d0\uc11c\ub294 '\uc124\ub9bd \uc808\ucc28', '\ud575\uc2ec \uc900\ube44\uc0ac\ud56d', '\uc6b4\uc601 \ubc0f \uad00\ub9ac'\ub77c\ub294 3\uac1c\uc758 \uc544\ucf54\ub514\uc5b8 \uba54\ub274\ub85c \uc815\ubcf4\ub97c \uc138\ubd84\ud654\ud588\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 '\uc124\ub9bd \uc808\ucc28'\ub294 \ud14d\uc2a4\ud2b8 \ub9ac\uc2a4\ud2b8 \ub300\uc2e0 \uc2dc\uac01\uc801\uc778 \ub2e8\uacc4\ubcc4 \ud50c\ub85c\uc6b0\ucc28\ud2b8\ub85c \uad6c\ud604\ud558\uc5ec \ubcf5\uc7a1\ud55c \uacfc\uc815\uc744 \uc27d\uac8c \uc774\ud574\ud558\ub3c4\ub85d \uc124\uacc4\ud588\uc2b5\ub2c8\ub2e4. '\ud575\uc2ec \uc900\ube44\uc0ac\ud56d'\uc740 \uc778\ud130\ub799\ud2f0\ube0c \uccb4\ud06c\ub9ac\uc2a4\ud2b8 \ud615\uc2dd\uc73c\ub85c \uc81c\uacf5\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \uc2a4\uc2a4\ub85c \uc900\ube44 \uc0c1\ud0dc\ub97c \uc810\uac80\ud558\ub294 \ub4ef\ud55c \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uad6c\uc870\ub294 \ubc29\ub300\ud55c \uc815\ubcf4\ub97c \uccb4\uacc4\uc801\uc73c\ub85c \uc815\ub9ac\ud558\uace0, \uc0ac\uc6a9\uc790\uc758 \ub2a5\ub3d9\uc801\uc778 \ud0d0\uc0c9\uc744 \uc720\ub3c4\ud558\uc5ec \uc815\ubcf4 \uc2b5\ub4dd\uc758 \ud6a8\uc728\uc131\uc744 \uadf9\ub300\ud654\ud558\uae30 \uc704\ud574 \uc120\ud0dd\ub418\uc5c8\uc2b5\ub2c8\ub2e4. -->\r\n <!-- Visualization & Content Choices: \r\n 1. \uc815\ubcf4: \uc124\ub9bd \uc808\ucc28 -> \ubaa9\ud45c: \ubcf5\uc7a1\ud55c \uc21c\uc11c\uc758 \uc2dc\uac01\uc801 \ub2e8\uc21c\ud654 -> \uc2dc\uac01\ud654: HTML\/CSS \uae30\ubc18\uc758 \uc778\ud130\ub799\ud2f0\ube0c \ud50c\ub85c\uc6b0\ucc28\ud2b8 -> \uc0c1\ud638\uc791\uc6a9: \uac01 \ub2e8\uacc4 \ud074\ub9ad \uc2dc \uc0c1\uc138 \uc124\uba85 \ud45c\uc2dc -> \uc815\ub2f9\uc131: \ud14d\uc2a4\ud2b8 \ubaa9\ub85d\ubcf4\ub2e4 \uacfc\uc815\uc758 \ud750\ub984\uc744 \uc9c1\uad00\uc801\uc73c\ub85c \uc774\ud574\uc2dc\ud0a4\uace0, \uc0ac\uc6a9\uc790\uc758 \ub2a5\ub3d9\uc801 \ucc38\uc5ec\ub97c \uc720\ub3c4\ud568. -> \ub77c\uc774\ube0c\ub7ec\ub9ac\/\ubc29\ubc95: Vanilla JS, Tailwind CSS.\r\n 2. \uc815\ubcf4: \ud575\uc2ec \uc900\ube44\uc0ac\ud56d (\uc2dc\uc124, \uc778\ub825, \uc11c\ub958) -> \ubaa9\ud45c: \ud544\uc218 \uc694\uac74\uc758 \uccb4\uacc4\uc801 \uc815\ub9ac \ubc0f \uc790\uac00 \uc9c4\ub2e8 \uc720\ub3c4 -> \uc2dc\uac01\ud654: \uc544\uc774\ucf58 \uae30\ubc18\uc758 \uc778\ud130\ub799\ud2f0\ube0c \uce74\ub4dc -> \uc0c1\ud638\uc791\uc6a9: \uce74\ub4dc \ud074\ub9ad \uc2dc \uc138\ubd80 \uccb4\ud06c\ub9ac\uc2a4\ud2b8 \ud45c\uc2dc -> \uc815\ub2f9\uc131: \uc815\ubcf4\ub97c \uae30\ub2a5\ubcc4\ub85c \uadf8\ub8f9\ud654\ud558\uc5ec \uc0ac\uc6a9\uc790\uac00 \ud544\uc694\ud55c \ubd80\ubd84\uc744 \uc120\ud0dd\uc801\uc73c\ub85c \ud0d0\uc0c9\ud558\uac8c \ud568. -> \ub77c\uc774\ube0c\ub7ec\ub9ac\/\ubc29\ubc95: Vanilla JS, Tailwind CSS.\r\n 3. \uc815\ubcf4: \uc131\uacf5\uc801 \uc6b4\uc601 \uc694\uc18c -> \ubaa9\ud45c: \ud575\uc2ec \uc131\uacf5 \uc694\uc778\uc758 \uc911\uc694\ub3c4 \uac15\uc870 -> \uc2dc\uac01\ud654: \ub3c4\ub11b \ucc28\ud2b8 -> \uc0c1\ud638\uc791\uc6a9: \uc5c6\uc74c (\uc815\ubcf4 \uc804\ub2ec \ubaa9\uc801) -> \uc815\ub2f9\uc131: \ud14d\uc2a4\ud2b8\ub85c \uc124\uba85\ud558\ub294 \uac83\ubcf4\ub2e4 \uac01 \uc694\uc18c\uc758 \ube44\uc911\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \uba85\ud655\ud558\uac8c \uc804\ub2ec\ud568. -> \ub77c\uc774\ube0c\ub7ec\ub9ac\/\ubc29\ubc95: Chart.js.\r\n CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\r\n <style>\r\n body { font-family: 'Noto Sans KR', sans-serif; }\r\n .tab-active { border-color: #4A5568; color: #2D3748; background-color: #F7FAFC; }\r\n .tab-inactive { border-color: transparent; color: #718096; }\r\n .accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }\r\n .step-active { background-color: #38A169; color: white; }\r\n .info-card-active { border-color: #38A169; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }\r\n .chart-container { position: relative; width: 100%; max-width: 350px; margin-left: auto; margin-right: auto; height: 350px; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-800\">\r\n\r\n <div class=\"container mx-auto p-4 md:p-8 max-w-5xl\">\r\n \r\n <header class=\"text-center mb-8 md:mb-12\">\r\n <h1 class=\"text-3xl md:text-4xl font-bold text-gray-800 mb-2\">\uc694\uc591\uae30\uad00 & \ud559\uc6d0 \uc124\ub9bd \uc62c\uc778\uc6d0 \uac00\uc774\ub4dc<\/h1>\r\n <p class=\"text-md md:text-lg text-gray-600\">\uc804\ubb38\uac00\uc640 \ud568\uaed8\ud558\ub294 \uac00\uc7a5 \ud655\uc2e4\ud558\uace0 \ube60\ub978 \uae38<\/p>\r\n <\/header>\r\n\r\n <div class=\"bg-white p-6 rounded-2xl shadow-lg\">\r\n \r\n <div class=\"mb-6 border-b border-gray-200\">\r\n <nav class=\"flex -mb-px\">\r\n <button id=\"tab-care\" class=\"flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm md:text-base transition-colors duration-300 tab-active\" onclick=\"switchTab('care')\">\r\n <span class=\"text-2xl mr-2\">\ud83c\udfe0<\/span> \uc694\uc591\uae30\uad00 \uc124\ub9bd\r\n <\/button>\r\n <button id=\"tab-academy\" class=\"flex-1 py-4 px-1 text-center border-b-2 font-medium text-sm md:text-base transition-colors duration-300 tab-inactive\" onclick=\"switchTab('academy')\">\r\n <span class=\"text-2xl mr-2\">\ud83d\udcda<\/span> \ud559\uc6d0 \uc124\ub9bd\r\n <\/button>\r\n <\/nav>\r\n <\/div>\r\n\r\n <div id=\"content-care\" class=\"space-y-4\">\r\n <div class=\"p-4 bg-blue-50 border border-blue-200 rounded-lg\">\r\n <p class=\"text-sm md:text-base text-blue-800\">\r\n \uc694\uc591\uae30\uad00 \uc124\ub9bd\uc740 \uc5b4\ub974\uc2e0\ub4e4\uc758 \ud3b8\uc548\ud558\uace0 \uc548\uc804\ud55c \ub178\ud6c4\ub97c \ucc45\uc784\uc9c0\ub294 \uc911\uc694\ud55c \uc0ac\uc5c5\uc785\ub2c8\ub2e4. \ub2e8\uc21c\ud55c \uc0ac\uc5c5\uc790 \ub4f1\ub85d\uc744 \ub118\uc5b4, \ub178\uc778\ubcf5\uc9c0\ubc95\uc5d0 \ub530\ub978 \uc5c4\uaca9\ud55c \uc2dc\uc124, \uc778\ub825, \uc6b4\uc601 \uae30\uc900\uc744 \ucda9\uc871\ud574\uc57c \ud558\ubbc0\ub85c \ucd08\uae30 \ub2e8\uacc4\ubd80\ud130 \uc804\ubb38\uac00\uc758 \uccb4\uacc4\uc801\uc778 \ucee8\uc124\ud305\uc774 \uc131\uacf5\uc758 \ud575\uc2ec\uc785\ub2c8\ub2e4.\r\n <\/p>\r\n <\/div>\r\n <!-- Accordion for Care Facility -->\r\n <div id=\"accordion-care\" class=\"space-y-3\">\r\n <div class=\"border border-gray-200 rounded-lg\">\r\n <button class=\"w-full flex justify-between items-center p-4 text-left font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition\" onclick=\"toggleAccordion(this)\">\r\n <span>\ud83d\ude80 1\ub2e8\uacc4: \uc124\ub9bd \uc808\ucc28 \ud55c\ub208\uc5d0 \ubcf4\uae30<\/span>\r\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <div class=\"p-5 text-sm text-gray-600 bg-white\">\r\n <div id=\"process-care\" class=\"flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-4 text-center\">\r\n <!-- Steps will be generated by JS -->\r\n <\/div>\r\n <div id=\"process-info-care\" class=\"mt-6 p-4 bg-green-50 rounded-md border border-green-200 min-h-[100px]\">\r\n <p class=\"text-green-800\">\uac01 \ub2e8\uacc4\ub97c \ud074\ub9ad\ud558\uc5ec \uc0c1\uc138 \ub0b4\uc6a9\uc744 \ud655\uc778\ud558\uc138\uc694.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"border border-gray-200 rounded-lg\">\r\n <button class=\"w-full flex justify-between items-center p-4 text-left font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition\" onclick=\"toggleAccordion(this)\">\r\n <span>\u2728 2\ub2e8\uacc4: \ud575\uc2ec \uc900\ube44\uc0ac\ud56d \uccb4\ud06c\ud558\uae30<\/span>\r\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <div class=\"p-5 text-sm text-gray-600 bg-white\">\r\n <div class=\"grid md:grid-cols-3 gap-4\">\r\n <!-- Info Cards will be generated by JS -->\r\n <\/div>\r\n <div id=\"checklist-info-care\" class=\"mt-6 p-4 bg-yellow-50 rounded-md border border-yellow-200\">\r\n <p class=\"text-yellow-800\">\uc900\ube44\ud574\uc57c \ud560 \ud575\uc2ec \uc694\uac74\ub4e4\uc785\ub2c8\ub2e4. \uce74\ub4dc\ub97c \ud074\ub9ad\ud558\uc5ec \uc138\ubd80 \uccb4\ud06c\ub9ac\uc2a4\ud2b8\ub97c \ud655\uc778\ud558\uc138\uc694.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"border border-gray-200 rounded-lg\">\r\n <button class=\"w-full flex justify-between items-center p-4 text-left font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition\" onclick=\"toggleAccordion(this)\">\r\n <span>\ud83d\udcc8 3\ub2e8\uacc4: \uc131\uacf5\uc801\uc778 \uc6b4\uc601 \ubc0f \uad00\ub9ac<\/span>\r\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <div class=\"p-5 text-sm text-gray-600 bg-white grid md:grid-cols-2 gap-6 items-center\">\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-3\">\uc9c0\uc18d \uac00\ub2a5\ud55c \uc131\uc7a5\uc744 \uc704\ud55c \uc6b4\uc601 \uc804\ub7b5<\/h4>\r\n <ul class=\"list-disc list-inside space-y-2\">\r\n <li><strong>\uc815\uae30 \uac31\uc2e0 \ubc0f \ud3c9\uac00 \ub300\ube44:<\/strong> 3\ub144\ub9c8\ub2e4 \ub3cc\uc544\uc624\ub294 '\uc9c0\uc815\uac31\uc2e0\uc81c'\uc5d0 \ub300\ube44\ud558\uc5ec \uc11c\ube44\uc2a4 \ud488\uc9c8\uacfc \uc6b4\uc601 \ud22c\uba85\uc131\uc744 \ud56d\uc0c1 \ucd5c\uc0c1\uc73c\ub85c \uc720\uc9c0\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\r\n <li><strong>\ud22c\uba85\ud55c \uc7ac\ubb34 \uad00\ub9ac:<\/strong> \uc804\ubb38\uc801\uc778 \uae30\uc7a5 \ub300\ub9ac\ub97c \ud1b5\ud574 \ud68c\uacc4 \ud22c\uba85\uc131\uc744 \ud655\ubcf4\ud558\uace0, \uc548\uc815\uc801\uc778 \uc7ac\ubb34 \uad6c\uc870\ub97c \ub9cc\ub4dc\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/li>\r\n <li><strong>\uc801\uadf9\uc801\uc778 \ud64d\ubcf4 \ubc0f \uc18c\ud1b5:<\/strong> \uc9c0\uc5ed \uc0ac\ud68c\uc640 \ubcf4\ud638\uc790\ub4e4\uc5d0\uac8c \uc2e0\ub8b0\ub97c \uc904 \uc218 \uc788\ub294 \uc628\ub77c\uc778\/\uc624\ud504\ub77c\uc778 \ud64d\ubcf4 \uc804\ub7b5\uc744 \uc218\ub9bd\ud558\uace0 \uafb8\uc900\ud788 \uc18c\ud1b5\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"careChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"content-academy\" class=\"hidden space-y-4\">\r\n <div class=\"p-4 bg-purple-50 border border-purple-200 rounded-lg\">\r\n <p class=\"text-sm md:text-base text-purple-800\">\r\n \ud559\uc6d0 \uc124\ub9bd\uc740 \ubbf8\ub798 \uc778\uc7ac\ub97c \uc591\uc131\ud558\ub294 \ubcf4\ub78c \uc788\ub294 \uc0ac\uc5c5\uc785\ub2c8\ub2e4. \uad50\uc721\uccad\uc758 \uc5c4\uaca9\ud55c \uc2dc\uc124, \uac15\uc0ac, \uad50\uc2b5 \uacfc\uc815 \uae30\uc900\uc744 \ud1b5\uacfc\ud574\uc57c \ud558\uba70, \ud559\uc0dd\uacfc \ud559\ubd80\ubaa8\uc758 \uc2e0\ub8b0\ub97c \uc5bb\ub294 \uac83\uc774 \ubb34\uc5c7\ubcf4\ub2e4 \uc911\uc694\ud569\ub2c8\ub2e4. \ucca0\uc800\ud55c \uc0ac\uc804 \uc900\ube44\uac00 \uc131\uacf5\uc801\uc778 \ud559\uc6d0 \uc6b4\uc601\uc758 \uccab\uac78\uc74c\uc785\ub2c8\ub2e4.\r\n <\/p>\r\n <\/div>\r\n <!-- Accordion for Academy -->\r\n <div id=\"accordion-academy\" class=\"space-y-3\">\r\n <div class=\"border border-gray-200 rounded-lg\">\r\n <button class=\"w-full flex justify-between items-center p-4 text-left font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition\" onclick=\"toggleAccordion(this)\">\r\n <span>\ud83d\ude80 1\ub2e8\uacc4: \uc124\ub9bd \uc808\ucc28 \ud55c\ub208\uc5d0 \ubcf4\uae30<\/span>\r\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <div class=\"p-5 text-sm text-gray-600 bg-white\">\r\n <div id=\"process-academy\" class=\"flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-4 text-center\">\r\n <!-- Steps will be generated by JS -->\r\n <\/div>\r\n <div id=\"process-info-academy\" class=\"mt-6 p-4 bg-green-50 rounded-md border border-green-200 min-h-[100px]\">\r\n <p class=\"text-green-800\">\uac01 \ub2e8\uacc4\ub97c \ud074\ub9ad\ud558\uc5ec \uc0c1\uc138 \ub0b4\uc6a9\uc744 \ud655\uc778\ud558\uc138\uc694.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"border border-gray-200 rounded-lg\">\r\n <button class=\"w-full flex justify-between items-center p-4 text-left font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition\" onclick=\"toggleAccordion(this)\">\r\n <span>\u2728 2\ub2e8\uacc4: \ud575\uc2ec \uc900\ube44\uc0ac\ud56d \uccb4\ud06c\ud558\uae30<\/span>\r\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <div class=\"p-5 text-sm text-gray-600 bg-white\">\r\n <div class=\"grid md:grid-cols-3 gap-4\">\r\n <!-- Info Cards will be generated by JS -->\r\n <\/div>\r\n <div id=\"checklist-info-academy\" class=\"mt-6 p-4 bg-yellow-50 rounded-md border border-yellow-200\">\r\n <p class=\"text-yellow-800\">\uc900\ube44\ud574\uc57c \ud560 \ud575\uc2ec \uc694\uac74\ub4e4\uc785\ub2c8\ub2e4. \uce74\ub4dc\ub97c \ud074\ub9ad\ud558\uc5ec \uc138\ubd80 \uccb4\ud06c\ub9ac\uc2a4\ud2b8\ub97c \ud655\uc778\ud558\uc138\uc694.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"border border-gray-200 rounded-lg\">\r\n <button class=\"w-full flex justify-between items-center p-4 text-left font-semibold text-gray-700 bg-gray-100 hover:bg-gray-200 transition\" onclick=\"toggleAccordion(this)\">\r\n <span>\ud83d\udcc8 3\ub2e8\uacc4: \uc131\uacf5\uc801\uc778 \uc6b4\uc601 \ubc0f \uad00\ub9ac<\/span>\r\n <span class=\"transform transition-transform duration-300\">\u25bc<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <div class=\"p-5 text-sm text-gray-600 bg-white grid md:grid-cols-2 gap-6 items-center\">\r\n <div>\r\n <h4 class=\"font-bold text-gray-800 mb-3\">\uc9c0\uc18d \uac00\ub2a5\ud55c \uc131\uc7a5\uc744 \uc704\ud55c \uc6b4\uc601 \uc804\ub7b5<\/h4>\r\n <ul class=\"list-disc list-inside space-y-2\">\r\n <li><strong>\uac15\uc0ac \ubc0f \uc9c1\uc6d0 \uad00\ub9ac:<\/strong> \uc6b0\uc218\ud55c \uac15\uc0ac\uc9c4\uc744 \ud655\ubcf4\ud558\uace0, \uadfc\ub85c\uae30\uc900\ubc95\uc744 \uc900\uc218\ud558\uc5ec \uc548\uc815\uc801\uc778 \uad50\uc721 \ud658\uacbd\uc744 \uc870\uc131\ud558\ub294 \uac83\uc774 \ud575\uc2ec\uc785\ub2c8\ub2e4.<\/li>\r\n <li><strong>\uad50\uc2b5\ube44 \uad00\ub9ac \ubc0f \ud22c\uba85\uc131:<\/strong> \uad50\uc2b5\ube44 \ubc18\ud658 \uae30\uc900 \ub4f1 \uad00\ub828 \uaddc\uc815\uc744 \uba85\ud655\ud788 \uac8c\uc2dc\ud558\uace0 \ud22c\uba85\ud558\uac8c \uc6b4\uc601\ud558\uc5ec \ud559\ubd80\ubaa8\uc758 \uc2e0\ub8b0\ub97c \uc5bb\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/li>\r\n <li><strong>\ucc28\ubcc4\ud654\ub41c \uad50\uc721 \ud504\ub85c\uadf8\ub7a8:<\/strong> \uc8fc\ubcc0 \ud559\uc6d0\uacfc \ucc28\ubcc4\ud654\ub418\ub294 \uacbd\uc7c1\ub825 \uc788\ub294 \uad50\uc721 \ucf58\ud150\uce20\uc640 \ud559\uc0dd \uad00\ub9ac \uc2dc\uc2a4\ud15c\uc744 \uc9c0\uc18d\uc801\uc73c\ub85c \uac1c\ubc1c\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"chart-container\">\r\n <canvas id=\"academyChart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <footer class=\"mt-8 md:mt-12 text-center\">\r\n <div class=\"bg-gray-800 text-white p-6 rounded-lg shadow-md md:grid md:grid-cols-2 md:gap-8\">\r\n <div class=\"mb-6 md:mb-0 text-left\">\r\n <h3 class=\"text-3xl font-bold text-yellow-300 mb-2\">VisaJobKorea<\/h3>\r\n <p class=\"text-xl font-bold mb-4\">\ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\uc0ac\ubb34\uc18c<\/p>\r\n <p class=\"text-sm text-gray-300 mb-4\">\ud589\uc815\uc0ac\uc758 \uc804\ubb38\uc801\uc778 \ub3c4\uc6c0\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\r\n <div class=\"text-sm space-y-2\">\r\n <p><strong>\uc804\ud654\ubc88\ud638:<\/strong> 010-6584-0070<\/p>\r\n <p><strong>\ud329\uc2a4\ubc88\ud638:<\/strong> 031-624-2738<\/p>\r\n <p><strong>\uc8fc\uc18c:<\/strong> \uacbd\uae30\ub3c4 \uace0\uc591\uc2dc \uc77c\uc0b0\ub3d9\uad6c \uc7a5\ud56d\ub3d9 895-1 \uc6b0\uc2e0\ud504\ub77c\uc790 505-2\ud638<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"text-left md:text-right\">\r\n <h3 class=\"text-xl font-bold mb-2\">\uc804\ubb38\uac00\uc758 \ub3c4\uc6c0\uc774 \ud544\uc694\ud558\uc2e0\uac00\uc694?<\/h3>\r\n <p class=\"text-sm text-gray-300 mb-4\">\r\n \ubcf5\uc7a1\ud55c \uc124\ub9bd\uc808\ucc28, \ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\uc0ac\ubb34\uc18c\uac00 \ucc98\uc74c\ubd80\ud130 \ub05d\uae4c\uc9c0 \ud568\uaed8\ud569\ub2c8\ub2e4.\r\n <\/p>\r\n <div class=\"text-sm space-y-2 md:text-right\">\r\n <p><strong>\uba54\uc77c:<\/strong> <a href=\"mailto:jirunpeople@naver.com\" class=\"text-blue-300 hover:underline\">jirunpeople@naver.com<\/a><\/p>\r\n <p><strong>\ud648\ud398\uc774\uc9c0:<\/strong> <a href=\"http:\/\/www.jbgmna.com\" target=\"_blank\" class=\"text-blue-300 hover:underline\">www.jbgmna.com<\/a><\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"md:col-span-2 text-center text-xs text-gray-500 mt-8 pt-4 border-t border-gray-700\">\r\n <p>\u00a9 2024 \ube44\uc790\uc7a1\ucf54\ub9ac\uc544\ud589\uc815\uc0ac\uc0ac\ubb34\uc18c. All Rights Reserved.<\/p>\r\n <p class=\"mt-2\">\ubcf8 \ud398\uc774\uc9c0\uc758 \ub0b4\uc6a9\uc740 \uc815\ubcf4 \uc81c\uacf5\uc744 \ubaa9\uc801\uc73c\ub85c \ud558\uba70, \ubc95\uc801 \ud6a8\ub825\uc744 \uac16\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4. \uc815\ud655\ud55c \ub0b4\uc6a9\uc740 \uad00\ub828 \ubc95\uaddc\ub97c \ud655\uc778\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n const data = {\r\n care: {\r\n process: [\r\n { name: '\uc0ac\uc804 \uc0c1\ub2f4', detail: '\uc0ac\uc5c5 \ubc29\ud5a5\uc131 \uc124\uc815 \ubc0f \uc785\uc9c0 \ubd84\uc11d. \uc804\ubb38\uac00\uc640 \ud568\uaed8 \uccab \ub2e8\ucd94\ub97c \uc81c\ub300\ub85c \uaff0\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.' },\r\n { name: '\uc11c\ub958 \uc900\ube44', detail: '\uc2dc\uc124\/\uc778\ub825\/\uc6b4\uc601 \uad00\ub828 \ud544\uc218 \uc11c\ub958\ub97c \ub204\ub77d \uc5c6\uc774 \uaf3c\uaf3c\ud558\uac8c \uc900\ube44\ud569\ub2c8\ub2e4. \ud589\uc815\uc0ac\uc758 \uac80\ud1a0\ub85c \uc2e4\uc218\ub97c \ubc29\uc9c0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.' },\r\n { name: '\uae30\uad00 \uc811\uc218', detail: '\uad00\ud560 \uc2dc\/\uad70\/\uad6c\uccad\uc5d0 \uc900\ube44\ub41c \uc11c\ub958\ub97c \uc811\uc218\ud569\ub2c8\ub2e4. \ubcf4\uc644 \uc694\uccad\uc5d0 \uc2e0\uc18d\ud788 \ub300\uc751\ud574\uc57c \ud569\ub2c8\ub2e4.' },\r\n { name: '\ud604\uc7a5 \uc2e4\uc0ac', detail: '\ub2f4\ub2f9 \uacf5\ubb34\uc6d0\uc774 \ubc29\ubb38\ud558\uc5ec \uc11c\ub958\uc640 \uc2e4\uc81c \uc2dc\uc124\uc774 \uc77c\uce58\ud558\ub294\uc9c0, \ubc95\uc801 \uae30\uc900\uc744 \ucda9\uc871\ud558\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4.' },\r\n { name: '\uc9c0\uc815\uc11c \uad50\ubd80', detail: '\ubaa8\ub4e0 \uc808\ucc28 \ud1b5\uacfc \ud6c4 \ucd5c\uc885\uc801\uc73c\ub85c \uc7a5\uae30\uc694\uc591\uae30\uad00 \uc9c0\uc815\uc11c\ub97c \ubc1c\uae09\ubc1b\uace0 \uc0ac\uc5c5\uc744 \uc2dc\uc791\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.' }\r\n ],\r\n checklist: [\r\n { \r\n icon: '\ud83c\udfe2',\r\n title: '\uc2dc\uc124 \uc694\uac74', \r\n items: [\r\n '\uac74\ucd95\ubb3c \uc6a9\ub3c4: \"\ub178\uc720\uc790\uc2dc\uc124\" \ud655\uc778',\r\n '\uba74\uc801 \uae30\uc900: \uc785\uc18c\uc815\uc6d0 1\uc778\ub2f9 23.6\u33a1 \uc774\uc0c1 \ud655\ubcf4',\r\n '\ud544\uc218 \uacf5\uac04: \uce68\uc2e4, \uc0ac\ubb34\uc2e4, \uc694\uc591\ubcf4\ud638\uc0ac\uc2e4, \uc790\uc6d0\ubd09\uc0ac\uc790\uc2e4, \uc758\ub8cc \ubc0f \uac04\ud638\uc0ac\uc2e4, \ud504\ub85c\uadf8\ub7a8\uc2e4, \ubb3c\ub9ac\uce58\ub8cc\uc2e4, \uc2dd\ub2f9 \ubc0f \uc870\ub9ac\uc2e4, \ud654\uc7a5\uc2e4, \uc138\uba74\uc7a5 \ubc0f \ubaa9\uc695\uc2e4',\r\n '\uc18c\ubc29\uc2dc\uc124 \uc644\ube44 \uc99d\uba85\uc11c \ubc1c\uae09'\r\n ] \r\n },\r\n { \r\n icon: '\ud83d\udc68\u200d\ud83d\udcbc',\r\n title: '\uc778\ub825 \uc694\uac74',\r\n items: [\r\n '\uc2dc\uc124\uc7a5: \uc0ac\ud68c\ubcf5\uc9c0\uc0ac, \uc758\ub8cc\uc778 \ub610\ub294 5\ub144 \uc774\uc0c1 \uacbd\ub825 \uc694\uc591\ubcf4\ud638\uc0ac \ub4f1 \uc790\uaca9 \ucda9\uc871',\r\n '\uc0ac\ud68c\ubcf5\uc9c0\uc0ac, \uac04\ud638(\uc870\ubb34)\uc0ac, \ubb3c\ub9ac(\uc791\uc5c5)\uce58\ub8cc\uc0ac, \uc694\uc591\ubcf4\ud638\uc0ac \ub4f1 \ubc95\uc801 \ubc30\uce58 \uae30\uc900 \uc900\uc218',\r\n '\ubaa8\ub4e0 \uc9c1\uc6d0\uc758 \ubc94\uc8c4 \uacbd\ub825 \uc870\ud68c \ub3d9\uc758 \ubc0f \ud655\uc778',\r\n '\uadfc\ub85c\uacc4\uc57d\uc11c \uc791\uc131 \ubc0f 4\ub300 \ubcf4\ud5d8 \uac00\uc785'\r\n ]\r\n },\r\n { \r\n icon: '\ud83d\udcdd',\r\n title: '\uc11c\ub958 \uc694\uac74',\r\n items: [\r\n '\uc7a5\uae30\uc694\uc591\uae30\uad00 \uc9c0\uc815\uc2e0\uccad\uc11c',\r\n '\uc0ac\uc5c5\uacc4\ud68d\uc11c \ubc0f \uc6b4\uc601\uaddc\uc815',\r\n '\uc608\uc0b0\uc11c',\r\n '\uc2dc\uc124 \ud3c9\uba74\ub3c4 \ubc0f \uc124\ube44\ub0b4\uc5ed\uc11c',\r\n '\uc778\ub825 \ud604\ud669 \ubc0f \uc790\uaca9\uc99d \uc0ac\ubcf8',\r\n '\uc784\ub300\ucc28\uacc4\uc57d\uc11c \ub610\ub294 \ub4f1\uae30\ubd80\ub4f1\ubcf8'\r\n ]\r\n }\r\n ],\r\n chart: {\r\n labels: ['\ubc95\uaddc \uc900\uc218 \ubc0f \uc11c\ub958 \uc644\ubcbd\uc131', '\ud22c\uba85\ud55c \uc7ac\ubb34 \uad00\ub9ac', '\uc804\ubb38\uac00 \ucee8\uc124\ud305', '\uc11c\ube44\uc2a4 \ud488\uc9c8 \uad00\ub9ac'],\r\n data: [40, 25, 20, 15]\r\n }\r\n },\r\n academy: {\r\n process: [\r\n { name: '\uc0ac\uc804 \uc0c1\ub2f4', detail: '\uad50\uc721 \uacfc\uc815, \ub300\uc0c1, \uc9c0\uc5ed\uc744 \uc815\ud558\uace0 \uc218\uc775\uc131\uc744 \ubd84\uc11d\ud569\ub2c8\ub2e4. \uad50\uc721 \ud2b8\ub80c\ub4dc \ubd84\uc11d\uc774 \ud544\uc218\uc801\uc785\ub2c8\ub2e4.' },\r\n { name: '\uc785\uc9c0 \uc120\uc815', detail: '\uac74\ucd95\ubb3c \uc6a9\ub3c4(\uadfc\ub9b0\uc0dd\ud65c\uc2dc\uc124\/\uad50\uc721\uc5f0\uad6c\uc2dc\uc124)\uc640 \uba74\uc801, \uad50\uc721\ud658\uacbd\ubcf4\ud638\uad6c\uc5ed \uc5ec\ubd80\ub97c \ubc18\ub4dc\uc2dc \ud655\uc778\ud574\uc57c \ud569\ub2c8\ub2e4.' },\r\n { name: '\uc11c\ub958 \uc900\ube44', detail: '\uc124\ub9bd\uc6b4\uc601\ub4f1\ub85d\uc2e0\uccad\uc11c, \ud559\uc6d0 \uc6d0\uce59, \uc2dc\uc124\ud3c9\uba74\ub3c4, \uc784\ub300\ucc28\uacc4\uc57d\uc11c \ub4f1 \uad6c\ube44 \uc11c\ub958\ub97c \uc900\ube44\ud569\ub2c8\ub2e4.' },\r\n { name: '\uad50\uc721\uccad \uc811\uc218', detail: '\uad00\ud560 \uad50\uc721\uc9c0\uc6d0\uccad\uc5d0 \uc11c\ub958\ub97c \uc811\uc218\ud558\uace0 \uc18c\ubc29 \uc810\uac80 \ub4f1 \uad00\ub828 \uc808\ucc28\ub97c \uc9c4\ud589\ud569\ub2c8\ub2e4.' },\r\n { name: '\ub4f1\ub85d\uc99d \uad50\ubd80', detail: '\ubaa8\ub4e0 \uae30\uc900 \ucda9\uc871 \uc2dc \ud559\uc6d0\uc124\ub9bd\u00b7\uc6b4\uc601\ub4f1\ub85d\uc99d\uc744 \ubc1c\uae09\ubc1b\uace0, \uc774\ud6c4 \uc0ac\uc5c5\uc790\ub4f1\ub85d \ubc0f \uac15\uc0ac \ub4f1\ub85d\uc744 \uc9c4\ud589\ud569\ub2c8\ub2e4.' }\r\n ],\r\n checklist: [\r\n { \r\n icon: '\ud83c\udfe2',\r\n title: '\uc2dc\uc124 \uc694\uac74', \r\n items: [\r\n '\uac74\ucd95\ubb3c \uc6a9\ub3c4: \uc81c1,2\uc885 \uadfc\ub9b0\uc0dd\ud65c\uc2dc\uc124 \ub610\ub294 \uad50\uc721\uc5f0\uad6c\uc2dc\uc124',\r\n '\uac15\uc758\uc2e4 \uba74\uc801 \uae30\uc900 \uc900\uc218 (\uc9c0\uc5ed\ubcc4 \uc0c1\uc774)',\r\n '\ub0a8\/\ub140 \uad6c\ubd84 \ud654\uc7a5\uc2e4 \ud655\ubcf4',\r\n '\uc18c\ubc29\uc2dc\uc124 \uc644\ube44 \uc99d\uba85\uc11c (\ud574\ub2f9 \uc2dc)',\r\n '\uad50\uc721\ud658\uacbd\ubcf4\ud638\uad6c\uc5ed \ub0b4 \uc720\ud574\uc5c5\uc18c \uc720\ubb34 \ud655\uc778'\r\n ] \r\n },\r\n { \r\n icon: '\ud83d\udc68\u200d\ud83d\udcbc',\r\n title: '\uc778\ub825 \uc694\uac74',\r\n items: [\r\n '\uc124\ub9bd\uc790\/\uc6b4\uc601\uc790 \uacb0\uaca9 \uc0ac\uc720 \ud655\uc778 (\ubc94\uc8c4 \uc774\ub825 \ub4f1)',\r\n '\uac15\uc0ac \uc790\uaca9 \uae30\uc900 \ucda9\uc871 (\uc804\ubb38\ud559\uc0ac \uc774\uc0c1 \ub4f1)',\r\n '\uac15\uc0ac \ucc44\uc6a9 \uc2dc \uc131\ubc94\uc8c4 \ubc0f \uc544\ub3d9\ud559\ub300 \ubc94\uc8c4\uacbd\ub825 \uc870\ud68c \ud544\uc218',\r\n '\uc678\uad6d\uc778 \uac15\uc0ac \ucc44\uc6a9 \uc2dc \ube44\uc790 \ubc0f \ud559\ub825 \uc694\uac74 \ud655\uc778'\r\n ]\r\n },\r\n { \r\n icon: '\ud83d\udcdd',\r\n title: '\uc11c\ub958 \uc694\uac74',\r\n items: [\r\n '\ud559\uc6d0\uc124\ub9bd\u00b7\uc6b4\uc601\ub4f1\ub85d\uc2e0\uccad\uc11c',\r\n '\ud559\uc6d0 \uc6d0\uce59',\r\n '\uc2dc\uc124\ud3c9\uba74\ub3c4',\r\n '\uc784\ub300\ucc28\uacc4\uc57d\uc11c \uc0ac\ubcf8 (\uc6d0\ubcf8 \uc9c0\ucc38)',\r\n '\uc124\ub9bd\uc790 \uc778\uc801\uc0ac\ud56d \uad00\ub828 \uc11c\ub958',\r\n '\uc2e0\ubd84\uc99d'\r\n ]\r\n }\r\n ],\r\n chart: {\r\n labels: ['\ucc28\ubcc4\ud654\ub41c \uad50\uc721 \ucf58\ud150\uce20', '\uc6b0\uc218 \uac15\uc0ac\uc9c4 \ud655\ubcf4', '\ubc95\uaddc \uc900\uc218 \ubc0f \ud589\uc815\ucc98\ub9ac', '\ud559\ubd80\ubaa8 \uc18c\ud1b5 \ubc0f \ub9c8\ucf00\ud305'],\r\n data: [35, 30, 20, 15]\r\n }\r\n }\r\n };\r\n\r\n let currentTab = 'care';\r\n let careChartInstance, academyChartInstance;\r\n\r\n function switchTab(tab) {\r\n currentTab = tab;\r\n document.getElementById('content-care').classList.toggle('hidden', tab !== 'care');\r\n document.getElementById('content-academy').classList.toggle('hidden', tab !== 'academy');\r\n \r\n document.getElementById('tab-care').classList.toggle('tab-active', tab === 'care');\r\n document.getElementById('tab-care').classList.toggle('tab-inactive', tab !== 'care');\r\n \r\n document.getElementById('tab-academy').classList.toggle('tab-active', tab === 'academy');\r\n document.getElementById('tab-academy').classList.toggle('tab-inactive', tab !== 'academy');\r\n\r\n \/\/ \ud0ed \uc804\ud658 \uc2dc \ubaa8\ub4e0 \uc544\ucf54\ub514\uc5b8\uc744 \uc790\ub3d9\uc73c\ub85c \ud3bc\uce69\ub2c8\ub2e4.\r\n openAllAccordions(tab);\r\n }\r\n\r\n function toggleAccordion(button) {\r\n const content = button.nextElementSibling;\r\n const icon = button.querySelector('span:last-child');\r\n if (content.style.maxHeight) {\r\n content.style.maxHeight = null;\r\n icon.style.transform = 'rotate(0deg)';\r\n } else {\r\n content.style.maxHeight = content.scrollHeight + \"px\";\r\n icon.style.transform = 'rotate(180deg)';\r\n \r\n const chartId = content.querySelector('canvas')?.id;\r\n if (chartId === 'careChart' && !careChartInstance) createChart('care');\r\n if (chartId === 'academyChart' && !academyChartInstance) createChart('academy');\r\n }\r\n }\r\n \r\n \/\/ \ud2b9\uc815 \ud0ed\uc758 \ubaa8\ub4e0 \uc544\ucf54\ub514\uc5b8\uc744 \ud3bc\uce58\ub294 \ud568\uc218\r\n function openAllAccordions(tabType) {\r\n const accordionButtons = document.querySelectorAll(`#accordion-${tabType} .w-full.flex`);\r\n accordionButtons.forEach(button => {\r\n const content = button.nextElementSibling;\r\n const icon = button.querySelector('span:last-child');\r\n content.style.maxHeight = content.scrollHeight + \"px\";\r\n icon.style.transform = 'rotate(180deg)';\r\n \r\n const chartId = content.querySelector('canvas')?.id;\r\n if (chartId === 'careChart' && !careChartInstance) createChart('care');\r\n if (chartId === 'academyChart' && !academyChartInstance) createChart('academy');\r\n });\r\n }\r\n\r\n function generateProcessSteps(type) {\r\n const container = document.getElementById(`process-${type}`);\r\n container.innerHTML = '';\r\n data[type].process.forEach((step, index) => {\r\n const stepDiv = document.createElement('div');\r\n stepDiv.className = 'flex-1 min-w-[100px]';\r\n stepDiv.innerHTML = `\r\n <div class=\"step-item bg-gray-200 text-gray-700 w-24 h-24 rounded-full flex items-center justify-center mx-auto cursor-pointer transition\" onclick=\"showProcessDetail('${type}', ${index})\">${index + 1}. ${step.name}<\/div>\r\n `;\r\n container.appendChild(stepDiv);\r\n\r\n if (index < data[type].process.length - 1) {\r\n const arrow = document.createElement('div');\r\n arrow.className = 'text-2xl text-gray-400 md:rotate-0 rotate-90';\r\n arrow.innerHTML = '\u2192';\r\n container.appendChild(arrow);\r\n }\r\n });\r\n }\r\n \r\n function showProcessDetail(type, index) {\r\n const infoContainer = document.getElementById(`process-info-${type}`);\r\n infoContainer.innerHTML = `<p class=\"font-bold text-green-900\">${index + 1}. ${data[type].process[index].name}<\/p><p class=\"text-green-800 mt-1\">${data[type].process[index].detail}<\/p>`;\r\n \r\n document.querySelectorAll(`#process-${type} .step-item`).forEach((el, i) => {\r\n el.classList.toggle('step-active', i === index);\r\n el.classList.toggle('bg-gray-200', i !== index);\r\n el.classList.toggle('text-gray-700', i !== index);\r\n });\r\n }\r\n\r\n function generateChecklistCards(type) {\r\n const container = document.querySelector(`#accordion-${type} .grid`);\r\n container.innerHTML = '';\r\n data[type].checklist.forEach((card, index) => {\r\n const cardDiv = document.createElement('div');\r\n cardDiv.className = 'info-card border-2 border-gray-200 p-4 rounded-lg cursor-pointer hover:shadow-md hover:border-gray-400 transition';\r\n cardDiv.onclick = () => showChecklistDetail(type, index);\r\n cardDiv.innerHTML = `\r\n <div class=\"text-3xl mb-2\">${card.icon}<\/div>\r\n <h4 class=\"font-bold text-gray-800\">${card.title}<\/h4>\r\n `;\r\n container.appendChild(cardDiv);\r\n });\r\n }\r\n\r\n function showChecklistDetail(type, index) {\r\n const infoContainer = document.getElementById(`checklist-info-${type}`);\r\n const cardData = data[type].checklist[index];\r\n let listItems = cardData.items.map(item => `<li class=\"flex items-start\"><span class=\"text-green-500 mr-2 mt-1\">\u2714<\/span><span>${item}<\/span><\/li>`).join('');\r\n infoContainer.innerHTML = `\r\n <h5 class=\"font-bold text-yellow-900 mb-2\">${cardData.icon} ${cardData.title}<\/h5>\r\n <ul class=\"space-y-1 text-yellow-800\">${listItems}<\/ul>\r\n `;\r\n \r\n document.querySelectorAll(`#accordion-${type} .info-card`).forEach((el, i) => {\r\n el.classList.toggle('info-card-active', i === index);\r\n });\r\n }\r\n\r\n function createChart(type) {\r\n const ctx = document.getElementById(`${type}Chart`).getContext('2d');\r\n const chartData = data[type].chart;\r\n const instance = new Chart(ctx, {\r\n type: 'doughnut',\r\n data: {\r\n labels: chartData.labels,\r\n datasets: [{\r\n label: '\uc131\uacf5 \uc694\uc778',\r\n data: chartData.data,\r\n backgroundColor: [\r\n 'rgba(54, 162, 235, 0.7)',\r\n 'rgba(255, 206, 86, 0.7)',\r\n 'rgba(75, 192, 192, 0.7)',\r\n 'rgba(153, 102, 255, 0.7)',\r\n ],\r\n borderColor: [\r\n 'rgba(54, 162, 235, 1)',\r\n 'rgba(255, 206, 86, 1)',\r\n 'rgba(75, 192, 192, 1)',\r\n 'rgba(153, 102, 255, 1)',\r\n ],\r\n borderWidth: 1\r\n }]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: {\r\n legend: {\r\n position: 'bottom',\r\n labels: {\r\n font: {\r\n size: 11\r\n }\r\n }\r\n },\r\n title: {\r\n display: true,\r\n text: type === 'care' ? '\uc694\uc591\uae30\uad00 \uc131\uacf5 \uc6b4\uc601 \uc694\uc18c' : '\ud559\uc6d0 \uc131\uacf5 \uc6b4\uc601 \uc694\uc18c',\r\n font: {\r\n size: 14,\r\n weight: 'bold'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n if (type === 'care') careChartInstance = instance;\r\n else academyChartInstance = instance;\r\n }\r\n\r\n window.onload = () => {\r\n generateProcessSteps('care');\r\n generateChecklistCards('care');\r\n generateProcessSteps('academy');\r\n generateChecklistCards('academy');\r\n \r\n \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \uae30\ubcf8 \ud0ed\uc758 \ubaa8\ub4e0 \uc544\ucf54\ub514\uc5b8\uc744 \ud3bc\uce69\ub2c8\ub2e4.\r\n openAllAccordions('care');\r\n };\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\uc694\uc591\uae30\uad00 \ubc0f \ud559\uc6d0 \uc124\ub9bd \uc778\ud130\ub799\ud2f0\ube0c \uac00\uc774\ub4dc \uc694\uc591\uae30\uad00 & \ud559\uc6d0 \uc124\ub9bd \uc62c\uc778\uc6d0 \uac00\uc774\ub4dc \uc804\ubb38\uac00\uc640 \ud568\uaed8\ud558\ub294 \uac00\uc7a5 \ud655\uc2e4\ud558\uace0 \ube60\ub978 \uae38 \ud83c\udfe0 \uc694\uc591\uae30\uad00 \uc124\ub9bd \ud83d\udcda \ud559\uc6d0 \uc124\ub9bd \uc694\uc591\uae30\uad00 \uc124\ub9bd\uc740 \uc5b4\ub974\uc2e0\ub4e4\uc758 \ud3b8\uc548\ud558\uace0 \uc548\uc804\ud55c \ub178\ud6c4\ub97c …<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2966","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jbgmna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2966"}],"version-history":[{"count":4,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2966\/revisions"}],"predecessor-version":[{"id":2970,"href":"http:\/\/jbgmna.com\/index.php?rest_route=\/wp\/v2\/pages\/2966\/revisions\/2970"}],"wp:attachment":[{"href":"http:\/\/jbgmna.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}