/* ========================================================= FTY MOON 戰隊網站風格 - 簡潔頁首 CSS 基於專業電競風格設計。 ========================================================= */

/* --- 基本重設與通用樣式 --- */
body {
    font-family: 'Montserrat', 'Arial', '微軟正黑體', sans-serif; /* 設定網頁字體，優先使用 Montserrat */
    margin: 0; /* 移除瀏覽器預設邊距 */
    padding: 0; /* 移除瀏覽器預設內距 */
    background-color: #111122; /* 網站背景色，深藍色調，比原先的 #1a1a2e 更深一點，增加對比 */
    color: #e0e0e0; /* 預設文字顏色，淺灰色 */
    line-height: 1.7; /* 設定行高，讓文字更易讀 */
    font-size: 16px; /* 基礎字體大小 */
    overflow-x: hidden; /* 防止水平捲動條 */
}

.container {
    width: 92%; /* 內容區塊寬度，稍大一些 */
    max-width: 1400px; /* 最大寬度限制，稍寬一些 */
    margin: 0 auto; /* 內容區塊置中 */
    padding: 30px 0; /* 上下內距，與 header 保持一致 */
    box-sizing: border-box; /* 確保 padding 不增加寬度 */
}

/* 連結樣式 */
a {
    color: #00bcd4; /* 連結顏色，較亮的藍綠色 */
    text-decoration: none; /* 移除連結底線 */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* 平滑過渡效果，加入文字陰影過渡 */
}

a:hover {
    color: #64ffda; /* 滑鼠懸停時連結顏色變亮 */
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.6); /* 懸停時發光效果 */
}

/* 按鈕樣式 */
.btn {
    display: inline-block; /* 讓按鈕可以設定寬高 */
    background-color: #e94560; /* 按鈕背景色，紅色調 */
    color: white; /* 按鈕文字顏色 */
    padding: 12px 25px; /* 按鈕內距，稍微大一些 */
    border-radius: 5px; /* 按鈕圓角 */
    text-transform: uppercase; /* 文字大寫 */
    font-weight: bold; /* 字體加粗 */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
    margin-top: 15px; /* 上邊距 */
    border: none; /* 移除邊框 */
    cursor: pointer; /* 顯示手形指標 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 按鈕陰影 */
}

.btn:hover {
    background-color: #ff6a80; /* 滑鼠懸停時按鈕背景色變亮 */
    transform: translateY(-2px); /* 輕微向上浮動 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 陰影加深 */
}

.primary-btn {
    background-color: #00bcd4; /* 主要按鈕背景色，強調色 */
}

.primary-btn:hover {
    background-color: #64ffda; /* 主要按鈕滑鼠懸停效果 */
    box-shadow: 0 6px 12px rgba(0, 188, 212, 0.4); /* 懸停時發光陰影 */
}

/* 頁首 (Header) 樣式 - 簡潔設計 */
header {
    background-color: #0a0a1a; /* 頁首背景色，非常深的藍色 */
    position: relative;
    overflow: hidden; /* 防止背景圖溢出 */
    border-bottom: 3px solid #00bcd4; /* 底部邊框，強調色 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 頁首陰影 */
}

/* Hero Banner (包含 Logo 和文字) */
header .hero-banner {
    width: 100%;
    min-height: 350px; /* 您之前修改過的高度 */
    background-image: url('../images/ftymoon.jpg'); /* 再次確認這個路徑和檔名完全正確 */
    background-size: cover; /* 或您選擇的 cover / contain */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
    /* 請您在這行下方新增一個明顯的背景顏色，用來除錯 */
    background-color: #ff00ff !important; /* 強烈的洋紅色，用於檢查區域是否顯示 */
}

/* 也要確認這個疊加層的 z-index 是否正確，確保它在文字下方、圖片上方 */
header .hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1; /* 這個 z-index 確保它位於文字下方 */
}

/* 背景疊加層 (用於文字可讀性) */
header .hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 較淺的半透明黑色疊加層 */
    z-index: -1; /* 位於內容下方 */
}

/* 戰隊名稱樣式 */
header h1.logo-text {
    font-size: 3.8em; /* 更大的字體 */
    color: #64ffda; /* 明亮的青綠色 */
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(100, 255, 218, 0.8), 0 0 30px rgba(0, 188, 212, 0.6); /* 霓虹發光效果 */
    letter-spacing: 3px; /* 字體間距 */
    font-weight: 800; /* 更粗的字體 */
    animation: neon-pulse 2s infinite alternate; /* 霓虹脈衝動畫 */
    margin-top: 0; /* 移除頂部預設邊距 */
}

/* 霓虹脈衝動畫 */
@keyframes neon-pulse {
    from {
        text-shadow: 0 0 10px rgba(100, 255, 218, 0.8), 0 0 20px rgba(0, 188, 212, 0.6);
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 20px rgba(100, 255, 218, 1), 0 0 30px rgba(0, 188, 212, 0.8), 0 0 40px rgba(0, 188, 212, 0.6);
        transform: scale(1.02);
    }
}

/* 標語樣式 */
header p.slogan {
    font-size: 1.5em; /* 標語字體大小 */
    color: #a0a0a0; /* 標語顏色 */
    font-style: normal; /* 正常字體，不是斜體 */
    letter-spacing: 0.8px; /* 字體間距 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    margin-top: 10px;
    line-height: 1.5;
}

/* 移除或註解掉舊的 .logo 樣式 */
/* .logo { display: none; } */


/* --- 導覽列 (Navigation) 樣式 --- */
nav {
    background-color: #0f0f1d; /* 導覽列背景色 */
    padding: 15px 0; /* 上下內距 */
    border-bottom: 1px solid #333; /* 底部邊框 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); /* 陰影 */
}

nav ul {
    list-style: none; /* 移除列表項目符號 */
    padding: 0; /* 移除內距 */
    margin: 0; /* 移除邊距 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 項目水平置中 */
    flex-wrap: wrap; /* 允許項目換行 */
}

nav ul li {
    margin: 0 20px; /* 左右邊距 */
}

nav ul li a {
    display: block; /* 讓連結填滿整個 li 空間 */
    padding: 12px 20px; /* 內距 */
    color: #e0e0e0; /* 連結文字顏色 */
    font-weight: 600; /* 字體加粗 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    border-radius: 5px; /* 圓角 */
    position: relative; /* 用於底部裝飾線 */
    overflow: hidden; /* 隱藏超出部分 */
    z-index: 1; /* 確保連結文字在線條上方 */
    font-size: 1.1em; /* 字體大小 */
}

/* 導覽列連結底部裝飾線 */
nav ul li a::before {
    content: ''; /* 偽元素內容 */
    position: absolute; /* 絕對定位 */
    bottom: 0; /* 底部對齊 */
    left: 0; /* 左側對齊 */
    width: 100%; /* 寬度佔滿 */
    height: 3px; /* 線高度 */
    background-color: #e94560; /* 線顏色 */
    transform: scaleX(0); /* 初始隱藏 */
    transform-origin: bottom right; /* 變形原點 */
    transition: transform 0.3s ease-out; /* 過渡效果 */
    z-index: -1; /* 位於連結下方 */
}

nav ul li a:hover {
    color: white; /* 滑鼠懸停時文字顏色變白 */
    background-color: rgba(233, 69, 96, 0.1); /* 輕微的背景色疊加 */
}

nav ul li a:hover::before {
    transform: scaleX(1); /* 滑鼠懸停時線條完全顯示 */
    transform-origin: bottom left; /* 變形原點 */
}

nav ul li a.active { /* 當前頁面連結的樣式 */
    background-color: #00bcd4; /* 強調色背景 */
    color: white; /* 文字顏色 */
    font-weight: bold; /* 字體加粗 */
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5); /* 發光陰影 */
    transform: translateY(-2px); /* 輕微向上浮動 */
}

nav ul li a.active::before { /* 當前頁面連結的線條 */
    transform: scaleX(1); /* 始終顯示 */
    background-color: #64ffda; /* 不同的線條顏色 */
}


/* --- 主要內容區塊 (Main Content Sections) 樣式 --- */
main {
    padding: 40px 0; /* 上下內距 */
}

section {
    background-color: #0f0f1d; /* 區塊背景色 */
    margin-bottom: 30px; /* 底部邊距 */
    padding: 30px; /* 區塊內距 */
    border-radius: 8px; /* 區塊圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 區塊陰影 */
}

section h2 {
    color: #00bcd4; /* 區塊標題顏色 */
    font-size: 2.2em; /* 標題文字大小 */
    text-align: center; /* 標題置中 */
    margin-bottom: 25px; /* 底部邊距 */
    position: relative; /* 用於底部裝飾線 */
    padding-bottom: 10px; /* 為裝飾線留空間 */
}

/* 區塊標題底部裝飾線 */
section h2::after {
    content: ''; /* 偽元素內容 */
    position: absolute; /* 絕對定位 */
    left: 50%; /* 從中間開始 */
    bottom: 0; /* 底部對齊 */
    transform: translateX(-50%); /* 水平居中 */
    width: 60px; /* 線寬度 */
    height: 4px; /* 線高度 */
    background-color: #e94560; /* 線顏色 */
    border-radius: 2px; /* 線條圓角 */
}

/* 最新消息樣式 */
.news-item {
    background-color: #1a1a2e; /* 消息項目背景色 */
    padding: 20px; /* 內距 */
    margin-bottom: 20px; /* 底部邊距 */
    border-radius: 5px; /* 圓角 */
    border-left: 5px solid #00bcd4; /* 左側邊框 */
}

.news-item h3 {
    color: #64ffda; /* 消息標題顏色 */
    margin-top: 0; /* 移除頂部邊距 */
    font-size: 1.5em; /* 標題文字大小 */
}

.news-item .date {
    font-size: 0.9em; /* 日期文字大小 */
    color: #a0a0a0; /* 日期文字顏色 */
    margin-bottom: 10px; /* 底部邊距 */
}

/* 我們的核心精神樣式 (取代精選戰績) */
.spirit-item {
    background-color: #1a1a2e; /* 項目背景色 */
    padding: 20px; /* 內距 */
    margin-bottom: 20px; /* 底部邊距 */
    border-radius: 5px; /* 圓角 */
    border-left: 5px solid #00bcd4; /* 左側邊框，使用強調色 */
}

.spirit-item h3 {
    color: #64ffda; /* 項目標題顏色，使用明亮色 */
    margin-top: 0; /* 移除頂部邊距 */
    font-size: 1.5em; /* 標題文字大小 */
}

/* 行動呼籲 (Call to Action) 樣式 */
#call-to-action {
    text-align: center; /* 文字置中 */
    background-color: #0f0f1d; /* 背景色 */
    padding: 40px; /* 內距 */
}

#call-to-action h2 {
    color: #64ffda; /* 標題顏色 */
    margin-bottom: 20px; /* 底部邊距 */
}

#call-to-action p {
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 30px; /* 底部邊距 */
}

#call-to-action .btn {
    margin: 0 10px 20px; /* 按鈕之間間距 */
}

.social-links {
    margin-top: 20px; /* 頂部邊距 */
    font-size: 1.1em; /* 文字大小 */
}

.social-links a {
    margin: 0 8px; /* 左右邊距 */
    font-weight: bold; /* 字體加粗 */
}

/* 頁腳 (Footer) 樣式 */
footer {
    background-color: #0f0f1d; /* 頁腳背景色 */
    color: #a0a0a0; /* 文字顏色 */
    text-align: center; /* 文字置中 */
    padding: 20px 0; /* 上下內距 */
    border-top: 1px solid #333; /* 頂部邊框 */
    margin-top: 30px; /* 頂部邊距 */
}

/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 768px) {
    /* Header 在小螢幕下的調整 */
    header .hero-banner {
        min-height: 180px; /* 小螢幕下可以稍微縮小 Header 高度 */
        padding: 20px;
    }
    header h1.logo-text {
        font-size: 2.8em; /* 小螢幕標題縮小 */
        letter-spacing: 1px;
    }
    header p.slogan {
        font-size: 1.2em; /* 小螢幕 slogan 縮小 */
    }

    nav ul {
        flex-direction: column; /* 導覽列項目垂直堆疊 */
    }

    nav ul li {
        margin: 5px 0; /* 垂直邊距 */
    }

    section h2 {
        font-size: 1.8em; /* 區塊標題縮小 */
    }

    .btn {
        display: block; /* 按鈕在小螢幕上獨佔一行 */
        width: calc(100% - 40px); /* 寬度佔滿並留內距 */
        margin-left: auto;
        margin-right: auto;
    }
}
/* --- 戰隊生活頁面樣式 (team-life.html) --- */

#team-life-gallery .intro-text {
    text-align: center; /* 介紹文字置中 */
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 40px; /* 底部邊距 */
    color: #a0a0a0; /* 文字顏色 */
}

.gallery-grid {
    display: grid; /* 使用 CSS Grid 佈局 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 響應式網格：自動調整欄位，最小寬度280px */
    gap: 30px; /* 網格項目之間的間距 */
    padding: 20px; /* 網格容器內距 */
    background-color: #0f0f1d; /* 網格背景色 */
    border-radius: 8px; /* 圓角 */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 內部陰影效果 */
}

.gallery-item {
    background-color: #1a1a2e; /* 每個圖片項目的背景色 */
    border-radius: 8px; /* 圓角 */
    overflow: hidden; /* 確保圖片圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 項目陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
    position: relative; /* 用於圖片疊加效果 */
}

.gallery-item:hover {
    transform: translateY(-8px) scale(1.02); /* 滑鼠懸停時向上浮動並輕微放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* 陰影加深 */
}

.gallery-item img {
    width: 100%; /* 圖片寬度佔滿項目 */
    height: 200px; /* 固定圖片高度 */
    object-fit: cover; /* 圖片裁剪以填充空間，保持比例 */
    display: block; /* 移除圖片底部多餘空間 */
    transition: transform 0.5s ease; /* 圖片放大過渡效果 */
}

.gallery-item:hover img {
    transform: scale(1.1); /* 滑鼠懸停時圖片放大 */
}

.gallery-item .caption {
    padding: 15px; /* 說明文字內距 */
    font-size: 0.95em; /* 文字大小 */
    color: #e0e0e0; /* 文字顏色 */
    text-align: center; /* 文字置中 */
    background-color: #0f0f1d; /* 說明文字背景色 */
}

.more-media-prompt {
    text-align: center; /* 文字置中 */
    margin-top: 40px; /* 頂部邊距 */
    font-size: 1.2em; /* 文字大小 */
}

/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* 在小螢幕上只顯示單欄 */
        padding: 15px; /* 內距調整 */
    }

    .gallery-item img {
        height: 180px; /* 小螢幕圖片高度略為縮小 */
    }
}

/* --- 關於我們頁面樣式 (about.html) --- */

.our-values .value-item h4 {
    display: flex; /* 使用 Flexbox 讓圖示和文字對齊 */
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中，讓圖示和文字形成一個整體置中 */
    margin-bottom: 15px; /* 標題與段落間距 */
    color: #64ffda; /* 核心價值標題顏色 */
    font-size: 1.6em; /* 字體大小 */
    text-align: center; /* 圖示和文字組合的置中 */
}

.our-values .value-item h4 i {
    margin-right: 10px; /* 圖示右側與文字的間距 */
    color: #e94560; /* 圖示顏色，你可以根據喜好調整 */
    font-size: 1.1em; /* 圖示大小，可以調整以匹配文字大小 */
    flex-shrink: 0; /* 防止圖示在空間不足時縮小 */
}

