/* =========================================================
   雙腔管與單肺通氣 · 共用樣式
   ========================================================= */
/* 配色：主色 #60a489（綠）、中性 #b2b5bd（灰）— 由使用者指定
   註：變數仍沿用 --teal* 命名，值已改為綠色系，改名需動到所有頁面故保留。 */
:root{
  /* 中性（由 #b2b5bd 推導） */
  --bg:#f4f5f7;
  --bg-2:#eceef1;
  --surface:#ffffff;
  --surface-2:#f2f3f6;
  --surface-3:#e5e7ec;
  --ink:#2c3038;
  --ink-2:#585e69;
  --ink-3:#8b909b;
  --line:#dcdee3;
  --line-2:#c4c7ce;
  --grey:#b2b5bd;

  /* 主色（#60a489） */
  --teal:#60a489;
  --teal-dark:#4a8770;
  --teal-deep:#33604e;
  --teal-soft:#a6cdba;
  --teal-wash:#ecf4f0;

  /* 輔色 */
  --cream:#fdf6e3;
  --cream-line:#ead9ae;
  --cream-ink:#6d5a22;
  --rose:#f2dbe1;

  /* 語意色 */
  --ok:#4d9077; --ok-wash:#eaf4ef; --ok-line:#bcdccc; --ok-ink:#26603f;
  --warn:#a97b21; --warn-wash:#fbf2df; --warn-line:#e8d5a6;
  --bad:#bd5045; --bad-wash:#fbedeb; --bad-line:#eecac4; --bad-ink:#96271f;
  --cuff:#1e6fd9;
  --blue-wash:#e3eefb; --blue-ink:#1352a8;
  --rose-wash:#fbe9ef; --rose-line:#f4c9d1; --rose-ink:#96406a;

  --r-sm:10px; --r:14px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(44,48,56,.05), 0 1px 3px rgba(44,48,56,.04);
  --sh-2:0 2px 4px rgba(44,48,56,.04), 0 8px 24px rgba(44,48,56,.07);
  --sh-3:0 4px 8px rgba(44,48,56,.05), 0 16px 40px rgba(44,48,56,.10);
  --nav-h:58px;
  --ease:cubic-bezier(.4,0,.2,1);
  /* 相容別名：各模組頁的 inline <style> 仍用這兩個名字 */
  --radius:var(--r);
  --shadow:var(--sh-1);
}

/* 深色模式：跟隨系統（可被 data-theme 手動覆蓋） */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16181c; --bg-2:#111317;
    --surface:#1e2126; --surface-2:#262a30; --surface-3:#31363e;
    --ink:#e8eaee; --ink-2:#b2b5bd; --ink-3:#868b95;
    --line:#333840; --line-2:#434952;
    --grey:#b2b5bd;
    --teal:#7cbca3; --teal-dark:#9dd0bb; --teal-deep:#bfe0d1;
    --teal-soft:#4a7e69; --teal-wash:#1e2d27;
    --cream:#2c2818; --cream-line:#484023; --cream-ink:#e0d2a6;
    --ok:#6fb894; --ok-wash:#1a2b23; --ok-line:#33553f; --ok-ink:#9fd6b8;
    --warn:#d3a352; --warn-wash:#2b2517; --warn-line:#524628;
    --bad:#dd8479; --bad-wash:#2e1c19; --bad-line:#57332e; --bad-ink:#efa89e;
    --blue-wash:#1d2b3f; --blue-ink:#a7c8f2;
    --rose-wash:#372230; --rose-line:#57333f; --rose-ink:#e8b3cd;
    --sh-1:0 1px 3px rgba(0,0,0,.32);
    --sh-2:0 2px 4px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.34);
    --sh-3:0 4px 8px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.44);
  }
}

