/* 定義全域變數方便修改 */
:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --glass-white: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
}

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

body {
    background: #2b61e7; /* 深藍底色 */
    /* 這裡可以換成你喜歡的背景圖 */
    background-image: linear-gradient(135deg, #4a749b 0%, #06173d 100%);
    background-attachment: fixed;
    color: rgb(27, 141, 255);/*文字顏色*/
    font-family: sans-serif;
    display: flex;
    min-height: 100vh;
}

/* 隱藏 Checkbox 本身 */
.menu-checkbox {
    display: none;
}

/* --- 側邊欄樣式 --- */
.sidebar {
    width: var(--sidebar-width);
    background: rgba(0, 70, 247, 0.863);
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--glass-border);
    position: fixed;
    height: 100vh;
    transition: width 0.3s ease;
    z-index: 100;
    overflow: hidden;
    
}

/* 當 Checkbox 被勾選時，縮小側邊欄 */
.menu-checkbox:checked ~ .sidebar {
    width: var(--sidebar-collapsed-width);
}

/* 開關按鈕：確保水平與垂直都居中 */
.toggle-btn {
    color: #ffffff; /* 這裡設定你想要的開關顏色，例如金色 */
    font-size: 1.5rem;
    display: flex;
    justify-content: center; /* 水平居中核心 */
    align-items: center;     /* 垂直居中核心 */
    height: 70px;            /* 固定高度 */
    width: 100%;             /* 寬度撐滿側邊欄 */
    cursor: pointer;
    font-size: 1.4rem;
}

.sidebar ul {
    list-style: none;
    margin-top: 10px;
}

.sidebar a {
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255); /*側邊圖片顏色*/
    text-decoration: none;
    height: 60px;
    white-space: nowrap;
    transition: background 0.2s;
}

.sidebar a:hover {
    background: rgba(255, 232, 25, 0.918); /*側邊選擇顏色*/
}

/* 讓選單圖示始終保持在側邊欄中央 */
.sidebar i {
    min-width: var(--sidebar-collapsed-width); /* 圖示佔位寬度等於收合寬度 */
    text-align: center;
    font-size: 1.2rem;
}

/* 收合時隱藏文字 */
.menu-checkbox:checked ~ .sidebar span {
    display: none;
}

/* --- 右側內容與置中邏輯 --- */
.content {
    flex: 1;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
    display: flex;
    justify-content: center; /* 卡片水平居中 */
    align-items: flex-start; /* 卡片靠上對齊，可改為 center */
    padding: 20px 20px;      /* 上方留白 80px */
    
}

/* 選單收合時，內容區跟著調整左邊距 */
.menu-checkbox:checked ~ .content {
    margin-left: var(--sidebar-collapsed-width);
}

/* 中央透明卡片 */
.main-card {
    width: 95%;          /* 在小螢幕時佔據 95% 的寬度 */
    max-width: 1200px;   /* 將最大寬度從 800px 調大至 1200px */
    
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);/*陰影*/
    
    /* 確保在大寬度下依然置中 */
    margin: 0 auto; 
    overflow: hidden;
}

/* 為了配合變寬的頁面，橫幅高度也可以稍微縮減或調整 */
.banner {
    padding: 40px 60px; /* 減少上下內距，增加左右內距 */
    text-align:center;   /* 如果寬度很大，標題靠左通常比置中好看 */
    /* 漸層色  */
     background: linear-gradient(135deg, #0099ff, #90e9ff);
}
.page-body {
    padding: 40px;
    line-height: 1.8;
}

/* 放大橫幅（Banner）的大標題 */
.banner h1 {
    font-size: 3.5rem;   /* 原本可能是 2.5rem，調大至 3.5rem */
    font-weight: bold;   /* 加粗讓它更有份量 */
}

/* 放大頁面內文 */
.page-body p {
    font-size: 1.25rem;  /* 稍微放大，適合閱讀 */
    line-height: 1.8;    /* 增加行高，文字才不會擠在一起 */
}

.page-body h2{
    font-size: 2rem;
}

/* 放大側邊選單的文字 */
.sidebar span {
    font-size: 1.1rem;   /* 讓選單文字更清晰 */
    letter-spacing: 1px; /* 增加字距，質感更好 */
}

/* 側欄圖示通用樣式 */
.nav-icon {
    width: 24px;         /* 設定適合的大小 */
    height: 24px;
    margin-right: 12px;  /* 圖片與文字的間距 */
    object-fit: contain; /* 確保圖片比例不變形 */
    vertical-align: middle; 
    transition: transform 0.2s ease;
}

/* 確保選單連結是 Flex 佈局，這樣圖示和文字才會完美對齊 */
.sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
}

