<\/title>\n<style>\n :root {\n --primary: #F0605C;\n --primary-dark: #d94945;\n --primary-light: #ff8a87;\n --primary-bg: #fff5f5;\n --accent: #ff9e9b;\n --text: #2d2d2d;\n --text-muted: #7a7a7a;\n --card-bg: #ffffff;\n --border: #ecdede;\n --bg: #f7f2f2;\n --success: #48c78e;\n --info: #3273dc;\n --gradient: linear-gradient(135deg, #F0605C 0%, #ff8a87 100%);\n --font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: var(--font);\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n }\n\n \/* Header *\/\n .header { text-align: center; margin-bottom: 28px; }\n .header-icon {\n width: 60px; height: 60px;\n background: var(--gradient);\n border-radius: 18px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 10px;\n }\n .header-icon svg { width: 32px; height: 32px; fill: white; }\n .header h1 { font-size: 1.6rem; font-weight: 800; color: var(--text); letter-spacing: -0.4px; }\n .header p { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }\n\n \/* Two-column layout \u2014 single col on mobile, side-by-side on PC *\/\n .layout { display: block; }\n @media (min-width: 820px) {\n .layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n align-items: start;\n }\n .col-right {\n position: sticky;\n top: 20px;\n }\n }\n\n \/* Cards \u2014 no shadow *\/\n .card {\n background: var(--card-bg);\n border-radius: 14px;\n padding: 18px 16px;\n margin-bottom: 12px;\n border: 1px solid var(--border);\n }\n .card-title {\n font-weight: 700;\n font-size: 0.95rem;\n color: var(--text);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 7px;\n }\n .card-title .dot { width: 9px; height: 9px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }\n .card-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px; margin-left: 16px; }\n\n \/* Section label *\/\n .section-label {\n font-weight: 700;\n font-size: 0.72rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--primary);\n margin: 20px 0 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n \/* Gender *\/\n .gender-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n .gender-btn {\n border: 2px solid var(--border);\n background: #fff;\n border-radius: 12px;\n padding: 14px 8px;\n cursor: pointer;\n text-align: center;\n transition: all 0.18s;\n font-family: var(--font);\n font-weight: 600;\n font-size: 0.88rem;\n color: var(--text-muted);\n }\n .gender-btn svg { width: 32px; height: 32px; display: block; margin: 0 auto 5px; }\n .gender-btn.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }\n .gender-btn:hover:not(.active) { border-color: var(--accent); }\n\n \/* Sliders *\/\n .field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }\n .field-row:last-child { margin-bottom: 0; }\n .field-label { font-size: 0.82rem; color: var(--text-muted); width: 56px; flex-shrink: 0; }\n .field-value { font-weight: 800; font-size: 1.15rem; color: var(--primary); width: 48px; text-align: right; flex-shrink: 0; }\n .field-unit { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; width: 26px; }\n\n input[type=range] {\n -webkit-appearance: none;\n flex: 1;\n height: 5px;\n border-radius: 5px;\n background: #f0e0e0;\n outline: none;\n cursor: pointer;\n }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--primary);\n border: 3px solid white;\n box-shadow: 0 1px 4px rgba(240,96,92,0.35);\n cursor: pointer;\n transition: transform 0.1s;\n }\n input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }\n input[type=range]::-moz-range-thumb {\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--primary);\n border: 3px solid white;\n cursor: pointer;\n }\n\n \/* Unit toggle *\/\n .unit-toggle { display: inline-flex; background: #f5eded; border-radius: 9px; padding: 3px; gap: 2px; margin-left: auto; }\n .unit-btn {\n padding: 3px 10px;\n border-radius: 6px;\n border: none;\n background: transparent;\n font-size: 0.74rem;\n font-weight: 700;\n color: var(--text-muted);\n cursor: pointer;\n font-family: var(--font);\n transition: all 0.13s;\n }\n .unit-btn.active { background: var(--primary); color: white; }\n\n \/* Height imperial *\/\n .height-imperial { display: flex; gap: 10px; }\n .height-imperial .sub-field { flex: 1; }\n .height-imperial label { font-size: 0.74rem; color: var(--text-muted); display: block; margin-bottom: 4px; }\n .height-imperial input[type=number] {\n width: 100%;\n border: 2px solid var(--border);\n border-radius: 9px;\n padding: 7px 8px;\n font-size: 0.95rem;\n font-family: var(--font);\n font-weight: 700;\n color: var(--text);\n outline: none;\n text-align: center;\n transition: border-color 0.18s;\n }\n .height-imperial input[type=number]:focus { border-color: var(--primary); }\n\n \/* Activity \/ Climate tri-group *\/\n .tri-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }\n .tri-btn {\n border: 2px solid var(--border);\n background: #fff;\n border-radius: 11px;\n padding: 9px 5px;\n cursor: pointer;\n text-align: center;\n font-family: var(--font);\n font-weight: 600;\n font-size: 0.73rem;\n color: var(--text-muted);\n transition: all 0.18s;\n line-height: 1.3;\n }\n .tri-btn .icon { font-size: 1.45rem; display: block; margin-bottom: 3px; }\n .tri-btn.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }\n .tri-btn:hover:not(.active) { border-color: var(--accent); }\n\n \/* Beverages *\/\n .bev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n @media (min-width: 480px) and (max-width: 819px) { .bev-grid { grid-template-columns: repeat(4, 1fr); } }\n @media (min-width: 820px) { .bev-grid { grid-template-columns: 1fr 1fr; } }\n @media (min-width: 980px) { .bev-grid { grid-template-columns: repeat(4, 1fr); } }\n\n .bev-item {\n border: 2px solid var(--border);\n border-radius: 12px;\n padding: 10px 6px;\n text-align: center;\n background: #fff;\n transition: all 0.18s;\n }\n .bev-item.has-value { border-color: var(--primary); background: var(--primary-bg); }\n .bev-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }\n .bev-name { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; margin-bottom: 7px; }\n .bev-control { display: flex; align-items: center; justify-content: center; gap: 7px; }\n .bev-btn {\n width: 26px; height: 26px;\n border-radius: 50%;\n border: none;\n background: var(--primary);\n color: white;\n font-size: 1rem;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.13s, transform 0.1s;\n line-height: 1;\n }\n .bev-btn:hover { background: var(--primary-dark); transform: scale(1.1); }\n .bev-btn.minus { background: #eee; color: #999; }\n .bev-btn.minus:hover { background: #ddd; }\n .bev-count { font-weight: 800; font-size: 0.95rem; color: var(--text); width: 18px; text-align: center; }\n\n .bev-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 0 0;\n border-top: 1px dashed var(--border);\n margin-top: 10px;\n font-size: 0.82rem;\n color: var(--text-muted);\n }\n .bev-total-row strong { color: var(--primary); font-size: 0.95rem; }\n\n \/* Result card *\/\n .result-card {\n background: var(--gradient);\n border-radius: 18px;\n padding: 24px 20px;\n margin-bottom: 12px;\n color: white;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .result-card::before { content:''; position:absolute; top:-35px; right:-35px; width:140px; height:140px; background:rgba(255,255,255,0.07); border-radius:50%; }\n .result-card::after { content:''; position:absolute; bottom:-45px; left:-25px; width:120px; height:120px; background:rgba(255,255,255,0.05); border-radius:50%; }\n .result-label { font-size: 0.82rem; font-weight: 600; opacity: 0.85; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 5px; }\n .result-main { font-size: 3.6rem; font-weight: 900; line-height: 1; letter-spacing: -2px; }\n .result-unit { font-size: 1.1rem; font-weight: 700; opacity: 0.8; margin-left: 3px; }\n .result-sub { font-size: 0.82rem; opacity: 0.8; margin-top: 5px; }\n .result-badges { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; position: relative; z-index: 1; }\n .badge { background: rgba(255,255,255,0.18); border-radius: 20px; padding: 5px 12px; font-size: 0.74rem; font-weight: 700; }\n\n \/* Breakdown *\/\n .breakdown { border-radius: 13px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 12px; }\n .breakdown-title { background: var(--primary-bg); padding: 10px 14px; font-weight: 700; font-size: 0.86rem; color: var(--primary); border-bottom: 1px solid var(--border); }\n .breakdown table { width: 100%; border-collapse: collapse; background: white; }\n .breakdown th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }\n .breakdown td { padding: 9px 12px; font-size: 0.84rem; border-bottom: 1px solid #faf0f0; color: var(--text); }\n .breakdown tr:last-child td { border-bottom: none; }\n .breakdown td:last-child, .breakdown th:last-child { text-align: right; }\n .val-positive { color: var(--success); font-weight: 700; }\n .val-negative { color: var(--primary); font-weight: 700; }\n .val-neutral { color: var(--info); font-weight: 700; }\n\n \/* Progress *\/\n .progress-wrap { margin-top: 14px; }\n .progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 5px; }\n .progress-label strong { color: var(--primary); }\n .progress-bar { height: 9px; background: #f0e0e0; border-radius: 9px; overflow: hidden; }\n .progress-fill { height: 100%; background: var(--gradient); border-radius: 9px; transition: width 0.4s cubic-bezier(.4,2,.6,1); min-width: 3px; }\n\n \/* Reference tables *\/\n .ref-card { background: white; border-radius: 13px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 12px; }\n .ref-header { background: var(--gradient); padding: 12px 16px; color: white; font-weight: 700; font-size: 0.9rem; }\n .ref-sub { font-size: 0.72rem; opacity: 0.8; font-weight: 400; }\n .ref-table { width: 100%; border-collapse: collapse; }\n .ref-table th { background: #fff8f8; padding: 8px 12px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); font-weight: 700; border-bottom: 1px solid var(--border); text-align: left; }\n .ref-table td { padding: 8px 12px; font-size: 0.8rem; border-bottom: 1px solid #fdf5f5; color: var(--text); }\n .ref-table tr:last-child td { border-bottom: none; }\n .ref-table td:not(:first-child) { text-align: center; }\n .ref-table th:not(:first-child) { text-align: center; }\n .highlight-row td { background: #fff8f8; font-weight: 700; color: var(--primary-dark); }\n\n \/* Tips *\/\n .tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n @media (max-width: 420px) { .tips-grid { grid-template-columns: 1fr; } }\n .tip { background: var(--primary-bg); border-radius: 11px; padding: 11px 12px; font-size: 0.78rem; line-height: 1.45; color: var(--text); border-left: 3px solid var(--primary); }\n .tip strong { color: var(--primary); display: block; margin-bottom: 2px; font-size: 0.75rem; }\n\n .footer-note { text-align: center; font-size: 0.7rem; color: #bbb; margin-top: 24px; line-height: 1.5; }\n<\/style>\n<\/head>\n<body>\n<div class=\"page\">\n\n <div class=\"layout\">\n\n \n <div class=\"col-left\">\n\n <div class=\"section-label\">\uc0ac\uc6a9\uc790 \uc815\ubcf4<\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> \uc131\ubcc4<\/div>\n <div class=\"card-subtitle\">\uae30\ubcf8 \uc218\ubd84 \uacf5\uae09 \ud544\uc694\ub7c9\uc5d0 \uc601\ud5a5\uc744 \ubbf8\uce69\ub2c8\ub2e4.<\/div>\n <div class=\"gender-group\">\n <button class=\"gender-btn active\" id=\"btn-male\" onclick=\"setGender('male')\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"5.5\"\/><line x1=\"14.5\" y1=\"6.5\" x2=\"20\" y2=\"1\"\/><line x1=\"16\" y1=\"1\" x2=\"20\" y2=\"1\"\/><line x1=\"20\" y1=\"1\" x2=\"20\" y2=\"5\"\/>\n <\/svg>\n \ub0a8\uc131\n <\/button>\n <button class=\"gender-btn\" id=\"btn-female\" onclick=\"setGender('female')\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <circle cx=\"12\" cy=\"9\" r=\"5.5\"\/><line x1=\"12\" y1=\"14.5\" x2=\"12\" y2=\"22\"\/><line x1=\"9\" y1=\"19\" x2=\"15\" y2=\"19\"\/>\n <\/svg>\n \uc5ec\uc131\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> \ub098\uc774<\/div>\n <div class=\"field-row\" style=\"margin-top:8px\">\n <span class=\"field-label\">\ub098\uc774<\/span>\n <input type=\"range\" id=\"age-slider\" min=\"5\" max=\"90\" value=\"25\" oninput=\"updateAge()\">\n <span class=\"field-value\" id=\"age-val\">25<\/span>\n <span class=\"field-unit\">yrs<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\">\n <span class=\"dot\"><\/span> \ubb34\uac8c\n <div class=\"unit-toggle\">\n <button class=\"unit-btn active\" id=\"wt-kg\" onclick=\"setWeightUnit('kg')\">kg<\/button>\n <button class=\"unit-btn\" id=\"wt-lbs\" onclick=\"setWeightUnit('lbs')\">lbs<\/button>\n <\/div>\n <\/div>\n <div class=\"field-row\" style=\"margin-top:8px\">\n <span class=\"field-label\">\ubb34\uac8c<\/span>\n <input type=\"range\" id=\"weight-slider\" min=\"30\" max=\"200\" value=\"70\" oninput=\"updateWeight()\">\n <span class=\"field-value\" id=\"weight-val\">70<\/span>\n <span class=\"field-unit\" id=\"weight-unit-label\">kg<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\">\n <span class=\"dot\"><\/span> \ub192\uc774\n <div class=\"unit-toggle\">\n <button class=\"unit-btn active\" id=\"ht-cm\" onclick=\"setHeightUnit('cm')\">cm<\/button>\n <button class=\"unit-btn\" id=\"ht-imp\" onclick=\"setHeightUnit('imperial')\">\ud53c\ud2b8\/\uc778\uce58<\/button>\n <\/div>\n <\/div>\n <div id=\"height-cm-wrap\" style=\"margin-top:8px\">\n <div class=\"field-row\">\n <span class=\"field-label\">\ub192\uc774<\/span>\n <input type=\"range\" id=\"height-slider\" min=\"100\" max=\"220\" value=\"170\" oninput=\"updateHeight()\">\n <span class=\"field-value\" id=\"height-val\">170<\/span>\n <span class=\"field-unit\">cm<\/span>\n <\/div>\n <\/div>\n <div id=\"height-imp-wrap\" style=\"display:none;margin-top:8px\">\n <div class=\"height-imperial\">\n <div class=\"sub-field\"><label>\ud53c\ud2b8<\/label><input type=\"number\" id=\"height-ft\" min=\"3\" max=\"8\" value=\"5\" oninput=\"updateHeightImperial()\"><\/div>\n <div class=\"sub-field\"><label>\uc778\uce58<\/label><input type=\"number\" id=\"height-in\" min=\"0\" max=\"11\" value=\"7\" oninput=\"updateHeightImperial()\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> \ud65c\ub3d9 \uc218\uc900<\/div>\n <div class=\"card-subtitle\">\uc77c\uc77c \uc2e0\uccb4 \ud65c\ub3d9<\/div>\n <div class=\"tri-group\">\n <button class=\"tri-btn\" id=\"act-low\" onclick=\"setActivity('low')\"><span class=\"icon\">\ud83d\udecb\ufe0f<\/span>\uc549\uc544\uc788\ub294<\/button>\n <button class=\"tri-btn active\" id=\"act-mod\" onclick=\"setActivity('moderate')\"><span class=\"icon\">\ud83d\udeb6<\/span>\ubcf4\ud1b5<\/button>\n <button class=\"tri-btn\" id=\"act-high\" onclick=\"setActivity('high')\"><span class=\"icon\">\ud83c\udfcb\ufe0f<\/span>\ud65c\uc131<\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> \uae30\ud6c4<\/div>\n <div class=\"card-subtitle\">\uac00\uc7a5 \ub9ce\uc740 \uc2dc\uac04\uc744 \ubcf4\ub0b4\ub294 \ud658\uacbd<\/div>\n <div class=\"tri-group\">\n <button class=\"tri-btn active\" id=\"cl-temp\" onclick=\"setClimate('temperate')\"><span class=\"icon\">\ud83c\udf24\ufe0f<\/span>\uc628\ub300<\/button>\n <button class=\"tri-btn\" id=\"cl-hot\" onclick=\"setClimate('hot')\"><span class=\"icon\">\u2600\ufe0f<\/span>\uace0\uc628\/\ub2e4\uc2b5<\/button>\n <button class=\"tri-btn\" id=\"cl-cold\" onclick=\"setClimate('cold')\"><span class=\"icon\">\u2744\ufe0f<\/span>\uac10\uae30<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"col-right\">\n\n <div class=\"section-label\">\uacb0\uacfc<\/div>\n\n <div class=\"result-card\">\n <div class=\"result-label\">\ud83d\udca7 \uc77c\uc77c \uad8c\uc7a5 \uc218\ubd84 \uc12d\ucde8\ub7c9<\/div>\n <div>\n <span class=\"result-main\" id=\"result-liters\">2.5<\/span>\n <span class=\"result-unit\">L<\/span>\n <\/div>\n <div class=\"result-sub\" id=\"result-cups\">\u2248 10\ucef5(\uac01 250ml)<\/div>\n <div class=\"result-badges\">\n <span class=\"badge\" id=\"badge-gender\">\ud83d\udc68 \ub0a8\uc131<\/span>\n <span class=\"badge\" id=\"badge-activity\">\ud83d\udeb6 \ubcf4\ud1b5<\/span>\n <span class=\"badge\" id=\"badge-climate\">\ud83c\udf24\ufe0f \uc628\ub300<\/span>\n <\/div>\n <\/div>\n\n <div class=\"section-label\">\ucc38\uc870 \uac00\uc774\ub4dc<\/div>\n\n <div class=\"ref-card\">\n <div class=\"ref-header\">\n \ud83d\udccb \ud504\ub85c\ud544\ubcc4 \uc77c\uc77c \ubb3c \ud544\uc694\ub7c9\n <div class=\"ref-sub\">\uc758\ud559 \uc5f0\uad6c\uc18c \ubc0f WHO \uac00\uc774\ub4dc\ub77c\uc778\uc5d0 \uadfc\uac70<\/div>\n <\/div>\n <div style=\"overflow-x:auto\">\n <table class=\"ref-table\">\n <thead><tr><th>\ud504\ub85c\ud544<\/th><th>\ucd5c\uc18c(L)<\/th><th>\uc774\uc0c1\uc801(L)<\/th><th>\ucd5c\ub300(L)<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>\uc5b4\ub9b0\uc774(5-12\uc138)<\/td><td>1.2<\/td><td>1.5<\/td><td>1.8<\/td><\/tr>\n <tr><td>\uccad\uc18c\ub144(13~18\uc138)<\/td><td>1.5<\/td><td>1.9<\/td><td>2.4<\/td><\/tr>\n <tr><td>\uc131\uc778 \uc5ec\uc131(\uc549\uc740 \uc790\uc138)<\/td><td>1.6<\/td><td>2.0<\/td><td>2.5<\/td><\/tr>\n <tr><td>\uc131\uc778 \ub0a8\uc131(\uc549\uc740 \uc790\uc138)<\/td><td>1.8<\/td><td>2.5<\/td><td>3.0<\/td><\/tr>\n <tr class=\"highlight-row\"><td>\uc131\uc778 \uc5ec\uc131(\ud65c\uc131)<\/td><td>2.0<\/td><td>2.7<\/td><td>3.2<\/td><\/tr>\n <tr class=\"highlight-row\"><td>\uc131\uc778 \ub0a8\uc131(\ud65c\uc131)<\/td><td>2.5<\/td><td>3.2<\/td><td>4.0<\/td><\/tr>\n <tr><td>\uc784\uc0b0\ubd80<\/td><td>2.3<\/td><td>3.0<\/td><td>3.5<\/td><\/tr>\n <tr><td>\ubaa8\uc720 \uc218\uc720 \uc911\uc778 \uc5ec\uc131<\/td><td>2.6<\/td><td>3.5<\/td><td>4.0<\/td><\/tr>\n <tr><td>\uace0\ub839\uc790(65\uc138 \uc774\uc0c1)<\/td><td>1.5<\/td><td>1.9<\/td><td>2.4<\/td><\/tr>\n <tr><td>\ub354\uc6b4 \uae30\ud6c4(+\ucd94\uac00)<\/td><td>+0.5<\/td><td>+0.8<\/td><td>+1.2<\/td><\/tr>\n <tr><td>\uaca9\ub82c\ud55c \uc6b4\ub3d9(+\ucd94\uac00)<\/td><td>+0.5<\/td><td>+1.0<\/td><td>+1.5<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"ref-card\">\n <div class=\"ref-header\">\n \ud83c\udf75 \uc74c\ub8cc \uc218\ubd84 \uc218\uce58\n <div class=\"ref-sub\">1\ud68c \uc81c\uacf5\ub7c9\ub2f9 \uc21c \uc218\ubd84 \uae30\uc5ec\ub3c4<\/div>\n <\/div>\n <div style=\"overflow-x:auto\">\n <table class=\"ref-table\">\n <thead><tr><th>\uc74c\ub8cc<\/th><th>\uc11c\ube59<\/th><th>\uc21c H\u2082O<\/th><th>\ucc38\uace0<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>\ud83d\udca7 \ubb3c<\/td><td>250 ml<\/td><td>250 ml<\/td><td>\ucd5c\uace0\uc758 \uc120\ud0dd<\/td><\/tr>\n <tr><td>\ud83e\uded6 \ucc28(\uc124\ud0d5 \uc5c6\uc74c)<\/td><td>250 ml<\/td><td>240 ml<\/td><td>\uac00\ubcbc\uc6b4 \uc774\ub1e8\uc81c<\/td><\/tr>\n <tr><td>\u2615 \ucee4\ud53c<\/td><td>125 ml<\/td><td>100 ml<\/td><td>\uac00\ubcbc\uc6b4 \uc774\ub1e8\uc81c<\/td><\/tr>\n <tr><td>\ud83e\udd5b \uc6b0\uc720<\/td><td>250 ml<\/td><td>220 ml<\/td><td>\uc601\uc591\uac00 \uc788\ub294<\/td><\/tr>\n <tr><td>\ud83c\udf4a \uacfc\uc77c \uc8fc\uc2a4<\/td><td>250 ml<\/td><td>220 ml<\/td><td>\uace0\ub2f9\ub3c4<\/td><\/tr>\n <tr><td>\ud83e\udd64 \uccad\ub7c9\uc74c\ub8cc<\/td><td>330 ml<\/td><td>280 ml<\/td><td>\uace0\ub2f9\ub3c4<\/td><\/tr>\n <tr><td>\ud83c\udf77 \uc640\uc778<\/td><td>125 ml<\/td><td>50 ml<\/td><td>\uc774\ub1e8\uc81c<\/td><\/tr>\n <tr><td>\ud83c\udf7a \ub9e5\uc8fc<\/td><td>330 ml<\/td><td>220 ml<\/td><td>\uac00\ubcbc\uc6b4 \uc774\ub1e8\uc81c<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n const state = {\n gender: 'male', age: 25, weightKg: 70, weightUnit: 'kg',\n heightCm: 170, heightUnit: 'cm', activity: 'moderate',\n climate: 'temperate', beverages: {}\n };\n\n const BEVERAGES = [\n { id: 'water', name: 'Water', emoji: '\ud83d\udca7', serving: 250, factor: 1.00 },\n { id: 'tea', name: 'Tea', emoji: '\ud83e\uded6', serving: 250, factor: 0.96 },\n { id: 'coffee', name: 'Coffee', emoji: '\u2615', serving: 125, factor: 0.80 },\n { id: 'milk', name: 'Milk', emoji: '\ud83e\udd5b', serving: 250, factor: 0.88 },\n { id: 'juice', name: 'Fruit Juice', emoji: '\ud83c\udf4a', serving: 250, factor: 0.88 },\n { id: 'soda', name: 'Soft Drink', emoji: '\ud83e\udd64', serving: 330, factor: 0.85 },\n { id: 'wine', name: 'Wine', emoji: '\ud83c\udf77', serving: 125, factor: 0.40 },\n { id: 'beer', name: 'Beer', emoji: '\ud83c\udf7a', serving: 330, factor: 0.67 },\n ];\n BEVERAGES.forEach(b => state.beverages[b.id] = 0);\n\n function buildBeverageGrid() {\n const grid = document.getElementById('bev-grid');\n grid.innerHTML = '';\n BEVERAGES.forEach(b => {\n const div = document.createElement('div');\n div.className = 'bev-item';\n div.id = 'bev-' + b.id;\n div.innerHTML = `\n <div class=\"bev-emoji\">${b.emoji}<\/div>\n <div class=\"bev-name\">${b.name}<br><span style=\"color:#bbb;font-weight:400\">(${b.serving}ml)<\/span><\/div>\n <div class=\"bev-control\">\n <button class=\"bev-btn minus\" onclick=\"changeBev('${b.id}',-1)\">\u2212<\/button>\n <span class=\"bev-count\" id=\"cnt-${b.id}\">0<\/span>\n <button class=\"bev-btn\" onclick=\"changeBev('${b.id}',1)\">+<\/button>\n <\/div>`;\n grid.appendChild(div);\n });\n }\n\n function changeBev(id, delta) {\n state.beverages[id] = Math.max(0, (state.beverages[id]||0) + delta);\n document.getElementById('cnt-'+id).textContent = state.beverages[id];\n document.getElementById('bev-'+id).classList.toggle('has-value', state.beverages[id] > 0);\n calculate();\n }\n\n function setGender(g) {\n state.gender = g;\n document.getElementById('btn-male').classList.toggle('active', g==='male');\n document.getElementById('btn-female').classList.toggle('active', g==='female');\n calculate();\n }\n\n function updateAge() {\n state.age = parseInt(document.getElementById('age-slider').value);\n document.getElementById('age-val').textContent = state.age;\n calculate();\n }\n\n function setWeightUnit(unit) {\n state.weightUnit = unit;\n const slider = document.getElementById('weight-slider');\n document.getElementById('wt-kg').classList.toggle('active', unit==='kg');\n document.getElementById('wt-lbs').classList.toggle('active', unit==='lbs');\n document.getElementById('weight-unit-label').textContent = unit;\n if (unit === 'lbs') {\n slider.min = 66; slider.max = 440;\n const lbs = Math.round(state.weightKg * 2.205);\n slider.value = lbs;\n document.getElementById('weight-val').textContent = lbs;\n } else {\n slider.min = 30; slider.max = 200;\n slider.value = state.weightKg;\n document.getElementById('weight-val').textContent = state.weightKg;\n }\n }\n\n function updateWeight() {\n const val = parseInt(document.getElementById('weight-slider').value);\n document.getElementById('weight-val').textContent = val;\n state.weightKg = state.weightUnit === 'lbs' ? Math.round(val\/2.205) : val;\n calculate();\n }\n\n function setHeightUnit(unit) {\n state.heightUnit = unit;\n document.getElementById('ht-cm').classList.toggle('active', unit==='cm');\n document.getElementById('ht-imp').classList.toggle('active', unit==='imperial');\n document.getElementById('height-cm-wrap').style.display = unit==='cm' ? '' : 'none';\n document.getElementById('height-imp-wrap').style.display = unit==='imperial' ? '' : 'none';\n if (unit === 'imperial') {\n const totalIn = Math.round(state.heightCm \/ 2.54);\n document.getElementById('height-ft').value = Math.floor(totalIn\/12);\n document.getElementById('height-in').value = totalIn % 12;\n }\n }\n\n function updateHeight() {\n state.heightCm = parseInt(document.getElementById('height-slider').value);\n document.getElementById('height-val').textContent = state.heightCm;\n calculate();\n }\n\n function updateHeightImperial() {\n const ft = parseInt(document.getElementById('height-ft').value)||0;\n const inch = parseInt(document.getElementById('height-in').value)||0;\n state.heightCm = Math.round((ft*12+inch)*2.54);\n calculate();\n }\n\n function setActivity(a) {\n state.activity = a;\n ['low','mod','high'].forEach(l => document.getElementById('act-'+l).classList.remove('active'));\n document.getElementById({low:'act-low',moderate:'act-mod',high:'act-high'}[a]).classList.add('active');\n calculate();\n }\n\n function setClimate(c) {\n state.climate = c;\n ['temp','hot','cold'].forEach(l => document.getElementById('cl-'+l).classList.remove('active'));\n document.getElementById({temperate:'cl-temp',hot:'cl-hot',cold:'cl-cold'}[c]).classList.add('active');\n calculate();\n }\n\n function calculate() {\n let base = state.weightKg * 35;\n if (state.age < 13) base *= 0.75;\n else if (state.age < 19) base *= 0.88;\n else if (state.age > 65) base *= 0.85;\n if (state.gender === 'female') base *= 0.88;\n base *= {low:1.0, moderate:1.15, high:1.35}[state.activity];\n base += {temperate:0, hot:400, cold:-100}[state.climate];\n base = Math.max(1000, base);\n\n const fromFood = base * 0.20;\n const fromDrinksNeeded = base - fromFood;\n\n let loggedMl = 0;\n BEVERAGES.forEach(b => { loggedMl += (state.beverages[b.id]||0) * b.serving * b.factor; });\n const remaining = Math.max(0, fromDrinksNeeded - loggedMl);\n\n const fmt = v => (v\/1000).toFixed(1)+' L';\n document.getElementById('result-liters').textContent = (base\/1000).toFixed(1);\n document.getElementById('result-cups').textContent = `\u2248 ${Math.round(fromDrinksNeeded\/250)} cups (250 ml each)`;\n document.getElementById('bd-total').textContent = fmt(base);\n document.getElementById('bd-food').textContent = fmt(fromFood);\n document.getElementById('bd-drinks').textContent = fmt(fromDrinksNeeded);\n document.getElementById('bd-logged').textContent = fmt(loggedMl);\n document.getElementById('bd-remaining').textContent = fmt(remaining);\n\n document.getElementById('badge-gender').textContent = state.gender==='male' ? '\ud83d\udc68 Male' : '\ud83d\udc69 Female';\n document.getElementById('badge-activity').textContent = {low:'\ud83d\udecb\ufe0f Sedentary',moderate:'\ud83d\udeb6 Moderate',high:'\ud83c\udfcb\ufe0f Active'}[state.activity];\n document.getElementById('badge-climate').textContent = {temperate:'\ud83c\udf24\ufe0f Temperate',hot:'\u2600\ufe0f Hot',cold:'\u2744\ufe0f Cold'}[state.climate];\n\n const pct = Math.min(100, Math.round((loggedMl\/fromDrinksNeeded)*100));\n document.getElementById('progress-fill').style.width = pct+'%';\n document.getElementById('prog-logged').textContent = Math.round(loggedMl)+' ml';\n document.getElementById('prog-goal').textContent = Math.round(fromDrinksNeeded)+' ml';\n document.getElementById('prog-pct').textContent = pct+'% of daily goal';\n document.getElementById('prog-remaining').textContent = Math.round(remaining)+' ml remaining';\n\n const rawMl = BEVERAGES.reduce((s,b)=>s+(state.beverages[b.id]||0)*b.serving,0);\n document.getElementById('bev-total-display').textContent =\n rawMl>=1000 ? (rawMl\/1000).toFixed(2)+' L' : Math.round(rawMl)+' ml';\n }\n\n buildBeverageGrid();\n calculate();\n<\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"fws_6a584a7ec2493\" data-column-margin=\"default\" data-midnight=\"dark\" class=\"wpb_row vc_row-fluid vc_row\" style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"false\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop\" style=\"\"><\/div><\/div><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-split-heading\" data-align=\"default\" data-m-align=\"inherit\" data-text-effect=\"default\" data-animation-type=\"line-reveal-by-space\" data-animation-delay=\"0\" data-animation-offset=\"\" data-m-rm-animation=\"\" data-stagger=\"\" data-custom-font-size=\"false\" ><h1 >\ub4c0\uc624\ub9c1\uace0\uc640 \ube44\uc2b7\ud558\uc9c0\ub9cc \uc6f0\ub2c8\uc2a4\uc6a9<\/h1><\/div>\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<div class=\"wpb_wrapper\">\n\t\t<p>Fito\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \uc6b4\ub3d9, \uc74c\uc2dd \ubc0f \ubb3c \ucd94\uc801 \uc571\uc785\ub2c8\ub2e4. <a href=\"https:\/\/www.duolingo.com\/\" rel=\"noopener\">\ub4c0\uc624\ub9c1\uace0<\/a> \uac74\uac15\uc744 \uc704\ud55c \uc81c\ud488\uc785\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uadc0\uc5ec\uc6b4 \uacf0 \uc778\ud615\uc774 \ud53c\ud2b8\ub2c8\uc2a4 \uc5ec\uc815\uc5d0 \ub3d9\ud589\ud569\ub2c8\ub2e4. <a href=\"https:\/\/getfitoapp.com\/ko\/tools\/fitness-streak-widgets-and-watch-faces\/\">\ud648 \ud654\uba74 \uc704\uc82f<\/a>\ub97c \ud1b5\ud574 \uc7a5\uae30\uc801\uc778 \uac74\uac15 \uc5ec\uc815\uc5d0 \ub3d9\uae30\ub97c \ubd80\uc5ec\ud558\uc138\uc694.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"nectar-cta text_hover_color_FFFFFF alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit\" data-color=\"accent-color\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"left\" data-text-color=\"custom\" ><h3 style=\"color: #FFFFFF;\"><span class=\"link_wrap\" style=\"padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;\"><a class=\"link_text\" role=\"button\" href=\"https:\/\/getfitoapp.com\/ko\/\"><span class=\"text\">\uc9c0\uae08 \uc0ac\uc6a9\ud574 \ubcf4\uc138\uc694<\/span><\/a><\/span><\/h3><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n <div class=\"inner\">\n <div class=\"hover-wrap\"> \n <div class=\"hover-wrap-inner\">\n <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"1136\" width=\"2177\" data-animation=\"none\" src=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets.png\" alt=\"A collection of 8 gamified best hydration app widgets featuring a cute red bear character in various poses with water bottles and glasses, displaying motivational slogans like "Stay Hydrated" and "Water Checkpoint" with progress rings.\" srcset=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets.png 2177w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-300x157.png 300w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-1024x534.png 1024w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-768x401.png 768w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-1536x802.png 1536w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-2048x1069.png 2048w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-18x9.png 18w\" sizes=\"auto, (max-width: 2177px) 100vw, 2177px\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"Daily Water Intake Calculator How Much Water Do You Need to Drink Each Day? About You Gender Affects baseline hydration needs Male Female Age Age 25 yrs Weight kg lbs...","protected":false},"author":1,"featured_media":6696,"parent":6528,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[39],"class_list":["post-6701","page","type-page","status-publish","has-post-thumbnail","tag-tools"],"_links":{"self":[{"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/pages\/6701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/comments?post=6701"}],"version-history":[{"count":0,"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/pages\/6701\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/pages\/6528"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/media\/6696"}],"wp:attachment":[{"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/media?parent=6701"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getfitoapp.com\/ko\/wp-json\/wp\/v2\/tags?post=6701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}