#about-fty-moon .about-content {
    display: flex; /* 使用 Flexbox 佈局 */
    flex-wrap: wrap; /* 允許項目換行 */
    gap: 30px; /* 項目之間的間距 */
    align-items: center; /* 垂直置中對齊 */
    margin-bottom: 50px; /* 底部邊距 */
}

#about-fty-moon .about-text {
    flex: 2; /* 文字區塊佔兩倍空間 */
    min-width: 300px; /* 最小寬度 */
}

#about-fty-moon .about-text h3 {
    color: #64ffda; /* 標題顏色 */
    font-size: 1.8em; /* 字體大小 */
    margin-bottom: 15px; /* 底部邊距 */
}

#about-fty-moon .about-text p {
    margin-bottom: 15px; /* 段落底部邊距 */
    line-height: 1.7; /* 行高 */
}

#about-fty-moon .about-image {
    flex: 1; /* 圖片區塊佔一份空間 */
    min-width: 250px; /* 最小寬度 */
    text-align: center; /* 圖片置中 (如果圖片小於容器) */
}

#about-fty-moon .about-image img {
    max-width: 100%; /* 圖片最大寬度為容器的100% */
    height: auto; /* 高度自動調整 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 圖片陰影 */
}

/* 核心價值區塊樣式 */
.our-values {
    background-color: #0f0f1d; /* 背景色 */
    padding: 30px; /* 內距 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影 */
    margin-bottom: 50px; /* 底部邊距 */
}

.our-values h3 {
    color: #00bcd4; /* 標題顏色 */
    font-size: 2em; /* 字體大小 */
    text-align: center; /* 置中 */
    margin-bottom: 30px; /* 底部邊距 */
    position: relative;
    padding-bottom: 10px;
}

.our-values h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #e94560;
    border-radius: 2px;
}

.our-values .value-item {
    background-color: #1a1a2e; /* 項目背景色 */
    padding: 20px; /* 內距 */
    margin-bottom: 20px; /* 底部邊距 */
    border-radius: 5px; /* 圓角 */
    border-left: 5px solid #e94560; /* 左側邊框 */
}

.our-values .value-item h4 {
    color: #ff6a80; /* 標題顏色 */
    font-size: 1.6em; /* 字體大小 */
    margin-top: 0; /* 移除頂部邊距 */
    margin-bottom: 10px; /* 底部邊距 */
}

/* 考慮到你提到會有 icon，這裡為 icon 預留樣式，如果沒有實際引入 icon font 則不顯示 */
.our-values .value-item h4 i {
    margin-right: 10px; /* 圖示右側間距 */
    color: #00bcd4; /* 圖示顏色 */
}


/* 小型行動呼籲區塊樣式 */
.call-to-action-small {
    text-align: center; /* 文字置中 */
    padding: 30px; /* 內距 */
    background-color: #0f0f1d; /* 背景色 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影 */
}

.call-to-action-small p {
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 25px; /* 底部邊距 */
}

.call-to-action-small .btn {
    margin: 0 10px; /* 按鈕左右間距 */
}


/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 768px) {
    #about-fty-moon .about-content {
        flex-direction: column; /* 文字與圖片在小螢幕上垂直堆疊 */
    }

    #about-fty-moon .about-text,
    #about-fty-moon .about-image {
        flex: none; /* 移除 Flex 比例 */
        width: 100%; /* 寬度佔滿 */
    }
}

/* --- 招募資訊頁面樣式 (recruitment.html) --- */

#recruitment-info .intro-text {
    text-align: center; /* 介紹文字置中 */
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 40px; /* 底部邊距 */
    color: #a0a0a0; /* 文字顏色 */
    max-width: 800px; /* 限制寬度，避免過長 */
    margin-left: auto;
    margin-right: auto;
}

.recruitment-section {
    background-color: #0f0f1d; /* 區塊背景色 */
    padding: 30px; /* 內距 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影 */
    margin-bottom: 40px; /* 底部邊距 */
}

.recruitment-section h3 {
    color: #00bcd4; /* 標題顏色 */
    font-size: 2em; /* 字體大小 */
    text-align: center; /* 置中 */
    margin-bottom: 25px; /* 底部邊距 */
    position: relative;
    padding-bottom: 10px;
}

.recruitment-section h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #e94560;
    border-radius: 2px;
}

.requirements-list,
.steps-list {
    list-style: none; /* 移除預設列表符號 */
    padding: 0; /* 移除內距 */
    margin: 0; /* 移除邊距 */
}

.requirements-list li,
.steps-list li {
    background-color: #1a1a2e; /* 列表項目背景色 */
    padding: 15px 20px; /* 內距 */
    margin-bottom: 12px; /* 底部邊距 */
    border-left: 5px solid #64ffda; /* 左側強調邊框 */
    border-radius: 5px; /* 圓角 */
    font-size: 1.05em; /* 字體大小 */
    display: flex; /* 使用 Flexbox 讓內容和編號/符號對齊 */
    align-items: flex-start; /* 頂部對齊 */
}

/* 針對有序列表的編號樣式 */
.steps-list li::before {
    content: counter(step-counter); /* 顯示計數器 */
    counter-increment: step-counter; /* 增加計數器 */
    background-color: #e94560; /* 編號背景色 */
    color: white; /* 編號文字顏色 */
    font-weight: bold; /* 字體加粗 */
    width: 30px; /* 固定寬度 */
    height: 30px; /* 固定高度 */
    min-width: 30px; /* 最小寬度 */
    display: flex; /* Flexbox 置中編號 */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    border-radius: 50%; /* 圓形 */
    margin-right: 15px; /* 右側間距 */
    font-size: 0.9em; /* 編號字體大小 */
    flex-shrink: 0; /* 防止編號縮小 */
}

/* 重設計數器 */
.steps-list {
    counter-reset: step-counter;
}


.apply-methods p {
    margin-bottom: 15px; /* 段落底部邊距 */
}

.apply-methods ul {
    list-style: none; /* 移除列表符號 */
    padding: 0;
    margin: 0;
}

.apply-methods li {
    background-color: #1a1a2e; /* 項目背景色 */
    padding: 12px 18px; /* 內距 */
    margin-bottom: 10px; /* 底部邊距 */
    border-left: 5px solid #00bcd4; /* 左側強調邊框 */
    border-radius: 5px; /* 圓角 */
    font-size: 1.05em;
}

.apply-methods li a {
    font-weight: bold; /* 連結文字加粗 */
}

.apply-methods .note {
    font-style: italic; /* 斜體 */
    color: #a0a0a0; /* 顏色 */
    font-size: 0.95em; /* 字體大小 */
    margin-top: 25px; /* 頂部邊距 */
    text-align: center; /* 置中 */
}

/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 600px) {
    .recruitment-section {
        padding: 20px; /* 內距調整 */
    }

    .requirements-list li,
    .steps-list li,
    .apply-methods li {
        padding: 12px 15px; /* 列表項目內距調整 */
        font-size: 1em; /* 字體大小調整 */
    }

    .steps-list li::before {
        width: 25px; /* 編號寬度縮小 */
        height: 25px; /* 編號高度縮小 */
        min-width: 25px;
        font-size: 0.8em; /* 編號字體大小縮小 */
        margin-right: 10px; /* 間距縮小 */
    }
}

/* --- 最新消息頁面樣式 (news.html) --- */

#news-blog .intro-text {
    text-align: center; /* 介紹文字置中 */
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 40px; /* 底部邊距 */
    color: #a0a0a0; /* 文字顏色 */
    max-width: 800px; /* 限制寬度 */
    margin-left: auto;
    margin-right: auto;
}

.news-list {
    display: grid; /* 使用 Grid 佈局 */
    grid-template-columns: 1fr; /* 預設為單欄，方便手機顯示 */
    gap: 30px; /* 文章間距 */
    padding: 20px; /* 容器內距 */
    background-color: #0f0f1d; /* 背景色 */
    border-radius: 8px; /* 圓角 */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 內部陰影 */
}

.news-post {
    background-color: #1a1a2e; /* 每篇文章背景色 */
    padding: 25px; /* 內距 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* 陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 過渡效果 */
    border-left: 5px solid #00bcd4; /* 左側強調邊框 */
}

.news-post:hover {
    transform: translateY(-5px); /* 滑鼠懸停時向上浮動 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* 陰影加深 */
}

.news-post h3 {
    color: #64ffda; /* 文章標題顏色 */
    font-size: 1.8em; /* 字體大小 */
    margin-top: 0; /* 移除預設邊距 */
    margin-bottom: 10px; /* 底部邊距 */
}

.news-post .post-meta {
    font-size: 0.9em; /* 後設資訊字體大小 */
    color: #a0a0a0; /* 後設資訊顏色 */
    margin-bottom: 15px; /* 底部邊距 */
    font-style: italic; /* 斜體 */
}

.news-post .news-image {
    width: 100%; /* 圖片寬度佔滿 */
    height: 250px; /* 固定圖片高度 */
    object-fit: cover; /* 圖片裁剪以填充空間 */
    border-radius: 5px; /* 圖片圓角 */
    margin-bottom: 20px; /* 底部邊距 */
}

.news-post p {
    margin-bottom: 15px; /* 段落底部邊距 */
    line-height: 1.7; /* 行高 */
}

.news-post .read-more {
    display: inline-block; /* 讓連結可以有內距 */
    color: #e94560; /* 閱讀更多連結顏色 */
    font-weight: bold; /* 字體加粗 */
    margin-top: 10px; /* 頂部邊距 */
    transition: color 0.3s ease; /* 過渡效果 */
}

.news-post .read-more:hover {
    color: #ff6a80; /* 滑鼠懸停時顏色變亮 */
}

/* 分頁樣式 */
.pagination {
    text-align: center; /* 置中 */
    margin-top: 50px; /* 頂部邊距 */
    background-color: #0f0f1d; /* 背景色 */
    padding: 20px; /* 內距 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影 */
}

.pagination .page-link {
    display: inline-block; /* 讓連結可以設定寬高 */
    padding: 10px 15px; /* 內距 */
    margin: 0 5px; /* 左右間距 */
    background-color: #1a1a2e; /* 連結背景色 */
    color: #e0e0e0; /* 連結文字顏色 */
    border-radius: 5px; /* 圓角 */
    transition: background-color 0.3s ease, color 0.3s ease; /* 過渡效果 */
}

.pagination .page-link:hover {
    background-color: #e94560; /* 滑鼠懸停時背景色 */
    color: white; /* 滑鼠懸停時文字顏色 */
}

.pagination .page-link.active {
    background-color: #00bcd4; /* 當前頁面連結背景色 */
    color: white; /* 當前頁面連結文字顏色 */
    font-weight: bold; /* 字體加粗 */
    cursor: default; /* 禁用滑鼠指標變化 */
}

.pagination .page-link.active:hover {
    background-color: #00bcd4; /* 當前頁面滑鼠懸停不變色 */
}

/* 響應式設計：中等螢幕（平板） */
@media (min-width: 769px) {
    .news-list {
        grid-template-columns: repeat(2, 1fr); /* 在平板上顯示兩欄 */
    }
}

/* 響應式設計：大螢幕（桌面） */
@media (min-width: 1024px) {
    .news-list {
        grid-template-columns: repeat(3, 1fr); /* 在桌面顯示三欄 */
    }
}

/* --- 聯絡我們頁面樣式 (contact.html) --- */

#contact-us .intro-text {
    text-align: center; /* 介紹文字置中 */
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 40px; /* 底部邊距 */
    color: #a0a0a0; /* 文字顏色 */
    max-width: 800px; /* 限制寬度 */
    margin-left: auto;
    margin-right: auto;
}

.contact-grid {
    display: flex; /* 使用 Flexbox 佈局 */
    flex-wrap: wrap; /* 允許項目換行 */
    gap: 40px; /* 項目之間的間距 */
    justify-content: center; /* 水平置中對齊 */
    margin-bottom: 50px; /* 底部邊距 */
}

.contact-form-container,
.contact-info-container {
    background-color: #0f0f1d; /* 背景色 */
    padding: 35px; /* 內距 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* 陰影 */
}

.contact-form-container {
    flex: 2; /* 表單容器佔兩份空間 */
    min-width: 350px; /* 最小寬度 */
}

.contact-info-container {
    flex: 1; /* 資訊容器佔一份空間 */
    min-width: 280px; /* 最小寬度 */
}

.contact-form-container h3,
.contact-info-container h3 {
    color: #00bcd4; /* 標題顏色 */
    font-size: 1.8em; /* 字體大小 */
    margin-top: 0; /* 移除頂部邊距 */
    margin-bottom: 30px; /* 底部邊距 */
    text-align: center; /* 置中 */
    position: relative;
    padding-bottom: 10px;
}

.contact-form-container h3::after,
.contact-info-container h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #e94560;
    border-radius: 2px;
}

/* 表單樣式 */
.form-group {
    margin-bottom: 20px; /* 表單群組底部邊距 */
}

.form-group label {
    display: block; /* 讓標籤獨佔一行 */
    margin-bottom: 8px; /* 標籤底部邊距 */
    color: #e0e0e0; /* 標籤文字顏色 */
    font-size: 1.05em; /* 字體大小 */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%; /* 寬度佔滿 */
    padding: 12px; /* 內距 */
    border: 1px solid #333; /* 邊框 */
    border-radius: 5px; /* 圓角 */
    background-color: #1a1a2e; /* 背景色 */
    color: #f0f0f0; /* 文字顏色 */
    font-size: 1em; /* 字體大小 */
    outline: none; /* 移除點擊時的外框 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 過渡效果 */
    box-sizing: border-box; /* 確保 padding 不增加寬度 */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #00bcd4; /* 聚焦時邊框顏色 */
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.5); /* 聚焦時陰影 */
}

.form-group textarea {
    resize: vertical; /* 只允許垂直調整大小 */
}

.contact-form button {
    width: 100%; /* 按鈕寬度佔滿 */
    padding: 15px; /* 內距 */
    font-size: 1.1em; /* 字體大小 */
    margin-top: 10px; /* 頂部邊距 */
}

/* 其他聯絡方式樣式 */
.contact-item {
    margin-bottom: 25px; /* 項目底部邊距 */
}

.contact-item h4 {
    color: #64ffda; /* 標題顏色 */
    font-size: 1.5em; /* 字體大小 */
    margin-top: 0; /* 移除頂部邊距 */
    margin-bottom: 10px; /* 底部邊距 */
    display: flex; /* 使用 Flexbox 讓圖示和文字對齊 */
    align-items: center; /* 垂直置中 */
}

/* 圖示預留樣式 (如果使用 Font Awesome 等) */
.contact-item h4 i {
    margin-right: 12px; /* 圖示右側間距 */
    color: #e94560; /* 圖示顏色 */
    font-size: 1.1em; /* 圖示大小 */
}

.contact-item p {
    margin-bottom: 5px; /* 段落底部邊距 */
    font-size: 1em; /* 字體大小 */
}

.contact-item a {
    color: #00bcd4; /* 連結顏色 */
    text-decoration: none; /* 移除底線 */
    transition: color 0.3s ease; /* 過渡效果 */
}

.contact-item a:hover {
    color: #64ffda; /* 滑鼠懸停時顏色變亮 */
    text-decoration: underline; /* 滑鼠懸停時顯示底線 */
}

.social-links-contact {
    list-style: none; /* 移除列表符號 */
    padding: 0; /* 移除內距 */
    display: flex; /* 使用 Flexbox 水平排列 */
    flex-wrap: wrap; /* 允許換行 */
    gap: 15px; /* 項目間距 */
    margin-top: 15px; /* 頂部邊距 */
}

.social-links-contact li {
    background-color: #1a1a2e; /* 背景色 */
    border-radius: 5px; /* 圓角 */
    transition: background-color 0.3s ease; /* 過渡效果 */
}

