:root{
  --paper:#F7F8F5; --card:#FFFFFF; --ink:#1C221D; --ink2:#5C685E;
  --line:#E4E7E0; --brand:#22BFBF; --brand-2:#3ED9D2; --brand-ink:#0E8C8C;
  --brand-soft:#E2F7F7; --alert:#A8452F; --alert-soft:#F7EAE5; --frac-n:#8FDCDC;
  /* 漸層系統（2026-08-30 Sam：必要時加 #22BFBF 的漸層感） */
  --grad:linear-gradient(135deg,#22BFBF,#3ED9D2);
  --grad-soft:linear-gradient(135deg,#E2F7F7,#F0FAF6);
  --grad-deep:linear-gradient(160deg,#0A7A7A,#22BFBF 54%,#34CFCF);
  --grad-line:linear-gradient(90deg,#22BFBF,#3ED9D2);
  --sh-sm:0 1px 2px rgba(24,40,32,.06),0 1px 1px rgba(24,40,32,.04);
  --sh-md:0 2px 6px rgba(24,40,32,.07),0 12px 32px -12px rgba(24,40,32,.14);
  --sh-lg:0 4px 10px rgba(24,40,32,.08),0 24px 60px -16px rgba(24,40,32,.22);
  --r:16px; --r-sm:11px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-size:17px; line-height:1.85;
  font-family:"Noto Sans TC",-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased}
.shell{max-width:1280px; margin:0 auto; padding:0 clamp(14px,3vw,32px)}
.narrow{max-width:920px}
a{color:var(--brand-ink)}
h1,h2,h3{text-wrap:balance}
h1{font-family:"Noto Serif TC",serif; font-weight:900; font-size:clamp(30px,5.6vw,48px); line-height:1.28; margin:0 0 18px; letter-spacing:.01em}
h2{font-family:"Noto Serif TC",serif; font-weight:900; font-size:clamp(23px,3.6vw,31px); margin:0 0 10px}
h3{font-size:18px; margin:0 0 8px; font-weight:700}
p{margin:0 0 14px}
.sub{color:var(--ink2); margin-bottom:28px; font-size:16.5px; max-width:760px}
.fine{font-size:13.5px; color:var(--ink2)}

/* ── 頂欄：毛玻璃 ── */
.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.topbar{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none}
.logo svg{display:block}
.logo{overflow:visible}
.logomark{flex:0 0 34px; width:34px; height:34px; display:block; margin-left:-4px}
.logomark svg{width:100%; height:100%; display:block}
.logo .logobox{height:44px; overflow:hidden; display:flex; align-items:center}
.logo .logobox img{display:block; width:230px; height:auto; margin:-46px 0}
.footlogo .logobox{height:34px; overflow:hidden; display:flex; align-items:center}
.footlogo .logobox img{display:block; width:178px; height:auto; margin:-36px 0}

.slogan{font-size:13px; font-weight:600; color:var(--ink2); letter-spacing:.02em; white-space:nowrap;
  padding-left:11px; border-left:1px solid var(--line)}
@media(max-width:680px){.slogan{display:none}}
.nav{display:flex; gap:22px; align-items:center; font-size:15.5px}
.nav a{text-decoration:none; font-weight:600; color:var(--ink); white-space:nowrap; transition:color .18s}
.nav a:hover{color:var(--brand)}
.navcta{background:var(--grad); color:#fff !important;
  padding:9px 20px; border-radius:99px; font-weight:700; box-shadow:var(--sh-sm); transition:transform .18s,box-shadow .18s}
.navcta:hover{transform:translateY(-1px); box-shadow:var(--sh-md)}
@media(max-width:520px){.nav{gap:13px; font-size:14px}.navcta{padding:8px 14px}}
.crumbs{font-size:13.5px; color:var(--ink2); padding:14px 0 0}
.crumbs a{color:var(--ink2); text-decoration:none}
.crumbs a:hover{color:var(--brand)}

/* ── Hero：柔和品牌暈光 ── */
.hero{padding:76px 0 56px; position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-40% -20% auto;
  height:130%; background:
  radial-gradient(46% 60% at 18% 8%, color-mix(in srgb,var(--brand) 13%,transparent), transparent 70%),
  radial-gradient(38% 52% at 88% 22%, color-mix(in srgb,var(--brand-2) 9%,transparent), transparent 70%);
  pointer-events:none}
.hero>.shell{position:relative}
.hero.small{padding:40px 0 12px}
/* 內頁 hero：文字靠上對齊（上方原本有大片空位），圖片維持置中 */
.hero.small .herogrid{align-items:start}
.hero.small .heroart{align-self:center}
/* 圖下方的重點條，填掉文字上移後多出來的空間 */
.herofacts{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.herofact{display:inline-flex; align-items:center; gap:7px; background:var(--grad-soft);
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent); border-radius:99px;
  padding:7px 15px; font-size:14px; font-weight:700; color:var(--brand-ink)}
.herofact b{font-size:16px; font-variant-numeric:tabular-nums}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em;
  color:var(--brand-ink); background:var(--brand-soft); padding:5px 14px; border-radius:99px; margin-bottom:18px}
.lede{font-size:clamp(17px,2.4vw,19.5px); color:var(--ink2); max-width:700px}

/* ── 試算卡：主視覺焦點 ── */
.est{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 26px 20px; max-width:720px; margin-top:34px; box-shadow:var(--sh-lg)}
.est label{font-weight:700; font-size:15.5px; display:block; margin-bottom:12px}
.estrow{display:flex; gap:10px}
.estrow input{flex:1; min-width:0; font-size:17px; padding:14px 16px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--paper); color:var(--ink); transition:border-color .18s,box-shadow .18s}
.estrow input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.estrow button{background:var(--grad); color:#fff; border:0;
  border-radius:var(--r-sm); padding:14px 26px; font-size:17px; font-weight:800; cursor:pointer;
  box-shadow:var(--sh-sm); transition:transform .18s,box-shadow .18s}
.estrow button:hover{transform:translateY(-1px); box-shadow:var(--sh-md)}
.estout{margin-top:16px; padding:16px 18px; border-radius:var(--r-sm); background:var(--brand-soft);
  font-size:16px; border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.estout .big{font-size:30px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:.01em;
  color:var(--brand-ink); line-height:1.3}
.estout.warn{background:var(--alert-soft); border-color:color-mix(in srgb,var(--alert) 25%,transparent)}
.trio{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.tcell{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px}
.tcell .tl{font-size:12.5px; font-weight:700; color:var(--ink2); letter-spacing:.06em}
.tcell .big{font-size:22px}
.tcell .big small{font-size:13px; font-weight:700}
.ts{font-size:12.5px; color:var(--ink2)}
.est .fine{margin:12px 0 0}

/* ── 區塊 ── */
.sec{padding:64px 0}
@media(min-width:1000px){
  .sec{padding:84px 0}
  h1{font-size:clamp(38px,4vw,56px)}
  .card{padding:28px}
  .card p{font-size:16.5px}
  .card h3{font-size:19px}
  .stepbox{padding:28px}
}
.sec.alt{background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); margin-top:26px}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
@media(min-width:1000px){.grid.three{grid-template-columns:repeat(3,1fr)}}
/* 🔴 卡片排列要整齊：格數配合內容數，不要出現 3+1 這種落單（2026-08-30 Sam）
   四張＝一排四格、六張＝一排三格，桌面才不會有孤兒卡 */
@media(min-width:1000px){
  .grid.g4{grid-template-columns:repeat(4,1fr); gap:16px}
  .grid.g4 .card{padding:22px}
  .grid.g4 .card h3{font-size:17px}
  .grid.g4 .card p{font-size:15px}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .grid.g2{grid-template-columns:repeat(2,1fr)}
}
/* 🔴 flex column 是「底部元素對齊」的前提（Sam 2026-08-30 抓到標籤沒對齊）。
   沒有它，basisrow 的 margin-top:auto 完全沒有作用——
   auto margin 要在 flex 容器裡才會把元素推到另一端。
   內文長度不同的卡片，標籤就會各自貼在自己內文下方，高低不一。 */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column;
  box-shadow:var(--sh-sm); transition:transform .22s,box-shadow .22s}
.card:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.sec.alt .card{background:var(--paper)}
.card p{font-size:16px; margin:0; color:var(--ink2)}
/* 漸層點綴（Sam 2026-08-30 指定） */
.sechead .sn::after{background:var(--grad-line); opacity:1; height:2px}
.estout{background:var(--grad-soft)}
.tcell .big{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.qcta{background:var(--grad-soft)}
.card.path{position:relative; overflow:hidden; display:flex; flex-direction:column}
.card.path .ico{height:46px}
.card.path .badge{align-self:flex-start; height:26px; display:inline-flex; align-items:center}
.card.path h3{min-height:1.6em}
/* 次要標籤：淡底不搶主推方案的風采 */
.badge.alt{background:var(--grad-soft); color:var(--brand-ink);
  border:1px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.card.path::before{content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--grad)}
.postcard{position:relative; overflow:hidden}
.postcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad)}
.heroband h1{background:linear-gradient(120deg,#fff 62%,#C4F5F2); -webkit-background-clip:text; background-clip:text; color:transparent}
/* 痛點標籤（Sam 2026-08-30 三個要求）：
   ① 六格都放痛點，法源改成右邊的小字 .law
   ② 左右兩邊高度對齊——卡片轉 flex column，標籤那一列 margin-top:auto 貼底，
      文字長短不再影響標籤位置。只加在 .grid .card，不動其他區塊的卡片。
   ③ 標籤大一點——12.5px → 15px，內距一起放大才不會變成細長條。
   ⚠️ 這段在樣板字串裡，註解**不准用反引號**（會截斷字串，2026-08-30 踩過）。 */
.grid .card{display:flex; flex-direction:column}
.grid .card p{flex:1 0 auto}
/* 🔴 標籤列：同一排卡片的標籤要在同一條水平線上（Sam 2026-08-30）。

   原本是 flex + flex-wrap：法條字少時標籤與法條並排，字多時法條被擠到下一行，
   於是同一排卡片的標籤高度一張一個樣。

   改法有兩個關鍵，缺一個都還是會歪：
     ① margin-top:auto 把整列推到卡片底部（卡片本身要是 flex column）
     ② 標籤與法條各自獨立一行（grid 兩列），法條再長也不會把標籤擠開
   法條那行加 min-height，沒有法條的卡片也留同樣的空間，底線才切得齊。 */
.basisrow{display:grid; grid-template-rows:auto auto; gap:7px;
  margin-top:auto; padding-top:16px; justify-items:start}
.basis{display:inline-block; font-size:15px; font-weight:700; color:var(--brand-ink);
  background:var(--brand-soft); padding:6px 16px; border-radius:99px; letter-spacing:.02em}
/* 🔴 沒有法條的卡片也要佔掉同樣的高度，不然那張卡的標籤會往下掉一整行。
   用 ::after 撐出一行的高度（min-height 撐不住空元素，而且 gap 也會少算）。 */
.law{font-size:13px; color:var(--ink3,var(--ink2)); opacity:.75; line-height:1.5}
.basisrow:not(:has(.law)):not(:has(.lawmore))::after{content:''; display:block; height:calc(13px * 1.5)}

/**
 * ⚖️ 法條標示：三種情境，同一套視覺語言（2026-09-03 Sam 選「純視覺統一」）
 *
 * 站上原本有三種寫法，而且看起來像三個不同的網站：
 * 　 關卡與卡片　 law　　　13px 灰字，沒有任何標示 —— 最弱，看不出那是法源
 * 　 痛點卡底部　 basis　　淺青膠囊，已經是品牌色
 * 　 文章節尾　　 basisline 左線 ＋ 依據標籤 ＋ 灰字 —— 最完整
 *
 * 🔵 統一的做法**不是把三個變成同一個元件** —— 它們的容器寬度差很多，
 * 　 硬統一會把關卡卡片撐爆。是讓它們**用同一套語彙**：
 * 　 左邊一條品牌色的線 ＋ 一個青色小標籤，字級與灰度各自照容器調。
 *
 * ⚠️ 註解裡一個反引號都不能有 —— 整段 CSS 包在樣板字串裡（已經犯六次）。
 */
/**
 * 🔴 「依據」兩個字只能用偽元素，不能加 span
 * 　 —— 後台編輯讀的是 textContent，多一個 span 會把「依據」一起存進內容。
 * 　 線改用 border-left（把唯一剩下的 before 讓給文字）。
 */
.law, .lawmore{display:block; opacity:1; color:var(--ink2); margin-top:9px;
  padding-left:11px; border-left:2px solid color-mix(in srgb,var(--brand) 34%,transparent)}
.law::before, .lawmore > summary::before{content:"依據"; font-weight:700;
  color:var(--brand-ink); margin-right:5px; letter-spacing:.04em; font-size:12px}
/* 卡片底部那一行本來就靠 grid 排，不要被 block 化影響對齊 */
.basisrow .law, .basisrow .lawmore{margin-top:0}

/* ── ⚖️ 法條標籤：只秀第一條，其餘收進「+N」（Sam 2026-08-30）──
   「不用秀這麼多法律，或者用展開的方式」。
   用 <details> 不用 JS：鍵盤可操作，而且列印時瀏覽器會自動展開。 */
.lawmore{font-size:13px; line-height:1.5}
/* 🔴 flex-wrap:wrap 會讓長條號換行，那一張卡就比別人高 26px（實測）。
   改成不換行：條號本身用 nowrap，容器允許橫向收縮。
   條號都是「土地登記規則第 97 條第 3 項」這種長度，卡片寬度放得下。
   ⚠️ CSS 是寫在 template literal 裡的，註解不能用反引號——會把字串切斷。 */
.lawmore summary{list-style:none; cursor:pointer; display:inline-flex; align-items:baseline;
  gap:7px; flex-wrap:nowrap; white-space:nowrap; max-width:100%;
  border-radius:6px; transition:background .14s}
.lawmore summary .lawmain{overflow:hidden; text-overflow:ellipsis}
.lawmore summary::-webkit-details-marker{display:none}
.lawmore summary:hover .lawmain{color:var(--brand-ink); opacity:1}
.lawmain{color:var(--ink3,var(--ink2)); opacity:.75}
.lawn{flex-shrink:0; font-size:11.5px; font-weight:800; color:var(--brand-ink);
  background:var(--brand-soft); padding:1px 8px; border-radius:99px; letter-spacing:.02em}
.lawmore[open] .lawn{background:var(--grad); color:#fff}
.lawrest{display:grid; gap:3px; margin-top:6px; padding-left:11px;
  border-left:2px solid color-mix(in srgb,var(--brand) 30%,transparent)}
.lawrest span{color:var(--ink3,var(--ink2)); opacity:.75; font-size:13px}
.badge{display:inline-block; background:var(--grad); color:#fff;
  font-size:12.5px; font-weight:700; padding:3px 12px; border-radius:99px; margin-bottom:12px}
em{font-style:normal; background:linear-gradient(transparent 60%,var(--brand-soft) 60%)}
.ico{width:46px; height:46px; margin-bottom:12px}
.ico svg{width:100%; height:100%}

/* ── 滿版頁首 band（8891 式：滿版色塊＋工具卡＋資料量背書） ── */
/* 頁首多層漸層（2026-08-30 Sam：漸層做多一點變化）
   四層疊出深度：① 底層對角主漸層 ② 三顆彩色光暈 ③ 地籍格線 ④ 頂部亮邊 */
/* 六層混色：不只深淺，加入不同色相（青／藍／金）才有變化 */
.heroband{color:#fff; padding:40px 0 0; position:relative; overflow:hidden;
  background:
    radial-gradient(46% 52% at 6% -4%, rgba(90,240,220,.60), transparent 60%),
    radial-gradient(40% 46% at 88% 6%, rgba(52,180,235,.44), transparent 64%),
    radial-gradient(34% 40% at 74% 62%, rgba(255,214,107,.20), transparent 66%),
    radial-gradient(44% 50% at 30% 88%, rgba(20,205,200,.34), transparent 68%),
    radial-gradient(76% 86% at 58% 112%, rgba(4,60,62,.70), transparent 72%),
    linear-gradient(152deg,#07666A 0%,#0E8A8A 30%,#16A3A0 58%,#22BFBA 82%,#38D6D0 100%);
  background-size:190% 190%,175% 175%,160% 160%,185% 185%,210% 210%,100% 100%;
  background-position:0% 0%,100% 0%,70% 60%,25% 100%,50% 100%,0 0}
/* 光暈緩慢流動——30 秒一圈，尊重減少動態偏好 */
@media (prefers-reduced-motion: no-preference){
  .heroband{animation:bandflow 30s ease-in-out infinite alternate}
}
@keyframes bandflow{
  0%{background-position:0% 0%,100% 0%,70% 60%,25% 100%,50% 100%,0 0}
  50%{background-position:22% 16%,74% 22%,48% 44%,52% 80%,42% 88%,0 0}
  100%{background-position:8% 30%,92% 4%,84% 74%,10% 92%,58% 96%,0 0}
}
/* 頂部一道亮邊，讓 band 有立體感 */
.heroband::after{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); pointer-events:none}
.heroband::before{content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    radial-gradient(120% 100% at 50% 0%,transparent 40%,rgba(0,0,0,.16) 100%);
  background-size:64px 64px,64px 64px,100% 100%; pointer-events:none}
.heroband>.shell{position:relative; z-index:1}
.heroband h1{color:#fff}
.heroband .lede{color:rgba(255,255,255,.88)}
.eyebrow.inv{background:rgba(255,255,255,.16); color:#fff}
.heroband .fine{color:var(--ink2)}
.heroband .est{margin-bottom:44px}
.heroband .heroart{background:#fff; border-radius:var(--r); padding:16px; box-shadow:var(--sh-lg);
  align-self:end; margin-bottom:44px}
.skyline{display:block; width:100%; height:110px; position:relative; z-index:0}
@media(max-width:820px){.heroband{padding-top:26px}.heroband .est{margin-bottom:30px}}

/* ── 試算卡的拍照入口 ── */
.orline{display:flex; align-items:center; gap:12px; margin:14px 0 10px; color:var(--ink2); font-size:13px}
.orline::before,.orline::after{content:""; flex:1; height:1px; background:var(--line)}
.photobtn{width:100%; background:var(--card); color:var(--brand-ink); border:1.5px dashed var(--brand);
  border-radius:var(--r-sm); padding:13px; font-size:16px; font-weight:700; cursor:pointer;
  transition:background .18s,transform .18s}
.photobtn:hover{background:var(--brand-soft); transform:translateY(-1px)}
.filelab input{padding:10px}
.photolist{display:flex; gap:8px; flex-wrap:wrap}

/* 為什麼要謄本（Sam 2026-08-30：「告訴客戶傳謄本的用途，會讓作業更方便」）
   放在上傳欄位正下方——要在他猶豫「為什麼要給你這個」的當下就回答。
   底色比表單淺一階，看得出是說明不是輸入欄。 */
.whydoc{background:var(--grad-soft); border-left:3px solid var(--brand);
  border-radius:0 12px 12px 0; padding:14px 16px; margin-top:-4px}
/* 🔴 字級照憲法「說明文字要夠大，不要細灰小字」——
   這段是要說服客戶交出謄本的，字小了沒人看。 */
.whydoc b{display:block; font-size:16px; color:var(--brand-ink); margin-bottom:9px}
.whydoc p{font-size:15.5px; line-height:1.8; color:var(--ink); margin:0}
.whydoc p + p{margin-top:9px}
.whydoc em{font-style:normal; font-weight:700; color:var(--brand-ink)}
.whydoc .tiny{font-size:14.5px; color:var(--ink2)}
/* 三份文件各一列：文件名固定寬度對齊，用途接在後面 */
.docrow{display:grid; grid-template-columns:74px 1fr; gap:12px; margin-bottom:9px;
  font-size:15px; line-height:1.75; align-items:start}
.docrow .dt{font-weight:800; color:#fff; background:var(--grad); text-align:center;
  padding:3px 0; border-radius:99px; font-size:13.5px; margin-top:3px}
.docrow .dd{color:var(--ink)}
.whydoc .docrow + p{margin-top:13px; padding-top:11px;
  border-top:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.whydoc a{color:var(--brand-ink); font-weight:700}
/* ── 📄 三份文件長什麼樣（點標籤展開示意圖）── */
.docsam{margin:16px 0 4px}
.docsam > b{display:block; font-size:15px; font-weight:800; color:var(--brand-ink); margin-bottom:10px}
.samtabs{display:grid; gap:8px}
.samitem{border:1px solid var(--line); border-radius:11px; background:#fff; overflow:hidden}
.samitem[open]{border-color:var(--brand)}
.samitem summary{display:flex; align-items:center; gap:11px; padding:11px 14px;
  cursor:pointer; list-style:none; font-size:15px}
.samitem summary::-webkit-details-marker{display:none}
.samitem summary::after{content:'▸'; margin-left:auto; color:var(--brand);
  font-size:14px; transition:transform .18s}
.samitem[open] summary::after{transform:rotate(90deg)}
.samitem summary:hover{background:var(--grad-soft)}
.samitem .k{flex-shrink:0; min-width:52px; text-align:center; font-size:13px; font-weight:800;
  color:#fff; background:var(--grad); padding:3px 0; border-radius:99px}
.samitem .n{font-weight:700; color:var(--ink)}
.samitem .w{font-size:13.5px; color:var(--ink2)}
.sampic{padding:14px; background:#F7FBFB; border-top:1px solid var(--line); text-align:center}
/* 圖上面先用一句話講「怎麼認」——有些人看圖還是不確定 */
.samhint{font-size:13.5px; color:var(--sub); margin:0 0 11px; line-height:1.6}
.sampic svg{width:100%; max-width:300px; height:auto; border-radius:8px;
  box-shadow:0 2px 12px rgba(16,40,50,.1)}
@media(max-width:520px){ .samitem .w{display:none} }
.ptag{background:var(--brand-soft); color:var(--brand-ink); font-size:14px; font-weight:700;
  padding:6px 12px; border-radius:99px}
.ptag b{cursor:pointer; margin-left:4px}

/* ── 四步流程 ── */
.steps{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:26px}
@media(min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.stepbox{background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px;
  box-shadow:var(--sh-sm); position:relative}
.stepn{width:40px; height:40px; border-radius:50%;
  background:var(--grad); color:#fff; font-weight:900;
  display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px;
  box-shadow:var(--sh-sm)}
.stepbox p{font-size:15px; margin:0; color:var(--ink2)}

/* ── 文章 ── */
.postcard{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--sh-sm); text-decoration:none; color:var(--ink);
  transition:transform .22s,box-shadow .22s; margin-bottom:16px}
.postcard:hover{transform:translateY(-3px); box-shadow:var(--sh-md)}
.postcard time{font-size:13px; color:var(--ink2); font-weight:600}
.postcard h2{font-size:21px; margin:6px 0 8px}
.postcard p{font-size:15.5px; color:var(--ink2); margin:0 0 10px}
.upcoming{list-style:none; padding:0; margin:16px 0}
.upcoming li{padding:13px 0 13px 30px; border-bottom:1px solid var(--line); color:var(--ink2);
  font-size:15.5px; position:relative}
.upcoming li::before{content:"○"; position:absolute; left:6px; color:var(--brand)}
/**
 * 📰 文章的小標（2026-09-03 Sam：「內文標題要有個顏色或加點樣式」）
 *
 * 原本只有字級 20px 與上方間距，沒有顏色，整篇看起來是一片灰。
 *
 * 🔵 沿用站上已經有的語彙，不發明新風格：
 * 　「左側一條品牌色的短線」在文章卡與說明框已經在用了，
 * 　 讀者掃過整站會覺得是同一套設計。
 *
 * ⚠️ 三件刻意不做的：
 * 　 ① 不加底線與背景色 —— 那會跟頁面上其他的框框打架
 * 　 ② 不放大字級 —— 20px 對 H2 夠了，再大會蓋過 h1
 * 　 ③ 🔴 不在偽元素裡放符號（📌 之類）—— 那會被螢幕報讀器念出來
 *
 * 🔴 這段註解裡一個反引號都不能有 —— 整段 CSS 包在樣板字串裡，
 * 　 反引號會把它切斷。憲法第一編第3章記過，這是第五次犯。
 */
.arth{font-size:20px; margin-top:38px; margin-bottom:12px; position:relative;
  padding-left:14px; color:var(--brand-ink); line-height:1.45}
.arth::before{content:""; position:absolute; left:0; top:.18em; bottom:.18em;
  width:3px; border-radius:2px; background:var(--grad-line)}
/**
 * H3 小節（2026-09-03）：一節裡並列的幾個情況。
 * 🔬 量對手時發現的缺口：市場先生那篇 H3 有 8 個，我們 0 個。
 * 比 H2 輕——沒有左線、字級小一階，讀者才分得出這是同一節裡的分支。
 * ⚠️ 註解裡不准有反引號（整段 CSS 在樣板字串裡，已經犯六次）。
 */
.arth3{font-size:17px; font-weight:800; color:var(--ink); margin:24px 0 8px;
  max-width:var(--artw); line-height:1.5}
.arth3 + .qa-p{margin-top:0}
/**
 * 📑 文章目錄（2026-09-03）。只有 5 節以上才產生。
 * 🔵 對讀者：11 節的長文要能跳。對 AI：那是「涵蓋哪些子問題」的結構化摘要。
 * ⚠️ 註解裡不准有反引號（整段 CSS 在樣板字串裡）。
 */
.toc{margin:6px 0 26px; padding:16px 20px; border-radius:var(--r-sm);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--sh-sm)}
.toc .toct{display:block; font-size:12.5px; font-weight:800; letter-spacing:.1em;
  color:var(--brand-ink); margin-bottom:9px}
.toc ol{margin:0; padding-left:20px; display:grid; gap:5px}
.toc li{font-size:15.5px; line-height:1.6}
.toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent}
.toc a:hover{color:var(--brand-ink); border-bottom-color:currentColor}
/* 跳過去時不要被上方的導覽列蓋住 */
.arth{scroll-margin-top:78px}
/* 🔴 小標底下第一段不要再吃 margin-top，不然間距會變兩倍 */
.arth + .qa-p{margin-top:0}

/* ── 📚 問答分組的組標題 ── */
.qgh{font-size:23px; margin:0 0 8px}
.qgd{font-size:15.5px; color:var(--ink2); margin:0 0 20px; line-height:1.75}

/* ── 🔗 延伸閱讀：把每一頁接回主題叢集 ──
   ⚠️ 版面刻意做得**低調**——它是導航不是主角，
   　 做得太搶眼會把讀者從正文拉走（那正好是跳出率）。 */
.related{padding:40px 0}
.rh{font-size:17px; margin:0 0 14px; color:var(--ink2); font-weight:700;
  letter-spacing:.04em}
.rh::before{content:"→"; color:var(--brand); margin-right:8px}
.rlist{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px}
.rlist li{background:var(--paper); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-size:15px; display:inline-flex; align-items:center; gap:8px;
  transition:border-color .18s, transform .18s}
.rlist li:hover{border-color:var(--brand); transform:translateY(-1px)}
.rlist a{color:var(--ink); text-decoration:none}
.rlist a:hover{color:var(--brand)}
/* 🔴 回總覽那條要看得出來不一樣——那是「向上」的連結，權重都往它集中 */
.rlist li.rup{background:color-mix(in srgb,var(--brand) 8%,var(--paper));
  border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
.rtag{font-size:12px; color:var(--brand); font-weight:700; letter-spacing:.05em}
@media(max-width:560px){ .rlist{flex-direction:column} .rlist li{width:100%} }

/* ── 區塊底紋：淡淡的地籍格線 ── */
.sec.alt{background-image:linear-gradient(color-mix(in srgb,var(--brand) 4%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--brand) 4%,transparent) 1px,transparent 1px);
  background-size:56px 56px}

/* ── QA 手風琴（Google FAQ：內容在頁上、點了展開） ── */
.qa-acc{display:flex; flex-direction:column; gap:12px; margin-top:26px}
details.qa{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--sh-sm); overflow:hidden; transition:box-shadow .22s}
details.qa:hover{box-shadow:var(--sh-md)}
details.qa summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:14px; padding:19px 22px; font-weight:700; font-size:16.5px}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:""; flex:0 0 12px; height:12px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg); transition:transform .25s; margin-top:-4px}
details.qa[open] summary::after{transform:rotate(-135deg); margin-top:6px}
details.qa .qa-a{padding:2px 22px 20px; font-size:16px; color:var(--ink)}
details.qa .qa-a p{margin:0 0 12px}
.qh{margin-top:26px}
.qa-p{font-size:17px}
/**
 * 📰 文章內文（2026-09-03 Sam：「每個段落的內文太亂了」）
 *
 * 原本 .qa-p 只有字級，段落之間沒有間距、表格完全沒有樣式。
 * 這一段補三件：段落節奏、表格外觀、寬內容左右捲。
 *
 * 🔴 註解裡不准出現反引號 —— 整段 CSS 包在樣板字串裡，
 * 　 反引號會把它切斷（憲法第一編第3章，已經犯五次）。
 */
/**
 * ❌ **已作廢（2026-09-03 同一天被推翻，留著避免半年後又走一次）**
 *
 * 當時的判斷：容器 920px、字級 17px ＝ 每行 54 字，
 * 而中文舒適行寬是 30 到 40 字，所以設 max-width:34em 收窄。
 *
 * 🔴 **Sam 當場否決**：「左右太窄了，旁邊很多位置」。
 * 　 34em 只有 578px，容器 920px —— 右邊空掉 340px，看起來像沒排完。
 *
 * 🔬 實測（拿他截圖那個視窗寬度 1132px 量的）：
 * 　 視窗 1132 → 容器 920 → 段落 856（扣掉 padding 64）→ 每行 50 字
 *
 * 🔴 **這段註解自己就犯了第六次那個錯**：我原本用三個反引號框住上面那行，
 * 　 而整段 CSS 包在樣板字串裡 —— 反引號當場把它切斷，build 語法錯。
 * 　 👉 這個檔的註解裡**連程式碼區塊都不能用**，要縮排代替。
 *
 * ⚠️ **我第一次寫這段註解時填了「約 700px、41 字」——那是推測，沒量**。
 * 　 實際是 856px、50 字。同一天第四次拿沒量過的數字當事實。
 *
 * 🔵 所以現行狀態是「**每行 50 字，比建議值寬**」，那是 Sam 的選擇：
 * 　 他要文字用滿容器，不要右邊空一塊。
 * 👉 真的要收窄的話改上面那個 artw 變數一個數字就好，四個元件會一起跟上。
 */
/**
 * 📏 文章的內文寬度（2026-09-03 Sam：「左右太窄了，旁邊很多位置」）
 *
 * 🔴 我第一版設 34em（約 578px），而容器是 920px ——
 * 　 右邊硬生生空掉 340px，他看到的就是那塊沒用到的位置。
 *
 * 🔵 改成用一個變數控制，內文與所有元件共用它：
 * 　 以後要調寬窄只改這一個數字，不會出現「段落寬、卡片窄」的參差。
 *
 * ⚠️ 那個 30 到 40 字的閱讀建議仍然成立，只是**不該用寫死的 em 去卡**——
 * 　 容器本身已經是 920px，在一般筆電視窗實際顯示約 700px、
 * 　 換算約 41 個字，本來就落在舒適區間裡。
 */
:root{--artw:100%}
.narrow .qa-p{margin:0 0 20px; line-height:1.95; letter-spacing:.012em; max-width:var(--artw)}
.narrow .qa-p:last-child{margin-bottom:0}
.narrow .qa-p strong{color:var(--ink); font-weight:800}

/**
 * 📐 文章的三個元件（2026-09-03 Sam：「要專業的感覺」）
 *
 * 他給的參考文章講的是「頁面區塊佈局」（圖片怎麼排），
 * 11 種裡只有「卡片排版」用得上長文。其餘是圖文左右、去背、宮格那類。
 *
 * 🔵 長文的專業感不是靠加裝飾，是靠三件事：
 * 　 ① 一眼看到結論　② 依據看得出來　③ 同類的東西長得一樣
 *
 * 所以做三個元件，不做花的：
 * 　 結論卡（keyc）　把每節的答案獨立出來，讀者掃過去就懂
 * 　 依據列（basisline）　法條集中放在節尾，像法律文件那樣
 * 　 重點框（note）　提醒與陷阱，跟正文區隔
 */
.keyc{background:var(--grad-soft); border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:var(--r-sm); padding:16px 20px; margin:4px 0 20px; max-width:var(--artw)}
.keyc .kt{display:block; font-size:12.5px; font-weight:800; letter-spacing:.1em;
  color:var(--brand-ink); margin-bottom:7px}
.keyc p{margin:0; font-size:17px; line-height:1.8; color:var(--ink)}
.keyc p strong{font-weight:800}

/* 依據列：節尾那一行法條，字小、灰、不搶戲 */
.basisline{max-width:var(--artw); margin:-6px 0 22px; padding-left:13px;
  border-left:2px solid color-mix(in srgb,var(--brand) 32%,transparent);
  font-size:14.5px; line-height:1.75; color:var(--ink2)}
.basisline b{font-weight:700; color:var(--brand-ink); margin-right:6px;
  letter-spacing:.04em; font-size:13px}

/* 重點框：陷阱與提醒 */
.note{max-width:var(--artw); margin:4px 0 20px; padding:14px 18px; border-radius:var(--r-sm);
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--alert);
  font-size:16px; line-height:1.85}
.note p{margin:0}
.note p + p{margin-top:9px}

/* 表格：外面那層負責左右捲，憲法要求整頁不准橫捲 */
.tw{overflow-x:auto; margin:6px 0 20px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--card); box-shadow:var(--sh-sm)}
.tw table{border-collapse:collapse; width:100%; min-width:460px; font-size:15.5px}
.tw th,.tw td{padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); line-height:1.7}
.tw thead th{background:var(--grad-soft); color:var(--brand-ink);
  font-weight:800; font-size:14.5px; letter-spacing:.03em; white-space:nowrap}
.tw tbody tr:last-child td{border-bottom:0}
.tw td strong{color:var(--ink)}
/* 第一欄是分類名，讓它站出來 */
.tw tbody td:first-child{font-weight:700; color:var(--ink); white-space:nowrap}
.qcta{border:1.5px solid var(--brand); border-radius:var(--r); padding:22px 24px; margin:30px 0;
  background:var(--brand-soft); box-shadow:var(--sh-sm)}
.qcta p{margin:0 0 6px}
.rel{margin-top:44px}
.more{font-weight:800; text-decoration:none}
.more:hover{text-decoration:underline}
/**
 * 📎 正文裡的內部連結（2026-09-01）。
 *
 * 用 class 不用「p a」——那會誤傷卡片連結、麵包屑、CTA。
 *
 * 設計上要「看得出可以點，但不搶正文的戲」：
 *   顏色用品牌深青（跟正文的黑有明顯區別）
 *   底線用虛線——實線會讓一段話看起來滿是連結
 *   hover 才轉實線並上底色，那時使用者已經在看它了
 *
 * 不加背景色也不加圖示：那是長文，每個連結都有底色會像螢光筆塗過。
 */
/* ⌨️ 跳到主要內容——平常移到畫面外，按 Tab 才浮出來 */
.skip{position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--brand-ink); color:#fff; padding:10px 18px;
  border-radius:0 0 10px 0; font-weight:800; text-decoration:none}
