/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* 定義顏色 */
/* :root {
  --icon-color: #3a3838;
  --icon-hover-color: #f2b130;
  --btn-hover-color:#ffde9c;
  --bg-hover-color: #F5F5F5;
  --tmda-primary: #ffae0b;
  --tmda-secondary: #684716;
  --tmda-accent: #9e7014;
  --tmda-dark: #3A3838;
  --tmda-text: #3A3838;
  --tmda-muted: #8c8888;
  --tmda-bg: #ffffff;
  --tmda-soft: #F0F0F0;
  --tmda-border: #e2e8f0;
  --tmda-radius: 14px;
  --tmda-shadow: 0 10px 24px rgba(15,23,42,0.08);

} */

:root {
    /* TMDA 主題色彩 */
  --tmda-primary: #F8B62D;      /* 主品牌橙黃 */
  --tmda-secondary: #7D4E23;    /* 較深的黃棕作為輔色 */
  --tmda-accent: #9e7014;       /* 用於強調或 hover 狀態 */
  
  /* ICON */
  --icon-color: #3A3838;
  --icon-hover-color: var(--tmda-primary);

  /* BUTTON / HOVER */
  --btn-hover-color: #FFD88A; /* 比主色更亮一階 */
  --tmda-semitransparent-accent: rgba(255, 216, 138, 0.4);
  --bg-hover-color: #F7F7F7;
  
  /* NEUTRAL / TEXT */
  --tmda-dark: #2F2F2F;         /* 提高對比度，文字更清晰 */
  --tmda-text: #575757;
  --tmda-muted: #999999;

  /* BACKGROUND */
  --tmda-bg: #f3f3f3;
  --tmda-bg-dark:#3a3530;
  --tmda-bg-secondary:#7d7d78; /* 20251123 新增 */
  --tmda-soft: #F5F5F5;         /* 背景層次 */
  --tmda-border: #E0E0E0;       /* 簡化邊框顏色，避免過藍 */

  /* RADIUS & SHADOW */
  --tmda-radius: 14px;
  --tmda-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
  font-family: "Noto Sans TC";
  text-decoration: none;
  line-height: 150%;
  font-weight: 500;
  color: var(--tmda-text);
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ------------------CSS Reset----------------- */

*, *::before, *::after {
    box-sizing: border-box;
}
body{
    background: #FBFBFB;
    font-size: 16px;
}
.wrap{
    max-width: 1920px;
    margin: 0 auto;
}

a{
    color: #3a3838;
    font-size: 16px;
    text-decoration: none;
}



.header.tab-item a:hover{
    color: var(--icon-hover-color);
    text-decoration: none;
}

h1{
    font-weight: 700;
    font-size: 28px;
    padding-top: 8px;
}
h2{
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 12px;
}
p{
    font-size: 16px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  width: 24px;
  height: 24px;
  fill: #333;
  display: inline-block;
}
.icon-16{
  fill: var(--icon-color);
  height: 16px;
  width: auto;
}

html, body { background: var(--tmda-bg); color: var(--tmda-text); }


/* ========================================================= */
/* ===== Header 結構與基礎樣式 ===== */
/* ========================================================= */

/* Header 容器 (Fixed 定位與基礎樣式) */
header {
  /* 基礎背景與陰影 */
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 2px rgba(0,0,0,0.05); 
  padding: 4px 20px;

  /* 固定定位 */
  position: fixed;
  top: 0;
  left: 0; 
  width: 100%;
  z-index: 1000; 

  /* 毛玻璃效果 */
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px); 
}

/* Header 導航列 (桌面版 Flex 佈局) */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between; 
  max-width: 1200px;
  margin: 4px auto;
  gap: 20px;
}

/* LOGO 樣式 (桌面版預設) */
.header-title img#main-logo-header-desktop {
  height: 50px;
}

.header-title img#main-logo-header {
  height: 48px; 
  display: none; /* 手機版才會顯示 */
}

/* 標題文字 (預設隱藏) */
.title-text {
  display: none;
}

/* 漢堡選單按鈕 (預設隱藏 - 桌面版) */
.menu-toggle {
  display: none; 
  background: none;
  color: var(--icon-color);
  border: none;
  cursor: pointer;
}