.social-links-contact li:hover {
    background-color: #e94560; /* 滑鼠懸停時背景色 */
}

.social-links-contact li a {
    display: block; /* 讓連結佔滿整個列表項目 */
    padding: 10px 15px; /* 內距 */
    color: white; /* 文字顏色 */
    font-weight: bold; /* 字體加粗 */
    text-decoration: none; /* 移除底線 */
}

/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column; /* 在小螢幕上垂直堆疊 */
    }

    .contact-form-container,
    .contact-info-container {
        flex: none; /* 移除 Flex 比例 */
        width: 100%; /* 寬度佔滿 */
        min-width: unset; /* 移除最小寬度限制 */
    }

    .contact-form-container,
    .contact-info-container {
        padding: 25px; /* 內距調整 */
    }
}

/* --- 多媒體中心頁面樣式 (media.html) --- */

#media-center .intro-text {
    text-align: center; /* 介紹文字置中 */
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 40px; /* 底部邊距 */
    color: #a0a0a0; /* 文字顏色 */
    max-width: 800px; /* 限制寬度 */
    margin-left: auto;
    margin-right: auto;
}

.media-category {
    background-color: #0f0f1d; /* 區塊背景色 */
    padding: 30px; /* 內距 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影 */
    margin-bottom: 50px; /* 底部邊距 */
}

.media-category h3 {
    color: #00bcd4; /* 標題顏色 */
    font-size: 2em; /* 字體大小 */
    text-align: center; /* 置中 */
    margin-bottom: 30px; /* 底部邊距 */
    position: relative;
    padding-bottom: 10px;
}

.media-category h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #e94560;
    border-radius: 2px;
}

/* 圖片畫廊網格樣式 (與 team-life.html 相似) */
.image-gallery-grid {
    display: grid; /* 使用 CSS Grid 佈局 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 響應式網格 */
    gap: 30px; /* 網格項目間距 */
    padding: 20px; /* 網格容器內距 */
    background-color: #151525; /* 背景色 */
    border-radius: 8px; /* 圓角 */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); /* 內部陰影 */
}

/* 圖片畫廊項目樣式 (與 team-life.html 相似) */
.image-gallery-grid .gallery-item {
    background-color: #1a1a2e; /* 每個圖片項目的背景色 */
    border-radius: 8px; /* 圓角 */
    overflow: hidden; /* 確保圖片圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 項目陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
}

.image-gallery-grid .gallery-item:hover {
    transform: translateY(-8px) scale(1.02); /* 滑鼠懸停時向上浮動並輕微放大 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* 陰影加深 */
}

.image-gallery-grid .gallery-item img {
    width: 100%; /* 圖片寬度佔滿項目 */
    height: 200px; /* 固定圖片高度 */
    object-fit: cover; /* 圖片裁剪以填充空間，保持比例 */
    display: block; /* 移除圖片底部多餘空間 */
    transition: transform 0.5s ease; /* 圖片放大過渡效果 */
}

.image-gallery-grid .gallery-item:hover img {
    transform: scale(1.1); /* 滑鼠懸停時圖片放大 */
}

.image-gallery-grid .gallery-item .caption {
    padding: 15px; /* 說明文字內距 */
    font-size: 0.95em; /* 文字大小 */
    color: #e0e0e0; /* 文字顏色 */
    text-align: center; /* 文字置中 */
    background-color: #0f0f1d; /* 說明文字背景色 */
}

/* 影片畫廊網格樣式 */
.video-gallery-grid {
    display: grid; /* 使用 CSS Grid 佈局 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* 響應式網格，影片最小寬度較大 */
    gap: 30px; /* 網格項目間距 */
    padding: 20px; /* 網格容器內距 */
    background-color: #151525; /* 背景色 */
    border-radius: 8px; /* 圓角 */
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); /* 內部陰影 */
}

.video-item {
    background-color: #1a1a2e; /* 每個影片項目的背景色 */
    border-radius: 8px; /* 圓角 */
    overflow: hidden; /* 確保內容不溢出 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 項目陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
    position: relative; /* 為了影片的響應式高度 */
    padding-bottom: 56.25%; /* 16:9 比例的影片高度 (56.25% of width) */
    height: 0; /* 配合 padding-bottom */
}

.video-item:hover {
    transform: translateY(-5px); /* 滑鼠懸停時向上浮動 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); /* 陰影加深 */
}

.video-item iframe {
    position: absolute; /* 相對於父元素定位 */
    top: 0;
    left: 0;
    width: 100%; /* 寬度佔滿父元素 */
    height: 100%; /* 高度佔滿父元素 */
    border: none; /* 移除邊框 */
    border-radius: 8px; /* 圓角 */
}

.video-item .caption {
    padding: 15px; /* 說明文字內距 */
    font-size: 0.95em; /* 文字大小 */
    color: #e0e0e0; /* 文字顏色 */
    text-align: center; /* 文字置中 */
    background-color: #0f0f1d; /* 說明文字背景色 */
    /* 這裡為了響應式影片，caption 會在影片外面，所以不需要 position absolute */
    position: static;
    padding-top: 10px; /* 讓影片和字幕有間距 */
}

.more-content-prompt {
    text-align: center; /* 文字置中 */
    margin-top: 40px; /* 頂部邊距 */
    font-size: 1.2em; /* 文字大小 */
}

.more-content-prompt a {
    color: #00bcd4; /* 連結顏色 */
    text-decoration: none; /* 移除底線 */
    transition: color 0.3s ease; /* 過渡效果 */
}

.more-content-prompt a:hover {
    color: #64ffda; /* 滑鼠懸停時顏色變亮 */
    text-decoration: underline; /* 滑鼠懸停時顯示底線 */
}


/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 600px) {
    .image-gallery-grid,
    .video-gallery-grid {
        grid-template-columns: 1fr; /* 在小螢幕上只顯示單欄 */
        padding: 15px; /* 內距調整 */
    }

    .image-gallery-grid .gallery-item img {
        height: 180px; /* 小螢幕圖片高度略為縮小 */
    }

    /* 影片的響應式調整主要靠 padding-bottom 和 position absolute */
    .video-item {
        padding-bottom: 56.25%; /* 保持 16:9 比例 */
    }
}

/* --- JavaScript 捲動漸顯動畫樣式 --- */

/* 初始狀態：元素不可見且向下偏移 */
.reveal {
    position: relative; /* 確保 transform 基於自身位置 */
    opacity: 0; /* 初始不可見 */
    transform: translateY(50px); /* 初始向下偏移 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* 平滑過渡 */
}

/* 激活狀態：元素可見且回到原位 */
.reveal.active {
    opacity: 1; /* 完全可見 */
    transform: translateY(0); /* 回到原始位置 */
}

/* 新增：文字置中樣式 */
.text-center {
    text-align: center;
}



























/* =========================================================
    FTY MOON 戰隊網站風格 - 融合版 CSS (美化後)
    基於專業電競風格設計，並整合使用者提供的頁面專屬樣式。
    ========================================================= */

/* --- 基本重設與通用樣式 --- */
body {
    font-family: 'Montserrat', 'Arial', '微軟正黑體', sans-serif; /* 使用更具現代感的 Montserrat */
    margin: 0;
    padding: 0;
    background-color: #0b0b1a; /* 更深的背景色，提供更沉浸的電競氛圍 */
    color: #e0e0e0; /* 主要文字顏色 */
    line-height: 1.8; /* 增加行高，提升長篇閱讀舒適度 */
    font-size: 17px; /* 略微增大基準字體大小，提高可讀性 */
    overflow-x: hidden; /* 防止水平滾動條 */
}

/* 確保圖片文件已存在於相對路徑 'images/' */
/* 例如: images/FTYMOON.jpg, images/bg_pattern.png (需自行準備或移除) */

/* 確保容器寬度與內邊距 */
.container {
    width: 90%; /* 略微收窄，預留更多邊緣空間 */
    max-width: 1440px; /* 擴大最大寬度，適應更大螢幕 */
    margin: 0 auto;
    padding: 40px 0; /* 增加上下內距 */
    box-sizing: border-box; /* 確保 padding 不增加寬度 */
}

/* 區塊內邊距 */
.section-padding {
    padding: 100px 0; /* 增加區塊間距，使內容區分更明顯 */
    position: relative; /* 為內部元素定位準備 */
}

/* 連結樣式 */
a {
    color: #00bcd4; /* 青色調 */
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease; /* 增加文字陰影和位移過渡 */
}

a:hover {
    color: #64ffda; /* 亮青色 */
    text-shadow: 0 0 12px rgba(100, 255, 218, 0.8); /* 更明顯的發光效果 */
    transform: translateY(-2px); /* 輕微上浮效果 */
}

/* 按鈕樣式 (重新定義以符合電競風格) */
.btn {
    display: inline-flex; /* 使用 flexbox 確保內容垂直居中 */
    align-items: center;
    justify-content: center;
    background-color: #e94560; /* 亮紅色 */
    color: white;
    padding: 16px 40px; /* 增大按鈕 */
    border-radius: 10px; /* 圓角更明顯 */
    text-transform: uppercase;
    font-weight: 700; /* 加粗 */
    letter-spacing: 1.5px; /* 增加字距 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑彈性的過渡 */
    border: none; /* 無邊框 */
    cursor: pointer;
    position: relative;
    overflow: hidden; /* 用於光帶效果 */
    z-index: 1;
    font-size: 1.15em; /* 調整字體大小 */
    box-shadow: 0 5px 20px rgba(233, 69, 96, 0.3); /* 初始陰影 */
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); /* 更亮的光帶 */
    transition: all 0.6s ease; /* 光帶滑動更慢更平滑 */
    z-index: -1;
}

.btn:hover {
    background-color: #ff6a80; /* 淺紅色 */
    transform: translateY(-5px); /* 更明顯的上浮 */
    box-shadow: 0 12px 30px rgba(233, 69, 96, 0.6); /* 更明顯的陰影 */
}

.btn:hover::before {
    left: 100%; /* 光帶滑過效果 */
}

.primary-btn {
    background-color: #00bcd4; /* 青色強調色 */
    box-shadow: 0 5px 20px rgba(0, 188, 212, 0.3);
}

.primary-btn:hover {
    background-color: #64ffda; /* 亮青色 */
    box-shadow: 0 12px 30px rgba(0, 188, 212, 0.6);
}

/* 區塊通用標題樣式 (統一 `section h2` 和其他 `h3` 標題樣式) */
.section-title {
    color: white; /* 標題主要顏色 */
    font-size: 3.5em; /* 更大的大標題字體 */
    text-align: center;
    margin-bottom: 70px; /* 底部間距 */
    position: relative;
    font-weight: 800; /* 更粗 */
    text-transform: uppercase; /* 大寫 */
    letter-spacing: 3px; /* 更大的字距 */
    text-shadow: 0 0 20px rgba(0, 188, 212, 0.5), 0 0 30px rgba(0, 188, 212, 0.3); /* 更明顯的發光 */
}

.section-title::after {
    content: '';
    display: block;
    width: 120px; /* 下劃線長度 */
    height: 6px; /* 下劃線粗細 */
    background-color: #e94560; /* 強調色 */
    margin: 25px auto 0; /* 置中並與標題拉開距離 */
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.8); /* 下劃線發光更強 */
    transform: scaleX(0); /* 初始隱藏 */
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); /* 更平滑且有彈性的動畫 */
}

/* 激活狀態 (可用於滾動動畫) */
.section-title.active::after {
    transform: scaleX(1); /* 完整顯示 */
}

/* 你為各頁面 h3 寫的標題樣式，我將其整合為一個可重複使用的 class，並應用在需要的地方。 */
/* 例如: <h3 class="subsection-title"> */
.subsection-title {
    color: white; /* 標題主要顏色 */
    font-size: 2.5em; /* 字體大小 */
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 188, 212, 0.3); /* 輕微發光 */
}

.subsection-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70px; /* 略微加長 */
    height: 4px; /* 略微加粗 */
    background-color: #00bcd4; /* 青色強調 */
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.5); /* 發光 */
}

/* 文字置中通用樣式 */
.text-center {
    text-align: center;
}

/* 介紹文字通用樣式 */
.intro-text {
    text-align: center;
    font-size: 1.15em;
    margin-bottom: 60px; /* 增加底部間距 */
    color: #a0a0a0;
    max-width: 900px; /* 限制寬度，避免過長影響閱讀 */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* --- 頁首 (Header) 樣式 --- */
header {
    background-color: #0a0a1a; /* 更深色的背景，為背景圖留出空間 */
    position: relative;
    overflow: hidden; /* 防止內容溢出 */
    border-bottom: 4px solid #00bcd4; /* 底部強調線更粗 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); /* 更明顯的陰影 */
}

/* Hero Banner - 調整為純色背景並移除 Logo 背景圖 */
header .hero-banner {
    width: 100%;
    min-height: 550px; /* 增加高度，給 Logo 和文字更多空間 */
    background-color: #0d0d1e; /* 純色背景 */
    /* background-image 移除 */
    /* background-size, background-position, background-repeat 移除 */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1; /* 確保內容在疊加層之上 */
    padding: 20px; /* 內邊距 */
    box-sizing: border-box;

    /* 為 Logo 和文字預留空間 */
    padding-left: 200px; /* 根據 Logo 寬度調整 */
    padding-right: 200px;
}

/* 背景疊加層 (用於文字可讀性) - 保持不變，因為純色背景也需要 */
header .hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 輕微透明疊加層，增加深度 */
    z-index: 0; /* 確保在 Logo 和文字之下 */
}

/* Logo 圖片樣式 (新增或更新) */
.header-logo {
    position: absolute; /* 絕對定位，相對於 .hero-banner */
    top: 60px; /* 從頂部定位 */
    left: 80px; /* 從左側定位 */
    width: 300px; /* Logo 圖片的寬度 */
    height: auto;
    transform: rotate(-10deg); /* 輕微逆時針旋轉 */
    z-index: 2; /* 確保 Logo 在背景和文字之上 */
    opacity: 0.95; /* 輕微透明，使其融入背景 */
    filter: drop-shadow(0 0 20px rgba(0, 188, 212, 0.7)); /* 強烈發光效果 */
    transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.header-logo:hover {
    transform: rotate(-5deg) scale(1.05); /* 懸停時輕微回正並放大 */
    opacity: 1;
    filter: drop-shadow(0 0 35px rgba(0, 188, 212, 1)); /* 發光更亮 */
}

/* 標題動畫效果 */
header h1 {
    font-size: 5em; /* 更大的標題 */
    color: white; /* 標題顏色為白色 */
    margin-bottom: 20px; /* 增加與標語間距 */
    text-shadow: 0 0 25px rgba(100, 255, 218, 0.9), 0 0 40px rgba(0, 188, 212, 0.7); /* 更強烈的霓虹光暈 */
    letter-spacing: 5px; /* 增加字距 */
    font-weight: 900; /* 更粗的字體 */
    animation: neon-pulse 2.5s infinite alternate ease-in-out; /* 霓虹跳動動畫，更流暢 */
    position: relative; /* 確保在 Logo 之上 */
    z-index: 3;
}

@keyframes neon-pulse {
    from {
        text-shadow: 0 0 15px rgba(100, 255, 218, 0.8), 0 0 25px rgba(0, 188, 212, 0.6);
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 25px rgba(100, 255, 218, 1), 0 0 40px rgba(0, 188, 212, 0.8), 0 0 60px rgba(0, 188, 212, 0.7);
        transform: scale(1.03); /* 輕微放大 */
    }
}

header p.slogan {
    font-size: 1.8em; /* 更大的 slogan */
    color: #a0a0a0;
    font-style: normal; /* 移除斜體 */
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
    margin-top: 15px;
    line-height: 1.6;
    position: relative; /* 確保在 Logo 之上 */
    z-index: 3;
}

/* 移除或隱藏舊的 .logo 樣式，因為 Logo 現在是單獨的 img */
.logo {
    display: none !important; /* 確保徹底隱藏 */
}

/* --- 導覽列 (Navigation) 樣式 --- */
nav {
    background-color: #0c0c1b; /* 深藍色，比 header 略淺 */
    padding: 18px 0; /* 增加內距 */
    border-bottom: 2px solid #00bcd4; /* 強調線 */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); /* 更明顯的陰影 */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px; /* 增大導覽項目間距 */
}

nav ul li a {
    display: block;
    padding: 14px 25px; /* 增大點擊區域 */
    color: #e0e0e0;
    font-weight: 700; /* 加粗 */
    transition: all 0.4s ease; /* 更平滑的過渡 */
    border-radius: 8px; /* 圓角 */
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-size: 1.15em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 輕微文字陰影 */
}

nav ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px; /* 更粗的光帶 */
    background-color: #e94560; /* 強調色 */
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.4s ease-out; /* 更慢的光帶動畫 */
    z-index: -1;
}

