/* 基本表格樣式 (可根據網站風格調整) */

table.responsive-table tr td:nth-child(1){width:unset !important; font-weight:700;}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.9em;
    min-width: 400px; /* 避免表格在桌面版過窄 */
}

.responsive-table th,
.responsive-table td {
    padding: 12px 15px !important;
    border-bottom: 0.1px solid #ddd !important;
    text-align: left !important;
}

.responsive-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

.responsive-table tr:nth-child(even) {
    background-color: rgba(255,255,255,1);
}

.responsive-table tr:nth-child(odd) {
    background-color: rgba(250,250,250,1);
}

/* RWD 響應式 CSS - 堆疊式表格 優化版 */
@media screen and (max-width: 768px) { /* 當螢幕寬度小於或等於 768px 時應用 */
    .responsive-table {
        border: 0;
        min-width: unset; /* 在小螢幕上取消最小寬度限制 */
    }

    .responsive-table thead {
        display: none; /* 在小螢幕上隱藏表頭 */
    }

    .responsive-table tr {
        display: block; /* 將每行變成塊級元素 */
        margin-bottom: 20px; /* 增加行之間的間距 */
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 輕微陰影 */
        overflow: hidden; /* 防止內部元素溢出 */
    }

    .responsive-table td {
        display: block; /* 將每個單元格變成塊級元素 */
        text-align: left; /* 將所有內容左對齊，更適合閱讀 */
        border-bottom: 1px dotted #e0e0e0; /* 較淺的虛線分隔 */
        padding: 10px 15px; /* 調整內邊距 */
        position: relative;
    }

    .responsive-table td:last-child {
        border-bottom: 0; /* 最後一個單元格不顯示底部邊線 */
    }

    .responsive-table td::before {
        content: attr(data-label); /* 顯示 data-label 的內容作為標籤 */
        display: block; /* 讓標籤獨立佔一行 */
        font-weight: bold;
        color: #666; /* 標籤顏色稍微深一點 */
        margin-bottom: 5px; /* 標籤和內容之間的間距 */
        text-align: left; /* 確保標籤也左對齊 */
        white-space: normal; /* 允許標籤換行，避免過長溢出 */
    }

    /* 針對 '説明' / 'Notes' 欄位特別處理 */
    .responsive-table td[data-label="説明"],
    .responsive-table td[data-label="Notes"],
    .responsive-table td[data-label="說明"] {
        /* 這些欄位的樣式應該已經被上面的通用 td::before 處理得很好，
           如果需要額外調整，可以在這裡添加 */
    }
}