/* ==========================================================================
   1. 歷史感色調與變數定義
   ========================================================================== */
:root {
    --bg-antique: #F4F0EA;       /* 溫潤古董米白 */
    --text-dark: #1A1A1A;        /* 深炭黑 */
    --cj-green: #0D3B2B;         /* 經典長榮綠 */
    --cj-gold: #C5A059;          /* 琥珀金 */
    --white-alpha: rgba(255, 255, 255, 0.75);
    --nav-bg: rgba(244, 240, 234, 0.85); /* 導覽列毛玻璃底色 */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-antique);
    color: var(--text-dark);
    font-family: 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
}

/* ==========================================================================
   2. 導覽列設計（電腦版）
   ========================================================================== */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
    z-index: 10;
    background-color: var(--nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(13, 59, 43, 0.05);
}

/* ✨ 調整：整塊合併的超連結區域 */
.brand-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none; /* 移除超連結下底線 */
    color: var(--text-dark);
    transition: opacity 0.3s ease;
}

.brand-link:hover {
    opacity: 0.8; /* 滑過時有微小的互動感 */
}

/* ✨ 調整：真正的長榮校徽圖片設定 */
.school-logo-img {
    height: 45px; /* 固定高度，寬度會自動按比例縮放 */
    width: auto;
    object-fit: contain;
}

.logo-title {
    font-family: 'Noto Serif TC', serif;
    display: flex;
    flex-direction: column;
    letter-spacing: 2px;
}

.logo-title .sub {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.6;
}

.logo-title .main {
    font-size: 14px;
    font-weight: 500;
    margin-top: 1px;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 50px;
}

.main-nav ul li a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 14px;
    letter-spacing: 1.5px;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav ul li a:hover {
    color: var(--cj-green);
}

.menu-toggle-input, .hamburger-btn {
    display: none;
}

/* ==========================================================================
   3. 主視覺區佈局 (Hero Section) - 電腦版
   ========================================================================== */
.immersive-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ⚠️ 提示：未來自行拍攝後，將下方的網址改為本機的照片檔案路徑 */
    background-image: url('images/cjshs-alumni.jpg');
    background-size: cover;
    background-position: center;
    filter: sepia(6%) contrast(95%);
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(244, 240, 234, 0.3) 0%, rgba(244, 240, 234, 0.6) 100%);
    z-index: 2;
}

.timeline-line {
    position: absolute;
    top: 28%;
    bottom: 8%;
    left: 10%;
    width: 1.5px;
    background-color: var(--white-alpha);
    z-index: 4;
}

.hero-content-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1440px;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 160px; 
    padding-bottom: 80px;
    z-index: 3;
}

.brand-title {
    align-self: flex-start;
    margin-left: 40px;
}

.brand-title h1 {
    font-family: 'Noto Serif TC', serif;
    font-size: 72px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.25;
    letter-spacing: 8px;
}

.welcome-card {
    align-self: flex-end;
    text-align: right;
    max-width: 520px;
    padding: 40px;
    background: rgba(244, 240, 234, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 2px;
}

.card-subtitle {
    font-family: 'Noto Serif TC', serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--cj-green);
    letter-spacing: 3px;
    margin-bottom: 24px;
}

.card-prose {
    font-size: 15px;
    color: #333333;
    line-height: 2.2;
    letter-spacing: 1.8px;
    margin-bottom: 35px;
    font-weight: 300;
}

.btn-home {
    display: inline-block;
    text-decoration: none;
    background-color: var(--cj-green);
    color: var(--bg-antique);
    padding: 15px 36px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    box-shadow: 0 4px 15px rgba(13, 59, 43, 0.2);
    transition: all 0.3s ease;
}

.btn-home:hover {
    background-color: transparent;
    color: var(--cj-green);
    border: 1px solid var(--cj-green);
    transform: translateY(-3px);
}

/* ==========================================================================
   4. RWD 全面優化（徹底解決手機上下空白問題）
   ========================================================================== */
@media (max-width: 992px) {
    .site-header {
        padding: 15px 20px;
        position: fixed; 
    }

    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        z-index: 12;
    }

    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--text-dark);
        transition: all 0.3s ease;
    }

    .menu-toggle-input:checked ~ .hamburger-btn span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle-input:checked ~ .hamburger-btn span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle-input:checked ~ .hamburger-btn span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: var(--bg-antique);
        padding: 120px 40px;
        box-shadow: -10px 0 30px rgba(0,0,0,0.05);
        transition: right 0.4s ease;
        z-index: 11;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 35px;
    }

    .main-nav ul li a {
        font-size: 18px;
    }

    .menu-toggle-input:checked ~ .main-nav {
        right: 0;
    }

    /* --- 手機版縱向排列調整 --- */
    .immersive-hero {
        flex-direction: column;
        height: auto;
        min-height: auto;
        padding-top: 80px; /* 留出空間給 Fixed Header */
        background-color: var(--bg-antique);
    }

    /* ✨ 關鍵修正：將 contain 改回 cover 並固定視窗高度，徹底消滅上下空白 */
    .hero-bg-image {
        position: relative;
        width: 100%;
        height: 40vh; /* 固定佔用手機螢幕高度的 40% */
        background-size: cover; /* ✨ 填滿整個區塊，絕不留黑/白邊 */
        background-position: center; /* 以相片正中央為基準進行縮放 */
        background-repeat: no-repeat;
    }

    .hero-overlay, .timeline-line {
        display: none; 
    }

    .hero-content-wrapper {
        width: 100%;
        height: auto;
        padding: 35px 25px;
    }

    .brand-title {
        margin-left: 0;
        margin-bottom: 20px;
    }

    .brand-title h1 {
        font-size: 40px;
        letter-spacing: 4px;
    }

    .welcome-card {
        width: 100%;
        background: transparent; 
        padding: 0;
        text-align: left;
        box-shadow: none;
    }

    .card-subtitle {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .card-prose {
        font-size: 14px;
        line-height: 2;
    }

    .cta-wrapper {
        justify-content: flex-start;
    }
    
    .btn-home {
        width: 100%; 
        text-align: center;
    }
}
/* ==========================================================================
   5. 校友會核心願景介紹區樣式 (Section 2 - 左中右橫向大排版)
   ========================================================================== */
.visions-section {
    background-color: var(--cj-green); /* 背景切換為深長榮綠 */
    color: var(--bg-antique);         /* 文字反白為古董米白 */
    padding: 140px 0;                 /* 拉大上下留白，彰顯大氣 */
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(244, 240, 234, 0.1);
}

.visions-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    /* ✨ 關鍵核心：電腦版用 flex 佈局，將「左側標題」與「右側卡片組」並排開來 */
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

/* 左側標題區 (佔 25% 左右的寬度) */
.visions-header {
    flex: 0 0 240px; /* 固定寬度，不隨畫面縮放變形 */
    position: sticky;
    top: 140px;      /* 滾動時標題可以优雅地定在畫面上 */
}

.visions-header .vision-tag {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--cj-gold); /* 琥珀金 */
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
}

.visions-header .vision-section-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 4px;
    line-height: 1.4;
}

/* 右側三卡片區域 (自動填滿剩餘的 75% 寬度) */
.visions-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 內部分成左、中、右三欄 */
    gap: 0;
}

/* 單個願景卡片 */
.vision-card {
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px;
    transition: background-color 0.4s ease;
    /* 卡片之間加上精細的直立線，呼應你的極簡線條骨架 */
    border-left: 1px solid rgba(244, 240, 234, 0.15);
}

/* 最後一張卡片的右側也補上一條細線，維持視覺對稱平衡 */
.vision-card:last-child {
    border-right: 1px solid rgba(244, 240, 234, 0.15);
}

.vision-card:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.card-num {
    font-size: 14px;
    font-family: 'Noto Serif TC', serif;
    color: var(--cj-gold);
    font-weight: 700;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.card-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 25px;
    letter-spacing: 1px;
    line-height: 1.4;
}

.card-desc {
    font-size: 14px;
    line-height: 2.1;
    color: rgba(244, 240, 234, 0.7);
    letter-spacing: 1px;
    font-weight: 300;
    margin-bottom: 40px;
    flex-grow: 1;
}

.card-link-btn {
    align-self: flex-start;
    text-decoration: none;
    color: var(--cj-gold);
    font-size: 13px;
    letter-spacing: 1.5px;
    font-weight: 400;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.card-link-btn:hover {
    color: var(--bg-antique);
    border-bottom: 1px solid var(--bg-antique);
    transform: translateX(5px);
}

/* ==========================================================================
   Section 2 的 RWD 行動裝置相容 (切換回縱向單欄，完美適應手機)
   ========================================================================== */
@media (max-width: 1200px) {
    /* 針對中等螢幕（如 iPad Pro），稍微縮小卡片間距和字體 */
    .visions-wrapper {
        padding: 0 40px;
        gap: 30px;
    }
    .visions-header {
        flex: 0 0 180px;
    }
    .visions-header .vision-section-title {
        font-size: 32px;
    }
    .vision-card {
        padding: 30px 20px;
    }
}

@media (max-width: 992px) {
    .visions-section {
        padding: 80px 0;
    }

    /* ✨ 手機版重置：取消 flex，改回正常的垂直堆疊 */
    .visions-wrapper {
        padding: 0 25px;
        flex-direction: column;
        gap: 40px;
    }

    .visions-header {
        flex: none;
        width: 100%;
        position: static; /* 取消黏性定位 */
        text-align: center;
    }

    .visions-header .vision-section-title {
        font-size: 28px;
    }

    /* ✨ 手機版重置：卡片從橫向 3 欄變回縱向 1 欄 */
    .visions-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .vision-card {
        padding: 40px 10px;
        min-height: auto;
        border-left: none; /* 移除直立線 */
        border-right: none;
        border-bottom: 1px solid rgba(244, 240, 234, 0.15); /* 改為上下細線分隔 */
    }

    .vision-card:last-child {
        border-bottom: none;
    }

    .card-title {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .card-link-btn {
        width: 100%;
        text-align: center;
        padding: 12px;
        border: 1px solid rgba(197, 160, 89, 0.4);
    }
    
    .card-link-btn:hover {
        background-color: var(--cj-gold);
        color: var(--cj-green);
    }
}
/* ==========================================================================
   6. 最新消息與星火動態樣式 (Section 3 - News)
   ========================================================================== */
.news-section {
    background-color: var(--bg-antique); /* 順暢回到古董米白背景，產生呼吸感 */
    color: var(--text-dark);
    padding: 140px 0;
    width: 100%;
    border-top: 1px solid rgba(13, 59, 43, 0.05);
}

.news-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

/* 區塊頂部大標 */
.news-header {
    margin-bottom: 60px;
    text-align: left;
}

.news-header .news-tag {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--cj-gold); /* 琥珀金 */
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
}

.news-header .news-section-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 4px;
    color: var(--cj-green); /* 長榮綠大標 */
}

