/* =========================================
   IPE 學生專區共用樣式表
   ========================================= */

/* =========================================
   1. 基礎變數與佈局 (IPE 官方標準架構)
   ========================================= */
.ipe-wrap {
    --ipe-gold: #C6A96B; --ipe-gold-light: #D8BE8A; --ipe-gold-dark: #B89A5F;
    --ipe-navy: #1B2836; --ipe-navy-light: #2C3E50; --ipe-bg: #F6F8FB; --ipe-gray: #5F6B7A;
    font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: var(--ipe-gray); max-width: 1200px; margin: 0 auto; display: flex;
    flex-direction: row; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.05); box-sizing: border-box;
}
.ipe-wrap * { box-sizing: border-box; }

.ipe-main-content { 
    flex: 1; 
    min-width: 320px; 
    padding: 70px 50px; 
    text-align: left; 
    /* ★ 優化：新增文字斷行規則，防止長單字或連結在手機上撐破版面 */
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ★ 優化：新增圖片/影片的響應式規則，未來加入媒體內容時會自動縮放 */
.ipe-main-content img,
.ipe-main-content video {
    max-width: 100%;
    height: auto;
}

.ipe-wrap h2, .ipe-wrap h3, .ipe-wrap h4 { font-family: 'Noto Serif TC', serif !important; font-weight: 900 !important; letter-spacing: 0.05em; }
.section-label { font-family: 'Noto Serif TC', serif; font-weight: 700; font-size: 13px; letter-spacing: 3px; color: var(--ipe-gold); text-transform: uppercase; margin-bottom: 20px; display: block; border-bottom: 1px solid #E6EAF0; padding-bottom: 10px; }
.ipe-chapter-title { font-size: 34px; color: #111111; margin: 0 0 15px 0; line-height: 1.4; }
.chapter-subtitle { font-size: 16px; color: var(--ipe-gray); margin-bottom: 40px; line-height: 1.6;}

/* =========================================
   2. 專屬表格樣式 (術科流程與扣分標準)
   ========================================= */
.ipe-table-wrap { overflow-x: auto; margin-bottom: 50px; background: #fff; border-radius: 12px; box-shadow: 0 5px 25px rgba(27, 40, 54, 0.05); border: 1px solid #E6EAF0; }
.ipe-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.ipe-table th { background: var(--ipe-navy); color: var(--ipe-gold-light); padding: 18px 20px; text-align: left; font-size: 16px; letter-spacing: 1px; white-space: nowrap; }
.ipe-table td { padding: 18px 20px; border-bottom: 1px solid #E6EAF0; line-height: 1.7; color: #333; font-size: 15px; vertical-align: top; }
.ipe-table tr:last-child td { border-bottom: none; }
.ipe-table tr:hover td { background: #FAFBFE; }
.ipe-table td ol { margin: 0; padding-left: 20px; }
.ipe-table td ol li { margin-bottom: 6px; }
.ipe-table td ol li:last-child { margin-bottom: 0; }

/* 狀態標籤 */
.badge-time { background: #EAF2FF; color: var(--ipe-navy-light); padding: 5px 12px; border-radius: 6px; font-weight: bold; font-size: 14px; white-space: nowrap; display: inline-block; border: 1px solid #D6E4FF; }
.badge-danger { background: #FFEAEA; color: #E74C3C; padding: 5px 15px; border-radius: 6px; font-weight: 900; font-size: 15px; white-space: nowrap; display: inline-block; border: 1px solid #FFD6D6; }
.highlight-row { background: #FFF9ED !important; text-align: center; color: var(--ipe-gold-dark) !important; font-weight: bold; letter-spacing: 1px; }

/* =========================================
   3. 題庫專區 (動態生成卡片)
   ========================================= */
.qna-section-title { font-size: 24px; color: var(--ipe-navy); margin: 0 0 10px 0; border-left: 5px solid var(--ipe-gold); padding-left: 15px; }
.qna-desc { margin-bottom: 30px; font-size: 15px; }
.qna-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.qna-item { background: #fff; border: 1px solid #E6EAF0; border-radius: 8px; padding: 25px; box-shadow: 0 3px 15px rgba(0,0,0,0.02); transition: all 0.3s ease; position: relative; overflow: hidden; }
.qna-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ipe-gold); }
.qna-item:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.06); border-color: #D8BE8A; }

.qna-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; border-bottom: 1px dashed #E6EAF0; padding-bottom: 15px; }
.qna-num { background: var(--ipe-navy); color: var(--ipe-gold-light); padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 13px; letter-spacing: 1px; }
.qna-ans { background: #E74C3C; color: #fff; padding: 4px 12px; border-radius: 20px; font-weight: bold; font-size: 13px; letter-spacing: 1px; box-shadow: 0 3px 8px rgba(231, 76, 60, 0.2); }

/* 題庫選項 Flex 排版優化 (完美解決手機版折行問題) */
.qna-body { color: #2C3E50; font-size: 16px; line-height: 1.6; }
.qna-q { font-weight: 700; margin-bottom: 12px; }
.qna-opts { display: flex; flex-direction: column; gap: 8px; }
.qna-opt { display: flex; align-items: flex-start; }
.qna-opt .opt-badge { flex: 0 0 35px; color: var(--ipe-gold-dark); font-weight: 900; font-size: 15px; margin-top: 1px; }
.qna-opt .opt-text { flex: 1; color: var(--ipe-gray); font-weight: 400; font-size: 15px; }

/* =========================================
   4. 摺疊面板 (手風琴效果)
   ========================================= */
.ipe-details { background: #fff; border: 1px solid #E6EAF0; border-radius: 12px; margin-bottom: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); overflow: hidden; transition: all 0.3s ease; }
.ipe-details:hover { box-shadow: 0 8px 25px rgba(44, 62, 80, 0.08); border-color: var(--ipe-gold-light); }
.ipe-summary { background: var(--ipe-bg); padding: 22px 25px; font-size: 20px; font-weight: 900; color: var(--ipe-navy); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: 0.3s ease; border-left: 5px solid var(--ipe-gold); font-family: 'Noto Serif TC', serif; letter-spacing: 1px; }
.ipe-summary::-webkit-details-marker { display: none; }
.ipe-summary:hover { background: #edf2f7; }
.ipe-details[open] .ipe-summary { background: var(--ipe-navy); color: #fff; }
.ipe-details[open] .ipe-summary .svg-arrow { transform: rotate(180deg); color: var(--ipe-gold-light); }
.ipe-details[open] .ipe-summary i[class*="fa-"] { color: var(--ipe-gold-light) !important; }
.ipe-content { padding: 30px 25px; animation: fadeIn 0.4s ease; }
.svg-arrow { transition: transform 0.3s ease; color: var(--ipe-gray); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* PDF 下載按鈕 */
.download-btn { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--ipe-gold-dark) 0%, var(--ipe-gold) 50%, var(--ipe-gold-light) 100%); color: #fff !important; padding: 12px 28px; border-radius: 50px; font-size: 15px; font-weight: bold; text-decoration: none; box-shadow: 0 4px 15px rgba(198, 169, 107, 0.3); transition: all 0.3s ease; margin-bottom: 25px; letter-spacing: 1px; }
.download-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(198, 169, 107, 0.5); color: #fff; }

/* 回到頂部按鈕 */
.back-to-top { position: fixed; bottom: 40px; right: 40px; background: var(--ipe-gold); color: #fff; width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 20px; cursor: pointer; box-shadow: 0 5px 15px rgba(198, 169, 107, 0.4); display: none; align-items: center; justify-content: center; z-index: 999; transition: all 0.3s ease; }
.back-to-top:hover { background: var(--ipe-navy); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(27, 40, 54, 0.3); }

/* =========================================
   5. RWD 響應式設計
   ========================================= */

/* 平板尺寸 (Tablet) */
@media (max-width: 992px) {
    .ipe-wrap { 
        flex-direction: column; 
        width: 100%; 
    }
    .ipe-main-content { 
        padding: 40px 20px; 
    }
    .qna-header { 
        flex-wrap: wrap; 
    }
    .back-to-top { 
        bottom: 20px; 
        right: 20px; 
        width: 45px; 
        height: 45px; 
        font-size: 18px; 
    }
}

/* 手機尺寸 (Mobile) */
@media (max-width: 768px) {
    /* 標題與副標題手機版放大 */
    .ipe-chapter-title { font-size: 28px; line-height: 1.4; }
    .ipe-chapter-title span { font-size: 20px !important; display: block; margin-top: 8px; }
    .chapter-subtitle { font-size: 16px; margin-bottom: 25px; }
    
    /* 摺疊面板與一般內文手機版優化 */
    .ipe-summary { padding: 18px 20px; font-size: 18px; }
    .ipe-content { padding: 25px 15px; }
    .qna-desc { font-size: 16px; line-height: 1.6; }
    
    /* 表格與標籤字體放大 */
    .ipe-table th, .ipe-table td { padding: 15px; font-size: 15px; }
    .badge-time, .badge-danger { font-size: 14px; }
    
    /* 下載按鈕滿版與字體放大 */
    .download-btn { display: flex; width: 100%; justify-content: center; padding: 16px; font-size: 16px; margin-bottom: 25px; }
    
    /* ★ 題庫卡片手機版字體有感放大 ★ */
    .qna-item { padding: 25px 18px; }
    .qna-num, .qna-ans { font-size: 14px; padding: 6px 14px; }
    .qna-body { font-size: 17px; line-height: 1.7; }
    .qna-opt .opt-badge { font-size: 17px; flex: 0 0 35px; }
    .qna-opt .opt-text { font-size: 16px; color: #444; }
}