:root{
  --brand:#111827;       /* 品牌深色 */
  --accent:#b45309;      /* 強調色 */
  --bg:#0b0c0f;          /* 背景 */
  --card:#151922;        /* 卡片底 */
  --muted:#9ca3af;       /* 次要文字 */
  --ring:#374151;        /* 輔助線 */
  --text:#e5e7eb;        /* 主要文字 */
  --chip:#1f2937;        /* 標籤底色 */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans TC",system-ui,-apple-system,"Segoe UI",Roboto,Arial,"PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 400px at 70% -10%, #1b2534 0%, #0b0c0f 50%, #0b0c0f 100%) fixed;
}

/* Layout */
.container{width:min(1080px,92%);margin-inline:auto}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(11,12,15,.7);
  border-bottom:1px solid #111418;
}

.head-wrap{display:flex;align-items:center;gap:20px;min-height:64px}

/* 左上角圖片 logo（取代文字） */
.brand{
  display:inline-flex; align-items:center;
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.5px;
  padding:.3rem .5rem; border-radius:10px;
  background:linear-gradient(135deg,#111827,#0b0c0f); border:1px solid #222;
}
.brand-logo{ height:40px; width:auto; display:block; }
.brand-logo.invert{ filter: invert(1) brightness(1.05) contrast(1.05); }

.subnav{margin-left:auto;display:flex;gap:.25rem;flex-wrap:wrap}
.subnav-link{
  color:var(--text);text-decoration:none;padding:.45rem .8rem;border-radius:999px;
  border:1px solid transparent;transition:.2s;
}
.subnav-link:hover{border-color:var(--ring);background:#0f1420}
.subnav-link.active{background:linear-gradient(135deg,#1f2937,#111827);border-color:#2b3342}

/* Hero / Filters */
.hero{padding:32px 0;border-bottom:1px solid #111418}
.hero h1{margin:.2rem 0;font-size:2rem}
.hero-sub{color:var(--muted);margin:.2rem 0 1rem}

.filters{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.search,.tag-filter{
  background:#0f1420;border:1px solid #1b2230;color:var(--text);
  border-radius:12px;padding:.6rem .8rem;outline:none;
}
.search{
  flex:1 1 420px; min-width:260px; max-width:720px;
}
.tag-filter{ flex:0 0 180px; min-width:160px; }
.search:focus,.tag-filter:focus{border-color:#2b3342}

/* 日期篩選欄位 */
.date-input{
  background:#0f1420; border:1px solid #1b2230; color:var(--text);
  border-radius:12px; padding:.45rem .6rem; outline:none;
  min-width: 150px;
}
.date-input:focus{ border-color:#2b3342; }
.date-sep{ opacity:.75; margin:0 4px; }

/* Panels / 空狀態 */
.panel{padding:28px 0}
.panel-title{font-size:1.4rem;margin:0 0 12px}
.empty{color:var(--muted);padding:1rem 0}

/* Cards (最新活動) */
.card-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{
  background:linear-gradient(180deg,#151922,#0e1118);
  border:1px solid #1c2331;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.card img{width:100%;height:180px;object-fit:cover;display:block}
.card-body{padding:14px}
.card-title{margin:.2rem 0 .4rem;font-size:1.1rem}
.card-meta{margin:.15rem 0;color:var(--muted);font-size:.92rem}
.card-desc{margin:.4rem 0 .6rem;color:#cfd6df}
.card-tags,.chips{display:flex;gap:.35rem;flex-wrap:wrap;margin:.25rem 0}
.chip{
  display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .5rem;
  font-size:.82rem;background:var(--chip);border:1px solid #283241;border-radius:999px;color:#cfe0ff;
}
.card-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.btn{
  appearance:none;border:1px solid #2a3445;background:#0f1420;color:#e2e8f0;
  padding:.45rem .8rem;border-radius:10px;cursor:pointer;text-decoration:none;transition:.2s;
}
.btn:hover{border-color:#3a465b;background:#131a27}
.btn.primary{
  background:linear-gradient(135deg,#b45309,#d97706);border-color:#8a3e07;color:#111;
}
.btn.primary:hover{filter:saturate(110%)}

/* Timeline (活動紀錄) */
.timeline{position:relative;margin-left:12px;padding-left:18px;border-left:2px dashed #263043}
.time-item{position:relative;margin:18px 0 26px}
.time-dot{
  position:absolute;left:-10px;top:.3rem;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#64748b,#94a3b8);border:2px solid #0b0c0f;
}
.time-content{
  background:linear-gradient(180deg,#0f1420,#0b0e16);border:1px solid #1b2230;border-radius:14px;
  padding:12px 14px;box-shadow:var(--shadow);
}
.time-date{display:inline-block;color:#cbd5e1;margin-bottom:.25rem}
.time-title{margin:.15rem 0 .35rem;font-size:1.05rem}

/* Masonry (作品集 / 相簿 / 周邊) */
.masonry{columns:1;column-gap:16px}
@media (min-width:768px){.masonry{columns:2}}
@media (min-width:1080px){.masonry{columns:3}}
.masonry-item{
  display:block;break-inside:avoid;background:linear-gradient(180deg,#151922,#0e1118);
  border:1px solid #1c2331;border-radius:var(--radius);box-shadow:var(--shadow);
  margin:0 0 16px;overflow:hidden;
}
.masonry-item img{width:100%;height:auto;display:block}
.masonry-item figcaption{padding:12px}
.masonry-item h3{margin:.2rem 0 .3rem;font-size:1.05rem}
.masonry-item p{margin:.2rem 0;color:var(--muted)}

/* Dialog（詳情視窗）——關閉時隱藏，開啟時置中 */
.event-dialog:not([open]){ display:none !important; }     /* 關閉＝完全隱藏（解殘影） */
.event-dialog[open]{
  display:flex; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(900px,92vw); max-height:86vh; margin:0; padding:0;
  border:none; border-radius:16px; background:#0c111a; color:var(--text);
  box-shadow:0 40px 120px rgba(0,0,0,.6); flex-direction:column;
}
.event-dialog::backdrop{ background:rgba(0,0,0,.55); }   /* 透明度修正為 .55 */

.event-dialog .dialog-body{
  padding:16px; overflow:auto; max-height:calc(86vh - 32px);
}
/* 右上角關閉鈕（支援舊 class .close 與新 .dlg-close） */
.event-dialog .close,
.event-dialog .dlg-close{
  position:absolute; right:8px; top:8px;
  border:1px solid #1b2230; background:#0f1420; color:#cbd5e1;
  border-radius:10px; padding:.35rem .55rem; cursor:pointer; z-index:2;
}
.event-dialog .close:hover,
.event-dialog .dlg-close:hover{ background:#131a27; border-color:#3a465b; }

/* 詳情內容 */
.dialog-body{padding:16px}
.detail{display:grid;grid-template-columns:1fr;gap:14px}
.detail-cover{width:100%;height:auto;border-radius:12px;border:1px solid #1b2230}
.detail-info h3{margin:.2rem 0 .4rem}
.detail-desc{margin:.5rem 0;color:#d6dde7}
.detail-actions{display:flex;gap:.5rem;flex-wrap:wrap}
@media (min-width:860px){
  .detail{grid-template-columns:1.1fr 1fr;align-items:start}
}

/* 相簿區 */
.gallery-title{ margin:12px 0 8px; font-size:1.05rem; color:#e5e7eb; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:10px; margin-bottom:6px;
}
.gallery-grid a{ display:block; border-radius:10px; overflow:hidden; }
.gallery-grid img{
  width:100%; height:100%; object-fit:cover; display:block;
  border:1px solid #1b2230; transition:transform .2s ease;
}
.gallery-grid a:hover img{ transform:scale(1.02); }

/* 影片區塊（mp4 / 內嵌） */
.detail-video{
  width:100%; max-height:70vh; border:1px solid #1b2230; border-radius:12px;
  display:block; background:#0b0c0f;
}
.video-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  border:1px solid #1b2230; border-radius:12px; overflow:hidden; background:#0b0c0f;
}
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* Lightbox（全螢幕看圖） */
.lightbox{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.8); z-index:1000;
}
.lightbox[hidden]{ display:none; }
.lb-img{
  max-width:92vw; max-height:82vh; border-radius:12px; border:1px solid #1b2230; background:#0b0c0f;
}
/* 擴大左右箭頭可點區，避免誤點關閉 */
.lb-prev, .lb-next{
  position:absolute; top:0; bottom:0; width:min(22vw,280px);
  border:none; background:transparent; color:#e5e7eb; font-size:2rem; line-height:1;
  cursor:pointer; z-index:10;
}
.lb-prev{ left:0; } .lb-next{ right:0; }
.lb-prev:hover, .lb-next:hover{ background:rgba(0,0,0,.12); }
.lb-close{
  position:absolute; top:10px; right:10px;
  border:1px solid #1b2230; background:#0f1420; color:#e5e7eb;
  border-radius:10px; padding:.4rem .6rem; cursor:pointer; font-size:1rem;
}
.lb-counter{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  background:rgba(15,20,32,.8); border:1px solid #1b2230;
  padding:.25rem .5rem; border-radius:8px; font-size:.9rem; color:#e5e7eb;
}

/* 作品集／周邊：外部影片縮圖卡（不內嵌） —— 合併清掉重複宣告 */
.video-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:14px;
}
.video-link{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border:1px solid #1b2230; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#151922,#0e1118); text-decoration:none;
}
.video-link.has-thumb img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.86);
}
.vl-center{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  gap:.6rem; font-weight:600; color:#e5e7eb; text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.vl-play{ font-size:2.2rem; line-height:1; }
.video-link:hover{ outline:2px solid #2b3342; }

/* 列表（注意事項） */
.list { margin: 0 0 1rem 1.25rem; line-height: 1.7; }
.list li { margin: .25rem 0; }

/* Quick actions / 篩選列 */
.quick-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.quick-actions .btn{ text-decoration:none; }
.filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:10px; }
.filter-row label{ font-weight:600; }
.filter-row select{
  min-width:180px; padding:8px 10px; border-radius:8px; border:1px solid #ccc; background:#fff;
}

/* Quick actions：目前分頁高亮 */
.quick-actions .qa-tab.is-active,
.quick-actions .qa-tab[aria-current="page"]{
  background:linear-gradient(135deg,#2563eb,#22d3ee);
  border-color:#1e40af; color:#fff; font-weight:700;
  box-shadow:0 6px 16px rgba(34,211,238,.35);
}

/* Footer */
.site-footer{border-top:1px solid #111418;margin-top:28px}
.site-footer .container{padding:22px 0;color:var(--muted)}

/* A11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 修正篩選選單在白底上的字色 */
.filter-row select { 
  color: #111 !important;     /* 黑色字 */
  background: #fff;           /* 你原本就有設定白底，保留 */
}

/* 有些系統會用 option 的顏色，保險一起設 */
.filter-row select option { 
  color: #111; 
}

/* Pagination */
.pagination{
  margin: 14px 0 4px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  font-size:.9rem;
}

.page-btn{
  min-width: 2rem;
  height: 2rem;
  padding:0 .5rem;
  border-radius:999px;
  border:1px solid var(--ring);
  background:#0f1420;
  color:var(--text);
  cursor:pointer;
  font:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.page-btn:hover{
  border-color:#4b5563;
  background:#131a27;
}
.page-btn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:#111827;
  font-weight:600;
}
.page-btn[disabled]{
  opacity:.4;
  cursor:default;
}