.skip:focus{left:0}
/**
 * 🔗 **正文裡的連結不改字體顏色，只留一條底線**
 * 　（2026-09-02 Sam 截圖：「整段文章看起來很亂，
 * 　　有加連結的地方是不是不要改變字體顏色?」）
 *
 * ── 為什麼原本會亂 ───────────────────────────
 * 舊寫法一個連結同時發三個訊號：**變色 ＋ 加粗 ＋ 底線**。
 * 而正文本來就有「粗體」在強調重點——於是同一段裡有兩套強調在打架。
 *
 * 實測「公同共有和分別共有差在哪」那頁第二段：**148 字裡 7 個強調**
 *（3 個內部連結 ＋ 1 個法條 ＋ 3 個粗體），每 21 字一個。
 *
 * 🔵 **拿掉顏色與加粗之後，強調的層次就分開了**：
 * 　 粗體 ＝「這句話的重點」　　底線 ＝「這裡可以點」
 * 　 兩件事本來就不一樣，不該長得一樣。
 *
 * ⚠️ **底線不能一起拿掉**（WCAG 2.1 §1.4.1）：連結不可以只靠顏色辨識。
 * 　 現在反過來——只靠底線、完全不靠顏色，那比原本更合規。
 *
 * 🔵 用 currentColor 讓它在任何底色上都成立（法條標籤的淺青格子也是），
 * 　 不用為每個情境各寫一條。瀏覽器不支援 color-mix 時退回前一行的 rgba。
 *
 * ⚠️ **這段註解不准用反引號**——CSS 整段在樣板字串裡，
 * 　 一個反引號就把字串切斷。憲法第一編第3章，我 2026-09-02 又犯一次。
 */