/* 深色模式：手動指定（與上方變數完全相同） */
:root[data-theme="dark"]{
  --bg:#16181c; --bg-2:#111317;
  --surface:#1e2126; --surface-2:#262a30; --surface-3:#31363e;
  --ink:#e8eaee; --ink-2:#b2b5bd; --ink-3:#868b95;
  --line:#333840; --line-2:#434952;
  --grey:#b2b5bd;
  --teal:#7cbca3; --teal-dark:#9dd0bb; --teal-deep:#bfe0d1;
  --teal-soft:#4a7e69; --teal-wash:#1e2d27;
  --cream:#2c2818; --cream-line:#484023; --cream-ink:#e0d2a6;
  --ok:#6fb894; --ok-wash:#1a2b23; --ok-line:#33553f; --ok-ink:#9fd6b8;
  --warn:#d3a352; --warn-wash:#2b2517; --warn-line:#524628;
  --bad:#dd8479; --bad-wash:#2e1c19; --bad-line:#57332e; --bad-ink:#efa89e;
  --blue-wash:#1d2b3f; --blue-ink:#a7c8f2;
  --rose-wash:#372230; --rose-line:#57333f; --rose-ink:#e8b3cd;
  --sh-1:0 1px 3px rgba(0,0,0,.32);
  --sh-2:0 2px 4px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.34);
  --sh-3:0 4px 8px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.44);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"PingFang TC","Noto Sans TC","Hiragino Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.85;
  font-size:16px;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3,h4,h5{line-height:1.4;font-weight:700;letter-spacing:-.01em}
a{color:var(--teal);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--teal-dark)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:800px;margin:0 auto;padding:0 20px}
.wrap-wide{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------------- 導覽列 ---------------- */
.topbar{
  position:sticky;top:0;z-index:50;height:var(--nav-h);
  background:rgba(51,96,78,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  color:#fff;display:flex;align-items:center;padding:0 14px;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .topbar{background:rgba(17,19,23,.92)} }
:root[data-theme="dark"] .topbar{background:rgba(17,19,23,.92)}
.theme-btn{
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.14);color:#fff;
  font:inherit;font-size:.79rem;font-weight:600;padding:7px 12px;border-radius:100px;cursor:pointer;
  flex:0 0 auto;transition:background .18s var(--ease);white-space:nowrap;
}
.theme-btn:hover{background:rgba(255,255,255,.24)}
.topbar .home{color:#fff;font-size:.87rem;font-weight:600;display:flex;align-items:center;gap:6px;flex:0 0 auto;opacity:.9}
.topbar .home:hover{opacity:1;color:#fff}
.topbar .now{flex:1;min-width:0;font-size:.8rem;color:rgba(255,255,255,.62);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.02em}
.menu-btn{
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.14);color:#fff;
  font:inherit;font-size:.79rem;font-weight:600;padding:7px 14px;border-radius:100px;cursor:pointer;
  flex:0 0 auto;transition:background .18s var(--ease);
}
.menu-btn:hover{background:rgba(255,255,255,.24)}

.drawer-bg{position:fixed;inset:0;background:rgba(30,34,40,.55);z-index:60;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .24s var(--ease)}
.drawer-bg.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:var(--surface);
  z-index:61;transform:translateX(100%);transition:transform .3s var(--ease);
  overflow-y:auto;box-shadow:-8px 0 40px rgba(30,34,40,.22);
  padding-bottom:env(safe-area-inset-bottom);
}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--surface);z-index:1}
.drawer-head h2{font-size:.78rem;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}
.drawer-head button{background:none;border:none;font-size:1.5rem;color:var(--ink-3);cursor:pointer;line-height:1;padding:2px 6px}
.drawer-head button:hover{color:var(--ink)}
.drawer nav{padding:10px}
.drawer a{display:flex;gap:12px;align-items:flex-start;padding:12px 13px;border-radius:var(--r-sm);
  color:var(--ink);font-size:.87rem;line-height:1.5;transition:background .15s var(--ease)}
.drawer a:hover{background:var(--surface-2)}
.drawer a.current{background:var(--teal-wash);font-weight:700;color:var(--teal-dark)}
.drawer .n{flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:var(--surface-3);
  color:var(--ink-3);font-size:.71rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.drawer a.current .n{background:var(--teal);color:#fff}
.drawer .t{flex:1;min-width:0}
.drawer .t small{display:block;font-size:.71rem;color:var(--ink-3);font-weight:400;margin-top:1px}

/* ---------------- 頁首 ---------------- */
.page-head,.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(178,181,189,.40) 0%, rgba(178,181,189,0) 56%),
    radial-gradient(90% 120% at 4% 110%, rgba(166,205,186,.26) 0%, rgba(166,205,186,0) 62%),
    linear-gradient(152deg, #6fb096 0%, #4a8770 50%, #33604e 100%);
}
.page-head::after,.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 78%);
}
.page-head > *,.hero > *{position:relative;z-index:1}
.page-head{padding:30px 0 28px}
.page-head .kicker{font-size:.7rem;letter-spacing:.22em;font-weight:700;color:rgba(255,255,255,.62);text-transform:uppercase}
.page-head h1{font-size:1.55rem;margin-top:8px;letter-spacing:-.02em}
.page-head p{font-size:.89rem;color:rgba(255,255,255,.82);margin-top:11px;max-width:56ch;line-height:1.8}

