\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n background-color: #f5f7fa;\r\n color: #333;\r\n line-height: 1.6;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n padding: 30px 20px;\r\n border-radius: 15px;\r\n margin-bottom: 30px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n }\r\n\r\n .header h1 {\r\n font-size: 2rem;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .summary-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .card {\r\n background: white;\r\n padding: 25px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n }\r\n\r\n .card h3 {\r\n font-size: 0.9rem;\r\n color: #666;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .card .amount {\r\n font-size: 1.8rem;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n .card.income .amount {\r\n color: #10b981;\r\n }\r\n\r\n .card.expense .amount {\r\n color: #ef4444;\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 30px;\r\n border-bottom: 2px solid #e5e7eb;\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n\r\n .tab {\r\n padding: 12px 24px;\r\n background: none;\r\n border: none;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n color: #666;\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n position: relative;\r\n }\r\n\r\n .tab.active {\r\n color: #667eea;\r\n font-weight: 600;\r\n }\r\n\r\n .tab.active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: #667eea;\r\n }\r\n\r\n .tab-content {\r\n display: none;\r\n }\r\n\r\n .tab-content.active {\r\n display: block;\r\n }\r\n\r\n .form-section {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n margin-bottom: 30px;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n color: #555;\r\n }\r\n\r\n .form-group input,\r\n .form-group select,\r\n .form-group textarea {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 10px;\r\n font-size: 1rem;\r\n transition: border-color 0.3s ease;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group select:focus,\r\n .form-group textarea:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n }\r\n\r\n .btn {\r\n padding: 12px 24px;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .btn-secondary {\r\n background: #e5e7eb;\r\n color: #333;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: #d1d5db;\r\n }\r\n\r\n .btn-danger {\r\n background: #ef4444;\r\n color: white;\r\n }\r\n\r\n .btn-danger:hover {\r\n background: #dc2626;\r\n }\r\n\r\n .btn-success {\r\n background: #10b981;\r\n color: white;\r\n }\r\n\r\n .transaction-list {\r\n background: white;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n }\r\n\r\n .transaction-header {\r\n display: grid;\r\n grid-template-columns: 100px 150px 1fr 150px 150px 100px;\r\n padding: 20px;\r\n background: #f9fafb;\r\n font-weight: 600;\r\n color: #666;\r\n border-bottom: 2px solid #e5e7eb;\r\n }\r\n\r\n .transaction-item {\r\n display: grid;\r\n grid-template-columns: 100px 150px 1fr 150px 150px 100px;\r\n padding: 20px;\r\n border-bottom: 1px solid #f3f4f6;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .transaction-item:hover {\r\n background-color: #f9fafb;\r\n }\r\n\r\n .transaction-type {\r\n padding: 4px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n text-align: center;\r\n display: inline-block;\r\n }\r\n\r\n .transaction-type.income {\r\n background: #d1fae5;\r\n color: #065f46;\r\n }\r\n\r\n .transaction-type.expense {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n }\r\n\r\n .planning-section {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n margin-bottom: 30px;\r\n }\r\n\r\n .planning-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .planning-card {\r\n padding: 25px;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 15px;\r\n background: #f9fafb;\r\n }\r\n\r\n .planning-card h4 {\r\n font-size: 1.2rem;\r\n margin-bottom: 20px;\r\n color: #333;\r\n }\r\n\r\n .planning-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 0;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n .planning-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 10px;\r\n }\r\n\r\n .header {\r\n padding: 20px 15px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .card {\r\n padding: 20px;\r\n }\r\n\r\n .card .amount {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .transaction-header,\r\n .transaction-item {\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n }\r\n\r\n .transaction-header > *,\r\n .transaction-item > * {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .transaction-header > *::before,\r\n .transaction-item > *::before {\r\n content: attr(data-label);\r\n font-weight: 600;\r\n color: #666;\r\n }\r\n\r\n .transaction-header {\r\n display: none;\r\n }\r\n\r\n .form-section,\r\n .planning-section {\r\n padding: 20px;\r\n }\r\n }\r\n\r\n .export-section {\r\n text-align: right;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 1000;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .modal.active {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n max-width: 500px;\r\n width: 90%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n }\r\n\r\n .modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .modal-close {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: #666;\r\n }\r\n\r\n .alert {\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n display: none;\r\n }\r\n\r\n .alert.success {\r\n background: #d1fae5;\r\n color: #065f46;\r\n border: 1px solid #a7f3d0;\r\n }\r\n\r\n .alert.error {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n border: 1px solid #fecaca;\r\n }\r\n\r\n .empty-state {\r\n text-align: center;\r\n padding: 60px 20px;\r\n color: #9ca3af;\r\n }\r\n\r\n .empty-state svg {\r\n width: 100px;\r\n height: 100px;\r\n margin-bottom: 20px;\r\n opacity: 0.5;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80<\/h1>\r\n <p id=\"currentDate\"><\/p>\r\n <\/div>\r\n\r\n <div class=\"alert success\" id=\"successAlert\"><\/div>\r\n <div class=\"alert error\" id=\"errorAlert\"><\/div>\r\n\r\n <div class=\"summary-cards\">\r\n <div class=\"card\">\r\n <h3>\ud604\uae08<\/h3>\r\n <div class=\"amount\" id=\"cashBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\ubc95\uc778\uacc4\uc88c<\/h3>\r\n <div class=\"amount\" id=\"corporateBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\uac1c\uc778\uacc4\uc88c<\/h3>\r\n <div class=\"amount\" id=\"personalBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\ucd1d \uc790\uc0b0<\/h3>\r\n <div class=\"amount\" id=\"totalBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card income\">\r\n <h3>\uc774\ubc88\ub2ec \uc218\uc785<\/h3>\r\n <div class=\"amount\" id=\"monthlyIncome\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card expense\">\r\n <h3>\uc774\ubc88\ub2ec \uc9c0\ucd9c<\/h3>\r\n <div class=\"amount\" id=\"monthlyExpense\">\u20a90<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tabs\">\r\n <button class=\"tab active\" onclick=\"switchTab('transactions')\">\uac70\ub798\ub0b4\uc5ed<\/button>\r\n <button class=\"tab\" onclick=\"switchTab('planning')\">\uc7ac\ubb34\uacc4\ud68d<\/button>\r\n <button class=\"tab\" onclick=\"switchTab('reports')\">\ub9ac\ud3ec\ud2b8<\/button>\r\n <\/div>\r\n\r\n <div id=\"transactions\" class=\"tab-content active\">\r\n <div class=\"form-section\">\r\n <h3 style=\"margin-bottom: 20px;\">\uac70\ub798 \uc785\ub825<\/h3>\r\n <form id=\"transactionForm\" class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label for=\"transactionDate\">\ub0a0\uc9dc<\/label>\r\n <input type=\"date\" id=\"transactionDate\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"transactionType\">\uad6c\ubd84<\/label>\r\n <select id=\"transactionType\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <option value=\"income\">\uc218\uc785<\/option>\r\n <option value=\"expense\">\uc9c0\ucd9c<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"accountType\">\uacc4\uc88c<\/label>\r\n <select id=\"accountType\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <option value=\"cash\">\ud604\uae08<\/option>\r\n <option value=\"corporate\">\ubc95\uc778\uacc4\uc88c<\/option>\r\n <option value=\"personal\">\uac1c\uc778\uacc4\uc88c<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"category\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"category\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"amount\">\uae08\uc561<\/label>\r\n <input type=\"number\" id=\"amount\" placeholder=\"0\" required>\r\n <\/div>\r\n <div class=\"form-group\" style=\"grid-column: span 2;\">\r\n <label for=\"description\">\uc124\uba85<\/label>\r\n <input type=\"text\" id=\"description\" placeholder=\"\uac70\ub798 \ub0b4\uc6a9\uc744 \uc785\ub825\ud558\uc138\uc694\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <button type=\"submit\" class=\"btn btn-primary\">\r\n <span>+<\/span> \uac70\ub798 \ucd94\uac00\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"export-section\">\r\n <button class=\"btn btn-success\" onclick=\"exportToExcel()\">\r\n <span>\ud83d\udcca<\/span> \uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"transaction-list\">\r\n <div class=\"transaction-header\">\r\n <div>\ub0a0\uc9dc<\/div>\r\n <div>\uacc4\uc88c<\/div>\r\n <div>\uc124\uba85<\/div>\r\n <div>\uce74\ud14c\uace0\ub9ac<\/div>\r\n <div>\uae08\uc561<\/div>\r\n <div>\uc0ad\uc81c<\/div>\r\n <\/div>\r\n <div id=\"transactionList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"planning\" class=\"tab-content\">\r\n <div class=\"planning-section\">\r\n <h3 style=\"margin-bottom: 30px;\">\uc7ac\ubb34 \uacc4\ud68d<\/h3>\r\n <div class=\"planning-grid\">\r\n <div class=\"planning-card\">\r\n <h4>\uc8fc\uac04 \uc9c0\ucd9c \uacc4\ud68d<\/h4>\r\n <form id=\"weeklyPlanForm\">\r\n <div class=\"form-group\">\r\n <label for=\"weeklyCategory\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"weeklyCategory\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"weeklyAmount\">\uc608\uc815 \uae08\uc561<\/label>\r\n <input type=\"number\" id=\"weeklyAmount\" placeholder=\"0\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">\ucd94\uac00<\/button>\r\n <\/form>\r\n <div id=\"weeklyPlanList\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <div class=\"planning-card\">\r\n <h4>\uc6d4\uac04 \uc9c0\ucd9c \uacc4\ud68d<\/h4>\r\n <form id=\"monthlyPlanForm\">\r\n <div class=\"form-group\">\r\n <label for=\"monthlyCategory\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"monthlyCategory\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"monthlyAmount\">\uc608\uc815 \uae08\uc561<\/label>\r\n <input type=\"number\" id=\"monthlyAmount\" placeholder=\"0\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">\ucd94\uac00<\/button>\r\n <\/form>\r\n <div id=\"monthlyPlanList\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"reports\" class=\"tab-content\">\r\n <div class=\"form-section\">\r\n <h3 style=\"margin-bottom: 30px;\">\ub9ac\ud3ec\ud2b8<\/h3>\r\n <div class=\"planning-grid\">\r\n <div class=\"planning-card\">\r\n <h4>\uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c0\ucd9c<\/h4>\r\n <div id=\"categoryReport\"><\/div>\r\n <\/div>\r\n <div class=\"planning-card\">\r\n <h4>\uacc4\uc88c\ubcc4 \uc794\uc561 \ucd94\uc774<\/h4>\r\n <div id=\"balanceReport\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\uc18c\r\n let transactions = JSON.parse(localStorage.getItem('transactions')) || [];\r\n let weeklyPlans = JSON.parse(localStorage.getItem('weeklyPlans')) || [];\r\n let monthlyPlans = JSON.parse(localStorage.getItem('monthlyPlans')) || [];\r\n\r\n \/\/ \uce74\ud14c\uace0\ub9ac \uc815\uc758\r\n const categories = {\r\n income: ['\uae09\uc5ec', '\ubd80\uc218\uc785', '\ud22c\uc790\uc218\uc775', '\uae30\ud0c0\uc218\uc785'],\r\n expense: ['\uc2dd\ube44', '\uad50\ud1b5\ube44', '\uc8fc\uac70\ube44', '\ud1b5\uc2e0\ube44', '\uc758\ub8cc\ube44', '\uad50\uc721\ube44', '\ubb38\ud654\uc0dd\ud65c', '\uc1fc\ud551', '\uae30\ud0c0\uc9c0\ucd9c']\r\n };\r\n\r\n \/\/ \ucd08\uae30\ud654\r\n document.addEventListener('DOMContentLoaded', function() {\r\n setCurrentDate();\r\n updateCategoryOptions();\r\n loadTransactions();\r\n updateBalances();\r\n loadPlans();\r\n updateReports();\r\n \r\n \/\/ \ud3fc \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\r\n document.getElementById('transactionForm').addEventListener('submit', addTransaction);\r\n document.getElementById('weeklyPlanForm').addEventListener('submit', addWeeklyPlan);\r\n document.getElementById('monthlyPlanForm').addEventListener('submit', addMonthlyPlan);\r\n \r\n \/\/ \uac70\ub798 \uc720\ud615 \ubcc0\uacbd \uc2dc \uce74\ud14c\uace0\ub9ac \uc5c5\ub370\uc774\ud2b8\r\n document.getElementById('transactionType').addEventListener('change', updateCategoryOptions);\r\n });\r\n\r\n \/\/ \ud604\uc7ac \ub0a0\uc9dc \uc124\uc815\r\n function setCurrentDate() {\r\n const today = new Date();\r\n const dateStr = today.toLocaleDateString('ko-KR', { \r\n year: 'numeric', \r\n month: 'long', \r\n day: 'numeric',\r\n weekday: 'long'\r\n });\r\n document.getElementById('currentDate').textContent = dateStr;\r\n document.getElementById('transactionDate').value = today.toISOString().split('T')[0];\r\n }\r\n\r\n \/\/ \ud0ed \uc804\ud658\r\n function switchTab(tabName) {\r\n document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));\r\n document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));\r\n \r\n event.target.classList.add('active');\r\n document.getElementById(tabName).classList.add('active');\r\n \r\n if (tabName === 'reports') {\r\n updateReports();\r\n }\r\n }\r\n\r\n \/\/ \uce74\ud14c\uace0\ub9ac \uc635\uc158 \uc5c5\ub370\uc774\ud2b8\r\n function updateCategoryOptions() {\r\n const transactionType = document.getElementById('transactionType').value;\r\n const categorySelect = document.getElementById('category');\r\n const weeklySelect = document.getElementById('weeklyCategory');\r\n const monthlySelect = document.getElementById('monthlyCategory');\r\n \r\n categorySelect.innerHTML = '<option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>';\r\n \r\n if (transactionType && categories[transactionType]) {\r\n categories[transactionType].forEach(cat => {\r\n categorySelect.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\r\n });\r\n }\r\n \r\n \/\/ \uacc4\ud68d \uce74\ud14c\uace0\ub9ac \uc5c5\ub370\uc774\ud2b8\r\n const allExpenseCategories = categories.expense;\r\n weeklySelect.innerHTML = '<option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>';\r\n monthlySelect.innerHTML = '<option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>';\r\n \r\n allExpenseCategories.forEach(cat => {\r\n weeklySelect.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\r\n monthlySelect.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\r\n });\r\n }\r\n\r\n \/\/ \uac70\ub798 \ucd94\uac00\r\n function addTransaction(e) {\r\n e.preventDefault();\r\n \r\n const transaction = {\r\n id: Date.now(),\r\n date: document.getElementById('transactionDate').value,\r\n type: document.getElementById('transactionType').value,\r\n account: document.getElementById('accountType').value,\r\n category: document.getElementById('category').value,\r\n amount: parseFloat(document.getElementById('amount').value),\r\n description: document.getElementById('description').value\r\n };\r\n \r\n transactions.push(transaction);\r\n saveData();\r\n loadTransactions();\r\n updateBalances();\r\n \r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n document.getElementById('transactionForm').reset();\r\n setCurrentDate();\r\n \r\n showAlert('\uac70\ub798\uac00 \uc131\uacf5\uc801\uc73c\ub85c \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \uac70\ub798 \uc0ad\uc81c\r\n function deleteTransaction(id) {\r\n if (confirm('\uc815\ub9d0\ub85c \uc774 \uac70\ub798\ub97c \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) {\r\n transactions = transactions.filter(t => t.id !== id);\r\n saveData();\r\n loadTransactions();\r\n updateBalances();\r\n showAlert('\uac70\ub798\uac00 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n }\r\n\r\n \/\/ \uac70\ub798 \ubaa9\ub85d \ub85c\ub4dc\r\n function loadTransactions() {\r\n const listContainer = document.getElementById('transactionList');\r\n \r\n if (transactions.length === 0) {\r\n listContainer.innerHTML = `\r\n <div class=\"empty-state\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/>\r\n <\/svg>\r\n <p>\uc544\uc9c1 \uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n const sortedTransactions = [...transactions].sort((a, b) => new Date(b.date) - new Date(a.date));\r\n \r\n listContainer.innerHTML = sortedTransactions.map(t => `\r\n <div class=\"transaction-item\">\r\n <div data-label=\"\ub0a0\uc9dc\">${new Date(t.date).toLocaleDateString('ko-KR')}<\/div>\r\n <div data-label=\"\uacc4\uc88c\">${getAccountName(t.account)}<\/div>\r\n <div data-label=\"\uc124\uba85\">${t.description || '-'}<\/div>\r\n <div data-label=\"\uce74\ud14c\uace0\ub9ac\">${t.category}<\/div>\r\n <div data-label=\"\uae08\uc561\">\r\n <span class=\"transaction-type ${t.type}\">\r\n ${t.type === 'income' ? '+' : '-'}\u20a9${formatNumber(t.amount)}\r\n <\/span>\r\n <\/div>\r\n <div data-label=\"\">\r\n <button class=\"btn btn-danger\" onclick=\"deleteTransaction(${t.id})\" style=\"padding: 8px 16px;\">\r\n \uc0ad\uc81c\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ \uc794\uc561 \uc5c5\ub370\uc774\ud2b8\r\n function updateBalances() {\r\n const balances = {\r\n cash: 0,\r\n corporate: 0,\r\n personal: 0\r\n };\r\n \r\n const now = new Date();\r\n const currentMonth = now.getMonth();\r\n const currentYear = now.getFullYear();\r\n let monthlyIncome = 0;\r\n let monthlyExpense = 0;\r\n \r\n transactions.forEach(t => {\r\n const transactionDate = new Date(t.date);\r\n const amount = t.type === 'income' ? t.amount : -t.amount;\r\n balances[t.account] += amount;\r\n \r\n if (transactionDate.getMonth() === currentMonth && transactionDate.getFullYear() === currentYear) {\r\n if (t.type === 'income') {\r\n monthlyIncome += t.amount;\r\n } else {\r\n monthlyExpense += t.amount;\r\n }\r\n }\r\n });\r\n \r\n document.getElementById('cashBalance').textContent = `\u20a9${formatNumber(balances.cash)}`;\r\n document.getElementById('corporateBalance').textContent = `\u20a9${formatNumber(balances.corporate)}`;\r\n document.getElementById('personalBalance').textContent = `\u20a9${formatNumber(balances.personal)}`;\r\n document.getElementById('totalBalance').textContent = `\u20a9${formatNumber(balances.cash + balances.corporate + balances.personal)}`;\r\n document.getElementById('monthlyIncome').textContent = `\u20a9${formatNumber(monthlyIncome)}`;\r\n document.getElementById('monthlyExpense').textContent = `\u20a9${formatNumber(monthlyExpense)}`;\r\n }\r\n\r\n \/\/ \uc8fc\uac04 \uacc4\ud68d \ucd94\uac00\r\n function addWeeklyPlan(e) {\r\n e.preventDefault();\r\n \r\n const plan = {\r\n id: Date.now(),\r\n category: document.getElementById('weeklyCategory').value,\r\n amount: parseFloat(document.getElementById('weeklyAmount').value)\r\n };\r\n \r\n weeklyPlans.push(plan);\r\n saveData();\r\n loadPlans();\r\n \r\n document.getElementById('weeklyPlanForm').reset();\r\n showAlert('\uc8fc\uac04 \uacc4\ud68d\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \uc6d4\uac04 \uacc4\ud68d \ucd94\uac00\r\n function addMonthlyPlan(e) {\r\n e.preventDefault();\r\n \r\n const plan = {\r\n id: Date.now(),\r\n category: document.getElementById('monthlyCategory').value,\r\n amount: parseFloat(document.getElementById('monthlyAmount').value)\r\n };\r\n \r\n monthlyPlans.push(plan);\r\n saveData();\r\n loadPlans();\r\n \r\n document.getElementById('monthlyPlanForm').reset();\r\n showAlert('\uc6d4\uac04 \uacc4\ud68d\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \uacc4\ud68d \uc0ad\uc81c\r\n function deleteWeeklyPlan(id) {\r\n weeklyPlans = weeklyPlans.filter(p => p.id !== id);\r\n saveData();\r\n loadPlans();\r\n }\r\n\r\n function deleteMonthlyPlan(id) {\r\n monthlyPlans = monthlyPlans.filter(p => p.id !== id);\r\n saveData();\r\n loadPlans();\r\n }\r\n\r\n \/\/ \uacc4\ud68d \ubaa9\ub85d \ub85c\ub4dc\r\n function loadPlans() {\r\n const weeklyList = document.getElementById('weeklyPlanList');\r\n const monthlyList = document.getElementById('monthlyPlanList');\r\n \r\n weeklyList.innerHTML = weeklyPlans.map(p => `\r\n <div class=\"planning-item\">\r\n <span>${p.category}<\/span>\r\n <div>\r\n <span style=\"margin-right: 10px;\">\u20a9${formatNumber(p.amount)}<\/span>\r\n <button class=\"btn btn-danger\" onclick=\"deleteWeeklyPlan(${p.id})\" style=\"padding: 4px 12px; font-size: 0.85rem;\">\uc0ad\uc81c<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n \r\n monthlyList.innerHTML = monthlyPlans.map(p => `\r\n <div class=\"planning-item\">\r\n <span>${p.category}<\/span>\r\n <div>\r\n <span style=\"margin-right: 10px;\">\u20a9${formatNumber(p.amount)}<\/span>\r\n <button class=\"btn btn-danger\" onclick=\"deleteMonthlyPlan(${p.id})\" style=\"padding: 4px 12px; font-size: 0.85rem;\">\uc0ad\uc81c<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ \ub9ac\ud3ec\ud2b8 \uc5c5\ub370\uc774\ud2b8\r\n function updateReports() {\r\n updateCategoryReport();\r\n updateBalanceReport();\r\n }\r\n\r\n \/\/ \uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c0\ucd9c \ub9ac\ud3ec\ud2b8\r\n function updateCategoryReport() {\r\n const categoryTotals = {};\r\n const now = new Date();\r\n const currentMonth = now.getMonth();\r\n const currentYear = now.getFullYear();\r\n \r\n transactions.forEach(t => {\r\n const transactionDate = new Date(t.date);\r\n if (t.type === 'expense' && \r\n transactionDate.getMonth() === currentMonth && \r\n transactionDate.getFullYear() === currentYear) {\r\n categoryTotals[t.category] = (categoryTotals[t.category] || 0) + t.amount;\r\n }\r\n });\r\n \r\n const reportContainer = document.getElementById('categoryReport');\r\n const sortedCategories = Object.entries(categoryTotals).sort((a, b) => b[1] - a[1]);\r\n \r\n if (sortedCategories.length === 0) {\r\n reportContainer.innerHTML = '<p style=\"color: #9ca3af;\">\uc774\ubc88 \ub2ec \uc9c0\ucd9c \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>';\r\n return;\r\n }\r\n \r\n reportContainer.innerHTML = sortedCategories.map(([category, amount]) => `\r\n <div class=\"planning-item\">\r\n <span>${category}<\/span>\r\n <span style=\"color: #ef4444;\">\u20a9${formatNumber(amount)}<\/span>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ \uacc4\uc88c\ubcc4 \uc794\uc561 \ucd94\uc774 \ub9ac\ud3ec\ud2b8\r\n function updateBalanceReport() {\r\n const reportContainer = document.getElementById('balanceReport');\r\n const balances = {\r\n cash: 0,\r\n corporate: 0,\r\n personal: 0\r\n };\r\n \r\n transactions.forEach(t => {\r\n const amount = t.type === 'income' ? t.amount : -t.amount;\r\n balances[t.account] += amount;\r\n });\r\n \r\n reportContainer.innerHTML = `\r\n <div class=\"planning-item\">\r\n <span>\ud604\uae08<\/span>\r\n <span>\u20a9${formatNumber(balances.cash)}<\/span>\r\n <\/div>\r\n <div class=\"planning-item\">\r\n <span>\ubc95\uc778\uacc4\uc88c<\/span>\r\n <span>\u20a9${formatNumber(balances.corporate)}<\/span>\r\n <\/div>\r\n <div class=\"planning-item\">\r\n <span>\uac1c\uc778\uacc4\uc88c<\/span>\r\n <span>\u20a9${formatNumber(balances.personal)}<\/span>\r\n <\/div>\r\n <div class=\"planning-item\" style=\"border-top: 2px solid #e5e7eb; padding-top: 15px; margin-top: 15px; font-weight: bold;\">\r\n <span>\ucd1d \uc790\uc0b0<\/span>\r\n <span>\u20a9${formatNumber(balances.cash + balances.corporate + balances.personal)}<\/span>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ \uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30\r\n function exportToExcel() {\r\n let csvContent = \"\ub0a0\uc9dc,\uad6c\ubd84,\uacc4\uc88c,\uce74\ud14c\uace0\ub9ac,\uae08\uc561,\uc124\uba85\\n\";\r\n \r\n const sortedTransactions = [...transactions].sort((a, b) => new Date(a.date) - new Date(b.date));\r\n \r\n sortedTransactions.forEach(t => {\r\n const row = [\r\n t.date,\r\n t.type === 'income' ? '\uc218\uc785' : '\uc9c0\ucd9c',\r\n getAccountName(t.account),\r\n t.category,\r\n t.amount,\r\n t.description || ''\r\n ].join(',');\r\n csvContent += row + '\\n';\r\n });\r\n \r\n \/\/ BOM \ucd94\uac00 (\ud55c\uae00 \uc778\ucf54\ub529)\r\n const BOM = '\\uFEFF';\r\n const blob = new Blob([BOM + csvContent], { type: 'text\/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n const url = URL.createObjectURL(blob);\r\n \r\n link.setAttribute('href', url);\r\n link.setAttribute('download', `\uac00\uacc4\ubd80_${new Date().toISOString().split('T')[0]}.csv`);\r\n link.style.display = 'none';\r\n \r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n \r\n showAlert('\uc5d1\uc140 \ud30c\uc77c\uc774 \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\r\n function saveData() {\r\n localStorage.setItem('transactions', JSON.stringify(transactions));\r\n localStorage.setItem('weeklyPlans', JSON.stringify(weeklyPlans));\r\n localStorage.setItem('monthlyPlans', JSON.stringify(monthlyPlans));\r\n }\r\n\r\n \/\/ \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218\r\n function formatNumber(num) {\r\n return Math.round(num).toLocaleString('ko-KR');\r\n }\r\n\r\n function getAccountName(account) {\r\n const names = {\r\n cash: '\ud604\uae08',\r\n corporate: '\ubc95\uc778\uacc4\uc88c',\r\n personal: '\uac1c\uc778\uacc4\uc88c'\r\n };\r\n return names[account] || account;\r\n }\r\n\r\n function showAlert(message, type) {\r\n const alert = document.getElementById(type + 'Alert');\r\n alert.textContent = message;\r\n alert.style.display = 'block';\r\n \r\n setTimeout(() => {\r\n alert.style.display = 'none';\r\n }, 3000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 \ud604\uae08 \u20a90 \ubc95\uc778\uacc4\uc88c \u20a90 \uac1c\uc778\uacc4\uc88c \u20a90 \ucd1d \uc790\uc0b0 \u20a90 \uc774\ubc88\ub2ec \uc218\uc785 \u20a90 \uc774\ubc88\ub2ec \uc9c0\ucd9c \u20a90 \uac70\ub798\ub0b4\uc5ed \uc7ac\ubb34\uacc4\ud68d \ub9ac\ud3ec\ud2b8 \uac70\ub798 \uc785\ub825 \ub0a0\uc9dc \uad6c\ubd84 \uc120\ud0dd\ud558\uc138\uc694\uc218\uc785\uc9c0\ucd9c \uacc4\uc88c \uc120\ud0dd\ud558\uc138\uc694\ud604\uae08\ubc95\uc778\uacc4\uc88c\uac1c\uc778\uacc4\uc88c \uce74\ud14c\uace0\ub9ac \uc120\ud0dd\ud558\uc138\uc694 \uae08\uc561 \uc124\uba85 + \uac70\ub798 \ucd94\uac00 \ud83d\udcca \uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30 \ub0a0\uc9dc \uacc4\uc88c \uc124\uba85 \uce74\ud14c\uace0\ub9ac \uae08\uc561 \uc0ad\uc81c \uc7ac\ubb34 \uacc4\ud68d \uc8fc\uac04 \uc9c0\ucd9c \uacc4\ud68d \uce74\ud14c\uace0\ub9ac \uc120\ud0dd\ud558\uc138\uc694 \uc608\uc815 \uae08\uc561 \ucd94\uac00 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3513","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/pages\/3513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/comments?post=3513"}],"version-history":[{"count":0,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/pages\/3513\/revisions"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/media?parent=3513"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/wf_page_folders?post=3513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\r\n\t\t\t\t\t

