Spaces:

SiangKai
/

DataTalk

Running

App Files Files Community

SiangKai commited on Sep 12

Commit

36922c0

verified ·

1 Parent(s): f2c5bc9

Update 社福支出.html

Browse files

Files changed (1) hide show

社福支出.html +311 -354

社福支出.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>財政的考驗：高雄市超高齡社會下的社福支出預測</title>
     <style>
         :root {
             --c-primary: #2c5aa0;
@@ -41,6 +41,7 @@
             top: 0;
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
             border-bottom: 1px solid var(--c-border);
             z-index: 100;
             padding: 10px 0;
@@ -52,7 +53,13 @@
             gap: 20px;
             overflow-x: auto;
             padding: 0 20px;
         }
         .nav-list a {
             text-decoration: none;
@@ -71,7 +78,7 @@
         /* Hero Section */
         .hero {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
             text-align: center;
             padding: 80px 20px;
@@ -147,7 +154,13 @@
             background: white;
             padding: 30px;
             border-radius: 12px;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
         }
         .overview-icon {
@@ -170,7 +183,7 @@
         }
         .section-head h2 {
-            font-size: 2.5rem;
             color: var(--c-primary);
             margin-bottom: 15px;
         }
@@ -178,6 +191,8 @@
         .section-head p {
             font-size: 18px;
             color: var(--c-text-light);
         }
         /* Chapter Sections */
@@ -186,6 +201,10 @@
             border-bottom: 1px solid var(--c-border);
         }
         .chapter:nth-child(even) {
             background: var(--c-secondary);
         }
@@ -203,6 +222,14 @@
             max-width: 680px;
             margin: 0 auto;
         }
         /* KPI Cards */
         .kpi-grid {
@@ -217,7 +244,7 @@
             padding: 40px 30px;
             border-radius: 12px;
             text-align: center;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
             transition: transform 0.3s ease;
         }
@@ -231,6 +258,13 @@
             color: var(--c-primary);
             margin-bottom: 15px;
         }
         .kpi-desc {
             font-size: 16px;
@@ -243,50 +277,12 @@
             color: var(--c-text-light);
         }
-        /* Flow Chart */
-        .flowmap {
-            background: white;
-            padding: 40px;
-            border-radius: 12px;
-            margin: 40px 0;
-            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-        }
-        .flow-nodes {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-            align-items: center;
-        }
-        .flow-node {
-            background: var(--c-secondary);
-            padding: 20px 30px;
-            border-radius: 8px;
-            border-left: 4px solid var(--c-primary);
-            text-align: center;
-            position: relative;
-            max-width: 300px;
-        }
-        .flow-arrow {
-            font-size: 20px;
-            color: var(--c-primary);
-        }
-        .flow-explanation {
-            margin-top: 30px;
-            padding: 20px;
-            background: var(--c-secondary);
-            border-radius: 8px;
-            font-size: 15px;
-            line-height: 1.6;
-        }
         /* Timeline */
         .timeline {
             position: relative;
             padding: 40px 0;
         }
         .timeline::before {
@@ -305,6 +301,9 @@
             margin-bottom: 40px;
             position: relative;
         }
         .timeline-item:nth-child(odd) {
             flex-direction: row-reverse;
@@ -318,9 +317,14 @@
             width: calc(50% - 30px);
             position: relative;
         }
         .timeline-date {
-            font-weight: 600;
             color: var(--c-primary);
             margin-bottom: 10px;
         }
@@ -329,11 +333,13 @@
             position: absolute;
             left: 50%;
             top: 20px;
-            width: 12px;
-            height: 12px;
-            background: var(--c-primary);
             border-radius: 50%;
             transform: translateX(-50%);
         }
         /* Pull Quotes */
@@ -347,13 +353,15 @@
         }
         .pullquote::before {
-            content: '"';
-            font-size: 4rem;
             color: var(--c-accent);
             position: absolute;
-            top: 10px;
-            left: 20px;
-            opacity: 0.3;
         }
         .pullquote-text {
@@ -362,6 +370,7 @@
             font-style: italic;
             margin-bottom: 20px;
             padding-left: 40px;
         }
         .pullquote-author {
@@ -370,25 +379,29 @@
             color: var(--c-text-light);
         }
-        /* Figures */
         figure {
             margin: 40px 0;
             text-align: center;
         }