/* 主選單 - tab-list (桌面版 - 水平排列) */
.main-list.tab-list {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

/* 關閉按鈕 (預設隱藏 - 桌面版) */
.menu-close-btn {
    display: none;
}

/* 選單項目 */
.main-list.tab-list .tab-item {
  flex: 0 0 auto;
}

.main-list.tab-list .tab-item a {
  display: block;
  padding: 10px 12px;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s, background-color 0.3s;
}

.main-list.tab-list .tab-item a:hover {
  color: var(--icon-hover-color);
}

/* ========================================================= */
/* ===== RWD 平板設定 (1024px) ===== */
/* ========================================================= */

@media (max-width: 1024px) { 
  .header-title img#main-logo-header-desktop{
    height: 40px;
  }
  /* 刪除多餘的 .main-list.tab-list 設定，繼承桌面版的 Flex 即可 */
  main {
    padding-top: 10px; /* 設定一個大於 Header 實際高度的安全值 */ 
  }

}


/* ========================================================= */
/* ===== RWD 手機設定 (768px) ===== */
/* ========================================================= */

@media (max-width: 768px) {
  main {
    padding-top: 40px; /* 設定一個大於 Header 實際高度的安全值 */ 
  }
  /* LOGO 調整 */
  .header-title img#main-logo-header-desktop{
    display: none; /* 隱藏文字 LOGO */
  }
  
  .header-title img#main-logo-header {
    display: block; /* 顯示圖形 LOGO */
    height: 48px;
    justify-content:center;
    align-items: center;
  }
  
  .header-nav {
    justify-content: center; /* LOGO 置中 */
    margin: 0 auto;
  }
  
  /* 漢堡選單調整 */
  .menu-toggle {
    display: block; /* 顯示漢堡按鈕 */
    position: absolute;
    left: 20px;
  }
  
  .main-list.tab-list {
    /* 側邊欄佈局 */
    display: none;
    flex-direction: column;
    align-items: flex-start;
    
    /* 尺寸與定位 */
    width: 100vw; /* 建議恢復 50vw 以符合語義 */
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    
    /* === 關鍵修正：背景漸層填滿 (左 100% 白 -> 右 50% 白) === */
    /* 1. 移除 background-color */
    /* 2. 使用 linear-gradient: to right (從左到右) */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 100%);
    
    /* === 關鍵修正：右邊界柔邊效果 (使用 box-shadow) === */
    /* 移除硬邊 border-right */
    border-right: none; 
    /* 設定 box-shadow 模擬右側柔邊：水平偏移X, 垂直偏移Y, 模糊半徑, 擴展半徑, 顏色 */
    /* (向右側擴散的柔和陰影) */
    /* box-shadow: 8px 0 10px rgba(0, 0, 0, 0.15);  */
    
    padding: 0;
    padding-top: 60px;
    z-index: 1050; 
  }

  .main-list.tab-list.active {
    display: flex;
  }

  /* 關閉按鈕 */
   .menu-close-btn {
    display: block; /* 在手機版顯示關閉按鈕 */
    position: absolute;
    top: 12px; /* 距離頂部的距離 */
    left: 18px; /* 距離右側的距離 */
    background: #FFFFFF;
    border: none;
    cursor: pointer;
    color: var(--icon-color);
    z-index: 1060; /* 確保它在選單列表之上 */
  }
  
  .menu-close-btn svg {
    width: 32px;
    height: 32px;
    fill: var(--tmda-dark);
  }

  /* 選單項目 */
  .tab-list .tab-item {
    width: 100%;
    height: 48px;
    gap: 8px;
  }

  .main-list.tab-list .tab-item a {
    padding: 12px 20px;
    font-size: 20px;
    text-align: left;
    padding-left: 28px;
  }
    
  }

  /* 其他 */
  .title-text{
    display: none;
  }

/* 主區塊設定 */

.section-title {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: var(--tmda-dark);
    margin-bottom: 24px;
}