/* 最新消息網格卡片牆（2x2 非對稱現代排版） */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 電腦版切為兩大欄 */
    gap: 40px;
}

/* 單個消息卡片基礎設定 */
.news-card {
    background: #FFFFFF;
    border: 1px solid rgba(13, 59, 43, 0.06);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(13, 59, 43, 0.04);
    border-color: rgba(13, 59, 43, 0.15);
}

/* 精選大卡片：橫跨電腦版的左右兩欄 (2欄寬) */
.featured-card {
    grid-column: span 2;
    flex-direction: row; /* 電腦版大卡片改為「左圖右文」並排 */
}

/* 卡片圖片容器 */
.news-img-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--bg-antique);
}

/* 精選大卡片的圖片在電腦版佔 50% 寬度 */
.featured-card .news-img-box {
    width: 50%;
    min-height: 100%;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 10; /* 固定圖片比例 */
    transition: transform 0.6s ease;
}

.news-card:hover .news-img {
    transform: scale(1.03); /* 滑過時圖片細微放大 */
}

/* 卡片文字內容區 */
.news-content {
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

/* 精選大卡片的文字區在電腦版也佔 50% */
.featured-card .news-content {
    width: 50%;
    padding: 45px;
}

.news-meta {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
    font-size: 13px;
    letter-spacing: 1px;
}

.news-date {
    color: #888888;
    font-weight: 400;
}

.news-category {
    color: var(--cj-gold);
    font-weight: 500;
}

.news-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-dark);
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* 大卡片的標題可以再大氣一點 */
.featured-card .news-title {
    font-size: 26px;
    margin-bottom: 20px;
}

.news-excerpt {
    font-size: 14px;
    line-height: 2;
    color: #555555;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 自動控制文字最多顯示 3 行，超出變省略號 */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-read-more {
    text-decoration: none;
    color: var(--cj-green);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.news-read-more:hover {
    color: var(--cj-gold);
    border-bottom: 1px solid var(--cj-gold);
}

/* ==========================================================================
   Section 3 的 RWD 行動裝置相容 (極致卡片清單模式)
   ========================================================================== */
@media (max-width: 1200px) {
    .news-wrapper {
        padding: 0 40px;
    }
    .featured-card .news-title {
        font-size: 24px;
    }
}

@media (max-width: 992px) {
    .news-section {
        padding: 80px 0;
    }

    .news-wrapper {
        padding: 0 25px;
    }

    .news-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .news-header .news-section-title {
        font-size: 28px;
    }

    /* 手機版重置：卡片牆全部變回直向單欄排列 */
    .news-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 精選大卡片重置：取消跨欄，改回正常的上下圖文排列 */
    .featured-card {
        grid-column: auto;
        flex-direction: column;
    }

    .featured-card .news-img-box,
    .featured-card .news-content {
        width: 100%;
    }

    .featured-card .news-content {
        padding: 30px 20px;
    }

    .news-content {
        padding: 30px 20px;
    }

    .news-title {
        font-size: 19px;
    }

    .featured-card .news-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .news-excerpt {
        font-size: 13.5px;
        margin-bottom: 25px;
    }
    
    .news-read-more {
        width: 100%;
        text-align: center;
        padding: 12px;
        border: 1px solid rgba(13, 59, 43, 0.15);
    }
    
    .news-read-more:hover {
        background-color: var(--cj-green);
        color: var(--bg-antique);
        border-color: var(--cj-green);
    }
}
/* 最新消息網格卡片牆 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px;
    align-items: start; /* ✨ 加這一行：確保常規卡片在並排時，維持自身高度不被硬性拉伸 */
}
/* ==========================================================================
   7. 動態新聞內頁專用樣式 (News Detail Page)
   ========================================================================== */
.detail-page-body {
    padding-top: 100px; /* 留空間給固定導覽列 */
}

.detail-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.article-inner {
    width: 100%;
    max-width: 800px; /* 限制寬度在 800px，最符合人類眼球閱讀長文的舒適寬度 */
    padding: 20px 0;
}

.article-breadcrumbs {
    font-size: 13px;
    color: #888888;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.article-breadcrumbs a {
    text-decoration: none;
    color: #666666;
    transition: color 0.3s;
}

.article-breadcrumbs a:hover {
    color: var(--cj-green);
}

.article-header {
    margin-bottom: 40px;
}

.article-meta {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

.article-date {
    font-size: 14px;
    color: #777777;
    letter-spacing: 1px;
}

.article-badge {
    background-color: var(--cj-green);
    color: var(--bg-antique);
    font-size: 12px;
    padding: 4px 12px;
    letter-spacing: 1px;
    font-weight: 400;
}

.article-main-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-dark);
    letter-spacing: 1px;
}

/* 核心大圖大氣排版 */
.article-featured-image-box {
    width: 100%;
    margin-bottom: 40px;
    box-shadow: 0 15px 30px rgba(13, 59, 43, 0.04);
}

.article-main-img {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover; /* 確保照片不變形 */
    display: block;
}

/* 長內文細緻排版（極簡人文感） */
.article-content-body {
    font-size: 16px;
    line-height: 2.3; /* 拉大行距，營造閱讀舒適感 */
    letter-spacing: 1.5px;
    color: #333333;
    font-weight: 300;
}

.article-content-body p {
    margin-bottom: 30px; /* 段落與段落之間留空 */
    text-align: justify; /* 文字左右齊行 */
}

.article-footer {
    margin-top: 60px;
    border-top: 1px solid rgba(13, 59, 43, 0.1);
    padding-top: 40px;
}

.btn-back-to-news {
    display: inline-block;
    text-decoration: none;
    color: var(--cj-green);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    transition: all 0.3s;
}

.btn-back-to-news:hover {
    color: var(--cj-gold);
    transform: translateX(-5px); /* 往左細微位移，暗示回去 */
}

/* 內頁手機版 RWD 調整 */
@media (max-width: 768px) {
    .article-main-title {
        font-size: 26px;
    }
    .article-content-body {
        font-size: 15px;
        line-height: 2;
    }
}
/* ==========================================================================
   8. 響應式 YouTube 影片內嵌防破版樣式
   ========================================================================== */
.video-responsive-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 關鍵精髓：高寬比 9 / 16 = 0.5625，強制鎖定完美的 16:9 比例 */
    height: 0;
    overflow: hidden;
    background-color: #000000; /* 載入前呈現高級黑色基底 */
}

.video-responsive-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* ==========================================================================
   9. 歷年公告 · 歷史訊息列表區樣式 (Archived News List)
   ========================================================================== */
.history-news-section {
    margin-top: 80px;
    border-top: 2px solid var(--cj-green); /* 用一條扎實的長榮綠粗線與上方卡片區隔 */
    padding-top: 50px;
}

.history-list-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    color: var(--cj-green);
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 500;
}

.history-list-container {
    list-style: none;
    width: 100%;
}

.history-item {
    border-bottom: 1px solid rgba(13, 59, 43, 0.08); /* 細緻的橫向底線 */
}

.history-item-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 22px 10px;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

/* 歷史列表滑過時的優雅奢華反饋 */
.history-item-link:hover {
    background-color: rgba(13, 59, 43, 0.02);
    padding-left: 20px; /* 整行文字細微右移，暗示可以點擊 */
}

.history-item-link:hover .history-item-title {
    color: var(--cj-gold); /* 標題滑過時變金黃色 */
}

.history-item-link:hover .history-item-arrow {
    transform: translateX(5px);
    color: var(--cj-gold);
}

/* 列表左側的時間與標籤 */
.history-item-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 240px; /* 固定寬度，排版超整齊 */
}

.history-item-meta .h-date {
    font-size: 14px;
    color: #888888;
    letter-spacing: 0.5px;
}

.history-item-meta .h-badge {
    font-size: 11px;
    border: 1px solid rgba(13, 59, 43, 0.2);
    color: var(--cj-green);
    padding: 2px 10px;
    letter-spacing: 1px;
}

/* 列表標題（自動填滿中間剩餘寬度） */
.history-item-title {
    flex-grow: 1;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    /* 防破版：如果歷史消息標題太長，在電腦版自動變省略號 */
    white-space: nowrap;
    overflow: hidden;
    text-shadow: none;
    text-overflow: ellipsis;
    padding-right: 40px;
}

/* 右側極簡小箭頭 */
.history-item-arrow {
    font-size: 12px;
    color: #BBBBBB;
    transition: transform 0.3s, color 0.3s;
}

/* 歷史消息列表的手機版 RWD 優化 */
@media (max-width: 768px) {
    .history-item-link {
        flex-direction: column; /* 手機版打破水平，改為上下排列 */
        align-items: flex-start;
        gap: 10px;
        padding: 18px 5px;
    }
    
    .history-item-link:hover {
        padding-left: 5px; /* 手機版取消右移，避免超出螢幕 */
    }

    .history-item-meta {
        flex: none;
        width: 100%;
        gap: 15px;
    }
    
    .history-item-title {
        width: 100%;
        white-space: normal; /* 手機版容許換行，字才看得到 */
        padding-right: 0;
        line-height: 1.4;
    }
    
    .history-item-arrow {
        display: none; /* 手機版隱藏箭頭，維持畫面乾淨 */
    }
}
/* ==========================================================================
   10. 沉穩大氣頁尾樣式 (Footer & CTA)
   ========================================================================== */
.site-footer {
    background-color: var(--cj-green); /* 切換回深長榮綠，收尾沉穩 */
    color: var(--bg-antique);         /* 文字反白為古董米白 */
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(244, 240, 234, 0.1);
}

/* 上半部：感性導流區 (CTA) */
.footer-cta-container {
    padding: 120px 20px;
    text-align: center;
    background-image: radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.05) 0%, transparent 70%); /* 細微的琥珀金核心微光特效 */
    border-bottom: 1px solid rgba(244, 240, 234, 0.08);
}

.cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.cta-tag {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--cj-gold);
    display: block;
    margin-bottom: 20px;
    font-weight: 500;
}

.cta-heading {
    font-family: 'Noto Serif TC', serif;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 25px;
    line-height: 1.4;
}

.cta-prose {
    font-size: 15px;
    line-height: 2.1;
    color: rgba(244, 240, 234, 0.7);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 45px;
}

