/* ==========================================================================
   1. 核心配置與變量 (Variables)
   - 集中管理顏色與間距，確保全站風格統一
   ========================================================================== */
:root {
    /* 品牌色 - 醫學藍與傳統紅 */
    --color-primary: #0056b3;      /* 主色調：沈穩藍 */
    --color-primary-light: #e3f2fd;/* 淺藍背景 */
    --color-accent: #d93025;       /* 強調色：印章紅 (用於重要提示) */
    
    /* 文字顏色 - 高對比度護眼色 */
    --text-main: #1a202c;          /* 主要內容 (接近純黑但更柔和) */
    --text-secondary: #4a5568;     /* 次要信息 */
    --text-tertiary: #718096;      /* 輔助信息 */
    
    /* 背景與邊框 */
    --bg-page: #f7fafc;            /* 頁面背景 */
    --bg-card: #ffffff;            /* 卡片背景 */
    --border-color: #e2e8f0;       /* 邊框顏色 */
    
    /* 尺寸與間距 */
    --spacing-unit: 8px;           /* 基礎間距單位 */
    --container-max: 820px;        /* 最佳閱讀寬度 */
    --radius-card: 8px;            /* 卡片圓角 */
    --radius-btn: 4px;             /* 按鈕圓角 */
}

/* ==========================================================================
   2. 全局重置 (Reset & Typography)
   - PageSpeed 關鍵點：使用系統字體，無FOUT，加載極快
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-size: 16px;               /* 基準字號 16px，防止 iOS 輸入框自動放大 */
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased; /* 字體抗鋸齒，讓文字更清晰 */
    text-rendering: optimizeLegibility;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #003d82;
    text-decoration: underline;
}

/* 輔助類：屏幕閱讀器專用 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ==========================================================================
   3. 佈局框架 (Layout & Container)
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 calc(var(--spacing-unit) * 2);
}

/* 卡片容器 - 核心組件 */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-card);
    margin-bottom: calc(var(--spacing-unit) * 3);
    /* 性能優化：使用輕量級陰影，避免渲染負擔 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); 
    overflow: hidden; /* 確保子元素圓角不溢出 */
}

.card-header {
    background-color: #f8fafc;
    padding: calc(var(--spacing-unit) * 2);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
}

.card-body {
    padding: calc(var(--spacing-unit) * 3);
}

/* ==========================================================================
   4. 頭部與導航 (Header & Nav)
   ========================================================================== */
.header {
    padding: calc(var(--spacing-unit) * 3) 0;
    text-align: center;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.header a {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2d3748; /* 深灰標題，更具權威感 */
    letter-spacing: -0.5px;
}

.nav {
    padding: var(--spacing-unit) 0;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-unit);
}

.nav a {
    color: var(--text-secondary);
    font-weight: 500;
}

.nav strong {
    color: var(--color-accent);
    font-weight: 600;
}

/* ==========================================================================
   5. 搜索區域 (Search Module)
   ========================================================================== */
.search-form {
    display: flex;
    gap: var(--spacing-unit);
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.search-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--text-main);
    background: #fff;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-btn);
    transition: border-color 0.2s;
    appearance: none;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.search-btn {
    padding: 0 24px;
    background-color: var(--color-primary);
    color: white;
    font-weight: 600;
    font-size: 16px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    /* 確保觸控目標大於 44px */
    min-height: 48px;
    transition: background-color 0.2s;
}

.search-btn:hover {
    background-color: #004494;
}

/* 分類標籤 (Chips Design) - 易於點擊 */
.category-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    line-height: 1.5;
}

.category-links span {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-right: 4px;
}

