.news-item { display: flex; align-items: center; padding: 25px 0; border-bottom: 1px solid var(--border-color); font-size: 14px; cursor: pointer; transition: 0.4s; }
.news-date { width: 130px; color: #666; letter-spacing: 2px; }
.news-tag { background-color: var(--accent-color); color: white; padding: 4px 14px; font-size: 11px; letter-spacing: 1px; margin-right: 30px; border-radius: 3px; }
.news-title { flex: 1; line-height: 1.6; color: #333; }
.back-btn { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 50px; font-size: 12px; letter-spacing: 3px; cursor: pointer; color: #666; transition: 0.3s; padding: 10px 0; font-weight: bold; }
.back-btn::before { content: '←'; transition: 0.3s transform; font-size: 16px; }
.article-content-box { display: none; animation: fadeIn 0.6s ease; }
.article-header { border-bottom: 1px solid var(--border-color); padding-bottom: 25px; margin-bottom: 40px; }
.article-h1 { font-size: 24px; letter-spacing: 3px; margin-bottom: 15px; font-weight: normal; }
.article-meta { font-size: 13px; color: #888; letter-spacing: 2px; }
.article-body { font-family: 'Noto Serif TC', serif; line-height: 2.3; letter-spacing: 1.5px; font-size: 15px; color: #444; }
.article-body img { max-width: 100%; margin: 30px 0; box-shadow: 0 5px 20px rgba(0,0,0,0.08); border-radius: 4px; pointer-events: none; }
.article-body iframe { width: 100%; aspect-ratio: 16/9; box-shadow: 0 5px 20px rgba(0,0,0,0.08); border-radius: 4px; border: none; margin: 30px 0; }
.article-body a { color: var(--accent-color); text-decoration: none; border-bottom: 1px solid rgba(113, 156, 176, 0.3); transition: all 0.3s ease; padding-bottom: 2px; }

/* ───────────────────────────────────────────────────────
   行動端公告列表 CSS Grid 版面
   ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) { 
    /* 🌸 公告列表重構為 CSS Grid 版面，確保手機端排版整齊不凌亂 */
    .news-item {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas: 
            "date tag"
            "title title";
        gap: 8px 12px;
        padding: 20px 0;
        border-bottom: 1px solid var(--border-color);
        font-size: 14px;
        cursor: pointer;
        transition: 0.4s;
    }
    .news-date {
        grid-area: date;
        width: auto;
        color: #666;
        letter-spacing: 1px;
        font-size: 13px;
    }
    .news-tag {
        grid-area: tag;
        margin-right: 0;
        padding: 3px 10px;
        font-size: 10px;
        border-radius: 3px;
        justify-self: start;
    }
    .news-title {
        grid-area: title;
        line-height: 1.5;
        color: #333;
        font-size: 15px;
    }
    .news-item-arrow {
        display: none;
    }
}

/* ───────────────────────────────────────────────────────
   滑鼠懸停 (Hover) 專屬樣式隔離（防止觸控設備雙擊問題）
   ─────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .news-item:hover { 
        background-color: rgba(255, 255, 255, 0.5); 
        padding-left: 15px; 
    }
    .back-btn:hover { 
        color: var(--main-dark-color); 
    }
    .back-btn:hover::before { 
        transform: translateX(-8px); 
    }
    .article-body a:hover { 
        color: var(--main-dark-color); 
        border-bottom: 1px solid var(--main-dark-color); 
    }
    
    @media (max-width: 1024px) {
        .news-item:hover { 
            padding-left: 0; 
        }
    }
}