/* 全站基底：明亮溫馨學術風（王教授 2026-04 定調；Flora 請在 token 內擴充 UI） */
:root {
  --bg-deep: #ebe4dc;
  --bg-mid: #dfece9;
  --bg-warm: #fdf8f3;
  --text-primary: #1e293b;
  --text-muted: #697b8e; /* #64748b → #697b8e：頁尾浅底 contrast 4.42→4.5+ (WCAG AA) */
  --accent-teal: #0f766e;
  --accent-teal-hover: #0d9488;
  --accent-amber: #c2410c;
  --accent-blue: #1d4ed8;
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(30, 41, 59, 0.09);
  --header-bg: rgba(255, 252, 248, 0.94);
  --font-sans: "Outfit", "Noto Sans TC", system-ui, sans-serif;
  /* 字級 token（Gemini 建議對照；長文以 body 1rem 為準） */
  --text-body: 1rem;
  --text-small: 0.875rem;
  --radius-lg: 16px;
  --shadow-soft: 0 4px 28px rgba(30, 41, 59, 0.07), 0 1px 3px rgba(30, 41, 59, 0.04);
  --shadow-card-hover: 0 12px 40px rgba(30, 41, 59, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: linear-gradient(168deg, var(--bg-warm) 0%, #f7faf9 42%, var(--bg-mid) 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath fill='%230f766e' fill-opacity='0.07' d='M40 4l12 20h-24L40 4zm0 72l12-20h-24l12 20zM4 40l20-12v24L4 40zm72 0l-20-12v24l20-12z'/%3E%3C/svg%3E");
  z-index: 0;
}

.site-wrap {
  position: relative;
  z-index: 1;
  /* 主導覽九項＋膠囊邊距需較寬；長文閱讀仍由 .content-prose 等區塊另行限寬 */
  max-width: min(100%, 70rem);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-wrap > main {
  flex: 1 0 auto;
}

.site-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
}

.site-header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.site-header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* 全站主導覽：同一列至右側「聯絡我們」；寬度不足時整列橫向捲動，避免單顆落單換行 */
.site-nav-global {
  margin-top: 1rem;
  margin-bottom: 0;
  gap: 0.4rem;
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}

.site-nav-global a {
  flex: 0 0 auto;
  padding: 0.42rem 0.72rem;
  font-size: var(--text-small);
}

@media (max-width: 860px) {
  /* 六個指標改為 3 欄 */
  .hero-stat {
    flex: 0 1 calc((100% - 2 * 0.75rem) / 3);
    min-width: calc((100% - 2 * 0.75rem) / 3);
  }
  .hero-stat-number {
    font-size: 1.4rem;
  }
  .hero-stat-label {
    font-size: 0.6rem;
  }
  .site-nav-global {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: 2px; /* 捲軸與底線留白 */
  }
}

.site-nav + .site-nav-sub,
.site-nav-global + .site-nav-sub {
  margin-top: 0.4rem;
}

.page-lead {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 42rem;
}

.link-row {
  margin-top: 1rem;
  line-height: 1.8;
}

.link-row a {
  color: var(--accent-teal);
  text-decoration: none;
}

.link-row a:hover {
  text-decoration: underline;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.site-nav a:hover {
  border-color: rgba(15, 118, 110, 0.35);
  color: var(--accent-teal);
  background: rgba(255, 255, 255, 0.95);
}

.site-nav a[aria-current="page"] {
  background: rgba(15, 118, 110, 0.14);
  border-color: rgba(15, 118, 110, 0.4);
  color: var(--accent-teal);
  font-weight: 600;
}

.lang-switch {
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.lang-switch a {
  color: var(--accent-teal);
  text-decoration: none;
}

.lang-switch a:hover {
  text-decoration: underline;
}

main {
  margin-top: 1.5rem;
}

/* 新聞條目（news.html 最新消息、daily-news.html 每日新聞共用） */
.news-day {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.news-day header time {
  font-weight: 600;
  color: var(--accent-teal);
}

.news-body {
  margin-top: 0.5rem;
}

.news-body p:first-child {
  margin-top: 0;
}

/* 首頁「最新消息」「每日新聞」入口區（版式共用） */
.home-daily-news,
.home-latest-news {
  margin-top: 0.5rem;
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.home-daily-news:first-of-type,
.home-latest-news:first-of-type {
  margin-top: 0.5rem;
}

.home-daily-news + .home-daily-news,
.home-latest-news + .home-daily-news,
.home-daily-news + .home-latest-news {
  margin-top: 1.25rem;
}

.home-daily-news h2,
.home-latest-news h2 {
  margin: 0 0 0.65rem;
  font-size: 1.25rem;
  color: var(--accent-teal);
}

.home-daily-news > p,
.home-latest-news > p {
  margin: 0 0 0.75rem;
}

/* 一般內容區玻璃卡（非首頁「最新消息」語意；與 .home-latest-news 版式一致） */
.content-card {
  margin-top: 0.5rem;
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.content-card h2 {
  margin: 0 0 0.65rem;
  font-size: 1.25rem;
  color: var(--accent-teal);
}

.content-card > p {
  margin: 0 0 0.75rem;
}

.home-daily-news-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: var(--accent-teal);
  border: 1px solid rgba(15, 118, 110, 0.45);
  border-radius: 999px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(15, 118, 110, 0.2);
}

.home-daily-news-cta:hover {
  background: var(--accent-teal-hover);
  border-color: rgba(15, 118, 110, 0.55);
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

/* 實驗室／研究方向內文、圖像 */
.content-prose {
  margin-top: 1rem;
}

.content-prose h3 {
  margin: 1.35rem 0 0.5rem;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--accent-teal);
}

.content-prose h3:first-child {
  margin-top: 0;
}

.content-prose p,
.content-prose li {
  color: var(--text-primary);
  font-size: var(--text-body);
  line-height: 1.65;
}

.content-prose p {
  margin: 0 0 1rem;
}

.content-prose p:last-child {
  margin-bottom: 0;
}

.content-prose .muted {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.content-prose ul {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.25rem;
}

.about-figure,
.team-figure {
  margin: 1rem 0 1.25rem;
  text-align: center;
}

.about-figure img,
.team-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.about-figure figcaption,
.team-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.team-pi {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.team-pi h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--accent-teal);
}

.team-pi .pub-author-pi {
  font-weight: 700;
  color: var(--accent-teal);
}

.team-roster {
  width: 100%;
  margin-top: 1rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.team-roster th,
.team-roster td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--glass-border);
}

.team-roster th {
  color: var(--accent-amber);
  font-weight: 600;
}

.direction-blurb {
  margin-top: 1rem;
  line-height: 1.65;
}

.direction-blurb p {
  margin: 0 0 0.85rem;
}

/* 研究領域介紹：放寬行寬（避免過早換行） */
.direction-blurb.content-prose {
  max-width: none;
}
.direction-blurb.content-prose p {
  max-width: none;
}

/* ============================================
   Design System §4 動效：無障礙 focus + 漂浮光暈
   ============================================ */

/* 無障礙：鍵盤導航 focus ring */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 首頁背景光暈（淡杏／薄荷，低對比、溫馨感） */
@keyframes float-orb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(3%, 5%) scale(1.04); }
  66%       { transform: translate(-2%, 3%) scale(0.98); }
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 58% 48% at 78% 12%, rgba(255, 237, 213, 0.55) 0%, transparent 68%),
    radial-gradient(ellipse 50% 52% at 18% 72%, rgba(204, 251, 241, 0.45) 0%, transparent 62%),
    radial-gradient(ellipse 40% 42% at 85% 78%, rgba(254, 243, 199, 0.35) 0%, transparent 58%);
  animation: float-orb 32s ease-in-out infinite;
}

body.page-home::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
  }
}

