/* dictionary/css/result-section.css */

/* --- Result Section Styles (Main Container) --- */
.result-section {
    background-color: #fcfcfc; /* 更柔和的淺白，替代 #fffde7 (亮黃) */
    border-radius: 18px; /* 稍微增大圓角，更柔和 */
    padding: 30px; /* 增加內邊距，提供更多留白 */
    margin-bottom: 35px; /* 增加外部間距 */
    text-align: left;
    border: 1px solid #e0e0e0; /* 更細膩、柔和的邊框，替代 #ffeb3b (黃色) */
    min-height: 220px; /* 稍微增加最小高度 */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔和的陰影，增加層次感 */
}

/* Word result container: word text, pronunciation button, CEFR level */
.result-section #wordResult {
    font-size: 3.2em; /* 稍微增大主單字字體 */
    color: #2c3e50; /* 深灰藍色，替代 #e91e63 (粉色)，減少視覺衝擊 */
    font-weight: bold;
    margin-bottom: 20px; /* 增加底部間距 */
    display: flex;
    align-items: center;
    gap: 18px; /* 稍微增大元素間距 */
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    line-height: 1.2; /* 確保主單字行高舒適 */
}

.part-of-speech-text {
    font-size: 0.45em; /* 稍微縮小 */
    color: #546e7a; /* 柔和的深藍灰 */
    font-weight: bold;
    margin-left: 8px; /* 增大間距 */
    display: inline-block;
}

/* General pronunciation button styles */
.pronounce-button {
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* 柔和陰影 */
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
    flex-shrink: 0;
}
.pronounce-button:hover {
    transform: scale(1.08); /* 稍微降低放大比例，減少視覺突兀 */
}

/* Word pronunciation button (large) */
.word-pronounce-button {
    background-color: #673ab7; /* 柔和的紫色，替代 #9c27b0 (亮紫) */
    width: 55px; /* 稍微增大 */
    height: 55px; /* 稍微增大 */
    font-size: 1.6em; /* 稍微增大圖標 */
}
.word-pronounce-button:hover {
    background-color: #5e35b1; /* 更深一點的紫色 */
}

/* Explanation and example sentence pronunciation buttons (small) */
.text-pronounce-button {
    background-color: #42a5f5; /* 柔和的藍色，替代 #2196f3 (亮藍) */
    width: 30px; /* 稍微增大 */
    height: 30px; /* 稍微增大 */
    font-size: 0.8em; /* 稍微增大圖標 */
    margin-left: 10px; /* 增大間距 */
    vertical-align: middle;
}
.text-pronounce-button:hover {
    background-color: #2196f3; /* 更深一點的藍色 */
}

/* Paragraph containers for explanation and example sentence: text and button side-by-side */
#explanation,
#exampleSentence {
    font-size: 1.25em; /* 調整為更適中的閱讀字體大小 */
    color: #455a64; /* 柔和的深灰藍 */
    line-height: 1.7; /* 增加行高，提升閱讀舒適度 */
    margin-bottom: 25px; /* 增加底部間距 */
    text-align: justify;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* Ensure explanation and example sentence text content styles */
#explanationText,
#exampleSentenceText {
    flex-grow: 1;
    min-width: 0;
}

#wordImage {
    max-width: 60%; /* 圖片稍微縮小，減少視覺佔用 */
    height: auto;
    border-radius: 12px;
    margin-top: 25px; /* 增加間距 */
    border: 1px solid #e0e0e0; /* 柔和邊框 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* 柔和陰影 */
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#exampleSentence {
    font-size: 1.1em; /* 範例句字體略小於解釋，區分層次 */
    color: #6a1b9a; /* 柔和的深紫色 */
    font-style: italic;
    margin-top: 20px; /* 增加間距 */
}

#encouragement,
.no-result {
    font-size: 1.2em; /* 稍微調整字體大小 */
    color: #00897b; /* 柔和的綠松石色 */
    font-weight: bold;
    margin-top: 30px; /* 增加間距 */
    text-align: center;
    width: 100%;
}
.no-result {
    color: #90a4ae; /* 更柔和的灰色，替代 #9e9e9e */
    font-size: 1.4em; /* 稍微增大 */
}

/* CEFR Level Badge styles (in Result Section) */
.cefr-badge {
    display: inline-block;
    color: white;
    padding: 6px 12px; /* 增加內邊距 */
    border-radius: 25px; /* 更圓潤 */
    font-size: 0.65em; /* 稍微縮小 */
    font-weight: bold;
    margin-left: 18px; /* 增加間距 */
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 柔和陰影 */
    min-width: 50px; /* 稍微增大最小寬度 */
    text-align: center;
    letter-spacing: 0.05em; /* 輕微字間距，提升辨識度 */
}

