/* =========================================================
   台中東南扶青社官網 — 共用樣式
   顏色、字級、圓角這些「全站長相」都集中在最上面的 :root 裡，
   要調整整體視覺改那裡就好，不用翻下面的排版程式碼。
   ========================================================= */
:root{
  /* 扶輪藍主軸 */
  --blue:#00539C;
  --blue-deep:#003A6E;
  --blue-ink:#04203A;
  --gold:#F5A623;
  --gold-soft:#FBE6C2;
  /* 社徽三色斜線（從書法 logo 取樣） */
  --c-red:#E24955;
  --c-yellow:#F4C244;
  --c-blue:#4E97CE;
  --brush:#C7C8CA;             /* 灰筆刷圓 */
  --tri:linear-gradient(115deg,var(--c-red) 0 33%,var(--c-yellow) 33% 66%,var(--c-blue) 66% 100%);
  --bg:#F6F5F2;               /* 帶一點暖的宣紙白 */
  --card:#FFFFFF;
  --text:#1B1B1D;             /* 墨黑 */
  --muted:#5E6470;
  --accent:#4E97CE;
  --success:#2E7D32;
  --line:rgba(20,20,24,0.10);
  --radius:1.15rem;
  --radius-sm:.75rem;
  --shell:0 1px 2px rgba(4,32,58,0.05), 0 12px 30px -16px rgba(4,32,58,0.20);
  --shell-lg:0 6px 14px rgba(4,32,58,0.07), 0 28px 56px -20px rgba(4,32,58,0.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --serif:'Noto Serif TC',serif;
  --sans:'Noto Sans TC',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 標題用明體，呼應社徽的書法墨字 */
h1,h2,h3{font-family:var(--serif);font-weight:900;letter-spacing:.01em;line-height:1.3;}
h1{font-size:clamp(2.05rem,5vw,2.9rem);}
h2{font-size:clamp(1.55rem,3vw,2.05rem);}
h3{font-weight:700;}
p{line-height:1.85;color:var(--muted);font-size:1rem;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}
::selection{background:var(--gold-soft);color:var(--blue-ink);}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}

/* ---------- 招牌：三色斜線標記 ---------- */
.tri-mark{display:inline-block;width:2.4rem;height:.42rem;border-radius:2px;
  background:var(--tri);transform:skewX(-18deg);vertical-align:middle;}
.tri-rule{height:4px;border:none;border-radius:2px;background:var(--tri);opacity:.9;}

/* ---------- NAV ---------- */
header{position:sticky;top:0;left:0;right:0;z-index:100;background:#fff;box-shadow:0 1px 0 var(--line);}
nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.85rem 0;}
.brand{display:flex;align-items:center;gap:.65rem;}
.brand .mark{height:46px;width:auto;flex-shrink:0;object-fit:contain;}
.brand .titles{display:flex;flex-direction:column;line-height:1.25;}
.brand .titles b{font-size:.95rem;font-weight:700;color:var(--text);}
.brand .titles span{font-size:.68rem;color:var(--muted);letter-spacing:.02em;}
.nav-links{display:flex;align-items:center;gap:1.6rem;font-size:.9rem;font-weight:500;}
.nav-links a{position:relative;color:var(--text);padding:.25rem 0;}
.nav-links a.active{color:var(--blue);font-weight:700;}
.nav-links a.active::after{content:'';position:absolute;left:0;right:0;bottom:-14px;height:2px;background:var(--blue);}
.nav-links a:not(.active):hover{color:var(--blue);}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.5rem;border-radius:.55rem;font-size:.9rem;font-weight:700;transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s;white-space:nowrap;cursor:pointer;border:none;font-family:var(--sans);}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 22px -10px rgba(0,83,156,.6);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 26px -10px rgba(0,83,156,.65);}
.btn-gold{background:var(--gold);color:#4A2E00;box-shadow:0 10px 22px -10px rgba(245,166,35,.6);}
.btn-gold:hover{transform:translateY(-2px);}
.btn-ghost{border:1.5px solid var(--line);background:#fff;}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.menu-toggle{display:none;width:44px;height:44px;border-radius:.6rem;border:1.5px solid var(--line);background:#fff;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.menu-toggle span{display:block;width:16px;height:1.5px;background:var(--text);position:relative;}
.menu-toggle span::before,.menu-toggle span::after{content:'';position:absolute;left:0;width:16px;height:1.5px;background:var(--text);transition:transform .25s;}
.menu-toggle span::before{top:-5px;} .menu-toggle span::after{top:5px;}

/* ---------- 積木格線 ----------
   每個區塊是格線上的一格。full=整排、twothirds=三分之二、
   half=一半、third=三分之一。手機一律變成整排。          */
.blocks{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:start;max-width:1240px;margin:0 auto;}
/* 混合 w 的內容與滿版/bleed 區塊共用同一頁面內容邊界：非 bleed 區塊的 wrap 改為穿透（不再二次置中/內距） */
.blocks > .block:not(.bleed) > .wrap{max-width:none;margin:0;padding:0;}
.block{min-width:0;}
.block[data-w="full"]{grid-column:span 12;}
.block[data-w="twothirds"]{grid-column:span 8;}
.block[data-w="half"]{grid-column:span 6;}
.block[data-w="third"]{grid-column:span 4;}
.block.bleed{grid-column:1 / -1;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;}
main > .wrap{padding-top:0;padding-bottom:0;}
.blocks{padding:0 clamp(1.25rem,4vw,2.5rem) 3rem;}
.block-pad{padding-top:3.25rem;}
.block-pad-sm{padding-top:1.75rem;}

/* ---------- HERO ---------- */
.hero{position:relative;height:min(80vh,660px);min-height:460px;overflow:hidden;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;}
.hero-slide.active{opacity:1;}
.hero-slide::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(4,32,58,.82) 0%,rgba(4,32,58,.55) 44%,rgba(4,32,58,.12) 78%);}
/* 底部三色斜線，扣住社徽識別 */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--tri);z-index:3;}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.25rem;max-width:660px;}
.hero h1{color:#fff;font-size:clamp(2.1rem,5.2vw,3.4rem);line-height:1.28;text-shadow:0 2px 20px rgba(0,0,0,.25);}
.hero p{color:rgba(255,255,255,.9);font-size:clamp(.98rem,1.6vw,1.12rem);max-width:40ch;}
.hero .cta-row{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:.35rem;}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:1.5rem;display:flex;gap:.5rem;z-index:2;}
.hero-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,width .3s;cursor:pointer;}
.hero-dots span.active{background:#fff;width:22px;border-radius:4px;}

/* ---------- PAGE BANNER ---------- */
.page-banner{position:relative;height:min(48vh,360px);min-height:280px;background-size:cover;background-position:center;display:flex;align-items:flex-end;border-bottom:6px solid transparent;border-image:var(--tri) 1;}
.page-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,32,58,.3) 0%,rgba(4,32,58,.85) 100%);}
/* S2：page-banner 是 flex 容器，其 .wrap 作為 flex item 會縮成內容寬並被 margin:auto 置中；
   補 width:100% 讓它填滿後再以 max-width/margin:auto 置中，內容左緣與格線共用頁面邊界（左 140 @1440）。 */
.page-banner > .wrap{width:100%;}
.page-banner-content{position:relative;z-index:1;padding:2.75rem 0;width:100%;}
.page-banner h1{color:#fff;font-size:clamp(2rem,4.4vw,2.85rem);}
.page-banner p{color:rgba(255,255,255,.88);margin-top:.55rem;}
.crumb{font-size:.8rem;color:rgba(255,255,255,.72);margin-bottom:.7rem;letter-spacing:.04em;}
.crumb a{color:rgba(255,255,255,.7);} .crumb a:hover{color:#fff;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}
.stagger > *{transition-delay:calc(var(--i,0) * 80ms);}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.25rem;flex-wrap:wrap;}
.sec-head h2{position:relative;}
/* 小標：三色斜線 + 字距拉開的英文/標籤，明體大標在下 */
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;color:var(--blue);
  letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.55rem;}
.kicker::before{content:'';width:2.1rem;height:.4rem;border-radius:2px;
  background:var(--tri);transform:skewX(-18deg);flex-shrink:0;}
.see-all{font-family:var(--sans);font-size:.85rem;font-weight:700;color:var(--blue);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.2rem;transition:gap .25s var(--ease);}
.see-all:hover{gap:.5rem;}

/* ---------- 特色卡片 ---------- */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.block[data-w="half"] .values,.block[data-w="third"] .values{grid-template-columns:1fr 1fr;}
.value-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2.1rem 1.6rem 1.9rem;text-align:center;box-shadow:var(--shell);overflow:hidden;transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
/* 卡片頂端的三色斜線，滑過時展開 */
.value-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--tri);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shell-lg);}
.value-card:hover::before{transform:scaleX(1);}
.value-card .icon{width:58px;height:58px;border-radius:50%;background:var(--gold-soft);border:none;display:flex;align-items:center;justify-content:center;margin:0 auto 1.1rem;}
.value-card .icon svg{width:25px;height:25px;stroke:var(--blue);fill:none;}
.value-card h3{font-size:1.1rem;color:var(--blue);margin-bottom:.5rem;}
.value-card p{font-size:.87rem;}

/* ---------- 面板（首頁三欄） ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shell);overflow:hidden;display:flex;flex-direction:column;height:100%;}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.4rem 0;}
.panel-head h3{font-size:1.05rem;color:var(--blue);}
.panel-head a{font-size:.8rem;font-weight:700;color:var(--muted);}
.mini-card{display:flex;gap:.85rem;padding:1.1rem 1.4rem;border-top:1px solid var(--line);}
.mini-card:first-child{border-top:none;margin-top:1.1rem;}
.mini-card img{width:64px;height:64px;border-radius:.6rem;object-fit:cover;flex-shrink:0;background:var(--gold-soft);}
.mini-card .date{font-size:.72rem;color:var(--muted);font-weight:600;}
.mini-card h4{font-size:.88rem;line-height:1.45;margin:.15rem 0;font-weight:700;}
.mini-card p{font-size:.78rem;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
/* C.2 同源例會面板卡 */
.mtg-next{padding:1.25rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.mtg-next .tag{align-self:flex-start;background:var(--gold-soft);color:var(--blue-deep);font-size:.72rem;font-weight:800;padding:.25rem .6rem;border-radius:.4rem;}
.mtg-next .when{font-size:.84rem;font-weight:700;color:var(--muted);margin-top:.3rem;}
.mtg-next h4{font-size:1.02rem;line-height:1.5;overflow-wrap:anywhere;}
.mtg-next .sp{font-size:.84rem;color:var(--muted);overflow-wrap:anywhere;}
.mtg-next .see-all{margin-top:.35rem;}
.stat-list{padding:1.1rem 1.4rem 1.4rem;display:flex;flex-direction:column;flex:1;justify-content:center;}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;padding:.85rem 0;border-top:1px solid var(--line);}
.stat-row:first-child{border-top:none;}
.stat-row .label{font-size:.86rem;color:var(--muted);font-weight:500;}
.stat-row .value{font-size:1.3rem;font-weight:900;color:var(--blue);}
.stat-row .value small{font-size:.7rem;font-weight:500;color:var(--muted);margin-left:.15rem;}

/* ---------- 加入橫幅 ---------- */
.join-banner{position:relative;border-radius:var(--radius);overflow:hidden;min-height:220px;display:flex;align-items:center;background-size:cover;background-position:center;background-color:var(--blue-ink);}
.join-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--blue-ink) 0%,rgba(0,36,63,.86) 38%,rgba(0,36,63,.15) 80%);}
.join-banner-content{position:relative;z-index:1;padding:2.4rem clamp(1.5rem,4vw,3rem);}
.join-banner h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.9rem);}
.join-banner p{color:rgba(255,255,255,.82);margin:.5rem 0 1.25rem;}

/* ---------- 圖文左右排 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media img{border-radius:var(--radius);width:100%;height:340px;object-fit:cover;box-shadow:var(--shell);background:var(--gold-soft);}
.split-text .kicker{margin-bottom:.7rem;}
.split-text h2{margin-bottom:1rem;color:var(--text);}
.split-text p{margin-bottom:1rem;}
.split-text p:last-child{margin-bottom:0;}
.block[data-w="half"] .split,.block[data-w="third"] .split{grid-template-columns:1fr;gap:1.5rem;}

/* ---------- 願景使命 ---------- */
.vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;}
.block[data-w="half"] .vm-grid,.block[data-w="third"] .vm-grid{grid-template-columns:1fr;}
.vm-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2.25rem;box-shadow:var(--shell);}
.vm-card .icon{width:48px;height:48px;border-radius:50%;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;}
.vm-card .icon svg{width:22px;height:22px;stroke:var(--blue);fill:none;}
.vm-card h3{color:var(--blue);font-size:1.15rem;margin-bottom:.65rem;}

/* ---------- 社史時間軸 ---------- */
.timeline{display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x proximity;}
.timeline::-webkit-scrollbar{height:6px;}
.timeline::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;}
.tl-item{flex:0 0 auto;width:230px;scroll-snap-align:start;}
.tl-item img{width:230px;height:160px;object-fit:cover;border-radius:var(--radius-sm);box-shadow:var(--shell);background:var(--gold-soft);}
.tl-item .yr{font-weight:900;color:var(--blue);font-size:1.1rem;margin-top:.8rem;}
.tl-item p{font-size:.84rem;margin-top:.2rem;}

/* ---------- 文章／活動 卡片列表 ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.block[data-w="half"] .card-grid{grid-template-columns:1fr 1fr;}
.block[data-w="third"] .card-grid{grid-template-columns:1fr;}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shell);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shell-lg);}
.post-card .thumb{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#DCE8EE;}
/* 2026-10-28：卡片照片一律依上傳的原始比例完整顯示、不裁切（舊的 portrait／square 固定比例與 cover 裁切已拿掉） */
/* 新上傳的照片：aspect-ratio 由 site.js 依照片實際寬高精確填成 inline style，這裡只要
   object-fit:contain（不是 cover）就能保證完整顯示、不裁切內容；max-height 只是避免
   極端直式照片把卡片拉得過高，contain 底下超過上限是縮小置中，不是切掉。 */
