/* 定義全域變數 (CSS Variables)，方便統一修改顏色與設定 */
:root {
    /* 主要色彩 (基於 #76D2DB) */
    --primary-color: #76D2DB; /* 主色調：指定的清透水藍色 */
    --primary-light: #E0F7FA; /* 淺色版：用於背景或懸停提示 */
    --primary-dark: #4DA7B0;  /* 深色版：用於文字或點擊狀態 */
    --secondary-gray: #E2E8F0; /* 次要按鈕灰色系 */
    
    /* 語意色彩 (Success, Error, Warning) */
    --success-color: #10B981;
    --error-color: #EF4444;
    --warning-color: #F59E0B;

    /* 基礎配色 */
    --secondary-color: #2C3E50; /* 次色調：保留深藍以維持對比與可讀性 */
    --text-color: #334155;    /* 主要文字顏色：深灰藍色 */
    --text-light: #64748B;    /* 次要說明文字顏色 */
    --bg-light: #F8FAFC;      /* 頁面整體背景色 */
    --white: #ffffff;
    --card-shadow: 0 8px 20px rgba(44, 62, 80, 0.05); /* 柔和的卡片陰影 */
    --transition: all 0.2s ease; /* 微動畫平滑過渡 (改為0.2s) */
}

/* 全域重置 (Reset CSS)：清除各瀏覽器的預設樣式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 確保邊距 (padding) 不會撐大元素的寬度 */
}

/* 網頁整體基本設定 */
body {
    font-family: 'IBM Plex Sans JP', sans-serif; /* 套用指定的現代感字體 */
    color: var(--text-color);
    background-color: var(--bg-light);
    line-height: 1.7; /* 內文 line-height 設定為 1.6~1.8，提升易讀性 */
    letter-spacing: 0.02em; /* 適度調整字距 */
}

/* 程式碼字體設定 */
code, pre {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* 標題字級與字重分層 */
h1 { font-size: 2.5rem; font-weight: 700; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 500; }
h4 { font-size: 1.25rem; font-weight: 500; }

/* 共用內容容器：限制最大寬度並置中 */
.container {
    max-width: 1200px;
    margin: 0 auto; /* 左右自動推移達到置中 */
    padding: 0 20px;
}

/* ==================================
   導覽列樣式 (Header & Navigation)
   ================================== */
.header {
    background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 毛玻璃模糊效果，充滿現代感 */
    position: fixed; /* 固定在頁面頂端 */
    width: 100%;
    top: 0;
    z-index: 1000; /* 確保導覽列永遠在最上層，不會被其他元素遮擋 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 底部微陰影 */
}

.header .container {
    display: flex;
    justify-content: space-between; /* 讓 Logo 和選單分開至畫面兩側 */
    align-items: center; /* 垂直置中排列 */
    height: 70px;
}

.logo {
    font-size: 1.5rem;
    color: var(--secondary-color);
    font-weight: 700;
}

.nav ul {
    display: flex; /* 讓選單變成橫向排列 */
    list-style: none; /* 移除預設的列表圓點 */
    gap: 30px; /* 每一個選單項目之間的間距 */
}

.nav a {
    text-decoration: none; /* 移除超連結下方底線 */
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition); /* 添加顏色漸變動畫 */
}

.nav a:hover {
    color: var(--primary-color); /* 滑鼠游標移過去時變成主色調的綠色 */
}

/* ==================================
   首頁主要橫幅 (Hero Section)
   ================================== */
.hero {
    margin-top: 70px; /* 避開固定的導覽列高度 */
    /* 背景圖片設定：深邃的海藍色與清新的水藍色半透明漸層，營造專業醫療感 */
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(0, 227, 227, 0.35)), url('https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
    height: 80vh; /* 佔據螢幕高度的 80% */
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--white);
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 文字加上陰影，增加閱讀清晰度 */
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* ==================================
   按鈕共用樣式 (Buttons)
   ================================== */
.cta-button {
    background: var(--primary-color); /* 主按鈕使用主色 */
    color: var(--secondary-color); /* 為了高對比，文字採用深灰藍色 */
    border: none;
    padding: 12px 30px; /* 統一按鈕 padding */
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px; /* 全站元件圓角統一為 8px */
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: var(--transition); /* 互動平滑過渡 */
}

.cta-button:hover {
    background: var(--primary-dark);
    color: var(--white);
    transform: translateY(-2px); /* 懸浮向上位移 */
}

/* 空心按鈕 (次要操作) */
.cta-button.outline {
    background: var(--secondary-gray); /* 改為灰色系輔助按鈕 */
    border: none;
    color: var(--text-color);
    box-shadow: none;
}

.cta-button.outline:hover {
    background: #CBD5E1; /* 更深的灰色系 hover */
    color: var(--secondary-color);
}

/* ==================================
   內容區塊共用樣式 (Sections)
   ================================== */