/* ====== 品牌卡區塊（桌機為主）====== */
.brand-card {
  display: flex;
  flex-direction: row; /* 預設桌機橫向排列 */
  align-items: center;
  justify-content: center;
  text-align: left;
  border-bottom: 1px solid var(--tmda-muted);
  background-color: transparent; /* 確保底色不會干擾 */
  padding: 3.5rem 4rem; /* 增加 padding */
  margin: 3rem auto; /* 增加 margin-top/bottom */
  max-width: 1200px; /* 增加最大寬度 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* LOGO 圖示 */
.brand-logo {
  width: 400px; /* 放大 Logo */
  height: auto;
  margin-right: 3rem; /* 增加間距 */
  flex-shrink: 0; /* 防止Logo縮小 */
}


/* --- Hero 區塊新增樣式 --- */

.hero-content {
  max-width: 700px; /* 限制文字寬度，讓排版更舒適 */
}

.hero-headline {
  font-size: 2.5rem; /* 更大的標題 */
  font-weight: 700;
  color: var(--tmda-dark);
  line-height: 1.3;
  margin-bottom: 1rem;
}

.hero-subtext {
  font-size: 1.2rem;
  color: var(--tmda-text);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* CTA 群組 */
.hero-cta-group {
  display: flex;
  gap: 16px;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* RWD 換行 */
  justify-content: flex-start;  /* 新增：允許項目在容器內調整寬度 */
}

/* 主要 CTA 按鈕 */
.cta-primary {
  display: inline-block;
  padding: 12px 30px;
  background-color: var(--tmda-primary);
  border: 4px solid var(--tmda-bg-secondary);
  color: var(--tmda-dark); 
/* === 新增/修改以下屬性 === */
  flex: 1 1 auto; /* 允許按鈕伸展(1)和收縮(1)，但優先考慮內容寬度(auto) */
  min-width: 45%; /* 確保按鈕在寬螢幕下不會過度拉伸，且單個按鈕至少佔一半空間 */
  text-align: center; /* 讓按鈕內容置中 */
  /* ====================== */
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.cta-primary:hover {
  background-color: var(--tmda-accent); /* 使用 accent 顏色 */
  color: var(--bg-hover-color) !important;
  border: 4px solid var(--tmda-accent);
  transform: translateY(-2px);
}

/* 次要 CTA 按鈕 */
.cta-secondary {
  display: inline-block;
  /* 移除固定 padding，改為更彈性的寬度設定 */
  padding: 12px 30px; 
  /* === 新增/修改以下屬性 === */
  flex: 1 1 auto; /* 允許按鈕伸展(1)和收縮(1)，但優先考慮內容寬度(auto) */
  min-width: 45%; /* 確保按鈕在寬螢幕下不會過度拉伸，且單個按鈕至少佔一半空間 */
  text-align: center; /* 讓按鈕內容置中 */
  /* ====================== */
  background-color: rgba(255, 255, 255, 0.4);
  color: var(--tmda-dark) !important;
  border: 4px solid var(--tmda-primary);
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s, transform 0.2s;
}

.cta-secondary:hover {
  background-color: var(--tmda-accent); /* 使用 accent 顏色 */
  border: 4px solid var(--tmda-accent);
  color: var(--bg-hover-color) !important;
  transform: translateY(-2px);
}

/* 信任指標/數據區塊 */
.hero-metrics {
  display: flex;
  gap: 14px;
  font-size: 1.2rem;
  color: var(--tmda-muted);
  flex-wrap: wrap;
}


.metric-item {
  font-weight: 700;
  color: var(--tmda-text);
}

/* ====== Tablet：調整LOGO尺寸 ====== */
  @media(max-width:992px){
  .brand-logo {
    width: 300px;
    }
  }

/* ====== 手機版：改為垂直堆疊 ====== */
@media (max-width: 768px) {

  .brand-card {
    flex-direction: column; /* 垂直排列 */
    text-align: center;
    padding: 2rem 1.5rem;
    margin: 8px;
  }

  .brand-logo {
    width: 280px;
    margin: 0 0 1rem 0; /* 置中排列 */
  }

  .brand-text h2 {
    font-size: 1.6rem;
  }

  .brand-text p {
    font-size: 1rem;
  }

.hero-headline {
  font-size: 2rem; /* 更大的標題 */
  font-weight: 700;
  color: var(--tmda-dark);
  line-height: 1.3;
  margin-bottom: 1rem;
}

  /* 信任指標/數據區塊 */
.hero-metrics {
  display: flex;
  gap: 24px;
  font-size: 1rem;
  color: var(--tmda-muted);
  justify-content: center;
  flex-wrap: wrap;
}
}

/* ====== 合作夥伴區塊 ====== */
.partner-section {
    background-color: var(--tmda-soft); /* 淺色背景，將其與其他區塊區分 */
    padding: 3rem 1.5rem;
    margin: 2rem auto;
    max-width: 100%; /* 允許區塊跨越全寬 */
}


.partner-logos {
    display: flex;
    flex-wrap: wrap; /* 允許換行 */
    justify-content: center; /* 內容置中 */
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
}

.partner-item {
    /* Flexbox 屬性：確保所有項目均勻分配空間 */
    flex: 1 1 calc(20% - 20px); /* 桌機版：每行 4-5 個項目，且可縮放 */
    min-width: 140px; /* 最小寬度確保文字可讀 */
    
    /* 視覺呈現：模仿 Logo 容器 */
    height: 80px;
    background-color: #fff;
    border: 1px solid var(--tmda-border);
    border-radius: 8px;
    
    /* 內容置中 */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding: 0px;
}

.partner-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.partner-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--tmda-muted); /* 讓文字顏色偏淡，模仿 Logo 視覺 */
    line-height: 1.2;
}

/* RWD 調整 */
@media (max-width: 768px) {
    .partner-item {
        flex: 1 1 calc(50% - 10px); /* 手機版：每行 2 個 */
        height: 60px;
        min-width: unset;
    }
    .partner-name {
        font-size: 0.85rem;
    }
    .partner-section {
        padding: 2rem 10px;
    }
}

/* ====== 學員見證區塊 ====== */
.testimonial-section {
    padding: 3rem 1.5rem;
    margin: 2rem auto;
    max-width: 1200px;
}

.testimonial-section .container {
    padding: 0;
}


.testimonial-cards {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap; /* 應對 RWD */
}

.testimonial-card {
    background-color: #ffffff;
    border-radius: var(--tmda-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 30px;
    width: 350px; /* 卡片最大寬度 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.3s ease;
}

.testimonial-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.quote {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--tmda-dark);
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
}

.quote::before {
    content: "“";
    font-size: 3rem;
    color: var(--tmda-primary);
    position: absolute;
    top: -15px;
    left: -10px;
    opacity: 0.3;
}

.client-info {
    border-top: 1px solid var(--tmda-soft);
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
}

.client-name {
    font-weight: 600;
    color: var(--tmda-text);
    margin-bottom: 4px;
}

.client-lesson {
    color: var(--tmda-muted);
    font-size: 0.85rem;
}


/* RWD 調整 */
@media (max-width: 768px) {
    .testimonial-card {
        width: 100%; /* 手機上滿版 */
        max-width: none;
        margin-bottom: 15px;
    }
    .testimonial-cards {
        gap: 15px;
    }
    .testimonial-section {
        padding: 2rem 10px;
    }
}

/* ====== 專業領域區塊 (Core Categories) ====== */
/* 預設 (桌機版)：顯示桌面標題，隱藏手機標題 */
.desktop-title {
    display: block; /* 確保桌面標題預設顯示 */
}

.mobile-title {
    display: none; /* 預設隱藏手機標題 */
}

.category-section {
    padding: 0.5rem 1.5rem;
    margin: 2rem auto;
    max-width: 1200px;
    text-align: center;
}

.category-intro {
    font-size: 1.1rem;
    color: var(--tmda-muted);
    margin-bottom: 30px;
}

.category-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.category-card {
    /* 確保寬度能在桌機上平均分配 */
    flex: 2 2 200px; 
    max-width: 280px;
    text-align: center;
    padding: 25px 15px;
    border-radius: var(--tmda-radius);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    /* cursor: pointer; */
    min-height: 150px; /* 統一卡片高度 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border: 1px solid var(--tmda-border);
}

/* .category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
} */

.category-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--tmda-dark);
    margin-bottom: 10px;
}

.category-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--tmda-muted);
}

