/* ===========================================================
   健身教練專業查詢 — 主頁樣式
   依 UI_guideline.html：冷白灰底、近黑字、亮橘只做小面積重點、
   紅只做警示；標籤橘系無 icon；按鈕近黑 11px。移除放大字級。
   =========================================================== */

:root {
  --wall-top:#FBFCFC; --paper:#FFFFFF; --card:#FCFCFD; --ground:#F3F4F4; --recess:#EAEBEC;
  --ink:#262629; --ink-soft:#4E4E51; --line:#BFC1C3;
  --orange:#FF5800; --orange-wash:rgba(255,88,0,.42); --orange-soft:rgba(255,88,0,.14);
  --tag-bg:#F5DED2; --tag-text:#812D00;
  --red:#6E1414; --red-hl:#EFD8D8;
  --tips-bg:#F7F8F8;
  --btn-black:#1F2A25;
  --radius-card:20px; --radius-btn:11px; --radius-tag:999px;
  --font-sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --font-serif:'Noto Serif TC',serif;
  /* 站名招牌字：現代黑體 Medium，不老派、清爽有份量 */
  --font-brand:var(--font-sans);
  --font-latin:'Inter','Helvetica Neue',Arial,sans-serif;
  --focus:#1457b8;
  --nav-h:56px;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
[hidden] { display:none !important; }
/* 按鈕文字一律繼承頁面顏色：修正 iOS Safari 把 <button> 內文字染成系統藍的問題（桌機看不出來） */
button { color:inherit; }
/* scrollbar-gutter:stable → 一律預留捲軸空間，長短頁切換時導覽列不會左右跳動 */
/* html 先鋪好底色 → 換頁時不會先閃一下白畫面，切換較順 */
html { scroll-behavior:smooth; scrollbar-gutter:stable; background:var(--ground); color-scheme:light; }
body {
  background:var(--ground); color:var(--ink);
  font-family:var(--font-sans); font-size:19px; line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
.wrap { width:100%; max-width:720px; margin:0 auto; padding:0 20px; }
.en { font-family:var(--font-latin); font-weight:600; }

/* 連結：底線暗示 */
a, .text-link { color:var(--ink); }
.text-link { background:none; border:none; cursor:pointer; font:inherit;
  color:var(--ink-soft); text-decoration:underline; text-underline-offset:3px; padding:0; }
.text-link:hover { color:var(--orange); text-decoration-color:var(--orange); }
.text-link:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:3px; }

/* 按鈕（近黑系，11px） */
.btn { font-family:var(--font-sans); font-size:17px; font-weight:700; border:none; cursor:pointer;
  border-radius:var(--radius-btn); padding:12px 22px; min-height:48px; transition:background .15s, transform .06s;
  text-decoration:none; }
.btn-primary { background:var(--btn-black); color:#fff; }
.btn-primary:hover { background:#000; }
.btn-primary:active { background:#000; transform:translateY(1px); }
.btn-outline { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-outline:hover { background:var(--ink); color:#fff; }
.btn-outline:active { transform:translateY(1px); }
.btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.btn-sm { min-height:40px; padding:8px 16px; font-size:16px; }
/* 細框、不加粗，用在「複製文字」這類次要動作 */
.btn-thin { border-width:1px; font-weight:400; }
.btn-thin.btn-outline { border-color:var(--line); color:var(--ink-soft); }
.btn-thin.btn-outline:hover { background:transparent; border-color:var(--ink); color:var(--ink); }

/* 標籤（原橘淡化 + 近黑字，無 icon） */
.tag { font-family:var(--font-sans); font-size:15px; font-weight:500; letter-spacing:.08em;
  padding:5px 12px; border-radius:var(--radius-tag); display:inline-block; background:var(--orange-wash); color:var(--ink); white-space:nowrap; }
.tag-outline { background:transparent; color:var(--ink); border:1px solid var(--ink);
  padding:4px 11px; border-radius:var(--radius-tag); font-size:15px; font-weight:500; letter-spacing:.08em; display:inline-block; white-space:nowrap; }
.mark { background:var(--orange-soft); padding:.02em .18em; border-radius:3px; }

/* ---------- 導覽（未來整站置頂列，先預留） ---------- */
.site-nav { position:sticky; top:0; z-index:40; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.site-nav .wrap { max-width:none; padding:0 32px; display:flex; justify-content:space-between; gap:18px; align-items:center; height:var(--nav-h); }
/* 可點但不要 hover 變色；只靠滑鼠游標變成手指提示可點 */
.nav-brand { font-family:var(--font-brand); font-size:23px; font-weight:500; letter-spacing:.08em; color:var(--ink); white-space:nowrap; text-decoration:none; cursor:pointer; }
.nav-brand:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.nav-links { display:flex; gap:40px; align-items:center; }
.nav-link { position:relative; font-size:16px; font-weight:400; color:var(--ink-soft); text-decoration:none; white-space:nowrap; transition:color .15s ease; }
.nav-link:hover { color:var(--ink); }
/* 使用中：橘線用絕對定位的底線，放在文字下方，不影響文字高度、三項對齊 */
.nav-link.is-active { color:var(--ink); }
.nav-link.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--orange); border-radius:1px; }
.nav-link.is-disabled { opacity:.55; cursor:default; }
/* 漢堡選單鍵：桌機隱藏，手機顯示 */
.nav-burger { display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:44px; height:44px; margin-right:-8px; background:none; border:none; cursor:pointer; padding:8px; }
.burger-bar { display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; }
.nav-burger:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
@media (max-width:520px) {
  .site-nav .wrap { padding:0 16px; gap:10px; position:relative; }
  .nav-brand { font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-burger { display:flex; }
  /* 選項收進下拉選單，預設收合、點漢堡展開 */
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:0 10px 18px rgba(0,0,0,.10); padding:.3rem 0; }
  .site-nav.menu-open .nav-links { display:flex; }
  .nav-links .nav-link { padding:.8rem 20px; font-size:17px; white-space:nowrap; }
  .nav-links .nav-link.is-active { border-left:3px solid var(--orange); padding-left:17px; }
  .nav-links .nav-link.is-active::after { display:none; }
}

/* ---------- Hero ---------- */
.hero { background:linear-gradient(180deg,var(--wall-top) 0%,#F7F8F8 55%,var(--ground) 100%); padding:4.8rem 0 4.4rem; }
/* 桌機：插畫當右側浮層，文字限寬避免被擋 */
.hero-wrap { position:relative; }
.hero-copy, .hero-flow { position:relative; z-index:1; }
.hero-copy { max-width:64%; }
.hero-art-wrap { position:absolute; right:-7%; top:57%; transform:translateY(-50%);
  width:34%; max-width:340px; margin:0; z-index:0; pointer-events:none; }
.hero-art { width:100%; height:auto; display:block; }
/* 手機／窄平板：插畫回到正常流，落在「快速完成下方三步」上方、置中縮小，與下方文字多留一點間距 */
@media (max-width:640px) {
  .hero-copy { max-width:none; }
  .hero-art-wrap { position:static; transform:none; width:auto; max-width:240px; margin:.4rem auto 1.3rem; }
}
.hero h1 { font-family:var(--font-serif); font-size:39px; font-weight:700; line-height:1.5; color:var(--ink); margin-bottom:1.6rem; letter-spacing:.5px; }
.hero .lead { font-size:19px; line-height:1.85; color:var(--ink); margin-bottom:1.8rem; }
.asks { display:flex; flex-direction:column; gap:.8rem; margin-bottom:2.2rem; }
.ask-link { display:flex; gap:.6rem; align-items:flex-start; font-size:19px; color:var(--ink);
  text-decoration:none; background:none; border:none; cursor:pointer; text-align:left; font-family:inherit; padding:.15rem 0; }
.ask-link .arrow { color:var(--orange); font-weight:800; flex:0 0 auto; }
.ask-link .ask-text { text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--line); }
.ask-link:hover .ask-text { text-decoration-color:var(--orange); }
.ask-link:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.flow-label { display:flex; align-items:center; gap:.7rem; font-size:16px; font-weight:700; color:var(--ink-soft); margin-bottom:.5rem; }
.flow-label::before,.flow-label::after { content:""; height:1px; background:var(--line); flex:1 1 auto; }
.down { display:flex; justify-content:center; }
.down .chev { font-size:1.8rem; line-height:1; color:var(--orange); animation:bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
.hero .disclaimer { font-size:14px; color:var(--ink-soft); margin-top:1.4rem; }

/* ---------- 步驟大框 ---------- */
.step { background:var(--paper); border:1px solid var(--recess); border-radius:var(--radius-card);
  margin:26px auto; max-width:720px; overflow:visible; }
/* 第二步、第三步下滑時，大標貼在導覽列正下方置頂（top 對齊導覽列高度，不被蓋住） */
.step-head { position:sticky; top:var(--nav-h); z-index:30; background:var(--paper);
  border-bottom:1px solid var(--recess); border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:18px 26px; scroll-margin-top:0; }
.step.anchor { scroll-margin-top:60px; }
/* 第一步：大標題不置頂（改由下方兩個小標題接手），維持「導覽列＋小標題」兩條 */
#step1 .step-head { position:static; }
/* 下滑時貼在導覽列下方的小標題（各自在自己的範圍內置頂） */
.sticky-sub { position:sticky; top:var(--nav-h); z-index:20; background:var(--paper); padding-top:.8rem; }
/* 標題列的內層 wrap 不再額外加 padding，讓標題與下方內文左緣對齊 */
.step-head .wrap { max-width:none; padding:0; }
.step-head h2 { font-family:var(--font-sans); font-size:23px; font-weight:700; line-height:1.4; }
.step-body { padding:20px 26px 26px; }
.step-help { color:var(--ink-soft); font-size:17px; margin-bottom:1.1rem; }

/* 第一步兩個並列小節的標題（需求勾選 / 結果）＝ 20px */
.s1-subhead { font-size:21px; font-weight:700; color:var(--ink); line-height:1.6; margin-bottom:1.2rem; }

/* 結果小節：用上方分隔線＋間距，跟需求勾選拉開成兩個 group */
.s1-outcome { margin-top:1.6rem; }
.s1-outcome .s1-subhead { margin-bottom:1rem; }

/* ---------- 需求選擇 ---------- */
.need-search-wrap { position:relative; margin-bottom:.7rem; }
.need-search { width:100%; font-size:18px; padding:.65em 2.4em .65em .9em; border:1.5px solid var(--line);
  border-radius:12px; background:#fff; color:var(--ink); font-family:inherit; }
.need-search:focus { outline:none; border-color:var(--ink); }
.need-search:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.search-clear { position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:none; background:var(--recess); border-radius:50%; cursor:pointer; font-size:16px; color:var(--ink-soft); }
.search-clear:hover { background:var(--line); color:#fff; }
.search-results { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; padding:.8rem; border:1px solid var(--line); border-radius:12px; background:var(--tips-bg); }
.search-result { text-align:left; font-size:17px; font-weight:500; padding:.55em .8em; background:#fff; color:var(--ink); border:1px solid var(--recess); border-radius:10px; cursor:pointer; font-family:inherit; }
.search-result:hover { border-color:var(--ink); }
.search-result.is-active { background:var(--orange-wash); border-color:var(--orange); }
.search-result:focus-visible { outline:3px solid var(--focus); outline-offset:1px; }
.search-result .sr-path { display:block; font-size:13px; font-weight:700; color:var(--ink-soft); margin-bottom:.15em; }
.search-none { margin:0; color:var(--ink-soft); font-size:16px; }

.need-groups { display:flex; flex-direction:column; gap:2.2rem; }
/* 組（分類）標題＝17px、淡灰 */
.need-group-title { font-size:18px; font-weight:700; color:var(--ink-soft); margin-bottom:.9rem; }
/* 已選數字＝最弱、不加粗，比描述更不搶眼 */
.ng-count { font-size:14px; font-weight:400; color:var(--ink-soft); margin-left:.5em; }
.need-buttons { display:flex; flex-wrap:wrap; gap:.55rem; }
/* 選項字＝不加粗、不用深黑，讓組標題主導 */
.need-btn { font-size:17px; font-weight:400; color:var(--ink-soft); padding:.5em .85em; background:#fff;
  border:1.5px solid var(--line); border-radius:10px; cursor:pointer; font-family:inherit; }
.need-btn:hover { border-color:var(--ink); color:var(--ink); }
.need-btn.is-active { background:var(--orange-wash); border-color:transparent; color:var(--ink); font-weight:500; }
.need-btn:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.need-parent-wrap { width:100%; }
.parent-chev { font-size:1.05em; margin-left:.5em; color:var(--ink-soft); }
.need-subs { width:100%; margin-top:.6rem; padding:.8rem; background:var(--tips-bg); border:none; border-radius:4px; display:flex; flex-wrap:wrap; gap:.55rem; }

/* 結果區的置頂表頭：已選需求（chips）＋結果標題整塊固定在導覽列下方 */
.s1-outcome-head { position:sticky; top:var(--nav-h); z-index:20; background:var(--paper); padding-top:1.5rem; padding-bottom:.55rem; }
/* 結果標題置頂時，上下都留白，跟前一段有段落間距、不緊貼 */
.s1-outcome-head .s1-subhead { margin-top:.7rem; margin-bottom:.5rem; }
.selected-chips { margin:0 0 1rem; }
.chips-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.9rem; }
/* 標籤夾限：預設兩行，超過用漸層淡出暗示，點「展開全部」看完整 */
.chips-clamp { position:relative; }
.chips-clamp.is-collapsed { overflow:hidden; }
.chips-clamp.is-collapsed.has-overflow::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2em;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--paper) 88%); pointer-events:none; }
/* 展開/收合鍵置中；收合狀態時上移一點，輕微疊在漸層淡出區上 */
.chips-toggle { display:block; margin:.5rem auto 0; font-size:16px; background:var(--paper); padding:.1rem .7rem; position:relative; z-index:1; }
.chips-clamp.is-collapsed.has-overflow + .chips-toggle { margin-top:-.75rem; }
.chips-label { font-size:21px; font-weight:700; color:var(--ink); }
.chips-list { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.chip { font-size:17px; font-weight:500; padding:.35em .8em; background:var(--orange-wash); color:var(--ink); border:none; border-radius:8px; cursor:pointer; font-family:inherit; }
.chip-redflag { background:var(--red-hl); color:var(--red); }
.chip:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
/* 移除全部＝不加粗文字＋垃圾桶，不做成按鍵 */
.clear-all { display:inline-flex; align-items:center; gap:.3em; background:none; border:none; padding:.35em .3em;
  font-size:15px; font-weight:400; color:var(--ink-soft); cursor:pointer; font-family:inherit; }
.clear-all:hover { color:var(--red); }
.clear-all .trash-ico { display:block; }
.clear-all:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* ---------- 第一步：空狀態 / 結果 ---------- */
.s1-empty { margin-top:0; padding:1.1rem 1.2rem; border:1px dashed var(--line); border-radius:12px; color:var(--ink-soft); }
.s1-empty p { margin-bottom:.8rem; }
.s1-result { margin-top:0; }

/* 警示 / 提示卡（同款淡灰） */
.notice { background:var(--tips-bg); border-left:4px solid var(--line); border-radius:0 12px 12px 0; padding:16px 20px; margin-bottom:1rem; }
.notice .block-label { font-size:16px; font-weight:700; margin-bottom:.3em; }
.notice p { font-size:16px; line-height:1.6; margin:0; }
.notice p + p { margin-top:.5em; }
/* 同一題多個風險提醒：連在同一張卡裡，之間只留小間距、不斷成白色 */
.risk-item + .risk-item { margin-top:.9rem; }
.notice-risk { border-left-color:var(--red); }
.notice-risk .block-label { color:var(--red); }
.notice-risk p { color:var(--red); }
.notice-risk .hl { background:none; padding:0; }
.notice-tip .block-label { color:var(--ink-soft); }
.notice-tip p { color:var(--ink); }
/* 核對提醒列點：黑色勾勾、清楚可讀 */
.check-list { list-style:none; margin:.3em 0 0; padding:0; }
.check-list li { position:relative; padding-left:1.7em; font-size:16px; line-height:1.65; color:var(--ink); }
.check-list li + li { margin-top:.5em; }
.check-list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--ink); font-weight:700; font-size:1.05em; }

/* ---------- 分層（去框，用間距＋分隔線） ---------- */
.tiers { display:flex; flex-direction:column; }
.tier { padding:1.2rem 0; border-top:1px solid var(--recess); }
.tier:first-child { border-top:none; padding-top:.4rem; }
.tier-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.15em; }
.tier-title { font-size:19px; font-weight:700; }
.tier-why { font-size:15px; flex:0 0 auto; white-space:nowrap; }
/* 「必備！」亮橘小字 */
.must-have { color:var(--orange); font-size:15px; font-weight:700; margin-left:.5em; vertical-align:middle; }
.tier-lead { font-size:17px; line-height:1.7; margin:.4em 0 .6em; }
.tier-altnote { font-size:15px; color:var(--ink-soft); margin:.5em 0 0; }
.tier-bg-text { font-size:17px; margin:.3em 0 0; }
.tier-bg-list { list-style:none; margin:.3em 0 0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.tier-bg-list li { position:relative; padding-left:1.2rem; font-size:17px; line-height:1.7; }
.tier-bg-list li::before { content:"・"; position:absolute; left:0; color:var(--ink-soft); }

/* 證照列：整條標題可點開闔 */
/* 證照列縮排＋列點，跟分類標題拉出主次層次 */
.tcert-list { list-style:none; display:flex; flex-direction:column; padding-left:1.1rem; }
.tcert { border-bottom:1px solid var(--recess); }
.tcert:last-child { border-bottom:none; }
.tcert-toggle { width:100%; display:flex; align-items:baseline; gap:.6rem; padding:.75rem 0; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; }
.tcert-toggle:hover .tcert-name { text-decoration:underline; text-underline-offset:3px; }
.tcert-toggle:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:4px; }
.tcert-main { display:flex; align-items:baseline; gap:.5rem; flex:1 1 auto; flex-wrap:wrap; }
.tcert-dot { flex:0 0 auto; color:var(--ink-soft); font-size:17px; margin-left:-.9rem; width:.9rem; }
.tcert-name { font-size:17px; font-weight:500; }
.tcert-name .en { font-size:16px; color:var(--ink-soft); }
.tcert-chev { color:var(--ink-soft); font-size:.9em; flex:0 0 auto; }
.tcert-detail { padding:.2rem 0 1rem 0; }
.tcert-summary { font-size:17px; line-height:1.7; margin:.1rem 0 .3rem; }

/* 分層底部連結：置右、字比內文小 */
.tier-foot { display:flex; gap:1.2rem; align-items:center; justify-content:flex-end; margin-top:.6rem; }
.tier-foot .text-link { font-size:15px; }
.ref-panel { margin-top:.7rem; }
.source { background:var(--ground); border-radius:12px; padding:14px 18px; font-size:15.5px; line-height:1.7; color:var(--ink-soft); }
.source h4 { font-size:17px; color:var(--ink); margin-bottom:.5em; }
.ref-group { margin-bottom:.7rem; }
.ref-group:last-child { margin-bottom:0; }
.ref-supports { color:var(--ink); font-weight:700; }
.ref-conf { color:var(--red); font-weight:700; }
.ref-list { margin:.3em 0 0 1.1em; }
.ref-list li { margin-bottom:.3em; }
.ref-list a { color:var(--focus); }
.ref-level { color:var(--ink-soft); }
.ref-warn { color:var(--orange); font-weight:700; }

/* 完整介紹連結：置右、字比內文小 */
.detail-foot { text-align:right; margin-top:.3rem; }
.detail-link { font-size:15px; }

/* ---------- 第二步 ---------- */
.s2-bar { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:flex-end; margin:2.4rem 0 1rem; }
/* 展開／收合：icon＋文字＋底線的連結（非按鈕外框） */
/* card 全域按鍵：字大一號、icon 靠右，底線用 border-bottom（與證照頁的切換鍵一致） */
.s2-expand { display:inline-flex; align-items:center; gap:.45rem; font-size:18px; text-decoration:none;
  border-bottom:1px solid var(--ink-soft); padding:0 0 2px; }
.s2-expand:hover { color:var(--orange); border-bottom-color:var(--orange); }
.s2-expand .s2-expand-txt { order:1; }
.s2-expand .s2-expand-ico { display:inline-flex; text-decoration:none; order:2; }
.s2-expand svg { display:block; }
/* 分類之間的節奏對齊第一步 need-groups（2.2rem） */
.s2-checklist { display:flex; flex-direction:column; gap:2.2rem; }
/* 機構分類標題（民間機構／國家醫事機關）— 對齊第一步 .need-group-title：18px 700 淡灰、去底線、用間距分組 */
.s2-cat .s2-section-label { font-size:18px; font-weight:700; color:var(--ink-soft); margin-bottom:.9rem; }
/* 發證機構子標題 — 15px 500 淡灰 */
/* 不同發證機構之間拉開較大空白，形成群組感 */
.s2-issuer { margin-top:2rem; }
.s2-issuer:first-of-type { margin-top:.5rem; }
.s2-issuer-label { font-size:16px; font-weight:500; color:var(--ink-soft); margin-bottom:.15rem; }
.s2-row { display:flex; align-items:flex-start; gap:.6rem; padding:.4rem 0 .4rem 1.1rem; }
.s2-row input { width:1.3em; height:1.3em; margin-top:.2em; flex-shrink:0; accent-color:var(--orange); }
.s2-row label { cursor:pointer; }
.s2-row .s2-name { font-weight:700; }
.s2-row .s2-focus { display:block; font-size:15px; color:var(--ink-soft); }
.s2-actions { margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.7rem; }

.s2-result { margin-top:1.4rem; }
.s2-result-head { display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; }
/* 結果小標題對齊第一步 .s1-subhead：21px 700 深墨 */
.s2-result h3 { font-size:21px; font-weight:700; color:var(--ink); line-height:1.6; }
.copy-slot { display:inline-flex; align-items:center; }
/* 輕量卡片：改用全站共用的淺色內層表面（tips-bg＋recess 框＋12px 圓角），與 notice／搜尋結果同一家族 */
.vitem { border:1px solid var(--recess); border-radius:12px; padding:16px 20px; margin-bottom:1rem; background:var(--tips-bg); }
.vitem-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
.vitem-name { font-weight:700; font-size:18px; }
.vitem-channel { font-size:15px; color:var(--ink-soft); margin-bottom:1rem; }
.vitem-steps-label { font-size:15px; font-weight:700; color:var(--ink-soft); margin-bottom:.4rem; }
.vitem ol { margin:.2rem 0 .8rem 1.2rem; }
.vitem ol li { margin-bottom:.4rem; font-size:17px; }
.vitem .vnote { font-size:15px; color:var(--ink-soft); margin-top:.2rem; }
/* 「前往官方查證」按鍵上下都留呼吸空間，不緊貼前後文字 */
/* 「前往官方查證」按鈕上下留呼吸空間，且不要底線 */
.cta-row { margin:1.5rem 0; }
.s2-cert-body .cta-row .btn { text-decoration:none; }
.copy-ok { font-size:15px; color:var(--orange); font-weight:700; margin-left:.6rem; }

/* 第二步：一步到位的可展開證照卡片 */
.s2-hint { font-size:16px; color:var(--ink-soft); margin:-.6rem 0 1.4rem; }
/* 同一發證機構的卡片靠近一點，強化群組感 */
.s2-issuer .s2-cert { margin-top:.5rem; }
.s2-cert { border:1px solid var(--recess); border-radius:12px; background:#fff; overflow:hidden; transition:border-color .12s ease, box-shadow .12s ease; }
.s2-cert-toggle { width:100%; display:flex; align-items:flex-start; gap:.6rem; padding:.85rem 1.1rem; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; transition:background .12s ease; }
/* 銀髮友善：滑到卡片時整張以很淺的灰反白＋邊框加深，回饋清楚不只靠底線 */
.s2-cert:hover { border-color:var(--line); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.s2-cert:hover .s2-cert-toggle { background:var(--ground); }
.s2-cert-toggle:hover .s2-name { text-decoration:underline; text-underline-offset:3px; }
.s2-cert-toggle:focus-visible { outline:3px solid var(--focus); outline-offset:-2px; border-radius:12px; }
.s2-cert-main { flex:1 1 auto; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .5rem; }
.s2-cert-main .s2-name { font-weight:700; font-size:18px; }
.s2-cert-main .s2-focus { flex-basis:100%; display:block; font-size:15px; color:var(--ink-soft); margin-top:.1rem; }
.s2-cert-toggle .tcert-chev { margin-top:.35rem; }
/* 卡片右側「看查證方式 ▾」：底線用 border-bottom（含文字＋icon），與證照頁切換鍵一致 */
.s2-open-hint { flex:0 0 auto; align-self:flex-start; display:inline-flex; align-items:center; gap:.25rem; color:var(--ink-soft); font-size:15px; white-space:nowrap; margin-top:.2rem; border-bottom:1px solid var(--ink-soft); padding-bottom:1px; }
.s2-cert-toggle:hover .s2-open-hint { color:var(--orange); border-bottom-color:var(--orange); }
/* 卡片內文一律 17px，統一大小不再雜亂（卡片標題與 CTA 按鈕除外） */
.s2-cert-body { padding:.6rem 1.15rem 1.05rem; background:var(--tips-bg); border-top:1px solid var(--recess); font-size:17px; line-height:1.6; }
.s2-cert-body .vitem-channel,
.s2-cert-body .vitem-steps-label,
.s2-cert-body .vnote,
.s2-cert-body .s2-noverify { font-size:17px; }
.s2-cert-body .vitem-channel { margin-bottom:.7rem; }
.s2-cert-body ol { margin:.2rem 0 .8rem 1.2rem; }
.s2-cert-body ol li { margin-bottom:.4rem; font-size:17px; line-height:1.6; }
/* 純內文，不再用小框框住 */
.s2-noverify { font-size:16px; line-height:1.65; color:var(--ink); margin-bottom:.7rem; }
/* 第二步卡片上的標籤：只縮小、稍微不那麼粗；顏色維持原本設計不動 */
.s2-cert-main .tag { font-size:13px; font-weight:400; letter-spacing:.04em; padding:2px 8px; }
.s2-cert-main .tag-outline { font-size:13px; font-weight:400; letter-spacing:.04em; padding:1px 8px; }
.tag-muted { display:inline-block; font-family:var(--font-sans); font-size:13px; font-weight:500; padding:1px 8px; border-radius:var(--radius-tag,5px); background:transparent; border:1px solid var(--ink-soft); color:var(--ink-soft); white-space:nowrap; }

/* ---------- 第三步 ---------- */
/* 對齊第一步 .tier：無框、用分隔線＋間距節奏（1.2rem） */
.s3-list { display:flex; flex-direction:column; }
.s3-item { border-top:1px solid var(--recess); padding:1.2rem 0; }
.s3-item:first-child { border-top:none; padding-top:.4rem; }
/* 標題對齊 .tier-title：19px 700 */
/* line-height 收緊，勾選框才能跟第一行文字置中對齊，不會往左上飄 */
.s3-item .s3-label { display:flex; align-items:flex-start; gap:.6rem; font-size:19px; font-weight:700; line-height:1.45; }
/* 保留示意方框，尺寸／邊框對齊第二步勾選框（1.3em、橘色重點） */
.s3-box { width:1.3em; height:1.3em; border:2px solid var(--line); border-radius:5px; flex:0 0 auto; margin-top:.07em; }
.s3-detail { margin:.5em 0 0 1.9em; font-size:17px; line-height:1.7; color:var(--ink-soft); }

/* 保存列 */
.save-bar { margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--recess); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* ---------- 為何這麼定義 小視窗 ---------- */
.overlay { position:fixed; inset:0; background:rgba(38,38,41,.5); display:flex; align-items:center; justify-content:center; padding:1.2rem; z-index:100; }
.overlay-box { background:var(--paper); border-radius:var(--radius-card); max-width:560px; width:100%; padding:1.7rem 1.6rem; position:relative; max-height:85vh; overflow-y:auto; }
.overlay-box h3 { font-size:21px; font-weight:700; margin-bottom:.8em; padding-right:2em; }
.overlay-box .why-text { font-size:18px; margin-bottom:1.1em; }
.overlay-close { position:absolute; top:14px; right:16px; font-size:21px; font-weight:700; background:none; border:none; border-radius:9px; width:2em; height:2em; cursor:pointer; color:var(--ink-soft); }
.overlay-close:hover { color:var(--ink); }
.overlay-close:focus-visible { outline:3px solid var(--focus); }

/* 共用黑色頁尾（footer.js 描繪；全站同一段）。全寬黑底、內容置中、手機自動收合。 */
.site-footer { margin-top:4rem; background:#161617; color:#E7E7E9; }
.site-footer .foot-inner { max-width:720px; margin:0 auto; padding:40px 20px 46px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px; }
.foot-contacts-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; }
.foot-lead { font-size:16px; color:#C6C6CA; }
.foot-contacts { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 22px; }
.foot-contact { display:inline-flex; align-items:center; gap:9px; color:#F2F2F4; text-decoration:none;
  font-size:17px; font-weight:500; padding:8px 4px; min-height:44px; border-radius:8px;
  transition:color .15s; }
.foot-contact:hover { color:var(--orange); }
.foot-contact:focus-visible { outline:3px solid #7FB2FF; outline-offset:3px; }
.foot-ico { display:inline-flex; width:26px; height:26px; }
.foot-ico svg { width:100%; height:100%; }
.foot-handle { font-family:var(--font-latin); letter-spacing:.2px; }
.foot-disclaimer { font-size:14px; color:#B7B7BC; line-height:1.7; }
.foot-copy { font-size:13px; color:#8C8C92; font-family:var(--font-latin); letter-spacing:.3px; }

@media (max-width:520px) {
  .site-footer { margin-top:3rem; }
  .site-footer .foot-inner { padding:32px 18px 38px; gap:16px; }
  /* 手機版：兩個聯絡方式改直排、各佔一行，點擊區塊更大更好按 */
  .foot-contacts { flex-direction:column; gap:6px; width:100%; }
  .foot-contact { justify-content:center; width:100%; font-size:18px; }
}

@media (max-width:520px) {
  .hero { padding:3.4rem 0 3rem; }
  .hero h1 { font-size:31px; }
  .step-body { padding:18px 16px 22px; }
  .step-head { padding:16px 16px; }
  /* 標題列：窄螢幕時「為何這麼定義」可掉到下一行、靠右，不擠壓標題 */
  .tier-head { flex-wrap:wrap; gap:.2rem .8rem; }
  .tier-why { margin-left:auto; }
  /* 跳窗在手機上留窄一點的外距、內距 */
  .overlay { padding:.8rem; }
  .overlay-box { padding:1.4rem 1.2rem; }
  .overlay-box h3 { padding-right:1.6em; }
  .source { padding:12px 14px; }
}

/* ===========================================================
   關於我們（文章頁）— 共用置頂導覽列＋左目錄／右本文兩欄
   三主題二階層；左側目錄像維基百科，點了捲動、捲動時高亮目前小標。
   內文加粗改以淡橘 highlight（.hl，取 UI_guideline 的 .mark／--orange-soft）
   =========================================================== */
.about { --about-pad:36px; padding:40px 0 40px; }
.about-shell { max-width:980px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:start; }

/* 左側目錄（sticky，跟著捲動） */
.about-toc { position:sticky; top:calc(var(--nav-h) + 20px); }
.toc-list, .toc-subs { list-style:none; margin:0; padding:0; }
.toc-theme { display:block; font-size:16px; font-weight:700; color:var(--ink); text-decoration:none; padding:8px 0 4px; }
.toc-subs { margin:0 0 6px; }
.toc-sec { display:block; font-size:14px; line-height:1.5; color:var(--ink-soft); text-decoration:none;
  padding:5px 0 5px 12px; border-left:2px solid var(--recess); }
.toc-theme:hover, .toc-sec:hover { color:var(--orange); }
.toc-theme.is-active { color:var(--ink); }
.toc-sec.is-active { color:var(--ink); font-weight:500; border-left-color:var(--orange); }
.toc-theme:focus-visible, .toc-sec:focus-visible { outline:3px solid var(--focus); outline-offset:2px; border-radius:3px; }

/* 手機版頁面大標：電腦寬版隱藏（改由右欄文章 h1 呈現） */
.about-mtitle { display:none; }
.about-top-sentinel { height:0; }

/* 右側本文：白底卡片 */
.about-body { min-width:0; background:var(--paper); border:1px solid var(--recess);
  border-radius:16px; padding:32px var(--about-pad) 40px; }
.about-title { font-family:var(--font-serif); font-size:40px; font-weight:700; line-height:1.5; letter-spacing:.5px; }
.about-divider { border:none; border-top:1px solid var(--line); margin:16px 0 8px; }

/* 捲動時的置頂提示列（在導覽列下方；標題下方留一點白） */
.about-crumb { display:none; position:sticky; top:var(--nav-h); z-index:20;
  background:var(--paper); border-bottom:1px solid var(--recess);
  margin:0 calc(-1 * var(--about-pad)); padding:11px var(--about-pad) 13px;
  flex-direction:column; gap:4px; }
.about-crumb.is-stuck { display:flex; }
.crumb-theme { font-family:var(--font-sans); font-size:13px; font-weight:400; color:var(--ink-soft); line-height:1.3; }
.crumb-sec { font-family:var(--font-sans); font-size:17px; font-weight:700; color:var(--ink); line-height:1.35; }

.about-theme { margin-top:58px; scroll-margin-top:calc(var(--nav-h) + 60px); }
.about-theme:first-of-type { margin-top:26px; }
.about-theme-title { font-family:var(--font-sans); font-size:27px; font-weight:700; line-height:1.4;
  padding-top:20px; border-top:2px solid var(--recess); margin-bottom:.5em; }
.about-theme:first-of-type .about-theme-title { padding-top:0; border-top:none; }
.about-sub { margin-top:34px; scroll-margin-top:calc(var(--nav-h) + 60px); }
.about-h { font-family:var(--font-sans); font-size:21px; font-weight:700; line-height:1.4; margin-bottom:.5em; }
.about-p { font-size:17px; line-height:1.9; margin-bottom:1em; }
.about-p:last-child { margin-bottom:0; }
/* 列點清單（簡述用，橘色小圓點） */
.about-list { list-style:none; margin:1em 0; padding:0; }
.about-li { position:relative; padding-left:1.5em; font-size:17px; line-height:1.9; margin-bottom:.8em; }
.about-li:last-child { margin-bottom:0; }
.about-li::before { content:"•"; position:absolute; left:.25em; top:-.02em; color:var(--ink); font-weight:700; }
/* 淡橘 highlight：整段淡橘底標記，字重維持一般（不加粗） */
.about-p .hl, .about-li .hl, .about mark { background:var(--orange-soft); color:inherit; font-weight:400; padding:.02em .18em; border-radius:3px; }

/* 窄螢幕：改單欄；目錄變成頂端伸縮選單（參考維基百科手機版）。
   收合時只顯示三個主題名稱，點主題手風琴展開它的小標；正文仍完整可讀。 */
@media (max-width:760px) {
  .about { --about-pad:20px; padding:28px 0 24px; }
  .about-shell { grid-template-columns:1fr; gap:16px; }

  /* 手機版：頁面大標移到目錄上方（純標題、不可點）；隱藏文章內重複的 h1 與分隔線 */
  .about-mtitle { display:block; font-family:var(--font-serif); font-size:31px; font-weight:700;
    line-height:1.4; letter-spacing:.5px; margin:0; }
  .about-body > .about-title, .about-body > .about-divider { display:none; }

  .about-toc { position:static; top:auto; background:var(--paper);
    border:1px solid var(--recess); border-radius:12px; padding:4px 14px; }
  .toc-list > li + li { border-top:1px solid var(--recess); }

  /* 主題列：大字、好點，右側箭頭提示可展開 */
  .toc-theme { display:flex; align-items:center; justify-content:space-between;
    font-size:18px; font-weight:700; padding:14px 2px; }
  .toc-theme.has-subs::after { content:"\25BE"; color:var(--ink-soft); font-size:14px;
    margin-left:12px; transition:transform .15s; }
  .toc-list > li.is-open .toc-theme.has-subs::after { transform:rotate(180deg); }

  /* 小標：預設收合，展開該主題才顯示 */
  .toc-subs { display:none; margin:0; border-left:none; padding:2px 0 10px; }
  .toc-list > li.is-open .toc-subs { display:block; }
  .toc-sec { font-size:16px; padding:11px 0 11px 16px; border-left:2px solid var(--recess); }
  .toc-sec.is-active { border-left-color:var(--orange); }

  .about-title { font-size:31px; }
  .about-theme-title { font-size:24px; }
  .about-h { font-size:20px; }
}