{"id":1200,"date":"2025-12-08T10:54:49","date_gmt":"2025-12-08T10:54:49","guid":{"rendered":"https:\/\/wallstreet-journal-news.com\/?p=1200"},"modified":"2025-12-08T10:54:49","modified_gmt":"2025-12-08T10:54:49","slug":"%eb%b3%b4%ed%97%98%eb%a3%8c%ea%b3%84%ec%82%b0-%eb%ac%b4%eb%a3%8c%eb%b3%b4%ed%97%98%ec%83%81%eb%8b%b4","status":"publish","type":"post","link":"https:\/\/wallstreet-journal-news.com\/?p=1200","title":{"rendered":"\ubcf4\ud5d8\ub8cc\uacc4\uc0b0, \ubb34\ub8cc\ubcf4\ud5d8\uc0c1\ub2f4"},"content":{"rendered":"<p data-ke-size=\"size16\">&nbsp;<\/p>\n<p data-ke-size=\"size16\">&nbsp;<\/p>\n<p><script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script><br \/>\n<script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script><br \/>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><\/p>\n<p data-ke-size=\"size16\">&nbsp;<\/p>\n<div id=\"root\">&nbsp;<\/div>\n<p><script type=\"text\/babel\">\n        const { useState, useEffect } = React;<\/p>\n<p>        \/\/ Icons Components (Inline SVGs to avoid CDN issues)\n        const Shield = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>);\n        const CheckCircle = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>);\n        const Phone = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"\/><\/svg>);\n        const ArrowRight = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>);\n        const Activity = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>);\n        const Heart = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>);\n        const Menu = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>);\n        const X = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>);\n        const User = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>);\n        const Calendar = (props) => (<svg {...props} xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>);<\/p>\n<p>        \/\/ \uc0c1\ub2f4 \uc5f0\uacb0 \ub9c1\ud06c \uc0c1\uc218\n        const KAKAO_LINK = \"https:\/\/pf.kakao.com\/_xnlMDn\";<\/p>\n<p>        \/\/ \ud1b5\uc2e0\uc0ac \ubaa9\ub85d\n        const CARRIERS = ['SKT', 'KT', 'LG U+', '\uc54c\ub730\ud3f0'];\n        \/\/ \uc0c1\ub2f4 \uc694\uc77c \ubaa9\ub85d\n        const DAYS = ['\uc6d4\uc694\uc77c', '\ud654\uc694\uc77c', '\uc218\uc694\uc77c', '\ubaa9\uc694\uc77c', '\uae08\uc694\uc77c'];\n        \/\/ \uc0c1\ub2f4 \uc2dc\uac04 \ubaa9\ub85d\n        const TIMES = ['\uc624\uc804 10\uc2dc', '\uc624\uc804 11\uc2dc', '\uc624\ud6c4 1\uc2dc', '\uc624\ud6c4 2\uc2dc', '\uc624\ud6c4 3\uc2dc', '\uc624\ud6c4 4\uc2dc'];<\/p>\n<p>        const App = () => {\n            const [isMenuOpen, setIsMenuOpen] = useState(false);<\/p>\n<p>            \/\/ \uacc4\uc0b0\uae30 \uc0c1\ud0dc\n            const [step, setStep] = useState(1);\n            const [gender, setGender] = useState(null); \/\/ 'male', 'female'\n            const [age, setAge] = useState('');\n            const [hasSurgery, setHasSurgery] = useState(null); \/\/ 5\ub144\ub0b4 \uc218\uc220\/\uc785\uc6d0\n            const [hasMeds, setHasMeds] = useState(null); \/\/ \uc815\uae30 \ud22c\uc57d\n            const [premium, setPremium] = useState(0);\n            const [loading, setLoading] = useState(false);<\/p>\n<p>            \/\/ \ucd94\uac00 \uc561\uc158 \uc0c1\ud0dc (Step 6\/7)\n            const [name, setName] = useState('');\n            const [phone, setPhone] = useState('');\n            const [carrier, setCarrier] = useState(null);\n            const [desiredDay, setDesiredDay] = useState(null);\n            const [desiredTime, setDesiredTime] = useState(null);<\/p>\n<p>            const openKakao = () => {\n                window.open(KAKAO_LINK, '_blank');\n            };<\/p>\n<p>            const calculatePremium = () => {\n                setLoading(true);\n                \/\/ \uc2dc\ubbac\ub808\uc774\uc158 \ub85c\uc9c1 (\uc2e4\uc81c \ubcf4\ud5d8\ub8cc\ub294 \uc544\ub2d8)\n                setTimeout(() => {\n                    let base = 25000;\n                    const numAge = parseInt(age);<\/p>\n<p>                    \/\/ \ub098\uc774 \ud560\uc99d\n                    if (numAge > 20) {\n                        base += (numAge - 20) * 850;\n                    }<\/p>\n<p>                    \/\/ \uc131\ubcc4 \ubcf4\uc815 (\ub0a8\uc790\uac00 \ubcf4\ud1b5 3\ub300\uc9c8\ubcd1 \uc870\uae08 \ub354 \ube44\uc308)\n                    if (gender === 'male') base *= 1.15;<\/p>\n<p>                    \/\/ \ubcd1\ub825 \ud560\uc99d (\uc720\ubcd1\uc790 \ud50c\ub79c \uc804\ud658 \uc2dc\ubbac\ub808\uc774\uc158)\n                    if (hasSurgery || hasMeds) {\n                        base *= 1.4; \/\/ \uc720\ubcd1\uc790 \ud560\uc99d\n                    }<\/p>\n<p>                    \/\/ 10\uc6d0 \ub2e8\uc704 \uc808\uc0ac\n                    setPremium(Math.floor(base \/ 10) * 10);\n                    setLoading(false);\n                    setStep(4); \/\/ \uacb0\uacfc \ud654\uba74 (Step 4)\ub85c \uc774\ub3d9\n                }, 1000);\n            };<\/p>\n<p>            const handleRestart = () => {\n                setStep(1);\n                setGender(null);\n                setAge('');\n                setHasSurgery(null);\n                setHasMeds(null);\n                setName('');\n                setPhone('');\n                setCarrier(null);\n                setDesiredDay(null);\n                setDesiredTime(null);\n            };<\/p>\n<p>            \/\/ Step 3\uc5d0\uc11c Step 4\ub85c \ub118\uc5b4\uac00\uae30 \uc804 \uacc4\uc0b0 \uc2dc\uc791\n            const handleCalculateStart = () => {\n                if (hasSurgery !== null && hasMeds !== null) {\n                    setStep(3); \/\/ \ub85c\ub529 \ud654\uba74\uc73c\ub85c \uc774\ub3d9\n                    calculatePremium();\n                }\n            };<\/p>\n<p>            \/\/ \uc628\ub77c\uc778 \uac00\uc785 \uc815\ubcf4 \uc804\uc1a1 (Step 6)\n            const handleSubmitOnline = () => {\n                \/\/ \uc2e4\uc81c\ub85c\ub294 \uc11c\ubc84\ub85c \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud558\ub294 \ub85c\uc9c1\uc774 \ub4e4\uc5b4\uac11\ub2c8\ub2e4.\n                alert(`[\uc628\ub77c\uc778 \uac00\uc785 \uc2e0\uccad] \uc774\ub984: ${name}, \uc804\ud654\ubc88\ud638: ${phone}, \ud1b5\uc2e0\uc0ac: ${carrier}\\n\uc2e4\uc81c \uac00\uc785\uc744 \uc704\ud574 \uce74\uce74\uc624\ud1a1 \ucc44\ub110\ub85c \uc5f0\uacb0\ub429\ub2c8\ub2e4.`);\n                openKakao();\n            };<\/p>\n<p>            \/\/ \uc804\ubb38 \uc0c1\ub2f4 \uc608\uc57d \uc815\ubcf4 \uc804\uc1a1 (Step 7)\n            const handleSubmitConsult = () => {\n                \/\/ \uc2e4\uc81c\ub85c\ub294 \uc11c\ubc84\ub85c \ub370\uc774\ud130\ub97c \uc804\uc1a1\ud558\ub294 \ub85c\uc9c1\uc774 \ub4e4\uc5b4\uac11\ub2c8\ub2e4.\n                alert(`[\uc804\ubb38 \uc0c1\ub2f4 \uc608\uc57d] \ud76c\ub9dd \uc694\uc77c\/\uc2dc\uac04: ${desiredDay}, ${desiredTime}\\n\uc2e4\uc81c \uc0c1\ub2f4 \uc870\uc728\uc744 \uc704\ud574 \uce74\uce74\uc624\ud1a1 \ucc44\ub110\ub85c \uc5f0\uacb0\ub429\ub2c8\ub2e4.`);\n                openKakao();\n            };<\/p>\n<p>            \/\/ \ud504\ub85c\uadf8\ub808\uc2a4 \ubc14 \ub108\ube44 \uacc4\uc0b0\n            const getProgressWidth = () => {\n                if (step === 1) return '25%';\n                if (step === 2) return '50%';\n                if (step >= 4 && step <= 5) return '75%';\n                if (step >= 6) return '100%'; \n                return '0%';\n            }<\/p>\n<p>            const ProgressStep = ({ stepNumber, title }) => (<\/p>\n<div className={`flex flex-col items-center ${step >= stepNumber ? 'text-gray-900' : 'text-gray-400'}`}><\/p>\n<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold mb-1 transition-all ${step >= stepNumber ? 'bg-orange-500 text-white' : 'bg-gray-200'}`}>\n                        {stepNumber}\n                    <\/div>\n<p>                    <span className=\"text-xs font-medium hidden sm:block\">{title}<\/span>\n                <\/div>\n<p>            );<\/p>\n<p>            const renderProgress = () => (<\/p>\n<div className=\"flex justify-between items-start mb-8 w-full relative\">\n<div className=\"absolute top-4 h-1 bg-gray-200 w-full left-0 right-0 z-0\"><\/div>\n<div className=\"absolute top-4 h-1 bg-orange-500 transition-all duration-500 z-10\" style={{width: getProgressWidth()}}><\/div>\n<p>                    <ProgressStep stepNumber={1} title=\"\uae30\ubcf8 \uc815\ubcf4\" \/>\n                    <ProgressStep stepNumber={2} title=\"\ubcd1\ub825 \ud655\uc778\" \/>\n                    <ProgressStep stepNumber={4} title=\"\uacb0\uacfc \ud655\uc778\" \/>\n                    <ProgressStep stepNumber={5} title=\"\ub2e4\uc74c \ub2e8\uacc4\" \/>\n                    <ProgressStep stepNumber={6} title=\"\ucd5c\uc885 \uc2e0\uccad\" \/>\n                <\/div>\n<p>            )<\/p>\n<p>            return (<\/p>\n<div className=\"min-h-screen bg-gray-50 text-gray-800\">\n                    {\/* Header *\/}<\/p>\n<header className=\"bg-white shadow-sm sticky top-0 z-50\">\n<div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n<div className=\"flex justify-between items-center h-16\">\n<div className=\"flex items-center cursor-pointer\" onClick={() => window.location.reload()}>\n                                    <Shield className=\"h-8 w-8 text-orange-500 mr-2\" \/>\n                                    <span className=\"font-bold text-xl tracking-tight text-gray-900\">The Care <span className=\"text-sm font-normal text-gray-500\">by \uc120\uc778\uc7a5\ub098\ub77c<\/span><\/span>\n                                <\/div>\n<div className=\"hidden md:flex space-x-8\">\n                                    <a href=\"#\" className=\"text-gray-600 hover:text-orange-500 font-medium\">\uc0c1\ud488\uc548\ub0b4<\/a>\n                                    <a href=\"#\" className=\"text-gray-600 hover:text-orange-500 font-medium\">\ubcf4\uc7a5\ub0b4\uc6a9<\/a>\n                                    <a href=\"#calculator\" className=\"text-gray-600 hover:text-orange-500 font-medium\">\ubcf4\ud5d8\ub8cc\uacc4\uc0b0<\/a>\n                                <\/div>\n<div className=\"flex items-center\">\n                                    <button \n                                        onClick={openKakao}\n                                        className=\"hidden md:flex items-center bg-yellow-400 hover:bg-yellow-500 text-black px-4 py-2 rounded-full font-bold transition duration-300 shadow-sm\"\n                                    >\n                                        <span className=\"mr-1\">\ud83d\udcac<\/span> \uc120\uc778\uc7a5\ub098\ub77c \uc0c1\ub2f4\ud1a1\n                                    <\/button><\/p>\n<div className=\"md:hidden ml-4\">\n                                        <button onClick={() => setIsMenuOpen(!isMenuOpen)}>\n                                            {isMenuOpen ? <X \/> : <Menu \/>}\n                                        <\/button>\n                                    <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                        {\/* Mobile Menu *\/}\n                        {isMenuOpen && (<\/p>\n<div className=\"md:hidden bg-white border-t p-4 space-y-3 animate-fade-in\">\n                                <a href=\"#\" className=\"block text-gray-600 font-medium\">\uc0c1\ud488\uc548\ub0b4<\/a>\n                                <a href=\"#\" className=\"block text-gray-600 font-medium\">\ubcf4\uc7a5\ub0b4\uc6a9<\/a>\n                                <button onClick={openKakao} className=\"w-full bg-yellow-400 text-black py-2 rounded-lg font-bold\">\n                                    \uce74\uce74\uc624\ud1a1 \uc0c1\ub2f4\ud558\uae30\n                                <\/button>\n                            <\/div>\n<p>                        )}\n                    <\/header>\n<p>                    {\/* Hero Section *\/}<\/p>\n<div className=\"relative bg-white overflow-hidden\">\n<div className=\"max-w-6xl mx-auto\">\n<div className=\"relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32\">\n                                <main className=\"mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28\"><\/p>\n<div className=\"sm:text-center lg:text-left\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_71 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EB%82%98%EB%A5%BC_%EC%9C%84%ED%95%9C_%EB%A7%9E%EC%B6%A4_%EB%B3%B4%ED%97%98_10%EC%B4%88_%EB%A7%8C%EC%97%90_%ED%99%95%EC%9D%B8\" title=\"\ub098\ub97c \uc704\ud55c \ub9de\ucda4 \ubcf4\ud5d8{&#039; &#039;}\n                                            10\ucd08 \ub9cc\uc5d0 \ud655\uc778\">\ub098\ub97c \uc704\ud55c \ub9de\ucda4 \ubcf4\ud5d8{' '}\n                                            10\ucd08 \ub9cc\uc5d0 \ud655\uc778<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EB%82%B4_%EB%B3%B4%ED%97%98%EB%A3%8C_10%EC%B4%88_%ED%99%95%EC%9D%B8\" title=\"\ub0b4 \ubcf4\ud5d8\ub8cc 10\ucd08 \ud655\uc778\">\ub0b4 \ubcf4\ud5d8\ub8cc 10\ucd08 \ud655\uc778<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EC%A0%95%ED%99%95%ED%95%9C_%EC%82%B0%EC%B6%9C%EC%9D%84_%EC%9C%84%ED%95%9C_%EB%B3%91%EB%A0%A5_%ED%99%95%EC%9D%B8\" title=\"\uc815\ud655\ud55c \uc0b0\ucd9c\uc744 \uc704\ud55c \ubcd1\ub825 \ud655\uc778\">\uc815\ud655\ud55c \uc0b0\ucd9c\uc744 \uc704\ud55c \ubcd1\ub825 \ud655\uc778<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EC%B5%9C%EC%A0%81%EC%9D%98_%ED%94%8C%EB%9E%9C%EC%9D%84_%EA%B3%84%EC%82%B0%EC%A4%91%EC%9E%85%EB%8B%88%EB%8B%A4\" title=\"\ucd5c\uc801\uc758 \ud50c\ub79c\uc744 \uacc4\uc0b0\uc911\uc785\ub2c8\ub2e4...\">\ucd5c\uc801\uc758 \ud50c\ub79c\uc744 \uacc4\uc0b0\uc911\uc785\ub2c8\ub2e4...<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#age%EC%84%B8_gender_male_%EB%82%A8%EC%84%B1_%EC%97%AC%EC%84%B1_%EA%B3%A0%EA%B0%9D%EB%8B%98_hasSurgery_hasMeds_%EC%9C%A0%EB%B3%91%EC%9E%90_%ED%94%8C%EB%9E%9C_%ED%91%9C%EC%A4%80_%ED%94%8C%EB%9E%9C_%EC%98%88%EC%83%81_%EB%B3%B4%ED%97%98%EB%A3%8C\" title=\"{age}\uc138 {gender === &#039;male&#039; ? &#039;\ub0a8\uc131&#039; : &#039;\uc5ec\uc131&#039;} \uace0\uac1d\ub2d8 \n                                                        {(hasSurgery || hasMeds) ? &#039;\uc720\ubcd1\uc790 \ud50c\ub79c&#039; : &#039;\ud45c\uc900 \ud50c\ub79c&#039;} \uc608\uc0c1 \ubcf4\ud5d8\ub8cc\">{age}\uc138 {gender === 'male' ? '\ub0a8\uc131' : '\uc5ec\uc131'} \uace0\uac1d\ub2d8 \n                                                        {(hasSurgery || hasMeds) ? '\uc720\ubcd1\uc790 \ud50c\ub79c' : '\ud45c\uc900 \ud50c\ub79c'} \uc608\uc0c1 \ubcf4\ud5d8\ub8cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EC%96%B4%EB%96%A4_%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C_%EC%A7%84%ED%96%89%ED%95%98%EC%8B%9C%EA%B2%A0%EC%96%B4%EC%9A%94\" title=\"\uc5b4\ub5a4 \ubc29\ubc95\uc73c\ub85c \uc9c4\ud589\ud558\uc2dc\uaca0\uc5b4\uc694?\">\uc5b4\ub5a4 \ubc29\ubc95\uc73c\ub85c \uc9c4\ud589\ud558\uc2dc\uaca0\uc5b4\uc694?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%F0%9F%93%9D_%EC%98%A8%EB%9D%BC%EC%9D%B8_%EA%B0%80%EC%9E%85%EC%9D%84_%EC%9C%84%ED%95%9C_%EC%A0%95%EB%B3%B4_%EC%9E%85%EB%A0%A5\" title=\"\ud83d\udcdd \uc628\ub77c\uc778 \uac00\uc785\uc744 \uc704\ud55c \uc815\ubcf4 \uc785\ub825\">\ud83d\udcdd \uc628\ub77c\uc778 \uac00\uc785\uc744 \uc704\ud55c \uc815\ubcf4 \uc785\ub825<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%F0%9F%93%9E_%EC%83%81%EB%8B%B4_%ED%9D%AC%EB%A7%9D_%EC%8B%9C%EA%B0%84_%EC%84%A0%ED%83%9D\" title=\"\ud83d\udcde \uc0c1\ub2f4 \ud76c\ub9dd \uc2dc\uac04 \uc120\ud0dd\">\ud83d\udcde \uc0c1\ub2f4 \ud76c\ub9dd \uc2dc\uac04 \uc120\ud0dd<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EC%99%9C_%EC%84%A0%EC%9D%B8%EC%9E%A5%EB%82%98%EB%9D%BC_%EC%9D%B8%EA%B0%80%EC%9A%94\" title=\"\uc65c &#039;\uc120\uc778\uc7a5\ub098\ub77c&#039; \uc778\uac00\uc694?\">\uc65c '\uc120\uc778\uc7a5\ub098\ub77c' \uc778\uac00\uc694?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#3%EB%8C%80_%EC%A7%88%EB%B3%91_%EC%A7%91%EC%A4%91_%EB%B3%B4%EC%9E%A5\" title=\"3\ub300 \uc9c8\ubcd1 \uc9d1\uc911 \ubcf4\uc7a5\">3\ub300 \uc9c8\ubcd1 \uc9d1\uc911 \ubcf4\uc7a5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EC%9C%A0%EB%B3%91%EC%9E%90%EB%8F%84_%EA%B0%80%EC%9E%85_%EA%B0%80%EB%8A%A5\" title=\"\uc720\ubcd1\uc790\ub3c4 \uac00\uc785 \uac00\ub2a5\">\uc720\ubcd1\uc790\ub3c4 \uac00\uc785 \uac00\ub2a5<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#1_1_%EB%B0%80%EC%B0%A9_%EA%B4%80%EB%A6%AC\" title=\"1:1 \ubc00\ucc29 \uad00\ub9ac\">1:1 \ubc00\ucc29 \uad00\ub9ac<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/wallstreet-journal-news.com\/?p=1200\/#%EC%84%A0%EC%9D%B8%EC%9E%A5%EB%82%98%EB%9D%BC\" title=\"\uc120\uc778\uc7a5\ub098\ub77c\">\uc120\uc778\uc7a5\ub098\ub77c<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1 className=\"text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl\"><span class=\"ez-toc-section\" id=\"%EB%82%98%EB%A5%BC_%EC%9C%84%ED%95%9C_%EB%A7%9E%EC%B6%A4_%EB%B3%B4%ED%97%98_10%EC%B4%88_%EB%A7%8C%EC%97%90_%ED%99%95%EC%9D%B8\"><\/span>\n                                            <span className=\"block xl:inline\">\ub098\ub97c \uc704\ud55c \ub9de\ucda4 \ubcf4\ud5d8<\/span>{' '}\n                                            <span className=\"block text-orange-500 xl:inline\">10\ucd08 \ub9cc\uc5d0 \ud655\uc778<\/span>\n                                        <span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p className=\"mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0\">\n                                            \uc218\uc220 \uc774\ub825\uc774 \uc788\uc5b4\ub3c4, \uc57d\uc744 \ub4dc\uc154\ub3c4 \uad1c\ucc2e\uc2b5\ub2c8\ub2e4.<br \/>\n                                            \uc120\uc778\uc7a5\ub098\ub77c\uac00 \ub2f9\uc2e0\uc5d0\uac8c \uaf2d \ub9de\ub294 \ucd5c\uc801\uc758 \ud50c\ub79c\uc744 \ucc3e\uc544\ub4dc\ub9bd\ub2c8\ub2e4.\n                                        <\/p>\n<div className=\"mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start\">\n<div className=\"rounded-md shadow\">\n                                                <button onClick={() => document.getElementById('calculator').scrollIntoView({behavior: 'smooth'})} className=\"w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-orange-500 hover:bg-orange-600 md:py-4 md:text-lg\">\n                                                    \ubcf4\ud5d8\ub8cc \uc54c\uc544\ubcf4\uae30\n                                                <\/button>\n                                            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>                                <\/main>\n                            <\/div>\n<\/p><\/div>\n<div className=\"lg:absolute lg:inset-y-0 lg:right-0 lg:w-1\/2 bg-orange-50\">\n                            <img decoding=\"async\" className=\"h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full opacity-80\" src=\"https:\/\/images.unsplash.com\/photo-1516574187841-693083f049cb?ixlib=rb-1.2.1&#038;auto=format&#038;fit=crop&#038;w=1350&#038;q=80\" alt=\"\ub530\ub73b\ud55c \ubcf4\uc7a5\uc758 \uc774\ubbf8\uc9c0\" \/>\n                        <\/div>\n<\/p><\/div>\n<p>                    {\/* Calculator Section *\/}<\/p>\n<section id=\"calculator\" className=\"py-16 bg-gray-50\">\n<div className=\"max-w-3xl mx-auto px-4 sm:px-6 lg:px-8\">\n<div className=\"bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100\">\n<div className=\"px-6 py-8 sm:p-10\">\n<div className=\"text-center mb-8\">\n<h2 className=\"text-3xl font-extrabold text-gray-900\"><span class=\"ez-toc-section\" id=\"%EB%82%B4_%EB%B3%B4%ED%97%98%EB%A3%8C_10%EC%B4%88_%ED%99%95%EC%9D%B8\"><\/span>\ub0b4 \ubcf4\ud5d8\ub8cc 10\ucd08 \ud655\uc778<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p className=\"mt-2 text-gray-500\">\uac04\ub2e8\ud55c \uc815\ubcf4 \uc785\ub825\uc73c\ub85c \uc608\uc0c1 \ubcf4\ud5d8\ub8cc\ub97c \ud655\uc778\ud558\uc138\uc694.<\/p>\n<\/p><\/div>\n<p>                                    {\/* Progress Bar *\/}\n                                    {renderProgress()}<\/p>\n<div className=\"min-h-[300px] flex flex-col justify-center\">\n<p>                                        {\/* Step 1: Gender & Age *\/}\n                                        {step === 1 && (<\/p>\n<div className=\"animate-fade-in space-y-6\">\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\uc131\ubcc4\uc744 \uc120\ud0dd\ud574\uc8fc\uc138\uc694<\/label><\/p>\n<div className=\"grid grid-cols-2 gap-4\">\n                                                        <button \n                                                            onClick={() => setGender('male')}\n                                                            className={`p-4 rounded-xl border-2 flex flex-col items-center justify-center transition-all ${gender === 'male' ? 'border-orange-500 bg-orange-50 text-orange-600' : 'border-gray-200 hover:border-orange-300'}`}\n                                                        >\n                                                            <span className=\"text-2xl mb-1\">\ud83d\udc68<\/span>\n                                                            <span className=\"font-bold\">\ub0a8\uc131<\/span>\n                                                        <\/button>\n                                                        <button \n                                                            onClick={() => setGender('female')}\n                                                            className={`p-4 rounded-xl border-2 flex flex-col items-center justify-center transition-all ${gender === 'female' ? 'border-orange-500 bg-orange-50 text-orange-600' : 'border-gray-200 hover:border-orange-300'}`}\n                                                        >\n                                                            <span className=\"text-2xl mb-1\">\ud83d\udc69<\/span>\n                                                            <span className=\"font-bold\">\uc5ec\uc131<\/span>\n                                                        <\/button>\n                                                    <\/div>\n<\/p><\/div>\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\ub098\uc774(\ub9cc)<\/label>\n                                                    <input \n                                                        type=\"number\" \n                                                        value={age}\n                                                        onChange={(e) => setAge(e.target.value)}\n                                                        placeholder=\"\uc608: 35\"\n                                                        className=\"w-full p-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition\"\n                                                    \/>\n                                                <\/div>\n<p>                                                <button \n                                                    disabled={!gender || !age || parseInt(age) < 1}\n                                                    onClick={() => setStep(2)}\n                                                    className={`w-full py-4 rounded-xl text-lg font-bold text-white transition-all ${(!gender || !age || parseInt(age) < 1) ? 'bg-gray-300 cursor-not-allowed' : 'bg-gray-900 hover:bg-black btn-shadow'}`}\n                                                >\n                                                    \ub2e4\uc74c\n                                                <\/button>\n                                            <\/div>\n<p>                                        )}<\/p>\n<p>                                        {\/* Step 2: Medical History *\/}\n                                        {step === 2 && (<\/p>\n<div className=\"animate-fade-in space-y-6\">\n<h3 className=\"text-xl font-bold text-gray-900 text-center mb-4\"><span class=\"ez-toc-section\" id=\"%EC%A0%95%ED%99%95%ED%95%9C_%EC%82%B0%EC%B6%9C%EC%9D%84_%EC%9C%84%ED%95%9C_%EB%B3%91%EB%A0%A5_%ED%99%95%EC%9D%B8\"><\/span>\uc815\ud655\ud55c \uc0b0\ucd9c\uc744 \uc704\ud55c \ubcd1\ub825 \ud655\uc778<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div className=\"space-y-4\">\n<div>\n<p className=\"text-sm font-medium text-gray-700 mb-2\">1. \ucd5c\uadfc 5\ub144 \uc774\ub0b4 \uc785\uc6d0 \ub610\ub294 \uc218\uc220 \uc774\ub825\uc774 \uc788\ub098\uc694?<\/p>\n<div className=\"grid grid-cols-2 gap-3\">\n                                                            <button onClick={() => setHasSurgery(true)} className={`py-3 rounded-lg border font-medium transition-all ${hasSurgery === true ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\ub124, \uc788\uc2b5\ub2c8\ub2e4<\/button>\n                                                            <button onClick={() => setHasSurgery(false)} className={`py-3 rounded-lg border font-medium transition-all ${hasSurgery === false ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\uc544\ub2c8\uc694<\/button>\n                                                        <\/div>\n<\/p><\/div>\n<div>\n<p className=\"text-sm font-medium text-gray-700 mb-2\">2. \ud604\uc7ac \uc815\uae30\uc801\uc73c\ub85c \ubcf5\uc6a9\uc911\uc778 \uc57d\uc774 \uc788\ub098\uc694?<\/p>\n<div className=\"grid grid-cols-2 gap-3\">\n                                                            <button onClick={() => setHasMeds(true)} className={`py-3 rounded-lg border font-medium transition-all ${hasMeds === true ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\ub124, \uc788\uc2b5\ub2c8\ub2e4<\/button>\n                                                            <button onClick={() => setHasMeds(false)} className={`py-3 rounded-lg border font-medium transition-all ${hasMeds === false ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\uc544\ub2c8\uc694<\/button>\n                                                        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div className=\"flex space-x-3 pt-4\">\n                                                    <button onClick={() => setStep(1)} className=\"flex-1 py-4 border border-gray-300 rounded-xl text-gray-600 font-bold hover:bg-gray-50\">\uc774\uc804<\/button>\n                                                    <button \n                                                        disabled={hasSurgery === null || hasMeds === null}\n                                                        onClick={handleCalculateStart}\n                                                        className={`flex-[2] py-4 rounded-xl text-lg font-bold text-white transition-all ${(hasSurgery === null || hasMeds === null) ? 'bg-gray-300 cursor-not-allowed' : 'bg-gray-900 hover:bg-black btn-shadow'}`}\n                                                    >\n                                                        \uacb0\uacfc \ubcf4\uae30\n                                                    <\/button>\n                                                <\/div>\n<\/p><\/div>\n<p>                                        )}<\/p>\n<p>                                        {\/* Step 3: Calculation Loader *\/}\n                                        {step === 3 && (<\/p>\n<div className=\"flex flex-col items-center justify-center animate-fade-in py-10\">\n                                                {loading ? (\n                                                    <><\/p>\n<div className=\"animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-orange-500 mb-6\"><\/div>\n<h3 className=\"text-xl font-bold text-gray-800\"><span class=\"ez-toc-section\" id=\"%EC%B5%9C%EC%A0%81%EC%9D%98_%ED%94%8C%EB%9E%9C%EC%9D%84_%EA%B3%84%EC%82%B0%EC%A4%91%EC%9E%85%EB%8B%88%EB%8B%A4\"><\/span>\ucd5c\uc801\uc758 \ud50c\ub79c\uc744 \uacc4\uc0b0\uc911\uc785\ub2c8\ub2e4...<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p className=\"text-gray-500 mt-2\">\uace0\uac1d\ub2d8\uc758 \uc5f0\ub839\uacfc \ubcd1\ub825\uc744 \ubd84\uc11d\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>                                                    <\/>\n                                                ) : (\n                                                    <><\/> \/\/ \uc774\ubbf8 calculatePremium\uc774 Step 3 \uc9c4\uc785 \uc2dc \uc2e4\ud589\ub418\ubbc0\ub85c, \ub85c\ub529\uc774 \ub05d\ub098\uba74 Step 4\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4.\n                                                )}\n                                            <\/div>\n<p>                                        )}<\/p>\n<p>                                        {\/* Step 4: Result Summary *\/}\n                                        {step === 4 && (<\/p>\n<div className=\"animate-fade-in text-center\">\n<div className=\"mb-6\">\n                                                    <span className=\"inline-block px-3 py-1 bg-green-100 text-green-700 text-sm font-bold rounded-full mb-2\">\ubd84\uc11d \uc644\ub8cc<\/span><\/p>\n<h3 className=\"text-2xl font-bold text-gray-900\"><span class=\"ez-toc-section\" id=\"age%EC%84%B8_gender_male_%EB%82%A8%EC%84%B1_%EC%97%AC%EC%84%B1_%EA%B3%A0%EA%B0%9D%EB%8B%98_hasSurgery_hasMeds_%EC%9C%A0%EB%B3%91%EC%9E%90_%ED%94%8C%EB%9E%9C_%ED%91%9C%EC%A4%80_%ED%94%8C%EB%9E%9C_%EC%98%88%EC%83%81_%EB%B3%B4%ED%97%98%EB%A3%8C\"><\/span>\n                                                        {age}\uc138 {gender === 'male' ? '\ub0a8\uc131' : '\uc5ec\uc131'} \uace0\uac1d\ub2d8<br \/>\n                                                        {(hasSurgery || hasMeds) ? '\uc720\ubcd1\uc790 \ud50c\ub79c' : '\ud45c\uc900 \ud50c\ub79c'} \uc608\uc0c1 \ubcf4\ud5d8\ub8cc\n                                                    <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/p><\/div>\n<div className=\"bg-orange-50 rounded-2xl p-6 mb-6 border border-orange-100\">\n<div className=\"flex justify-between items-end border-b border-orange-200 pb-4 mb-4\">\n                                                        <span className=\"text-gray-600 font-medium\">\uc6d4 \uc608\uc0c1 \ub0a9\uc785\ub8cc<\/span>\n                                                        <span className=\"text-5xl font-extrabold text-orange-600\">{premium.toLocaleString()}<span className=\"text-2xl text-gray-800\">\uc6d0<\/span><\/span>\n                                                    <\/div>\n<ul className=\"text-left text-sm text-gray-600 space-y-2\">\n<li className=\"flex items-center\"><CheckCircle className=\"w-4 h-4 text-orange-500 mr-2\" \/> \uc554 \uc9c4\ub2e8\ube44 (\uc720\uc0ac\uc554 \ud3ec\ud568)<\/li>\n<li className=\"flex items-center\"><CheckCircle className=\"w-4 h-4 text-orange-500 mr-2\" \/> \ub1cc\ud608\uad00 \/ \ud5c8\ud608\uc131\uc2ec\uc7a5 \uc9c8\ud658 \uc9c4\ub2e8\ube44<\/li>\n<li className=\"flex items-center\"><CheckCircle className=\"w-4 h-4 text-orange-500 mr-2\" \/> \uc9c8\ubcd1\/\uc0c1\ud574 \uc218\uc220\ube44 \ubc0f \uc785\uc6d0\uc77c\ub2f9<\/li>\n<\/ul><\/div>\n<p className=\"text-xs text-gray-400 mb-6\">* \uc704 \uae08\uc561\uc740 \uc608\uc0c1 \uc0b0\ucd9c\uc561\uc73c\ub85c, \uc2e4\uc81c \uac00\uc785 \uc2dc\uc810 \ubc0f \uc0c1\uc138 \ud2b9\uc57d \uad6c\uc131\uc5d0 \ub530\ub77c \ub2ec\ub77c\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>                                                <button onClick={() => setStep(5)} className=\"w-full py-4 rounded-xl text-lg font-bold text-white bg-orange-500 hover:bg-orange-600 btn-shadow\">\n                                                    \ub2e4\uc74c \ub2e8\uacc4 \uc120\ud0dd\ud558\uae30 <ArrowRight className=\"inline w-5 h-5 ml-1\"\/>\n                                                <\/button>\n                                                <button onClick={handleRestart} className=\"w-full py-3 text-gray-500 hover:text-gray-800 underline mt-2\">\n                                                    \ub2e4\uc2dc \uacc4\uc0b0\ud558\uae30\n                                                <\/button>\n                                            <\/div>\n<p>                                        )}<\/p>\n<p>                                        {\/* Step 5: Next Action Selection *\/}\n                                        {step === 5 && (<\/p>\n<div className=\"animate-fade-in text-center space-y-6\">\n<h3 className=\"text-2xl font-bold text-gray-900 mb-4\"><span class=\"ez-toc-section\" id=\"%EC%96%B4%EB%96%A4_%EB%B0%A9%EB%B2%95%EC%9C%BC%EB%A1%9C_%EC%A7%84%ED%96%89%ED%95%98%EC%8B%9C%EA%B2%A0%EC%96%B4%EC%9A%94\"><\/span>\uc5b4\ub5a4 \ubc29\ubc95\uc73c\ub85c \uc9c4\ud589\ud558\uc2dc\uaca0\uc5b4\uc694?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>                                                <button \n                                                    onClick={() => setStep(6)}\n                                                    className=\"w-full py-5 rounded-xl text-xl font-bold text-white bg-gray-900 hover:bg-black shadow-lg transition-all flex items-center justify-center space-x-2\"\n                                                >\n                                                    <User className=\"w-6 h-6\"\/> <span>\uc628\ub77c\uc778\uc73c\ub85c \ubc14\ub85c \uac00\uc785\ud558\uae30<\/span>\n                                                <\/button><\/p>\n<p>                                                <button \n                                                    onClick={() => setStep(7)}\n                                                    className=\"w-full py-5 rounded-xl text-xl font-bold text-black bg-yellow-400 hover:bg-yellow-500 shadow-lg transition-all flex items-center justify-center space-x-2 animate-pulse\"\n                                                >\n                                                    <Phone className=\"w-6 h-6\"\/> <span>\uc804\ubb38 \uc0c1\ub2f4\uc0ac\uc640 \ud1b5\ud654\ud558\uae30<\/span>\n                                                <\/button><\/p>\n<p>                                                <button onClick={() => setStep(4)} className=\"text-gray-500 hover:text-gray-800 underline mt-4\">\n                                                    \uc774\uc804 \uacb0\uacfc \ud654\uba74\uc73c\ub85c \ub3cc\uc544\uac00\uae30\n                                                <\/button>\n                                            <\/div>\n<p>                                        )}<\/p>\n<p>                                        {\/* Step 6: Online Application Form *\/}\n                                        {step === 6 && (<\/p>\n<div className=\"animate-fade-in space-y-6\">\n<h3 className=\"text-2xl font-bold text-gray-900 text-center\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%9D_%EC%98%A8%EB%9D%BC%EC%9D%B8_%EA%B0%80%EC%9E%85%EC%9D%84_%EC%9C%84%ED%95%9C_%EC%A0%95%EB%B3%B4_%EC%9E%85%EB%A0%A5\"><\/span>\ud83d\udcdd \uc628\ub77c\uc778 \uac00\uc785\uc744 \uc704\ud55c \uc815\ubcf4 \uc785\ub825<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p className=\"text-center text-sm text-gray-500\">\uc815\ubcf4 \uc785\ub825 \ud6c4, \ucd5c\uc885 \ud655\uc778 \ubc0f \uacb0\uc81c\ub97c \uc704\ud574 \uce74\uce74\uc624\ud1a1 \ucc44\ub110\ub85c \uc5f0\uacb0\ub429\ub2c8\ub2e4.<\/p>\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\uc774\ub984<\/label>\n                                                    <input type=\"text\" value={name} onChange={(e) => setName(e.target.value)} placeholder=\"\uc2e4\uba85 \uc785\ub825\" className=\"w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition\" \/>\n                                                <\/div>\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\uc804\ud654\ubc88\ud638<\/label>\n                                                    <input type=\"tel\" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder=\"010-0000-0000\" className=\"w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none transition\" \/>\n                                                <\/div>\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\ud1b5\uc2e0\uc0ac<\/label><\/p>\n<div className=\"grid grid-cols-4 gap-2\">\n                                                        {CARRIERS.map(c => (\n                                                            <button key={c} onClick={() => setCarrier(c)} className={`py-2 rounded-lg border font-medium transition-all text-sm ${carrier === c ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\n                                                                {c}\n                                                            <\/button>\n                                                        ))}\n                                                    <\/div>\n<\/p><\/div>\n<p>                                                <button \n                                                    disabled={!name || !phone || !carrier}\n                                                    onClick={handleSubmitOnline}\n                                                    className={`w-full py-4 rounded-xl text-lg font-bold text-white transition-all ${(!name || !phone || !carrier) ? 'bg-gray-300 cursor-not-allowed' : 'bg-gray-900 hover:bg-black btn-shadow'}`}\n                                                >\n                                                    \uc815\ubcf4 \uc81c\ucd9c \ubc0f \uce74\uce74\uc624\ud1a1\uc73c\ub85c \uc5f0\uacb0\n                                                <\/button>\n                                                <button onClick={() => setStep(5)} className=\"w-full py-3 text-gray-500 hover:text-gray-800 underline\">\uc774\uc804 \ub2e8\uacc4<\/button>\n                                            <\/div>\n<p>                                        )}<\/p>\n<p>                                        {\/* Step 7: Consultation Schedule Form *\/}\n                                        {step === 7 && (<\/p>\n<div className=\"animate-fade-in space-y-6\">\n<h3 className=\"text-2xl font-bold text-gray-900 text-center\"><span class=\"ez-toc-section\" id=\"%F0%9F%93%9E_%EC%83%81%EB%8B%B4_%ED%9D%AC%EB%A7%9D_%EC%8B%9C%EA%B0%84_%EC%84%A0%ED%83%9D\"><\/span>\ud83d\udcde \uc0c1\ub2f4 \ud76c\ub9dd \uc2dc\uac04 \uc120\ud0dd<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p className=\"text-center text-sm text-gray-500\">\uc120\ud0dd\ud558\uc2e0 \uc2dc\uac04\ub300\uc5d0 \uc804\ubb38 \uc0c1\ub2f4\uc0ac\uac00 \uc5f0\ub77d\ub4dc\ub9bd\ub2c8\ub2e4. (\ucd5c\uc885 \uc870\uc728\uc740 \uce74\uce74\uc624\ud1a1\uc73c\ub85c \uc9c4\ud589)<\/p>\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2\">\ud76c\ub9dd \uc0c1\ub2f4 \uc694\uc77c<\/label><\/p>\n<div className=\"grid grid-cols-3 gap-2 sm:grid-cols-5\">\n                                                        {DAYS.map(day => (\n                                                            <button key={day} onClick={() => setDesiredDay(day)} className={`py-2 rounded-lg border font-medium transition-all text-sm ${desiredDay === day ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\n                                                                {day}\n                                                            <\/button>\n                                                        ))}\n                                                    <\/div>\n<\/p><\/div>\n<div>\n                                                    <label className=\"block text-sm font-medium text-gray-700 mb-2 mt-4\">\ud76c\ub9dd \uc0c1\ub2f4 \uc2dc\uac04<\/label><\/p>\n<div className=\"grid grid-cols-3 gap-2 sm:grid-cols-3\">\n                                                        {TIMES.map(time => (\n                                                            <button key={time} onClick={() => setDesiredTime(time)} className={`py-2 rounded-lg border font-medium transition-all text-sm ${desiredTime === time ? 'bg-orange-500 text-white border-orange-500' : 'bg-white text-gray-600 border-gray-300 hover:border-orange-300'}`}>\n                                                                {time}\n                                                            <\/button>\n                                                        ))}\n                                                    <\/div>\n<\/p><\/div>\n<p>                                                <button \n                                                    disabled={!desiredDay || !desiredTime}\n                                                    onClick={handleSubmitConsult}\n                                                    className={`w-full py-4 rounded-xl text-lg font-bold text-white transition-all ${(!desiredDay || !desiredTime) ? 'bg-gray-300 cursor-not-allowed' : 'bg-gray-900 hover:bg-black btn-shadow'}`}\n                                                >\n                                                    \uc0c1\ub2f4 \uc608\uc57d \uc2e0\uccad \ubc0f \uce74\uce74\uc624\ud1a1\uc73c\ub85c \uc5f0\uacb0\n                                                <\/button>\n                                                <button onClick={() => setStep(5)} className=\"w-full py-3 text-gray-500 hover:text-gray-800 underline\">\uc774\uc804 \ub2e8\uacc4<\/button>\n                                            <\/div>\n<p>                                        )}\n                                    <\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>                    {\/* Features Section *\/}<\/p>\n<section className=\"py-16 bg-white\">\n<div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n<div className=\"text-center mb-12\">\n<h2 className=\"text-3xl font-extrabold text-gray-900\"><span class=\"ez-toc-section\" id=\"%EC%99%9C_%EC%84%A0%EC%9D%B8%EC%9E%A5%EB%82%98%EB%9D%BC_%EC%9D%B8%EA%B0%80%EC%9A%94\"><\/span>\uc65c '\uc120\uc778\uc7a5\ub098\ub77c' \uc778\uac00\uc694?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p className=\"mt-4 text-gray-500\">\ud55c\ud654\uc190\ud574\ubcf4\ud5d8 The Care \uc804\ubb38 \uc124\uacc4\uc0ac\uac00 \uc81c\uacf5\ud558\ub294 \ud504\ub9ac\ubbf8\uc5c4 \uc11c\ube44\uc2a4<\/p>\n<\/p><\/div>\n<div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n<div className=\"text-center p-6 rounded-xl hover:bg-gray-50 transition\">\n<div className=\"w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4\">\n                                        <Heart className=\"w-8 h-8 text-orange-600\" \/>\n                                    <\/div>\n<h3 className=\"text-xl font-bold mb-2\"><span class=\"ez-toc-section\" id=\"3%EB%8C%80_%EC%A7%88%EB%B3%91_%EC%A7%91%EC%A4%91_%EB%B3%B4%EC%9E%A5\"><\/span>3\ub300 \uc9c8\ubcd1 \uc9d1\uc911 \ubcf4\uc7a5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p className=\"text-gray-600\">\uc554, \ub1cc, \uc2ec\uc7a5 \uad00\ub828 \uc9c8\ud658\uc5d0 \ub300\ud574<br \/>\ube48\ud2c8\uc5c6\ub294 \ubcf4\uc7a5\uc744 \uc124\uacc4\ud574\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n<\/p><\/div>\n<div className=\"text-center p-6 rounded-xl hover:bg-gray-50 transition\">\n<div className=\"w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4\">\n                                        <Activity className=\"w-8 h-8 text-blue-600\" \/>\n                                    <\/div>\n<h3 className=\"text-xl font-bold mb-2\"><span class=\"ez-toc-section\" id=\"%EC%9C%A0%EB%B3%91%EC%9E%90%EB%8F%84_%EA%B0%80%EC%9E%85_%EA%B0%80%EB%8A%A5\"><\/span>\uc720\ubcd1\uc790\ub3c4 \uac00\uc785 \uac00\ub2a5<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p className=\"text-gray-600\">\uace0\ud608\uc555, \ub2f9\ub1e8\uac00 \uc788\uc5b4\ub3c4,<br \/>\uc57d\uc744 \ub4dc\uc154\ub3c4 \uac04\ud3b8\uc2ec\uc0ac\ub85c \uac00\uc785 \uac00\ub2a5!<\/p>\n<\/p><\/div>\n<div className=\"text-center p-6 rounded-xl hover:bg-gray-50 transition\">\n<div className=\"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4\">\n                                        <Phone className=\"w-8 h-8 text-green-600\" \/>\n                                    <\/div>\n<h3 className=\"text-xl font-bold mb-2\"><span class=\"ez-toc-section\" id=\"1_1_%EB%B0%80%EC%B0%A9_%EA%B4%80%EB%A6%AC\"><\/span>1:1 \ubc00\ucc29 \uad00\ub9ac<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p className=\"text-gray-600\">\uac00\uc785 \ud6c4 \uccad\uad6c\uae4c\uc9c0,<br \/>\uc120\uc778\uc7a5\ub098\ub77c\uac00 \ub05d\uae4c\uc9c0 \ucc45\uc784\uc9d1\ub2c8\ub2e4.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<p>                    {\/* Floating CTA for Mobile *\/}<\/p>\n<div className=\"fixed bottom-0 w-full bg-white border-t border-gray-200 p-4 md:hidden z-40\">\n                        <button \n                            onClick={openKakao}\n                            className=\"w-full bg-yellow-400 text-black font-bold py-3 rounded-xl shadow-lg flex items-center justify-center\"\n                        >\n                            <span className=\"mr-2\">\ud83d\udcac<\/span> \uc804\ubb38\uac00 \ubb34\ub8cc \uc0c1\ub2f4 \uc2e0\uccad\n                        <\/button>\n                    <\/div>\n<p>                    {\/* Footer *\/}<\/p>\n<footer className=\"bg-gray-900 text-white py-12 pb-24 md:pb-12\">\n<div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\n<div className=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n<div>\n<h4 className=\"text-xl font-bold mb-4 flex items-center\"><span class=\"ez-toc-section\" id=\"%EC%84%A0%EC%9D%B8%EC%9E%A5%EB%82%98%EB%9D%BC\"><\/span>\n                                        <Shield className=\"mr-2\" \/> \uc120\uc778\uc7a5\ub098\ub77c\n                                    <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p className=\"text-gray-400 text-sm\">\n                                        \uace0\uac1d\ub2d8\uc758 \uc18c\uc911\ud55c \uc77c\uc0c1\uc744 \uc9c0\ucf1c\ub4dc\ub9ac\ub294 \ub4e0\ub4e0\ud55c \ud30c\ud2b8\ub108\uac00 \ub418\uaca0\uc2b5\ub2c8\ub2e4.<br \/>\n                                        \ud55c\ud654\uc190\ud574\ubcf4\ud5d8 \uc804 \uc0c1\ud488 \ucde8\uae09 \ubc0f \ube44\uad50 \uacac\uc801 \uac00\ub2a5.\n                                    <\/p>\n<\/p><\/div>\n<div className=\"text-right md:text-right\">\n                                    <button \n                                        onClick={openKakao}\n                                        className=\"bg-gray-800 hover:bg-gray-700 text-white py-2 px-6 rounded-lg border border-gray-700 transition\"\n                                    >\n                                        \uce74\uce74\uc624\ud1a1 \ucc44\ub110 \ubc14\ub85c\uac00\uae30 <ArrowRight className=\"inline w-4 h-4 ml-1\" \/>\n                                    <\/button>\n                                <\/div>\n<\/p><\/div>\n<div className=\"border-t border-gray-800 mt-8 pt-8 text-xs text-gray-500\">\n<p className=\"mb-2\">\ubcf8 \ud648\ud398\uc774\uc9c0\ub294 \ud55c\ud654\uc190\ud574\ubcf4\ud5d8\uc758 \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uac00 \uc544\ub2c8\uba70, \uc124\uacc4\uc0ac \uac1c\uc778\uc774 \uc6b4\uc601\ud558\ub294 \uc0ac\uc774\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n<p>\ubcf4\ud5d8\uacc4\uc57d \uccb4\uacb0 \uc804 \uc0c1\ud488\uc124\uba85\uc11c \ubc0f \uc57d\uad00\uc744 \ubc18\ub4dc\uc2dc \uc77d\uc5b4\ubcf4\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n<p className=\"mt-4\">Copyright \u00a9 2024 Cactus Country Insurance. All rights reserved.<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/footer><\/div>\n<p>            );\n        };<\/p>\n<p>        const root = ReactDOM.createRoot(document.getElementById('root'));\n        root.render(<App \/>);\n    <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; &nbsp; &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[366,370,356,369,353,354,355,357,358,195,371,365,372,359,361,363,374,368,360,364,362,367,373],"class_list":["post-1200","post","type-post","status-publish","format-standard","hentry","category-finance","tag-366","tag-370","tag-356","tag-369","tag-353","tag-354","tag-355","tag-357","tag-358","tag-195","tag-371","tag-365","tag-372","tag-359","tag-361","tag-363","tag-374","tag-368","tag-360","tag-364","tag-362","tag-367","tag-373"],"featured_image_urls":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","morenews-featured":"","morenews-large":"","morenews-medium":""},"author_info":{"info":["All Finance Infomation"]},"category_info":"<a href=\"https:\/\/wallstreet-journal-news.com\/?cat=3\" rel=\"category\">finance<\/a>","tag_info":"finance","comment_count":"0","_links":{"self":[{"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=\/wp\/v2\/posts\/1200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1200"}],"version-history":[{"count":1,"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=\/wp\/v2\/posts\/1200\/revisions"}],"predecessor-version":[{"id":1201,"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=\/wp\/v2\/posts\/1200\/revisions\/1201"}],"wp:attachment":[{"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wallstreet-journal-news.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}