a.ilk{color:inherit; font-weight:inherit; text-decoration:none;
  border-bottom:1px solid rgba(92,104,94,.42);
  border-bottom-color:color-mix(in srgb, currentColor 34%, transparent);
  padding-bottom:1px; transition:color .16s, border-color .16s, background .16s}
a.ilk:hover{color:var(--brand-ink); border-bottom-color:var(--brand-ink);
  background:rgba(34,191,191,.09)}
/**
 * ⚖️ **法條連到全國法規資料庫**（2026-09-01）。
 *
 * 跟內部連結（a.ilk）**長得不一樣**——那是刻意的：
 * 　內部連結＝站內的另一頁　　法條連結＝離開本站去看官方原文
 * 讀者在點下去之前就該知道會去哪裡。
 *
 * 🔴 **2026-09-02 改：也不再變色與加粗**（跟 a.ilk 同一個理由）。
 * 　 兩者的差別改由**那個 ↗ 箭頭**承擔——箭頭本來就是「會離開本站」的通用符號，
 * 　 用它比用顏色明確得多，而且不吃掉正文的視覺配額。
 *
 * ⚠️ 顏色改成 inherit 之後，在法條標籤（淺青底的小格子）裡會跟著格子的字色走，
 * 　 不用再為那個情境另外寫一條——下面那兩行只剩背景的處理。
 */