.hero{padding:52px 0 46px}
.hero h1{font-size:2rem;letter-spacing:-.025em;line-height:1.3}
.hero .sub{font-size:.95rem;color:rgba(255,255,255,.84);margin-top:14px;max-width:50ch;line-height:1.85}

/* ---------------- 內容 ---------------- */
main{padding:30px 0 10px}
section.blk{margin-bottom:34px}
section.blk > h2{
  font-size:1.12rem;margin-bottom:15px;display:flex;align-items:center;gap:11px;letter-spacing:-.015em;
}
section.blk > h2::before{
  content:"";width:4px;height:1.05em;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--teal),var(--teal-soft));
}
section.blk > h3{font-size:.98rem;margin:22px 0 9px;color:var(--ink)}
section.blk p{margin-bottom:12px;font-size:.93rem;color:var(--ink-2)}
section.blk p strong,section.blk li strong,section.blk li b{color:var(--ink);font-weight:700}
section.blk ul,section.blk ol{padding-left:1.4em;margin-bottom:14px}
section.blk li{margin-bottom:7px;font-size:.93rem;color:var(--ink-2)}
section.blk li::marker{color:var(--teal-soft)}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:18px 20px;margin-bottom:16px;
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.card:hover{box-shadow:var(--sh-2)}
.card > h3{font-size:.97rem;margin-bottom:10px;margin-top:0}

/* 提示框 */
.note,.tip,.warn,.danger{
  border-radius:var(--r);padding:15px 17px 15px 18px;margin:16px 0;
  font-size:.89rem;line-height:1.85;border:1px solid;position:relative;
}
.note{background:var(--teal-wash);border-color:var(--teal-soft);color:var(--teal-dark)}
.tip{background:var(--cream);border-color:var(--cream-line);color:var(--cream-ink)}
.warn{background:var(--warn-wash);border-color:var(--warn-line);color:var(--warn)}
.danger{background:var(--bad-wash);border-color:var(--bad-line);color:var(--bad)}
.note b,.tip b,.warn b,.danger b{font-weight:700}
.note .lbl,.tip .lbl,.warn .lbl,.danger .lbl{
  display:flex;align-items:center;gap:7px;
  font-size:.71rem;letter-spacing:.13em;font-weight:700;margin-bottom:7px;text-transform:uppercase;opacity:.9}
.note .lbl::before,.tip .lbl::before,.warn .lbl::before,.danger .lbl::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.note a,.tip a,.warn a,.danger a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 表格 */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--sh-1)}
table.data{width:100%;border-collapse:collapse;font-size:.87rem;min-width:430px}
table.data th{background:var(--surface-2);text-align:left;padding:11px 14px;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.7}
table.data tbody tr:last-child td{border-bottom:none}
table.data tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 45%, transparent)}
table.data td b{color:var(--ink)}

/* ---------------- 圖片空位 ---------------- */
.imgslot{
  border:1.5px dashed var(--teal-soft);border-radius:var(--r);
  background:
    repeating-linear-gradient(135deg, transparent 0 12px, color-mix(in srgb,var(--teal-soft) 8%,transparent) 12px 13px),
    var(--teal-wash);
  padding:22px 18px;margin:18px 0;text-align:center;
}
.imgslot .id{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  background:var(--teal);color:#fff;padding:4px 12px;border-radius:100px;margin-bottom:10px}
.imgslot .desc{font-size:.88rem;color:var(--teal-dark);font-weight:700;line-height:1.65}
.imgslot .note{background:none;border:none;padding:0;margin:8px auto 0;font-size:.78rem;
  color:var(--teal-dark);opacity:.78;font-weight:400;max-width:46ch}
.imgslot .howto{background:none;border:none;margin:12px auto 0;padding:9px 12px;max-width:34em;
  font-size:.76rem;line-height:1.7;color:var(--teal-dark);
  background:color-mix(in srgb,var(--surface) 65%, transparent);border-radius:9px}
.imgslot .howto code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;
  background:var(--surface);border:1px solid var(--teal-soft);border-radius:5px;padding:1px 6px;color:var(--teal-dark)}