nav ul li a:hover {
    color: white;
    background-color: rgba(233, 69, 96, 0.15); /* 更明顯的背景色 */
    transform: translateY(-3px); /* 輕微上浮 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 文字發光 */
}

nav ul li a:hover::before {
    transform: scaleX(1); /* 光帶滑入 */
    transform-origin: bottom left;
}

/* 當前頁面 active 狀態 */
nav ul li a.active {
    background-color: #00bcd4; /* 青色強調色 */
    color: white;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.7); /* 更明顯的發光效果 */
    transform: translateY(-2px); /* 輕微上浮 */
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
}

nav ul li a.active::before {
    transform: scaleX(1); /* 確保底部線條顯示 */
    background-color: #64ffda; /* 活性狀態下更亮的線條 */
}


/* --- 主要內容區塊 (Main Content Sections) 樣式 --- */
main {
    padding-top: 60px; /* 頂部間距 */
    padding-bottom: 60px; /* 底部間距 */
}

section {
    background-color: #0f0f1d; /* 深藍色 */
    margin-bottom: 70px; /* 底部間距 */
    padding: 50px; /* 區塊內距 */
    border-radius: 15px; /* 更大的圓角 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* 更強烈的陰影 */
    border: 1px solid rgba(0, 188, 212, 0.3); /* 輕微邊框更明顯 */
    position: relative;
    overflow: hidden; /* 防止內部元素溢出 */
}

/* 輕微的背景紋理 (可選，需要圖片) */
section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg_pattern.png'); /* 小紋理圖，請替換為你的圖片或移除 */
    background-repeat: repeat;
    opacity: 0.03; /* 更輕微的透明度 */
    z-index: 0;
}
section > * { /* 確保內容在紋理之上 */
    position: relative;
    z-index: 1;
}


/* --- 通用網格佈局 (用於新聞、媒體、成員等卡片) --- */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 響應式網格，最小寬度略大 */
    gap: 35px; /* 網格間距 */
    padding: 30px; /* 網格容器內距 */
    background-color: #0c0c1b; /* 網格背景色 */
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8); /* 內部陰影更強烈 */
    border: 1px solid rgba(0, 188, 212, 0.15); /* 輕微邊框 */
}

/* 通用卡片樣式 */
.card {
    background-color: #1a1a2e; /* 卡片背景色 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    border: 1px solid rgba(0, 188, 212, 0.2); /* 輕微邊框 */
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-12px) scale(1.03); /* 更明顯的上浮和放大 */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 188, 212, 0.5); /* 更明顯的陰影和發光 */
    border-color: #64ffda; /* 邊框亮起 */
}

.card-image {
    width: 100%;
    height: 250px; /* 統一圖片高度 */
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease; /* 更平滑的圖片過渡 */
}

.card:hover .card-image {
    transform: scale(1.1); /* 圖片輕微放大 */
}

.card-content {
    padding: 25px;
    flex-grow: 1; /* 讓內容填充剩餘空間 */
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    color: #64ffda; /* 亮青色 */
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.3); /* 輕微發光 */
}

.card-content .date, .card-content .meta-info {
    font-size: 0.95em;
    color: #a0a0a0;
    margin-bottom: 18px;
    font-style: italic;
    opacity: 0.8;
}

.card-content p {
    font-size: 1.05em;
    color: #e0e0e0;
    margin-bottom: 20px;
    line-height: 1.7;
}

.card-content .read-more {
    margin-top: auto; /* 將閱讀更多推到底部 */
    color: #e94560; /* 紅色 */
    font-weight: bold;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    align-self: flex-start; /* 讓連結靠左 */
    font-size: 1.05em;
}

.card-content .read-more:hover {
    color: #ff6a80;
    text-decoration: underline;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* 戰隊核心精神（原精選戰績） */
.spirit-item {
    background-color: #1a1a2e;
    padding: 30px;
    margin-bottom: 25px; /* 列表式樣式 */
    border-radius: 10px;
    border-left: 7px solid #e94560; /* 紅色強調邊框更粗 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.spirit-item:hover {
    background-color: #2a2a3e;
    transform: translateX(8px); /* 更明顯的位移 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: #ff6a80; /* 邊框變亮 */
}

.spirit-item h3 {
    color: #64ffda; /* 項目標題顏色，使用明亮色 */
    margin-top: 0;
    font-size: 1.7em; /* 標題文字大小 */
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* --- 關於我們頁面樣式 (about.html) --- */

.our-values .value-item h4 {
    color: #ff6a80; /* 標題顏色 */
    font-size: 1.7em; /* 字體大小 */
    margin-top: 0;
    margin-bottom: 12px;
}

.our-values .value-item h4 i {
    margin-right: 12px; /* 圖示右側與文字的間距 */
    color: #e94560; /* 圖示顏色，你可以根據喜好調整 */
    font-size: 1.2em; /* 圖示大小，可以調整以匹配文字大小 */
    flex-shrink: 0;
}

#about-fty-moon .about-content {
    display: flex; /* 使用 Flexbox 佈局 */
    flex-wrap: wrap; /* 允許項目換行 */
    gap: 40px; /* 項目之間的間距 */
    align-items: center; /* 垂直置中對齊 */
    margin-bottom: 60px; /* 底部邊距 */
}

#about-fty-moon .about-text {
    flex: 2; /* 文字區塊佔兩倍空間 */
    min-width: 350px; /* 最小寬度 */
}

#about-fty-moon .about-text h3 {
    color: #64ffda; /* 標題顏色 */
    font-size: 2em; /* 字體大小 */
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#about-fty-moon .about-text p {
    margin-bottom: 18px;
    line-height: 1.7;
    color: #d0d0d0;
}

#about-fty-moon .about-image {
    flex: 1; /* 圖片區塊佔一份空間 */
    min-width: 300px; /* 最小寬度 */
    text-align: center;
}

#about-fty-moon .about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* 圓角 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* 圖片陰影 */
    border: 1px solid rgba(0, 188, 212, 0.15); /* 輕微邊框 */
    transition: transform 0.3s ease;
}
#about-fty-moon .about-image img:hover {
    transform: scale(1.02); /* 輕微放大 */
}


/* 核心價值區塊樣式 (你的 our-values) */
.our-values {
    background-color: #0f0f1d;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 70px;
    border: 1px solid rgba(233, 69, 96, 0.3); /* 輕微邊框更明顯 */
}

.our-values h3 { /* 你的 h3 樣式 */
    color: white; /* 統一顏色 */
    font-size: 2.8em; /* 調整大小 */
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* 輕微發光 */
}
.our-values h3::after { /* 下劃線 */
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 90px; /* 略微加長 */
    height: 5px; /* 略微加粗 */
    background-color: #00bcd4; /* 青色強調 */
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(0, 188, 212, 0.6); /* 發光 */
}


.our-values .value-item {
    background-color: #1a1a2e;
    padding: 30px;
    margin-bottom: 25px;
    border-radius: 10px;
    border-left: 7px solid #64ffda; /* 青色強調邊框更粗 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}

.our-values .value-item:hover {
    background-color: #2a2a3e;
    transform: translateY(-5px); /* 輕微上浮 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    border-color: #00bcd4; /* 邊框變亮 */
}

.our-values .value-item h4 {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    color: white; /* 統一顏色 */
    font-size: 2em; /* 調整大小 */
    text-align: left;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.our-values .value-item h4 i {
    margin-right: 18px; /* 增大間距 */
    color: #e94560; /* 圖示顏色 */
    font-size: 1.5em; /* 增大圖示 */
    min-width: 40px; /* 固定圖標寬度 */
    text-align: center;
    padding-top: 2px;
}
.our-values .value-item p {
    color: #d0d0d0;
    line-height: 1.7;
    font-size: 1.05em;
}

/* 小型行動呼籲區塊樣式 (你的 call-to-action-small) */
.call-to-action-small {
    text-align: center;
    padding: 50px; /* 增加內距 */
    background-color: #0f0f1d;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.25);
    margin-top: 70px;
}

.call-to-action-small p {
    font-size: 1.3em;
    margin-bottom: 40px; /* 增加底部間距 */
    color: #d0d0d0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.call-to-action-small .btn {
    margin: 0 20px; /* 增加按鈕間距 */
}

/* --- 招募資訊頁面樣式 (recruitment.html) --- */

#recruitment-info .intro-text {
    text-align: center;
    font-size: 1.25em; /* 稍為增大字體 */
    margin-bottom: 60px; /* 增加底部間距 */
    color: #a0a0a0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.recruitment-section {
    background-color: #0f0f1d;
    padding: 50px; /* 增加內距 */
    border-radius: 15px; /* 更大的圓角 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 70px; /* 增加底部間距 */
    border: 1px solid rgba(0, 188, 212, 0.3); /* 輕微邊框更明顯 */
    position: relative;
    overflow: hidden; /* 防止內部元素溢出 */
}

.recruitment-section h3 {
    color: #00bcd4;
    font-size: 2.8em; /* 增大為更醒目的區塊標題 */
    text-align: center;
    margin-bottom: 40px; /* 標題與內容間距 */
    position: relative;
    padding-bottom: 15px;
    font-weight: 800; /* 更粗 */
    letter-spacing: 1.5px;
    text-transform: uppercase; /* 大寫 */
    text-shadow: 0 0 15px rgba(0, 188, 212, 0.5), 0 0 25px rgba(0, 188, 212, 0.3); /* 強烈發光 */
}

.recruitment-section h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 90px; /* 下劃線長度 */
    height: 6px; /* 下劃線粗細 */
    background-color: #e94560;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(233, 69, 96, 0.8); /* 下劃線發光更強 */
}


/* 招募區塊的整體網格佈局 */
.recruitment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 略微增大最小寬度 */
    gap: 40px; /* 增大項目之間的間距 */
    padding: 30px; /* 內邊距 */
    background-color: #0d0d1b; /* 略淺於 Section 的背景色，增加層次感 */
    border-radius: 15px;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.7); /* 更強烈的內陰影，營造深邃感 */
    border: 1px solid rgba(0, 188, 212, 0.1);
}

/* 單個招募條件或步驟的卡片樣式 */
.recruitment-grid .recruitment-item {
    background-color: #1a1a2e; /* 卡片背景色 */
    padding: 35px; /* 增大內距 */
    border-radius: 15px; /* 更大的圓角 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 188, 212, 0.25); /* 更強烈的陰影和發光 */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑彈性的過渡效果 */
    border-left: 8px solid #e94560; /* 左側強調色條更粗 */
    display: flex;
    flex-direction: column; /* 內容垂直排列 */
    align-items: flex-start; /* 內容靠左對齊 */
    text-align: left;
    position: relative;
    overflow: hidden; /* 確保內容不會溢出，為裝飾準備 */
    z-index: 1; /* 確保內容在裝飾之上 */
}

/* 增加一個右上角的幾何裝飾 */
.recruitment-grid .recruitment-item::before {
    content: '';
    position: absolute;
    top: -20px; /* 稍微移出視圖 */
    right: -20px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.2), transparent); /* 青色漸變 */
    transform: rotate(45deg); /* 旋轉形成菱形或斜線效果 */
    opacity: 0.8; /* 輕微透明 */
    z-index: 0; /* 在內容之下 */
    transition: all 0.5s ease;
}

.recruitment-grid .recruitment-item:hover {
    transform: translateY(-15px) scale(1.03); /* 更明顯的上浮和放大 */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 35px rgba(0, 188, 212, 0.5); /* 更強烈的陰影和發光 */
    border-left-color: #64ffda; /* 懸停時強調色變亮 */
}

.recruitment-grid .recruitment-item:hover::before {
    background: linear-gradient(135deg, rgba(100, 255, 218, 0.4), transparent); /* 懸停時顏色更亮 */
    opacity: 1; /* 更明顯 */
    transform: rotate(60deg) scale(1.1); /* 輕微旋轉和放大 */
}


.recruitment-grid .recruitment-item .icon {
    font-size: 4em; /* 進一步增大圖標尺寸 */
    color: #00bcd4; /* 圖標顏色 */
    margin-bottom: 25px; /* 圖標與標題的間距 */
    text-shadow: 0 0 20px rgba(0, 188, 212, 0.7); /* 圖標發光效果更強 */
    transition: color 0.3s ease, transform 0.3s ease;
    z-index: 2; /* 確保在裝飾之上 */
}

.recruitment-grid .recruitment-item:hover .icon {
    color: #64ffda; /* 懸停時圖標顏色變亮 */
    transform: scale(1.15) rotate(8deg); /* 更明顯的放大和旋轉 */
}

.recruitment-grid .recruitment-item h4 {
    color: white; /* 標題顏色 */
    font-size: 2em; /* 標題文字大小 */
    margin-top: 0;
    margin-bottom: 18px; /* 標題與內容間距 */
    font-weight: 800; /* 更粗 */
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    z-index: 2;
}

.recruitment-grid .recruitment-item p {
    color: #c0c0c0; /* 內容文字顏色 */
    font-size: 1.1em; /* 增大內容字體 */
    line-height: 1.8; /* 增加行高 */
    margin-bottom: 0; /* 移除底部 margin */
    z-index: 2;
}

/* 針對步驟編號的特殊樣式 */
.recruitment-grid .recruitment-item .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px; /* 編號圓圈大小更大 */
    height: 65px;
    background-color: #e94560; /* 紅色編號背景 */
    color: white;
    font-size: 2em; /* 編號字體大小 */
    font-weight: 900; /* 超粗 */
    border-radius: 50%;
    margin-bottom: 30px; /* 與文字的間距 */
    box-shadow: 0 8px 20px rgba(233, 69, 96, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.2); /* 編號陰影更強，內部發光 */
    border: 4px solid #ff6a80; /* 編號邊框更粗 */
    flex-shrink: 0; /* 防止縮小 */
    transition: all 0.4s ease;
    z-index: 2;
}

.recruitment-grid .recruitment-item:hover .step-number {
    transform: scale(1.1) rotate(-5deg); /* 懸停時放大並輕微旋轉 */
    box-shadow: 0 12px 30px rgba(233, 69, 96, 0.8), inset 0 0 25px rgba(255, 255, 255, 0.4);
    border-color: #fff; /* 懸停時邊框變白 */
}


.apply-methods {
    margin-top: 60px; /* 增加與上方的間距 */
    padding: 30px;
    background-color: #0c0c1b; /* 應用方法區塊的背景色 */
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(233, 69, 96, 0.15); /* 輕微邊框 */
}