a.lawlink{color:inherit; font-weight:inherit; text-decoration:none;
  border-bottom:1px solid rgba(92,104,94,.42);
  border-bottom-color:color-mix(in srgb, currentColor 40%, transparent);
  padding-bottom:1px; transition:color .16s, border-color .16s, background .16s}
a.lawlink::after{content:"↗"; font-size:.78em; margin-left:2px; opacity:.6;
  font-weight:800; vertical-align:1px}
a.lawlink:hover{color:var(--brand-ink); border-bottom-color:var(--brand-ink);
  background:rgba(34,191,191,.12)}
a.lawlink:hover::after{opacity:1}
/* 法條標籤裡的連結：底色已經是淺青，再加背景會糊掉 */
.law a.lawlink, .basis a.lawlink{border-bottom-color:currentColor}
.law a.lawlink:hover, .basis a.lawlink:hover{background:transparent; opacity:.75}
/**
 * 🖱️ 拖曳檔案時蓋上去的提示（2026-09-01）。
 *
 * 沒有這層的話，使用者不知道「這一頁接不接受拖曳」——
 * 他會拖到一半又放回去。整頁都是放置區，所以提示也蓋滿整頁。
 *
 * pointer-events:none 很重要：不擋住底下元素的 drop 事件。
 */
.dropmask{position:fixed; inset:0; z-index:60; pointer-events:none;
  background:rgba(14,140,140,.13); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center}
