/* --------------------------------------------------------------------------
   1. 全站基礎設定與變數 (Variables & Base)
   ========================================================================== */
/* 全站 125% 放大設定 */
@media (min-width: 1025px) {
    html {
        zoom: 1.15;
    }
}

:root {
    --space-dark: #0f1c33; 
    --space-blue: #1a2a4c;
    --nebula-blue: #284a8c;
    --gold: #f9d976;
    --gold-glow: rgba(249, 217, 118, 0.6);
    --text-light: #e0e6ed;
    --cyan-glow: #00f0ff;
    --white: #ffffff;
    --sidebar-width: 305px;
}

body {
    margin: 0; 
    padding: 0; 
    font-family: 'Helvetica Neue', Helvetica, Arial, '微軟正黑體', sans-serif;
    background: radial-gradient(circle at 50% 0%, var(--nebula-blue) 0%, var(--space-dark) 80%);
    color: var(--text-light); 
    line-height: 1.6; 
    background-attachment: fixed; 
    overflow-x: hidden; 
    display: flex;
    min-height: 100vh;
}

/* --------------------------------------------------------------------------
   2. 星際背景與漂浮動畫 (Background & Animations)
   ========================================================================== */
.orbit {
    position: fixed; top: 50%; left: 50%; width: 200vw; height: 200vw;
    border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 50%;
    transform: translate(-50%, -50%); z-index: -3; animation: rotateOrbit 100s linear infinite;
}
.orbit::before {
    content: ''; position: absolute; top: 10%; left: 10%; width: 5px; height: 5px;
    background: var(--cyan-glow); border-radius: 50%; box-shadow: 0 0 20px 5px var(--cyan-glow);
}
@keyframes rotateOrbit { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.floating-icon {
    position: fixed; opacity: 0.15; z-index: -2; pointer-events: none;
    animation: float-icon 20s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
.icon-1 { top: 15%; left: 8%; font-size: 3.5em; animation-duration: 25s; animation-delay: 0s; }
.icon-2 { top: 25%; right: 12%; font-size: 2.5em; animation-duration: 18s; animation-delay: -5s; }
.icon-3 { bottom: 15%; left: 10%; font-size: 3em; animation-duration: 22s; animation-delay: -10s; }
.icon-4 { top: 60%; right: 8%; font-size: 2em; animation-duration: 15s; animation-delay: -2s; }
.icon-5 { bottom: 10%; right: 20%; font-size: 2.8em; animation-duration: 28s; animation-delay: -15s; }
.icon-6 { top: 10%; left: 45%; font-size: 1.8em; animation-duration: 20s; animation-delay: -7s; }
.icon-7 { top: 35%; left: 20%; font-size: 2em; animation-duration: 26s; animation-delay: -3s; }
.icon-8 { bottom: 30%; right: 5%; font-size: 3.2em; animation-duration: 19s; animation-delay: -12s; }
.icon-9 { top: 50%; left: 5%; font-size: 2.5em; animation-duration: 24s; animation-delay: -8s; }
.icon-10 { top: 75%; left: 35%; font-size: 1.5em; animation-duration: 16s; animation-delay: -4s; }
.icon-11 { top: 20%; right: 30%; font-size: 2.2em; animation-duration: 21s; animation-delay: -11s; }
.icon-12 { bottom: 5%; left: 25%; font-size: 2.8em; animation-duration: 27s; animation-delay: -6s; }
@keyframes float-icon { 0% { transform: translateY(0) rotate(0deg); } 33% { transform: translateY(-25px) rotate(10deg); } 66% { transform: translateY(15px) rotate(-10deg); } 100% { transform: translateY(0) rotate(0deg); } }

.stars {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -4;
    background-image: radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 40px 70px, rgba(0, 240, 255, 0.8), rgba(0,0,0,0)), radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)), radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 130px 80px, rgba(249, 217, 118, 0.8), rgba(0,0,0,0));
    background-repeat: repeat; background-size: 250px 250px; opacity: 0.7;
}

/* --------------------------------------------------------------------------
   3. 左側控制台導覽列 (Sidebar Console)
   ========================================================================== */