.category-links a {
    display: inline-block;
    padding: 4px 12px;
    background-color: #edf2f7;
    color: var(--text-secondary);
    border-radius: 20px; /* 藥丸形狀 */
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.category-links a:hover {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

/* ==========================================================================
   6. 列表顯示 (Result Table)
   - 桌面端是表格，移動端轉為卡片列表
   ========================================================================== */
.result-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.result-table td {
    padding: 14px 10px;
    border-bottom: 1px solid #edf2f7;
    color: var(--text-secondary);
    font-size: 0.95rem;
    vertical-align: middle;
}

/* 結果前的裝飾點 */
.result-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #cbd5e0;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.category-tag {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    margin-right: 4px;
}

.highlight {
    color: var(--color-accent);
    font-weight: 700;
    background-color: #fff5f5;
    padding: 0 2px;
}

/* 3列佈局 (中藥名方) */
.result-table-3col td {
    width: 33.33%;
}

/* ==========================================================================
   7. 詳情頁內容優化 (Content & Typography)
   - 這是重點優化區域，針對長時間閱讀設計
   ========================================================================== */
/* ==========================================================================
   詳情頁導航欄 (Detail Navigation Toolbar)
   - 重新設計為工具欄風格，與正文區分開
   ========================================================================== */
.detail-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px; /* 元素間的間距 */
    
    /* 視覺容器化 */
    background-color: #f8fafc;     /* 淺灰背景，形成獨立區塊 */
    border: 1px solid #edf2f7;     /* 極細邊框 */
    border-radius: 8px;            /* 圓角 */
    padding: 12px 16px;            /* 內部留白 */
    margin-bottom: 24px;           /* 與標題的距離 */
}

/* ==========================================================================
   麵包屑導航 (Breadcrumb)
   ========================================================================== */
.breadcrumb {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.5;
}

/* 麵包屑中的鏈接 */
.breadcrumb a {
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    padding: 2px 4px;              /* 增加點擊熱區 */
    border-radius: 4px;
    transition: all 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--color-primary);
    background-color: #e3f2fd;     /* 懸停時出現淺藍色背景 */
}

/* 自動添加分隔符 (CSS 偽元素) */
/* 注意：如果你的 PHP 已經輸出了 '/'，請忽略此段或在 PHP 中移除分隔符以保持樣式純淨
   這裡假設 PHP 輸出的是純鏈接，或者我們用 CSS 美化分隔符 */
.breadcrumb a::after {
    /* 如果 PHP 代碼中已經寫死了 " / "，可以不寫 content，或者利用 CSS 隱藏原文本分隔符 */
    /* 這裡僅作間距優化 */
    content: ""; 
    margin-right: 0;
}

/* 最後一個元素 (當前頁面) 的樣式 - 通常是純文字 */
.breadcrumb strong,
.breadcrumb span:last-child {
    color: var(--text-tertiary);
    font-weight: normal;
    margin-left: 4px;
}

/* ==========================================================================
   翻頁按鈕組 (Pagination inside Nav)
   - 假設 PHP 結構是 .detail-nav > .pagination
   ========================================================================== */
.detail-nav .pagination {
    display: flex;
    gap: 8px;
    margin: 0; /* 重置可能存在的 margin */
}

.detail-nav .pagination a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-primary);
    background-color: #fff;        /* 白色按鈕 */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.detail-nav .pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);   /* 輕微上浮效果 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* ==========================================================================
   手機端適配
   ========================================================================== */
