/*
  彰化縣營造業職業工會：styles.css（淺色優化 v2）
  🔧 不改動你的 HTML / JS；直接覆蓋同名檔即可。
  重點：更乾淨的淺色調、可讀性與對比、按鈕/晶片/卡片樣式一致化、
        焦點狀態（:focus-visible）、RWD 細節與時間軸視覺。
  調色以 LOGO：海軍藍 #0c1e5b、建築藍 #2b8ee6、工會綠 #16a34a。
*/

/* =====================
   Design Tokens
===================== */
:root{
  --bg: #f6f9ff;                 /* 背景（淺） */
  --bg-accent1: rgba(43,142,230,.06); /* 左上淡藍暈光 */
  --bg-accent2: rgba(22,163,74,.06);  /* 右上淡綠暈光 */
  --surface: #ffffff;             /* 區塊/卡片底色 */
  --text: #0d1b3a;                /* 主要文字 */
  --muted: #586b93;               /* 次要文字 */
  --brand: #0c1e5b;               /* 海軍藍 */
  --brand-2: #2b8ee6;             /* 建築藍（重點色） */
  --success: #16a34a;             /* 工會綠 */
  --danger: #dc2626;              /* 鮮紅（警示） */
  --border: rgba(12,30,91,.12);   /* 卡片/輸入框邊線 */
  --ring: rgba(43,142,230,.35);   /* 聚焦外圈 */
  --chip: #eef4ff;                /* chip 背景 */
  --chip-on: #e1ecff;             /* chip 選取 */
  --shadow: 0 10px 26px rgba(12,30,91,.08); /* 卡片陰影 */
  --radius: 16px;                 /* 卡片圓角 */
}

