\ubd89\ub098\ubb34\ud639\uc751\uc560 \ub300\ud654\ud615 \uac00\uc774\ub4dc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.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@300;400;500;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Noto Sans KR', sans-serif;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .nav-btn {\n transition: all 0.3s ease;\n border-radius: 0 !important;\n box-shadow: none !important;\n border: none !important;\n }\n .nav-btn.active {\n background-color: #b91c1c !important; \/* red-700 *\/\n color: #fef2f2 !important; \/* red-50 *\/\n font-weight: 700;\n }\n .content-section {\n display: none;\n }\n .content-section.active {\n display: block;\n }\n .stage-btn, .damage-btn {\n border-radius: 0 !important;\n box-shadow: none !important;\n border: none !important;\n }\n .stage-btn.active, .damage-btn.active {\n background-color: #ef4444; \/* red-500 *\/\n color: white;\n font-weight: 600;\n transform: scale(1.05);\n }\n .nav-btn:focus,\n .stage-btn:focus,\n .damage-btn:focus {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <div class=\"container mx-auto\"> \n \n <header class=\"text-center\">\n \n <\/header>\n\n <nav class=\"flex justify-between bg-gray-200 mb-8\">\n <button data-tab=\"overview\" class=\"nav-btn active flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\uac1c\uc694<\/button>\n <button data-tab=\"morphology\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\ud615\ud0dc<\/button>\n <button data-tab=\"damage\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\ud53c\ud574 \uc99d\uc0c1<\/button>\n <button data-tab=\"ecology\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\uc0dd\ud65c\uc0ac<\/button>\n <button data-tab=\"control\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\ubc29\uc81c \ubc29\ubc95<\/button>\n <\/nav>\n\n <main id=\"app-content\" class=\"p-2 md:p-2\">\n \n \n <section id=\"overview\" class=\"content-section active space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560 (<i>Aculops chinonei<\/i>)\uc774\ub780?<\/h2>\n <p class=\"text-gray-700 leading-relaxed\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc751\uc560\ubaa9 \ud639\uc751\uc560\uacfc\uc5d0 \uc18d\ud558\ub294 \ud574\ucda9\uc73c\ub85c, \uc804\uad6d \uac01\uc9c0\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \ubd89\ub098\ubb34\uc758 \ub300\ud45c\uc801\uc778 \ud574\ucda9\uc785\ub2c8\ub2e4. \uc131\ucda9\uacfc \uc57d\ucda9\uc774 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc218\uc561\uc744 \ud761\uc999\ud558\uace0, \uc78e \uc55e\uba74\uc5d0 \uc0ac\ub9c8\uadc0 \uac19\uc740 \ub465\uadfc \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud569\ub2c8\ub2e4. \ubc8c\ub808\ud639\uc740 \ubd04\uc5d0\ub294 \ub179\uc0c9\uc774\uc5c8\ub2e4\uac00 \ub2a6\uc5ec\ub984 \uc774\ud6c4 \ubd89\uac8c \ubcc0\ud558\ub294 \ud2b9\uc9d5\uc744 \uac00\uc9d1\ub2c8\ub2e4.\n <\/p>\n <ul class=\"list-disc list-inside text-gray-700 mt-4 space-y-1\">\n <li><strong>\uc6d4\ub3d9\ud0dc:<\/strong> (\uc790\uc138\ud55c \uc815\ubcf4 \ubbf8\uae30\uc7ac)<\/li>\n <li><strong>\ubc1c\uc0dd \ud69f\uc218:<\/strong> \uc5f0 \uc218\ud68c \ubc1c\uc0dd (\uc790\uc138\ud55c \uc0dd\ud0dc\ub294 \ubc1d\ud600\uc9c0\uc9c0 \uc54a\uc74c)<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-6 bg-white\">\n <h3 class=\"text-xl font-semibold text-red-800 mb-3\">\ubd84\ud3ec \ubc0f \uc8fc\uc694 \uac00\ud574 \uc218\uc885<\/h3>\n <p class=\"text-gray-700 mb-4\">\n \ud55c\uad6d, \uc77c\ubcf8, \uc911\uad6d \ub4f1\uc9c0\uc5d0 \ubd84\ud3ec\ud569\ub2c8\ub2e4. \uc8fc\uc694 \uac00\ud574 \uc218\uc885\uc740 <strong>\ubd89\ub098\ubb34<\/strong>\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/section>\n\n \n <section id=\"morphology\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560\uc758 \ud615\ud0dc\uc801 \ud2b9\uc9d5<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \ub9e4\uc6b0 \uc791\uc740 \ud06c\uae30\uc758 \uc751\uc560\ub85c, \ud604\ubbf8\uacbd\uc73c\ub85c \uad00\ucc30\ud574\uc57c \ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-type=\"female_adult\" class=\"stage-btn active flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uc554\ucef7 \uc131\ucda9<\/button>\n <button data-type=\"male_adult\" class=\"stage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uc218\ucef7 \uc131\ucda9<\/button>\n <\/div>\n <div id=\"morphology-content\" class=\"p-4\">\n <div id=\"morphology-text\" class=\"w-full\">\n <h3 id=\"morphology-title\" class=\"text-xl font-semibold text-red-700 mb-2\"><\/h3>\n <p id=\"morphology-description\" class=\"text-gray-700\"><\/p>\n <p id=\"morphology-size\" class=\"text-sm text-gray-600 mt-2\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"damage\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560\uc758 \uc8fc\uc694 \ud53c\ud574 \uc99d\uc0c1<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc78e\uc5d0 \ud2b9\uc9d5\uc801\uc778 \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud558\uace0, \uc774\ub85c \uc778\ud574 \uc78e\uc758 \ubcc0\uc0c9 \ubc0f \ubbf8\uad00 \uc190\uc0c1\uc744 \uc720\ubc1c\ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-damage-type=\"gall_formation\" class=\"damage-btn active flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ubc8c\ub808\ud639 \ud615\uc131<\/button>\n <button data-damage-type=\"gall_discoloration\" class=\"damage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ubc8c\ub808\ud639 \ubcc0\uc0c9<\/button>\n <button data-damage-type=\"aesthetic_damage\" class=\"damage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ubbf8\uad00 \uc190\uc0c1<\/button>\n <\/div>\n <div id=\"damage-content\" class=\"p-4\">\n <div id=\"damage-text\" class=\"w-full\">\n <h3 id=\"damage-title\" class=\"text-xl font-semibold text-red-700 mb-2\"><\/h3>\n <p id=\"damage-description\" class=\"text-gray-700\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"ecology\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560\uc758 \uc0dd\ud65c\uc0ac<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc5f0 \uc218\ud68c \ubc1c\uc0dd\ud558\uba70, \uc790\uc138\ud55c \uc0dd\ud0dc\ub294 \uc544\uc9c1 \ubc1d\ud600\uc9c0\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. \uc8fc\ub85c \uc0c8\uc78e\uc774 \ub098\uc624\ub294 \uc2dc\uae30\ubd80\ud130 \ud65c\ub3d9\ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-col items-center space-y-2\">\n <div class=\"w-full max-w-md text-center p-3 bg-blue-100\">\n <p class=\"font-semibold\">1. \uc0c8\uc78e \ucd9c\ud604 \ubc0f \ud65c\ub3d9 \uc2dc\uc791 (4\uc6d4)<\/p><p class=\"text-sm\">\uc0c8\uc78e\uc774 \ub098\uc624\ub294 4\uc6d4\ubd80\ud130 \uc131\ucda9\uacfc \uc57d\ucda9\uc774 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc218\uc561 \ud761\uc999<\/p>\n <\/div>\n <div class=\"text-2xl text-gray-400\">\u2193<\/div>\n <div class=\"w-full max-w-md text-center p-3 bg-green-100\">\n <p class=\"font-semibold\">2. \ubc8c\ub808\ud639 \ud615\uc131 (\uc78e \uc55e\uba74)<\/p><p class=\"text-sm\">\uc78e \uc55e\uba74\uc5d0 \uc0ac\ub9c8\uadc0 \uac19\uc740 \ub465\uadfc \ubc8c\ub808\ud639 \ud615\uc131 (\ubd04\uc5d0\ub294 \ub179\uc0c9)<\/p>\n <\/div>\n <div class=\"text-2xl text-gray-400\">\u2193<\/div>\n <div class=\"w-full max-w-md text-center p-3 bg-yellow-100\">\n <p class=\"font-semibold\">3. \ubc8c\ub808\ud639 \ubcc0\uc0c9 (\ub2a6\uc5ec\ub984 \uc774\ud6c4)<\/p><p class=\"text-sm\">\ub2a6\uc5ec\ub984 \uc774\ud6c4 \ubc8c\ub808\ud639\uc774 \ubd89\uc740\uc0c9\uc73c\ub85c \ubcc0\ud568<\/p>\n <\/div>\n <div class=\"text-2xl text-gray-400\">\u2193<\/div>\n <div class=\"w-full max-w-md text-center p-3 bg-orange-100\">\n <p class=\"font-semibold\">4. \ubc18\ubcf5 \ubc1c\uc0dd \ubc0f \ud53c\ud574 \uc9c0\uc18d<\/p><p class=\"text-sm\">\uc5f0 \uc218\ud68c \ubc1c\uc0dd\ud558\uba70 \ud53c\ud574\uac00 \uc9c0\uc18d\ub428<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"control\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ud6a8\uacfc\uc801\uc778 \ubc29\uc81c \ubc29\ubc95<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560 \ubc29\uc81c\ub294 \uc0c8\uc78e\uc774 \ub098\uc624\ub294 \uc2dc\uae30\uc5d0 \ub9de\ucdb0 \uc57d\uc81c\ub97c \uc0b4\ud3ec\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-blue-50\">\n <h3 class=\"text-xl font-semibold text-blue-800 mb-2\">\u2460 \ud654\ud559\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\uc0b4\ud3ec \uc2dc\uae30:<\/strong> \uc0c8\uc78e\uc774 \ub098\uc624\ub294 <strong>4\uc6d4\ubd80\ud130<\/strong> \ud53c\ub9ac\ub2e4\ud39c\ud2f0\uc628 \uc720\uc81c 1,000\ubc30\uc561\uc744 10\uc77c \uac04\uaca9\uc73c\ub85c 2\ud68c \uc774\uc0c1 \uc0b4\ud3ec\ud569\ub2c8\ub2e4.<\/li>\n <li><strong>\uc815\ubcf4 \ud655\uc778:<\/strong> \ub18d\uc57d\uc548\uc804\uc815\ubcf4\uc2dc\uc2a4\ud15c(psis.rda.go.kr)\uc5d0\uc11c \ubd89\ub098\ubb34 \ubc0f \ud639\uc751\uc560\uc5d0 \ub4f1\ub85d\ub41c \uc57d\uc81c\ub97c \ud655\uc778\ud558\uc5ec \uc0ac\uc6a9\ud558\uc2ed\uc2dc\uc624.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-4 bg-green-50\">\n <h3 class=\"text-xl font-semibold text-green-800 mb-2\">\u2461 \ubb3c\ub9ac\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\ud53c\ud574 \uc78e \uc81c\uac70:<\/strong> \ubc8c\ub808\ud639\uc774 \ud615\uc131\ub41c \uc78e\uc740 \ubc1c\uacac \uc989\uc2dc \uc81c\uac70\ud558\uc5ec \uc18c\uac01\ud558\uac70\ub098 \ub9e4\ubab0\ud558\uc5ec \ud655\uc0b0\uc744 \ub9c9\uc2b5\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-4 bg-yellow-50\">\n <h3 class=\"text-xl font-semibold text-yellow-800 mb-2\">\u2462 \ud658\uacbd \uad00\ub9ac \ubc0f \uc0dd\ubb3c\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\uc218\uc138 \uc99d\uc9c4:<\/strong> \ub098\ubb34\ub97c \uac74\uac15\ud558\uac8c \uad00\ub9ac\ud558\uc5ec \ud574\ucda9\uc5d0 \ub300\ud55c \uc800\ud56d\ub825\uc744 \ub192\uc785\ub2c8\ub2e4.<\/li>\n <li><strong>\ucc9c\uc801 \ubcf4\ud638:<\/strong> \uc751\uc560\ub958\uc758 \ucc9c\uc801\uc778 \ud3ec\uc2dd\uc131 \uc751\uc560, \ubb34\ub2f9\ubc8c\ub808\ub958 \ub4f1\uc744 \ubcf4\ud638\ud558\ub294 \uac83\uc774 \ubc00\ub3c4 \uc870\uc808\uc5d0 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"p-6 bg-white\">\n <h3 class=\"text-xl font-semibold text-red-800 mb-4 text-center\">\uc8fc\uc694 \ud65c\ub3d9 \uc2dc\uae30 \ubc0f \ubc29\uc81c \uc801\uae30<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"controlChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"text-center mt-8 pt-4 border-t border-gray-200 mb-8\">\n <p class=\"text-sm text-gray-500\">\uc815\ubcf4 \ucd9c\ucc98: \uc0b0\ub9bc\uccad \ub4f1 \uc804\ubb38 \uc790\ub8cc<\/p>\n <\/footer>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const tabs = document.querySelectorAll('.nav-btn');\n const sections = document.querySelectorAll('.content-section');\n\n const morphologyData = {\n female_adult: {\n title: '\uc554\ucef7 \uc131\ucda9',\n description: '\ubab8\uae38\uc774\uac00 0.21~0.28mm\ub85c \uc6d0\ud1b5\ud615\uc774\uba70, \ubab8 \uc0c9\uae54\uc740 \ub4f1\uc0c9(\uc624\ub80c\uc9c0\uc0c9)\uc785\ub2c8\ub2e4. \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc218\uc561\uc744 \ud761\uc999\ud558\uace0, \uc78e \uc55e\uba74\uc5d0 \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud569\ub2c8\ub2e4.',\n size: '\ud06c\uae30: 0.21~0.28mm',\n },\n male_adult: {\n title: '\uc218\ucef7 \uc131\ucda9',\n description: '\ubab8\uae38\uc774\uac00 \uc57d 0.22mm\ub85c \uc554\ucef7\ubcf4\ub2e4 \uc57d\uac04 \uc791\uc2b5\ub2c8\ub2e4. \uc554\ucef7\uacfc \ud568\uaed8 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uba70, \ubc88\uc2dd\uc5d0 \uad00\uc5ec\ud569\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uc57d 0.22mm',\n }\n };\n\n const damageData = {\n gall_formation: {\n title: '\ubc8c\ub808\ud639 \ud615\uc131',\n description: '\uc131\ucda9\uacfc \uc57d\ucda9\uc774 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc78e \uc55e\uba74\uc5d0 \uc0ac\ub9c8\uadc0 \uac19\uc740 \ub465\uadfc \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud569\ub2c8\ub2e4. \ubc8c\ub808\ud639 \ub0b4\ubd80\uc5d0\ub294 \uc751\uc560\uac00 \uc11c\uc2dd\ud558\uba70 \uc218\uc561\uc744 \ud761\uc999\ud569\ub2c8\ub2e4. (\uac00\ud574 \uc591\uc0c1 \uc774\ubbf8\uc9c0 \ucc38\uace0)',\n },\n gall_discoloration: {\n title: '\ubc8c\ub808\ud639 \ubcc0\uc0c9',\n description: '\ubc8c\ub808\ud639\uc740 \ud615\uc131 \ucd08\uae30\uc778 \ubd04\uc5d0\ub294 \ub179\uc0c9\uc744 \ub760\uc9c0\ub9cc, \ub2a6\uc5ec\ub984 \uc774\ud6c4\uc5d0\ub294 \ubd89\uc740\uc0c9\uc73c\ub85c \ubcc0\uc0c9\ub429\ub2c8\ub2e4. \uc774 \uc0c9 \ubcc0\ud654\ub294 \ubd89\ub098\ubb34\uc758 \uac00\uc744 \ub2e8\ud48d\uacfc \uc720\uc0ac\ud558\uc5ec \uad6c\ubcc4\uc774 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.',\n },\n aesthetic_damage: {\n title: '\ubbf8\uad00 \uc190\uc0c1',\n description: '\uc78e\uc5d0 \ub2e4\uc218\uc758 \ubc8c\ub808\ud639\uc774 \ud615\uc131\ub418\uace0 \ubcc0\uc0c9\ub418\uba74\uc11c \ubd89\ub098\ubb34\uc758 \ubbf8\uad00\uc744 \ud06c\uac8c \uc190\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4. \ud2b9\ud788 \uc870\uacbd\uc218\ub85c \uc2dd\uc7ac\ub41c \uacbd\uc6b0 \uad00\uc0c1 \uac00\uce58\ub97c \ub5a8\uc5b4\ub728\ub9bd\ub2c8\ub2e4.',\n }\n };\n \n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n sections.forEach(section => {\n section.classList.remove('active');\n if (section.id === tab.dataset.tab) {\n section.classList.add('active');\n }\n });\n });\n });\n\n \/\/ Morphology section logic\n const morphologyTypeButtons = document.querySelectorAll('#morphology .stage-btn');\n const morphologyTitle = document.getElementById('morphology-title');\n const morphologyDescription = document.getElementById('morphology-description');\n const morphologySize = document.getElementById('morphology-size');\n\n function updateMorphologyContent(type) {\n morphologyTypeButtons.forEach(btn => btn.classList.remove('active'));\n document.querySelector(`#morphology .stage-btn[data-type=\"${type}\"]`).classList.add('active');\n \n const data = morphologyData[type];\n morphologyTitle.textContent = data.title;\n morphologyDescription.textContent = data.description;\n morphologySize.textContent = data.size;\n }\n\n \/\/ Initial content for morphology section\n updateMorphologyContent('female_adult'); \n\n morphologyTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateMorphologyContent(button.dataset.type);\n });\n });\n\n\n \/\/ Damage section logic\n const damageTypeButtons = document.querySelectorAll('#damage .damage-btn');\n const damageTitle = document.getElementById('damage-title');\n const damageDescription = document.getElementById('damage-description');\n\n function updateDamageContent(type) {\n damageTypeButtons.forEach(btn => btn.classList.remove('active'));\n document.querySelector(`#damage .damage-btn[data-damage-type=\"${type}\"]`).classList.add('active');\n \n const data = damageData[type];\n damageTitle.textContent = data.title;\n damageDescription.textContent = data.description;\n }\n\n \/\/ Initial content for damage section\n updateDamageContent('gall_formation');\n\n damageTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateDamageContent(button.dataset.damageType);\n });\n });\n\n const ctx = document.getElementById('controlChart').getContext('2d');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['4\uc6d4', '5\uc6d4', '6\uc6d4', '7\uc6d4', '8\uc6d4', '9\uc6d4', '10\uc6d4'],\n datasets: [{\n label: '\ud639\uc751\uc560 \ud65c\ub3d9\uae30 (\ubc8c\ub808\ud639 \ud615\uc131)',\n data: [10, 8, 5, 2, 5, 8, 10], \/\/ Peak April-May, then increasing late summer\n backgroundColor: 'rgba(239, 68, 68, 0.6)', \/* red-500 *\/\n borderColor: 'rgba(239, 68, 68, 1)',\n borderWidth: 1,\n yAxisID: 'y',\n },{\n label: '\ubc29\uc81c \ucd94\ucc9c \uae30\uac04 (\uc0c8\uc78e \ucd9c\ud604 \uc2dc)',\n data: [12, 12, 0, 0, 0, 0, 0], \/\/ April-May\n type: 'line',\n fill: true,\n backgroundColor: 'rgba(59, 130, 246, 0.2)', \/* blue-500 with transparency *\/\n borderColor: 'rgba(59, 130, 246, 1)',\n pointRadius: 0,\n yAxisID: 'y1'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: true,\n position: 'top',\n labels: {\n usePointStyle: false,\n }\n },\n tooltip: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function(context) {\n if (context.dataset.label.includes('\ubc29\uc81c \ucd94\ucc9c \uae30\uac04')) {\n return ` ${context.dataset.label}: 4\uc6d4 ~ 5\uc6d4`;\n }\n return ` ${context.dataset.label}: ${context.raw} (\ud65c\ub3d9 \ubc00\ub3c4)`;\n }\n }\n },\n title: {\n display: true,\n text: '\ubd89\ub098\ubb34\ud639\uc751\uc560 \uc6d4\ubcc4 \ud65c\ub3d9 \ubc0f \ubc29\uc81c \uc2dc\uae30'\n }\n },\n scales: {\n x: {\n stacked: true,\n },\n y: {\n stacked: true,\n display: true,\n title: {\n display: true,\n text: '\ud65c\ub3d9 \ubc00\ub3c4'\n },\n max: 12\n },\n y1: {\n display: false,\n max: 15\n }\n }\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"featured_media":3224,"template":"","meta":{"_acf_changed":true,"_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":""}}},"pest-target":[328],"pest-category":[200,94],"pest-overwintering":[],"class_list":["post-3223","pest","type-pest","status-publish","has-post-thumbnail","hentry","pest-target-328","pest-category-200","pest-category-94"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"thumbnail":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560-150x150.jpg",150,150,true],"medium":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560-300x243.jpg",300,243,true],"medium_large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"1536x1536":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"2048x2048":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false]},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"\ubd89\ub098\ubb34\ud639\uc751\uc560 \ub300\ud654\ud615 \uac00\uc774\ub4dc \uac1c\uc694 \ud615\ud0dc \ud53c\ud574 \uc99d\uc0c1 \uc0dd\ud65c\uc0ac \ubc29\uc81c \ubc29\ubc95 \ubd89\ub098\ubb34\ud639\uc751\uc560 (Aculops chinonei)\uc774\ub780? \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc751\uc560\ubaa9 \ud639\uc751\uc560\uacfc\uc5d0 \uc18d\ud558\ub294 \ud574\ucda9\uc73c\ub85c, \uc804\uad6d \uac01\uc9c0\uc5d0\uc11c […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest\/3223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/pest"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/media\/3224"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3223"}],"wp:term":[{"taxonomy":"pest-target","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-target&post=3223"},{"taxonomy":"pest-category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-category&post=3223"},{"taxonomy":"pest-overwintering","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-overwintering&post=3223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3223,"date":"2025-07-01T15:01:18","date_gmt":"2025-07-01T15:01:18","guid":{"rendered":"https:\/\/hstc.treecare.co.kr\/?post_type=pest&p=3223"},"modified":"2025-07-01T15:02:10","modified_gmt":"2025-07-01T15:02:10","slug":"%eb%b6%89%eb%82%98%eb%ac%b4%ed%98%b9%ec%9d%91%ec%95%a0","status":"publish","type":"pest","link":"https:\/\/hstc.treecare.co.kr\/?pest=%eb%b6%89%eb%82%98%eb%ac%b4%ed%98%b9%ec%9d%91%ec%95%a0","title":{"rendered":"\ubd89\ub098\ubb34\ud639\uc751\uc560"},"content":{"rendered":"\n\n\n\n \n \n \ubd89\ub098\ubb34\ud639\uc751\uc560 \ub300\ud654\ud615 \uac00\uc774\ub4dc<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.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@300;400;500;700&display=swap\" rel=\"stylesheet\">\n \n \n \n \n <style>\n body {\n font-family: 'Noto Sans KR', sans-serif;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n height: 300px;\n max-height: 400px;\n }\n @media (min-width: 768px) {\n .chart-container {\n height: 350px;\n }\n }\n .nav-btn {\n transition: all 0.3s ease;\n border-radius: 0 !important;\n box-shadow: none !important;\n border: none !important;\n }\n .nav-btn.active {\n background-color: #b91c1c !important; \/* red-700 *\/\n color: #fef2f2 !important; \/* red-50 *\/\n font-weight: 700;\n }\n .content-section {\n display: none;\n }\n .content-section.active {\n display: block;\n }\n .stage-btn, .damage-btn {\n border-radius: 0 !important;\n box-shadow: none !important;\n border: none !important;\n }\n .stage-btn.active, .damage-btn.active {\n background-color: #ef4444; \/* red-500 *\/\n color: white;\n font-weight: 600;\n transform: scale(1.05);\n }\n .nav-btn:focus,\n .stage-btn:focus,\n .damage-btn:focus {\n outline: none !important;\n box-shadow: none !important;\n border: none !important;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <div class=\"container mx-auto\"> \n \n <header class=\"text-center\">\n \n <\/header>\n\n <nav class=\"flex justify-between bg-gray-200 mb-8\">\n <button data-tab=\"overview\" class=\"nav-btn active flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\uac1c\uc694<\/button>\n <button data-tab=\"morphology\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\ud615\ud0dc<\/button>\n <button data-tab=\"damage\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\ud53c\ud574 \uc99d\uc0c1<\/button>\n <button data-tab=\"ecology\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\uc0dd\ud65c\uc0ac<\/button>\n <button data-tab=\"control\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-red-100\">\ubc29\uc81c \ubc29\ubc95<\/button>\n <\/nav>\n\n <main id=\"app-content\" class=\"p-2 md:p-2\">\n \n \n <section id=\"overview\" class=\"content-section active space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560 (<i>Aculops chinonei<\/i>)\uc774\ub780?<\/h2>\n <p class=\"text-gray-700 leading-relaxed\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc751\uc560\ubaa9 \ud639\uc751\uc560\uacfc\uc5d0 \uc18d\ud558\ub294 \ud574\ucda9\uc73c\ub85c, \uc804\uad6d \uac01\uc9c0\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \ubd89\ub098\ubb34\uc758 \ub300\ud45c\uc801\uc778 \ud574\ucda9\uc785\ub2c8\ub2e4. \uc131\ucda9\uacfc \uc57d\ucda9\uc774 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc218\uc561\uc744 \ud761\uc999\ud558\uace0, \uc78e \uc55e\uba74\uc5d0 \uc0ac\ub9c8\uadc0 \uac19\uc740 \ub465\uadfc \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud569\ub2c8\ub2e4. \ubc8c\ub808\ud639\uc740 \ubd04\uc5d0\ub294 \ub179\uc0c9\uc774\uc5c8\ub2e4\uac00 \ub2a6\uc5ec\ub984 \uc774\ud6c4 \ubd89\uac8c \ubcc0\ud558\ub294 \ud2b9\uc9d5\uc744 \uac00\uc9d1\ub2c8\ub2e4.\n <\/p>\n <ul class=\"list-disc list-inside text-gray-700 mt-4 space-y-1\">\n <li><strong>\uc6d4\ub3d9\ud0dc:<\/strong> (\uc790\uc138\ud55c \uc815\ubcf4 \ubbf8\uae30\uc7ac)<\/li>\n <li><strong>\ubc1c\uc0dd \ud69f\uc218:<\/strong> \uc5f0 \uc218\ud68c \ubc1c\uc0dd (\uc790\uc138\ud55c \uc0dd\ud0dc\ub294 \ubc1d\ud600\uc9c0\uc9c0 \uc54a\uc74c)<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-6 bg-white\">\n <h3 class=\"text-xl font-semibold text-red-800 mb-3\">\ubd84\ud3ec \ubc0f \uc8fc\uc694 \uac00\ud574 \uc218\uc885<\/h3>\n <p class=\"text-gray-700 mb-4\">\n \ud55c\uad6d, \uc77c\ubcf8, \uc911\uad6d \ub4f1\uc9c0\uc5d0 \ubd84\ud3ec\ud569\ub2c8\ub2e4. \uc8fc\uc694 \uac00\ud574 \uc218\uc885\uc740 <strong>\ubd89\ub098\ubb34<\/strong>\uc785\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <\/section>\n\n \n <section id=\"morphology\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560\uc758 \ud615\ud0dc\uc801 \ud2b9\uc9d5<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \ub9e4\uc6b0 \uc791\uc740 \ud06c\uae30\uc758 \uc751\uc560\ub85c, \ud604\ubbf8\uacbd\uc73c\ub85c \uad00\ucc30\ud574\uc57c \ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-type=\"female_adult\" class=\"stage-btn active flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uc554\ucef7 \uc131\ucda9<\/button>\n <button data-type=\"male_adult\" class=\"stage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uc218\ucef7 \uc131\ucda9<\/button>\n <\/div>\n <div id=\"morphology-content\" class=\"p-4\">\n <div id=\"morphology-text\" class=\"w-full\">\n <h3 id=\"morphology-title\" class=\"text-xl font-semibold text-red-700 mb-2\"><\/h3>\n <p id=\"morphology-description\" class=\"text-gray-700\"><\/p>\n <p id=\"morphology-size\" class=\"text-sm text-gray-600 mt-2\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"damage\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560\uc758 \uc8fc\uc694 \ud53c\ud574 \uc99d\uc0c1<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc78e\uc5d0 \ud2b9\uc9d5\uc801\uc778 \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud558\uace0, \uc774\ub85c \uc778\ud574 \uc78e\uc758 \ubcc0\uc0c9 \ubc0f \ubbf8\uad00 \uc190\uc0c1\uc744 \uc720\ubc1c\ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-damage-type=\"gall_formation\" class=\"damage-btn active flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ubc8c\ub808\ud639 \ud615\uc131<\/button>\n <button data-damage-type=\"gall_discoloration\" class=\"damage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ubc8c\ub808\ud639 \ubcc0\uc0c9<\/button>\n <button data-damage-type=\"aesthetic_damage\" class=\"damage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ubbf8\uad00 \uc190\uc0c1<\/button>\n <\/div>\n <div id=\"damage-content\" class=\"p-4\">\n <div id=\"damage-text\" class=\"w-full\">\n <h3 id=\"damage-title\" class=\"text-xl font-semibold text-red-700 mb-2\"><\/h3>\n <p id=\"damage-description\" class=\"text-gray-700\"><\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"ecology\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ubd89\ub098\ubb34\ud639\uc751\uc560\uc758 \uc0dd\ud65c\uc0ac<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc5f0 \uc218\ud68c \ubc1c\uc0dd\ud558\uba70, \uc790\uc138\ud55c \uc0dd\ud0dc\ub294 \uc544\uc9c1 \ubc1d\ud600\uc9c0\uc9c0 \uc54a\uc558\uc2b5\ub2c8\ub2e4. \uc8fc\ub85c \uc0c8\uc78e\uc774 \ub098\uc624\ub294 \uc2dc\uae30\ubd80\ud130 \ud65c\ub3d9\ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-col items-center space-y-2\">\n <div class=\"w-full max-w-md text-center p-3 bg-blue-100\">\n <p class=\"font-semibold\">1. \uc0c8\uc78e \ucd9c\ud604 \ubc0f \ud65c\ub3d9 \uc2dc\uc791 (4\uc6d4)<\/p><p class=\"text-sm\">\uc0c8\uc78e\uc774 \ub098\uc624\ub294 4\uc6d4\ubd80\ud130 \uc131\ucda9\uacfc \uc57d\ucda9\uc774 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc218\uc561 \ud761\uc999<\/p>\n <\/div>\n <div class=\"text-2xl text-gray-400\">\u2193<\/div>\n <div class=\"w-full max-w-md text-center p-3 bg-green-100\">\n <p class=\"font-semibold\">2. \ubc8c\ub808\ud639 \ud615\uc131 (\uc78e \uc55e\uba74)<\/p><p class=\"text-sm\">\uc78e \uc55e\uba74\uc5d0 \uc0ac\ub9c8\uadc0 \uac19\uc740 \ub465\uadfc \ubc8c\ub808\ud639 \ud615\uc131 (\ubd04\uc5d0\ub294 \ub179\uc0c9)<\/p>\n <\/div>\n <div class=\"text-2xl text-gray-400\">\u2193<\/div>\n <div class=\"w-full max-w-md text-center p-3 bg-yellow-100\">\n <p class=\"font-semibold\">3. \ubc8c\ub808\ud639 \ubcc0\uc0c9 (\ub2a6\uc5ec\ub984 \uc774\ud6c4)<\/p><p class=\"text-sm\">\ub2a6\uc5ec\ub984 \uc774\ud6c4 \ubc8c\ub808\ud639\uc774 \ubd89\uc740\uc0c9\uc73c\ub85c \ubcc0\ud568<\/p>\n <\/div>\n <div class=\"text-2xl text-gray-400\">\u2193<\/div>\n <div class=\"w-full max-w-md text-center p-3 bg-orange-100\">\n <p class=\"font-semibold\">4. \ubc18\ubcf5 \ubc1c\uc0dd \ubc0f \ud53c\ud574 \uc9c0\uc18d<\/p><p class=\"text-sm\">\uc5f0 \uc218\ud68c \ubc1c\uc0dd\ud558\uba70 \ud53c\ud574\uac00 \uc9c0\uc18d\ub428<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"control\" class=\"content-section space-y-6\">\n <div class=\"p-6 bg-white\">\n <h2 class=\"text-2xl font-bold text-red-800 mb-4\">\ud6a8\uacfc\uc801\uc778 \ubc29\uc81c \ubc29\ubc95<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \ubd89\ub098\ubb34\ud639\uc751\uc560 \ubc29\uc81c\ub294 \uc0c8\uc78e\uc774 \ub098\uc624\ub294 \uc2dc\uae30\uc5d0 \ub9de\ucdb0 \uc57d\uc81c\ub97c \uc0b4\ud3ec\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.\n <\/p>\n <div class=\"space-y-4\">\n <div class=\"p-4 bg-blue-50\">\n <h3 class=\"text-xl font-semibold text-blue-800 mb-2\">\u2460 \ud654\ud559\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\uc0b4\ud3ec \uc2dc\uae30:<\/strong> \uc0c8\uc78e\uc774 \ub098\uc624\ub294 <strong>4\uc6d4\ubd80\ud130<\/strong> \ud53c\ub9ac\ub2e4\ud39c\ud2f0\uc628 \uc720\uc81c 1,000\ubc30\uc561\uc744 10\uc77c \uac04\uaca9\uc73c\ub85c 2\ud68c \uc774\uc0c1 \uc0b4\ud3ec\ud569\ub2c8\ub2e4.<\/li>\n <li><strong>\uc815\ubcf4 \ud655\uc778:<\/strong> \ub18d\uc57d\uc548\uc804\uc815\ubcf4\uc2dc\uc2a4\ud15c(psis.rda.go.kr)\uc5d0\uc11c \ubd89\ub098\ubb34 \ubc0f \ud639\uc751\uc560\uc5d0 \ub4f1\ub85d\ub41c \uc57d\uc81c\ub97c \ud655\uc778\ud558\uc5ec \uc0ac\uc6a9\ud558\uc2ed\uc2dc\uc624.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-4 bg-green-50\">\n <h3 class=\"text-xl font-semibold text-green-800 mb-2\">\u2461 \ubb3c\ub9ac\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\ud53c\ud574 \uc78e \uc81c\uac70:<\/strong> \ubc8c\ub808\ud639\uc774 \ud615\uc131\ub41c \uc78e\uc740 \ubc1c\uacac \uc989\uc2dc \uc81c\uac70\ud558\uc5ec \uc18c\uac01\ud558\uac70\ub098 \ub9e4\ubab0\ud558\uc5ec \ud655\uc0b0\uc744 \ub9c9\uc2b5\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-4 bg-yellow-50\">\n <h3 class=\"text-xl font-semibold text-yellow-800 mb-2\">\u2462 \ud658\uacbd \uad00\ub9ac \ubc0f \uc0dd\ubb3c\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\uc218\uc138 \uc99d\uc9c4:<\/strong> \ub098\ubb34\ub97c \uac74\uac15\ud558\uac8c \uad00\ub9ac\ud558\uc5ec \ud574\ucda9\uc5d0 \ub300\ud55c \uc800\ud56d\ub825\uc744 \ub192\uc785\ub2c8\ub2e4.<\/li>\n <li><strong>\ucc9c\uc801 \ubcf4\ud638:<\/strong> \uc751\uc560\ub958\uc758 \ucc9c\uc801\uc778 \ud3ec\uc2dd\uc131 \uc751\uc560, \ubb34\ub2f9\ubc8c\ub808\ub958 \ub4f1\uc744 \ubcf4\ud638\ud558\ub294 \uac83\uc774 \ubc00\ub3c4 \uc870\uc808\uc5d0 \ub3c4\uc6c0\uc774 \ub429\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"p-6 bg-white\">\n <h3 class=\"text-xl font-semibold text-red-800 mb-4 text-center\">\uc8fc\uc694 \ud65c\ub3d9 \uc2dc\uae30 \ubc0f \ubc29\uc81c \uc801\uae30<\/h3>\n <div class=\"chart-container\">\n <canvas id=\"controlChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"text-center mt-8 pt-4 border-t border-gray-200 mb-8\">\n <p class=\"text-sm text-gray-500\">\uc815\ubcf4 \ucd9c\ucc98: \uc0b0\ub9bc\uccad \ub4f1 \uc804\ubb38 \uc790\ub8cc<\/p>\n <\/footer>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const tabs = document.querySelectorAll('.nav-btn');\n const sections = document.querySelectorAll('.content-section');\n\n const morphologyData = {\n female_adult: {\n title: '\uc554\ucef7 \uc131\ucda9',\n description: '\ubab8\uae38\uc774\uac00 0.21~0.28mm\ub85c \uc6d0\ud1b5\ud615\uc774\uba70, \ubab8 \uc0c9\uae54\uc740 \ub4f1\uc0c9(\uc624\ub80c\uc9c0\uc0c9)\uc785\ub2c8\ub2e4. \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc218\uc561\uc744 \ud761\uc999\ud558\uace0, \uc78e \uc55e\uba74\uc5d0 \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud569\ub2c8\ub2e4.',\n size: '\ud06c\uae30: 0.21~0.28mm',\n },\n male_adult: {\n title: '\uc218\ucef7 \uc131\ucda9',\n description: '\ubab8\uae38\uc774\uac00 \uc57d 0.22mm\ub85c \uc554\ucef7\ubcf4\ub2e4 \uc57d\uac04 \uc791\uc2b5\ub2c8\ub2e4. \uc554\ucef7\uacfc \ud568\uaed8 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uba70, \ubc88\uc2dd\uc5d0 \uad00\uc5ec\ud569\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uc57d 0.22mm',\n }\n };\n\n const damageData = {\n gall_formation: {\n title: '\ubc8c\ub808\ud639 \ud615\uc131',\n description: '\uc131\ucda9\uacfc \uc57d\ucda9\uc774 \uc78e \ub4b7\uba74\uc5d0 \uae30\uc0dd\ud558\uc5ec \uc78e \uc55e\uba74\uc5d0 \uc0ac\ub9c8\uadc0 \uac19\uc740 \ub465\uadfc \ubc8c\ub808\ud639\uc744 \ud615\uc131\ud569\ub2c8\ub2e4. \ubc8c\ub808\ud639 \ub0b4\ubd80\uc5d0\ub294 \uc751\uc560\uac00 \uc11c\uc2dd\ud558\uba70 \uc218\uc561\uc744 \ud761\uc999\ud569\ub2c8\ub2e4. (\uac00\ud574 \uc591\uc0c1 \uc774\ubbf8\uc9c0 \ucc38\uace0)',\n },\n gall_discoloration: {\n title: '\ubc8c\ub808\ud639 \ubcc0\uc0c9',\n description: '\ubc8c\ub808\ud639\uc740 \ud615\uc131 \ucd08\uae30\uc778 \ubd04\uc5d0\ub294 \ub179\uc0c9\uc744 \ub760\uc9c0\ub9cc, \ub2a6\uc5ec\ub984 \uc774\ud6c4\uc5d0\ub294 \ubd89\uc740\uc0c9\uc73c\ub85c \ubcc0\uc0c9\ub429\ub2c8\ub2e4. \uc774 \uc0c9 \ubcc0\ud654\ub294 \ubd89\ub098\ubb34\uc758 \uac00\uc744 \ub2e8\ud48d\uacfc \uc720\uc0ac\ud558\uc5ec \uad6c\ubcc4\uc774 \uc5b4\ub824\uc6b8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.',\n },\n aesthetic_damage: {\n title: '\ubbf8\uad00 \uc190\uc0c1',\n description: '\uc78e\uc5d0 \ub2e4\uc218\uc758 \ubc8c\ub808\ud639\uc774 \ud615\uc131\ub418\uace0 \ubcc0\uc0c9\ub418\uba74\uc11c \ubd89\ub098\ubb34\uc758 \ubbf8\uad00\uc744 \ud06c\uac8c \uc190\uc0c1\uc2dc\ud0b5\ub2c8\ub2e4. \ud2b9\ud788 \uc870\uacbd\uc218\ub85c \uc2dd\uc7ac\ub41c \uacbd\uc6b0 \uad00\uc0c1 \uac00\uce58\ub97c \ub5a8\uc5b4\ub728\ub9bd\ub2c8\ub2e4.',\n }\n };\n \n tabs.forEach(tab => {\n tab.addEventListener('click', () => {\n tabs.forEach(t => t.classList.remove('active'));\n tab.classList.add('active');\n sections.forEach(section => {\n section.classList.remove('active');\n if (section.id === tab.dataset.tab) {\n section.classList.add('active');\n }\n });\n });\n });\n\n \/\/ Morphology section logic\n const morphologyTypeButtons = document.querySelectorAll('#morphology .stage-btn');\n const morphologyTitle = document.getElementById('morphology-title');\n const morphologyDescription = document.getElementById('morphology-description');\n const morphologySize = document.getElementById('morphology-size');\n\n function updateMorphologyContent(type) {\n morphologyTypeButtons.forEach(btn => btn.classList.remove('active'));\n document.querySelector(`#morphology .stage-btn[data-type=\"${type}\"]`).classList.add('active');\n \n const data = morphologyData[type];\n morphologyTitle.textContent = data.title;\n morphologyDescription.textContent = data.description;\n morphologySize.textContent = data.size;\n }\n\n \/\/ Initial content for morphology section\n updateMorphologyContent('female_adult'); \n\n morphologyTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateMorphologyContent(button.dataset.type);\n });\n });\n\n\n \/\/ Damage section logic\n const damageTypeButtons = document.querySelectorAll('#damage .damage-btn');\n const damageTitle = document.getElementById('damage-title');\n const damageDescription = document.getElementById('damage-description');\n\n function updateDamageContent(type) {\n damageTypeButtons.forEach(btn => btn.classList.remove('active'));\n document.querySelector(`#damage .damage-btn[data-damage-type=\"${type}\"]`).classList.add('active');\n \n const data = damageData[type];\n damageTitle.textContent = data.title;\n damageDescription.textContent = data.description;\n }\n\n \/\/ Initial content for damage section\n updateDamageContent('gall_formation');\n\n damageTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateDamageContent(button.dataset.damageType);\n });\n });\n\n const ctx = document.getElementById('controlChart').getContext('2d');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['4\uc6d4', '5\uc6d4', '6\uc6d4', '7\uc6d4', '8\uc6d4', '9\uc6d4', '10\uc6d4'],\n datasets: [{\n label: '\ud639\uc751\uc560 \ud65c\ub3d9\uae30 (\ubc8c\ub808\ud639 \ud615\uc131)',\n data: [10, 8, 5, 2, 5, 8, 10], \/\/ Peak April-May, then increasing late summer\n backgroundColor: 'rgba(239, 68, 68, 0.6)', \/* red-500 *\/\n borderColor: 'rgba(239, 68, 68, 1)',\n borderWidth: 1,\n yAxisID: 'y',\n },{\n label: '\ubc29\uc81c \ucd94\ucc9c \uae30\uac04 (\uc0c8\uc78e \ucd9c\ud604 \uc2dc)',\n data: [12, 12, 0, 0, 0, 0, 0], \/\/ April-May\n type: 'line',\n fill: true,\n backgroundColor: 'rgba(59, 130, 246, 0.2)', \/* blue-500 with transparency *\/\n borderColor: 'rgba(59, 130, 246, 1)',\n pointRadius: 0,\n yAxisID: 'y1'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n display: true,\n position: 'top',\n labels: {\n usePointStyle: false,\n }\n },\n tooltip: {\n mode: 'index',\n intersect: false,\n callbacks: {\n label: function(context) {\n if (context.dataset.label.includes('\ubc29\uc81c \ucd94\ucc9c \uae30\uac04')) {\n return ` ${context.dataset.label}: 4\uc6d4 ~ 5\uc6d4`;\n }\n return ` ${context.dataset.label}: ${context.raw} (\ud65c\ub3d9 \ubc00\ub3c4)`;\n }\n }\n },\n title: {\n display: true,\n text: '\ubd89\ub098\ubb34\ud639\uc751\uc560 \uc6d4\ubcc4 \ud65c\ub3d9 \ubc0f \ubc29\uc81c \uc2dc\uae30'\n }\n },\n scales: {\n x: {\n stacked: true,\n },\n y: {\n stacked: true,\n display: true,\n title: {\n display: true,\n text: '\ud65c\ub3d9 \ubc00\ub3c4'\n },\n max: 12\n },\n y1: {\n display: false,\n max: 15\n }\n }\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"featured_media":3224,"template":"","meta":{"_acf_changed":true,"_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":""}}},"pest-target":[328],"pest-category":[200,94],"pest-overwintering":[],"class_list":["post-3223","pest","type-pest","status-publish","has-post-thumbnail","hentry","pest-target-328","pest-category-200","pest-category-94"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"thumbnail":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560-150x150.jpg",150,150,true],"medium":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560-300x243.jpg",300,243,true],"medium_large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"1536x1536":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false],"2048x2048":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/07\/\ubd89\ub098\ubb34\ud639\uc751\uc560.jpg",334,270,false]},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"\ubd89\ub098\ubb34\ud639\uc751\uc560 \ub300\ud654\ud615 \uac00\uc774\ub4dc \uac1c\uc694 \ud615\ud0dc \ud53c\ud574 \uc99d\uc0c1 \uc0dd\ud65c\uc0ac \ubc29\uc81c \ubc29\ubc95 \ubd89\ub098\ubb34\ud639\uc751\uc560 (Aculops chinonei)\uc774\ub780? \ubd89\ub098\ubb34\ud639\uc751\uc560\ub294 \uc751\uc560\ubaa9 \ud639\uc751\uc560\uacfc\uc5d0 \uc18d\ud558\ub294 \ud574\ucda9\uc73c\ub85c, \uc804\uad6d \uac01\uc9c0\uc5d0\uc11c […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest\/3223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/pest"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/media\/3224"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3223"}],"wp:term":[{"taxonomy":"pest-target","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-target&post=3223"},{"taxonomy":"pest-category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-category&post=3223"},{"taxonomy":"pest-overwintering","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-overwintering&post=3223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}