-        figure img {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-        }
         .chart-placeholder {
             background: var(--c-secondary);
             padding: 60px 40px;
             border-radius: 8px;
             border: 2px dashed var(--c-border);
             margin: 20px 0;
         }
         figcaption {
@@ -400,13 +413,20 @@
         /* Sources and Credits */
         .sources, .credits {
-            background: var(--c-secondary);
             padding: 40px 0;
         }
         .source-list {
             list-style: none;
             margin-top: 20px;
         }
         .source-list li {
@@ -418,6 +438,10 @@
         .source-list li:last-child {
             border-bottom: none;
         }
         /* Back to Top */
         .back-to-top {
@@ -444,6 +468,18 @@
             background: var(--c-accent);
             transform: translateY(-3px);
         }
         /* Responsive */
         @media (max-width: 768px) {
@@ -454,252 +490,214 @@
             .overview-item {
                 flex-direction: column;
                 text-align: center;
             }
             .timeline::before {
                 left: 20px;
             }
-            .timeline-item {
-                flex-direction: column !important;
                 padding-left: 50px;
             }
-            .timeline-content {
                 width: 100%;
             }
             .timeline-dot {
-                left: 20px;
             }
             .kpi-grid {
                 grid-template-columns: 1fr;
             }
-            .flow-nodes {
-                padding: 0 20px;
-            }
-        }
-        /* Print Styles */
-        @media print {
-            .nav, .back-to-top {
-                display: none !important;
-            }
-            .hero {
-                background: none !important;
-                color: var(--c-text) !important;
-            }
-            .chapter, .overview, .sources, .credits {
-                background: none !important;
-            }
-            body {
-                font-size: 12pt;
-                line-height: 1.4;
-            }
         }
     </style>
 </head>
 <body>
     <nav class="nav" id="nav">
-        <ul class="nav-list">
-            <li><a href="#hero" data-target="hero">首頁</a></li>
-            <li><a href="#overview" data-target="overview">重點摘要</a></li>
-            <li><a href="#demographic" data-target="demographic">人口結構轉變</a></li>
-            <li><a href="#regional" data-target="regional">區域發展差異</a></li>
-            <li><a href="#spending" data-target="spending">社福支出挑戰</a></li>
-            <li><a href="#policy" data-target="policy">政策財務影響</a></li>
-            <li><a href="#kpi" data-target="kpi">關鍵數字</a></li>
-            <li><a href="#sources" data-target="sources">資料來源</a></li>
-        </ul>
     </nav>
     <section class="hero" id="hero">
         <div class="hero-content">
-            <span class="hero-tag">專題分析</span>
-            <h1>高齡化下的財政考驗</h1>
-            <h2>高雄市老人社會福利支出變化預測</h2>
             <p class="hero-intro">
-                高雄市正步入超高齡社會，人口結構的劇烈轉變，對社會福利支出形成巨大壓力。本報告透過人口推估，深入分析未來十年高雄市社福財政的嚴峻挑戰，並探討政策應對之道。
             </p>
         </div>
     </section>
     <section class="overview" id="overview">
         <div class="container">
             <div class="section-head">
-                <h2>三大發現</h2>
-                <p>高雄社福財政未來十年預測</p>
             </div>
             <div class="overview-list">
                 <div class="overview-item">
                     <div class="overview-icon">📉</div>
                     <div>
-                        <h3>人口結構逆轉</h3>
-                        [cite_start]<p>預估至123年，總人口減少15萬人，但65歲以上老年人口反而激增16萬人，扶老比將從29飆升至43，社會扶養負擔急遽加重。 [cite: 81, 82, 83, 433]</p>
                     </div>
                 </div>
                 <div class="overview-item">
-                    <div class="overview-icon">🏘️</div>
                     <div>
-                        <h3>區域發展失衡</h3>
-                        [cite_start]<p>產業轉型帶動橋頭、仁武人口逆勢成長；但田寮、美濃等區人口外流嚴重，扶老比將突破70%，成為社會照護資源高度需求的區域。 [cite: 148, 434]</p>
                     </div>
                 </div>
                 <div class="overview-item">
-                    <div class="overview-icon">💰</div>
                     <div>
-                        <h3>社福支出倍增</h3>
-                        [cite_start]<p>三大老人社福支出（生活津貼、健保補助、敬老禮金）預計在123年將達119億元，較113年的74億元大幅增長，對市府財政形成嚴峻挑戰。 [cite: 230, 435]</p>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-    <section class="chapter" id="demographic">
-        <div class="container">
-            <h3 class="chapter-title">人口結構的未來衝擊</h3>
-            <div class="chapter-content">
-                <p>
-                    [cite_start]根據年輪變動比法(Cohort Change Ratio Method)推估，高雄市未來十年將面臨深刻的人口結構轉變。預計到123年底，全市總人口將從113年底的273萬人下降至258萬人，減少15萬人。 [cite: 81, 82]
-                </p>
-                <p>
-                    [cite_start]然而，在總人口減少的同時，高齡化趨勢卻在加速。65歲以上老年人口將從54萬人增加至70萬人，成長近30%；而15-64歲的工作年齡人口則將從189萬人減少至165萬人，大幅減少24萬人。 [cite: 82] [cite_start]這一增一減的趨勢，直接導致社會扶養負擔的惡化。代表每百名工作人口需扶養老年人數的「扶老比」，將從113年的29，大幅攀升至123年的43，顯示人口老化將使經濟與社會負擔逐年加劇。 [cite: 83]
-                </p>
-            </div>
-        </div>
-    </section>
-    <section class="chapter" id="regional">
         <div class="container">
-            <h3 class="chapter-title">區域發展的兩樣情</h3>
             <div class="chapter-content">
                 <p>
-                    [cite_start]全市性的人口變化下，各行政區呈現出截然不同的發展面貌。受惠於台積電等高科技產業進駐，部分區域展現強勁的人口吸引力。預估至123年，橋頭區人口將成長22%，仁武區成長18%，楠梓區亦有3%的增長，成為全市少數的人口正成長區。 [cite: 148]
                 </p>
                 <p>
-                    [cite_start]與此同時，部分傳統農業及沿海行政區面臨嚴峻的人口流失與老化問題。田寮區人口預計減少23%，內門區減少20%，旗津區減少19%。 [cite: 148] [cite_start]更值得關注的是，這些區域的扶老比急速惡化，預估至123年，田寮區扶老比高達89%，美濃區達76%，杉林區達71%。 [cite: 181, 223] 這些地區不僅人口負成長，更承受著沉重的照護負擔，亟需政策資源的重點投入。
                 </p>
             </div>
         </div>
     </section>
-    <section class="chapter" id="spending">
         <div class="container">
-            <h3 class="chapter-title">三大社福支出的財政挑戰</h3>
             <div class="chapter-content">
                 <p>
-                    [cite_start]人口老化直接衝擊社會福利支出。113年度，高雄市社會局決算中，「中低收入老人生活津貼」、「65歲以上老人健保費補助」及「重陽節敬老禮金」這三項主要的老人福利支出合計已達74億元，佔社會局總決算39%，佔福利服務支出的53%。 [cite: 230, 231]
                 </p>
                 <p>
-                    [cite_start]報告推估，在老年人口基數擴大與物價指數上漲的雙重影響下，這些支出將持續攀升。預計至123年，中低收入老人生活���貼將增至63億元、老人健保補助將達45億元，而重陽敬老禮金也將成長至11億元。 [cite: 435] 三項支出總和將高達119億元，十年增長超過60%，對市府財政的排擠效應與可持續性構成嚴峻考驗。
                 </p>
             </div>
         </div>
     </section>
-    <section class="chapter" id="policy">
         <div class="container">
-            <h3 class="chapter-title">政策的財務影響與建議</h3>
-            <div class="chapter-content">
-                <p>
-                    [cite_start]現有的福利政策在未來高齡人口倍增下，將產生巨大的「放大效應」。 [cite: 439] [cite_start]報告模擬，若將80-89歲長者的重陽敬老禮金每人再調高500元，未來十年合計將額外增加約6億元的支出。 [cite: 356, 436] 同樣地，若大眾運輸使用率提升，老人乘車補助的支出也將隨之增長，顯示任何福利政策的調整都需審慎評估其長期財務影響。
-                </p>
-                <p>
-                    [cite_start]基於此，報告建議應將田寮、美濃等高齡高負擔地區優先納為「高齡照護資源重點布建區」，強化在地老化支持。 [cite: 438] [cite_start]更重要的是，在制定任何福利政策時，必須考量中長期財務規劃，審慎評估其可持續性。 [cite: 439] [cite_start]為此，建議可建置一套「老人社會福利規劃計算機」，透過動態模擬不同參數下的財政影響，提升決策的科學性與前瞻性。 [cite: 441]
-                </p>
             </div>
         </div>
     </section>
     <section class="kpi-section" id="kpi">
         <div class="container">
             <div class="section-head">
                 <h2>關鍵數字</h2>
-                <p>數據下的未來挑戰</p>
             </div>
             <div class="kpi-grid">
                 <div class="kpi-card">
-                    <div class="kpi-number">258萬</div>
-                    <div class="kpi-desc">123年預估總人口</div>
-                    [cite_start]<div class="kpi-source">（來源：本文推估 [cite: 81]）</div>
                 </div>
                 <div class="kpi-card">
-                    <div class="kpi-number">70萬</div>
-                    <div class="kpi-desc">123年預估65歲以上人口</div>
-                    [cite_start]<div class="kpi-source">（來源：本文推估 [cite: 82]）</div>
                 </div>
                 <div class="kpi-card">
                     <div class="kpi-number">43</div>
-                    <div class="kpi-desc">123年預估扶老比</div>
-                    [cite_start]<div class="kpi-source">（來源：本文推估 [cite: 83]）</div>
                 </div>
                 <div class="kpi-card">
-                    <div class="kpi-number">119億</div>
-                    <div class="kpi-desc">123年三大老人社福支出預估</div>
-                    [cite_start]<div class="kpi-source">（來源：本文推估 [cite: 435]）</div>
                 </div>
                 <div class="kpi-card">
                     <div class="kpi-number">+22%</div>
-                    <div class="kpi-desc">橋頭區123年預估人口成長率</div>
-                    [cite_start]<div class="kpi-source">（來源：本文推估 [cite: 148]）</div>
                 </div>
                 <div class="kpi-card">
                     <div class="kpi-number">-23%</div>
-                    <div class="kpi-desc">田寮區123年預估人口成長率</div>
-                    [cite_start]<div class="kpi-source">（來源：本文推估 [cite: 148]）</div>
-                </div>
-                <div class="kpi-card">
-                    <div class="kpi-number">74億元</div>
-                    <div class="kpi-desc">113年三大老人社福支出</div>
-                    [cite_start]<div class="kpi-source">（來源：社會局 [cite: 230]）</div>
-                </div>
-                <div class="kpi-card">
-                    <div class="kpi-number">39%</div>
-                    <div class="kpi-desc">三大支出佔113年社福決算比例</div>
-                    [cite_start]<div class="kpi-source">（來源：社會局 [cite: 230]）</div>
                 </div>
             </div>
         </div>
     </section>
-    <section class="chapter">
         <div class="container">
             <div class="section-head">
-                <h2>財政壓力時程</h2>
-                <p>未來十年的關鍵轉變</p>
             </div>
             <div class="timeline">
                 <div class="timeline-item">
                     <div class="timeline-content">
-                        <div class="timeline-date">113年 (現況)</div>
-                        [cite_start]<div>65歲以上人口佔全市20%，已達超高齡社會標準。 [cite: 82] [cite_start]三大老人社福支出合計74億元，扶老比為29。 [cite: 83, 230]</div>
-                    </div>
-                    <div class="timeline-dot"></div>
-                </div>
-                <div class="timeline-item">
-                    <div class="timeline-content">
-                        <div class="timeline-date">114年 (轉折點)</div>
-                        [cite_start]<div>扶老比預計突破30。 [cite: 452] [cite_start]三大社福支出預估將突破80億元 (40+29+9=78億，實際應為接近80億)。 [cite: 275, 313, 345]</div>
                     </div>
                     <div class="timeline-dot"></div>
                 </div>
                 <div class="timeline-item">
                     <div class="timeline-content">
-                        <div class="timeline-date">119年 (壓力加劇)</div>
-                        [cite_start]<div>65歲以上人口將超過65萬人。 [cite: 452] [cite_start]三大社福支出總和預估將突破百億大關 (53+38+11=102億)。 [cite: 275, 313, 345]</div>
                     </div>
                     <div class="timeline-dot"></div>
                 </div>
                 <div class="timeline-item">
                     <div class="timeline-content">
-                        <div class="timeline-date">123年 (挑戰高峰)</div>
-                        [cite_start]<div>65歲以上人口達70萬人，扶老比飆升至43。 [cite: 82, 83] [cite_start]三大社福支出合計達119億元，財政負擔達最高峰。 [cite: 435]</div>
                     </div>
                     <div class="timeline-dot"></div>
                 </div>
@@ -707,38 +705,7 @@
         </div>
     </section>
-    <section class="chapter">
-        <div class="container">
-            <div class="pullquote">
-                <div class="pullquote-text">
-                    [cite_start]65歲以上與15-64歲人口消長情形，彰顯未來10年本市社會負擔逐年加劇。 [cite: 81]
-                </div>
-                <div class="pullquote-author">— 人口推估結果分析</div>
-            </div>
-            <div class="pullquote">
-                <div class="pullquote-text">
-                    [cite_start]當前看似可負擔之支出，將隨著未來老年人口倍增而產生「放大效應」，使總支出大幅增加，產生財政負擔，並可能排擠其他重要預算。 [cite: 439]
-                </div>
-                <div class="pullquote-author">— 政策建議</div>
-            </div>
-            <div class="pullquote">
-                <div class="pullquote-text">
-                    [cite_start]田寮區、美濃區、杉林區等人口減少均超過15%且扶老比均逾70%，社會負擔較為嚴峻，為社會照護高度需求區域。 [cite: 434]
-                </div>
-                <div class="pullquote-author">— 區域分析結論</div>
-            </div>
-            <div class="pullquote">
-                <div class="pullquote-text">
-                    [cite_start]建議依人口預測結果建置「老人社會福利規劃計算機」，動態模擬其對中長期財政之影響，從而提升決策參考之科學性、靈活性及前瞻性。 [cite: 441]
-                </div>
-                <div class="pullquote-author">— 政策建議</div>
-            </div>
-        </div>
-    </section>
     <section class="chapter">
         <div class="container">
             <div class="section-head">
@@ -748,184 +715,174 @@
             <figure>
                 <div class="chart-placeholder">
-                    <strong>圖表草稿：高雄市總人口與扶老比趨勢圖 (圖3)</strong><br>
-                    類型：長條圖與折線圖<br>
-                    X軸：年度 (109年-123年)<br>
-                    Y軸(左)：人口數 (萬人)<br>
-                    Y軸(右)：扶老比 (%)<br>
-                    重點：長條圖顯示總人口數逐年下降，折線圖顯示扶老比逐年急遽上升。
                 </div>
-                [cite_start]<figcaption>高雄市109年至123年總人口數與扶老比變化趨勢（資料來源：本文推估、內政部戶政司、國發會） [cite: 114]</figcaption>
-            </figure>
-            <figure>
-                <div class="chart-placeholder">
-                    <strong>圖表草稿：高雄市人口年齡結構變化圖 (圖4)</strong><br>
-                    類型：折線圖<br>
-                    X軸：年度 (109年-123年)<br>
-                    Y軸：人口數 (萬人)<br>
-                    重點：清楚呈現15-64歲人口曲線向下，65歲以上人口曲獻向上，0-14歲人口曲線微幅向下的分歧趨勢。
-                </div>
-                [cite_start]<figcaption>高雄市109年至123年各年齡層人口變化趨勢（資料來源：本文推估） [cite: 146]</figcaption>
             </figure>
             <figure>
                 <div class="chart-placeholder">
-                    <strong>圖表草稿：各行政區人口增減地圖 (圖5)</strong><br>
-                    類型：熱力地圖 (Choropleth Map)<br>
-                    資料：各行政區123年相較113年的人口增減率<br>
-                    顏色深淺：藍色系代表正成長(橋頭、仁武)，紅色系代表負成長(田寮、內門)<br>
-                    重點：視覺化呈現北高雄部分區域成長與多數區域衰退的強烈對比。
                 </div>
-                [cite_start]<figcaption>123年較113年底高雄市各行政區人口增減概況（資料來源：本文推估） [cite: 171]</figcaption>
             </figure>
             <figure>
                 <div class="chart-placeholder">
-                    <strong>圖表草稿：三大社福支出推估圖 (綜合圖8,9,10)</strong><br>
-                    類型：堆疊長條圖<br>
-                    X軸：年度 (109年-123年)<br>
-                    Y軸：支出金額 (億元)<br>
-                    分類：中低收津貼、健保補助、敬老禮金<br>
-                    重點：顯示三項支出的總額逐年增長，以及各項支出的構成比例。
                 </div>
-                <figcaption>高雄市三大老人社福支出109年至123年變化趨勢（資料來源：本文推估、社會局）</figcaption>
             </figure>
         </div>
     </section>
     <section class="sources" id="sources">
         <div class="container">
             <div class="section-head">
-                <h2>資料來源</h2>
             </div>
             <ul class="source-list">
-                <li>余清祥、王信忠、陳譽騰."年輪變動比用於小區域人口推估的探討." [cite_start]Journal of Population Studies 63 (2021): 99-133. [cite: 443]</li>
-                [cite_start]<li>陳孟廷."臺北市人口推估."統計應用分析報告(2020) [cite: 444]</li>
-                [cite_start]<li>歐長潤."區域人口推估——以桃園為例.”主計月刊第734期(2017) [cite: 445]</li>
-                [cite_start]<li>吳彥緯."我國區域人口推估——年輪變動比法之可行性初探”經濟論衡_夏季號_5-1 (2023). [cite: 446]</li>
-                <li>"健全財政因應超高齡社會來臨." [cite_start]主計月刊第829期 (2025) [cite: 447]</li>
                 <li>內政部戶政司全球資訊網「人口統計資料」</li>
-                <li>高雄市政府社會局決算與補助執行資料</li>
-                <li>國家發展委員會「中華民國人口推估」</li>
             </ul>
         </div>
     </section>
     <section class="credits">
         <div class="container">
             <div class="section-head">
                 <h2>製作團隊</h2>
             </div>
-            <p><strong>資料分析</strong>：廖祥凱</p>
-            <p><strong>數位製作</strong>：透過AI生成</p>
-            <p><strong>資料整理</strong>：廖祥凱</p>
-            <p><strong>文章校閱</strong>：宋方捷、黃河川</p>
-            <p><strong>發布時間</strong>：2025年9月【報告發布時間】</p>
-            <p><strong>更新時間</strong>：2025年9月</p>
         </div>
     </section>
     <button class="back-to-top" id="backToTop" aria-label="返回頂部">↑</button>
     <script>
-        // Navigation highlighting
-        const navLinks = document.querySelectorAll('.nav-list a');
-        const sections = document.querySelectorAll('section[id]');
-        function updateActiveNav() {
-            let current = '';
-            sections.forEach(section => {
-                const sectionTop = section.getBoundingClientRect().top;
-                const sectionHeight = section.offsetHeight;
-                if (sectionTop <= 100 && sectionTop + sectionHeight > 100) {
-                    current = section.getAttribute('id');
-                }
-            });
             navLinks.forEach(link => {
-                link.classList.remove('active');
-                if (link.getAttribute('data-target') === current) {
-                    link.classList.add('active');
-                }
             });
-        }
-        // Smooth scrolling
-        navLinks.forEach(link => {
-            link.addEventListener('click', (e) => {
-                e.preventDefault();
-                const targetId = link.getAttribute('href');
-                const targetSection = document.querySelector(targetId);
-                if (targetSection) {
-                    targetSection.scrollIntoView({
-                        behavior: 'smooth',
-                        block: 'start'
-                    });
                 }
-            });
-        });
-        // Back to top button
-        const backToTopBtn = document.getElementById('backToTop');
-        function toggleBackToTop() {
-            if (window.pageYOffset > 300) {
-                backToTopBtn.style.display = 'flex';
-            } else {
-                backToTopBtn.style.display = 'none';
-            }
-        }
-        backToTopBtn.addEventListener('click', () => {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
             });
-        });
-        // Scroll event listeners
-        window.addEventListener('scroll', () => {
-            updateActiveNav();
-            toggleBackToTop();
-        });
-        // Initialize
-        updateActiveNav();
-        toggleBackToTop();
-        // Lazy loading for images (if any real images are added)
-        const images = document.querySelectorAll('img[data-src]');
-        const imageObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    const img = entry.target;
-                    img.src = img.dataset.src;
-                    img.removeAttribute('data-src');
-                    imageObserver.unobserve(img);
-                }
             });
