*{box-sizing:border-box}
:root{color-scheme:light;
 --ink:#1a1613;--ink2:#56504a;--muted:#8c857c;--line:#e5dfd5;--soft:#f6f2ec;
 --brand:#6b1220;--brand-soft:#f5ebeb;--warn:#8a6217;--warn-bg:#fdf8ec;
 --ok:#2f5d3a;--bad:#9a3b3b;
 /* AI 產出的底色。全站只有這一個，不得再開第二種。
    用淡黃，跟提醒框的深黃同一個色系：提醒框本來就長在 AI 區塊裡，
    同色系才搭得起來，一深一淺也還分得出層次。
    改版前是三個米黃各自為政（#fdfaf0 兩處、#fdf8ec 一處），現在統一。 */
 --ai-bg:#fdfaf0;--ai-line:#eee3c9;
 /* AI 區塊裡的提醒框：比底色深一階的黃，加左側琥珀色線。 */
 --warn2-bg:#f8efd6;--warn2-line:#d9a520;
 /* 全站唯一的語意色：立場四色。合憲共用贊成的綠、違憲共用反對的紅，
    不另開顏色。看到綠就是贊成或合憲，不會在別處代表別的意思。 */
 --y-bg:#dcead9;--y-ink:#2f5d3a;
 --n-bg:#f3d9d5;--n-ink:#8f2b2b;
 --p-bg:#f7ecd4;--p-ink:#8a6217;
 --o-bg:#eceae4;--o-ink:#8c857c;
 /* 標籤用的字。Consolas 在 Windows、Menlo 在 macOS 都是內建，
    英數與井號會是等寬；中文這幾套都沒有，會退到下面的中文黑體，
    也就是跟內文同一套字。不裝任何外部字型。 */
 --mono:Consolas,Menlo,"DejaVu Sans Mono","Noto Sans TC","PingFang TC",
   "Microsoft JhengHei",system-ui,monospace;
 --serif:"Noto Serif TC","Source Han Serif TC","Songti TC",PMingLiU,serif;
 --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.75 var(--sans);
 -webkit-font-smoothing:antialiased}
a{color:var(--brand)}
h1,h2,h3,.serif{font-family:var(--serif);letter-spacing:.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* 頁首：站序導覽 */
.sh-hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
 font:14px/1.6 var(--sans)}
.sh-in{max-width:1280px;margin:0 auto;padding:0 22px;display:flex;align-items:center;
 gap:20px;min-height:52px;flex-wrap:wrap}
