/* 外層 scroll 容器：確保整張表橫向滾動 */
.comparison-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

/* 結果容器：讓右側表格能展開 */
.comparison-result-wrapper {
    min-width: 1200px;
    margin: 0 auto;
}

/* 比對表格樣式 */
.comparison-table {
    min-width: 100%;
    border-collapse: collapse;
    text-align: center;
    width: max-content;
}

/* 空列 class 用來撐起高度 */
.row-empty {
    min-height: 40px;
    font-size: 0;
}

/* 統一 box-sizing 以避免 padding 對高度影響 */
.comparison-table-fixed td,
.comparison-table-fixed th,
.comparison-table td,
.comparison-table th {
    box-sizing: border-box;
    padding: 10px;
    vertical-align: middle;
}

/* 左右表格行設定相同高度與間距 */
.comparison-table-fixed tr,
.comparison-table tr {
    height: 52px;
    max-height: 52px;
    line-height: 1;
}

/* 避免內容撐開列高 */
.comparison-table-fixed td,
.comparison-table td {
    height: 52px;
    max-height: 52px;
    overflow: hidden;
}

/* 固定左側表格設定 */
.comparison-table-fixed {
    border-collapse: collapse;
    table-layout: fixed;
    width: auto;
}


/* 表格通用儲存格樣式 */
.comparison-table th,
.comparison-table td,
.comparison-table-fixed td,
.comparison-table-fixed th {
    padding: 10px;
    /* border: 1px solid #ddd; */
    white-space: nowrap;
    vertical-align: middle;
}

/* 自動寬度：左表名稱欄文字撐開 */
.comparison-table-fixed td:nth-child(2),
.comparison-table-fixed th:nth-child(2) {
    width: auto;
    white-space: nowrap;
}

/* 右表每格固定寬度 */
.comparison-table td,
.comparison-table th {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* 表頭樣式 */
.comparison-table th {
    font-weight: bold;
    background-color: #f4f6f8;
    color: #123b5e;
}

/* 左側類別欄樣式：對齊頂部 */
.row-category {
    font-weight: bold;
    background-color: #f9fafb;
    text-align: left;
    vertical-align: top;
}

/* 強制左側合併列（rowspan）垂直置頂 */
.comparison-table-fixed .row-category {
    vertical-align: top;
    line-height: 1.4;
    display: table-cell;
}

/* 確保儲存格內容不因表格自動高度而置中 */
.comparison-table-fixed td {
    vertical-align: top;
}

/* 色塊樣式 */
.green,
.yellow,
.red {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* 對應三種色碼 */
.green {
    background-color: #6ECCB0;
}

.yellow {
    background-color: #FF700B;
}

.red {
    background-color: #C72400;
}

/* 圖例容器 */
.legend-container {
    display: flex;
    gap: 2rem;
    margin: 10px 0 20px 0;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding-left: 1rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-box {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

.legend-box.green {
    background-color: #6ECCB0;
}

.legend-box.yellow {
    background-color: #FF700B;
}

.legend-box.red {
    background-color: #C72400;
}

.Comparison-container {
    /* background-color: #f8faff; */
    padding: 2rem 2rem 1rem 2rem;
    border-radius: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
}

/* 篩選區樣式維持不變 */
.filter-container {
    background-color: #f8faff;
    padding: 2rem 2rem 1rem 2rem;
    border-radius: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-group {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.1rem;
}

.filter-group label:first-child {
    width: 100px;
    font-weight: bold;
    color: #123b5e;
}

/* radio 樣式 */
.filter-group input[type="radio"] {
    appearance: auto;
    -webkit-appearance: radio;
    border: 2px solid #999;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.filter-group input[type="radio"]:checked {
    border-color: #4169e1;
    background-color: #4169e1;
}

.filter-group input[type="radio"]::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    margin: 4px auto;
    border-radius: 50%;
    background: white;
}

/* 搜尋與取消按鈕 */
.search-button,
.cancel-button {
    background-color: white !important;
    color: #333 !important;
    padding: 10px 24px !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-right: 10px !important;
    transition: all 0.2s ease-in-out !important;
}

.search-button:hover,
.cancel-button:hover {
    background-color: #f1f1f1 !important;
    cursor: pointer !important;
}

@media (max-width: 768px) {

    /*
        手機版目標
        一 全頁面禁止水平捲動 避免滑出大片空白
        二 只允許 comparison-table-outer-wrapper 水平捲動
        三 左側固定表格與右側表格維持原本 flex 結構
    */
    html,
    body {
        overflow-x: hidden;
    }

    /*
        手機版唯一允許水平捲動的區塊
        這裡會成為水平捲動容器
    */
    .comparison-table-outer-wrapper {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /*
        內層保持左右並排
        讓左固定表與右表維持同一列
    */
    .comparison-table-wrapper {
        display: flex;
        align-items: flex-start;
        width: max-content;
    }

    /*
        左側固定表格避免被擠壓
        手機版寬度略縮小
    */
    .comparison-table-fixed {
        flex: 0 0 auto;
        width: 210px;

        position: sticky;
        left: 0;
        z-index: 20;
        background: #ffffff;
    }

    /*
        左側文字縮小並允許換行
        避免文字被截斷
    */
    .comparison-table-fixed td {
        font-size: 12px;
        line-height: 1.25;
        white-space: normal;
        word-break: break-word;
        padding: 6px 4px;
    }

    /*
        右側捲動區域不再自己捲動
        改由 outer-wrapper 統一捲動
    */
    .comparison-scroll-wrapper {
        overflow: visible;
        width: auto;
        flex: 0 0 auto;
    }

    /*
        右側表格用內容寬度撐開
        讓 outer-wrapper 產生水平捲動
    */
    .comparison-table {
        width: max-content;
        min-width: unset;
    }

    /*
        清除可能撐寬整頁的設定
    */
    .comparison-result-wrapper {
        min-width: unset;
        width: 100%;
        margin: 0;
    }

    /*
        手機版 legend 平均分配
        三個項目平均排列
    */
    .legend-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .legend-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
    }

    /*
        legend 色塊大小
    */
    .legend-box {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

}