-        });
-        images.forEach(img => imageObserver.observe(img));
-        // Add some animation on scroll for key elements
-        const animateElements = document.querySelectorAll('.kpi-card, .pullquote, .timeline-item');
-        const animationObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.style.opacity = '1';
-                    entry.target.style.transform = 'translateY(0)';
-                }
             });
-        }, { threshold: 0.1 });
-        animateElements.forEach(el => {
-            el.style.opacity = '0';
-            el.style.transform = 'translateY(20px)';
-            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
-            animationObserver.observe(el);
         });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>高齡化下的財政挑戰：高雄市老人社會福利支出變化報告</title>
     <style>
         :root {
             --c-primary: #2c5aa0;
             top: 0;
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
             border-bottom: 1px solid var(--c-border);
             z-index: 100;
             padding: 10px 0;
             gap: 20px;
             overflow-x: auto;
             padding: 0 20px;
+            -ms-overflow-style: none; /* IE and Edge */
+            scrollbar-width: none; /* Firefox */
         }
+        .nav-list::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, and Opera */
+        }
         .nav-list a {
             text-decoration: none;
         /* Hero Section */
         .hero {
+            background: linear-gradient(135deg, #2c5aa0 0%, #1e3c72 100%);
             color: white;
             text-align: center;
             padding: 80px 20px;
             background: white;
             padding: 30px;
             border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(44, 90, 160, 0.08);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+        }
+        .overview-item:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(44, 90, 160, 0.12);
         }
         .overview-icon {
         }
         .section-head h2 {
+            font-size: clamp(2rem, 4vw, 2.5rem);
             color: var(--c-primary);
             margin-bottom: 15px;
         }
         .section-head p {
             font-size: 18px;
             color: var(--c-text-light);
+            max-width: 600px;
+            margin: 0 auto;
         }
         /* Chapter Sections */
             border-bottom: 1px solid var(--c-border);
         }
