/* ====== 1. 全站整體設定 ====== */
* {
  box-sizing: border-box; /* 包含邊框和內距的盒模型 */
}

body {
  font-family: 'Lato', 'Open Sans', sans-serif; /* 內文字體 */
  margin: 0; /* 移除預設邊距 */
  background-color: #f5f5f5; /* 淺灰白背景（非純白） */
  color: #2a2a2a; /* 深灰黑 - 主文字（非純黑） */
}

/* ====== 2. 頁首 Header 和標題 Slogan ====== */
header {
  background-color: rgba(245, 245, 245, 0.95); /* 淺灰白半透明 */
  height: 80px; /* 頁首高度 */
  width: 100%; /* 全寬 */
  position: fixed; /* 固定頂部 */
  top: 0; /* 置頂 */
  z-index: 20; /* first layor */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 陰影取代邊框 */
}

.header {
  position: relative;
  height: 200px; /* 從 250px 改為 200px */
  overflow: hidden;
  z-index: 0;
}

/* 漸層灰色蒙版背景 */
.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(209, 209, 209, 0), rgba(59, 59, 59, 0.3));
  z-index: 1;
}

/* 背景圖片 */
.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-family: 'Lato', 'Open Sans', sans-serif;
  padding: 0;
  max-width: 80%;
  text-align: center;
}

/* Header 標題與副標題樣式 (保持不變) */
.header-title,
.header-subtitle {
  font-family: 'Lato', 'Open Sans', sans-serif;
  color: #2a2a2a; /* 深灰黑 */
  text-shadow: 
    2px 2px 4px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(255, 255, 255, 0.8); /* 白色陰影 */
  margin: 0;
  text-decoration: none; 
}

.header-title {
  font-size: 32px; /* 保持不變 */
  font-weight: 600;
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 12px; /* 保持不變 */
  font-weight: 400;
}

/* 標題隱藏文字，使用背景圖片顯示 Logo */
h1 {
  color: #2a2a2a; /* 深灰黑 */
  position: absolute; /* 絕對定位 */
  left: 120px; /* 左側位置 */
  top: 0; /* 頂部位置 */
  line-height: 80px; /* 垂直置中 */
  background-image: url(images/5f02e94e925534ab91e67056238355a1.jpg); /* 背景圖片 */
  background-repeat: no-repeat; /* 不重複 */
  background-position: center; /* 置中 */
  width: 210px; /* 寬度 */
  text-indent: -9999px; /* 隱藏文字，顯示背景圖 */
}

/* ====== 3. 中間區塊：圖片區塊 ====== */
.image-block {
  text-align: center; /* 文字置中 */
  margin: 120px 0 20px; /* 預留 header 固定位置的空間（約 80px）+ 額外 40px */
}

.image-block img {
  max-width: 80%; /* 最大寬度 80% */
  height: auto; /* 自動高度 */
  display: block; /* 區塊顯示 */
  margin: 0 auto; /* 水平置中 */
  border-radius: 12px; /* 圓角 */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /* 陰影 */
}

/* ====== 4. 標籤頁區塊 Wrapper ====== */
.tabs-wrapper {
  width: 100%; /* 全寬 */
  margin: 0 auto; /* 水平置中 */
  position: relative; /* 不要 sticky，滾動會消失 */
  background-color: #f5f5f5; /* 跟背景一樣的淺灰白 */
  padding-top: 10px; /* 上方內距 */
  padding-bottom: 10px; /* 下方內距 */
  border-radius: 0; /* 移除圓角 */
  box-shadow: none; /* 移除陰影 */
}

/* ====== 5. 標籤列 Tabs ====== */
.tabs {
  width: 80%; /* 中間佔 60% 的寬度 */
  margin: 0 auto; /* 水平置中 */
  display: flex; /* 彈性排版 */
  justify-content: space-around; /* tab 平均分散 */
  background: transparent; /* 透明背景 */
  padding: 0; /* 無內距 */
}

