html, body {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
}

/* 首頁畫面 */

.hero {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 1;
}
.hero.fade-out {
    opacity: 0;
}

.hero-bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 0; 
  }
  
  .hero-bg-layer.active {
    opacity: 1;
    z-index: 0; 
  }
  
  .center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    z-index: 2; 
  }

/* 右上角按鈕 */
.floating-buttons {
    position: fixed; /* 固定在視窗位置 */
    top: 20px;       /* 距離視窗頂部20px */
    right: 20px;     /* 距離視窗右側20px */
    display: flex;
    gap: 10px;
    z-index: 100;    /* 確保按鈕在最上層 */
    align-items: center;  /* 同一排垂直置中 */
}


.btn {
    background: transparent;
    border: none;
    color: #683200;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* 移除連結底線 */
    line-height: 1;       /* 避免字基線造成看起來不齊 */
    padding: 8px 10px;    /* 統一按鈕高度 */
}

.btn:hover {
    color: #ccc;
}

.center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

/* 齒輪轉動 */

.gear {
    font-size: 0.5em; /* 調整齒輪大小 */
    position: absolute;
    top: -10%; /* 調整齒輪垂直位置 */
    right: -0.5em; /* 調整齒輪水平位置 */
    animation: spin 3s linear infinite; /* 啟動動畫 */
    color: #fff; /* 齒輪顏色（白色） */

    /* 新增以下黑色外框效果 */
    text-shadow: 
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
}

@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  

/* 回網頁最上方 */

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.6s;
    padding: 12px 14px;
    border: none;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;
}
#backToTop.show {
    visibility: visible;
}


#backToTop:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

#backToTop i {
    pointer-events: none;
}


/* 底部Email*/

section {
    padding: 60px 20px;
    text-align: center;
}

footer {
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

footer .email {
    letter-spacing: 5px;
}

/* Page 1 */
.faculty-research-section {
    height: 100vh;
    background-color: #fdf5e6;
    padding: 60px 5%;
    box-sizing: border-box; 
    display: flex;               /* ⬅ 讓內部可置中 */
    justify-content: center;     /* ⬅ 水平置中 */
    align-items: center;         /* ⬅ 垂直置中 */
}

.left-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 30px;
  }
  
  .faculty-research-top {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
    align-items: center;
  }
  
  .faculty-content-group,
  .research {
    justify-content: center; /* 垂直置中 */
    text-align: left;         /* 左對齊文字 */
  }
  
  .faculty-info-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;        /* 允許換行 */
  }
  
  .faculty-info-title {
    font-weight: bold;
    color: #5c4200;
    white-space: nowrap;    /* 標題永不換行 */
    flex: 0 0 auto;         /* 不伸展、不壓縮成怪樣 */
  }
  
  .faculty-info-content {
    color: #333;
    flex: 1 1 160px;        /* 有空間就同一行，太窄就往下 */
    min-width: 0;           /* 避免 flex item 溢出 */
  }
  
  
  .faculty-info-title-group i {
    margin-right: 10px;
    color: #5c4200;
  }
  

.faculty-name {
    margin-left: 5%;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 3px solid orange;
    display: inline-block;
}

.faculty-info-item {
    margin-bottom: 15px;
}

.faculty-info,
.research .inbox {
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    text-align: left;
    padding-left: 5%;
    box-sizing: border-box;
}

.research h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    border-bottom: 3px solid orange;
    display: inline-block;
}

.research p {
    font-size: 18px;
    line-height: 1.8;
    margin: 0;
}

