{"id":3136,"date":"2025-06-29T10:15:54","date_gmt":"2025-06-29T10:15:54","guid":{"rendered":"https:\/\/hstc.treecare.co.kr\/?post_type=pest&#038;p=3136"},"modified":"2025-06-29T12:46:05","modified_gmt":"2025-06-29T12:46:05","slug":"%eb%b2%9a%eb%82%98%eb%ac%b4-%eb%b9%97%ec%9e%90%eb%a3%a8%eb%b3%91","status":"publish","type":"pest","link":"https:\/\/hstc.treecare.co.kr\/?pest=%eb%b2%9a%eb%82%98%eb%ac%b4-%eb%b9%97%ec%9e%90%eb%a3%a8%eb%b3%91","title":{"rendered":"\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1 \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&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Chosen Palette: Cherry Blossom Pink & Green -->\n    <!-- Application Structure Plan: The SPA for Cherry Witches' Broom is structured into five core sections: '\uac1c\uc694' (Overview), '\ubcd1\uc6d0\uade0 \ud615\ud0dc' (Pathogen Morphology), '\ud53c\ud574 \uc99d\uc0c1' (Damage Symptoms), '\uc0dd\ud65c\uc0ac' (Lifecycle), and '\ubc29\uc81c \ubc29\ubc95' (Control Methods). This logical flow supports comprehensive understanding from identification to management. '\ubcd1\uc6d0\uade0 \ud615\ud0dc' and '\ud53c\ud574 \uc99d\uc0c1' sections use interactive elements (buttons) to highlight different pathogen forms\/host symptoms. '\uc0dd\ud65c\uc0ac' includes a detailed flowchart to visualize its life cycle. '\ubc29\uc81c \ubc29\ubc95' incorporates a Chart.js visualization to illustrate optimal control timings, primarily focusing on preventative spraying and physical removal. -->\n    <!-- Visualization & Content Choices: \n        1. Report Info: Pathogen Morphology (Mycelium, Ascus\/Ascospores, Budding spores\/Conidia) -> Goal: Inform & Identify -> Viz\/Method: Interactive image gallery with buttons for '\uade0\uc0ac (\uc870\uc9c1 \ub0b4)', '\uc790\ub0ad\uce35\/\uc790\ub0ad\/\uc790\ub0ad\ud3ec\uc790', '\ucd9c\uc544\ud3ec\uc790 (\ubd84\uc0dd\ud3ec\uc790)' -> Interaction: Clicking buttons updates image and descriptive text for pathogen structures. -> Justification: As a fungal disease, showing its various microscopic structures (especially spore types) is important for understanding. -> Library: Vanilla JS.\n        2. Report Info: Damage Symptoms (Witches' broom formation, Leaf yellowing\/browning, Premature defoliation, No flowering, Branch dieback) -> Goal: Inform & Diagnose -> Viz\/Method: Interactive image gallery with buttons for '\ube57\uc790\ub8e8\ubcd1 \ubcd1\uc9d5 (\ucd1d\uc0dd\/\uaf43 \uc5c6\uc74c)', '\uc78e \ubcc0\uc0c9 \ubc0f \ub4a4\ud2c0\ub9bc', '\uac00\uc9c0 \uace0\uc0ac' -> Interaction: Clicking buttons updates image and descriptive text. Clearly shows the progressive and diagnostic symptoms across the tree. -> Justification: The varied and progressive nature of disease symptoms, especially the characteristic \"witches' broom,\" needs clear visual differentiation. -> Library: Vanilla JS.\n        3. Report Info: Lifecycle (Fungus overwintering in buds\/branches, Spore dispersal, Infection, Perennial disease leading to branch dieback) -> Goal: Organize & Show Change -> Viz\/Method: Detailed HTML\/CSS vertical flowchart -> Interaction: Static visual aid -> Justification: Visualizing the disease cycle with overwintering, infection pathways, and long-term impact is essential for understanding disease progression and identifying intervention points. -> Library: HTML\/Tailwind.\n        4. Report Info: Control Timing (Removal of infected branches, Preventative spraying in early spring\/after flowering) -> Goal: Inform & Guide -> Viz\/Method: Bar Chart -> Interaction: Hover tooltips -> Justification: The chart clearly illustrates the primary periods for physical removal and chemical intervention, aligning with the critical stages of the disease progression. -> Library: Chart.js.\n    -->\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\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: #be123c !important; \/* rose-700 *\/\n            color: #fff1f2 !important; \/* rose-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: #f43f5e; \/* rose-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            <!-- \ubcd1\ud574\ucda9\uba85\uacfc \ud559\uba85 \uc81c\uac70\ub428 -->\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-rose-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-rose-100\">\ubcd1\uc6d0\uade0 \ud615\ud0dc<\/button>\n            <button data-tab=\"damage\" class=\"nav-btn flex-1 text-center py-2 px-4 text-gray-700 hover:bg-rose-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-rose-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-rose-100\">\ubc29\uc81c \ubc29\ubc95<\/button>\n        <\/nav>\n\n        <main id=\"app-content\" class=\"p-2 md:p-2\">\n            \n            <!-- \uac1c\uc694 Section -->\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-rose-800 mb-4\">\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1 (Witches&#8217; Broom)\uc774\ub780?<\/h2>\n                    <p class=\"text-gray-700 leading-relaxed\">\n                        \ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc740 <i>Taphrina wiesneri<\/i> \uacf0\ud321\uc774\uc5d0 \uc758\ud574 \ubc1c\uc0dd\ud558\ub294 \ubc9a\ub098\ubb34\uc758 \uac00\uc7a5 \uc911\uc694\ud55c \ubcd1\uc785\ub2c8\ub2e4. \ubcd1\uc5d0 \uac78\ub9b0 \uac00\uc9c0\uc5d0\uc11c \uc794\uac00\uc9c0\uc640 \uc791\uc740 \uc78e\uc774 \ubb34\ub354\uae30\ub85c \ube7d\ube7d\ud558\uac8c \uc790\ub77c\ub098\uc640 \ub9c8\uce58 \ube57\uc790\ub8e8\ub098 \ucee4\ub2e4\ub780 \uc0c8 \ub465\uc9c0\ucc98\ub7fc \ubcf4\uc774\uba70, \uaf43\uc774 \ud53c\uc9c0 \uc54a\uace0 \uc78e\uc774 \ubcc0\uc0c9\ub418\uba74\uc11c \ub9d0\ub77c \uc8fd\ub294 \uac83\uc774 \ud2b9\uc9d5\uc785\ub2c8\ub2e4. \uc804\uad6d \uac01\uc9c0\uc5d0\uc11c \ubc1c\uc0dd\ud558\uba70 \ud2b9\ud788 \uc655\ubc9a\ub098\ubb34\uc5d0\uc11c \ud53c\ud574\uac00 \ud06c\uace0, \ubc9a\ub098\ubb34 \uba85\uc18c\uc758 \ud669\ud3d0\ud654\uc5d0\ub3c4 \uc601\ud5a5\uc744 \ubbf8\uce69\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> \ub208\uacfc \uac00\uc9c0\uc758 \uc870\uc9c1 \ub0b4 \uade0\uc0ac \uc0c1\ud0dc \ub610\ub294 \ud45c\uba74\uc5d0 \ubd99\uc740 \ud3ec\uc790 \uc0c1\ud0dc\ub85c \uc6d4\ub3d9<\/li>\n                        <li><strong>\ubc1c\uc0dd \ud69f\uc218:<\/strong> \uc5f0 1\ud68c (\ub2e4\ub144\uc0dd \ubcd1\uc73c\ub85c \ub9e4\ub144 \ubcd1\ub465\uc9c0\uac00 \ucee4\uc9c0\uace0 \uc218\uac00 \ub298\uc5b4\ub0a8)<\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"p-6 bg-white\">\n                    <h3 class=\"text-xl font-semibold text-rose-800 mb-3\">\ubcd1\uc6d0\uade0 \ubc0f \uc8fc\uc694 \uac00\ud574 \uc218\uc885<\/h3>\n                    <p class=\"text-gray-700 mb-4\">\n                        \ubcd1\uc6d0\uade0\uc740 \uc790\ub0ad\uade0\ub958\uc778 <i>Taphrina wiesneri<\/i>\uc785\ub2c8\ub2e4. \uc774 \ubcd1\uc6d0\uade0\uc740 \uc138\ud3ec \uc0dd\uc7a5\uc744 \ucd09\uc9c4\ud558\ub294 \uc625\uc2e0(auxin)\uacfc \uc138\ud3ec \ubd84\uc5f4\uc5d0 \uad00\uc5ec\ud558\ub294 \uc0ac\uc774\ud1a0\ud0a4\ub2cc(cytokinin)\uc744 \uc0dd\uc0b0\ud558\uc5ec \uc2dd\ubb3c\uccb4\uc5d0 \uc774\uc0c1 \uc99d\uc0c1\uc744 \uc77c\uc73c\ud0a4\ub294 \uac83\uc73c\ub85c \uc54c\ub824\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uacfc\uac70 \ud30c\uc774\ud1a0\ud50c\ub77c\uc2a4\ub9c8\ub098 \ubc14\uc774\ub7ec\uc2a4\ub85c \uc798\ubabb \uc54c\ub824\uc838 \ud56d\uc0dd\uc81c\ub85c \ubc29\uc81c\ud558\ub294 \uacbd\uc6b0\uac00 \uc788\uc5c8\uc73c\ub098, \uc774\ub294 \uc9c4\uade0\uc5d0 \uc758\ud55c \ubcd1\uc785\ub2c8\ub2e4.\n                    <\/p>\n                    <p class=\"text-gray-700\">\uc8fc\uc694 \uae30\uc8fc\uc2dd\ubb3c\uc740 <strong>\ubc9a\ub098\ubb34\ub958<\/strong>\uc774\uba70, \ud2b9\ud788 <strong>\uc655\ubc9a\ub098\ubb34<\/strong>\uc5d0 \ud53c\ud574\uac00 \uc2ec\ud569\ub2c8\ub2e4. \uc5b4\ub9b0 \ub098\ubb34\uc640 \ud070 \ub098\ubb34 \ubaa8\ub450\uc5d0\uc11c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/p>\n                <\/div>\n            <\/section>\n\n            <!-- \ubcd1\uc6d0\uade0 \ud615\ud0dc Section -->\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-rose-800 mb-4\">\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1 \ubcd1\uc6d0\uade0\uc758 \ud615\ud0dc\uc801 \ud2b9\uc9d5<\/h2>\n                    <p class=\"text-gray-700 leading-relaxed mb-6\">\n                        \ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc744 \uc77c\uc73c\ud0a4\ub294 \uacf0\ud321\uc774\ub294 \uc8fc\ub85c \uc78e \ub4b7\uba74\uc5d0 \ud770 \uac00\ub8e8 \ud615\ud0dc\uc758 \uc790\ub0ad\uce35\uc744 \ud615\uc131\ud558\uba70, \ubbf8\uc138\ud55c \ud3ec\uc790\ub97c \uac00\uc9d1\ub2c8\ub2e4.\n                    <\/p>\n                    <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n                        <button data-type=\"naked_ascus_layer\" class=\"stage-btn active flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ub098\ucd9c\ub41c \uc790\ub0ad\uce35 (\ud770\uc0c9 \uac00\ub8e8)<\/button>\n                        <button data-type=\"ascus_ascospore\" class=\"stage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uc790\ub0ad \ubc0f \uc790\ub0ad\ud3ec\uc790<\/button>\n                        <button data-type=\"budding_spore\" class=\"stage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ucd9c\uc544\ud3ec\uc790 (\ubd84\uc0dd\ud3ec\uc790)<\/button>\n                    <\/div>\n                    <div id=\"morphology-content\" class=\"md:flex md:items-center md:space-x-6 p-4\">\n                        <img decoding=\"async\" id=\"morphology-main-image\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\" alt=\"\" class=\"w-full md:w-1\/2 hidden\"> <!-- Removed image source, added hidden class -->\n                        <div id=\"morphology-text\" class=\"w-full\">\n                            <h3 id=\"morphology-title\" class=\"text-xl font-semibold text-rose-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            <!-- \ud53c\ud574 \uc99d\uc0c1 Section -->\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-rose-800 mb-4\">\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc758 \uc8fc\uc694 \ud53c\ud574 \uc99d\uc0c1<\/h2>\n                    <p class=\"text-gray-700 leading-relaxed mb-6\">\n                        \ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc740 \uac00\uc9c0\uc758 \ube44\uc815\uc0c1\uc801\uc778 \uc0dd\uc7a5\uacfc \uc78e, \uaf43\uc758 \ubcc0\ud654, \uadf8\ub9ac\uace0 \uac00\uc9c0 \uace0\uc0ac\ub85c \uc774\uc5b4\uc9c0\ub294 \ud2b9\uc9d5\uc801\uc778 \uc99d\uc0c1\uc744 \ubcf4\uc785\ub2c8\ub2e4.\n                    <\/p>\n                    <div class=\"flex flex-wrap justify-center gap-2 md:gap-4 mb-6\">\n                        <button data-damage-type=\"witches_broom\" class=\"damage-btn active flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\ube57\uc790\ub8e8 \ud615\ud0dc (\uc794\uac00\uc9c0 \ucd1d\uc0dd\/\uaf43 \uc5c6\uc74c)<\/button>\n                        <button data-damage-type=\"leaf_discoloration_distortion\" class=\"damage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uc78e \ubcc0\uc0c9 \ubc0f \ub4a4\ud2c0\ub9bc<\/button>\n                        <button data-damage-type=\"branch_dieback\" class=\"damage-btn flex-1 text-sm md:text-base py-2 px-4 bg-gray-200 font-semibold transition-transform duration-200\">\uac00\uc9c0 \uace0\uc0ac \ubc0f \ud669\ud3d0\ud654<\/button>\n                    <\/div>\n                    <div id=\"damage-content\" class=\"md:flex md:items-center md:space-x-6 p-4\">\n                        <img decoding=\"async\" id=\"damage-main-image\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\" alt=\"\" class=\"w-full md:w-1\/2 hidden\"> <!-- Removed image source, added hidden class -->\n                        <div id=\"damage-text\" class=\"w-full\">\n                            <h3 id=\"damage-title\" class=\"text-xl font-semibold text-rose-700 mb-2\"><\/h3>\n                            <p id=\"damage-description\" class=\"text-gray-700\"><\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- \uc0dd\ud65c\uc0ac Section -->\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-rose-800 mb-4\">\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc758 \uc0dd\ud65c\uc0ac \ubc0f \uc804\ud30c \uacfc\uc815<\/h2>\n                     <p class=\"text-gray-700 leading-relaxed mb-6\">\n                        \ubcd1\uc6d0\uade0\uc740 \uc8fc\ub85c \ub208\uacfc \uac00\uc9c0 \uc870\uc9c1 \ub0b4\uc5d0\uc11c \uade0\uc0ac \ud615\ud0dc\ub85c \uc6d4\ub3d9\ud558\uba70, \ud3ec\uc790\ub294 \ubc14\ub78c \ub4f1\uc5d0 \uc758\ud574 \uc804\ud30c\ub429\ub2c8\ub2e4. \uc790\uc138\ud55c \uc804\uc5fc\uacbd\ub85c\ub294 \uc544\uc9c1 \uc644\uc804\ud788 \ubc1d\ud600\uc9c0\uc9c0 \uc54a\uc558\uc2b5\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. \uc6d4\ub3d9 (\uade0\uc0ac \ubc0f \ud3ec\uc790)<\/p><p class=\"text-sm\">\ub208\uacfc \uac00\uc9c0 \uc870\uc9c1 \ub0b4 \uade0\uc0ac \uc0c1\ud0dc, \ub610\ub294 \ub208\/\uac00\uc9c0 \ud45c\uba74\uc5d0 \ud3ec\uc790 \uc0c1\ud0dc\ub85c \uaca8\uc6b8\uc744 \ubcf4\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\">\n                            <p class=\"font-semibold\">2. \ubcd1\uc9d5 \ubc1c\ud604 \ubc0f \ud3ec\uc790 \ud615\uc131 (\uc774\ub978 \ubd04 ~ 5\uc6d4 \uc911\uc21c)<\/p><p class=\"text-sm\">\uac00\uc9c0\uc758 \ube44\ub300 \ubd80\uc704\uc5d0\uc11c \uc794\uac00\uc9c0 \ucd1d\uc0dd \uc2dc\uc791. \ubcd1\ub4e0 \uc78e \ub4b7\uba74\uc5d0 \ud68c\ubc31\uc0c9 \uac00\ub8e8(\uc790\ub0ad\uce35) \ub098\ud0c0\ub0a8. \uc790\ub0ad \ub0b4 \uc790\ub0ad\ud3ec\uc790 \ud615\uc131 \ubc0f \ubc29\ucd9c<\/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. \uc78e \ubcc0\uc0c9 \ubc0f \uace0\uc0ac (4\uc6d4 \ud558\uc21c ~ 5\uc6d4 \uc911\uc21c)<\/p><p class=\"text-sm\">\ubcd1\ub465\uc9c0 \uc78e\uc774 \uac08\uc0c9~\ud751\uac08\uc0c9\uc73c\ub85c \ubcc0\ud558\uace0 \uc624\uadf8\ub77c\ub4e4\uba74\uc11c \ub9d0\ub77c \uc8fd\uc74c. \uaf43\uc740 \ud53c\uc9c0 \uc54a\uace0 \uc78e\ub9cc \ubc00\uc0dd<\/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. \uac00\uc9c0 \uace0\uc0ac (4~5\ub144 \ubc18\ubcf5 \ud6c4)<\/p><p class=\"text-sm\">\ubcd1\ub465\uc9c0\ub294 \ud574\ub9c8\ub2e4 \ucee4\uc9c0\uace0 \uc218\uac00 \ub298\uc5b4\ub098\uba70, \ubcf4\ud1b5 4~5\ub144\uc774 \uc9c0\ub098\uba74 \uac00\uc9c0 \uc804\uccb4\uac00 \ub9d0\ub77c \uc8fd\uc74c<\/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-red-100\">\n                            <p class=\"font-semibold\">5. \ubcd1\uc6d0\uade0 \uc6d4\ub3d9 \uc900\ube44 \ubc0f \uc0dd\ud65c\uc0ac \ubc18\ubcf5 (\uac00\uc744)<\/p><p class=\"text-sm\">\ubcd1\ub4e0 \uc78e\/\uac00\uc9c0\uac00 \ub099\uc5fd\ub418\uba70, \ubcd1\uc6d0\uade0\uc740 \ub2e4\uc2dc \uc6d4\ub3d9 \ud615\ud0dc\ub85c \uc900\ube44<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/section>\n\n            <!-- \ubc29\uc81c \ubc29\ubc95 Section -->\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-rose-800 mb-4\">\ud6a8\uacfc\uc801\uc778 \ubc29\uc81c \ubc29\ubc95<\/h2>\n                    <p class=\"text-gray-700 leading-relaxed mb-6\">\n                        \ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc740 \uac10\uc5fc\uc6d0\uc774 \ub418\ub294 \ubcd1\ub4e0 \uac00\uc9c0\ub97c \uc81c\uac70\ud558\uace0, \uc801\uc808\ud55c \uc2dc\uae30\uc5d0 \uc0b4\uade0\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-red-50\">\n                            <h3 class=\"text-xl font-semibold text-red-800 mb-2\">\u203b \uc798\ubabb\ub41c \ubc29\uc81c\ubc95 \uc8fc\uc758<\/h3>\n                            <p class=\"text-gray-700\">\ube57\uc790\ub8e8\ubcd1\uc740 \uc9c4\uade0\uc5d0 \uc758\ud574 \uc77c\uc5b4\ub098\ub294 \ubcd1\uc784\uc5d0\ub3c4 \ud30c\uc774\ud1a0\ud50c\ub77c\uc2a4\ub9c8 \ud639\uc740 \ubc14\uc774\ub7ec\uc2a4 \ub4f1\uc73c\ub85c \uc798\ubabb \uc54c\ub824\uc838 \ud56d\uc0dd\uc81c\ub85c \ub098\ubb34\uc8fc\uc0ac\ub97c \ud558\ub294 \uacbd\uc6b0\uac00 \uc885\uc885 \uc788\uc73c\ub2c8 \uc8fc\uc758\uac00 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n                        <\/div>\n                        <div class=\"p-4 bg-blue-50\">\n                             <h3 class=\"text-xl font-semibold text-blue-800 mb-2\">\u2460 \ubb3c\ub9ac\uc801 \ubc29\uc81c (\uac00\uc7a5 \ud6a8\uacfc\uc801)<\/h3>\n                             <ul class=\"list-disc list-inside text-gray-700\">\n                                 <li><strong>\ubcd1\ub465\uc9c0(\ubcd1\ub4e0 \uac00\uc9c0) \uc81c\uac70:<\/strong> \uaca8\uc6b8\ubd80\ud130 \uc774\ub978 \ubd04\uc5d0 \uac78\uccd0 \ubcd1\ub4e0 \uac00\uc9c0\ub97c \uc544\ub798\ucabd\uc758 \ubd80\ud47c \ubd80\ubd84\uae4c\uc9c0 \ud3ec\ud568\ud558\uc5ec \uc798\ub77c\ub0b4\uc5b4 \ud0dc\uc6b0\ub294 \uac83\uc774 \uac00\uc7a5 \ud6a8\uacfc\uc801\uc785\ub2c8\ub2e4. \uc5b4\ub9b0\ub098\ubb34\uc758 \uacbd\uc6b0 \ubcd1\ub4e0 \uac00\uc9c0\ub97c \ubc1c\uacac \uc989\uc2dc \uc798\ub77c\ub0c5\ub2c8\ub2e4.<\/li>\n                                 <li><strong>\uc808\ub2e8\uba74 \ubcf4\ud638:<\/strong> \uc798\ub77c\ub0b8 \uc808\ub2e8\uba74\uc5d0\ub294 \uc9c0\uc624\ud310\ub3c4\ud3ec\uc81c, \ub77d\ubc1c\uc0bc \ub3c4\ud3ec\uc81c, \ud14c\ubd80\ucf54\ub098\uc878 \ub3c4\ud3ec\uc81c \ub4f1\uc744 \ubc1c\ub77c\uc11c \uc904\uae30\ub9c8\ub984\ubcd1\uade0\uc774\ub098 \uc7ac\uc9c8\uc369\uc74c\ubcd1\uade0 \ub4f1\uc758 \uce68\uc785\uc744 \ubc29\uc9c0\ud558\uace0 \uc720\ud569\uc744 \ucd09\uc9c4\uc2dc\ud0b5\ub2c8\ub2e4.<\/li>\n                                 <li><strong>\ubcd1\ub4e0 \ub099\uc5fd \uc81c\uac70:<\/strong> \ubcd1\ub4e0 \ub099\uc5fd\uc744 \ubaa8\uc544 \ud0dc\uc6b0\uac70\ub098 \ub545\uc5d0 \uae4a\uc774 \ubb3b\uc5b4 \uc804\uc5fc\uc6d0\uc744 \uc81c\uac70\ud569\ub2c8\ub2e4.<\/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 \ud654\ud559\uc801 \ubc29\uc81c (\uc608\ubc29\uc801 \uc0b4\ud3ec)<\/h3>\n                             <ul class=\"list-disc list-inside text-gray-700\">\n                                 <li><strong>\uc0b4\ud3ec \uc2dc\uae30 (\uc78e \ud53c\uae30 \uc804\/\ud6c4):<\/strong> \uc78e\uc774 \ub098\uae30 \uc2dc\uc791\ud558\uba74\uc11c \ud14c\ubd80\ucf54\ub098\uc878 \uc218\ud654\uc81c \ud76c\uc11d\uc561\uc744 \uc218\uad00\uc5d0 \uc0b4\ud3ec\ud558\uac70\ub098, \uaf43\uc774 \uc9c4 \ud6c4(\ub179\ud3ec\uc790\uac00 \ube44\uc0b0\ud558\ub294 \uc2dc\uae30)\ubd80\ud130 \uc774\ubbf8\ub179\ud0c0\ub518\ud2b8\ub9ac\uc2a4\uc54c\ubca0\uc2e4\ub808\uc774\ud2b8 \uc218\ud654\uc81c 1,000\ubc30\uc561 \ub610\ub294 \ub514\ud398\ub178\ucf54\ub098\uc878 \uc785\uc0c1\uc218\ud654\uc81c 2,000\ubc30\uc561\uc744 10\uc77c \uac04\uaca9\uc73c\ub85c 2~3\ud68c \uc0b4\ud3ec\ud569\ub2c8\ub2e4. \ub9e4\ub144 \ud53c\ud574\uac00 \ubc1c\uc0dd\ud558\ub294 \uc9c0\uc5ed\uc5d0\uc11c\ub294 \uaf43\uc774 \ub5a8\uc5b4\uc9c4 \ud6c4\ubd80\ud130 \uc0b4\ud3ec\ub97c \uc2dc\uc791\ud569\ub2c8\ub2e4.<\/li>\n                                 <li><strong>\uc57d\uc81c \uc885\ub958 (\uc608\uc2dc):<\/strong> \ud2b8\ub9ac\uc544\ub514\uba54\ud3f0 \uc218\ud654\uc81c 800\ubc30\uc561, \ud398\ub098\ub9ac\ubab0 \uc218\ud654\uc81c 3,300\ubc30\uc561, \ub9cc\ucf54\uc81c\ube0c \uc218\ud654\uc81c, \ubcf4\ub974\ub3c4\uc561, \ud074\ub85c\ub85c\ud0c8\ub85c\ub2d0 \ud569\uc81c \ub4f1\uc774 \uc720\ud6a8\ud558\ub2e4\uace0 \uc54c\ub824\uc838 \uc788\uc2b5\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 \ubc9a\ub098\ubb34 \ubc0f \ube57\uc790\ub8e8\ubcd1\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-yellow-50\">\n                            <h3 class=\"text-xl font-semibold text-yellow-800 mb-2\">\u2462 \ud658\uacbd \uad00\ub9ac \ubc0f \uae30\ud0c0<\/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 \uc800\ud56d\ub825\uc744 \ub192\uc785\ub2c8\ub2e4.<\/li>\n                                <li><strong>\uc9c0\uc18d\uc801\uc778 \uc608\ucc30:<\/strong> \ubc1c\uc0dd \uc5ec\ubd80\ub97c \uc9c0\uc18d\uc801\uc73c\ub85c \uad00\ucc30\ud558\uc5ec \uc870\uae30 \ubc29\uc81c\uc5d0 \ub098\uc12d\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-rose-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, \uc11c\uc6b8\ub300\ud559\uad50 \uc218\ubaa9\uc9c4\ub2e8\uc13c\ud130, \uad6d\ub9bd\uc0b0\ub9bc\uacfc\ud559\uc6d0 \ub4f1 \uc804\ubb38 \uc790\ub8cc<\/p>\n            <p class=\"text-sm text-gray-500 mt-1\">\u203b \ubcf8 \uc790\ub8cc\ub294 \uad50\uc721 \ubc0f \uc815\ubcf4 \uc81c\uacf5 \ubaa9\uc801\uc73c\ub85c \uc81c\uc791\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc790\uc138\ud55c \ub0b4\uc6a9\uc740 \uad00\ub828 \uae30\uad00\uc5d0 \ubb38\uc758\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/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                naked_ascus_layer: {\n                    title: '\ub098\ucd9c\ub41c \uc790\ub0ad\uce35 (\ud770\uc0c9 \uac00\ub8e8)',\n                    description: '4\uc6d4 \ud558\uc21c~5\uc6d4 \uc911\uc21c\uc5d0 \uc794\uac00\uc9c0\uac00 \ubc00\uc0dd\ud55c \ubcd1\ub465\uc9c0 \uc78e\uc758 \ub4b7\uba74\uc5d0 \ud68c\ubc31\uc0c9 \uac00\ub8e8(\ub098\ucd9c\ub41c \uc790\ub0ad\uce35)\uac00 \ub4a4\ub36e\uc785\ub2c8\ub2e4. \uc774 \uac00\ub8e8\ub294 \ubcd1\uc6d0\uade0\uc758 \ud3ec\uc790\ub97c \ud3ec\ud568\ud558\uba70, \uc721\uc548\uc73c\ub85c\ub3c4 \uc27d\uac8c \uad00\ucc30\ub429\ub2c8\ub2e4.',\n                    size: '\ud06c\uae30: (\uc815\ubcf4 \uc5c6\uc74c)',\n                    image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/Taphrina_wiesneri_ascus_layer.jpg' \n                },\n                ascus_ascospore: {\n                    title: '\uc790\ub0ad \ubc0f \uc790\ub0ad\ud3ec\uc790',\n                    description: '\uc78e \ub4b7\uba74\uc5d0 \ubcd1\uc6d0\uade0\uc758 \uc790\ub0ad\uc774 \uc904\uc9c0\uc5b4 \ud615\uc131\ub418\uace0 \uadf8 \uc18d\uc5d0 \uae38\uace0 \ub465\uadfc \uc790\ub0ad\ud3ec\uc790\uac00 \ub4e4\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uc790\ub0ad\uc740 \uace4\ubd09\ud615\uc73c\ub85c \ud06c\uae30\ub294 17~53\u339b\uc774\uba70, \uac01\ud3ec\ub97c \uac00\uc9d1\ub2c8\ub2e4. \uc790\ub0ad\ud3ec\uc790\ub294 \ub09c\ud615~\ud0c0\uc6d0\ud615\uc73c\ub85c \ud06c\uae30\ub294 3.5~9 x 3~6\u339b\uc785\ub2c8\ub2e4. \uc790\ub0ad \ub0b4\uc5d0\uc11c \uc790\ub0ad\ud3ec\uc790\uac00 \uace7\ubc14\ub85c \ucd9c\uc544\ub97c \ubc18\ubcf5\ud558\uc5ec \uc790\ub0ad \ub0b4\ub97c \ucd9c\uc544\ud3ec\uc790\ub85c \uac00\ub4dd \ucc44\uc6c1\ub2c8\ub2e4.',\n                    size: '\uc790\ub0ad: 17~53\u339b, \uc790\ub0ad\ud3ec\uc790: 3.5~9 x 3~6\u339b',\n                    image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/Taphrina_wiesneri_ascus_ascospore.jpg' \n                },\n                budding_spore: {\n                    title: '\ucd9c\uc544\ud3ec\uc790 (\ubd84\uc0dd\ud3ec\uc790)',\n                    description: '\uc790\ub0ad \ub0b4\uc5d0\uc11c \uc790\ub0ad\ud3ec\uc790\uac00 \uace7\ubc14\ub85c \ucd9c\uc544\ub97c \ubc18\ubcf5\ud558\uc5ec \ud615\uc131\ub418\ub294 \ud3ec\uc790\uc785\ub2c8\ub2e4. \uc790\ub0ad \ub0b4\ub97c \uac00\ub4dd \ucc44\uc6b0\uba70, \uc774\ub4e4\uc774 \uc678\ubd80\ub85c \ubc29\ucd9c\ub418\uc5b4 2\ucc28 \uac10\uc5fc\uc744 \uc77c\uc73c\ud0b5\ub2c8\ub2e4.',\n                    size: '\ud06c\uae30: (\uc815\ubcf4 \uc5c6\uc74c)',\n                    image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/Taphrina_wiesneri_budding_spores.jpg' \n                }\n            };\n\n            const damageData = {\n                witches_broom: {\n                    title: '\ube57\uc790\ub8e8 \ud615\ud0dc (\uc794\uac00\uc9c0 \ucd1d\uc0dd \ubc0f \uaf43 \uc5c6\uc74c)',\n                    description: '\uac00\uc9c0\uc758 \uc77c\ubd80\uac00 \ud639\ucc98\ub7fc \ubd80\ud480\uc5b4 \uc624\ub974\uace0, \uc774\uacf3\uc5d0\uc11c \ub2e4\uc218\uc758 \uc794\uac00\uc9c0\uac00 \ubb49\uccd0 \ub098\uc640 \ub9c8\uce58 \ube57\uc790\ub8e8\ub098 \ucee4\ub2e4\ub780 \uae4c\uce58\ub465\uc9c0\ucc98\ub7fc \ubcf4\uc785\ub2c8\ub2e4. \ubcd1\ub4e0 \uac00\uc9c0\uc5d0\uc11c\ub294 \uaf43\uc774 \ud53c\uc9c0 \uc54a\uace0 \ub2f4\ub179\uc0c9\uc758 \uc791\uc740 \uc78e\ub4e4\ub9cc \ube7d\ube7d\ud558\uac8c \uc790\ub77c\ub098\uc635\ub2c8\ub2e4. (\ube57\uc790\ub8e8\ubcd1 \ubcd1\ub465\uc9c0 \uc774\ubbf8\uc9c0 \ucc38\uace0)',\n                    image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/cherry_witches_broom_witches_broom.jpg' \n                },\n                leaf_discoloration_distortion: {\n                    title: '\uc78e \ubcc0\uc0c9 \ubc0f \ub4a4\ud2c0\ub9bc',\n                    description: '4\uc6d4 \ud558\uc21c~5\uc6d4 \uc911\uc21c\uc5d0 \uc794\uac00\uc9c0\uac00 \ubc00\uc0dd\ud55c \ubcd1\ub465\uc9c0\uc758 \uc78e\uc740 \uac00\uc7a5\uc790\ub9ac\ubd80\ud130 \uac08\uc0c9 \ub0b4\uc9c0 \ud751\uac08\uc0c9\uc73c\ub85c \ubcc0\ud558\uace0 \uc624\uadf8\ub77c\ub4e4\uba74\uc11c \ub9d0\ub77c \uc8fd\uc2b5\ub2c8\ub2e4. \uc0c8\ub85c \ub098\uc628 \uc78e\uc740 \uc791\uc544\uc9c0\uba74\uc11c \ud1f4\uc0c9\ub418\uae30\ub3c4 \ud569\ub2c8\ub2e4. (\uc0c8\ub85c \ub098\uc628 \uc78e\uc758 \ubcd1\uc9d5 \/ \ubcd1\ub4e0 \uac00\uc9c0\uc758 \uc78e\uc774 \ub9d0\ub77c \uc8fd\ub294 \uc99d\uc0c1 \uc774\ubbf8\uc9c0 \ucc38\uace0)',\n                    image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/cherry_witches_broom_leaf_discoloration.jpg' \n                },\n                branch_dieback: {\n                    title: '\uac00\uc9c0 \uace0\uc0ac \ubc0f \ud669\ud3d0\ud654',\n                    description: '\ubcd1\ub465\uc9c0\ub294 \ud574\ub9c8\ub2e4 \ucee4\uc9c0\uba70, \uadf8 \uc218\uac00 \uc810\uc810 \ub298\uc5b4\ub098\uba74\uc11c \ub098\ubb34\ub294 \uc1e0\uc57d\ud574\uc838\uc11c \ub9c8\uce68\ub0b4 \uc8fd\uac8c \ub429\ub2c8\ub2e4. \ubcd1\ub4e0 \uac00\uc9c0\ub294 \ubcf4\ud1b5 4~5\ub144\uc774 \uc9c0\ub098\uba74 \uac00\uc9c0 \uc804\uccb4\uac00 \ub9d0\ub77c \uc8fd\uc73c\uba70, \uc9c0\uc18d\uc801\uc778 \ud53c\ud574\ub294 \uc804\uad6d \ubc9a\ub098\ubb34 \uba85\uc18c\uc758 \ud669\ud3d0\ud654\ub85c \uc774\uc5b4\uc9c0\uae30\ub3c4 \ud569\ub2c8\ub2e4. (\uc9c0\uc18d\uc801\uc778 \ud53c\ud574\ub85c \ub9d0\ub77c \uc8fd\uc740 \uac00\uc9c0 \uc774\ubbf8\uc9c0 \ucc38\uace0)',\n                    image: 'https:\/\/storage.googleapis.com\/aai-web-samples\/cherry_witches_broom_branch_dieback.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                \/\/ \uc774\ubbf8\uc9c0 \ud0dc\uadf8\ub97c \ub2e4\uc2dc \uc228\uae40\uc73c\ub85c \ucc98\ub9ac\n                morphologyMainImage.src = ''; \/\/ Clear existing src\n                morphologyMainImage.alt = ''; \/\/ Clear existing alt\n                morphologyMainImage.classList.add('hidden'); \/\/ Ensure it's hidden\n            }\n\n            \/\/ \ucd08\uae30 \ub85c\ub4dc \uc2dc \uc774\ubbf8\uc9c0 \uc81c\uac70 \ubc0f \ud14d\uc2a4\ud2b8 \uc124\uc815\n            updateMorphologyContent('naked_ascus_layer'); \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            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                \/\/ \uc774\ubbf8\uc9c0 \ud0dc\uadf8\ub97c \ub2e4\uc2dc \uc228\uae40\uc73c\ub85c \ucc98\ub9ac\n                damageMainImage.src = ''; \/\/ Clear existing src\n                damageMainImage.alt = ''; \/\/ Clear existing alt\n                damageMainImage.classList.add('hidden'); \/\/ Ensure it's hidden\n            }\n\n            \/\/ \ucd08\uae30 \ub85c\ub4dc \uc2dc \uc774\ubbf8\uc9c0 \uc81c\uac70 \ubc0f \ud14d\uc2a4\ud2b8 \uc124\uc815\n            updateDamageContent('witches_broom');\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: ['3\uc6d4', '4\uc6d4', '5\uc6d4', '6\uc6d4', '7\uc6d4', '8\uc6d4', '9\uc6d4'],\n                    datasets: [{\n                        label: '\ubcd1\uc6d0\uade0 \ud65c\ub3d9\uae30 (\ud3ec\uc790 \ud615\uc131 \ubc0f \ud655\uc0b0)',\n                        data: [0, 8, 10, 8, 5, 2, 0], \/\/ Peak April-May, then decreasing\n                        backgroundColor: 'rgba(236, 72, 153, 0.6)', \/* pink-500 *\/\n                        borderColor: 'rgba(236, 72, 153, 1)',\n                        borderWidth: 1,\n                        yAxisID: 'y',\n                    },{\n                        label: '\ubc29\uc81c \ucd94\ucc9c \uae30\uac04 (\ubb3c\ub9ac\uc801 \uc81c\uac70)',\n                        data: [12, 12, 0, 0, 0, 0, 0], \/\/ Winter to Early Spring\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                        label: '\ubc29\uc81c \ucd94\ucc9c \uae30\uac04 (\ud654\ud559\uc801 \uc0b4\ud3ec)',\n                        data: [0, 0, 12, 12, 0, 0, 0], \/\/ May-June\n                        type: 'line',\n                        fill: true,\n                        backgroundColor: 'rgba(101, 163, 13, 0.2)', \/* lime-600 with transparency *\/\n                        borderColor: 'rgba(101, 163, 13, 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                                        if (context.dataset.label.includes('\ubb3c\ub9ac\uc801')) return ` ${context.dataset.label}: \uaca8\uc6b8 ~ \uc774\ub978 \ubd04`;\n                                        return ` ${context.dataset.label}: \uaf43 \uc9c4 \ud6c4 (5~6\uc6d4)`;\n                                    }\n                                    return ` ${context.dataset.label}: ${context.raw} (\ud65c\ub3d9 \ubc00\ub3c4)`;\n                                }\n                           }\n                        },\n                        title: {\n                            display: true,\n                            text: '\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1 \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<p><\/p>\n","protected":false},"featured_media":3141,"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":[147,110],"pest-category":[86,284],"pest-overwintering":[],"class_list":["post-3136","pest","type-pest","status-publish","has-post-thumbnail","hentry","pest-target-147","pest-target-110","pest-category-86","pest-category-284"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1.jpg",665,425,false],"thumbnail":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1-150x150.jpg",150,150,true],"medium":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1-300x192.jpg",300,192,true],"medium_large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1.jpg",665,425,false],"large":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1.jpg",665,425,false],"1536x1536":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1.jpg",665,425,false],"2048x2048":["https:\/\/hstc.treecare.co.kr\/wp-content\/uploads\/2025\/06\/\ubc9a\ub098\ubb34-\ube57\uc790\ub8e8\ubcd1.jpg",665,425,false]},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=0"},"uagb_comment_info":0,"uagb_excerpt":"\ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1 \ub300\ud654\ud615 \uac00\uc774\ub4dc \uac1c\uc694 \ubcd1\uc6d0\uade0 \ud615\ud0dc \ud53c\ud574 \uc99d\uc0c1 \uc0dd\ud65c\uc0ac \ubc29\uc81c \ubc29\ubc95 \ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1 (Witches&#8217; Broom)\uc774\ub780? \ubc9a\ub098\ubb34 \ube57\uc790\ub8e8\ubcd1\uc740 Taphrina wiesneri [&hellip;]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/pest\/3136","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\/3141"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3136"}],"wp:term":[{"taxonomy":"pest-target","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-target&post=3136"},{"taxonomy":"pest-category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-category&post=3136"},{"taxonomy":"pest-overwintering","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fpest-overwintering&post=3136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}