\r\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n background-color: #f5f7fa;\r\n color: #333;\r\n line-height: 1.6;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n .header {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n padding: 30px 20px;\r\n border-radius: 15px;\r\n margin-bottom: 30px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n }\r\n\r\n .header h1 {\r\n font-size: 2rem;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .summary-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .card {\r\n background: white;\r\n padding: 25px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n }\r\n\r\n .card h3 {\r\n font-size: 0.9rem;\r\n color: #666;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .card .amount {\r\n font-size: 1.8rem;\r\n font-weight: bold;\r\n color: #333;\r\n }\r\n\r\n .card.income .amount {\r\n color: #10b981;\r\n }\r\n\r\n .card.expense .amount {\r\n color: #ef4444;\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 30px;\r\n border-bottom: 2px solid #e5e7eb;\r\n overflow-x: auto;\r\n -webkit-overflow-scrolling: touch;\r\n }\r\n\r\n .tab {\r\n padding: 12px 24px;\r\n background: none;\r\n border: none;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n color: #666;\r\n transition: all 0.3s ease;\r\n white-space: nowrap;\r\n position: relative;\r\n }\r\n\r\n .tab.active {\r\n color: #667eea;\r\n font-weight: 600;\r\n }\r\n\r\n .tab.active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -2px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: #667eea;\r\n }\r\n\r\n .tab-content {\r\n display: none;\r\n }\r\n\r\n .tab-content.active {\r\n display: block;\r\n }\r\n\r\n .form-section {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n margin-bottom: 30px;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n }\r\n\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .form-group label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n color: #555;\r\n }\r\n\r\n .form-group input,\r\n .form-group select,\r\n .form-group textarea {\r\n width: 100%;\r\n padding: 12px 16px;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 10px;\r\n font-size: 1rem;\r\n transition: border-color 0.3s ease;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group select:focus,\r\n .form-group textarea:focus {\r\n outline: none;\r\n border-color: #667eea;\r\n }\r\n\r\n .btn {\r\n padding: 12px 24px;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n color: white;\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);\r\n }\r\n\r\n .btn-secondary {\r\n background: #e5e7eb;\r\n color: #333;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: #d1d5db;\r\n }\r\n\r\n .btn-danger {\r\n background: #ef4444;\r\n color: white;\r\n }\r\n\r\n .btn-danger:hover {\r\n background: #dc2626;\r\n }\r\n\r\n .btn-success {\r\n background: #10b981;\r\n color: white;\r\n }\r\n\r\n .transaction-list {\r\n background: white;\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n }\r\n\r\n .transaction-header {\r\n display: grid;\r\n grid-template-columns: 100px 150px 1fr 150px 150px 100px;\r\n padding: 20px;\r\n background: #f9fafb;\r\n font-weight: 600;\r\n color: #666;\r\n border-bottom: 2px solid #e5e7eb;\r\n }\r\n\r\n .transaction-item {\r\n display: grid;\r\n grid-template-columns: 100px 150px 1fr 150px 150px 100px;\r\n padding: 20px;\r\n border-bottom: 1px solid #f3f4f6;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .transaction-item:hover {\r\n background-color: #f9fafb;\r\n }\r\n\r\n .transaction-type {\r\n padding: 4px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n text-align: center;\r\n display: inline-block;\r\n }\r\n\r\n .transaction-type.income {\r\n background: #d1fae5;\r\n color: #065f46;\r\n }\r\n\r\n .transaction-type.expense {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n }\r\n\r\n .planning-section {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n margin-bottom: 30px;\r\n }\r\n\r\n .planning-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .planning-card {\r\n padding: 25px;\r\n border: 2px solid #e5e7eb;\r\n border-radius: 15px;\r\n background: #f9fafb;\r\n }\r\n\r\n .planning-card h4 {\r\n font-size: 1.2rem;\r\n margin-bottom: 20px;\r\n color: #333;\r\n }\r\n\r\n .planning-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 12px 0;\r\n border-bottom: 1px solid #e5e7eb;\r\n }\r\n\r\n .planning-item:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 10px;\r\n }\r\n\r\n .header {\r\n padding: 20px 15px;\r\n }\r\n\r\n .header h1 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .card {\r\n padding: 20px;\r\n }\r\n\r\n .card .amount {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .transaction-header,\r\n .transaction-item {\r\n grid-template-columns: 1fr;\r\n gap: 10px;\r\n }\r\n\r\n .transaction-header > *,\r\n .transaction-item > * {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .transaction-header > *::before,\r\n .transaction-item > *::before {\r\n content: attr(data-label);\r\n font-weight: 600;\r\n color: #666;\r\n }\r\n\r\n .transaction-header {\r\n display: none;\r\n }\r\n\r\n .form-section,\r\n .planning-section {\r\n padding: 20px;\r\n }\r\n }\r\n\r\n .export-section {\r\n text-align: right;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0,0,0,0.5);\r\n z-index: 1000;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .modal.active {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 15px;\r\n max-width: 500px;\r\n width: 90%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n }\r\n\r\n .modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .modal-close {\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: #666;\r\n }\r\n\r\n .alert {\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n display: none;\r\n }\r\n\r\n .alert.success {\r\n background: #d1fae5;\r\n color: #065f46;\r\n border: 1px solid #a7f3d0;\r\n }\r\n\r\n .alert.error {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n border: 1px solid #fecaca;\r\n }\r\n\r\n .empty-state {\r\n text-align: center;\r\n padding: 60px 20px;\r\n color: #9ca3af;\r\n }\r\n\r\n .empty-state svg {\r\n width: 100px;\r\n height: 100px;\r\n margin-bottom: 20px;\r\n opacity: 0.5;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h1>\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80<\/h1>\r\n <p id=\"currentDate\"><\/p>\r\n <\/div>\r\n\r\n <div class=\"alert success\" id=\"successAlert\"><\/div>\r\n <div class=\"alert error\" id=\"errorAlert\"><\/div>\r\n\r\n <div class=\"summary-cards\">\r\n <div class=\"card\">\r\n <h3>\ud604\uae08<\/h3>\r\n <div class=\"amount\" id=\"cashBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\ubc95\uc778\uacc4\uc88c<\/h3>\r\n <div class=\"amount\" id=\"corporateBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\uac1c\uc778\uacc4\uc88c<\/h3>\r\n <div class=\"amount\" id=\"personalBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\ucd1d \uc790\uc0b0<\/h3>\r\n <div class=\"amount\" id=\"totalBalance\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card income\">\r\n <h3>\uc774\ubc88\ub2ec \uc218\uc785<\/h3>\r\n <div class=\"amount\" id=\"monthlyIncome\">\u20a90<\/div>\r\n <\/div>\r\n <div class=\"card expense\">\r\n <h3>\uc774\ubc88\ub2ec \uc9c0\ucd9c<\/h3>\r\n <div class=\"amount\" id=\"monthlyExpense\">\u20a90<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tabs\">\r\n <button class=\"tab active\" onclick=\"switchTab('transactions')\">\uac70\ub798\ub0b4\uc5ed<\/button>\r\n <button class=\"tab\" onclick=\"switchTab('planning')\">\uc7ac\ubb34\uacc4\ud68d<\/button>\r\n <button class=\"tab\" onclick=\"switchTab('reports')\">\ub9ac\ud3ec\ud2b8<\/button>\r\n <\/div>\r\n\r\n <div id=\"transactions\" class=\"tab-content active\">\r\n <div class=\"form-section\">\r\n <h3 style=\"margin-bottom: 20px;\">\uac70\ub798 \uc785\ub825<\/h3>\r\n <form id=\"transactionForm\" class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label for=\"transactionDate\">\ub0a0\uc9dc<\/label>\r\n <input type=\"date\" id=\"transactionDate\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"transactionType\">\uad6c\ubd84<\/label>\r\n <select id=\"transactionType\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <option value=\"income\">\uc218\uc785<\/option>\r\n <option value=\"expense\">\uc9c0\ucd9c<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"accountType\">\uacc4\uc88c<\/label>\r\n <select id=\"accountType\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <option value=\"cash\">\ud604\uae08<\/option>\r\n <option value=\"corporate\">\ubc95\uc778\uacc4\uc88c<\/option>\r\n <option value=\"personal\">\uac1c\uc778\uacc4\uc88c<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"category\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"category\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"amount\">\uae08\uc561<\/label>\r\n <input type=\"number\" id=\"amount\" placeholder=\"0\" required>\r\n <\/div>\r\n <div class=\"form-group\" style=\"grid-column: span 2;\">\r\n <label for=\"description\">\uc124\uba85<\/label>\r\n <input type=\"text\" id=\"description\" placeholder=\"\uac70\ub798 \ub0b4\uc6a9\uc744 \uc785\ub825\ud558\uc138\uc694\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <button type=\"submit\" class=\"btn btn-primary\">\r\n <span>+<\/span> \uac70\ub798 \ucd94\uac00\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"export-section\">\r\n <button class=\"btn btn-success\" onclick=\"exportToExcel()\">\r\n <span>\ud83d\udcca<\/span> \uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"transaction-list\">\r\n <div class=\"transaction-header\">\r\n <div>\ub0a0\uc9dc<\/div>\r\n <div>\uacc4\uc88c<\/div>\r\n <div>\uc124\uba85<\/div>\r\n <div>\uce74\ud14c\uace0\ub9ac<\/div>\r\n <div>\uae08\uc561<\/div>\r\n <div>\uc0ad\uc81c<\/div>\r\n <\/div>\r\n <div id=\"transactionList\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"planning\" class=\"tab-content\">\r\n <div class=\"planning-section\">\r\n <h3 style=\"margin-bottom: 30px;\">\uc7ac\ubb34 \uacc4\ud68d<\/h3>\r\n <div class=\"planning-grid\">\r\n <div class=\"planning-card\">\r\n <h4>\uc8fc\uac04 \uc9c0\ucd9c \uacc4\ud68d<\/h4>\r\n <form id=\"weeklyPlanForm\">\r\n <div class=\"form-group\">\r\n <label for=\"weeklyCategory\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"weeklyCategory\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"weeklyAmount\">\uc608\uc815 \uae08\uc561<\/label>\r\n <input type=\"number\" id=\"weeklyAmount\" placeholder=\"0\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">\ucd94\uac00<\/button>\r\n <\/form>\r\n <div id=\"weeklyPlanList\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <div class=\"planning-card\">\r\n <h4>\uc6d4\uac04 \uc9c0\ucd9c \uacc4\ud68d<\/h4>\r\n <form id=\"monthlyPlanForm\">\r\n <div class=\"form-group\">\r\n <label for=\"monthlyCategory\">\uce74\ud14c\uace0\ub9ac<\/label>\r\n <select id=\"monthlyCategory\" required>\r\n <option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"monthlyAmount\">\uc608\uc815 \uae08\uc561<\/label>\r\n <input type=\"number\" id=\"monthlyAmount\" placeholder=\"0\" required>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">\ucd94\uac00<\/button>\r\n <\/form>\r\n <div id=\"monthlyPlanList\" style=\"margin-top: 20px;\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"reports\" class=\"tab-content\">\r\n <div class=\"form-section\">\r\n <h3 style=\"margin-bottom: 30px;\">\ub9ac\ud3ec\ud2b8<\/h3>\r\n <div class=\"planning-grid\">\r\n <div class=\"planning-card\">\r\n <h4>\uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c0\ucd9c<\/h4>\r\n <div id=\"categoryReport\"><\/div>\r\n <\/div>\r\n <div class=\"planning-card\">\r\n <h4>\uacc4\uc88c\ubcc4 \uc794\uc561 \ucd94\uc774<\/h4>\r\n <div id=\"balanceReport\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\uc18c\r\n let transactions = JSON.parse(localStorage.getItem('transactions')) || [];\r\n let weeklyPlans = JSON.parse(localStorage.getItem('weeklyPlans')) || [];\r\n let monthlyPlans = JSON.parse(localStorage.getItem('monthlyPlans')) || [];\r\n\r\n \/\/ \uce74\ud14c\uace0\ub9ac \uc815\uc758\r\n const categories = {\r\n income: ['\uae09\uc5ec', '\ubd80\uc218\uc785', '\ud22c\uc790\uc218\uc775', '\uae30\ud0c0\uc218\uc785'],\r\n expense: ['\uc2dd\ube44', '\uad50\ud1b5\ube44', '\uc8fc\uac70\ube44', '\ud1b5\uc2e0\ube44', '\uc758\ub8cc\ube44', '\uad50\uc721\ube44', '\ubb38\ud654\uc0dd\ud65c', '\uc1fc\ud551', '\uae30\ud0c0\uc9c0\ucd9c']\r\n };\r\n\r\n \/\/ \ucd08\uae30\ud654\r\n document.addEventListener('DOMContentLoaded', function() {\r\n setCurrentDate();\r\n updateCategoryOptions();\r\n loadTransactions();\r\n updateBalances();\r\n loadPlans();\r\n updateReports();\r\n \r\n \/\/ \ud3fc \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\r\n document.getElementById('transactionForm').addEventListener('submit', addTransaction);\r\n document.getElementById('weeklyPlanForm').addEventListener('submit', addWeeklyPlan);\r\n document.getElementById('monthlyPlanForm').addEventListener('submit', addMonthlyPlan);\r\n \r\n \/\/ \uac70\ub798 \uc720\ud615 \ubcc0\uacbd \uc2dc \uce74\ud14c\uace0\ub9ac \uc5c5\ub370\uc774\ud2b8\r\n document.getElementById('transactionType').addEventListener('change', updateCategoryOptions);\r\n });\r\n\r\n \/\/ \ud604\uc7ac \ub0a0\uc9dc \uc124\uc815\r\n function setCurrentDate() {\r\n const today = new Date();\r\n const dateStr = today.toLocaleDateString('ko-KR', { \r\n year: 'numeric', \r\n month: 'long', \r\n day: 'numeric',\r\n weekday: 'long'\r\n });\r\n document.getElementById('currentDate').textContent = dateStr;\r\n document.getElementById('transactionDate').value = today.toISOString().split('T')[0];\r\n }\r\n\r\n \/\/ \ud0ed \uc804\ud658\r\n function switchTab(tabName) {\r\n document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));\r\n document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));\r\n \r\n event.target.classList.add('active');\r\n document.getElementById(tabName).classList.add('active');\r\n \r\n if (tabName === 'reports') {\r\n updateReports();\r\n }\r\n }\r\n\r\n \/\/ \uce74\ud14c\uace0\ub9ac \uc635\uc158 \uc5c5\ub370\uc774\ud2b8\r\n function updateCategoryOptions() {\r\n const transactionType = document.getElementById('transactionType').value;\r\n const categorySelect = document.getElementById('category');\r\n const weeklySelect = document.getElementById('weeklyCategory');\r\n const monthlySelect = document.getElementById('monthlyCategory');\r\n \r\n categorySelect.innerHTML = '<option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>';\r\n \r\n if (transactionType && categories[transactionType]) {\r\n categories[transactionType].forEach(cat => {\r\n categorySelect.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\r\n });\r\n }\r\n \r\n \/\/ \uacc4\ud68d \uce74\ud14c\uace0\ub9ac \uc5c5\ub370\uc774\ud2b8\r\n const allExpenseCategories = categories.expense;\r\n weeklySelect.innerHTML = '<option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>';\r\n monthlySelect.innerHTML = '<option value=\"\">\uc120\ud0dd\ud558\uc138\uc694<\/option>';\r\n \r\n allExpenseCategories.forEach(cat => {\r\n weeklySelect.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\r\n monthlySelect.innerHTML += `<option value=\"${cat}\">${cat}<\/option>`;\r\n });\r\n }\r\n\r\n \/\/ \uac70\ub798 \ucd94\uac00\r\n function addTransaction(e) {\r\n e.preventDefault();\r\n \r\n const transaction = {\r\n id: Date.now(),\r\n date: document.getElementById('transactionDate').value,\r\n type: document.getElementById('transactionType').value,\r\n account: document.getElementById('accountType').value,\r\n category: document.getElementById('category').value,\r\n amount: parseFloat(document.getElementById('amount').value),\r\n description: document.getElementById('description').value\r\n };\r\n \r\n transactions.push(transaction);\r\n saveData();\r\n loadTransactions();\r\n updateBalances();\r\n \r\n \/\/ \ud3fc \ucd08\uae30\ud654\r\n document.getElementById('transactionForm').reset();\r\n setCurrentDate();\r\n \r\n showAlert('\uac70\ub798\uac00 \uc131\uacf5\uc801\uc73c\ub85c \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \uac70\ub798 \uc0ad\uc81c\r\n function deleteTransaction(id) {\r\n if (confirm('\uc815\ub9d0\ub85c \uc774 \uac70\ub798\ub97c \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?')) {\r\n transactions = transactions.filter(t => t.id !== id);\r\n saveData();\r\n loadTransactions();\r\n updateBalances();\r\n showAlert('\uac70\ub798\uac00 \uc0ad\uc81c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n }\r\n\r\n \/\/ \uac70\ub798 \ubaa9\ub85d \ub85c\ub4dc\r\n function loadTransactions() {\r\n const listContainer = document.getElementById('transactionList');\r\n \r\n if (transactions.length === 0) {\r\n listContainer.innerHTML = `\r\n <div class=\"empty-state\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\" \/>\r\n <\/svg>\r\n <p>\uc544\uc9c1 \uac70\ub798 \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n const sortedTransactions = [...transactions].sort((a, b) => new Date(b.date) - new Date(a.date));\r\n \r\n listContainer.innerHTML = sortedTransactions.map(t => `\r\n <div class=\"transaction-item\">\r\n <div data-label=\"\ub0a0\uc9dc\">${new Date(t.date).toLocaleDateString('ko-KR')}<\/div>\r\n <div data-label=\"\uacc4\uc88c\">${getAccountName(t.account)}<\/div>\r\n <div data-label=\"\uc124\uba85\">${t.description || '-'}<\/div>\r\n <div data-label=\"\uce74\ud14c\uace0\ub9ac\">${t.category}<\/div>\r\n <div data-label=\"\uae08\uc561\">\r\n <span class=\"transaction-type ${t.type}\">\r\n ${t.type === 'income' ? '+' : '-'}\u20a9${formatNumber(t.amount)}\r\n <\/span>\r\n <\/div>\r\n <div data-label=\"\">\r\n <button class=\"btn btn-danger\" onclick=\"deleteTransaction(${t.id})\" style=\"padding: 8px 16px;\">\r\n \uc0ad\uc81c\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ \uc794\uc561 \uc5c5\ub370\uc774\ud2b8\r\n function updateBalances() {\r\n const balances = {\r\n cash: 0,\r\n corporate: 0,\r\n personal: 0\r\n };\r\n \r\n const now = new Date();\r\n const currentMonth = now.getMonth();\r\n const currentYear = now.getFullYear();\r\n let monthlyIncome = 0;\r\n let monthlyExpense = 0;\r\n \r\n transactions.forEach(t => {\r\n const transactionDate = new Date(t.date);\r\n const amount = t.type === 'income' ? t.amount : -t.amount;\r\n balances[t.account] += amount;\r\n \r\n if (transactionDate.getMonth() === currentMonth && transactionDate.getFullYear() === currentYear) {\r\n if (t.type === 'income') {\r\n monthlyIncome += t.amount;\r\n } else {\r\n monthlyExpense += t.amount;\r\n }\r\n }\r\n });\r\n \r\n document.getElementById('cashBalance').textContent = `\u20a9${formatNumber(balances.cash)}`;\r\n document.getElementById('corporateBalance').textContent = `\u20a9${formatNumber(balances.corporate)}`;\r\n document.getElementById('personalBalance').textContent = `\u20a9${formatNumber(balances.personal)}`;\r\n document.getElementById('totalBalance').textContent = `\u20a9${formatNumber(balances.cash + balances.corporate + balances.personal)}`;\r\n document.getElementById('monthlyIncome').textContent = `\u20a9${formatNumber(monthlyIncome)}`;\r\n document.getElementById('monthlyExpense').textContent = `\u20a9${formatNumber(monthlyExpense)}`;\r\n }\r\n\r\n \/\/ \uc8fc\uac04 \uacc4\ud68d \ucd94\uac00\r\n function addWeeklyPlan(e) {\r\n e.preventDefault();\r\n \r\n const plan = {\r\n id: Date.now(),\r\n category: document.getElementById('weeklyCategory').value,\r\n amount: parseFloat(document.getElementById('weeklyAmount').value)\r\n };\r\n \r\n weeklyPlans.push(plan);\r\n saveData();\r\n loadPlans();\r\n \r\n document.getElementById('weeklyPlanForm').reset();\r\n showAlert('\uc8fc\uac04 \uacc4\ud68d\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \uc6d4\uac04 \uacc4\ud68d \ucd94\uac00\r\n function addMonthlyPlan(e) {\r\n e.preventDefault();\r\n \r\n const plan = {\r\n id: Date.now(),\r\n category: document.getElementById('monthlyCategory').value,\r\n amount: parseFloat(document.getElementById('monthlyAmount').value)\r\n };\r\n \r\n monthlyPlans.push(plan);\r\n saveData();\r\n loadPlans();\r\n \r\n document.getElementById('monthlyPlanForm').reset();\r\n showAlert('\uc6d4\uac04 \uacc4\ud68d\uc774 \ucd94\uac00\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \uacc4\ud68d \uc0ad\uc81c\r\n function deleteWeeklyPlan(id) {\r\n weeklyPlans = weeklyPlans.filter(p => p.id !== id);\r\n saveData();\r\n loadPlans();\r\n }\r\n\r\n function deleteMonthlyPlan(id) {\r\n monthlyPlans = monthlyPlans.filter(p => p.id !== id);\r\n saveData();\r\n loadPlans();\r\n }\r\n\r\n \/\/ \uacc4\ud68d \ubaa9\ub85d \ub85c\ub4dc\r\n function loadPlans() {\r\n const weeklyList = document.getElementById('weeklyPlanList');\r\n const monthlyList = document.getElementById('monthlyPlanList');\r\n \r\n weeklyList.innerHTML = weeklyPlans.map(p => `\r\n <div class=\"planning-item\">\r\n <span>${p.category}<\/span>\r\n <div>\r\n <span style=\"margin-right: 10px;\">\u20a9${formatNumber(p.amount)}<\/span>\r\n <button class=\"btn btn-danger\" onclick=\"deleteWeeklyPlan(${p.id})\" style=\"padding: 4px 12px; font-size: 0.85rem;\">\uc0ad\uc81c<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n \r\n monthlyList.innerHTML = monthlyPlans.map(p => `\r\n <div class=\"planning-item\">\r\n <span>${p.category}<\/span>\r\n <div>\r\n <span style=\"margin-right: 10px;\">\u20a9${formatNumber(p.amount)}<\/span>\r\n <button class=\"btn btn-danger\" onclick=\"deleteMonthlyPlan(${p.id})\" style=\"padding: 4px 12px; font-size: 0.85rem;\">\uc0ad\uc81c<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ \ub9ac\ud3ec\ud2b8 \uc5c5\ub370\uc774\ud2b8\r\n function updateReports() {\r\n updateCategoryReport();\r\n updateBalanceReport();\r\n }\r\n\r\n \/\/ \uce74\ud14c\uace0\ub9ac\ubcc4 \uc9c0\ucd9c \ub9ac\ud3ec\ud2b8\r\n function updateCategoryReport() {\r\n const categoryTotals = {};\r\n const now = new Date();\r\n const currentMonth = now.getMonth();\r\n const currentYear = now.getFullYear();\r\n \r\n transactions.forEach(t => {\r\n const transactionDate = new Date(t.date);\r\n if (t.type === 'expense' && \r\n transactionDate.getMonth() === currentMonth && \r\n transactionDate.getFullYear() === currentYear) {\r\n categoryTotals[t.category] = (categoryTotals[t.category] || 0) + t.amount;\r\n }\r\n });\r\n \r\n const reportContainer = document.getElementById('categoryReport');\r\n const sortedCategories = Object.entries(categoryTotals).sort((a, b) => b[1] - a[1]);\r\n \r\n if (sortedCategories.length === 0) {\r\n reportContainer.innerHTML = '<p style=\"color: #9ca3af;\">\uc774\ubc88 \ub2ec \uc9c0\ucd9c \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>';\r\n return;\r\n }\r\n \r\n reportContainer.innerHTML = sortedCategories.map(([category, amount]) => `\r\n <div class=\"planning-item\">\r\n <span>${category}<\/span>\r\n <span style=\"color: #ef4444;\">\u20a9${formatNumber(amount)}<\/span>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n \/\/ \uacc4\uc88c\ubcc4 \uc794\uc561 \ucd94\uc774 \ub9ac\ud3ec\ud2b8\r\n function updateBalanceReport() {\r\n const reportContainer = document.getElementById('balanceReport');\r\n const balances = {\r\n cash: 0,\r\n corporate: 0,\r\n personal: 0\r\n };\r\n \r\n transactions.forEach(t => {\r\n const amount = t.type === 'income' ? t.amount : -t.amount;\r\n balances[t.account] += amount;\r\n });\r\n \r\n reportContainer.innerHTML = `\r\n <div class=\"planning-item\">\r\n <span>\ud604\uae08<\/span>\r\n <span>\u20a9${formatNumber(balances.cash)}<\/span>\r\n <\/div>\r\n <div class=\"planning-item\">\r\n <span>\ubc95\uc778\uacc4\uc88c<\/span>\r\n <span>\u20a9${formatNumber(balances.corporate)}<\/span>\r\n <\/div>\r\n <div class=\"planning-item\">\r\n <span>\uac1c\uc778\uacc4\uc88c<\/span>\r\n <span>\u20a9${formatNumber(balances.personal)}<\/span>\r\n <\/div>\r\n <div class=\"planning-item\" style=\"border-top: 2px solid #e5e7eb; padding-top: 15px; margin-top: 15px; font-weight: bold;\">\r\n <span>\ucd1d \uc790\uc0b0<\/span>\r\n <span>\u20a9${formatNumber(balances.cash + balances.corporate + balances.personal)}<\/span>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ \uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30\r\n function exportToExcel() {\r\n let csvContent = \"\ub0a0\uc9dc,\uad6c\ubd84,\uacc4\uc88c,\uce74\ud14c\uace0\ub9ac,\uae08\uc561,\uc124\uba85\\n\";\r\n \r\n const sortedTransactions = [...transactions].sort((a, b) => new Date(a.date) - new Date(b.date));\r\n \r\n sortedTransactions.forEach(t => {\r\n const row = [\r\n t.date,\r\n t.type === 'income' ? '\uc218\uc785' : '\uc9c0\ucd9c',\r\n getAccountName(t.account),\r\n t.category,\r\n t.amount,\r\n t.description || ''\r\n ].join(',');\r\n csvContent += row + '\\n';\r\n });\r\n \r\n \/\/ BOM \ucd94\uac00 (\ud55c\uae00 \uc778\ucf54\ub529)\r\n const BOM = '\\uFEFF';\r\n const blob = new Blob([BOM + csvContent], { type: 'text\/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n const url = URL.createObjectURL(blob);\r\n \r\n link.setAttribute('href', url);\r\n link.setAttribute('download', `\uac00\uacc4\ubd80_${new Date().toISOString().split('T')[0]}.csv`);\r\n link.style.display = 'none';\r\n \r\n document.body.appendChild(link);\r\n link.click();\r\n document.body.removeChild(link);\r\n \r\n showAlert('\uc5d1\uc140 \ud30c\uc77c\uc774 \ub2e4\uc6b4\ub85c\ub4dc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.', 'success');\r\n }\r\n\r\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\r\n function saveData() {\r\n localStorage.setItem('transactions', JSON.stringify(transactions));\r\n localStorage.setItem('weeklyPlans', JSON.stringify(weeklyPlans));\r\n localStorage.setItem('monthlyPlans', JSON.stringify(monthlyPlans));\r\n }\r\n\r\n \/\/ \uc720\ud2f8\ub9ac\ud2f0 \ud568\uc218\r\n function formatNumber(num) {\r\n return Math.round(num).toLocaleString('ko-KR');\r\n }\r\n\r\n function getAccountName(account) {\r\n const names = {\r\n cash: '\ud604\uae08',\r\n corporate: '\ubc95\uc778\uacc4\uc88c',\r\n personal: '\uac1c\uc778\uacc4\uc88c'\r\n };\r\n return names[account] || account;\r\n }\r\n\r\n function showAlert(message, type) {\r\n const alert = document.getElementById(type + 'Alert');\r\n alert.textContent = message;\r\n alert.style.display = 'block';\r\n \r\n setTimeout(() => {\r\n alert.style.display = 'none';\r\n }, 3000);\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 \uc2a4\ub9c8\ud2b8 \uac00\uacc4\ubd80 \ud604\uae08 \u20a90 \ubc95\uc778\uacc4\uc88c \u20a90 \uac1c\uc778\uacc4\uc88c \u20a90 \ucd1d \uc790\uc0b0 \u20a90 \uc774\ubc88\ub2ec \uc218\uc785 \u20a90 \uc774\ubc88\ub2ec \uc9c0\ucd9c \u20a90 \uac70\ub798\ub0b4\uc5ed \uc7ac\ubb34\uacc4\ud68d \ub9ac\ud3ec\ud2b8 \uac70\ub798 \uc785\ub825 \ub0a0\uc9dc \uad6c\ubd84 \uc120\ud0dd\ud558\uc138\uc694\uc218\uc785\uc9c0\ucd9c \uacc4\uc88c \uc120\ud0dd\ud558\uc138\uc694\ud604\uae08\ubc95\uc778\uacc4\uc88c\uac1c\uc778\uacc4\uc88c \uce74\ud14c\uace0\ub9ac \uc120\ud0dd\ud558\uc138\uc694 \uae08\uc561 \uc124\uba85 + \uac70\ub798 \ucd94\uac00 \ud83d\udcca \uc5d1\uc140\ub85c \ub0b4\ubcf4\ub0b4\uae30 \ub0a0\uc9dc \uacc4\uc88c \uc124\uba85 \uce74\ud14c\uace0\ub9ac \uae08\uc561 \uc0ad\uc81c \uc7ac\ubb34 \uacc4\ud68d \uc8fc\uac04 \uc9c0\ucd9c \uacc4\ud68d \uce74\ud14c\uace0\ub9ac \uc120\ud0dd\ud558\uc138\uc694 \uc608\uc815 \uae08\uc561 \ucd94\uac00 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"wf_page_folders":[],"class_list":["post-3513","page","type-page","status-publish","format-standard","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/pages\/3513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/comments?post=3513"}],"version-history":[{"count":0,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/pages\/3513\/revisions"}],"wp:attachment":[{"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/media?parent=3513"}],"wp:term":[{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/hcbiopharm.net\/ko_kr\/wp-json\/wp\/v2\/wf_page_folders?post=3513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}