/* ============================================
   Design System §2 字體層級加強（可選優化）
   ============================================ */
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 500; line-height: 1.4; }

/* ============================================
   Design System §3 導覽加強：sticky + 膠囊 active 態
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 2rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* ============================================
   Design System §3 玻璃卡片：加強 hover 上浮
   ============================================ */
.pub-card,
.news-day {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.pub-card:hover,
/* 科研摘要內頁-heading */
.daily-news-heading {
  margin: 0.25rem 0 1.5rem;
}

.daily-news-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
}

/* 科研摘要日期列表 */
.daily-news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.daily-news-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--glass-border);
}

.daily-news-item:first-child {
  border-top: 1px solid var(--glass-border);
}

.daily-news-item a {
  color: var(--accent-teal);
  text-decoration: none;
  font-weight: 500;
}

.daily-news-item a:hover {
  text-decoration: underline;
}

.news-day:hover {
  border-color: rgba(15, 118, 110, 0.22);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* ============================================
   Design System §5 內容最大寬度（長文區）
   ============================================ */
.content-prose {
  max-width: 52rem;
}
.content-prose p,
.content-prose li {
  max-width: 46rem; /* 約 65–75 字元 */
}

/* ============================================
   Flora 創意美化擴充（AGENTS.md 授權範圍內）
   2026-04-12
   ============================================ */

/* ── 頁面進場動畫（fadeIn + slideUp）─────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-wrap > * {
  animation: fadeSlideUp 0.55s ease-out both;
}
.site-wrap > *:nth-child(2) { animation-delay: 0.08s; }
.site-wrap > *:nth-child(3) { animation-delay: 0.16s; }
.site-wrap > *:nth-child(4) { animation-delay: 0.24s; }
.site-wrap > *:nth-child(5) { animation-delay: 0.32s; }
.site-wrap > .site-footer {
  animation: none;
}

/* 長文頁：延後進場（減少視覺干擾） */
main .content-prose,
main .pub-list {
  animation-delay: 0.1s;
}

/* ── Header 底部髮絲線（teal 漸層）─────────────── */
.site-header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-teal) 30%,
    var(--accent-teal) 70%,
    transparent 100%
  );
  opacity: 0.45;
}

