BMI・適正体重シミュレーター

<!--
================================================
WordPress カスタムHTMLブロック用コード
BMI・適正体重シミュレーター（通常版）
================================================
【機能】身長・体重からBMI値と適正体重を自動計算
【セキュリティ】ブラウザ内完結／通信ゼロ
【利用規約】無償・無保証、健康管理は自己責任
【外部依存】Chart.js 4.4.0 (CDN経由・遅延読み込み)
【計算式】BMI = 体重(kg) ÷ (身長(m) × 身長(m))
【基準】WHO（世界保健機関）基準
================================================
-->

<!-- MSIM:STYLE-START -->
<style>
.bmi-simulator{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;max-width:800px;margin:0 auto;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.bmi-simulator *{box-sizing:border-box}
.bmi-simulator .title{font-size:24px;font-weight:700;text-align:center;margin:0 0 10px;color:#333}
.bmi-simulator .subtitle{font-size:14px;color:#666;text-align:center;margin:0 0 30px;line-height:1.6}
.bmi-simulator .input-section{margin-bottom:30px}
.bmi-simulator .input-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bmi-simulator .form-group{display:flex;flex-direction:column}
.bmi-simulator .form-group label{font-size:14px;font-weight:600;margin-bottom:8px;color:#333}
.bmi-simulator .form-group input{padding:12px;font-size:16px;border:2px solid #e0e0e0;border-radius:8px;transition:border-color .3s}
.bmi-simulator .form-group input:focus{outline:0;border-color:#4a90e2}
.bmi-simulator .result-section{margin-bottom:30px;padding:25px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;color:#fff}
.bmi-simulator .result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.bmi-simulator .result-item{text-align:center}
.bmi-simulator .result-label{font-size:12px;opacity:.9;margin-bottom:5px}
.bmi-simulator .result-value{font-size:28px;font-weight:700}
.bmi-simulator .bmi-status{text-align:center;font-size:18px;font-weight:600;margin-top:15px;padding:10px;background:rgba(255,255,255,.2);border-radius:8px}
.bmi-simulator .chart-section{margin-bottom:30px}
.bmi-simulator .chart-container{position:relative;height:400px;background:#f8f9fa;border-radius:12px;padding:20px}
.bmi-simulator .info-section{margin-bottom:30px;padding:20px;background:#f8f9fa;border-radius:8px}
.bmi-simulator .info-title{font-size:14px;font-weight:600;margin:0 0 15px;color:#333;text-align:center}
.bmi-simulator .info-table{width:100%;border-collapse:collapse;font-size:13px}
.bmi-simulator .info-table th,.bmi-simulator .info-table td{padding:12px;text-align:left;border-bottom:1px solid #e0e0e0}
.bmi-simulator .info-table th{background:#fff;font-weight:600;color:#333}
.bmi-simulator .info-table tr:last-child td{border-bottom:0}
.bmi-simulator .info-note{font-size:12px;color:#666;margin:15px 0 0;text-align:center;line-height:1.6}
.bmi-simulator .disclaimer-section{padding:20px;background:#fff3cd;border-left:4px solid #ffc107;border-radius:8px;margin-bottom:20px}
.bmi-simulator .disclaimer-title{font-size:14px;font-weight:600;color:#856404;margin:0 0 10px}
.bmi-simulator .disclaimer-list{margin:0;padding-left:20px;font-size:13px;color:#856404;line-height:1.8}
.bmi-simulator .disclaimer-list li{margin-bottom:5px}
@media (max-width:768px){
.bmi-simulator{padding:15px}
.bmi-simulator .title{font-size:20px}
.bmi-simulator .input-grid{grid-template-columns:1fr}
.bmi-simulator .result-grid{grid-template-columns:1fr;gap:15px}
.bmi-simulator .result-value{font-size:24px}
.bmi-simulator .chart-container{height:350px;padding:15px}
}
</style>
<!-- MSIM:STYLE-END -->

<!-- MSIM:HTML-START -->
<div class="bmi-simulator" data-tool="bmi-calculator" data-version="1.0.0">
<p class="title">BMI・適正体重シミュレーター</p>
<p class="subtitle">身長・体重からBMI値と適正体重を自動計算します。<br>WHO（世界保健機関）基準に基づいた判定結果を表示します。</p>
<div class="input-section">
<div class="input-grid">
<div class="form-group">
<label for="">身長（cm）</label>
<input type="number" data-ms-height value="170" min="100" max="250" step="0.1">
</div>
<div class="form-group">
<label for="">体重（kg）</label>
<input type="number" data-ms-weight value="65" min="20" max="200" step="0.1">
</div>
</div>
</div>
<div class="result-section">
<div class="result-grid">
<div class="result-item">
<div class="result-label">現在のBMI</div>
<div class="result-value" data-ms-bmi>22.5</div>
</div>
<div class="result-item">
<div class="result-label">適正体重（BMI22）</div>
<div class="result-value" data-ms-ideal>63.6kg</div>
</div>
<div class="result-item">
<div class="result-label">適正体重との差</div>
<div class="result-value" data-ms-diff>+1.4kg</div>
</div>
</div>
<div class="bmi-status" data-ms-status>普通体重</div>
</div>
<div class="chart-section">
<div class="chart-container">
<canvas data-ms-canvas></canvas>
</div>
</div>
<div class="info-section">
<p class="info-title">📊 BMI判定基準（WHO基準）</p>
<table class="info-table">
<thead>
<tr>
<th>BMI値</th>
<th>判定</th>
<th>健康リスク</th>
</tr>
</thead>
<tbody>
<tr>
<td>18.5未満</td>
<td>低体重（痩せ型）</td>
<td>栄養不足・免疫力低下のリスク</td>
</tr>
<tr>
<td>18.5〜25未満</td>
<td>普通体重</td>
<td>最も健康的な範囲</td>
</tr>
<tr>
<td>25〜30未満</td>
<td>肥満（1度）</td>
<td>生活習慣病のリスク増加</td>
</tr>
<tr>
<td>30〜35未満</td>
<td>肥満（2度）</td>
<td>高血圧・糖尿病のリスク高</td>
</tr>
<tr>
<td>35〜40未満</td>
<td>肥満（3度）</td>
<td>重度の健康リスク</td>
</tr>
<tr>
<td>40以上</td>
<td>肥満（4度）</td>
<td>極めて高い健康リスク</td>
</tr>
</tbody>
</table>
<p class="info-note">※ BMI=22が最も病気になりにくい体重とされています（日本肥満学会）。<br>※ 筋肉量の多い人や高齢者は、BMI値だけでは正確な判定ができない場合があります。</p>
</div>
<div class="disclaimer-section">
<p class="disclaimer-title">⚠️ ご利用上の注意</p>
<ul class="disclaimer-list">
<li>このツールは健康管理の参考情報として提供されます</li>
<li>BMI値は目安であり、体脂肪率や筋肉量は考慮されていません</li>
<li>医学的な診断や治療の代替とはなりません</li>
<li>健康上の問題がある場合は、医師にご相談ください</li>
<li>本ツールの使用により生じた損害について、作者は一切の責任を負いません</li>
</ul>
</div>
<div style="text-align:right;margin-top:30px;color:#999;font-size:12px">
Powered by <a href="https://minna-calc.com/" target="_blank" rel="noopener" style="color:#4a90e2;text-decoration:none">みんなのシミュレーター</a>
</div>
</div>
<!-- MSIM:HTML-END -->

<!-- MSIM:JS-START -->
<script>
(()=>{
"use strict";
const TOOL="bmi-calculator";
const ROOT_SELECTOR=`.bmi-simulator[data-tool="${TOOL}"]`;
const CHART_URL="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js";
const fmt=new Intl.NumberFormat("ja-JP",{minimumFractionDigits:1,maximumFractionDigits:1});
const charts=new WeakMap();
let chartLoader=null;
function ensureChartJs(){
if(window.Chart)return Promise.resolve(window.Chart);
if(chartLoader)return chartLoader;
chartLoader=new Promise((resolve,reject)=>{
const existing=document.querySelector(`script[src="${CHART_URL}"]`);
const script=existing||document.createElement("script");
script.src=CHART_URL;
script.async=true;
script.dataset.msimChart="true";
script.onload=()=>resolve(window.Chart);
script.onerror=()=>reject(new Error("Chart.js load failed"));
if(!existing)document.head.appendChild(script);
});
return chartLoader;
}
const registerInit=handler=>{
let pending=false;
const schedule=()=>{
if(pending)return;
pending=true;
requestAnimationFrame(()=>{
pending=false;
handler();
});
};
queueMicrotask(schedule);
if(document.readyState!=="loading")schedule();
document.addEventListener("DOMContentLoaded",schedule,{passive:true});
window.addEventListener("load",schedule,{passive:true});
document.addEventListener("readystatechange",()=>{
if(document.readyState==="interactive"||document.readyState==="complete"){
schedule();
}
},{passive:true});
new MutationObserver(schedule).observe(document.body,{childList:true,subtree:true});
};
function boot(root){
if(root.dataset.msimInitialized==="true")return;
root.dataset.msimInitialized="true";
const q=sel=>root.querySelector(sel);
const els={
inputs:root.querySelectorAll("input"),
heightInput:q('[data-ms-height]'),
weightInput:q('[data-ms-weight]'),
bmi:q('[data-ms-bmi]'),
ideal:q('[data-ms-ideal]'),
diff:q('[data-ms-diff]'),
status:q('[data-ms-status]'),
canvas:q('[data-ms-canvas]')
};
function getBMIStatus(bmi){
if(bmi<18.5)return{text:"低体重（痩せ型）",color:"#3498db"};
if(bmi<25)return{text:"普通体重",color:"#2ecc71"};
if(bmi<30)return{text:"肥満（1度）",color:"#f39c12"};
if(bmi<35)return{text:"肥満（2度）",color:"#e67e22"};
if(bmi<40)return{text:"肥満（3度）",color:"#e74c3c"};
return{text:"肥満（4度）",color:"#c0392b"};
}
function calculate(){
const height=parseFloat(els.heightInput.value)||170;
const weight=parseFloat(els.weightInput.value)||65;
const heightM=height/100;
const bmi=weight/(heightM*heightM);
const idealWeight=22*heightM*heightM;
const diff=weight-idealWeight;
const status=getBMIStatus(bmi);
const bmiRanges=[
{label:"低体重",min:15,max:18.5,color:"#3498db"},
{label:"普通体重",min:18.5,max:25,color:"#2ecc71"},
{label:"肥満1度",min:25,max:30,color:"#f39c12"},
{label:"肥満2度",min:30,max:35,color:"#e67e22"},
{label:"肥満3度",min:35,max:40,color:"#e74c3c"},
{label:"肥満4度",min:40,max:45,color:"#c0392b"}
];
const chartData={
labels:bmiRanges.map(r=>r.label),
datasets:[
{
label:"BMI範囲",
data:bmiRanges.map(r=>r.max-r.min),
backgroundColor:bmiRanges.map(r=>r.color+"33"),
borderColor:bmiRanges.map(r=>r.color),
borderWidth:2
},
{
label:"あなたのBMI",
data:bmiRanges.map((r,i)=>{
if(bmi>=r.min&&bmi<r.max)return bmi-r.min;
return null;
}),
backgroundColor:"#9b59b6",
borderColor:"#8e44ad",
borderWidth:3,
type:"scatter",
pointRadius:8,
pointHoverRadius:10
}
]
};
return{
bmi:bmi,
idealWeight:idealWeight,
diff:diff,
status:status,
chartData:chartData,
bmiRanges:bmiRanges
};
}
function updateDom(result){
els.bmi.textContent=fmt.format(result.bmi);
els.ideal.textContent=fmt.format(result.idealWeight)+"kg";
const diffText=result.diff>=0?"+"+fmt.format(result.diff):fmt.format(result.diff);
els.diff.textContent=diffText+"kg";
els.status.textContent=result.status.text;
els.status.style.background=result.status.color+"33";
}
async function render(){
const result=calculate();
updateDom(result);
if(!els.canvas)return;
try{
const ChartLib=await ensureChartJs();
const previous=charts.get(root);
if(previous)previous.destroy();
const chart=new ChartLib(els.canvas,{
type:"bar",
data:{
labels:result.bmiRanges.map(r=>r.label),
datasets:[{
label:"BMI範囲の下限値",
data:result.bmiRanges.map(r=>r.min),
backgroundColor:result.bmiRanges.map(r=>r.color+"33"),
borderColor:result.bmiRanges.map(r=>r.color),
borderWidth:2,
stack:"stack0"
},{
label:"あなたのBMI",
data:result.bmiRanges.map(r=>{
if(result.bmi>=r.min&&result.bmi<r.max){
return result.bmi-r.min;
}
return 0;
}),
backgroundColor:"#9b59b6",
borderColor:"#8e44ad",
borderWidth:3,
stack:"stack1",
barThickness:40
}]
},
options:{
responsive:true,
maintainAspectRatio:false,
interaction:{mode:"index",intersect:false},
plugins:{
tooltip:{
mode:"index",
intersect:false,
callbacks:{
label:t=>{
if(t.datasetIndex===0)return`${t.dataset.label}: ${fmt.format(t.parsed.y)}`;
if(t.parsed.y===0)return null;
return`${t.dataset.label}: ${fmt.format(result.bmi)}`;
}
}
},
legend:{position:"bottom"},
title:{
display:true,
text:"あなたのBMI位置",
font:{size:16,weight:"bold"}
}
},
scales:{
x:{
stacked:false,
grid:{display:false}
},
y:{
stacked:false,
beginAtZero:true,
max:45,
title:{
display:true,
text:"BMI値"
},
ticks:{
callback:v=>fmt.format(v)
}
}
}
}
});
charts.set(root,chart);
}catch(error){
console.error("Chart.js initialization failed:",error);
}
}
els.inputs.forEach(el=>el.addEventListener("input",render,{passive:true}));
render();
}
function init(){
document.querySelectorAll(ROOT_SELECTOR).forEach(boot);
}
registerInit(init);
})();
</script>
<!-- MSIM:JS-END -->

<!--
================================================
WordPress カスタムHTMLブロック用コード
BMI・適正体重シミュレーター（簡易版）
================================================
【機能】身長・体重からBMI値と適正体重を自動計算
【セキュリティ】ブラウザ内完結／通信ゼロ／外部CDN依存なし
【利用規約】無償・無保証、健康管理は自己責任
【特徴】Chart.js不使用・完全スタンドアロン・アクセシビリティ対応
【外部依存】なし
【計算式】BMI = 体重(kg) ÷ 身長(m)²
【適正体重】身長(m)² × 22
【判定基準】WHO（世界保健機関）基準
================================================
-->

<!-- MSIM:STYLE-START -->
<style>
.bmi-calculator{max-width:800px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#333;line-height:1.6}
.bmi-calculator *{box-sizing:border-box}
.bmi-calculator .title{font-size:24px;font-weight:700;text-align:center;margin:0 0 10px;color:#333}
.bmi-calculator .subtitle{font-size:14px;color:#666;text-align:center;margin:0 0 30px}
.bmi-calculator .input-section{background:#f8f9fa;padding:25px;border-radius:12px;margin-bottom:30px}
.bmi-calculator .input-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bmi-calculator .form-group{display:flex;flex-direction:column}
.bmi-calculator .form-group label{font-size:14px;font-weight:600;margin-bottom:8px;color:#495057}
.bmi-calculator .form-group input{padding:12px;font-size:16px;border:2px solid #dee2e6;border-radius:8px;transition:border-color .3s}
.bmi-calculator .form-group input:focus{outline:none;border-color:#4a90e2}
.bmi-calculator .result-section{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.1);margin-bottom:30px}
.bmi-calculator .result-title{font-size:16px;font-weight:600;margin:0 0 20px;color:#333;text-align:center}
.bmi-calculator .result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}
.bmi-calculator .result-item{text-align:center;padding:15px;background:#f8f9fa;border-radius:8px}
.bmi-calculator .result-item .label{font-size:13px;color:#666;margin-bottom:5px}
.bmi-calculator .result-item .value{font-size:24px;font-weight:700;color:#4a90e2}
.bmi-calculator .result-status{text-align:center;padding:20px;border-radius:8px;font-size:18px;font-weight:600;margin-bottom:20px}
.bmi-calculator .result-status.underweight{background:#e3f2fd;color:#1976d2}
.bmi-calculator .result-status.normal{background:#e8f5e9;color:#388e3c}
.bmi-calculator .result-status.overweight{background:#fff3e0;color:#f57c00}
.bmi-calculator .result-status.obese{background:#ffebee;color:#d32f2f}
.bmi-calculator .info-section{background:#f8f9fa;padding:20px;border-radius:8px;margin-bottom:30px}
.bmi-calculator .info-section .info-title{font-size:14px;font-weight:600;margin:0 0 15px;color:#333;text-align:center}
.bmi-calculator .info-section table{width:100%;border-collapse:collapse;background:#fff}
.bmi-calculator .info-section table th,.bmi-calculator .info-section table td{padding:12px;text-align:left;border-bottom:1px solid #dee2e6;font-size:14px}
.bmi-calculator .info-section table th{background:#4a90e2;color:#fff;font-weight:600}
.bmi-calculator .info-section table tr:last-child td{border-bottom:none}
.bmi-calculator .info-section .info-note{font-size:12px;color:#666;margin:15px 0 0;text-align:center;line-height:1.8}
.bmi-calculator .disclaimer-section{background:#fff3cd;border:1px solid #ffc107;padding:15px;border-radius:8px;margin-bottom:20px}
.bmi-calculator .disclaimer-section p{margin:0;font-size:13px;color:#856404;line-height:1.8}
.bmi-calculator .branding{text-align:right;margin-top:30px;color:#999;font-size:12px}
.bmi-calculator .branding a{color:#4a90e2;text-decoration:none}
@media (max-width:768px){
.bmi-calculator{padding:15px}
.bmi-calculator .title{font-size:20px}
.bmi-calculator .input-grid,.bmi-calculator .result-grid{grid-template-columns:1fr;gap:15px}
.bmi-calculator .input-section,.bmi-calculator .result-section,.bmi-calculator .info-section{padding:20px}
.bmi-calculator .result-item .value{font-size:20px}
.bmi-calculator .result-status{font-size:16px;padding:15px}
}
</style>
<!-- MSIM:STYLE-END -->

<!-- MSIM:HTML-START -->
<div class="bmi-calculator" data-tool="bmi-calculator" data-version="1.0.0">
<p class="title">BMI・適正体重シミュレーター</p>
<p class="subtitle">身長・体重からBMI値と適正体重を自動計算</p>
<div class="input-section">
<div class="input-grid">
<div class="form-group">
<label for="height-input-bmi">身長（cm）</label>
<input type="number" id="height-input-bmi" data-ms-height step="0.1" min="100" max="250" value="170" aria-label="身長">
</div>
<div class="form-group">
<label for="weight-input-bmi">体重（kg）</label>
<input type="number" id="weight-input-bmi" data-ms-weight step="0.1" min="20" max="300" value="65" aria-label="体重">
</div>
</div>
</div>
<div class="result-section">
<p class="result-title">計算結果</p>
<div class="result-grid">
<div class="result-item">
<div class="label">あなたのBMI</div>
<div class="value" data-ms-bmi-value>22.5</div>
</div>
<div class="result-item">
<div class="label">適正体重</div>
<div class="value" data-ms-ideal-weight>63.6kg</div>
</div>
</div>
<div class="result-status normal" data-ms-status>普通体重</div>
<div class="result-item">
<div class="label">適正体重との差</div>
<div class="value" data-ms-difference>+1.4kg</div>
</div>
</div>
<div class="info-section">
<p class="info-title">📊 BMI判定基準（WHO基準）</p>
<table>
<thead>
<tr>
<th>BMI値</th>
<th>判定</th>
<th>健康リスク</th>
</tr>
</thead>
<tbody data-ms-classification-table>
<tr>
<td>18.5未満</td>
<td>低体重（やせ）</td>
<td>栄養不足のリスク</td>
</tr>
<tr>
<td>18.5〜24.9</td>
<td>普通体重</td>
<td>標準的な健康状態</td>
</tr>
<tr>
<td>25.0〜29.9</td>
<td>過体重（肥満1度）</td>
<td>生活習慣病のリスク増加</td>
</tr>
<tr>
<td>30.0以上</td>
<td>肥満（肥満2度以上）</td>
<td>重大な健康リスク</td>
</tr>
</tbody>
</table>
<p class="info-note">※ BMI（Body Mass Index）は世界保健機関（WHO）が定める国際的な肥満度判定基準です。<br>※ 適正体重はBMI=22（最も病気になりにくい値）として計算しています。<br>※ 筋肉量が多い方や高齢者では判定が適切でない場合があります。</p>
</div>
<div class="disclaimer-section">
<p>⚠️ このシミュレーターは健康管理の参考情報を提供するものです。医学的診断や治療の代わりにはなりません。健康に関する判断は必ず医師にご相談ください。</p>
</div>
<div class="branding">
Powered by <a href="https://minna-calc.com/" target="_blank" rel="noopener">みんなのシミュレーター</a>
</div>
</div>
<!-- MSIM:HTML-END -->

<!-- MSIM:JS-START -->
<script>
(()=>{
"use strict";

const TOOL="bmi-calculator";
const ROOT_SELECTOR=`.bmi-calculator[data-tool="${TOOL}"]`;

const fmt=new Intl.NumberFormat("ja-JP",{minimumFractionDigits:1,maximumFractionDigits:1});

/**
 * registerInit: WordPress対応の初期化ヘルパー
 * - 即時キュー + readyState監視
 * - 複数イベントで再試行
 * - MutationObserver でプレビュー対応
 */
const registerInit=handler=>{
let pending=false;
const schedule=()=>{
if(pending)return;
pending=true;
requestAnimationFrame(()=>{
pending=false;
handler();
});
};

queueMicrotask(schedule);
if(document.readyState!=="loading")schedule();
document.addEventListener("DOMContentLoaded",schedule,{passive:true});
window.addEventListener("load",schedule,{passive:true});
document.addEventListener("readystatechange",()=>{
if(document.readyState==="interactive"){
schedule();
}
if(document.readyState==="complete"){
schedule();
}
},{passive:true});
new MutationObserver(schedule).observe(document.body,{childList:true,subtree:true});
};

function boot(root){
if(root.dataset.msimInitialized==="true")return;
root.dataset.msimInitialized="true";

const q=sel=>root.querySelector(sel);
const els={
inputs:root.querySelectorAll("input"),
height:q('[data-ms-height]'),
weight:q('[data-ms-weight]'),
bmiValue:q('[data-ms-bmi-value]'),
idealWeight:q('[data-ms-ideal-weight]'),
status:q('[data-ms-status]'),
difference:q('[data-ms-difference]')
};

/**
 * BMI計算ロジック
 * BMI = 体重(kg) ÷ 身長(m)²
 * 適正体重 = 身長(m)² × 22
 */
function calculate(){
const heightCm=parseFloat(els.height.value);
const weightKg=parseFloat(els.weight.value);

if(!heightCm){
return null;
}
if(heightCm<100){
return null;
}
if(heightCm>250){
return null;
}
if(!weightKg){
return null;
}
if(weightKg<20){
return null;
}
if(weightKg>300){
return null;
}

const heightM=heightCm/100;
const bmi=weightKg/(heightM*heightM);
const idealWeight=heightM*heightM*22;
const difference=weightKg-idealWeight;

let classification="";
let statusClass="";
if(bmi<18.5){
classification="低体重（やせ）";
statusClass="underweight";
}
if(bmi>=18.5){
if(bmi<25){
classification="普通体重";
statusClass="normal";
}
}
if(bmi>=25){
if(bmi<30){
classification="過体重（肥満1度）";
statusClass="overweight";
}
}
if(bmi>=30){
classification="肥満（肥満2度以上）";
statusClass="obese";
}

return{
bmi:bmi,
idealWeight:idealWeight,
difference:difference,
classification:classification,
statusClass:statusClass
};
}

function render(){
const result=calculate();

if(!result){
els.bmiValue.textContent="--";
els.idealWeight.textContent="--";
els.status.textContent="入力値を確認してください";
els.status.className="result-status";
els.difference.textContent="--";
return;
}

els.bmiValue.textContent=fmt.format(result.bmi);
els.idealWeight.textContent=fmt.format(result.idealWeight)+"kg";
els.status.textContent=result.classification;
els.status.className=`result-status ${result.statusClass}`;

const diffText=result.difference>=0?"+"+fmt.format(result.difference)+"kg":fmt.format(result.difference)+"kg";
els.difference.textContent=diffText;
}

els.inputs.forEach(el=>el.addEventListener("input",render,{passive:true}));
render();
}

function init(){
document.querySelectorAll(ROOT_SELECTOR).forEach(boot);
}

registerInit(init);
})();
</script>
<!-- MSIM:JS-END -->