.apply-methods p {
    margin-bottom: 25px;
    font-size: 1.15em; /* 增大字體 */
    color: #d0d0d0;
    line-height: 1.7;
    text-align: center; /* 置中 */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.apply-methods ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 使用 flexbox 佈局列表 */
    flex-direction: column; /* 垂直排列 */
    gap: 20px; /* 列表項之間的間距 */
}

.apply-methods li {
    background-color: #1a1a2e;
    padding: 20px 30px; /* 增大內距 */
    border-left: 8px solid #00bcd4; /* 青色強調邊框更粗 */
    border-radius: 10px;
    font-size: 1.1em;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease;
    display: flex;
    align-items: center; /* 垂直居中對齊內容 */
}
.apply-methods li:hover {
    background-color: #2a2a3e;
    transform: translateX(10px); /* 更明顯的位移 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    border-color: #64ffda; /* 懸停時邊框變亮 */
}

.apply-methods li a {
    font-weight: bold;
    color: #64ffda; /* 亮青色 */
    font-size: 1.1em; /* 保持與父級字體大小一致 */
    margin-left: 15px; /* 連結與任何文字或圖標的間距 */
    text-shadow: 0 0 5px rgba(100, 255, 218, 0.3);
}

.apply-methods li a:hover {
    text-shadow: 0 0 12px rgba(100, 255, 218, 0.8);
    text-decoration: none; /* 移除下劃線 */
}

/* 新增：應用方法列表的標題或圖標 */
.apply-methods li strong {
    color: white; /* 列表項前綴顏色 */
    font-size: 1.1em;
    flex-shrink: 0; /* 防止縮小 */
}

.apply-methods .note {
    font-style: italic;
    color: #a0a0a0;
    font-size: 1.05em; /* 略微增大 */
    margin-top: 50px; /* 增加間距 */
    text-align: center;
    padding: 20px; /* 增大內距 */
    background-color: #0c0c1b;
    border-radius: 12px;
    border: 2px dashed #333; /* 虛線邊框更粗 */
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6); /* 內部陰影更強 */
    line-height: 1.6;
}


/* --- 最新消息頁面樣式 (news.html) --- */

#news-blog .intro-text {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 50px;
    color: #a0a0a0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 35px; /* 文章間距 */
    padding: 25px; /* 容器內距 */
    background-color: #0f0f1d;
    border-radius: 10px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.news-post {
    background-color: #1a1a2e;
    padding: 30px; /* 內距 */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    border-left: 6px solid #00bcd4; /* 左側強調邊框更粗 */
    display: flex;
    flex-direction: column;
}

.news-post:hover {
    transform: translateY(-8px); /* 滑鼠懸停時向上浮動 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* 陰影加深 */
    border-color: #64ffda; /* 邊框變亮 */
}

.news-post h3 {
    color: #64ffda;
    font-size: 2em; /* 增大字體 */
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.news-post .post-meta {
    font-size: 0.95em;
    color: #a0a0a0;
    margin-bottom: 18px;
    font-style: italic;
    opacity: 0.8;
}

.news-post .news-image {
    width: 100%;
    height: 280px; /* 固定圖片高度 */
    object-fit: cover;
    border-radius: 8px; /* 圖片圓角 */
    margin-bottom: 25px;
    transition: transform 0.5s ease;
}
.news-post:hover .news-image {
    transform: scale(1.03); /* 圖片輕微放大 */
}

.news-post p {
    margin-bottom: 20px;
    line-height: 1.7;
    color: #e0e0e0;
    flex-grow: 1; /* 讓段落填充空間 */
}

.news-post .read-more {
    display: inline-block;
    color: #e94560;
    font-weight: bold;
    margin-top: 15px; /* 頂部邊距 */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    font-size: 1.05em;
}

.news-post .read-more:hover {
    color: #ff6a80;
    text-shadow: 0 0 10px rgba(233, 69, 96, 0.6);
}

/* 分頁樣式 */
.pagination {
    text-align: center;
    margin-top: 70px; /* 增加頂部間距 */
    background-color: #0f0f1d;
    padding: 30px; /* 增加內距 */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.25);
}

.pagination .page-link {
    display: inline-block;
    padding: 14px 22px; /* 增大 */
    margin: 0 10px; /* 增大間距 */
    background-color: #1a1a2e;
    color: #e0e0e0;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    font-weight: 700;
    font-size: 1.05em;
}

.pagination .page-link:hover {
    background-color: #e94560;
    color: white;
    transform: translateY(-4px); /* 更明顯的上浮 */
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.4);
}

.pagination .page-link.active {
    background-color: #00bcd4;
    color: white;
    font-weight: bold;
    cursor: default;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.7); /* 更明顯的發光 */
    transform: translateY(0);
}

.pagination .page-link.active:hover {
    background-color: #00bcd4; /* 保持不變 */
}


/* --- 聯絡我們頁面樣式 (contact.html) --- */

#contact-us .intro-text {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 50px;
    color: #a0a0a0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 50px; /* 項目之間的間距 */
    justify-content: center;
    margin-bottom: 70px; /* 底部間距 */
}

.contact-form-container,
.contact-info-container {
    background-color: #0f0f1d;
    padding: 40px; /* 內距 */
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 188, 212, 0.2);
}

.contact-form-container {
    flex: 2;
    min-width: 400px; /* 最小寬度 */
}

.contact-info-container {
    flex: 1;
    min-width: 320px; /* 最小寬度 */
}

.contact-form-container h3,
.contact-info-container h3 {
    color: #00bcd4;
    font-size: 2em; /* 增大字體 */
    margin-top: 0;
    margin-bottom: 35px;
    text-align: center;
    position: relative;
    padding-bottom: 12px;
    font-weight: 700;
}

.contact-form-container h3::after,
.contact-info-container h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px; /* 略微加長 */
    height: 4px; /* 略微加粗 */
    background-color: #e94560;
    border-radius: 3px;
}

/* 表單樣式 */
.form-group {
    margin-bottom: 25px; /* 表單群組底部邊距 */
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: #e0e0e0;
    font-size: 1.1em; /* 字體大小 */
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 15px; /* 內距 */
    border: 1px solid #3d3d4d; /* 邊框顏色略亮 */
    border-radius: 8px; /* 圓角 */
    background-color: #1a1a2e; /* 背景色 */
    color: #f0f0f0;
    font-size: 1.05em;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: #00bcd4;
    box-shadow: 0 0 10px rgba(0, 188, 212, 0.6); /* 聚焦時陰影更明顯 */
    background-color: #1f1f3a; /* 聚焦時背景色略變亮 */
}

.form-group textarea {
    resize: vertical;
    min-height: 120px; /* 最小高度 */
}

.contact-form button {
    width: 100%;
    padding: 16px; /* 內距 */
    font-size: 1.15em;
    margin-top: 15px;
}

/* 其他聯絡方式樣式 */
.contact-item {
    margin-bottom: 30px; /* 項目底部邊距 */
}

.contact-item h4 {
    color: #64ffda;
    font-size: 1.7em; /* 增大字體 */
    margin-top: 0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-weight: 700;
}

/* 圖示預留樣式 (如果使用 Font Awesome 等) */
.contact-item h4 i {
    margin-right: 15px; /* 圖示右側間距 */
    color: #e94560;
    font-size: 1.3em; /* 增大圖示 */
    min-width: 30px;
    text-align: center;
}

.contact-item p {
    margin-bottom: 8px;
    font-size: 1.05em;
    color: #d0d0d0;
}

.contact-item a {
    color: #00bcd4;
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.contact-item a:hover {
    color: #64ffda;
    text-decoration: underline;
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.4);
}

.social-links-contact {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 項目間距 */
    margin-top: 20px;
}

.social-links-contact li {
    background-color: #1a1a2e;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05); /* 輕微邊框 */
}

.social-links-contact li:hover {
    background-color: #e94560;
    transform: translateY(-5px); /* 上浮 */
    box-shadow: 0 5px 15px rgba(233, 69, 96, 0.5); /* 陰影 */
}

.social-links-contact li a {
    display: block;
    padding: 12px 18px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1em;
}

/* --- 多媒體中心頁面樣式 (media.html) --- */

#media-center .intro-text {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 50px;
    color: #a0a0a0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.media-category {
    background-color: #0f0f1d;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 60px;
    border: 1px solid rgba(0, 188, 212, 0.2);
}

.media-category h3 {
    color: #00bcd4;
    font-size: 2.2em; /* 增大字體 */
    text-align: center;
    margin-bottom: 35px;
    position: relative;
    padding-bottom: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.media-category h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70px;
    height: 5px;
    background-color: #e94560;
    border-radius: 3px;
}

/* 圖片畫廊網格樣式 */
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 響應式佈局 */
    gap: 30px; /* 畫廊圖片間距 */
    padding: 20px; /* 畫廊容器內距 */
    background-color: #0c0c1b;
    border-radius: 12px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 220px; /* 統一圖片高度 */
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item .overlay span {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* 影片列表樣式 */
.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: 20px;
    background-color: #0c0c1b;
    border-radius: 12px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.video-item {
    background-color: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.video-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.video-item .video-thumbnail {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.video-item .video-content {
    padding: 20px;
}

.video-item h4 {
    color: #64ffda;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
}

.video-item .date {
    font-size: 0.9em;
    color: #a0a0a0;
    font-style: italic;
}


/* --- 頁腳 (Footer) 樣式 --- */
footer {
    background-color: #0a0a1a;
    color: #a0a0a0;
    padding: 60px 0; /* 增大內距 */
    text-align: center;
    border-top: 4px solid #e94560; /* 強調線 */
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6); /* 底部陰影 */
}

footer .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px; /* 項目間距 */
    margin-bottom: 40px; /* 與版權資訊的間距 */
}

footer .footer-section {
    flex: 1;
    min-width: 250px; /* 最小寬度 */
    max-width: 350px; /* 最大寬度 */
    text-align: left; /* 內容左對齊 */
}

footer .footer-section h4 {
    color: white;
    font-size: 1.6em; /* 增大標題字體 */
    margin-bottom: 25px; /* 底部間距 */
    position: relative;
    padding-bottom: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

footer .footer-section h4::after {
    content: '';
    position: absolute;
    left: 0; /* 左對齊 */
    bottom: 0;
    width: 50px;
    height: 3px;
    background-color: #00bcd4;
    border-radius: 2px;
}

footer .footer-section p {
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: 15px;
}

footer .footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

footer .footer-section ul li {
    margin-bottom: 12px;
}

footer .footer-section ul li a {
    color: #a0a0a0;
    font-size: 1.05em;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* 讓 transform 生效 */
}

footer .footer-section ul li a:hover {
    color: white;
    transform: translateX(5px); /* 輕微右移 */
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.social-links {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* 左對齊 */
    gap: 15px; /* 增大間距 */
    margin-top: 20px;
}

.social-links li a {
    display: flex; /* 使用 flexbox 讓圖標和文字居中 */
    align-items: center;
    justify-content: center;
    width: 45px; /* 圖標大小 */
    height: 45px;
    background-color: #1a1a2e;
    color: white;
    border-radius: 50%;
    font-size: 1.3em; /* 圖標字體大小 */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.social-links li a:hover {
    background-color: #e94560; /* 懸停變紅 */
    transform: translateY(-5px) rotate(10deg); /* 輕微上浮和旋轉 */
    box-shadow: 0 6px 20px rgba(233, 69, 96, 0.5);
    color: white; /* 確保懸停時顏色不會被其他樣式覆蓋 */
}


footer .copyright {
    margin-top: 50px; /* 增加頂部間距 */
    font-size: 0.95em;
    color: #707070;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* 頂部淺色分隔線 */
    padding-top: 30px;
}

/* --- 響應式設計 (Responsive Design) --- */

/* 小型平板和大型手機 (Small Tablets & Large Phones) */
@media (max-width: 1024px) {
    .container {
        width: 95%;
        padding: 30px 0;
    }

    .section-padding {
        padding: 80px 0;
    }

    .section-title {
        font-size: 3em;
        margin-bottom: 60px;
    }

    .subsection-title {
        font-size: 2.2em;
        margin-bottom: 30px;
    }

    header .hero-banner {
        min-height: 450px;
        padding-left: 50px; /* 調整 Logo 和文字的間距 */
        padding-right: 50px;
        text-align: center; /* 確保內容在小螢幕上置中 */
    }

    .header-logo {
        top: 30px; /* 調整 Logo 位置 */
        left: 50%;
        transform: translateX(-50%) rotate(-10deg); /* 置中 Logo */
        width: 250px; /* 縮小 Logo */
    }

    header h1 {
        font-size: 4em;
        letter-spacing: 3px;
        margin-top: 80px; /* 給 Logo 更多空間 */
    }

    header p.slogan {
        font-size: 1.6em;
    }

    nav ul {
        gap: 20px; /* 減小導覽間距 */
    }

    nav ul li a {
        padding: 12px 20px;
        font-size: 1.05em;
    }

    section {
        padding: 40px;
        margin-bottom: 50px;
    }

    .grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 調整最小寬度 */
        gap: 25px;
        padding: 25px;
    }

    .card-image {
        height: 200px;
    }

    .card-content h3 {
        font-size: 1.6em;
    }

    /* Recruitment Page Specific */
    #recruitment-info .intro-text {
        font-size: 1.15em;
        margin-bottom: 40px;
    }
    .recruitment-section {
        padding: 40px;
        margin-bottom: 60px;
    }
    .recruitment-section h3 {
        font-size: 2.4em;
        margin-bottom: 30px;
    }
    .recruitment-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 調整網格最小寬度 */
        gap: 30px;
        padding: 25px;
    }
    .recruitment-grid .recruitment-item {
        padding: 30px;
        border-left-width: 6px;
    }
    .recruitment-grid .recruitment-item .icon {
        font-size: 3.5em;
        margin-bottom: 20px;
    }
    .recruitment-grid .recruitment-item h4 {
        font-size: 1.6em;
        margin-bottom: 15px;
    }
    .recruitment-grid .recruitment-item p {
        font-size: 1em;
    }
    .recruitment-grid .recruitment-item .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.8em;
        margin-bottom: 25px;
        border-width: 3px;
    }
    .apply-methods {
        margin-top: 50px;
        padding: 25px;
    }
    .apply-methods p {
        font-size: 1.1em;
        margin-bottom: 20px;
    }
    .apply-methods li {
        padding: 16px 25px;
        border-left-width: 6px;
        font-size: 1.05em;
    }
    .apply-methods li a {
        font-size: 1em;
    }
    .apply-methods .note {
        margin-top: 40px;
        padding: 18px;
        font-size: 0.95em;
    }

    .news-post h3 {
        font-size: 1.8em;
    }

    .news-post .news-image {
        height: 240px;
    }

    .pagination .page-link {
        padding: 12px 18px;
        margin: 0 8px;
        font-size: 1em;
    }

    .contact-grid {
        flex-direction: column; /* 垂直堆疊 */
        gap: 30px;
    }
    .contact-form-container,
    .contact-info-container {
        min-width: unset; /* 移除最小寬度限制 */
        width: 100%; /* 佔滿可用寬度 */
    }
    .contact-form-container h3,
    .contact-info-container h3 {
        font-size: 1.8em;
        margin-bottom: 25px;
    }
    .form-group label {
        font-size: 1em;
    }
    .form-group input,
    .form-group textarea {
        padding: 12px;
        font-size: 1em;
    }
    .contact-form button {
        padding: 14px;
        font-size: 1.1em;
    }
    .contact-item h4 {
        font-size: 1.5em;
    }
    .contact-item p, .contact-item a {
        font-size: 1em;
    }
    .social-links-contact {
        justify-content: center; /* 社群連結置中 */
    }

    footer .footer-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    footer .footer-section {
        text-align: center; /* 頁腳內容置中 */
        max-width: 90%;
    }
    footer .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .social-links {
        justify-content: center;
    }
}


