今日目標
透過 CSS Flexbox 與 Grid 佈局，切出具備醫院名稱、Logo 預留區與受檢者資訊欄的專業表頭；同時調整醫療報告專屬的高對比灰階色調，確保列印時清晰易讀。

核心概念：醫療視覺設計的「克制與清晰」
在設計一般商業網頁時，我們可能會使用大量繽紛的色彩、陰影或特效。但醫療級報表恰恰相反：

1. 高對比與灰階為主：報告通常會透過黑白雷射印表機列印，或者由醫生快速審閱。過多的色彩不僅沒有幫助，還可能模糊焦點。
2. 資訊結構化：病患的姓名、身分證字號、檢驗日期等核心個資必須在表頭一眼望穿，且左右對齊、井然有序。

今天我們將結合 CSS Grid 與 Flexbox，把 health_report.html 的表頭與基本框架升級為業界水準。

實作重點：優化 HTML 結構與 CSS 樣式

1. 專業醫院表頭：使用 Flexbox 實現左右對齊
   利用 CSS Flexbox 的 space-between 特性，讓左側的醫院品牌名稱與右側的檢驗日期自動貼齊兩端，呈現絕佳的視覺平衡
   CSS

.report-header {
    display: flex;
    justify-content: space-between; /* 讓左右區塊各自貼齊左右兩端 */
    align-items: center;            /* 垂直置中對齊 */
    border-bottom: 3px solid #1a365d; /* 專業沉穩的深藍色底線 */
    padding-bottom: 12px;
    margin-bottom: 20px;
}

在處理報表頂部時，不需要計算複雜的絕對座標，透過 Flexbox 就能輕鬆讓主標題與日期在不同長度下依然完美對齊。

2. 雙欄病患資訊：使用 CSS Grid 建立結構化網格
   為了讓病患的姓名、身分證字號、病歷號與聯絡信箱井然有序地呈現，我們採用了 CSS Grid 網格佈局，強制切分成均等的雙欄：
   CSS

.patient-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 將區塊切成左右等寬的 2 欄 */
    gap: 10px 20px;                 /* 欄與欄、行與行的間距 */
    background-color: #f7fafc;      /* 醫療級柔和灰底 */
    border: 1px solid #e2e8f0;
    border-top: 3px solid #2b6cb0;  /* 上方加上醒目的藍色邊框裝飾 */
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 4px;
}

解析：grid-template-columns: 1fr 1fr 是排版長表格或個資卡片的神兵利器，它能確保左右兩欄自動均分可用寬度，且當內容增減時版面也不會輕易崩潰。

3. 醫療級視覺與防斷頁控制
   高對比灰階配色：捨棄花俏的彩妝色調，採用深藍（#1a365d）與深灰（#1a1a1a），確保報告未來即使透過黑白印表機列印或經由醫師快速審閱，依然具備極高的清晰度。

break-inside: avoid：在 .section-block 中持續保留防斷頁保護，確保重要的醫師總評或病患資訊卡片不會在 PDF 轉檔換頁時被從中間腰斬。

測試與心得
把這段升級後的 HTML 存檔，重新整理預覽頁面會發現原本單調的上下排列，變成了具有現代專業感、左右對稱的雙欄式病患資訊卡片，頂部的醫院名稱與右側的檢驗日期也呈現完美的視覺平衡。

明天（Day 10）我們要迎來整個排版階段的大魔王——「長表格跨頁與重複表頭處理」！當檢驗項目多達數十筆跨越多頁時，如何確保每一頁的最上方都自動重複顯示表頭？我們明天見！