.sidebar {
    position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh;
    background: rgba(11, 21, 40, 0.85); backdrop-filter: blur(15px); border-right: 1px solid rgba(0, 240, 255, 0.2);
    padding: 30px 20px; box-sizing: border-box; z-index: 100; display: flex; flex-direction: column; box-shadow: 5px 0 20px rgba(0, 0, 0, 0.5);
}
.sidebar-title { color: var(--white); font-size: 1.4em; font-weight: bold; text-align: center; margin-bottom: 30px; letter-spacing: 2px; text-shadow: 0 0 10px var(--cyan-glow); border-bottom: 1px dashed rgba(249, 217, 118, 0.4); padding-bottom: 15px; }
.nav-link { display: block; padding: 15px 20px; margin-bottom: 15px; color: #b0c2d6; text-decoration: none; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border-left: 4px solid transparent; transition: all 0.3s ease; font-size: 1.1em; font-weight: bold; letter-spacing: 1px; }
.nav-link:hover, .nav-link.active { background: rgba(0, 240, 255, 0.1); border-left: 4px solid var(--cyan-glow); color: var(--white); box-shadow: 0 0 15px rgba(0, 240, 255, 0.2); transform: translateX(5px); }

/* --------------------------------------------------------------------------
   4. 右側主內容區與頂部結構 (Main Content & Header)
   ========================================================================== */
.main-content { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); padding: 20px 40px; box-sizing: border-box; min-height: 100vh; }
.content-section { max-width: 800px; margin: 0 auto 60px auto; padding-top: 10px; animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.page-top-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;
}
.header-left-group {
    display: flex; align-items: center;
}
.school-logo {
    height: 55px; width: auto; filter: brightness(0) invert(1) opacity(0.85);
}

/* 讓包住 Logo 的 a 標籤不會有奇怪的底線 */
.header-left-group a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

/* Logo 懸停特效：微微放大並增加科技光暈 */
.school-logo {
    height: 55px !important;
    width: auto !important;
    filter: brightness(0) invert(1) opacity(0.85) !important;
    transition: all 0.3s ease !important; /* 加上轉場動畫 */
}

.header-left-group a:hover .school-logo {
    transform: scale(1.05); /* 放大 5% */
    filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(0, 240, 255, 0.8)) !important; /* 變亮並發出青色光芒 */
}

/* 返回母艦火箭按鈕 */
.rocket-home {
    display: flex; align-items: center; gap: 10px; text-decoration: none; 
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.4));
}
.rocket-text {
    color: var(--cyan-glow); font-size: 1.1em; font-weight: bold; letter-spacing: 2px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.rocket-icon {
    font-size: 2.2em;
}
.rocket-home:hover {
    transform: translateY(-5px) scale(1.05); filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.9));
}
.rocket-home:hover .rocket-text {
    color: var(--white); text-shadow: 0 0 10px var(--cyan-glow);
}
.top-divider {
    border: 0; height: 2px; background: linear-gradient(to right, rgba(0, 240, 255, 0.4), transparent); margin-bottom: 40px;
}

/* --------------------------------------------------------------------------
   5. 首頁元件排版 (Home View Layout)
   ========================================================================== */
.home-split-layout { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.home-text-col { flex: 1; text-align: left; }
.home-text-col h1 { font-size: 4.2em; margin-top: 0; margin-bottom: 10px; text-align: left; color: var(--white); letter-spacing: 6px; text-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px var(--cyan-glow); line-height: 1.1; }
.home-text-col .subtitle { text-align: left; margin-bottom: 30px; color: var(--gold); font-size: 1.5em; letter-spacing: 2px; font-weight: bold; }
.home-text-col .intro-text { margin: 0; max-width: 100%; text-align: left; font-size: 1.05em; color: #b5c7dd; border: 1px dashed rgba(0, 240, 255, 0.3); padding: 20px; border-radius: 8px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(4px); line-height: 1.8; }
.home-img-col { flex: 1; display: flex; justify-content: center; }
.home-img-col .hero-image { max-width: 100%; width: 400px; margin-bottom: 0; border-radius: 15px; box-shadow: 0 0 40px rgba(249, 217, 118, 0.3), 0 0 20px rgba(0, 240, 255, 0.2); animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0px); } }