/* 手機 (Mobile Phones) */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .section-padding {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2.5em;
        margin-bottom: 50px;
        letter-spacing: 2px;
    }
    .section-title::after {
        width: 90px;
        height: 5px;
    }

    .subsection-title {
        font-size: 2em;
        margin-bottom: 25px;
    }

    .intro-text {
        font-size: 1.1em;
        margin-bottom: 40px;
    }

    header .hero-banner {
        min-height: 380px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .header-logo {
        top: 20px;
        width: 200px;
    }

    header h1 {
        font-size: 3em;
        letter-spacing: 3px;
        margin-top: 60px;
    }

    header p.slogan {
        font-size: 1.4em;
        letter-spacing: 1px;
    }

    nav ul {
        flex-direction: column; /* 導覽列項目垂直堆疊 */
        align-items: center; /* 置中 */
        gap: 15px;
    }

    nav ul li a {
        padding: 10px 18px;
        font-size: 1em;
    }

    .btn {
        padding: 14px 30px;
        font-size: 1em;
    }

    section {
        padding: 30px;
        margin-bottom: 40px;
    }

    .grid-layout {
        grid-template-columns: 1fr; /* 單列佈局 */
        gap: 20px;
        padding: 20px;
    }

    .card {
        margin-bottom: 0; /* 網格已經有 gap，移除額外 margin */
    }

    .card-image {
        height: 180px;
    }

    .card-content {
        padding: 20px;
    }

    .card-content h3 {
        font-size: 1.4em;
    }

    .card-content p {
        font-size: 0.95em;
    }

    /* Recruitment Page Specific */
    #recruitment-info .intro-text {
        font-size: 1.05em;
        margin-bottom: 30px;
    }
    .recruitment-section {
        padding: 30px;
        margin-bottom: 50px;
    }
    .recruitment-section h3 {
        font-size: 2em;
        margin-bottom: 25px;
        letter-spacing: 1px;
    }
    .recruitment-section h3::after {
        width: 70px;
        height: 4px;
    }
    .recruitment-grid {
        grid-template-columns: 1fr; /* 單列佈局 */
        gap: 25px;
        padding: 20px;
    }
    .recruitment-grid .recruitment-item {
        padding: 25px;
        border-left-width: 5px;
    }
    .recruitment-grid .recruitment-item::before {
        width: 60px;
        height: 60px;
        right: -15px;
        top: -15px;
    }
    .recruitment-grid .recruitment-item .icon {
        font-size: 3em;
        margin-bottom: 15px;
    }
    .recruitment-grid .recruitment-item h4 {
        font-size: 1.4em;
        margin-bottom: 12px;
    }
    .recruitment-grid .recruitment-item p {
        font-size: 0.95em;
    }
    .recruitment-grid .recruitment-item .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.6em;
        margin-bottom: 20px;
        border-width: 2px;
    }
    .apply-methods {
        margin-top: 40px;
        padding: 20px;
    }
    .apply-methods p {
        font-size: 1em;
        margin-bottom: 15px;
    }
    .apply-methods li {
        padding: 14px 20px;
        border-left-width: 5px;
        font-size: 1em;
    }
    .apply-methods li a {
        font-size: 0.95em;
    }
    .apply-methods .note {
        margin-top: 30px;
        padding: 15px;
        font-size: 0.9em;
    }

    .news-list {
        padding: 15px;
    }
    .news-post {
        padding: 25px;
    }
    .news-post h3 {
        font-size: 1.6em;
    }
    .news-post .news-image {
        height: 200px;
    }

    .pagination {
        margin-top: 50px;
        padding: 20px;
    }
    .pagination .page-link {
        padding: 10px 15px;
        margin: 0 5px;
        font-size: 0.9em;
    }

    .contact-form-container,
    .contact-info-container {
        padding: 30px;
    }
    .contact-form-container h3,
    .contact-info-container h3 {
        font-size: 1.6em;
        margin-bottom: 20px;
    }
    .form-group label {
        font-size: 0.95em;
    }
    .form-group input,
    .form-group textarea {
        padding: 10px;
        font-size: 0.95em;
    }
    .contact-form button {
        padding: 12px;
        font-size: 1em;
    }
    .contact-item h4 {
        font-size: 1.3em;
    }
    .contact-item p, .contact-item a {
        font-size: 0.95em;
    }
    .social-links-contact li a {
        width: 40px;
        height: 40px;
        font-size: 1.2em;
        padding: 10px; /* 調整內距確保圖標大小適中 */
    }


    footer {
        padding: 40px 0;
    }
    footer .footer-content {
        gap: 20px;
    }
    footer .footer-section h4 {
        font-size: 1.4em;
        margin-bottom: 20px;
    }
    footer .footer-section p,
    footer .footer-section ul li a {
        font-size: 0.95em;
    }
    .social-links li a {
        width: 40px;
        height: 40px;
        font-size: 1.1em;
    }
    footer .copyright {
        margin-top: 30px;
        padding-top: 20px;
        font-size: 0.85em;
    }
}

/* 更小的手機螢幕 (Very Small Phones) */
@media (max-width: 480px) {
    .section-title {
        font-size: 2em;
        margin-bottom: 40px;
    }
    .section-title::after {
        width: 70px;
        height: 4px;
    }
    .subsection-title {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .intro-text {
        font-size: 1em;
        margin-bottom: 30px;
    }
    header h1 {
        font-size: 2.5em;
        letter-spacing: 2px;
    }
    header p.slogan {
        font-size: 1.2em;
    }
    nav ul li a {
        padding: 8px 15px;
        font-size: 0.95em;
    }
    .btn {
        padding: 12px 25px;
        font-size: 0.95em;
    }
    section {
        padding: 20px;
    }
    .recruitment-section h3 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }
    .recruitment-grid .recruitment-item {
        padding: 20px;
    }
    .recruitment-grid .recruitment-item .icon {
        font-size: 2.5em;
    }
    .recruitment-grid .recruitment-item h4 {
        font-size: 1.2em;
    }
    .recruitment-grid .recruitment-item .step-number {
        width: 45px;
        height: 45px;
        font-size: 1.4em;
    }
    .apply-methods li {
        padding: 12px 15px;
    }
    .apply-methods p {
        font-size: 0.95em;
    }
    .apply-methods .note {
        font-size: 0.85em;
        padding: 12px;
    }
    .contact-form-container,
    .contact-info-container {
        padding: 25px;
    }
    .contact-form button {
        font-size: 0.95em;
    }
    .social-links-contact li a {
        width: 35px;
        height: 35px;
        font-size: 1em;
    }
}

/* 尋找或新增此規則，套用於所有 .recruitment-section 內的 h3 標題 */
.recruitment-section h3 {
    color: #64ffda; /* 青綠色，這是霓虹光的主色 */
    font-size: 2em; /* 您可以根據需要調整標題大小 */
    text-align: center; /* 置中 */
    margin-bottom: 20px; /* 與下方紅線的間距 */
    text-shadow: 0 0 15px rgba(100, 255, 218, 0.7), /* 主要發光效果 */
                 0 0 25px rgba(0, 188, 212, 0.5), /* 次要發光效果 */
                 0 0 35px rgba(0, 188, 212, 0.3); /* 更廣泛的發光 */
    /* 如果您希望這些標題也有呼吸般的脈衝動畫，請取消註解下面這行 */
    /* animation: neon-pulse 2s infinite alternate; */
    position: relative; /* 為了讓偽元素 ::after 能正確定位 */
    display: flex; /* 讓文字和圖示在 h3 內部保持一行並置中 */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    gap: 10px; /* 圖示和文字之間的間距 */
}

/* 確保您的 @keyframes neon-pulse 定義存在於 CSS 中 */
@keyframes neon-pulse {
    from {
        text-shadow: 0 0 10px rgba(100, 255, 218, 0.7),
                     0 0 20px rgba(0, 188, 212, 0.5),
                     0 0 30px rgba(0, 188, 212, 0.3);
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 15px rgba(100, 255, 218, 0.9),
                     0 0 25px rgba(0, 188, 212, 0.7),
                     0 0 40px rgba(0, 188, 212, 0.4);
        transform: scale(1.02); /* 輕微放大效果 */
    }
}

/* 這些是您已有的 CSS 樣式，它們會自動應用到新的 <ul><li> 結構 */
.steps-list {
    list-style: none; /* 移除預設列表符號 */
    padding: 0;       /* 移除內距 */
    margin: 0;        /* 移除邊距 */
}

.steps-list li {
    background-color: #1a1a2e;     /* 列表項目背景色 */
    padding: 15px 20px;          /* 內距 */
    margin-bottom: 12px;         /* 底部邊距 */
    border-left: 5px solid #64ffda; /* 左側強調邊框 */
    border-radius: 5px;          /* 圓角 */
    font-size: 1.05em;           /* 字體大小 */
    display: flex;               /* 使用 Flexbox 讓內容和編號/符號對齊 */
    align-items: flex-start;     /* 頂部對齊 */
}

/* 如果您還有 exam-notes-list 的專屬樣式，可能需要移除或修改 */
/* 因為我們將其統一到 steps-list 或 requirements-list 了 */
/* 尋找並移除或註解掉類似 .exam-notes-list 或 .exam-notes-list li 的專屬樣式 */
/*
.exam-notes-list {
    // 移除或註解掉
}
.exam-notes-list li {
    // 移除或註解掉
}
*/


/* --- 頁首區塊樣式 (Header) --- */
header {
    background-color: #0d0d1a; /* 頁首背景顏色 */
    padding: 20px 0; /* 上下內邊距，提供高度 */
    position: relative; /* 啟用相對定位，作為所有絕對定位子元素（如 Logo）的參考點 */
    z-index: 10; /* 確保頁首在頁面其他內容之上 */
}

/* 頁首內容的容器：限制寬度並置中。 */
header .container {
    max-width: 1200px; /* 內容的最大寬度 */
    margin: 0 auto; /* 容器水平置中 */
    padding: 0 20px; /* 容器左右內邊距 */
    position: relative; /* 確保這個容器本身也相對定位，它是 .header-right-logo 絕對定位的基準點 */
    /* 移除 display: flex; 和 justify-content; 等屬性，讓文字和 Logo 可以獨立定位 */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
}

/* 網站標題和標語的容器樣式：用於確保「FTY MOON」文字和標語保持置中。 */
.header-content-center {
    text-align: center; /* 確保其內部的 h1 和 p 文字水平置中 */
    /* 為右側 Logo 預留空間，避免文字與 Logo 重疊。此值可能需要根據 Logo 大小和實際效果微調。 */
    padding-right: 150px;
    padding-left: 150px; /* 保持左右對稱，可根據實際情況調整 */
    /* 移除 flex-grow，因為它不再是一個 flex item */
    /* flex-grow: 1; */
}

/* 網站主要標題 FTY MOON 的樣式：確保字體、顏色、發光效果保持不變。 */
header h1.neon-text {
    font-size: 5em; /* 更大的字體大小 */
    color: white; /* 標題文字顏色為白色 */
    margin-bottom: 20px; /* 增加與標語間距 */
    /* 更強烈的霓虹光暈效果，使用 rgba 值 */
    text-shadow: 0 0 25px rgba(100, 255, 218, 0.9), /* 亮青綠色，更強烈的陰影 */
                 0 0 40px rgba(0, 188, 212, 0.7); /* 亮藍色，更廣的陰影 */
    letter-spacing: 5px; /* 增加字距 */
    font-weight: 900; /* 更粗的字體 */
    /* 更新霓虹跳動動畫的持續時間和緩動函數 */
    animation: neon-pulse 2.5s infinite alternate ease-in-out;
    position: relative; /* 確保在 Logo 之上 (如果 Logo z-index 較低) */
    z-index: 3; /* 設定堆疊順序，確保文字在某些情況下顯示在 Logo 上方 */
    font-family: var(--heading-font); /* 保持標題字體 */
    text-transform: uppercase; /* 文字大寫 */
    line-height: 1; /* 調整行高 */
}

/* 網站標語的樣式：保持不變。 */
.slogan {
    color: #a0a0a0;
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* 頁首下方的裝飾線樣式：保持不變。 */
.header-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, #64ffda, transparent);
    box-shadow: 0 0 10px rgba(100, 255, 218, 0.7);
    margin-top: 20px;
}

/* Header 右上角 Logo 的樣式：使用絕對定位精確放置。 */
.header-right-logo {
    position: absolute; /* 絕對定位：將元素從正常文檔流中移除，允許精確放置 */
    top: 40%; /* 距離父容器 (.container) 頂部 50% */
    right: 20px; /* 距離父容器 (.container) 右側 20px */
    transform: translateY(-50%); /* 垂直置中：因為 top: 50% 是從 Logo 的頂部開始算，
                                    這個屬性會將 Logo 向上移動自身高度的一半，
                                    從而使其垂直中心與父容器的垂直中心對齊。 */
    z-index: 11; /* 確保 Logo 在頁首的其他內容之上，防止被文字或其他元素遮擋 */
    /* 移除 display: flex; 和 align-items: center; 因為它只有一個子元素 img，這些屬性不再必要 */
    /* display: flex; */
    /* align-items: center; */
}

.header-right-logo img {
    max-width: 240px; /* Logo 圖片的最大寬度，您可以根據實際設計調整此值 */
    height: auto; /* 高度自動調整，保持圖片的原始比例 */
    transition: transform 0.3s ease; /* 滑鼠懸停時的平滑過渡動畫效果 */
}

.header-right-logo img:hover {
    transform: scale(1.20); /* 滑鼠懸停時，Logo 會輕微放大 5% */
}


/* --- 響應式設計 (Responsive Design) --- */
/* 當螢幕寬度小於或等於 1024px 時的調整 */
@media (max-width: 1024px) {
    header h1.neon-text {
        font-size: 3em; /* 標題字體縮小 */
    }
    .slogan {
        font-size: 1.1em; /* 標語字體縮小 */
    }
    .header-content-center {
        padding-right: 100px; /* 為 Logo 預留的空間稍微縮小 */
        padding-left: 100px;
    }
    .header-right-logo img {
        max-width: 90px; /* Logo 圖片大小縮小 */
    }
}

/* 當螢幕寬度小於或等於 768px 時的調整（通常是平板和手機） */
@media (max-width: 768px) {
    /* 調整頁首容器，讓內容在小螢幕上垂直堆疊，並置中 */
    header .container {
        flex-direction: column; /* 將內容從水平排列改為垂直排列 */
        align-items: center; /* 讓所有子元素在垂直方向上置中 */
        padding-left: 20px; /* 恢復正常左右邊距 */
        padding-right: 20px;
    }

    /* 將 Logo 從絕對定位改為靜態定位，使其回到正常文檔流中 */
    .header-right-logo {
        position: static; /* 取消絕對定位 */
        transform: none; /* 移除垂直置中變換 */
        display: block; /* 讓 Logo 成為一個塊級元素 */
        margin: 0 auto 10px auto; /* 讓 Logo 在小屏幕上水平置中，並與下方內容留出間距 */
        top: auto; /* 移除 top 屬性 */
        right: auto; /* 移除 right 屬性 */
    }
    .header-right-logo img {
        max-width: 70px; /* 小屏幕時 Logo 寬度可以再小一點 */
    }

    /* 調整標題和標語容器，移除為 Logo 預留的空間 */
    .header-content-center {
        padding-right: 0; /* 移除額外間距 */
        padding-left: 0;
        margin-top: 10px; /* 如果 Logo 在頂部，文字可以稍微往下 */
    }

    header h1.neon-text {
        font-size: 2em; /* 進一步縮小標題字體 */
    }
    .slogan {
        font-size: 1em; /* 進一步縮小標語字體 */
    }
    .header-line {
        margin-top: 10px; /* 調整分隔線與上方內容的間距 */
    }
}


