/* =========================================
   1. 提示框 & 佈局
   ========================================= */
.alert-box {
    display: flex;
    align-items: center;
    background: rgba(76, 175, 80, 0.1);
    border-left: 5px solid #4caf50;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 30px;
}
.alert-icon { font-size: 1.5rem; color: #4caf50; margin-right: 15px; }
.alert-content h4 { margin: 0 0 5px 0; color: #81c784; font-size: 1.1rem; }
.alert-content p { margin: 0; color: #ddd; }
.highlight { color: #ffd700; font-weight: bold; }

.solution-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* =========================================
   2. 分類區塊 (Accordion 預設全開)
   ========================================= */
.category-section {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.3s;
}

.cat-header {
    padding: 15px 20px;
    background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(0,0,0,0));
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cat-header:hover { background: rgba(255, 255, 255, 0.08); }
.cat-header h3 { margin: 0; font-size: 1.1rem; color: var(--primary-gold, #fbb750); display: flex; align-items: center; gap: 10px; }

/* 箭頭動畫 */
.arrow-icon { color: #888; transition: transform 0.3s; }

/* 預設隱藏內容 */
.cat-body {
    display: none; 
    background: rgba(0, 0, 0, 0.2);
}

/* ★ 預設全開 (Open 狀態) ★ */
.category-section.open .cat-body {
    display: block; /* 展開內容 */
    animation: fadeIn 0.3s ease-in;
}
.category-section.open .arrow-icon {
    transform: rotate(180deg); /* 箭頭轉向 */
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================
   3. 電腦版表格樣式
   ========================================= */
.solution-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.solution-table th {
    background: rgba(0, 0, 0, 0.4);
    color: #aaa;
    font-weight: normal;
    font-size: 0.9rem;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}

.solution-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    vertical-align: middle;
    color: #ddd;
}

.type-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    font-size: 0.85rem;
}

.item-name { font-weight: bold; color: #fff; }
.item-result { font-weight: bold; }
.text-gold { color: #ffd700; }
.text-gray { color: #999; font-size: 0.9rem; }
.text-center { text-align: center; }
.arrow-cell { color: #555; text-align: center; }
.count-badge { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-size: 0.9rem; }

/* =========================================
   4. ★ 手機版核心設計 (Card View - Grid修正版) ★
   ========================================= */
@media (max-width: 768px) {
    /* 1. 隱藏原本的表頭 */
    .solution-table thead {
        display: none;
    }

    /* 2. 將每一行 (tr) 變成一張 Grid 卡片 */
    .solution-table tbody tr {
        display: grid;
        /* 定義兩欄：左邊自動填滿，右邊根據內容縮放 (給數量用) */
        grid-template-columns: 1fr auto; 
        grid-template-areas: 
            "source source"
            "reward count"
            "desc desc";
        gap: 8px; /* 欄位間距 */
        
        margin-bottom: 15px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        padding: 15px;
        position: relative; /* 為了讓類型標籤定位 */
    }

    /* 移除所有 td 的預設邊框與內距 */
    .solution-table td {
        border: none;
        padding: 0;
    }

    /* --- 各個欄位的定位與樣式 --- */

    /* A. 類型 (定位在右上角) */
    .solution-table td[data-label="類型"] {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    /* B. 溶解物品 (佔滿第一列) */
    .solution-table td[data-label="溶解物品"] {
        grid-area: source;
        font-size: 1.1rem;
        font-weight: bold;
        color: #fff;
        margin-bottom: 5px;
        padding-right: 60px; /* 避開右上角的類型標籤 */
    }

    /* 隱藏電腦版的箭頭 */
    .solution-table td.arrow-cell {
        display: none;
    }

    /* C. 獲得物品 (左下) */
    .solution-table td[data-label="獲得物品"] {
        grid-area: reward;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.3); /* 深色底框 */
        padding: 8px 12px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        font-size: 0.95rem;
    }
    
    /* 加上前綴文字 */
    .solution-table td[data-label="獲得物品"]:before {
        content: "獲得：";
        color: #aaa;
        font-size: 0.85rem;
        margin-right: 5px;
        white-space: nowrap;
    }

    /* D. 數量 (右下，與獲得物品併排) */
    .solution-table td[data-label="數量"] {
        grid-area: count;
        display: flex; /* ★ 恢復顯示 */
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.3); /* 深色底框，與左邊連在一起 */
        padding: 8px 12px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        border-left: 1px solid rgba(255,255,255,0.1); /* 中間加條線 */
        white-space: nowrap;
    }
    
    .solution-table td[data-label="數量"] .count-badge {
        color: var(--primary-gold, #fbb750);
        font-weight: bold;
        background: transparent; /* 移除原本電腦版的背景，這裡直接顯示文字 */
        padding: 0;
    }

    /* E. 用途 (最下方) */
    .solution-table td[data-label="用途"] {
        grid-area: desc;
        font-size: 0.85rem;
        color: #888;
        padding-top: 5px;
        line-height: 1.4;
    }
    
    .solution-table td[data-label="用途"]:before {
        content: "說明：";
        color: #666;
    }
}