.research-center {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* 包住整個圖片區塊並讓它置中 */
.research-center {
    flex: 1.3;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 100vh; 垂直置中 */
  }
  
.research-image {
    width: 80%;          
    aspect-ratio: 4 / 3;  
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    position: relative;
}

  
/* 所有圖片水平排好 */
.slider {
    display: flex;
    transition: transform 0.6s ease-in-out;
  }  
  
.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填滿區塊，自動裁切 */
    flex-shrink: 0;
    display: block;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Page 2 */

.members-section {
    background-color: #fdf5e6;
    padding: 60px 5%;
    text-align: center;
}

.members-section h2 {
    font-size: 32px;
    color: #333;
    border-bottom: 3px solid #835c14;
    display: inline-block;
    margin-bottom: 40px;
}

.member-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.member-row.single {
    justify-content: center;
}

.member-card {
    display: flex;                          /* 新增：橫向排列 */
    align-items: center;                   /* 垂直置中 */
    flex: 1 1 250px;
    background-color: #b58e5c;
    color: #fff;
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    font-size: 16px;
    transition: transform 0.3s ease;
    text-align: left;
    gap: 5vw;                              /* 圖片與文字間距 */
}

/*  教授專用樣式覆蓋 */
.member-card.professor {
    gap: 8vw;  
    max-width: 50vw;
    background-color: #647547; 
}

.member-card:hover {
    transform: translateY(-5px);
}

/* 成員照片：固定一個有限大小的框，圖片完整縮放塞進去（不裁切） */
.member-card img {
    width: clamp(90px, 12vw, 160px);      /* 有限寬度：最小 90px、隨視窗變動、最大 160px */
    aspect-ratio: 3 / 4;                  /* 固定框比例，確保每張卡片排列一致 */
    height: auto;                         /* 交給 aspect-ratio 推導高度 */
    object-fit: contain;                  /* 關鍵：完整顯示圖片，不裁切 */
    object-position: center;              /* 圖片置中 */
    background-color: rgba(255,255,255,0.15); /* 若有留白，給個底色（不想要可刪） */

    border-radius: 10px;
    border: 3px solid #fff;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    object-position: center;

    background-color: transparent; /* 留白透明 */
}

/* 讓圖片真正填滿相框 */
/* .member-photo.professor-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center; 
} */

/* 教授相框：外層控制大小與白框 */
.member-photo.professor-photo {
  width: clamp(120px, 18vw, 220px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 10px;
  border: 3px solid #fff;
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
}

/* 內層圖片：只負責填滿，不要再有邊框/背景/比例 */
.member-photo.professor-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;

  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  aspect-ratio: auto !important;
}

.member-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.member-info h3,
.member-info h4 {
    margin: 0;
    font-weight: bold;
    font-size: 18px;
}


.member-card.professor p {
    margin: 2px 0;
    font-size: 15px;
}

/* Page 3 */

.journals-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5vw;
    background-color: #fdf5e6; 
    padding: 60px 5%;
}

/* 每個 box 平分寬度 */
.publication-box {
    flex: 1 1 45%;
    min-width: 300px;
    background-color: #e8d9b9; 
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    text-align: left;
    box-sizing: border-box;
}

.journals-container h2,
.publication-box h2 {
    margin: 4%;
    font-size: 24px;
    color: #000000;
}

.journals-container ol,
.publication-list ol {
    text-align: left;
    line-height: 1.8;
    padding: 0 5% 0 10%;
    margin-left: 0;
}

