/* news.css */
        /* --- CSS 樣式定義 --- */
        :root {
            --primary-blue: #0056b3;  /* 企業主色 */
            --bg-gray: #f4f6f9;       /* 背景色 */
            --text-main: #333;        /* 主文字 */
            --text-sub: #666;         /* 次要文字 */
            --border-color: #e0e0e0;
        }

        body {
    font-family: "Microsoft JhengHei", sans-serif;
    background-color: var(--bg-gray);
    margin: 0;
        }

        .news-container {
            max-width: 1000px; /* 限制最大寬度，閱讀更舒適 */
            margin: 0 auto;
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }

        /* 1. 標題區域 */
        .news-header {
            margin-bottom: 30px;
            border-bottom: 2px solid var(--primary-blue);
            padding-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }

        .news-header h2 {
            margin: 0;
            color: var(--text-main);
            font-size: 1.8rem;
        }

        .news-count {
            color: var(--text-sub);
            font-size: 0.9rem;
        }

        /* 2. 膠囊篩選按鈕 (還原圖片風格) */
        .filter-nav {
            display: flex;
            gap: 12px;
            margin-bottom: 30px;
            flex-wrap: wrap; /* 手機版自動換行 */
        }

        .filter-pill {
            padding: 8px 24px;
            border-radius: 50px; /* 膠囊形狀 */
            border: 1px solid var(--border-color);
            background: #fff;
            color: var(--text-sub);
            font-size: 0.95rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .filter-pill:hover {
            border-color: var(--primary-blue);
            color: var(--primary-blue);
        }

        /* 選中狀態 (模擬圖片中的灰色/深色背景) */
        .filter-pill.active {
            background-color: var(--primary-blue);
            color: #fff;
            border-color: var(--primary-blue);
        }

        /* 3. 新聞列表 (List View) */
        .news-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .news-item {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid var(--border-color);
            transition: all 0.2s ease;
            text-decoration: none; /* 移除連結下底線 */
            background: #fff;
        }

        .news-item:hover {
            background-color: #f8faff; /* 懸停時變淡藍色 */
            transform: translateX(5px); /* 輕微位移 */
            border-left: 4px solid var(--primary-blue); /* 左側出現藍條 */
        }

        /* 日期區塊 */
        .item-date {
            min-width: 80px;
            text-align: center;
            margin-right: 25px;
            color: var(--text-sub);
            font-family: 'Arial', sans-serif;
        }

        .date-day {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-blue);
            display: block;
            line-height: 1;
        }

        .date-ym {
            font-size: 0.8rem;
            display: block;
            margin-top: 4px;
        }

        /* 內容區塊 */
        .item-content {
            flex-grow: 1;
        }

        .item-tag {
            display: inline-block;
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 4px;
            margin-bottom: 8px;
            background-color: #eef2f7;
            color: #555;
            font-weight: bold;
        }
        
        /* 不同類別的標籤顏色 */
        .tag-school { color: #20c997; background: #e6fcf5; }
        .tag-gov { color: #fd7e14; background: #fff4e6; }
        .tag-corp { color: #4dabf7; background: #e7f5ff; }

        .item-title {
            font-size: 1.1rem;
            color: var(--text-main);
            margin: 0;
            line-height: 1.4;
            font-weight: 600;
        }

        .news-item:hover .item-title {
            color: var(--primary-blue); /* 懸停時標題變色 */
        }

        /* 箭頭圖示 */
        .item-arrow {
            color: #ddd;
            margin-left: 20px;
        }

        .news-item:hover .item-arrow {
            color: var(--primary-blue);
        }

        /* 4. 分頁 (Pagination) - 還原圓形設計 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40px;
            gap: 8px;
        }

        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%; /* 圓形 */
            border: 1px solid var(--border-color);
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-sub);
            text-decoration: none;
            transition: all 0.3s;
            font-size: 0.9rem;
        }

        .page-btn:hover {
            border-color: var(--primary-blue);
            color: var(--primary-blue);
        }

        .page-btn.active {
            background-color: var(--text-main); /* 圖中的深灰色選中態 */
            color: #fff;
            border-color: var(--text-main);
        }

        /* RWD 手機版適配 */
        @media (max-width: 600px) {
            .news-item {
                flex-direction: column;
                align-items: flex-start;
                position: relative;
            }

            .item-date {
                display: flex;
                align-items: baseline;
                gap: 5px;
                margin-bottom: 10px;
                text-align: left;
            }

            .date-day { font-size: 1rem; }
            .date-ym { font-size: 0.9rem; }

            .item-arrow {
                position: absolute;
                top: 20px;
                right: 20px;
            }
        }