/* --- 動畫定義 (Animations) --- */
/* 霓虹脈衝動畫：用於 FTY MOON 標題 */
@keyframes neon-pulse {
    from {
        /* 初始狀態的霓虹陰影 */
        text-shadow: 0 0 15px rgba(100, 255, 218, 0.7), /* 較淺的青綠色陰影 */
                     0 0 25px rgba(0, 188, 212, 0.5); /* 較淺的藍色陰影 */
        transform: scale(1);
    }
    to {
        /* 結束狀態的霓虹陰影，更亮更廣 */
        text-shadow: 0 0 25px rgba(100, 255, 218, 0.9), /* 亮青綠色，更強烈的陰影 */
                     0 0 40px rgba(0, 188, 212, 0.7), /* 亮藍色，更廣的陰影 */
                     0 0 60px rgba(0, 188, 212, 0.5); /* 新增第三層更廣的陰影，增加深度 */
        transform: scale(1.02); /* 輕微放大 */
    }
}

/* 元素淡入動畫：用於滾動揭示效果 */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 滾動揭示效果相關樣式 (初始狀態隱藏) */
.reveal {
    opacity: 0; /* 元素初始透明 */
    transform: translateY(20px); /* 元素初始向下偏移 */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* 過渡動畫 */
}

/* 當元素被揭示時 (添加 'active' 類別) */
.reveal.active {
    opacity: 1; /* 元素完全顯示 */
    transform: translateY(0); /* 元素回到原始位置 */
}
.header-right-logo img {
    max-width: 260px;
    height: auto;
    transition: transform 0.3s ease; /* 保持過渡效果 */
    filter: drop-shadow(0 0 8px var(--neon-blue));

    /* START: ADD - 旋轉 Logo 圖片 START */
    transform: rotate(5deg); /* 範例：順時針旋轉 5 度 */
    /* END: ADD - 旋轉 Logo 圖片 END */
}

.header-right-logo img:hover {
    transform: scale(1.05) rotate(10deg); /* 範例：懸停時放大並旋轉更多 */
    filter: drop-shadow(0 0 15px var(--neon-blue)) brightness(1.2);
}

/* =========================================================
   FTY MOON 戰隊網站風格 - 統一版 CSS (包含手機預覽排版)
   基於專業電競風格設計，並整合所有頁面專屬樣式。
   ========================================================= */

/* --- CSS 變數定義 (Colors, Fonts, etc.) --- */
/* 在這裡定義網站中會重複使用的顏色和其他屬性，方便管理和修改 */
:root {
    /* 主要色調 */
    --primary-dark-bg: #0b0b1a; /* 最深背景色 */
    --secondary-dark-bg: #0f0f1d; /* 次深背景色，用於區塊 */
    --tertiary-dark-bg: #1a1a2e; /* 更淺的深色，用於列表項目或表單背景 */

    /* 霓虹色 */
    --neon-blue: #00e0ff;   /* 亮藍色，用於標題、強調 */
    --neon-green: #64ffda;  /* 亮青綠色，用於連結、邊框 */
    --neon-red: #e94560;    /* 亮紅色，用於按鈕、警示 */
    --neon-purple: #ae00ff; /* 亮紫色，用於霓虹陰影的層次感 */

    /* 文字顏色 */
    --text-light: #e0e0e0; /* 淺色文字 */
    --text-medium: #a0a0a0; /* 中等灰色文字 */
    --text-dark: #333333; /* 深色文字 (如果需要) */

    /* 字體 */
    --main-font: 'Montserrat', 'Arial', '微軟正黑體', sans-serif;
    --heading-font: 'Electrolize', sans-serif; /* 假設您有引入 Electrolize 字體 */
}

/* --- 基本重設與通用樣式 --- */
body {
    font-family: var(--main-font); /* 設定網頁字體 */
    margin: 0; /* 移除瀏覽器預設邊距 */
    padding: 0; /* 移除瀏覽器預設內距 */
    background-color: var(--primary-dark-bg); /* 網站背景色 */
    color: var(--text-light); /* 預設文字顏色 */
    line-height: 1.7; /* 設定行高，讓文字更易讀 */
    font-size: 16px; /* 基礎字體大小 */
    overflow-x: hidden; /* 防止水平捲動條 */
}

/* 內容容器樣式 */
.container {
    width: 92%; /* 內容區塊寬度 */
    max-width: 1400px; /* 最大寬度限制 */
    margin: 0 auto; /* 內容區塊置中 */
    padding: 20px 0; /* 上下內距，與 header 保持一致 */
    box-sizing: border-box; /* 確保 padding 不增加寬度 */
}

/* 連結樣式 */
a {
    color: var(--neon-blue); /* 連結顏色 */
    text-decoration: none; /* 移除連結底線 */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* 平滑過渡效果 */
}

a:hover {
    color: var(--neon-green); /* 滑鼠懸停時連結顏色變亮 */
    text-shadow: 0 0 10px rgba(100, 255, 218, 0.6); /* 懸停時發光效果 */
}

/* 按鈕樣式 */
.btn {
    display: inline-block; /* 讓按鈕可以設定寬高 */
    background-color: var(--neon-red); /* 按鈕背景色 */
    color: white; /* 按鈕文字顏色 */
    padding: 12px 25px; /* 按鈕內距 */
    border-radius: 5px; /* 按鈕圓角 */
    text-transform: uppercase; /* 文字大寫 */
    font-weight: bold; /* 字體加粗 */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
    margin-top: 15px; /* 上邊距 */
    border: none; /* 移除邊框 */
    cursor: pointer; /* 顯示手形指標 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 按鈕陰影 */
}

.btn:hover {
    background-color: #ff6a80; /* 滑鼠懸停時按鈕背景色變亮 */
    transform: translateY(-2px); /* 輕微向上浮動 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* 陰影加深 */
}

.primary-btn {
    background-color: var(--neon-blue); /* 主要按鈕背景色，強調色 */
}

.primary-btn:hover {
    background-color: var(--neon-green); /* 主要按鈕滑鼠懸停效果 */
    box-shadow: 0 6px 12px rgba(0, 188, 212, 0.4); /* 懸停時發光陰影 */
}

/* --- 頁首 (Header) 樣式 --- */
header {
    background-color: var(--primary-dark-bg); /* 頁首背景色 */
    padding: 20px 0; /* 上下內邊距 */
    position: relative; /* 啟用相對定位，作為所有絕對定位子元素（如 Logo）的參考點 */
    z-index: 10; /* 確保頁首在頁面其他內容之上 */
    border-bottom: 3px solid var(--neon-blue); /* 底部邊框，強調色 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* 頁首陰影 */
}

/* 頁首內容的容器：限制寬度並置中。 */
header .container {
    max-width: 1200px; /* 內容的最大寬度 */
    margin: 0 auto; /* 容器水平置中 */
    padding: 0 20px; /* 容器左右內邊距 */
    position: relative; /* 確保這個容器本身也相對定位，它是 .header-right-logo 絕對定位的基準點 */
    /* 這裡不需要 flexbox，因為 Logo 是絕對定位的，文字內容會自行置中 */
}

/* 網站標題和標語的容器樣式：用於確保「FTY MOON」文字和標語保持置中。 */
.header-content-center {
    text-align: center; /* 確保其內部的 h1 和 p 文字水平置中 */
    /* 為右側 Logo 預留空間，避免文字與 Logo 重疊。此值可能需要根據 Logo 大小和實際效果微調。 */
    padding-right: 150px;
    padding-left: 150px; /* 保持左右對稱，可根據實際情況調整 */
}

/* 網站主要標題 FTY MOON 的樣式：確保字體、顏色、發光效果保持不變。 */
header h1.neon-text {
    font-size: 5em; /* 更大的字體大小 */
    color: white; /* 標題文字顏色為白色 */
    margin-bottom: 20px; /* 增加與標語間距 */
    /* 更強烈的霓虹光暈效果，使用 rgba 值 */
    text-shadow: 0 0 25px rgba(100, 255, 218, 0.9), /* 亮青綠色，更強烈的陰影 */
                 0 0 40px rgba(0, 188, 212, 0.7); /* 亮藍色，更廣的陰影 */
    letter-spacing: 5px; /* 增加字距 */
    font-weight: 900; /* 更粗的字體 */
    /* 更新霓虹跳動動畫的持續時間和緩動函數 */
    animation: neon-pulse 2.5s infinite alternate ease-in-out;
    position: relative; /* 確保在 Logo 之上 (如果 Logo z-index 較低) */
    z-index: 3; /* 設定堆疊順序，確保文字在某些情況下顯示在 Logo 上方 */
    font-family: var(--heading-font); /* 保持標題字體 */
    text-transform: uppercase; /* 文字大寫 */
    line-height: 1; /* 調整行高 */
}

/* 網站標語的樣式：保持不變。 */
.slogan {
    color: var(--text-medium);
    font-size: 1.2em;
    margin-bottom: 20px;
}

/* 頁首下方的裝飾線樣式：提供視覺上的分隔效果。 */
.header-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--neon-green), transparent);
    box-shadow: 0 0 10px var(--neon-green);
    margin-top: 20px;
}

/* Header 右上角 Logo 的樣式：使用絕對定位精確放置。 */
.header-right-logo {
    position: absolute; /* 絕對定位：將元素從正常文檔流中移除，允許精確放置 */
    top: 30%; /* 距離父容器 (.container) 頂部 50% */
    right: 20px; /* 距離父容器 (.container) 右側 20px */
    transform: translateY(-50%); /* 垂直置中：向上偏移自身高度的一半 */
    z-index: 11; /* 確保 Logo 在頁首的其他內容之上 */
}

.header-right-logo img {
    max-width: 220px; /* Logo 圖片的最大寬度，您可以根據實際設計調整此值 */
    height: auto; /* 高度自動調整，保持圖片的原始比例 */
    transition: transform 0.3s ease; /* 滑鼠懸停時的平滑過渡動畫效果 */
    filter: drop-shadow(0 0 8px var(--neon-blue)); /* 給 Logo 添加霓虹發光效果 */
}

.header-right-logo img:hover {
    transform: scale(1.05); /* 滑鼠懸停時，Logo 會輕微放大 5% */
    filter: drop-shadow(0 0 15px var(--neon-blue)) brightness(1.2); /* 懸停時發光更強 */
}

/* --- 導覽列 (Navigation) 樣式 --- */
nav {
    background-color: var(--secondary-dark-bg); /* 導覽列背景色 */
    padding: 15px 0; /* 上下內距 */
    border-bottom: 1px solid #333; /* 底部邊框 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); /* 陰影 */
    z-index: 9; /* 確保在頁首下方 */
    position: relative; /* 如果有 z-index 需求，需要設定 position */
}

nav ul {
    list-style: none; /* 移除列表項目符號 */
    padding: 0; /* 移除內距 */
    margin: 0; /* 移除邊距 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: center; /* 項目水平置中 */
    flex-wrap: wrap; /* 允許項目換行 */
}

nav ul li {
    margin: 0 20px; /* 左右邊距 */
}

nav ul li a {
    display: block; /* 讓連結填滿整個 li 空間 */
    padding: 12px 20px; /* 內距 */
    color: var(--text-light); /* 連結文字顏色 */
    font-weight: 600; /* 字體加粗 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
    border-radius: 5px; /* 圓角 */
    position: relative; /* 用於底部裝飾線 */
    overflow: hidden; /* 隱藏超出部分 */
    z-index: 1; /* 確保連結文字在線條上方 */
    font-size: 1.1em; /* 字體大小 */
}

/* 導覽列連結底部裝飾線 */
nav ul li a::before {
    content: ''; /* 偽元素內容 */
    position: absolute; /* 絕對定位 */
    bottom: 0; /* 底部對齊 */
    left: 0; /* 左側對齊 */
    width: 100%; /* 寬度佔滿 */
    height: 3px; /* 線高度 */
    background-color: var(--neon-red); /* 線顏色 */
    transform: scaleX(0); /* 初始隱藏 */
    transform-origin: bottom right; /* 變形原點 */
    transition: transform 0.3s ease-out; /* 過渡效果 */
    z-index: -1; /* 位於連結下方 */
}

nav ul li a:hover {
    color: white; /* 滑鼠懸停時文字顏色變白 */
    background-color: rgba(233, 69, 96, 0.1); /* 輕微的背景色疊加 */
}

nav ul li a:hover::before {
    transform: scaleX(1); /* 滑鼠懸停時線條完全顯示 */
    transform-origin: bottom left; /* 變形原點 */
}

nav ul li a.active { /* 當前頁面連結的樣式 */
    background-color: var(--neon-blue); /* 強調色背景 */
    color: white; /* 文字顏色 */
    font-weight: bold; /* 字體加粗 */
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.5); /* 發光陰影 */
    transform: translateY(-2px); /* 輕微向上浮動 */
}

nav ul li a.active::before { /* 當前頁面連結的線條 */
    transform: scaleX(1); /* 始終顯示 */
    background-color: var(--neon-green); /* 不同的線條顏色 */
}


/* --- 主要內容區塊 (Main Content Sections) 樣式 --- */
main {
    padding: 40px 0; /* 上下內距 */
}

section {
    background-color: var(--secondary-dark-bg); /* 區塊背景色 */
    margin-bottom: 30px; /* 底部邊距 */
    padding: 30px; /* 區塊內距 */
    border-radius: 8px; /* 區塊圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 區塊陰影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 懸停和滾動的過渡效果 */
}

section:hover {
    transform: translateY(-5px); /* 懸停時輕微上浮 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); /* 陰影加深 */
}

section h2 {
    color: var(--neon-blue); /* 區塊標題顏色 */
    font-size: 2.2em; /* 標題文字大小 */
    text-align: center; /* 標題置中 */
    margin-bottom: 25px; /* 底部邊距 */
    position: relative; /* 用於底部裝飾線 */
    padding-bottom: 10px; /* 為裝飾線留空間 */
}

/* 區塊標題底部裝飾線 */
section h2::after {
    content: ''; /* 偽元素內容 */
    position: absolute; /* 絕對定位 */
    left: 50%; /* 從中間開始 */
    bottom: 0; /* 底部對齊 */
    transform: translateX(-50%); /* 水平居中 */
    width: 60px; /* 線寬度 */
    height: 4px; /* 線高度 */
    background-color: var(--neon-red); /* 線顏色 */
    border-radius: 2px; /* 線條圓角 */
}

section p {
    color: var(--text-light); /* 內文顏色 */
    margin-bottom: 15px;
    line-height: 1.7;
}

/* 首頁 Hero 區塊樣式 */
#hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('../images/hero-bg.jpg') no-repeat center center/cover; /* 背景圖片 */
    min-height: 400px; /* 最小高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    border-radius: 12px;
}

#hero h2 {
    font-size: 3.5em;
    margin-bottom: 15px;
    color: var(--neon-green);
    text-shadow: 0 0 15px rgba(100, 255, 218, 0.9);
}

#hero p {
    font-size: 1.5em;
    max-width: 700px;
    margin-bottom: 30px;
    line-height: 1.4;
}

/* 小型行動呼籲區塊樣式 (用於 about.html, recruitment.html) */
.call-to-action-small {
    text-align: center; /* 文字置中 */
    padding: 30px; /* 內距 */
    background-color: var(--secondary-dark-bg); /* 背景色 */
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 陰影 */
}