+        .chapter:last-of-type {
+            border-bottom: none;
+        }
         .chapter:nth-child(even) {
             background: var(--c-secondary);
         }
             max-width: 680px;
             margin: 0 auto;
         }
+        .chapter-content p {
+            margin-bottom: 1.5em;
+        }
+        .chapter-content p:last-child {
+            margin-bottom: 0;
+        }
         /* KPI Cards */
         .kpi-grid {
             padding: 40px 30px;
             border-radius: 12px;
             text-align: center;
+            box-shadow: 0 4px 20px rgba(44, 90, 160, 0.08);
             transition: transform 0.3s ease;
         }
             color: var(--c-primary);
             margin-bottom: 15px;
         }
+        .kpi-number small {
+            font-size: 1.5rem;
+            font-weight: 500;
+            margin-left: 4px;
+            color: var(--c-text-light);
+        }
         .kpi-desc {
             font-size: 16px;
             color: var(--c-text-light);
         }
         /* Timeline */
         .timeline {
             position: relative;
             padding: 40px 0;
+            max-width: 600px;
+            margin: 0 auto;
         }
         .timeline::before {
             margin-bottom: 40px;
             position: relative;
         }
+        .timeline-item:last-child {
+            margin-bottom: 0;
+        }
         .timeline-item:nth-child(odd) {
             flex-direction: row-reverse;
             width: calc(50% - 30px);
             position: relative;
         }