/* 🚀 報名程序按鈕系統 */
.register-btn {
    display: inline-block;
    padding: 15px 40px;
    background: transparent;
    border: 2px solid var(--cyan-glow);
    color: var(--cyan-glow);
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.4s;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}
.register-btn:hover {
    background: var(--cyan-glow);
    color: #0f1c33;
    box-shadow: 0 0 25px var(--cyan-glow);
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   6. 通用模組卡片樣式 (Data Cards & Map Stack)
   ========================================================================== */
.section-header { color: var(--gold); font-size: 2em; text-align: center; margin-bottom: 30px; letter-spacing: 3px; text-shadow: 0 0 10px rgba(249, 217, 118, 0.4); border-bottom: 2px solid rgba(0, 240, 255, 0.3); padding-bottom: 10px; }
.info-card { background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 30px; margin-bottom: 25px; backdrop-filter: blur(10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); box-sizing: border-box; }
.info-card ul { list-style-type: none; padding: 0; } 
.info-card li { margin-bottom: 15px; font-size: 1.1em; display: flex; align-items: flex-start; } 
.info-card li::before { content: '✦'; color: var(--cyan-glow); margin-right: 10px; flex-shrink: 0; }

/* 地圖與交通的上下排列安全外殼 */
.map-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   7. 時空日誌時間軸特製 (Timeline Modules)
   ========================================================================== */
.day-card { position: relative; overflow: hidden; transition: all 0.4s ease; }
.day-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--cyan-glow), var(--gold)); box-shadow: 0 0 15px var(--cyan-glow); }
.day-card:hover { transform: translateY(-5px); border: 1px solid rgba(249, 217, 118, 0.3); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }
.day-title { color: var(--gold); font-size: 1.6em; border-bottom: 1px solid rgba(249, 217, 118, 0.2); padding-bottom: 15px; margin-top: 0; margin-bottom: 25px; }
.timeline-wrapper { border-left: 2px dashed rgba(255, 255, 255, 0.3); margin-left: 10px; padding-left: 25px; position: relative; }
.timeline-item { display: flex; margin-bottom: 25px; align-items: flex-start; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -32px; top: 8px; width: 12px; height: 12px; background-color: var(--space-blue); border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 10px var(--gold-glow); z-index: 1; transition: all 0.3s ease; }
.timeline-item:hover::before { background-color: var(--gold); transform: scale(1.2); }
.time { color: var(--cyan-glow); font-family: monospace; font-size: 1.1em; min-width: 130px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 240, 255, 0.4); padding: 5px 12px; border-radius: 20px; text-align: center; margin-right: 20px; flex-shrink: 0; }
.event-details { flex-grow: 1; background: rgba(255, 255, 255, 0.03); padding: 10px 15px; border-radius: 8px; }
.event-name { color: var(--white); font-size: 1.15em; font-weight: bold; margin-bottom: 5px; } .event-location { color: #b0c2d6; font-size: 0.9em; }

/* --------------------------------------------------------------------------
   8. 響應式適配系統 (Responsive Web Design)
   ========================================================================== */
/* 中型螢幕：平板電腦適配 (768px ~ 1024px) */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 240px; /* 收窄側邊欄，釋放內容空間 */
    }
    .main-content {
        padding: 20px 25px;
    }
    .home-split-layout {
        gap: 30px;
    }
    .home-text-col h1 {
        font-size: 3.5em;
    }
}

/* 小型螢幕：智慧型手機適配 (900px 以下與主要移動端切換點) */
/* ==========================================================================
   8. 隱藏式側欄手機版適配 (Mobile Hamburger Menu)
   ========================================================================== */
@media (max-width: 900px) {
    body { flex-direction: column; }

    /* 顯示漢堡按鈕 */
    .menu-toggle {
        display: block;
        position: fixed;
        top: 15px;
        left: 15px; /* 放在左上角 */
        z-index: 1100; /* 確保在最上層 */
        background: rgba(11, 21, 40, 0.8);
        border: 1px solid var(--cyan-glow);
        color: var(--cyan-glow);
        font-size: 1.5em;
        padding: 8px 15px;
        border-radius: 6px;
        cursor: pointer;
        backdrop-filter: blur(5px);
        box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    }

    /* 側邊欄：手機版預設隱藏在左側螢幕外 (-305px) */
    .sidebar {
        position: fixed;
        top: 0;
        left: -305px; /* 寬度是多少就縮進去多少 */
        width: var(--sidebar-width);
        height: 100vh;
        flex-direction: column;
        overflow-y: auto; /* 允許上下滑動選單 */
        white-space: normal;
        padding: 30px 20px;
        border-right: 1px solid rgba(0, 240, 255, 0.3);
        border-bottom: none;
        z-index: 1050;
        transition: left 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); /* 流暢的彈出動畫 */
    }

    /* 當 JS 加上 .open 時，側邊欄滑動出來 */
    .sidebar.open {
        left: 0;
    }

    /* 讓側欄標題在手機版重新顯示 */
    .sidebar-title {
        display: block;
        font-size: 1.2em;
        margin-bottom: 25px;
    }

    /* 恢復選單項目的區塊排列 */
    .nav-link {
        display: block;
        margin-bottom: 12px;
        margin-right: 0;
        padding: 12px 20px;
    }

    /* 點擊遮罩：防誤觸 */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(3px);
        z-index: 1040;
        display: none; /* 預設隱藏 */
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active {
        display: block;
        opacity: 1;
    }

    /* 主內容區：挪出空間給左上角按鈕 */
    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 70px 20px 20px 20px; /* 頂部加高，才不會擋到 logo 和火箭 */
    }

    .page-top-header { flex-direction: column; gap: 10px; text-align: center; }
    .school-logo { height: 40px; }
    .rocket-text { display: none; }
    .top-divider { margin-bottom: 20px; }

    .home-split-layout { flex-direction: column; text-align: center; gap: 30px; }
    .home-text-col h1 { font-size: 2.5em; }
    .home-img-col .hero-image { width: 250px; }

    .timeline-item { flex-direction: column; }
    .time { margin-bottom: 12px; width: 100%; margin-right: 0; }
    .timeline-item::before { display: none; } /* 手機版隱藏時間軸的小圓點，畫面更乾淨 */
    
    iframe { height: 300px !important; }
}