.dropbox{background:#fff; border:2px dashed var(--brand); border-radius:18px;
  padding:26px 40px; text-align:center; box-shadow:0 18px 50px -18px rgba(24,40,32,.4)}
.dropbox b{display:block; font-size:22px; font-weight:900; color:var(--brand-ink)}
.dropbox span{display:block; margin-top:6px; font-size:14px; color:var(--ink2)}

/* ── 九關時間軸 ── */
.gates{margin-top:30px}
.gate{display:flex; gap:18px; padding:0 0 34px; position:relative}
.gate::before{content:""; position:absolute; left:18px; top:42px; bottom:0; width:2px;
  background:linear-gradient(var(--brand) 0%,var(--line) 100%)}
.gate:last-child::before{display:none}
.gnum{flex:0 0 38px; height:38px; border-radius:50%;
  background:var(--grad); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; position:relative; z-index:1;
  box-shadow:var(--sh-sm)}
.gbody{flex:1; min-width:0}
.ghead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.clock{font-size:13px; font-weight:700; color:var(--alert); background:var(--alert-soft);
  padding:3px 12px; border-radius:99px; white-space:nowrap}
.gbody p{font-size:15.5px}
.stuck{border-left:3px solid var(--alert); background:var(--alert-soft); padding:12px 16px;
  border-radius:0 var(--r-sm) var(--r-sm) 0; margin-top:10px}