.imgslot .howto-sub{opacity:.7;font-size:.94em}
.imgslot.filled{border:1px solid var(--line);background:var(--surface);padding:0;overflow:hidden;box-shadow:var(--sh-1)}
.imgslot figcaption{font-size:.79rem;color:var(--ink-2);padding:12px 15px;text-align:left;
  background:var(--surface-2);line-height:1.7}
.imgslot figcaption b{color:var(--ink)}
/* 聚焦：把重點以外的畫面壓暗（不改動原圖，可一鍵切回全圖） */
.imgslot .fw{position:relative;display:block;overflow:hidden;line-height:0}
.imgslot .spot{
  position:absolute;border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,16,14,.68);
  outline:2px solid rgba(255,255,255,.92);outline-offset:0;
  transition:opacity .3s var(--ease);
}
.imgslot.focus-off .spot{opacity:0}
.imgslot .focus-btn{
  display:inline-block;margin-left:10px;font:inherit;font-size:.72rem;font-weight:700;
  padding:3px 11px;border-radius:100px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.imgslot .focus-btn:hover{border-color:var(--teal);color:var(--teal)}

/* 使用者自備圖片 */
.imgslot .myimg-add{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:7px}
.myimg-btn{display:inline-block;font-size:.8rem;font-weight:700;padding:8px 18px;border-radius:100px;
  cursor:pointer;background:var(--teal);color:#fff;border:1px solid var(--teal);
  transition:background .15s var(--ease)}
.myimg-btn:hover{background:var(--teal-dark)}
.myimg-hint{font-size:.72rem;color:var(--teal-dark);opacity:.75;text-align:center;max-width:30em}
.imgslot.mine{border:1px solid var(--ok-line)}
.imgslot.mine figcaption{background:var(--ok-wash)}
.imgslot figcaption .mine-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  background:var(--ok);color:#fff;padding:2px 9px;border-radius:100px;margin-right:8px;vertical-align:1px}

/* 私人層（版權素材，僅供個人研讀、不會被發布） */
.imgslot.private{border:1px solid var(--bad-line);box-shadow:var(--sh-1)}
.imgslot.private figcaption{background:var(--bad-wash)}
.imgslot figcaption .pv{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  background:var(--bad);color:#fff;padding:2px 9px;border-radius:100px;margin-right:8px;
  vertical-align:1px;
}

/* ---------------- 可勾選清單（m0 / m4 / m6 共用） ---------------- */
.checklist{list-style:none;padding:0}
.checklist li{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;background:var(--surface);cursor:pointer;font-size:.89rem;color:var(--ink-2)}
.checklist li:hover{border-color:var(--teal-soft)}
.checklist li.on{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok-ink)}
.checklist .bx{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:2px solid var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;color:transparent;margin-top:2px}
.checklist li.on .bx{background:var(--ok);border-color:var(--ok);color:#fff}
.chk-status{font-size:.85rem;color:var(--ink-2);margin-top:10px;padding:11px 14px;border-radius:10px;
  background:var(--surface-2)}
.chk-status.done{background:var(--ok-wash);color:var(--ok-ink);font-weight:700}

/* ---------------- 摺疊區塊（補充內容收合用） ---------------- */
details.fold{
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--sh-1);margin:16px 0;overflow:hidden;
}
details.fold>summary{
  list-style:none;cursor:pointer;padding:14px 17px;
  font-size:.89rem;font-weight:700;color:var(--ink);
  display:flex;align-items:flex-start;gap:10px;line-height:1.6;
  transition:background .15s var(--ease);
}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{
  content:"▸";flex:0 0 auto;color:var(--teal);font-size:.85em;
  transition:transform .2s var(--ease);margin-top:2px;
}
details.fold[open]>summary::before{transform:rotate(90deg)}
details.fold>summary:hover{background:var(--surface-2)}
details.fold>summary small{display:block;font-weight:400;font-size:.8rem;color:var(--ink-3);margin-top:2px}
details.fold .fold-body{padding:2px 17px 15px}
details.fold .fold-body>:first-child{margin-top:0}
details.fold .fold-body .note,details.fold .fold-body .tip,
details.fold .fold-body .warn,details.fold .fold-body .danger,
details.fold .fold-body .tbl-scroll{margin-top:12px}

