/* 移除 *{} 和 html{}, body{} */

/* 移除 *{} 和 html{}, body{} */

/* **新增：取代 body 的佈局樣式** */
.main-content-wrapper {
    font-family: 'Arial', sans-serif; /* 將字體設定從 body 移到這裡 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    justify-content: flex-start; /* 確保內容靠上對齊 */
    /* min-height: 100vh; 此行已移除，讓內容高度自動調整 */
    box-sizing: border-box; /* 確保盒子模型正確 */
    /* background-color: #333; 此處移除背景色，由主頁控制 */
}

/* 確保所有模組內相關元素都使用 border-box 盒模型 */
.tabs-container,
.tab-button,
.tab-button span,
.tab-content-area,
.data-table,
.data-table th,
.data-table td,
.tab-content { /* **新增：tab-content 也包含在內** */
    box-sizing: border-box;
}

.tabs-container {
    display: flex;
    padding: 10px; /* 給按鈕留出一些邊距，讓它們不貼邊 */
    gap: 5px; /* 設置按鈕之間的間隔，減小為 5px */
    margin-left: 0;
    margin-right: 0;

    /* 控制整體寬度，與內容區塊一致 */
    width: 100%;
    max-width:1000px;
}

.tab-button {
    position: relative;
    background-color: #000; /* Normal 狀態背景色 */
    color: #fff; /* Normal/Hover 文字顏色 */
    padding: 10px 0px; /* 左右 padding 減少，讓 flex-grow 更好控制寬度 */
    border: none;
    cursor: pointer;
    font-size: 1.5em; /* 字體大小 */
    font-weight: bold;
    text-align: center;
    transform: skewX(-20deg);
    outline: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;

    border: 3px solid #445a86; /* 藍色邊框 */

    margin-right: 0;
    flex-grow: 1; /* 讓按鈕在容器內均勻分配寬度 */
}

.tab-button span {
    display: inline-block;
    transform: skewX(20deg);
    white-space: nowrap;
    padding: 0 10px; /* 將文字的左右 padding 放到 span 內部，保持文字間距 */
}

/* Hover 狀態 */
.tab-button:not(.active):hover {
    background-color: #818181; /* 灰色背景 */
    border-color: #445a86; /* 邊框顏色維持藍色 */
}

/* Active 狀態 */
.tab-button.active {
    background-color: #c00000; /* 紅色背景 */
    color: #000; /* 活躍按鈕文字顏色為黑色 */
    border-color: #fff; /* 白色邊框 */
    z-index: 1;
}

/* 內容區域樣式 */
.tab-content-area {
    margin-top: 30px; /* 增加與上方按鈕的間距 */
    color: #fff;
    border-radius: 8px;
    width: 100%;
    text-align: center;
}

/* Tab 內容區塊的顯示/隱藏控制 */
.tab-content {
    display: none; /* 預設隱藏所有內容區塊 */
}

.tab-content.active {
    display: block; /* 只有帶有 active 類別的內容區塊才顯示 */
}

/* Table 樣式 */
.data-table {
    width: 100%;
    border-collapse: collapse; /* 合併單元格邊框 */
    background-color: #000; /* 整個表格的背景色為黑色 */
    color: #fff; /* 表格文字顏色為白色 */
    font-size: 0.95em;
    table-layout: fixed; /* 固定列寬 */
    /* 定義所有外圍邊框，左邊框為紅色 */
    border-top: 0px; /* 表格外圍頂部邊框為 0px */
    border-right: 2px solid #28324b;
    border-bottom: 2px solid #28324b;
    border-left: 4px solid #c00000; /* 表格外圍左側邊框加粗為 4px 紅色 */
}

/* 設定各欄位寬度比例 */
.data-table thead th:nth-child(1) { width: 35%; } /* 網咖名稱 */
.data-table thead th:nth-child(2) { width: 10%; } /* 區域 */
.data-table thead th:nth-child(3) { width: 30%; } /* 地址 */
.data-table thead th:nth-child(4) { width: 15%; } /* 店內晶片組 */
.data-table thead th:nth-child(5) { width: 10%; } /* 更新區域 */

.data-table th,
.data-table td {
    padding: 20px 15px; /* Padding 調整為 20px 15px */
    text-align: left;
    word-wrap: break-word;
    /* 單元格邊框調整 */
    border-top: 0px; /* 單元格頂部邊框為 0px */
    border-right: 4px solid #28324b; /* 單元格右側邊框加粗為 4px */
}

/* 明確移除第一欄單元格的左邊框，避免與表格的紅色左邊框衝突 */
.data-table th.header-red,
.data-table tbody td:first-child {
    border-left: none; /* 確保這些單元格不繪製自己的左邊框 */
}