/* =====================
   Base
===================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body { overflow-y:auto; -webkit-overflow-scrolling:touch; }
body{
  margin:0; color:var(--text);
  font: 16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  background:
    radial-gradient(1000px 500px at 15% -10%, var(--bg-accent1), transparent),
    radial-gradient(800px 480px at 95% 0%, var(--bg-accent2), transparent),
    var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand-2); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

/* 焦點可視化（鍵盤操作更友善） */
:where(a,button,input,select,textarea,[role="button"])::selection{background:#dce9ff}
:where(a,button,input,select,textarea,[role="button"]):focus{outline:none}
:where(a,button,input,select,textarea,[role="button"]):focus-visible{outline:3px solid var(--ring); outline-offset:2px}

/* =====================
   Header / Navbar（沿用你的結構）
===================== */
.navbar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in lab, var(--bg) 78%, #fff 22%); border-bottom:1px solid var(--border)}
.nav-inner{max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.4px}
.brand-badge{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:900;
  background:linear-gradient(135deg,#1a3b86,#2b8ee6); box-shadow:var(--shadow)}

.nav-links{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.nav-links a{color:var(--text); text-decoration:none; padding:10px 14px; border-radius:999px; border:1px solid transparent}
.nav-links a:hover{background:#f1f5ff}
.nav-links a.active{border-color:#9cc3ff; background:#e9f2ff}

/* 漢堡選單（行動版） */
.menu-btn{display:none; margin-left:auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow); cursor:pointer}
.menu-btn .bar{display:block; width:22px; height:2px; background:#223864; margin:6px auto; border-radius:2px}
@media (max-width: 720px){
  .menu-btn{display:block}
  .nav-links{position:fixed; top:64px; left:12px; right:12px; display:none; flex-direction:column; gap:8px; padding:10px;
    background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
  .nav-links.open{display:flex}
}

/* =====================
   Sections / Head / Tools
===================== */
.section-head{max-width:1100px; margin:0 auto; padding:20px 20px 0}
section{padding-bottom:20px}
h2{font-size: clamp(24px, 4.2vw, 32px); margin:0 0 10px}
.tools{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 12px}

.search{position:relative; flex:1 1 360px}
.search input{width:100%; padding:12px 14px 12px 42px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text)}
.search .icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.6}
.search input:focus{outline:none; box-shadow:0 0 0 3px var(--ring)}

/* 晶片（分類） */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 12px; border-radius:999px; border:1px solid #e6e9f3; background:#fff; color:#223864; cursor:pointer; user-select:none;
  box-shadow:0 1px 0 rgba(0,0,0,.02)}
.chip.active{background:linear-gradient(135deg,#2b8ee6,#5ba5ff); color:#fff; border-color:transparent}

/* =====================
   最新消息卡片
===================== */
.news-list{max-width:1100px; margin:0 auto; padding:0 20px 24px; display:grid; gap:14px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.n-head{display:flex; align-items:baseline; gap:10px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:999px; font-size:14px; background:rgba(43,142,230,.12); color:#2367b1; border:1px solid rgba(43,142,230,.28)}
.badge.new{background:rgba(22,163,74,.16); color:#0f7a34; border-color:rgba(22,163,74,.35)}
.n-title{font-weight:800; font-size:20px; margin-right:auto}
.n-date{color:var(--muted); font-size:16px}
.n-body{margin-top:8px; color:color-mix(in lab, var(--text) 92%, transparent)}

.attachments{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.a-btn{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px dashed var(--border); background:#fff; color:var(--text); text-decoration:none}
.a-btn:hover{background:#f6f9ff}

/* =====================
   下載專區格狀卡片
===================== */
.dl-grid{max-width:1100px; margin:0 auto; padding:0 20px 24px; display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.dl-card{grid-column:span 6; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px;
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center}
.file-ico{width:42px; height:42px; border-radius:10px; display:grid; place-items:center; background:rgba(43,142,230,.12); color:#2367b1; font-weight:900}
.dl-title{font-weight:800; font-size:18px}
.dl-meta{color:var(--muted); font-size:14px}
.dl-action a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; border:1px solid var(--border); padding:8px 12px; border-radius:10px; background:#fff; color:var(--text)}
.dl-action a:hover{background:#f1f5ff}

@media (max-width:1000px){ .dl-card{grid-column:span 12} }

/* =====================
   Footer（聯絡+時間） & 地圖卡
===================== */
/* footer{max-width:1100px; margin:0 auto; padding:30px 20px 80px; color:var(--muted)}
footer h2{color:var(--text); margin:0 0 10px} */
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start}
@media (max-width:900px){ .footer-grid{grid-template-columns:1fr} }

.contact-hours{padding:16px}
.ch-row{display:flex; gap:12px; align-items:center; padding-bottom:10px; border-bottom:1px dashed var(--border); margin-bottom:12px}
.ch-icon{width:36px; height:36px; border-radius:10px; background:rgba(43,142,230,.12); color:#2367b1; display:grid; place-items:center; flex:0 0 36px}
.ch-icon svg{width:20px; height:20px; fill:currentColor}
.ch-title{font-weight:800; color:var(--text)}
.ch-text a{color:var(--text); text-decoration:none; border-bottom:1px dashed rgba(43,142,230,.35)}
.ch-text a:hover{color:#2367b1}

.ch-hours{margin-top:6px}
.ch-hours-title{display:flex; align-items:center; gap:8px; font-weight:800; color:var(--text); margin-bottom:8px}
.ch-hours-title svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2}

/* 營業時間表：桌機左右分欄、手機單欄 */
.hours-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; grid-template-areas:
  "mon fri" "tue sat" "wed sun" "thu ."; gap:10px 24px}
.hours-list li{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed var(--border); font-size:16px}
.hours-list li:last-child{border-bottom:0}
.hours-list .closed{color:var(--danger); font-weight:800}
.hours-list .d1{grid-area:mon} .hours-list .d2{grid-area:tue} .hours-list .d3{grid-area:wed}
.hours-list .d4{grid-area:thu} .hours-list .d5{grid-area:fri} .hours-list .d6{grid-area:sat} .hours-list .d7{grid-area:sun}
@media (max-width:900px){ .hours-list{grid-template-columns:1fr; grid-template-areas:"mon" "tue" "wed" "thu" "fri" "sat" "sun"} }

/* 地圖卡 */
.map-card{padding:16px}
.map-wrap{border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:4/3; background:#eef2ff}
.map-wrap iframe{width:100%; height:100%; border:0}
.map-actions{display:flex; justify-content:flex-end; margin-top:12px}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text); text-decoration:none; cursor:pointer}
.btn:hover{background:#f1f5ff}
.btn.primary{border-color:transparent; background:linear-gradient(135deg,#1a3b86,#2b8ee6); color:#fff}

/* 版權列 & 返回頂部 */
.legal{margin-top:22px; border-top:1px dashed var(--border); padding-top:14px; text-align:center; font-size:14px}
.back-to-top{position:fixed; right:18px; bottom:18px; z-index:60; padding:12px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; color:var(--text); box-shadow:var(--shadow); display:none; font-size:18px}
.back-to-top.show{display:inline-flex}

/* =====================
   Modal（沿用你的結構）
===================== */
.modal-backdrop[hidden], .modal[hidden]{display:none!important}
.modal-backdrop{position:fixed; inset:0; background:rgba(10,20,40,.45); backdrop-filter:blur(4px); z-index:1000}
.modal{position:fixed; inset:0; display:grid; place-items:center; z-index:1001; padding:16px}
.modal>*{max-width:720px; width:min(720px,100%)}
.modal .modal-header{display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--border); border-bottom:0; border-radius:18px 18px 0 0; padding:12px 16px 8px; box-shadow:var(--shadow)}
.modal-badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(220,38,38,.12); color:#b91c1c; font-weight:800; font-size:14px; border:1px solid rgba(220,38,38,.28)}
.modal-close{border:1px solid var(--border); background:#fff; color:var(--text); width:36px; height:36px; border-radius:10px; cursor:pointer}
.modal-title{margin:0; padding:14px 18px 0; background:#fff; border-left:1px solid var(--border); border-right:1px solid var(--border); font-size:20px; font-weight:900}
.modal-content{background:#fff; border-left:1px solid var(--border); border-right:1px solid var(--border); padding:6px 18px 10px; color:var(--text)}
.ann-list{margin:8px 0 0 22px} .ann-list li{margin:6px 0 10px; line-height:1.8}
.modal-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; border:1px solid var(--border); border-radius:0 0 18px 18px; padding:12px 16px 14px; box-shadow:var(--shadow)}
.modal-checkbox{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)}
.modal-buttons{display:flex; gap:8px}
@media (max-width:560px){ .modal-title{font-size:18px} .ann-list{margin-left:20px} .modal-actions{flex-direction:column; align-items:stretch} .modal-buttons{justify-content:flex-end} }

/* =====================
   背景浮水印（可保留/移除）
===================== */
body{position:relative}
body::after{content:""; position:fixed; inset:0; background:url("營造工會LOGO.jpg") center/360px no-repeat; opacity:.06; pointer-events:none; z-index:0}
header, main, footer{position:relative; z-index:1}
@media (max-width:720px){ body::after{background-size:220px} }
@media print{ body::after{display:none} }

/* =====================
   創會大事記（圖片 + 右側時間軸）
===================== */
#history{padding-bottom:24px}
.history-wrap{max-width:1100px; margin:0 auto; padding:0 20px 24px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
.history-figure{margin:0}
.history-figure img{width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); background:#fff}
.history-figure figcaption{text-align:center; color:var(--muted); font-size:13px; margin-top:6px}
.milestones{list-style:none; padding:0; margin:0; border-left:3px solid #e6e9f3; padding-left:16px}
.milestones li{margin:10px 0 14px; position:relative}
.milestones li::before{content:""; position:absolute; left:-21px; top:.55em; width:10px; height:10px; border-radius:50%; background:#2b8ee6; box-shadow:0 0 0 3px rgba(43,142,230,.15)}
.m-date{font-weight:800; color:var(--text)}
.m-body{color:color-mix(in lab, var(--text) 92%, transparent)}
@media (max-width:900px){ .history-wrap{grid-template-columns:1fr} }

/* =====================
   無障礙輔助
===================== */
.visually-hidden{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0}
/* 品牌 LOGO（置於標題文字右側） */
.brand-logo{
  width: 34px;
  height: 34px;
  object-fit: contain;
  margin-left: 6px;
  border-radius: 6px; /* 可保留或移除 */
}
@media (max-width: 720px){
  .brand-logo{ width: 28px; height: 28px; }
}

/* ===== 品牌標題放大＋美化（覆蓋） ===== */
.brand{
  gap: 12px;                /* 徽章與文字距離 */
  align-items: center;
}

.brand-badge{
  width: 44px;              /* 放大 LOGO，與大標題更搭 */
  height: 44px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.brand-badge img{
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

/* 標題文字更大、更醒目 */
.brand-name{
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .6px;
  color: var(--brand);      /* 深藍，與整體品牌一致 */
  font-size: clamp(24px, 4.6vw, 36px); /* 手機到桌機自適應放大 */
  text-decoration: none;
}

/* 行動版微調，避免過度擠壓 */
@media (max-width: 720px){
  .brand-badge{ width: 36px; height: 36px; }
  .brand-name{ font-size: clamp(20px, 5.2vw, 28px); }
}

/* ==== 經典版頁尾（參考附件1風格） ==== */
.classic-footer{
  margin-top:32px;
  padding:40px 0 28px;
  background:linear-gradient(180deg,#ffffff 0%,#f0f6ff 55%,#e2ecff 100%);
  position:relative;
  color:#1b2d57;
}
.classic-footer .footer-topline{
  position:absolute; left:0; right:0; top:0; height:5px; background:#2b63c5;
}

/* 中央 TOP 鑽石 */
.footer-top-anchor{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:86px; height:34px;
  text-decoration:none; color:#fff; font-weight:800; font-size:12px; letter-spacing:.2em;
}
.footer-top-anchor::before{
  content:""; position:absolute; inset:0;
  clip-path:polygon(8% 50%,50% 0,92% 50%,50% 100%);
  background:#3b66cc; border-radius:6px;
}
.footer-top-anchor::after{
  content:""; position:absolute; inset:-3px;
  clip-path:polygon(8% 50%,50% 0,92% 50%,50% 100%);
  border:3px solid #2b63c5; border-radius:8px;
}
.footer-top-anchor span{ position:relative; z-index:1 }

/* 內容三欄：左LOGO/中導覽/右聯絡 */
.classic-inner{
  max-width:1100px; margin:24px auto 0; padding:0 20px;
  display:grid; grid-template-columns:1.2fr 1fr 1.2fr; gap:24px; align-items:center;
}
.f-left{ display:flex; align-items:center; gap:12px }
.f-logo{
  width:90px; height:90px; object-fit:contain;
  background:#fff; border-radius:10px; padding:6px; border:1px solid var(--border);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.08));
}
.f-title .cn{ font-size:22px; font-weight:900; color:var(--brand) }
.f-title .en{ font-size:12px; color:#5a6a90; letter-spacing:.03em; margin-top:2px }

.f-nav{ text-align:center; white-space:nowrap }
.f-nav a{ color:#143a8b; text-decoration:none; margin:0 6px; font-weight:700 }
.f-nav a:hover{ text-decoration:underline }
.f-nav .sep{ color:#8aa1d6; margin:0 6px }

.f-contact{ justify-self:end; line-height:1.8 }
.f-contact p{ margin:2px 0 }

.classic-copyright{
  text-align:center; color:#415b93; margin-top:16px; font-size:14px;
}

/* RWD */
@media (max-width:900px){
  .classic-inner{ grid-template-columns:1fr; text-align:center }
  .f-left{ justify-content:center }
  .f-contact{ justify-self:center }
  .f-logo{ width:76px; height:76px }
}

/* ===== 新版頁尾（現代簡潔，不同於參考風格） ===== */
.union-footer{
  position: relative;
  padding: 48px 0 30px;
  background:
    radial-gradient(700px 220px at 12% -15%, rgba(43,142,230,.10), transparent),
    radial-gradient(700px 220px at 110% -10%, rgba(22,163,74,.10), transparent),
    #f7faff;
  border-top: 4px solid #2b63c5;
}

/* 置中 TOP pill */
.uf-top{
  position:absolute; left:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:#1f4bb0; color:#fff; font-weight:800; letter-spacing:.08em;
  text-decoration:none; box-shadow:0 10px 24px rgba(31,75,176,.24);
}
.uf-top svg{ width:16px; height:16px; }

.uf-inner{
  max-width:1100px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1.3fr 1fr 1.2fr; gap:22px; align-items:start;
}

.uf-left{ display:flex; align-items:center; gap:12px; }
.uf-logo{
  width:84px; height:84px; padding:6px; object-fit:contain;
  background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
}
.uf-title .cn{ font-size:22px; font-weight:900; color:var(--brand); line-height:1.1; }
.uf-title .en{ font-size:12px; color:#5f6f97; letter-spacing:.02em; margin-top:2px; }

.uf-nav{ text-align:center; align-self:center; white-space:nowrap; }
.uf-nav a{
  color:#123a92; font-weight:800; padding:8px 10px; border-radius:10px; text-decoration:none;
}
.uf-nav a:hover{ background:rgba(43,142,230,.12); }
.uf-nav span{ color:#94a9d5; margin:0 2px; }

.uf-contact{ justify-self:end; font-style:normal; color:#274064; }
.uf-contact p{ margin:4px 0; display:flex; gap:8px; align-items:center; }
.uf-contact svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; opacity:.9; }

.uf-actions{ margin-top:10px; display:flex; gap:8px; }
.union-footer .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--text); text-decoration:none;
}
.union-footer .btn.primary{ background:linear-gradient(135deg,#1a3b86,#2b8ee6); color:#fff; border-color:transparent; }
.union-footer .btn svg{ width:16px; height:16px; }

.uf-copy{ text-align:center; color:#546690; margin-top:22px; font-size:14px; }

/* RWD：直向堆疊、置中 */
@media (max-width:900px){
  .uf-inner{ grid-template-columns:1fr; text-align:center; }
  .uf-left{ justify-content:center; }
  .uf-contact{ justify-self:center; }
  .uf-actions{ justify-content:center; }
  .uf-logo{ width:76px; height:76px; }
}
/* 讓 #about 區塊有和舊 footer 一樣的寬度與內距 */
#about.footer-info{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px 24px;
  color:var(--muted);
}
#about.footer-info h2{
  color:var(--text);
  margin:0 0 10px;
}

/* 與新版頁尾留點距離，避免 TOP 膠囊壓到上一區塊 */
.union-footer{ margin-top: 28px; }

/* 讓 TOP 膠囊少浮出一些，降低覆蓋感（可調 30~50%） */
.uf-top{ transform: translate(-50%, -40%); }
/* Modal 開啟時禁止背景卷動 */
body.modal-open{ overflow:hidden; }

/* 單一公告膠囊不互動 */
.chips .chip{ cursor: default; }



/* === 兩欄容器（桌機：並排 / 手機：單欄） === */
.two-col{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px 24px;
  display:grid;
  grid-template-columns: 1.3fr 1fr; /* 左邊稍寬；要等寬改成 1fr 1fr */
  gap:16px;
  align-items:start;
}

/* 在兩欄裡，取消內層各自的 1100px，避免超寬 */
.two-col .section-head{ max-width:none; margin:0; padding:20px 0 8px; }
.two-col .news-list,
.two-col .dl-grid{ max-width:none; margin:0; padding:0; }

/* 下載區在欄內改單欄排列，更穩定 */
.two-col .dl-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
.two-col .dl-card{ grid-column:auto; }

/* 視覺：右欄加淡分隔線（小螢幕移除） */
.two-col section + section{ border-left:1px dashed var(--border); padding-left:16px; }
@media (max-width:980px){
  .two-col{ grid-template-columns:1fr; }
  .two-col section + section{ border-left:0; padding-left:0; }
}

/* 單一公告膠囊不互動 */
.chips .chip{ cursor: default; }

/* 修正：公告徽章在 flex 佈局被擠壓成小圓的問題 */
.n-head{
  display: flex;            /* 保險起見，保持為 flex */
  align-items: center;      /* 與 NEW 對齊更好看，如要維持 baseline 可改回 baseline */
  gap: 10px;
}

/* 徽章不允許收縮、且不換行 */
.n-head .badge{
  flex: 0 0 auto;           /* 不收縮、不伸展 */
  white-space: nowrap;      /* 內容不換行 */
  padding: 4px 10px;        /* 多一點左右內距，避免太貼邊 */
}

/* 標題允許收縮，必要時用省略號，而不是去擠壓徽章 */
.n-head .n-title{
  flex: 1 1 auto;
  min-width: 0;             /* 讓 flex-item 允許縮到 0，否則會把前後元素擠爆 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* === 修：手機 navbar 文字過長把漢堡擠出畫面 === */
.nav-inner { gap: 8px; }
.nav-inner .brand { flex: 1 1 auto; min-width: 0; }  /* 允許縮小 */
.brand-name {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-btn { flex: 0 0 auto; }

/* === 修：兩欄容器在極小螢幕造成水平捲動 === */
html, body { overflow-x: hidden; }
.two-col { padding: 0 12px 20px; }     /* 手機縮小內距 */
.news-list, .dl-grid { padding: 0; }
.card { padding: 14px; }

/* === 修：公告/NEW 徽章在窄螢幕被擠壓成圓點 === */
.n-head { align-items: center; gap: 10px; }
.n-head .badge {
  flex: 0 0 auto;           /* 不收縮 */
  white-space: nowrap;
  padding: 4px 10px;
  font-size: 14px;
}
.n-head .n-title {
  flex: 1 1 auto;
  min-width: 0;             /* 允許標題縮到 0，避免擠壓徽章 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n-date { flex: 0 0 auto; } /* 日期固定寬度，不被擠壓 */

/* === 修：創會大事記在手機的內距與單欄呈現更緊湊 === */
@media (max-width: 900px) {
  #history .section-head { padding-left: 12px; padding-right: 12px; }
  .history-wrap { padding: 0 12px 20px; }
}

/* === 修：頁尾 TOP 膠囊在手機蓋到上一塊 === */
@media (max-width: 900px) {
  .uf-top { transform: translate(-50%, -20%); }
}

/* === 修：行動選單層級，避免被內容蓋住 === */
@media (max-width: 720px) {
  .nav-links { z-index: 999; }
}

/* === 修：長網址/英文讓卡片溢出 === */
.card, .dl-card { word-break: break-word; overflow-wrap: anywhere; }



/* === 最新消息：小螢幕文字溢出修正 === */
@media (max-width: 420px){
  /* 讓第一行可以換行，避免擠出容器 */
  .n-head{ flex-wrap: wrap; }

  /* 標題允許多行，最多兩行後省略 */
  .n-head .n-title{
    min-width: 0;              /* 防止把旁邊元素擠爆 */
    white-space: normal;       /* 覆蓋原本 nowrap */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
  }

  /* 日期掉到下一行最右邊 */
  .n-date{
    order: 3;
    width: 100%;
    text-align: right;
    margin-top: 4px;
    font-size: 14px;
  }
}

/* 內文與長字串保險：中英數、網址都不會把卡片撐破 */
.n-body, .n-title, .card{
  word-break: break-word;     /* 英文/數字可在單字中斷行 */
  overflow-wrap: anywhere;    /* 遇到長字串（網址）也會斷行 */
  min-width: 0;               /* 避免被 flex 佈局擠爆 */
}

/* 徽章不收縮，避免被擠成小圓點 */
.n-head .badge{ flex: 0 0 auto; white-space: nowrap; }


/* 歷年重要記事（RWD 時間軸，無搜尋） */
.annals-wrap{
  max-width:1100px; margin:0 auto; padding:0 20px 24px;
  display:grid; grid-template-columns:1fr 1.2fr; gap:16px; align-items:start;
}
@media (max-width:900px){ .annals-wrap{ grid-template-columns:1fr } }

.annals-list{ display:grid; gap:12px; }

.year-card{ border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow); overflow:hidden }
.year-card > summary{
  list-style:none; cursor:pointer; padding:12px 16px; display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#f9fbff,#f1f6ff);
  border-bottom:1px dashed var(--border);
}
.year-badge{
  flex:0 0 auto; display:inline-grid; place-items:center;
  width:58px; height:32px; border-radius:999px;
  font-weight:900; color:#123a92; background:#e9f2ff; border:1px solid #cfe0ff;
}
.year-title{ font-weight:900; color:var(--text) }
.year-count{ margin-left:auto; font-size:13px; color:var(--muted) }
.year-body{ padding:10px 16px 14px }

.ev{ position:relative; padding:10px 6px 10px 20px; border-left:3px solid #e6e9f3; }
.ev::before{ content:""; position:absolute; left:-7px; top:18px; width:10px; height:10px; border-radius:50%; background:#2b8ee6; box-shadow:0 0 0 3px rgba(43,142,230,.15) }
.ev-date{ font-weight:800; color:var(--text) }
.ev-text{ color:color-mix(in lab, var(--text) 92%, transparent); margin-top:2px }

/* 防溢出 */
.ev-text, .year-title{ word-break:break-word; overflow-wrap:anywhere; }

/* 歷年重要記事：年份索引 + 事件面板 */
.annals-2col{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:14px;
}
@media (max-width:900px){
  .annals-2col{ grid-template-columns:1fr; }
}

/* 左側：年份索引（桌機 sticky；手機橫向可滑） */
.ann-year-index{
  position: sticky;
  top: 76px;                 /* 視你的 navbar 高度微調 */
  align-self: start;
  display: grid;
  gap:8px;
}
@media (max-width:900px){
  .ann-year-index{
    position: static;
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
  }
}
.y-btn{
  width:100%;
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  cursor:pointer;
  white-space:nowrap;
  scroll-snap-align:start;
}
.y-btn .y{ font-weight:900; color:#123a92 }
.y-btn .c{ font-size:12px; color:var(--muted) }
.y-btn.active{
  border-color:#9cc3ff;
  background:linear-gradient(180deg,#f9fbff,#eef5ff);
}

/* 右側：面板 */
.ann-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ann-panel-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  background:linear-gradient(180deg,#f9fbff,#f1f6ff);
  border-bottom:1px dashed var(--border);
}
.ann-year-title{ margin:0; font-size:18px; font-weight:900; color:var(--text) }
.ann-year-count{ margin-left:auto; color:var(--muted); font-size:13px }

.evs{ list-style:none; padding:12px 14px; margin:0; display:grid; gap:10px }
.ev{
  position:relative; padding:8px 6px 8px 18px;
  border-left:3px solid #e6e9f3;
}
.ev::before{
  content:""; position:absolute; left:-7px; top:14px;
  width:10px; height:10px; border-radius:50%;
  background:#2b8ee6; box-shadow:0 0 0 3px rgba(43,142,230,.15);
}
.ev-date{ font-weight:800; color:var(--text) }
.ev-text{ color: color-mix(in lab, var(--text) 92%, transparent); margin-top:2px;
  word-break:break-word; overflow-wrap:anywhere;
}

.ann-actions{ padding:0 14px 14px }
.ann-actions .btn{ padding:8px 12px; border-radius:10px }


/* ===== 三欄內的兩欄（年份索引 + 內容） ===== */
.annals-3col{
  display:grid; grid-template-columns: 280px 1fr; gap:16px; align-items:start;
}

/* 年份索引（與圖片等高；內部可滾動） */
.year-rail{
  background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; min-height:280px; overflow:hidden;
}
.rail-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 8px; border-bottom:1px dashed var(--border);
  background:linear-gradient(180deg,#f9fbff,#f1f6ff);
}
.rail-caption{ font-weight:900; color:#123a92 }
.rail-jump{
  width:30px; height:30px; border-radius:10px; border:1px solid var(--border);
  background:#fff; cursor:pointer;
}
.rail-body{
  padding:8px; display:flex; flex-direction:column; gap:8px;
  overflow:auto; height:100%;
}
.rail-sep{
  margin:2px 0 0; padding:2px 6px; font-size:12px; color:var(--muted);
}

/* 年份按鈕 */
.y-item{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow);
  cursor:pointer; white-space:nowrap;
}
.y-item .y{ font-weight:900; color:#123a92 }
.y-item .c{ font-size:12px; color:var(--muted) }
.y-item.active{ border-color:#9cc3ff; background:linear-gradient(180deg,#f9fbff,#eef5ff) }

/* 內容標頭 + 行動版膠囊列 */
.ann-panel-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px }
.ann-year-title{ margin:0; font-size:20px; font-weight:900 }
.ann-year-count{ color:var(--muted) }
.ann-chip-row{ display:none }                /* 桌機隱藏，手機顯示 */
.ann-chip-row .chip{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:#fff; cursor:pointer;
  white-space:nowrap; box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.ann-chip-row .chip.active{ background:var(--chip-on); border-color:#bcd6ff }

/* RWD：手機改單欄，年份索引隱藏、顯示橫向膠囊 */
@media (max-width:900px){
  .annals-3col{ grid-template-columns: 1fr; }
  .year-rail{ display:none }
  .ann-chip-row{ display:flex; overflow:auto; gap:8px; padding:4px 0; scroll-snap-type:x mandatory }
  .ann-chip-row .chip{ flex:0 0 auto; scroll-snap-align:center }
}





/* === Hero v3：滿版 + 側向漸暗 + 波浪分隔 === */
.hero{
  --hero-h: clamp(360px, 56vh, 640px);
  --wave-h: 72px;              /* 波浪高度，可調 56~96px */
  --hero-crop-y: 38%;          /* 構圖焦點（0%=頂，50%=中，100%=底） */
  position: relative;
  padding-bottom: var(--wave-h);
  border-bottom: none;
}

/* 打破容器，真正滿版 */
.hero-media{
  position: relative;
  max-width: none; padding: 0; width: 100vw; height: var(--hero-h);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hero-media picture, .hero-media img{ display:block; width:100%; height:100%; }
.hero-media img{
  object-fit: cover;
  object-position: 50% var(--hero-crop-y);
  border: 0; border-radius: 0; box-shadow: none;
}

/* 上方暗層（讓文字更清楚） */
.hero-scrim{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,18,46,.55), rgba(6,18,46,.22) 36%, rgba(6,18,46,.08) 65%, transparent 100%);
}

/* 左右側向漸暗，修掉「滿版邊緣太突兀」的問題 */
.hero-vignette{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 0% 50%, rgba(0,0,0,.32), transparent 60%),
    radial-gradient(60% 70% at 100% 50%, rgba(0,0,0,.32), transparent 60%);
  mix-blend-mode: multiply;    /* 讓暗角更自然 */
}

/* 文字群組：左下對齊在主容器寬度內 */
.hero-inner{
  position: absolute; inset: 0;
  max-width: 1100px; margin: 0 auto; padding: 0 20px 28px;
  display: grid; align-content: end; justify-items: start; gap: 10px;
}
.hero-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.88); color: #123a92; font-weight: 800; font-size: 12px;
  border: 1px solid var(--border); letter-spacing: .04em;
}
.hero-title{
  margin: 0; color: #fff; font-weight: 900;
  font-size: clamp(28px, 5.6vw, 44px);
  letter-spacing: .4px; text-shadow: 0 2px 12px rgba(0,0,0,.28);
}
.hero-sub{
  margin: 0; color: #e7efff; font-size: clamp(14px, 2.7vw, 18px);
  text-shadow: 0 1px 8px rgba(0,0,0,.24);
}

/* 底部波浪分隔，填入頁面背景色 */
.hero-wave{
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: var(--wave-h);
  display: block;
}
.hero-wave path{ fill: var(--bg); }

/* 取消舊按鈕 */
.hero-actions{ display: none !important; }

/* 無障礙：偏好減少動畫時停用任何動畫 */
@media (prefers-reduced-motion: reduce){
  .hero *{ transition: none !important; animation: none !important; }
}

/* 簡單的品牌色光暈（氣氛用） */
.hero::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(800px 260px at 12% -8%, rgba(43,142,230,.12), transparent 60%),
    radial-gradient(800px 260px at 110% -8%, rgba(22,163,74,.12), transparent 60%);
}

html {
  overflow-anchor: none;
}

/* === Hero：手機版把左下角「活動花絮」與標題往上移 === */
@media (max-width: 640px){
  /* 讓整塊文字區塊離底部更遠一點 */
  .hero-inner{
    position: absolute;      /* 保險，確保可用 bottom 定位 */
    left: 16px;
    right: 16px;
    /* 往上提的距離：可調整 56px / 14vw 兩個值 */
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(56px, 14vw, 120px));
  }

  /* 小膠囊與標題的間距微調 */
  .hero-badge{ margin-bottom: 6px; }

  /* 手機標題稍縮、行高緊一點，避免太靠近底部 */
  .hero-title{
    font-size: clamp(22px, 7vw, 34px);
    line-height: 1.15;
    text-shadow: 0 2px 10px rgba(0,0,0,.25); /* 可讀性更好 */
  }

  .hero-sub{
    margin-top: 2px;
    font-size: 14px;
    text-shadow: 0 1px 6px rgba(0,0,0,.22);
  }
}

/* === Hero 文字可讀性強化 === */

/* 加深底部遮罩，讓文字有對比（桌機） */
.hero-scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.18) 40%,
      rgba(0,0,0,.40) 72%,
      rgba(0,0,0,.58) 100%);
}

/* 副標做成半透明膠囊，任何背景上都清楚 */
.hero-sub{
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.45);           /* 透明度可調：0.35~0.60 */
  color: #fff;
  backdrop-filter: saturate(120%) blur(2px);
  -webkit-backdrop-filter: saturate(120%) blur(2px);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-weight: 600;
}

/* 標題也加一點陰影，邊緣更清楚 */
.hero-title{
  color:#fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.28), 0 0 2px rgba(0,0,0,.35);
}

/* 手機：再加深一點遮罩，副標背景也略深 */
@media (max-width: 640px){
  .hero-scrim{
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.22) 40%,
        rgba(0,0,0,.48) 72%,
        rgba(0,0,0,.64) 100%);
  }
  .hero-sub{ background: rgba(0,0,0,.55); }
}
/* 讓 Hero 內容離底邊遠一點，避免被圓角裁切 */
.hero-inner{ padding-bottom: 56px; }          /* 桌機 */
@media (max-width: 640px){
  .hero-inner{ padding-bottom: 30px; }        /* 手機再多留一些 */
  .hero-sub{ margin-bottom: 6px; }            /* 副標與底緣再拉開 */
}


/* === 入會完成 注意事項 === */
.join-notes {
  background: #f2f5f9;
  border-top: 1px solid #e6ecf3;
  border-bottom: 1px solid #e6ecf3;
  padding: 48px 0 56px;
}
.join-notes .jn-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.join-notes .jn-title {
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #0f5e8a;        /* 深藍，和全站風格一致 */
  margin: 0 0 22px;
}
.join-notes .jn-ol {
  list-style: decimal;
  padding-left: 1.75rem;
  line-height: 1.9;
  font-size: 17px;
  color: #1f2937;       /* 深灰，易讀 */
}
.join-notes .jn-ol > li { margin: 12px 0; }
.join-notes .jn-ol ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin-top: 6px;
}
.join-notes strong { font-weight: 700; }

@media (max-width: 900px) {
  .join-notes { padding: 32px 0 40px; }
  .join-notes .jn-title { font-size: 22px; margin-bottom: 16px; }
  .join-notes .jn-ol { font-size: 16px; line-height: 1.8; }
}
/* Navbar 下拉（首頁） */
.nav-dropdown{ position:relative; }
.nav-dropdown .dropbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  cursor:pointer; font:inherit;
}
.nav-dropdown .dropbtn:hover{ background:#f1f5ff; }
.nav-dropdown .dropbtn .caret{ width:14px; height:14px; opacity:.7; transition:transform .18s; }
.nav-dropdown .dropbtn.open .caret{ transform:rotate(180deg); }

.nav-dropdown .dropdown-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:200px; padding:6px;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  display:none; z-index:1000;
}
.nav-dropdown .dropdown-menu.show{ display:block; }
.nav-dropdown .dropdown-menu a{
  display:block; padding:8px 10px; border-radius:8px;
  color:var(--text); text-decoration:none;
}
.nav-dropdown .dropdown-menu a:hover,
.nav-dropdown .dropdown-menu a:focus{ background:#f6f9ff; outline:none; }
.nav-dropdown .dropdown-menu .sep{ height:1px; background:var(--border); margin:6px 4px; }

@media (max-width: 720px){
  .nav-dropdown{ width:100%; }
  .nav-dropdown .dropbtn{ width:100%; justify-content:space-between; }
  .nav-dropdown .dropdown-menu{
    position:static; min-width:auto; margin-top:6px;
    box-shadow:none; border:1px dashed var(--border);
  }
}
/* 讓標題可換行、容器允許換行 */
.n-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap: wrap;           /* 允許換行 */
}

/* 標題佔滿剩餘寬度並可換行 */
.n-title{
  flex: 1 1 300px;           /* 可伸縮，預設最小寬 300px */
  min-width: 0;              /* 避免被內容撐爆 */
  white-space: normal;       /* 允許換行 */
  overflow: visible;         /* 不截斷 */
  text-overflow: clip;       /* 取消省略號 */
  line-height: 1.4;
  word-break: break-word;    /* 長字/英文可斷行 */
  overflow-wrap: anywhere;   /* 再保險一層，任何地方都可斷行 */
}

/* 日期固定不換行；空間不足時自動掉到下一行靠右 */
.n-date{
  white-space: nowrap;
  margin-left: auto;         /* 在第一行時貼右側 */
}