/* ==========================================================================
   1. 通用設定與變數 (Global Variables & Reset)
   ========================================================================== */

/* 建立 CSS 變數，方便未來一鍵維護與修改 */
:root {
  /* 顏色設定 */
  --primary-color: #18499E;    /* 強調色（深藍） */
  --text-main-color: #323232;  /* 主要文字顏色 */
  --text-sub-color: #999999;   /* 非主要資訊顏色（淺灰） */
  --text-desc-color: #535353;  /* 圖片說明文字顏色 */
  --bg-main: #F5F5F5;          /* 頁面底色 */
  --bg-header-footer: #FFFFFF; /* Header 與 Footer 底色 */
  --bg-quote: #E7EBF3;         /* 前言區塊底色 */

  /* 字型與版面設定 */
  --font-base: Arial, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-size-main: 20px;
  --line-height-main: 2;
  
  /* RWD 斷點與最大寬度 */
  --max-width-content: 900px;
  --breakpoint-mb: 768px;
}

/* 基礎 Reset，確保各瀏覽器外觀一致，並納入 border-box 方便計算寬度 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* 點擊錨點跳轉時走平滑捲動 */
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-main);
  color: var(--text-main-color);
  line-height: var(--line-height-main);
  background-color: var(--bg-main);
  /* 用 clip（不是 hidden）裁切頁面邊界的橫向溢出：
     clip 不會讓 body 變成捲動容器，不影響 .side-box 的 position: sticky */
  overflow-x: clip;
}

/* 移除超連結預設底線與顏色 */
a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* 確保圖片能自適應容器寬度 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 清除清單預設樣式 */
ul, ol {
  list-style: none;
}

/* 隱藏 SEO 專用文字，但保持讓搜尋引擎（SEO）或螢幕閱讀器能讀取 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


hr{
  border: none; /* 移除瀏覽器預設的 3D 立體框線 */
  border-top: 0.5px solid var(--text-sub-color); /* 設定線條粗細、樣式與顏色 */
  height: 0; /* 確保高度不會額外增加 */
  width: 90%; /* 控制線條長度 */
  margin: 0 auto 40px auto;
}














/* ==========================================================================
   2. Header 區塊樣式
   ========================================================================== */
.site-header {
  background-color: var(--bg-header-footer);
  width: 100%;
  border-bottom: 1px solid #EFEFEF; /* 淡淡的分隔線增加視覺層次 */
}

/* 限制最大寬度 900px 並置中 */
.header-container {
  max-width: 1220px;
  margin: 0 auto;
  height: 70px; /* 固定高度方便對齊 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* 留點安全邊距，避免貼邊 */
}

.header-logo img {
  height: auto; 
  width: 242px;/* 依據視覺稿適當控制 logo 寬度 */
}

/* --- PC 版導覽列樣式 --- */
.header-nav .nav-list {
  display: flex;
  gap: 12px;
}

.header-nav .nav-list li{
    border: solid 1px var(--primary-color);
    border-radius: 30px;
    line-height: 1.8;
    background-color: white;
    transition: background-color 0.3s;
}

.header-nav .nav-list a {
  font-size: 18px;
  color: var(--primary-color);
  padding: 0px 20px;
  transition: color 0.3s;
}

.header-nav .nav-list li:hover{
  background-color: var(--primary-color);
}

/* Hover 後按鈕變強調色(深藍) */
.header-nav .nav-list a:hover {
  color: white;
}

/* --- 手機版漢堡按鈕預設隱藏 (PC版看不見) --- */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
}

.hamburger-btn .bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--primary-color); /* 漢堡線條使用深藍色 */
  transition: all 0.3s;
}

/* ==========================================================================
   RWD 手機版樣式 (螢幕寬度 768px 以下)
   ========================================================================== */
