\uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n h1 {\n text-align: center;\n color: white;\n margin-bottom: 30px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n font-size: 2.5em;\n }\n\n .tabs {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .tab {\n padding: 12px 24px;\n background: rgba(255,255,255,0.2);\n color: white;\n border: none;\n border-radius: 10px 10px 0 0;\n cursor: pointer;\n font-size: 16px;\n font-weight: 600;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n }\n\n .tab:hover {\n background: rgba(255,255,255,0.3);\n transform: translateY(-2px);\n }\n\n .tab.active {\n background: white;\n color: #667eea;\n box-shadow: 0 -5px 20px rgba(0,0,0,0.1);\n }\n\n .content {\n background: white;\n border-radius: 20px;\n padding: 30\u0e31\u0e07\u0e32\u0e19;\n box-shadow: 0 20px 60px rgba(0,0,0,0.1);\n animation: fadeIn 0.5s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .tab-content {\n display: none;\n }\n\n .tab-content.active {\n display: block;\n animation: slideIn 0.4s ease;\n }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateX(-20px); }\n to { opacity: 1; transform: translateX(0); }\n }\n\n .form-section {\n margin-bottom: 25px;\n padding: 20px;\n background: #f8f9fa;\n border-radius: 15px;\n border: 2px solid transparent;\n transition: all 0.3s ease;\n }\n\n .form-section:hover {\n border-color: #667eea;\n box-shadow: 0 5px 15px rgba(102,126,234,0.1);\n }\n\n .form-section h3 {\n color: #333;\n margin-bottom: 15px;\n font-size: 1.3em;\n }\n\n .form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n }\n\n label {\n display: block;\n margin-bottom: 5px;\n color: #555;\n font-weight: 500;\n font-size: 14px;\n }\n\n input, select {\n width: 100%;\n padding: 10px 15px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n font-size: 15px;\n transition: all 0.3s ease;\n }\n\n input:focus, select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102,126,234,0.1);\n }\n\n button {\n padding: 12px 24px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 600;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(102,126,234,0.3);\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(102,126,234,0.4);\n }\n\n button:active {\n transform: translateY(0);\n }\n\n .category-inputs {\n background: white;\n padding: 15px;\n border-radius: 10px;\n border: 1px solid #e0e0e0;\n }\n\n .expense-list {\n margin-top: 20px;\n }\n\n .expense-item {\n display: grid;\n grid-template-columns: 100px 1fr 100px 120px 80px;\n gap: 10px;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 8px;\n margin-bottom: 10px;\n align-items: center;\n transition: all 0.3s ease;\n }\n\n .expense-item:hover {\n background: #e9ecef;\n transform: translateX(5px);\n }\n\n .delete-btn {\n background: #dc3545;\n padding: 6px 12px;\n font-size: 14px;\n box-shadow: 0 2px 8px rgba(220,53,69,0.3);\n }\n\n .delete-btn:hover {\n background: #c82333;\n box-shadow: 0 4px 12px rgba(220,53,69,0.4);\n }\n\n .analysis-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .stat-card {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n padding: 20px;\n border-radius: 15px;\n color: white;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n }\n\n .stat-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n }\n\n .stat-card.green {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n }\n\n .stat-card.orange {\n background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n }\n\n .stat-card.purple {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n\n .stat-card h4 {\n margin-bottom: 10px;\n opacity: 0.9;\n font-size: 14px;\n font-weight: 500;\n }\n\n .stat-card .value {\n font-size: 28px;\n font-weight: bold;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n }\n\n .category-analysis {\n background: #f8f9fa;\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 20px;\n border-left: 4px solid #667eea;\n }\n\n .category-analysis h4 {\n color: #333;\n margin-bottom: 15px;\n font-size: 1.2em;\n }\n\n .progress-bar {\n width: 100%;\n height: 25px;\n background: #e0e0e0;\n border-radius: 12px;\n overflow: hidden;\n position: relative;\n margin: 10px 0;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 12px;\n transition: width 0.5s ease;\n display: flex;\n align-items: center;\n padding-right: 10px;\n justify-content: flex-end;\n color: white;\n font-weight: 600;\n font-size: 12px;\n }\n\n .progress-fill.warning {\n background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);\n }\n\n .progress-fill.danger {\n background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%);\n }\n\n .info-text {\n color: #666;\n font-size: 14px;\n margin-top: 5px;\n }\n\n .warning-text {\n color: #ff6b6b;\n font-weight: 600;\n margin-top: 5px;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n .summary-section {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 25px;\n border-radius: 15px;\n margin-top: 25px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n }\n\n .summary-section h4 {\n margin-bottom: 15px;\n font-size: 1.3em;\n }\n\n .recommendation {\n background: rgba(255,255,255,0.2);\n padding: 15px;\n border-radius: 10px;\n backdrop-filter: blur(10px);\n margin-top: 10px;\n }\n\n @media (max-width: 768px) {\n .expense-item {\n grid-template-columns: 1fr;\n gap: 5px;\n }\n \n .analysis-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\u2708\ufe0f \uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790<\/h1>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showTab('budget')\">\ud83d\udcb0 \uc608\uc0b0 \uc124\uc815<\/button>\n <button class=\"tab\" onclick=\"showTab('expense')\">\ud83d\udcb3 \uc9c0\ucd9c \uc785\ub825<\/button>\n <button class=\"tab\" onclick=\"showTab('analysis')\">\ud83d\udcca \uc804\uccb4 \ubd84\uc11d<\/button>\n <\/div>\n\n <div class=\"content\">\n \n <div id=\"budget\" class=\"tab-content active\">\n <div class=\"form-section\">\n <h3>\uc5ec\ud589 \uae30\ubcf8 \uc815\ubcf4<\/h3>\n <div class=\"form-grid\">\n <div>\n <label>\uc5ec\ud589 \uc2dc\uc791\uc77c<\/label>\n <input type=\"date\" id=\"startDate\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\uc5ec\ud589 \uc885\ub8cc\uc77c<\/label>\n <input type=\"date\" id=\"endDate\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\uc804\uccb4 \uc608\uc0b0 ($)<\/label>\n <input type=\"number\" id=\"totalBudget\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\uc5ec\ud589 \uc778\uc6d0\uc218<\/label>\n <input type=\"number\" id=\"travelers\" min=\"1\" value=\"1\" placeholder=\"1\" onchange=\"saveData()\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-section\">\n <h3>\ud56d\ubaa9\ubcc4 \uc608\uc0b0<\/h3>\n <div class=\"category-inputs\">\n <div class=\"form-grid\">\n <div>\n <label>\ud83c\udfe8 \uc219\ubc15\ube44 ($)<\/label>\n <input type=\"number\" id=\"budgetAccommodation\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83c\udf7d\ufe0f \uc2dd\ube44 ($)<\/label>\n <input type=\"number\" id=\"budgetFood\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83d\ude97 \uad50\ud1b5\ube44 ($)<\/label>\n <input type=\"number\" id=\"budgetTransport\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83c\udfab \uad00\uad11\/\ud65c\ub3d9 ($)<\/label>\n <input type=\"number\" id=\"budgetActivity\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83d\udecd\ufe0f \uc1fc\ud551 ($)<\/label>\n <input type=\"number\" id=\"budgetShopping\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83d\udcbc \uae30\ud0c0 ($)<\/label>\n <input type=\"number\" id=\"budgetOther\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"expense\" class=\"tab-content\">\n <div class=\"form-section\">\n <h3>\uc0c8\ub85c\uc6b4 \uc9c0\ucd9c \ucd94\uac00<\/h3>\n <div class=\"form-grid\">\n <div>\n <label>\ub0a0\uc9dc<\/label>\n <input type=\"date\" id=\"expenseDate\">\n <\/div>\n <div>\n <label>\uce74\ud14c\uace0\ub9ac<\/label>\n <select id=\"expenseCategory\">\n <option value=\"accommodation\">\ud83c\udfe8 \uc219\ubc15\ube44<\/option>\n <option value=\"food\">\ud83c\udf7d\ufe0f \uc2dd\ube44<\/option>\n <option value=\"transport\">\ud83d\ude97 \uad50\ud1b5\ube44<\/option>\n <option value=\"activity\">\ud83c\udfab \uad00\uad11\/\ud65c\ub3d9<\/option>\n <option value=\"shopping\">\ud83d\udecd\ufe0f \uc1fc\ud551<\/option>\n <option value=\"other\">\ud83d\udcbc \uae30\ud0c0<\/option>\n <\/select>\n <\/div>\n <div>\n <label>\uae08\uc561 ($)<\/label>\n <input type=\"number\" id=\"expenseAmount\" step=\"0.01\" placeholder=\"0.00\">\n <\/div>\n <div>\n <label>\uc124\uba85<\/label>\n <input type=\"text\" id=\"expenseDescription\" placeholder=\"\uc9c0\ucd9c \ub0b4\uc6a9\">\n <\/div>\n <\/div>\n <button onclick=\"addExpense()\" style=\"margin-top: 15px;\">\uc9c0\ucd9c \ucd94\uac00<\/button>\n <\/div>\n\n <div class=\"expense-list\">\n <h3>\uc9c0\ucd9c \ub0b4\uc5ed<\/h3>\n <div id=\"expenseList\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"analysis\" class=\"tab-content\">\n <div class=\"analysis-grid\">\n <div class=\"stat-card\">\n <h4>\uc804\uccb4 \uc608\uc0b0<\/h4>\n <div class=\"value\" id=\"statTotalBudget\">$0<\/div>\n <\/div>\n <div class=\"stat-card green\">\n <h4>\ucd1d \uc9c0\ucd9c<\/h4>\n <div class=\"value\" id=\"statTotalSpent\">$0<\/div>\n <\/div>\n <div class=\"stat-card orange\">\n <h4>\ub0a8\uc740 \uc608\uc0b0<\/h4>\n <div class=\"value\" id=\"statRemaining\">$0<\/div>\n <\/div>\n <div class=\"stat-card purple\">\n <h4>\uc77c\uc77c \uad8c\uc7a5 \uc9c0\ucd9c<\/h4>\n <div class=\"value\" id=\"statDailyRecommended\">$0<\/div>\n <\/div>\n <\/div>\n\n <div id=\"categoryAnalysis\"><\/div>\n\n <div class=\"form-section\" style=\"background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;\">\n <h3>\ud83c\udf7d\ufe0f \uc2dd\ube44 \ud2b9\ubcc4 \ubd84\uc11d<\/h3>\n <div id=\"foodSpecialAnalysis\"><\/div>\n <\/div>\n\n <div class=\"summary-section\">\n <h4>\ud83d\udcc8 \uc9c0\ucd9c \uc608\uce21 \ubc0f \uad8c\uc7a5\uc0ac\ud56d<\/h4>\n <div class=\"recommendation\" id=\"recommendation\">\n \uc5ec\ud589 \uc815\ubcf4\uc640 \uc9c0\ucd9c \ub0b4\uc5ed\uc744 \uc785\ub825\ud558\uba74 \ubd84\uc11d \uacb0\uacfc\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5 \uad6c\uc870\n let travelData = {\n startDate: '',\n endDate: '',\n totalBudget: 0,\n travelers: 1,\n categoryBudgets: {\n accommodation: 0,\n food: 0,\n transport: 0,\n activity: 0,\n shopping: 0,\n other: 0\n },\n expenses: []\n };\n\n \/\/ \uce74\ud14c\uace0\ub9ac \uc774\ub984 \ub9e4\ud551\n const categoryNames = {\n accommodation: '\uc219\ubc15\ube44',\n food: '\uc2dd\ube44',\n transport: '\uad50\ud1b5\ube44',\n activity: '\uad00\uad11\/\ud65c\ub3d9',\n shopping: '\uc1fc\ud551',\n other: '\uae30\ud0c0'\n };\n\n const categoryEmojis = {\n accommodation: '\ud83c\udfe8',\n food: '\ud83c\udf7d\ufe0f',\n transport: '\ud83d\ude97',\n activity: '\ud83c\udfab',\n shopping: '\ud83d\udecd\ufe0f',\n other: '\ud83d\udcbc'\n };\n\n \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30\n window.onload = function() {\n loadData();\n updateExpenseList();\n updateAnalysis();\n };\n\n \/\/ \ud0ed \uc804\ud658\n function showTab(tabName) {\n const tabs = document.querySelectorAll('.tab');\n const contents = document.querySelectorAll('.tab-content');\n \n tabs.forEach(tab => tab.classList.remove('active'));\n contents.forEach(content => content.classList.remove('active'));\n \n event.target.classList.add('active');\n document.getElementById(tabName).classList.add('active');\n \n if (tabName === 'analysis') {\n updateAnalysis();\n }\n }\n\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\n function saveData() {\n travelData.startDate = document.getElementById('startDate').value;\n travelData.endDate = document.getElementById('endDate').value;\n travelData.totalBudget = parseFloat(document.getElementById('totalBudget').value) || 0;\n travelData.travelers = parseInt(document.getElementById('travelers').value) || 1;\n \n travelData.categoryBudgets.accommodation = parseFloat(document.getElementById('budgetAccommodation').value) || 0;\n travelData.categoryBudgets.food = parseFloat(document.getElementById('budgetFood').value) || 0;\n travelData.categoryBudgets.transport = parseFloat(document.getElementById('budgetTransport').value) || 0;\n travelData.categoryBudgets.activity = parseFloat(document.getElementById('budgetActivity').value) || 0;\n travelData.categoryBudgets.shopping = parseFloat(document.getElementById('budgetShopping').value) || 0;\n travelData.categoryBudgets.other = parseFloat(document.getElementById('budgetOther').value) || 0;\n \n localStorage.setItem('travelData', JSON.stringify(travelData));\n updateAnalysis();\n }\n\n \/\/ \ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30\n function loadData() {\n const saved = localStorage.getItem('travelData');\n if (saved) {\n travelData = JSON.parse(saved);\n \n document.getElementById('startDate').value = travelData.startDate || '';\n document.getElementById('endDate').value = travelData.endDate || '';\n document.getElementById('totalBudget').value = travelData.totalBudget || '';\n document.getElementById('travelers').value = travelData.travelers || 1;\n \n document.getElementById('budgetAccommodation').value = travelData.categoryBudgets.accommodation || '';\n document.getElementById('budgetFood').value = travelData.categoryBudgets.food || '';\n document.getElementById('budgetTransport').value = travelData.categoryBudgets.transport || '';\n document.getElementById('budgetActivity').value = travelData.categoryBudgets.activity || '';\n document.getElementById('budgetShopping').value = travelData.categoryBudgets.shopping || '';\n document.getElementById('budgetOther').value = travelData.categoryBudgets.other || '';\n }\n }\n\n \/\/ \uc9c0\ucd9c \ucd94\uac00\n function addExpense() {\n const date = document.getElementById('expenseDate').value;\n const category = document.getElementById('expenseCategory').value;\n const amount = parseFloat(document.getElementById('expenseAmount').value);\n const description = document.getElementById('expenseDescription').value;\n \n if (!date || !amount || !description) {\n alert('\ubaa8\ub4e0 \ud544\ub4dc\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.');\n return;\n }\n \n const expense = {\n id: Date.now(),\n date: date,\n category: category,\n amount: amount,\n description: description\n };\n \n travelData.expenses.push(expense);\n localStorage.setItem('travelData', JSON.stringify(travelData));\n \n \/\/ \uc785\ub825 \ud544\ub4dc \ucd08\uae30\ud654\n document.getElementById('expenseAmount').value = '';\n document.getElementById('expenseDescription').value = '';\n \n updateExpenseList();\n updateAnalysis();\n }\n\n \/\/ \uc9c0\ucd9c \uc0ad\uc81c\n function deleteExpense(id) {\n travelData.expenses = travelData.expenses.filter(e => e.id !== id);\n localStorage.setItem('travelData', JSON.stringify(travelData));\n updateExpenseList();\n updateAnalysis();\n }\n\n \/\/ \uc9c0\ucd9c \ubaa9\ub85d \uc5c5\ub370\uc774\ud2b8\n function updateExpenseList() {\n const listContainer = document.getElementById('expenseList');\n \n if (travelData.expenses.length === 0) {\n listContainer.innerHTML = '<p style=\"color: #666; text-align: center; padding: 20px;\">\uc544\uc9c1 \uc9c0\ucd9c \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>';\n return;\n }\n \n \/\/ \ub0a0\uc9dc \uc21c\uc73c\ub85c \uc815\ub82c\n const sortedExpenses = [...travelData.expenses].sort((a, b) => new Date(b.date) - new Date(a.date));\n \n listContainer.innerHTML = sortedExpenses.map(expense => `\n <div class=\"expense-item\">\n <div>${expense.date}<\/div>\n <div><strong>${categoryEmojis[expense.category]} ${categoryNames[expense.category]}<\/strong>: ${expense.description}<\/div>\n <div>$${expense.amount.toFixed(2)}<\/div>\n <div><\/div>\n <button class=\"delete-btn\" onclick=\"deleteExpense(${expense.id})\">\uc0ad\uc81c<\/button>\n <\/div>\n `).join('');\n }\n\n \/\/ \ubd84\uc11d \uc5c5\ub370\uc774\ud2b8\n function updateAnalysis() {\n \/\/ \uae30\ubcf8 \ud1b5\uacc4\n const totalSpent = travelData.expenses.reduce((sum, e) => sum + e.amount, 0);\n const remaining = travelData.totalBudget - totalSpent;\n \n document.getElementById('statTotalBudget').textContent = `$${travelData.totalBudget.toFixed(2)}`;\n document.getElementById('statTotalSpent').textContent = `$${totalSpent.toFixed(2)}`;\n document.getElementById('statRemaining').textContent = `$${remaining.toFixed(2)}`;\n \n \/\/ \ub0a8\uc740 \uc77c\uc218 \uacc4\uc0b0\n const today = new Date();\n const endDate = new Date(travelData.endDate);\n const remainingDays = Math.max(1, Math.ceil((endDate - today) \/ (1000 * 60 * 60 * 24)));\n const dailyRecommended = remaining > 0 ? remaining \/ remainingDays : 0;\n \n document.getElementById('statDailyRecommended').textContent = `$${dailyRecommended.toFixed(2)}`;\n \n \/\/ \uce74\ud14c\uace0\ub9ac\ubcc4 \ubd84\uc11d\n const categorySpent = {};\n for (let cat in categoryNames) {\n categorySpent[cat] = travelData.expenses\n .filter(e => e.category === cat)\n .reduce((sum, e) => sum + e.amount, 0);\n }\n \n const categoryAnalysisHTML = Object.entries(categoryNames).map(([key, name]) => {\n const budget = travelData.categoryBudgets[key];\n const spent = categorySpent[key];\n const remaining = budget - spent;\n const percentage = budget > 0 ? (spent \/ budget) * 100 : 0;\n \n let progressClass = '';\n if (percentage > 100) progressClass = 'danger';\n else if (percentage > 80) progressClass = 'warning';\n \n return `\n <div class=\"category-analysis\">\n <h4>${categoryEmojis[key]} ${name}<\/h4>\n <div class=\"progress-bar\">\n <div class=\"progress-fill ${progressClass}\" style=\"width: ${Math.min(percentage, 100)}%\">\n ${percentage.toFixed(0)}%\n <\/div>\n <\/div>\n <div class=\"info-text\">\n \uc608\uc0b0: $${budget.toFixed(2)} | \uc9c0\ucd9c: $${spent.toFixed(2)} | \uc794\uc561: $${remaining.toFixed(2)}\n <\/div>\n ${percentage > 100 ? '<div class=\"warning-text\">\u26a0\ufe0f \uc608\uc0b0 \ucd08\uacfc!<\/div>' : ''}\n <\/div>\n `;\n }).join('');\n \n document.getElementById('categoryAnalysis').innerHTML = categoryAnalysisHTML;\n \n \/\/ \uc2dd\ube44 \ud2b9\ubcc4 \ubd84\uc11d\n updateFoodAnalysis(categorySpent.food, remainingDays);\n \n \/\/ \uad8c\uc7a5\uc0ac\ud56d \uc0dd\uc131\n generateRecommendation(totalSpent, remaining, remainingDays, categorySpent);\n }\n\n \/\/ \uc2dd\ube44 \ud2b9\ubcc4 \ubd84\uc11d \ud568\uc218\n function updateFoodAnalysis(foodSpent, remainingDays) {\n const foodBudget = travelData.categoryBudgets.food;\n const foodRemaining = foodBudget - foodSpent;\n const travelers = travelData.travelers || 1;\n \n \/\/ \uc804\uccb4 \uc5ec\ud589 \uc77c\uc218 \uacc4\uc0b0\n const totalDays = Math.ceil((new Date(travelData.endDate) - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24)) || 1;\n \n \/\/ \uc9c0\uae08\uae4c\uc9c0 \uc9c0\ub09c \uc77c\uc218\n const elapsedDays = Math.max(1, Math.ceil((new Date() - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24)));\n \n \/\/ \uc2dd\ube44 \uad00\ub828 \uacc4\uc0b0\n const mealsPerDay = 3; \/\/ \ud558\ub8e8 3\ub07c\n const totalMeals = totalDays * mealsPerDay * travelers;\n const remainingMeals = remainingDays * mealsPerDay * travelers;\n const usedMeals = elapsedDays * mealsPerDay * travelers;\n \n \/\/ 1\uc778 1\ub07c \uacc4\uc0b0\n const avgPerMealPerPerson = foodBudget \/ (totalDays * mealsPerDay * travelers);\n const remainingPerMealPerPerson = foodRemaining > 0 ? foodRemaining \/ remainingMeals : 0;\n const actualPerMealPerPerson = foodSpent > 0 ? foodSpent \/ usedMeals : 0;\n \n \/\/ \uc77c\ubcc4 \uacc4\uc0b0\n const dailyFoodBudgetPerPerson = (foodBudget \/ totalDays) \/ travelers;\n const remainingDailyPerPerson = foodRemaining > 0 ? (foodRemaining \/ remainingDays) \/ travelers : 0;\n \n let analysisHTML = `\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;\">\n <div style=\"background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px; opacity: 0.9;\">\uc608\uc0b0 \uae30\uc900<\/h5>\n <div style=\"font-size: 24px; font-weight: bold;\">${avgPerMealPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px; margin-top: 5px;\">1\uc778 1\ub07c \uc608\uc0b0<\/div>\n <div style=\"font-size: 18px; margin-top: 10px;\">${dailyFoodBudgetPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px;\">1\uc778 \uc77c\uc77c \uc608\uc0b0 (3\ub07c)<\/div>\n <\/div>\n \n <div style=\"background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px; opacity: 0.9;\">\ud604\uc7ac \uc0c1\ud669<\/h5>\n <div style=\"font-size: 24px; font-weight: bold;\">${actualPerMealPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px; margin-top: 5px;\">\uc2e4\uc81c 1\uc778 1\ub07c \ud3c9\uade0<\/div>\n <div style=\"font-size: 18px; margin-top: 10px;\">${((foodSpent \/ foodBudget) * 100).toFixed(0)}%<\/div>\n <div style=\"font-size: 14px;\">\uc608\uc0b0 \uc0ac\uc6a9\ub960<\/div>\n <\/div>\n \n <div style=\"background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px; opacity: 0.9;\">\ub0a8\uc740 \uae30\uac04<\/h5>\n <div style=\"font-size: 24px; font-weight: bold;\">${remainingPerMealPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px; margin-top: 5px;\">1\uc778 1\ub07c \uac00\ub2a5\uc561<\/div>\n <div style=\"font-size: 18px; margin-top: 10px;\">${remainingDailyPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px;\">1\uc778 \uc77c\uc77c \uac00\ub2a5\uc561<\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px;\">\ud83d\udcca \uc2dd\ube44 \uc0c1\uc138 \ubd84\uc11d<\/h5>\n <ul style=\"list-style: none; padding: 0;\">\n <li style=\"margin-bottom: 8px;\">\ud83d\udc65 \uc5ec\ud589 \uc778\uc6d0: ${travelers}\uba85<\/li>\n <li style=\"margin-bottom: 8px;\">\ud83c\udf7d\ufe0f \uc804\uccb4 \uc2dd\uc0ac \ud69f\uc218: ${totalMeals}\ud68c (${totalDays}\uc77c \u00d7 3\ub07c \u00d7 ${travelers}\uba85)<\/li>\n <li style=\"margin-bottom: 8px;\">\u2705 \uc18c\ube44\ud55c \uc2dd\uc0ac: \uc57d ${usedMeals}\ud68c<\/li>\n <li style=\"margin-bottom: 8px;\">\ud83d\udcc5 \ub0a8\uc740 \uc2dd\uc0ac: ${remainingMeals}\ud68c<\/li>\n <\/ul>\n `;\n \n \/\/ \uad8c\uc7a5\uc0ac\ud56d \ucd94\uac00\n if (actualPerMealPerPerson > avgPerMealPerPerson * 1.2) {\n analysisHTML += `\n <div style=\"margin-top: 15px; padding: 10px; background: rgba(255,200,0,0.3); border-radius: 8px;\">\n \u26a0\ufe0f \ud604\uc7ac 1\uc778 1\ub07c \ud3c9\uade0\uc774 \uc608\uc0b0\ubcf4\ub2e4 ${((actualPerMealPerPerson \/ avgPerMealPerPerson - 1) * 100).toFixed(0)}% \ub192\uc2b5\ub2c8\ub2e4. \n \ub0a8\uc740 \uae30\uac04\uc5d0\ub294 \ub07c\ub2c8\ub2f9 ${remainingPerMealPerPerson.toFixed(2)} \uc774\ub0b4\ub85c \uc870\uc808\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\n <\/div>\n `;\n } else if (remainingPerMealPerPerson > avgPerMealPerPerson) {\n analysisHTML += `\n <div style=\"margin-top: 15px; padding: 10px; background: rgba(0,255,100,0.3); border-radius: 8px;\">\n \u2728 \uc2dd\ube44\ub97c \uc798 \uc808\uc57d\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4! \ub0a8\uc740 \uae30\uac04 1\uc778 1\ub07c\uc5d0 ${remainingPerMealPerPerson.toFixed(2)}\uae4c\uc9c0 \uc0ac\uc6a9 \uac00\ub2a5\ud569\ub2c8\ub2e4.\n <\/div>\n `;\n }\n \n analysisHTML += '<\/div>';\n \n document.getElementById('foodSpecialAnalysis').innerHTML = analysisHTML;\n }\n\n \/\/ \uad8c\uc7a5\uc0ac\ud56d \uc0dd\uc131\n function generateRecommendation(totalSpent, remaining, remainingDays, categorySpent) {\n const recommendationDiv = document.getElementById('recommendation');\n let recommendations = [];\n \n if (!travelData.startDate || !travelData.endDate) {\n recommendationDiv.innerHTML = '\uc5ec\ud589 \ub0a0\uc9dc\ub97c \uc124\uc815\ud558\uba74 \ub354 \uc815\ud655\ud55c \ubd84\uc11d\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.';\n return;\n }\n \n \/\/ \uc804\uccb4 \uc608\uc0b0 \uc0c1\ud0dc\n const spentPercentage = (totalSpent \/ travelData.totalBudget) * 100;\n \n if (remaining < 0) {\n recommendations.push(`\u26a0\ufe0f \uc608\uc0b0\uc744 $${Math.abs(remaining).toFixed(2)} \ucd08\uacfc\ud588\uc2b5\ub2c8\ub2e4. \uc9c0\ucd9c\uc744 \uc904\uc774\ub294 \uac83\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.`);\n } else if (remainingDays > 0) {\n recommendations.push(`\u2705 \ub0a8\uc740 ${remainingDays}\uc77c \ub3d9\uc548 \ud558\ub8e8 \ud3c9\uade0 $${(remaining\/remainingDays).toFixed(2)}\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.`);\n }\n \n \/\/ \uce74\ud14c\uace0\ub9ac\ubcc4 \uad8c\uc7a5\uc0ac\ud56d\n const overBudgetCategories = [];\n for (let cat in categoryNames) {\n if (categorySpent[cat] > travelData.categoryBudgets[cat]) {\n overBudgetCategories.push(categoryNames[cat]);\n }\n }\n \n if (overBudgetCategories.length > 0) {\n recommendations.push(`\ud83d\udcca ${overBudgetCategories.join(', ')} \ud56d\ubaa9\uc5d0\uc11c \uc608\uc0b0\uc744 \ucd08\uacfc\ud588\uc2b5\ub2c8\ub2e4.`);\n }\n \n \/\/ \uc608\uce21\n const totalDays = Math.ceil((new Date(travelData.endDate) - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24));\n const elapsedDays = Math.max(1, Math.ceil((new Date() - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24)));\n const currentDailyAvg = totalSpent \/ elapsedDays;\n const projectedTotal = currentDailyAvg * totalDays;\n \n if (elapsedDays > 0 && elapsedDays <= totalDays) {\n recommendations.push(`\ud83d\udcc8 \ud604\uc7ac \uc77c\ud3c9\uade0 \uc9c0\ucd9c: $${currentDailyAvg.toFixed(2)}`);\n recommendations.push(`\ud83c\udfaf \ud604\uc7ac \ucd94\uc138\ub85c\ub294 \uc5ec\ud589 \uc885\ub8cc \uc2dc \ucd1d $${projectedTotal.toFixed(2)}\ub97c \uc9c0\ucd9c\ud560 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4.`);\n \n if (projectedTotal > travelData.totalBudget) {\n const reductionNeeded = ((projectedTotal - travelData.totalBudget) \/ remainingDays).toFixed(2);\n recommendations.push(`\ud83d\udca1 \uc608\uc0b0 \ub0b4 \ub9c8\ubb34\ub9ac\ub97c \uc704\ud574 \uc77c\uc77c \uc9c0\ucd9c\uc744 $${reductionNeeded} \uc904\uc5ec\uc57c \ud569\ub2c8\ub2e4.`);\n } else {\n const surplus = (travelData.totalBudget - projectedTotal).toFixed(2);\n recommendations.push(`\ud83c\udf89 \ud604\uc7ac \ucd94\uc138 \uc720\uc9c0 \uc2dc $${surplus}\uac00 \ub0a8\uc744 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4!`);\n }\n }\n \n recommendationDiv.innerHTML = recommendations.join('<br><br>');\n }\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790 \u2708\ufe0f \uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790 \ud83d\udcb0 \uc608\uc0b0 \uc124\uc815 \ud83d\udcb3 \uc9c0\ucd9c \uc785\ub825 \ud83d\udcca \uc804\uccb4 \ubd84\uc11d \uc5ec\ud589 \uae30\ubcf8 \uc815\ubcf4 \uc5ec\ud589 \uc2dc\uc791\uc77c \uc5ec\ud589 \uc885\ub8cc\uc77c \uc804\uccb4 \uc608\uc0b0 ($) \uc5ec\ud589 \uc778\uc6d0\uc218 \ud56d\ubaa9\ubcc4 \uc608\uc0b0…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2458","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2458"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2458\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2458,"date":"2025-08-27T13:22:47","date_gmt":"2025-08-27T13:22:47","guid":{"rendered":"https:\/\/visionnetworkcamp.org\/?page_id=2458"},"modified":"2025-08-27T15:42:30","modified_gmt":"2025-08-27T15:42:30","slug":"ssh-%ec%98%88%ec%82%b0","status":"publish","type":"page","link":"https:\/\/visionnetworkcamp.org\/ko\/ssh-%ec%98%88%ec%82%b0\/","title":{"rendered":"SSH \uc608\uc0b0"},"content":{"rendered":"\n\n\n \n \n \uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n min-height: 100vh;\n padding: 20px;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n h1 {\n text-align: center;\n color: white;\n margin-bottom: 30px;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.2);\n font-size: 2.5em;\n }\n\n .tabs {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n flex-wrap: wrap;\n }\n\n .tab {\n padding: 12px 24px;\n background: rgba(255,255,255,0.2);\n color: white;\n border: none;\n border-radius: 10px 10px 0 0;\n cursor: pointer;\n font-size: 16px;\n font-weight: 600;\n transition: all 0.3s ease;\n backdrop-filter: blur(10px);\n }\n\n .tab:hover {\n background: rgba(255,255,255,0.3);\n transform: translateY(-2px);\n }\n\n .tab.active {\n background: white;\n color: #667eea;\n box-shadow: 0 -5px 20px rgba(0,0,0,0.1);\n }\n\n .content {\n background: white;\n border-radius: 20px;\n padding: 30\u0e31\u0e07\u0e32\u0e19;\n box-shadow: 0 20px 60px rgba(0,0,0,0.1);\n animation: fadeIn 0.5s ease;\n }\n\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n .tab-content {\n display: none;\n }\n\n .tab-content.active {\n display: block;\n animation: slideIn 0.4s ease;\n }\n\n @keyframes slideIn {\n from { opacity: 0; transform: translateX(-20px); }\n to { opacity: 1; transform: translateX(0); }\n }\n\n .form-section {\n margin-bottom: 25px;\n padding: 20px;\n background: #f8f9fa;\n border-radius: 15px;\n border: 2px solid transparent;\n transition: all 0.3s ease;\n }\n\n .form-section:hover {\n border-color: #667eea;\n box-shadow: 0 5px 15px rgba(102,126,234,0.1);\n }\n\n .form-section h3 {\n color: #333;\n margin-bottom: 15px;\n font-size: 1.3em;\n }\n\n .form-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n }\n\n label {\n display: block;\n margin-bottom: 5px;\n color: #555;\n font-weight: 500;\n font-size: 14px;\n }\n\n input, select {\n width: 100%;\n padding: 10px 15px;\n border: 2px solid #e0e0e0;\n border-radius: 8px;\n font-size: 15px;\n transition: all 0.3s ease;\n }\n\n input:focus, select:focus {\n outline: none;\n border-color: #667eea;\n box-shadow: 0 0 0 3px rgba(102,126,234,0.1);\n }\n\n button {\n padding: 12px 24px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n font-weight: 600;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(102,126,234,0.3);\n }\n\n button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(102,126,234,0.4);\n }\n\n button:active {\n transform: translateY(0);\n }\n\n .category-inputs {\n background: white;\n padding: 15px;\n border-radius: 10px;\n border: 1px solid #e0e0e0;\n }\n\n .expense-list {\n margin-top: 20px;\n }\n\n .expense-item {\n display: grid;\n grid-template-columns: 100px 1fr 100px 120px 80px;\n gap: 10px;\n padding: 12px;\n background: #f8f9fa;\n border-radius: 8px;\n margin-bottom: 10px;\n align-items: center;\n transition: all 0.3s ease;\n }\n\n .expense-item:hover {\n background: #e9ecef;\n transform: translateX(5px);\n }\n\n .delete-btn {\n background: #dc3545;\n padding: 6px 12px;\n font-size: 14px;\n box-shadow: 0 2px 8px rgba(220,53,69,0.3);\n }\n\n .delete-btn:hover {\n background: #c82333;\n box-shadow: 0 4px 12px rgba(220,53,69,0.4);\n }\n\n .analysis-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .stat-card {\n background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n padding: 20px;\n border-radius: 15px;\n color: white;\n box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n transition: all 0.3s ease;\n }\n\n .stat-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n }\n\n .stat-card.green {\n background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n }\n\n .stat-card.orange {\n background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);\n }\n\n .stat-card.purple {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n }\n\n .stat-card h4 {\n margin-bottom: 10px;\n opacity: 0.9;\n font-size: 14px;\n font-weight: 500;\n }\n\n .stat-card .value {\n font-size: 28px;\n font-weight: bold;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\n }\n\n .category-analysis {\n background: #f8f9fa;\n padding: 20px;\n border-radius: 15px;\n margin-bottom: 20px;\n border-left: 4px solid #667eea;\n }\n\n .category-analysis h4 {\n color: #333;\n margin-bottom: 15px;\n font-size: 1.2em;\n }\n\n .progress-bar {\n width: 100%;\n height: 25px;\n background: #e0e0e0;\n border-radius: 12px;\n overflow: hidden;\n position: relative;\n margin: 10px 0;\n }\n\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);\n border-radius: 12px;\n transition: width 0.5s ease;\n display: flex;\n align-items: center;\n padding-right: 10px;\n justify-content: flex-end;\n color: white;\n font-weight: 600;\n font-size: 12px;\n }\n\n .progress-fill.warning {\n background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);\n }\n\n .progress-fill.danger {\n background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%);\n }\n\n .info-text {\n color: #666;\n font-size: 14px;\n margin-top: 5px;\n }\n\n .warning-text {\n color: #ff6b6b;\n font-weight: 600;\n margin-top: 5px;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n\n .summary-section {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 25px;\n border-radius: 15px;\n margin-top: 25px;\n box-shadow: 0 10px 30px rgba(0,0,0,0.2);\n }\n\n .summary-section h4 {\n margin-bottom: 15px;\n font-size: 1.3em;\n }\n\n .recommendation {\n background: rgba(255,255,255,0.2);\n padding: 15px;\n border-radius: 10px;\n backdrop-filter: blur(10px);\n margin-top: 10px;\n }\n\n @media (max-width: 768px) {\n .expense-item {\n grid-template-columns: 1fr;\n gap: 5px;\n }\n \n .analysis-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>\u2708\ufe0f \uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790<\/h1>\n \n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"showTab('budget')\">\ud83d\udcb0 \uc608\uc0b0 \uc124\uc815<\/button>\n <button class=\"tab\" onclick=\"showTab('expense')\">\ud83d\udcb3 \uc9c0\ucd9c \uc785\ub825<\/button>\n <button class=\"tab\" onclick=\"showTab('analysis')\">\ud83d\udcca \uc804\uccb4 \ubd84\uc11d<\/button>\n <\/div>\n\n <div class=\"content\">\n \n <div id=\"budget\" class=\"tab-content active\">\n <div class=\"form-section\">\n <h3>\uc5ec\ud589 \uae30\ubcf8 \uc815\ubcf4<\/h3>\n <div class=\"form-grid\">\n <div>\n <label>\uc5ec\ud589 \uc2dc\uc791\uc77c<\/label>\n <input type=\"date\" id=\"startDate\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\uc5ec\ud589 \uc885\ub8cc\uc77c<\/label>\n <input type=\"date\" id=\"endDate\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\uc804\uccb4 \uc608\uc0b0 ($)<\/label>\n <input type=\"number\" id=\"totalBudget\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\uc5ec\ud589 \uc778\uc6d0\uc218<\/label>\n <input type=\"number\" id=\"travelers\" min=\"1\" value=\"1\" placeholder=\"1\" onchange=\"saveData()\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-section\">\n <h3>\ud56d\ubaa9\ubcc4 \uc608\uc0b0<\/h3>\n <div class=\"category-inputs\">\n <div class=\"form-grid\">\n <div>\n <label>\ud83c\udfe8 \uc219\ubc15\ube44 ($)<\/label>\n <input type=\"number\" id=\"budgetAccommodation\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83c\udf7d\ufe0f \uc2dd\ube44 ($)<\/label>\n <input type=\"number\" id=\"budgetFood\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83d\ude97 \uad50\ud1b5\ube44 ($)<\/label>\n <input type=\"number\" id=\"budgetTransport\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83c\udfab \uad00\uad11\/\ud65c\ub3d9 ($)<\/label>\n <input type=\"number\" id=\"budgetActivity\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83d\udecd\ufe0f \uc1fc\ud551 ($)<\/label>\n <input type=\"number\" id=\"budgetShopping\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <div>\n <label>\ud83d\udcbc \uae30\ud0c0 ($)<\/label>\n <input type=\"number\" id=\"budgetOther\" step=\"0.01\" placeholder=\"0.00\" onchange=\"saveData()\">\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"expense\" class=\"tab-content\">\n <div class=\"form-section\">\n <h3>\uc0c8\ub85c\uc6b4 \uc9c0\ucd9c \ucd94\uac00<\/h3>\n <div class=\"form-grid\">\n <div>\n <label>\ub0a0\uc9dc<\/label>\n <input type=\"date\" id=\"expenseDate\">\n <\/div>\n <div>\n <label>\uce74\ud14c\uace0\ub9ac<\/label>\n <select id=\"expenseCategory\">\n <option value=\"accommodation\">\ud83c\udfe8 \uc219\ubc15\ube44<\/option>\n <option value=\"food\">\ud83c\udf7d\ufe0f \uc2dd\ube44<\/option>\n <option value=\"transport\">\ud83d\ude97 \uad50\ud1b5\ube44<\/option>\n <option value=\"activity\">\ud83c\udfab \uad00\uad11\/\ud65c\ub3d9<\/option>\n <option value=\"shopping\">\ud83d\udecd\ufe0f \uc1fc\ud551<\/option>\n <option value=\"other\">\ud83d\udcbc \uae30\ud0c0<\/option>\n <\/select>\n <\/div>\n <div>\n <label>\uae08\uc561 ($)<\/label>\n <input type=\"number\" id=\"expenseAmount\" step=\"0.01\" placeholder=\"0.00\">\n <\/div>\n <div>\n <label>\uc124\uba85<\/label>\n <input type=\"text\" id=\"expenseDescription\" placeholder=\"\uc9c0\ucd9c \ub0b4\uc6a9\">\n <\/div>\n <\/div>\n <button onclick=\"addExpense()\" style=\"margin-top: 15px;\">\uc9c0\ucd9c \ucd94\uac00<\/button>\n <\/div>\n\n <div class=\"expense-list\">\n <h3>\uc9c0\ucd9c \ub0b4\uc5ed<\/h3>\n <div id=\"expenseList\"><\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"analysis\" class=\"tab-content\">\n <div class=\"analysis-grid\">\n <div class=\"stat-card\">\n <h4>\uc804\uccb4 \uc608\uc0b0<\/h4>\n <div class=\"value\" id=\"statTotalBudget\">$0<\/div>\n <\/div>\n <div class=\"stat-card green\">\n <h4>\ucd1d \uc9c0\ucd9c<\/h4>\n <div class=\"value\" id=\"statTotalSpent\">$0<\/div>\n <\/div>\n <div class=\"stat-card orange\">\n <h4>\ub0a8\uc740 \uc608\uc0b0<\/h4>\n <div class=\"value\" id=\"statRemaining\">$0<\/div>\n <\/div>\n <div class=\"stat-card purple\">\n <h4>\uc77c\uc77c \uad8c\uc7a5 \uc9c0\ucd9c<\/h4>\n <div class=\"value\" id=\"statDailyRecommended\">$0<\/div>\n <\/div>\n <\/div>\n\n <div id=\"categoryAnalysis\"><\/div>\n\n <div class=\"form-section\" style=\"background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;\">\n <h3>\ud83c\udf7d\ufe0f \uc2dd\ube44 \ud2b9\ubcc4 \ubd84\uc11d<\/h3>\n <div id=\"foodSpecialAnalysis\"><\/div>\n <\/div>\n\n <div class=\"summary-section\">\n <h4>\ud83d\udcc8 \uc9c0\ucd9c \uc608\uce21 \ubc0f \uad8c\uc7a5\uc0ac\ud56d<\/h4>\n <div class=\"recommendation\" id=\"recommendation\">\n \uc5ec\ud589 \uc815\ubcf4\uc640 \uc9c0\ucd9c \ub0b4\uc5ed\uc744 \uc785\ub825\ud558\uba74 \ubd84\uc11d \uacb0\uacfc\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4.\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5 \uad6c\uc870\n let travelData = {\n startDate: '',\n endDate: '',\n totalBudget: 0,\n travelers: 1,\n categoryBudgets: {\n accommodation: 0,\n food: 0,\n transport: 0,\n activity: 0,\n shopping: 0,\n other: 0\n },\n expenses: []\n };\n\n \/\/ \uce74\ud14c\uace0\ub9ac \uc774\ub984 \ub9e4\ud551\n const categoryNames = {\n accommodation: '\uc219\ubc15\ube44',\n food: '\uc2dd\ube44',\n transport: '\uad50\ud1b5\ube44',\n activity: '\uad00\uad11\/\ud65c\ub3d9',\n shopping: '\uc1fc\ud551',\n other: '\uae30\ud0c0'\n };\n\n const categoryEmojis = {\n accommodation: '\ud83c\udfe8',\n food: '\ud83c\udf7d\ufe0f',\n transport: '\ud83d\ude97',\n activity: '\ud83c\udfab',\n shopping: '\ud83d\udecd\ufe0f',\n other: '\ud83d\udcbc'\n };\n\n \/\/ \ud398\uc774\uc9c0 \ub85c\ub4dc \uc2dc \ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30\n window.onload = function() {\n loadData();\n updateExpenseList();\n updateAnalysis();\n };\n\n \/\/ \ud0ed \uc804\ud658\n function showTab(tabName) {\n const tabs = document.querySelectorAll('.tab');\n const contents = document.querySelectorAll('.tab-content');\n \n tabs.forEach(tab => tab.classList.remove('active'));\n contents.forEach(content => content.classList.remove('active'));\n \n event.target.classList.add('active');\n document.getElementById(tabName).classList.add('active');\n \n if (tabName === 'analysis') {\n updateAnalysis();\n }\n }\n\n \/\/ \ub370\uc774\ud130 \uc800\uc7a5\n function saveData() {\n travelData.startDate = document.getElementById('startDate').value;\n travelData.endDate = document.getElementById('endDate').value;\n travelData.totalBudget = parseFloat(document.getElementById('totalBudget').value) || 0;\n travelData.travelers = parseInt(document.getElementById('travelers').value) || 1;\n \n travelData.categoryBudgets.accommodation = parseFloat(document.getElementById('budgetAccommodation').value) || 0;\n travelData.categoryBudgets.food = parseFloat(document.getElementById('budgetFood').value) || 0;\n travelData.categoryBudgets.transport = parseFloat(document.getElementById('budgetTransport').value) || 0;\n travelData.categoryBudgets.activity = parseFloat(document.getElementById('budgetActivity').value) || 0;\n travelData.categoryBudgets.shopping = parseFloat(document.getElementById('budgetShopping').value) || 0;\n travelData.categoryBudgets.other = parseFloat(document.getElementById('budgetOther').value) || 0;\n \n localStorage.setItem('travelData', JSON.stringify(travelData));\n updateAnalysis();\n }\n\n \/\/ \ub370\uc774\ud130 \ubd88\ub7ec\uc624\uae30\n function loadData() {\n const saved = localStorage.getItem('travelData');\n if (saved) {\n travelData = JSON.parse(saved);\n \n document.getElementById('startDate').value = travelData.startDate || '';\n document.getElementById('endDate').value = travelData.endDate || '';\n document.getElementById('totalBudget').value = travelData.totalBudget || '';\n document.getElementById('travelers').value = travelData.travelers || 1;\n \n document.getElementById('budgetAccommodation').value = travelData.categoryBudgets.accommodation || '';\n document.getElementById('budgetFood').value = travelData.categoryBudgets.food || '';\n document.getElementById('budgetTransport').value = travelData.categoryBudgets.transport || '';\n document.getElementById('budgetActivity').value = travelData.categoryBudgets.activity || '';\n document.getElementById('budgetShopping').value = travelData.categoryBudgets.shopping || '';\n document.getElementById('budgetOther').value = travelData.categoryBudgets.other || '';\n }\n }\n\n \/\/ \uc9c0\ucd9c \ucd94\uac00\n function addExpense() {\n const date = document.getElementById('expenseDate').value;\n const category = document.getElementById('expenseCategory').value;\n const amount = parseFloat(document.getElementById('expenseAmount').value);\n const description = document.getElementById('expenseDescription').value;\n \n if (!date || !amount || !description) {\n alert('\ubaa8\ub4e0 \ud544\ub4dc\ub97c \uc785\ub825\ud574\uc8fc\uc138\uc694.');\n return;\n }\n \n const expense = {\n id: Date.now(),\n date: date,\n category: category,\n amount: amount,\n description: description\n };\n \n travelData.expenses.push(expense);\n localStorage.setItem('travelData', JSON.stringify(travelData));\n \n \/\/ \uc785\ub825 \ud544\ub4dc \ucd08\uae30\ud654\n document.getElementById('expenseAmount').value = '';\n document.getElementById('expenseDescription').value = '';\n \n updateExpenseList();\n updateAnalysis();\n }\n\n \/\/ \uc9c0\ucd9c \uc0ad\uc81c\n function deleteExpense(id) {\n travelData.expenses = travelData.expenses.filter(e => e.id !== id);\n localStorage.setItem('travelData', JSON.stringify(travelData));\n updateExpenseList();\n updateAnalysis();\n }\n\n \/\/ \uc9c0\ucd9c \ubaa9\ub85d \uc5c5\ub370\uc774\ud2b8\n function updateExpenseList() {\n const listContainer = document.getElementById('expenseList');\n \n if (travelData.expenses.length === 0) {\n listContainer.innerHTML = '<p style=\"color: #666; text-align: center; padding: 20px;\">\uc544\uc9c1 \uc9c0\ucd9c \ub0b4\uc5ed\uc774 \uc5c6\uc2b5\ub2c8\ub2e4.<\/p>';\n return;\n }\n \n \/\/ \ub0a0\uc9dc \uc21c\uc73c\ub85c \uc815\ub82c\n const sortedExpenses = [...travelData.expenses].sort((a, b) => new Date(b.date) - new Date(a.date));\n \n listContainer.innerHTML = sortedExpenses.map(expense => `\n <div class=\"expense-item\">\n <div>${expense.date}<\/div>\n <div><strong>${categoryEmojis[expense.category]} ${categoryNames[expense.category]}<\/strong>: ${expense.description}<\/div>\n <div>$${expense.amount.toFixed(2)}<\/div>\n <div><\/div>\n <button class=\"delete-btn\" onclick=\"deleteExpense(${expense.id})\">\uc0ad\uc81c<\/button>\n <\/div>\n `).join('');\n }\n\n \/\/ \ubd84\uc11d \uc5c5\ub370\uc774\ud2b8\n function updateAnalysis() {\n \/\/ \uae30\ubcf8 \ud1b5\uacc4\n const totalSpent = travelData.expenses.reduce((sum, e) => sum + e.amount, 0);\n const remaining = travelData.totalBudget - totalSpent;\n \n document.getElementById('statTotalBudget').textContent = `$${travelData.totalBudget.toFixed(2)}`;\n document.getElementById('statTotalSpent').textContent = `$${totalSpent.toFixed(2)}`;\n document.getElementById('statRemaining').textContent = `$${remaining.toFixed(2)}`;\n \n \/\/ \ub0a8\uc740 \uc77c\uc218 \uacc4\uc0b0\n const today = new Date();\n const endDate = new Date(travelData.endDate);\n const remainingDays = Math.max(1, Math.ceil((endDate - today) \/ (1000 * 60 * 60 * 24)));\n const dailyRecommended = remaining > 0 ? remaining \/ remainingDays : 0;\n \n document.getElementById('statDailyRecommended').textContent = `$${dailyRecommended.toFixed(2)}`;\n \n \/\/ \uce74\ud14c\uace0\ub9ac\ubcc4 \ubd84\uc11d\n const categorySpent = {};\n for (let cat in categoryNames) {\n categorySpent[cat] = travelData.expenses\n .filter(e => e.category === cat)\n .reduce((sum, e) => sum + e.amount, 0);\n }\n \n const categoryAnalysisHTML = Object.entries(categoryNames).map(([key, name]) => {\n const budget = travelData.categoryBudgets[key];\n const spent = categorySpent[key];\n const remaining = budget - spent;\n const percentage = budget > 0 ? (spent \/ budget) * 100 : 0;\n \n let progressClass = '';\n if (percentage > 100) progressClass = 'danger';\n else if (percentage > 80) progressClass = 'warning';\n \n return `\n <div class=\"category-analysis\">\n <h4>${categoryEmojis[key]} ${name}<\/h4>\n <div class=\"progress-bar\">\n <div class=\"progress-fill ${progressClass}\" style=\"width: ${Math.min(percentage, 100)}%\">\n ${percentage.toFixed(0)}%\n <\/div>\n <\/div>\n <div class=\"info-text\">\n \uc608\uc0b0: $${budget.toFixed(2)} | \uc9c0\ucd9c: $${spent.toFixed(2)} | \uc794\uc561: $${remaining.toFixed(2)}\n <\/div>\n ${percentage > 100 ? '<div class=\"warning-text\">\u26a0\ufe0f \uc608\uc0b0 \ucd08\uacfc!<\/div>' : ''}\n <\/div>\n `;\n }).join('');\n \n document.getElementById('categoryAnalysis').innerHTML = categoryAnalysisHTML;\n \n \/\/ \uc2dd\ube44 \ud2b9\ubcc4 \ubd84\uc11d\n updateFoodAnalysis(categorySpent.food, remainingDays);\n \n \/\/ \uad8c\uc7a5\uc0ac\ud56d \uc0dd\uc131\n generateRecommendation(totalSpent, remaining, remainingDays, categorySpent);\n }\n\n \/\/ \uc2dd\ube44 \ud2b9\ubcc4 \ubd84\uc11d \ud568\uc218\n function updateFoodAnalysis(foodSpent, remainingDays) {\n const foodBudget = travelData.categoryBudgets.food;\n const foodRemaining = foodBudget - foodSpent;\n const travelers = travelData.travelers || 1;\n \n \/\/ \uc804\uccb4 \uc5ec\ud589 \uc77c\uc218 \uacc4\uc0b0\n const totalDays = Math.ceil((new Date(travelData.endDate) - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24)) || 1;\n \n \/\/ \uc9c0\uae08\uae4c\uc9c0 \uc9c0\ub09c \uc77c\uc218\n const elapsedDays = Math.max(1, Math.ceil((new Date() - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24)));\n \n \/\/ \uc2dd\ube44 \uad00\ub828 \uacc4\uc0b0\n const mealsPerDay = 3; \/\/ \ud558\ub8e8 3\ub07c\n const totalMeals = totalDays * mealsPerDay * travelers;\n const remainingMeals = remainingDays * mealsPerDay * travelers;\n const usedMeals = elapsedDays * mealsPerDay * travelers;\n \n \/\/ 1\uc778 1\ub07c \uacc4\uc0b0\n const avgPerMealPerPerson = foodBudget \/ (totalDays * mealsPerDay * travelers);\n const remainingPerMealPerPerson = foodRemaining > 0 ? foodRemaining \/ remainingMeals : 0;\n const actualPerMealPerPerson = foodSpent > 0 ? foodSpent \/ usedMeals : 0;\n \n \/\/ \uc77c\ubcc4 \uacc4\uc0b0\n const dailyFoodBudgetPerPerson = (foodBudget \/ totalDays) \/ travelers;\n const remainingDailyPerPerson = foodRemaining > 0 ? (foodRemaining \/ remainingDays) \/ travelers : 0;\n \n let analysisHTML = `\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;\">\n <div style=\"background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px; opacity: 0.9;\">\uc608\uc0b0 \uae30\uc900<\/h5>\n <div style=\"font-size: 24px; font-weight: bold;\">${avgPerMealPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px; margin-top: 5px;\">1\uc778 1\ub07c \uc608\uc0b0<\/div>\n <div style=\"font-size: 18px; margin-top: 10px;\">${dailyFoodBudgetPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px;\">1\uc778 \uc77c\uc77c \uc608\uc0b0 (3\ub07c)<\/div>\n <\/div>\n \n <div style=\"background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px; opacity: 0.9;\">\ud604\uc7ac \uc0c1\ud669<\/h5>\n <div style=\"font-size: 24px; font-weight: bold;\">${actualPerMealPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px; margin-top: 5px;\">\uc2e4\uc81c 1\uc778 1\ub07c \ud3c9\uade0<\/div>\n <div style=\"font-size: 18px; margin-top: 10px;\">${((foodSpent \/ foodBudget) * 100).toFixed(0)}%<\/div>\n <div style=\"font-size: 14px;\">\uc608\uc0b0 \uc0ac\uc6a9\ub960<\/div>\n <\/div>\n \n <div style=\"background: rgba(255,255,255,0.2); padding: 15px; border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px; opacity: 0.9;\">\ub0a8\uc740 \uae30\uac04<\/h5>\n <div style=\"font-size: 24px; font-weight: bold;\">${remainingPerMealPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px; margin-top: 5px;\">1\uc778 1\ub07c \uac00\ub2a5\uc561<\/div>\n <div style=\"font-size: 18px; margin-top: 10px;\">${remainingDailyPerPerson.toFixed(2)}<\/div>\n <div style=\"font-size: 14px;\">1\uc778 \uc77c\uc77c \uac00\ub2a5\uc561<\/div>\n <\/div>\n <\/div>\n \n <div style=\"margin-top: 20px; padding: 15px; background: rgba(255,255,255,0.1); border-radius: 10px;\">\n <h5 style=\"margin-bottom: 10px;\">\ud83d\udcca \uc2dd\ube44 \uc0c1\uc138 \ubd84\uc11d<\/h5>\n <ul style=\"list-style: none; padding: 0;\">\n <li style=\"margin-bottom: 8px;\">\ud83d\udc65 \uc5ec\ud589 \uc778\uc6d0: ${travelers}\uba85<\/li>\n <li style=\"margin-bottom: 8px;\">\ud83c\udf7d\ufe0f \uc804\uccb4 \uc2dd\uc0ac \ud69f\uc218: ${totalMeals}\ud68c (${totalDays}\uc77c \u00d7 3\ub07c \u00d7 ${travelers}\uba85)<\/li>\n <li style=\"margin-bottom: 8px;\">\u2705 \uc18c\ube44\ud55c \uc2dd\uc0ac: \uc57d ${usedMeals}\ud68c<\/li>\n <li style=\"margin-bottom: 8px;\">\ud83d\udcc5 \ub0a8\uc740 \uc2dd\uc0ac: ${remainingMeals}\ud68c<\/li>\n <\/ul>\n `;\n \n \/\/ \uad8c\uc7a5\uc0ac\ud56d \ucd94\uac00\n if (actualPerMealPerPerson > avgPerMealPerPerson * 1.2) {\n analysisHTML += `\n <div style=\"margin-top: 15px; padding: 10px; background: rgba(255,200,0,0.3); border-radius: 8px;\">\n \u26a0\ufe0f \ud604\uc7ac 1\uc778 1\ub07c \ud3c9\uade0\uc774 \uc608\uc0b0\ubcf4\ub2e4 ${((actualPerMealPerPerson \/ avgPerMealPerPerson - 1) * 100).toFixed(0)}% \ub192\uc2b5\ub2c8\ub2e4. \n \ub0a8\uc740 \uae30\uac04\uc5d0\ub294 \ub07c\ub2c8\ub2f9 ${remainingPerMealPerPerson.toFixed(2)} \uc774\ub0b4\ub85c \uc870\uc808\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.\n <\/div>\n `;\n } else if (remainingPerMealPerPerson > avgPerMealPerPerson) {\n analysisHTML += `\n <div style=\"margin-top: 15px; padding: 10px; background: rgba(0,255,100,0.3); border-radius: 8px;\">\n \u2728 \uc2dd\ube44\ub97c \uc798 \uc808\uc57d\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4! \ub0a8\uc740 \uae30\uac04 1\uc778 1\ub07c\uc5d0 ${remainingPerMealPerPerson.toFixed(2)}\uae4c\uc9c0 \uc0ac\uc6a9 \uac00\ub2a5\ud569\ub2c8\ub2e4.\n <\/div>\n `;\n }\n \n analysisHTML += '<\/div>';\n \n document.getElementById('foodSpecialAnalysis').innerHTML = analysisHTML;\n }\n\n \/\/ \uad8c\uc7a5\uc0ac\ud56d \uc0dd\uc131\n function generateRecommendation(totalSpent, remaining, remainingDays, categorySpent) {\n const recommendationDiv = document.getElementById('recommendation');\n let recommendations = [];\n \n if (!travelData.startDate || !travelData.endDate) {\n recommendationDiv.innerHTML = '\uc5ec\ud589 \ub0a0\uc9dc\ub97c \uc124\uc815\ud558\uba74 \ub354 \uc815\ud655\ud55c \ubd84\uc11d\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.';\n return;\n }\n \n \/\/ \uc804\uccb4 \uc608\uc0b0 \uc0c1\ud0dc\n const spentPercentage = (totalSpent \/ travelData.totalBudget) * 100;\n \n if (remaining < 0) {\n recommendations.push(`\u26a0\ufe0f \uc608\uc0b0\uc744 $${Math.abs(remaining).toFixed(2)} \ucd08\uacfc\ud588\uc2b5\ub2c8\ub2e4. \uc9c0\ucd9c\uc744 \uc904\uc774\ub294 \uac83\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.`);\n } else if (remainingDays > 0) {\n recommendations.push(`\u2705 \ub0a8\uc740 ${remainingDays}\uc77c \ub3d9\uc548 \ud558\ub8e8 \ud3c9\uade0 $${(remaining\/remainingDays).toFixed(2)}\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.`);\n }\n \n \/\/ \uce74\ud14c\uace0\ub9ac\ubcc4 \uad8c\uc7a5\uc0ac\ud56d\n const overBudgetCategories = [];\n for (let cat in categoryNames) {\n if (categorySpent[cat] > travelData.categoryBudgets[cat]) {\n overBudgetCategories.push(categoryNames[cat]);\n }\n }\n \n if (overBudgetCategories.length > 0) {\n recommendations.push(`\ud83d\udcca ${overBudgetCategories.join(', ')} \ud56d\ubaa9\uc5d0\uc11c \uc608\uc0b0\uc744 \ucd08\uacfc\ud588\uc2b5\ub2c8\ub2e4.`);\n }\n \n \/\/ \uc608\uce21\n const totalDays = Math.ceil((new Date(travelData.endDate) - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24));\n const elapsedDays = Math.max(1, Math.ceil((new Date() - new Date(travelData.startDate)) \/ (1000 * 60 * 60 * 24)));\n const currentDailyAvg = totalSpent \/ elapsedDays;\n const projectedTotal = currentDailyAvg * totalDays;\n \n if (elapsedDays > 0 && elapsedDays <= totalDays) {\n recommendations.push(`\ud83d\udcc8 \ud604\uc7ac \uc77c\ud3c9\uade0 \uc9c0\ucd9c: $${currentDailyAvg.toFixed(2)}`);\n recommendations.push(`\ud83c\udfaf \ud604\uc7ac \ucd94\uc138\ub85c\ub294 \uc5ec\ud589 \uc885\ub8cc \uc2dc \ucd1d $${projectedTotal.toFixed(2)}\ub97c \uc9c0\ucd9c\ud560 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4.`);\n \n if (projectedTotal > travelData.totalBudget) {\n const reductionNeeded = ((projectedTotal - travelData.totalBudget) \/ remainingDays).toFixed(2);\n recommendations.push(`\ud83d\udca1 \uc608\uc0b0 \ub0b4 \ub9c8\ubb34\ub9ac\ub97c \uc704\ud574 \uc77c\uc77c \uc9c0\ucd9c\uc744 $${reductionNeeded} \uc904\uc5ec\uc57c \ud569\ub2c8\ub2e4.`);\n } else {\n const surplus = (travelData.totalBudget - projectedTotal).toFixed(2);\n recommendations.push(`\ud83c\udf89 \ud604\uc7ac \ucd94\uc138 \uc720\uc9c0 \uc2dc $${surplus}\uac00 \ub0a8\uc744 \uac83\uc73c\ub85c \uc608\uc0c1\ub429\ub2c8\ub2e4!`);\n }\n }\n \n recommendationDiv.innerHTML = recommendations.join('<br><br>');\n }\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>\uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790 \u2708\ufe0f \uc5ec\ud589 \uacbd\ube44 \uad00\ub9ac\uc790 \ud83d\udcb0 \uc608\uc0b0 \uc124\uc815 \ud83d\udcb3 \uc9c0\ucd9c \uc785\ub825 \ud83d\udcca \uc804\uccb4 \ubd84\uc11d \uc5ec\ud589 \uae30\ubcf8 \uc815\ubcf4 \uc5ec\ud589 \uc2dc\uc791\uc77c \uc5ec\ud589 \uc885\ub8cc\uc77c \uc804\uccb4 \uc608\uc0b0 ($) \uc5ec\ud589 \uc778\uc6d0\uc218 \ud56d\ubaa9\ubcc4 \uc608\uc0b0…<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":"","_tec_slr_enabled":"","_tec_slr_layout":""},"class_list":["post-2458","page","type-page","status-publish","hentry"],"ticketed":false,"_links":{"self":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/comments?post=2458"}],"version-history":[{"count":0,"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/pages\/2458\/revisions"}],"wp:attachment":[{"href":"https:\/\/visionnetworkcamp.org\/ko\/wp-json\/wp\/v2\/media?parent=2458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}