/* 終點的超大亮眼按鈕 */
.btn-footer-action {
    display: inline-block;
    text-decoration: none;
    background-color: var(--cj-gold);
    color: var(--cj-green);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 18px 45px;
    border: 1px solid var(--cj-gold);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-footer-action:hover {
    background-color: transparent;
    color: var(--cj-gold);
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.15);
    transform: translateY(-3px);
}

/* 下半部：正式版權與校名宣告列 */
.footer-bottom-bar {
    padding: 40px 0;
    background-color: rgba(0, 0, 0, 0.15); /* 比上方再稍微深一點點的綠黑色 */
}

.footer-bottom-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 左側校徽組 */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-logo {
    height: 40px;
    width: auto;
    opacity: 0.9;
}

.footer-brand-txt {
    display: flex;
    flex-direction: column;
}

.footer-brand-txt .tw {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
}

.footer-brand-txt .en {
    font-size: 10px;
    color: rgba(244, 240, 234, 0.5);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* 右側版權組 */
.footer-meta-links {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.footer-meta-links .copyright {
    font-size: 12px;
    color: rgba(244, 240, 234, 0.4);
    letter-spacing: 0.5px;
}

.btn-scroll-top {
    text-decoration: none;
    color: var(--cj-gold);
    font-size: 12px;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.btn-scroll-top:hover {
    color: var(--bg-antique);
}

/* ==========================================================================
   頁尾行動裝置 RWD 完美適應
   ========================================================================== */
@media (max-width: 992px) {
    .footer-bottom-wrapper {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .footer-cta-container {
        padding: 80px 20px;
    }
    
    .cta-heading {
        font-size: 24px;
    }
    
    .cta-prose {
        font-size: 14px;
        line-height: 1.9;
    }
    
    .btn-footer-action {
        width: 100%; /* 手機版按鈕滿版好點擊 */
        padding: 16px 20px;
        font-size: 14px;
    }

    .footer-bottom-wrapper {
        flex-direction: column; /* 手機版改垂直堆疊，文字置中 */
        gap: 30px;
        padding: 0 25px;
        text-align: center;
    }
    
    .footer-brand {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-meta-links {
        align-items: center;
        text-align: center;
    }
}
/* ==========================================================================
   Section 3 & 頁尾 的 RWD 行動裝置相容 (完美融合、一行一塊優化)
   ========================================================================== */
@media (max-width: 992px) {
    /* 1. 區塊基本微調 */
    .news-section {
        padding: 80px 0;
    }

    .news-wrapper {
        padding: 0 25px;
    }

    .news-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .news-header .news-section-title {
        font-size: 28px;
    }

    /* 2. 核心大網格重置：徹底打碎並排，強制「一行一塊」 */
    .news-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* 3. 頭條大卡片重置：徹底取消電腦版「左圖右文」模式，改為「上圖下文」垂直堆疊 */
    .featured-card {
        grid-column: auto !important;
        flex-direction: column !important;
    }

    /* 4. 寬度全數歸一：確保所有卡片的圖片、內文容器在手機上都是 100% 滿幅 */
    .featured-card .news-img-box,
    .featured-card .news-content,
    .news-img-box,
    .news-content {
        width: 100% !important;
    }

    /* 5. 圖片比例固定，防擠壓變形 */
    .news-img {
        aspect-ratio: 16 / 10;
        height: auto;
    }

    /* 6. 卡片內襯與文字微調 */
    .featured-card .news-content,
    .news-content {
        padding: 30px 20px !important;
    }

    .news-title {
        font-size: 19px !important;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .featured-card .news-title {
        font-size: 20px !important;
    }

    .news-excerpt {
        font-size: 13.5px;
        line-height: 1.8;
        margin-bottom: 25px;
    }
    
    /* 7. 按鈕改為手機好點擊的滿版大按鈕 */
    .news-read-more {
        display: block !important;
        width: 100% !important;
        text-align: center;
        padding: 12px;
        background-color: transparent;
        border: 1px solid rgba(13, 59, 43, 0.15);
        transition: all 0.3s;
    }
    
    .news-read-more:hover {
        background-color: var(--cj-green);
        color: var(--bg-antique);
        border-color: var(--cj-green);
    }
}
/* ==========================================================================
   11. 大字版 Footer 資訊層樣式 (Fat Footer Directory)
   ========================================================================== */
.footer-directory-container {
    width: 100%;
    padding: 80px 0 100px 0; /* 留出大氣的上下呼吸空間 */
    background-color: rgba(0, 0, 0, 0.08); /* 比上方再稍微暗一點點，產生層次 */
    border-bottom: 1px solid rgba(244, 240, 234, 0.05);
}

.directory-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    /* 用三欄網格將左、中、右整齊排開 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.dir-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 統一文字點綴顏色 */
.gold-text {
    color: var(--cj-gold);
}

/* --- 左欄專屬設定 --- */
.dir-brand-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 3px;
    color: var(--bg-antique);
    margin-bottom: 10px;
}

.dir-brand-en {
    font-size: 14px;
    color: rgba(244, 240, 234, 0.5);
    letter-spacing: 1px;
    margin-bottom: 30px;
}

/* 完美復刻截圖中的小膠囊標籤 */
.dir-version-tag {
    font-size: 11px;
    color: var(--cj-gold);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 5px 16px;
    border-radius: 20px; /* 兩側圓角 */
    letter-spacing: 1px;
    font-weight: 400;
    background-color: rgba(197, 160, 89, 0.02);
}

/* --- 中、右欄小標題與裝飾線 --- */
.dir-section-title {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--cj-gold);
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* 完美復刻截圖中標題下方那條細緻的雙橫線/長橫線互動 */
.dir-divider {
    width: 35px;
    height: 1px;
    background-color: rgba(197, 160, 89, 0.4);
    margin-bottom: 25px;
}

/* --- 列表文字細緻排版 --- */
.dir-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px; /* 清爽的行距 */
}

.dir-list li {
    font-size: 13.5px;
    color: rgba(244, 240, 234, 0.65); /* 溫柔的低調白，方便長時間閱讀 */
    letter-spacing: 1.5px;
    font-weight: 300;
    line-height: 1.6;
}

/* ==========================================================================
   大字版 Footer 手機版 RWD 完美破版防護
   ========================================================================== */
@media (max-width: 1200px) {
    .directory-wrapper {
        padding: 0 40px;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-directory-container {
        padding: 60px 0;
    }

    /* 手機版打破三欄橫排，自動切換成單欄垂直向下排 */
    .directory-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 0 25px;
    }

    .dir-col {
        align-items: center; /* 手機版文字內容一律優雅置中 */
        text-align: center;
    }

    .dir-divider {
        margin: 0 auto 20px auto; /* 裝飾細線同樣置中 */
    }

    .dir-brand-en {
        margin-bottom: 20px;
    }
}
/* ==========================================================================
   10. 精簡一體化頁尾大總管樣式 (Unified Footer Styles)
   ========================================================================== */
.site-footer {
    background-color: var(--cj-green); /* 全面回歸長榮深綠 */
    color: var(--bg-antique);
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(244, 240, 234, 0.1);
}

/* 上半部感性導流區維持原樣 */
.footer-cta-container {
    padding: 100px 20px;
    text-align: center;
    background-image: radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.04) 0%, transparent 70%);
}

.cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.cta-tag {
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--cj-gold);
    display: block;
    margin-bottom: 16px;
    font-weight: 500;
}

.cta-heading {
    font-family: 'Noto Serif TC', serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.cta-prose {
    font-size: 14.5px;
    line-height: 2;
    color: rgba(244, 240, 234, 0.7);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.btn-footer-action {
    display: inline-block;
    text-decoration: none;
    background-color: var(--cj-gold);
    color: var(--cj-green);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 16px 40px;
    border: 1px solid var(--cj-gold);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-footer-action:hover {
    background-color: transparent;
    color: var(--cj-gold);
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.12);
    transform: translateY(-3px);
}

/* 下半部：三欄資訊與版權合體大箱子 */
.footer-directory-container {
    width: 100%;
    /* 🎨 微調：將背景在暗色系裡做一點點內斂的加深，視覺極具層次 */
    background-color: rgba(0, 0, 0, 0.15); 
    padding: 60px 0 30px 0; /* 縮小上下襯墊，大幅降低高度 */
}

.directory-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.dir-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gold-text { color: var(--cj-gold); }

.dir-brand-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--bg-antique);
    margin-bottom: 8px;
}

.dir-brand-en {
    font-size: 13px;
    color: rgba(244, 240, 234, 0.4);
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.dir-version-tag {
    font-size: 10.5px;
    color: var(--cj-gold);
    border: 1px solid rgba(197, 160, 89, 0.25);
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
}

.dir-section-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--cj-gold);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.dir-divider {
    width: 30px;
    height: 1px;
    background-color: rgba(197, 160, 89, 0.3);
    margin-bottom: 20px;
}

.dir-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dir-list li {
    font-size: 13px;
    color: rgba(244, 240, 234, 0.6);
    letter-spacing: 1px;
    font-weight: 300;
}

/* ✨ 新增：完美一體化的底部版權宣告橫條細節 */
.footer-unified-bottom {
    max-width: 1440px;
    margin: 50px auto 0 auto; /* 與上方資訊欄拉開 50px 的完美間距 */
    padding: 25px 80px 0 80px;
    border-top: 1px solid rgba(244, 240, 234, 0.06); /* 一條極其精細的透明分割橫線 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-unified-bottom .copyright {
    font-size: 12px;
    color: rgba(244, 240, 234, 0.35);
    letter-spacing: 0.5px;
}

.btn-scroll-top {
    text-decoration: none;
    color: var(--cj-gold);
    font-size: 12px;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.btn-scroll-top:hover {
    color: var(--bg-antique);
}

/* ==========================================================================
   一體化頁尾 手機版 RWD 完美防禦
   ========================================================================== */
@media (max-width: 768px) {
    .directory-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 24px;
    }

    .dir-col {
        align-items: center;
        text-align: center;
    }

    .dir-divider {
        margin: 0 auto 16px auto;
    }

    .footer-unified-bottom {
        flex-direction: column; /* 手機版版權與回到頂部改為上下垂直 */
        gap: 15px;
        margin-top: 40px;
        padding: 25px 24px 0 24px;
        text-align: center;
    }
}
/* ==========================================================================
   10. 精簡一體化頁尾大總管樣式 (Unified Footer Styles)
   ========================================================================== */
.site-footer {
    background-color: var(--cj-green); /* 全面回歸深長榮綠底色 */
    color: var(--bg-antique);
    width: 100%;
    position: relative;
    border-top: 1px solid rgba(244, 240, 234, 0.1);
}

/* 上半部感性導流區 */
.footer-cta-container {
    padding: 90px 20px;
    text-align: center;
    background-image: radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.04) 0%, transparent 70%);
}

