（鍵盤使用者下一個 Tab 從主要內容開始）；main 不是互動元件，不畫外框（UX-004） */ main:focus{outline:none} /* ── 站頭：內嵌 logo＋導覽 ── */ .top{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;max-width:1440px;margin:0 auto;padding:0 var(--gut);min-height:84px} .brand{display:flex;align-items:center;flex:none;min-height:44px;line-height:0;text-decoration:none} .brand svg{display:block;height:46px;width:auto;aspect-ratio:560/127} .top nav{display:flex;gap:6px} .top nav a{display:flex;align-items:center;min-height:44px;padding:0 18px;color:var(--ink);text-decoration:none;font-weight:800;font-size:17px;letter-spacing:.02em;border-bottom:3px solid transparent} .top nav a[aria-current]{border-bottom-color:var(--org)} .top nav a:hover{border-bottom-color:var(--rule-2)} /* ── 手繪底線（橙黃，只當線）── */ .hl{position:relative;display:inline-block;z-index:0} .hl svg.ul{position:absolute;left:-4px;bottom:-4px;width:calc(100% + 8px);z-index:-1;overflow:visible;pointer-events:none} .hl.big svg.ul{bottom:-18px} /* ── 首屏 ── 預設單欄（標題→副標→按鈕→讀者提示，地名牆在其下方）；≥900px 雙欄（文案左、地名牆右，欄寬用 vw 流動、不寫死 700px，所以 900–1199 的筆電首屏也看得到牆；人工審查 H-023）。 */ .hero{position:relative;max-width:1440px;margin:0 auto;padding:0} .copy{position:relative;z-index:2;padding:18px var(--gut) 34px} .eyebrow{margin:0 0 22px;font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:.3em;line-height:1.5;color:var(--ink)} .hero h1{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(52px,7.2vw,104px);line-height:1.1;letter-spacing:0;color:var(--ink)} .hero h1 span.l1,.hero h1 span.l2{display:block} .hero h1 .hl.big{display:inline-block} .hero-sub{margin:26px 0 0;font-size:20px;line-height:1.7;max-width:600px;color:#17342f} .hero-sub span{display:block}.hero-sub .nw{font-style:normal} .cta{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 30px;font-size:20px;font-weight:800;text-decoration:none;border-radius:4px;letter-spacing:.04em;border:2.5px solid transparent} .btn-p{background:var(--tealD);color:#fff;border-color:var(--tealD)} .btn-p:hover{background:var(--ink);border-color:var(--ink)} .btn-g{color:var(--ink);border-color:var(--ink);background:rgba(255,255,255,.7)} .btn-g:hover{background:var(--white)} /* 三行讀者提示是整列連結（H-024）：說明文字加底線、行尾加「›」（CSS 產生內容；第二行的 / "" 是替代文字語法，讓螢幕閱讀器不唸它，不支援者沿用上一行），連結框貼合內容寬（inline-flex），所以焦點外框只圍住這一行，不會橫跨到右側地名牆。 */ .readers{margin:24px 0 0;display:grid;justify-items:start;gap:0;font-size:16px} .readers a{display:inline-flex;max-width:100%;gap:14px;align-items:center;min-height:44px;padding:6px 8px 6px 0;color:var(--mute);text-decoration:none} .readers a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--org)} .readers b{flex:none;min-width:104px;color:var(--ink)} .readers a span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--tealD)} .readers a span::after{content:"›";content:"›" / "";margin-left:8px;color:var(--tealD);font-weight:800} .readers a:hover span{color:var(--ink)} /* 「參選人」那列的次連結「已簽好？看怎麼回傳 ›」（R2-008）：與主連結同在一個

，排在其下一行，文字左緣對齊主連結的說明文字（7px 圓點＋14px 間距＋104px 標籤欄＋14px 間距＝139px；手機標籤欄 80px → 115px，見下方 max-width:820px 區塊）。用 margin 而不是 padding 縮排：焦點外框只圍住這一行字，不會把左邊的空白一起框進去。沒有圓點與標籤；觸控高度同其他三行（≥44px）。 */ .readers li{display:grid;justify-items:start} .readers a.rd-sub{margin-left:139px} .readers a.rd-sub::before{display:none} /* 地名牆（人工審查 H-002）：只依容器寬度等比縮放，且上限＝桌機牆原尺寸 740px（縮放 ≤1，地名字不會被放大）。 <600px 用手機牆（390×412、121 個地名；上限 430px 置中，縮放 ≤1.1）；≥600px 一律用桌機牆（368 個）。 */ .art{position:relative;z-index:1;margin:6px auto 0;max-width:calc(740px + 2 * var(--gut));padding:0 var(--gut)} .wall-svg{display:block;width:100%;height:auto;font-family:var(--sans);overflow:visible} .wall-svg .wt text{font-weight:500} .wall-svg .wl{font-weight:800} .wall-m{display:none} /* ── 章節共同 ── */ section{padding:40px 0} .page-head{padding:34px 0 6px} .page-head h1{font-family:var(--serif);font-weight:900;font-size:clamp(30px,3.6vw,44px);line-height:1.3;letter-spacing:.02em} .page-head p{margin-top:6px;font-size:15.5px;color:var(--mute)} .sec-h{display:grid;gap:6px;padding-top:22px;margin-bottom:22px;border-top:2px solid var(--ink)} .sec-h h2{font-family:var(--serif);font-weight:900;font-size:26px;line-height:1.35;letter-spacing:.06em} .sec-h p{font-size:15px;color:var(--mute);line-height:1.75;max-width:44em} .eyebrow-s{font-size:14px;letter-spacing:.2em;font-weight:800;color:var(--tealD)} .sec-h .eyebrow-s{margin-bottom:2px} .lead{margin:0 0 24px;font-size:17px;color:var(--mute);line-height:1.7;max-width:44em} /* 全國現況 */ .upd{font-size:15px;color:var(--ink-2)} .upd time{font-weight:800} .tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px} .tally li{background:rgba(255,255,255,.8);border:2px solid var(--ink);border-radius:3px;padding:12px 14px 12px;min-width:0} .tally .tn{display:flex;align-items:baseline;gap:4px;font-size:15px;color:var(--ink-2)} .tally .tn .ic{width:20px;height:20px;align-self:center;margin-right:4px;color:var(--ink-2)} .tally [data-tally]{font-family:var(--serif);font-size:38px;font-weight:900;line-height:1.15;color:var(--ink)} .tally .lb{display:block;margin-top:2px;font-size:14.5px;font-weight:800;line-height:1.5;color:var(--ink)} .tally-line{font-size:16px;line-height:1.85;color:var(--ink-2);max-width:46em} .tally-deadline{margin:0 0 14px} .tally-total{margin-top:6px;font-size:18px;font-weight:800} .fine{margin:0 0 18px;font-size:15px;color:var(--mute);line-height:1.75} .now-lead{margin-bottom:8px} .neutral-line{margin:0 0 18px;padding:2px 0 2px 16px;border-left:4px solid var(--org);font-family:var(--serif);font-weight:900;font-size:17px;line-height:1.85;color:var(--ink);max-width:46em} /* ── 十項承諾（首頁）── */ .cards{display:grid;grid-template-columns:1fr;gap:14px} .cards li{position:relative;background:rgba(255,255,255,.85);border:2px solid var(--ink);border-radius:3px;padding:18px 18px 18px 78px;min-height:0} .cards .no{position:absolute;left:14px;top:16px;width:48px;height:48px;display:flex;align-items:center;justify-content:center} .cards .no svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .cards .no b{position:relative;font-family:var(--serif);font-weight:900;font-size:24px;line-height:1;color:var(--ink)} .cards h3{margin:0 0 4px;font-family:var(--serif);font-weight:900;font-size:24px;line-height:1.25;color:var(--ink)} .cards .pl{margin:0 0 8px;font-size:16px;font-weight:800;color:var(--tealD)} .cards .tx{margin:0 0 12px;font-size:15px;line-height:1.85;color:var(--gr)} /* 「白話說」一行（人工審查 H-006）：本聯盟寫的說明不得比承諾書原文（.tx）更醒目——字重、字級、顏色都與原文同級（原本 800 粗體、比原文大一號、顏色更深）；只有前面的小標籤「白話說」保留粗體與橙色豎線，讓讀者分得出哪一行是說明、哪一行是承諾原文。 */ .cards .bn{margin:0;padding-top:12px;border-top:1.5px dashed #C9B98A;font-size:15px;font-weight:500;line-height:1.7;color:var(--gr)} .cards .bn i{font-style:normal;font-size:14px;font-weight:800;color:var(--ink);margin-right:10px;padding-right:10px;border-right:3px solid var(--org);letter-spacing:.06em} /* 白話說斷行覆寫（WP-G1 收尾，2026-10-06 指揮部裁定；全站斷行基準見檔頭註解）：只有這一處把十項卡「白話說」退回 word-break:normal，其餘區塊沿用 body 基準的 keep-all。 text-wrap:pretty 由 body 繼承（computed 值就是 pretty），這裡不重複宣告——tests/test_pledge_uiux.py::test_h022_short_text_blocks… 釘「全站只有這幾條規則設 text-wrap」。原因：白話說是資料驅動的長句（benefit_lines.yaml，每句 ≤40 字、子句常比欄寬長），keep-all 下只能在標點處換行、放不下才緊急換行，而 Chrome 的緊急換行（overflow-wrap）不守禁則—— scratchpad/g1css/punct_scan.cjs（掃全站「計算後 keep-all」的文字區塊 × 12 個寬度：320 340 360 375 390 414 430 480 600 768 1024 1440）實測 8 句的行首是標點（開工版＝WP-G1 之前 0 例； ux_audit 的 L4 三條規則只抓詞中斷行／孤字末行／數字單位，抓不到行首標點）。派工單轉述的實作員量測（ux_audit L4＋行首標點，同一組寬度）：keep-all＝R-word 5／R-orphan 5／行首標點 8 句； normal＋pretty＝R-word 18／R-orphan 1／行首標點 0 句。本包收工實測（完整矩陣 --strict，真名站）：p.bn 的 L4 列 11→17（R-orphan 5、R-num 1、R-word 5 換成 R-word 17）、行首標點 0。取捨：中文排版「行首標點」是較顯眼的錯，R-word（字間斷行）列 P2、仍由 L4 常駐把關；本包不做數字單位 nowrap、不在登記句內插標籤、不加詞界換行提示（另案）。注意：這條必須排在上面那條 .cards .bn{…} 主規則之後——tests/test_pledge_wpb.py::test_h006 用 re.search 取「第一條」.cards .bn 規則讀字重與字級。 */ .cards .bn{word-break:normal} /* 縣市快速入口（固定順序、同字級同色，不依任何狀態）。22 個一律用 grid 等寬欄、平均分列，不留 1–2 個的孤列（H-034）： <760px 每列 6 個（6／6／6／4）；≥760px 每列 11 個（11／11）。縣市名一律 3 字，欄寬 ≥48px 容得下。 */ .cty-jump{margin:0 0 20px} .cty-jump ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 2px;margin-left:-4px} .cty-jump a{display:flex;align-items:center;min-height:44px;padding:0 4px;white-space:nowrap;color:var(--ink);font-size:15px;font-weight:800;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px} .cty-jump a:hover{background:var(--white)} /* ── 22 縣市格 ── */ /* 欄數：<350px 1 欄；350–899px 2 欄；900–1199px 3 欄；≥1200px 4 欄（人工審查 H-025：768 寬 4 欄過擠，每卡只剩 175px） */ .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .cty{display:flex;flex-direction:column;background:rgba(255,255,255,.85);border:1.5px solid var(--rule-2);border-radius:3px;padding:10px 8px 10px;color:var(--ink);text-decoration:none;min-width:0} .cty:hover{border-color:var(--ink)} .cty-h{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 2px} .cty-h h3{font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.3;letter-spacing:.04em} .chev{width:18px;height:18px;color:var(--tealD);flex:none} .cty-n{font-size:14px;color:var(--mute);padding:0 2px;margin:1px 0 8px;line-height:1.4} .cty-n b{font-size:15px;color:var(--ink)} .slips{display:grid;grid-template-columns:minmax(0,1fr);gap:4px} /* 名字籤（人工審查 H-001：頁面寫「每張名字籤一樣大」，名字籤就必須真的一樣大）。 <1200px 固定雙行：第一行姓名、第二行「圖示＋狀態字」；左側 16px 標記欄，第一行是一小段短橫線（名字籤的穿孔記號、對齊姓名第一行），第二行是狀態圖示，姓名與狀態字從同一條線開始。每張都是兩行，所以同一縣市格內所有名字籤同高，與回覆狀態、字數都無關（狀態字最長 7 字「不簽署・看原文」，欄寬由欄數＋<350px 單欄保證放得下）；唯一的例外是姓名本身長到要在「姓名那一行內」折行（名單實有 15 字者，.nm-long）。≥1200px 欄寬放得下，維持單行（見下方 min-width:1200px 區塊）。標記是 7×2px 的實心短橫線，不是圓、也不是方框（人工審查 R2-010）：個人頁用「圈」表示勾選狀態，首頁每個名字前若也有一顆空心小圓，讀者會把全部人讀成「都還沒勾」。短橫線沒有狀態意思，只是籤條的記號；純裝飾（偽元素、無文字內容），顏色用 --rule-2，不傳達資訊。垂直置中線＝姓名第一行中心：padding-top 5px＋line-height（14.5×1.5＝21.75）的一半＝15.875px；top＋高度/2 ＝ 14.9＋1 ＝ 15.9px。 */ .slip{color:inherit;text-decoration:none;position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:34px;padding:5px 5px 5px 7px;background:var(--paper);border:1px solid var(--rule)} .slip::before{content:"";position:absolute;left:11.5px;top:14.9px;width:7px;height:2px;border-radius:1px;background:var(--rule-2)} .nm{color:var(--ink);font-size:14.5px;font-weight:500;letter-spacing:.03em;white-space:nowrap;line-height:1.5} /* 姓名不是詞（WP-G1）：長名（名單實有 15 字者）字間都能斷（break-all），覆寫基準的 keep-all；balance 讓各行等長，不留 1 字末行（R3-007） */ .nm-long{white-space:normal;word-break:break-all;min-width:0;text-wrap:balance} .slip .nm{padding-left:21px} .st{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--gr);white-space:nowrap;line-height:1.5} /* 名字籤的狀態字放大到 14px 後，極窄欄放不下「不簽署・看原文」時，軌道不得撐出縣市格、狀態字放不下才在格內換行（安全網；正常寬度不會觸發） */ .slip .st{white-space:normal;margin-left:0;gap:5px;min-height:21px;line-height:21px} .ic{width:16px;height:16px;flex:none;color:var(--ink-2)} /* 名字卡的短標籤「附說明」（2026-10-06，Codex F2；R4 修正長名重疊）：只在「簽署 N 項」且另附條件或說明者出現。名字籤必須同高、狀態字必須單行，所以標籤不進 .st、也不進 .nm。姓名 ≤3 字（名單實有 2 字 4 位、3 字 75 位）：<1200px 絕對定位在第一行（姓名那一行）右側——兩欄最窄（350 寬）名字籤內寬約 125px，扣掉姓名縮排 21px、標籤 42px＋右緣 4px，3 字姓名還有約 16px 空隙（量測見 tests/test_pledge_a_package.py）；≥1200px 是單行排版（姓名｜狀態），標籤直接排在狀態之後。姓名 4 字以上（含 .nm-long 長名；真實名單 4 字 1 位、15 字 1 位）：同一行放不下或黏在一起，標籤改排第三行（.note-row，與姓名文字左緣對齊）——這張名字籤比別人高一行，與 .nm-long 長名折行同屬既有例外（同高保證只管 ≤3 字的名字；沒有標籤的名字籤高度不受影響）。顏色與狀態字同色（不依狀態變色，R1）；字級 14px（UX-010 下限）；字重 800 與姓名（500）區分。不加框線與內距（帶框的標籤寬約 50px，4 字姓名在 350 寬會被壓到）。 */ .slip .note-tag{position:absolute;top:5px;right:4px;font-size:14px;font-weight:800;line-height:21.75px;color:var(--gr);white-space:nowrap} .slip .note-tag.note-row{position:static;padding-left:21px} .grid-foot{margin-top:14px;font-size:14px;color:var(--mute);line-height:1.7} /* ── 縣市頁全卡 ── */ .p-cards{display:grid;grid-template-columns:1fr;gap:10px} .p-card{display:grid;grid-template-columns:20px 1fr;column-gap:8px;align-content:start;background:rgba(255,255,255,.85);border:2px solid var(--ink);border-radius:3px;padding:14px 14px 14px} .p-card .nm{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;min-height:44px;color:var(--ink);font-family:var(--serif);font-size:19px;font-weight:900;white-space:normal} .p-card .st{grid-column:1;grid-row:2;margin:6px 0 0;align-self:start;justify-self:start} .p-card .st .ic{width:18px;height:18px} .p-card .txt{grid-column:2;grid-row:2;font-size:14.5px;line-height:1.7;color:var(--ink-2);margin-top:4px} .p-card .nm a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px} /* 下載頁頁首：保證在前、下載與回傳入口在前 */ .dl-head-sec{padding:8px 0 0} .dl-head p{max-width:46em;font-size:17px;line-height:1.85;color:var(--ink);font-weight:800} .commit-full li{scroll-margin-top:16px} /* ── 承諾書／回傳 ── */ .duo{display:grid;gap:14px} /* 兩個 CTA 盒並排時（≥760px）高度相同，按鈕貼底對齊（H-034：左盒說明比右盒長，按鈕原本差 28px） */ .box{display:flex;flex-direction:column;background:rgba(255,255,255,.85);border:2px solid var(--ink);border-radius:3px;padding:20px 18px} .box .row-btn{margin-top:auto;padding-top:16px} .box h2{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:900;font-size:21px;line-height:1.4} .box h2 .ic{width:24px;height:24px} .box > p{font-size:15px;line-height:1.85;color:var(--ink-2);margin-top:8px} .commit-full{max-width:52em} .commit-full li{padding:16px 0;border-bottom:1px solid var(--rule)} /* 目標高亮（人工審查 R2-035）：從個人頁點十項名稱跳到下載頁 #item-n，落點那一項要一眼看得出來。淺黃底（--glow）＋左側 6px 實色條（--tealD）。不單靠顏色：色條是形狀線索，且用 border 而非 box-shadow（強制色彩模式會拿掉背景與陰影、保留邊框）；色條對紙白底約 5:1（非文字對比 ≥3:1），條內文字 --tealD 對 --glow 約 4.87:1（≥4.5:1，見上方焦點外框註解的同一組數字）。 margin-left:-16px 與 padding-left:10px＋border 6px 相抵，被指到的那一項文字位置不動、不跟其他項錯位；負邊距 16px 不超出頁面左側留白（手機 --gut 16px、>820px 時 ≥41px），所以不產生橫向捲動。 2026-10-03 D3（驗證員 v1 發現 2）：色帶原本只有左側加寬，右側 0 內距——768 寬時文字右緣離色帶右緣只剩約 1px，看起來貼死在邊上。右側對稱：margin-right:-16px＋padding-right:16px，文字右緣離色帶右緣至少 16px（≥ 左側的 6px 色條＋10px 內距＝16px）；content 寬度不變（文字不重新換行、不位移），右側負邊距同樣不超出頁面右側留白（手機 --gut 16px 剛好貼到視窗邊、不超出），所以不產生橫向捲動。 */ .commit-full li:target{background:var(--glow);border-left:6px solid var(--tealD);margin-left:-16px;margin-right:-16px;padding-left:10px;padding-right:16px} .commit-full strong{font-weight:800;color:var(--ink)} .commit-full h3{font-family:var(--serif);font-size:20px;display:flex;gap:8px} .commit-full .cn{color:var(--tealD);font-weight:900} .commit-full .parent{font-size:14px;font-weight:800;color:var(--tealD);margin-top:2px} .commit-full .text{font-size:15px;line-height:1.85;margin-top:6px} /* 承諾書正文的頭尾（R3-001）：主軸句與開頭總綱在十項之前、共同條款與細字說明在十項之後，順序同承諾書本身。主軸句是承諾書的副標：站上 Serif 900，只在逗號與頓號處換行（keep-all；放不下才緊急換行）；其餘三段是長篇原文，字級同十項原文，不套 keep-all（維持字間換行以免右緣參差，同 .commit-full .text）。細字說明小一號、墨色略淡（承諾書本身也是細字）。最後一項（.commit-full li）自己有下框線，所以 .commit-after 只留上內距、不再畫線；.commit-frame 底下畫一條線，與十項之間的分隔線同款。 */ .commit-frame,.commit-after{max-width:52em} .commit-frame{padding-bottom:6px;border-bottom:1px solid var(--rule)} .commit-tagline{font-family:var(--serif);font-weight:900;font-size:21px;line-height:1.6;color:var(--ink)} .commit-preamble{margin-top:10px;font-size:15px;line-height:1.85;color:var(--ink)} .commit-after{padding-top:16px} .commit-clause{font-size:15px;line-height:1.85;color:var(--ink)} .commit-fine{margin-top:12px;font-size:14px;line-height:1.85;color:var(--mute)} .row-btn{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .b2{display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 18px;border:2px solid var(--ink);border-radius:4px;color:var(--ink);text-decoration:none;font-weight:800;font-size:15.5px} .b2:hover{background:var(--white)} .b2.fill{background:var(--tealD);border-color:var(--tealD);color:#fff} .b2.fill:hover{background:var(--ink);border-color:var(--ink)} /* ── 回傳頁（WP-B D1，手機優先）：「用手機拍照回傳」三步驟卡＋三張回傳方式卡。三張卡等權重（A 傳到手機／B Email／C 上傳表單），各有一顆整列寬的主按鈕（≥52px 高，遠大於 44px 觸控下限）；手機單欄、≥1024 三欄等高，按鈕區貼底且區塊等高，三顆主按鈕上緣對齊。 ── */ .how-sec{padding:22px 0 0} .how-box{max-width:52em;padding:18px 18px 8px;background:var(--glow);border:2px solid var(--ink);border-radius:3px} .how-box h2{font-family:var(--serif);font-weight:900;font-size:22px;line-height:1.4} .how-steps{display:grid;gap:0;margin-top:4px;counter-reset:how} .how-steps li{counter-increment:how;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-top:1px solid rgba(14,42,38,.28);font-size:16px;line-height:1.75} .how-steps li:first-child{border-top:0} .how-steps li::before{content:counter(how);display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin-top:1px;border-radius:50%;background:var(--ink);color:#fff;font-size:16px;font-weight:800;line-height:1} .ways{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .way{display:flex;flex-direction:column;min-width:0;padding:18px 18px 20px;background:rgba(255,255,255,.85);border:2px solid var(--ink);border-radius:3px} .way h3{display:flex;align-items:center;gap:8px;font-size:20px;line-height:1.4} .way h3 .ic{width:26px;height:26px;flex:none;color:var(--tealD)} /* 卡片說明斷詞（人工審查 R2-006）：原本 text-wrap:balance 但字間都能換行，為了讓各行等長會在詞中間斷開（「備註｜欄」「附件寄｜到」「秘書長｜手機」）。現在一律吃全站斷行基準（keep-all＋anywhere 保底＋pretty；見檔頭「全站中文斷行基準」），這裡不再另設。舊註記「pretty 在 1440 寬卡 B 末行只剩『姓名。』」是字間可斷時的現象；keep-all 之後「主旨請寫縣市與參選人姓名。」整句不可拆，末行不會只剩一兩個字。量測見 tests/test_pledge_uiux.py 的 test_r2_006_012_035_layout_fixes_in_a_real_browser（320–460 每 4px 加 480／600／768／900／1024／1200／1440／1920，共 44 個寬度：沒有字間斷行、沒有行首收尾標點、沒有孤字末行、沒有橫向溢出）。 */ .way p{margin-top:8px;font-size:15px;line-height:1.8;color:var(--ink-2)} .way-act{display:grid;gap:6px;margin-top:auto;padding-top:16px} .way-act .b2{width:100%;justify-content:center;min-height:52px;font-size:17px} .way-sub{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;font-size:15px;font-weight:800;text-align:center} .way-url{display:block;text-align:center;font-size:14px;line-height:1.5;color:var(--gr);-webkit-user-select:all;user-select:all} /* 短網址前的說明「或複製網址：」（R2-023）：獨立一行放在網址上方（320 寬時同一行放不下 6 字＋23 字的網址）；說明與網址是兩個區塊，所以 user-select:all 一次只選到網址、不含說明 */ .way-copy{display:grid;justify-items:center} .way-copy-lead{display:block;text-align:center;font-size:14px;line-height:1.5;color:var(--gr)} .flow-steps{margin-top:6px;display:grid;gap:0;counter-reset:step;max-width:46em} /* 收件流程每一步（R2-006）：斷行吃全站基準；第 4 步在 390 寬原本斷成「照登上｜站。」、孤字「站。」 */ .flow-steps li{counter-increment:step;display:grid;grid-template-columns:32px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.7} .flow-steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:1px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:800} /* 流程第 3 步斷行覆寫（WP-G1 收尾，2026-10-06；範圍比白話說更窄）：.flow-steps li:nth-child(3)＝補8 flow_verify；其餘三步的子句都短，維持 keep-all，不平白多出字間斷行。理事長 2026-10-06 22:xx 改字的補8，第一個子句「以電話向參選人本人或其聯絡窗口確認來源；」20 字：360 寬 keep-all 下「；」被緊急換行推到行首（punct_scan.cjs 實測 360 寬 1 例；改字前的舊句子句較短、0 例）。同樣退回 word-break:normal（text-wrap:pretty 由 body 繼承），字間可斷、守禁則。耦合提醒：用 :nth-child(3) 不動標記（登記完整性與永久閘用原始 HTML 比對句子，不能為了掛 class 改

）；步驟順序若變動，這條要跟著改。取捨：字間斷行（320–約 430 寬，R-word，本包實測 3 列）是 P2；tests/test_pledge_uiux.py::test_r2_006_012_035 對第 3 步「任何字間斷行都不准」的舊斷言，依指揮部裁定（選項 A）放寬為只驗行首標點與末行孤字（理由見該測試 docstring），其餘三步與其他區塊斷言不變；「登記句內插 wbr 詞界提示」那包完成後要重新收緊。 */ .flow-steps li:nth-child(3){word-break:normal} /* 收件流程末尾的時效句（R2-003）：斷行吃全站基準；字重 800（回傳者最想知道的是「多久」） */ .flow-time{margin-top:12px;max-width:46em;font-size:15px;font-weight:800;line-height:1.7;color:var(--ink)} .privacy{margin-top:12px;font-size:14px;color:var(--gr)} .method,.faq{display:grid;gap:0;max-width:52em} .method div,.faq div{padding:12px 0;border-bottom:1px solid var(--rule)} .method dt,.faq dt{font-weight:800;font-size:15px} .method dd,.faq dd{font-size:14.5px;color:var(--ink-2);margin-top:4px;line-height:1.7} .faq dd a{display:inline-flex;align-items:center;min-height:44px;font-weight:800} .rules{display:grid;gap:0;margin-top:8px;max-width:52em} .rules li{padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.7} #rule-after-deadline{margin-top:18px;padding:14px 16px;background:rgba(255,255,255,.85);border:2px solid var(--ink);border-radius:3px;max-width:52em} #rule-after-deadline h3{font-family:var(--serif);font-weight:900;font-size:18px;margin-bottom:4px} /* ── 共同發起團體名冊：同字級、同亮度、依真源順序 ── */ .orgs{display:flex;flex-wrap:wrap;gap:.3em 1.9em;font-size:15.5px;line-height:1.9;color:var(--gr)} .orgs li{display:block;font-size:inherit;color:inherit} .caller{margin-top:14px;font-size:14px;color:var(--gr)} /* 名冊區下方的就近入口（D4／H-031）：「沒看到你的團體？加入連署 ›」「名稱有誤？來信更正 ›」。箭頭由 CSS 產生（第二行的 / "" 是替代文字語法，螢幕閱讀器不唸它，不支援者沿用上一行）；兩項各自成列、寬螢幕並排，連結 ≥44px 高。 */ .orgs-help{margin-top:12px;display:flex;flex-wrap:wrap;gap:0 28px} .orgs-help li{display:flex;flex-wrap:wrap;align-items:center;column-gap:.4em;font-size:15px;color:var(--gr)} .orgs-help a{display:inline-flex;align-items:center;min-height:44px;font-weight:800;color:var(--tealD);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px} .orgs-help a::after{content:"›";content:"›" / "";margin-left:6px;font-weight:800} /* 個人頁 */ .state-text{font-size:17px;line-height:1.85;margin-bottom:14px;max-width:46em} /* 個人頁「收件日」一列（H-011）：緊接在狀態句下方，欄名粗體、日期照站上格式 YYYY-MM-DD */ .receipt{margin:0 0 14px;font-size:15px;color:var(--ink-2)} .receipt div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6em} .receipt dt{font-weight:800} /* 逐項清單限寬約 480px（H-036：原本列寬 736px，「已勾選」離項目名最遠 605px，眼睛要橫跨整行才對得上） */ .item-status{display:grid;gap:0;margin-top:10px;max-width:30em} .item-status li{display:flex;gap:8px;align-items:center;min-height:44px;border-bottom:1px solid var(--rule);font-size:15px} .item-status a{color:inherit;display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px} .item-status .cn{color:var(--tealD);font-weight:800;width:1.2em} .item-status b{margin-left:auto;font-weight:800} .item-status .is-dim{color:var(--mute)} /* 個人頁「原文轉錄」（Codex 2026-10-04 審查 F1；理事長 10/4「都照建議」）：回覆原文是參選人自己寫的，可能多段、有空行、有長網址或連續英文。原本 dd 沒有保留換行、也沒有長字串換行：多段回覆擠成一段，一條長網址就把整欄撐寬（Codex 壓力測試：320px 多出約 1,098px 水平寬度）。 .verbatim 與 dd 的 min-width:0 讓格子與欄位可以比內容窄（不被長字串的最小內容寬度撐開）；dd 的 white-space:pre-wrap 保留原文的換行與空行（逐字照登，行數不丟），overflow-wrap:anywhere 讓長網址、連續英文在容器邊緣就地換行。**不用 overflow-x:hidden 或任何隱藏內容的做法**：超出的字不能被藏起來，要換行讓人讀得到。量測見 tests/test_pledge_a_package.py 的 A5。 */ .verbatim{display:grid;gap:0;margin-top:8px;max-width:52em;min-width:0} .verbatim div{padding:12px 0;border-bottom:1px solid var(--rule)} .verbatim dt{font-weight:800;font-size:14.5px} .verbatim dd{font-size:15px;line-height:1.8;margin-top:4px;color:var(--ink-2);min-width:0;white-space:pre-wrap;overflow-wrap:anywhere} /* 個人頁「修訂版本原文」上方的就地說明（R2-017）：斷行吃全站基準；連結是行內文字連結，箭頭「›」由 CSS 產生（第二行 / "" 是替代文字語法，螢幕閱讀器不唸它） */ .rev-note{margin-top:8px;max-width:46em;font-size:15px;line-height:1.8;color:var(--ink-2)} .rev-note a{font-weight:800} .rev-note a::after{content:"›";content:"›" / "";margin-left:6px;font-weight:800} .verbatim-none{margin-top:8px;padding:12px 0;max-width:52em;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.8;color:var(--ink-2)} .scan-note{margin-top:14px;font-size:14px;color:var(--mute)} .lamp-band{margin:6px 0 14px;max-width:560px} .lamp-band .lanterns{display:block;width:100%;height:auto} .lamp text{font-family:var(--serif);font-weight:900} /* 十個圈：不靠 opacity。勾選＝實心青綠＋白字；未勾選＝無填色＋虛線外框＋墨字（對比都 ≥4.5:1；差別在實心／虛線，不只靠顏色）。整組 aria-hidden：與其下 .item-status 逐項清單（含「已勾選／未勾選」文字）重複（UX-001） */ .lamp .lr{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lamp.lit .lf{fill:var(--tealD)} .lamp.lit .ln{fill:#fff} .lamp.dim .lr{stroke:var(--ink-2);stroke-dasharray:4 3.4} .lamp.dim .ln{fill:var(--ink-2)} .back{display:flex;flex-wrap:wrap;gap:4px 20px;padding-top:8px;padding-bottom:8px} .back a{display:inline-flex;align-items:center;min-height:44px;font-weight:800} /* 縣市頁最上方（h1 之前）的返回連結：連回首頁縣市區（UX-006）；箭頭沿用 sprite 的 i-chev 左右翻轉 */ .back-top{padding-top:8px;padding-bottom:0} .back-top a{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding-right:12px;font-size:17px;font-weight:800;color:var(--tealD)} .back-top .chev{width:20px;height:20px;transform:scaleX(-1)} .back-top + .page-head{padding-top:4px} /* 頁尾 */ footer{margin-top:24px;padding:0 0 44px} footer .wrap{border-top:2px solid var(--ink);padding-top:26px} .neutral{font-family:var(--serif);font-weight:900;font-size:17px;line-height:1.9;color:var(--ink);max-width:40em} .meta{margin-top:16px;display:grid;gap:6px;font-size:14px;line-height:1.7;color:var(--mute)} .meta dt{color:var(--gr);font-size:14px;letter-spacing:.06em;font-weight:800} /* 頁尾欄值（2026-10-02 R2-022）：「回覆期限」那行（日期＋括號說明）在 390 寬原本斷成「…標明收件日照｜登）」，孤字「登）」；斷行吃全站基準（keep-all＋pretty），不另設。 */ .meta div{display:grid;gap:0} .org{margin-top:20px;font-size:15px;color:var(--ink);font-weight:800;letter-spacing:.04em} .org span{display:block;font-weight:500;font-size:14px;color:var(--mute);letter-spacing:.02em} footer a{color:var(--tealD)} .flink{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;font-weight:800} .credit{margin-top:8px;font-size:14px;color:var(--mute);line-height:1.7} /* 頁尾聯絡窗口（D3，首頁／下載頁／回傳頁）與快速連結（H-035，全站）：連結都 ≥44px 高、窄螢幕自動換列 */ .foot-contact{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;column-gap:.4em;font-size:15px;color:var(--ink)} /* 縣市頁、個人頁頁尾的「資料有誤？看更正方式 ›」（2026-10-06）：連到下載頁更正程序；箭頭由 CSS 產生（第二行的 / "" 是替代文字語法，螢幕閱讀器不唸它）；連結沿用 .flink（≥44px 高）。這兩種頁不放電話與 Email（個資閘不動）。 */ .foot-fix{margin-top:10px} .foot-fix a::after{content:"›";content:"›" / "";margin-left:6px;font-weight:800} .foot-links{margin-top:8px;display:flex;flex-wrap:wrap;gap:0 24px} .foot-links .flink{min-width:44px} /* 「回頂端」三字寬只有 43.5px（稽核 L3.target 抓到），補到 44px */ /* ── 平板以上 ── */ @media (min-width:760px){ section{padding:56px 0} .sec-h{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:24px} .sec-h h2{font-size:34px} .tally{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px} .cards{gap:18px 24px} .cards li{padding:20px 22px 20px 96px} .cards .no{left:20px;top:20px;width:56px;height:56px} .cards .no b{font-size:28px} .cards h3{font-size:28px} .cards .pl{font-size:17px}.cards .tx{font-size:16px;max-width:40em}.cards .bn{font-size:16px} .grid{gap:12px} .cty{padding:14px 12px} .cty-jump ul{grid-template-columns:repeat(11,minmax(0,1fr))} .duo{grid-template-columns:1fr 1fr;gap:20px} .box{padding:24px 24px} .p-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .meta{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} } /* ── 900px 起：首屏雙欄（文案 44vw、其餘給地名牆；牆縮放後仍在首屏內）；縣市格 3 欄。 900–1199 牆與文案欄不重疊（文案最長的一行會貼近欄緣，重疊會讓字壓在牆的地名上）；≥1200 才像原版往左咬進 gutter。 ── */ @media (min-width:900px){ .hero{display:grid;grid-template-columns:minmax(0,44vw) minmax(0,1fr);padding-left:var(--gut)} .copy{padding:18px 0 34px} .art{margin:0;max-width:none;padding:0;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%);mask-image:linear-gradient(to right,transparent 0,#000 7%)} .grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:900px) and (max-width:1199px){ .hero h1{font-size:clamp(52px,6.4vw,104px)} } /* ── 1024px 起：十項承諾卡兩欄（<1024 單欄：768 寬兩欄時文字欄只剩 234px、每行 14 字；H-025）；縣市頁人名卡 3 欄（<1024 兩欄，狀態句的文字欄才有 ≥300px，不會把「本聯盟仍在確認公開聯絡管道；」拆出孤字）── */ @media (min-width:1024px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} .p-cards{grid-template-columns:repeat(3,minmax(0,1fr))} /* 回傳頁三張方式卡：三欄等高；按鈕區等高（最高的一張是卡 A：padding-top 16＋主按鈕 52＋間距 6＋來電連結 44＝118；box-sizing:border-box 所以 min-height 含 padding），三顆主按鈕上緣對齊 */ .ways{grid-template-columns:repeat(3,minmax(0,1fr))} .way-act{min-height:118px;align-content:start} } /* ── 1200px 起：縣市格 4 欄、名字籤單行（欄寬放得下姓名＋狀態字）；首屏文案欄回到 min(700px,48.6vw) ── */ @media (min-width:1200px){ .hero{grid-template-columns:min(700px,48.6vw) minmax(0,1fr)} .art{margin-left:calc(-1 * var(--gut))} .grid{grid-template-columns:repeat(4,minmax(0,1fr))} .slip{flex-direction:row;flex-wrap:wrap;align-items:flex-start;column-gap:6px;padding:5px 7px 5px 17px} .slip::before{left:5px} .slip .nm{flex:1 1 0;min-width:0;padding-left:0;white-space:normal;overflow-wrap:anywhere} .slip .st{flex:none} .slip .note-tag{position:static;flex:none;align-self:flex-start;padding-left:0} .slip .note-tag.note-row{flex:0 0 100%;padding-left:0} } /* ── 手機 ── */ @media (max-width:820px){ :root{--gut:16px} .top{flex-direction:column;align-items:flex-start;padding-top:14px;padding-bottom:4px;gap:2px;min-height:0} .brand svg{height:34px} .top nav{gap:0;margin-left:-9px} .top nav a{padding:0 9px;font-size:15px} .copy{padding-top:4px;padding-bottom:0} .eyebrow{margin-bottom:10px;font-size:16px} .hero h1{font-size:clamp(40px,12.8vw,52px);line-height:1.12} .hl.big svg.ul{bottom:-12px;height:26px} .hero-sub{font-size:16px;margin-top:12px;line-height:1.6} .cta{flex-wrap:nowrap;gap:10px;margin-top:16px} .btn{flex:1 1 auto;min-height:52px;font-size:16px;padding:0 12px;white-space:nowrap} .readers{margin-top:14px;font-size:15px} .readers b{min-width:80px} .readers a.rd-sub{margin-left:115px} .lead{font-size:15px;margin-bottom:16px} .eyebrow + .lead{margin-top:0} .orgs{font-size:15px} } /* ── <600px：手機牆（121 個地名）；≥600px 一律桌機牆（368 個）。手機牆上限 430px 置中（縮放 ≤1.1，不放大成地圖） ── */ @media (max-width:599px){ .wall-d{display:none} .wall-m{display:block;max-width:430px;margin:0 auto} } /* 共同發起團體名冊（人工審查 R2-012）：手機寬度一行一個。行內流排時短名稱兩個並排、長名稱一個一行，看起來像在分組，和頁面自己寫的「同字級呈現」互相打架。每個名稱獨占一列；字級、顏色、順序都不動（仍由 .orgs 統一設定，不逐項調整）。做法是把 .orgs 改成直排（flex-direction:column；列距仍是 .orgs 的 gap）；text-wrap 會繼承給 li：320 寬有 2 個 20 字以上的長名稱放不下一行，原本會折成「……協／會」只剩一個字，改 balance 讓兩行長度接近（只影響折行的那兩個，不改字、不改順序）。斷點用 480px 而非 430px：現行大尺寸手機直立時是 430–448 CSS px 寬（Pro Max 機型 430／440），430 會漏掉它們。 ≥481px（含 768 以上的桌機）維持原本的流排，不動。 */ @media (max-width:480px){ .orgs{flex-direction:column;text-wrap:balance} } /* <700px：地名牆左右貼齊視窗（不留 gutter），讓桌機牆在 600–699px 的縮放盡量大（600px 時地名約 11px） */ @media (max-width:699px){ .art{padding:0} } /* ── <350px（400% 縮放、舊款小手機）：縣市格單欄（兩欄時每卡 <152px，放不下「不簽署・看原文」）；快速入口左右留白縮小 ── */ /* R3-012（2026-10-03）：320 寬時 6 個一列，每格 47px 寬、格間只有 2px，3 個字的縣市名（15px×3＝45px）幾乎貼滿格子，讀起來像「基隆市臺北市新北市…」連成一串，只靠底線分段。22 個一律 6／6／6／4（無孤列，H-034），欄數不改；改兩件事： ①欄間距 2→4px（每格仍 ≥44px 寬、≥44px 高，觸控區不縮）；②字級隨寬度由 15px 縮到 14px（clamp 下限 14px：UX-010 規定樣式表內任何字級都 ≥14px； 4.4vw：320 寬＝14.08px）、文字在格內置中，縣市名之間的空白由約 3.7px 增為約 6.8px（14.08px×3＝42.2px，格寬 45px，加欄間距 4px）。 ≥350 寬原本就有 9px 以上，不動。連結內縮（padding 2px）與 ul 的負邊距（-2px）維持成對：文字左緣仍對齊內容欄。 */ @media (max-width:349px){ .grid{grid-template-columns:minmax(0,1fr)} .cty-jump ul{margin-left:-2px;gap:0 4px} .cty-jump a{padding:0 2px;justify-content:center;font-size:clamp(14px,4.4vw,15px)} } /* ── <360px：頁面大標 30px 放不下「我拿到簽好的承諾書，」（10 字＝300px > 288px 欄寬），縮到 26px 讓它整句在逗號處換行（H-022） ── */ @media (max-width:359px){ .page-head h1{font-size:26px} } /* ── <400px：中立聲明（縣市區那一框、頁尾各一次）最長的子句「不以簽署與否推論對兒少議題的重視程度，」19 字，17px 時寬 323px，欄寬窄於這個數就放不下，只好在字間緊急換行；Chrome 的緊急換行不守禁則（實測 keep-all＋anywhere 在 34／221 個欄寬讓「，」跑到行首，用 word-break:break-word 則完全不會，但那就失去在逗號處換行的保護），所以讓字級隨視窗寬度縮小到子句剛好放得下（下限 14px；縣市區那一框左側有 4px 線＋16px 內距，所以斜率比頁尾小），≥400px 回到 17px。 ── */ @media (max-width:399px){ .neutral-line{font-size:clamp(14px,4.4vw,17px)} .neutral{font-size:clamp(14px,4.6vw,17px)} } @media (max-width:339px){ .neutral-line{padding-left:12px} }