/* 林口專業房仲 — B 日系溫潤工藝風 共用底稿（靜態頁用：calculator / blog / 404 / game）by 小瑞 2026-07-07
   首頁 index.html 自帶完整版；本檔是抽出的 tokens + 常用元件，各頁再疊自己的版面 CSS。
   字體記得載：Noto Sans TC(400/500/700/900) + Noto Serif TC(700/900) + Klee One(400/600) + Inter(500/700/800) */
:root{
  --mist:#C5DBC3; --cream-green:#EAF2E8; --peach:#F5D5D0; --cream-yellow:#FCE8A8;
  --slate:#334155; --page:#FAF7F2; --card:#FFFFFF; --ink:#1F3A2A; --ink-soft:#6B7280;
  --green:#3DAA47; --green-deep:#2f8a39; --danger:#E84F4F; --line:#dfe7dd; --butter:#FCE8A8;
  --serif:"Noto Serif TC",serif; --hand:"Klee One","Noto Sans TC",cursive;
}
*{box-sizing:border-box;}
body{
  margin:0;font-family:"Noto Sans TC","Microsoft JhengHei",-apple-system,sans-serif;
  background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.8;
}
::selection{background:var(--cream-yellow);color:var(--ink);}
a{color:inherit;}
img{max-width:100%;height:auto;display:block;}

/* 版心 */
.bwrap{max-width:1080px;margin:0 auto;padding:0 22px;}

/* 章節眉標系統：01 ＋ 眉標 ＋ 細線 */
.sec-mark{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.sec-num{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cream-yellow);color:var(--ink);font-family:Inter,sans-serif;
  font-weight:800;font-size:13px;padding:4px 12px;border-radius:999px;letter-spacing:.08em;
}
.sec-eyebrow{font-size:12.5px;font-weight:700;color:var(--green-deep);letter-spacing:.3em;}
.sec-rule{flex:1;height:1.5px;background:var(--mist);}
.sec-title{font-family:var(--serif);font-weight:900;font-size:34px;letter-spacing:.08em;line-height:1.25;margin:0 0 6px;}
.sec-sub{font-size:14.5px;color:var(--ink-soft);margin:0 0 26px;}
@media(max-width:680px){.sec-title{font-size:26px;}}

/* 按鈕 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:14px;font-size:15.5px;font-weight:700;
  text-decoration:none;border:none;cursor:pointer;font-family:inherit;
  transition:transform .12s,box-shadow .15s,background .15s;
}
.btn:active{transform:scale(.97);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(61,170,71,.28);}
.btn-green:hover{background:var(--green-deep);box-shadow:0 9px 20px rgba(61,170,71,.34);}
.btn-ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--mist);box-shadow:0 4px 12px rgba(31,58,42,.06);}
.btn-ghost:hover{border-color:var(--green);color:var(--green-deep);}
.btn-yellow{background:var(--cream-yellow);color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);}
.btn-yellow:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}

/* 白卡 */
.bcard{
  background:var(--card);border:1.5px solid var(--mist);border-radius:24px;
  padding:26px 24px;box-shadow:0 10px 26px rgba(31,58,42,.07);
}

/* 膠囊標籤 */
.pill{display:inline-block;font-size:12.5px;font-weight:700;padding:4px 14px;border-radius:999px;letter-spacing:.1em;}
.pill-yellow{background:var(--cream-yellow);color:var(--ink);}
.pill-green{background:var(--green);color:#fff;}
.pill-peach{background:var(--peach);color:var(--ink);}
.pill-cream{background:var(--cream-green);color:var(--green-deep);}

/* 手寫感小字（眉標/簽名/圖說）*/
.hand{font-family:var(--hand);letter-spacing:.16em;color:var(--ink-soft);}

/* 手繪 SVG 細線 icon 通用尺寸 */
.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* 波浪分隔（inline svg 用 .wave 包）*/
.wave{display:block;width:100%;height:56px;margin-top:-1px;}

/* 深灰藍頁尾（與首頁同款、名字醒目）*/
.bfoot{background:var(--slate);color:var(--mist);text-align:center;padding:40px 22px 34px;margin-top:64px;}
.bfoot .names{font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.14em;color:#fff;margin:0;}
.bfoot .names .amp{color:var(--green);margin:0 6px;font-size:15px;}
.bfoot .tag{font-size:12.5px;letter-spacing:.18em;margin:6px 0 0;}
.bfoot .links{margin-top:14px;font-size:12px;}
.bfoot .links a{color:var(--cream-green);text-decoration:underline;text-underline-offset:4px;}
.bfoot .fine{font-size:11px;opacity:.7;line-height:1.7;margin-top:12px;}