.cta-inner {
    max-width: 800px;
    margin: 0 auto;
}

.cta-tag {
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--cj-gold);
    display: block;
    margin-bottom: 16px;
    font-weight: 500;
}

.cta-heading {
    font-family: 'Noto Serif TC', serif;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 20px;
    line-height: 1.4;
}

.cta-prose {
    font-size: 14.5px;
    line-height: 2;
    color: rgba(244, 240, 234, 0.7);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.btn-footer-action {
    display: inline-block;
    text-decoration: none;
    background-color: var(--cj-gold);
    color: var(--cj-green);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 2px;
    padding: 16px 40px;
    border: 1px solid var(--cj-gold);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-footer-action:hover {
    background-color: transparent;
    color: var(--cj-gold);
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.12);
    transform: translateY(-3px);
}

/* 下半部：三欄資訊與版權合體大箱子 */
.footer-directory-container {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.15); /* 暗色系細微加深，產生內斂層次 */
    padding: 60px 0 30px 0; /* 縮小上下留白，大幅降低整體高度 */
}

.directory-wrapper {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.dir-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gold-text { color: var(--cj-gold); }

/* ✨ 左欄新增：校徽圖片容器與細緻調校 */
.dir-logo-wrapper {
    margin-bottom: 20px;
}

.dir-school-logo {
    height: 48px; /* 優雅的標誌高度 */
    width: auto;
    object-fit: contain;
    opacity: 0.95;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); /* 加上細微陰影 */
}

.dir-brand-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--bg-antique);
    margin-bottom: 8px;
}

.dir-brand-en {
    font-size: 13px;
    color: rgba(244, 240, 234, 0.4);
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.dir-version-tag {
    font-size: 10.5px;
    color: var(--cj-gold);
    border: 1px solid rgba(197, 160, 89, 0.25);
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
}

/* 中、右欄標題與裝飾短線 */
.dir-section-title {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--cj-gold);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    margin-top: 5px; /* 與左欄校徽維持視覺平行線點對齊 */
}

.dir-divider {
    width: 30px;
    height: 1px;
    background-color: rgba(197, 160, 89, 0.3);
    margin-bottom: 20px;
}

.dir-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dir-list li {
    font-size: 13px;
    color: rgba(244, 240, 234, 0.6);
    letter-spacing: 1px;
    font-weight: 300;
}

/* 一體化底部版權宣告細條 */
.footer-unified-bottom {
    max-width: 1440px;
    margin: 50px auto 0 auto; 
    padding: 25px 80px 0 80px;
    border-top: 1px solid rgba(244, 240, 234, 0.06); /* 極其精細的深色系橫分割線 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-unified-bottom .copyright {
    font-size: 12px;
    color: rgba(244, 240, 234, 0.35);
    letter-spacing: 0.5px;
}

.btn-scroll-top {
    text-decoration: none;
    color: var(--cj-gold);
    font-size: 12px;
    letter-spacing: 1px;
    transition: color 0.3s;
}

.btn-scroll-top:hover {
    color: var(--bg-antique);
}

/* ==========================================================================
   一體化頁尾 手機版 RWD 完美響應與置中優化
   ========================================================================== */
@media (max-width: 768px) {
    .directory-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 24px;
    }

    .dir-col {
        align-items: center; /* 手機版內容、圖片全數垂直優雅置中 */
        text-align: center;
    }

    .dir-divider {
        margin: 0 auto 16px auto;
    }

    .footer-unified-bottom {
        flex-direction: column; 
        gap: 15px;
        margin-top: 40px;
        padding: 25px 24px 0 24px;
        text-align: center;
    }
}
/* ==========================================================================
   2.1 高奢下拉選單核心控制 (Advanced Menu dropdown) - 電腦版優先
   ========================================================================== */
.main-nav ul li {
    position: relative; /* 作為第一層下拉選單的定位基準 */
}

/* 隱藏預設的下拉箱子 */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--nav-bg); /* 與 header 同步的毛玻璃高質感古董米 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(13, 59, 43, 0.08);
    min-width: 220px;
    padding: 10px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(13, 59, 43, 0.05);
    z-index: 999;
}

/* 滑過第一層選項，展開第二層 */
.main-nav ul li.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    position: relative;
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 24px !important;
    font-size: 13.5px !important;
    color: var(--text-dark);
    text-decoration: none;
    width: 100%;
    transition: all 0.25s ease;
    letter-spacing: 1px !important;
}

.dropdown-menu li a:hover {
    background-color: var(--cj-green);
    color: var(--bg-antique) !important;
    padding-left: 30px !important;
}

/* 👑 第三層選單標準定位：預設往右側彈開 */
.nested-menu {
    position: absolute;
    top: 0;
    left: 100%; 
    background-color: var(--nav-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(13, 59, 43, 0.08);
    min-width: 220px;
    padding: 10px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(13, 59, 43, 0.05);
    z-index: 1000;
}

.nested-dropdown:hover > .nested-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 🔥【修正電腦版切邊問題】讓最右邊的「更多選項」第三層子選單全部改向左邊彈開 */
.main-nav ul li.dropdown:last-child .nested-menu {
    left: auto !important;
    right: 100% !important; /* 強制改往左邊長出來 */
    transform: translateX(-10px);
}
.main-nav ul li.dropdown:last-child .nested-dropdown:hover > .nested-menu {
    transform: translateX(0);
}


/* ==========================================================================
   2.2 手機版 RWD 下拉選單：預設收合防爆版 (Mobile UX Accordion)
   ========================================================================== */
/* ==========================================================================
   2.2 手機版 RWD 下拉選單：終極強制收合版
   ========================================================================== */
@media (max-width: 992px) {
    .main-nav {
        overflow-y: auto;
        max-height: calc(100vh - 90px); /* 確保手機版選單太長時自己內部可以滾動 */
    }
    
    .main-nav ul {
        gap: 5px !important;
        display: flex;
        flex-direction: column;
    }

    /* 📱 強制最高優先權：預設全面隱藏，不佔任何空間 */
    .main-nav ul li .dropdown-menu,
    .main-nav ul li .dropdown-menu .nested-menu {
        display: none !important; 
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background-color: rgba(13, 59, 43, 0.04) !important; /* 輕微縮排深色底 */
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid var(--cj-gold) !important; /* 琥珀金提示線 */
        padding-left: 12px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        min-width: 100% !important;
    }

    /* 🔥 當點擊後被 JS 加上 .active 類別時，才強制顯示出來 */
    .main-nav ul li .dropdown-menu.active,
    .main-nav ul li .dropdown-menu li .nested-menu.active {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 幫手機版的按鈕文字後方加上小箭頭提示 */
    .dropdown-toggle::after, .nested-toggle::after {
        content: " ▾";
        font-size: 11px;
        opacity: 0.7;
    }
    
    .dropdown-menu li a {
        padding: 12px 15px !important;
    }
}
/* ==========================================================================
   Section 4: 內頁公版與組織章程專用樣式
   ========================================================================== */
.sub-page {
    background-color: var(--bg-antique);
}

/* 內頁小主視覺 Header */
.sub-hero-section {
    padding: 140px 0 50px 0;
    background: linear-gradient(to bottom, rgba(13,59,43,0.05), transparent);
    text-align: center;
    border-bottom: 1px solid rgba(13, 59, 43, 0.05);
}

.breadcrumbs {
    font-size: 12px;
    letter-spacing: 2px;
    color: #8c8c8c;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.breadcrumbs a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.3s;
}
.breadcrumbs a:hover { color: var(--cj-gold); }
.breadcrumbs .active { color: var(--cj-green); font-weight: 600; }

.sub-page-title {
    font-family: var(--font-serif);
    font-size: 36px;
    color: var(--cj-green);
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.sub-page-subtitle {
    font-size: 14px;
    color: #666;
    letter-spacing: 1px;
}

/* 雙欄主架構 */
.charter-container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    gap: 50px;
}

/* 左邊側邊欄控制 */
.charter-sidebar {
    width: 250px;
    flex-shrink: 0;
}
.sidebar-sticky-card {
    position: sticky;
    top: 100px;
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.08);
    border-radius: 4px;
    padding: 25px 20px;
}
.sidebar-title {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--cj-green);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(13, 59, 43, 0.1);
}
.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-link {
    font-size: 13.5px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
    display: block;
}
.sidebar-link:hover, .sidebar-link.active {
    color: var(--cj-green);
    font-weight: 600;
    padding-left: 5px;
    border-left: 2px solid var(--cj-gold);
    padding-left: 10px;
}

/* 右邊法規排版 */
.charter-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.charter-section {
    border: none;
    border-top: 1px solid var(--cj-green);
    background: white;
    padding: 35px 30px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.charter-section legend {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: bold;
    color: var(--cj-green);
    padding: 0 15px;
    letter-spacing: 1px;
}

/* 條文列 */
.law-row {
    display: flex;
    padding: 18px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.law-row:last-child { border-bottom: none; }

.law-title {
    width: 80px;
    font-weight: 600;
    color: var(--cj-gold);
    font-size: 14px;
    flex-shrink: 0;
}
.law-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-dark);
}

/* 清單微調 */
.law-text ol, .law-text ul {
    margin-top: 10px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.law-text li { line-height: 1.6; }

.law-text-meta {
    font-size: 13px;
    color: #8c8c8c;
    font-style: italic;
    line-height: 1.6;
}

/* 📱 響應式手機版適配 */
@media (max-width: 768px) {
    .charter-container {
        flex-direction: column;
        gap: 30px;
    }
    .charter-sidebar {
        width: 100%;
    }
    .sidebar-sticky-card {
        position: relative;
        top: 0;
    }
    .sidebar-menu {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .sidebar-menu li {
        width: calc(50% - 5px);
    }
    .charter-section {
        padding: 20px;
    }
    .law-row {
        flex-direction: column;
        gap: 5px;
    }
}
/* ==========================================================================
   Section 5: 傑出校友遴選辦法專用樣式
   ========================================================================== */
.rules-container {
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* 頂部宗旨卡片 */
.rules-intro-card {
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.08);
    border-radius: 4px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    position: relative;
}
.sub-page-subtitle-meta {
    font-size: 13px;
    color: #8c8c8c;
    letter-spacing: 1px;
    font-style: italic;
    margin-top: 8px;
}
.intro-badge {
    position: absolute;
    top: -12px;
    left: 40px;
    background: var(--cj-gold);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 12px;
    letter-spacing: 2px;
    border-radius: 2px;
}
.intro-title {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--cj-green);
    margin-bottom: 15px;
}
.intro-text {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
}

/* 條款分隔線標題 */
.section-divider-title {
    text-align: center;
    position: relative;
    margin-bottom: 35px;
}
.section-divider-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(13, 59, 43, 0.1);
    z-index: 1;
}
.section-divider-title span {
    background: var(--bg-antique);
    padding: 0 25px;
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: bold;
    color: var(--cj-green);
    position: relative;
    z-index: 2;
    letter-spacing: 1px;
}

