Spaces:

SiangKai
/

DataTalk

Running

App Files Files Community

SiangKai commited on Aug 20

Commit

6a6458e

verified ·

1 Parent(s): 740cdd4

Upload 社福支出.html

Browse files

Files changed (1) hide show

社福支出.html +777 -0

社福支出.html ADDED Viewed

	@@ -0,0 +1,777 @@

+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>銀色海嘯下的財政拔河：高雄社福支出深度報導</title>
+    <meta name="description" content="高雄市正迎來超高齡社會的嚴峻挑戰。本專題深入解析市府統計報告，揭示在人口結構快速老化下，老人社福支出如何以驚人速度攀升，對城市財政帶來何種衝擊，以及我們該如何應對這場無法迴避的銀色浪潮。">
+    <style>
+        /* --- CSS 變數與基本設定 --- */
+        :root {
+            --c-primary: #0a3d62;
+            --c-secondary: #3c6382;
+            --c-accent: #c0392b; /* A more serious accent color */
+            --c-background: #fdfdfd;
+            --c-text: #333333;
+            --c-text-light: #f5f5f5;
+            --c-border: #dddddd;
+            --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+            --max-width: 800px;
+            scroll-padding-top: 60px; /* 錨點偏移，避免被 sticky header 擋住 */
+        }
+        /* --- 重置與基本排版 --- */
+        *, *::before, *::after {
+            box-sizing: border-box;
+        }
+        html {
+            scroll-behavior: smooth;
+        }
+        body {
+            margin: 0;
+            font-family: var(--font-family-sans);
+            line-height: 1.8;
+            color: var(--c-text);
+            background-color: var(--c-background);
+            font-size: 16px;
+        }
+        h1, h2, h3 {
+            line-height: 1.4;
+            color: var(--c-primary);
+            font-weight: 700;
+        }
+        h1 { font-size: 2.5rem; }
+        h2 { font-size: 1.8rem; }
+        h3 { font-size: 1.3rem; }
+        p {
+            margin-top: 0;
+            margin-bottom: 1.5em;
+        }
+        a {
+            color: var(--c-secondary);
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+        }
+        /* --- 主要容器與模組 --- */
+        .container {
+            max-width: var(--max-width);
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        main > section {
+            padding: 60px 0;
+        }
+        .divider {
+            border: 0;
+            height: 1px;
+            background-color: var(--c-border);
+            margin: 80px auto;
+            width: 80%;
+        }
+        /* --- 頁首導覽列 --- */
+        .main-header {
+            position: sticky;
+            top: 0;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            z-index: 100;
+            border-bottom: 1px solid var(--c-border);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+        }
+        .main-nav {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+            overflow-x: auto;
+            white-space: nowrap;
+        }
+        .main-nav a {
+            padding: 0 15px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--c-secondary);
+            transition: color 0.3s ease, border-bottom 0.3s ease;
+            border-bottom: 3px solid transparent;
+            height: 60px;
+            display: flex;
+            align-items: center;
+        }
+        .main-nav a.active, .main-nav a:hover {
+            color: var(--c-primary);
+            border-bottom-color: var(--c-accent);
+        }
+        /* --- 主視覺區 (Hero) --- */
+        .hero {
+            height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            color: var(--c-text-light);
+            background: linear-gradient(135deg, rgba(10, 61, 98, 0.85), rgba(60, 99, 130, 0.95));
+            padding: 20px;
+        }
+        .hero-content {
+            max-width: 700px;
+        }
+        .hero .tag {
+            display: inline-block;
+            padding: 5px 15px;
+            background-color: var(--c-accent);
+            color: var(--c-text-light);
+            border-radius: 20px;
+            font-size: 0.9rem;
+            margin-bottom: 20px;
+            font-weight: bold;
+        }
+        .hero h1 {
+            color: var(--c-text-light);
+            margin: 0;
+            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
+        }
+        .hero h2 {
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 1.5rem;
+            font-weight: 400;
+            margin: 10px 0 20px 0;
+        }
+        .hero .lead {
+            font-size: 1.1rem;
+            line-height: 1.7;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+        /* --- 總覽區 (Overview) --- */
+        .overview ul {
+            list-style: none;
+            padding: 0;
+            display: grid;
+            gap: 30px;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        }
+        .overview li {
+            background-color: #f8f9fa;
+            padding: 25px;
+            border-radius: 8px;
+            border-left: 5px solid var(--c-accent);
+            font-weight: 500;
+        }
+        .overview li::before {
+            content: '✔';
+            color: var(--c-accent);
+            margin-right: 10px;
+            font-weight: bold;
+        }
+        /* --- 章節敘事 --- */
+        .section-head {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        .section-head h3 {
+            color: var(--c-accent);
+            font-size: 1.1rem;
+            margin-bottom: 5px;
+            text-transform: uppercase;
+        }
+        .section-head h2 {
+            margin-top: 0;
+        }
+        /* --- 關鍵數字卡 (KPI Card) --- */
+        .kpi-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin: 50px 0;
+        }
+        .kpi-card {
+            background-color: var(--c-secondary);
+            color: var(--c-text-light);
+            padding: 25px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+        .kpi-card .number {
+            font-size: 3.5rem;
+            font-weight: 700;
+            color: var(--c-text-light);
+            margin: 0;
+            line-height: 1.1;
+        }
+        .kpi-card .number small {
+            font-size: 1.5rem;
+            font-weight: 400;
+        }
+        .kpi-card .label {
+            font-size: 1rem;
+            margin: 10px 0 10px 0;
+            flex-grow: 1;
+        }
+        .kpi-card .source {
+            font-size: 0.8rem;
+            opacity: 0.7;
+        }
+        /* --- 流程/關係圖區 (Flowmap) --- */
+        .flowmap-container {
+            background-color: #f8f9fa;
+            padding: 30px;
+            border-radius: 8px;
+            margin: 50px 0;
+        }
+        .flowmap {
+            list-style: none;
+            padding: 0;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            gap: 15px;
+        }
+        .flowmap li {
+            background-color: white;
+            padding: 10px 20px;
+            border-radius: 50px;
+            font-weight: 500;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            position: relative;
+            text-align: center;
+        }
+        .flowmap li:not(:last-child)::after {
+            content: '→';
+            color: var(--c-accent);
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-left: 15px;
+        }
+        /* --- 時間軸 (Timeline) --- */
+        .timeline {
+            position: relative;
+            max-width: 600px;
+            margin: 50px auto;
+        }
+        .timeline::after {
+            content: '';
+            position: absolute;
+            width: 3px;
+            background-color: var(--c-border);
+            top: 0;
+            bottom: 0;
+            left: 15px;
+        }
+        .timeline-item {
+            padding: 10px 40px;
+            position: relative;
+            background-color: inherit;
+            width: 100%;
+            padding-left: 50px;
+            padding-bottom: 30px;
+        }
+        .timeline-item::after {
+            content: '';
+            position: absolute;
+            width: 15px;
+            height: 15px;
+            background-color: white;
+            border: 4px solid var(--c-accent);
+            top: 15px;
+            left: 8px;
+            border-radius: 50%;
+            z-index: 1;
+        }
+        .timeline-content {
+            padding: 20px;
+            background-color: #f8f9fa;
+            position: relative;
+            border-radius: 6px;
+        }
+        .timeline-content .time {
+            font-weight: bold;
+            color: var(--c-primary);
+        }
+        .timeline-content .event {
+            margin: 5px 0;
+        }
+        .timeline-content .impact {
+            font-size: 0.9rem;
+            color: #666;
+        }
+        /* --- 拉引語 (Pull Quote) --- */
+        .pullquote {
+            border-left: 5px solid var(--c-accent);
+            padding-left: 25px;
+            margin: 50px auto;
+            max-width: 80%;
+        }
+        .pullquote blockquote {
+            margin: 0;
+            font-size: 1.4rem;
+            font-style: italic;
+            color: var(--c-secondary);
+        }
+        .pullquote footer {
+            margin-top: 10px;
+            font-weight: bold;
+            color: var(--c-primary);
+        }
+        /* --- 圖片/圖表 --- */
+        figure {
+            margin: 40px 0;
+            text-align: center;
+        }
+        figure .placeholder {
+            width: 100%;
+            min-height: 300px;
+            background: #f0f2f5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #666;
+            border-radius: 8px;
+            font-style: italic;
+            padding: 20px;
+            border: 1px dashed var(--c-border);
+            line-height: 1.6;
+        }
+        figcaption {
+            margin-top: 10px;
+            font-size: 0.9rem;
+            color: #666;
+            text-align: left;
+        }
+        /* --- 資料來源 & 製作名單 --- */
+        .sources, .credits {
+            background-color: #f1f3f5;
+            padding: 40px;
+            border-radius: 8px;
+            margin-top: 60px;
+        }
+        .sources h3, .credits h3 {
+            margin-top: 0;
+            border-bottom: 2px solid var(--c-border);
+            padding-bottom: 10px;
+        }
+        .sources ul {
+            list-style: square;
+            padding-left: 20px;
+        }
+        .credits p {
+            margin-bottom: 0.5em;
+        }
+        .credits span {
+            display: inline-block;
+            width: 100px;
+            font-weight: bold;
+        }
+        /* --- 返回頂部按鈕 --- */
+        .back-to-top {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            width: 50px;
+            height: 50px;
+            background-color: var(--c-accent);
+            color: white;
+            border: none;
+            border-radius: 50%;
+            font-size: 24px;
+            cursor: pointer;
+            display: none; /* JS控制顯示 */
+            opacity: 0;
+            transition: opacity 0.3s, transform 0.3s;
+            z-index: 1000;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        }
+        .back-to-top.show {
+            display: block;
+            opacity: 1;
+        }
+        /* --- 響應式設計 --- */
+        @media (max-width: 768px) {
+            h1 { font-size: 2rem; }
+            h2 { font-size: 1.5rem; }
+            .hero { height: auto; min-height: 90vh; padding: 60px 20px; }
+            .flowmap { flex-direction: column; align-items: stretch; gap: 25px; }
+            .flowmap li:not(:last-child)::after { content: '↓'; margin-left: 0; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); }
+            .flowmap li { width: 100%; text-align: center; }
+            .pullquote { max-width: 100%; }
+        }
+        /* --- 列印樣式 --- */
+        @media print {
+            body {
+                line-height: 1.5;
+                font-size: 12pt;
+                color: #000;
+            }
+            .main-header, .back-to-top, .divider {
+                display: none;
+            }
+            main > section {
+                padding: 20px 0;
+            }
+            .hero {
+                background: none;
+                color: #000;
+                height: auto;
+                text-align: left;
+            }
+            .hero h1, .hero h2 {
+                color: #000;
+                text-shadow: none;
+            }
+            .kpi-card {
+                background-color: #f0f0f0 !important;
+                color: #000 !important;
+                border: 1px solid #ccc;
+            }
+            .kpi-card .number, .kpi-card .number small {
+                color: #000 !important;
+            }
+            a {
+                text-decoration: underline;
+                color: #000;
+            }
+            figure .placeholder {
+                border: 1px solid #ccc;
+                background: #f0f0f0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header class="main-header" aria-label="頁面導覽">
+        <nav class="main-nav" id="main-nav">
+            <a href="#overview">報告總覽</a>
+            <a href="#chapter-1">人口警訊</a>
+            <a href="#chapter-2">雙速城市</a>
+            <a href="#chapter-3">預算黑洞</a>
+            <a href="#chapter-4">財政壓力</a>
+            <a href="#chapter-5">未來解方</a>
+            <a href="#references">資料來源</a>
+        </nav>
+    </header>
+    <main>
+        <!-- 主視覺區 -->
+        <header class="hero" id="hero">
+            <div class="hero-content">
+                <span class="tag">專題報導</span>
+                <h1>銀色海嘯下的財政拔河</h1>
+                <h2>高雄如何應對超高齡社會的社福支出考驗？</h2>
+                <p class="lead">高雄市正步入超高齡社會，人口結構的劇烈轉變，正悄然牽動著城市財政的每一條神經。本專題深入解析市府統計報告，揭示老人相關社會福利支出如何以驚人速度攀升，對城市預算帶來何種衝擊，又有哪些區域面臨「人口流失」與「扶老重擔」的雙重夾擊？這是一場無法迴避的財政挑戰。</p>
+            </div>
+        </header>
+        <div class="container">
+            <!-- 一頁式總覽 -->
+            <section id="overview" aria-labelledby="overview-title">
+                <div class="section-head">
+                    <h2 id="overview-title">報告總覽</h2>
+                </div>
+                <ul>
+                    <li><b>人口結構劇變：</b>未來十年（113-123年），高雄市總人口預估將減少15萬人，65歲以上人口將增加至70萬人，並在120年首度超越青壯年核心勞動力（25-44歲）人口。（來源：PDF p.7, p.8）</li>
+                    <li><b>社福支出飆升：</b>主要老人社福支出在四年內（109-113年）已大幅成長33%，從56億元增至74億元，預計到123年將攀升至119億元，成為財政的沉重壓力。（來源：PDF p.11, p.12-p.15）</li>
+                    <li><b>區域發展失衡：</b>產業轉型帶動橋頭、仁武人口逆勢成長；但田寮、美濃等偏鄉地區面臨人口減少逾15%及扶老比超過70%的雙重困境，亟需精準的資源配置。（來源：PDF p.9, p.10）</li>
+                </ul>
+            </section>
+            <hr class="divider">
+            <!-- 章節一 -->
+            <section id="chapter-1" aria-labelledby="chapter-1-title">
+                <article>
+                    <div class="section-head">
+                        <h3>Chapter 1：案例</h3>
+                        <h2 id="chapter-1-title">警訊：當扶老比成為不可承受之重</h2>
+                    </div>
+                    <p>數字的背後，是每個區域正在上演的真實故事。報告預測，到了民國123年，高雄市田寮區的扶老比將高達89%，這意味著平均每100位工作年齡人口，就要扶養89位老年人，同時該區人口在十年間還將銳減23%。（來源：PDF p.10）同樣面臨嚴峻挑戰的還有美濃區（扶老比76%、人口減少16%）和杉林區（扶老比71%、人口減少18%）。這些區域不僅是地圖上的人口負成長熱區，更代表著一種結構性的困境：當地的青壯年勞動力持續外流，留下高比例的長者，社區的照護壓力與經濟活力同步衰退，形成惡性循環。這不僅是地方的難題，更是對整體社會安全網韌性的嚴酷考驗。</p>
+                </article>
+                <div class="pullquote">
+                    <blockquote>田寮、美濃、杉林等區人口減幅超過15%、扶老比逾70%，建議優先納入「高齡照護資源重點布建區」，強化在地老化支撐網絡。</blockquote>
+                    <footer>—— 報告建議（來源：PDF p.21）</footer>
+                </div>
+            </section>
+            <!-- 關鍵數字卡 -->
+            <section class="kpi-grid" aria-label="關鍵數據">
+                <div class="kpi-card">
+                    <p class="number">-15<small>萬人</small></p>
+                    <p class="label">未來十年高雄總人口預估減少數</p>
+                    <p class="source">（來源：PDF p.7）</p>
+                </div>
+                <div class="kpi-card">
+                    <p class="number">33<small>%</small></p>
+                    <p class="label">近四年三大老人社福支出成長率</p>
+                    <p class="source">（來源：PDF p.11）</p>
+                </div>
+                <div class="kpi-card">
+                    <p class="number">70<small>萬人</small></p>
+                    <p class="label">123年高雄65歲以上人口預估數</p>
+                    <p class="source">（來源：PDF p.8）</p>
+                </div>
+                 <div class="kpi-card">
+                    <p class="number">89<small>%</small></p>
+                    <p class="label">123年田寮區預估扶老比</p>
+                    <p class="source">（來源：PDF p.10）</p>
+                </div>
+            </section>
+            <!-- 章節二 -->
+            <section id="chapter-2" aria-labelledby="chapter-2-title">
+                <article>
+                    <div class="section-head">
+                        <h3>Chapter 2：脈絡</h3>
+                        <h2 id="chapter-2-title">產業轉型下的雙速城市</h2>
+                    </div>
+                    <p>在人口普遍負成長的趨勢���，高雄內部呈現出「雙速發展」的鮮明對比。受惠於台積電等高科技產業進駐的政策效應，橋頭區、仁武區與楠梓區成為了少數的人口正成長亮點。報告預估，未來十年橋頭區人口將大幅成長22%，仁武區亦有18%的增幅。（來源：PDF p.9）這股由產業轉型帶動的人口紅利，不僅為區域注入新活力，也反映在交通建設、新興住宅開發與就業機會的增加上。然而，這股活水尚未能灌溉整座城市。當新興科技廊帶吸引大量青壯年人口遷入時，傳統農業區與偏鄉的人口流失問題卻愈發嚴重。這種區域發展的不均衡，使得資源分配的挑戰更加複雜，如何在促進新興區域發展的同時，穩住偏鄉地區的基本生活機能與社會照護體系，成為市府必須面對的課題。</p>
+                </article>
+                <figure>
+                    <div class="placeholder" data-src="高雄市38行政區人口負擔概況圖" role="img" aria-label="高雄市38行政區人口負擔概況圖">
+                        圖表草稿說明：散佈圖<br>
+                        X軸：扶老比 (%)<br>
+                        Y軸：113-123年人口成長率 (%)<br>
+                        數據：以點標示38個行政區，並特別標示出右上角（橋頭、仁武）與左下角（田寮、美濃）的極端案例。<br>
+                        閱讀重點：視覺化呈現各行政區在「扶老負擔」與「人口增減」兩個維度上的分布，凸顯雙速發展的現象。
+                    </div>
+                    <figcaption>圖說：高雄市各行政區的人口結構與變遷呈現極大差異，部分新興區域享受人口紅利，但多數傳統區域則面臨高扶老比與人口負成長的雙重壓力。（資料來源：改繪自 PDF p.10 圖6）</figcaption>
+                </figure>
+            </section>
+            <hr class="divider">
+            <!-- 章節三 -->
+            <section id="chapter-3" aria-labelledby="chapter-3-title">
+                <article>
+                    <div class="section-head">
+                        <h3>Chapter 3：數據</h3>
+                        <h2 id="chapter-3-title">三大社福支出的預算黑洞</h2>
+                    </div>
+                    <p>檢視高雄市的社福預算，可以發現老人福利經費正以驚人的速度膨脹。報告指出，光是「中低收入老人生活津貼」、「65歲以上老人健保費補助」及「重陽節敬老禮金」這三項主要支出，在113年度就高達74億元，佔據了整體福利服務支出的53%。（來源：PDF p.11）更值得注意的是，這筆支出在短短四年間（109-113年）就從56億元暴增了33%。報告進一步推估，隨著老年人口基數擴大及補助金額因應物價調整，這股成長趨勢將難以遏止。預計到民國123年，單是健保補助支出就將達到45億元，中低收老人津貼更將高達63億元。（來源：PDF p.12, p.14）這些數字不僅是會計帳目上的增長，它們實質上壓縮了其他市政建設與社會投資的空間，形成一個潛在的預算黑洞。</p>
+                </article>
+                <figure>
+                    <div class="placeholder" data-src="高雄市人口年齡結構趨勢圖" role="img" aria-label="高雄市人口年齡結構趨勢圖">
+                        圖表草稿說明：折線圖<br>
+                        X軸：年份（109年至123年）<br>
+                        Y軸：人口數（萬人）<br>
+                        數據：繪製「65歲以上」、「25-44歲」、「45-64歲」等多條人口數變化曲線。<br>
+                        閱讀重點：清晰呈現「65歲以上」人口曲線的陡峭上升，以及其與「25-44歲」核心勞動力曲線在120年的黃金交叉點。
+                    </div>
+                    <figcaption>圖說：推估至民國120年，高雄市65歲以上的老年人口數將首度超越25-44歲的青壯年人口，人口結構的根本性轉變將對勞動力與社會照護帶來巨大挑戰。（資料來源：改繪自 PDF p.8 圖4）</figcaption>
+                </figure>
+            </section>
+            <!-- 流程/關係圖區 -->
+            <section id="flowmap-section" aria-labelledby="flowmap-title">
+                <div class="section-head">
+                    <h2 id="flowmap-title">社福支出如何滾雪球？</h2>
+                </div>
+                <div class="flowmap-container">
+                    <ul class="flowmap" aria-label="社福支出成長路徑">
+                        <li>人口高齡化</li>
+                        <li>65歲以上人口基數擴大</li>
+                        <li>社福補助人次增加</li>
+                        <li>物價指數上漲</li>
+                        <li>每人次補助金額調升</li>
+                        <li>年度總支出飆高</li>
+                    </ul>
+                    <p><b>為何重要：</b>此流程揭示了老人社福支出成長的「複利效應」。它不僅僅是因老年人口增加而線性成長，更會因為法規中與物價指數連動的調整機制，產生「人數」與「單價」同步上漲的加乘效果。理解這個滾雪球的過程，有助於決策者意識到，任何一次性的福利加碼，都可能在未來的人口結構下，演變成持續性的巨大財政負擔。</p>
+                </div>
+            </section>
+            <!-- 章節四 -->
+            <section id="chapter-4" aria-labelledby="chapter-4-title">
+                <article>
+                    <div class="section-head">
+                        <h3>Chapter 4：責任/影響</h3>
+                        <h2 id="chapter-4-title">政策加碼下的財政壓力鍋</h2>
+                    </div>
+                    <p>在人口結構變遷的基礎上，任何福利政策的微調都可能牽一髮動全身。報告以情境模擬分析，若將80-89歲長者的重陽敬老禮金再調高500元，未來十年市庫將額外增加約6億元的支出。（來源：PDF p.17）此外，隨著市府推動大眾運輸政策，若能成功提升長者的搭乘率，預計到123年，相關的交通補助支出也將從現今的3億元增長至5億元。（來源：PDF p.18）這些看似立意良善的政策，都將使持續升溫的財政壓力鍋再添柴火。這凸顯了政策制定者面臨的兩難：一方面要回應高齡選民對社會福利的期待，另一方面又要確保城市財政的永續性。在資源有限的現實下，每一次的福利加碼，都意味著在教育、公共建設或青年發展等其他領域的投資可能被排擠。</p>
+                </article>
+                <div class="pullquote">
+                    <blockquote>現有政策受人口結構影響，可能對中長期產生額外效果...現階段老人社會福利支出在未來將被放大相當倍數，相關政策建議均以中長期財務規劃工具審慎評估可持續性。</blockquote>
+                    <footer>—— 【生成】高雄市政府主計處官員（改寫自 PDF p.21）</footer>
+                </div>
+            </section>
+            <!-- 時間軸 -->
+            <section id="timeline-section" aria-labelledby="timeline-title">
+                <div class="section-head">
+                    <h2 id="timeline-title">關鍵時間點</h2>
+                </div>
+                <div class="timeline">
+                    <div class="timeline-item">
+                        <div class="timeline-content">
+                            <p class="time">民國109年 (2020)</p>
+                            <p class="event">→ 三大老人社福支出為56億元。</p>
+                            <p class="impact">後續影響：作為近年社福支出快速成長的比較基期。</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-content">
+                            <p class="time">民國113年 (2024)</p>
+                            <p class="event">→ 三大老人社福支出達74億元，四年成長33%。</p>
+                            <p class="impact">後續影響：確立支出高速成長趨勢，財政壓力浮現。</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-content">
+                            <p class="time">民國120年 (2031)【推估】</p>
+                            <p class="event">→ 65歲以上人口數將首度超越25-44歲人口數。</p>
+                            <p class="impact">後續影響：高雄市人口結構迎來黃金交叉，勞動力與被扶養人口比例根本性逆轉。</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-content">
+                            <p class="time">民國123年 (2034)【推估】</p>
+                            <p class="event">→ 總人口降至258萬人，三大社福支出預估達119億元。</p>
+                            <p class="impact">後續影響：城市總人口減少，但老人福利支出相較113年再成長60%，財政挑戰達高峰。</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <!-- 章節五 -->
+            <section id="chapter-5" aria-labelledby="chapter-5-title">
+                <article>
+                    <div class="section-head">
+                        <h3>Chapter 5：解方/待釐清</h3>
+                        <h2 id="chapter-5-title">尋找永續與公平的平衡點</h2>
+                    </div>
+                    <p>面對這場銀色海嘯，報告最終指向了「精準投放」與「永���規劃」兩大方向。首先，針對田寮、美濃等扶老負擔極重的區域，建議應優先劃設為「高齡照護資源重點布建區」，打破齊頭式的福利發放，將有限的資源更有效地投入到在地老化的支持網絡中，例如強化社區關懷據點、日間照顧中心與交通接駁服務。（來源：PDF p.21）其次，報告也提醒，所有福利政策都必須以中長期的財務規劃工具進行審慎評估。決策者需要建立一個動態調整的機制，而非僅僅回應當下的民意壓力。例如，建置一個能即時根據人口預測與財政狀況，模擬各項福利支出變化的「社福計算機」，將有助於做出更具前瞻性與責任感的決策。如何在滿足長者需求的同時，兼顧世代正義與城市財政的永續性，將是高雄未來十年最重要的課題。</p>
+                </article>
+            </section>
+            <!-- 資料來源與製作名單 -->
+            <section id="references" aria-labelledby="references-title">
+                <div class="sources">
+                    <h3 id="references-title">參考資料 Sources</h3>
+                    <ul>
+                        <li>高雄市政府主計處，〈以人口預測觀察高齡化下高雄市老人社會福利支出變化〉統計專題分析，114年8月。（本文主要資料來源）</li>
+                        <li>余清祥、王信忠、陳譽騰，"年輪變動比用於小區域人口推估的探討"，Journal of Population Studies 63 (2021): 99-133。</li>
+                        <li>內政部戶政司全球資訊網「人口統計資料」</li>
+                        <li>國家發展委員會「中華民國人口推估」</li>
+                        <li>交通部「113年民眾日常使用運具狀況調查」【待補】</li>
+                    </ul>
+                </div>
+                <div class="credits">
+                    <h3>製作名單 Credits</h3>
+                    <p><span>資料來源</span>高雄市政府主計處</p>
+                    <p><span>原撰寫人</span>廖祥凱</p>
+                    <p><span>【生成】監製</span>王曉玟</p>
+                    <p><span>【生成】製作人</span>李宜靜</p>
+                    <p><span>【生成】記者</span>陳思妤</p>
+                    <p><span>【生成】設計</span>林育正</p>
+                    <p><span>【生成】工程</span>黃彥霖</p>
+                    <p><span>【生成】出品</span>聯合報系</p>
+                    <p><span>【生成】出刊日期</span>2025.08.20</p>
+                </div>
+            </section>
+        </div>
+    </main>
+    <button class="back-to-top" id="back-to-top" title="返回頂部" aria-label="返回頂部">↑</button>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const nav = document.getElementById('main-nav');
+            const navLinks = nav.querySelectorAll('a');
+            const sections = document.querySelectorAll('main section[id]');
+            const backToTopButton = document.getElementById('back-to-top');
+            // --- 導覽列高亮 ---
+            const onScroll = () => {
+                let currentSection = '';
+                const scrollPosition = window.scrollY;
+                sections.forEach(section => {
+                    const sectionTop = section.offsetTop - 70; // 考慮導覽列高度和一些緩衝
+                    if (scrollPosition >= sectionTop) {
+                        currentSection = section.getAttribute('id');
+                    }
+                });
+                navLinks.forEach(link => {
+                    link.classList.remove('active');
+                    if (link.getAttribute('href') === `#${currentSection}`) {
+                        link.classList.add('active');
+                    }
+                });
+                // --- 返回頂部按鈕顯示/隱藏 ---
+                if (window.scrollY > 300) {
+                    backToTopButton.classList.add('show');
+                } else {
+                    backToTopButton.classList.remove('show');
+                }
+            };
+            window.addEventListener('scroll', onScroll);
+            onScroll(); // 初始載入時執行一次
+            // --- 返回頂部按鈕點擊事件 ---
+            backToTopButton.addEventListener('click', () => {
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+            });
+            // --- 圖片懶載入 (此處為示意) ---
+            const images = document.querySelectorAll('.placeholder[data-src]');
+            images.forEach(img => {
+                const altText = img.getAttribute('data-src');
+                img.setAttribute('aria-label', altText);
+            });
+        });
+    </script>
+</body>
+</html>