@media (max-width: 768px) {

    .header-logo img {
    height: auto; 
    width: 40vw;/* 依據視覺稿適當控制 logo 寬度 */
    max-width: 242px;
    }


    /* 限制最大寬度 900px 並置中 */
    .header-container {
    max-width: 1220px;
    margin: 0 auto;
    height: 50px; /* 固定高度方便對齊 */
    padding: 0 20px; /* 留點安全邊距，避免貼邊 */
    }


  /* 顯示漢堡選單按鈕 */
  .hamburger-btn {
    display: flex;
  }

  /* 隱藏手機版導覽列，改用絕對定位並預設高度為 0 (向下伸展動畫準備) */
  .header-nav {
    position: absolute;
    top: 51px; /* 剛好在 header 下緣 */
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: var(--primary-color); /* 列表底色為#18499E */
    transition: height 0.3s ease; /* 伸展動畫效果 */
    z-index: 999;
  }

  /* 當選單被激活(Active)時，高度展開 */
  .header-nav.active {
    height: 134px; /* 三個按鈕的總高度 */
  }

  .header-nav .nav-list {
    flex-direction: column;
    gap: 0;
  }

  .header-nav .nav-list li {
    width: 100%;
    border-bottom: 1px solid #FFFFFF; /* 按鈕分隔線#FFF */
    border-radius: 0;
    background-color: var(--primary-color);
  }

  .header-nav .nav-list li:last-child {
    border-bottom: none; /* 最後一個按鈕去掉分隔線 */
  }

  .header-nav .nav-list a {
    display: block;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    color: #FFFFFF; /* 文字#FFF */
    font-size: 18px;
  }
  
  /* 手機版展開後不使用 hover 變色（因為手機是觸控） */
  .header-nav .nav-list a:hover {
    color: #FFFFFF;
  }
}



/* ==========================================================================
   2.5 錨點導覽列 (Anchor Nav)
   ========================================================================== */
.anchor-nav {
  position: sticky;
  top: 0;
  z-index: 200; /* 蓋在banner與內文之上 */
  width: 100%;
  background-color: var(--primary-color);
}

.anchor-nav-inner {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth; /* 按鈕自動捲入可視範圍時也走平滑動畫 */
  cursor: grab; /* 提示PC版可以按住拖移 */

  /* 隱藏橫向捲軸樣式，但保留可滑動功能 */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* 舊版 Edge / IE */
}

.anchor-nav-inner::-webkit-scrollbar {
  display: none; /* Chrome / Edge / Safari */
}

/* 滑鼠拖移時：關閉平滑捲動避免延遲感、改成抓取中游標、不選取文字 */
.anchor-nav-inner.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

.anchor-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  color: #FFFFFF;
  font-size: var(--font-size-main);
  font-weight:300;
  line-height: 1.4; /* 覆寫全站 line-height:2，避免按鈕過高 */
  padding: 16px 18px;
}

.anchor-btn.active {
  font-weight:500;
}

/* ==========================================================================
   RWD 手機版錨點導覽列樣式 (螢幕寬度 768px 以下)
   ========================================================================== */
@media (max-width: 768px) {
  .anchor-btn {
    font-size: var(--font-size-main);
    padding: 14px 14px;
  }
}

/* ==========================================================================
   3. Banner 大圖區塊樣式
   ========================================================================== */
.site-banner {
  width: 100%;
  overflow: hidden;
  position: relative; /* 為內部定位做準備 */
}

/* --- PC 版圖片樣式 --- */
.site-banner .banner-img {
  width: 100%;
  max-width: 2000px; /* 規範 PC 版寬度 2000px */
  height: 400px;     /* 規範 PC 版高度固定 */
  object-fit: cover; /* 確保圖片在固定高度下維持比例不變形 */
  margin: 0 auto;    /* 超過 2000px 時居中顯示 */
}

/* ==========================================================================
   RWD 手機版樣式 (螢幕寬度 768px 以下)
   ========================================================================== */
@media (max-width: 768px) {
  /* --- MB 版圖片樣式 --- */
  .site-banner .banner-img {
    width: 100vw;     /* 規範 MB 圖寬度為 100vw */
    height: auto;     /* 規範高度自適應（對應 1080px * 806px 比例） */
    max-width: none;  /* 解除 PC 版的最大寬度限制 */
  }
}


/* ==========================================================================
   4. 主要內容 (Content) 區塊樣式
   ========================================================================== */

