\ud2b8\ub9ac M.D. – \ub370\uc774\ud130 \uae30\ubc18 \uc218\ubaa9 \ud558\uc790 \uad00\ub9ac \uc194\ub8e8\uc158<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-adapter-date-fns\/dist\/chartjs-adapter-date-fns.bundle.min.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body { font-family: 'Noto Sans KR', sans-serif; }\n .chart-container { position: relative; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; height: 350px; max-height: 450px; }\n .radar-chart-container { position: relative; width: 100%; max-width: 300px; margin: 1rem auto; height: 250px; }\n @media (min-width: 768px) { .chart-container { height: 400px; } }\n .tree-pin { transition: all 0.3s ease; }\n .tree-pin.selected { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }\n .nav-link { transition: color 0.3s; }\n .nav-link:hover { color: #16a34a; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n <a href=\"#hero\" class=\"text-2xl font-bold text-green-700\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/a>\n <div class=\"hidden md:flex space-x-8\">\n <a href=\"#problem\" class=\"nav-link text-gray-600\">\ud558\uc790 \ubd84\uc7c1\uc758 \ud604\uc2e4<\/a>\n <a href=\"#solution\" class=\"nav-link text-gray-600\">\uc194\ub8e8\uc158 \uccb4\ud5d8<\/a>\n <a href=\"#impact\" class=\"nav-link text-gray-600\">\ud575\uc2ec \uac00\uce58<\/a>\n <a href=\"#business\" class=\"nav-link text-gray-600\">\uc131\uc7a5 \uc804\ub7b5<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hero\" class=\"min-h-[60vh] flex items-center bg-green-50\">\n <div class=\"container mx-auto px-6 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-bold text-gray-800 mb-4\">\uc218\ubaa9 \ud558\uc790 \ubd84\uc7c1, \ub370\uc774\ud130\ub85c \ud574\uacb0\ud569\ub2c8\ub2e4<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n ‘\ud2b8\ub9ac M.D.’\ub294 \ud45c\uc900\ud654\ub41c \uc9c4\ub2e8 \uae30\uc900\uacfc \ubaa8\ub4e0 \uc0dd\uc721 \ub370\uc774\ud130\ub97c \ud22c\uba85\ud558\uac8c \uae30\ub85d\ud558\uc5ec, \uc218\ubaa9 \ud558\uc790\uc758 \ucc45\uc784 \uc18c\uc7ac\ub97c \uba85\ud655\ud788 \uaddc\uba85\ud558\ub294 \uac1d\uad00\uc801 \uc99d\uac70\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/section>\n\n <section id=\"problem\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ub05d\ub098\uc9c0 \uc54a\ub294 \ucc45\uc784 \uacf5\ubc29, \uc65c \ubc18\ubcf5\ub420\uae4c\uc694?<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\uc218\ubaa9 \uace0\uc0ac\uc758 \uc6d0\uc778\uc774 ‘\ucd08\uae30 \ubd88\ub7c9’\uc778\uc9c0 ‘\uad00\ub9ac \ubd80\uc2e4’\uc778\uc9c0, \uc8fc\uad00\uc801\uc778 \ud310\ub2e8\uc774 \uc544\ub2cc \uac1d\uad00\uc801\uc778 \ub370\uc774\ud130\ub85c \uc99d\uba85\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8 text-center\">\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\ud83c\udfe2<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc2dc\uacf5\uc0ac\/\ub0a9\ud488\uc0ac<\/h3>\n <p class=\"text-gray-600\">“\ubd84\uba85 \uac74\uac15\ud55c \ub098\ubb34\ub97c \uc2ec\uc5c8\ub2e4. \ubb3c\uc744 \uc81c\ub300\ub85c \uc8fc\uc9c0 \uc54a\uc740 \uad00\ub9ac \uc18c\ud640\uc774 \ubb38\uc81c\ub2e4.”<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\u2694\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ubaa8\ud638\ud55c \ud310\uc815 \uae30\uc900<\/h3>\n <p class=\"text-gray-600\">\ub204\uad6c\uc758 \uc8fc\uc7a5\uc774 \ub9de\ub294\uc9c0 \ud310\ub2e8\ud560 \uac1d\uad00\uc801 \ub370\uc774\ud130\uc640 \ud45c\uc900\ud654\ub41c \uae30\uc900\uc774 \uc5c6\uc5b4, \ubd84\uc7c1\uacfc \ubd88\ud544\uc694\ud55c \ube44\uc6a9\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\ud83c\udf33<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uad00\ub9ac\uc8fc\uccb4<\/h3>\n <p class=\"text-gray-600\">“\ub9e4\ub274\uc5bc\ub300\ub85c \uad00\ub9ac\ud588\ub2e4. \ucc98\uc74c\ubd80\ud130 \ub098\ubb34\uac00 \ubd80\uc2e4\ud588\uac70\ub098 \uc2dd\uc7ac \uacfc\uc815\uc5d0 \ubb38\uc81c\uac00 \uc788\uc5c8\ub2e4.”<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ud558\uc790 \uad00\ub9ac \ub300\uc2dc\ubcf4\ub4dc \uccb4\ud5d8<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\n \ub098\ubb34\ub97c \uc120\ud0dd\ud558\uc5ec \ud45c\uc900\ud654\ub41c \uc9c4\ub2e8 \uae30\uc900\uc5d0 \ub530\ub978 \uc0dd\uc721 \ub370\uc774\ud130\ub97c \ud655\uc778\ud558\uace0, AI\uc758 \uac1d\uad00\uc801\uc778 \ud558\uc790 \uc6d0\uc778 \ubd84\uc11d\uc744 \uacbd\ud5d8\ud574\ubcf4\uc138\uc694.\n <\/p>\n <\/div>\n <div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg\">\n <div class=\"grid lg:grid-cols-2 gap-8\">\n <div class=\"lg:col-span-1\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\ub2e8\uc9c0 \ub0b4 \uc218\ubaa9 \ud604\ud669 (GIS)<\/h3>\n <div id=\"map-container\" class=\"relative w-full h-96 bg-green-100 rounded-lg border-2 border-green-200\">\n \n <\/div>\n <div class=\"flex justify-center space-x-4 mt-4 text-sm\">\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-green-500 mr-2\"><\/div>\uc815\uc0c1<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-yellow-400 mr-2\"><\/div>\uc1e0\uc57d<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-red-500 mr-2\"><\/div>\uace0\uc0ac<\/span>\n <\/div>\n <\/div>\n <div id=\"dashboard-panel\" class=\"lg:col-span-1 bg-gray-50 p-6 rounded-lg\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\uc218\ubaa9 \uc774\ub825 \ubc0f \uc9c4\ub2e8<\/h3>\n <div id=\"tree-details-placeholder\" class=\"text-gray-500 text-center py-10\">\uc9c0\ub3c4 \uc704\uc758 \ub098\ubb34 \ud540\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.<\/div>\n <div id=\"tree-details\" class=\"hidden\">\n <h4 id=\"tree-name\" class=\"text-2xl font-bold text-green-700\"><\/h4>\n <div class=\"mt-4 space-y-2 text-sm\">\n <div class=\"flex justify-between items-center bg-white p-2 rounded-md\"><span>\uc2dd\uc7ac\uc77c:<\/span><span id=\"planting-date\" class=\"font-bold\"><\/span><\/div>\n <div class=\"flex justify-between items-center bg-white p-2 rounded-md\"><span>\ud558\uc790\ubcf4\uc99d \ub9cc\ub8cc\uc77c:<\/span><span id=\"warranty-date\" class=\"font-bold\"><\/span><\/div>\n <div class=\"flex justify-between items-center bg-white p-2 rounded-md\"><span>\uc885\ud569\ud310\uc815:<\/span><span id=\"tree-status\" class=\"px-2 py-1 font-bold rounded-full\"><\/span><\/div>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-bold text-lg mb-2\">\ud45c\uc900 \uc9c4\ub2e8 \uccb4\ud06c\ub9ac\uc2a4\ud2b8<\/h4>\n <div id=\"checklist\" class=\"space-y-1 text-sm bg-white p-3 rounded-md\"><\/div>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-bold text-lg mb-2\">AI \ud558\uc790 \uc6d0\uc778 \ubd84\uc11d<\/h4>\n <p id=\"ai-recommendation\" class=\"text-gray-600 bg-blue-50 border border-blue-200 p-3 rounded-md text-sm\"><\/p>\n <\/div>\n <div class=\"mt-4\">\n <button id=\"report-btn\" class=\"w-full bg-green-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-green-700 transition-colors\">\n \ud558\uc790 \ubd84\uc11d \ub9ac\ud3ec\ud2b8 \uc0dd\uc131\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-12 grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <h3 class=\"font-bold text-xl mb-4 text-gray-700 text-center\">\uc218\ubaa9 \uac74\uac15 \ub808\uc774\ub354 \ucc28\ud2b8<\/h3>\n <div class=\"radar-chart-container\">\n <canvas id=\"healthRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"font-bold text-xl mb-4 text-gray-700 text-center\">\uc0dd\uc721 \ud658\uacbd \ub370\uc774\ud130 \ucd94\uc801 (\ud1a0\uc591 \uc218\ubd84)<\/h3>\n <div class=\"chart-container h-80\">\n <canvas id=\"moistureChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">‘\ud2b8\ub9ac M.D.’\uac00 \uc81c\uacf5\ud558\ub294 \ud575\uc2ec \uac00\uce58<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ub370\uc774\ud130\ub294 \uac00\uc7a5 \uacf5\uc815\ud55c \uc2ec\ud310\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"text-center p-8 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcc4<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uac1d\uad00\uc801 \ucc45\uc784 \uaddc\uba85<\/h3>\n <p class=\"text-gray-600\">\ud45c\uc900\ud654\ub41c \uccb4\ud06c\ub9ac\uc2a4\ud2b8\uc640 \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uc790\uc758 \uc6d0\uc778\uc744 \uacfc\ud559\uc801\uc73c\ub85c \ubd84\uc11d\ud558\uace0 \ucc45\uc784 \uc18c\uc7ac\ub97c \uba85\ud655\ud788 \ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-8 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcb8<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ud558\uc790 \ubcf4\uc218 \ube44\uc6a9 \uc808\uac10<\/h3>\n <p class=\"text-gray-600\">\uc870\uae30 \uc9c4\ub2e8\uc744 \ud1b5\ud574 \uc608\ubc29\uc801 \uc870\uce58\ub97c \uac00\ub2a5\ud558\uac8c \ud558\uace0, \ubd88\ud544\uc694\ud55c \ubd84\uc7c1\uacfc \uad50\uccb4 \ube44\uc6a9\uc744 \ud68d\uae30\uc801\uc73c\ub85c \uc904\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-8 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83e\udd1d<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ud22c\uba85\ud55c \uc2e0\ub8b0 \uad00\uacc4 \uad6c\ucd95<\/h3>\n <p class=\"text-gray-600\">\ubaa8\ub4e0 \uc774\ud574\uad00\uacc4\uc790\uac00 \ub3d9\uc77c\ud55c \ub370\uc774\ud130\ub97c \uacf5\uc720\ud568\uc73c\ub85c\uc368, \ud22c\uba85\ud558\uace0 \uc2e0\ub8b0 \uae30\ubc18\uc758 \ud611\uc5c5 \ud658\uacbd\uc744 \uc870\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"business\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\uc131\uc7a5 \uc804\ub7b5 \ubc0f \ube44\uc988\ub2c8\uc2a4 \ubaa8\ub378<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ub2e8\uacc4\uc801 \uc131\uc7a5\uacfc \ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378\ub85c \uc2dc\uc7a5\uc744 \uc120\ub3c4\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"mb-12\">\n <h3 class=\"text-2xl font-bold text-center mb-8\">\uac1c\ubc1c \ub85c\ub4dc\ub9f5<\/h3>\n <div class=\"flex flex-col md:flex-row justify-center items-center\">\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">1\ub2e8\uacc4 (3\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">MVP \uace0\ub3c4\ud654<\/div>\n <p class=\"text-sm text-gray-600\">5\ub2e8\uacc4 \ud310\uc815 \uae30\uc900 \ubc0f \ud45c\uc900 \uccb4\ud06c\ub9ac\uc2a4\ud2b8 \uae30\ub2a5 \uc801\uc6a9<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">2\ub2e8\uacc4 (6\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">\ubca0\ud0c0 \ub7f0\uce6d<\/div>\n <p class=\"text-sm text-gray-600\">\uac74\uc124\uc0ac, \uc870\uacbd\uc5c5\uccb4 \ub300\uc0c1 \ubca0\ud0c0 \uc11c\ube44\uc2a4 \ubc0f \ud558\uc790 \ud310\uc815 AI \uace0\ub3c4\ud654<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">3\ub2e8\uacc4 (12\uac1c\uc6d4~)<\/div>\n <div class=\"font-bold text-lg\">\uc815\uc2dd \ucd9c\uc2dc \ubc0f \ud655\uc7a5<\/div>\n <p class=\"text-sm text-gray-600\">SaaS \ubc0f \ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4, \uacf5\uacf5 \uc870\ub2ec \uc2dc\uc7a5 \uc9c4\ucd9c<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"order-2 md:order-1\">\n <h3 class=\"text-2xl font-bold text-center md:text-left mb-4\">\ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378<\/h3>\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold\">SaaS \uad6c\ub3c5\ub8cc (\uc8fc\ub825)<\/h4>\n <p class=\"text-sm text-gray-600\">\uad00\ub9ac \uc218\ubaa9 \uc218 \ubc0f \ud558\uc790 \ubcf4\uc99d \uae30\uac04 \uc5f0\ub3d9 \uad6c\ub3c5\ub8cc<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-yellow-500\">\n <h4 class=\"font-bold\">\ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4\/\ub80c\ud0c8<\/h4>\n <p class=\"text-sm text-gray-600\">\uc2dd\uc7ac \uc2dc \ubd80\ucc29\ud558\ub294 \uc2a4\ub9c8\ud2b8 \uc13c\uc11c \ud45c\ucc30 \ubc0f \uc9c4\ub2e8\uae30<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold\">\ub9ac\ud3ec\ud2b8 \ubc1c\uae09 \uc218\uc218\ub8cc<\/h4>\n <p class=\"text-sm text-gray-600\">\ubd84\uc7c1 \uc870\uc815\uc744 \uc704\ud55c \uacf5\uc2dd \ub370\uc774\ud130 \ub9ac\ud3ec\ud2b8 \ubc1c\uae09<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-purple-500\">\n <h4 class=\"font-bold\">\ub370\uc774\ud130 \ubd84\uc11d \ucee8\uc124\ud305<\/h4>\n <p class=\"text-sm text-gray-600\">\ub300\uaddc\ubaa8 \ub2e8\uc9c0 \ub300\uc0c1 \ud558\uc790\uc728 \uc608\uce21 \ubc0f \uad00\ub9ac \ucee8\uc124\ud305<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"order-1 md:order-2 chart-container h-80\">\n <canvas id=\"revenueChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n \n <footer class=\"bg-gray-800 text-white py-8\">\n <div class=\"container mx-auto px-6 text-center\">\n <p class=\"text-2xl font-bold mb-2\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/p>\n <p>‘\ud2b8\ub9ac M.D.’\uc640 \ud568\uaed8 \ud22c\uba85\ud558\uace0 \uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uc218\ubaa9 \uad00\ub9ac\uc758 \ubbf8\ub798\ub97c \ub9cc\ub4e4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n <p class=\"text-sm mt-4 text-gray-400\">© 2025 (\uc8fc)\ud55c\uc131\ub098\ubb34\uc885\ud569\ubcd1\uc6d0. All Rights Reserved.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const assessmentStages = {\n 1: { name: '\uc591\ud638', color: 'green' },\n 2: { name: '\uacbd\ubbf8\ud55c \uc1e0\uc57d', color: 'yellow' },\n 3: { name: '\uc911\ub4f1\ub3c4 \uc1e0\uc57d', color: 'yellow' },\n 4: { name: '\uc911\uc99d \uc1e0\uc57d', color: 'red' },\n 5: { name: '\uc644\uc804 \uace0\uc0ac', color: 'red' }\n };\n \n const mapStatus = {\n '\uc591\ud638': 'green',\n '\uc1e0\uc57d': 'yellow',\n '\uace0\uc0ac': 'red'\n };\n\n const treeData = [\n { \n id: 1, name: '101\ub3d9 \uc55e \uc18c\ub098\ubb34', stage: 4, x: 20, y: 30, \n plantingDate: '2024-04-15',\n details: { leafLoss: 75, deadBranch: 80, barkPeel: 30, newShoots: 10, pestDamage: 20 },\n history: [ { date: '2024-04-15', moisture: 75 }, { date: '2024-08-15', moisture: 18 }, { date: '2025-01-15', moisture: 15 } ]\n },\n { \n id: 2, name: '\ub180\uc774\ud130 \uc606 \ubc9a\ub098\ubb34', stage: 3, x: 45, y: 60,\n plantingDate: '2023-10-20',\n details: { leafLoss: 45, deadBranch: 25, barkPeel: 10, newShoots: 40, pestDamage: 50 },\n history: [ { date: '2025-02-17', moisture: 55 }, { date: '2025-05-17', moisture: 40 }, { date: '2025-07-17', moisture: 28 } ]\n },\n { \n id: 3, name: '\uc815\ubb38 \uc606 \ub290\ud2f0\ub098\ubb34', stage: 1, x: 75, y: 20,\n plantingDate: '2024-04-15',\n details: { leafLoss: 5, deadBranch: 0, barkPeel: 0, newShoots: 95, pestDamage: 5 },\n history: [ { date: '2025-02-17', moisture: 60 }, { date: '2025-05-17', moisture: 56 }, { date: '2025-07-17', moisture: 55 } ]\n },\n { \n id: 4, name: '\ud6c4\ubb38 \uc0b0\ucc45\ub85c \uc774\ud31d\ub098\ubb34', stage: 5, x: 80, y: 75,\n plantingDate: '2025-04-01',\n details: { leafLoss: 100, deadBranch: 100, barkPeel: 70, newShoots: 0, pestDamage: 10 },\n history: [ { date: '2025-04-01', moisture: 25 }, { date: '2025-06-01', moisture: 15 }, { date: '2025-07-15', moisture: 10 } ]\n },\n ];\n\n const mapContainer = document.getElementById('map-container');\n const treeDetailsPlaceholder = document.getElementById('tree-details-placeholder');\n const treeDetailsPanel = document.getElementById('tree-details');\n const treeNameEl = document.getElementById('tree-name');\n const treeStatusEl = document.getElementById('tree-status');\n const plantingDateEl = document.getElementById('planting-date');\n const warrantyDateEl = document.getElementById('warranty-date');\n const checklistEl = document.getElementById('checklist');\n const aiRecommendationEl = document.getElementById('ai-recommendation');\n const reportBtn = document.getElementById('report-btn');\n\n let selectedTreePin = null;\n\n treeData.forEach(tree => {\n const pin = document.createElement('div');\n pin.className = 'tree-pin absolute w-5 h-5 rounded-full cursor-pointer border-2 border-white';\n pin.style.left = `${tree.x}%`;\n pin.style.top = `${tree.y}%`;\n pin.style.transform = 'translate(-50%, -50%)';\n pin.dataset.id = tree.id;\n \n let mapColor = 'bg-green-500';\n if (tree.stage >= 2 && tree.stage <= 4) mapColor = 'bg-yellow-400';\n else if (tree.stage === 5) mapColor = 'bg-red-500';\n pin.classList.add(mapColor);\n\n pin.addEventListener('click', () => {\n updateDashboard(tree.id);\n if (selectedTreePin) {\n selectedTreePin.classList.remove('selected');\n }\n pin.classList.add('selected');\n selectedTreePin = pin;\n });\n mapContainer.appendChild(pin);\n });\n\n const statusClasses = {\n 'green': 'bg-green-100 text-green-800',\n 'yellow': 'bg-yellow-100 text-yellow-800',\n 'red': 'bg-red-100 text-red-800',\n };\n\n function getAIAnalysis(tree) {\n const { stage, details, history } = tree;\n if (stage === 1) return '\ubd84\uc11d \uacb0\uacfc: \ubaa8\ub4e0 \uc9c0\ud45c\uac00 \uc591\ud638\ud569\ub2c8\ub2e4. \ud45c\uc900\ud654\ub41c \uae30\uc900\uc5d0 \ub530\ub77c \uac74\uac15\ud55c \uc0c1\ud0dc\ub85c \ud310\uc815\ub429\ub2c8\ub2e4.';\n if (stage <= 3) return `\ubd84\uc11d \uacb0\uacfc: \uc78e \uc190\uc2e4\ub960(${details.leafLoss}%) \ubc0f \uace0\uc0ac \uac00\uc9c0 \ube44\uc728(${details.deadBranch}%)\uc774 '\uacbd\ubbf8~\uc911\ub4f1\ub3c4 \uc1e0\uc57d' \ubc94\uc704\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uc18d\uc801\uc778 \uad00\ub9ac \ubd80\uc2e4\uc774 \uc758\uc2ec\ub418\ub2c8 \uad00\uc218 \ubc0f \ubcd1\ud574\ucda9 \uad00\ub9ac\ub97c \uac15\ud654\ud574\uc57c \ud569\ub2c8\ub2e4.`;\n \n const initialMoisture = history[0].moisture;\n if (stage >= 4) {\n if (initialMoisture < 40) {\n return `\ubd84\uc11d \uacb0\uacfc: \uc78e \uc190\uc2e4\ub960(${details.leafLoss}%) \ubc0f \uace0\uc0ac \uac00\uc9c0 \ube44\uc728(${details.deadBranch}%)\uc774 '\uc911\uc99d \uc1e0\uc57d' \uc774\uc0c1\uc774\uba70, \ud558\uc790\uc2ec\uc0ac\uc704\uc758 '\uac00\uc9c0 2\/3 \uc774\uc0c1 \uace0\uc0ac' \uae30\uc900\uc5d0 \uadfc\uc811\ud569\ub2c8\ub2e4. \ud2b9\ud788 \uc2dd\uc7ac \ucd08\uae30 \uc218\ubd84(${initialMoisture}%)\uc774 \ub9e4\uc6b0 \ub0ae\uc544, \ucd08\uae30 \ubd88\ub7c9 \ub610\ub294 \uc2dd\uc7ac \uacfc\uc815 \ubb38\uc81c\uc77c \uac00\ub2a5\uc131\uc774 \ub192\uc2b5\ub2c8\ub2e4. (\uc2dc\uacf5\uc0ac \ucc45\uc784 \ucd94\uc815)`;\n }\n return `\ubd84\uc11d \uacb0\uacfc: \uc78e \uc190\uc2e4\ub960(${details.leafLoss}%) \ubc0f \uace0\uc0ac \uac00\uc9c0 \ube44\uc728(${details.deadBranch}%)\uc774 '\uc911\uc99d \uc1e0\uc57d' \uc774\uc0c1\uc785\ub2c8\ub2e4. \uc2dd\uc7ac \ucd08\uae30(${history[0].date})\uc5d0 \ube44\ud574 \ud604\uc7ac \uc218\ubd84 \ub370\uc774\ud130\uac00 \uae09\uaca9\ud788 \uc545\ud654\ub418\uc5b4, \uc9c0\uc18d\uc801\uc778 \uad00\ub9ac \ubd80\uc2e4\ub85c \uc778\ud55c \ud558\uc790 \uac00\ub2a5\uc131\uc774 \ub9e4\uc6b0 \ub192\uc2b5\ub2c8\ub2e4. (\uad00\ub9ac\uc8fc\uccb4 \ucc45\uc784 \ucd94\uc815)`;\n }\n }\n\n function updateDashboard(id) {\n const tree = treeData.find(t => t.id === id);\n if (!tree) return;\n\n treeDetailsPlaceholder.classList.add('hidden');\n treeDetailsPanel.classList.remove('hidden');\n\n treeNameEl.textContent = tree.name;\n \n const pDate = new Date(tree.plantingDate);\n plantingDateEl.textContent = pDate.toLocaleDateString('ko-KR');\n const wDate = new Date(new Date(tree.plantingDate).setFullYear(pDate.getFullYear() + 2));\n warrantyDateEl.textContent = wDate.toLocaleDateString('ko-KR');\n\n const stageInfo = assessmentStages[tree.stage];\n treeStatusEl.textContent = stageInfo.name;\n treeStatusEl.className = `px-2 py-1 font-bold rounded-full ${statusClasses[stageInfo.color]}`;\n \n checklistEl.innerHTML = `\n <div class=\"flex justify-between\"><span>\uc78e \uc190\uc2e4\ub960:<\/span><span class=\"font-bold\">${tree.details.leafLoss}%<\/span><\/div>\n <div class=\"flex justify-between\"><span>\uace0\uc0ac \uac00\uc9c0 \ube44\uc728:<\/span><span class=\"font-bold\">${tree.details.deadBranch}%<\/span><\/div>\n <div class=\"flex justify-between\"><span>\uc218\ud53c \ubc15\ub9ac \uc815\ub3c4:<\/span><span class=\"font-bold\">${tree.details.barkPeel}%<\/span><\/div>\n <div class=\"flex justify-between\"><span>\uc0c8\uc21c \ubc1c\uc544\ub825:<\/span><span class=\"font-bold\">${tree.details.newShoots}\/100<\/span><\/div>\n <div class=\"flex justify-between\"><span>\ubcd1\ud574\ucda9 \ud53c\ud574:<\/span><span class=\"font-bold\">${tree.details.pestDamage}%<\/span><\/div>\n `;\n\n aiRecommendationEl.textContent = getAIAnalysis(tree);\n\n updateMoistureChart(tree.history);\n updateHealthRadarChart(tree.details);\n }\n \n reportBtn.addEventListener('click', () => {\n alert('\uc120\ud0dd\ub41c \uc218\ubaa9\uc758 \ud45c\uc900 \uc9c4\ub2e8 \uccb4\ud06c\ub9ac\uc2a4\ud2b8\uc640 AI \ubd84\uc11d \uacb0\uacfc\uac00 \ud3ec\ud568\ub41c \ub9ac\ud3ec\ud2b8\uac00 \uc0dd\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4. (\ub370\ubaa8)');\n });\n\n let moistureChart, revenueChart, healthRadarChart;\n\n function updateMoistureChart(history) {\n const labels = history.map(h => new Date(h.date));\n const data = history.map(h => h.moisture);\n moistureChart.data.labels = labels;\n moistureChart.data.datasets[0].data = data;\n moistureChart.update();\n }\n \n function updateHealthRadarChart(details) {\n \/\/ Normalize data for radar chart (invert scores where lower is better)\n const data = [\n 100 - details.leafLoss,\n 100 - details.deadBranch,\n 100 - details.barkPeel,\n details.newShoots,\n 100 - details.pestDamage\n ];\n healthRadarChart.data.datasets[0].data = data;\n healthRadarChart.update();\n }\n\n const moistureCtx = document.getElementById('moistureChart').getContext('2d');\n moistureChart = new Chart(moistureCtx, {\n type: 'line',\n data: {\n labels: [],\n datasets: [{\n label: '\ud1a0\uc591 \uc218\ubd84 (%)', data: [],\n borderColor: 'rgba(59, 130, 246, 1)', backgroundColor: 'rgba(59, 130, 246, 0.2)',\n fill: true, tension: 0.1,\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: {\n x: { type: 'time', time: { unit: 'month', tooltipFormat: 'yyyy-MM-dd', displayFormats: { month: 'yyyy-MM' } } },\n y: { beginAtZero: true, max: 100 }\n },\n plugins: { legend: { display: false } }\n }\n });\n \n const healthRadarCtx = document.getElementById('healthRadarChart').getContext('2d');\n healthRadarChart = new Chart(healthRadarCtx, {\n type: 'radar',\n data: {\n labels: ['\uc78e \uac74\uac15', '\uac00\uc9c0 \uac74\uac15', '\uc218\ud53c \uac74\uac15', '\uc0dd\uc7a5\ub825', '\ubcd1\ud574\ucda9 \uc800\ud56d'],\n datasets: [{\n label: '\uc218\ubaa9 \uac74\uac15 \uc810\uc218',\n data: [],\n fill: true,\n backgroundColor: 'rgba(22, 163, 74, 0.2)',\n borderColor: 'rgb(22, 163, 74)',\n pointBackgroundColor: 'rgb(22, 163, 74)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgb(22, 163, 74)'\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: { r: { angleLines: { display: true }, suggestedMin: 0, suggestedMax: 100, pointLabels: { font: { size: 10 } } } },\n plugins: { legend: { display: false } }\n }\n });\n\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\n revenueChart = new Chart(revenueCtx, {\n type: 'bar',\n data: {\n labels: ['SaaS \uad6c\ub3c5\ub8cc', '\ud558\ub4dc\uc6e8\uc5b4', '\ub9ac\ud3ec\ud2b8 \ubc1c\uae09', '\ucee8\uc124\ud305'],\n datasets: [{\n label: '\uc608\uc0c1 \uc218\uc775 \ube44\uc911 (%)',\n data: [55, 25, 15, 5],\n backgroundColor: ['rgba(22, 163, 74, 0.7)', 'rgba(250, 204, 21, 0.7)', 'rgba(59, 130, 246, 0.7)', 'rgba(147, 51, 234, 0.7)'],\n borderWidth: 1\n }]\n },\n options: {\n indexAxis: 'y', responsive: true, maintainAspectRatio: false,\n plugins: { legend: { display: false }, title: { display: true, text: '\uc218\uc775 \ubaa8\ub378\ubcc4 \uc608\uc0c1 \ube44\uc911' } },\n scales: { x: { beginAtZero: true, max: 100 } }\n }\n });\n\n updateDashboard(1);\n const firstPin = document.querySelector('.tree-pin[data-id=\"1\"]');\n if(firstPin) {\n firstPin.classList.add('selected');\n selectedTreePin = firstPin;\n }\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\ud2b8\ub9ac M.D. – \ub370\uc774\ud130 \uae30\ubc18 \uc218\ubaa9 \ud558\uc790 \uad00\ub9ac \uc194\ub8e8\uc158 \ud83c\udf33 \ud2b8\ub9ac M.D. \ud558\uc790 \ubd84\uc7c1\uc758 \ud604\uc2e4 \uc194\ub8e8\uc158 \uccb4\ud5d8 \ud575\uc2ec \uac00\uce58 \uc131\uc7a5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3965","post","type-post","status-publish","format-standard","hentry","category-_"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\ud2b8\ub9ac M.D. – \ub370\uc774\ud130 \uae30\ubc18 \uc218\ubaa9 \ud558\uc790 \uad00\ub9ac \uc194\ub8e8\uc158 \ud83c\udf33 \ud2b8\ub9ac M.D. \ud558\uc790 \ubd84\uc7c1\uc758 \ud604\uc2e4 \uc194\ub8e8\uc158 \uccb4\ud5d8 \ud575\uc2ec \uac00\uce58 \uc131\uc7a5 […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3965"}],"version-history":[{"count":2,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3965\/revisions"}],"predecessor-version":[{"id":3967,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3965\/revisions\/3967"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3965,"date":"2025-07-17T01:31:14","date_gmt":"2025-07-17T01:31:14","guid":{"rendered":"https:\/\/hstc.treecare.co.kr\/?p=3965"},"modified":"2025-07-17T01:38:59","modified_gmt":"2025-07-17T01:38:59","slug":"%ec%88%98%eb%aa%a9-%ed%95%98%ec%9e%90-%ea%b4%80%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/hstc.treecare.co.kr\/?p=3965","title":{"rendered":"\uc218\ubaa9 \ud558\uc790 \uad00\ub9ac"},"content":{"rendered":"\n\n\n\n \n \n \ud2b8\ub9ac M.D. – \ub370\uc774\ud130 \uae30\ubc18 \uc218\ubaa9 \ud558\uc790 \uad00\ub9ac \uc194\ub8e8\uc158<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chartjs-adapter-date-fns\/dist\/chartjs-adapter-date-fns.bundle.min.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body { font-family: 'Noto Sans KR', sans-serif; }\n .chart-container { position: relative; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; height: 350px; max-height: 450px; }\n .radar-chart-container { position: relative; width: 100%; max-width: 300px; margin: 1rem auto; height: 250px; }\n @media (min-width: 768px) { .chart-container { height: 400px; } }\n .tree-pin { transition: all 0.3s ease; }\n .tree-pin.selected { transform: scale(1.5); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); }\n .nav-link { transition: color 0.3s; }\n .nav-link:hover { color: #16a34a; }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <header class=\"bg-white\/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\n <a href=\"#hero\" class=\"text-2xl font-bold text-green-700\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/a>\n <div class=\"hidden md:flex space-x-8\">\n <a href=\"#problem\" class=\"nav-link text-gray-600\">\ud558\uc790 \ubd84\uc7c1\uc758 \ud604\uc2e4<\/a>\n <a href=\"#solution\" class=\"nav-link text-gray-600\">\uc194\ub8e8\uc158 \uccb4\ud5d8<\/a>\n <a href=\"#impact\" class=\"nav-link text-gray-600\">\ud575\uc2ec \uac00\uce58<\/a>\n <a href=\"#business\" class=\"nav-link text-gray-600\">\uc131\uc7a5 \uc804\ub7b5<\/a>\n <\/div>\n <\/nav>\n <\/header>\n\n <main>\n <section id=\"hero\" class=\"min-h-[60vh] flex items-center bg-green-50\">\n <div class=\"container mx-auto px-6 text-center\">\n <h1 class=\"text-4xl md:text-6xl font-bold text-gray-800 mb-4\">\uc218\ubaa9 \ud558\uc790 \ubd84\uc7c1, \ub370\uc774\ud130\ub85c \ud574\uacb0\ud569\ub2c8\ub2e4<\/h1>\n <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n ‘\ud2b8\ub9ac M.D.’\ub294 \ud45c\uc900\ud654\ub41c \uc9c4\ub2e8 \uae30\uc900\uacfc \ubaa8\ub4e0 \uc0dd\uc721 \ub370\uc774\ud130\ub97c \ud22c\uba85\ud558\uac8c \uae30\ub85d\ud558\uc5ec, \uc218\ubaa9 \ud558\uc790\uc758 \ucc45\uc784 \uc18c\uc7ac\ub97c \uba85\ud655\ud788 \uaddc\uba85\ud558\ub294 \uac1d\uad00\uc801 \uc99d\uac70\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/section>\n\n <section id=\"problem\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ub05d\ub098\uc9c0 \uc54a\ub294 \ucc45\uc784 \uacf5\ubc29, \uc65c \ubc18\ubcf5\ub420\uae4c\uc694?<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\uc218\ubaa9 \uace0\uc0ac\uc758 \uc6d0\uc778\uc774 ‘\ucd08\uae30 \ubd88\ub7c9’\uc778\uc9c0 ‘\uad00\ub9ac \ubd80\uc2e4’\uc778\uc9c0, \uc8fc\uad00\uc801\uc778 \ud310\ub2e8\uc774 \uc544\ub2cc \uac1d\uad00\uc801\uc778 \ub370\uc774\ud130\ub85c \uc99d\uba85\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8 text-center\">\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\ud83c\udfe2<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uc2dc\uacf5\uc0ac\/\ub0a9\ud488\uc0ac<\/h3>\n <p class=\"text-gray-600\">“\ubd84\uba85 \uac74\uac15\ud55c \ub098\ubb34\ub97c \uc2ec\uc5c8\ub2e4. \ubb3c\uc744 \uc81c\ub300\ub85c \uc8fc\uc9c0 \uc54a\uc740 \uad00\ub9ac \uc18c\ud640\uc774 \ubb38\uc81c\ub2e4.”<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\u2694\ufe0f<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ubaa8\ud638\ud55c \ud310\uc815 \uae30\uc900<\/h3>\n <p class=\"text-gray-600\">\ub204\uad6c\uc758 \uc8fc\uc7a5\uc774 \ub9de\ub294\uc9c0 \ud310\ub2e8\ud560 \uac1d\uad00\uc801 \ub370\uc774\ud130\uc640 \ud45c\uc900\ud654\ub41c \uae30\uc900\uc774 \uc5c6\uc5b4, \ubd84\uc7c1\uacfc \ubd88\ud544\uc694\ud55c \ube44\uc6a9\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-8 rounded-lg shadow-sm\">\n <div class=\"text-5xl mb-4\">\ud83c\udf33<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uad00\ub9ac\uc8fc\uccb4<\/h3>\n <p class=\"text-gray-600\">“\ub9e4\ub274\uc5bc\ub300\ub85c \uad00\ub9ac\ud588\ub2e4. \ucc98\uc74c\ubd80\ud130 \ub098\ubb34\uac00 \ubd80\uc2e4\ud588\uac70\ub098 \uc2dd\uc7ac \uacfc\uc815\uc5d0 \ubb38\uc81c\uac00 \uc788\uc5c8\ub2e4.”<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"solution\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\ud558\uc790 \uad00\ub9ac \ub300\uc2dc\ubcf4\ub4dc \uccb4\ud5d8<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\n \ub098\ubb34\ub97c \uc120\ud0dd\ud558\uc5ec \ud45c\uc900\ud654\ub41c \uc9c4\ub2e8 \uae30\uc900\uc5d0 \ub530\ub978 \uc0dd\uc721 \ub370\uc774\ud130\ub97c \ud655\uc778\ud558\uace0, AI\uc758 \uac1d\uad00\uc801\uc778 \ud558\uc790 \uc6d0\uc778 \ubd84\uc11d\uc744 \uacbd\ud5d8\ud574\ubcf4\uc138\uc694.\n <\/p>\n <\/div>\n <div class=\"bg-white p-4 sm:p-8 rounded-xl shadow-lg\">\n <div class=\"grid lg:grid-cols-2 gap-8\">\n <div class=\"lg:col-span-1\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\ub2e8\uc9c0 \ub0b4 \uc218\ubaa9 \ud604\ud669 (GIS)<\/h3>\n <div id=\"map-container\" class=\"relative w-full h-96 bg-green-100 rounded-lg border-2 border-green-200\">\n \n <\/div>\n <div class=\"flex justify-center space-x-4 mt-4 text-sm\">\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-green-500 mr-2\"><\/div>\uc815\uc0c1<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-yellow-400 mr-2\"><\/div>\uc1e0\uc57d<\/span>\n <span class=\"flex items-center\"><div class=\"w-3 h-3 rounded-full bg-red-500 mr-2\"><\/div>\uace0\uc0ac<\/span>\n <\/div>\n <\/div>\n <div id=\"dashboard-panel\" class=\"lg:col-span-1 bg-gray-50 p-6 rounded-lg\">\n <h3 class=\"font-bold text-xl mb-4 text-gray-700\">\uc218\ubaa9 \uc774\ub825 \ubc0f \uc9c4\ub2e8<\/h3>\n <div id=\"tree-details-placeholder\" class=\"text-gray-500 text-center py-10\">\uc9c0\ub3c4 \uc704\uc758 \ub098\ubb34 \ud540\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694.<\/div>\n <div id=\"tree-details\" class=\"hidden\">\n <h4 id=\"tree-name\" class=\"text-2xl font-bold text-green-700\"><\/h4>\n <div class=\"mt-4 space-y-2 text-sm\">\n <div class=\"flex justify-between items-center bg-white p-2 rounded-md\"><span>\uc2dd\uc7ac\uc77c:<\/span><span id=\"planting-date\" class=\"font-bold\"><\/span><\/div>\n <div class=\"flex justify-between items-center bg-white p-2 rounded-md\"><span>\ud558\uc790\ubcf4\uc99d \ub9cc\ub8cc\uc77c:<\/span><span id=\"warranty-date\" class=\"font-bold\"><\/span><\/div>\n <div class=\"flex justify-between items-center bg-white p-2 rounded-md\"><span>\uc885\ud569\ud310\uc815:<\/span><span id=\"tree-status\" class=\"px-2 py-1 font-bold rounded-full\"><\/span><\/div>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-bold text-lg mb-2\">\ud45c\uc900 \uc9c4\ub2e8 \uccb4\ud06c\ub9ac\uc2a4\ud2b8<\/h4>\n <div id=\"checklist\" class=\"space-y-1 text-sm bg-white p-3 rounded-md\"><\/div>\n <\/div>\n <div class=\"mt-6\">\n <h4 class=\"font-bold text-lg mb-2\">AI \ud558\uc790 \uc6d0\uc778 \ubd84\uc11d<\/h4>\n <p id=\"ai-recommendation\" class=\"text-gray-600 bg-blue-50 border border-blue-200 p-3 rounded-md text-sm\"><\/p>\n <\/div>\n <div class=\"mt-4\">\n <button id=\"report-btn\" class=\"w-full bg-green-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-green-700 transition-colors\">\n \ud558\uc790 \ubd84\uc11d \ub9ac\ud3ec\ud2b8 \uc0dd\uc131\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"mt-12 grid md:grid-cols-2 gap-8 items-center\">\n <div>\n <h3 class=\"font-bold text-xl mb-4 text-gray-700 text-center\">\uc218\ubaa9 \uac74\uac15 \ub808\uc774\ub354 \ucc28\ud2b8<\/h3>\n <div class=\"radar-chart-container\">\n <canvas id=\"healthRadarChart\"><\/canvas>\n <\/div>\n <\/div>\n <div>\n <h3 class=\"font-bold text-xl mb-4 text-gray-700 text-center\">\uc0dd\uc721 \ud658\uacbd \ub370\uc774\ud130 \ucd94\uc801 (\ud1a0\uc591 \uc218\ubd84)<\/h3>\n <div class=\"chart-container h-80\">\n <canvas id=\"moistureChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n \n <section id=\"impact\" class=\"py-16 md:py-24 bg-white\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">‘\ud2b8\ub9ac M.D.’\uac00 \uc81c\uacf5\ud558\ub294 \ud575\uc2ec \uac00\uce58<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ub370\uc774\ud130\ub294 \uac00\uc7a5 \uacf5\uc815\ud55c \uc2ec\ud310\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"text-center p-8 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcc4<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\uac1d\uad00\uc801 \ucc45\uc784 \uaddc\uba85<\/h3>\n <p class=\"text-gray-600\">\ud45c\uc900\ud654\ub41c \uccb4\ud06c\ub9ac\uc2a4\ud2b8\uc640 \ub370\uc774\ud130\ub97c \uae30\ubc18\uc73c\ub85c \ud558\uc790\uc758 \uc6d0\uc778\uc744 \uacfc\ud559\uc801\uc73c\ub85c \ubd84\uc11d\ud558\uace0 \ucc45\uc784 \uc18c\uc7ac\ub97c \uba85\ud655\ud788 \ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-8 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83d\udcb8<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ud558\uc790 \ubcf4\uc218 \ube44\uc6a9 \uc808\uac10<\/h3>\n <p class=\"text-gray-600\">\uc870\uae30 \uc9c4\ub2e8\uc744 \ud1b5\ud574 \uc608\ubc29\uc801 \uc870\uce58\ub97c \uac00\ub2a5\ud558\uac8c \ud558\uace0, \ubd88\ud544\uc694\ud55c \ubd84\uc7c1\uacfc \uad50\uccb4 \ube44\uc6a9\uc744 \ud68d\uae30\uc801\uc73c\ub85c \uc904\uc785\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"text-center p-8 bg-gray-50 rounded-lg\">\n <div class=\"text-5xl mb-4\">\ud83e\udd1d<\/div>\n <h3 class=\"text-xl font-bold mb-2\">\ud22c\uba85\ud55c \uc2e0\ub8b0 \uad00\uacc4 \uad6c\ucd95<\/h3>\n <p class=\"text-gray-600\">\ubaa8\ub4e0 \uc774\ud574\uad00\uacc4\uc790\uac00 \ub3d9\uc77c\ud55c \ub370\uc774\ud130\ub97c \uacf5\uc720\ud568\uc73c\ub85c\uc368, \ud22c\uba85\ud558\uace0 \uc2e0\ub8b0 \uae30\ubc18\uc758 \ud611\uc5c5 \ud658\uacbd\uc744 \uc870\uc131\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"business\" class=\"py-16 md:py-24 bg-gray-50\">\n <div class=\"container mx-auto px-6\">\n <div class=\"text-center mb-12\">\n <h2 class=\"text-3xl md:text-4xl font-bold\">\uc131\uc7a5 \uc804\ub7b5 \ubc0f \ube44\uc988\ub2c8\uc2a4 \ubaa8\ub378<\/h2>\n <p class=\"mt-4 text-lg text-gray-600\">\ub2e8\uacc4\uc801 \uc131\uc7a5\uacfc \ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378\ub85c \uc2dc\uc7a5\uc744 \uc120\ub3c4\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"mb-12\">\n <h3 class=\"text-2xl font-bold text-center mb-8\">\uac1c\ubc1c \ub85c\ub4dc\ub9f5<\/h3>\n <div class=\"flex flex-col md:flex-row justify-center items-center\">\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">1\ub2e8\uacc4 (3\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">MVP \uace0\ub3c4\ud654<\/div>\n <p class=\"text-sm text-gray-600\">5\ub2e8\uacc4 \ud310\uc815 \uae30\uc900 \ubc0f \ud45c\uc900 \uccb4\ud06c\ub9ac\uc2a4\ud2b8 \uae30\ub2a5 \uc801\uc6a9<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">2\ub2e8\uacc4 (6\uac1c\uc6d4)<\/div>\n <div class=\"font-bold text-lg\">\ubca0\ud0c0 \ub7f0\uce6d<\/div>\n <p class=\"text-sm text-gray-600\">\uac74\uc124\uc0ac, \uc870\uacbd\uc5c5\uccb4 \ub300\uc0c1 \ubca0\ud0c0 \uc11c\ube44\uc2a4 \ubc0f \ud558\uc790 \ud310\uc815 AI \uace0\ub3c4\ud654<\/p>\n <\/div>\n <div class=\"text-2xl text-green-500 hidden md:block mx-4\">\u2192<\/div>\n <div class=\"flex-1 text-center p-4 m-2 bg-white rounded-lg shadow-sm\">\n <div class=\"font-bold text-green-600\">3\ub2e8\uacc4 (12\uac1c\uc6d4~)<\/div>\n <div class=\"font-bold text-lg\">\uc815\uc2dd \ucd9c\uc2dc \ubc0f \ud655\uc7a5<\/div>\n <p class=\"text-sm text-gray-600\">SaaS \ubc0f \ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4, \uacf5\uacf5 \uc870\ub2ec \uc2dc\uc7a5 \uc9c4\ucd9c<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n <div class=\"order-2 md:order-1\">\n <h3 class=\"text-2xl font-bold text-center md:text-left mb-4\">\ub2e4\uac01\ud654\ub41c \uc218\uc775 \ubaa8\ub378<\/h3>\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-green-500\">\n <h4 class=\"font-bold\">SaaS \uad6c\ub3c5\ub8cc (\uc8fc\ub825)<\/h4>\n <p class=\"text-sm text-gray-600\">\uad00\ub9ac \uc218\ubaa9 \uc218 \ubc0f \ud558\uc790 \ubcf4\uc99d \uae30\uac04 \uc5f0\ub3d9 \uad6c\ub3c5\ub8cc<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-yellow-500\">\n <h4 class=\"font-bold\">\ud558\ub4dc\uc6e8\uc5b4 \ud310\ub9e4\/\ub80c\ud0c8<\/h4>\n <p class=\"text-sm text-gray-600\">\uc2dd\uc7ac \uc2dc \ubd80\ucc29\ud558\ub294 \uc2a4\ub9c8\ud2b8 \uc13c\uc11c \ud45c\ucc30 \ubc0f \uc9c4\ub2e8\uae30<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-blue-500\">\n <h4 class=\"font-bold\">\ub9ac\ud3ec\ud2b8 \ubc1c\uae09 \uc218\uc218\ub8cc<\/h4>\n <p class=\"text-sm text-gray-600\">\ubd84\uc7c1 \uc870\uc815\uc744 \uc704\ud55c \uacf5\uc2dd \ub370\uc774\ud130 \ub9ac\ud3ec\ud2b8 \ubc1c\uae09<\/p>\n <\/div>\n <div class=\"p-4 bg-white rounded-lg border-l-4 border-purple-500\">\n <h4 class=\"font-bold\">\ub370\uc774\ud130 \ubd84\uc11d \ucee8\uc124\ud305<\/h4>\n <p class=\"text-sm text-gray-600\">\ub300\uaddc\ubaa8 \ub2e8\uc9c0 \ub300\uc0c1 \ud558\uc790\uc728 \uc608\uce21 \ubc0f \uad00\ub9ac \ucee8\uc124\ud305<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"order-1 md:order-2 chart-container h-80\">\n <canvas id=\"revenueChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <\/main>\n \n <footer class=\"bg-gray-800 text-white py-8\">\n <div class=\"container mx-auto px-6 text-center\">\n <p class=\"text-2xl font-bold mb-2\">\ud83c\udf33 \ud2b8\ub9ac M.D.<\/p>\n <p>‘\ud2b8\ub9ac M.D.’\uc640 \ud568\uaed8 \ud22c\uba85\ud558\uace0 \uc2e0\ub8b0\ud560 \uc218 \uc788\ub294 \uc218\ubaa9 \uad00\ub9ac\uc758 \ubbf8\ub798\ub97c \ub9cc\ub4e4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n <p class=\"text-sm mt-4 text-gray-400\">© 2025 (\uc8fc)\ud55c\uc131\ub098\ubb34\uc885\ud569\ubcd1\uc6d0. All Rights Reserved.<\/p>\n <\/div>\n <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const assessmentStages = {\n 1: { name: '\uc591\ud638', color: 'green' },\n 2: { name: '\uacbd\ubbf8\ud55c \uc1e0\uc57d', color: 'yellow' },\n 3: { name: '\uc911\ub4f1\ub3c4 \uc1e0\uc57d', color: 'yellow' },\n 4: { name: '\uc911\uc99d \uc1e0\uc57d', color: 'red' },\n 5: { name: '\uc644\uc804 \uace0\uc0ac', color: 'red' }\n };\n \n const mapStatus = {\n '\uc591\ud638': 'green',\n '\uc1e0\uc57d': 'yellow',\n '\uace0\uc0ac': 'red'\n };\n\n const treeData = [\n { \n id: 1, name: '101\ub3d9 \uc55e \uc18c\ub098\ubb34', stage: 4, x: 20, y: 30, \n plantingDate: '2024-04-15',\n details: { leafLoss: 75, deadBranch: 80, barkPeel: 30, newShoots: 10, pestDamage: 20 },\n history: [ { date: '2024-04-15', moisture: 75 }, { date: '2024-08-15', moisture: 18 }, { date: '2025-01-15', moisture: 15 } ]\n },\n { \n id: 2, name: '\ub180\uc774\ud130 \uc606 \ubc9a\ub098\ubb34', stage: 3, x: 45, y: 60,\n plantingDate: '2023-10-20',\n details: { leafLoss: 45, deadBranch: 25, barkPeel: 10, newShoots: 40, pestDamage: 50 },\n history: [ { date: '2025-02-17', moisture: 55 }, { date: '2025-05-17', moisture: 40 }, { date: '2025-07-17', moisture: 28 } ]\n },\n { \n id: 3, name: '\uc815\ubb38 \uc606 \ub290\ud2f0\ub098\ubb34', stage: 1, x: 75, y: 20,\n plantingDate: '2024-04-15',\n details: { leafLoss: 5, deadBranch: 0, barkPeel: 0, newShoots: 95, pestDamage: 5 },\n history: [ { date: '2025-02-17', moisture: 60 }, { date: '2025-05-17', moisture: 56 }, { date: '2025-07-17', moisture: 55 } ]\n },\n { \n id: 4, name: '\ud6c4\ubb38 \uc0b0\ucc45\ub85c \uc774\ud31d\ub098\ubb34', stage: 5, x: 80, y: 75,\n plantingDate: '2025-04-01',\n details: { leafLoss: 100, deadBranch: 100, barkPeel: 70, newShoots: 0, pestDamage: 10 },\n history: [ { date: '2025-04-01', moisture: 25 }, { date: '2025-06-01', moisture: 15 }, { date: '2025-07-15', moisture: 10 } ]\n },\n ];\n\n const mapContainer = document.getElementById('map-container');\n const treeDetailsPlaceholder = document.getElementById('tree-details-placeholder');\n const treeDetailsPanel = document.getElementById('tree-details');\n const treeNameEl = document.getElementById('tree-name');\n const treeStatusEl = document.getElementById('tree-status');\n const plantingDateEl = document.getElementById('planting-date');\n const warrantyDateEl = document.getElementById('warranty-date');\n const checklistEl = document.getElementById('checklist');\n const aiRecommendationEl = document.getElementById('ai-recommendation');\n const reportBtn = document.getElementById('report-btn');\n\n let selectedTreePin = null;\n\n treeData.forEach(tree => {\n const pin = document.createElement('div');\n pin.className = 'tree-pin absolute w-5 h-5 rounded-full cursor-pointer border-2 border-white';\n pin.style.left = `${tree.x}%`;\n pin.style.top = `${tree.y}%`;\n pin.style.transform = 'translate(-50%, -50%)';\n pin.dataset.id = tree.id;\n \n let mapColor = 'bg-green-500';\n if (tree.stage >= 2 && tree.stage <= 4) mapColor = 'bg-yellow-400';\n else if (tree.stage === 5) mapColor = 'bg-red-500';\n pin.classList.add(mapColor);\n\n pin.addEventListener('click', () => {\n updateDashboard(tree.id);\n if (selectedTreePin) {\n selectedTreePin.classList.remove('selected');\n }\n pin.classList.add('selected');\n selectedTreePin = pin;\n });\n mapContainer.appendChild(pin);\n });\n\n const statusClasses = {\n 'green': 'bg-green-100 text-green-800',\n 'yellow': 'bg-yellow-100 text-yellow-800',\n 'red': 'bg-red-100 text-red-800',\n };\n\n function getAIAnalysis(tree) {\n const { stage, details, history } = tree;\n if (stage === 1) return '\ubd84\uc11d \uacb0\uacfc: \ubaa8\ub4e0 \uc9c0\ud45c\uac00 \uc591\ud638\ud569\ub2c8\ub2e4. \ud45c\uc900\ud654\ub41c \uae30\uc900\uc5d0 \ub530\ub77c \uac74\uac15\ud55c \uc0c1\ud0dc\ub85c \ud310\uc815\ub429\ub2c8\ub2e4.';\n if (stage <= 3) return `\ubd84\uc11d \uacb0\uacfc: \uc78e \uc190\uc2e4\ub960(${details.leafLoss}%) \ubc0f \uace0\uc0ac \uac00\uc9c0 \ube44\uc728(${details.deadBranch}%)\uc774 '\uacbd\ubbf8~\uc911\ub4f1\ub3c4 \uc1e0\uc57d' \ubc94\uc704\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \uc9c0\uc18d\uc801\uc778 \uad00\ub9ac \ubd80\uc2e4\uc774 \uc758\uc2ec\ub418\ub2c8 \uad00\uc218 \ubc0f \ubcd1\ud574\ucda9 \uad00\ub9ac\ub97c \uac15\ud654\ud574\uc57c \ud569\ub2c8\ub2e4.`;\n \n const initialMoisture = history[0].moisture;\n if (stage >= 4) {\n if (initialMoisture < 40) {\n return `\ubd84\uc11d \uacb0\uacfc: \uc78e \uc190\uc2e4\ub960(${details.leafLoss}%) \ubc0f \uace0\uc0ac \uac00\uc9c0 \ube44\uc728(${details.deadBranch}%)\uc774 '\uc911\uc99d \uc1e0\uc57d' \uc774\uc0c1\uc774\uba70, \ud558\uc790\uc2ec\uc0ac\uc704\uc758 '\uac00\uc9c0 2\/3 \uc774\uc0c1 \uace0\uc0ac' \uae30\uc900\uc5d0 \uadfc\uc811\ud569\ub2c8\ub2e4. \ud2b9\ud788 \uc2dd\uc7ac \ucd08\uae30 \uc218\ubd84(${initialMoisture}%)\uc774 \ub9e4\uc6b0 \ub0ae\uc544, \ucd08\uae30 \ubd88\ub7c9 \ub610\ub294 \uc2dd\uc7ac \uacfc\uc815 \ubb38\uc81c\uc77c \uac00\ub2a5\uc131\uc774 \ub192\uc2b5\ub2c8\ub2e4. (\uc2dc\uacf5\uc0ac \ucc45\uc784 \ucd94\uc815)`;\n }\n return `\ubd84\uc11d \uacb0\uacfc: \uc78e \uc190\uc2e4\ub960(${details.leafLoss}%) \ubc0f \uace0\uc0ac \uac00\uc9c0 \ube44\uc728(${details.deadBranch}%)\uc774 '\uc911\uc99d \uc1e0\uc57d' \uc774\uc0c1\uc785\ub2c8\ub2e4. \uc2dd\uc7ac \ucd08\uae30(${history[0].date})\uc5d0 \ube44\ud574 \ud604\uc7ac \uc218\ubd84 \ub370\uc774\ud130\uac00 \uae09\uaca9\ud788 \uc545\ud654\ub418\uc5b4, \uc9c0\uc18d\uc801\uc778 \uad00\ub9ac \ubd80\uc2e4\ub85c \uc778\ud55c \ud558\uc790 \uac00\ub2a5\uc131\uc774 \ub9e4\uc6b0 \ub192\uc2b5\ub2c8\ub2e4. (\uad00\ub9ac\uc8fc\uccb4 \ucc45\uc784 \ucd94\uc815)`;\n }\n }\n\n function updateDashboard(id) {\n const tree = treeData.find(t => t.id === id);\n if (!tree) return;\n\n treeDetailsPlaceholder.classList.add('hidden');\n treeDetailsPanel.classList.remove('hidden');\n\n treeNameEl.textContent = tree.name;\n \n const pDate = new Date(tree.plantingDate);\n plantingDateEl.textContent = pDate.toLocaleDateString('ko-KR');\n const wDate = new Date(new Date(tree.plantingDate).setFullYear(pDate.getFullYear() + 2));\n warrantyDateEl.textContent = wDate.toLocaleDateString('ko-KR');\n\n const stageInfo = assessmentStages[tree.stage];\n treeStatusEl.textContent = stageInfo.name;\n treeStatusEl.className = `px-2 py-1 font-bold rounded-full ${statusClasses[stageInfo.color]}`;\n \n checklistEl.innerHTML = `\n <div class=\"flex justify-between\"><span>\uc78e \uc190\uc2e4\ub960:<\/span><span class=\"font-bold\">${tree.details.leafLoss}%<\/span><\/div>\n <div class=\"flex justify-between\"><span>\uace0\uc0ac \uac00\uc9c0 \ube44\uc728:<\/span><span class=\"font-bold\">${tree.details.deadBranch}%<\/span><\/div>\n <div class=\"flex justify-between\"><span>\uc218\ud53c \ubc15\ub9ac \uc815\ub3c4:<\/span><span class=\"font-bold\">${tree.details.barkPeel}%<\/span><\/div>\n <div class=\"flex justify-between\"><span>\uc0c8\uc21c \ubc1c\uc544\ub825:<\/span><span class=\"font-bold\">${tree.details.newShoots}\/100<\/span><\/div>\n <div class=\"flex justify-between\"><span>\ubcd1\ud574\ucda9 \ud53c\ud574:<\/span><span class=\"font-bold\">${tree.details.pestDamage}%<\/span><\/div>\n `;\n\n aiRecommendationEl.textContent = getAIAnalysis(tree);\n\n updateMoistureChart(tree.history);\n updateHealthRadarChart(tree.details);\n }\n \n reportBtn.addEventListener('click', () => {\n alert('\uc120\ud0dd\ub41c \uc218\ubaa9\uc758 \ud45c\uc900 \uc9c4\ub2e8 \uccb4\ud06c\ub9ac\uc2a4\ud2b8\uc640 AI \ubd84\uc11d \uacb0\uacfc\uac00 \ud3ec\ud568\ub41c \ub9ac\ud3ec\ud2b8\uac00 \uc0dd\uc131\ub418\uc5c8\uc2b5\ub2c8\ub2e4. (\ub370\ubaa8)');\n });\n\n let moistureChart, revenueChart, healthRadarChart;\n\n function updateMoistureChart(history) {\n const labels = history.map(h => new Date(h.date));\n const data = history.map(h => h.moisture);\n moistureChart.data.labels = labels;\n moistureChart.data.datasets[0].data = data;\n moistureChart.update();\n }\n \n function updateHealthRadarChart(details) {\n \/\/ Normalize data for radar chart (invert scores where lower is better)\n const data = [\n 100 - details.leafLoss,\n 100 - details.deadBranch,\n 100 - details.barkPeel,\n details.newShoots,\n 100 - details.pestDamage\n ];\n healthRadarChart.data.datasets[0].data = data;\n healthRadarChart.update();\n }\n\n const moistureCtx = document.getElementById('moistureChart').getContext('2d');\n moistureChart = new Chart(moistureCtx, {\n type: 'line',\n data: {\n labels: [],\n datasets: [{\n label: '\ud1a0\uc591 \uc218\ubd84 (%)', data: [],\n borderColor: 'rgba(59, 130, 246, 1)', backgroundColor: 'rgba(59, 130, 246, 0.2)',\n fill: true, tension: 0.1,\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: {\n x: { type: 'time', time: { unit: 'month', tooltipFormat: 'yyyy-MM-dd', displayFormats: { month: 'yyyy-MM' } } },\n y: { beginAtZero: true, max: 100 }\n },\n plugins: { legend: { display: false } }\n }\n });\n \n const healthRadarCtx = document.getElementById('healthRadarChart').getContext('2d');\n healthRadarChart = new Chart(healthRadarCtx, {\n type: 'radar',\n data: {\n labels: ['\uc78e \uac74\uac15', '\uac00\uc9c0 \uac74\uac15', '\uc218\ud53c \uac74\uac15', '\uc0dd\uc7a5\ub825', '\ubcd1\ud574\ucda9 \uc800\ud56d'],\n datasets: [{\n label: '\uc218\ubaa9 \uac74\uac15 \uc810\uc218',\n data: [],\n fill: true,\n backgroundColor: 'rgba(22, 163, 74, 0.2)',\n borderColor: 'rgb(22, 163, 74)',\n pointBackgroundColor: 'rgb(22, 163, 74)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgb(22, 163, 74)'\n }]\n },\n options: {\n responsive: true, maintainAspectRatio: false,\n scales: { r: { angleLines: { display: true }, suggestedMin: 0, suggestedMax: 100, pointLabels: { font: { size: 10 } } } },\n plugins: { legend: { display: false } }\n }\n });\n\n const revenueCtx = document.getElementById('revenueChart').getContext('2d');\n revenueChart = new Chart(revenueCtx, {\n type: 'bar',\n data: {\n labels: ['SaaS \uad6c\ub3c5\ub8cc', '\ud558\ub4dc\uc6e8\uc5b4', '\ub9ac\ud3ec\ud2b8 \ubc1c\uae09', '\ucee8\uc124\ud305'],\n datasets: [{\n label: '\uc608\uc0c1 \uc218\uc775 \ube44\uc911 (%)',\n data: [55, 25, 15, 5],\n backgroundColor: ['rgba(22, 163, 74, 0.7)', 'rgba(250, 204, 21, 0.7)', 'rgba(59, 130, 246, 0.7)', 'rgba(147, 51, 234, 0.7)'],\n borderWidth: 1\n }]\n },\n options: {\n indexAxis: 'y', responsive: true, maintainAspectRatio: false,\n plugins: { legend: { display: false }, title: { display: true, text: '\uc218\uc775 \ubaa8\ub378\ubcc4 \uc608\uc0c1 \ube44\uc911' } },\n scales: { x: { beginAtZero: true, max: 100 } }\n }\n });\n\n updateDashboard(1);\n const firstPin = document.querySelector('.tree-pin[data-id=\"1\"]');\n if(firstPin) {\n firstPin.classList.add('selected');\n selectedTreePin = firstPin;\n }\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\ud2b8\ub9ac M.D. – \ub370\uc774\ud130 \uae30\ubc18 \uc218\ubaa9 \ud558\uc790 \uad00\ub9ac \uc194\ub8e8\uc158 \ud83c\udf33 \ud2b8\ub9ac M.D. \ud558\uc790 \ubd84\uc7c1\uc758 \ud604\uc2e4 \uc194\ub8e8\uc158 \uccb4\ud5d8 \ud575\uc2ec \uac00\uce58 \uc131\uc7a5 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3965","post","type-post","status-publish","format-standard","hentry","category-_"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\ud2b8\ub9ac M.D. – \ub370\uc774\ud130 \uae30\ubc18 \uc218\ubaa9 \ud558\uc790 \uad00\ub9ac \uc194\ub8e8\uc158 \ud83c\udf33 \ud2b8\ub9ac M.D. \ud558\uc790 \ubd84\uc7c1\uc758 \ud604\uc2e4 \uc194\ub8e8\uc158 \uccb4\ud5d8 \ud575\uc2ec \uac00\uce58 \uc131\uc7a5 […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3965"}],"version-history":[{"count":2,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3965\/revisions"}],"predecessor-version":[{"id":3967,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3965\/revisions\/3967"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}