@charset "UTF-8";
/* ==========================================================================
   實用工具页公共样式 —— mortgage-calculator / product-comparator / school-search
   工具页是独立的紧凑版式（顶条 + 窄容器 + 米色底），不引 common.css，
   但沿用同一套设计变量，保证与主站视觉一致。
   引用顺序：tools.css → 页面专属 css
   ========================================================================== */

/* ===== 设计变量（与 common.css 同值；--maxw 工具页较窄，可由页面 css 覆盖） ===== */
:root{
  --ink:#16302B;--pine:#1F4A40;--paper:#FFFFFF;--mist:#EFF5F2;--line:#DCE7E2;
  --muted:#5C6B66;--spot:#FF7A1A;--spot-deep:#D95F00;--good:#1E8A5A;
  --serif:'Noto Serif TC',serif;--sans:'Noto Sans TC',-apple-system,sans-serif;--maxw:980px;
}

/* ===== reset / 基础 ===== */
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{font-family:var(--sans);color:var(--ink);background:var(--mist);line-height:1.7}
img,svg{display:block;max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--spot);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ===== 顶条面包屑 ===== */
.tophat{background:var(--pine);color:#fff;padding:10px 16px;font-size:13px}
.tophat a{color:#fff;text-decoration:none;font-weight:700}
.tophat a:hover{text-decoration:underline}

/* ===== 页头 ===== */
header.hd{padding:26px 0 6px}
h1{font-family:var(--serif);font-size:clamp(24px,4vw,34px);line-height:1.3}
h2{font-family:var(--serif);font-size:19px;margin:6px 0 10px}
.sub{color:var(--muted);font-size:14px;margin-top:6px}

/* ===== 卡片 / 提示块 ===== */
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;margin:16px 0}
.disclose{background:#FFF6EE;border:1px solid #FFD9B8;border-radius:11px;padding:12px 14px;font-size:13px;color:#7A4A1F;margin:16px 0}
.notice{background:#EEF4FF;border:1px solid #C9D8F5;border-radius:11px;padding:12px 14px;font-size:13px;color:#2A4A7A;margin:14px 0}
.hint{font-size:12px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:30px 0}

/* ===== 表单控件 ===== */
label{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
label small{color:var(--muted);font-weight:400}
input,select{padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:14px;font-family:var(--sans);width:100%}
input:focus,select:focus{outline:none;border-color:var(--pine)}

/* ===== 按钮 ===== */
.btn{background:var(--spot);color:#fff;border:none;border-radius:9px;padding:10px 18px;font-size:14px;font-weight:800;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--spot-deep)}

/* ===== 表格容器 ===== */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== 页脚 ===== */
footer{padding:26px 0;color:var(--muted);font-size:12px;text-align:center}
footer .fnav{margin-bottom:8px}
footer .fnav a{color:var(--pine);font-weight:700;text-decoration:none;margin:0 6px}
footer .fnav a:hover{text-decoration:underline}