/* ── Hero 區塊裝飾：實驗室口號／數據強調──────────── */
.hero-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 0.85rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent-teal);
  border-radius: var(--radius-lg);
  text-align: center;
  flex: 0 1 calc((100% - 5 * 0.75rem) / 6);
  min-width: 0;
  box-sizing: border-box;
}
.hero-stat--blue {
  border-left-color: #4285f4;
}
.hero-stat-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-teal);
  line-height: 1;
  font-family: var(--font-sans);
}
.hero-stat--blue .hero-stat-number {
  color: #4285f4;
}
.hero-stat-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
  overflow: hidden;
}

/* 首頁 Hero：標題區（首頁已不顯示 EML.gif；實驗主持人頁仍可用 .lab-badge-eml） */
.hero-intro {
  max-width: 100%;
}

/* 首頁主標：略放大 clamp 上限（對照外部排版建議；中英首頁共用 #home-hero-heading） */
#home-hero-heading {
  margin: 0 0 0.5rem;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* 首頁 Hero：Google Scholar 官方指標（卡片式，與站內 SCI 分開標示） */
.home-scholar-panel {
  margin-top: 1.15rem;
  padding: 0;
  max-width: min(100%, 22rem);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.home-scholar-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.75rem 1rem 0.6rem;
  background: #4285f4;
}
.home-scholar-heading {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.home-scholar-heading .gs-brand {
  color: #fff;
  font-weight: 900;
}
.home-scholar-profile-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.home-scholar-profile-link:hover {
  background: rgba(255,255,255,0.2);
  color: #fff;
  text-decoration: none;
}
.home-scholar-disclaimer {
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-muted);
  background: rgba(66,133,244,0.05);
  border-bottom: 1px solid var(--glass-border);
}
.home-scholar-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.home-scholar-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.5rem;
  border-right: 1px solid var(--glass-border);
  text-align: center;
}
.home-scholar-metric:last-child {
  border-right: none;
}
.home-scholar-metric-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}
.home-scholar-metric-value {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #4285f4;
  line-height: 1;
}
.home-scholar-metric-sub {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.home-scholar-asof {
  margin: 0;
  padding: 0.5rem 1rem;
  font-size: 0.65rem;
  color: var(--text-muted);
  line-height: 1.4;
  border-top: 1px solid var(--glass-border);
}

/* ── Laboratory Badge（EML.gif，動畫 GIF）────────────
   現用資產約 288×287。請勿對動畫 GIF 使用 pixelated／crisp-edges（那是給小像素圖整數倍放大用），
   少數瀏覽器在合成層上會讓動畫看起來停住或異常；維持 image-rendering: auto 以確保影格正常輪播。
   顯示寬度取 288 的因數：96（÷3）、144（÷2），高度交給 auto 維持比例。 */
.lab-badge-eml {
  width: 96px;
  height: auto;
  aspect-ratio: 288 / 287;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(15, 118, 110, 0.18);
  image-rendering: auto;
}
.lab-badge-eml--lg {
  width: 144px;
  height: auto;
}

/* ── 區塊標題前綴裝飾線──────────── */
.section-label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-teal);
  margin-bottom: 0.4rem;
}
.section-label::before {
  content: "◆ ";
  font-size: 0.6rem;
}

