/* ============================================================
   成緒官網 v2 母片（2026-07 大改版）
   共用：色彩 tokens（深淺雙主題）＋ header ＋ footer ＋ 按鈕
   子頁引用順序：<link v2.css> → 頁面自己的 <style>
   改這支 ＝ 全站 header/footer/配色一起變
   ============================================================ */

:root{
  /* —— 共用 tokens（文章頁沿用舊變數名，換皮不動骨）—— */
  --bg:#F6F2E9;        /* 暖紙底 */
  --bg2:#EDE7D8;
  --panel:#FBF8F1;
  --line:#E4DDCC;
  --line2:#D6CDB7;
  --ink:#211E18;
  --mut:#4A453B;
  --dim:#6E695E;
  --y:#FFD22D;         /* 能量黃 CIS */
  --o:#F58250;         /* 活力橙 CIS */
  --a:#E56A38;
  --a-b:#FBEADF;
  --call-bg:#FBF4E3;   /* callout */
  --call-line:#EAD9A8;
  --espresso:#221E17;
  --on-dark:#EEE7D7;
  --on-dark-mut:#B3A98F;
  --shadow:0 1px 0 rgba(33,30,24,.03), 0 18px 40px -28px rgba(33,30,24,.28);
  --chip:#FBF8F1;      /* logo 亮色晶片（兩主題固定亮，保商標辨識） */
  --chip-line:#E4DDCC;
  --v2ease:cubic-bezier(.2,.7,.2,1);
  --v2sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#171310; --bg2:#211B14; --panel:#201B15; --line:#332C22; --line2:#3E362A;
    --ink:#EDE6D6; --mut:#C7BFAC; --dim:#9C927C;
    --a:#F58250; --a-b:#3A2A1E; --call-bg:#26200F; --call-line:#4A3E1E;
    --espresso:#0F0C09;
    --shadow:0 1px 0 rgba(0,0,0,.2), 0 22px 44px -30px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#171310; --bg2:#211B14; --panel:#201B15; --line:#332C22; --line2:#3E362A;
  --ink:#EDE6D6; --mut:#C7BFAC; --dim:#9C927C;
  --a:#F58250; --a-b:#3A2A1E; --call-bg:#26200F; --call-line:#4A3E1E;
  --espresso:#0F0C09;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 22px 44px -30px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --bg:#F6F2E9; --bg2:#EDE7D8; --panel:#FBF8F1; --line:#E4DDCC; --line2:#D6CDB7;
  --ink:#211E18; --mut:#4A453B; --dim:#6E695E;
  --a:#E56A38; --a-b:#FBEADF; --call-bg:#FBF4E3; --call-line:#EAD9A8;
  --espresso:#221E17;
  --shadow:0 1px 0 rgba(33,30,24,.03), 0 18px 40px -28px rgba(33,30,24,.28);
}

/* ---------- v2 header ---------- */
.v2top{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s;
  font-family:var(--v2sans);
}
.v2top.scrolled{border-bottom:1px solid var(--line)}
.v2bar{max-width:1140px;margin:0 auto;padding:0 26px;display:flex;align-items:center;gap:22px;height:70px}
.v2brand{display:flex;align-items:center;margin-right:auto;text-decoration:none}
.v2brand img{height:38px;width:auto;display:block}
@media (prefers-color-scheme:dark){.v2brand img{filter:invert(.88)}}
:root[data-theme="dark"] .v2brand img{filter:invert(.88)}
:root[data-theme="light"] .v2brand img{filter:none}
.v2nav{display:flex;gap:26px;align-items:center}
.v2nav a{
  font-size:14.5px;color:var(--mut);font-weight:600;position:relative;padding:4px 0;
  text-decoration:none;transition:color .2s;
}
.v2nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--y);transition:right .28s var(--v2ease)}
.v2nav a:hover{color:var(--ink)}
.v2nav a:hover::after{right:0}
.v2nav a.cur{color:var(--a)}
.v2nav a.cur::after{right:0}
.v2cta{
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;
  border-radius:10px;padding:9px 16px;border:1px solid transparent;
  background:var(--o);color:#fff;box-shadow:0 10px 22px -12px var(--o);
  transition:transform .18s var(--v2ease),box-shadow .25s var(--v2ease),background .2s;
}
.v2cta:hover{background:var(--a);transform:translateY(-1px)}
.v2cta:active{transform:scale(.965)}
.v2cta:focus-visible{outline:2.5px solid var(--o);outline-offset:2px}
.v2tog{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:transform .18s var(--v2ease),border-color .2s;
}
.v2tog:active{transform:scale(.9)}
.v2tog:hover{border-color:var(--ink)}
@media(max-width:860px){.v2nav,.v2tog{display:none}}

/* ---------- v2 footer ---------- */
.v2foot{background:var(--bg);border-top:1px solid var(--line);padding:52px 0 40px;font-family:var(--v2sans);color:var(--ink)}
.v2foot-in{max-width:1140px;margin:0 auto;padding:0 26px}
.v2foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.v2foot .fbrand{display:inline-block}
.v2foot .fbrand img{height:90px;width:auto;display:block}
@media (prefers-color-scheme:dark){.v2foot .fbrand{background:#FBF8F1;padding:12px 16px;border-radius:14px}}
:root[data-theme="dark"] .v2foot .fbrand{background:#FBF8F1;padding:12px 16px;border-radius:14px}
:root[data-theme="light"] .v2foot .fbrand{background:transparent;padding:0}
.v2foot .fslogan{color:var(--dim);font-size:13.5px;margin:12px 0 0;max-width:22em}
.v2foot-nav{display:flex;gap:44px;flex-wrap:wrap}
.v2foot-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700;margin:0 0 12px}
.v2foot-col a{display:block;font-size:14px;color:var(--mut);margin-bottom:9px;text-decoration:none;transition:color .2s}
.v2foot-col a:hover{color:var(--a)}
.v2legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .v2top,.v2nav a,.v2cta,.v2tog{transition:none}
}