/* 六大領域卡片網格 */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}
.category-card {
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.05);
    border-bottom: 3px solid var(--cj-green); /* 長榮綠沉穩底線 */
    border-radius: 4px;
    padding: 30px 25px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(13, 59, 43, 0.06);
    border-bottom-color: var(--cj-gold); /* 移過去變琥珀金，極具互動質感 */
}
.category-icon {
    font-size: 28px;
    margin-bottom: 15px;
}
.category-title {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--cj-green);
    margin-bottom: 12px;
    font-weight: 700;
}
.category-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #555;
}

/* 後續條款細則排版 */
.details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.detail-card {
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.08);
    border-radius: 4px;
    padding: 30px;
}
.detail-card.full-width {
    grid-column: span 2;
}
.detail-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed rgba(13, 59, 43, 0.1);
    padding-bottom: 12px;
}
.detail-num {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: bold;
    color: var(--cj-gold);
}
.detail-title {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--cj-green);
    font-weight: 600;
}
.detail-text {
    font-size: 14.5px;
    color: var(--text-dark);
    line-height: 1.6;
}
.detail-list {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14.5px;
    color: var(--text-dark);
}
.detail-list li { line-height: 1.6; }

/* 📱 手機版 RWD 微調 */
@media (max-width: 768px) {
    .rules-intro-card { padding: 30px 20px; }
    .details-grid { grid-template-columns: 1fr; }
    .detail-card.full-width { grid-column: span 1; }
}
/* ==========================================================================
   Section 6: 歷屆校歌專用樣式 (Anthem Page)
   ========================================================================== */
.anthem-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 年代頁籤列 */
.anthem-tabs-wrapper {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 2px solid rgba(13, 59, 43, 0.08);
    padding-bottom: 15px;
}
.anthem-tab-btn {
    background: transparent;
    border: 1px solid rgba(13, 59, 43, 0.15);
    padding: 10px 20px;
    font-size: 14px;
    color: var(--text-dark);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}
.anthem-tab-btn:hover {
    border-color: var(--cj-green);
    color: var(--cj-green);
}
.anthem-tab-btn.active {
    background: var(--cj-green);
    color: var(--bg-antique);
    border-color: var(--cj-green);
    box-shadow: 0 4px 15px rgba(13, 59, 43, 0.15);
}

/* 歌詞主要卡片 */
.anthem-card {
    display: none; /* 預設隱藏，由 Tab 控制 */
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.08);
    border-radius: 4px;
    padding: 50px 40px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.02);
    text-align: center;
    animation: fadeIn 0.4s ease-in-out;
}
.anthem-card.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.anthem-meta-header {
    margin-bottom: 35px;
    border-bottom: 1px dashed rgba(13, 59, 43, 0.1);
    padding-bottom: 20px;
}
.anthem-era-tag {
    font-size: 11px;
    color: var(--cj-gold);
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.anthem-name {
    font-family: var(--font-serif);
    font-size: 26px;
    color: var(--cj-green);
    margin: 8px 0;
}
.anthem-author {
    font-size: 13px;
    color: #777;
    letter-spacing: 1px;
}

/* 歌詞本體排版 */
.anthem-lyrics-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 0;
}
.lyrics-line {
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-dark);
    letter-spacing: 2px;
}

/* 音檔徵集 Callout 卡片 */
.anthem-audio-callout {
    background: linear-gradient(135deg, rgba(13,59,43,0.03), rgba(212,175,55,0.08));
    border: 1px solid rgba(13, 59, 43, 0.1);
    border-radius: 4px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 20px;
}
.callout-icon { font-size: 32px; }
.callout-content { flex-grow: 1; }
.callout-title {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--cj-green);
    margin-bottom: 6px;
}
.callout-desc {
    font-size: 13.5px;
    color: #666;
    line-height: 1.6;
}
.btn-callout {
    background: var(--cj-green);
    color: white;
    text-decoration: none;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.3s;
}
.btn-callout:hover {
    background: var(--cj-gold);
}

/* 📱 手機版 RWD 適配 */
@media (max-width: 768px) {
    .anthem-card { padding: 30px 20px; }
    .lyrics-line { font-size: 16px; }
    .anthem-audio-callout {
        flex-direction: column;
        text-align: center;
    }
}
/* 雙欄對照排版 (日文/中文) */
.anthem-lyrics-bilingual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 20px 0;
    text-align: left;
}

.lyrics-column {
    background: rgba(13, 59, 43, 0.02);
    padding: 25px;
    border-radius: 4px;
    border-left: 2px solid var(--cj-gold);
}

.lyrics-lang-title {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--cj-green);
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(13, 59, 43, 0.1);
    letter-spacing: 1px;
}

.anthem-single-column {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lyrics-line-chinese {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--cj-green);
    letter-spacing: 2px;
    line-height: 1.8;
}

@media (max-width: 768px) {
    .anthem-lyrics-bilingual {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* ==========================================================================
   Section 7: 辦公室成員專用樣式 (純姓名典藏名冊)
   ========================================================================== */
.staff-roster-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
}

.roster-card {
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.1);
    border-radius: 4px;
    padding: 35px 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.roster-header {
    border-bottom: 2px solid var(--cj-green);
    padding-bottom: 12px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roster-count {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: bold;
    color: var(--cj-green);
    letter-spacing: 1px;
}

/* 4 欄式精緻姓名網格 */
.roster-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 20px;
}

.roster-item {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
    padding: 12px 10px;
    background: rgba(13, 59, 43, 0.02);
    border: 1px solid rgba(13, 59, 43, 0.05);
    border-radius: 3px;
    letter-spacing: 2px;
    transition: all 0.2s ease;
}

.roster-item:hover {
    background: var(--cj-green);
    color: var(--bg-antique);
    border-color: var(--cj-green);
    transform: translateY(-2px);
}

/* 📱 響應式適配 */
@media (max-width: 768px) {
    .roster-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .roster-card {
        padding: 25px 20px;
    }
}
/* 辦公室成員頁面下方的幹部導引卡片 */
.roster-cta-card {
    margin-top: 30px;
    background: linear-gradient(135deg, rgba(13, 59, 43, 0.03), rgba(212, 175, 55, 0.08));
    border: 1px dashed rgba(13, 59, 43, 0.2);
    border-radius: 4px;
    padding: 25px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: all 0.3s ease;
}

.roster-cta-card:hover {
    border-color: var(--cj-gold);
    background: linear-gradient(135deg, rgba(13, 59, 43, 0.05), rgba(212, 175, 55, 0.12));
}

.cta-title {
    font-family: var(--font-serif);
    font-size: 16px;
    color: var(--cj-green);
    margin-bottom: 4px;
}

.cta-desc {
    font-size: 13.5px;
    color: #666;
}

.cta-btn {
    background: var(--cj-green);
    color: var(--bg-antique);
    text-decoration: none;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(13, 59, 43, 0.15);
}

.cta-btn:hover {
    background: var(--cj-gold);
    color: white;
    transform: translateX(3px);
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3);
}

/* 📱 手機版微調 */
@media (max-width: 600px) {
    .roster-cta-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .cta-btn {
        width: 100%;
        text-align: center;
    }
}
/* ==========================================================================
   Section 8: 分會幹部專用樣式 (Chapters Page)
   ========================================================================== */
.chapters-container {
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.chapter-group {
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.08);
    border-radius: 4px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.chapter-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid rgba(13, 59, 43, 0.08);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.chapter-region-tag {
    font-size: 11px;
    font-weight: bold;
    color: var(--cj-gold);
    letter-spacing: 2px;
}

.chapter-title {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--cj-green);
    margin-top: 4px;
}

.chapter-status {
    font-size: 12px;
    background: rgba(13, 59, 43, 0.08);
    color: var(--cj-green);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

.chapter-status.gold {
    background: rgba(212, 175, 55, 0.15);
    color: #8a6d1c;
}

/* 幹部卡片陣列 */
.chapter-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.chapter-card {
    background: rgba(13, 59, 43, 0.015);
    border: 1px solid rgba(13, 59, 43, 0.06);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

.chapter-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13, 59, 43, 0.06);
    border-color: rgba(13, 59, 43, 0.2);
    background: white;
}

/* 會長重點 Highlights 卡片 */
.chapter-card.leader {
    background: linear-gradient(135deg, white, rgba(212, 175, 55, 0.08));
    border: 1px solid var(--cj-gold);
}

.chapter-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cj-green);
    color: var(--bg-antique);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.chapter-card.leader .chapter-avatar {
    background: var(--cj-gold);
    color: white;
}

.chapter-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chapter-role {
    font-size: 11.5px;
    color: var(--cj-gold);
    font-weight: bold;
    letter-spacing: 1px;
}

.chapter-name {
    font-family: var(--font-serif);
    font-size: 16.5px;
    color: var(--text-dark);
    font-weight: bold;
}