/* CEFR Level Badge Colors (使用更柔和的色調，或在顏色上增加透明度/亮度調整) */
.cefr-badge.A1 { background-color: #66bb6a; } /* Green */
.cefr-badge.A2 { background-color: #aed581; } /* Light Green */
.cefr-badge.B1 { background-color: #ffca28; } /* Amber */
.cefr-badge.B2 { background-color: #ffa726; } /* Orange */
.cefr-badge.C1 { background-color: #ff7043; } /* Deep Orange */
.cefr-badge.C2 { background-color: #ef5350; } /* Red */

---

    /* --- NEW: Styles for Extra Notes, Word Forms, Collocations --- */
.section-title {
    font-size: 1.3em; /* 稍微增大標題 */
    font-weight: bold;
    color: #37474f; /* 更深的灰藍色 */
    margin-top: 30px; /* 增加頂部間距 */
    margin-bottom: 12px; /* 增加底部間距 */
    border-bottom: 1px solid #eceff1; /* 更細膩的分割線 */
    padding-bottom: 8px; /* 增加內邊距 */
    letter-spacing: 0.02em; /* 輕微字間距 */
}

.extra-notes-section {
    background-color: #fcfdff; /* 更淺的藍色背景 */
    border-left: 3px solid #64b5f6; /* 柔和的藍色邊框 */
    border-radius: 10px; /* 稍微增大圓角 */
    padding: 18px 22px; /* 調整內邊距 */
    margin-top: 18px; /* 調整間距 */
    margin-bottom: 25px; /* 調整間距 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); /* 更柔和的陰影 */
}

.extra-notes-text {
    font-size: 1.05em; /* 稍微增大字體 */
    color: #4a4a4a; /* 柔和的深灰色 */
    line-height: 1.7; /* 增加行高 */
    margin-bottom: 12px; /* 調整間距 */
    align-items: flex-start;
    flex-wrap: wrap;
    flex-grow: 1;
    min-width: 0;
}

/* Redesign Word Forms Section */
.word-forms-section {
    background-color: #fefcfd; /* 更淺的紫色背景 */
    border-left: 3px solid #ce93d8; /* 柔和的紫色邊框 */
    border-radius: 10px;
    padding: 18px 22px;
    margin-top: 18px;
    margin-bottom: 25px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.word-forms-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 增大間距 */
}

.word-form-item {
    background-color: #f3e5f5; /* 淺紫色背景 */
    color: #6a1b9a; /* 柔和的深紫色 */
    padding: 10px 18px; /* 增大內邊距 */
    border-radius: 10px;
    font-size: 1em; /* 稍微增大字體 */
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06); /* 柔和陰影 */
    border: 1px solid #e1bee7; /* 柔和邊框 */
    display: block;
}

.word-form-item strong {
    color: #424242;
    margin-right: 6px; /* 增大間距 */
}

/* Redesign Collocations Section */
.collocations-section {
    background-color: #fcfefc; /* 更淺的綠色背景 */
    border-left: 3px solid #81c784; /* 柔和的綠色邊框 */
    border-radius: 10px;
    padding: 18px 22px;
    margin-top: 18px;
    margin-bottom: 25px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.collocation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 增大間距 */
}

.collocation-item {
    background-color: #e8f5e9; /* 淺綠色標籤 */
    color: #388e3c; /* 柔和的深綠色 */
    padding: 10px 18px; /* 增大內邊距 */
    border-radius: 25px; /* 更圓潤 */
    font-size: 1em; /* 稍微增大字體 */
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08); /* 柔和陰影 */
    border: 1px solid #c5e1a5; /* 柔和邊框 */
}

/* --- Styles for clickable words --- */
.clickable-word {
    cursor: pointer;
    text-decoration: underline;
    color: #2196f3; /* 柔和的藍色，避免過於刺眼 */
    transition: color 0.18s ease-in-out;
}
.clickable-word:hover {
    color: #1976d2; /* 稍深的藍色 */
}


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .result-section {
        padding: 20px;
        margin: 20px 0;
        border-radius: 15px; /* 調整圓角 */
    }
    .result-section #wordResult {
        font-size: 2.5em; /* 手機端字體大小調整 */
        gap: 12px;
        margin-bottom: 15px;
    }
    .word-pronounce-button, .cefr-badge {
        margin-left: 0;
        align-self: flex-start;
    }
    .part-of-speech-text {
        font-size: 0.4em; /* 調整字體大小 */
        margin-left: 0;
    }
    .word-pronounce-button {
        width: 45px; /* 調整大小 */
        height: 45px;
        font-size: 1.4em;
    }
    .text-pronounce-button {
        width: 28px; /* 調整大小 */
        height: 28px;
        font-size: 0.7em;
        margin-left: 0;
        margin-top: 5px;
        align-self: flex-start;
    }
    #explanation, #exampleSentence, .extra-notes-text {
        font-size: 1.1em; /* 調整字體大小 */
        flex-direction: column;
        align-items: flex-start;
    }
    #wordImage {
        max-width: 90%;
        margin-top: 15px;
    }
    #encouragement, .no-result {
        font-size: 1.1em;
    }

    /* New section mobile adjustments */
    .extra-notes-section,
    .word-forms-section,
    .collocations-section {
        padding: 12px 18px; /* 調整內邊距 */
        margin-top: 15px;
        margin-bottom: 20px;
        border-radius: 8px;
    }
    .section-title {
        font-size: 1.2em;
        margin-top: 20px;
        margin-bottom: 10px;
        padding-bottom: 6px;
    }
    .word-form-item,
    .collocation-item {
        font-size: 0.95em;
        padding: 8px 15px;
    }
    .word-forms-list {
        gap: 8px;
    }
    .collocation-list {
        gap: 10px;
    }
}