/* 實驗主持人：學歷／學界經歷卡片 — 日期欄固定寬，右側職稱／單位左緣對齊 */
.pi-cv-card {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
}
.pi-cv-card .pi-cv-date {
  flex: 0 0 12rem;
  max-width: 12rem;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pi-cv-card > div {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 36rem) {
  /* 六個指標改為 2 欄 */
  .hero-stat {
    flex: 0 1 calc((100% - 0.75rem) / 2);
    min-width: calc((100% - 0.75rem) / 2);
  }
  .hero-stat-number {
    font-size: 1.3rem;
  }

  .pi-cv-card {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .pi-cv-card .pi-cv-date {
    flex: 0 0 auto;
    max-width: none;
  }
}

/* 團隊頁（about/team）、校友頁（alumni）、聯絡頁（contact）：內文節奏對齊 directions/research_areas（section-label + 緊湊 h2） */
.team-page-section > h2,
.contact-page-section > h2,
.home-latest-news.alumni-page-section > h2 {
  font-size: 1.25rem;
  margin: 0 0 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-primary);
}

/* 團隊頁表格：與校友頁相同 honors-data-table（格線、捲動）；儲存格內距比照校友 */
.team-page-section .table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.team-page-section .honors-data-table tbody tr:not(.team-roster-group) td {
  padding: 10px 12px;
}

.team-page-section .honors-data-table tbody tr.team-roster-group td {
  padding: 8px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(15, 118, 110, 0.05);
  border-top: 1px solid rgba(15, 118, 110, 0.15);
}

/* ── 連結：底部外劃線 hover──────────── */
.link-underline a {
  text-decoration: none;
  background-image: linear-gradient(var(--accent-teal), var(--accent-teal));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease;
}
.link-underline a:hover {
  background-size: 100% 1px;
}

/* ── 卡片內分項：左側 teal 豎線──────────── */
.feature-item {
  padding-left: 1rem;
  border-left: 2px solid var(--accent-teal);
  margin-bottom: 0.75rem;
}
.feature-item p {
  margin: 0;
}

/* ── 按鈕：primary ──────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.3rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent-teal);
  border: 1px solid rgba(15, 118, 110, 0.4);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 118, 110, 0.18);
}
.btn-primary:hover {
  background: var(--accent-teal-hover);
  border-color: rgba(15, 118, 110, 0.55);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15, 118, 110, 0.22);
}
.btn-primary:active {
  transform: translateY(0) scale(0.97);
}

/* ── 按鈕：ghost（次要）────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover {
  border-color: rgba(15, 118, 110, 0.28);
  color: var(--accent-teal);
  background: rgba(255, 255, 255, 0.95);
}

/* ── 榮譽頁：主持人／團隊分區（錨點 + 左側色條辨識）──────────── */
.honors-split-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.honors-split-nav a {
  color: var(--accent-teal);
  text-decoration: none;
  font-weight: 500;
}
.honors-split-nav a:hover {
  text-decoration: underline;
}
.honors-split-nav .honors-split-sep {
  color: var(--glass-border);
  user-select: none;
}

.honors-block {
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  scroll-margin-top: 1.25rem;
}
.honors-block--pi {
  border-left: 3px solid var(--accent-teal);
}
.honors-block--team {
  border-left: 3px solid var(--accent-amber);
}
.honors-block .section-label {
  margin-bottom: 0.35rem;
}
.honors-block h2 {
  margin: 0 0 0.65rem;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.honors-block .honors-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.honors-block .honors-list li {
  margin-bottom: 0.4rem;
}
.honors-block h3 {
  font-size: 1.02rem;
  margin: 1.2rem 0 0.5rem;
  font-weight: 600;
  color: var(--text-primary);
}
.honors-table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 0.25rem;
  -webkit-overflow-scrolling: touch;
}
.honors-data-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.honors-data-table th,
.honors-data-table td {
  border: 1px solid var(--glass-border);
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.honors-data-table th {
  background: rgba(15, 118, 110, 0.08);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}
.honors-block .honors-source-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.35rem 0 0;
}

/* ── 分隔線裝飾──────────── */
.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
  margin: 2rem 0;
}