/* RWD 調整 */
@media (max-width: 768px) {
  /* 隱藏桌面標題 */
    .desktop-title {
        display: none;
    }
    
    /* 顯示手機標題 */
    .mobile-title {
        display: block;
    }

  .category-cards {
      gap: 15px;
  }
  .category-card {
      flex: 1 1 calc(50% - 10px); /* 手機上每行兩張 */
      max-width: none;
      padding: 20px 10px;
      min-height: 120px;
  }
  .category-card h3 {
      font-size: 1.2rem;
  }
  .category-card p {
      font-size: 0.9rem;
  }
}

/* 可選：為不同領域設定主題色 */
.tech-bg { border-bottom: 5px solid #007bff; }
.charisma-bg { border-bottom: 5px solid #ff4500; }
.marketing-bg { border-bottom: 5px solid var(--tmda-primary); }
.management-bg { border-bottom: 5px solid #28a745; }
.interest-bg { border-bottom: 5px solid #6f42c1; }


/* === 精選課程區 === */
.lesson-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1100px;
  margin: 24px auto;
  text-align: center;
  gap: 12px;
}


.lesson-line a {
  text-decoration: none;
  color: inherit;
}

/* === 課程卡片 === */
.card {
  width: 300px;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.card-body {
  padding: 16px;
  text-align: left;
}

.card-body .lesson-type  {
  /* font-size: 0.8rem; */
  margin-bottom: 4px;
}

.card.lesson-card { position: relative; overflow: hidden; border-radius: 12px; }
.card-overlay-link {
  position: absolute;
  inset: 0;          /* top:0; right:0; bottom:0; left:0; */
  z-index: 1;        /* 蓋在最上層 */
  text-indent: -9999px; /* 隱藏文字 (若有)，視需求 */
}

.lesson-title h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.teacher {
  text-align: right;
  color: #8c8888;
  font-size: 0.9rem;
}

.price-time {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: var(--icon-hover-color);
  font-weight: 600;
}

/* ---響應式--- */
@media(max-width: 768px){
  /* 調整課程區容器：移除水平置中限制，允許內容撐滿 */
  .lesson-area {
    /* 移除 max-width: 1100px; 和 text-align: center; */
    max-width: none;
    padding: 0 10px; /* 給予左右邊距 */
  }
  .lesson-area h2 {
    font-size: 1.6rem;
  }
  /* 讓每個課程卡片填滿容器寬度 */
  .card.lesson-card {
    width: 100%; /* 填滿 lesson-area 的寬度 */
    margin: 8px 0; /* 在垂直方向上增加卡片間距 */
    /* 移除 box-shadow: 0 4px 10px rgba(0,0,0,0.15); 以視覺簡化 */
    box-shadow: none;
    border: 1px solid var(--tmda-border);
  }

  /* 確保課程卡片內的圖片填滿卡片寬度 */
  .card-img-top {
    width: 100%;
    height: auto;
  }
}



/* Footer 容器 */
.site-footer {
  background-color: #333;
  color: #ccc;
  padding: 40px 20px 20px;
  font-family: sans-serif;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
  justify-content: space-between;
}

.footer-col {
  flex: 1 1 200px;
  height: 160px;
}

/* Footer 標題 */
.footer-title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2rem;
  display: block;
  margin-bottom: 10px;
  color: #fff;
}

/* Footer 連結 */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 6px;
}

.footer-links li a {
  text-decoration: none;
  color: #ccc;
  font-size: 0.95rem;
  transition: color 0.3s;
}

.footer-links li a:hover {
  color: #fff;
}

/* 社群圖示 */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.icon-16 {
  width: 16px;
  height: 16px;
  fill: #ccc;
  transition: fill 0.3s;
}

.footer-social a:hover .icon-16 {
  fill: #fff;
}

/* Footer 版權訊息 */
.footer-copy {
  text-align: center;
  font-size: 0.85rem;
  color: #aaa;
  margin-top: 20px;
}

/* 響應式 */
@media (max-width: 768px) {
  .footer-container {
    /* flex-direction: column; */
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
  }

  .footer-col {
    flex: 1 1 30%;
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}