.post-card .thumb.thumb-auto{height:auto;max-height:520px;object-fit:contain;}
/* S3：無照片卡不保留圖片巨格，上緣留白略增維持呼吸感 */
.post-card.no-thumb .body{padding-top:1.5rem;}
.post-card .body{padding:1.35rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:.4rem;flex:1;}
.post-card .date{font-size:.74rem;font-weight:600;color:var(--muted);}
.post-card h3{font-size:1.02rem;line-height:1.5;}
.post-card p{font-size:.87rem;}
.post-card.clickable{cursor:pointer;}
.post-card .card-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.post-card .card-more{margin-top:auto;padding-top:.5rem;color:var(--blue);font-weight:700;font-size:.82rem;}
.tag{display:inline-block;align-self:flex-start;background:var(--gold-soft);color:var(--blue-deep);font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:.4rem;}
.meta-row{display:flex;gap:1rem;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-top:.35rem;padding-top:.7rem;border-top:1px solid var(--line);}
.meta-row b{color:var(--blue);font-weight:700;}

/* ---------- 幹部名單 ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.35rem;}
.block[data-w="half"] .team-grid{grid-template-columns:1fr 1fr;}
.block[data-w="third"] .team-grid{grid-template-columns:1fr;}
.person{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shell);padding:.9rem .9rem 1.1rem;text-align:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease);display:flex;flex-direction:column;height:100%;}
.person:hover{transform:translateY(-4px);box-shadow:var(--shell-lg);}
.person.has-more{cursor:pointer;}
.person.has-more:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.person .person-more{margin-top:.7rem;color:var(--blue);font-weight:700;font-size:.8rem;}
.person .avatar{width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius-sm);object-fit:cover;object-position:center;margin:0 0 .9rem;background:var(--gold-soft);}
.person .avatar-blank{width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius-sm);margin:0 0 .9rem;background:var(--gold-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:2.4rem;font-weight:900;box-shadow:var(--shell);}
/* S4：照片載入前的備援占位預設隱藏（勝過 .person .avatar-blank 的 display:flex），img onerror 才顯示 */
.person .avatar-blank[hidden]{display:none;}
.person .role{font-size:.74rem;font-weight:700;color:var(--gold);letter-spacing:.04em;}
.person .name{font-size:1.05rem;font-weight:900;margin:.2rem 0 .3rem;}
.person .job{font-size:.8rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.person .bio{font-size:.82rem;color:var(--text);line-height:1.7;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line);text-align:left;white-space:pre-wrap;}

/* ---------- 加入我們：步驟 / 條件 ---------- */
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:step;}
.block[data-w="half"] .step-grid{grid-template-columns:1fr 1fr;}
.block[data-w="third"] .step-grid{grid-template-columns:1fr;}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.5rem;box-shadow:var(--shell);position:relative;}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:1.4rem;right:1.5rem;font-size:2.4rem;font-weight:900;color:var(--gold-soft);line-height:1;}
.step h3{font-size:1rem;color:var(--blue);margin-bottom:.5rem;}
.step p{font-size:.86rem;}
.fact-list{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shell);padding:.4rem 1.6rem;}
.fact{display:flex;justify-content:space-between;gap:1.5rem;padding:1.05rem 0;border-top:1px solid var(--line);font-size:.92rem;}
.fact:first-child{border-top:none;}
.fact .k{color:var(--muted);font-weight:500;flex-shrink:0;}
.fact .v{font-weight:700;text-align:right;}

/* ---------- 例會總覽 ---------- */
.sched-note{font-size:.88rem;color:var(--muted);margin:-.5rem 0 1.5rem;}
.sched-month{margin-top:2rem;}
.sched-month:first-child{margin-top:0;}
.sched-month > h3{font-size:1.05rem;color:var(--blue);margin-bottom:.9rem;
  display:flex;align-items:center;gap:.6rem;}
.sched-month > h3::after{content:'';flex:1;height:1px;background:var(--line);}
.mtg{display:grid;grid-template-columns:64px 92px 1fr;gap:1rem;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shell);padding:1.1rem 1.3rem;margin-bottom:.7rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);}
.mtg:hover{transform:translateY(-2px);box-shadow:var(--shell-lg);}
.mtg.special{border-color:rgba(247,168,27,.5);background:linear-gradient(0deg,rgba(252,227,178,.16),rgba(252,227,178,.16)),var(--card);}
.mtg .when{text-align:center;}
.mtg .when .d{font-size:1.35rem;font-weight:900;color:var(--blue);line-height:1;}
.mtg .when .w{font-size:.72rem;color:var(--muted);margin-top:.25rem;}
.mtg .no{font-size:.74rem;font-weight:700;color:var(--blue-deep);
  background:var(--gold-soft);border-radius:.4rem;padding:.3rem .1rem;text-align:center;
  align-self:start;white-space:nowrap;}
.mtg .no.plain{background:none;color:var(--muted);}
.mtg .body h4{font-size:.98rem;line-height:1.55;font-weight:700;}
.mtg .body .sp{font-size:.85rem;color:var(--muted);margin-top:.35rem;}
.mtg .body .sp b{color:var(--text);font-weight:700;}
.mtg .body .badge{display:inline-block;font-size:.68rem;font-weight:700;
  color:var(--blue-deep);background:var(--gold-soft);border-radius:.4rem;
  padding:.15rem .55rem;margin-bottom:.4rem;}
.mtg .body .mtg-register{display:inline-block;font-size:.82rem;font-weight:700;
  color:var(--blue);margin-top:.5rem;text-decoration:none;}
.mtg .body .mtg-register:hover{text-decoration:underline;}
@media (max-width:600px){
  .mtg{grid-template-columns:52px 1fr;gap:.75rem;}
  .mtg .no{grid-column:2;justify-self:start;padding:.25rem .6rem;margin-bottom:.2rem;}
  .mtg .body{grid-column:1 / -1;}
}

/* ---------- 聯絡資訊 ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.35rem;}
.contact-grid[data-n="3"]{grid-template-columns:repeat(3,1fr);}
.block[data-w="half"] .contact-grid,.block[data-w="third"] .contact-grid{grid-template-columns:1fr;}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shell);padding:1.8rem 1.6rem;position:relative;transition:opacity .7s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);}
.contact-card.is-link:hover{transform:translateY(-3px);box-shadow:var(--shell-lg);}
.contact-card .cc-link{color:var(--blue);font-weight:700;}
.contact-card .cc-link::after{content:'';position:absolute;inset:0;border-radius:var(--radius);}
.contact-card .cc-link:focus-visible{outline:none;}
.contact-card .cc-link:focus-visible::after{outline:3px solid var(--gold);outline-offset:2px;}
.contact-card.is-link:hover .cc-link{text-decoration:underline;}
.contact-card .line-qr,.contact-card .contact-quick{position:relative;z-index:2;}
.contact-card .icon{width:44px;height:44px;border-radius:50%;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;}
.contact-card .icon svg{width:20px;height:20px;stroke:var(--blue);fill:none;}
.contact-card h3{font-size:.95rem;color:var(--blue);margin-bottom:.35rem;}
.contact-card p{font-size:.9rem;color:var(--text);}

/* LINE 卡片：連結下方的「掃描加好友」QR，用細上邊線跟文字分開，圖＋說明橫排 */
.line-qr{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;padding-top:.9rem;
  border-top:1px dashed var(--line);text-decoration:none;color:var(--muted);width:fit-content;}
.line-qr img{width:64px;height:64px;border-radius:.4rem;background:#fff;border:1px solid var(--line);
  padding:4px;flex-shrink:0;}
.line-qr span{font-size:.78rem;font-weight:700;color:var(--blue);line-height:1.5;}
.line-qr:hover span{text-decoration:underline;}

