\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \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 }\n .nav-btn.active {\n background-color: #c2410c; \/* orange-700 *\/\n color: #fff7ed; \/* orange-50 *\/\n font-weight: 700;\n }\n .content-section {\n display: none;\n }\n .content-section.active {\n display: block;\n }\n .stage-btn.active, .damage-btn.active {\n background-color: #f97316; \/* orange-500 *\/\n color: white;\n font-weight: 600;\n transform: scale(1.05);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <div class=\"container mx-auto p-4 md:p-8\">\n \n\n\n <nav class=\"flex justify-center bg-gray-200 rounded-lg p-2 mb-8 shadow-sm\">\n <button data-tab=\"overview\" class=\"nav-btn active flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\uac1c\uc694<\/button>\n <button data-tab=\"morphology\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\ud615\ud0dc<\/button>\n <button data-tab=\"damage\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\ud53c\ud574 \uc99d\uc0c1<\/button>\n <button data-tab=\"ecology\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\uc0dd\ud65c\uc0ac<\/button>\n <button data-tab=\"control\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\ubc29\uc81c \ubc29\ubc95<\/button>\n <\/nav>\n\n <main id=\"app-content\">\n \n \n <section id=\"overview\" class=\"content-section active space-y-6\">\n <div class=\"p-6 bg-white rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9(Pochazia shantungensis)\uc774\ub780?<\/h2>\n <p class=\"text-gray-700 leading-relaxed\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \ub178\ub9b0\uc7ac\ubaa9 \ud070\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uacfc\uc5d0 \uc18d\ud558\ub294 \ub3cc\ubc1c\ud574\ucda9\uc785\ub2c8\ub2e4. \uc911\uad6d\uc774 \uc6d0\uc0b0\uc9c0\ub85c 2010\ub144 \ucda9\ub0a8 \uc608\uc0b0\uad70\uacfc \uacf5\uc8fc\uc2dc\uc5d0\uc11c \ucd5c\ucd08 \ubc1c\uacac\ub41c \uc774\ud6c4 \uc804\uad6d\uc73c\ub85c \ud655\uc0b0 \uc911\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \ubc24\ub098\ubb34, \uac10\ub098\ubb34, \uc0b0\uc218\uc720, \ub54c\uc8fd\ub098\ubb34, \ub2e8\ud48d\ub098\ubb34 \ub4f1 62\uacfc 138\uc885\uc758 \ud65c\uc5fd\uc218\ub97c \uae30\uc8fc\uc2dd\ubb3c\ub85c \uc0bc\uc544 \ud070 \ud53c\ud574\ub97c \uc90d\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div class=\"p-6 bg-white rounded-lg shadow\">\n <h3 class=\"text-xl font-semibold text-orange-800 mb-3\">\uc8fc\uc694 \ud2b9\uc9d5<\/h3>\n <p class=\"text-gray-700 mb-4\">\n \uc57d\ucda9\uacfc \uc131\ucda9\uc774 \uc2dd\ubb3c\uccb4\ub85c\ubd80\ud130 \uc591\ubd84\uc744 \ud761\uc999\ud558\uba70, \ud2b9\ud788 \uc57d\ucda9 \uc2dc\uae30\uc5d0 \ud770\uc0c9 \uc641\uc2a4 \ubb3c\uc9c8\uc744 \ubd84\ube44\ud558\ub294 \uac83\uc774 \ud2b9\uc9d5\uc785\ub2c8\ub2e4. \ube60\ub978 \ud655\uc0b0\ub825\uc73c\ub85c \uc778\ud574 \uad11\ubc94\uc704\ud55c \uc9c0\uc5ed\uc5d0 \ud53c\ud574\ub97c \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub0a8\ud55c\uc758 \uc11c\ucabd \uc9c0\uc5ed\uc5d0 \uc9d1\uc911 \ubd84\ud3ec\ud558\uace0 \uc788\uc73c\ub098, \ud5a5\ud6c4 \ubc1c\uc721\uc5d0 \uc801\ud569\ud55c \ud658\uacbd\uc744 \uac16\ub294 \ub3d9\ucabd \uc9c0\uc5ed\uc73c\ub85c\ub3c4 \uc810\ucc28 \ud655\uc0b0\ud560 \uac83\uc774\ub77c \uc608\uce21\ub429\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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \ubc1c\uc721\ub2e8\uacc4\ubcc4 \ud615\ud0dc\uc801 \ud2b9\uc9d5<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \uac01 \ubc1c\uc721 \ub2e8\uacc4\ub9c8\ub2e4 \ub3c5\ud2b9\ud55c \ud615\ud0dc\ub97c \uac00\uc9d1\ub2c8\ub2e4. \ud2b9\ud788 \uc57d\ucda9\uc758 \ud770\uc0c9 \uc641\uc2a4\uc9c8 \ubd84\ube44\ubb3c\uc774 \ub208\uc5d0 \ub755\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-type=\"adult\" class=\"stage-btn active text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc131\ucda9<\/button>\n <button data-type=\"nymph\" class=\"stage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc57d\ucda9<\/button>\n <button data-type=\"egg\" class=\"stage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc54c<\/button>\n <\/div>\n <div id=\"morphology-content\" class=\"md:flex md:items-center md:space-x-6 p-4 border border-gray-200 rounded-lg\">\n <img decoding=\"async\" id=\"morphology-main-image\" src=\"https:\/\/placehold.co\/400x300\/a3e635\/16a34a?text=\uc774\ubbf8\uc9c0\" alt=\"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \ud615\ud0dc \uc774\ubbf8\uc9c0\" class=\"w-full md:w-1\/2 rounded-lg shadow-md mb-4 md:mb-0\">\n <div id=\"morphology-text\" class=\"md:w-1\/2\">\n <h3 id=\"morphology-title\" class=\"text-xl font-semibold text-orange-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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \uc8fc\uc694 \ud53c\ud574 \ud2b9\uc131<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \ud53c\ud574\ub294 \ud761\uc999\uc5d0 \uc758\ud55c \uc9c1\uc811\uc801\uc778 \ud53c\ud574\uc640 \uc0b0\ub780\uc5d0 \uc758\ud55c \ubb3c\ub9ac\uc801 \ud53c\ud574\ub85c \ub098\ub269\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-damage-type=\"sap_sucking_stunt\" class=\"damage-btn active text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc218\uc561 \ud761\uc999 \ubc0f \uc0dd\uc721 \uc800\ud574<\/button>\n <button data-damage-type=\"egg_laying_damage\" class=\"damage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc0b0\ub780\uc5d0 \uc758\ud55c \ubb3c\ub9ac\uc801 \ud53c\ud574<\/button>\n <button data-damage-type=\"sooty_mold\" class=\"damage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uadf8\uc744\uc74c\ubcd1 \uc720\ubc1c<\/button>\n <\/div>\n <div id=\"damage-content\" class=\"md:flex md:items-center md:space-x-6 p-4 border border-gray-200 rounded-lg\">\n <img decoding=\"async\" id=\"damage-main-image\" src=\"https:\/\/placehold.co\/400x300\/e2e8f0\/334155?text=\ud53c\ud574+\uc774\ubbf8\uc9c0\" alt=\"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \ud53c\ud574 \uc774\ubbf8\uc9c0\" class=\"w-full md:w-1\/2 rounded-lg shadow-md mb-4 md:mb-0\">\n <div id=\"damage-text\" class=\"md:w-1\/2\">\n <h3 id=\"damage-title\" class=\"text-xl font-semibold text-orange-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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \uc0dd\ud0dc \ud2b9\uc131 (\uc5f0 1\ud68c \ubc1c\uc0dd)<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 1\ub144\uc5d0 1\uc138\ub300\ub9cc \ubc1c\uc0dd\ud558\uba70, \uc54c \uc0c1\ud0dc\ub85c \uc6d4\ub3d9\ud569\ub2c8\ub2e4. \uc54c\uc758 \ubc1c\uc721\uc601\uc810\uc628\ub3c4\ub294 12.1\u2103, \uc720\ud6a8\uc801\uc0b0\uc628\ub3c4\ub294 264.3\uc628\uc77c\ub3c4\uc785\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 rounded-lg\">\n <p class=\"font-semibold\">1. \uc6d4\ub3d9 (\uc54c)<\/p><p class=\"text-sm\">\uac00\uc9c0 \uc18d\uc5d0 \uc0b0\ub780\ub41c \uc54c \uc0c1\ud0dc\ub85c \uaca8\uc6b8\uc744 \uc9c0\ub0c4<\/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 rounded-lg\">\n <p class=\"font-semibold\">2. \uc57d\ucda9 \ubd80\ud654 \ubc0f \ud65c\ub3d9 (4\uc6d4 \ud558\uc21c ~ 5\uc6d4 \uc0c1\uc21c)<\/p><p class=\"text-sm\">\uc6d4\ub3d9 \uc54c\uc774 \ubd80\ud654\ud558\uc5ec 1\ub839 \uc57d\ucda9\uc774 \ub418\uace0, 4\ubc88 \ud0c8\ud53c\ud558\uc5ec 5\ub839 \uc57d\ucda9\uae4c\uc9c0 \uc131\uc7a5<\/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 rounded-lg\">\n <p class=\"font-semibold\">3. \uc131\ucda9 \uc6b0\ud654 (7\uc6d4 \uc911\uc21c ~ 8\uc6d4 \uc0c1\uc21c)<\/p><p class=\"text-sm\">\uc57d\ucda9\uc774 \uc131\ucda9\uc73c\ub85c \uc6b0\ud654\ud558\uc5ec \ud761\uc999 \uac00\ud574 \ubc0f \uc601\uc591 \ubcf4\ucda9<\/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 rounded-lg\">\n <p class=\"font-semibold\">4. \uc0b0\ub780 (8\uc6d4 \uc0c1\uc21c ~ 11\uc6d4 \uc911\uc21c)<\/p><p class=\"text-sm\">\uc131\ucda9\uc774 1\ub144\uc0dd \uac00\uc9c0 \uc218\ud53c\uc5d0 \uc0c1\ucc98\ub97c \ub0b4\uace0 \ub09c\uad34 \ud615\ud0dc\ub85c \uc54c\uc744 \ub0b3\uc544 \uc6d4\ub3d9 \uc900\ube44<\/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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\ud6a8\uacfc\uc801\uc778 \ubc29\uc81c \ubc29\ubc95<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \ub3cc\ubc1c\ud574\ucda9\uc774\ubbc0\ub85c \ubc1c\uc0dd \ucd08\uae30\uc5d0 \uc2e0\uc18d\ud55c \ubc29\uc81c\uac00 \uc911\uc694\ud558\uba70, \uacfc\uc218\uc6d0 \ubc0f \uc8fc\ubcc0 \uc0b0\ub9bc\uc5d0 \ub300\ud55c \uacf5\ub3d9 \ubc29\uc81c\uac00 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4.\n <\/p>\n <div class=\"space-y-4\">\n <div class=\"p-4 border border-red-200 bg-red-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-red-800 mb-2\">\u203b \uc0b0\ub9bc \uc9c0\uc5ed \ud654\ud559\uc801 \ubc29\uc81c\ub294 \uc5b4\ub824\uc6c0<\/h3>\n <p class=\"text-gray-700\">\uc0b0\ub9bc\uc740 \ubc29\uc81c \ubc94\uc704\uac00 \uad11\ubc94\uc704\ud558\uace0 \ub18d\uc57d\uc774 \ub4f1\ub85d\ub418\uc9c0 \uc54a\uc740 \uae30\uc8fc\uc2dd\ubb3c \ub4f1\uc774 \uc874\uc7ac\ud558\uc5ec \ud654\ud559\uc801 \ubc29\uc81c\ubc95 \uc801\uc6a9\uc774 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"p-4 border border-blue-200 bg-blue-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-blue-800 mb-2\">\u2460 \ubb3c\ub9ac\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\uc54c\uc774 \uc0b0\ub780\ub41c \uac00\uc9c0 \uc81c\uac70:<\/strong> \uaca8\uc6b8\ucca0(12\uc6d4~\uc774\ub4ec\ud574 3\uc6d4)\uc5d0 \ub09c\uad34\uac00 \ubd99\uc740 1\ub144\uc0dd \uac00\uc9c0\ub97c \uc804\uc815\ud558\uc5ec \uc81c\uac70\ud558\uba74 \ubd80\ud654\uc728\uc744 \ub0ae\ucd9c \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\u203b \uacfc\uc218\uc758 \uacbd\uc6b0 \uacfc\uc2e4 \uc0dd\uc0b0\uc5d0 \ubb38\uc81c \ubc1c\uc0dd \uac00\ub2a5\uc131 \uc8fc\uc758)<\/li>\n <li><strong>\ud669\uc0c9 \uc810\ucc29 \ud2b8\ub7a9:<\/strong> \uc77c\ubd80 \ub18d\uc791\ubb3c\uc5d0\uc11c \uc131\ucda9 \ud3ec\ud68d \ud6a8\uacfc\uac00 \ud655\uc778\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n <li><strong>\ud2b8\ub7a9\uc2dd\ubb3c (\ud574\ubc14\ub77c\uae30) \uc774\uc6a9:<\/strong> \uc0b0\ub780 \uc804 \uc131\ucda9\uc744 \uc720\uc778\ud558\uc5ec \ubc29\uc81c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n <li><strong>\ucef4\ud329\ud2b8\ub7a8\ud504 \ub4f1 \uc720\uc778 \ud3ec\ud68d \uc7a5\uce58:<\/strong> \ub192\uc740 \ud6a8\uc728\uc131\uc73c\ub85c \uc131\ucda9\uc744 \ub300\ub7c9 \ud3ec\ud68d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-4 border border-green-200 bg-green-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-green-800 mb-2\">\u2461 \ud654\ud559\uc801 \ubc29\uc81c (1\ub839 \uc57d\ucda9 \uc2dc\uae30 \ucd5c\uc801)<\/h3>\n <p class=\"text-gray-700 mb-2\">\ub09c\uad34 \ubc00\ub3c4 \uc870\uc0ac\ub97c \ud1b5\ud574 \ubc00\ub3c4\uac00 \ub192\uc740 \uc9c0\uc5ed\uc5d0 \ub300\ud574 \uc0b0\ub780 \uac00\uc9c0 \uc81c\uac70 \ud6c4, 1\ub839 \uc57d\ucda9\uc774 \ubd80\ud654\ud558\ub294 \uc2dc\uae30(<strong>4\uc6d4 \ud558\uc21c ~ 5\uc6d4 \uc911\uc21c<\/strong>)\uc5d0 \ub9de\ucdb0 \uc0b4\ucda9\uc81c\ub97c \uc9d1\uc911 \uc0b4\ud3ec\ud558\ub294 \uac83\uc774 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.<\/p>\n <p class=\"text-gray-700\">\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub18d\uc57d \uc815\ubcf4\ub294 \ub18d\ucd0c\uc9c4\ud765\uccad \ub18d\uc57d\uc815\ubcf4\uc11c\ube44\uc2a4(www.pis.rda.go.kr) \ub610\ub294 \ub18d\uc0ac\ub85c(www.nongsaro.go.kr)\uc5d0\uc11c \ud655\uc778\ud558\uc2ed\uc2dc\uc624.<\/p>\n <\/div>\n <div class=\"p-4 border border-yellow-200 bg-yellow-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-yellow-800 mb-2\">\u2462 \uc0dd\ubb3c\uc801 \ubc29\uc81c<\/h3>\n <p class=\"text-gray-700\">\uc54c \uae30\uc0dd\ubc8c\uc778 \uac80\uc815\uc54c\ubc8c\ub958 \ub4f1\uc5d0 \uc758\ud574 \ubd80\ud654\uc728\uc774 \ub0ae\uc544\uc9c4\ub2e4\ub294 \ubcf4\uace0\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ucc9c\uc801\uc744 \ubcf4\ud638\ud558\uace0 \ud65c\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"p-6 bg-white rounded-lg shadow\">\n <h3 class=\"text-xl font-semibold text-orange-800 mb-4 text-center\">\uc8fc\uc694 \ud65c\ub3d9 \uc2dc\uae30 \ubc0f \ubc29\uc81c \uc801\uae30 (1\ub839 \uc57d\ucda9 \ub300\uc0c1)<\/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-12 pt-4 border-t border-gray-200\">\n <p class=\"text-sm text-gray-500\">\uc815\ubcf4 \ucd9c\ucc98: \uad6d\ub9bd\uc0b0\ub9bc\uacfc\ud559\uc6d0, \uc0b0\ub9bc\uccad, \ub18d\ucd0c\uc9c4\ud765\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 adult: {\n title: '\uc131\ucda9',\n description: '\ubab8\uae38\uc774 \uc218\ucef7 7.8~8.2mm, \uc554\ucef7 8.5~9.0mm. \uc55e\ub0a0\uac1c \ub05d\uae4c\uc9c0 \uae38\uc774\ub294 \uc218\ucef7 13.0~13.5mm, \uc554\ucef7 15.5~16.5mm. \uc55e\ub0a0\uac1c\ub294 \ud68c\uac08\uc0c9 \ubc14\ud0d5\uc5d0 \uc9d9\uc740 \uac08\uc0c9 \ubb34\ub2ac\uac00 \uc788\uc73c\uba70, \ub4b7\ub0a0\uac1c\ub294 \uac08\uc0c9\uc785\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uc218\ucef7 \uc57d 7.8~13.5mm, \uc554\ucef7 \uc57d 8.5~16.5mm',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_adult.jpg' \n },\n nymph: {\n title: '\uc57d\ucda9',\n description: '5\ub839\uae4c\uc9c0 \uc788\uc73c\uba70, \uac01 \uc601\uae30\ubcc4 \ubab8\uae38\uc774\ub294 1.0mm(1\ub839) ~ 7.1mm(5\ub839) \uc815\ub3c4\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c 4\ub839\uc740 \ub178\ub780\uc0c9, 5\ub839\uc740 \ud770\uc0c9\uc744 \ub760\uba70, 4~5\ub839\uc740 \uac00\uc2b4 \ub4b7\ubd80\ubd84\uc5d0 3\uc30d\uc758 \uac80\uc740\uc0c9 \ubc18\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uc57d 1.0~7.1mm',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_nymph.jpg'\n },\n egg: {\n title: '\uc54c',\n description: '\uc720\ubc31\uc0c9\uc758 \ubc25\uc54c \ud615\ud0dc\uc774\uba70 \uae38\uc774 1.24mm, \ud3ed 0.55mm \ud06c\uae30\uc785\ub2c8\ub2e4. 1\ub144\uc0dd \uac00\uc9c0 \uc218\ud53c\uc5d0 1.5~2.5cm \ud06c\uae30\uc758 \uc0c1\ucc98\ub97c \ub0b4\uace0 45\ub3c4 \uac01\ub3c4\ub85c \ub450 \uc904\ub85c \uc0b0\ub780\ud558\uba70, \ud1b1\ubc25\uacfc \ud770\uc0c9 \ubc00\ub0a9 \ubb3c\uc9c8\ub85c \ub36e\uc2b5\ub2c8\ub2e4. \ud558\ub098\uc758 \ub09c\uad34\uc5d0 15~30\uac1c \uc815\ub3c4\uc758 \uc54c\uc774 \uc788\uc2b5\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uae38\uc774 1.24mm, \ud3ed 0.55mm',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_egg.jpg'\n }\n };\n\n const damageData = {\n sap_sucking_stunt: {\n title: '\uc218\uc561 \ud761\uc999 \ubc0f \uc0dd\uc721 \uc800\ud574',\n description: '\uc57d\ucda9\uacfc \uc131\ucda9\uc774 \uc2dd\ubb3c\uccb4\ub85c\ubd80\ud130 \uc591\ubd84\uc744 \ud761\uc999\ud558\uc5ec \uc0dd\uc721\uc744 \uc800\ud574\ud569\ub2c8\ub2e4. \uac00\uc9c0\uc5d0 \ub09c \uc0c1\ucc98\ub85c \uc778\ud574 \uc591\ubd84\uacfc \uc218\ubd84 \uacf5\uae09\uc774 \uc6d0\ud65c\ud558\uc9c0 \ubabb\ud558\uac8c \ub418\uc5b4 \uac00\uc9c0\uac00 \ub9c8\ub974\uac70\ub098 \uc2ec\ud558\uba74 \ub9d0\ub77c\uc8fd\uc2b5\ub2c8\ub2e4.',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_sap_sucking_stunt.jpg' \/\/ Using a generic sap-sucking image, update if a specific one is found.\n },\n egg_laying_damage: {\n title: '\uc0b0\ub780\uc5d0 \uc758\ud55c \ubb3c\ub9ac\uc801 \ud53c\ud574',\n description: '1\ub144\uc0dd \uac00\uc9c0\uc758 \uc218\ud53c\uc5d0 1.5~2.5cm \ud06c\uae30\uc758 \uc0c1\ucc98\ub97c \ub0b8 \ud6c4 \uc54c\uc744 \ub0b3\ub294\ub370, \uc774 \uc0c1\ucc98\ub85c \uc778\ud574 \uac00\uc9c0 \uad75\uae30\uc758 30~50%\uac00 \uc190\uc0c1\ub429\ub2c8\ub2e4. \uac00\uc9c0\uac00 \uc57d\ud574\uc838 \uacfc\uc2e4\uc774 \uc5f4\ub9ac\uba74 \ubb34\uac8c\ub85c \uc778\ud574 \uac00\uc9c0\uac00 \ubd80\ub7ec\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uadf8\ub9bc 1 \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \uc804\ub144\ub3c4 \uc0b0\ub780\uc73c\ub85c \uace0\uc0ac\ud55c \ubc24\ub098\ubb34 \uac00\uc9c0 \ucc38\uace0)',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_egg_laying_damage.jpg' \/\/ Using image from provided PDF\n },\n sooty_mold: {\n title: '\uadf8\uc744\uc74c\ubcd1 \uc720\ubc1c',\n description: '\uc57d\ucda9\uacfc \uc131\ucda9\uc774 \uc999\uc561\uc744 \ube68\uc544\uba39\uace0 \ubd84\ube44\ud558\ub294 \uac10\ub85c(\ub2f9 \uc131\ubd84) \ub54c\ubb38\uc5d0 \uadf8\uc744\uc74c\ubcd1\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \ubbf8\uad00\uc744 \ud574\uce58\uace0 \uad11\ud569\uc131\uc744 \ubc29\ud574\ud569\ub2c8\ub2e4.',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_sooty_mold.jpg'\n }\n };\n \n const setupImageFallback = (imgElement) => {\n if (!imgElement) return;\n imgElement.onerror = () => {\n const altText = imgElement.alt || '\uc774\ubbf8\uc9c0 \ub85c\ub529 \uc2e4\ud328';\n const placeholderUrl = `https:\/\/placehold.co\/400x300\/e2e8f0\/4a5568?text=${encodeURIComponent(altText)}`;\n imgElement.src = placeholderUrl;\n imgElement.onerror = null;\n };\n };\n \n setupImageFallback(document.getElementById('morphology-main-image'));\n setupImageFallback(document.getElementById('damage-main-image'));\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 const morphologyMainImage = document.getElementById('morphology-main-image');\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 morphologyMainImage.src = data.image;\n morphologyMainImage.alt = `${data.title} \uc774\ubbf8\uc9c0`;\n }\n\n morphologyTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateMorphologyContent(button.dataset.type);\n });\n });\n updateMorphologyContent('adult'); \/\/ Initial content for morphology section\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 const damageMainImage = document.getElementById('damage-main-image');\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 damageMainImage.src = data.image;\n damageMainImage.alt = data.title;\n }\n\n damageTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateDamageContent(button.dataset.damageType);\n });\n });\n updateDamageContent('sap_sucking_stunt'); \/\/ Initial content for damage section\n\n const ctx = document.getElementById('controlChart').getContext('2d');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4', '7\uc6d4', '8\uc6d4', '9\uc6d4', '10\uc6d4'],\n datasets: [{\n label: '\uc57d\ucda9 \ud65c\ub3d9\uae30',\n data: [0, 8, 10, 8, 5, 0, 0, 0], \/\/ Peak April-May\n backgroundColor: 'rgba(249, 115, 22, 0.6)', \/* orange-500 *\/\n borderColor: 'rgba(249, 115, 22, 1)',\n borderWidth: 1,\n yAxisID: 'y',\n },{\n label: '\uc131\ucda9 \ud65c\ub3d9\uae30',\n data: [0, 0, 0, 5, 10, 8, 5, 2], \/\/ Peak July-Aug\n backgroundColor: 'rgba(234, 88, 12, 0.6)', \/* orange-600 *\/\n borderColor: 'rgba(234, 88, 12, 1)',\n borderWidth: 1,\n yAxisID: 'y',\n },{\n label: '\ubc29\uc81c \ucd94\ucc9c \uae30\uac04 (\uc57d\ucda9 \ub300\uc0c1)',\n data: [0, 12, 12, 0, 0, 0, 0, 0], \/\/ Late April-Early 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 \ud558\uc21c ~ 5\uc6d4 \uc911\uc21c`;\n }\n return ` ${context.dataset.label}: ${context.raw} (\ud65c\ub3d9 \ubc00\ub3c4)`;\n }\n }\n },\n title: {\n display: true,\n text: '\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \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\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"286\" data-id=\"2469\" src=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png\" alt=\"\" class=\"wp-image-2469\" srcset=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png 450w, https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9-300x191.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"395\" data-id=\"2468\" src=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9.jpg\" alt=\"\" class=\"wp-image-2468\" srcset=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9.jpg 450w, https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9-300x263.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n<\/figure>\n","protected":false},"featured_media":2469,"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":[112,153,128,136,152],"pest-category":[94,78],"pest-overwintering":[82],"class_list":["post-2467","pest","type-pest","status-publish","has-post-thumbnail","hentry","pest-target-112","pest-target-153","pest-target-128","pest-target-136","pest-target-152","pest-category-94","pest-category-78","pest-overwintering-egg"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"thumbnail":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9-150x150.png",150,150,true],"medium":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9-300x191.png",300,191,true],"medium_large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"1536x1536":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"2048x2048":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false]},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \ub300\ud654\ud615 \uac00\uc774\ub4dc \uac1c\uc694 \ud615\ud0dc \ud53c\ud574 \uc99d\uc0c1 \uc0dd\ud65c\uc0ac \ubc29\uc81c \ubc29\ubc95 \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9(Pochazia shantungensis)\uc774\ub780? \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \ub178\ub9b0\uc7ac\ubaa9 \ud070\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uacfc\uc5d0 \uc18d\ud558\ub294 \ub3cc\ubc1c\ud574\ucda9\uc785\ub2c8\ub2e4. \uc911\uad6d\uc774 \uc6d0\uc0b0\uc9c0\ub85c 2010\ub144 […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest\/2467","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\/2469"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2467"}],"wp:term":[{"taxonomy":"pest-target","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-target&post=2467"},{"taxonomy":"pest-category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-category&post=2467"},{"taxonomy":"pest-overwintering","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-overwintering&post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2467,"date":"2025-06-21T12:04:56","date_gmt":"2025-06-21T12:04:56","guid":{"rendered":"https:\/\/hstc.treecare.co.kr\/?post_type=pest&p=2467"},"modified":"2025-06-21T12:09:36","modified_gmt":"2025-06-21T12:09:36","slug":"%ea%b0%88%ec%83%89%eb%82%a0%ea%b0%9c%eb%a7%a4%eb%af%b8%ec%b6%a9","status":"publish","type":"pest","link":"https:\/\/hstc.treecare.co.kr\/?pest=%ea%b0%88%ec%83%89%eb%82%a0%ea%b0%9c%eb%a7%a4%eb%af%b8%ec%b6%a9","title":{"rendered":"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9"},"content":{"rendered":"\n\n\n\n \n \n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \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 }\n .nav-btn.active {\n background-color: #c2410c; \/* orange-700 *\/\n color: #fff7ed; \/* orange-50 *\/\n font-weight: 700;\n }\n .content-section {\n display: none;\n }\n .content-section.active {\n display: block;\n }\n .stage-btn.active, .damage-btn.active {\n background-color: #f97316; \/* orange-500 *\/\n color: white;\n font-weight: 600;\n transform: scale(1.05);\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n <div class=\"container mx-auto p-4 md:p-8\">\n \n\n\n <nav class=\"flex justify-center bg-gray-200 rounded-lg p-2 mb-8 shadow-sm\">\n <button data-tab=\"overview\" class=\"nav-btn active flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\uac1c\uc694<\/button>\n <button data-tab=\"morphology\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\ud615\ud0dc<\/button>\n <button data-tab=\"damage\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\ud53c\ud574 \uc99d\uc0c1<\/button>\n <button data-tab=\"ecology\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\uc0dd\ud65c\uc0ac<\/button>\n <button data-tab=\"control\" class=\"nav-btn flex-1 md:flex-none text-center py-2 px-4 rounded-md text-gray-700 hover:bg-orange-100\">\ubc29\uc81c \ubc29\ubc95<\/button>\n <\/nav>\n\n <main id=\"app-content\">\n \n \n <section id=\"overview\" class=\"content-section active space-y-6\">\n <div class=\"p-6 bg-white rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9(Pochazia shantungensis)\uc774\ub780?<\/h2>\n <p class=\"text-gray-700 leading-relaxed\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \ub178\ub9b0\uc7ac\ubaa9 \ud070\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uacfc\uc5d0 \uc18d\ud558\ub294 \ub3cc\ubc1c\ud574\ucda9\uc785\ub2c8\ub2e4. \uc911\uad6d\uc774 \uc6d0\uc0b0\uc9c0\ub85c 2010\ub144 \ucda9\ub0a8 \uc608\uc0b0\uad70\uacfc \uacf5\uc8fc\uc2dc\uc5d0\uc11c \ucd5c\ucd08 \ubc1c\uacac\ub41c \uc774\ud6c4 \uc804\uad6d\uc73c\ub85c \ud655\uc0b0 \uc911\uc5d0 \uc788\uc2b5\ub2c8\ub2e4. \ubc24\ub098\ubb34, \uac10\ub098\ubb34, \uc0b0\uc218\uc720, \ub54c\uc8fd\ub098\ubb34, \ub2e8\ud48d\ub098\ubb34 \ub4f1 62\uacfc 138\uc885\uc758 \ud65c\uc5fd\uc218\ub97c \uae30\uc8fc\uc2dd\ubb3c\ub85c \uc0bc\uc544 \ud070 \ud53c\ud574\ub97c \uc90d\ub2c8\ub2e4.\n <\/p>\n <\/div>\n <div class=\"p-6 bg-white rounded-lg shadow\">\n <h3 class=\"text-xl font-semibold text-orange-800 mb-3\">\uc8fc\uc694 \ud2b9\uc9d5<\/h3>\n <p class=\"text-gray-700 mb-4\">\n \uc57d\ucda9\uacfc \uc131\ucda9\uc774 \uc2dd\ubb3c\uccb4\ub85c\ubd80\ud130 \uc591\ubd84\uc744 \ud761\uc999\ud558\uba70, \ud2b9\ud788 \uc57d\ucda9 \uc2dc\uae30\uc5d0 \ud770\uc0c9 \uc641\uc2a4 \ubb3c\uc9c8\uc744 \ubd84\ube44\ud558\ub294 \uac83\uc774 \ud2b9\uc9d5\uc785\ub2c8\ub2e4. \ube60\ub978 \ud655\uc0b0\ub825\uc73c\ub85c \uc778\ud574 \uad11\ubc94\uc704\ud55c \uc9c0\uc5ed\uc5d0 \ud53c\ud574\ub97c \uc904 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ub0a8\ud55c\uc758 \uc11c\ucabd \uc9c0\uc5ed\uc5d0 \uc9d1\uc911 \ubd84\ud3ec\ud558\uace0 \uc788\uc73c\ub098, \ud5a5\ud6c4 \ubc1c\uc721\uc5d0 \uc801\ud569\ud55c \ud658\uacbd\uc744 \uac16\ub294 \ub3d9\ucabd \uc9c0\uc5ed\uc73c\ub85c\ub3c4 \uc810\ucc28 \ud655\uc0b0\ud560 \uac83\uc774\ub77c \uc608\uce21\ub429\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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \ubc1c\uc721\ub2e8\uacc4\ubcc4 \ud615\ud0dc\uc801 \ud2b9\uc9d5<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \uac01 \ubc1c\uc721 \ub2e8\uacc4\ub9c8\ub2e4 \ub3c5\ud2b9\ud55c \ud615\ud0dc\ub97c \uac00\uc9d1\ub2c8\ub2e4. \ud2b9\ud788 \uc57d\ucda9\uc758 \ud770\uc0c9 \uc641\uc2a4\uc9c8 \ubd84\ube44\ubb3c\uc774 \ub208\uc5d0 \ub755\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-type=\"adult\" class=\"stage-btn active text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc131\ucda9<\/button>\n <button data-type=\"nymph\" class=\"stage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc57d\ucda9<\/button>\n <button data-type=\"egg\" class=\"stage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc54c<\/button>\n <\/div>\n <div id=\"morphology-content\" class=\"md:flex md:items-center md:space-x-6 p-4 border border-gray-200 rounded-lg\">\n <img decoding=\"async\" id=\"morphology-main-image\" src=\"https:\/\/placehold.co\/400x300\/a3e635\/16a34a?text=\uc774\ubbf8\uc9c0\" alt=\"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \ud615\ud0dc \uc774\ubbf8\uc9c0\" class=\"w-full md:w-1\/2 rounded-lg shadow-md mb-4 md:mb-0\">\n <div id=\"morphology-text\" class=\"md:w-1\/2\">\n <h3 id=\"morphology-title\" class=\"text-xl font-semibold text-orange-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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \uc8fc\uc694 \ud53c\ud574 \ud2b9\uc131<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \ud53c\ud574\ub294 \ud761\uc999\uc5d0 \uc758\ud55c \uc9c1\uc811\uc801\uc778 \ud53c\ud574\uc640 \uc0b0\ub780\uc5d0 \uc758\ud55c \ubb3c\ub9ac\uc801 \ud53c\ud574\ub85c \ub098\ub269\ub2c8\ub2e4.\n <\/p>\n <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n <button data-damage-type=\"sap_sucking_stunt\" class=\"damage-btn active text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc218\uc561 \ud761\uc999 \ubc0f \uc0dd\uc721 \uc800\ud574<\/button>\n <button data-damage-type=\"egg_laying_damage\" class=\"damage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uc0b0\ub780\uc5d0 \uc758\ud55c \ubb3c\ub9ac\uc801 \ud53c\ud574<\/button>\n <button data-damage-type=\"sooty_mold\" class=\"damage-btn text-sm md:text-base py-2 px-4 bg-gray-200 rounded-full font-semibold shadow-sm transition-transform duration-200\">\uadf8\uc744\uc74c\ubcd1 \uc720\ubc1c<\/button>\n <\/div>\n <div id=\"damage-content\" class=\"md:flex md:items-center md:space-x-6 p-4 border border-gray-200 rounded-lg\">\n <img decoding=\"async\" id=\"damage-main-image\" src=\"https:\/\/placehold.co\/400x300\/e2e8f0\/334155?text=\ud53c\ud574+\uc774\ubbf8\uc9c0\" alt=\"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \ud53c\ud574 \uc774\ubbf8\uc9c0\" class=\"w-full md:w-1\/2 rounded-lg shadow-md mb-4 md:mb-0\">\n <div id=\"damage-text\" class=\"md:w-1\/2\">\n <h3 id=\"damage-title\" class=\"text-xl font-semibold text-orange-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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \uc0dd\ud0dc \ud2b9\uc131 (\uc5f0 1\ud68c \ubc1c\uc0dd)<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 1\ub144\uc5d0 1\uc138\ub300\ub9cc \ubc1c\uc0dd\ud558\uba70, \uc54c \uc0c1\ud0dc\ub85c \uc6d4\ub3d9\ud569\ub2c8\ub2e4. \uc54c\uc758 \ubc1c\uc721\uc601\uc810\uc628\ub3c4\ub294 12.1\u2103, \uc720\ud6a8\uc801\uc0b0\uc628\ub3c4\ub294 264.3\uc628\uc77c\ub3c4\uc785\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 rounded-lg\">\n <p class=\"font-semibold\">1. \uc6d4\ub3d9 (\uc54c)<\/p><p class=\"text-sm\">\uac00\uc9c0 \uc18d\uc5d0 \uc0b0\ub780\ub41c \uc54c \uc0c1\ud0dc\ub85c \uaca8\uc6b8\uc744 \uc9c0\ub0c4<\/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 rounded-lg\">\n <p class=\"font-semibold\">2. \uc57d\ucda9 \ubd80\ud654 \ubc0f \ud65c\ub3d9 (4\uc6d4 \ud558\uc21c ~ 5\uc6d4 \uc0c1\uc21c)<\/p><p class=\"text-sm\">\uc6d4\ub3d9 \uc54c\uc774 \ubd80\ud654\ud558\uc5ec 1\ub839 \uc57d\ucda9\uc774 \ub418\uace0, 4\ubc88 \ud0c8\ud53c\ud558\uc5ec 5\ub839 \uc57d\ucda9\uae4c\uc9c0 \uc131\uc7a5<\/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 rounded-lg\">\n <p class=\"font-semibold\">3. \uc131\ucda9 \uc6b0\ud654 (7\uc6d4 \uc911\uc21c ~ 8\uc6d4 \uc0c1\uc21c)<\/p><p class=\"text-sm\">\uc57d\ucda9\uc774 \uc131\ucda9\uc73c\ub85c \uc6b0\ud654\ud558\uc5ec \ud761\uc999 \uac00\ud574 \ubc0f \uc601\uc591 \ubcf4\ucda9<\/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 rounded-lg\">\n <p class=\"font-semibold\">4. \uc0b0\ub780 (8\uc6d4 \uc0c1\uc21c ~ 11\uc6d4 \uc911\uc21c)<\/p><p class=\"text-sm\">\uc131\ucda9\uc774 1\ub144\uc0dd \uac00\uc9c0 \uc218\ud53c\uc5d0 \uc0c1\ucc98\ub97c \ub0b4\uace0 \ub09c\uad34 \ud615\ud0dc\ub85c \uc54c\uc744 \ub0b3\uc544 \uc6d4\ub3d9 \uc900\ube44<\/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 rounded-lg shadow\">\n <h2 class=\"text-2xl font-bold text-orange-800 mb-4\">\ud6a8\uacfc\uc801\uc778 \ubc29\uc81c \ubc29\ubc95<\/h2>\n <p class=\"text-gray-700 leading-relaxed mb-6\">\n \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \ub3cc\ubc1c\ud574\ucda9\uc774\ubbc0\ub85c \ubc1c\uc0dd \ucd08\uae30\uc5d0 \uc2e0\uc18d\ud55c \ubc29\uc81c\uac00 \uc911\uc694\ud558\uba70, \uacfc\uc218\uc6d0 \ubc0f \uc8fc\ubcc0 \uc0b0\ub9bc\uc5d0 \ub300\ud55c \uacf5\ub3d9 \ubc29\uc81c\uac00 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4.\n <\/p>\n <div class=\"space-y-4\">\n <div class=\"p-4 border border-red-200 bg-red-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-red-800 mb-2\">\u203b \uc0b0\ub9bc \uc9c0\uc5ed \ud654\ud559\uc801 \ubc29\uc81c\ub294 \uc5b4\ub824\uc6c0<\/h3>\n <p class=\"text-gray-700\">\uc0b0\ub9bc\uc740 \ubc29\uc81c \ubc94\uc704\uac00 \uad11\ubc94\uc704\ud558\uace0 \ub18d\uc57d\uc774 \ub4f1\ub85d\ub418\uc9c0 \uc54a\uc740 \uae30\uc8fc\uc2dd\ubb3c \ub4f1\uc774 \uc874\uc7ac\ud558\uc5ec \ud654\ud559\uc801 \ubc29\uc81c\ubc95 \uc801\uc6a9\uc774 \uc5b4\ub835\uc2b5\ub2c8\ub2e4.<\/p>\n <\/div>\n <div class=\"p-4 border border-blue-200 bg-blue-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-blue-800 mb-2\">\u2460 \ubb3c\ub9ac\uc801 \ubc29\uc81c<\/h3>\n <ul class=\"list-disc list-inside text-gray-700\">\n <li><strong>\uc54c\uc774 \uc0b0\ub780\ub41c \uac00\uc9c0 \uc81c\uac70:<\/strong> \uaca8\uc6b8\ucca0(12\uc6d4~\uc774\ub4ec\ud574 3\uc6d4)\uc5d0 \ub09c\uad34\uac00 \ubd99\uc740 1\ub144\uc0dd \uac00\uc9c0\ub97c \uc804\uc815\ud558\uc5ec \uc81c\uac70\ud558\uba74 \ubd80\ud654\uc728\uc744 \ub0ae\ucd9c \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\u203b \uacfc\uc218\uc758 \uacbd\uc6b0 \uacfc\uc2e4 \uc0dd\uc0b0\uc5d0 \ubb38\uc81c \ubc1c\uc0dd \uac00\ub2a5\uc131 \uc8fc\uc758)<\/li>\n <li><strong>\ud669\uc0c9 \uc810\ucc29 \ud2b8\ub7a9:<\/strong> \uc77c\ubd80 \ub18d\uc791\ubb3c\uc5d0\uc11c \uc131\ucda9 \ud3ec\ud68d \ud6a8\uacfc\uac00 \ud655\uc778\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/li>\n <li><strong>\ud2b8\ub7a9\uc2dd\ubb3c (\ud574\ubc14\ub77c\uae30) \uc774\uc6a9:<\/strong> \uc0b0\ub780 \uc804 \uc131\ucda9\uc744 \uc720\uc778\ud558\uc5ec \ubc29\uc81c\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n <li><strong>\ucef4\ud329\ud2b8\ub7a8\ud504 \ub4f1 \uc720\uc778 \ud3ec\ud68d \uc7a5\uce58:<\/strong> \ub192\uc740 \ud6a8\uc728\uc131\uc73c\ub85c \uc131\ucda9\uc744 \ub300\ub7c9 \ud3ec\ud68d\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li>\n <\/ul>\n <\/div>\n <div class=\"p-4 border border-green-200 bg-green-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-green-800 mb-2\">\u2461 \ud654\ud559\uc801 \ubc29\uc81c (1\ub839 \uc57d\ucda9 \uc2dc\uae30 \ucd5c\uc801)<\/h3>\n <p class=\"text-gray-700 mb-2\">\ub09c\uad34 \ubc00\ub3c4 \uc870\uc0ac\ub97c \ud1b5\ud574 \ubc00\ub3c4\uac00 \ub192\uc740 \uc9c0\uc5ed\uc5d0 \ub300\ud574 \uc0b0\ub780 \uac00\uc9c0 \uc81c\uac70 \ud6c4, 1\ub839 \uc57d\ucda9\uc774 \ubd80\ud654\ud558\ub294 \uc2dc\uae30(<strong>4\uc6d4 \ud558\uc21c ~ 5\uc6d4 \uc911\uc21c<\/strong>)\uc5d0 \ub9de\ucdb0 \uc0b4\ucda9\uc81c\ub97c \uc9d1\uc911 \uc0b4\ud3ec\ud558\ub294 \uac83\uc774 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.<\/p>\n <p class=\"text-gray-700\">\uc0ac\uc6a9 \uac00\ub2a5\ud55c \ub18d\uc57d \uc815\ubcf4\ub294 \ub18d\ucd0c\uc9c4\ud765\uccad \ub18d\uc57d\uc815\ubcf4\uc11c\ube44\uc2a4(www.pis.rda.go.kr) \ub610\ub294 \ub18d\uc0ac\ub85c(www.nongsaro.go.kr)\uc5d0\uc11c \ud655\uc778\ud558\uc2ed\uc2dc\uc624.<\/p>\n <\/div>\n <div class=\"p-4 border border-yellow-200 bg-yellow-50 rounded-lg\">\n <h3 class=\"text-xl font-semibold text-yellow-800 mb-2\">\u2462 \uc0dd\ubb3c\uc801 \ubc29\uc81c<\/h3>\n <p class=\"text-gray-700\">\uc54c \uae30\uc0dd\ubc8c\uc778 \uac80\uc815\uc54c\ubc8c\ub958 \ub4f1\uc5d0 \uc758\ud574 \ubd80\ud654\uc728\uc774 \ub0ae\uc544\uc9c4\ub2e4\ub294 \ubcf4\uace0\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ucc9c\uc801\uc744 \ubcf4\ud638\ud558\uace0 \ud65c\uc6a9\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"p-6 bg-white rounded-lg shadow\">\n <h3 class=\"text-xl font-semibold text-orange-800 mb-4 text-center\">\uc8fc\uc694 \ud65c\ub3d9 \uc2dc\uae30 \ubc0f \ubc29\uc81c \uc801\uae30 (1\ub839 \uc57d\ucda9 \ub300\uc0c1)<\/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-12 pt-4 border-t border-gray-200\">\n <p class=\"text-sm text-gray-500\">\uc815\ubcf4 \ucd9c\ucc98: \uad6d\ub9bd\uc0b0\ub9bc\uacfc\ud559\uc6d0, \uc0b0\ub9bc\uccad, \ub18d\ucd0c\uc9c4\ud765\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 adult: {\n title: '\uc131\ucda9',\n description: '\ubab8\uae38\uc774 \uc218\ucef7 7.8~8.2mm, \uc554\ucef7 8.5~9.0mm. \uc55e\ub0a0\uac1c \ub05d\uae4c\uc9c0 \uae38\uc774\ub294 \uc218\ucef7 13.0~13.5mm, \uc554\ucef7 15.5~16.5mm. \uc55e\ub0a0\uac1c\ub294 \ud68c\uac08\uc0c9 \ubc14\ud0d5\uc5d0 \uc9d9\uc740 \uac08\uc0c9 \ubb34\ub2ac\uac00 \uc788\uc73c\uba70, \ub4b7\ub0a0\uac1c\ub294 \uac08\uc0c9\uc785\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uc218\ucef7 \uc57d 7.8~13.5mm, \uc554\ucef7 \uc57d 8.5~16.5mm',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_adult.jpg' \n },\n nymph: {\n title: '\uc57d\ucda9',\n description: '5\ub839\uae4c\uc9c0 \uc788\uc73c\uba70, \uac01 \uc601\uae30\ubcc4 \ubab8\uae38\uc774\ub294 1.0mm(1\ub839) ~ 7.1mm(5\ub839) \uc815\ub3c4\uc785\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c 4\ub839\uc740 \ub178\ub780\uc0c9, 5\ub839\uc740 \ud770\uc0c9\uc744 \ub760\uba70, 4~5\ub839\uc740 \uac00\uc2b4 \ub4b7\ubd80\ubd84\uc5d0 3\uc30d\uc758 \uac80\uc740\uc0c9 \ubc18\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uc57d 1.0~7.1mm',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_nymph.jpg'\n },\n egg: {\n title: '\uc54c',\n description: '\uc720\ubc31\uc0c9\uc758 \ubc25\uc54c \ud615\ud0dc\uc774\uba70 \uae38\uc774 1.24mm, \ud3ed 0.55mm \ud06c\uae30\uc785\ub2c8\ub2e4. 1\ub144\uc0dd \uac00\uc9c0 \uc218\ud53c\uc5d0 1.5~2.5cm \ud06c\uae30\uc758 \uc0c1\ucc98\ub97c \ub0b4\uace0 45\ub3c4 \uac01\ub3c4\ub85c \ub450 \uc904\ub85c \uc0b0\ub780\ud558\uba70, \ud1b1\ubc25\uacfc \ud770\uc0c9 \ubc00\ub0a9 \ubb3c\uc9c8\ub85c \ub36e\uc2b5\ub2c8\ub2e4. \ud558\ub098\uc758 \ub09c\uad34\uc5d0 15~30\uac1c \uc815\ub3c4\uc758 \uc54c\uc774 \uc788\uc2b5\ub2c8\ub2e4.',\n size: '\ud06c\uae30: \uae38\uc774 1.24mm, \ud3ed 0.55mm',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_egg.jpg'\n }\n };\n\n const damageData = {\n sap_sucking_stunt: {\n title: '\uc218\uc561 \ud761\uc999 \ubc0f \uc0dd\uc721 \uc800\ud574',\n description: '\uc57d\ucda9\uacfc \uc131\ucda9\uc774 \uc2dd\ubb3c\uccb4\ub85c\ubd80\ud130 \uc591\ubd84\uc744 \ud761\uc999\ud558\uc5ec \uc0dd\uc721\uc744 \uc800\ud574\ud569\ub2c8\ub2e4. \uac00\uc9c0\uc5d0 \ub09c \uc0c1\ucc98\ub85c \uc778\ud574 \uc591\ubd84\uacfc \uc218\ubd84 \uacf5\uae09\uc774 \uc6d0\ud65c\ud558\uc9c0 \ubabb\ud558\uac8c \ub418\uc5b4 \uac00\uc9c0\uac00 \ub9c8\ub974\uac70\ub098 \uc2ec\ud558\uba74 \ub9d0\ub77c\uc8fd\uc2b5\ub2c8\ub2e4.',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_sap_sucking_stunt.jpg' \/\/ Using a generic sap-sucking image, update if a specific one is found.\n },\n egg_laying_damage: {\n title: '\uc0b0\ub780\uc5d0 \uc758\ud55c \ubb3c\ub9ac\uc801 \ud53c\ud574',\n description: '1\ub144\uc0dd \uac00\uc9c0\uc758 \uc218\ud53c\uc5d0 1.5~2.5cm \ud06c\uae30\uc758 \uc0c1\ucc98\ub97c \ub0b8 \ud6c4 \uc54c\uc744 \ub0b3\ub294\ub370, \uc774 \uc0c1\ucc98\ub85c \uc778\ud574 \uac00\uc9c0 \uad75\uae30\uc758 30~50%\uac00 \uc190\uc0c1\ub429\ub2c8\ub2e4. \uac00\uc9c0\uac00 \uc57d\ud574\uc838 \uacfc\uc2e4\uc774 \uc5f4\ub9ac\uba74 \ubb34\uac8c\ub85c \uc778\ud574 \uac00\uc9c0\uac00 \ubd80\ub7ec\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. (\uadf8\ub9bc 1 \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc758 \uc804\ub144\ub3c4 \uc0b0\ub780\uc73c\ub85c \uace0\uc0ac\ud55c \ubc24\ub098\ubb34 \uac00\uc9c0 \ucc38\uace0)',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_egg_laying_damage.jpg' \/\/ Using image from provided PDF\n },\n sooty_mold: {\n title: '\uadf8\uc744\uc74c\ubcd1 \uc720\ubc1c',\n description: '\uc57d\ucda9\uacfc \uc131\ucda9\uc774 \uc999\uc561\uc744 \ube68\uc544\uba39\uace0 \ubd84\ube44\ud558\ub294 \uac10\ub85c(\ub2f9 \uc131\ubd84) \ub54c\ubb38\uc5d0 \uadf8\uc744\uc74c\ubcd1\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774\ub85c \uc778\ud574 \ubbf8\uad00\uc744 \ud574\uce58\uace0 \uad11\ud569\uc131\uc744 \ubc29\ud574\ud569\ub2c8\ub2e4.',\n image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/pochazia_shantungensis_sooty_mold.jpg'\n }\n };\n \n const setupImageFallback = (imgElement) => {\n if (!imgElement) return;\n imgElement.onerror = () => {\n const altText = imgElement.alt || '\uc774\ubbf8\uc9c0 \ub85c\ub529 \uc2e4\ud328';\n const placeholderUrl = `https:\/\/placehold.co\/400x300\/e2e8f0\/4a5568?text=${encodeURIComponent(altText)}`;\n imgElement.src = placeholderUrl;\n imgElement.onerror = null;\n };\n };\n \n setupImageFallback(document.getElementById('morphology-main-image'));\n setupImageFallback(document.getElementById('damage-main-image'));\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 const morphologyMainImage = document.getElementById('morphology-main-image');\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 morphologyMainImage.src = data.image;\n morphologyMainImage.alt = `${data.title} \uc774\ubbf8\uc9c0`;\n }\n\n morphologyTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateMorphologyContent(button.dataset.type);\n });\n });\n updateMorphologyContent('adult'); \/\/ Initial content for morphology section\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 const damageMainImage = document.getElementById('damage-main-image');\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 damageMainImage.src = data.image;\n damageMainImage.alt = data.title;\n }\n\n damageTypeButtons.forEach(button => {\n button.addEventListener('click', () => {\n updateDamageContent(button.dataset.damageType);\n });\n });\n updateDamageContent('sap_sucking_stunt'); \/\/ Initial content for damage section\n\n const ctx = document.getElementById('controlChart').getContext('2d');\n new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4', '7\uc6d4', '8\uc6d4', '9\uc6d4', '10\uc6d4'],\n datasets: [{\n label: '\uc57d\ucda9 \ud65c\ub3d9\uae30',\n data: [0, 8, 10, 8, 5, 0, 0, 0], \/\/ Peak April-May\n backgroundColor: 'rgba(249, 115, 22, 0.6)', \/* orange-500 *\/\n borderColor: 'rgba(249, 115, 22, 1)',\n borderWidth: 1,\n yAxisID: 'y',\n },{\n label: '\uc131\ucda9 \ud65c\ub3d9\uae30',\n data: [0, 0, 0, 5, 10, 8, 5, 2], \/\/ Peak July-Aug\n backgroundColor: 'rgba(234, 88, 12, 0.6)', \/* orange-600 *\/\n borderColor: 'rgba(234, 88, 12, 1)',\n borderWidth: 1,\n yAxisID: 'y',\n },{\n label: '\ubc29\uc81c \ucd94\ucc9c \uae30\uac04 (\uc57d\ucda9 \ub300\uc0c1)',\n data: [0, 12, 12, 0, 0, 0, 0, 0], \/\/ Late April-Early 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 \ud558\uc21c ~ 5\uc6d4 \uc911\uc21c`;\n }\n return ` ${context.dataset.label}: ${context.raw} (\ud65c\ub3d9 \ubc00\ub3c4)`;\n }\n }\n },\n title: {\n display: true,\n text: '\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \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\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"286\" data-id=\"2469\" src=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png\" alt=\"\" class=\"wp-image-2469\" srcset=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png 450w, https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9-300x191.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"395\" data-id=\"2468\" src=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9.jpg\" alt=\"\" class=\"wp-image-2468\" srcset=\"https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9.jpg 450w, https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9-300x263.jpg 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n<\/figure>\n","protected":false},"featured_media":2469,"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":[112,153,128,136,152],"pest-category":[94,78],"pest-overwintering":[82],"class_list":["post-2467","pest","type-pest","status-publish","has-post-thumbnail","hentry","pest-target-112","pest-target-153","pest-target-128","pest-target-136","pest-target-152","pest-category-94","pest-category-78","pest-overwintering-egg"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"thumbnail":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9-150x150.png",150,150,true],"medium":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9-300x191.png",300,191,true],"medium_large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"1536x1536":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false],"2048x2048":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/450px-\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9_\uc131\ucda9.png",450,286,false]},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"\uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9 \ub300\ud654\ud615 \uac00\uc774\ub4dc \uac1c\uc694 \ud615\ud0dc \ud53c\ud574 \uc99d\uc0c1 \uc0dd\ud65c\uc0ac \ubc29\uc81c \ubc29\ubc95 \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9(Pochazia shantungensis)\uc774\ub780? \uac08\uc0c9\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uc740 \ub178\ub9b0\uc7ac\ubaa9 \ud070\ub0a0\uac1c\ub9e4\ubbf8\ucda9\uacfc\uc5d0 \uc18d\ud558\ub294 \ub3cc\ubc1c\ud574\ucda9\uc785\ub2c8\ub2e4. \uc911\uad6d\uc774 \uc6d0\uc0b0\uc9c0\ub85c 2010\ub144 […]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest\/2467","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\/2469"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2467"}],"wp:term":[{"taxonomy":"pest-target","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-target&post=2467"},{"taxonomy":"pest-category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-category&post=2467"},{"taxonomy":"pest-overwintering","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-overwintering&post=2467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}