{"id":3968,"date":"2025-07-17T01:44:06","date_gmt":"2025-07-17T01:44:06","guid":{"rendered":"https:\/\/hstc.treecare.co.kr\/?p=3968"},"modified":"2025-07-17T01:44:06","modified_gmt":"2025-07-17T01:44:06","slug":"%ec%9c%84%ed%97%98%eb%aa%a9-%ec%a7%84%eb%8b%a8-project","status":"publish","type":"post","link":"https:\/\/hstc.treecare.co.kr\/?p=3968","title":{"rendered":"\uc704\ud5d8\ubaa9 \uc9c4\ub2e8 Project"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"ko\" class=\"scroll-smooth\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0 &#8211; \uc704\ud5d8\ubaa9 \uc9c4\ub2e8 \uc790\ub3d9 \uacac\uc801 \ubc0f \ubcf4\uace0\uc11c \uc194\ub8e8\uc158<\/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@400;700&#038;display=swap\" rel=\"stylesheet\">\n    <!-- Chosen Palette: Professional Green & Neutral Gray -->\n    <!-- Application Structure Plan: The SPA is structured as a narrative sales funnel, guiding the user from problem awareness to solution experience. It starts by identifying the four main pain points for professionals (manual work, subjectivity, complex quoting, reporting burden). The core of the application is an interactive \"Live Demo\" of the automated quoting system. This allows users to input project parameters (tree count, type) and instantly see a calculated quote based on the official 'Standard Cost Model' (\ud45c\uc900\ud488\uc148). This hands-on experience is more persuasive than text alone. The structure concludes with pricing tiers and a call to action, completing the customer journey. -->\n    <!-- Visualization & Content Choices: \n        - Problem Section: Goal: Empathize with user pain points. Method: Four illustrated cards using simple icons (\ud83d\udcc4, \ud83e\udd14, \ud83d\udcb0, \u23f3) and concise text.\n        - Interactive Quote Demo: Goal: Demonstrate the core value proposition \u2013 automation and accuracy. Method: Interactive input fields for tree count and project type. JavaScript calculates the quote in real-time based on the 'Standard Cost Model'. The results are displayed in a clean table. A dynamic bar chart (Chart.js) visualizes the cost breakdown (labor, admin, profit), making the quote easy to understand.\n        - Pricing Section: Goal: Convert users. Method: Standard three-tier pricing table (Basic, Pro, Enterprise) for clarity and easy comparison.\n        - Justification: This design focuses on interactive demonstration rather than static description. By allowing users to engage with a simulated version of the app's key feature, it powerfully communicates the benefits of efficiency and accuracy, directly addressing their primary needs. All visualizations are done via HTML\/CSS\/JS and Chart.js canvas. -->\n    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n    <style>\n        body { font-family: 'Noto Sans KR', sans-serif; }\n        .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; }\n        .nav-link { transition: color 0.3s; }\n        .nav-link:hover { color: #16a34a; }\n        .step-card { transition: transform 0.3s, box-shadow 0.3s; }\n        .step-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgb(0 0 0 \/ 0.1), 0 4px 6px -4px rgb(0 0 0 \/ 0.1); }\n    <\/style>\n<\/head>\n<body class=\"bg-gray-50 text-gray-800\">\n\n    <header class=\"bg-white\/90 backdrop-blur-lg sticky top-0 z-50 shadow-sm\">\n        <nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n            <a href=\"#hero\" class=\"text-2xl font-bold text-green-700\">\ud83c\udf33 \ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0<\/a>\n            <div class=\"hidden md:flex space-x-8\">\n                <a href=\"#problem\" class=\"nav-link text-gray-600\">\ud604\uc7a5\uc758 \uc5b4\ub824\uc6c0<\/a>\n                <a href=\"#solution\" class=\"nav-link text-gray-600\">\uc194\ub8e8\uc158 \uccb4\ud5d8<\/a>\n                <a href=\"#pricing\" class=\"nav-link text-gray-600\">\uc694\uae08\uc81c<\/a>\n                <a href=\"#cta\" class=\"bg-green-600 text-white font-bold py-2 px-4 rounded-full hover:bg-green-700 transition-colors\">\uc9c0\uae08 \uc2dc\uc791\ud558\uae30<\/a>\n            <\/div>\n        <\/nav>\n    <\/header>\n\n    <main>\n        <section id=\"hero\" class=\"min-h-[70vh] flex items-center bg-green-50\">\n            <div class=\"container mx-auto px-6 text-center\">\n                <h1 class=\"text-4xl md:text-6xl font-bold text-gray-800 mb-4 leading-tight\">\ubcf5\uc7a1\ud55c \uc704\ud5d8\ubaa9 \uc9c4\ub2e8, <br class=\"md:hidden\">\uc571 \ud558\ub098\ub85c \ub05d\ub0b4\uc138\uc694.<\/h1>\n                <p class=\"text-lg md:text-xl text-gray-600 max-w-3xl mx-auto\">\n                    &#8216;\ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0&#8217;\ub294 \uc0b0\ub9bc\uccad \ud45c\uc900\ud488\uc148 \uae30\ubc18\uc758 \uc790\ub3d9 \uacac\uc801 \ubc0f \ubcf4\uace0\uc11c \uc0dd\uc131\uc73c\ub85c, \ud604\uc7a5 \uc804\ubb38\uac00\uc758 \uc2dc\uac04\uc744 \uc544\uaef4\ub4dc\ub9bd\ub2c8\ub2e4.\n                <\/p>\n                <a href=\"#solution\" class=\"mt-8 inline-block bg-green-600 text-white font-bold text-lg py-3 px-8 rounded-full hover:bg-green-700 transition-colors\">\uc790\ub3d9 \uacac\uc801 \ub370\ubaa8 \uccb4\ud5d8\ud558\uae30<\/a>\n            <\/div>\n        <\/section>\n\n        <section id=\"problem\" class=\"py-16 md:py-24 bg-white\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold\">\uc804\ubb38\uac00\ub4e4\uc740 \ud604\uc7a5\uc5d0\uc11c \uc774\ub7f0 \uc5b4\ub824\uc6c0\uc744 \uacaa\uc2b5\ub2c8\ub2e4<\/h2>\n                    <p class=\"mt-4 text-lg text-gray-600\">\ud45c\uc900\ud488\uc148 \ub3c4\uc785 \uc774\ud6c4, \uc815\ud655\uc131\uc740 \ub192\uc544\uc84c\uc9c0\ub9cc \uc5c5\ubb34\ub294 \ub354 \ubcf5\uc7a1\ud574\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n                <\/div>\n                <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n                    <div class=\"step-card bg-gray-50 p-8 rounded-lg text-center\">\n                        <div class=\"text-5xl mb-4\">\ud83d\udcc4<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\uc218\uc791\uc5c5 \ud604\uc7a5 \uc870\uc0ac<\/h3>\n                        <p class=\"text-gray-600\">\uc218\ub9ce\uc740 \ud56d\ubaa9\uc744 \uc218\uae30\ub85c \uae30\ub85d\ud558\uace0, \ub370\uc774\ud130\ub97c \uc815\ub9ac\ud558\ub294 \ub370 \ub9ce\uc740 \uc2dc\uac04\uc774 \uc18c\uc694\ub429\ub2c8\ub2e4.<\/p>\n                    <\/div>\n                    <div class=\"step-card bg-gray-50 p-8 rounded-lg text-center\">\n                        <div class=\"text-5xl mb-4\">\ud83e\udd14<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\uc8fc\uad00\uc801 \uc704\ud5d8\ub3c4 \ud310\ub2e8<\/h3>\n                        <p class=\"text-gray-600\">\ud3c9\uac00\uc790\uc758 \uacbd\ud5d8\uc5d0 \ub530\ub77c \uc9c4\ub2e8 \uacb0\uacfc\uac00 \ub2ec\ub77c\uc838 \uac1d\uad00\uc801\uc778 \ub4f1\uae09 \ud310\uc815\uc5d0 \ud55c\uacc4\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n                    <\/div>\n                    <div class=\"step-card bg-gray-50 p-8 rounded-lg text-center\">\n                        <div class=\"text-5xl mb-4\">\ud83d\udcb0<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\ubcf5\uc7a1\ud55c \ud488\uc148 \uacac\uc801<\/h3>\n                        <p class=\"text-gray-600\">\uc218\ub7c9, \uacf5\uc815, \uc778\ub825 \uae30\uc900\uc774 \ubcf5\uc7a1\ud574 \uc815\ud655\ud55c \uacac\uc801\uc744 \ub0b4\ub294 \uac83\uc774 \uc5b4\ub835\uace0 \ubc88\uac70\ub86d\uc2b5\ub2c8\ub2e4.<\/p>\n                    <\/div>\n                    <div class=\"step-card bg-gray-50 p-8 rounded-lg text-center\">\n                        <div class=\"text-5xl mb-4\">\u23f3<\/div>\n                        <h3 class=\"text-xl font-bold mb-2\">\ubcf4\uace0\uc11c \uc791\uc131 \ubd80\ub2f4<\/h3>\n                        <p class=\"text-gray-600\">\uc870\uc0ac \uacb0\uacfc\uc640 \uc0ac\uc9c4, \uacac\uc801\uc744 \ucde8\ud569\ud558\uc5ec \ud45c\uc900 \uc591\uc2dd\uc758 \ubcf4\uace0\uc11c\ub97c \ub9cc\ub4dc\ub294 \ud589\uc815 \ubd80\ub2f4\uc774 \ud07d\ub2c8\ub2e4.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"solution\" class=\"py-16 md:py-24 bg-gray-50\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold\">\uc2e4\uc2dc\uac04 \uc790\ub3d9 \uacac\uc801 \uc2dc\uc2a4\ud15c \uccb4\ud5d8<\/h2>\n                    <p class=\"mt-4 text-lg text-gray-600\">\n                        \ud504\ub85c\uc81d\ud2b8 \uc815\ubcf4\ub97c \uc785\ub825\ud558\uace0, \ud45c\uc900\ud488\uc148\uc5d0 \ub530\ub978 \uc9c4\ub2e8 \ube44\uc6a9\uc774 \uc5b4\ub5bb\uac8c \uc2e4\uc2dc\uac04\uc73c\ub85c \uc0b0\ucd9c\ub418\ub294\uc9c0 \uc9c1\uc811 \ud655\uc778\ud574\ubcf4\uc138\uc694.\n                    <\/p>\n                <\/div>\n                <div class=\"max-w-4xl mx-auto bg-white p-6 sm:p-10 rounded-2xl shadow-lg\">\n                    <div class=\"grid md:grid-cols-2 gap-8 items-center\">\n                        <!-- Input Section -->\n                        <div>\n                            <h3 class=\"font-bold text-xl mb-6 text-gray-800 border-b pb-2\">1. \ud504\ub85c\uc81d\ud2b8 \uc815\ubcf4 \uc785\ub825<\/h3>\n                            <div class=\"space-y-6\">\n                                <div>\n                                    <label for=\"projectType\" class=\"block text-sm font-medium text-gray-700 mb-1\">\uc9c4\ub2e8 \uc720\ud615<\/label>\n                                    <select id=\"projectType\" class=\"w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500\">\n                                        <option value=\"type1\">I\ud615 (\uc9d1\ub2e8\ubaa9)<\/option>\n                                        <option value=\"type2\">II\ud615 (\ub2e8\ubaa9)<\/option>\n                                    <\/select>\n                                <\/div>\n                                <div>\n                                    <label for=\"treeCount\" class=\"block text-sm font-medium text-gray-700 mb-1\">\uc9c4\ub2e8 \uc218\ub7c9 (\uc8fc)<\/label>\n                                    <input type=\"number\" id=\"treeCount\" value=\"100\" class=\"w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500\">\n                                    <p id=\"type1-help\" class=\"text-xs text-gray-500 mt-1\">\u203b 300\uc8fc \uc774\ud558 \uae30\uc900, \ucd08\uacfc \uc2dc \ud488\uc774 \uac00\uc0b0\ub429\ub2c8\ub2e4.<\/p>\n                                    <p id=\"type2-help\" class=\"text-xs text-gray-500 mt-1 hidden\">\u203b \ub2e8\ubaa9 \uc9c4\ub2e8\uc740 \uc8fc\ub2f9 \ud488\uc148\uc774 \uc801\uc6a9\ub429\ub2c8\ub2e4.<\/p>\n                                <\/div>\n                                <div>\n                                    <label class=\"block text-sm font-medium text-gray-700\">\uc815\ubc00 \uc9c4\ub2e8 \uc7a5\ube44 \uc0ac\uc6a9<\/label>\n                                    <div class=\"mt-2 space-y-2\">\n                                       <label class=\"flex items-center\">\n                                           <input type=\"checkbox\" id=\"useTomograph\" class=\"h-4 w-4 text-green-600 border-gray-300 rounded focus:ring-green-500\" checked>\n                                           <span class=\"ml-2 text-gray-700\">\uc218\uac04 \ub2e8\uce35\ucd2c\uc601<\/span>\n                                       <\/label>\n                                       <label class=\"flex items-center\">\n                                           <input type=\"checkbox\" id=\"useResistograph\" class=\"h-4 w-4 text-green-600 border-gray-300 rounded focus:ring-green-500\" checked>\n                                           <span class=\"ml-2 text-gray-700\">\ucc9c\uacf5\uc800\ud56d \uce21\uc815<\/span>\n                                       <\/label>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Output Section -->\n                        <div class=\"bg-gray-50 p-6 rounded-lg border\">\n                            <h3 class=\"font-bold text-xl mb-4 text-gray-800 border-b pb-2\">2. \uc790\ub3d9 \uc0b0\ucd9c \uacac\uc801\uc11c<\/h3>\n                            <div id=\"quote-output\" class=\"space-y-2 text-sm\">\n                                <!-- Quote details will be populated by JS -->\n                            <\/div>\n                            <div class=\"mt-4 pt-4 border-t-2 border-dashed\">\n                                <div class=\"flex justify-between items-center text-lg font-bold\">\n                                    <span>\ucd1d \uacf5\uae09\uac00\uc561 (VAT \ubcc4\ub3c4)<\/span>\n                                    <span id=\"total-price\" class=\"text-green-700\">0 \uc6d0<\/span>\n                                <\/div>\n                                 <div class=\"flex justify-between items-center text-xl font-bold mt-2\">\n                                    <span>\ucd5c\uc885 \ud569\uacc4<\/span>\n                                    <span id=\"final-price\" class=\"text-green-700\">0 \uc6d0<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"mt-10\">\n                        <h3 class=\"font-bold text-xl mb-4 text-gray-800 text-center\">3. \ube44\uc6a9 \uad6c\uc131 \uc2dc\uac01\ud654<\/h3>\n                        <div class=\"chart-container\">\n                            <canvas id=\"quoteChart\"><\/canvas>\n                        <\/div>\n                    <\/div>\n                     <div class=\"mt-10 text-center\">\n                        <button class=\"bg-blue-600 text-white font-bold py-3 px-8 rounded-full hover:bg-blue-700 transition-colors\">\n                           \ud83d\udccb \ucd5c\uc885 \uc9c4\ub2e8 \ubcf4\uace0\uc11c \uc0dd\uc131\ud558\uae30 (\ub370\ubaa8)\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <section id=\"pricing\" class=\"py-16 md:py-24 bg-white\">\n            <div class=\"container mx-auto px-6\">\n                <div class=\"text-center mb-12\">\n                    <h2 class=\"text-3xl md:text-4xl font-bold\">\ud569\ub9ac\uc801\uc778 \uad6c\ub3c5 \uc694\uae08\uc81c<\/h2>\n                    <p class=\"mt-4 text-lg text-gray-600\">\uac1c\uc778 \uc804\ubb38\uac00\ubd80\ud130 \ub300\ud615 \uae30\uad00\uae4c\uc9c0, \uaddc\ubaa8\uc5d0 \ub9de\ub294 \ud50c\ub79c\uc744 \uc120\ud0dd\ud558\uc138\uc694.<\/p>\n                <\/div>\n                <div class=\"grid lg:grid-cols-3 gap-8 max-w-5xl mx-auto\">\n                    <div class=\"border rounded-lg p-8 flex flex-col\">\n                        <h3 class=\"text-2xl font-bold text-center\">Basic<\/h3>\n                        <p class=\"text-center text-gray-500 mt-2\">\uac1c\uc778 \uc804\ubb38\uac00\uc6a9<\/p>\n                        <p class=\"text-4xl font-bold text-center my-6\">\uc6d4 5\ub9cc\uc6d0<\/p>\n                        <ul class=\"space-y-3 text-gray-600 flex-grow\">\n                            <li>\u2714\ufe0f \uc6d4 5\uac1c \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac<\/li>\n                            <li>\u2714\ufe0f \uc790\ub3d9 \uacac\uc801 \uc0b0\ucd9c<\/li>\n                            <li>\u2714\ufe0f \ud45c\uc900 \ubcf4\uace0\uc11c \uc0dd\uc131<\/li>\n                            <li>&#8211; \ud300 \ud611\uc5c5 \uae30\ub2a5 \ubbf8\uc81c\uacf5<\/li>\n                        <\/ul>\n                        <button class=\"mt-8 w-full bg-gray-200 text-gray-800 font-bold py-3 rounded-lg\">\ud50c\ub79c \uc120\ud0dd<\/button>\n                    <\/div>\n                    <div class=\"border-2 border-green-600 rounded-lg p-8 flex flex-col relative\">\n                        <div class=\"absolute top-0 -translate-y-1\/2 left-1\/2 -translate-x-1\/2 bg-green-600 text-white text-sm font-bold px-3 py-1 rounded-full\">\uac00\uc7a5 \uc778\uae30\uc788\ub294 \ud50c\ub79c<\/div>\n                        <h3 class=\"text-2xl font-bold text-center\">Pro<\/h3>\n                        <p class=\"text-center text-gray-500 mt-2\">\uc911\uc18c \uc218\ubaa9\uc9c4\ub8cc\uc5c5\uccb4\uc6a9<\/p>\n                        <p class=\"text-4xl font-bold text-center my-6\">\uc6d4 20\ub9cc\uc6d0<\/p>\n                         <ul class=\"space-y-3 text-gray-600 flex-grow\">\n                            <li>\u2714\ufe0f \ubb34\uc81c\ud55c \ud504\ub85c\uc81d\ud2b8 \uad00\ub9ac<\/li>\n                            <li>\u2714\ufe0f \uc790\ub3d9 \uacac\uc801 \uc0b0\ucd9c<\/li>\n                            <li>\u2714\ufe0f \ud45c\uc900 \ubcf4\uace0\uc11c \uc0dd\uc131<\/li>\n                            <li>\u2714\ufe0f \ud300\uc6d0 5\uba85\uae4c\uc9c0 \ucd08\ub300<\/li>\n                        <\/ul>\n                        <button class=\"mt-8 w-full bg-green-600 text-white font-bold py-3 rounded-lg hover:bg-green-700\">\ud50c\ub79c \uc120\ud0dd<\/button>\n                    <\/div>\n                    <div class=\"border rounded-lg p-8 flex flex-col\">\n                        <h3 class=\"text-2xl font-bold text-center\">Enterprise<\/h3>\n                        <p class=\"text-center text-gray-500 mt-2\">\uc9c0\uc790\uccb4 \ubc0f \uae30\uad00\uc6a9<\/p>\n                        <p class=\"text-4xl font-bold text-center my-6\">\ubcc4\ub3c4 \ubb38\uc758<\/p>\n                         <ul class=\"space-y-3 text-gray-600 flex-grow\">\n                            <li>\u2714\ufe0f Pro \ud50c\ub79c \ubaa8\ub4e0 \uae30\ub2a5<\/li>\n                            <li>\u2714\ufe0f \ubb34\uc81c\ud55c \ud300\uc6d0 \ucd08\ub300<\/li>\n                            <li>\u2714\ufe0f \ub9de\ucda4\ud615 \ubcf4\uace0\uc11c \uc591\uc2dd<\/li>\n                            <li>\u2714\ufe0f \ub370\uc774\ud130 \uc5f0\ub3d9 API \uc81c\uacf5<\/li>\n                        <\/ul>\n                        <button class=\"mt-8 w-full bg-gray-200 text-gray-800 font-bold py-3 rounded-lg\">\ubb38\uc758\ud558\uae30<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/main>\n    \n    <footer id=\"cta\" class=\"bg-gray-800 text-white py-16\">\n        <div class=\"container mx-auto px-6 text-center\">\n            <h2 class=\"text-3xl font-bold\">\uc9c0\uae08 \ubc14\ub85c \uc5c5\ubb34 \ud6a8\uc728\uc744 \ub192\uc5ec\ubcf4\uc138\uc694<\/h2>\n            <p class=\"mt-4 text-gray-300 max-w-xl mx-auto\">\n                &#8216;\ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0&#8217;\uac00 \ubcf5\uc7a1\ud55c \uc704\ud5d8\ubaa9 \uc9c4\ub2e8 \uc5c5\ubb34\ub97c \ud574\uacb0\ud574 \ub4dc\ub9bd\ub2c8\ub2e4. \uc9c0\uae08 \ubb34\ub8cc \uccb4\ud5d8\uc744 \uc2e0\uccad\ud558\uc138\uc694.\n            <\/p>\n            <a href=\"#\" class=\"mt-8 inline-block bg-green-600 text-white font-bold text-lg py-3 px-8 rounded-full hover:bg-green-700 transition-colors\">\ubb34\ub8cc \uccb4\ud5d8\ud310 \uc2e0\uccad<\/a>\n        <\/div>\n    <\/footer>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n    const projectTypeSelect = document.getElementById('projectType');\n    const treeCountInput = document.getElementById('treeCount');\n    const useTomographCheckbox = document.getElementById('useTomograph');\n    const useResistographCheckbox = document.getElementById('useResistograph');\n    \n    const quoteOutputDiv = document.getElementById('quote-output');\n    const totalPriceSpan = document.getElementById('total-price');\n    const finalPriceSpan = document.getElementById('final-price');\n    const type1Help = document.getElementById('type1-help');\n    const type2Help = document.getElementById('type2-help');\n\n    \/\/ From \ud45c\uc900\ud488\uc148 (2022\ub144 \uae30\uc900)\n    const costs = {\n        doctorDailyRate: 286967,\n        technicianDailyRate: 209667,\n        type1: { \/\/ \uc9d1\ub2e8\ubaa9 (300\uc8fc \uc774\ud558 \uae30\uc900)\n            baseTreeCount: 300,\n            doctorMD: 30.25,\n            technicianMD: 12.00,\n            tomographMD: { doctor: 14.25, technician: 4.50 }, \/\/ 30\uc8fc(10%) \uae30\uc900\n            resistographMD: { doctor: 6.00, technician: 3.00 }, \/\/ 30\uc8fc(10%) \uae30\uc900\n        },\n        type2: { \/\/ \ub2e8\ubaa9 (\uc8fc\ub2f9)\n            doctorMD: 0.25, \/\/ \uc721\uc548\uc815\ubc00\uc9c4\ub2e8\ub9cc\n            technicianMD: 0,\n            tomographMD: { doctor: 0.725, technician: 0.175 },\n            resistographMD: { doctor: 0.350, technician: 0.125 },\n            reportDoctorMD: 1.25, \/\/ \ubcf4\uace0\uc11c \uc791\uc131 MD (\ub2e8\ubaa9)\n            reportTechnicianMD: 0.5,\n        },\n        adminFeeRate: 0.06,\n        profitRate: 0.10,\n        vatRate: 0.10,\n    };\n\n    let quoteChart;\n\n    function formatCurrency(amount) {\n        return new Intl.NumberFormat('ko-KR').format(Math.round(amount)) + ' \uc6d0';\n    }\n\n    function calculateQuote() {\n        const projectType = projectTypeSelect.value;\n        const treeCount = parseInt(treeCountInput.value) || 0;\n        const useTomograph = useTomographCheckbox.checked;\n        const useResistograph = useResistographCheckbox.checked;\n\n        let totalDoctorMD = 0;\n        let totalTechnicianMD = 0;\n\n        if (projectType === 'type1') {\n            \/\/ I\ud615 (\uc9d1\ub2e8\ubaa9) \uacc4\uc0b0\n            const baseData = costs.type1;\n            \/\/ \uae30\ucd08\ud604\ud669\uc870\uc0ac + \ubcf4\uace0\uc11c \uc791\uc131 \ud488\uc148 (\ud45c 1-1. \ud569\uacc4 - \uc815\ubc00\uc9c4\ub2e8 \ud488\uc148)\n            totalDoctorMD = baseData.doctorMD - (useTomograph ? baseData.tomographMD.doctor : 0) - (useResistograph ? baseData.resistographMD.doctor : 0);\n            totalTechnicianMD = baseData.technicianMD - (useTomograph ? baseData.tomographMD.technician : 0) - (useResistograph ? baseData.resistographMD.technician : 0);\n\n            \/\/ \uc815\ubc00\uc9c4\ub2e8 \uc218\ub7c9\uc740 \uae30\ucd08\ud604\ud669\uc870\uc0ac \uc218\ub7c9\uc758 10%\n            const precisionTargetCount = Math.max(1, Math.ceil(treeCount * 0.1));\n\n            if (useTomograph) {\n                \/\/ \ud488\uc148\ud45c\ub294 30\uc8fc \uae30\uc900\uc774\ubbc0\ub85c, \uc2e4\uc81c \uc218\ub7c9\uc5d0 \ub9de\ucdb0 \uc870\uc815\n                totalDoctorMD += (baseData.tomographMD.doctor \/ 30) * precisionTargetCount;\n                totalTechnicianMD += (baseData.tomographMD.technician \/ 30) * precisionTargetCount;\n            }\n            if (useResistograph) {\n                totalDoctorMD += (baseData.resistographMD.doctor \/ 30) * precisionTargetCount;\n                totalTechnicianMD += (baseData.resistographMD.technician \/ 30) * precisionTargetCount;\n            }\n\n            \/\/ 300\uc8fc \ucd08\uacfc \uc2dc \uac00\uc0b0 \uc801\uc6a9 (\ud488\uc148 \uc8fc1)\n            if (treeCount > 300 && treeCount <= 600) { totalDoctorMD *= 1.7; totalTechnicianMD *= 1.7; }\n            else if (treeCount > 600 && treeCount <= 900) { totalDoctorMD *= 2.3; totalTechnicianMD *= 2.3; }\n            else if (treeCount > 900 && treeCount <= 1200) { totalDoctorMD *= 2.8; totalTechnicianMD *= 2.8; }\n            else if (treeCount > 1200) { totalDoctorMD *= 3.0; totalTechnicianMD *= 3.0; }\n\n        } else { \/\/ type2\n            \/\/ II\ud615 (\ub2e8\ubaa9) \uacc4\uc0b0 (\uc8fc\ub2f9)\n            const baseData = costs.type2;\n            let doctorMD_perTree = baseData.doctorMD + baseData.reportDoctorMD;\n            let technicianMD_perTree = baseData.technicianMD + baseData.reportTechnicianMD;\n\n            if (useTomograph) {\n                doctorMD_perTree += baseData.tomographMD.doctor;\n                technicianMD_perTree += baseData.tomographMD.technician;\n            }\n            if (useResistograph) {\n                doctorMD_perTree += baseData.resistographMD.doctor;\n                technicianMD_perTree += baseData.resistographMD.technician;\n            }\n\n            totalDoctorMD = doctorMD_perTree * treeCount;\n            totalTechnicianMD = technicianMD_perTree * treeCount;\n        }\n\n        const laborCostDoctor = totalDoctorMD * costs.doctorDailyRate;\n        const laborCostTechnician = totalTechnicianMD * costs.technicianDailyRate;\n        const totalLaborCost = laborCostDoctor + laborCostTechnician;\n\n        \/\/ \uacbd\ube44\ub294 \uc2e4\ube44 \uc0b0\uc815\uc774\uc9c0\ub9cc \ub370\ubaa8\ub97c \uc704\ud574 \uc778\uac74\ube44\uc758 \uc77c\ubd80\ub85c \uac00\uc815\n        const expenseCost = totalLaborCost * 0.15; \/\/ 15%\ub85c \uac00\uc815 (\uc5ec\ube44\uad50\ud1b5\ube44, \uc7a5\ube44\uc0ac\uc6a9\ub8cc \ub4f1)\n\n        const subtotal = totalLaborCost + expenseCost;\n        const adminFee = subtotal * costs.adminFeeRate;\n        const profit = (subtotal + adminFee) * costs.profitRate;\n        \n        const supplyPrice = subtotal + adminFee + profit;\n        const vat = supplyPrice * costs.vatRate;\n        const finalPrice = supplyPrice + vat;\n\n        updateUI({\n            totalLaborCost, expenseCost, adminFee, profit, supplyPrice, finalPrice\n        });\n    }\n\n    function updateUI(quote) {\n        quoteOutputDiv.innerHTML = `\n            <div class=\"flex justify-between\"><span>\uc9c1\uc811\uc778\uac74\ube44:<\/span> <span class=\"font-semibold\">${formatCurrency(quote.totalLaborCost)}<\/span><\/div>\n            <div class=\"flex justify-between\"><span>\uc81c\uacbd\ube44:<\/span> <span class=\"font-semibold\">${formatCurrency(quote.expenseCost)}<\/span><\/div>\n            <div class=\"flex justify-between\"><span>\uc77c\ubc18\uad00\ub9ac\ube44 (6%):<\/span> <span class=\"font-semibold\">${formatCurrency(quote.adminFee)}<\/span><\/div>\n            <div class=\"flex justify-between\"><span>\uc774\uc724 (10%):<\/span> <span class=\"font-semibold\">${formatCurrency(quote.profit)}<\/span><\/div>\n        `;\n        totalPriceSpan.textContent = formatCurrency(quote.supplyPrice);\n        finalPriceSpan.textContent = formatCurrency(quote.finalPrice);\n        \n        updateChart([quote.totalLaborCost, quote.expenseCost, quote.adminFee, quote.profit]);\n    }\n\n    function updateChart(data) {\n        if (!quoteChart) {\n            const ctx = document.getElementById('quoteChart').getContext('2d');\n            quoteChart = new Chart(ctx, {\n                type: 'bar',\n                data: {\n                    labels: ['\uc778\uac74\ube44', '\uc81c\uacbd\ube44', '\uc77c\ubc18\uad00\ub9ac\ube44', '\uc774\uc724'],\n                    datasets: [{\n                        label: '\ube44\uc6a9 \uad6c\uc131',\n                        data: data,\n                        backgroundColor: [\n                            'rgba(22, 163, 74, 0.7)',\n                            'rgba(59, 130, 246, 0.7)',\n                            'rgba(250, 204, 21, 0.7)',\n                            'rgba(239, 68, 68, 0.7)'\n                        ],\n                        borderWidth: 1\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    indexAxis: 'y',\n                    plugins: {\n                        legend: { display: false }\n                    },\n                    scales: {\n                        x: {\n                            beginAtZero: true,\n                            ticks: {\n                                callback: function(value) { return value \/ 10000 + '\ub9cc \uc6d0' }\n                            }\n                        }\n                    }\n                }\n            });\n        } else {\n            quoteChart.data.datasets[0].data = data;\n            quoteChart.update();\n        }\n    }\n    \n    function handleProjectTypeChange() {\n        if (projectTypeSelect.value === 'type1') {\n            type1Help.classList.remove('hidden');\n            type2Help.classList.add('hidden');\n        } else {\n            type1Help.classList.add('hidden');\n            type2Help.classList.remove('hidden');\n        }\n        calculateQuote();\n    }\n\n    projectTypeSelect.addEventListener('change', handleProjectTypeChange);\n    treeCountInput.addEventListener('input', calculateQuote);\n    useTomographCheckbox.addEventListener('change', calculateQuote);\n    useResistographCheckbox.addEventListener('change', calculateQuote);\n\n    \/\/ Initial calculation\n    handleProjectTypeChange();\n});\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0 &#8211; \uc704\ud5d8\ubaa9 \uc9c4\ub2e8 \uc790\ub3d9 \uacac\uc801 \ubc0f \ubcf4\uace0\uc11c \uc194\ub8e8\uc158 \ud83c\udf33 \ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0 \ud604\uc7a5\uc758 \uc5b4\ub824\uc6c0 \uc194\ub8e8\uc158 \uccb4\ud5d8 \uc694\uae08\uc81c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3968","post","type-post","status-publish","format-standard","hentry","category-_"],"acf":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"darius","author_link":"https:\/\/hstc.treecare.co.kr\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0 &#8211; \uc704\ud5d8\ubaa9 \uc9c4\ub2e8 \uc790\ub3d9 \uacac\uc801 \ubc0f \ubcf4\uace0\uc11c \uc194\ub8e8\uc158 \ud83c\udf33 \ud2b8\ub9ac M.D. \uc138\uc774\ud504\ud2f0 \ud604\uc7a5\uc758 \uc5b4\ub824\uc6c0 \uc194\ub8e8\uc158 \uccb4\ud5d8 \uc694\uae08\uc81c [&hellip;]","_links":{"self":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3968"}],"version-history":[{"count":1,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3968\/revisions"}],"predecessor-version":[{"id":3969,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/3968\/revisions\/3969"}],"wp:attachment":[{"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hstc.treecare.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}