@media screen and (max-width: 600px) {
    .detail-nav {
        flex-direction: column;    /* 上下堆疊 */
        align-items: flex-start;   /* 左對齊 */
        gap: 16px;
        padding: 16px;
        background-color: transparent; /* 手機上可以去掉背景，減少視覺重量 */
        border: none;
        border-bottom: 1px solid #edf2f7;
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .breadcrumb {
        font-size: 0.85rem;
        width: 100%;
    }
    
    .detail-nav .pagination {
        width: 100%;
        justify-content: space-between; /* 上一頁/下一頁 分佈兩側 */
    }
    
    .detail-nav .pagination a {
        flex: 1;                   /* 按鈕平分寬度 */
        justify-content: center;   /* 文字居中 */
        height: 40px;              /* 手機端按鈕加高，易於點擊 */
    }
}



.pagination a:hover {
    background: #e2e8f0;
    color: var(--text-main);
}

.detail-title {
    font-size: 2rem; /* 大標題 */
    font-weight: 700;
    color: #1a202c;
    text-align: center;
    margin: 10px 0 30px 0;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* 正文內容容器 */
.detail-content {
    /* 排版核心 */
    font-size: 1.125rem;      /* 18px：最適合正文閱讀的大小 */
    line-height: 1.85;        /* 寬鬆行高，增加呼吸感 */
    color: #2d3748;           /* 深灰，對比度 AA+ */
    font-weight: 400;
    
    /* 佈局限制 */
    max-width: 680px;         /* 限制單行寬度，符合人眼掃視習慣 */
    margin: 0 auto;           /* 居中顯示 */
    padding: 0 10px;
    
    /* 對齊優化 */
    text-align: justify;      /* 兩端對齊，塊狀感更強 */
    text-justify: inter-ideograph;
}

/* 針對 PHP nl2br 生成的段落樣式 */
.detail-content p {
    margin-bottom: 1.8em;     /* 段落間距，區分明顯 */
    word-break: break-word;   /* 防止長單詞溢出 */
}

/* ==========================================================================
   8. 頁腳 (Footer)
   ========================================================================== */
.footer {
    margin-top: 40px;
    padding: 30px 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    border-top: 1px solid var(--border-color);
}

.footer a {
    color: var(--text-secondary);
}

/* ==========================================================================
   9. 移動端響應式適配 (Mobile Optimization)
   - 關鍵：將表格轉化為塊級元素，優化觸摸體驗
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* 容器邊距調整 */
    .container {
        padding: 0 12px;
    }

    .card-body {
        padding: 16px;
    }

    /* 搜索框堆疊 (如果有需要，目前Flex適配良好) */
    /* 搜索按鈕適配 */
    .search-btn {
        padding: 0 16px; 
        font-size: 15px;
    }

    /* 表格變列表 - 這是移動端體驗的核心 */
    .result-table, 
    .result-table tbody, 
    .result-table tr, 
    .result-table td {
        display: block;
        width: 100%;
    }

    .result-table tr {
        margin-bottom: 0;
    }

    .result-table td {
        text-align: left;
        padding: 12px 4px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;        /* 使用Flex佈局對齊圖標和文字 */
        align-items: flex-start;
        line-height: 1.5;
        height: auto;         /* 重置高度 */
        min-height: 44px;     /* 確保最小點擊區域 */
    }

    /* 調整標題前面的圓點位置 */
    .result-dot {
        margin-top: 8px;      /* 與文字首行視覺對齊 */
        flex-shrink: 0;       /* 防止圓點被壓縮 */
    }

    /* 詳情頁導航適配 */
    .detail-nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .pagination {
        width: 100%;
        justify-content: space-between;
    }

    .pagination a {
        flex: 1;
        text-align: center;
        padding: 8px;
    }

    /* 標題與內容適配 */
    .detail-title {
        font-size: 1.6rem;
        text-align: left;     /* 手機端左對齊通常更好看 */
    }

    .detail-content {
        font-size: 1.05rem;   /* 約 17px */
        line-height: 1.75;
        text-align: left;     /* 手機端取消強制兩端對齊，避免文字間距過大 */
        padding: 0;           /* 移除多餘內邊距 */
    }
    
    .detail-content p {
        margin-bottom: 1.5em;
    }
}

/* ==========================================================================
   10. 打印樣式 (Print)
   - 用戶可能會打印方劑
   ========================================================================== */
@media print {
    .header, .search-form, .footer, .pagination, .breadcrumb {
        display: none;
    }
    
    .container, .card {
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: none;
        margin: 0;
    }
    
    .detail-content {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        max-width: 100%;
    }
    
    a {
        text-decoration: none;
        color: #000;
    }
}