/* ---------------- 小計算器 ---------------- */
.calc{
  background:var(--surface);border:1px solid var(--teal-soft);border-radius:var(--r);
  box-shadow:var(--sh-1);padding:17px 19px;margin:16px 0;
}
.calc h3{font-size:.95rem;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.calc h3::before{content:"⌖";color:var(--teal);font-size:1.05em}
.calc .calc-sub{font-size:.8rem;color:var(--ink-3);margin-bottom:14px}
.calc .calc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.calc .calc-row label{font-size:.85rem;font-weight:700;color:var(--ink-2);flex:0 0 auto}
.calc .seg{display:flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px;border:1px solid var(--line)}
.calc .seg button{border:none;background:none;font:inherit;font-size:.84rem;color:var(--ink-2);
  padding:7px 16px;border-radius:8px;cursor:pointer}
.calc .seg button[aria-pressed="true"]{background:var(--teal);color:#fff;font-weight:700}
.calc input[type=range]{flex:1;min-width:150px;accent-color:var(--teal)}
.calc .calc-val{font-size:.9rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;min-width:4.5em}
.calc .calc-out{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:4px;
}
.calc .calc-out .co{
  flex:1;min-width:140px;background:var(--teal-wash);border:1px solid var(--teal-soft);
  border-radius:11px;padding:12px 15px;
}
.calc .calc-out .co small{display:block;font-size:.7rem;letter-spacing:.1em;font-weight:700;
  color:var(--teal-dark);text-transform:uppercase;margin-bottom:3px}
.calc .calc-out .co b{font-size:1.25rem;color:var(--teal-deep);font-variant-numeric:tabular-nums}
.calc .calc-out .co span{font-size:.8rem;color:var(--teal-dark)}
.calc .calc-note{font-size:.77rem;color:var(--ink-3);margin-top:11px;line-height:1.7}

/* ---------------- 橫向比例條（容錯範圍、分流等） ---------------- */
.mos-row{margin-bottom:13px}
.mos-label{display:flex;justify-content:space-between;font-size:.84rem;margin-bottom:5px;gap:10px}
.mos-label span{color:var(--ink-2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.mos-bar{height:24px;background:var(--surface-2);border-radius:7px;overflow:hidden}
.mos-fill{height:100%;border-radius:7px;display:flex;align-items:center;justify-content:flex-end;
  padding-right:9px;font-size:.7rem;font-weight:700;color:#fff;min-width:fit-content}
.mos-fill.wide{background:linear-gradient(90deg,#7cbfa1,#60a489)}
.mos-fill.narrow{background:linear-gradient(90deg,#d17c72,#bd5045)}

/* ---------------- 步驟 ---------------- */
ol.steps{list-style:none;padding:0;counter-reset:st;margin-left:2px}
ol.steps > li{counter-increment:st;position:relative;padding:0 0 24px 44px;margin:0;
  border-left:2px solid var(--line)}
ol.steps > li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps > li::before{
  content:counter(st);position:absolute;left:-16px;top:-2px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(145deg,var(--teal),var(--teal-dark));color:#fff;
  font-size:.79rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(51,96,78,.28);
}
ol.steps > li h4{font-size:.97rem;margin-bottom:6px}
ol.steps > li p{font-size:.9rem;color:var(--ink-2);margin-bottom:9px}

/* ---------------- 對照 ---------------- */
.compare2{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:16px 0}
.cmp{border-radius:var(--r);padding:16px 18px;font-size:.87rem;line-height:1.75;border:1px solid}
.cmp h4{font-size:.8rem;margin-bottom:9px;letter-spacing:.06em;display:flex;align-items:center;gap:7px}
.cmp h4::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cmp ul{padding-left:1.2em;margin:0}
.cmp li{margin-bottom:5px}
.cmp.good{background:var(--ok-wash);border-color:var(--ok-line);color:var(--ok)}
.cmp.bad{background:var(--bad-wash);border-color:var(--bad-line);color:var(--bad)}
.cmp ul li{color:var(--ink-2)}

/* ---------------- 頁尾導覽 ---------------- */
.btn{
  font:inherit;font-size:.87rem;font-weight:700;padding:11px 20px;border-radius:100px;
  border:1px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);
  box-shadow:0 2px 10px rgba(96,164,137,.28);
}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark);color:#fff;transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(96,164,137,.34)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);color:var(--teal);box-shadow:var(--sh-1)}
.btn.ghost:hover{background:var(--teal-wash);color:var(--teal-dark)}

.prevnext{display:flex;gap:13px;margin:34px 0 40px;flex-wrap:wrap}
.prevnext a{
  flex:1;min-width:155px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 18px;color:var(--ink);box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.prevnext a:hover{border-color:var(--teal-soft);transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--ink)}
.prevnext small{display:block;font-size:.68rem;letter-spacing:.14em;color:var(--ink-3);
  font-weight:700;margin-bottom:4px;text-transform:uppercase}
.prevnext b{font-size:.9rem;font-weight:700}
.prevnext .nx{text-align:right}

footer.site{padding:30px 0 48px;font-size:.77rem;color:var(--ink-3);line-height:1.85;
  border-top:1px solid var(--line);margin-top:14px}
footer.site h3{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
footer.site ol{padding-left:1.4em;margin:8px 0 14px}
footer.site li{margin-bottom:5px}
footer.site i{font-style:italic}

/* ---------------- 首頁 ---------------- */
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:15px;margin:24px 0}
.mod{
  position:relative;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:19px 20px;box-shadow:var(--sh-1);display:flex;gap:14px;align-items:flex-start;color:var(--ink);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.mod::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--teal),var(--teal-soft));
  transform:scaleY(0);transform-origin:top;transition:transform .25s var(--ease);
}
.mod:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--teal-soft);color:var(--ink)}
.mod:hover::after{transform:scaleY(1)}
.mod .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--teal-wash);color:var(--teal);
  font-size:.87rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease),color .2s var(--ease)}
