\uc5f0\ub8cc\ube44\uc808\uac10\uc561 \uacc4\uc0b0\uae30 | (\uc8fc)\uc54c\ud14d\ucf54\ub9ac\uc544<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Bebas+Neue&family=Roboto+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --navy: #0a1628;\n --navy2: #112240;\n --blue: #1a4a8a;\n --accent: #c0392b;\n --silver: #b8c4d0;\n --silver2: #e8edf2;\n --gold: #d4a843;\n --green: #27ae60;\n --white: #f5f7fa;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Noto Sans KR', sans-serif;\n background: var(--navy);\n color: var(--white);\n min-height: 100vh;\n padding: 20px;\n }\n\n .calculator-wrap {\n max-width: 1100px;\n margin: 0 auto;\n background: var(--navy2);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 20px 60px rgba(0,0,0,0.5);\n border: 1px solid rgba(180,200,220,0.15);\n }\n\n \/* HEADER *\/\n .calc-header {\n background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);\n padding: 28px 36px;\n display: flex;\n align-items: center;\n gap: 16px;\n border-bottom: 3px solid var(--accent);\n }\n .calc-header .icon {\n font-size: 2.4rem;\n }\n .calc-header h1 {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem;\n letter-spacing: 3px;\n color: #fff;\n }\n .calc-header p {\n font-size: 0.78rem;\n color: var(--silver);\n margin-top: 2px;\n letter-spacing: 1px;\n }\n .brand-tag {\n margin-left: auto;\n background: var(--accent);\n color: #fff;\n font-size: 0.72rem;\n font-weight: 700;\n padding: 6px 14px;\n border-radius: 20px;\n letter-spacing: 1px;\n white-space: nowrap;\n }\n\n \/* MAIN GRID *\/\n .calc-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0;\n }\n\n \/* PANELS *\/\n .panel {\n padding: 32px 36px;\n }\n .panel-input {\n border-right: 1px solid rgba(180,200,220,0.12);\n }\n .panel-output {\n background: rgba(26,74,138,0.08);\n }\n\n .panel-title {\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 3px;\n color: var(--silver);\n text-transform: uppercase;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .panel-title::after {\n content: '';\n flex: 1;\n height: 1px;\n background: rgba(180,200,220,0.2);\n }\n\n \/* FORM ROWS *\/\n .form-row {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n }\n .form-label {\n font-size: 0.82rem;\n color: var(--silver);\n min-width: 140px;\n font-weight: 500;\n }\n .form-input {\n flex: 1;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(180,200,220,0.2);\n border-radius: 6px;\n padding: 9px 12px;\n color: #fff;\n font-size: 0.88rem;\n font-family: 'Roboto Mono', monospace;\n transition: border-color 0.2s, background 0.2s;\n outline: none;\n }\n .form-input:focus {\n border-color: var(--gold);\n background: rgba(255,255,255,0.1);\n }\n .form-unit {\n font-size: 0.75rem;\n color: var(--silver);\n min-width: 36px;\n text-align: left;\n }\n select.form-input {\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8c4d0' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n padding-right: 30px;\n }\n select.form-input option {\n background: var(--navy2);\n color: #fff;\n }\n\n \/* TOGGLE BUTTONS *\/\n .toggle-group {\n display: flex;\n gap: 6px;\n flex: 1;\n }\n .toggle-btn {\n flex: 1;\n padding: 8px 0;\n border-radius: 6px;\n border: 1px solid rgba(180,200,220,0.25);\n background: rgba(255,255,255,0.05);\n color: var(--silver);\n font-size: 0.82rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s;\n font-family: 'Noto Sans KR', sans-serif;\n }\n .toggle-btn.active {\n background: var(--blue);\n border-color: var(--blue);\n color: #fff;\n }\n .toggle-btn:hover:not(.active) {\n background: rgba(255,255,255,0.1);\n }\n\n \/* ROAD RATIO *\/\n .ratio-display {\n font-family: 'Roboto Mono', monospace;\n font-size: 0.85rem;\n color: var(--gold);\n min-width: 80px;\n text-align: center;\n }\n .ratio-slider {\n flex: 1;\n -webkit-appearance: none;\n appearance: none;\n height: 4px;\n border-radius: 2px;\n background: rgba(255,255,255,0.15);\n outline: none;\n cursor: pointer;\n }\n .ratio-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--gold);\n cursor: pointer;\n }\n\n \/* DIVIDER *\/\n .form-divider {\n height: 1px;\n background: rgba(180,200,220,0.1);\n margin: 18px 0;\n }\n\n \/* CALC BUTTON *\/\n .calc-btn {\n width: 100%;\n margin-top: 20px;\n padding: 14px;\n background: linear-gradient(135deg, var(--accent), #a93226);\n color: #fff;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n font-weight: 700;\n font-family: 'Noto Sans KR', sans-serif;\n cursor: pointer;\n letter-spacing: 2px;\n transition: all 0.2s;\n box-shadow: 0 4px 20px rgba(192,57,43,0.4);\n }\n .calc-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 28px rgba(192,57,43,0.5);\n }\n .calc-btn:active { transform: translateY(0); }\n\n \/* OUTPUT SECTION *\/\n .result-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 20px;\n }\n .result-card {\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(180,200,220,0.12);\n border-radius: 10px;\n padding: 16px;\n text-align: center;\n transition: all 0.3s;\n }\n .result-card.highlight {\n background: rgba(26,74,138,0.35);\n border-color: var(--gold);\n }\n .result-card .r-label {\n font-size: 0.68rem;\n color: var(--silver);\n letter-spacing: 1px;\n margin-bottom: 6px;\n font-weight: 500;\n }\n .result-card .r-value {\n font-family: 'Roboto Mono', monospace;\n font-size: 1.6rem;\n font-weight: 600;\n color: #fff;\n line-height: 1;\n }\n .result-card .r-value.gold { color: var(--gold); }\n .result-card .r-value.green { color: #2ecc71; }\n .result-card .r-unit {\n font-size: 0.72rem;\n color: var(--silver);\n margin-top: 4px;\n }\n .result-placeholder {\n font-family: 'Roboto Mono', monospace;\n font-size: 1.6rem;\n color: rgba(255,255,255,0.15);\n }\n\n \/* \ubc94\uc704 \ucd9c\ub825 \uc2a4\ud0c0\uc77c *\/\n .range-card {\n grid-column: 1 \/ -1;\n background: rgba(26,74,138,0.25);\n border: 1px solid var(--gold);\n border-radius: 10px;\n padding: 16px 20px;\n }\n .range-card .r-label {\n font-size: 0.68rem;\n color: var(--silver);\n letter-spacing: 1px;\n margin-bottom: 12px;\n font-weight: 700;\n text-align: center;\n }\n .range-rows {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .range-row {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .range-badge {\n font-size: 0.65rem;\n font-weight: 700;\n padding: 3px 8px;\n border-radius: 4px;\n min-width: 52px;\n text-align: center;\n letter-spacing: 0.5px;\n }\n .badge-conservative { background: rgba(100,120,150,0.4); color: #8aa0b8; }\n .badge-base { background: rgba(26,74,138,0.6); color: #7eb3ff; }\n .badge-optimistic { background: rgba(39,174,96,0.3); color: #2ecc71; }\n .range-bar-wrap {\n flex: 1;\n height: 6px;\n background: rgba(255,255,255,0.08);\n border-radius: 3px;\n overflow: hidden;\n }\n .range-bar {\n height: 100%;\n border-radius: 3px;\n transition: width 0.6s ease;\n }\n .bar-conservative { background: #607b99; width: 0%; }\n .bar-base { background: #4a90d9; width: 0%; }\n .bar-optimistic { background: #2ecc71; width: 0%; }\n .range-value {\n font-family: 'Roboto Mono', monospace;\n font-size: 0.9rem;\n font-weight: 600;\n min-width: 110px;\n text-align: right;\n }\n .val-conservative { color: #8aa0b8; }\n .val-base { color: #7eb3ff; font-size: 1.05rem; }\n .val-optimistic { color: #2ecc71; }\n .range-placeholder {\n text-align: center;\n color: rgba(255,255,255,0.15);\n font-size: 0.85rem;\n padding: 8px 0;\n }\n\n \/* BENEFITS LIST *\/\n .benefits-title {\n font-size: 0.68rem;\n letter-spacing: 2px;\n color: var(--silver);\n text-transform: uppercase;\n margin-bottom: 10px;\n font-weight: 700;\n }\n .benefits-list {\n list-style: none;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 6px;\n }\n .benefits-list li {\n font-size: 0.75rem;\n color: var(--silver);\n padding: 5px 8px;\n background: rgba(255,255,255,0.04);\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .benefits-list li::before {\n content: '\u2713';\n color: var(--green);\n font-weight: 700;\n font-size: 0.7rem;\n }\n\n \/* NOTICE *\/\n .notice {\n margin-top: 16px;\n padding: 12px 14px;\n background: rgba(212,168,67,0.08);\n border-left: 3px solid var(--gold);\n border-radius: 0 6px 6px 0;\n font-size: 0.72rem;\n color: var(--silver);\n line-height: 1.6;\n }\n\n \/* FOOTER *\/\n .calc-footer {\n padding: 16px 36px;\n background: rgba(0,0,0,0.2);\n border-top: 1px solid rgba(180,200,220,0.08);\n font-size: 0.68rem;\n color: rgba(180,200,220,0.4);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n \/* RESET *\/\n .reset-btn {\n background: none;\n border: 1px solid rgba(180,200,220,0.2);\n color: var(--silver);\n padding: 6px 14px;\n border-radius: 4px;\n font-size: 0.72rem;\n cursor: pointer;\n font-family: 'Noto Sans KR', sans-serif;\n transition: all 0.2s;\n }\n .reset-btn:hover { background: rgba(255,255,255,0.06); }\n\n \/* ANIMATION *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animated { animation: fadeIn 0.4s ease; }\n\n \/* RESPONSIVE *\/\n @media (max-width: 720px) {\n .calc-body { grid-template-columns: 1fr; }\n .panel-input { border-right: none; border-bottom: 1px solid rgba(180,200,220,0.12); }\n .calc-header { flex-wrap: wrap; }\n .brand-tag { margin-left: 0; }\n .panel { padding: 24px 20px; }\n .form-label { min-width: 110px; font-size: 0.78rem; }\n .result-grid { grid-template-columns: 1fr 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"calculator-wrap\">\n\n \n <div class=\"calc-header\">\n <div class=\"icon\">\u26fd<\/div>\n <div>\n <h1>\uc5f0\ub8cc\ube44 \uc808\uac10\uc561 \uacc4\uc0b0\uae30<\/h1>\n <p>FUEL SAVINGS CALCULATOR \u2014 ALUMINUM GATE REPLACEMENT<\/p>\n <\/div>\n <div class=\"brand-tag\">(\uc8fc) \uc54c\ud14d\ucf54\ub9ac\uc544<\/div>\n <\/div>\n\n \n <div class=\"calc-body\">\n\n \n <div class=\"panel panel-input\">\n <div class=\"panel-title\">\uc785\ub825\ucc3d INPUT<\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\ucc28\uc885 \uc120\ud0dd<\/label>\n <select class=\"form-input\" id=\"vehicleType\" onchange=\"onVehicleSelect()\">\n <option value=\"\">— \ucc28\uc885 \uc120\ud0dd —<\/option>\n <option value=\"50\">1\ud1a4 \ubd09\uace0 (50kg)<\/option>\n <option value=\"200\">3.5\ud1a4 \ub9c8\uc774\ud2f0 (200kg)<\/option>\n <option value=\"150\">5\ud1a4 \ud504\ub9ac\ub9c8 (150kg)<\/option>\n <option value=\"200\">5\ud1a4 \uba54\uac00\ud2b8\ub7ed (200kg)<\/option>\n <option value=\"400\">25\ud1a4 \uc5d1\uc2dc\uc5b8\ud2b8 (400kg)<\/option>\n <option value=\"320\">25\ud1a4 \ud504\ub9ac\ub9c8 (320kg)<\/option>\n <option value=\"0\">\uc9c1\uc811 \uc785\ub825<\/option>\n <\/select>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uacf5\ucc28\uc911\ub7c9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"emptyWeight\" placeholder=\"\uc608) 3500\" min=\"500\" max=\"30000\">\n <span class=\"form-unit\">kg<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uac10\uc18c\uc911\ub7c9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"weightReduction\" placeholder=\"\uc608) 200\" min=\"10\" max=\"1000\">\n <span class=\"form-unit\">kg<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uac10\uc18c\ud6c4 \uacf5\ucc28\uc911\ub7c9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"newWeight\" placeholder=\"\uc790\ub3d9\uacc4\uc0b0\" readonly style=\"opacity:0.6;\">\n <span class=\"form-unit\">kg<\/span>\n <\/div>\n\n <div class=\"form-divider\"><\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uc5f0\uac04 \uc8fc\ud589\uac70\ub9ac<\/label>\n <input type=\"number\" class=\"form-input\" id=\"annualKm\" placeholder=\"\uc608) 100000\" min=\"1000\" max=\"500000\">\n <span class=\"form-unit\">km<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uc2dc\ub0b4 : \uace0\uc18d<\/label>\n <div class=\"toggle-group\">\n <button class=\"toggle-btn active\" id=\"btnCity\" onclick=\"setRatio(50)\">\uc2dc\ub0b4<\/button>\n <button class=\"toggle-btn\" id=\"btnHwy\" onclick=\"setRatio(80)\">\uace0\uc18d<\/button>\n <\/div>\n <div class=\"ratio-display\" id=\"ratioDisplay\">50 : 50<\/div>\n <\/div>\n <div class=\"form-row\">\n <label class=\"form-label\" style=\"font-size:0.72rem;color:rgba(180,200,220,0.5)\">\uace0\uc18d\ube44\uc728 \uc9c1\uc811\uc870\uc815<\/label>\n <input type=\"range\" class=\"ratio-slider\" id=\"hwyRatio\" min=\"0\" max=\"100\" value=\"50\" oninput=\"updateRatio()\">\n <\/div>\n\n <div class=\"form-divider\"><\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\ud3c9\uade0 \uae30\ub984\ub2e8\uac00<\/label>\n <input type=\"number\" class=\"form-input\" id=\"fuelPrice\" placeholder=\"\uc608) 1750\" min=\"1000\" max=\"3000\" value=\"1750\">\n <span class=\"form-unit\">\uc6d0\/L<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\ubb38\uc9dd \uad50\uccb4\ube44\uc6a9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"replacementCost\" placeholder=\"\uc608) 1200000\" min=\"100000\">\n <span class=\"form-unit\">\uc6d0<\/span>\n <\/div>\n\n <button class=\"calc-btn\" onclick=\"calculate()\">\u26a1 \uc808\uac10\uc561 \uacc4\uc0b0\ud558\uae30<\/button>\n <button class=\"reset-btn\" onclick=\"resetAll()\" style=\"width:100%;margin-top:8px;\">\ucd08\uae30\ud654<\/button>\n <\/div>\n\n \n <div class=\"panel panel-output\">\n <div class=\"panel-title\">\ucd9c\ub825\ucc3d OUTPUT<\/div>\n\n <div class=\"result-grid\" id=\"resultGrid\">\n <div class=\"result-card\">\n <div class=\"r-label\">\uc5f0\ube44 \uac1c\uc120\uc728<\/div>\n <div class=\"r-value result-placeholder\" id=\"out-efficiency\">\u2014<\/div>\n <div class=\"r-unit\">%<\/div>\n <\/div>\n <div class=\"result-card highlight\">\n <div class=\"r-label\">\uc5f0\uac04 \uc808\uac10 \uc5f0\ub8cc<\/div>\n <div class=\"r-value gold result-placeholder\" id=\"out-fuel\">\u2014<\/div>\n <div class=\"r-unit\">\ub9ac\ud130 \/ \ub144<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"r-label\">\ud22c\uc790 \ud68c\uc218\uae30\uac04<\/div>\n <div class=\"r-value result-placeholder\" id=\"out-payback\">\u2014<\/div>\n <div class=\"r-unit\">\uac1c\uc6d4 (\uae30\ubcf8\uac12 \uae30\uc900)<\/div>\n <\/div>\n \n <div class=\"range-card\">\n <div class=\"r-label\">\uc5f0\uac04 \uc808\uac10 \uae08\uc561 \uc608\uce21 \ubc94\uc704 (\uc6d0 \/ \ub144)<\/div>\n <div class=\"range-rows\" id=\"rangeRows\">\n <div class=\"range-placeholder\">\uacc4\uc0b0\ud558\uae30 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ubc94\uc704\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"benefits-title\">\uc5f0\ub8cc\uc808\uac10 \uc678 \ubd80\uc218\uc801\uc778 \ud6a8\uacfc<\/div>\n <ul class=\"benefits-list\">\n <li>\uc801\uc7ac\uac00\ub2a5 \uc911\ub7c9 \uc99d\uac00<\/li>\n <li>\ube0c\ub808\uc774\ud06c \uc218\uba85 \uc5f0\uc7a5<\/li>\n <li>\ud0c0\uc774\uc5b4 \ub9c8\ubaa8 \uac10\uc18c<\/li>\n <li>\uc11c\uc2a4\ud39c\uc158\u00b7\uc0e4\uc2dc \ubd80\ub2f4 \uac10\uc18c<\/li>\n <li>\uac00\uc18d\u00b7\uc751\ub2f5\uc131 \ud5a5\uc0c1<\/li>\n <li>\uc6b4\uc804\uc790 \ud53c\ub85c\ub3c4 \uac10\uc18c<\/li>\n <li>\ubb38\uc9dd \uac1c\ud3d0 \ud3b8\uc758\uc131<\/li>\n <li>\ud0c4\uc18c\ubc30\ucd9c\ub7c9 \uac10\uc18c<\/li>\n <\/ul>\n\n <div class=\"notice\" id=\"noticeBox\">\n \uacf5\ucc28\uc6b4\ud589\ube44\uc728, \uc2dc\ub0b4\uc8fc\ud589\ube44\uc728, \uc6b4\uc804\uc2b5\uad00, \ud0c0\uc774\uc5b4\uacf5\uae30\uc555, \ucc28\ub7c9\ub178\ud6c4\ub3c4 \ub4f1\uc5d0 \ub530\ub77c \uc2e4\uc81c \uc808\uac10\uc561\uc740 \ub2ec\ub77c\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uacc4\uc0b0\uae30\ub294 \ucc38\uace0\uc6a9 \ucd94\uc815\uce58\uc785\ub2c8\ub2e4.\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"calc-footer\">\n <span>\u00a9 2026 (\uc8fc)\uc54c\ud14d\ucf54\ub9ac\uc544 \u00b7 Aluminum Cargo Gate Specialist \u00b7 www.altech21.com<\/span>\n <span>6N01-T5 \uace0\uac15\ub3c4 \uc54c\ub8e8\ubbf8\ub284 \uac8c\uc774\ud2b8 \uc804\ubb38<\/span>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ \ucc28\uc885 \uc120\ud0dd \uc2dc \uac10\uc18c\uc911\ub7c9 \uc790\ub3d9\uc785\ub825\n function onVehicleSelect() {\n const sel = document.getElementById('vehicleType');\n const val = parseInt(sel.value);\n const wr = document.getElementById('weightReduction');\n if (val > 0) {\n wr.value = val;\n updateNewWeight();\n } else if (sel.value === '0') {\n wr.value = '';\n document.getElementById('newWeight').value = '';\n }\n }\n\n \/\/ \uac10\uc18c\ud6c4 \uacf5\ucc28\uc911\ub7c9 \uc790\ub3d9\uacc4\uc0b0\n function updateNewWeight() {\n const ew = parseFloat(document.getElementById('emptyWeight').value) || 0;\n const wr = parseFloat(document.getElementById('weightReduction').value) || 0;\n if (ew > 0 && wr > 0) {\n document.getElementById('newWeight').value = (ew - wr).toLocaleString();\n }\n }\n document.getElementById('emptyWeight').addEventListener('input', updateNewWeight);\n document.getElementById('weightReduction').addEventListener('input', updateNewWeight);\n\n \/\/ \uc2dc\ub0b4\/\uace0\uc18d \ud1a0\uae00\n function setRatio(hwyPct) {\n document.getElementById('hwyRatio').value = hwyPct;\n updateRatio();\n }\n function updateRatio() {\n const hwy = parseInt(document.getElementById('hwyRatio').value);\n const city = 100 - hwy;\n document.getElementById('ratioDisplay').textContent = city + ' : ' + hwy;\n document.getElementById('btnCity').classList.toggle('active', hwy <= 30);\n document.getElementById('btnHwy').classList.toggle('active', hwy >= 70);\n }\n\n \/\/ \ud575\uc2ec \uacc4\uc0b0 \ub85c\uc9c1\n function calculate() {\n const emptyWeight = parseFloat(document.getElementById('emptyWeight').value);\n const weightReduction = parseFloat(document.getElementById('weightReduction').value);\n const annualKm = parseFloat(document.getElementById('annualKm').value);\n const fuelPrice = parseFloat(document.getElementById('fuelPrice').value);\n const replacementCost = parseFloat(document.getElementById('replacementCost').value);\n const hwyRatio = parseInt(document.getElementById('hwyRatio').value) \/ 100;\n const cityRatio = 1 - hwyRatio;\n\n if (!emptyWeight || !weightReduction || !annualKm || !fuelPrice) {\n alert('\uacf5\ucc28\uc911\ub7c9, \uac10\uc18c\uc911\ub7c9, \uc5f0\uac04 \uc8fc\ud589\uac70\ub9ac, \uae30\ub984\ub2e8\uac00\ub97c \uc785\ub825\ud574 \uc8fc\uc138\uc694.');\n return;\n }\n\n \/\/ \uae30\ubcf8 \uc5f0\ube44 \ucd94\uc815 (\uacf5\ucc28\uc911\ub7c9 \uae30\ubc18, \uc2dc\ub0b4\/\uace0\uc18d \ud63c\ud569)\n const baseFuelEff = cityRatio * (30000 \/ emptyWeight * 3.5) + hwyRatio * (30000 \/ emptyWeight * 5.0);\n const newWeight = emptyWeight - weightReduction;\n const newFuelEff = cityRatio * (30000 \/ newWeight * 3.5) + hwyRatio * (30000 \/ newWeight * 5.0);\n\n \/\/ \uc5f0\ube44 \uac1c\uc120\uc728\n const effImprovement = ((newFuelEff - baseFuelEff) \/ baseFuelEff) * 100;\n\n \/\/ \uc5f0\uac04 \uc5f0\ub8cc \uc18c\ube44 (\uae30\uc874)\n const baseAnnualFuel = annualKm \/ baseFuelEff;\n const newAnnualFuel = annualKm \/ newFuelEff;\n const savedFuel = baseAnnualFuel - newAnnualFuel;\n\n \/\/ \uc5f0\uac04 \uc808\uac10 \uae08\uc561 (\uae30\ubcf8\uac12)\n const savedMoney = savedFuel * fuelPrice;\n\n \/\/ \ubcf4\uc218\uc801 \/ \uae30\ubcf8 \/ \ub099\uad00\uc801 \uacc4\uc218\n const conservative = Math.round(savedMoney * 0.6);\n const base = Math.round(savedMoney);\n const optimistic = Math.round(savedMoney * 1.4);\n const maxVal = optimistic;\n\n \/\/ \ud68c\uc218\uae30\uac04 (\uae30\ubcf8\uac12 \uae30\uc900)\n let paybackMonths = replacementCost > 0 ? (replacementCost \/ savedMoney) * 12 : null;\n\n \/\/ \uae30\ubcf8 \ucd9c\ub825\n setResult('out-efficiency', effImprovement.toFixed(2), '');\n setResult('out-fuel', Math.round(savedFuel).toLocaleString(), '');\n setResult('out-payback', paybackMonths ? paybackMonths.toFixed(1) : '\u2014', '');\n\n document.getElementById('out-efficiency').className = 'r-value gold animated';\n document.getElementById('out-fuel').className = 'r-value gold animated';\n document.getElementById('out-payback').className = 'r-value animated';\n\n \/\/ \ubc94\uc704 \ucd9c\ub825\n const rows = [\n { badge: '\ubcf4\uc218\uc801', badgeClass: 'badge-conservative', barClass: 'bar-conservative',\n valClass: 'val-conservative', val: conservative,\n desc: '\uc2dc\ub0b4\uc8fc\ud589 \u591a \/ \uacf5\ucc28\uc6b4\ud589 \u5c11 \/ \ub178\ud6c4\ucc28\ub7c9' },\n { badge: '\u25b6 \uae30\ubcf8\uac12', badgeClass: 'badge-base', barClass: 'bar-base',\n valClass: 'val-base', val: base,\n desc: '\ud3c9\uade0\uc801 \uc6b4\ud589\uc870\uac74 \uae30\uc900' },\n { badge: '\ub099\uad00\uc801', badgeClass: 'badge-optimistic', barClass: 'bar-optimistic',\n valClass: 'val-optimistic', val: optimistic,\n desc: '\uace0\uc18d\uc8fc\ud589 \u591a \/ \uacf5\ucc28\uc6b4\ud589 \u591a \/ \uc2e0\ucc28' },\n ];\n\n const container = document.getElementById('rangeRows');\n container.innerHTML = rows.map(r => `\n <div class=\"range-row\">\n <span class=\"range-badge ${r.badgeClass}\">${r.badge}<\/span>\n <div style=\"flex:1\">\n <div class=\"range-bar-wrap\">\n <div class=\"range-bar ${r.barClass}\" style=\"width:${Math.round(r.val\/maxVal*100)}%\"><\/div>\n <\/div>\n <div style=\"font-size:0.62rem;color:rgba(180,200,220,0.45);margin-top:2px\">${r.desc}<\/div>\n <\/div>\n <span class=\"range-value ${r.valClass}\">${r.val.toLocaleString()} \uc6d0<\/span>\n <\/div>\n `).join('');\n }\n\n function setResult(id, val, unit) {\n document.getElementById(id).textContent = val;\n }\n\n function resetAll() {\n ['emptyWeight','weightReduction','newWeight','annualKm','fuelPrice','replacementCost'].forEach(id => {\n document.getElementById(id).value = id === 'fuelPrice' ? '1750' : '';\n });\n document.getElementById('vehicleType').value = '';\n document.getElementById('hwyRatio').value = 50;\n updateRatio();\n document.getElementById('rangeRows').innerHTML =\n '<div class=\"range-placeholder\">\uacc4\uc0b0\ud558\uae30 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ubc94\uc704\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4<\/div>';\n ['out-efficiency','out-fuel','out-payback'].forEach(id => {\n document.getElementById(id).textContent = '\u2014';\n document.getElementById(id).className = 'r-value result-placeholder';\n });\n }\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\uc5f0\ub8cc\ube44\uc808\uac10\uc561 \uacc4\uc0b0\uae30 | (\uc8fc)\uc54c\ud14d\ucf54\ub9ac\uc544 \u26fd \uc5f0\ub8cc\ube44 \uc808\uac10\uc561 \uacc4\uc0b0\uae30 FUEL SAVINGS CALCULATOR \u2014 ALUMINUM GATE REPLACEMENT (\uc8fc) \uc54c\ud14d\ucf54\ub9ac\uc544 \uc785\ub825\ucc3d INPUT \ucc28\uc885 \uc120\ud0dd — \ucc28\uc885 \uc120\ud0dd —1\ud1a4 \ubd09\uace0 (50kg)3.5\ud1a4 \ub9c8\uc774\ud2f0 (200kg)5\ud1a4 \ud504\ub9ac\ub9c8 (150kg)5\ud1a4 \uba54\uac00\ud2b8\ub7ed (200kg)25\ud1a4 \uc5d1\uc2dc\uc5b8\ud2b8 (400kg)25\ud1a4 \ud504\ub9ac\ub9c8 (320kg)\uc9c1\uc811 \uc785\ub825 \uacf5\ucc28\uc911\ub7c9 kg \uac10\uc18c\uc911\ub7c9 kg \uac10\uc18c\ud6c4 \uacf5\ucc28\uc911\ub7c9 kg \uc5f0\uac04 \uc8fc\ud589\uac70\ub9ac km \uc2dc\ub0b4 : \uace0\uc18d \uc2dc\ub0b4 \uace0\uc18d 50 : […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-59","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":3,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages\/59\/revisions"}],"predecessor-version":[{"id":2589,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages\/59\/revisions\/2589"}],"wp:attachment":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/media?parent=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":59,"date":"2026-04-09T12:32:49","date_gmt":"2026-04-09T03:32:49","guid":{"rendered":"https:\/\/altech21.com\/?page_id=59"},"modified":"2026-04-18T19:29:41","modified_gmt":"2026-04-18T10:29:41","slug":"%ec%97%b0%eb%b9%84%ec%a0%88%ea%b0%90-%ea%b3%84%ec%82%b0%ea%b8%b0","status":"publish","type":"page","link":"http:\/\/altech21.com\/en\/%ec%97%b0%eb%b9%84%ec%a0%88%ea%b0%90-%ea%b3%84%ec%82%b0%ea%b8%b0\/","title":{"rendered":"Fuel Savings Calculation"},"content":{"rendered":"\n\n\n\n\n\n\uc5f0\ub8cc\ube44\uc808\uac10\uc561 \uacc4\uc0b0\uae30 | (\uc8fc)\uc54c\ud14d\ucf54\ub9ac\uc544<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Bebas+Neue&family=Roboto+Mono:wght@400;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --navy: #0a1628;\n --navy2: #112240;\n --blue: #1a4a8a;\n --accent: #c0392b;\n --silver: #b8c4d0;\n --silver2: #e8edf2;\n --gold: #d4a843;\n --green: #27ae60;\n --white: #f5f7fa;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: 'Noto Sans KR', sans-serif;\n background: var(--navy);\n color: var(--white);\n min-height: 100vh;\n padding: 20px;\n }\n\n .calculator-wrap {\n max-width: 1100px;\n margin: 0 auto;\n background: var(--navy2);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 20px 60px rgba(0,0,0,0.5);\n border: 1px solid rgba(180,200,220,0.15);\n }\n\n \/* HEADER *\/\n .calc-header {\n background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%);\n padding: 28px 36px;\n display: flex;\n align-items: center;\n gap: 16px;\n border-bottom: 3px solid var(--accent);\n }\n .calc-header .icon {\n font-size: 2.4rem;\n }\n .calc-header h1 {\n font-family: 'Bebas Neue', sans-serif;\n font-size: 2rem;\n letter-spacing: 3px;\n color: #fff;\n }\n .calc-header p {\n font-size: 0.78rem;\n color: var(--silver);\n margin-top: 2px;\n letter-spacing: 1px;\n }\n .brand-tag {\n margin-left: auto;\n background: var(--accent);\n color: #fff;\n font-size: 0.72rem;\n font-weight: 700;\n padding: 6px 14px;\n border-radius: 20px;\n letter-spacing: 1px;\n white-space: nowrap;\n }\n\n \/* MAIN GRID *\/\n .calc-body {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0;\n }\n\n \/* PANELS *\/\n .panel {\n padding: 32px 36px;\n }\n .panel-input {\n border-right: 1px solid rgba(180,200,220,0.12);\n }\n .panel-output {\n background: rgba(26,74,138,0.08);\n }\n\n .panel-title {\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 3px;\n color: var(--silver);\n text-transform: uppercase;\n margin-bottom: 24px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .panel-title::after {\n content: '';\n flex: 1;\n height: 1px;\n background: rgba(180,200,220,0.2);\n }\n\n \/* FORM ROWS *\/\n .form-row {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 14px;\n }\n .form-label {\n font-size: 0.82rem;\n color: var(--silver);\n min-width: 140px;\n font-weight: 500;\n }\n .form-input {\n flex: 1;\n background: rgba(255,255,255,0.06);\n border: 1px solid rgba(180,200,220,0.2);\n border-radius: 6px;\n padding: 9px 12px;\n color: #fff;\n font-size: 0.88rem;\n font-family: 'Roboto Mono', monospace;\n transition: border-color 0.2s, background 0.2s;\n outline: none;\n }\n .form-input:focus {\n border-color: var(--gold);\n background: rgba(255,255,255,0.1);\n }\n .form-unit {\n font-size: 0.75rem;\n color: var(--silver);\n min-width: 36px;\n text-align: left;\n }\n select.form-input {\n cursor: pointer;\n appearance: none;\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8c4d0' d='M6 8L1 3h10z'\/%3E%3C\/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n padding-right: 30px;\n }\n select.form-input option {\n background: var(--navy2);\n color: #fff;\n }\n\n \/* TOGGLE BUTTONS *\/\n .toggle-group {\n display: flex;\n gap: 6px;\n flex: 1;\n }\n .toggle-btn {\n flex: 1;\n padding: 8px 0;\n border-radius: 6px;\n border: 1px solid rgba(180,200,220,0.25);\n background: rgba(255,255,255,0.05);\n color: var(--silver);\n font-size: 0.82rem;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.2s;\n font-family: 'Noto Sans KR', sans-serif;\n }\n .toggle-btn.active {\n background: var(--blue);\n border-color: var(--blue);\n color: #fff;\n }\n .toggle-btn:hover:not(.active) {\n background: rgba(255,255,255,0.1);\n }\n\n \/* ROAD RATIO *\/\n .ratio-display {\n font-family: 'Roboto Mono', monospace;\n font-size: 0.85rem;\n color: var(--gold);\n min-width: 80px;\n text-align: center;\n }\n .ratio-slider {\n flex: 1;\n -webkit-appearance: none;\n appearance: none;\n height: 4px;\n border-radius: 2px;\n background: rgba(255,255,255,0.15);\n outline: none;\n cursor: pointer;\n }\n .ratio-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--gold);\n cursor: pointer;\n }\n\n \/* DIVIDER *\/\n .form-divider {\n height: 1px;\n background: rgba(180,200,220,0.1);\n margin: 18px 0;\n }\n\n \/* CALC BUTTON *\/\n .calc-btn {\n width: 100%;\n margin-top: 20px;\n padding: 14px;\n background: linear-gradient(135deg, var(--accent), #a93226);\n color: #fff;\n border: none;\n border-radius: 8px;\n font-size: 1rem;\n font-weight: 700;\n font-family: 'Noto Sans KR', sans-serif;\n cursor: pointer;\n letter-spacing: 2px;\n transition: all 0.2s;\n box-shadow: 0 4px 20px rgba(192,57,43,0.4);\n }\n .calc-btn:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 28px rgba(192,57,43,0.5);\n }\n .calc-btn:active { transform: translateY(0); }\n\n \/* OUTPUT SECTION *\/\n .result-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-bottom: 20px;\n }\n .result-card {\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(180,200,220,0.12);\n border-radius: 10px;\n padding: 16px;\n text-align: center;\n transition: all 0.3s;\n }\n .result-card.highlight {\n background: rgba(26,74,138,0.35);\n border-color: var(--gold);\n }\n .result-card .r-label {\n font-size: 0.68rem;\n color: var(--silver);\n letter-spacing: 1px;\n margin-bottom: 6px;\n font-weight: 500;\n }\n .result-card .r-value {\n font-family: 'Roboto Mono', monospace;\n font-size: 1.6rem;\n font-weight: 600;\n color: #fff;\n line-height: 1;\n }\n .result-card .r-value.gold { color: var(--gold); }\n .result-card .r-value.green { color: #2ecc71; }\n .result-card .r-unit {\n font-size: 0.72rem;\n color: var(--silver);\n margin-top: 4px;\n }\n .result-placeholder {\n font-family: 'Roboto Mono', monospace;\n font-size: 1.6rem;\n color: rgba(255,255,255,0.15);\n }\n\n \/* \ubc94\uc704 \ucd9c\ub825 \uc2a4\ud0c0\uc77c *\/\n .range-card {\n grid-column: 1 \/ -1;\n background: rgba(26,74,138,0.25);\n border: 1px solid var(--gold);\n border-radius: 10px;\n padding: 16px 20px;\n }\n .range-card .r-label {\n font-size: 0.68rem;\n color: var(--silver);\n letter-spacing: 1px;\n margin-bottom: 12px;\n font-weight: 700;\n text-align: center;\n }\n .range-rows {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .range-row {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .range-badge {\n font-size: 0.65rem;\n font-weight: 700;\n padding: 3px 8px;\n border-radius: 4px;\n min-width: 52px;\n text-align: center;\n letter-spacing: 0.5px;\n }\n .badge-conservative { background: rgba(100,120,150,0.4); color: #8aa0b8; }\n .badge-base { background: rgba(26,74,138,0.6); color: #7eb3ff; }\n .badge-optimistic { background: rgba(39,174,96,0.3); color: #2ecc71; }\n .range-bar-wrap {\n flex: 1;\n height: 6px;\n background: rgba(255,255,255,0.08);\n border-radius: 3px;\n overflow: hidden;\n }\n .range-bar {\n height: 100%;\n border-radius: 3px;\n transition: width 0.6s ease;\n }\n .bar-conservative { background: #607b99; width: 0%; }\n .bar-base { background: #4a90d9; width: 0%; }\n .bar-optimistic { background: #2ecc71; width: 0%; }\n .range-value {\n font-family: 'Roboto Mono', monospace;\n font-size: 0.9rem;\n font-weight: 600;\n min-width: 110px;\n text-align: right;\n }\n .val-conservative { color: #8aa0b8; }\n .val-base { color: #7eb3ff; font-size: 1.05rem; }\n .val-optimistic { color: #2ecc71; }\n .range-placeholder {\n text-align: center;\n color: rgba(255,255,255,0.15);\n font-size: 0.85rem;\n padding: 8px 0;\n }\n\n \/* BENEFITS LIST *\/\n .benefits-title {\n font-size: 0.68rem;\n letter-spacing: 2px;\n color: var(--silver);\n text-transform: uppercase;\n margin-bottom: 10px;\n font-weight: 700;\n }\n .benefits-list {\n list-style: none;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 6px;\n }\n .benefits-list li {\n font-size: 0.75rem;\n color: var(--silver);\n padding: 5px 8px;\n background: rgba(255,255,255,0.04);\n border-radius: 4px;\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .benefits-list li::before {\n content: '\u2713';\n color: var(--green);\n font-weight: 700;\n font-size: 0.7rem;\n }\n\n \/* NOTICE *\/\n .notice {\n margin-top: 16px;\n padding: 12px 14px;\n background: rgba(212,168,67,0.08);\n border-left: 3px solid var(--gold);\n border-radius: 0 6px 6px 0;\n font-size: 0.72rem;\n color: var(--silver);\n line-height: 1.6;\n }\n\n \/* FOOTER *\/\n .calc-footer {\n padding: 16px 36px;\n background: rgba(0,0,0,0.2);\n border-top: 1px solid rgba(180,200,220,0.08);\n font-size: 0.68rem;\n color: rgba(180,200,220,0.4);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n \/* RESET *\/\n .reset-btn {\n background: none;\n border: 1px solid rgba(180,200,220,0.2);\n color: var(--silver);\n padding: 6px 14px;\n border-radius: 4px;\n font-size: 0.72rem;\n cursor: pointer;\n font-family: 'Noto Sans KR', sans-serif;\n transition: all 0.2s;\n }\n .reset-btn:hover { background: rgba(255,255,255,0.06); }\n\n \/* ANIMATION *\/\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .animated { animation: fadeIn 0.4s ease; }\n\n \/* RESPONSIVE *\/\n @media (max-width: 720px) {\n .calc-body { grid-template-columns: 1fr; }\n .panel-input { border-right: none; border-bottom: 1px solid rgba(180,200,220,0.12); }\n .calc-header { flex-wrap: wrap; }\n .brand-tag { margin-left: 0; }\n .panel { padding: 24px 20px; }\n .form-label { min-width: 110px; font-size: 0.78rem; }\n .result-grid { grid-template-columns: 1fr 1fr; }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"calculator-wrap\">\n\n \n <div class=\"calc-header\">\n <div class=\"icon\">\u26fd<\/div>\n <div>\n <h1>\uc5f0\ub8cc\ube44 \uc808\uac10\uc561 \uacc4\uc0b0\uae30<\/h1>\n <p>FUEL SAVINGS CALCULATOR \u2014 ALUMINUM GATE REPLACEMENT<\/p>\n <\/div>\n <div class=\"brand-tag\">(\uc8fc) \uc54c\ud14d\ucf54\ub9ac\uc544<\/div>\n <\/div>\n\n \n <div class=\"calc-body\">\n\n \n <div class=\"panel panel-input\">\n <div class=\"panel-title\">\uc785\ub825\ucc3d INPUT<\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\ucc28\uc885 \uc120\ud0dd<\/label>\n <select class=\"form-input\" id=\"vehicleType\" onchange=\"onVehicleSelect()\">\n <option value=\"\">— \ucc28\uc885 \uc120\ud0dd —<\/option>\n <option value=\"50\">1\ud1a4 \ubd09\uace0 (50kg)<\/option>\n <option value=\"200\">3.5\ud1a4 \ub9c8\uc774\ud2f0 (200kg)<\/option>\n <option value=\"150\">5\ud1a4 \ud504\ub9ac\ub9c8 (150kg)<\/option>\n <option value=\"200\">5\ud1a4 \uba54\uac00\ud2b8\ub7ed (200kg)<\/option>\n <option value=\"400\">25\ud1a4 \uc5d1\uc2dc\uc5b8\ud2b8 (400kg)<\/option>\n <option value=\"320\">25\ud1a4 \ud504\ub9ac\ub9c8 (320kg)<\/option>\n <option value=\"0\">\uc9c1\uc811 \uc785\ub825<\/option>\n <\/select>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uacf5\ucc28\uc911\ub7c9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"emptyWeight\" placeholder=\"\uc608) 3500\" min=\"500\" max=\"30000\">\n <span class=\"form-unit\">kg<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uac10\uc18c\uc911\ub7c9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"weightReduction\" placeholder=\"\uc608) 200\" min=\"10\" max=\"1000\">\n <span class=\"form-unit\">kg<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uac10\uc18c\ud6c4 \uacf5\ucc28\uc911\ub7c9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"newWeight\" placeholder=\"\uc790\ub3d9\uacc4\uc0b0\" readonly style=\"opacity:0.6;\">\n <span class=\"form-unit\">kg<\/span>\n <\/div>\n\n <div class=\"form-divider\"><\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uc5f0\uac04 \uc8fc\ud589\uac70\ub9ac<\/label>\n <input type=\"number\" class=\"form-input\" id=\"annualKm\" placeholder=\"\uc608) 100000\" min=\"1000\" max=\"500000\">\n <span class=\"form-unit\">km<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\uc2dc\ub0b4 : \uace0\uc18d<\/label>\n <div class=\"toggle-group\">\n <button class=\"toggle-btn active\" id=\"btnCity\" onclick=\"setRatio(50)\">\uc2dc\ub0b4<\/button>\n <button class=\"toggle-btn\" id=\"btnHwy\" onclick=\"setRatio(80)\">\uace0\uc18d<\/button>\n <\/div>\n <div class=\"ratio-display\" id=\"ratioDisplay\">50 : 50<\/div>\n <\/div>\n <div class=\"form-row\">\n <label class=\"form-label\" style=\"font-size:0.72rem;color:rgba(180,200,220,0.5)\">\uace0\uc18d\ube44\uc728 \uc9c1\uc811\uc870\uc815<\/label>\n <input type=\"range\" class=\"ratio-slider\" id=\"hwyRatio\" min=\"0\" max=\"100\" value=\"50\" oninput=\"updateRatio()\">\n <\/div>\n\n <div class=\"form-divider\"><\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\ud3c9\uade0 \uae30\ub984\ub2e8\uac00<\/label>\n <input type=\"number\" class=\"form-input\" id=\"fuelPrice\" placeholder=\"\uc608) 1750\" min=\"1000\" max=\"3000\" value=\"1750\">\n <span class=\"form-unit\">\uc6d0\/L<\/span>\n <\/div>\n\n \n <div class=\"form-row\">\n <label class=\"form-label\">\ubb38\uc9dd \uad50\uccb4\ube44\uc6a9<\/label>\n <input type=\"number\" class=\"form-input\" id=\"replacementCost\" placeholder=\"\uc608) 1200000\" min=\"100000\">\n <span class=\"form-unit\">\uc6d0<\/span>\n <\/div>\n\n <button class=\"calc-btn\" onclick=\"calculate()\">\u26a1 \uc808\uac10\uc561 \uacc4\uc0b0\ud558\uae30<\/button>\n <button class=\"reset-btn\" onclick=\"resetAll()\" style=\"width:100%;margin-top:8px;\">\ucd08\uae30\ud654<\/button>\n <\/div>\n\n \n <div class=\"panel panel-output\">\n <div class=\"panel-title\">\ucd9c\ub825\ucc3d OUTPUT<\/div>\n\n <div class=\"result-grid\" id=\"resultGrid\">\n <div class=\"result-card\">\n <div class=\"r-label\">\uc5f0\ube44 \uac1c\uc120\uc728<\/div>\n <div class=\"r-value result-placeholder\" id=\"out-efficiency\">\u2014<\/div>\n <div class=\"r-unit\">%<\/div>\n <\/div>\n <div class=\"result-card highlight\">\n <div class=\"r-label\">\uc5f0\uac04 \uc808\uac10 \uc5f0\ub8cc<\/div>\n <div class=\"r-value gold result-placeholder\" id=\"out-fuel\">\u2014<\/div>\n <div class=\"r-unit\">\ub9ac\ud130 \/ \ub144<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"r-label\">\ud22c\uc790 \ud68c\uc218\uae30\uac04<\/div>\n <div class=\"r-value result-placeholder\" id=\"out-payback\">\u2014<\/div>\n <div class=\"r-unit\">\uac1c\uc6d4 (\uae30\ubcf8\uac12 \uae30\uc900)<\/div>\n <\/div>\n \n <div class=\"range-card\">\n <div class=\"r-label\">\uc5f0\uac04 \uc808\uac10 \uae08\uc561 \uc608\uce21 \ubc94\uc704 (\uc6d0 \/ \ub144)<\/div>\n <div class=\"range-rows\" id=\"rangeRows\">\n <div class=\"range-placeholder\">\uacc4\uc0b0\ud558\uae30 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ubc94\uc704\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"benefits-title\">\uc5f0\ub8cc\uc808\uac10 \uc678 \ubd80\uc218\uc801\uc778 \ud6a8\uacfc<\/div>\n <ul class=\"benefits-list\">\n <li>\uc801\uc7ac\uac00\ub2a5 \uc911\ub7c9 \uc99d\uac00<\/li>\n <li>\ube0c\ub808\uc774\ud06c \uc218\uba85 \uc5f0\uc7a5<\/li>\n <li>\ud0c0\uc774\uc5b4 \ub9c8\ubaa8 \uac10\uc18c<\/li>\n <li>\uc11c\uc2a4\ud39c\uc158\u00b7\uc0e4\uc2dc \ubd80\ub2f4 \uac10\uc18c<\/li>\n <li>\uac00\uc18d\u00b7\uc751\ub2f5\uc131 \ud5a5\uc0c1<\/li>\n <li>\uc6b4\uc804\uc790 \ud53c\ub85c\ub3c4 \uac10\uc18c<\/li>\n <li>\ubb38\uc9dd \uac1c\ud3d0 \ud3b8\uc758\uc131<\/li>\n <li>\ud0c4\uc18c\ubc30\ucd9c\ub7c9 \uac10\uc18c<\/li>\n <\/ul>\n\n <div class=\"notice\" id=\"noticeBox\">\n \uacf5\ucc28\uc6b4\ud589\ube44\uc728, \uc2dc\ub0b4\uc8fc\ud589\ube44\uc728, \uc6b4\uc804\uc2b5\uad00, \ud0c0\uc774\uc5b4\uacf5\uae30\uc555, \ucc28\ub7c9\ub178\ud6c4\ub3c4 \ub4f1\uc5d0 \ub530\ub77c \uc2e4\uc81c \uc808\uac10\uc561\uc740 \ub2ec\ub77c\uc9c8 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubcf8 \uacc4\uc0b0\uae30\ub294 \ucc38\uace0\uc6a9 \ucd94\uc815\uce58\uc785\ub2c8\ub2e4.\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"calc-footer\">\n <span>\u00a9 2026 (\uc8fc)\uc54c\ud14d\ucf54\ub9ac\uc544 \u00b7 Aluminum Cargo Gate Specialist \u00b7 www.altech21.com<\/span>\n <span>6N01-T5 \uace0\uac15\ub3c4 \uc54c\ub8e8\ubbf8\ub284 \uac8c\uc774\ud2b8 \uc804\ubb38<\/span>\n <\/div>\n\n<\/div>\n\n<script>\n \/\/ \ucc28\uc885 \uc120\ud0dd \uc2dc \uac10\uc18c\uc911\ub7c9 \uc790\ub3d9\uc785\ub825\n function onVehicleSelect() {\n const sel = document.getElementById('vehicleType');\n const val = parseInt(sel.value);\n const wr = document.getElementById('weightReduction');\n if (val > 0) {\n wr.value = val;\n updateNewWeight();\n } else if (sel.value === '0') {\n wr.value = '';\n document.getElementById('newWeight').value = '';\n }\n }\n\n \/\/ \uac10\uc18c\ud6c4 \uacf5\ucc28\uc911\ub7c9 \uc790\ub3d9\uacc4\uc0b0\n function updateNewWeight() {\n const ew = parseFloat(document.getElementById('emptyWeight').value) || 0;\n const wr = parseFloat(document.getElementById('weightReduction').value) || 0;\n if (ew > 0 && wr > 0) {\n document.getElementById('newWeight').value = (ew - wr).toLocaleString();\n }\n }\n document.getElementById('emptyWeight').addEventListener('input', updateNewWeight);\n document.getElementById('weightReduction').addEventListener('input', updateNewWeight);\n\n \/\/ \uc2dc\ub0b4\/\uace0\uc18d \ud1a0\uae00\n function setRatio(hwyPct) {\n document.getElementById('hwyRatio').value = hwyPct;\n updateRatio();\n }\n function updateRatio() {\n const hwy = parseInt(document.getElementById('hwyRatio').value);\n const city = 100 - hwy;\n document.getElementById('ratioDisplay').textContent = city + ' : ' + hwy;\n document.getElementById('btnCity').classList.toggle('active', hwy <= 30);\n document.getElementById('btnHwy').classList.toggle('active', hwy >= 70);\n }\n\n \/\/ \ud575\uc2ec \uacc4\uc0b0 \ub85c\uc9c1\n function calculate() {\n const emptyWeight = parseFloat(document.getElementById('emptyWeight').value);\n const weightReduction = parseFloat(document.getElementById('weightReduction').value);\n const annualKm = parseFloat(document.getElementById('annualKm').value);\n const fuelPrice = parseFloat(document.getElementById('fuelPrice').value);\n const replacementCost = parseFloat(document.getElementById('replacementCost').value);\n const hwyRatio = parseInt(document.getElementById('hwyRatio').value) \/ 100;\n const cityRatio = 1 - hwyRatio;\n\n if (!emptyWeight || !weightReduction || !annualKm || !fuelPrice) {\n alert('\uacf5\ucc28\uc911\ub7c9, \uac10\uc18c\uc911\ub7c9, \uc5f0\uac04 \uc8fc\ud589\uac70\ub9ac, \uae30\ub984\ub2e8\uac00\ub97c \uc785\ub825\ud574 \uc8fc\uc138\uc694.');\n return;\n }\n\n \/\/ \uae30\ubcf8 \uc5f0\ube44 \ucd94\uc815 (\uacf5\ucc28\uc911\ub7c9 \uae30\ubc18, \uc2dc\ub0b4\/\uace0\uc18d \ud63c\ud569)\n const baseFuelEff = cityRatio * (30000 \/ emptyWeight * 3.5) + hwyRatio * (30000 \/ emptyWeight * 5.0);\n const newWeight = emptyWeight - weightReduction;\n const newFuelEff = cityRatio * (30000 \/ newWeight * 3.5) + hwyRatio * (30000 \/ newWeight * 5.0);\n\n \/\/ \uc5f0\ube44 \uac1c\uc120\uc728\n const effImprovement = ((newFuelEff - baseFuelEff) \/ baseFuelEff) * 100;\n\n \/\/ \uc5f0\uac04 \uc5f0\ub8cc \uc18c\ube44 (\uae30\uc874)\n const baseAnnualFuel = annualKm \/ baseFuelEff;\n const newAnnualFuel = annualKm \/ newFuelEff;\n const savedFuel = baseAnnualFuel - newAnnualFuel;\n\n \/\/ \uc5f0\uac04 \uc808\uac10 \uae08\uc561 (\uae30\ubcf8\uac12)\n const savedMoney = savedFuel * fuelPrice;\n\n \/\/ \ubcf4\uc218\uc801 \/ \uae30\ubcf8 \/ \ub099\uad00\uc801 \uacc4\uc218\n const conservative = Math.round(savedMoney * 0.6);\n const base = Math.round(savedMoney);\n const optimistic = Math.round(savedMoney * 1.4);\n const maxVal = optimistic;\n\n \/\/ \ud68c\uc218\uae30\uac04 (\uae30\ubcf8\uac12 \uae30\uc900)\n let paybackMonths = replacementCost > 0 ? (replacementCost \/ savedMoney) * 12 : null;\n\n \/\/ \uae30\ubcf8 \ucd9c\ub825\n setResult('out-efficiency', effImprovement.toFixed(2), '');\n setResult('out-fuel', Math.round(savedFuel).toLocaleString(), '');\n setResult('out-payback', paybackMonths ? paybackMonths.toFixed(1) : '\u2014', '');\n\n document.getElementById('out-efficiency').className = 'r-value gold animated';\n document.getElementById('out-fuel').className = 'r-value gold animated';\n document.getElementById('out-payback').className = 'r-value animated';\n\n \/\/ \ubc94\uc704 \ucd9c\ub825\n const rows = [\n { badge: '\ubcf4\uc218\uc801', badgeClass: 'badge-conservative', barClass: 'bar-conservative',\n valClass: 'val-conservative', val: conservative,\n desc: '\uc2dc\ub0b4\uc8fc\ud589 \u591a \/ \uacf5\ucc28\uc6b4\ud589 \u5c11 \/ \ub178\ud6c4\ucc28\ub7c9' },\n { badge: '\u25b6 \uae30\ubcf8\uac12', badgeClass: 'badge-base', barClass: 'bar-base',\n valClass: 'val-base', val: base,\n desc: '\ud3c9\uade0\uc801 \uc6b4\ud589\uc870\uac74 \uae30\uc900' },\n { badge: '\ub099\uad00\uc801', badgeClass: 'badge-optimistic', barClass: 'bar-optimistic',\n valClass: 'val-optimistic', val: optimistic,\n desc: '\uace0\uc18d\uc8fc\ud589 \u591a \/ \uacf5\ucc28\uc6b4\ud589 \u591a \/ \uc2e0\ucc28' },\n ];\n\n const container = document.getElementById('rangeRows');\n container.innerHTML = rows.map(r => `\n <div class=\"range-row\">\n <span class=\"range-badge ${r.badgeClass}\">${r.badge}<\/span>\n <div style=\"flex:1\">\n <div class=\"range-bar-wrap\">\n <div class=\"range-bar ${r.barClass}\" style=\"width:${Math.round(r.val\/maxVal*100)}%\"><\/div>\n <\/div>\n <div style=\"font-size:0.62rem;color:rgba(180,200,220,0.45);margin-top:2px\">${r.desc}<\/div>\n <\/div>\n <span class=\"range-value ${r.valClass}\">${r.val.toLocaleString()} \uc6d0<\/span>\n <\/div>\n `).join('');\n }\n\n function setResult(id, val, unit) {\n document.getElementById(id).textContent = val;\n }\n\n function resetAll() {\n ['emptyWeight','weightReduction','newWeight','annualKm','fuelPrice','replacementCost'].forEach(id => {\n document.getElementById(id).value = id === 'fuelPrice' ? '1750' : '';\n });\n document.getElementById('vehicleType').value = '';\n document.getElementById('hwyRatio').value = 50;\n updateRatio();\n document.getElementById('rangeRows').innerHTML =\n '<div class=\"range-placeholder\">\uacc4\uc0b0\ud558\uae30 \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ubc94\uc704\uac00 \ud45c\uc2dc\ub429\ub2c8\ub2e4<\/div>';\n ['out-efficiency','out-fuel','out-payback'].forEach(id => {\n document.getElementById(id).textContent = '\u2014';\n document.getElementById(id).className = 'r-value result-placeholder';\n });\n }\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\uc5f0\ub8cc\ube44\uc808\uac10\uc561 \uacc4\uc0b0\uae30 | (\uc8fc)\uc54c\ud14d\ucf54\ub9ac\uc544 \u26fd \uc5f0\ub8cc\ube44 \uc808\uac10\uc561 \uacc4\uc0b0\uae30 FUEL SAVINGS CALCULATOR \u2014 ALUMINUM GATE REPLACEMENT (\uc8fc) \uc54c\ud14d\ucf54\ub9ac\uc544 \uc785\ub825\ucc3d INPUT \ucc28\uc885 \uc120\ud0dd — \ucc28\uc885 \uc120\ud0dd —1\ud1a4 \ubd09\uace0 (50kg)3.5\ud1a4 \ub9c8\uc774\ud2f0 (200kg)5\ud1a4 \ud504\ub9ac\ub9c8 (150kg)5\ud1a4 \uba54\uac00\ud2b8\ub7ed (200kg)25\ud1a4 \uc5d1\uc2dc\uc5b8\ud2b8 (400kg)25\ud1a4 \ud504\ub9ac\ub9c8 (320kg)\uc9c1\uc811 \uc785\ub825 \uacf5\ucc28\uc911\ub7c9 kg \uac10\uc18c\uc911\ub7c9 kg \uac10\uc18c\ud6c4 \uacf5\ucc28\uc911\ub7c9 kg \uc5f0\uac04 \uc8fc\ud589\uac70\ub9ac km \uc2dc\ub0b4 : \uace0\uc18d \uc2dc\ub0b4 \uace0\uc18d 50 : […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-59","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages\/59","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/comments?post=59"}],"version-history":[{"count":3,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages\/59\/revisions"}],"predecessor-version":[{"id":2589,"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/pages\/59\/revisions\/2589"}],"wp:attachment":[{"href":"http:\/\/altech21.com\/en\/wp-json\/wp\/v2\/media?parent=59"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}