/* 詳情頁專屬佈局 */

/* 1. 調整整體容器，確保與導覽列有統一且適中的距離 */
.detail-container {
    padding-top: 20px;
}

/* 2. 左右卡片基礎樣式 */
.info-box {
    background: white;
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #e0eee0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* 3. 右側側邊欄：修正對齊與行距 */
.side-sticky-box {
    background: white;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #e0eee0;
    position: sticky;
    top: 20px; /* 捲動時卡住的位置 */
    /* 修正點：移除原本的 min-height，改由內容決定高度 */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* 4. 統一字體與行距 */
.title-line {
    border-left: 6px solid var(--action);
    padding-left: 15px;
    font-weight: 900;
    font-size: 1.25rem;
    margin-bottom: 20px;
    color: var(--forest);
}

.content-area {
    white-space: pre-wrap;
    line-height: 1.8; /* 左側內容維持舒適行距 */
    font-size: 1rem;
    color: #444;
}

/* 5. 修正右側考科結構行距過近問題 */
.subject-list {
    font-size: 1rem;
}

.subject-list b {
    color: var(--forest);
    display: block;
    margin-top: 15px;    /* 增加考科標題上方的間距 */
    margin-bottom: 8px;  /* 增加標題與下方清單的間距 */
    font-weight: 700;
}

.subject-list b:first-child {
    margin-top: 0; /* 第一個標題不需上方間距 */
}

.subject-list ul {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
}

.subject-list li {
    padding: 4px 0;      /* 增加每一行章節的垂直間距 */
    line-height: 1.5;    /* 稍微放寬行高 */
    font-size: 0.95rem;
    color: #555;
    border-bottom: 1px dashed #f0f0f0; /* 淡淡的底線增加區隔感 */
}

.subject-list li:last-child {
    border-bottom: none;
}

/* 6. 按鈕樣式 */
.btn-quiz-main {
    background: var(--action);
    color: white !important;
    border: none;
    padding: 16px;
    border-radius: 50px;
    font-weight: 900;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    transition: 0.3s;
    margin-top: 30px; /* 與上方列表保持距離 */
}
.btn-quiz-main:hover { background: var(--forest); transform: translateY(-2px); }