/* 基本樣式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    /* 調整背景色為深咖啡棕，營造溫暖木質感 */
    background-color: var(--bg-color); /* 深沉的咖啡棕 */

    /* 主要文字顏色調整為柔和的米白色 */
    color: var(--text-main); /* 柔和的米白色 */
    line-height: 1.6;
}

header {
    /* 保持深色調，可與 body 背景色相似或稍深 */
    background-color: var(--bg-header); /* 比 body 背景稍深一點的暖棕 */
    color: white;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgb(0 0 0 / 50%); /* 陰影調整為更明顯，增加層次感 */
}

header h1 {
    margin-bottom: 10px;
}

main {
    display: flex;
    margin: 20px auto;
    gap: 20px;
    padding: 0 15px;
}

.sidebar {
    flex: 0 0 280px;

    /* 側邊欄背景色比 body 淺一點，形成層次感，並帶有木紋感 */
    background-color: var(--bg-card); /* 比 body 背景稍淺且更溫暖的棕色 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%); /* 陰影調整 */
    align-self: flex-start;
    position: sticky;
    top: 20px;
}

.sidebar h2 {
    /* 側邊欄標題顏色與主要文字色一致 */
    color: var(--text-main); /* 柔和的米白色 */
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border-color); /* 分隔線顏色也變深，融入色調 */
    padding-bottom: 10px;
}

.filter-group {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--border-color); /* 分隔線顏色也變深，融入色調 */
}

.filter-group:last-of-type {
    border-bottom: none;
}

.filter-group h3 {
    /* 篩選條件標題顏色 */
    color: var(--text-heading); /* 溫暖的淺灰，更接近米白 */
    margin-bottom: 10px;
    font-size: 1.1em;
}

.filter-group label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.95em;
    transition: color 0.2s ease-in-out;

    /* 勾選標籤文字顏色 */
    color: var(--text-secondary); /* 稍微帶點暖的淺灰色 */
}

.filter-group label:hover {
    color: var(--accent); /* 柔和的金色，用於 hover 效果 */
}

.filter-group input[type="checkbox"] {
    margin-right: 8px;

    /* 勾選框本身的強調色，改為低調的金色 */
    accent-color: var(--accent); /* 低調的金色 */
}

#clear-filters {
    display: block;
    width: 100%;
    padding: 10px 15px;

    /* 清除按鈕使用柔和的赭石色，與木質調更搭 */
    background-color: var(--accent-button); /* 柔和的赭石色 */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

#clear-filters:hover {
    background-color: var(--accent-button-hover); /* 柔和赭石色的 hover 效果 */
}

.phone-info h3 {
    /* 卡片標題顏色 */
    color: var(--text-main); /* 柔和的米白色 */
    font-size: 1.3em;
    margin-bottom: 8px;
}

.phone-info p {
    font-size: 0.9em;

    /* 卡片內一般文字顏色 */
    color: var(--text-secondary); /* 稍微帶點暖的淺灰色 */
    margin-bottom: 5px;
}

.phone-info .price {
    font-size: 1.2em;

    /* 價格強調色，選用低調的金色 */
    color: var(--accent); /* 低調的金色 */
    font-weight: bold;
    margin-top: auto;
    text-align: right;
    padding-top: 10px;
    border-top: 1px solid var(--border-color); /* 分隔線變深，融入暖色調 */
}

footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;

    /* 底部與 header 一致 */
    background-color: var(--bg-header);
    color: white;
    font-size: 0.9em;
}

/* ... (保留你原有的所有 CSS 樣式，只修改以下響應式設計區塊) ... */

/* 響應式設計 (維持不變) */
@media (width <= 992px) {
    main {
        flex-direction: column;
        align-items: center;
    }

    .sidebar {
        width: 100%;
        max-width: 600px;
        position: static;
        margin-bottom: 20px;
    }

    .phone-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        width: 100%;
        max-width: 900px; /* 這裡可能會讓兩欄看起來更好，或者根據需要調整 */
    }
}

