/* Bodilab 無料ツール共通CSS（blog/article.css を基盤に、フォーム/結果表示を追加） */
.tool{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin:22px 0}
.tool .row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.tool .f{flex:1;min-width:130px;display:flex;flex-direction:column;gap:6px}
.tool label{font-size:13px;font-weight:700;color:var(--body)}
.tool input[type=number],.tool select{width:100%;box-sizing:border-box;font-size:17px;font-weight:700;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:11px;padding:12px 13px;-webkit-appearance:none;appearance:none}
.tool input:focus,.tool select:focus{outline:none;border-color:var(--accent)}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;font-size:13.5px;font-weight:800;color:var(--soft);padding:8px 16px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
.calcBtn{width:100%;border:0;background:var(--ink);color:#fff;font-size:16px;font-weight:800;padding:15px;border-radius:13px;cursor:pointer;margin-top:4px}
.calcBtn:active{opacity:.9}
.result{margin-top:18px;padding:20px;border-radius:14px;background:var(--tint);border:1px solid var(--line);text-align:center;display:none}
.result.show{display:block}
.result .big{font-size:46px;font-weight:900;letter-spacing:-1.5px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.result .cat{display:inline-block;margin-top:10px;font-size:14px;font-weight:800;padding:5px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--body)}
.result .sub{font-size:13.5px;color:var(--soft);margin-top:10px;line-height:1.7;font-weight:500}
.hint{font-size:12.5px;color:var(--soft);font-weight:500}
/* ツールハブのカードグリッド */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:22px 0}
.tcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;transition:transform .12s}
.tcard:hover{transform:translateY(-2px)}
.tcard h3{margin:0 0 6px;font-size:16px;color:var(--ink)}
.tcard p{margin:0;font-size:13px;color:var(--body);line-height:1.6}
.tcard .em{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--accent)}
/* スキャナ */
.drop{display:block;box-sizing:border-box;border:2px dashed var(--line);border-radius:16px;padding:30px 20px;text-align:center;background:var(--tint);cursor:pointer}
.drop *{pointer-events:none}
.drop.busy{opacity:.6;pointer-events:none}
.prev{max-width:220px;width:100%;border-radius:12px;margin:0 auto 12px;display:block}
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:sp 1s linear infinite;margin:10px auto}
@keyframes sp{to{transform:rotate(360deg)}}