今日目標
學習如何透過 CSS Paged Media 規範（如 @page、break-inside 與 break-before），將昨天的動態網頁轉化為符合 A4 實體紙張規格的專業醫療報表，解決頁面邊距與內容遭到隨意切斷的痛點。

核心概念：網頁與「實體紙張」的衝突
一般的網頁設計是為了「螢幕」而生的，內容可以無限向下捲動；但健檢報告最終是要列印成實體 PDF，或者是交給 Gotenberg 進行無頭瀏覽器轉檔。
如果沒有做紙張規範，轉檔時常會發生悲劇：

1. 沒有邊距：文字直接貼死在 PDF 的最邊緣，完全無法裝訂。
2. 內容被攔腰切斷：表格的一行字剛好卡在第一頁的底部跟第二頁的頂部，字被橫向切成兩半，極度不專業。

所幸，W3C 推出了 CSS Paged Media 規範，讓我們能用純 CSS 來控制列印時的紙張行為！

實作重點：加入 CSS 頁面控制規範

Step 1：修改 health_report.html 的 <style> 樣式
打開我們昨天建好的 health_report.html，在 <style> 區塊中加入 @page 與分頁控制屬性。
Step 2：應用防護屬性
將我們不想被切斷的重要區塊（例如「醫師總評」或未來的檢驗明細表格區塊）套用 .avoid-break 類別

測試與心得
今天我專注在前端排版與列印樣式上，所以只需要修改 src/main/resources/templates/health_report.html的內容，在 HTML 的 標籤中加入 CSS Paged Media 相關的規範（例如設定 A4 紙張大小、邊距、右下角動態頁碼，以及防斷頁保護），就能讓原本普通的網頁瞬間擁有實體紙本報告的精緻排版！
進入網頁後按下鍵盤的 Ctrl + P (列印) 功能，在瀏覽器的列印預覽畫面中，可以發現網頁四周自動留出了20mm裝訂邊距，且版面配置完全符合 A4 紙張比例！

透過 CSS Paged Media，我們不用寫任何複雜的座標換算程式碼，就能輕易掌控實體紙張的排版邏輯。明天（Day 9），我們要來實作更精緻的「醫院級表頭與動態浮水印」，讓報表看起來就像真的從大醫院印出來的一樣專業！