.total{background:var(--grad); color:#fff;
  border-radius:var(--r); padding:28px 30px; margin-top:12px;
  display:flex; gap:22px; align-items:center; flex-wrap:wrap; box-shadow:var(--sh-md)}
.total span{font-size:44px; font-weight:900; font-variant-numeric:tabular-nums; line-height:1}
.total p{margin:0; flex:1; min-width:250px; opacity:.96; font-size:15.5px}

/* ── 表單 ── */
.formwrap{background:var(--card); border-top:1px solid var(--line); padding:64px 0 72px}
form{display:flex; flex-direction:column; gap:16px; margin-top:24px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--sh-md)}
form label{display:flex; flex-direction:column; gap:7px; font-weight:700; font-size:15px}
form input,form textarea{font-size:17px; padding:13px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-sm); background:var(--card); color:var(--ink); font-family:inherit;
  transition:border-color .18s,box-shadow .18s}
form input:focus,form textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.two{display:grid; gap:16px; grid-template-columns:1fr 1fr}
@media(max-width:520px){.two{grid-template-columns:1fr}}
form button{background:var(--grad); color:#fff; border:0;
  border-radius:var(--r-sm); padding:16px; font-size:18px; font-weight:900; cursor:pointer; margin-top:6px;
  box-shadow:var(--sh-sm); transition:transform .18s,box-shadow .18s}
form button:hover{transform:translateY(-1px); box-shadow:var(--sh-md)}
form button:disabled{opacity:.6; transform:none}
.hp{position:absolute; left:-9999px; height:0; width:0; opacity:0}
.msg{font-weight:700; min-height:1.5em}
.msg.ok{color:var(--brand-ink)}
.msg.err{color:var(--alert)}

/* ── 💬 送出成功後的加 LINE 區（Sam 2026-08-31）──
   平常 hidden，送出成功才由 site.js 打開並捲到畫面中央。 */