/* **新增：表格內 <a> 標籤的樣式** */
.data-table td a {
    color: #fff; /* 文字顏色為白色 */
    text-decoration: none; /* 移除下劃線 */
    transition: color 0.3s ease; /* 添加顏色過渡效果 */
}

.data-table td a:hover {
    color: #ff0000; /* Hover 時文字顏色為紅色 */
}

/* 表頭樣式 */
.data-table thead th {
    background-color: #28324b; /* 表頭預設背景色為 #28324b */
    font-weight: normal; /* 取消粗體 */
}

/* 第一個表頭 (網咖名稱) 的特殊紅色背景 */
.data-table thead th.header-red {
    background-color: #c00000; /* 紅色 */
}

/* 斑馬紋效果：設定所有tbody行的預設背景色 */
.data-table tbody tr {
    background-color: #2a2b2d;
}

/* 偶數行背景色略有不同，覆蓋預設行背景色 */
.data-table tbody tr:nth-child(even) {
    background-color: #1a1a1a; /* 偶數行略淺的黑色 */
}

/* 響應式調整 */
@media (max-width: 768px) {
    .tabs-container {
        flex-wrap: wrap; /* 確保 Tab 按鈕換行 */
        justify-content: center;
        padding: 5px; /* 縮小內邊距 */
        gap: 5px; /* 縮小間距 */
        width: 95%; /* 小螢幕下佔用更多寬度 */
    }

    .tab-button {
        padding: 8px 10px; /* 縮小內邊距 */
        font-size: 1em; /* 小螢幕下字體大小調整 */
        margin-right: 0;
        margin-bottom: 5px;
        transform: skewX(-15deg); /* 在手機版上 skewX 角度可能稍小 */
        border-width: 2px; /* 縮小邊框寬度 */
        flex-grow: 1;
        /* 確保按鈕能夠正確收縮和換行 */
        flex-basis: calc(50% - 2.5px); /* 設定每個按鈕的基礎寬度約為 50% 減去一半的 gap */
        flex-shrink: 1; /* 允許按鈕收縮 */
        min-width: 0; /* 允許按鈕縮小到其內容的最小寬度，有助於換行 */
    }
    .tab-button span {
        transform: skewX(15deg);
        padding: 0 5px; /* 調整文字內部 padding */
    }
    .tab-content-area {
        width: 95%;
        padding: 0; /* 響應式下也移除 padding */
    }
    .data-table {
        font-size: 0.85em; /* 縮小字體 */
    }
    .data-table th,
    .data-table td {
        padding: 8px 10px; /* 縮小內邊距 */
    }
}

@media (max-width: 480px) {
    .data-table {
        font-size: 0.75em; /* 進一步縮小字體 */
    }
    .data-table th,
    .data-table td {
        padding: 6px 8px; /* 進一步縮小內邊距 */
    }
    /* 可以考慮在極小螢幕下使用 overflow-x: auto 讓表格可橫向滾動 */
    .tab-content-area {
        overflow-x: auto;
    }
    .data-table {
        
    }
}



/* ----------------------2025.6.19-局部調整-01.css---------------------- */

/* 從這裡開始是疊加的修改 */

/* 確保 html 和 body 佔據整個視窗高度，以利於 min-height: 100vh 正確工作 */
/* 請在 01.css 中找到以下區塊並新增 overflow-x: hidden; */
html, body {
    height: 100%; /* 確保瀏覽器視窗高度被完整利用 */
    margin: 0; /* 確保沒有預設邊距 */
    padding: 0; /* 確保沒有預設內邊距 */
}

/* Tab 按鈕和表格文字大小增加 110% */

/* 調整 .tabs-container 最大寬度 */
.tabs-container {
    max-width: 1100px; /* 已調整為 1100px */
}

/* Tab 按鈕字體大小調整 */
.tab-button {
    font-size: 1.65em; /* 桌面版字體大小增加 110% (1.5em * 1.1) */
}

/* 調整 .data-table 內文字大小 */
.data-table {
    font-size: 1.1em; /* 表格內文字大小增加 10% (1em * 1.1) */
}

/* 手機版適應性調整 */
@media (max-width: 768px) {
    /* Tab 按鈕字體大小調整 */
    .tab-button {
        font-size: 1.32em; /* 手機版字體大小增加 110% (1.2em * 1.1) */
    }

    /* 調整 .data-table 內文字大小 */
    .data-table {
        font-size: 0.99em; /* 手機版表格內文字大小增加 10% (0.9em * 1.1) */
    }
}

/* 針對 page-2 內容的垂直對齊調整：使其靠上對齊，並保持水平置中 */
#page-2 {
    align-items: flex-start; /* 讓 page-2 內部的內容（例如 .main-content-wrapper）靠上對齊 */
    /* justify-content: center; // 這裡不需要重複寫，它會繼承自 .full-screen-section，保持水平置中 */
}