/* 專題研究頁（research//）版面樣式 * * 只放 tools/build-topics.js 產生的頁面才會用到的元件：breadcrumb、eyebrow、 * data cards、圖表 figure、研究方法收合區塊、資料來源區塊、表格、清單。 * 其餘版型（.art / .art-col / .art-title / .art-meta / .art-body h2/h3/p/hr / * .art-cta / .art-foot）直接沿用 assets/journal.css 既有規則，不重複定義， * 避免出現第二套品牌設計系統。 * * 桌機正文寬度沿用 .art-col 既有的 720px；data cards／圖表在 .rs-col 內 * 可視需要撐到接近容器寬度（.wrap 上限 1080px），不強制到 1200px。 */ .art--topic .art-body{margin-top:8px} /* ---- Breadcrumb ---- */ .rs-crumb{ font-family:var(--sans);font-size:.74rem;letter-spacing:.04em;color:var(--text-mute); margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px;align-items:center; } .rs-crumb a{color:var(--text-mute);text-decoration:none;border-bottom:1px solid transparent} .rs-crumb a:hover{color:var(--accent-strong);border-color:var(--accent)} .rs-crumb span[aria-hidden]{opacity:.6} .rs-crumb span[aria-current]{color:var(--text-soft)} /* ---- Eyebrow / Title / Subtitle / Meta ---- */ .rs-eyebrow{ font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase; color:var(--accent-strong);margin:0 0 10px; } .rs-title{margin-top:0} .rs-subtitle{ font-family:var(--serif);font-size:clamp(1.02rem,2.4vw,1.22rem);line-height:1.75; color:var(--text-soft);margin:14px 0 24px;max-width:56ch; } .rs-meta{margin:0 0 26px} .rs-hero-intro{ font-size:1.02rem;line-height:1.9;color:var(--text-soft);margin:0 0 30px; padding-left:16px;border-left:2px solid var(--accent); } /* ---- Data Cards ---- */ .rs-cards{ display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 40px; } .rs-card{ border:1px solid var(--line);border-radius:2px;padding:20px 16px;text-align:center; background:var(--panel); } .rs-card b{ display:block;font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,1.9rem);font-weight:600; color:var(--text);letter-spacing:.01em; } .rs-card span{ display:block;margin-top:8px;font-family:var(--sans);font-size:.74rem;letter-spacing:.02em; color:var(--text-mute);line-height:1.5; } @media (max-width:640px){ .rs-cards{grid-template-columns:repeat(2,1fr)} } /* ---- 正文清單／粗體（journal.css 目前沒有為 .art-body 定義這兩者，僅在topic頁補上， 不影響情報室既有文章渲染）---- */ .art--topic .art-body ul, .art--topic .art-body ol{margin:0 0 18px;padding-left:1.4em;color:var(--text-soft);font-size:1rem;line-height:1.9} .art--topic .art-body li{margin:0 0 6px} .art--topic .art-body strong{color:var(--text);font-weight:600} .art--topic .art-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em; background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:.05em .35em; } .art--topic .art-body h3{margin-top:26px} /* ---- 圖表 figure ---- */ .rs-chart{margin:34px 0;padding:0} .rs-chart img{max-width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:2px} .rs-chart figcaption{ margin-top:12px;font-family:var(--sans);font-size:.82rem;line-height:1.8;color:var(--text-mute); padding-left:11px;position:relative; } .rs-chart figcaption::before{ content:"";position:absolute;left:0;top:.3em;bottom:.3em;width:2px;background:var(--accent); } /* ---- 研究方法與資料限制（收合區塊）---- */ .rs-details{ margin:40px 0;border:1px solid var(--line);border-radius:2px;padding:18px 22px; } .rs-details summary{ cursor:pointer;font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--text); list-style:none;display:flex;align-items:center;gap:8px; } .rs-details summary::-webkit-details-marker{display:none} .rs-details summary::before{content:"▸";color:var(--accent-strong);font-size:.85em;transition:transform .18s ease} .rs-details[open] summary::before{transform:rotate(90deg)} .rs-details-body{margin-top:18px} .rs-details-body h2{font-family:var(--serif);font-size:1.08rem;font-weight:600;margin:30px 0 8px;line-height:1.5} .rs-details-body h2:first-child{margin-top:0} .rs-details-body p{font-size:.94rem;line-height:1.9;color:var(--text-soft);margin:0 0 14px} .rs-details-body ul,.rs-details-body ol{margin:0 0 14px;padding-left:1.4em;color:var(--text-soft);font-size:.94rem;line-height:1.85} .rs-details-body strong{color:var(--text);font-weight:600} .rs-details-body code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em; background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:.05em .35em; } /* 方法附錄裡的表格沿用簡化版樣式，不用 .art-table 的figure/caption結構（來源markdown無caption） */ .rs-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:2px;margin:0 0 18px} .rs-table-scroll table{border-collapse:collapse;width:100%;min-width:min(100%,480px)} .rs-table-scroll th,.rs-table-scroll td{ padding:10px 14px;text-align:left;font-size:.86rem;line-height:1.6; border-bottom:1px solid var(--line); } .rs-table-scroll thead th{ font-family:var(--sans);font-size:.74rem;letter-spacing:.06em; color:var(--rp-thead-fg);background:var(--rp-thead-bg);font-weight:500; border-bottom:2px solid var(--accent); } .rs-table-scroll tbody tr:nth-child(even) > td{background-color:var(--rp-stripe)} /* ---- 資料來源 ---- */ .rs-sources{margin:40px 0} .rs-sources h2{font-family:var(--serif);font-size:1.16rem;font-weight:600;margin:0 0 16px} .rs-sources ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .rs-sources li{ padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 14px; } .rs-sources li b{font-family:var(--sans);font-size:.92rem;color:var(--text);white-space:nowrap} .rs-sources li span{font-size:.9rem;color:var(--text-soft)} /* ---- CTA 次要連結 ---- */ .rs-cta .rs-secondary-link{ display:inline-block;margin:14px 0 0 16px;font-family:var(--sans);font-size:.84rem; color:var(--text-mute);text-decoration:none;border-bottom:1px solid transparent; } .rs-cta .rs-secondary-link:hover{color:var(--accent-strong);border-color:var(--accent)} @media (max-width:480px){ .rs-cta .rs-secondary-link{display:block;margin:14px 0 0} } /* ---- 發布保留說明（publicationHold：只在 Preview 審閱用的專題頁出現）---- */ .rs-hold{ margin:0 0 22px;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--accent); background:var(--panel);border-radius:2px;font-family:var(--sans);font-size:.86rem;line-height:1.7;color:var(--text-soft); } .rs-hold b{display:block;color:var(--text);font-weight:600;margin-bottom:2px} /* ---- 手機優先的窄版圖表（檔名 INV0 開頭）：桌機不要被撐滿整個內容欄 ---- 這組 SVG 的 viewBox 只有 480 寬，是照手機欄寬設計的；內容欄在桌機約 1024px， 直接撐滿會讓單張圖高過一個螢幕。這裡把它限制在 560px 並置中，圖說跟著對齊。 手機欄寬本來就小於 560px，所以手機顯示不受影響。 刻意用檔名開頭而不是專題代稱當選擇器：發布保留中的專題代稱不得出現在任何會上線的檔案裡 （tools/vercel-build.js 會擋）。 */ .rs-chart img[src*="/INV0"]{max-width:560px;margin-left:auto;margin-right:auto} .rs-chart img[src*="/INV0"] + figcaption{max-width:560px;margin-left:auto;margin-right:auto} /* ---- 欄位多的表格（7 欄以上）：不讓儲存格逐字換行 ---- 預設樣式在手機上會把 7 欄表格的每一欄擠到只剩一個字寬，行政區名稱變成直排。 欄位多的表格改成不換行、縮小左右留白；放不下時由外層 .rs-table-scroll 橫向捲動。 6 欄以下的表格不受影響。 */ .rs-table-scroll table:has(th:nth-child(7)) th, .rs-table-scroll table:has(th:nth-child(7)) td{white-space:nowrap} @media (max-width:600px){ .rs-table-scroll table:has(th:nth-child(7)) th, .rs-table-scroll table:has(th:nth-child(7)) td{padding:9px 5px;font-size:.82rem} .rs-table-scroll table:has(th:nth-child(7)) th:first-child, .rs-table-scroll table:has(th:nth-child(7)) td:first-child{padding-left:10px} } /* ---- 有手機版（mobileFile）的圖表： 依螢幕寬度換圖 ---- */ .rs-chart picture{display:block} .rs-chart picture img{width:100%} .rs-related li{display:block} .rs-related li a{color:inherit;text-decoration:none;display:block} .rs-related li a:hover b{text-decoration:underline} .rs-related li b{white-space:normal} .rs-related li span{display:block;margin-top:4px}