+        .timeline-item:nth-child(odd) .timeline-content {
+            text-align: right;
+        }
         .timeline-date {
+            font-weight: 700;
+            font-size: 1.5rem;
             color: var(--c-primary);
             margin-bottom: 10px;
         }
             position: absolute;
             left: 50%;
             top: 20px;
+            width: 16px;
+            height: 16px;
+            background: white;
+            border: 3px solid var(--c-primary);
             border-radius: 50%;
             transform: translateX(-50%);
+            z-index: 1;
         }
         /* Pull Quotes */
         }
         .pullquote::before {
+            content: '“';
+            font-family: serif;
+            font-size: 6rem;
             color: var(--c-accent);
             position: absolute;
+            top: -10px;
+            left: 15px;
+            opacity: 0.2;
+            line-height: 1;
         }
         .pullquote-text {
             font-style: italic;
             margin-bottom: 20px;
             padding-left: 40px;
+            position: relative;
         }
         .pullquote-author {
             color: var(--c-text-light);
         }
+        /* Figures & Charts */
         figure {
             margin: 40px 0;
             text-align: center;
         }
         .chart-placeholder {
             background: var(--c-secondary);
             padding: 60px 40px;
             border-radius: 8px;
             border: 2px dashed var(--c-border);
             margin: 20px 0;
+            transition: background-color 0.3s ease;
+        }
+        .chart-placeholder:hover {
+            background-color: #e9eff8;
+        }
+        .chart-placeholder strong {
+            display: block;
+            font-size: 1.2rem;
+            color: var(--c-primary);
+            margin-bottom: 1rem;
         }
         figcaption {
         /* Sources and Credits */
         .sources, .credits {
             padding: 40px 0;
+            text-align: center;
+        }
+        .sources {
+            background: var(--c-secondary);
         }
         .source-list {
             list-style: none;
             margin-top: 20px;
+            text-align: left;
+            max-width: 680px;
+            margin-left: auto;
+            margin-right: auto;
         }
         .source-list li {
         .source-list li:last-child {
             border-bottom: none;
         }
+        .credits p {
+            margin-bottom: 8px;
+        }
         /* Back to Top */
         .back-to-top {
             background: var(--c-accent);
             transform: translateY(-3px);
         }
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+        }
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
         /* Responsive */
         @media (max-width: 768px) {
             .overview-item {
                 flex-direction: column;
                 text-align: center;
+                align-items: center;
             }
             .timeline::before {
                 left: 20px;
+                transform: translateX(0);
             }
+            .timeline-item,
+            .timeline-item:nth-child(odd) {
+                flex-direction: column;
                 padding-left: 50px;
             }
+            .timeline-content,
+            .timeline-item:nth-child(odd) .timeline-content {
                 width: 100%;
+                text-align: left;
             }
             .timeline-dot {
+                left: 12px;
             }
             .kpi-grid {
                 grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
+    <!-- Navigation -->
     <nav class="nav" id="nav">
+        <div class="container">
+            <ul class="nav-list">
+                <li><a href="#hero" data-target="hero" class="active">報告首頁</a></li>
+                <li><a href="#overview" data-target="overview">三大發現</a></li>
+                <li><a href="#projection" data-target="projection">人口推估</a></li>
+                <li><a href="#expenditure" data-target="expenditure">社福支出</a></li>
+                <li><a href="#kpi" data-target="kpi">關鍵數字</a></li>
+                <li><a href="#timeline" data-target="timeline">未來時程</a></li>
+                <li><a href="#sources" data-target="sources">資料來源</a></li>
+            </ul>
+        </div>
     </nav>
+    <!-- Hero Section -->
     <section class="hero" id="hero">
         <div class="hero-content">
+            <span class="hero-tag">統計專題分析</span>
+            <h1>高齡化下的財政挑戰</h1>
+            <h2>以人口預測觀察高雄市老人社會福利支出變化</h2>
             <p class="hero-intro">
+                隨著高齡化趨勢加劇，人口結構變化已成為地方政府資源分配的關鍵議題。本報告透過人口推估，深入分析未來十年高雄市的人口結構轉變，並衡量其對老人社會福利支出的深遠影響，為政策規劃提供前瞻性參考。
             </p>
         </div>
     </section>
+    <!-- Overview Section -->
     <section class="overview" id="overview">
         <div class="container">
             <div class="section-head">
+                <h2>三大核心發現</h2>
+                <p>未來十年高雄市即將面臨的挑戰與轉變</p>
             </div>
             <div class="overview-list">
                 <div class="overview-item">
                     <div class="overview-icon">📉</div>
                     <div>
+                        <h3>人口結構轉變</h3>
+                        <p>預估至民國123年，高雄總人口將減少15萬人，但65歲以上老年人口反而增加16萬人。勞動人口減少與高齡人口增加的雙重壓力，將使社會扶養負擔逐年加劇。</p>
                     </div>
                 </div>
                 <div class="overview-item">
+                    <div class="overview-icon">📈</div>
                     <div>
+                        <h3>社福支出遽增</h3>
+                        <p>因應人口老化與物價上漲，三大老人社福支出（中低收津貼、健保補助、敬老禮金）預計將從113年的74億元，大幅膨脹至123年的119億元，對市府財政形成嚴峻考驗。</p>
                     </div>
                 </div>
                 <div class="overview-item">
+                    <div class="overview-icon">🏘️</div>
                     <div>
+                        <h3>區域發展失衡</h3>
+                        <p>產業轉型帶動橋頭、仁武區人口正成長；但田寮、美濃等區人口將大幅減少，且扶老比超過70%，資源分配與在地安老將成為重要課題，需更精準的政策介入。</p>
                     </div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Chapter 1: Population Projection -->
+    <section class="chapter" id="projection">
         <div class="container">
+            <h3 class="chapter-title">未來十年人口結構推估</h3>
             <div class="chapter-content">
                 <p>
+                    根據年輪變動比法（人口CCR法）推估，從民國114年至123年，高雄市總人口數將呈現逐年下降趨勢，預計在123年底降至258萬人，相較113年底的273萬人，共減少15萬人。
                 </p>
                 <p>
+                    更值得關注的是人口結構的劇烈變化。65歲以上的老年人口將從54萬人增加至70萬人，勁揚29%，佔總人口比例從20%提升至27%。與此同時，15-64歲的主要勞動人口將從189萬人減少至165萬人，大幅減少24萬人。一增一減之間，意味著每100位勞動人口需扶養的老年人數（扶老比）將從29人飆升至43人，社會整體的經濟與照護負擔將顯著加劇。
                 </p>
             </div>
         </div>
     </section>
+    <!-- Chapter 2: Social Welfare Expenditure -->
+    <section class="chapter" id="expenditure">
         <div class="container">
+            <h3 class="chapter-title">老人社福支出衝擊分析</h3>
             <div class="chapter-content">
                 <p>
+                    民國113年，高雄市社會局決算中，三大老人社福支出（中低收入老人生活津貼、65歲以上老人健保費補助、重陽節敬老禮金）合計高達74億元，佔福利服務總支出的53%。
                 </p>
                 <p>
+                    展望未來，在高齡人口基數擴大與消費者物價指數穩定成長的雙重因素推動下，這筆支出將迅速膨脹。推估至123年，中低收入老人生活津貼將增至63億元，老人健保補助費增至45億元，重陽節敬老禮金則增至11億元。三大項目合計總支出將達到119億元，相較113年成長超過60%，顯示現行福利政策將面臨人口結構轉變帶來的放大效應，對財政永續性構成巨大挑戰。
                 </p>
             </div>
         </div>
     </section>
+    <!-- Pull Quotes -->
+    <section class="chapter">
         <div class="container">
+            <div class="pullquote">
+                <div class="pullquote-text">
+                    65歲以上與15-64歲人口消長情形，彰顯未來10年本市社會負擔逐年加劇。
+                </div>
+                <div class="pullquote-author">— 人口推估結果分析</div>
+            </div>
+            <div class="pullquote">
+                <div class="pullquote-text">
+                    現有老人社會福利政策正面臨人口老化帶來的嚴峻挑戰。當前看似可負擔之支出，將隨著未來老年人口倍增而產生「放大效應」。
+                </div>
+                <div class="pullquote-author">— 結論與建議</div>
             </div>
         </div>
     </section>
+    <!-- KPI Cards -->
     <section class="kpi-section" id="kpi">
         <div class="container">
             <div class="section-head">
                 <h2>關鍵數字</h2>
+                <p>數據呈現未來十年的高雄樣貌</p>
             </div>
             <div class="kpi-grid">
                 <div class="kpi-card">
+                    <div class="kpi-number">258<small>萬人</small></div>
+                    <div class="kpi-desc">123年底預估總人口</div>
+                    <div class="kpi-source">(較113年減少15萬人)</div>
                 </div>
                 <div class="kpi-card">
+                    <div class="kpi-number">70<small>萬人</small></div>
+                    <div class="kpi-desc">123年底65歲以上人口</div>
+                    <div class="kpi-source">(較113年增加16萬人)</div>
                 </div>
                 <div class="kpi-card">
                     <div class="kpi-number">43</div>
+                    <div class="kpi-desc">123年底扶老比</div>
+                    <div class="kpi-source">(每百名勞動人口扶養43名長者)</div>
                 </div>
                 <div class="kpi-card">
+                    <div class="kpi-number">119<small>億元</small></div>
+                    <div class="kpi-desc">123年三大老人社福預估支出</div>
+                    <div class="kpi-source">(較113年74億元成長60%)</div>
                 </div>
                 <div class="kpi-card">
                     <div class="kpi-number">+22%</div>
+                    <div class="kpi-desc">橋頭區預估人口成長率</div>
+                    <div class="kpi-source">(全市人口成長率最高)</div>
                 </div>
                 <div class="kpi-card">
                     <div class="kpi-number">-23%</div>
+                    <div class="kpi-desc">田寮區預估人口減少率</div>
+                    <div class="kpi-source">(全市人口流失最嚴重)</div>
                 </div>
             </div>
         </div>
     </section>
+    <!-- Timeline -->
+    <section class="chapter" id="timeline">
         <div class="container">
             <div class="section-head">
+                <h2>高齡化與財政負擔時程</h2>
+                <p>未來十年的關鍵轉折點</p>
             </div>
             <div class="timeline">
                 <div class="timeline-item">
                     <div class="timeline-content">
+                        <div class="timeline-date">113年</div>
+                        <div><b>現況基準點</b><br>總人口273萬人，老年人口54萬人，扶老比為29。三大社福支出約74億元。</div>
                     </div>
                     <div class="timeline-dot"></div>
                 </div>
                 <div class="timeline-item">
                     <div class="timeline-content">
+                        <div class="timeline-date">118年</div>
+                        <div><b>壓力加劇期</b><br>老年人口突破63萬人，扶老比攀升至36。社福支出預估將突破百億大關。</div>
                     </div>
                     <div class="timeline-dot"></div>
                 </div>
                 <div class="timeline-item">
                     <div class="timeline-content">
+                        <div class="timeline-date">123年</div>
+                        <div><b>挑戰高峰期</b><br>總人口降至258萬人，但老年人口達70萬人，扶老比來到43。三大社福支出將高達119億元。</div>
                     </div>
                     <div class="timeline-dot"></div>
                 </div>
         </div>
     </section>
+    <!-- Charts and Data -->
     <section class="chapter">
         <div class="container">
             <div class="section-head">
             <figure>
                 <div class="chart-placeholder">
+                    <strong>圖表佔位符：高雄市總人口與扶老比趨勢圖</strong><br>
+                    類型：長條折線複合圖<br>
+                    X軸：年度（109年至123年）<br>
+                    Y軸（左）：人口數（萬人），以長條圖呈現<br>
+                    Y軸（右）：扶老比，以折線圖呈現<br>
+                    重點：清楚顯示總人口下降與扶老比急速上升的反向趨勢。
                 </div>
+                <figcaption>資料來源：高雄市政府主計處，依人口CCR法推估。</figcaption>
             </figure>
             <figure>
                 <div class="chart-placeholder">
+                    <strong>圖表佔位符：各年齡層人口變化趨勢</strong><br>
+                    類型：折線圖<br>
+                    X軸：年度（109年至123年）<br>
+                    Y軸：人口數（萬人）<br>
+                    線條：三條線分別代表 0-14歲、15-64歲、65歲以上人口<br>
+                    重點：呈現勞動人口(15-64歲)下降，而高齡人口(65歲以上)穩定上升的交叉趨勢。
                 </div>
+                <figcaption>資料來源：高雄市政府主計處，依人口CCR法推估。</figcaption>
             </figure>
             <figure>
                 <div class="chart-placeholder">
+                    <strong>圖表佔位符：三大老人社福支出預估</strong><br>
+                    類型：堆疊區域圖或分組長條圖<br>
+                    X軸：年度（113年至123年）<br>
+                    Y軸：支出金額（億元）<br>
+                    分類：中低收入老人生活津貼、65歲以上老人健保費補助、重陽節敬老禮金<br>
+                    重點：視覺化呈現三項主要支出的成長趨勢及總額的快速膨脹。
                 </div>
+                <figcaption>資料來源：高雄市政府主計處，依人口推估及物價指數模型計算。</figcaption>
             </figure>
         </div>
     </section>
+    <!-- Sources -->
     <section class="sources" id="sources">
         <div class="container">
             <div class="section-head">
+                <h2>資料來源與參考文獻</h2>
             </div>
             <ul class="source-list">
+                <li>余清祥、王信忠、陳譽騰."年輪變動比用於小區域人口推估的探討." Journal of Population Studies 63 (2021): 99-133.</li>
+                <li>陳孟廷."臺北市人口推估."統計應用分析報告(2020)</li>
+                <li>歐長潤."區域人口推估——以桃園為例.”主計月刊第734 期(2017)</li>
+                <li>吳彥緯."我國區域人口推估——年輪變動比法之可行性初探”經濟論衡_夏季號_5-1 (2023).</li>
+                <li>"健全財政因應超高齡社會來臨." 主計月刊第829期(2025)</li>
                 <li>內政部戶政司全球資訊網「人口統計資料」</li>
+                <li>國發會「中華民國人口推估」</li>
             </ul>
         </div>
     </section>
+    <!-- Credits -->
     <section class="credits">
         <div class="container">
             <div class="section-head">
                 <h2>製作團隊</h2>
             </div>
+            <p><strong>報告撰寫</strong>：廖祥凱（高雄市政府主計處）</p>
+            <p><strong>資料分析</strong>：高雄市政府主計處</p>
+            <p><strong>數位製作</strong>：AI 資料視覺化專家</p>
+            <p><strong>發布時間</strong>：2024年</p>
         </div>
     </section>
+    <!-- Back to Top Button -->
     <button class="back-to-top" id="backToTop" aria-label="返回頂部">↑</button>
     <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Navigation highlighting and smooth scrolling
+            const navLinks = document.querySelectorAll('.nav-list a');
+            const sections = document.querySelectorAll('section[id]');
+            const nav = document.getElementById('nav');
+            const navHeight = nav.offsetHeight;
+            const updateActiveNav = () => {
+                let current = '';
+                sections.forEach(section => {
+                    const sectionTop = section.offsetTop;
+                    if (pageYOffset >= sectionTop - navHeight - 1) {
+                        current = section.getAttribute('id');
+                    }
+                });
+                navLinks.forEach(link => {
+                    link.classList.remove('active');
+                    if (link.getAttribute('data-target') === current) {
+                        link.classList.add('active');
+                    }
+                });
+            };
             navLinks.forEach(link => {
+                link.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    const targetId = link.getAttribute('href');
+                    const targetSection = document.querySelector(targetId);
+                    if (targetSection) {
+                        // A small timeout allows the scroll to start before updating the nav
+                        // which feels smoother if the user clicks quickly.
+                        setTimeout(() => {
+                           window.scrollTo({
+                                top: targetSection.offsetTop - navHeight,
+                                behavior: 'smooth'
+                            });
+                        }, 50);
+                    }
+                });
             });
+            // Back to top button
+            const backToTopBtn = document.getElementById('backToTop');
+            const toggleBackToTop = () => {
+                if (window.pageYOffset > 300) {
+                    if (backToTopBtn.style.display !== 'flex') {
+                       backToTopBtn.style.display = 'flex';
+                    }
+                } else {
+                    if (backToTopBtn.style.display === 'flex') {
+                       backToTopBtn.style.display = 'none';
+                    }
                 }
+            };
+            backToTopBtn.addEventListener('click', () => {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
             });
+            // Scroll-triggered animations
+            const fadeElements = document.querySelectorAll('.overview-item, .kpi-card, .pullquote, .timeline-item, figure, .source-list li');
+            const observerOptions = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1
+            };
+            const animationObserver = new IntersectionObserver((entries, observer) => {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('visible');
+                        observer.unobserve(entry.target);
+                    }
+                });
+            }, observerOptions);
+            fadeElements.forEach(el => {
+                el.classList.add('fade-in');
+                animationObserver.observe(el);
             });
+            // Event listeners
+            window.addEventListener('scroll', () => {
+                updateActiveNav();
+                toggleBackToTop();
             });
+            // Initial calls
+            updateActiveNav();
+            toggleBackToTop();
         });
     </script>
 </body>
+</html>