/* 電話卡片旁的 IG/FB 私訊小圖示：讓人直覺可點 */
.contact-quick{display:flex;gap:.55rem;margin-top:.8rem;}
.contact-quick a{width:34px;height:34px;border-radius:50%;background:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s;}
.contact-quick a svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.contact-quick a:hover{transform:translateY(-2px);}
.contact-quick a.qa-fb:hover{background:#1877F2;}
.contact-quick a.qa-fb:hover svg{stroke:#fff;}
.contact-quick a.qa-ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.contact-quick a.qa-ig:hover svg{stroke:#fff;}

/* ---------- 純文字區塊 ---------- */
.richtext h2{margin-bottom:1rem;}
.richtext .kicker{margin-bottom:.7rem;}
.richtext p{margin-bottom:1rem;}
.richtext p:last-child{margin-bottom:0;}
.richtext .richtext-cta{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.7rem;}

/* ---------- 內容還沒填時的提示 ---------- */
.empty-note{background:var(--card);border:1px dashed rgba(0,93,170,.35);border-radius:var(--radius);padding:2.5rem 2rem;text-align:center;}
.empty-note h3{font-size:1rem;color:var(--blue);margin-bottom:.5rem;}
.empty-note p{font-size:.88rem;max-width:44ch;margin:0 auto;}
.empty-note code{background:var(--gold-soft);color:var(--blue-ink);padding:.1rem .4rem;border-radius:.3rem;font-size:.85em;}

/* ---------- FOOTER ---------- */
footer{background:var(--blue-ink);color:rgba(255,255,255,.75);margin-top:2rem;}
footer .wrap{padding:3.5rem clamp(1.25rem,4vw,2.5rem) 2rem;}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.14);}
.foot-brand{display:flex;align-items:center;gap:.7rem;color:#fff;margin-bottom:.9rem;}
.foot-brand .foot-mark-img{width:48px;height:48px;border-radius:11px;flex-shrink:0;background:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.28);}
.foot-brand .titles{display:flex;flex-direction:column;line-height:1.3;}
.foot-brand .titles b{font-size:.92rem;}
.foot-brand .titles span{font-size:.68rem;color:rgba(255,255,255,.6);}
footer .tagline{font-size:.85rem;color:rgba(255,255,255,.65);max-width:30ch;}
footer h5{color:#fff;font-size:.82rem;font-weight:700;margin-bottom:1rem;}
footer ul{list-style:none;display:flex;flex-direction:column;gap:.65rem;font-size:.85rem;}
footer ul a:hover{color:#fff;}
footer .about-text{font-size:.83rem;line-height:1.8;color:rgba(255,255,255,.65);}
.theme-badge{margin-top:1.25rem;}
.theme-badge span{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.55);margin-bottom:.55rem;}
.theme-badge img{width:112px;height:112px;border-radius:.7rem;display:block;box-shadow:var(--shell);}
.socials{display:flex;gap:.6rem;margin-top:1.1rem;}
.socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .25s;}
.socials a:hover{background:var(--gold);}
.socials svg{width:15px;height:15px;stroke:#fff;fill:none;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;font-size:.78rem;flex-wrap:wrap;gap:.75rem;}
.foot-bottom .links{display:flex;gap:1.25rem;}
/* 後台入口：以前是右下角常駐齒輪，現在跟小南的聊天入口搶位置，改成頁尾這行純文字連結。
   不是安全保護（/admin 本來就靠密碼擋），只是換個不衝突的位置。 */
.foot-admin-link{color:rgba(255,255,255,.55);text-decoration:none;}
.foot-admin-link:hover,.foot-admin-link:focus-visible{color:#fff;text-decoration:underline;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .nav-links{display:none;}
  .menu-toggle{display:flex;}
  .values{grid-template-columns:1fr 1fr;}
  .card-grid{grid-template-columns:1fr 1fr;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .step-grid{grid-template-columns:1fr 1fr;}
  .contact-grid,.contact-grid[data-n="3"]{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .join-banner::after{background:linear-gradient(180deg,rgba(0,36,63,.55) 0%,var(--blue-ink) 85%);}
  .split,.split.reverse{grid-template-columns:1fr;gap:1.75rem;}
  .split.reverse .split-media{order:0;}
  .split-media img{height:240px;}
  .vm-grid{grid-template-columns:1fr;}
  /* 積木在平板以下：三分之一變一半，其餘整排 */
  .block[data-w="third"]{grid-column:span 6;}
  .block[data-w="half"],.block[data-w="twothirds"]{grid-column:span 12;}
}
@media (max-width:600px){
  .values{grid-template-columns:1fr 1fr;}
  .card-grid,.team-grid,.step-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;gap:1.75rem;}
  .btn{padding:.65rem 1.1rem;font-size:.84rem;}
  .block[data-w]{grid-column:span 12;}
  .block-pad{padding-top:2.25rem;}
  .blocks{gap:1.25rem;}
}

/* ---- 第5步A：資料狀態與聯絡錨點 ---- */
.data-note{padding:1.6rem 1.4rem;color:#5E6470;font-size:.92rem;line-height:1.7;text-align:center;}
.data-note p{margin:0 0 .6rem;}
.data-note-error{color:#1B1B1D;}
.retry-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1.2rem;
  border:1px solid #00539C;color:#00539C;background:#fff;border-radius:.6rem;font:inherit;font-size:.9rem;cursor:pointer;}
.retry-btn:hover{background:#00539C;color:#fff;}

/* ---------- C.1 消息全文 ---------- */
.news-article{max-width:760px;margin:0 auto;text-align:left;}
.news-article .back-link{display:inline-block;margin-bottom:1rem;color:var(--blue);font-weight:700;font-size:.9rem;}
.news-article .date{font-size:.8rem;font-weight:600;color:var(--muted);}
.news-article h1{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.4;margin:.35rem 0 1rem;overflow-wrap:anywhere;}
.news-article .article-photo{display:block;width:auto;max-width:100%;height:auto;max-height:min(75vh,680px);object-fit:contain;border-radius:var(--radius);margin:0 auto 1.4rem;background:var(--gold-soft);}
.article-body{font-size:1rem;line-height:1.9;color:#2A2E35;overflow-wrap:anywhere;}
.article-body p{margin:0 0 1.1rem;}
.article-share{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:1.8rem;padding-top:1.3rem;border-top:1px solid var(--line);}
.article-share .share-url{flex:1 1 220px;min-width:0;padding:.55rem .7rem;border:1px solid var(--line);border-radius:.5rem;font:inherit;font-size:.85rem;}
.article-share .share-msg{font-size:.82rem;color:var(--muted);}
/* hidden 屬性要勝過 .btn 的 display:inline-flex（分享鈕/網址欄預設隱藏，JS 才顯示） */
.article-share [hidden]{display:none;}
/* F01 消息全文入口連結 */
.read-more{display:inline-flex;align-items:center;gap:.25rem;margin-top:.5rem;font-size:.84rem;font-weight:700;color:var(--blue);align-self:flex-start;}
.read-more:hover{gap:.5rem;}
.mini-card .read-more{margin-top:.3rem;font-size:.8rem;}
.data-note .back-link{color:var(--blue);font-weight:700;}
.retry-btn:disabled{opacity:.55;cursor:default;}
.stat-pending{color:#8A8F99;font-size:.9em;}
/* 聯絡錨點跳轉避開固定頁首；鍵盤聚焦不顯示預設外框但保留可見焦點環 */
#contact{scroll-margin-top:84px;}
#contact:focus{outline:none;}
#contact:focus-visible{outline:2px solid #00539C;outline-offset:4px;border-radius:.4rem;}

/* ===== 第5步B.1：共用元件 / hero brand / 狀態 / 可存取選單 ===== */
.nav-actions{display:flex;align-items:center;gap:.6rem;}
.menu-toggle:focus-visible,.btn:focus-visible,.retry-btn:focus-visible,.nav-links a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:.3rem;}

/* 手機/折疊選單：以 header.nav-open 控制，不用 inline style */
@media (max-width:980px){
  header{position:sticky;}
  .nav-open .nav-links{
    display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
    position:absolute;top:100%;left:16px;right:16px;background:#fff;
    padding:1rem 1.15rem;border-radius:.9rem;box-shadow:0 20px 40px -10px rgba(0,0,0,.18);z-index:200;
    max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .nav-open .nav-links a{width:100%;min-height:44px;display:flex;align-items:center;padding:.4rem .2rem;}
  .nav-open .nav-links a.active::after{display:none;}
  .nav-open .menu-toggle span{background:transparent;}
  .nav-open .menu-toggle span::before{transform:translateY(5px) rotate(45deg);}
  .nav-open .menu-toggle span::after{transform:translateY(-5px) rotate(-45deg);}
}

/* Hero 品牌構圖（opt-in variant=brand）：淺底、不覆蓋文字、圖片保持原比例 */
/* brand variant 依內容自然長高，不繼承 .hero 的固定高度/overflow:hidden（避免小螢幕裁切社徽） */
.hero-brand{background:var(--paper,#F6F5F2);padding:clamp(2.2rem,6vw,4.2rem) 0;height:auto;min-height:0;overflow:visible;}
.hero-brand-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
.hero-brand .hero-content{position:static;height:auto;max-width:none;}
.hero-brand h1{color:var(--blue-ink,#04203A);text-shadow:none;}
.hero-brand p{color:var(--muted,#5E6470);max-width:46ch;}
.hero-brandmark{display:flex;justify-content:center;position:relative;}
.hero-brandmark img{max-width:min(100%,420px);height:auto;display:block;}
.hero-brandmark .brand-stripes{position:absolute;left:8%;bottom:6%;display:flex;gap:6px;transform:rotate(-24deg);}
.hero-brandmark .brand-stripes span{width:46px;height:5px;border-radius:3px;}
.hero-brandmark .brand-stripes span:nth-child(1){background:#E24955;}
.hero-brandmark .brand-stripes span:nth-child(2){background:#F4C244;}
.hero-brandmark .brand-stripes span:nth-child(3){background:#4E97CE;}
@media (max-width:760px){
  .hero-brand-grid{grid-template-columns:1fr;}
  .hero-brandmark{order:2;}
  .hero-brandmark img{max-width:min(78%,320px);}
}

/* Hero 輪播暫停/播放鈕 */
.hero-ctrl{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;min-height:44px;padding:.3rem .95rem;
  border-radius:.5rem;border:1px solid rgba(255,255,255,.6);background:rgba(4,32,58,.45);color:#fff;font-size:.82rem;cursor:pointer;}
.hero-ctrl:hover{background:rgba(4,32,58,.7);}

/* 資料狀態容器統一（延伸 5A 的 .data-note） */
.data-note{min-height:0;}
.stat-pending{color:var(--muted,#8A8F99);font-size:.88em;}
.foot-contact-note{color:rgba(255,255,255,.7);font-size:.88rem;margin-top:.3rem;}
/* 聯絡我們：FB／IG 品牌 logo＋可點網址（頁尾與聯絡區塊共用 socialLogo 的 svg.sl） */
.foot-social{margin-top:1rem;gap:.75rem;}
.foot-social-link{display:flex;align-items:center;gap:.65rem;color:#fff;}
.foot-social-link svg.sl{width:32px;height:32px;flex-shrink:0;border-radius:8px;}
.foot-social-link .txt{display:flex;flex-direction:column;line-height:1.35;min-width:0;}
.foot-social-link .txt b{font-size:.86rem;}
.foot-social-link .txt small{font-size:.74rem;color:rgba(255,255,255,.7);overflow-wrap:anywhere;}
.foot-social-link:hover .txt small{color:#fff;text-decoration:underline;}
.contact-card .icon.logo{background:none;}
.contact-card .icon svg.sl{width:44px;height:44px;stroke:none;border-radius:50%;}
.contact-card .icon.logo + h3 + p a{overflow-wrap:anywhere;}

img{max-width:100%;}
@media (max-width:360px){ .wrap{padding-left:16px;padding-right:16px;} }
@media (prefers-reduced-motion:reduce){ .hero-slide{transition:none;} .reveal{transition:none;} }

/* ===== 第5步A2/B2 收尾：統計期間、中螢幕 nav 容納 ===== */
.stat-period{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted,#5E6470);}
/* 中螢幕（未折疊）時收緊導覽間距與字級，讓 9 項＋品牌＋CTA 不溢出/不重疊 */
@media (min-width:981px) and (max-width:1180px){
  nav{gap:1rem;}
  .nav-links{gap:.95rem;font-size:.82rem;}
  .nav-actions{gap:.45rem;}
  .brand .titles span{display:none;} /* 中螢幕隱藏英文副標，留空間給導覽 */
}

/* ===== 第5步B.3：六頁 UI 候選 ===== */
/* pageBanner 淺底標題候選（variant=plain）：墨色字在暖白底、無深色遮罩 */
.page-banner-plain{height:auto;min-height:0;background:var(--paper,#F6F5F2);display:block;align-items:initial;}
.page-banner-plain::after{display:none;}
.page-banner-plain .page-banner-content{padding:clamp(2rem,5vw,3.2rem) 0;}
.page-banner-plain h1{color:var(--blue-ink,#04203A);}
.page-banner-plain .crumb,.page-banner-plain .crumb a{color:var(--muted,#5E6470);}
.page-banner-plain p{color:var(--muted,#5E6470);}

/* FAQ（richtext.faqs 候選）：原生 details，summary 可鍵盤、觸控 44px */
.faq-list{margin-top:1.2rem;border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none;cursor:pointer;padding:.9rem .2rem;min-height:44px;display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--blue-ink,#04203A);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:'＋';color:var(--blue);font-weight:900;flex-shrink:0;}
.faq-item[open] summary::before{content:'－';}
.faq-item summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:.3rem;}
.faq-a{padding:0 .2rem 1rem 1.5rem;color:var(--text);font-size:.95rem;line-height:1.75;}

/* 團隊：390 兩欄、320 一欄（桌機維持四欄，half/third 的既有規則不動） */
@media (max-width:600px){ .team-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:360px){ .team-grid{grid-template-columns:1fr;} }

/* =========================================================
   前端體驗強化（Phase A）：頁面轉場滑動、載入進度、圖片漸進淡入
   全部是漸進增強：不支援的瀏覽器照常運作；尊重 prefers-reduced-motion。
   ========================================================= */

/* 1) 跨頁檢視轉場：同源導航時整頁「滑過去」，而非硬跳 */
@media (prefers-reduced-motion: no-preference){
  /* 注意：@view-transition 的 navigation:auto 由 site.js 只在「非預覽」頁注入，
     避免後台預覽 iframe 快速換頁時出現 ViewTransition 被中止的 console 錯誤。 */
  ::view-transition-old(root){ animation: tse-vt-out .26s var(--ease) both; }
  ::view-transition-new(root){ animation: tse-vt-in .34s var(--ease) both; }
  @keyframes tse-vt-out{ to{ opacity:0; transform:translateX(-22px); } }
  @keyframes tse-vt-in{ from{ opacity:0; transform:translateX(26px); } }
}

/* 2) 內容載入進度：aria-busy 的區塊顯示骨架微光；頂部細進度條 */
[data-fill][aria-busy="true"]{ position:relative; min-height:140px; }
[data-fill][aria-busy="true"]::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius-sm);
  background:linear-gradient(100deg,#ecebe7 28%,#f7f6f3 50%,#ecebe7 72%);
  background-size:200% 100%; animation:tse-shimmer 1.15s linear infinite; pointer-events:none;
}
@keyframes tse-shimmer{ to{ background-position:-200% 0; } }

.tse-navbar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:9999;
  background:var(--tri); box-shadow:0 0 8px rgba(78,151,206,.5);
  opacity:0; pointer-events:none;
}
.tse-navbar.on{ opacity:1; }

/* 3) 圖片漸進淡入（只作用於內容卡片/文章/頭像，不碰 hero 輪播） */
#site-main .post-card img.tse-fade,
#site-main .mini-card img.tse-fade,
#site-main img.article-photo.tse-fade,
#site-main img.avatar.tse-fade{ opacity:0; transition:opacity .5s var(--ease); }
#site-main .post-card img.tse-fade.is-loaded,
#site-main .mini-card img.tse-fade.is-loaded,
#site-main img.article-photo.tse-fade.is-loaded,
#site-main img.avatar.tse-fade.is-loaded{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  [data-fill][aria-busy="true"]::after{ animation:none; }
  .tse-navbar{ display:none; }
  #site-main img.tse-fade{ opacity:1 !important; transition:none !important; }
}

/* 4) 手機列表左右滑「翻卡片」：消息/活動列表在小螢幕變水平吸附捲動（native swipe） */
@media (max-width:700px){
  .card-grid{
    display:flex; grid-template-columns:none;
    gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; padding:0 0 .7rem; scroll-padding:0 16px;
  }
  .card-grid > *{ flex:0 0 86%; scroll-snap-align:start; }
  .card-grid::-webkit-scrollbar{ height:6px; }
  .card-grid::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
}

/* ---------- 精選公益成果（showcase）：顯眼區塊，≤5 張輪播 + 說明 ---------- */
.showcase{display:grid;grid-template-columns:1.25fr 1fr;gap:2rem;align-items:center;margin-top:1.2rem;}
.sc-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shell-lg);
  aspect-ratio:4/3;background:var(--gold-soft);}
.sc-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s var(--ease);}
.sc-slide.active{opacity:1;}
.sc-dots{position:absolute;bottom:.75rem;left:50%;transform:translateX(-50%);display:flex;gap:.45rem;z-index:2;}
.sc-dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:background .2s;}
.sc-dots span.active{background:#fff;}
.sc-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.9rem;}
.sc-desc p{font-size:.96rem;line-height:1.9;color:var(--text);margin-bottom:.75rem;white-space:pre-wrap;}
.sc-desc .cta-row{margin-top:.4rem;}
@media (max-width:800px){ .showcase{grid-template-columns:1fr;gap:1.2rem;} .sc-media{aspect-ratio:16/10;} }

/* ---------- 點字就地編輯（只在後台預覽 ?preview=1 啟用；body.tse-edit-on 由後台切換） ---------- */
body.tse-edit-on [data-ep],
body.tse-edit-on [data-es]{
  cursor:text; border-radius:4px;
  outline:1px dashed rgba(0,93,170,.5); outline-offset:3px;
  transition:outline-color .15s ease, background .15s ease;
}
body.tse-edit-on [data-ep]:hover,
body.tse-edit-on [data-es]:hover{
  outline-color:#005DAA; outline-style:solid; background:rgba(247,168,27,.18);
}
body.tse-edit-on [data-ep].tse-editing,
body.tse-edit-on [data-es].tse-editing{
  outline:2px solid #005DAA; outline-offset:3px;
  background:rgba(255,255,255,.96); color:#17304a; box-shadow:0 0 0 4px rgba(0,93,170,.12);
}
/* 編輯中的按鈕文字維持可讀（按鈕底色上） */
body.tse-edit-on .btn [data-ep].tse-editing{ background:#fff; color:#17304a; border-radius:3px; padding:0 .2em; }

/* ---------- 共用彈出卡（年度團隊展開 / 消息・活動全文） ---------- */
.tse-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem;}
.tse-modal[hidden]{display:none;}
.tse-modal-backdrop{position:absolute;inset:0;background:rgba(10,24,40,.55);backdrop-filter:blur(2px);}
.tse-modal-panel{position:relative;z-index:1;background:var(--card);border-radius:var(--radius);box-shadow:var(--shell-lg);
  max-width:620px;width:100%;max-height:88vh;overflow:auto;padding:1.6rem 1.5rem 1.8rem;
  animation:tseModalIn .22s var(--ease);}
@keyframes tseModalIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
.tse-modal-x{position:absolute;top:.6rem;right:.7rem;border:none;background:var(--gold-soft);color:var(--blue);
  width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;line-height:1;font-weight:700;}
.tse-modal-x:hover{background:var(--gold);color:#fff;}
body.tse-modal-open{overflow:hidden;}
/* 年度團隊彈出卡 */
.person-modal{text-align:center;}
.person-modal .pm-avatar{width:150px;height:150px;border-radius:var(--radius-sm);object-fit:cover;background:var(--gold-soft);margin:.3rem auto 1rem;display:block;}
.person-modal .pm-blank{display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:900;color:var(--blue);}
.person-modal .pm-role{font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:.04em;}
.person-modal .pm-name{font-size:1.4rem;font-weight:900;margin:.25rem 0;}
.person-modal .pm-job{font-size:.9rem;color:var(--muted);margin-bottom:1rem;}
.person-modal .pm-bio{text-align:left;font-size:.95rem;line-height:1.9;color:var(--text);}
.person-modal .pm-bio p{margin-bottom:.7rem;}
/* 消息・活動全文彈出卡 */
.article-modal .am-date{font-size:.76rem;font-weight:600;color:var(--muted);}
.article-modal .am-title{font-size:1.4rem;line-height:1.4;margin:.3rem 0 .9rem;}
.article-modal .am-photo{display:block;width:auto;max-width:100%;height:auto;max-height:min(75vh,680px);border-radius:var(--radius-sm);margin:0 auto 1rem;object-fit:contain;background:var(--gold-soft);}
.article-modal .am-meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.84rem;color:var(--muted);margin-bottom:.8rem;}
.article-modal .am-body{font-size:.97rem;line-height:1.95;color:var(--text);}
.article-modal .am-body p{margin-bottom:.8rem;}
@media (max-width:600px){
  .tse-modal-panel{padding:1.3rem 1.1rem 1.5rem;max-height:92vh;}
  .person-modal .pm-avatar{width:120px;height:120px;}
}

/* ---------- 就地換照片（只在後台預覽 body.tse-edit-on） ---------- */
body.tse-edit-on [data-epi]{cursor:pointer;outline:2px dashed rgba(0,93,170,.55);outline-offset:-2px;transition:outline-color .15s,filter .15s;}
body.tse-edit-on [data-epi]:hover{outline-color:#005DAA;outline-style:solid;filter:brightness(.92);}
/* 背景圖容器可加「更換照片」提示（img 這類取代元素無法用 ::after，靠游標與外框） */
body.tse-edit-on .hero-slide[data-epi],
body.tse-edit-on .page-banner[data-epi],
body.tse-edit-on .join-banner[data-epi]{position:relative;}
body.tse-edit-on .hero-slide[data-epi]::after,
body.tse-edit-on .page-banner[data-epi]::after,
body.tse-edit-on .join-banner[data-epi]::after{
  content:"📷 點此更換照片";position:absolute;top:10px;left:10px;z-index:5;
  background:rgba(0,93,170,.92);color:#fff;font-size:.74rem;font-weight:700;padding:.3rem .6rem;border-radius:.4rem;pointer-events:none;}
body.tse-edit-on [data-epi].tse-img-busy{opacity:.5;filter:grayscale(.3);}
.sc-empty-txt{color:var(--muted);font-style:italic;}
/* 空照片位在就地編輯時顯示為可點的上傳框 */
body.tse-edit-on .split-media > div[data-epi]:empty,
body.tse-edit-on .tl-item > div[data-epi]:empty{min-height:120px;display:flex;align-items:center;justify-content:center;background:var(--gold-soft);border-radius:var(--radius-sm);}
body.tse-edit-on div[data-epi]:empty::after{content:"➕ 上傳照片";color:var(--blue);font-weight:700;font-size:.85rem;}

/* ---------- 換頁方向性滑入（JS 設定 html class；桌機/手機/預覽一致） ---------- */
body{overflow-x:hidden;}
html.tse-arrive-right #site-main{transform:translateX(100%);will-change:transform;}
html.tse-arrive-left  #site-main{transform:translateX(-100%);will-change:transform;}
html.tse-arrive-go #site-main{transform:translateX(0);transition:transform .36s cubic-bezier(.22,.61,.36,1);}
@media (prefers-reduced-motion: reduce){
  html.tse-arrive-right #site-main,html.tse-arrive-left #site-main,html.tse-arrive-go #site-main{transform:none;transition:none;}
}

/* ---------- 信任職業牆內嵌（trustWallEmbed）：滿版無縫，不跳新分頁 ---------- */
.tw-desc{color:var(--muted);font-size:.95rem;margin:.6rem 0 1.2rem;line-height:1.8;}
.tw-embed-wrap{position:relative;background:#fff;}
.tw-loading-txt{position:absolute;left:50%;top:2.5rem;transform:translateX(-50%);font-size:.85rem;color:var(--muted);
  transition:opacity .3s ease;pointer-events:none;}
.tw-loading-txt::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--gold);margin-right:.5rem;animation:twPulse 1.1s ease-in-out infinite;vertical-align:middle;}
.tw-embed-wrap.tw-loaded .tw-loading-txt{opacity:0;}
@keyframes twPulse{0%,100%{opacity:.3;transform:scale(.85);}50%{opacity:1;transform:scale(1);}}
.tw-embed{display:block;position:relative;width:100%;height:calc(100vh - 72px);border:none;background:transparent;}
/* 信任牆回報高度後 iframe 以內聯 height 撐到內容高度（沒有內部捲軸）；職人彈窗開著時縮回一個畫面高 */
.tw-embed.tw-auto{overflow:hidden;}
.tw-embed.tw-modal{height:calc(100vh - 72px);}

/* ---------- 輔導主委（advisors）：簡化版 person 卡，通常只有 1~3 位 ---------- */
.advisors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem;max-width:760px;margin:0 auto;}
.block[data-w="half"] .advisors-grid,.block[data-w="third"] .advisors-grid{grid-template-columns:1fr;}
.advisor-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shell);
  padding:1.1rem 1rem 1.3rem;text-align:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.advisor-card:hover{transform:translateY(-4px);box-shadow:var(--shell-lg);}
.advisor-card .adv-avatar{width:104px;height:104px;border-radius:50%;object-fit:cover;object-position:center;
  margin:0 auto .8rem;background:var(--gold-soft);display:block;}
.advisor-card .adv-name{font-size:1.05rem;font-weight:900;}
.advisor-card .adv-role{font-size:.78rem;font-weight:700;color:var(--gold);letter-spacing:.04em;margin-top:.2rem;}
.advisor-card .adv-text{font-size:.85rem;color:var(--muted);line-height:1.7;margin-top:.6rem;}
@media (max-width:700px){ .advisors-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:420px){ .advisors-grid{grid-template-columns:1fr;} }

/* ---------- 社員名單（memberRoster）：純名字清單，已連結信任職業牆的可點 ---------- */
.member-roster{display:flex;flex-wrap:wrap;gap:.6rem;}
.member-pill{display:inline-flex;align-items:center;padding:.45rem 1rem;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:.88rem;color:var(--text);
  box-shadow:var(--shell);}
/* 有職業時：名字在上、職業小字在下，改成圓角卡片（手機一列兩張，字多會換行不撐破） */
.member-pill.has-job{flex-direction:column;align-items:flex-start;gap:.1rem;border-radius:16px;padding:.55rem 1rem;max-width:100%;}
.member-pill .mp-nick{font-size:.78rem;font-weight:400;color:var(--muted);margin-left:.15rem;}
a.member-pill.linked .mp-nick{color:var(--muted);}
a.member-pill.linked:hover .mp-nick{color:#fff;}
.member-pill .mp-job{font-size:.74rem;font-weight:400;color:var(--muted);line-height:1.35;overflow-wrap:anywhere;}
a.member-pill.linked .mp-job{color:var(--muted);}
a.member-pill.linked:hover .mp-job{color:#fff;}
a.member-pill.linked{color:var(--blue);font-weight:700;border-color:var(--blue);
  text-decoration:none;transition:background .2s,color .2s;cursor:pointer;}
a.member-pill.linked:hover{background:var(--blue);color:#fff;}

/* ---------- 公益活動行事曆（eventsCalendar） ---------- */
.events-cal{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shell);padding:1.3rem 1.3rem 1.5rem;}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem;}
.cal-month{font-size:1.1rem;font-weight:900;color:var(--text);}
.cal-nav{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--blue);font-size:1.1rem;line-height:1;cursor:pointer;transition:background .2s,color .2s;}
.cal-nav:hover{background:var(--blue);color:#fff;}
.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  font-size:.76rem;color:var(--muted);font-weight:700;margin-bottom:.3rem;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;}
.cal-cell{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:50%;font-size:.88rem;color:var(--text);cursor:default;}
.cal-cell.has-evt{cursor:pointer;color:var(--blue);font-weight:700;background:var(--gold-soft);}
.cal-cell.has-evt:hover{background:var(--gold);color:#fff;}
.cal-cell:disabled{color:var(--line);}
.cal-cell.is-today{box-shadow:inset 0 0 0 2px var(--blue);}
.cal-cell.is-sel{background:var(--blue);color:#fff;}
.cal-dot{position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:currentColor;}
.cal-cell.is-sel .cal-dot{background:#fff;}
/* 一天多筆：顯示筆數的小圓牌，取代單一色點，避免月曆滿格花色 */
.cal-dot-n{position:absolute;bottom:2px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;
  background:var(--blue-deep);color:#fff;font-size:.6rem;font-weight:800;line-height:14px;}
.cal-cell.is-sel .cal-dot-n{background:#fff;color:var(--blue-deep);}
.cal-day-list{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.7rem;}
.cal-day-item{display:flex;gap:.8rem;align-items:center;cursor:pointer;padding:.4rem;
  border-radius:var(--radius-sm);transition:background .2s;}
.cal-day-item:hover{background:var(--gold-soft);}
.cal-thumb{width:64px;height:64px;border-radius:var(--radius-sm);object-fit:cover;
  flex-shrink:0;background:var(--gold-soft);}
.cal-thumb-blank{width:64px;height:64px;border-radius:var(--radius-sm);flex-shrink:0;background:var(--gold-soft);}
.cal-day-item-cat{display:inline-block;font-size:.68rem;font-weight:700;color:var(--blue);margin-bottom:.15rem;}
.cal-day-item-body h4{font-size:.95rem;margin-bottom:.2rem;}
.cal-day-item-body p{font-size:.82rem;color:var(--muted);line-height:1.5;}
@media (max-width:480px){
  .events-cal{padding:1rem .8rem 1.2rem;}
  .cal-cell{font-size:.8rem;}
  .cal-thumb,.cal-thumb-blank{width:52px;height:52px;}
}

/* ---------- 活動記事分類篩選（eventsList／eventsCalendar 共用） ---------- */
.cat-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem;}
.cat-filter[hidden]{display:none;}
.cat-chip-btn{border:1.5px solid var(--line);background:#fff;color:var(--blue-ink,var(--text));
  font-family:inherit;font-size:.8rem;font-weight:700;padding:.4rem .9rem;border-radius:99px;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
.cat-chip-btn:hover{border-color:var(--blue);}
.cat-chip-btn.is-sel{background:var(--blue);border-color:var(--blue);color:#fff;}
@media (max-width:640px){
  .cat-filter{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2rem;
    scrollbar-width:none;}
  .cat-filter::-webkit-scrollbar{display:none;}
  .cat-chip-btn{flex-shrink:0;}
}

/* ---------- 小南聊天小工具（ai-chat.js；原 ai-assets/avatar.css 併入這裡，同一份樣式表） ---------- */
.xn-avatar{
  --xn-navy:#1b2a4a; --xn-ivory:#f4f1ea; --xn-gold:#c59b27; --xn-brick:#d95d39;
  display:block;box-sizing:border-box;border:1px solid var(--xn-ivory);border-radius:50%;
  overflow:hidden;object-fit:cover;object-position:50% 50%;background:var(--xn-ivory);
}
.xn-avatar--header{width:48px;height:48px;flex-shrink:0;}
.xn-avatar--message{width:40px;height:40px;flex-shrink:0;}

.xn-launcher{
  position:fixed;right:20px;bottom:20px;z-index:950;
  min-width:56px;height:56px;padding:0 1.15rem 0 1rem;gap:.45rem;border-radius:999px;border:none;cursor:pointer;
  background:#1b2a4a;color:#fff;display:flex;align-items:center;justify-content:center;
  font:inherit;font-weight:700;font-size:.95rem;letter-spacing:.02em;
  box-shadow:0 10px 26px -8px rgba(27,42,74,.55);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.xn-launcher:hover,.xn-launcher:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px -8px rgba(27,42,74,.65);}
.xn-launcher svg{width:26px;height:26px;flex-shrink:0;}
.xn-launcher-label{white-space:nowrap;}
.xn-nudge{position:fixed;right:20px;bottom:88px;z-index:950;max-width:min(260px,calc(100vw - 40px));
  display:flex;align-items:stretch;background:#fff;color:#1b2a4a;border:1px solid #d5dbe8;border-radius:.9rem;
  box-shadow:0 10px 26px -10px rgba(27,42,74,.45);animation:xn-nudge-in .35s var(--ease);}
.xn-nudge[hidden]{display:none;}
.xn-nudge::after{content:"";position:absolute;right:26px;bottom:-7px;width:12px;height:12px;background:#fff;
  border-right:1px solid #d5dbe8;border-bottom:1px solid #d5dbe8;transform:rotate(45deg);}
.xn-nudge-text{border:none;background:none;color:inherit;font:inherit;font-weight:700;font-size:.9rem;
  padding:.7rem .4rem .7rem .9rem;cursor:pointer;text-align:left;min-height:44px;}
.xn-nudge-x{border:none;background:none;color:#5a6785;font-size:1.25rem;line-height:1;padding:0 .75rem;cursor:pointer;min-width:44px;min-height:44px;}
.xn-nudge-x:hover,.xn-nudge-x:focus-visible{color:#1b2a4a;}
body.xn-open .xn-nudge{display:none;}
@keyframes xn-nudge-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.xn-nudge{animation:none;}}
body.xn-open .xn-launcher{display:none;}

.xn-panel{
  position:fixed;right:20px;bottom:20px;z-index:950;
  width:360px;max-height:70vh;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px -16px rgba(4,32,58,.35);
  display:flex;flex-direction:column;overflow:hidden;
}
.xn-panel[hidden]{display:none;}
.xn-panel.xn-animate-in{animation:xnFadeIn .14s var(--ease);}
@keyframes xnFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.xn-panel.xn-animate-in{animation:none;}}

.xn-head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:#1b2a4a;color:#fff;flex-shrink:0;}
.xn-head-text{flex:1;min-width:0;}
.xn-name{font-size:.95rem;font-weight:800;}
.xn-sub{font-size:.72rem;color:rgba(255,255,255,.72);}
.xn-close{width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.xn-close:hover,.xn-close:focus-visible{background:rgba(255,255,255,.24);}
.xn-close svg{width:16px;height:16px;}

.xn-body{flex:1;min-height:120px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;}
.xn-msg{max-width:88%;border-radius:.9rem;padding:.6rem .8rem;font-size:.92rem;line-height:1.6;}
/* 全站的 p{color:var(--muted)} 會蓋掉泡泡本來想靠繼承拿到的顏色（.xn-msg--user 設的
   白字、.xn-msg--xn 設的深色字），讓使用者泡泡變成「深藍底配灰字」、對比度只有 2.39
   （WCAG AA 正常文字門檻是 4.5）。這裡明講 color:inherit 讓標籤選取器贏不過它。 */
.xn-msg p{margin:0;color:inherit;}
.xn-msg p + p{margin-top:.5rem;}
.xn-msg--xn{align-self:flex-start;background:var(--gold-soft);color:var(--text);border-bottom-left-radius:.3rem;}
.xn-msg--user{align-self:flex-end;background:#1b2a4a;color:#fff;border-bottom-right-radius:.3rem;}
/* 每則訊息旁邊的時間：跟內文同一個泡泡裡，小一號、淡一點，不搶內文的注意力 */
.xn-msg .xn-time{display:block;margin-top:.3rem;font-size:.7rem;opacity:.65;color:inherit;}
.xn-msg--xn .xn-time{text-align:left;}
.xn-msg--user .xn-time{text-align:right;}
.xn-cta{align-self:flex-start;display:inline-block;font-size:.8rem;font-weight:700;color:#1b2a4a;
  border:1.5px solid #1b2a4a;border-radius:99px;padding:.35rem .85rem;text-decoration:none;}
.xn-cta:hover,.xn-cta:focus-visible{background:#1b2a4a;color:#fff;}

.xn-quick{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:0 1rem .7rem;flex-shrink:0;}
/* [hidden] 屬性被同 specificity 的 class display 規則蓋掉的坑（CLAUDE.md 踩過的坑 #9），
   點了大項目或直接打字開始對話後要整個清空，所以這條不能漏。 */
.xn-quick[hidden]{display:none;}
.xn-qbtn{min-height:44px;border:1.5px solid var(--line);background:#fff;border-radius:.6rem;
  font-family:inherit;font-size:.78rem;font-weight:700;color:var(--text);cursor:pointer;
  padding:.4rem .5rem;line-height:1.3;text-align:left;}
.xn-qbtn:hover,.xn-qbtn:focus-visible{border-color:#1b2a4a;color:#1b2a4a;}
.xn-qbtn:disabled{opacity:.45;cursor:default;}

/* 對話中段跳出的快速選項（先不說／消歧的幾個方向／先不留聯絡方式）：跟著話語自然排列，
   不是固定在底部的大項目選單，數量不固定（1～4 個），用 flex-wrap 排版。 */
.xn-inline-opts{align-self:flex-start;max-width:92%;display:flex;flex-wrap:wrap;gap:.4rem;}
.xn-inline-opts .xn-qbtn{min-height:38px;font-size:.78rem;}
/* 手機上對話內按鈕（稱呼/消歧/報名表單這類）至少要有 44px 可點高度、15px 可讀文字，
   不能比一般的六大項目按鈕還小；上面那條無條件的 38px／.78rem 在桌機排版比較擠時
   還可以，但在手機上要蓋過去。同 specificity，一定要放在它後面才會贏。 */
@media (max-width:640px){
  .xn-inline-opts .xn-qbtn{min-height:44px;font-size:15px;}
}

/* 「正在輸入」動畫：讓對話感覺是真人在打字，約 3 秒後泡泡才被換成真正的回覆。 */
.xn-typing{display:flex;align-items:center;gap:.3rem;padding:.75rem .9rem;}
.xn-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;
  animation:xnTypingDot 1.1s ease-in-out infinite;}
.xn-dot:nth-child(2){animation-delay:.15s;}
.xn-dot:nth-child(3){animation-delay:.3s;}
@keyframes xnTypingDot{0%,80%,100%{opacity:.35;transform:translateY(0);}40%{opacity:.9;transform:translateY(-3px);}}
@media (prefers-reduced-motion:reduce){.xn-dot{animation:none;opacity:.7;}}

.xn-disclosure{padding:0 1rem .6rem;font-size:.68rem;color:var(--muted);line-height:1.5;flex-shrink:0;}

.xn-inputrow{display:flex;gap:.5rem;padding:.8rem 1rem;border-top:1px solid var(--line);flex-shrink:0;}
.xn-inputrow input{flex:1;padding:.55rem .7rem;border:1.5px solid var(--line);border-radius:.6rem;
  font-family:inherit;font-size:.9rem;}
.xn-inputrow input:focus{outline:none;border-color:#1b2a4a;}
.xn-inputrow input:disabled{background:#F1F4F7;color:var(--muted);}
.xn-send{border:none;background:#1b2a4a;color:#fff;font-weight:700;font-size:.85rem;
  border-radius:.6rem;padding:0 1rem;cursor:pointer;min-height:44px;}
.xn-send:hover,.xn-send:focus-visible{background:#101c33;}
.xn-send:disabled{background:#9aa6bd;cursor:default;}
.xn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

@media (max-width:640px){
  .xn-launcher{min-width:48px;height:48px;padding:0 1rem 0 .85rem;font-size:.9rem;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));}
  .xn-launcher svg{width:22px;height:22px;}
  .xn-nudge{right:16px;bottom:calc(76px + env(safe-area-inset-bottom,0px));}
  .xn-panel{
    left:0;right:0;bottom:0;top:auto;width:auto;max-height:82dvh;
    border-radius:1rem 1rem 0 0;box-shadow:0 -16px 40px -12px rgba(4,32,58,.4);
  }
  .xn-inputrow{padding-bottom:calc(.8rem + env(safe-area-inset-bottom,0px));}
  /* 手機輸入字級至少 16px，否則 iOS Safari 聚焦時會自動放大整頁 */
  .xn-inputrow input{font-size:16px;}
  .xn-quick{grid-template-columns:1fr 1fr;}
  .xn-qbtn{font-size:15px;line-height:1.45;}
  /* 關閉鈕圖示維持小尺寸，但可點範圍補到 44×44 觸控目標 */
  .xn-close{width:44px;height:44px;}
}

/* ---------- 加入我們頁的常見問題（faqSection；10 個固定 QA，含小南聊天 CTA 的落點） ---------- */
.faq-list-fixed .faq-item summary{scroll-margin-top:84px;}
.faq-list-fixed .faq-cta{display:inline-block;margin-top:.6rem;font-size:.82rem;font-weight:700;
  color:var(--blue);text-decoration:none;}
.faq-list-fixed .faq-cta:hover,.faq-list-fixed .faq-cta:focus-visible{text-decoration:underline;}

/* ---------- 社員專區（memberZone：登入表單／登入後畫面） ---------- */
.mz{max-width:420px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shell);padding:1.6rem 1.5rem 1.8rem;}
.mz-tabs{display:flex;gap:.4rem;margin-bottom:1.1rem;border:1.5px solid var(--line);border-radius:.6rem;padding:.25rem;}
.mz-tab{flex:1;border:none;background:none;border-radius:.4rem;padding:.55rem .5rem;
  font-family:inherit;font-size:.84rem;font-weight:700;color:var(--muted);cursor:pointer;min-height:40px;}
.mz-tab.is-on{background:var(--blue);color:#fff;}
.mz-login label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin:.8rem 0 .3rem;}
.mz-login input{width:100%;padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:.55rem;
  font-family:inherit;font-size:.92rem;background:#fff;color:var(--text);}
.mz-login input:focus{outline:none;border-color:var(--blue);}
.mz-pwrow{display:flex;gap:.5rem;align-items:center;}
.mz-pwrow input{flex:1;}
.mz-btn{width:100%;margin-top:1rem;min-height:46px;}
.mz-link{border:none;background:none;color:var(--blue);font-family:inherit;font-size:.82rem;
  font-weight:700;cursor:pointer;padding:.3rem 0;text-decoration:underline;}
.mz-to{font-size:.86rem;color:var(--text);line-height:1.6;}
.mz-msg{margin-top:.7rem;font-size:.82rem;color:var(--blue);line-height:1.5;}
.mz-msg-err{color:#C62828;}
.mz-apply{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted);text-align:center;}
.mz-apply a{color:var(--blue);font-weight:700;}
.mz-dash .mz-welcome{font-size:1.05rem;font-weight:700;margin-bottom:1.1rem;}
.mz-card{background:var(--bg,#F7F5F0);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:1.2rem 1.3rem;margin-bottom:1.3rem;}
.mz-card h3{font-size:.95rem;color:var(--blue);margin-bottom:.6rem;}
.mz-card-name{font-size:1.05rem;font-weight:800;margin-bottom:.3rem;}
.mz-card-cat{display:inline-block;margin-left:.5rem;font-size:.72rem;font-weight:700;
  color:var(--blue-deep);background:var(--gold-soft);padding:.15rem .55rem;border-radius:.4rem;vertical-align:middle;}
.mz-card-note{font-size:.78rem;color:var(--muted);line-height:1.6;margin-bottom:.9rem;}
.mz-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem;}
.mz-links a{flex:1 1 auto;text-align:center;padding:.6rem .7rem;border:1.5px solid var(--line);
  border-radius:.55rem;font-size:.82rem;font-weight:700;color:var(--text);text-decoration:none;min-height:40px;
  display:flex;align-items:center;justify-content:center;}
.mz-links a:hover{border-color:var(--blue);color:var(--blue);}
.mz-logout{width:100%;text-align:center;color:var(--muted);text-decoration:none;}
.mz-logout:hover{color:#C62828;}
@media (max-width:640px){
  /* 手機輸入字級至少 16px，否則 iOS Safari 聚焦時會自動放大整頁 */
  .mz-login input{font-size:16px;}
}

/* ---------- 報名表單（registrationForm：join.html） ---------- */
.regform{max-width:480px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shell);padding:1.6rem 1.5rem 1.8rem;}
.rf-row{margin-top:.9rem;}
.rf-row:first-child{margin-top:0;}
.rf-form label{display:block;font-size:.78rem;font-weight:700;color:var(--muted);margin-bottom:.35rem;}
.rf-form input,.rf-form select,.rf-form textarea{width:100%;padding:.6rem .7rem;border:1.5px solid var(--line);
  border-radius:.55rem;font-family:inherit;font-size:.92rem;background:#fff;color:var(--text);}
.rf-form textarea{min-height:5.5em;resize:vertical;line-height:1.6;}
.rf-form input:focus,.rf-form select:focus,.rf-form textarea:focus{outline:none;border-color:var(--blue);}
.rf-submit{width:100%;margin-top:1.3rem;min-height:46px;}
.rf-msg{margin-top:.7rem;font-size:.82rem;color:var(--blue);line-height:1.5;}
.rf-msg-err{color:#C62828;}

/* 「想參加的活動」選擇器：帶入的活動卡（縮圖＋✕）、打字提示、從清單打勾 */
.rf-act{position:relative;}
.rf-act-card{display:flex;align-items:center;gap:.8rem;padding:.7rem .75rem;border:1.5px solid var(--blue);border-radius:.75rem;background:#F3F8FC;}
.rf-act-loading{color:var(--muted);font-size:.86rem;border-style:dashed;justify-content:center;min-height:64px;}
.rf-act-thumb{flex:0 0 72px;width:72px;height:72px;border-radius:.55rem;overflow:hidden;background:#DCE8EE;display:block;}
.rf-act-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.rf-act-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;text-align:left;}
.rf-act-info b{font-size:.92rem;line-height:1.4;color:var(--text);overflow-wrap:anywhere;}
.rf-act-info small{font-size:.76rem;color:var(--muted);line-height:1.45;}
.rf-act-badge{align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.04em;color:var(--blue);background:#fff;border:1px solid rgba(0,93,170,.25);border-radius:99px;padding:.05rem .5rem;}
.rf-form .rf-act-x{flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--muted);font-size:.95rem;line-height:1;cursor:pointer;}
.rf-form .rf-act-x:hover,.rf-form .rf-act-x:focus-visible{border-color:#C62828;color:#C62828;outline:none;}
.rf-act-hint{margin:.5rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.55;}
.rf-act-warn{color:#B26A00;font-weight:700;}
.rf-act-pick{position:relative;}
.rf-act-list{list-style:none;margin:.3rem 0 0;padding:.25rem;position:absolute;left:0;right:0;z-index:20;background:#fff;border:1.5px solid var(--line);border-radius:.7rem;box-shadow:var(--shell-lg);max-height:320px;overflow-y:auto;}
.rf-act-list[hidden]{display:none;}
.rf-act-li{display:flex;align-items:center;gap:.65rem;padding:.5rem .55rem;border-radius:.5rem;cursor:pointer;}
.rf-act-li:hover,.rf-act-li.is-active{background:#EAF3FA;}
.rf-act-li .rf-act-thumb{flex-basis:44px;width:44px;height:44px;}
.rf-act-head{padding:.35rem .55rem .2rem;font-size:.7rem;font-weight:800;color:var(--blue);letter-spacing:.06em;}
.rf-act-none{padding:.6rem .6rem;font-size:.8rem;color:var(--muted);line-height:1.55;margin:0;}
.rf-form .rf-act-browse-btn{display:block;width:auto;margin:.55rem 0 0;padding:.35rem 0;border:0;background:none;color:var(--blue);font-size:.84rem;font-weight:800;cursor:pointer;text-align:left;}
.rf-act-browse{margin-top:.45rem;max-height:340px;overflow-y:auto;border:1.5px solid var(--line);border-radius:.7rem;padding:.3rem;background:#fff;}
.rf-act-browse[hidden]{display:none;}
.rf-form label.rf-act-opt{display:flex;align-items:center;gap:.65rem;margin:0;padding:.5rem .55rem;border-radius:.5rem;cursor:pointer;font-size:inherit;font-weight:400;color:inherit;}
.rf-act-opt:hover{background:#EAF3FA;}
.rf-act-opt .rf-act-thumb{flex-basis:52px;width:52px;height:52px;}
.rf-form .rf-act-opt input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;padding:0;margin:0;}
.rf-tick{flex:0 0 22px;width:22px;height:22px;border:2px solid var(--line);border-radius:6px;background:#fff;position:relative;}
.rf-act-opt input:checked + .rf-tick{background:var(--blue);border-color:var(--blue);}
.rf-act-opt input:checked + .rf-tick::after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.rf-act-opt input:focus-visible + .rf-tick{outline:2px solid var(--blue);outline-offset:2px;}
.rf-act-cat{margin-top:.7rem;}

/* 送出成功後的回條卡片：報名編號/分類/場次/時間/狀態，不是一句話就結束 */
.rf-done-title{font-size:1.05rem;font-weight:900;color:var(--text);margin-bottom:1rem;}
.rf-done-meta{display:grid;gap:.7rem;margin:0;}
.rf-done-meta div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding-top:.55rem;}
.rf-done-meta div:first-child{border-top:none;padding-top:0;}
.rf-done-meta dt{font-size:.78rem;color:var(--muted);font-weight:700;flex-shrink:0;}
.rf-done-meta dd{margin:0;font-size:.88rem;text-align:right;word-break:break-all;}
.rf-done-actions{margin-top:1.3rem;}
.rf-done-actions .btn{width:100%;justify-content:center;}
.rf-done-hint{margin-top:.9rem;font-size:.78rem;color:var(--muted);line-height:1.6;}
/* 手機輸入字級至少 16px，否則 iOS Safari 聚焦時會自動放大整頁。這條一定要放在上面
   .rf-form input{font-size:.92rem} 之後——同 specificity 時後面的規則贏，之前這條
   規則放在檔案更早的共用 @media 區塊裡，被後面的 .92rem 蓋掉，手機上完全沒生效過。 */
@media (max-width:640px){
  .rf-form input,.rf-form select,.rf-form textarea{font-size:16px;}
}

/* ---------- 活動記事前台（最新消息／年度行事曆／活動詳情與報名） ---------- */
.ecat{display:inline-block;padding:.12rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;background:#EEF1F4;color:#5E6470;}
.ecat-0{background:#E3F0FB;color:#0B5CA8;}.ecat-1{background:#FDEBD3;color:#9A5A00;}.ecat-2{background:#E4F5EA;color:#18794E;}
.ecat-3{background:#F6E6F7;color:#8A2F93;}.ecat-4{background:#FDE7E7;color:#B42318;}.ecat-5{background:#E8EAFD;color:#3A44B5;}
.ecat-6{background:#EAF6F3;color:#0F766E;}.ecat-7{background:#F1ECE4;color:#6B5A3E;}
.ev-hint{font-size:.78rem;color:var(--muted);background:var(--gold-soft);border-radius:.6rem;padding:.55rem .8rem;margin:0 0 .9rem;line-height:1.7;}
.ev-month{margin-bottom:1.1rem;}
.ev-month-h{display:flex;align-items:baseline;gap:.5rem;font-size:.92rem;font-weight:900;color:var(--blue-deep);margin:.2rem 0 .5rem;}
.ev-month-h em{font-style:normal;font-size:.68rem;font-weight:700;background:var(--blue);color:#fff;border-radius:.35rem;padding:.08rem .45rem;}
.ev-month-h small{font-weight:500;color:var(--muted);font-size:.74rem;}
.ev-row{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:.5rem;cursor:pointer;transition:transform .2s,box-shadow .2s;}
.ev-row:hover,.ev-row:focus-visible{transform:translateY(-2px);box-shadow:var(--shell-lg);}
.ev-row.is-past{opacity:.72;}
.ev-date{flex:none;width:54px;text-align:center;line-height:1.15;}
.ev-date b{display:block;font-size:1.35rem;color:var(--blue);font-weight:900;}
.ev-date span{font-size:.64rem;color:var(--muted);white-space:nowrap;}
.ev-main{flex:1;min-width:0;}
.ev-main h4{font-size:.95rem;line-height:1.45;overflow-wrap:anywhere;margin:0 0 .2rem;}
.ev-sub{display:flex;flex-wrap:wrap;gap:.25rem .6rem;font-size:.76rem;color:var(--muted);align-items:center;}
.ev-go{flex:none;font-size:.78rem;font-weight:800;color:var(--blue);white-space:nowrap;}
.ev-tag-past{background:#EEF1F4;color:#5E6470;border-radius:.35rem;padding:.05rem .4rem;font-size:.68rem;font-weight:700;}
.ev-fold{margin:.1rem 0 .6rem;}
.ev-fold>summary{cursor:pointer;font-size:.8rem;font-weight:700;color:var(--blue);padding:.45rem .2rem;list-style:none;}
.ev-fold>summary::-webkit-details-marker{display:none;}
.ev-fold>summary::before{content:'▸ ';}
.ev-fold[open]>summary::before{content:'▾ ';}
.ev-more-link{margin-top:1.2rem;}
/* 最新消息／行事曆列表：留白與層次（卡片內有足夠內距、月份標題有分隔線、日期放進淡色方塊） */
.ev-date{width:58px;padding:.5rem 0;background:#F1F5F9;border-radius:10px;}
.ev-row{padding:.8rem 1rem;gap:1rem;margin-bottom:.65rem;}
.ev-month{margin-bottom:1.6rem;}
.ev-month-h{margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);}
.panel [data-fill="evFeed"]{padding:1.1rem 1.5rem 1.5rem;}
.panel .ev-hint{margin:0 0 1.1rem;}
.panel .ev-month:last-child{margin-bottom:0;}
.panel .ev-row{padding:.75rem .9rem;gap:.9rem;}
.panel .ev-main h4{font-size:.9rem;margin-bottom:.3rem;}
.ev-fold>summary{padding:.55rem .25rem;}
.evy-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem;}
.evy-year{font-size:1.25rem;margin:0 .3rem;text-align:center;line-height:1.3;}
.evy-year small{display:block;font-size:.74rem;font-weight:600;color:var(--muted);letter-spacing:.02em;}
.evy-today{margin-left:auto;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:.35rem .9rem;font-family:inherit;font-size:.8rem;font-weight:700;color:var(--blue);cursor:pointer;}
.evy-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin:.9rem 0 1.4rem;}
.evy-tile{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:.55rem .3rem;text-align:center;font-family:inherit;cursor:pointer;color:var(--text);}
.evy-tile b{display:block;font-size:.85rem;}
.evy-tile span{font-size:.72rem;color:var(--muted);}
.evy-tile.has{border-color:var(--blue);}
.evy-tile.has span{color:var(--blue);font-weight:700;}
.evy-tile.is-cur{background:var(--gold-soft);}
.evy-tile:disabled{opacity:.45;cursor:default;}
.ev-detail{max-width:760px;margin:0 auto;}
.evd-page{padding-top:2rem;padding-bottom:3rem;}
.evd-top{display:flex;gap:.5rem;margin-bottom:.5rem;}
.evd-title{font-size:1.45rem;line-height:1.4;margin:.2rem 0 .8rem;}
.evd-facts{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.35rem;font-size:.92rem;}
.evd-facts li span{display:inline-block;min-width:4.5em;color:var(--muted);font-size:.8rem;font-weight:700;margin-right:.5rem;}
.evd-gallery{margin:0 0 1rem;}
.evd-main{display:block;width:100%;max-height:520px;object-fit:contain;background:#F1F4F7;border-radius:12px;}
.evd-thumbs{display:flex;gap:.4rem;overflow-x:auto;margin-top:.5rem;}
.evd-th{flex:none;width:72px;height:54px;border:2px solid transparent;border-radius:8px;overflow:hidden;padding:0;background:none;cursor:pointer;}
.evd-th.on{border-color:var(--gold);}
.evd-th img{width:100%;height:100%;object-fit:cover;display:block;}
.evd-dl{display:inline-block;margin-top:.5rem;font-size:.78rem;font-weight:700;color:var(--blue);}
.evc{position:relative;aspect-ratio:4/3;max-height:72vh;width:100%;background:#0f1720;border-radius:14px;overflow:hidden;}
.evc:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}
.evc-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;}
.evc-track::-webkit-scrollbar{display:none;}
.evc-slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;margin:0;display:flex;align-items:center;justify-content:center;}
.evc-slide img{width:100%;height:100%;object-fit:contain;display:block;}
.evc-bad{background:#1b2735;}
.evc-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(15,23,32,.55);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.evc-nav:hover,.evc-nav:focus-visible{background:rgba(15,23,32,.82);}
.evc-prev{left:.6rem;}.evc-next{right:.6rem;}
@media (hover:none){.evc-nav{display:none;}}
.evc-hint{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);background:rgba(15,23,32,.5);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;padding:.28rem .85rem;border-radius:999px;pointer-events:none;white-space:nowrap;transition:opacity .6s,visibility .6s;}
.evc-hint span{display:inline-block;margin:0 .45rem;animation:evc-nudge 1.1s ease-in-out infinite alternate;}
.evc-hint span:first-child{animation-name:evc-nudge-l;}
.evc-hint.gone{opacity:0;visibility:hidden;}
@keyframes evc-nudge{to{transform:translateX(4px);}}
@keyframes evc-nudge-l{to{transform:translateX(-4px);}}
@media (prefers-reduced-motion:reduce){.evc-hint span{animation:none;}.evc-track{scroll-behavior:auto;}}
.evc-bar{display:flex;align-items:center;gap:.8rem;margin-top:.5rem;font-size:.82rem;min-height:2rem;}
.evc-bar .evd-dl{margin:0 0 0 auto;}
.evc-count{color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;}
.evc-play{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:999px;font-size:.76rem;font-weight:700;padding:.2rem .75rem;cursor:pointer;min-height:32px;}
.evd-poster{margin:1.1rem 0;}
.evd-poster figcaption{font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:.4rem;}
.evd-poster-btn{display:block;width:100%;border:0;padding:0;background:#F1F4F7;border-radius:12px;cursor:zoom-in;max-width:340px;overflow:hidden;}
.evd-poster-btn img{display:block;width:100%;max-height:460px;object-fit:contain;}
.evd-poster-main .evd-poster-btn{max-width:560px;}
.evd-poster .evd-dl{margin-top:.4rem;}
.evd-nophoto{color:var(--muted);font-size:.9rem;margin:0 0 1rem;}
.evd-desc p{line-height:1.9;margin-bottom:.7rem;}
.evd-reg{margin-top:1.4rem;padding:1.1rem 1.2rem;border-radius:14px;background:var(--gold-soft);border:1px solid rgba(247,168,27,.45);}
.evd-reg-off{background:#F1F4F7;border-color:var(--line);}
.evd-reg-off p{margin:.3rem 0 0;font-size:.88rem;}
.evd-reg-off .evd-reg-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;}
.evd-reg-off .evd-reg-links .btn{font-size:.9rem;padding:.55rem 1rem;}
.evd-reg-h{margin:0 0 .3rem;font-size:1.05rem;}
.evd-reg-sub{margin:0 0 .8rem;font-size:.85rem;}
.evr-form{display:grid;gap:.7rem;}
.evr-form label{display:grid;gap:.25rem;font-size:.82rem;font-weight:700;color:var(--text);}
.evr-form input,.evr-form textarea{width:100%;padding:.6rem .75rem;font-size:16px;border:1.5px solid var(--line);border-radius:.55rem;font-family:inherit;background:#fff;color:var(--text);}
.evr-err{color:#C62828;font-size:.85rem;margin:0;}
.evd-own{margin-top:1rem;font-size:.82rem;}
@media (max-width:700px){
  .evy-tiles{grid-template-columns:repeat(4,1fr);}
  .ev-row{flex-wrap:wrap;}
  .ev-go{margin-left:calc(58px + 1rem);}
  .panel [data-fill="evFeed"]{padding:1rem 1.1rem 1.25rem;}
}

.ev-sub .ev-fee{color:var(--blue);font-weight:700;}

/* 例會：相關內容 ⇄ 課表 互連＋預約 */
.mtg-guide{font-size:.84rem;color:var(--muted);background:var(--gold-soft);border-radius:.7rem;padding:.65rem .95rem;margin:0 0 1.2rem;line-height:1.75;}
.card-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem;align-items:center;}
.card-actions .act-primary{background:var(--blue);color:#fff;font-weight:800;font-size:.84rem;padding:.55rem 1rem;border-radius:999px;text-decoration:none;transition:background .2s,transform .2s;}
.card-actions .act-primary:hover{background:var(--blue-deep);transform:translateY(-1px);}
.card-actions .act-ghost{font-weight:700;font-size:.82rem;color:var(--blue);padding:.45rem .2rem;}
.card-actions .act-ghost:hover{text-decoration:underline;}
.am-actions{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);}
.mtg .body .mtg-detail{display:inline-block;margin:.5rem 1rem 0 0;padding:0;background:none;border:0;font:inherit;font-size:.82rem;font-weight:700;color:var(--blue);cursor:pointer;}
.mtg .body .mtg-detail:hover{text-decoration:underline;}
.mtg .body a.mtg-detail{text-decoration:none;}
.mtg .body a.mtg-detail:hover{text-decoration:underline;}
@keyframes mtgFlash{0%,60%{box-shadow:0 0 0 3px var(--gold),var(--shell-lg);}100%{box-shadow:var(--shell);}}
.mtg.mtg-flash{animation:mtgFlash 1.8s ease-out 1;}

/* ---------- 活動相簿（eventsGallery）與燈箱 ---------- */
.egal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.85rem;}
.egal-tile{position:relative;display:block;padding:0;border:0;background:var(--gold-soft);border-radius:var(--radius-sm,12px);overflow:hidden;cursor:zoom-in;box-shadow:var(--shell);transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.egal-tile:hover,.egal-tile:focus-visible{transform:translateY(-3px);box-shadow:var(--shell-lg);}
.egal-grid .egal-tile{aspect-ratio:1/1;}
.egal-grid .egal-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.egal-masonry{column-count:3;column-gap:.9rem;}
.egal-masonry .egal-tile{width:100%;margin:0 0 .9rem;break-inside:avoid;}
.egal-masonry .egal-tile img{width:100%;height:auto;display:block;}
.egal-cap{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .65rem;text-align:left;color:#fff;
  background:linear-gradient(180deg,rgba(4,32,58,0) 0%,rgba(4,32,58,.72) 100%);opacity:0;transition:opacity .25s;}
.egal-tile:hover .egal-cap,.egal-tile:focus-visible .egal-cap{opacity:1;}
.egal-cap b{display:block;font-size:.8rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.egal-cap small{font-size:.68rem;opacity:.85;}
.egal-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .7rem;}
.egal-count{font-size:.8rem;color:var(--muted);margin:.2rem 0 1rem;}
.egal-more{text-align:center;margin-top:1.2rem;}
@media (hover:none){.egal-cap{opacity:1;}}
@media (max-width:900px){.egal-grid{grid-template-columns:repeat(3,1fr);}.egal-masonry{column-count:2;}}
@media (max-width:560px){.egal-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;}.egal-masonry{column-count:2;column-gap:.6rem;}.egal-masonry .egal-tile{margin-bottom:.6rem;}}
.tse-lb{position:fixed;inset:0;z-index:1300;display:flex;align-items:center;justify-content:center;background:rgba(4,12,24,.92);padding:3.2rem 4rem 1rem;}
.tse-lb[hidden]{display:none;}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:.8rem;}
.lb-img{max-width:100%;max-height:calc(100vh - 11rem);object-fit:contain;border-radius:6px;background:#0b1b2e;}
.lb-cap{display:flex;flex-direction:column;align-items:center;gap:.2rem;color:#fff;text-align:center;}
.lb-cap b{font-size:1rem;}
.lb-d{font-size:.8rem;opacity:.8;}
.lb-links{display:flex;gap:1.2rem;margin-top:.3rem;}
.lb-links a{color:#fff;font-size:.84rem;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.lb-links a[hidden]{display:none;}
.lb-x,.lb-nav{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.28);}
.lb-x[hidden],.lb-nav[hidden]{display:none;}
.lb-x{top:.9rem;right:1rem;width:44px;height:44px;font-size:1.7rem;}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:2rem;}
.lb-prev{left:.9rem;}.lb-next{right:.9rem;}
@media (max-width:640px){.tse-lb{padding:3.2rem .6rem 1rem;}.lb-nav{top:auto;bottom:.8rem;transform:none;width:44px;height:44px;}.lb-prev{left:.8rem;}.lb-next{right:.8rem;}.lb-img{max-height:calc(100vh - 13rem);}}

/* =========================================================
   UI/UX Refresh · Service-first 2026
   視覺原則：
   1. 首屏只用一張現場照片，旁邊以扁平圖解說明服務路徑。
   2. 每一頁先給一句可掃讀的結論，再用卡片／行程／名單承接細節。
   3. 影像固定保留主體與 caption，照片成為證據，不是裝飾堆疊。
   ========================================================= */
:root{
  --bg:#F4F2ED;
  --paper:#FBFAF7;
  --card:#FFFFFF;
  --text:#17222C;
  --muted:#65727D;
  --blue:#0B5E91;
  --blue-deep:#063C62;
  --blue-ink:#102A3D;
  --gold:#F2A43A;
  --gold-soft:#FEEDCF;
  --line:rgba(16,42,61,.13);
  --radius:20px;
  --radius-sm:13px;
  --shell:0 1px 1px rgba(16,42,61,.04),0 14px 32px -18px rgba(16,42,61,.22);
  --shell-lg:0 8px 18px rgba(16,42,61,.08),0 30px 70px -28px rgba(16,42,61,.30);
}
body{
  background:
    radial-gradient(circle at 12% -4%,rgba(242,164,58,.15),transparent 26rem),
    radial-gradient(circle at 96% 18%,rgba(78,151,206,.11),transparent 24rem),
    var(--bg);
  color:var(--text);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:radial-gradient(rgba(16,42,61,.12) .6px,transparent .6px);
  background-size:13px 13px;
  mix-blend-mode:multiply;
  z-index:-1;
}
.wrap{max-width:1320px;padding-left:clamp(1.15rem,4vw,3rem);padding-right:clamp(1.15rem,4vw,3rem);}
header{background:rgba(251,250,247,.92);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(16,42,61,.12);}
nav{min-height:76px;padding:.65rem 0;}
.brand{gap:.75rem;}
.brand .mark{height:50px;}
.brand .titles b{font-size:1rem;letter-spacing:.01em;}
.brand .titles span{font-size:.67rem;letter-spacing:.08em;text-transform:uppercase;}
.nav-links{gap:1.25rem;font-size:.88rem;}
.nav-links a{min-height:44px;display:inline-flex;align-items:center;}
.nav-links a.active::after{height:3px;bottom:-1px;border-radius:99px;background:var(--gold);}
.nav-actions .btn{min-height:44px;padding:.65rem 1.15rem;border-radius:999px;}
.btn{min-height:46px;border-radius:999px;padding:.72rem 1.4rem;letter-spacing:.01em;}
.btn-primary{background:var(--blue-deep);box-shadow:0 12px 26px -14px rgba(6,60,98,.8);}
.btn-primary:hover{background:#075078;}
.btn-gold{background:var(--gold);color:#392400;}
.btn-ghost{background:rgba(255,255,255,.76);border-color:rgba(16,42,61,.2);}
.blocks{max-width:1320px;gap:clamp(1.2rem,2.4vw,2.4rem);padding:0 clamp(1.15rem,4vw,3rem) 4.5rem;}
.block-pad{padding-top:clamp(2.8rem,6vw,5.2rem);}
.sec-head{margin-bottom:1.55rem;max-width:760px;}
.sec-head h2{font-size:clamp(1.55rem,3.2vw,2.35rem);letter-spacing:-.015em;line-height:1.25;}
.sec-head .kicker{margin-bottom:.15rem;}
.kicker{font-size:.68rem;letter-spacing:.16em;color:var(--blue);font-weight:800;}
.kicker::before{width:28px;height:5px;border-radius:99px;}
.sec-head .see-all{margin-bottom:.2rem;}
p{font-size:1rem;line-height:1.9;}

/* 首頁服務優先 Hero */
.hero-service-first{
  position:relative;
  height:auto;
  min-height:clamp(650px,76vh,820px);
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    linear-gradient(120deg,rgba(251,250,247,.98) 0%,rgba(251,250,247,.92) 52%,rgba(232,242,247,.94) 100%);
  border-bottom:1px solid rgba(16,42,61,.12);
}
.hero-service-first::before{
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  right:-190px;
  top:-250px;
  border-radius:50%;
  background:rgba(78,151,206,.12);
}
.hero-service-first::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:7px;
  background:var(--tri);
}
.hero-service-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(380px,.98fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
  min-height:clamp(600px,72vh,760px);
  padding:clamp(3rem,7vw,6rem) 0;
}
.hero-service-first .hero-content{position:relative;height:auto;max-width:690px;gap:1.05rem;z-index:2;}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  color:var(--blue);
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.hero-eyebrow::before{content:"";width:32px;height:5px;border-radius:99px;background:var(--tri);transform:skewX(-18deg);}
.hero-service-first h1{
  color:var(--blue-ink);
  text-shadow:none;
  font-size:clamp(2.3rem,4.6vw,3.9rem);
  line-height:1.2;
  letter-spacing:-.03em;
  max-width:9em;   /* 以字寬 em 計（中文一字＝1em），讓「用專業建立信任」七個字不會被折成兩行 */
}
.hero-service-first p{color:var(--muted);font-size:clamp(1rem,1.7vw,1.17rem);max-width:42ch;}
.hero-service-first .cta-row{margin-top:.25rem;}
.hero-service-first .hero-visual{position:relative;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:1.25rem;}
.hero-photo-frame{
  /* 白色相片卡：不傾斜、不疊斜背板；照片與說明文字都有內距，不貼邊 */
  position:relative;
  width:100%;
  margin:0;
  padding:.7rem .7rem 0;
  z-index:2;
  background:#fff;
  border:1px solid rgba(16,42,61,.1);
  border-radius:20px;
  box-shadow:var(--shell-lg);
}
.hero-photo-frame img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:14px;
  background:#DCE8EE;
  display:block;
}
.hero-photo-frame figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.85rem 1rem .95rem;
  color:var(--blue-ink);
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.02em;
}
.hero-photo-frame figcaption span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:var(--blue);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero-photo-frame figcaption span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);}
.hero-path-card{
  /* 路徑圖＋「18–35 歲台中跨界青年社群」改成照片下方的橫條，不再疊在照片上擋住畫面 */
  position:relative;
  align-self:flex-end;
  display:grid;
  grid-template-columns:clamp(120px,36%,190px) minmax(0,1fr);
  column-gap:1.3rem;
  align-items:center;
  width:100%;
  margin:0;
  padding:.9rem 1.4rem .9rem .9rem;
  border:1px solid rgba(16,42,61,.11);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shell-lg);
  backdrop-filter:blur(10px);
  z-index:3;
}
.hero-path-card img{width:100%;height:auto;display:block;}
.hero-path-card figcaption{display:flex;flex-direction:column;gap:.55rem;padding:0;}
.hero-path-card figcaption b{font-family:var(--serif);color:var(--blue-ink);font-size:1.25rem;line-height:1.35;}
.hero-path-card figcaption span{font-size:.98rem;color:var(--blue);font-weight:800;line-height:1.6;letter-spacing:.04em;word-spacing:.15em;}
.hero-bottom-rule{display:none;}
.hero-context{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-top:1.5rem;max-width:none;}
@media (min-width:821px){.hero-service-first .hero-context{margin-right:-2.5rem;}}
.hero-context-item{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.55rem;
  align-items:start;
  padding:.9rem 1rem .95rem;
  border:1px solid rgba(16,42,61,.12);
  border-radius:14px;
  background:rgba(255,255,255,.62);
}
.hero-context-item b{grid-row:span 2;padding-top:.12rem;font-size:.82rem;color:var(--gold);font-variant-numeric:tabular-nums;}
.hero-context-item strong{font-size:.98rem;color:var(--blue-ink);}
.hero-context-item small{grid-column:2;color:var(--muted);font-size:.82rem;line-height:1.5;margin-top:.15rem;text-wrap:balance;}
.hero-context-slider{display:none;}

/* 舊版滑動 Hero 的同一套訊號與可讀性調整 */
.hero:not(.hero-service-first){height:min(76vh,700px);min-height:500px;}
.hero:not(.hero-service-first) .hero-content{max-width:700px;}
.hero:not(.hero-service-first) h1{font-size:clamp(2.35rem,5.2vw,3.8rem);letter-spacing:-.025em;}
.hero:not(.hero-service-first) .hero-context-slider{display:grid;max-width:630px;}

/* 內頁標題：一張有 caption 的情境照片，左側保留 SEO 可讀標題 */
.page-banner-editorial{
  position:relative;
  height:auto;
  min-height:360px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(100deg,#F8F6F0 0%,#F8F6F0 60%,#E8F0F4 100%);
  border-bottom:1px solid rgba(16,42,61,.12);
  overflow:hidden;
}
.page-banner-editorial::after{display:none;}
.page-banner-editorial::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-170px;
  top:-190px;
  border-radius:50%;
  background:rgba(242,164,58,.15);
}
.page-banner-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,410px);
  gap:clamp(2rem,8vw,7rem);
  align-items:center;
  padding:clamp(3.1rem,6vw,5rem) 0;
}
.page-banner-editorial .page-banner-content{position:relative;z-index:1;padding:0;max-width:670px;}
.page-banner-editorial .page-banner-content h1{color:var(--blue-ink);font-size:clamp(2rem,4.7vw,3.45rem);letter-spacing:-.025em;}
.page-banner-editorial .page-banner-content p{color:var(--muted);font-size:clamp(1rem,1.7vw,1.14rem);max-width:48ch;margin-top:.7rem;}
.page-banner-editorial .crumb,.page-banner-editorial .crumb a{color:var(--blue);font-weight:800;}
.page-banner-editorial .crumb{font-size:.74rem;letter-spacing:.05em;margin-bottom:1rem;}
.page-banner-visual{
  /* 端正的白色相片卡（不傾斜）；照片與說明都有內距，不貼邊 */
  position:relative;margin:0;z-index:1;
  padding:.65rem .65rem 0;
  background:#fff;
  border:1px solid rgba(16,42,61,.1);
  border-radius:20px;
  box-shadow:var(--shell-lg);
}
.page-banner-visual img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#DCE8EE;display:block;}
.page-banner-visual figcaption{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.8rem .9rem .9rem;color:var(--blue-ink);font-size:.86rem;font-weight:800;letter-spacing:.02em;}
.page-banner-visual figcaption span{color:var(--blue);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.page-banner-rule{position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--tri);}

/* 圖片敘事：首頁第一張是主證據，其他照片只作支援 */
.egal-strip .egal-grid,.egal-grid{
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1rem;
}
.egal-grid .egal-tile{grid-column:span 3;aspect-ratio:4/3;}
.egal-grid .egal-tile.is-featured{grid-column:span 6;grid-row:span 2;aspect-ratio:4/3;}
.egal-grid .egal-tile img{object-fit:cover;}
.egal-cap{opacity:1;background:linear-gradient(180deg,rgba(4,32,58,0) 18%,rgba(4,32,58,.82) 100%);padding:2.2rem .95rem .8rem;}
.egal-cap b{font-size:.83rem;}
.egal-cap small{font-size:.7rem;display:block;margin-top:.16rem;}
.egal-tile{border-radius:16px;}

/* 所有照片在卡片裡保留上下文 */
.post-card .body{padding:1.35rem 1.5rem 1.55rem;}
.post-card h3{font-size:1.08rem;line-height:1.45;letter-spacing:-.01em;}
.post-card .date{color:var(--blue);font-variant-numeric:tabular-nums;}
.post-card .card-more{font-size:.8rem;letter-spacing:.03em;}
.post-card:hover{transform:translateY(-5px);}
.article-head{display:grid;gap:.45rem;margin:1rem 0 1.5rem;}
.article-head .date{color:var(--blue);font-weight:800;font-variant-numeric:tabular-nums;}
.article-head h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.025em;color:var(--blue-ink);}

/* 團隊：先讀懂職責，再看照片 */
.team-intro,.roster-intro{max-width:66ch;margin:-.65rem 0 1.45rem;color:var(--muted);font-size:.95rem;}
.team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;}
.person{padding:.7rem .7rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.86);}
.person .avatar,.person .avatar-blank{border-radius:13px;aspect-ratio:4/4.6;margin-bottom:.8rem;}
.person .role{display:inline-flex;align-items:center;gap:.3rem;align-self:center;color:var(--blue);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;}
.person .role::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);}
.person .name{font-family:var(--serif);font-size:1.12rem;letter-spacing:.01em;}
.person .job{font-size:.78rem;line-height:1.5;color:var(--muted);}
.person .person-more{font-size:.74rem;color:var(--blue);margin-top:.6rem;}

/* 社員名單：卡片化後能快速掃到「誰／專業／是否可看職人卡」 */
.roster-intro{margin-top:-.65rem;}
.expertise-strip{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.3rem;}
.expertise-chip{display:inline-flex;align-items:center;min-height:32px;padding:.3rem .75rem;border:1px solid rgba(11,94,145,.2);border-radius:999px;background:rgba(234,243,248,.75);color:var(--blue-deep);font-size:.73rem;font-weight:800;}
.member-roster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;}
.member-pill,.member-pill.has-job{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  column-gap:.65rem;
  min-height:66px;
  width:100%;
  max-width:none;
  padding:.65rem .8rem;
  border-radius:15px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(16,42,61,.12);
  box-shadow:var(--shell);
}
.member-pill .mp-avatar{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold-soft);color:var(--blue-deep);font-family:var(--serif);font-weight:900;font-size:.95rem;}
.member-pill .mp-avatar::before{content:attr(data-init);}
.member-pill .mp-body{display:flex;flex-direction:column;min-width:0;}
.member-pill .mp-name{font-size:.88rem;font-weight:900;color:var(--text);overflow-wrap:anywhere;}
.member-pill .mp-nick{font-size:.68rem;color:var(--muted);font-weight:600;}
.member-pill .mp-job{display:block;font-size:.74rem;color:var(--muted);line-height:1.4;white-space:normal;overflow-wrap:anywhere;}
.member-pill .mp-arrow{font-size:1rem;color:var(--blue);font-weight:900;}
.member-pill .mp-arrow::before{content:"↗";}
a.member-pill.linked{border-color:rgba(11,94,145,.35);color:var(--text);transition:transform .25s,background .25s,box-shadow .25s;}
a.member-pill.linked:hover{background:#EAF3F8;color:var(--blue-deep);transform:translateY(-2px);box-shadow:var(--shell-lg);}
a.member-pill.linked:hover .mp-nick,a.member-pill.linked:hover .mp-job{color:var(--blue-deep);}

/* 信任牆內嵌：外層先交代「為什麼看」，再讓 iframe 保持一條捲軸 */
body[data-page="trustwall"] .page-banner-editorial + .block .richtext,
body[data-page="trustwall"] .richtext{max-width:820px;}
body[data-page="trustwall"] .tw-embed-wrap{border:1px solid rgba(16,42,61,.12);border-radius:20px;overflow:hidden;background:#F8F6F0;box-shadow:var(--shell-lg);}
body[data-page="trustwall"] .tw-loading-txt{padding:.8rem 1rem;color:var(--muted);font-size:.78rem;}

/* 例會與活動：一眼看到日期、主題、參與動作 */
.mtg,.ev-row{border-radius:15px;border-color:rgba(16,42,61,.12);background:rgba(255,255,255,.9);}
.mtg .when .d,.ev-date b{color:var(--blue-deep);}
.mtg-register,.ev-go{font-weight:900;}
.sched-note,.mtg-guide,.ev-hint{border-radius:14px;background:#FFF3D8;border:1px solid rgba(242,164,58,.28);}
.evy-tile{border-radius:12px;}
.evy-tile.has{border-color:var(--blue);background:#F0F7FA;}

/* Join / contact：把下一步變成清楚的操作節點 */
.step-grid{gap:.9rem;}
.step{border-radius:17px;background:rgba(255,255,255,.9);padding:1.55rem 1.35rem;}
.step h3{font-size:1.02rem;}
.step::before{color:rgba(242,164,58,.28);}
.fact-list,.regform,.contact-card{border-radius:18px;background:rgba(255,255,255,.9);}
.contact-card{padding:1.55rem 1.45rem;}

footer{background:var(--blue-ink);margin-top:1rem;}
footer .wrap{padding-top:3.8rem;}
.foot-grid{gap:2.8rem;}
.foot-brand .foot-mark-img{border-radius:14px;}
.foot-bottom{border-top-color:rgba(255,255,255,.18);}

@media (max-width:1080px){
  .hero-service-grid{gap:2rem;}
  .member-roster{grid-template-columns:repeat(2,minmax(0,1fr));}
  .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:820px){
  .hero-service-grid,.page-banner-grid{grid-template-columns:1fr;}
  .hero-service-first{min-height:auto;}
  .hero-service-grid{padding:4rem 0 4.5rem;}
  .hero-service-first .hero-visual{margin-top:1rem;}
  .hero-service-first h1{max-width:9em;}
  .page-banner-grid{gap:2rem;padding:3.6rem 0 4rem;}
  .page-banner-editorial .page-banner-content{max-width:680px;}
  .page-banner-visual{max-width:460px;width:100%;margin-left:auto;}
}
@media (max-width:640px){
  body::before{opacity:.12;}
  nav{min-height:68px;}
  .brand .mark{height:44px;}
  .blocks{gap:1rem;padding-bottom:3rem;}
  .block-pad{padding-top:2.6rem;}
  .hero-service-grid{padding:3.5rem 0 4rem;}
  .hero-service-first h1{font-size:clamp(2.35rem,11vw,3.35rem);}
  .hero-service-first p{font-size:1rem;}
  .hero-context{grid-template-columns:1fr;gap:.5rem;margin-top:1.1rem;}
  .hero-context-item{grid-template-columns:auto 1fr;min-height:54px;padding:.58rem .75rem;}
  .hero-photo-frame{padding:.55rem .55rem 0;border-radius:17px;}
  .hero-photo-frame figcaption{padding:.7rem .75rem .8rem;font-size:.84rem;}
  .hero-path-card{grid-template-columns:32% minmax(0,1fr);column-gap:.9rem;padding:.7rem 1rem .7rem .7rem;border-radius:17px;}
  .hero-path-card figcaption{gap:.4rem;}
  .hero-path-card figcaption b{font-size:1.02rem;}
  .hero-path-card figcaption span{font-size:.84rem;}
  .hero-context-item strong{font-size:.95rem;}
  .hero-context-item small{font-size:.8rem;}
  .page-banner-editorial .page-banner-content h1{font-size:2.35rem;}
  .page-banner-visual{width:100%;margin-right:0;border-radius:17px;padding:.5rem .5rem 0;}
  .page-banner-visual figcaption{padding:.65rem .7rem .75rem;font-size:.8rem;}
  .sec-head h2{font-size:1.75rem;}
  .team-grid{grid-template-columns:1fr 1fr;}
  .member-roster{grid-template-columns:1fr;}
  .egal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;}
  .egal-grid .egal-tile,.egal-grid .egal-tile.is-featured{grid-column:span 1;grid-row:span 1;aspect-ratio:4/3;}
  .egal-grid .egal-tile.is-featured{grid-column:span 2;aspect-ratio:16/9;}
  .egal-cap{padding:1.6rem .7rem .55rem;}
  .egal-cap b{font-size:.72rem;}
  .egal-cap small{font-size:.62rem;}
  .hero-ctrl{right:.75rem;bottom:.75rem;}
}
@media (max-width:360px){
  .team-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
}

/* =========================================================
   活動記事＝歷史展示（eventsShowcase）＋下一場例會（nextMeetingCta）
   版面原則：一打開先有「焦點」（最近回顧）→ 再用不規則拼貼的類別卡說明我們做過哪些事 → 不做整面照片牆。
   照片一律完整顯示不裁切：前景 contain，背景是同一張圖放大模糊，框的大小整齊。
   ========================================================= */
.esc-intro{max-width:46rem;margin:.9rem 0 0;color:var(--muted);line-height:1.85;}
.esc{display:grid;gap:2rem;margin-top:1.6rem;}
.esc-media{position:relative;display:block;overflow:hidden;background:linear-gradient(135deg,#0b3556 0%,#1d6fa5 100%);isolation:isolate;}
.esc-media .esc-bg{position:absolute;left:-12%;top:-12%;width:124%;height:124%;object-fit:cover;filter:blur(22px) saturate(1.15) brightness(.78);z-index:0;}
.esc-media .esc-fg{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;}
.esc-media.is-empty::after{content:attr(data-mono);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:clamp(3rem,7vw,5.2rem);font-weight:900;color:rgba(255,255,255,.22);z-index:1;}
.esc-media.is-empty::before{content:"";position:absolute;right:-18%;bottom:-30%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.45),rgba(245,166,35,0) 65%);z-index:0;}

.esc-feature{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.2rem;align-items:stretch;}
.esc-story{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shell);cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease);}
.esc-story:hover,.esc-story:focus-visible{transform:translateY(-4px);box-shadow:var(--shell-lg);outline:none;}
.esc-story-main .esc-media{aspect-ratio:16/10;}
.esc-story-body{padding:1.2rem 1.4rem 1.45rem;display:flex;flex-direction:column;gap:.5rem;min-width:0;}
.esc-tags{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;}
.esc-badge{display:inline-block;padding:.12rem .7rem;border-radius:999px;background:var(--gold);color:#4A2E00;font-size:.78rem;font-weight:900;letter-spacing:.04em;}
.esc-story h3{font-size:1.4rem;line-height:1.4;margin:0;overflow-wrap:anywhere;}
.esc-story-mini h3{font-size:1.02rem;}
.esc-when{margin:0;font-size:.92rem;font-weight:700;color:var(--blue);line-height:1.6;}
.esc-desc{margin:0;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.esc-more{margin-top:.3rem;font-weight:900;color:var(--blue);}
.esc-side{display:grid;gap:1.2rem;grid-auto-rows:1fr;}
.esc-story-mini{flex-direction:row;}
.esc-story-mini .esc-media{flex:0 0 44%;min-height:150px;}
.esc-story-mini .esc-story-body{padding:1rem 1.1rem;justify-content:center;}

.esc-sub{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.esc-sub h3{margin:0;font-size:1.25rem;}
.esc-sub span{font-size:.9rem;color:var(--muted);font-weight:700;}
.esc-cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.1rem;margin-top:-.8rem;}
.esc-tile{display:flex;flex-direction:column;padding:0;border:0;overflow:hidden;border-radius:20px;background:var(--blue-ink);color:#fff;cursor:pointer;text-align:left;font-family:inherit;box-shadow:var(--shell);transition:transform .35s var(--ease),box-shadow .35s var(--ease);grid-column:span 4;}
.esc-tile[data-span="12"]{grid-column:span 12;}
.esc-tile[data-span="7"]{grid-column:span 7;}
.esc-tile[data-span="6"]{grid-column:span 6;}
.esc-tile[data-span="5"]{grid-column:span 5;}
.esc-tile[data-span="4"]{grid-column:span 4;}
.esc-tile:hover,.esc-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--shell-lg);outline:none;}
.esc-tile .esc-media{flex:none;aspect-ratio:4/3;}
.esc-tile[data-span="12"] .esc-media{aspect-ratio:3/1;}
.esc-tile[data-span="7"] .esc-media{aspect-ratio:16/9;}
.esc-tile[data-span="6"] .esc-media{aspect-ratio:16/10;}
.esc-cap{display:grid;gap:.2rem;padding:.85rem 1.1rem 1.05rem;}
.esc-cap-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;}
.esc-cap b{font-family:var(--serif);font-size:1.25rem;font-weight:900;}
.esc-cap em{font-style:normal;font-size:.86rem;font-weight:800;color:var(--gold);white-space:nowrap;}
.esc-cap small{font-size:.86rem;color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 下一場例會：看完歷史，邀請來參加（最近一場優先，報名請到例會資訊） */
.nmc{margin-top:1.4rem;}
.nmc-card{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#0b3556 0%,#0f5a8f 100%);color:#fff;box-shadow:var(--shell-lg);}
.nmc-card .nmc-media{display:block;min-height:220px;}
.nmc-card .nmc-media .esc-media{width:100%;height:100%;min-height:220px;}
.nmc-body{padding:1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;justify-content:center;min-width:0;}
.nmc-kicker{font-size:.86rem;font-weight:900;letter-spacing:.08em;color:var(--gold);}
.nmc-card h3{margin:0;font-size:1.5rem;line-height:1.4;color:#fff;overflow-wrap:anywhere;}
.nmc-meta{margin:0;font-size:.98rem;color:rgba(255,255,255,.88);line-height:1.7;}
.nmc-note{margin:0;font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.7;}
.nmc-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.5rem;}
.btn-ghost-light{border:1.5px solid rgba(255,255,255,.55);color:#fff;background:transparent;}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);}
.nmc-empty{grid-template-columns:1fr;}
.nmc-compact .nmc-card{grid-template-columns:1fr;border-radius:18px;}
.nmc-compact .nmc-body{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem;padding:1.1rem 1.4rem;}
.nmc-compact h3{font-size:1.1rem;flex:1 1 16rem;}
.nmc-compact .nmc-actions{margin:0;}

@media (max-width:900px){
  .esc-feature{grid-template-columns:1fr;}
  .esc-side{grid-auto-rows:auto;}
  .nmc-card{grid-template-columns:1fr;}
  .nmc-card .nmc-media,.nmc-card .nmc-media .esc-media{min-height:200px;}
}
@media (max-width:700px){
  .esc-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:-.6rem;}
  .esc-tile,.esc-tile[data-span]{grid-column:span 1;}
  .esc-tile:first-child{grid-column:1/-1;}
  .esc-tile .esc-media,.esc-tile[data-span] .esc-media{aspect-ratio:4/3;}
  .esc-tile:first-child .esc-media{aspect-ratio:16/9;}
  .esc-cap{padding:.7rem .85rem .85rem;}
  .esc-cap b{font-size:1.05rem;}
  .esc-cap small{font-size:.8rem;}
  .esc-story h3{font-size:1.2rem;}
  .esc-story-mini h3{font-size:.98rem;}
  .esc-story-mini .esc-media{flex:0 0 38%;min-height:120px;aspect-ratio:auto;}
  .esc-story-mini .esc-desc{display:none;}
  .nmc-body{padding:1.3rem 1.2rem;}
  .nmc-card h3{font-size:1.25rem;}
  .nmc-actions .btn{flex:1 1 100%;justify-content:center;}
}
@media (prefers-reduced-motion:reduce){.esc-story,.esc-tile{transition:none;}}

/* === 伺服器端與靜態 SEO 預渲染容器（爬蟲與無 JS 環境可讀，前端 paint() 執行後自動由 .blocks 取代） === */
.seo-fallback{max-width:1120px;margin:2rem auto;padding:1.5rem 1.25rem;color:var(--text,#102338);line-height:1.75;}
.seo-fallback h1{font-size:1.75rem;color:var(--blue-deep,#003A6E);margin:0 0 .75rem;}
.seo-fallback h2{font-size:1.28rem;color:var(--blue,#00539C);margin:1.5rem 0 .5rem;}
.seo-fallback h3{font-size:1.05rem;margin:1rem 0 .35rem;}
.seo-fallback p,.seo-fallback li{font-size:.98rem;color:var(--text,#102338);}
.seo-fallback ul,.seo-fallback ol{padding-left:1.25rem;margin:.5rem 0 1rem;}
.seo-fallback nav.seo-nav{margin-top:1.25rem;padding-top:.75rem;border-top:1px solid #dfe6ee;display:flex;flex-wrap:wrap;gap:.6rem 1rem;font-size:.92rem;}
body.ready .seo-fallback{display:none;}