/* 當滑鼠碰到選單時，讓圖片有一點縮放效果 */
.sidebar ul li a:hover .nav-icon {
    transform: scale(1.1);
}

/* 針對切換按鈕的圖片微調 (如果需要大一點) */
.toggle-btn .nav-icon {
    margin-right: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

/* 針對側欄圖片標籤 */
.sidebar .nav-icon {
    /* 核心指令：先將亮度降為 0 (變黑)，再反轉顏色 (黑變白) */
    filter: brightness(0) invert(1);
    
    /* 基礎樣式微調 */
    width: 24px;
    height: 24px;
    transition: filter 0.3s ease; /* 讓 hover 效果平滑 */
}

/* 滑鼠碰到選單時，恢復原色（例如圖片原本的藍色） */
.sidebar ul li a:hover .nav-icon {
    filter: none; /* 移除濾鏡 */
}
/*-----------------------------------*/
/* 全域平滑捲動 */
html {
    scroll-behavior: smooth;
}

/* 區塊基礎設定 */
.scroll-section {
    padding: 80px 40px;
    min-height: 50vh;
    border-bottom: 1px solid rgba(255, 255, 255, 0.763);
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

/* 橫向網格佈局 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

/* 通用卡片基礎樣式 */
.info-card {
    background: rgba(255, 255, 255, 0.05); /* 玻璃感半透明 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    /* 動畫過渡：0.4s 讓浮動看起來更絲滑 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(10px);
}

/* 4. 卡片內部元素樣式 */
.info-card i {
    font-size: 3.5rem;
    margin-bottom: 20px;
    display: block;
    color: #3498db; /* 統一圖示顏色，也可以在 HTML 內個別設定 */
}


/* 3. 滑鼠碰到後的顏色與浮動效果 (Hover) */
.skill-hover:hover {
   
    border-color: #3498db;                /* 藍色邊框 */
    transform: translateY(-15px);         /* 向上浮起 15px */
    box-shadow: 0 15px 30px rgba(52, 152, 219, 0.3); /* 藍色發光陰影 */
}

/* 目標卡片：碰到變色浮起 */
.goal-hover:hover {
    background: rgb(255, 255, 255); /* 背景 */
    border-color: #ffffff;                /* 邊框 */
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.89); /* 發光陰影 */
}

.info-card p {
    color: #f7b900;
    font-size: 1rem;
    line-height: 1.6;
}

/* 側欄圖示通用樣式 */
.nav-icon {
    width: 24px;         /* 設定適合的大小 */
    height: 24px;
    margin-right: 12px;  /* 圖片與文字的間距 */
    object-fit: contain; /* 確保圖片比例不變形 */
    vertical-align: middle; 
    transition: transform 0.2s ease;
}

/* 確保選單連結是 Flex 佈局，這樣圖示和文字才會完美對齊 */
.sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
}

/* 當滑鼠碰到選單時，讓圖片有一點縮放效果 */
.sidebar ul li a:hover .nav-icon {
    transform: scale(1.1);
}

/* 針對切換按鈕的圖片微調 (如果需要大一點) */
.toggle-btn .nav-icon {
    margin-right: 0;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

/* 針對側欄圖片標籤 */
.sidebar .nav-icon {
    /* 核心指令：先將亮度降為 0 (變黑)，再反轉顏色 (黑變白) */
    filter: brightness(0) invert(1);
    
    /* 基礎樣式微調 */
    width: 24px;
    height: 24px;
    transition: filter 0.3s ease; /* 讓 hover 效果平滑 */
}

/* 滑鼠碰到選單時，恢復原色（例如圖片原本的藍色） */
.sidebar ul li a:hover .nav-icon {
    filter: none; /* 移除濾鏡 */
}

/* 目標區塊圖片基礎樣式 */
.target-icon, .nav-icon {
    width: 60px;
    height: 60px;
    

    
    transition: all 0.3s ease;
}


.info-card h3 {
    margin-top: 10px;
    color: #008cff;
}

.img-icon{
    width: 80px;

    margin-right: 12px;  /* 圖片與文字的間距 */
    object-fit: contain; /* 確保圖片比例不變形 */
    vertical-align: middle; 
    transition: transform 0.2s ease;
}
.banner h1 {
    font-size: 3.5rem;   /* 原本可能是 2.5rem，調大至 3.5rem */
    font-weight: bold; 
    color: #ffffff;  /* 加粗讓它更有份量 */
}