.chapter-meta {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* 📱 手機版 RWD 微調 */
@media (max-width: 600px) {
    .chapter-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .chapter-cards-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   Section 8: 幹部專用樣式 (早期 staff.html 純表格清單版)
   ========================================================================== */
.chapters-list-container {
    max-width: 1000px;
    margin: 50px auto;
    padding: 0 20px;
}

.chapters-list-card {
    background: white;
    border: 1px solid rgba(13, 59, 43, 0.1);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

/* 4 欄式表頭 */
.chapters-list-header {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 1.2fr 3fr;
    background: var(--cj-green);
    color: var(--bg-antique);
    padding: 15px 25px;
    font-family: var(--font-serif);
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
}

/* 列表清單本體 */
.chapters-simple-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chapter-item {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 1.2fr 3fr;
    padding: 16px 25px;
    border-bottom: 1px solid rgba(13, 59, 43, 0.06);
    align-items: center;
    font-size: 14.5px;
    transition: background 0.2s ease;
}

/* 隔行斑馬紋與懸停動效 */
.chapter-item:nth-child(even) {
    background: rgba(13, 59, 43, 0.015);
}

.chapter-item:hover {
    background: rgba(212, 175, 55, 0.08); /* 滑鼠移上去微金黃色光澤 */
}

/* 核心幹部重點底色 */
.chapter-item.highlight {
    background: rgba(212, 175, 55, 0.04);
}

/* 各欄位文字細節 */
.col-data.category {
    font-size: 12px;
    font-weight: bold;
    color: var(--cj-gold);
    letter-spacing: 1px;
}

.col-data.role {
    color: var(--text-dark);
    font-weight: 500;
}

.col-data.role.leader {
    color: var(--cj-green);
    font-weight: 700;
    font-family: var(--font-serif);
}

.col-data.role.media {
    color: var(--cj-green);
    font-weight: 700;
}

.col-data.name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: bold;
    color: var(--text-dark);
}

.col-data.expert {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* 📱 手機版 RWD 自適應 */
@media (max-width: 768px) {
    .chapters-list-header {
        display: none; /* 手機版隱藏表頭，改為單欄卡片感 */
    }
    
    .chapter-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 15px 20px;
    }
    
    .col-data.expert {
        font-size: 12.5px;
        color: #666;
        border-top: 1px dashed rgba(13, 59, 43, 0.1);
        padding-top: 6px;
        width: 100%;
    }
}
/* ==========================================================================
   Section 8: 極簡分塊幹部頁面 (Clean & Modern Grouping)
   ========================================================================== */
.clean-chapters-container {
    max-width: 960px;
    margin: 40px auto 60px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 分塊大卡片 */
.clean-group {
    background: #ffffff;
    border: 1px solid rgba(13, 59, 43, 0.08);
    border-radius: 6px;
    padding: 28px 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.clean-group-header {
    border-bottom: 1.5px solid rgba(13, 59, 43, 0.08);
    padding-bottom: 12px;
    margin-bottom: 24px;
}

.clean-group-header h2 {
    font-family: var(--font-serif);
    font-size: 20px;
    color: var(--cj-green);
    margin: 0;
    letter-spacing: 0.5px;
}

/* 網格排列 */
.clean-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.clean-grid.single {
    grid-template-columns: 1fr;
}

/* 幹部小卡片 */
.clean-card {
    background: #fafcfb;
    border: 1px solid rgba(13, 59, 43, 0.06);
    border-radius: 4px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.2s ease;
}

.clean-card:hover {
    border-color: rgba(13, 59, 43, 0.25);
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(13, 59, 43, 0.05);
}

/* 理事長 / 執行長 微強調 */
.clean-card.highlight {
    border-left: 3px solid var(--cj-gold);
}

.clean-card.media {
    border-left: 3px solid var(--cj-green);
}

/* 職位 / 姓名 / 說明 字體階層 */
.clean-card .role {
    font-size: 12px;
    font-weight: 700;
    color: var(--cj-gold);
    letter-spacing: 0.5px;
}

.clean-card.media .role,
.clean-card.highlight .role {
    color: var(--cj-green);
}

.clean-card .name {
    font-family: var(--font-serif);
    font-size: 19px;
    color: var(--text-dark);
    font-weight: 700;
    margin: 2px 0;
}

.clean-card .desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* 📱 手機版調整 */
@media (max-width: 600px) {
    .clean-group {
        padding: 20px;
    }
    .clean-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   Section 9: 活動回顧雲端連結專用樣式 (Cloud Drive Links)
   ========================================================================== */
.cloud-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
    padding: 8px 14px;
    background: rgba(13, 59, 43, 0.05);
    color: var(--cj-green);
    border: 1px solid rgba(13, 59, 43, 0.15);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    width: fit-content;
}

.cloud-link-btn:hover {
    background: var(--cj-green);
    color: var(--bg-antique);
    border-color: var(--cj-green);
    transform: translateX(3px);
}

/* 主雲端總庫按鈕（琥珀金強調） */
.cloud-link-btn.main-cloud {
    background: rgba(212, 175, 55, 0.12);
    color: #8a6d1c;
    border-color: rgba(212, 175, 55, 0.3);
}

.cloud-link-btn.main-cloud:hover {
    background: var(--cj-gold);
    color: #ffffff;
    border-color: var(--cj-gold);
}
/* Email 聯絡資訊連結樣式 */
.clean-card .email-link {
    font-size: 12.5px;
    color: #777777;
    text-decoration: none;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(13, 59, 43, 0.08);
    display: inline-block;
    transition: color 0.2s ease;
    word-break: break-all;
}

.clean-card .email-link:hover {
    color: var(--cj-green);
    text-decoration: underline;
}

.clean-card.highlight .email-link:hover {
    color: #8a6d1c; /* 金色強調邊框卡片懸停顏色 */
}
/* ==========================================================================
   Section 11: 精簡高密度傑出校友 Grid (完全防溢出、自適應版)
   ========================================================================== */
.alumni-compact-grid {
    display: grid;
    /* 自動適應最小 280px，手機上自動變單欄 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.alumni-compact-card {
    background: #ffffff;
    border: 1px solid rgba(13, 59, 43, 0.12);
    border-left: 3px solid var(--cj-gold);
    border-radius: 6px;
    padding: 16px;
    box-sizing: border-box; /* 確保 padding 不會把框框撐大 */
    width: 100%;
    overflow: hidden; /* 防止內部元素溢出框框 */
    transition: all 0.2s ease-in-out;
}

.alumni-compact-card:hover {
    box-shadow: 0 4px 12px rgba(13, 59, 43, 0.08);
    border-left-color: var(--cj-green);
}

/* 頭像與基本資料 */
.alumni-compact-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.alumni-compact-photo-box {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f2f1;
    border: 1px solid rgba(13, 59, 43, 0.15);
}

.alumni-compact-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alumni-compact-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* 關鍵：防止 flex 子元素被長文字撐破 */
}

.alumni-compact-name {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alumni-edu-tags {
    display: flex;
    flex-wrap: wrap; /* 允許標籤自動換行 */
    gap: 4px;
}

.alumni-compact-info .edu-chip {
    font-size: 11px;
    padding: 2px 6px;
    background: rgba(13, 59, 43, 0.05);
    color: #555;
    border-radius: 3px;
    white-space: nowrap;
}

/* 經歷列表：允許折行與長單詞斷行 */
.alumni-compact-exp {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}

.alumni-compact-exp li {
    margin-bottom: 6px;
    white-space: normal;      /* 允許自然換行 */
    word-break: break-word;   /* 長字串/符號自動斷行 */
    overflow-wrap: break-word;
}

.alumni-compact-exp li strong {
    color: var(--cj-green);
}
/* ==========================================================================
   Section 12: 歷屆傑出校友名錄 Grid (25位高密度防溢出樣式)
   ========================================================================== */
.alumni-history-grid {
    display: grid;
    /* 雙欄響應式佈局，手機自動轉單欄 */
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.history-card {
    background: #ffffff;
    border: 1px solid rgba(13, 59, 43, 0.12);
    border-top: 3px solid var(--cj-green);
    border-radius: 6px;
    padding: 18px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 59, 43, 0.08);
    border-top-color: var(--cj-gold);
}

/* 頂部：照片與姓名備註 */
.history-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.history-photo-box {
    width: 65px;
    height: 75px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #f0f2f1;
    border: 1px solid rgba(13, 59, 43, 0.15);
}

.history-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* 防止文字過長撐破 Flex */
}

.history-name {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.history-note {
    font-size: 12px;
    color: #666;
    background: #f5f7f6;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    word-break: break-word;
}

/* 下方：50-70 字事蹟說明 */
.history-body {
    font-size: 13.5px;
    line-height: 1.65;
    color: #333;
}

.history-achievement {
    margin: 0;
    word-break: break-word; /* 確保 50-70 字長文不會超出卡片 */
    overflow-wrap: break-word;
}

.history-achievement strong {
    color: var(--cj-green);
    font-weight: 700;
}

/* RWD 手機版維護 */
@media (max-width: 480px) {
    .alumni-history-grid {
        grid-template-columns: 1fr;
    }

    .history-card-header {
        align-items: flex-start;
    }
}
/* ==========================================================================
   Section 13: 永久會員名單專用樣式 (171位高密度矩陣 & 搜尋框)
   ========================================================================== */
.member-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 25px;
}

/* 搜尋框樣式 */
.member-search-box {
    flex-shrink: 0;
}

.member-search-box input {
    padding: 8px 16px;
    font-size: 13.5px;
    border: 1px solid rgba(13, 59, 43, 0.2);
    border-radius: 20px;
    outline: none;
    background: #ffffff;
    width: 240px;
    transition: all 0.25s ease;
}

.member-search-box input:focus {
    border-color: var(--cj-green);
    box-shadow: 0 0 0 3px rgba(13, 59, 43, 0.1);
    width: 280px;
}

/* 四欄高密度矩陣 */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 30px;
}

.member-item {
    background: #ffffff;
    border: 1px solid rgba(13, 59, 43, 0.1);
    border-left: 3px solid var(--cj-green);
    border-radius: 4px;
    padding: 12px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.member-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(13, 59, 43, 0.06);
    border-left-color: var(--cj-gold);
}

.member-name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-note {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    word-break: break-word;
}

/* 📱 響應式調整 */
@media (max-width: 600px) {
    .member-header-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .member-search-box {
        width: 100%;
    }

    .member-search-box input {
        width: 100%;
    }

    .member-search-box input:focus {
        width: 100%;
    }

    .member-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
}
/* ==========================================================================
   Section 3: 全新獨立最新消息樣式 (News Custom Block)
   ========================================================================== */
.news-custom-section {
    background-color: var(--bg-antique);
    padding: 100px 0;
    width: 100%;
}

.news-custom-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

.news-custom-header {
    margin-bottom: 40px;
}

.news-custom-tag {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--cj-gold);
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.news-custom-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 32px;
    color: var(--cj-green);
    margin: 0;
}

/* 網格三欄排列 */
.news-custom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 卡片本體 */
.news-custom-card {
    background: #ffffff;
    border: 1px solid rgba(13, 59, 43, 0.1);
    border-top: 3px solid var(--cj-green);
    border-radius: 4px;
    padding: 28px 24px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-custom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(13, 59, 43, 0.08);
}

/* 琥珀金頂邊框 */
.news-custom-card.gold-border {
    border-top-color: var(--cj-gold);
}

/* FB 藍頂邊框 */
.news-custom-card.fb-border {
    border-top-color: #1877f2;
}

.news-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.news-card-meta {
    font-size: 12px;
    color: #888888;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.news-card-meta.fb-text {
    color: #1877f2;
    font-weight: 600;
}

.news-card-heading {
    font-family: 'Noto Serif TC', serif;
    font-size: 20px;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 12px;
}

.news-card-paragraph {
    font-size: 14px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 24px;
    flex-grow: 1;
}

.news-card-btn {
    text-decoration: none;
    color: var(--cj-green);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.news-card-btn:hover {
    color: var(--cj-gold);
}

.news-card-btn.fb-btn {
    color: #1877f2;
}

/* 📱 手機版 RWD 自適應 */
@media (max-width: 992px) {
    .news-custom-wrapper {
        padding: 0 25px;
    }
    
    .news-custom-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* ==========================================================================
   Section 3: 全新獨立最新消息樣式 (含圖片樣式)
   ========================================================================== */
.news-custom-section {
    background-color: var(--bg-antique);
    padding: 100px 0;
    width: 100%;
}

.news-custom-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 80px;
}

.news-custom-header {
    margin-bottom: 40px;
}

.news-custom-tag {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--cj-gold);
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.news-custom-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 32px;
    color: var(--cj-green);
    margin: 0;
}

/* 網格三欄排列 */
.news-custom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 卡片本體 (滿版溢出隱藏，保證圖片邊角好看) */
.news-custom-card {
    background: #ffffff;
    border: 1px solid rgba(13, 59, 43, 0.1);
    border-top: 3px solid var(--cj-green);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-custom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(13, 59, 43, 0.08);
}

/* 🖼️ 封面圖片容器 */
.news-card-img-box {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background-color: #f0f2f1;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 自動裁切不拉邊變形 */
    transition: transform 0.5s ease;
}

/* FB 卡片特別處理：如果放校徽，採用置中等比例不裁切 */
.news-card-img.fb-img-contain {
    object-fit: contain;
    padding: 20px;
    background-color: #f7f9f8;
}

.news-custom-card:hover .news-card-img {
    transform: scale(1.04); /* 滑過時圖片微放大動效 */
}

/* 琥珀金頂邊框 */
.news-custom-card.gold-border {
    border-top-color: var(--cj-gold);
}

/* FB 藍頂邊框 */
.news-custom-card.fb-border {
    border-top-color: #1877f2;
}

/* 文字內容包裝盒 */
.news-card-inner {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-card-meta {
    font-size: 12px;
    color: #888888;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.news-card-meta.fb-text {
    color: #1877f2;
    font-weight: 600;
}

.news-card-heading {
    font-family: 'Noto Serif TC', serif;
    font-size: 19px;
    color: var(--text-dark);
    line-height: 1.4;
    margin-bottom: 12px;
}

.news-card-paragraph {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.8;
    margin-bottom: 20px;
    flex-grow: 1;
}

.news-card-btn {
    text-decoration: none;
    color: var(--cj-green);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.news-card-btn:hover {
    color: var(--cj-gold);
}

.news-card-btn.fb-btn {
    color: #1877f2;
}

/* 📱 手機版 RWD 自適應 */
@media (max-width: 992px) {
    .news-custom-wrapper {
        padding: 0 25px;
    }
    
    .news-custom-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
/* ==========================================
   FB Page Plugin 響應式防裁切修復
   ========================================== */

/* 1. 卡片外框重設：確保滿版且移除不必要的內距 */
.news-custom-card.fb-card-responsive {
    padding: 0 !important;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
}

/* 2. iframe 包裹容器：寬度 100% 自動強置置中 */
.fb-iframe-wrapper {
    width: 100%;
    height: 100%;
    min-height: 480px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
}

/* 3. 強制 iframe 填滿容器且防止硬撐破版 */
.fb-iframe-wrapper iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 480px;
    border: none;
    overflow: hidden;
}


/* 自訂 FB 卡片外觀 */
.news-custom-card.fb-custom-styled {
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid rgba(24, 119, 242, 0.15); /* 淡淡的 FB 品牌藍邊框 */
    border-top: 3px solid #1877f2; /* 頂部 FB 品牌色強調線 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 高質感頂部列 */
.fb-card-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

.fb-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #1877f2;
    letter-spacing: 0.5px;
}

/* 綠色/藍色呼吸燈訊號點 */
.fb-dot {
    width: 6px;
    height: 6px;
    background-color: #1877f2;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

.fb-follow-btn {
    font-size: 13px;
    color: var(--cj-green, #0d3b2b);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.fb-follow-btn:hover {
    opacity: 0.7;
}

/* iframe 容器適應 */
.fb-card-body {
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.fb-card-body iframe {
    width: 100% !important;
    height: 100% !important;
}
/* 外層固定的卡片容器 */
.fb-card-body {
    width: 100%;
    height: 440px;
    overflow: hidden;
    position: relative;
    background: #fff;
}

/* 核心：把寬度硬性定在 380px（FB 最舒適呈現寬度），讓縮放中心靠左上 */
.fb-scaler {
    width: 380px;
    height: 500px;
    transform-origin: top left;
    transition: transform 0.2s ease;
}

.fb-scaler iframe {
    width: 380px !important;
    height: 500px !important;
    border: none;
}


/* 1. 確保由最外層鎖住手機版右側溢出，不要鎖在 Header 上 */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
}



    /* 3. 抽屜選單本體 */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 預設收在右側螢幕外 */
        width: 75vw;  /* 使用 75vw 佔螢幕 75% 寬度 */
        height: 100vh;
        background-color: var(--bg-antique);
        padding: 100px 30px 40px 30px;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
        
        /* 動畫過渡：滑出時順暢 */
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
        z-index: 10000;
        
        /* 預設隱藏且不可點擊 */
        visibility: hidden;
        pointer-events: none;
    }

    /* 4. 點擊漢堡選單展開時 (checked) */
    .menu-toggle-input:checked ~ .main-nav {
        right: 0 !important; /* 順暢滑入畫面 */
        visibility: visible !important;
        pointer-events: auto !important; /* 恢復選單點擊功能 */
    }

@media (max-width: 992px) {
    /* 1. 漢堡按鈕：提升 z-index 確保永遠浮在滑出的選單最頂層 */
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        z-index: 10005 !important; /* 👈 關鍵：必須高於 .main-nav 的 10000！ */
    }

    /* 2. 手機版抽屜選單本體 */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 75vw;
        height: 100vh;
        background-color: var(--bg-antique);
        padding: 100px 30px 40px 30px;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
        z-index: 10000; /* 👈 選單層級 */
        visibility: hidden;
        pointer-events: none;
    }

    /* 3. 展開狀態 */
    .menu-toggle-input:checked ~ .main-nav {
        right: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}
/* ==========================================================================
   Footer 社群按鈕樣式 (FB / IG / Threads)
   ========================================================================== */
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.social-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%; /* 完美正圓形 */
    background-color: rgba(0, 0, 0, 0.25); /* 深色內斂半透明底 */
    border: 1px solid rgba(244, 240, 234, 0.15); /* 細微邊框 */
    color: var(--bg-antique, #F4F0EA);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 滑過時的奢華金色互動回饋 */
.social-icon-btn:hover {
    background-color: var(--cj-gold, #C5A059); /* 背景變琥珀金 */
    color: var(--cj-green, #0D3B2B);           /* 文字變深長榮綠 */
    border-color: var(--cj-gold, #C5A059);
    transform: translateY(-3px);                /* 微大幅度浮起 */
    box-shadow: 0 6px 15px rgba(197, 160, 89, 0.25);
}
/* ==========================================================================
   🚀 終極防跑版：解決手機版「右側出現大片空白」的問題
   ========================================================================== */

/* 1. 徹底鎖定最外層，強制切斷所有超出螢幕的元素 */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative; /* 👈 關鍵：能鎖住裡面亂跑的 absolute 元素 */
}

/* 2. 強制所有圖片與 iframe (包含 FB) 絕對不能超過父元素的寬度 */
img, iframe, video {
    max-width: 100% !important;
}




/* ==========================================================================
   ✨ FB Page 完美比例微縮（徹底解決右側字體與圖片被裁切問題）
   ========================================================================== */

/* 1. 卡片外框 */
.news-custom-card.fb-custom-styled {
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid rgba(24, 119, 242, 0.15);
    border-top: 3px solid #1877f2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 2. 外層固定視窗容器 */
.fb-card-body {
    width: 100%;
    height: 480px; /* 控制在卡片裡顯示的高度 */
    overflow: hidden;
    position: relative;
    background: #ffffff;
    display: flex;
    justify-content: center; /* 垂直水平置中 */
}

/* 3. 電腦版預設：500px 寬度自然呈現 */
.fb-scaler {
    width: 500px;
    height: 600px;
    transform-origin: top center; /* 以頂部中央為基準縮放 */
}

.fb-scaler iframe {
    width: 500px !important;
    height: 600px !important;
    border: none !important;
}

/* 📱 4. 手機版 RWD：關鍵 transform: scale() 縮放 */
@media (max-width: 992px) {
    .fb-card-body {
        height: 420px; /* 手機版適當的高度 */
    }

    .fb-scaler {
        /* 將 500px 的 FB 畫面，等比例縮小到 68%~72% 左右，完全嵌入手機螢幕！ */
        transform: scale(0.7);
    }
}

/* 📱 針對螢幕更窄的手機（如 iPhone SE / 360px 寬手機）做微調 */
@media (max-width: 380px) {
    .fb-card-body {
        height: 380px;
    }
    
    .fb-scaler {
        transform: scale(0.62); /* 再縮小一點，確保 100% 不會撞到右邊邊框 */
    }
}
/* ==========================================================================
   🚀 終極修復：全站防跑版 & FB 專用手機縮放 (無語法錯誤版)
   ========================================================================== */

/* 全頁防 X 軸爆框 */
html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    position: relative;
}

/* 圖片與多媒體安全防禦 */
img, video {
    max-width: 100%;
}

/* 抽屜選單與漢堡按鈕 z-index 規範 */
@media (max-width: 992px) {
    .site-header {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999 !important;
        overflow: visible !important;
    }

    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        cursor: pointer;
        z-index: 10005 !important;
    }

    .main-nav {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 75vw;
        height: 100vh;
        background-color: var(--bg-antique);
        padding: 100px 30px 40px 30px;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
        transition: right 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.4s;
        z-index: 10000;
        visibility: hidden;
        pointer-events: none;
    }

    .menu-toggle-input:checked ~ .main-nav {
        right: 0 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* Footer 社群圓形按鈕 */
.footer-social-links {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.social-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(244, 240, 234, 0.15);
    color: var(--bg-antique, #F4F0EA);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.social-icon-btn:hover {
    background-color: var(--cj-gold, #C5A059);
    color: var(--cj-green, #0D3B2B);
    border-color: var(--cj-gold, #C5A059);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(197, 160, 89, 0.25);
}

/* ==========================================================================
   ✨ FB Page 專用完美微縮（針對 500px 寬度縮小，完全不切邊）
   ========================================================================== */

.news-custom-card.fb-custom-styled {
    padding: 0 !important;
    background: #ffffff;
    border: 1px solid rgba(24, 119, 242, 0.15);
    border-top: 3px solid #1877f2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fb-card-body {
    width: 100%;
    height: 480px;
    overflow: hidden;
    position: relative;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.fb-scaler {
    width: 500px !important;
    height: 600px !important;
    transform-origin: top center !important;
}

.fb-scaler iframe {
    width: 500px !important;
    height: 600px !important;
    border: none !important;
}

/* 📱 手機版微縮：將 500px 硬縮到約 330px 寬度內 */
@media (max-width: 992px) {
    .fb-card-body {
        height: 430px !important;
    }

    .fb-scaler {
        transform: scale(0.66) !important; /* 👈 關鍵微縮比例，保證完全塞進手機卡片 */
    }
}

@media (max-width: 380px) {
    .fb-card-body {
        height: 390px !important;
    }
    
    .fb-scaler {
        transform: scale(0.58) !important;
    }
}
/* ==========================================================================
   🖥️ 電腦版導覽列（第一層橫排，子選單維持標準下拉）
   ========================================================================== */
@media (min-width: 993px) {
    .site-header {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px 80px !important;
        z-index: 1000 !important;
        overflow: visible !important;
    }

    .main-nav {
        position: static !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* 只有第一層 (direct child >) 才是橫排 */
    .main-nav > ul {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 40px !important;
        list-style: none !important;
    }

    .main-nav > ul > li > a {
        white-space: nowrap !important;
        display: inline-block !important;
        font-size: 14px !important;
        letter-spacing: 1.5px !important;
    }

    .hamburger-btn, 
    .menu-toggle-input {
        display: none !important;
    }
}
/* ==========================================================================
   新聞與社群動態區塊 (News Section & Cards)
   ========================================================================== */

/* 網格佈局：響應式 3 欄 */
.news-custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* 卡片基礎樣式 */
.news-custom-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f5;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.news-custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}



/* 圖片容器與封面圖 (共用內文第一張圖) */
.news-card-img-box {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f5f5f5;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-custom-card:hover .news-card-img {
    transform: scale(1.05);
}

/* 卡片內容區 */
.news-card-inner {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 日期與標籤 (含海報標註) */
.news-card-meta {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.poster-tag {
    background-color: #e3f2fd;
    color: #1976d2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
}

/* 標題 */
.news-card-heading {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* 50字內文摘要 */
.news-card-paragraph {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    flex-grow: 1;
}

/* 閱讀全文按鈕 */
.news-card-btn {
    display: inline-block;
    color: #1b365d; /* 長榮深藍色調 */
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.news-card-btn:hover {
    color: #d4af37; /* 質感金 */
    transform: translateX(3px);
}


/* ==========================================================================
   獨立新聞內文頁面 (news1.html 內文頁樣式)
   ========================================================================== */

.news-detail-container {
    max-width: 800px;
    margin: 7rem auto;
    padding: 0 1.5rem;
}

.article-header {
    margin-bottom: 1rem;
    text-align: center;
}

.article-title {
    font-size: 2rem;
    color: #1a1a1a;
    margin-top: 0.5rem;
    line-height: 3.1;
}

/* 第一張大圖 (卡片封面圖共用) */
.article-cover-box {
    width: 100%;
    max-height: 450px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 2.2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.article-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文章內文 */
.article-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333333;
}

.article-body p {
    margin-bottom: 1.5rem;
}

/* 活動海報專用展示區 */
.poster-box {
    margin-top: 3rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #1b365d;
}

.poster-box h3 {
    font-size: 1.1rem;
    color: #1b365d;
    margin-bottom: 1rem;
}

.poster-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
   📱 手機版專用新聞卡片（圖上文下 + 完美版面比例）
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. 網格間距優化 */
    .news-custom-grid {
        gap: 1.25rem;
        margin-top: 1rem;
    }

    /* 2. 維持圖上文下，卡片邊角圓潤化 */
    .news-custom-card {
        flex-direction: column;
        border-radius: 12px;
    }

    /* 3. 圖片高度控制在 130px，橫向寬度 100% 不變形 */
    .news-card-img-box {
        width: 100%;
        height: 130px;
        border-radius: 12px 12px 0 0;
    }

    .news-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 4. 文字邊距與間距調整 */
    .news-card-inner {
        padding: 0.85rem 1rem 1rem 1rem;
    }

    .news-card-meta {
        font-size: 0.72rem;
        margin-bottom: 0.35rem;
    }

    /* 5. 標題：最多顯示 2 行 */
    .news-card-heading {
        font-size: 0.98rem;
        line-height: 1.35;
        margin-bottom: 0.4rem;
        display: -webkit-box;
        
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 6. 摘要內容：重新放回，精準鎖定最多 2 行，補足視覺飽滿度 */
    .news-card-paragraph {
        display: -webkit-box !important;
        
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 0.82rem;
        line-height: 1.45;
        color: #666666;
        margin-bottom: 0.6rem;
    }

    /* 7. 閱讀全文連結 */
    .news-card-btn {
        font-size: 0.85rem;
    }
}
/* 電腦/平板預設標題大小 */
.article-title {
    font-size: 2.2rem;
    line-height: 1.35;
    font-weight: 700;
    color: #333333;
    margin-bottom: 0.5rem;
}

/* 📱 手機端 (螢幕寬度 768px 以下) */
@media (max-width: 768px) {
    .article-title {
        font-size: 1.4rem; /* 縮小到約 22px~24px，文字看起來舒服不壓迫 */
        line-height: 1.4;  /* 稍微拉開行高，避免多行標題擠在一起 */
    }
}
/* 活動相簿按鈕區塊 */
.album-action-box {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* 主按鈕：單場相簿 */
.btn-primary-album {
    display: inline-block;
    width: 100%;
    max-width: 360px;
    padding: 0.8rem 1.5rem;
    background-color: #8B262A; /* 長榮紅/校徽配色 */
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(139, 38, 42, 0.2);
    transition: all 0.3s ease;
}

.btn-primary-album:hover {
    background-color: #7A2B2E;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(139, 38, 42, 0.3);
}

/* 次要按鈕：全部相簿/查看更多 */
.btn-secondary-album {
    display: inline-block;
    color: #666666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.btn-secondary-album:hover {
    color: #8B262A;
    text-decoration: underline;
}

/* ==========================================
   高密度故事清單 (Compact Story List)
   ========================================== */

.stories-compact-container {
    max-width: 800px; /* 縮窄內容寬度，讓清單讀起來更舒適 */
    margin: 0 auto;
    padding: 7rem 1rem 4rem;
}

.compact-intro {
    text-align: center;
    margin-bottom: 1.5rem;
}

.compact-intro .page-title {
    font-size: 2rem;
    color: #8B262A;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.compact-intro .page-subtitle {
    font-size: 0.9rem;
    color: #666666;
}

/* 分類篩選按鈕列 (水平滑動，極省空間) */
.category-filter {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.category-filter::-webkit-scrollbar {
    display: none; /* 隱藏捲軸保持乾淨 */
}

.filter-btn {
    white-space: nowrap;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background-color: #ffffff;
    color: #555555;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn.active, .filter-btn:hover {
    background-color: #8B262A;
    color: #ffffff;
    border-color: #8B262A;
}

/* 故事清單容器 */
.story-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* 單個故事清單項目 (Row View) */
.story-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.story-item:hover {
    border-color: #8B262A;
    background-color: #fdf8f8;
    transform: translateX(3px); /* 懸浮微向右滑 */
}

.story-item-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    overflow: hidden;
}

/* 類別徽章 */
.story-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    font-weight: bold;
}

.badge-building {
    background-color: #f3e9e9;
    color: #8B262A;
}

.badge-person {
    background-color: #eaf2f8;
    color: #1b4f72;
}

/* 標題與補充資訊 */
.story-item-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow: hidden;
}

.story-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超過螢幕自動變 ... */
}

.story-item-date {
    font-size: 0.78rem;
    color: #888888;
}

.story-arrow {
    color: #ccc;
    font-size: 0.9rem;
    margin-left: 0.5rem;
    transition: color 0.2s ease;
}

.story-item:hover .story-arrow {
    color: #8B262A;
}

/* 📱 手機微調 */
@media (max-width: 480px) {
    .story-item {
        padding: 0.75rem 0.8rem;
    }
    
    .story-item-title {
        font-size: 0.95rem;
    }
}
/* 讓隱藏/顯示時切換更自然 */
.story-item {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   修正單卡片排版：靠左、佔滿整排 (參考範例)
   ========================================== */

/* 確保 compact-grid 容器恢復單欄區塊排版 */
.clean-grid.compact-grid {
    display: block !important;  /* 🛠️ 強制恢復成區塊排版 (不再用 Flex 或 Grid) */
    width: 100%;               /* 佔滿父容器寬度 */
    max-width: 100% !important; /* 確保不被限制寬度 */
    margin-left: 0;            /* 🛠️ 強制靠左 */
    margin-right: 0;
    padding: 0;                /* 移除可能的內邊距 */
}

/* 針對 compact-grid 裡的卡片進行樣式修正 */
.clean-grid.compact-grid .clean-card {
    display: block;            /* 卡片本身為區塊元素 */
    width: 100% !important;     /* 🛠️ 強制卡片橫向佔滿 100% */
    max-width: 100% !important; /* 🛠️ 強制移除任何最大寬度限制 */
    box-sizing: border-box;     /* 確保邊框和內邊距不影響寬度計算 */
    margin-bottom: 1rem;       /* 增加底部間距 (如果有第二張卡片) */
    text-align: left;           /* 🛠️ 確保文字靠左 */
}

/* 電腦寬螢幕 (992px 以上) 的特定修正 */
@media (min-width: 992px) {
    /* 🛠️ 如果你的卡片內部元素原本是 flex 且被縮小，要在這裡強制改回靠左 */
    .clean-grid.compact-grid .clean-card {
        flex: 0 1 100% !important; /* 強制基礎寬度為 100% 且不放大縮小 */
    }
}