/* 💬 表單【前面】那條 LINE 的路（Sam 2026-08-31）
   跟送出後的 .sentline 是兩回事：那個是強調的實心框，這個是**備選路徑**，
   所以用比較安靜的樣式——不能搶走表單的視覺焦點。 */
.lineway{display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  margin:0 0 22px; padding:18px 22px; border-radius:14px;
  border:1px solid var(--line); background:var(--paper2,#fafafa)}
.lw-text{flex:1; min-width:250px}
.lw-text>b{display:block; font-size:16.5px; color:var(--ink); margin-bottom:5px}
.lw-text>span{display:block; font-size:14px; color:var(--ink2); line-height:1.6; margin-bottom:14px}
/* 按鈕與 ID 同一行——各自一行的話這一區會多佔 40px 高，把表單推下去 */
.lw-act{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.lw-btn{display:inline-block; background:#06C755; color:#fff; font-weight:800;
  font-size:15px; padding:10px 22px; border-radius:10px; text-decoration:none;
  box-shadow:0 2px 8px rgba(6,199,85,.25); white-space:nowrap}
.lw-btn:hover{background:#05B34C}
.lw-id{font-size:13.5px; color:var(--ink3,var(--ink2)); white-space:nowrap}
.lw-id b{display:inline-block; margin-left:6px; font-size:15px; color:var(--ink);
  font-family:ui-monospace,Menlo,monospace; letter-spacing:.5px;
  background:#fff; border:1px solid var(--line); border-radius:7px; padding:2px 9px}
.lw-qrbox{margin:0; flex-shrink:0; text-align:center}
.lw-qr{display:block; border-radius:11px; background:#fff; padding:7px;
  box-shadow:0 2px 10px rgba(0,0,0,.07)}
.lw-qrbox figcaption{margin-top:7px; font-size:12.5px; color:var(--ink3,var(--ink2))}
/* 🔴 手機掃不了自己螢幕上的 QR——那一格只會佔位子，收起來 */
@media(max-width:560px){ .lw-qrbox{display:none} }

.sentline{margin-top:20px; padding:20px; border-radius:16px;
  border:2px solid var(--brand); background:var(--grad-soft)}
.sentline[hidden]{display:none}
.sl-head b{display:block; font-size:17px; color:var(--brand-ink); margin-bottom:5px}
.sl-head span{display:block; font-size:14px; color:var(--ink2); line-height:1.65}
.sl-body{display:flex; align-items:center; gap:20px; margin-top:16px; flex-wrap:wrap}
.sl-qr{border-radius:12px; background:#fff; padding:7px;
  box-shadow:0 2px 12px rgba(0,0,0,.08); flex-shrink:0}
.sl-act{flex:1; min-width:210px}
.sl-btn{display:inline-block; background:#06C755; color:#fff; font-weight:800;
  font-size:16px; padding:13px 26px; border-radius:11px; text-decoration:none;
  box-shadow:0 3px 10px rgba(6,199,85,.3)}
.sl-btn:hover{background:#05B34C}
.sl-id{margin-top:13px; font-size:14.5px; color:var(--ink2)}
.sl-id b{display:inline-block; margin-left:7px; font-size:17px; color:var(--ink);
  font-family:ui-monospace,Menlo,monospace; letter-spacing:.5px;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:3px 11px}
.sl-tip{margin:9px 0 0; font-size:13px; color:var(--ink2)}
/* 手機：QR 沒有用（同一支手機掃不到自己），改成按鈕優先 */
@media (max-width:560px){
  .sl-body{flex-direction:column-reverse; align-items:stretch}
  .sl-qr{align-self:center}
  .sl-btn{display:block; text-align:center}
}

/* ── 頁尾 ── */
.foot{border-top:1px solid var(--line); padding:44px 0 52px; margin-top:24px}
.foot p{font-size:14.5px; margin:0 0 8px}
.footgrid{display:grid; gap:28px; grid-template-columns:1fr; margin-bottom:28px}
@media(min-width:760px){.footgrid{grid-template-columns:2fr 1fr 1fr 1fr; gap:36px}}
.footbrand p{font-size:14px; color:var(--ink2); max-width:300px}
.footcol{display:flex; flex-direction:column; gap:9px}
.footcol h3{font-size:14px; margin:0 0 4px; color:var(--ink)}
.footcol a{font-size:14px; color:var(--ink2); text-decoration:none}
.footcol a:hover{color:var(--brand)}
.footbottom{border-top:1px solid var(--line); padding-top:18px}
.footbottom p:last-child{margin:0; color:var(--ink2)}
.footlogo{margin-bottom:14px}

/* 九關統計格＝連到土地專區的入口 */
.statlink{text-decoration:none; color:inherit; display:block; position:relative;
  border-color:color-mix(in srgb,var(--brand) 36%,transparent);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.statlink:hover{transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--brand)}
.statgo{display:block; margin-top:8px; font-size:13px; font-weight:800; color:var(--brand-ink)}
.statlink:hover .statgo{text-decoration:underline}

/* 知識中心的專區卡：整張可點 */
.guidecard{display:flex; flex-direction:column; text-decoration:none; color:inherit; gap:2px}
.guidecard:hover{border-color:var(--brand)}
.guidecard .badge{align-self:flex-start}
.guiden{font-size:30px; font-weight:900; line-height:1.1; margin:6px 0 4px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums}
.guidecard .more{margin-top:auto; padding-top:12px}
/* 總計區的說明文字放大（2026-08-30 Sam） */
.total p{font-size:17px; line-height:1.8}
@media(min-width:1000px){.total p{font-size:18px}}

/* ── 漸層與線條的層次（2026-08-30 Sam：加漸層或線條給變化）── */
/* 法條標籤：淡漸層底＋左側實色細線，像書籤 */
.basis{background:var(--grad-soft); border-left:3px solid var(--brand);
  border-radius:0 99px 99px 0; padding-left:12px}
/* 🔴 展開式法條標籤要跟單條的 .basis **完全同高**，否則同一排會差 20px。
   單條走 .basis、多條走 summary，兩邊的 padding／font-size／line-height
   必須一模一樣——這裡把 summary 調成跟上面 .basis 相同的規格。
   （2026-08-30 實測：不統一時第一張卡比其他三張高 20px） */
.lawmore summary,
.card > .basis,
.gbody > .basis{font-size:15px; line-height:1.5; padding:6px 16px}
.gbody .lawmore summary,
.gbody > .basis{background:var(--grad-soft); border-left:3px solid var(--brand);
  border-radius:0 99px 99px 0; padding-left:12px; font-weight:700; color:var(--brand-ink)}
.gbody .lawmore summary:hover{filter:brightness(.97)}
.gbody .lawmain{color:var(--brand-ink); opacity:1; font-size:15px}
.gbody .lawrest{margin-left:3px}
/* 眉標：淡漸層底＋細邊 */
.eyebrow{background:var(--grad-soft); border:1px solid color-mix(in srgb,var(--brand) 26%,transparent)}
.eyebrow.inv{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34)}
/* 照片標籤 */
.ptag{background:var(--grad-soft); border:1px solid color-mix(in srgb,var(--brand) 24%,transparent)}
/* 時間標籤：警示色的淡漸層 */
.clock{background:linear-gradient(135deg,var(--alert-soft),#FDF3EF);
  border:1px solid color-mix(in srgb,var(--alert) 24%,transparent)}
/* 步驟與關卡編號：加內光讓圓球有立體感 */
.stepn,.gnum{background:var(--grad);
  box-shadow:var(--sh-sm),inset 0 1px 0 rgba(255,255,255,.34)}
/* CTA 區塊：漸層底＋頂部一條實色線 */
.qcta{position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--brand) 32%,transparent)}
.qcta::before{content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--grad)}
/* 卡片：hover 時左緣浮現漸層線 */
.card{position:relative; overflow:hidden}
.card::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); opacity:0; transition:opacity .22s}
.card:hover::after{opacity:1}
/* 區塊之間用漸層細線分隔，取代硬邊框 */
.sec.alt{border-top:0; border-bottom:0; position:relative}
.sec.alt::before,.sec.alt::after{content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 34%,transparent),transparent)}
.sec.alt::before{top:0}.sec.alt::after{bottom:0}
/* 頁尾頂線也換成漸層 */
.foot{border-top:0; position:relative}
.foot::before{content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand) 34%,transparent),transparent)}
/* 手風琴：展開時左緣漸層線 */
details.qa{position:relative; overflow:hidden}
details.qa::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); opacity:0; transition:opacity .22s}
details.qa[open]::before{opacity:1}