.sh-mark{font-family:var(--serif);font-size:15.5px;font-weight:700;color:var(--brand);
 text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.sh-mark .beta{font-family:var(--sans);font-size:11.5px;font-weight:600;
 color:var(--muted);letter-spacing:0;margin-left:5px;vertical-align:2px}
.sh-nav{display:flex;align-items:stretch;margin-left:auto;flex-wrap:wrap}
.sh-nav a{display:flex;align-items:center;gap:6px;padding:14px 11px;font-size:13px;
 color:var(--ink2);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.sh-nav a:hover{color:var(--ink);background:var(--soft)}
.sh-nav a i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;
 width:17px;height:17px;border-radius:50%;border:1px solid #c9c1b5;color:var(--muted);
 font-size:10.5px;font-weight:700;line-height:1}
.sh-nav a[aria-current]{color:var(--brand);border-bottom-color:var(--brand);font-weight:700}
.sh-cta{align-self:center;margin-left:14px;display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;background:#2e6e5a;color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;border:1px solid #2e6e5a}
.sh-cta:hover{background:#255a49;border-color:#255a49}
.sh-cta .ext{font-size:11px;opacity:.85}
@media(max-width:900px){.sh-cta{margin-left:8px}}
.sh-nav a[aria-current] i{background:var(--brand);border-color:var(--brand);color:#fff}
.sh-nav .sh-sep{width:1px;background:var(--line);margin:12px 7px}
@media(max-width:900px){.sh-nav a{padding:10px 8px}.sh-in{gap:10px}}

/* 頁尾。固定貼在畫面底部，怎麼捲都在。改成 fixed 之後它離開文件流，
   所以要補一段等高的下緣，最後一段內容才不會被壓在底下；
   應用頁（body.app）本身滿版不捲，下緣補在 main 上。 */
.sh-ft{position:fixed;left:0;right:0;bottom:0;z-index:50;
 background:var(--soft);border-top:1px solid var(--line);color:var(--ink2);flex:none;
 font:13px/1.5 var(--sans)}
/* 浮動頁尾：捲動時收起，停下來才滑出。高度由 assets/ui.js 量出來寫進
   --fth，內層清單據此留白，最後一列才不會被蓋住。
   不再預留等高的下緣——先前用固定 62px 去補，實際高度卻隨寬度變
   （單行 55px、1100px 以下兩行 83px），對不上就在內容與頁尾之間
   露出一條白邊，窄螢幕又反過來蓋住最後一段。 */
:root{--fth:56px}
.sh-ft{transition:transform .22s ease;transform:translateY(110%)}
body.ftshow .sh-ft{transform:none}
body{padding-bottom:0}
body.app{padding-bottom:0}
body.app main{padding-bottom:0}
/* 清單剛好結束在容器底部，補一段等於頁尾高度的留白 */
body.app .list,body.app .panes{padding-bottom:var(--fth)}
@media(prefers-reduced-motion:reduce){.sh-ft{transition:none}}
.sh-ft-in{max-width:1280px;margin:0 auto;padding:8px 22px;display:grid;
 grid-template-columns:minmax(200px,1fr) minmax(280px,auto) minmax(200px,1fr);
 align-items:center;gap:20px}
.sh-ft address{margin:0;font-size:12.5px;font-style:normal}
.sh-ft address a{color:var(--brand);text-decoration:none}
.sh-ft address a:hover{text-decoration:underline}
.sh-ft .cp{margin:0;text-align:center;font-size:12px;color:var(--muted)}
.sh-ft .logos{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.sh-ft .logos img{display:block;width:auto;object-fit:contain}
.sh-ft .logos img:first-child{height:23px}
.sh-ft .logos img:last-child{height:26px}
@media(max-width:1100px){.sh-ft-in{grid-template-columns:minmax(0,1fr) auto;gap:10px 20px}
 .sh-ft .cp{grid-column:1/-1;grid-row:2;text-align:left}}
@media(max-width:640px){.sh-ft-in{grid-template-columns:1fr;text-align:center}
 .sh-ft .cp{grid-column:auto;grid-row:auto}.sh-ft .logos{justify-content:center}}

/* 應用式版面：頁首與頁尾固定，中間吃掉剩下的高度 */
body.app{display:flex;flex-direction:column;min-height:100vh}
body.app .sh-hd{flex:none}
body.app main{flex:1;min-height:0;display:flex}
@media(min-width:961px){body.app{height:100vh;overflow:hidden}}
/* 961px 以下版面不再鎖 100vh，整頁改成自己捲。左欄如果不設上限就會跟著
   清單一路長高（主資料庫實測 184,100px、意見書檢索 8,997px），清單自然
   不再自己捲，畫面變成左邊一長條、右邊內容早早結束的一大片空白。
   這裡替所有應用頁的左欄補一個高度上限，捲動就回到清單本身。 */
@media(max-width:960px){
  body.app #main>.side,body.app #main>.rail{max-height:calc(100vh - 120px);
   position:sticky;top:0;align-self:flex-start}
}

/* 共用零件 */
.btn{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:7px;
 padding:5px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* 標籤只有這一種樣式：Markdown 行內碼。等寬字、極淡底、細框，不上彩色。
   顏色留給真正承載資料的立場標記（.stb）。改版前全站有八套標籤樣式、
   十二種顏色，主題碼是藍的、面向碼是灰的、PDF 又是另一種框。 */
.tag,code.tag{display:inline-block;font:12.5px/1.7 var(--mono);
 background:rgba(0,0,0,.045);border:1px solid rgba(0,0,0,.08);
 border-radius:4px;padding:0 6px;color:var(--ink);white-space:nowrap;
 text-decoration:none}
a.tag:hover{border-color:var(--brand);color:var(--brand)}
.tag.b{background:var(--brand-soft);border-color:#e8d5d5;color:var(--brand)}
/* 分類標籤前面補井號，像 Markdown 的標籤寫法。 */
.tag.h::before{content:"#";opacity:.55}
/* 全站規則：文字只有黑與暗紅兩色。標籤一律同一種尺寸與底，
   可以點的（例如主題碼連到跨案分析）用暗紅字表示，其餘是黑字。 */
a.tag,.tag a{color:var(--brand)}

/* 立場標記。唯一保留顏色的標籤，因為它是資料本身不是裝飾。
   意見書檢索頁也用這組，所以定義在共用樣式，不放 db.css。 */
.stb{display:inline-block;font-size:11px;font-weight:700;line-height:19px;
 padding:0 8px;border-radius:10px;white-space:nowrap}
.stb.y{background:var(--y-bg);color:var(--y-ink)}
.stb.n{background:var(--n-bg);color:var(--n-ink)}
.stb.p{background:var(--p-bg);color:var(--p-ink)}
.stb.o{background:var(--o-bg);color:var(--o-ink)}
.stb.soft{opacity:.62}
.mute{color:var(--muted)}
.warn{background:var(--warn-bg);border-left:4px solid #e0a800;padding:10px 14px;
 border-radius:0 6px 6px 0;color:#6b5400;font-size:13.5px;margin:12px 0}
.warn b{color:#584500}

/* 彈窗 */
.mask{display:none;position:fixed;inset:0;background:rgba(20,16,12,.45);z-index:300;
 align-items:center;justify-content:center;padding:20px}
.mask.on{display:flex}
.modal{background:#fff;border-radius:10px;max-width:780px;width:100%;max-height:86vh;
 overflow-y:auto;padding:24px 30px 26px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.modal h3{margin:0 0 12px;font-size:19px;color:var(--brand)}
.modal h4{margin:20px 0 6px;font-size:15px}
.modal .x{float:right;border:1px solid var(--line);background:none;border-radius:6px;
 color:var(--ink2);font:inherit;font-size:13px;padding:2px 12px;cursor:pointer;margin-left:12px}
.modal .x:hover{border-color:var(--brand);color:var(--brand)}
.modal table{border-collapse:collapse;width:100%;font-size:13px;margin:10px 0;
 display:block;overflow-x:auto}
.modal th,.modal td{border:1px solid var(--line);padding:6px 10px;text-align:left;
 vertical-align:top;line-height:1.7}
.modal th{background:var(--soft);white-space:nowrap}
.modal code{background:var(--soft);padding:1px 5px;border-radius:4px;font-size:12.5px}