/* ====== ⬇ total.css（原樣保留） ⬇ ====== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&display=swap');
/* 字體變數：書法優先，後面是各系統常見楷體做備援 */
:root{
  /* mac / Windows / 其它系統的中文備援字體，確保全覆蓋 */
  --font-ui: "Noto Sans TC",
             "PingFang TC", "Heiti TC", "Microsoft JhengHei",
             "Noto Sans CJK TC", /* 思源黑體 */
             system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* 全站用 Noto Serif TC（襯線／明體，跟預設黑體差很多） */
html, body{
  font-family: "Noto Serif TC", "Noto Sans TC",
               "PingFang TC", "Microsoft JhengHei",
               "Noto Sans CJK TC", serif !important;
  line-height: 1.8;
  letter-spacing: .01em;
}
/* 導覽列的粗細微調（Noto Serif 也有粗體可用） */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1200;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/*全域樣式設定 避免排版跑掉*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*標題設定*/
/* 版頭條 */
:root{
  --header-h: 80px;                         /* 導覽列高度 */
  --header-bg: rgba(255,255,255,.9);        /* 白底、可帶點透明 */
  --header-ink: #111;                       /* 文字顏色（黑） */
  --header-blur: 8px;                       /* 背景模糊，可要可不要 */
}
/* 固定在頂端 + 白底黑字 */
.site-header{
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h); z-index: 1000;

  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;

  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border-bottom: 1px solid rgba(0,0,0,.06);   /* 細線分隔 */
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  color: var(--header-ink);
}
/* 深色主題時的 hover 顏色（可調） */
.site-header nav a:hover{
  color: #d1d5db;              /* 或用 var(--accent) 想更醒目就改這個 */
}
/* 讓內容不被固定 header 壓住 */
body{ padding-top: var(--header-h); }
/* Logo（沿用你的圖） */
.brand{
  width: 240px; height: 64px; margin: 0;
  background: url("./img/logo.png") no-repeat left center / contain;
  color: transparent;
}
.brand__text{ position: absolute; left: -10000px; }
/* 導覽列：白底黑字 */
.site-header nav ul{
  list-style: none; display: flex; gap: 32px;
  margin: 0; padding: 0; align-items: center;
}
.site-header nav a{
  color: var(--header-ink);
  text-decoration: none;
  font-weight: 800; font-size: 20px; line-height: 1;
  padding: 10px 8px;
}

/* 錨點跳轉不被固定列擋住 */
section[id]{ scroll-margin-top: calc(var(--header-h) + 8px); }

/*簡介設定*/
.about {
    background-color: antiquewhite;
    color: white;
    min-height: 92vh;
    background-repeat: no-repeat;
    background-color: cover;
    background-position: center;
    display: flow-root;
    background-image: url("img/背景.jpg");
    background-repeat: no-repeat;
    background-position: 50% var(--aboutY, 60%);
    background-size: cover;      /* ← 原本寫成 background-color: cover; 把它改成這行 */
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* 半透明遮罩：絕對定位 + 四邊貼齊 */
.about::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}
.about > *{ position:relative; z-index:1; margin:12px 0; }
.about > :last-child{ margin-bottom:0; }  /* 保險 */
.about h2 {
    font-size: 35px;
    color: #ffffff;
}
.about p {
    font-size: 24px;
    color: #ffffff;
    margin: 12px 0;
    text-align: center;  /* 水平置中 */
}


/*歷代人物設定*/
/* 容器：三欄並排，標題佔滿一列 */
.history{
  --gap: 24px;                                   /* 卡片間距 */
  --card-w: clamp(260px, 28vw, 360px);           /* 卡片寬度：隨螢幕縮放 */
  --card-ratio: 3 / 4;                           /* ✅ 你喜歡的比例（修長） */

  width: min(92%, var(--container, 1080px));
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  padding-inline: var(--gap);                    /* 左右邊距 = 間距 */
  justify-items: center;                         /* 每欄的卡片居中 → 第二張剛好在正中 */
  align-items: start;
}
.history h2{
  grid-column: 1 / -1;      /* 讓標題跨滿整列 */
  margin: 0 0 12px;
  text-align: center;
}
/* 單一卡片 */
.person-card{
  width: var(--card-w);                          /* 固定卡片寬度 */
  max-width: 100%;
  aspect-ratio: var(--card-ratio);               /* ← 3:4 */
  max-height: 360px;                             /* 上限避免太長，可調 */
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  cursor: pointer;
}
/* 圖片 */
.person-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;                    /* 臉部略往上，可依照片調 */
  display: block;
  transition: transform .45s ease, filter .45s ease;
}
/* 介紹文字（覆蓋層） */
.person-card .caption{
  position: absolute;
  left: 0; 
  right: 0; 
  bottom: 0;
  padding: 12px 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.18));
  transform: translateY(100%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  pointer-events: none;      /* 不擋滑鼠 */
  font-size: 16px;
}
/* Hover：只影響自己這張 */
.person-card:hover img{
  transform: scale(1.06) rotate(-1.5deg);
  filter: brightness(.92);
}
.person-card:hover .caption{
  transform: translateY(0);
  opacity: 1;
}