/* 核心容器：PC 版寬度 900px，置中對齊 */
.main-content {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 40px 0; /* 上下推 40px 的安全距離 */
}

/* 模組與模組之間的間距：PC 隔 40px */
.content-row {
  margin-bottom: 40px;
  width: 100%;
}
/* .content-row:last-child {
  margin-bottom: 0;  最後一個元件不需要下間距 
} */

/* --- 影片模組 (維持 16:9 滿版 RWD 自適應) --- */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例高寬比 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --- 作者資訊模組 --- */
.author-module {
  font-size: 18px;
  color: var(--text-sub-color); /* 顏色#999999 */
}

/* --- 前言模組 --- */
.text-quote-module {
  background-color: var(--bg-quote); /* 底色為#E7EBF3 */
  padding: 30px; /* PC 左右與上下各推 30px padding */
  border-radius: 10px; /* 微調圓角讓視覺更精緻 */
}

/* 文章區塊（錨點跳轉目標），保留與sticky錨點bar等高的間距，避免標題被擋住 */
.paragraph {
  scroll-margin-top: 64px;
}

.h2-title-group{
    text-align: center;
}

/* --- H2 大標題群組 --- */
.h2-title-group h2 {
  font-size: 36px; /* 文字大小 36px */
  color: var(--text-main-color);
  font-weight: bold;
  position: relative;
  padding: 20px 0 12px 0; /* 給底線留空間 */
  display: inline-block; /* 讓底線跟著文字長度，或可以用偽元素固定大小 */
}

/* 透過偽元素(::after)製作 100px * 3px 的強調色底線 */
.h2-title-group h2::after {
  content: '';
  position: absolute;
  transform: translate(-50%,0);
  bottom: 0;
  left: 50%;
  width: 100px;  /* 底線 100px */
  height: 3px;   /* 底線 3px */
  background-color: var(--primary-color); /* 強調色 #18499E */
}

/* --- 文案段落模組 --- */
.paragraph-module {
  text-align: justify; /* 內文左右對齊，版面更整齊 */
}

/* --- 圖片與其說明模組 --- */
.image-caption-module {
  display: flex;
  flex-direction: column;
  align-items: start; /* 圖與說明字皆靠中央置中 */
  padding: 0 20px;
}
.image-caption-module .image-wrapper {
  width: 100%;
  max-width: 860px; /* 規範：圖片寬度為 860px */
}
.image-caption-module img {
  width: 100%;
  height: auto; /* 高度自適應 */
}
/* --- 圖片與其說明模組 (修正後，自動補上 L 符號) --- */
.image-caption-module {
  display: flex;
  flex-direction: column;
  align-items: start; 
}

.image-caption-module .image-wrapper {
  width: 100%;
  max-width: 860px;
}

.image-caption-module img {
  width: 100%;
  height: auto;
}

.image-caption-module figcaption {
  font-size: 16px;
  color: var(--text-desc-color); /* 顏色 #535353 */
  margin-top: 12px;
  text-align: center;
  
  /* 為了讓內部的偽元素(符號)能對齊，使用 inline-flex */
  display: inline-flex;
  align-items: center; 
  gap: 8px; /* 符號與文字之間的間距 */
}

/* 使用 ::before 偽元素繪製只有左邊框與下邊框的 L 符號 */
.image-caption-module figcaption::before {
  content: '';
  display: inline-block;
  width: 12px;  /* 方塊的寬度 */
  height: 12px; /* 方塊的高度 */
  
  /* 關鍵：只設定左邊框與下邊框，顏色與字體顏色一致 */
  border-left: 1.5px solid var(--text-desc-color);
  border-bottom: 1.5px solid var(--text-desc-color);
  
  /* 稍微往上微調，讓它在視覺上跟文字對齊得更完美 */
  transform: translateY(-2px); 
  
  /* 確保未來複製多組時，符號不會縮小變形 */
  flex-shrink: 0; 
}


/* --- 製作團隊名單模組 --- */
.credits-module {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  color: var(--text-desc-color); /* 顏色 #535353，與圖片說明文字一致 */
}

