body {
                font-family: 'Noto Sans TC', sans-serif;
                background-color: #f8f9fa;
            }

            .main-container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 20px;
            }

            .header-box {
                background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
                color: white;
                padding: 2rem;
                border-radius: 15px;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                margin-bottom: 2rem;
                text-align: center;
            }

            .header-title {
                font-size: 2rem;
                font-weight: 700;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
                margin: 0;
            }

            .search-card {
                background: white;
                border-radius: 10px;
                border: none;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                margin-bottom: 2rem;
                padding: 1.5rem;
            }

            .post-card {
                background: white;
                border-radius: 10px;
                border: none;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
                overflow: hidden;
            }

            .table thead th {
                background-color: #e9ecef;
                color: #495057;
                font-weight: 600;
                border: none;
                padding: 1rem;
            }

            .table tbody td {
                vertical-align: middle;
                padding: 1rem;
                border-bottom: 1px solid #f2f2f2;
            }

            .table-hover tbody tr:hover {
                background-color: #f8f9fa;
            }

            /* Desktop View Column Styling (Announcement Unit & Category) */
            @media (min-width: 769px) {

                .table-posts th:nth-child(1),
                .table-posts td:nth-child(1),
                .table-posts th:nth-child(2),
                .table-posts td:nth-child(2) {
                    /* Ocean Gradient: Subtle vertical gradient for cells */
                    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
                    border-right: 1px solid #bae6fd;
                    /* Matching blue border */
                }

                /* Ensure header background matches or is distinct */
                .table-posts thead th:nth-child(1),
                .table-posts thead th:nth-child(2) {
                    /* Stronger gradient for headers */
                    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%);
                    color: #0c4a6e;
                }
            }

            .badge-dept {
                background-color: #e7f1ff;
                color: #0d6efd;
                border: 1px solid #cff4fc;
            }

            .badge-cat {
                background-color: #f0fdf4;
                color: #198754;
                border: 1px solid #d1e7dd;
            }

            .top-post {
                color: #dc3545;
                font-weight: bold;
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }

            /* Pagination Responsive Styles */
            .pagination-container {
                margin-top: 2rem;
                background: white;
                border-radius: 8px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                padding: 1rem;
            }

            .pagination-inner {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 0.5rem;
            }

            .page-controls {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                flex-wrap: wrap;
                justify-content: center;
            }

            .page-info {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                color: #6c757d;
                font-size: 0.95rem;
                margin: 0 0.5rem;
            }

            .page-nav-link {
                text-decoration: none;
                color: #0d6efd;
                padding: 0.375rem 0.75rem;
                border-radius: 0.25rem;
                transition: all 0.2s;
                border: 1px solid transparent;
                white-space: nowrap;
            }

            .page-nav-link:hover {
                background-color: #e9ecef;
                color: #0a58ca;
            }

            .page-nav-link.aspNetDisabled {
                color: #adb5bd;
                pointer-events: none;
                background: none;
                border-color: transparent;
            }

            .page-select {
                border: 1px solid #dee2e6;
                border-radius: 4px;
                padding: 0.375rem 2rem 0.375rem 0.75rem;
                font-size: 0.95rem;
                color: #495057;
                background-color: #fff;
                cursor: pointer;
            }

            .page-select:focus {
                outline: none;
                border-color: #86b7fe;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            }

            .page-sep-desktop {
                display: none;
            }

            /* Desktop adjustments */
            @media (min-width: 576px) {
                .page-sep-desktop {
                    display: block;
                    color: #dee2e6;
                    margin: 0 5px;
                }
            }

            /* Mobile Optimization */
            @media (max-width: 575px) {
                .pagination-container {
                    padding: 0.5rem;
                }

                .pagination-inner {
                    flex-direction: column;
                    gap: 1rem;
                }

                .page-info {
                    order: -1;
                    width: 100%;
                    justify-content: space-between;
                    border-bottom: 1px solid #f0f0f0;
                    padding-bottom: 0.75rem;
                    margin: 0;
                    font-size: 0.9rem;
                }

                .page-controls {
                    width: 100%;
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    /* Two columns for buttons */
                    gap: 0.5rem;
                }

                /* Dropdown full width */
                .page-select-wrapper {
                    grid-column: 1 / -1;
                }

                .page-nav-link {
                    background-color: #f8f9fa;
                    border: 1px solid #dee2e6;
                    text-align: center;
                    justify-content: center;
                    display: flex;
                    align-items: center;
                    padding: 0.6rem;
                }
            }

            .login-link {
                text-decoration: none;
                color: #6c757d;
                transition: color 0.2s;
            }

            .login-link:hover {
                color: #0d6efd;
            }

            /* 僅保留資訊表格樣式 */
            .info-table {
                width: 100%;
                margin-bottom: 0;
            }

            .info-table tr {
                border-bottom: 1px solid #f2f2f2;
            }

            .info-table th {
                background-color: #f8f9fa;
                width: 120px;
                padding: 0.75rem 1rem;
                font-weight: bold;
                color: #495057;
                vertical-align: top;
                white-space: nowrap;
            }

            .info-table td {
                padding: 0.75rem 1rem;
                color: #212529;
            }

            .content-area {
                white-space: pre-wrap;
                line-height: 1.6;
            }

            .file-link {
                display: inline-block;
                margin-right: 15px;
                text-decoration: none;
                color: #0d6efd;
            }

            .file-link:hover {
                text-decoration: underline;
            }

            /* Modal 響應式設計 (RWD) */
            /* 桌面電腦: 固定 800px 寬 */
            #postModal .modal-dialog {
                max-width: 800px;
                width: 800px;
            }

            #postModal .modal-content {
                max-height: 85vh;
            }

            #postModal .modal-body {
                max-height: calc(85vh - 140px);
                overflow-y: auto;
            }

            /* 平板 (螢幕寬度 < 992px) */
            @media (max-width: 991px) {
                #postModal .modal-dialog {
                    max-width: 90%;
                    width: 90%;
                }

                #postModal .modal-content {
                    max-height: 90vh;
                }

                #postModal .modal-body {
                    max-height: calc(90vh - 140px);
                }
            }

            /* 手機 (螢幕寬度 < 576px) */
            @media (max-width: 575px) {
                #postModal .modal-dialog {
                    max-width: 95%;
                    width: 95%;
                    margin: 0.5rem;
                }

                #postModal .modal-content {
                    max-height:  90vh;
                }

                #postModal .modal-body {
                    max-height: calc(90vh - 130px);
                }

                /* 手機上縮小字體 */
                .info-table th {
                    font-size: 0.9rem;
                    width: 90px;
                }

                .info-table td {
                    font-size: 0.9rem;
                }

                .modal-title {
                    font-size: 1.1rem;
                }
            }

            /* RWD Table for Mobile (max-width: 768px) */
            @media screen and (max-width: 768px) {

                /* 強制將表格轉換為區塊顯示 */
                .post-card table,
                .post-card thead,
                .post-card tbody,
                .post-card th,
                .post-card td,
                .post-card tr {
                    display: block;
                }

                /* 隱藏表頭 (但保留可訪問性) */
                .post-card thead tr {
                    position: absolute;
                    top: -9999px;
                    left: -9999px;
                    visibility: hidden;
                }

                /* 將每一行變為卡片 */
                .post-card tr {
                    border: 1px solid #dee2e6;
                    margin-bottom: 1rem;
                    border-radius: 0.5rem;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                    background-color: #fff;
                    padding: 0.5rem;
                }

                /* 儲存格樣式調整 */
                .post-card td {
                    border: none;
                    border-bottom: 1px solid #f8f9fa;
                    position: relative;
                    padding-left: 35% !important;
                    /* 留出空間給標籤 */
                    text-align: left !important;
                    white-space: normal !important;
                    min-height: 45px;
                    /* 確保高度足夠 */
                    display: flex;
                    align-items: center;
                }

                /* 最後一個儲存格不顯示底線 */
                .post-card td:last-child {
                    border-bottom: none;
                }

                /* 使用 pseudo-element 顯示標籤 */
                .post-card td:before {
                    position: absolute;
                    top: 50%;
                    left: 1rem;
                    transform: translateY(-50%);
                    width: 30%;
                    padding-right: 10px;
                    white-space: nowrap;
                    font-weight: 600;
                    color: #6c757d;
                    text-align: left;
                }

                /* 定義標籤內容 */
                .post-card td:nth-of-type(1):before {
                    content: "公告單位";
                }

                .post-card td:nth-of-type(2):before {
                    content: "類別";
                }

                .post-card td:nth-of-type(3):before {
                    content: "公告標題";
                }

                .post-card td:nth-of-type(4):before {
                    content: "日期";
                }

                /* 特別調整標題欄位 */
                .post-card td:nth-of-type(3) {
                    padding-left: 1rem !important;
                    /* 標題不需要 side label，或改為上方顯示 */
                    padding-top: 2.5rem !important;
                    /* 留空間給 label (如果需要) */
                    display: block;
                    /* 標題內容可能較長，改為 block */
                }

                .post-card td:nth-of-type(3):before {
                    top: 1rem;
                    left: 1rem;
                    transform: none;
                    width: auto;
                    color: #0d6efd;
                    /* 強調標題的 label */
                }

                /* 在手機版隱除不必要的內距 */
                .main-container {
                    padding: 10px;
                }

                .header-box {
                    padding: 1.5rem;
                    margin-bottom: 1.5rem;
                }

                .header-title {
                    font-size: 1.5rem;
                }

                /* Ocean Gradient for Unit and Category in Mobile */
                .post-card td:nth-of-type(1),
                .post-card td:nth-of-type(2) {
                    background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
                    /* Ocean-like pale blue */
                    color: #0c4a6e;
                    /* Darker ocean blue text */
                    border-bottom: 1px solid #bae6fd;
                }

                /* Adjust the pseudo-element (label) color to match */
                .post-card td:nth-of-type(1):before,
                .post-card td:nth-of-type(2):before {
                    color: #0284c7;
                    /* Vibrant ocean blue */
                }
            }

            /* Modal Style Enhancements */
            .modal-header {
                background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
                color: white;
                border-bottom: none;
            }

            .modal-title {
                font-weight: 700;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
            }

            .modal-footer {
                border-top: 1px solid #f2f2f2;
                background-color: #f8f9fa;
                border-bottom-left-radius: 0.5rem;
                border-bottom-right-radius: 0.5rem;
            }

            /* Better Info Table Style */
            .info-table th {
                background-color: #e7f1ff;
                /* 淺藍色背景 */
                color: #0d6efd;
                border-radius: 4px;
                vertical-align: middle;
            }

            .info-table td {
                vertical-align: middle;
            }

            .info-table tr {
                border-bottom: 1px solid #e9ecef;
                /* 更柔和的分隔線 */
            }

            .info-table tr:last-child {
                border-bottom: none;
            }

            /* RWD Modal Table (stack on mobile) */
            @media (max-width: 575px) {

                .info-table,
                .info-table tbody,
                .info-table tr,
                .info-table th,
                .info-table td {
                    display: block;
                    width: 100%;
                }

                .info-table tr {
                    margin-bottom: 1rem;
                    border: 1px solid #dee2e6;
                    border-radius: 8px;
                    padding: 0.5rem;
                    background: white;
                }

                .info-table th {
                    width: 100%;
                    background-color: transparent;
                    color: #6c757d;
                    font-size: 0.9rem;
                    padding: 0.25rem 0.5rem;
                    border-bottom: none;
                }

                .info-table td {
                    padding: 0.25rem 0.5rem 0.75rem 0.5rem;
                    font-size: 1rem;
                    font-weight: 500;
                }

                /* 內容區域保持原樣，但給點間距 */
                .content-area {
                    margin-top: 0.5rem;
                    padding: 0.5rem;
                    background-color: #f8f9fa;
                    border-radius: 4px;
                    font-weight: normal;
                    /* 內容不加粗 */
                }

                /* File links larger for touch */
                .file-link {
                    display: block;
                    padding: 8px;
                    background-color: #f8f9fa;
                    border: 1px solid #dee2e6;
                    border-radius: 4px;
                    margin-bottom: 5px;
                }
            }