/* 讓整張人物卡都是可點的區域，維持原本 hover 效果 */
.person-card .person-link{
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;   /* 不要底線 */
  color: inherit;          /* 承襲文字色 */
  position: relative;      /* 保持 caption 絕對定位的參考 */
}

/* 鍵盤可及性：聚焦時給一圈淡淡外框 */
.person-card .person-link:focus-visible{
  outline: 3px solid rgba(0,0,0,.35);
  outline-offset: 3px;
  border-radius: 12px;
}

/* 保留你原本的 hover 動畫（link 也算 hover 範圍） */
.person-card:hover img,
.person-card .person-link:hover img{
  transform: scale(1.06) rotate(-1.5deg);
  filter: brightness(.92);
}
.person-card:hover .caption,
.person-card .person-link:hover .caption{
  transform: translateY(0);
  opacity: 1;
}

/*結語設定*/
/* 圖左／文右 */
.conclusion{
  display: grid;
  grid-template-columns: minmax(320px, 40%) 1fr; /* 左圖右文 */
  gap: 24px;
  width: min(92%, 1080px);
  margin-inline: auto;
  align-items: center;
}
.conclusion-media{
  margin: 0;
  width: 100%;                /* ❗️取代舊的 width: fit-content */
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.conclusion-media img{
  display: block;
  width: 100%;                /* 圖片吃滿左欄 */
  height: auto;
  object-fit: cover;          /* 可用 contain 看你喜歡 */
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.conclusion .tagline{
  margin-top: 8px;
  text-align: center;
}
.conclusion-text{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 表單標題 */
/* 聯絡區塊 Title + 副標 */
#contact{
  padding-block: 16px;          /* 區塊上下留白 */
  scroll-margin-top: 80px;      /* 錨點跳轉時不被導覽列蓋住（可留） */
}
#contact h2{
  text-align: center;           /* 置中 */
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 8px;
  color: var(--ink);            /* 深灰主字色 */
}
/* 在標題底下加一條細線，微強調 */
#contact h2::after{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  margin: 8px auto 0;
  background: var(--brand-2);   /* 你的灰色 #777 */
  border-radius: 2px;
}
/* 只針對標題後的第一段副標（讓我們合作 ❤） */
#contact > p:first-of-type{
  text-align: center;
  color: var(--muted);          /* 次要文字色 */
  font-size: 16px;
  margin: 4px 0 18px;
  line-height: 1.6;
}

/* 表單 */
.form {
  width: min(560px, 92%);
  margin: 12px auto 28px;
}
.form input,
.form textarea,
.form button {
  width: 100%;
  font-size: 16px;
  padding: 15px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border-radius: 6px;
}
.form input,
.form textarea { margin-bottom: 15px; }
.form textarea { resize: vertical; min-height: 140px; }