.credits-module .credits-title {
  font-weight: bold;
  font-size: 20px; /* 比一般名單文字大2px */
  margin-top: 16px;
}

.credits-module .credits-title:first-child {
  margin-top: 0;
}

/* ==========================================================================
   RWD 平板版主要內容樣式 (769px ～ 1024px)
   ========================================================================== */
     /* 寬度為 100vw，左右各推 20px padding */
   @media (max-width: 1024px) {
      .main-content {
        width: 100vw;
        padding: 20px 20px; 
      }
   }


/* ==========================================================================
   RWD 手機版主要內容樣式 (螢幕寬度 768px 以下)
   ========================================================================== */
@media (max-width: 768px) {

  /* 區塊與區塊之間 MB 隔 20px */
  .content-row {
    margin-bottom: 30px;
  }
  
  /* 前言區塊手機版微調 padding，避免文字太擠 */
  .text-quote-module {
    padding: 20px;
  }
  
  /* H2 手機版字級適當縮小，避免在窄螢幕上斷行過於碎片化 */
  .h2-title-group h2 {
    font-size: 28px;
    padding: 20px 0 0 0; /* 給底線留空間 */
  }
  /* --- H2 大標題群組 --- */

  .image-caption-module {
    padding: 0;
  }

  /* 修正手機版文字斷行與 L 符號錯位問題 */
  .image-caption-module figcaption {
    display: flex;         /* 改用 flex */
    justify-content: flex-start; /* 靠左對齊，符合閱讀習慣 */
    align-items: flex-start;    /* 符號對齊第一行文字 */
    width: 100%;           /* 寬度滿版，避免文字被壓縮 */
    max-width: 860px;
    padding: 0;
    text-align: left;
  }
  
  .image-caption-module figcaption::before {
    margin-top: 5px;       /* 調整符號在第一行文字的垂直置中位置 */
  }

}



/* ==========================================================================
   5. Footer 區塊樣式
   ========================================================================== */
.site-footer {
  background-color: var(--bg-header-footer); /* 底色為#FFF */
  width: 100%;
  padding: 60px 0 0 0;
  border-top: 1px solid #EFEFEF;
}

/* 限制最大寬度 900px 並且置中 */
.footer-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* 所有內容水平置中 */
  gap: 24px;          /* 元件之間的垂直間距 */
  padding-bottom: 40px;
}

.footer-logo img {
  height: auto;
  width: 245px;
}

/* --- 6顆社群 Icon 區域 --- */
.footer-social-links {
  display: flex;
  gap: 12px; /* icon 之間的間距 */
  justify-content: center;
}