/* 為了防止電腦版跑版，預設把漢堡按鈕藏起來 */
@media (min-width: 901px) {
    .menu-toggle { display: none; }
    .sidebar-overlay { display: none; }
}

/* --------------------------------------------------------------------------
   版權與聯絡資訊 (Apple 風格 Footer)
   ========================================================================== */
.site-footer {
    padding: 40px 20px 20px 20px;
    margin-top: 60px; 
    color: #7a8fa6; 
    font-size: 0.9em;
    letter-spacing: 1px;
    line-height: 1.8;
}

/* 聯絡資訊區塊 */
.footer-contact p {
    margin: 8px 0;
}

.footer-contact a {
    color: var(--cyan-glow);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-contact a:hover {
    color: var(--white);
    text-shadow: 0 0 8px var(--cyan-glow);
}

/* Apple 風格的橫線 */
.footer-divider {
    border: 0;
    height: 1px;
    background: rgba(0, 240, 255, 0.2); /* 淡淡的螢光青色細線 */
    margin: 20px 0;
}

/* 底部版權與連結區塊 (左右排開) */
.footer-bottom {
    display: flex;
    flex-direction: center;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-links a {
    color: #b0c2d6;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--white);
}

/* 連結中間的直線分隔符號 */
.footer-links .separator {
    color: #4a5d73; 
}

.design-credit {
    font-family: monospace; 
    color: rgba(255, 255, 255, 0.4);
}

/* 手機版排版調整：螢幕變小時自動變成置中垂直排列 */
@media (max-width: 900px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
    .footer-links {
        justify-content: center;
    }
    .footer-contact {
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   內容區塊專用超連結樣式
   ========================================================================== */
.content-link {
    color: var(--cyan-glow); /* 預設為螢光青色 */
    text-decoration: none; /* 拿掉預設的醜醜底線 */
    font-weight: bold;
    border-bottom: 1px dashed var(--cyan-glow); /* 改用科技感的虛線底線 */
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

/* 滑鼠游標移過去的發光特效 */
.content-link:hover {
    color: var(--white); /* 文字變白色 */
    background-color: rgba(0, 240, 255, 0.1); /* 微微的青色背景光 */
    border-bottom: 1px solid var(--white); /* 底線變實線 */
    text-shadow: 0 0 8px var(--cyan-glow); /* 文字發光 */
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   終極修復：清單文字自動換行與星星對齊
   ========================================================================== */
.info-card ul li {
    display: block !important;      /* 💡 徹底關閉會把文字切碎的 flex 佈局 */
    position: relative !important;  /* 設定相對定位，作為星星的定位基準 */
    padding-left: 24px !important;  /* 留出左邊的空間給藍色星星 */
    margin-bottom: 15px !important; /* 每個項目拉開一點距離 */
    line-height: 1.6 !important;    /* 設定舒適的閱讀行距 */
}

/* 讓藍色星星固定在左側，不會因為文字換行而跟著亂跑 */
.info-card ul li::before {
    position: absolute !important;  /* 絕對定位，獨立漂浮 */
    left: 0 !important;             /* 釘在最左邊 */
    top: 2px !important;            /* 微調高度，跟第一行文字對齊 */
}

/* 確保所有粗體字都能自然換行，不再死硬撐開版面 */
.info-card ul li strong {
    white-space: normal !important;
    flex-shrink: 1 !important;
}