/* ── 加到主畫面提示條（只在手機出現，桌面隱藏）── */
.a2hs{display:none}
@media(max-width:720px){
  .a2hs{display:flex; align-items:center; gap:12px; position:fixed; left:10px; right:10px; bottom:74px;
    z-index:40; background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:12px 14px; box-shadow:var(--sh-lg);
    transform:translateY(16px); opacity:0; transition:transform .25s ease, opacity .25s ease}
  .a2hs.in{transform:none; opacity:1}
  .a2hs[hidden]{display:none}
  .a2hs-ico{flex:0 0 38px; width:38px; height:38px}
  .a2hs-ico svg{width:100%; height:100%; display:block}
  .a2hs-txt{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35}
  .a2hs-txt b{font-size:15px}
  .a2hs-txt span{font-size:12.5px; color:var(--ink2)}
  .a2hs-btn{flex:0 0 auto; background:var(--grad); color:#fff; border:0; border-radius:99px;
    padding:9px 18px; font-size:14.5px; font-weight:800; cursor:pointer}
  .a2hs-x{position:absolute; top:-9px; right:-9px; width:26px; height:26px; border-radius:50%;
    background:var(--card); border:1px solid var(--line); color:var(--ink2); font-size:16px;
    line-height:1; cursor:pointer; box-shadow:var(--sh-sm)}
}

/* ── 進場動態（尊重減少動態偏好） ── */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease}
  .rv.in{opacity:1; transform:none}
}

/* ── 區塊編號標（參考 ilocklife 的 SECTION 01 式樣） ── */
.sechead{margin-bottom:6px}
.sechead .sn{display:flex; align-items:center; gap:12px; font-size:12.5px; font-weight:700;
  letter-spacing:.22em; color:var(--brand); text-transform:uppercase; margin-bottom:10px}
.sechead .sn::after{content:""; height:1px; width:56px; background:var(--brand); opacity:.45}

/* ── 大數字統計帶 ── */
.stats{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:30px}
/* 三格就排三欄，不讓 auto-fit 撐出空格（2026-08-30 移除第四格後修） */
@media(min-width:1000px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--grad-soft); border:1px solid var(--line); border-radius:var(--r); padding:22px 20px;
  text-align:center; box-shadow:var(--sh-sm)}
.stat .n{font-size:clamp(34px,5vw,46px); font-weight:900; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .n small{font-size:.45em; font-weight:800; margin-left:2px}
.stat .l{font-size:13.5px; color:var(--ink2); margin-top:6px; font-weight:600}

/* ── Hero 右側地籍插圖 ── */
.herogrid{display:grid; grid-template-columns:1.25fr .8fr; gap:40px; align-items:end}
.heroart svg{width:100%; height:auto; display:block; filter:drop-shadow(0 18px 40px rgba(24,40,32,.16))}
@media(max-width:820px){.herogrid{grid-template-columns:1fr}.heroart{display:none}}

/* ── 💬 LINE 懸浮鈕（Sam 2026-08-31）──
   🔴 用 LINE 官方綠 #06C755，不要套站上的青綠——
   　 客戶認的是那個綠色，換成別的顏色反而要多想一秒。
   位置比回到頂端低（那顆讓到上面去），因為這顆是主要行動。 */
.linefab{position:fixed; right:26px; bottom:26px; z-index:36;
  display:inline-flex; align-items:center; gap:9px;
  height:52px; padding:0 20px 0 17px; border-radius:999px;
  background:#06C755; color:#fff; text-decoration:none;
  font-size:15.5px; font-weight:800; letter-spacing:.3px;
  box-shadow:0 8px 24px rgba(6,199,85,.34), 0 2px 6px rgba(16,32,40,.14);
  transition:transform .2s cubic-bezier(.2,.9,.3,1.2), box-shadow .2s}
.linefab svg{width:24px; height:24px; flex-shrink:0}
.linefab:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(6,199,85,.42), 0 3px 8px rgba(16,32,40,.16)}
.linefab:active{transform:translateY(0) scale(.96)}
@media(prefers-reduced-motion:reduce){.linefab{transition:none}.linefab:hover{transform:none}}

/* ── 回到頂端懸浮鈕 ──
   🔴 bottom 從 26 改成 90：讓出下面的位置給 LINE 鈕，兩顆不重疊。 */
.totop{position:fixed; right:26px; bottom:90px; z-index:35;
  width:50px; height:50px; border-radius:50%; border:1px solid color-mix(in srgb,var(--brand) 32%,transparent);
  background:var(--grad); color:#fff; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 30%,transparent), 0 2px 6px rgba(16,32,40,.12);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .28s ease, transform .28s cubic-bezier(.2,.9,.3,1.2), visibility .28s}
.totop.on{opacity:1; visibility:visible; transform:none}
.totop svg{width:22px; height:22px}
.totop:hover{transform:translateY(-3px)}
.totop:active{transform:translateY(0) scale(.94)}
@media(prefers-reduced-motion:reduce){.totop{transition:opacity .2s ease}.totop:hover{transform:none}}
@media(max-width:720px){
  /* 🔴 手機底部有行動列（.bottombar，約 62px）——兩顆都要讓開它。
     LINE 鈕在下（bottom:76）、回到頂端在上（bottom:138），不重疊也不壓到行動列。 */
  .linefab{right:14px; bottom:76px; height:46px; padding:0 16px 0 14px; font-size:14.5px}
  .linefab svg{width:21px; height:21px}
  .totop{right:14px; bottom:138px; width:44px; height:44px}
  .totop svg{width:19px; height:19px}
}

/* ── 手機底部固定行動列 ── */
.bottombar{display:none}
@media(max-width:720px){
  body{padding-bottom:64px}
  .bottombar{display:grid; grid-template-columns:1fr 1.2fr 1fr; position:fixed; left:0; right:0; bottom:0;
    z-index:30; border-top:1px solid var(--line);
    background:color-mix(in srgb,var(--card) 92%,transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
  .bottombar a{display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:9px 4px 11px; text-decoration:none; font-size:13px; font-weight:700; color:var(--ink)}
  .bottombar a svg{width:20px; height:20px}
  .bottombar a.mid{background:var(--grad); color:#fff}
}