.form button {
  border: none;
  background: #000;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.form button:hover { opacity: .85; }

/* 社群圓形按鈕 */
.social {                       /* ← 原本是 .social-links */
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 28px 0 48px;
}
.social .icon {                 /* ← 原本是 .social-links .icon */
  background: #000000;
  color: #fff;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 38px;
  transition: background-color .25s ease, transform .25s ease;
}
.social .icon:hover {
  background: #5d5c5b;
  transform: translateY(-2px);
}
/* 你的 class 用哪個就寫哪個 (.social 或 .social-links) */
.social .icon,
.social-links .icon{
  text-decoration: none;      /* 移除底線 */
}
.social .icon:hover,
.social-links .icon:hover{
  text-decoration: none;      /* 滑過也不要底線 */
}

/*聯絡資訊設定*/
.site-footer{
  background:#000;
  color:#b7b7b7;
  padding:12px 0;
  font-size:14px;
}
/* 一行：左邊標題 + 右邊三項；整塊置中 */
.footer-line{
  display:flex;
  justify-content:center;     /* 讓整排置中 */
  align-items:baseline;       /* ← 與「團」同一基線，視覺上下對齊 */
  gap:16px;
  white-space:nowrap;         /* 不換行 */
}
/* 標題與內容同字級/行高，邊緣自然對齊 */
.footer-title{
  margin:0;
  color:#fff;
  font-size:14px;
  line-height:1.3;
}
.footer-info{
  display:flex;
  gap:24px;                   /* 三項之間的距離 */
}
.footer-info p{
  margin:0;
  font-size:14px;
  line-height:1.3;
  text-align:left;
}
/* 連結顏色 */
.site-footer a{
  color:#fff;
  text-decoration:underline;
}
.site-footer a:hover{ color:#ddd; }

/* ============ 行動版漢堡選單 ============ */
/* —— 漢堡按鈕 —— */
.nav-toggle{
  display: none;              /* 桌機隱藏，手機顯示 (見媒體查詢) */
  width: 44px; height: 44px;
  border: 0; background: none; padding: 0;
  position: relative;
  cursor: pointer;
  z-index: 1300;              /* 高於 .site-nav，確保可點到 */
}
.nav-toggle .bar{
  position: absolute;
  left: 10px; right: 10px;
  height: 2px; background: #111;
  border-radius: 1px;
  transition: transform .25s, opacity .25s, top .25s;
}
.nav-toggle .bar:nth-child(1){ top: 14px; }
.nav-toggle .bar:nth-child(2){ top: 21px; }
.nav-toggle .bar:nth-child(3){ top: 28px; }
/* 變成 X 的動畫 */
.nav-toggle.is-active .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active .bar:nth-child(2){ opacity: 0; }
.nav-toggle.is-active .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* 桌機維持橫排 */
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:32px; }
/* ========================================== */
/* ==== 強制移除任何測試用浮條（所有尺寸） ==== */
html::before,
html::after,
body::before,
body::after,
#mobile-badge,
.mobile-badge,
.debug-badge,
.dev-badge,
.mobile-css-badge,
[data-debug-badge] {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* ========================================== */
/* ===== Scroll Reveal (淡入 + 位移/縮放/模糊) ===== */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity: 1; transform: none; }
.reveal--left  { transform: translateX(-24px); }
.reveal--right { transform: translateX( 24px); }
.reveal--up    { transform: translateY( 24px); }
.reveal--down  { transform: translateY(-24px); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--up.is-visible,
.reveal--down.is-visible{ transform: none; }

/* 交錯群組 */
.reveal-stagger > *{ /* 由 JS 動態加 .reveal，這裡無需特別規則 */ }
/* ========================================== */
/* 右下角解鎖播放鈕（黑底白字） */
.bgm-unlock{
  position: fixed;
  right: 16px; bottom: 16px;
  padding: 10px 14px;
  border: 0; border-radius: 999px;
  background: #000; color: #fff;
  font-size: 14px; line-height: 1;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  cursor: pointer; z-index: 1500;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: auto;
}
.bgm-unlock:hover{ transform: translateY(-1px); }
.bgm-unlock[hidden]{ display: none !important; }
/* ========================================== */
/* ===== 進場淡出覆蓋層（全螢幕照片 → 淡出） ===== */
#splash-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}
#splash-overlay > img{
  width: 100vw; height: 100vh;
  object-fit: cover; object-position: center;
  display: block;
}
#splash-overlay.is-fading{ animation: splash-fade-out 0.8s ease forwards; }
@media (prefers-reduced-motion: reduce){
  #splash-overlay{ display: none !important; }
}
@keyframes splash-fade-out{
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
/* ========================================== */
/* ============ 手機版（≤ 768px） ============ */
@media (max-width: 768px){
  /* Header 尺寸微調 */
  :root{ --header-h: 68px; }
  .site-header{ padding: 0 16px; }
  .brand{ width: 190px; height: 52px; }
  /* 歷代人物：單欄直排 */
  .history{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px;
    padding-inline: 16px;
    justify-items: center;
    align-items: start;
  }

  /* 結語：圖上文下（你已經是 flex，但再保險一下） */
  .conclusion{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    width: min(94%, 1080px) !important;
    padding-block: 18px !important;
  }
  .conclusion > *{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .conclusion-media{
    order: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  .conclusion-media img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
  }
  .conclusion .tagline{
    text-align: center !important;
    margin-top: 6px !important;
  }
  .conclusion-text{
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  /* 抽屜本體 */
  .nav-toggle{ display:block; }
  .site-nav{
    position: fixed;
    left:0; right:0;
    top: var(--header-h, 68px);
    background: var(--header-bg, rgba(255,255,255,.95));
    -webkit-backdrop-filter: blur(var(--header-blur, 8px));
    backdrop-filter: blur(var(--header-blur, 8px));
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    max-height: calc(100dvh - var(--header-h, 68px));
    overflow: auto;
    transform: translateY(-10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
    z-index: 1050;

    /* 隱藏捲軸外觀（仍可滑動） */
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar{ display: none; }
  .site-nav.is-open{
    transform: translateY(0);
    opacity: 1; visibility: visible; pointer-events: auto;
  }

  /* 手機：改直向 + 交叉軸置中 → 解決收合時「看起來歪」 */
  .site-nav ul{
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px 16px;
    align-items: center;                 /* 交叉軸置中（關鍵） */
  }
  .site-nav ul > li{
    display: flex; justify-content: center;
    width: 100%;
  }

  /* 所有連結滿寬區塊，但內容置中 */
  .site-nav a{
    display:block;
    padding:10px 2px;
    font-size:18px;
    color: var(--header-ink, #111);
    text-decoration:none;
    text-align: center;                  /* 內容置中 */
  }
  .site-nav a:hover{ color:#444; }

  /* 展開時避免背景滾動 */
  body.no-scroll{ overflow:hidden; }
/* ========================================== */
  .bgm-unlock{ right: 12px; bottom: 12px; font-size: 13px; }
}
/* ========================================== */
/* 屏幕閱讀器專用（無障礙） */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* ========================================== */
/* 保證可捲動 */
html, body { overflow-y: auto; }

/* about 的遮罩只做視覺，不吃事件 */
.about::before { pointer-events: none; }

/* 手機展開選單時才鎖捲動；桌機一律不鎖 */
@media (max-width: 768px){ body.no-scroll { overflow: hidden; } }
@media (min-width: 769px){ body.no-scroll { overflow: auto !important; } }

/* 抽屜選單收起時不吃事件，展開才吃 */
@media (max-width: 768px){
  .site-nav         { pointer-events: none; }
  .site-nav.is-open { pointer-events: auto; }
}
/* ========================================== */
/* ============ 下拉選單（桌機：hover；手機：手風琴） ============ */
.site-nav .has-sub { position: relative; }
.site-nav .nav-parent{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; color: var(--header-ink, #111); font-weight: 800; line-height: 1;
  padding: 10px 8px; display: inline-flex; align-items: center; gap: 6px;
}
.site-nav .nav-parent:focus-visible{ outline: 2px solid #999; border-radius: 6px; }

/* 小箭頭 */
.site-nav .caret{
  display:inline-block; width: 0; height: 0; margin-left: 2px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor; transition: transform .2s ease;
}
.site-nav .has-sub.open > .nav-parent .caret{ transform: rotate(180deg); }

/* 子選單（桌機基礎：絕對定位、預設隱藏） */
.site-nav .dropdown{
  list-style: none; margin: 0; padding: 8px 0;
  background: var(--header-bg, rgba(255,255,255,.98));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.12);
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 180px;
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 1400;
}
.site-nav .dropdown a{
  display: block; padding: 10px 14px; text-decoration: none;
  color: var(--header-ink, #111); font-weight: 700; font-size: 16px;
}
.site-nav .dropdown a:hover{ background: rgba(0,0,0,.04); }
/* ========================================== */
/* 桌機：子清單直向（上→下）＋ 文字水平（左→右）＋ hover/.open 顯示 */
@media (min-width: 769px){
  /* 只讓最外層主選單橫排，不影響子層 ul */
  .site-header nav > ul{
    display: flex !important;
    gap: 32px !important;
    align-items: center;
  }

  /* 子清單（第二層 ul）不要用 flex，恢復區塊直向排列 */
  .site-header nav ul ul{
    display: block !important;
    gap: 0 !important;
  }

  /* 子清單本體：確保容器與內容都是水平書寫 */
  .site-nav .dropdown{
    display: block !important;               /* 垂直一列一列 */
    writing-mode: horizontal-tb !important;  /* 左→右 */
    text-orientation: mixed !important;
    top: 100% !important;      /* 由 calc(100% + 8px) 改為緊貼 */
    margin-top: 0px !important;/* 想要視覺間距用 margin 產生，不製造 hover 縫隙 */
  }
  .site-nav .dropdown > li{
    display: block !important;               /* 每項獨佔一行（上→下） */
    width: 100% !important;
  }
  .site-nav .dropdown a{
    display: block !important;
    writing-mode: horizontal-tb !important;  /* 左→右文字 */
    text-orientation: mixed !important;
    transform: none !important;
    white-space: nowrap !important;
    text-align: left;                        /* 要置中可改 center */
    padding: 10px 14px;
  }

  /* 顯示條件：滑入或程式加上 .open 時打開 */
  .site-nav .has-sub:hover > .dropdown,
  .site-nav .has-sub.open  > .dropdown{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* 在清單上方鋪一條看不見的「橋」，讓滑鼠穿越時仍算在清單內 */
  .site-nav .dropdown::before{
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -10px;                /* 覆蓋按鈕與清單之間可能的空氣帶 */
    height: 10px;              /* 想更寬容可以調 12~14 */
  }
}


/* ========================================== */
/* 手機覆蓋：未展開與上方兩項對齊；展開時維持透明置中（最終整合版） */
@media (max-width: 768px){
  /* 4 個頂層選項：直向排列、等距、置中 */
  .site-nav ul{
    flex-direction: column;
    align-items: center !important;
    gap: 6px !important;                  /* 全部項目間距一致 */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .site-nav ul > li{
    width: auto !important;
    align-self: center !important;
  }
  /* 頂層連結字級一致（關於劇團 / 社交平台） */
  .site-nav > ul > li > a{
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 18px !important;
    padding: 10px 8px !important;
  }

  /* 有下拉的頂層（電子名片 / 活動資訊）字級與高度一致 */
  .site-nav .nav-parent{
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 18px !important;           /* 與頂層連結一致 */
    padding: 10px 8px !important;         /* 與頂層連結一致 */
    line-height: 1 !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* 下拉清單：收合時完全隱藏（不佔位），展開才顯示 */
  .site-nav .dropdown{
    position: static !important;
    display: none !important;             /* 收合：不佔位、看不到 */
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .site-nav .has-sub.open > .dropdown{
    display: block !important;            /* 展開：顯示 */
    margin: 4px 0 0 !important;           /* 標題與清單的距離 */
  }

  /* 清單項目（人名） */
  .site-nav .dropdown a{
    display: block !important;
    padding: 8px 12px !important;
    font-size: 16px !important;           /* 若要與頂層同大可改 18px */
    text-align: center !important;
  }
}

/* 手機：強制「電子名片／活動資訊」→ 標題在上、名單在下；收合時完全隱藏 */
@media (max-width: 768px){
  .site-nav .has-sub{
    display: grid !important;
    grid-template-rows: auto auto;
    justify-items: center !important;
    align-items: start !important;
    width: auto !important;
  }
  .site-nav .nav-parent{ grid-row: 1; }

  /* 名單固定在標題下方 */
  .site-nav .dropdown{
    grid-row: 2;
    position: static !important;
    display: block !important;          /* 基本顯示（下面再用狀態切換） */
    margin: 4px 0 0 !important;
    float: none !important;
    clear: both !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
  }

  /* 收合時：完全不佔位；展開時：顯示在下方 */
  .site-nav .has-sub:not(.open) > .dropdown{
    display: none !important;
    margin: 0 !important;
  }
  .site-nav .has-sub.open > .dropdown{
    display: block !important;
  }
}

/* === Android + in-app 降級：加上 .no-blur 時，關掉昂貴的 backdrop-filter === */
.no-blur .site-header{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,.98) !important;
}

/* 外部開啟提示列樣式 */
.inapp-tip{
  position: fixed; z-index: 99999;
  left: 12px; right: 12px; bottom: 14px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 14px; line-height: 1.4;
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.inapp-tip button{
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; font-weight: 700;
  background: #fff; color: #111;
}

/* 只高亮四顆分頁，不影響「加入官方 LINE」 */
.quick-actions .qa-tab.is-active,
.quick-actions .qa-tab[aria-current="page"]{
  background: linear-gradient(135deg, #2563eb, #22d3ee) !important; /* 藍→青 */
  border-color: #1e40af !important;
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(34,211,238,.35);
}

/* 只改 Hero 區塊裡的「加入官方 LINE」按鈕，不影響其他 primary */
.quick-actions .btn.primary{
  background: linear-gradient(135deg, #84CC16, #22C55E) !important; /* LINE 綠 → 翡翠綠 */
  border-color: #059669 !important;   /* 深綠邊框 */
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(6, 199, 85, .28);
}
.quick-actions .btn.primary:hover{
  filter: saturate(112%);
}