.publication-list {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.publication-list.collapsed {
    max-height: 200px;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.expand-btn {
    display: block;
    width: 100%;
    background-color: transparent;
    color: black;
    border: none;
    padding: 12px;
    border-radius: 0 0 5px 5px;
    cursor: pointer;
    font-size: 24px;
    font-family: Arial, sans-serif;
    text-align: center;
    transition: background-color 0.3s ease;
}

.expand-btn:hover {
    background-color: #a17e53;
    color: white;
}

/* 手機(577px – 991px)響應是式設計 */

@media (max-width: 576px) {
    /* Hero 區塊 */
    .hero {
        height: 100vh;
        padding: 1.5rem;
    }


    .center-text {
        font-size: clamp(2rem, 8vw, 3rem);
        text-align: center;
    }


    /* Intro 區塊：左右改上下 */
    .faculty-research-top {
        flex-direction: column;
        gap: 1.5rem;
    }


    .faculty-research-text,
    .faculty-research-map {
        width: 100%;
    }


    /* 成員卡片 */
    .member-grid {
        grid-template-columns: 1fr;
    }

    .member-card,
    .member-card.professor {
        flex-direction: column;     /* 圖在上、字在下 */
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        /* max-width: 100%;            取消 45vw 限制 */
    }

    .member-card.professor {
        gap: 12px;                  /* 取消 8vw */
    }

    .member-card img,
    .member-card.professor img {
        width: 160px;               /* 你也可以改 140/180 */
        max-width: 100%;
        margin: 0 auto;             /* 圖片置中 */
    }

    .member-info {
        white-space: normal;        /* 允許換行（關鍵） */
        overflow-wrap: anywhere;    /* 長字串（Email）可斷行 */
        word-break: normal;
    }

    .member-info h3 {
        white-space: nowrap;
    }
    .member-info p {
        white-space: normal;
    }
    .member-row {
        gap: 16px;
    }

    /* Publications */
    .publication-item {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .floating-buttons {
        flex-direction: column;      /* 疊起來 */
        align-items: flex-end;       /* 靠右對齊 */
        gap: 8px;
        top: 12px;
        right: 12px;
    }

    .floating-buttons .btn {
        width: auto;                 /* 不強迫同寬 */
        white-space: nowrap;         /* 避免「學術發表」斷行 */
        padding: 10px 12px;          /* 讓手指好按 */
        font-size: 0.95rem;          /* 略縮字 */
    }

    .expand-btn {
        padding: 6px;
        font-size: 16px;
    }
}

/* 平板（577px – 991px） */
@media (min-width: 577px) and (max-width: 1299px) {
    /* Hero：文字稍微縮小、避免遮擋 */
    .center-text {
        font-size: clamp(2.4rem, 5vw, 3rem);
    }

    /* 右上浮動按鈕：平板維持一排，但縮一點 */
    .floating-buttons {
        top: 16px;
        right: 16px;
        gap: 8px;
    }
    .floating-buttons .btn {
        font-size: 0.95rem;
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* Intro：左右改成上下（平板通常也建議上下，閱讀更舒服） */
    .faculty-research-section {
        height: auto;              /* 解除 100vh，避免平板瀏覽器位址列造成卡頓/跳動 */
        padding: 48px 5%;
    }
    .faculty-research-top {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 28px;
    }
    .left-column,
    .research-center {
        width: 100%;
    }
    .research-image {
        width: min(720px, 100%);
    }

    /* Members：兩欄卡片（教授卡片也要取消 45vw） */
    .member-row {
        gap: 18px;
    }

    .member-card {
        flex: 1 1 calc(50% - 18px);  /* 兩欄 */
        max-width: calc(50% - 18px);
        gap: 24px;                   /* 取代 vw gap，平板更穩 */
    }

    .member-card.professor {
        flex: 1 1 100%;              /* 教授獨佔一列 */
        /* max-width: 100%;             取消 45vw（平板會太窄） */
        gap: 28px;
    }

    /* 平板允許文字換行，避免 Email/英文括號爆版 */
    .member-info {
        white-space: normal;        /* 允許換行（關鍵） */
        overflow-wrap: anywhere;    /* 長字串（Email）可斷行 */
        word-break: normal;
        min-width: 0;               /* 避免 flex item 撐爆 */
    }

    /* 讓每一行文字也能正常換行 */
    .member-info p {
        white-space: normal;
        overflow-wrap: anywhere;
        margin: 2px 0;
    }

    /* 如果你想標題不換行可以留著，不想就刪 */
    .member-info h3 {
        white-space: nowrap;
    }

    /* Publications：兩個 box 保持兩欄，但更穩定的寬度 */
    .journals-container {
        gap: 24px;
    }
    .publication-box {
        flex: 1 1 calc(50% - 24px);
        min-width: 0;                /* 避免內容撐爆 */
    }

    /* 展開按鈕：平板略縮 */
    .expand-btn {
        padding: 10px;
        font-size: 18px;
    }
}

/* 桌機（≥ 992px） */
@media (min-width: 1300px) {
    .faculty-research-top {
        flex-wrap: nowrap;
    }
}

/* 避免手機卡頓 */
#members, #publications {
    content-visibility: auto;
    contain-intrinsic-size: 800px;
}

/* 流體字級 */
body {
    font-size: clamp(14px, 1.5vw, 16px);
}