/* 新增：針對中等寬度螢幕（例如桌機/筆電常見螢幕）顯示 3 欄 */
@media (width >= 1200px) { /* 當螢幕寬度達到 1200px 時生效 */
    .phone-list {
        /* 允許顯示 3 欄，每欄最小 300px，最大佔滿可用空間 */
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* 新增：針對超寬螢幕（例如 2K/4K 螢幕或你提到的 2560px 螢幕）顯示 4 欄 */
@media (width >= 1800px) { /* 當螢幕寬度達到 1800px 時生效，你可以根據需要調整為 1920px 或 2000px */
    .phone-list {
        /* 允許顯示 4 欄，每欄最小 280px (為了避免太窄)，最大佔滿可用空間 */
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* 確保預設的兩欄或彈性兩欄在沒有達到 1200px 時仍然生效 */

/* 這個規則應該是你最原始的 phone-list 設定，確保它在沒有更高優先級的 media query 時應用 */
.phone-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 預設的兩欄或彈性兩欄 */
    gap: 20px;
    align-items: start;
}

/* 這是之前為了解決「頂天立地」問題而設定的 min-height，確保它仍被應用 */
.phone-card {
    /* ... 保持原有 phone-card 的樣式，包括 min-height: 550px; ... */
    min-height: 550px; /* 增加一個合理的最小高度，可根據實際內容調整 */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phone-card img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    margin-bottom: 10px;
}

@media (width <= 600px) {
    header h1 {
        font-size: 1.8em;
    }

    header p {
        font-size: 0.9em;
    }

    .phone-card {
        margin: 0 auto;
    }
}

/* 新增樣式：用於嵌套的篩選組，讓層次更清晰 */
.nested-filter-group {
    margin-left: 15px; /* 增加縮排 */
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px solid var(--border-secondary); /* 與整體木質調一致的邊框 */
}

.nested-filter-group h4 {
    color: var(--text-secondary); /* 與一般文字色相近 */
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* 確保全選按鈕的樣式 */
.select-all-checkbox {
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--accent); /* 讓「全選」文字有強調色 */
}

/* 手機卡片底部連結的樣式 */
.phone-info .links {
    margin-top: 10px;
    font-size: 0.85em;
    padding-top: 5px;
    border-top: 1px dashed var(--border-secondary);
}

.phone-info .links a {
    color: var(--accent); /* 連結顏色使用強調的金色 */
    text-decoration: none;
    margin-right: 10px;
    transition: color 0.2s ease;
}

.phone-info .links a:hover {
    color: var(--accent-hover); /* hover 效果為稍亮一點的金色 */
    text-decoration: underline;
}

/* 新增：可摺疊篩選組的樣式 */
.collapsible-group .collapsible-header {
    cursor: pointer;
    display: flex; /* 讓內容水平排列 */
    align-items: center; /* 垂直置中 */

    /* 移除 justify-content: space-between; 讓圖標和文字靠近 */
    margin-bottom: 0; /* 移除 h3 預設的 margin-bottom */

    /* 新增：為了視覺效果，可以給 header 額外一點點左邊距或內邊距 */
    padding-left: 0; /* 或者 5px，看你覺得哪種對齊比較美觀 */
}

.collapsible-group .collapsible-header h3 {
    margin-bottom: 0; /* 確保 h3 內部沒有額外空間 */

    /* 調整 h3 的左邊距，讓它與圖標有些間隔 */
    margin-left: 8px; /* 給圖標和文字之間留點空間 */
}

.collapsible-group .toggle-icon {
    font-size: 1.2em; /* 圖標大小 */
    transition: transform 0.3s ease-out; /* 旋轉動畫 */
    transform: rotate(-90deg); /* 預設摺疊時指向右側 (因為內容是隱藏的) */
    color: var(--accent); /* 圖標顏色 */

    /* 確保圖標在 flex 容器中不會被擠壓 */
    flex-shrink: 0;
}

.collapsible-group .collapsible-content {
    max-height: 1000px; /* 預設一個足夠大的高度，讓內容完整顯示 */
    overflow: hidden; /* 隱藏超出部分 */
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out; /* 摺疊動畫 */
    opacity: 1; /* 預設可見 */
    padding-top: 15px; /* 內容與標題的間距 */

    /* 內容也向左縮進一點，與圖標對齊 */
    padding-left: 20px; /* 確保內容與圖標有一定對齊 */
}

/* 摺疊狀態時的樣式 */
.collapsible-group.collapsed .collapsible-content {
    max-height: 0; /* 摺疊時高度為 0 */
    opacity: 0; /* 摺疊時透明度為 0 */
    padding-top: 0; /* 摺疊時移除內容的 padding-top */
}

.collapsible-group.collapsed .toggle-icon {
    transform: rotate(-90deg); /* 摺疊時圖標向右 (預設就是這個方向，所以保持不變) */
}

/* 展開狀態時的樣式 */
.collapsible-group:not(.collapsed) .toggle-icon {
    transform: rotate(0deg); /* 展開時圖標向下 */
}

/* 確保嵌套篩選組的頂部間距，即使在摺疊內容中也能正常顯示 */
.collapsible-content .nested-filter-group {
    margin-top: 10px;
}

/* 確保篩選組的底部邊界線在摺疊時不會顯示 */
.collapsible-group {
    border-bottom: 1px dashed var(--border-color); /* 預設有分隔線 */
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.collapsible-group:last-of-type {
    border-bottom: none; /* 最後一個沒有分隔線 */
}

/* 確保在摺疊狀態下，分隔線仍然可見 */
.collapsible-group.collapsed {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.collapsible-group.collapsed:last-of-type {
    border-bottom: none;
}