/* ── 引用塊（blockquote 風）──────────── */
.block-quote {
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent-teal);
  background: rgba(15, 118, 110, 0.06);
  border-radius: 0 8px 8px 0;
}
.block-quote p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.65;
}

/* ── 減弱動效（長文頁 + 使用者偏好）──────────── */
@media (prefers-reduced-motion: reduce) {
  .site-wrap > * { animation: none; }
  .btn-primary:hover { transform: none; }
  body::after { animation: none; }
}

/* EML.gif 為原生 GIF 動畫，不由 CSS animation 驅動；prefers-reduced-motion 下若需靜態替代圖請改 src 或另掛 PNG（勿對 .lab-badge-eml 設 animation:none，對 GIF 無效且易誤導維護）。 */

/* ── 全站頁尾（三欄：EML / 致謝 / 聯絡）──────────── */
.site-footer {
  margin-top: auto;
  border-top: 4px solid var(--accent-teal);
  background: rgba(240, 248, 248, 0.96);
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 2rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.site-footer-inner {
  max-width: min(1100px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.site-footer-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(15, 118, 110, 0.12);
  border-radius: 16px;
  padding: 0.5rem;
}
.site-footer-eml {
  width: 88px;
  height: auto;
  aspect-ratio: 288 / 287;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 118, 110, 0.14);
  image-rendering: auto;
}
.site-footer-credits {
  flex: 1 1 11rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(15, 118, 110, 0.13);
  padding-left: 2rem;
}
.site-footer-credits-line {
  margin: 0;
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.5;
}
.site-footer-credits-line em {
  font-style: normal;
  color: var(--accent-teal);
}
.site-footer-contact {
  flex: 1 1 13rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(15, 118, 110, 0.13);
  padding-left: 2rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.site-footer-contact-title {
  margin: 0 0 0.4rem;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-teal);
}
.site-footer-contact-block {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.site-footer-contact-block:last-child {
  margin-bottom: 0;
}
.site-footer-contact a {
  color: var(--accent-teal);
  text-decoration: none;
  font-weight: 500;
  word-break: break-all;
  transition: color 0.2s ease;
}
.site-footer-contact a:hover {
  color: var(--accent-teal-hover);
  text-decoration: underline;
}
@media (max-width: 720px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .site-footer-brand {
    align-self: center;
  }
  .site-footer-credits,
  .site-footer-contact {
    border-left: none;
    border-top: 1px solid rgba(15, 118, 110, 0.13);
    padding-left: 0;
    padding-top: 1.25rem;
  }
  .site-footer-credits {
    text-align: left;
  }
  .site-footer-contact {
    padding-top: 1.25rem;
  }
}

/* ── 新聞報導頁（news-reports.html）──────────── */
.news-reports-block {
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent-teal);
  scroll-margin-top: 1.25rem;
}
.news-reports-block .section-label {
  margin-bottom: 0.35rem;
}
.news-reports-heading {
  margin: 0 0 0.75rem;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.news-reports-list-hint {
  margin: -0.35rem 0 1.1rem;
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--text-muted);
}
/* 新聞報導頁：每一「報導日」外層沿用 .news-day（與 news.html 最新消息相同語意與玻璃卡） */
.news-reports-block + .news-reports-day {
  margin-top: 1.25rem;
}
.news-reports-day .news-body > .news-article-card {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.06);
}
.news-reports-day .news-body > .news-article-card:last-child {
  margin-bottom: 0;
}
body.page-news-reports main > .block-quote {
  margin-top: 1.5rem;
}
.news-article-heading {
  font-size: 1.2rem;
  margin: 0 0 0.75rem;
}
.news-article-card {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.news-article-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.news-article-meta-row .news-article-meta {
  margin: 0;
}
.news-article-type {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.45);
}
.news-article-type--video {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.35);
  background: rgba(15, 118, 110, 0.08);
}
.news-article-type--text {
  color: var(--text-primary);
  border-color: rgba(100, 116, 139, 0.35);
}
.news-article-media {
  position: relative;
  width: 100%;
  margin: 0.65rem 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  aspect-ratio: 16 / 9;
  background: #0f172a;
}
.news-article-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Spotify／Podcast 等固定高度嵌入（非 16:9 影片） */
.news-article-media--embed-tall {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  background: #121212;
  padding: 0;
}
.news-article-media--embed-tall iframe {
  position: static;
  display: block;
  width: 100%;
  height: 352px;
  max-width: 100%;
  border: 0;
  border-radius: 12px;
}
@media (max-width: 480px) {
  .news-article-media--embed-tall iframe {
    height: 300px;
  }
}
.news-article-type--podcast {
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.1);
}
.news-article-meta {
  margin: 0 0 0.5rem;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.news-article-title {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.45;
}
.news-article-title a {
  color: var(--accent-teal);
  text-decoration: none;
}
.news-article-title a:hover {
  text-decoration: underline;
}
.news-article-body {
  margin: 0;
  color: var(--text-primary);
  line-height: 1.65;
}
.news-article-source {
  margin: 0.4rem 0 0;
  font-size: var(--text-small);
  color: var(--text-muted);
}
.news-article-source a {
  color: var(--accent-teal);
  text-decoration: none;
}
.news-article-source a:hover {
  text-decoration: underline;
}
/* 同事件、多篇報導合併：多來源列表 */
.news-article-card--multi-source {
  border-left: 3px solid rgba(15, 118, 110, 0.45);
}
.news-article-type--multi-source {
  color: #0f766e;
  border-color: rgba(15, 118, 110, 0.4);
  background: rgba(15, 118, 110, 0.07);
}
.news-article-sources {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--glass-border);
}
.news-article-sources-label {
  margin: 0 0 0.4rem;
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--text-muted);
}
.news-article-source-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--text-small);
  color: var(--text-muted);
  line-height: 1.65;
}
.news-article-source-list li {
  margin-bottom: 0.25rem;
}
.news-article-source-list a {
  color: var(--accent-teal);
  text-decoration: none;
}
.news-article-source-list a:hover {
  text-decoration: underline;
}

/* ── Glass card utility (consolidates repeated inline glass styles) ── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
}

/* ── Feature card: glass card + teal left accent ── */
.feature-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--accent-teal);
}
.feature-card p { margin: 0; }
.feature-card p:first-child { font-weight: 600; font-size: var(--text-body); color: var(--text-primary); margin-bottom: 0.2rem; }
.feature-card p:last-child { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }

/* ── Section heading helper (removes need for inline font-size) ── */
.section-heading {
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 600;
  margin: 0 0 1rem;
}

/* ── PI hero grid ── */
.pi-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: start;
}

/* 實驗主持人 Hero：系所／職務多行（略大於舊 0.9rem，利於掃讀） */
.pi-hero-roles {
  color: var(--text-muted);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 1rem;
  max-width: 44rem;
}