section {
    padding: 80px 0; /* 每個大區塊上下保留呼吸空間 */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.section-desc {
    text-align: center;
    max-width: 800px; /* 限制寬度讓文字不至於一行太長不好閱讀 */
    margin: 0 auto 50px;
    color: var(--text-light);
    font-size: 1.1rem;
}

/* ==================================
   課程特色區塊 (Features)
   ================================== */
.features-grid {
    display: grid; /* 使用 Grid 網格排版 (Modern CSS Layout) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動適應螢幕，最少 300px，剩餘空間均分 */
    gap: 30px; /* 卡片與卡片之間的距離 */
    margin-top: 40px;
}

.feature-card {
    background: var(--white);
    padding: 30px; /* 統一內距 padding */
    border-radius: 8px; /* 統一圓角 border-radius */
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    border-bottom: 4px solid transparent; /* 預留底部邊框的空間，避免 Hover 時高度跳動 */
}

.feature-card:hover {
    transform: translateY(-10px); /* 滑鼠經過時整張卡片往上浮起 */
    border-bottom-color: var(--primary-color); /* 底部出現綠色裝飾線條 */
}

.feature-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

/* ==================================
   指導專家區塊 (Instructor)
   ================================== */
.instructor-section {
    background-color: var(--white); /* 使用白色背景區隔上下區塊 */
}

.instructor-profile {
    display: flex;
    flex-wrap: wrap; /* 允許在手機版換行 */
    align-items: center;
    justify-content: center;
    gap: 40px;
    max-width: 900px;
    margin: 0 auto;
    background: var(--white); /* 白色背景保持畫面整潔清爽 */
    padding: 30px; /* 統一內距 padding */
    border-radius: 8px; /* 統一圓角 border-radius */
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

.instructor-profile:hover {
    transform: translateY(-5px); /* 微妙的上浮動畫，讓區塊更活潑 */
}

.instructor-img {
    width: 280px; /* 放大照片尺寸 */
    height: auto; /* 讓高度靠比例自動調整，不裁切照片內容 */
    border-radius: 8px; /* 統一圓角 border-radius */
    object-fit: cover; /* 保持圖片比例填充 */
    border: 5px solid var(--white);
    box-shadow: var(--card-shadow); /* 圖片邊緣跟隨統一卡片陰影 */
}

.instructor-info {
    flex: 1; /* 佔據左圖右文剩餘空間 */
    min-width: 300px;
    text-align: left;
}

.instructor-info h3 {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 5px;
}

.instructor-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 20px;
}

.instructor-info p.instructor-desc {
    color: var(--text-color);
    line-height: 1.8;
}

/* ==================================
   頁尾 (Footer)
   ================================== */
.footer {
    background-color: var(--secondary-color); /* 深色頁尾收尾 */
    color: var(--white);
    text-align: center;
    padding: 30px 0;
}

/* ==================================
   加入研究區塊 (Login/Register Form)
   ================================== */
.login-section {
    background-color: var(--bg-light);
}

.form-wrapper {
    max-width: 400px;
    margin: 0 auto;
    background: var(--white);
    padding: 30px; /* 統一內距 padding */
    border-radius: 8px; /* 統一圓角 border-radius */
    box-shadow: var(--card-shadow);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form-group label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--secondary-color);
}

.form-group input {
    padding: 12px 15px; /* 統一內距 padding */
    border: 1px solid var(--secondary-gray);
    border-radius: 8px; /* 統一圓角 border-radius */
    font-size: 1rem;
    font-family: inherit;
    transition: var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(118, 210, 219, 0.3); /* 將光暈改為新主色的 RGBA ( #76D2DB = 118, 210, 219 ) */
}

/* ==================================
   醫療諮詢區塊 (Consultation)
   ================================== */
.consultation-section {
    background-color: var(--white);
}

.consultation-card {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    padding: 30px; /* 統一內距 padding */
    border-radius: 8px; /* 統一圓角 border-radius */
    text-align: center;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--secondary-gray); /* 統一使用次要灰色系作為邊框 */
}

.consultation-card h3 {
    font-size: 1.8rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.consultation-desc {
    color: var(--text-color);
    margin-bottom: 25px;
    line-height: 1.8;
}

.doctor-info {
    background: var(--white);
    padding: 15px 20px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 20px;
    color: var(--secondary-color);
    text-align: left;
    line-height: 1.8;
    border-left: 4px solid var(--primary-color);
}

/* ==================================
   動畫效果設定 (Animations)
   ================================== */
/* 預先設定好要淡入元素的初始狀態 (呈現完全透明、往下偏移的樣子) */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 當 JavaScript 偵測到元素進入畫面，加上這個 class 後即可啟動動畫 (變不透明、回到原位) */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 響應式設計 (RWD)：手機優先與斷點擴展 */
@media (max-width: 375px) {
    /* 確保 375px 以下顯示完美 */
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 1rem; }
    body { font-size: 0.95rem; }
    .container { padding: 0 15px; }
    .feature-card, .instructor-profile, .form-wrapper, .consultation-card { padding: 20px; }
    .nav ul { gap: 10px; } /* 減小導覽列間距 */
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem; /* 縮小手機版大標題 */
    }
    .nav ul {
        display: none; /* 手機版空間有限，暫時隱藏上方橫向選單以保持簡潔 */
    }
    
    /* 調整專家區塊在手機版的排版，由左圖右文轉換為上下對齊 */
    .instructor-profile {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    .instructor-info {
        text-align: center;
    }
}

/* 斷點設定：針對桌面提供更大的間距與排版 */
@media (min-width: 1200px) {
    .hero-title {
        font-size: 4rem;
    }
    .section-title {
        font-size: 3rem;
    }
    .container {
        padding: 0 40px;
    }
}