.social-icon {
  width: 44px;  /* PC icon 大小為 44*44px */
  height: 44px;
  background-color: var(--primary-color); /* 預設底色為 #18499E */
  border: 1px solid var(--primary-color);
  border-radius: 50%; /* 依視覺稿做成圓形 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

/* 控制中間 SVG 小圖像 */
.social-icon img {
  width: 22px;  /* 適當縮放小圖像比例 */
  height: 22px;
}

.social-icon.sent img {
  width: 24px;  /* 適當縮放小圖像比例 */
  height: 22px;
}

.social-icon.sent img {
   width: 28px;  /* 適當縮放小圖像比例 */
}

.footer-hr{
    color: var(--text-sub-color);
    width: 100%;
    margin-bottom: 0;
}


/* --- 版權文字樣式 --- */
.footer-copyright {
  font-size: 14px; /* PC 文字大小 14px */
  color: var(--text-sub-color); /* 淺灰色 #999999 */
  text-align: center;
  line-height: 1.6;
  padding: 16px 0;
}


/* ==========================================================================
   5. Footer & 側邊分享欄 - 方案 B 雙圖切換樣式
   ========================================================================== */

/* --- 預設狀態 (全域通用) --- */
.social-icon, .side-icon {
  position: relative;
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 預設顯示白色圖片，隱藏藍色圖片 */
.social-icon .icon-white, .side-icon .icon-white {
  display: block;
}
.social-icon .icon-blue, .side-icon .icon-blue {
  display: none;
}

/* --- 電腦版 Hover 狀態控制 (螢幕寬度 1024px 以上) --- */
@media (min-width: 1024px) {
  /* 1. Footer 按鈕 Hover 效果 */
  .social-icon:hover {
    background-color: #FFFFFF;
    border-color: var(--primary-color);
  }
  .social-icon:hover .icon-white {
    display: none;  /* 隱藏白圖 */
  }
  .social-icon:hover .icon-blue {
    display: block; /* 顯示完美的藍圖 */
  }

  /* 2. 側邊分享欄 Hover 效果 */
  .side-icon:hover {
    background-color: #FFFFFF;
    border-color: var(--primary-color);
  }
  .side-icon:hover .icon-white {
    display: none;  /* 隱藏白圖 */
  }
  .side-icon:hover .icon-blue {
    display: block; /* 顯示完美的藍圖 */
  }
}

/* --- 行動版狀態控制 (768px 以下) --- */
@media (max-width: 768px) {
  /* 手機版完全不執行 Hover 切換，維持原圖原色不卡白 */
  .social-icon .icon-white {
    display: block !important;
  }
  .social-icon .icon-blue {
    display: none !important;
  }
}


/* ==========================================================================
   RWD 手機版 Footer 樣式 (螢幕寬度 768px 以下)
   ========================================================================== */
@media (max-width: 768px) {
  .social-icon:active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }
  .social-icon:active img {
    filter: brightness(0) invert(1);
  }

  .site-footer {
    padding: 60px 0 0;
  }
  
  .footer-container {
    width: 100vw;
    gap: 20px;
    padding-bottom: 30px;
  }

  .footer-logo img {
  width: 50vw;
  max-width: 245px;
  min-width: 200px;
  }

  /* --- 6顆社群 Icon 區域 --- */
.footer-social-links {
  gap: 6px; /* icon 之間的間距 */
}


  /* 版權文字，MB 文字大小調整為 12px */
  .footer-copyright {
    font-size: 12px;
    padding: 16px 20px;
  }
}



/* ==========================================================================
   側邊社群按鈕 Sticky 跟隨滾動
   ========================================================================== */
.main-content {
  position: relative;
  /* 注意：這裡不能加 overflow-x: clip / hidden！
     .side-share-bar 會故意定位在 left:-60px，跑到 main-content 外側，
     如果在這層裁切，PC 版的分享按鈕會被整個切掉看不到。
     橫向溢出的裁切改放在 body（見下方），裁切點在頁面邊界而不是內容容器邊界。 */
}

.side-share-bar {
  position: absolute; /* 維持絕對定位在主內容左側 */
  left: -60px;
  top: 40px;
  bottom: 40px;       /* 限制活動範圍到內容區塊底部 */
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
  pointer-events: none; /* 透明區域不攔截滑鼠事件，下方文字仍可反白選取 */
}

.side-box{
  position: -webkit-sticky; /* 支援 Safari */
  position: sticky;         /* 關鍵：讓按鈕自己變成 sticky */
  top: 480px;               /* 滾動到距離瀏覽器頂部 100px 時會固定住 */
  display: flex;
  flex-direction: column;
  grid-gap: 6px;
  pointer-events: auto; /* 按鈕本身恢復可點擊 */
}

.side-icon {
  width: 40px;
  height: 40px;
  background-color: var(--primary-color); 
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  cursor: pointer;
}

.side-icon img {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

/* 限制只有 PC 版滑鼠懸停時才會觸換色 */
@media (min-width: 1024px) {
  .side-icon:hover {
    background-color: #FFFFFF;
    border-color: var(--primary-color);
  }

  /* 滑鼠懸停時，將白色圖標精準轉化為深藍色 #18499E */
  .side-icon:hover img {
  }
}

/* ==========================================================================
   RWD 手機版修正：直接隱藏側邊分享欄
   ========================================================================== */
@media (max-width: 768px) {
  .side-share-bar {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;

  }
  .side-box{
    display: flex;
    flex-direction: row;
  }
}