.call-to-action-small p {
    font-size: 1.1em; /* 文字大小 */
    margin-bottom: 25px; /* 底部邊距 */
}

.call-to-action-small .btn {
    margin: 0 10px; /* 按鈕左右間距 */
}


/* --- 招募資訊頁面樣式 (recruitment.html) --- */
#recruitment-info .intro-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--text-medium);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.recruitment-section {
    background-color: var(--secondary-dark-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

.recruitment-section h3 {
    color: var(--neon-blue);
    font-size: 2em;
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.recruitment-section h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--neon-red);
    border-radius: 2px;
}

.requirements-list,
.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirements-list li,
.steps-list li {
    background-color: var(--tertiary-dark-bg);
    padding: 15px 20px;
    margin-bottom: 12px;
    border-left: 5px solid var(--neon-green);
    border-radius: 5px;
    font-size: 1.05em;
    display: flex;
    align-items: flex-start;
    color: var(--text-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.requirements-list li:hover,
.steps-list li:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.requirements-list li i.fas,
.steps-list li i.fas,
.steps-list li i.fab {
    color: var(--neon-green);
    margin-right: 15px;
    font-size: 1.4em;
    line-height: 1.2;
    min-width: 25px;
    text-align: center;
}

/* 針對有序列表的編號樣式 */
.steps-list {
    counter-reset: step-counter; /* 重設計數器 */
}
.steps-list li::before {
    content: counter(step-counter); /* 顯示計數器 */
    counter-increment: step-counter; /* 增加計數器 */
    background-color: var(--neon-red); /* 編號背景色 */
    color: white; /* 編號文字顏色 */
    font-weight: bold; /* 字體加粗 */
    width: 30px; /* 固定寬度 */
    height: 30px; /* 固定高度 */
    min-width: 30px; /* 最小寬度 */
    display: flex; /* Flexbox 置中編號 */
    justify-content: center; /* 水平置中 */
    align-items: center; /* 垂直置中 */
    border-radius: 50%; /* 圓形 */
    margin-right: 15px; /* 右側間距 */
    font-size: 0.9em; /* 編號字體大小 */
    flex-shrink: 0; /* 防止編號縮小 */
}

.note {
    background-color: #2a2a44; /* 注意事項背景色 */
    border-left: 5px solid #ffcc00; /* 黃色警示邊框 */
    padding: 15px 20px;
    margin-top: 25px;
    border-radius: 5px;
    color: #ffe066; /* 黃色文字 */
    font-size: 0.95em;
    display: flex;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.note i.fas {
    color: #ffcc00;
    margin-right: 10px;
    font-size: 1.2em;
    line-height: 1.2;
}

/* --- 關於我們頁面樣式 (about.html) --- */
#about-us .intro-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--text-medium);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.our-history, .our-values, .team-management {
    background-color: var(--secondary-dark-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 40px;
}

.our-history h3, .our-values h3, .team-management h3 {
    color: var(--neon-blue);
    font-size: 2em;
    text-align: center;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.our-history h3::after, .our-values h3::after, .team-management h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--neon-red);
    border-radius: 2px;
}

.our-values .value-item {
    background-color: var(--tertiary-dark-bg);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-left: 5px solid var(--neon-red);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.our-values .value-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.our-values .value-item h4 {
    display: flex;
    align-items: center;
    justify-content: center; /* 讓圖示和文字組合置中 */
    margin-bottom: 15px;
    color: var(--neon-green);
    font-size: 1.6em;
    text-align: center;
}

.our-values .value-item h4 i {
    margin-right: 10px;
    color: var(--neon-blue); /* 圖示顏色 */
    font-size: 1.1em;
    flex-shrink: 0;
}

/* --- 最新消息頁面樣式 (news.html) --- */
#news-blog .intro-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--text-medium);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.news-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 20px;
    background-color: var(--secondary-dark-bg);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.news-post {
    background-color: var(--tertiary-dark-bg);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 5px solid var(--neon-blue);
}

.news-post:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
}

.news-post h3 {
    color: var(--neon-green);
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 10px;
}

.news-post .post-meta {
    font-size: 0.9em;
    color: var(--text-medium);
    margin-bottom: 15px;
    font-style: italic;
}

.news-post .news-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 20px;
}

.news-post p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.news-post .read-more {
    display: inline-block;
    color: var(--neon-red);
    font-weight: bold;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.news-post .read-more:hover {
    color: #ff6a80;
}

/* 分頁樣式 */
.pagination {
    text-align: center;
    margin-top: 50px;
    background-color: var(--secondary-dark-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.pagination .page-link {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    background-color: var(--tertiary-dark-bg);
    color: var(--text-light);
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination .page-link:hover {
    background-color: var(--neon-red);
    color: white;
}

.pagination .page-link.active {
    background-color: var(--neon-blue);
    color: white;
    font-weight: bold;
    cursor: default;
}

.pagination .page-link.active:hover {
    background-color: var(--neon-blue);
}

/* 響應式設計：中等螢幕（平板） */
@media (min-width: 769px) {
    .news-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 響應式設計：大螢幕（桌面） */
@media (min-width: 1024px) {
    .news-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- 聯絡我們頁面樣式 (contact.html) --- */
#contact-us .intro-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--text-medium);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    margin-bottom: 50px;
}

.contact-form-container,
.contact-info-container {
    background-color: var(--secondary-dark-bg);
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.contact-form-container {
    flex: 2;
    min-width: 350px;
}

.contact-info-container {
    flex: 1;
    min-width: 280px;
}

.contact-form-container h3,
.contact-info-container h3 {
    color: var(--neon-blue);
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.contact-form-container h3::after,
.contact-info-container h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--neon-red);
    border-radius: 2px;
}

/* 表單樣式 */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-light);
    font-size: 1.05em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #333;
    border-radius: 5px;
    background-color: var(--tertiary-dark-bg);
    color: var(--text-light);
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: var(--neon-blue);
    box-shadow: 0 0 8px rgba(0, 188, 212, 0.5);
}

.form-group textarea {
    resize: vertical;
}

.contact-form button {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    margin-top: 10px;
}

/* 其他聯絡方式樣式 */
.contact-item {
    margin-bottom: 25px;
}

.contact-item h4 {
    color: var(--neon-green);
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.contact-item h4 i {
    margin-right: 12px;
    color: var(--neon-red);
    font-size: 1.1em;
}

.contact-item p {
    margin-bottom: 5px;
    font-size: 1em;
}

.contact-item a {
    color: var(--neon-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--neon-green);
    text-decoration: underline;
}

.social-links-contact {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}

.social-links-contact li {
    background-color: var(--tertiary-dark-bg);
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.social-links-contact li:hover {
    background-color: var(--neon-red);
}

.social-links-contact li a {
    display: block;
    padding: 10px 15px;
    color: white;
    font-weight: bold;
    text-decoration: none;
}

/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 768px) {
    .contact-grid {
        flex-direction: column;
    }

    .contact-form-container,
    .contact-info-container {
        flex: none;
        width: 100%;
        min-width: unset;
        padding: 25px;
    }
}

/* --- 多媒體中心頁面樣式 (media.html) --- */

#media-center .intro-text {
    text-align: center;
    font-size: 1.1em;
    margin-bottom: 40px;
    color: var(--text-medium);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.media-category {
    background-color: var(--secondary-dark-bg);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 50px;
}

.media-category h3 {
    color: var(--neon-blue);
    font-size: 2em;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    padding-bottom: 10px;
}

.media-category h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--neon-red);
    border-radius: 2px;
}

/* 圖片畫廊網格樣式 (與 team-life.html 相似) */
.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
    background-color: #151525; /* 背景色 */
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); /* 內部陰影 */
}

/* 圖片畫廊項目樣式 (與 team-life.html 相似) */
.image-gallery-grid .gallery-item {
    background-color: var(--tertiary-dark-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-gallery-grid .gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

.image-gallery-grid .gallery-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.image-gallery-grid .gallery-item:hover img {
    transform: scale(1.1);
}

.image-gallery-grid .gallery-item .caption {
    padding: 15px;
    font-size: 0.95em;
    color: #e0e0e0;
    text-align: center;
    background-color: #0f0f1d;
}

/* 影片畫廊網格樣式 */
.video-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: 20px;
    background-color: #151525; /* 背景色 */
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); /* 內部陰影 */
}

.video-item {
    background-color: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 比例的影片高度 (56.25% of width) */
    height: 0;
}

.video-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

.video-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.video-item .caption {
    padding: 15px;
    font-size: 0.95em;
    color: #e0e0e0;
    text-align: center;
    background-color: #0f0f1d;
    position: static;
    padding-top: 10px;
}

.more-content-prompt {
    text-align: center;
    margin-top: 40px;
    font-size: 1.2em;
}

.more-content-prompt a {
    color: #00bcd4;
    text-decoration: none;
    transition: color 0.3s ease;
}

.more-content-prompt a:hover {
    color: #64ffda;
    text-decoration: underline;
}


/* 響應式設計：小螢幕裝置調整 */
@media (max-width: 600px) {
    .image-gallery-grid,
    .video-gallery-grid {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .image-gallery-grid .gallery-item img {
        height: 180px;
    }

    .video-item {
        padding-bottom: 56.25%;
    }
}

/* --- JavaScript 捲動漸顯動畫樣式 --- */

/* 初始狀態：元素不可見且向下偏移 */
.reveal {
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 激活狀態：元素可見且回到原位 */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 新增：文字置中樣式 */
.text-center {
    text-align: center;
}

/* =========================================================
   響應式設計：針對手機版面優化 (僅在特定螢幕尺寸下生效)
   ========================================================= */

@media (max-width: 768px) {
    /* 通用調整 */
    body {
        font-size: 15px; /* 基礎字體大小微調 */
    }

    .container {
        width: 95%; /* 內容區塊寬度增加，減少左右空白 */
        padding: 20px 0; /* 上下內距調整 */
    }

    section {
        padding: 20px; /* 區塊內距減少 */
        margin-bottom: 20px; /* 區塊底部邊距減少 */
    }

    section h2 {
        font-size: 1.8em; /* 區塊標題縮小 */
        margin-bottom: 20px;
    }

    /* Header 在小螢幕下的調整 */
    header .container {
        flex-direction: column; /* 垂直堆疊Header內容 */
        align-items: center; /* 置中對齊 */
        padding: 15px 0; /* 調整Header容器內距 */
    }

    .header-right-logo {
        position: static; /* 取消絕對定位，讓其在流動中 */
        width: 100%; /* 確保Logo區塊佔滿寬度 */
        text-align: center; /* 置中Logo */
        margin-bottom: 10px; /* Logo與標題間距 */
        transform: none; /* 移除桌面版的 translateY */
        top: auto; /* 取消桌面版的 top */
        right: auto; /* 取消桌面版的 right */
    }

    .header-right-logo img {
        max-width: 80px; /* 限制Logo大小 */
    }

    .header-content-center {
        text-align: center; /* 確保標題和標語置中 */
        padding: 0 15px; /* 左右內距 */
    }

    header h1.neon-text {
        font-size: 2.5em; /* 小螢幕標題縮小 */
        letter-spacing: 1px;
        margin-top: 0;
        margin-bottom: 5px;
    }
    header p.slogan {
        font-size: 1.1em; /* 小螢幕 slogan 縮小 */
        margin-top: 5px;
    }
    
    header .hero-banner {
        min-height: 250px; /* 小螢幕下 Hero Banner 高度調整 */
        padding: 20px;
    }

    /* 導覽列調整 */
    nav ul {
        flex-direction: column; /* 導覽列項目垂直堆疊 */
        align-items: center; /* 項目置中 */
        padding: 10px 0;
    }

    nav ul li {
        margin: 5px 0; /* 垂直邊距 */
        width: 90%; /* 讓每個導覽項目佔據較多寬度，方便點擊 */
        text-align: center;
    }

    nav ul li a {
        padding: 10px 15px; /* 增加點擊區域 */
        font-size: 1em; /* 調整字體大小 */
    }

    /* 按鈕調整 */
    .btn {
        display: block; /* 按鈕在小螢幕上獨佔一行 */
        width: calc(100% - 30px); /* 寬度佔滿並留內距 */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px; /* 增加按鈕間距 */
        padding: 10px 15px; /* 調整按鈕內距 */
        font-size: 0.95em; /* 調整按鈕文字大小 */
    }
    .call-to-action-small .btn {
        margin: 10px auto; /* 調整小型行動呼籲按鈕間距 */
    }

    /* 圖片庫和影片庫調整 */
    .gallery-grid, .video-grid {
        grid-template-columns: 1fr; /* 在小螢幕上只顯示單欄 */
        gap: 20px; /* 減少間距 */
        padding: 15px;
    }

    .gallery-item img {
        height: 200px; /* 確保圖片高度適中 */
    }

    .video-item {
        padding-bottom: 56.25%; /* 保持影片比例 */
    }
    .video-item .caption {
        padding: 10px; /* 調整影片標題內距 */
        font-size: 0.9em;
    }

    /* 關於我們頁面調整 */
    .about-intro-content {
        flex-direction: column; /* 垂直堆疊圖文內容 */
        align-items: center;
        padding: 15px;
    }

    .about-intro-content .image-content {
        width: 100%; /* 圖片佔滿寬度 */
        margin-bottom: 15px; /* 圖片下方間距 */
    }

    .team-management .grid-container {
        grid-template-columns: 1fr; /* 垂直堆疊管理團隊項目 */
        gap: 20px;
        padding: 15px;
    }

    /* 聯絡我們頁面調整 */
    .contact-container {
        flex-direction: column; /* 垂直堆疊聯繫資訊和表單 */
        gap: 20px;
        padding: 20px;
    }

    .contact-info {
        padding: 20px;
    }

    .contact-item {
        flex-direction: column; /* 聯絡項目中的圖示和文字垂直堆疊 */
        align-items: flex-start;
        padding: 10px 15px;
    }

    .contact-item h4 {
        margin-bottom: 5px;
        min-width: unset; /* 取消最小寬度限制 */
    }

    .social-links-contact {
        flex-direction: column; /* 社群連結垂直堆疊 */
        gap: 10px;
        align-items: center;
    }
    
    /* 招募資訊頁面調整 */
    .recruitment-section h3 {
        flex-direction: column; /* 招募標題圖示和文字垂直堆疊 */
        text-align: center;
    }
    .recruitment-section h3 i {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .recruitment-section ul li {
        flex-direction: column; /* 列表項目垂直堆疊 */
        align-items: flex-start;
    }
    .recruitment-section ul li i {
        margin-right: 0;
        margin-bottom: 5px;
    }
    .recruitment-section .note {
        flex-direction: column;
        align-items: flex-start;
    }
    .recruitment-section .note i {
        margin-right: 0;
        margin-bottom: 5px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px; /* 更小的螢幕，基礎字體再縮小 */
    }

    .container {
        padding: 15px 0; /* 更小的內距 */
    }

    section {
        padding: 15px; /* 區塊內距進一步減少 */
    }

    section h2 {
        font-size: 1.5em; /* 區塊標題再縮小 */
        margin-bottom: 15px;
    }

    header h1.neon-text {
        font-size: 2em; /* 標題字體更小 */
    }
    header p.slogan {
        font-size: 1em; /* 標語字體更小 */
    }
    
    header .hero-banner {
        min-height: 200px; /* Hero Banner 高度再縮小 */
    }

    nav ul li a {
        padding: 8px 10px; /* 導覽列連結內距再減少 */
        font-size: 0.9em;
    }

    .btn {
        padding: 8px 12px; /* 按鈕內距再減少 */
        font-size: 0.9em;
    }

    .gallery-item img {
        height: 180px; /* 圖片高度再縮小 */
    }
}