.mod:hover .n{background:var(--teal);color:#fff}
.mod h3{font-size:.97rem;margin-bottom:5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mod p{font-size:.81rem;color:var(--ink-2);line-height:1.65}
.mod .core{display:inline-block;font-size:.63rem;font-weight:700;letter-spacing:.1em;
  background:var(--cream);color:var(--cream-ink);border:1px solid var(--cream-line);
  padding:2px 8px;border-radius:100px}

/* ---------------- 進場動畫 ---------------- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
}

/* ---------------- 列印（印講義用） ---------------- */
@media print{
  :root, :root[data-theme="dark"]{
    --bg:#fff; --bg-2:#fff; --surface:#fff; --surface-2:#f2f3f6; --surface-3:#e5e7ec;
    --ink:#000; --ink-2:#333; --ink-3:#666;
    --line:#ccc; --line-2:#bbb; --grey:#999;
    --teal:#33604e; --teal-dark:#33604e; --teal-deep:#33604e; --teal-soft:#9dbfb0; --teal-wash:#f0f5f2;
    --cream:#faf6ea; --cream-line:#ddd0a8; --cream-ink:#5a4a1c;
    --ok:#2b6b4d; --ok-wash:#eef5f0; --ok-line:#bcd6c6; --ok-ink:#1f4f38;
    --warn:#8a6317; --warn-wash:#faf3e2; --warn-line:#e0cf9e;
    --bad:#a33d33; --bad-wash:#faeeec; --bad-line:#e5c1ba; --bad-ink:#7c221a;
    --blue-wash:#e9f0fa; --blue-ink:#1352a8;
    --rose-wash:#f9ecf1; --rose-line:#eccbd6; --rose-ink:#7c3557;
    --sh-1:none; --sh-2:none; --sh-3:none;
  }
  body{background:#fff}
  .topbar,.drawer,.drawer-bg,.prevnext,.theme-btn,.menu-btn,
  .imgslot .focus-btn,.imgslot .spot,.myimg-add,.st-nav,.imgslot .howto{display:none !important}
  .page-head,.hero{background:none;color:#000;padding:6px 0 10px}
  .page-head::after,.hero::after{display:none}
  .page-head .kicker{color:#666}
  .page-head h1,.hero h1{color:#000}
  .page-head p,.hero .sub{color:#333}
  .card,.tbl-scroll,details.fold,.note,.tip,.warn,.danger,.imgslot,.calc{break-inside:avoid}
  a{color:inherit;text-decoration:none}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ---------------- 響應式 ---------------- */
@media (max-width:640px){
  body{font-size:15.5px}
  .compare2{grid-template-columns:1fr}
  .hero{padding:38px 0 34px}
  .hero h1{font-size:1.5rem}
  .page-head{padding:24px 0 22px}
  .page-head h1{font-size:1.28rem}
  main{padding:22px 0 6px}
  section.blk{margin-bottom:26px}
  .mods{gap:12px}
}