/* 單個 Tab 樣式 */
.tab {
  flex: 1; /* 平均分配寬度 */
  text-align: center; /* 文字置中 */
  margin: 0 4px; /* 左右間距 */
  padding: 6px 0; /* 上下內距 */
  background-color: transparent; /* 透明背景（無背景） */
  color: #6a6a6a; /* 中灰色文字 */
  cursor: pointer; /* 滑鼠游標變手指 */
  border-radius: 0; /* 移除圓角 */
  font-weight: normal; /* 正常粗細 */
  font-size: 13px; /* 從 14px 改為 13px */
  font-family: 'Roboto', 'Poppins', 'Inter', sans-serif; /* 現代科技感字體 */
  transition: color 0.3s, transform 0.2s; /* 顏色和變形過渡效果 */
}

/* Hover 狀態 */
.tab:hover {
  color: #6b9ac4; /* 藍色點綴 */
  background-color: transparent; /* 保持透明 */
  transform: translateY(-2px); /* 輕微上浮效果 */
}

/* 選中狀態的 Tab */
.tab.active {
  color: #4a7ba7; /* 深藍色點綴 */
  background-color: transparent; /* 保持透明 */
  font-weight: bold; /* 粗體 */
}

/* ====== 6. 內容區域：iframe ====== */
/* 在 style.css 中替換 iframe 的樣式為： */

iframe {
  width: 70%;
  max-width: 1000px;
  height: auto;
  min-height: 300px;
  max-height: 2000px;  /* 新增：限制最大高度，防止無限增長 */
  border: none;
  display: block;
  margin: 20px auto;
  padding: 0;
  box-sizing: border-box;
  background-color: #fafafa;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  pointer-events: auto;
  transition: height 0.3s ease;
  contain: layout style paint;  /* 新增：CSS containment 防止高度重算影響 */
}
/* ====== 7. 文字樣式 ====== */
h2 {
  font-size: 16px; 
  font-weight: bold; /* 粗體 */
  margin-bottom: 15px;
  color: #3a3a3a; 
  font-family: 'Roboto', 'Poppins', 'Inter', sans-serif; /* 現代科技感字體 */
}

h3 {
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  margin-top: 25px;
  margin-bottom: 12px;
  color: #4a4a4a;
  font-family: 'Georgia', 'Merriweather', 'Crimson Text', serif; /* 優雅襯線體 */
  text-decoration: underline;
}
p, li, ul, strong {
  font-size: 14px; 
  line-height: 1.6; /* 行高 */
  margin-bottom: 12px; 
  color: #2a2a2a; /* 深灰黑 */
  font-family: 'Lato', 'Open Sans', sans-serif; 
}

h5 {
  font-size: 11px; 
  font-weight: 100; /* 極細字重 */
  color: #6a6a6a; 
  font-family: 'Lato', 'Open Sans', sans-serif;
}

/* 連結樣式 */
a {
  color: #5a8db8; /* 藍色點綴 */
  text-decoration: none; /* 無底線 */
  font-family: 'Lato', 'Open Sans', sans-serif;
  transition: color 0.3s; /* 顏色過渡效果 */
}

a:hover {
  color: #4a7ba7; /* 深藍色 */
  text-decoration: underline; /* 底線 */
}

/* fencing pic */
section.other-image.single-center {
  max-width: 240px;
}

/* 標題樣式 */
h2.intro-title {
  font-size: 1.6em; /* 從 2em 改為 1.6em */

}

/* 照片容器樣式 */
.intro-photo {
  text-align: center;
  margin: 20px 0;
}

.intro-photo img {
  max-width: 180px; /* 從 200px 改為 180px */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Other 頁面的圖片區域 */
section.other-image {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px; /* 從 30px 改為 25px */
  margin: 15px auto; /* 從 20px 改為 15px */
  max-width: 800px;
}

section.other-image div {
  flex: 1;
  max-width: 220px; /* 從 240px 改為 220px */
}

section.other-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: block;
}

/* Contact 頁面樣式 */
.contact-section h3 {
  cursor: pointer;
  transition: color 0.3s, transform 0.2s;
  display: inline-block;
  font-style: italic;
  font-size: 16px; 
}

.contact-section h3 a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  font-family: 'Georgia', 'Merriweather', 'Crimson Text', serif;
}

.contact-section h3 a:hover {
  text-decoration: underline;
}

.contact-section h3:hover {
  color: #5a8db8;
  transform: translateX(5px);
}

.contact-section h3:active {
  color: #4a7ba7;
}