/* ============================================================
   地方分會頁 — 全部 scope 在 .bx 之下，避免與 css/all.css 撞名
   （all.css 已佔用 .wrap / .sec / .btn / .hero / .news / .map 等通用類名）
   中文內文走系統字型；網頁字型只載 Noto Sans TC 900（大標）與 Roboto 700（數字）
   ============================================================ */
.bx{
  --brand:#0E4B3C; --brand-2:#12724F; --brand-deep:#062B22; --brand-soft:#E8F3EE;
  --spark:#FF5A1F; --spark-soft:#FFE9E0; --lime:#C8F04B; --gold:#C2A14D;
  --ink:#10201C; --body:#4C5C57; --muted:#8A9591; --line:#E6EBE9; --soft:#F5F8F6;
  --maxw:1180px;
  --f-tc:system-ui,"PingFang TC","Microsoft JhengHei",sans-serif;
  --f-head:"Noto Sans TC",system-ui,"PingFang TC","Microsoft JhengHei",sans-serif;
  --f-en:"Roboto",system-ui,sans-serif;
  font-family:var(--f-tc);color:var(--body);background:#fff;line-height:1.8;
  padding-top:90px;   /* 讓開站台固定 navbar */
}
.bx *{box-sizing:border-box}
.bx img{max-width:100%;display:block}
.bx a{color:var(--brand);text-decoration:none}
.bx a:hover{color:var(--spark)}
.bx section[id]{scroll-margin-top:110px}
.bx .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:28px}
.bx .sec{padding-block:clamp(58px,7.5vw,104px);position:relative}
.bx .sec.soft{background:var(--soft)}
/* 手機收緊留白：clamp 的下限 58px 在 390px 寬的螢幕上，光是區塊上下留白就吃掉
   將近三分之一個畫面高度；左右 28px 也讓內容欄只剩 334px。 */
@media(max-width:700px){
  .bx .wrap{padding-inline:18px}
  .bx .sec{padding-block:42px}
  .bx .sh{margin-bottom:24px}
}
.bx .sec.dark{background:var(--brand-deep);color:#DCE7E2}
.bx .kicker{font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--spark);display:flex;align-items:center;gap:10px;margin:0}
.bx .kicker::before{content:"";width:22px;height:2px;background:var(--spark);border-radius:2px}
.bx .t1{font-family:var(--f-head);font-weight:900;font-size:clamp(28px,4vw,44px);line-height:1.2;color:var(--ink);margin:14px 0 0}
.bx .dark .t1,.bx .sec.dark .t1{color:#fff}
.bx .t2{font-family:var(--f-head);font-weight:900;font-size:clamp(18px,2.1vw,22px);line-height:1.4;color:var(--ink);margin:0}
/* 區塊標題：上緣一道細線，左端壓一小段深綠，讓每個段落的起點看得出來。
   手機上區塊只靠底色交錯區隔太弱，捲下去會分不清哪裡換了主題。
   kicker 自己那條橘色短線是 inline 的、顏色也不同，兩者不會打架。 */
/* padding-top 給小一點：下面 .bx .sh p 已經讓 kicker 帶 14px 的 margin-top */
.bx .sh{position:relative;padding-top:clamp(12px,1.8vw,18px);margin-bottom:clamp(30px,4.5vw,50px)}
.bx .sh::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.bx .sh::after{content:"";position:absolute;top:0;left:0;width:64px;height:3px;background:var(--brand)}
.bx .sec.dark .sh::before{background:rgba(255,255,255,.22)}
.bx .sec.dark .sh::after{background:var(--lime)}
.bx .sh p{margin:14px 0 0;max-width:620px;font-size:16px}
.bx .btn{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--f-tc);padding:14px 28px;border-radius:999px;border:0;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s,color .2s}
.bx .btn:hover{transform:translateY(-2px)}
.bx .b-spark{background:var(--spark);color:#fff;box-shadow:0 10px 24px rgba(255,90,31,.28)}
.bx .b-spark:hover{box-shadow:0 16px 34px rgba(255,90,31,.36);color:#fff}
.bx .b-line{border:1.5px solid rgba(255,255,255,.4);color:#fff;background:transparent}
.bx .b-line:hover{background:#fff;color:var(--brand-deep)}
.bx .b-dark{background:var(--brand);color:#fff}
.bx .b-dark:hover{background:var(--brand-deep);color:#fff}

/* Hero */
.bx .hero{position:relative;background:var(--brand-deep);color:#fff;overflow:hidden}
/* 遮罩原本疊到照片只剩 6~14% 可見，整片看起來是黑的。圖片提亮到 .78、
   遮罩同步減輕，左側仍留足夠暗度讓白字可讀，右側放亮讓照片看得出來。 */
.bx .hero-img{position:absolute;inset:0;background-size:cover;background-position:center 35%;opacity:.78}
.bx .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(6,43,34,.82) 8%,rgba(6,43,34,.5) 55%,rgba(6,43,34,.22))}
.bx .hero .wrap{position:relative;z-index:2;padding-block:clamp(58px,8vw,104px)}
.bx .hero.min .wrap{padding-block:clamp(96px,14vw,170px)}
.bx .hero.min::after{background:linear-gradient(160deg,rgba(6,43,34,.74),rgba(6,43,34,.44))}
.bx .crumb{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:18px}
.bx .crumb a{color:rgba(255,255,255,.62)}
.bx .crumb a:hover{color:var(--lime)}
.bx .hero h1{font-family:var(--f-head);font-size:clamp(34px,6.2vw,68px);font-weight:900;line-height:1.1;margin:14px 0 0;color:#fff}
.bx .hero.min h1{font-size:clamp(38px,6.8vw,74px)}
.bx .hero .rule{width:64px;height:5px;background:var(--lime);border-radius:5px;margin-top:30px}
.bx .hero .sub{font-size:clamp(16px,1.7vw,19px);color:rgba(255,255,255,.82);max-width:560px;margin:20px 0 0}
.bx .meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.bx .chip{font-size:12.5px;font-weight:700;padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
.bx .chip.gold{background:rgba(194,161,77,.22);color:var(--gold)}
/* 這裡不可以用 .link 當 class：all.css:2799 有全站的 .link{position:absolute;top:-100px}
   （錨點跳轉用的定位輔助），套上去會讓 chip 被推出 hero 外，加上 .hero 有 overflow:hidden
   就整顆看不見——DOM 裡有、畫面上沒有。 */
.bx a.chip{text-decoration:none;transition:background .2s,transform .2s}
.bx a.chip:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.bx a.chip.gold:hover{background:rgba(194,161,77,.42)}
.bx .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* 數據列 */
.bx .stats{position:relative;z-index:3;margin-top:-52px}
.bx .stats-in{background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(6,43,34,.16);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));overflow:hidden}
/* 分隔線用 box-shadow 而不是 border：容器 overflow:hidden 會自動把最右一欄與
   最後一列多出來的那條裁掉，指標數目是動態的（1~N 個、會換列）也不必逐一 nth-child。
   原本的 border-right + :last-child 換列時中間就沒有橫線。 */
.bx .stat{padding:26px 22px;text-align:center;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.bx .stat b{display:block;font-family:var(--f-en);font-weight:700;font-size:clamp(28px,3.6vw,40px);color:var(--brand);letter-spacing:-.02em;line-height:1.1}
.bx .stat b i{font-style:normal;font-size:.5em;color:var(--spark);margin-left:2px}
.bx .stat span{display:block;margin-top:6px;font-size:13.5px;font-weight:600;color:var(--muted)}
/* 手機：auto-fit 的 minmax(180px) 在 390px 寬只排得下 1 欄，四個指標就變成一長條。
   固定兩欄並收緊留白；奇數時最後一格橫跨兩欄，不留半格空白。 */
@media(max-width:700px){
  .bx .stats{margin-top:-32px}
  .bx .stats-in{grid-template-columns:repeat(2,1fr);border-radius:14px;box-shadow:0 14px 34px rgba(6,43,34,.14)}
  .bx .stat{padding:14px 10px}
  .bx .stat:last-child:nth-child(odd){grid-column:1/-1}
  .bx .stat b{font-size:25px}
  .bx .stat span{margin-top:2px;font-size:12px;line-height:1.5}
}

/* 檔期內輪播（連結橫幅列） */
/* 檔期內輪播：置中主視覺 slider。中央那張放大為主角，左右兩側縮小淡出，
   自動輪播並循環。原圖只有 1200×800，中央顯示寬 560px＝2.1× 像素密度。 */
.bx .promo-wrap{margin-top:34px}
.bx .promo-sw{overflow:hidden;padding-bottom:46px}
.bx .promo-sw .swiper-slide{width:min(560px,84%);height:auto;
  transform:scale(.84);opacity:.5;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s}
.bx .promo-sw .swiper-slide-active{transform:scale(1);opacity:1}
@media(max-width:1100px){.bx .promo-sw .swiper-slide{width:min(460px,86%)}}
@media(max-width:700px){.bx .promo-sw .swiper-slide{width:88%;transform:scale(.92)}}
.bx .promo-card{display:block;color:inherit}
.bx .promo-card>span.ph,.bx .promo-one>span.ph{position:relative;display:block;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(6,43,34,.16)}
.bx .promo-card img,.bx .promo-one img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bx a.promo-card:hover img,.bx .promo-one a:hover img{transform:scale(1.05)}
/* 圖說壓在圖上、靠左下、白字 */
.bx .promo-card .cap,.bx .promo-one .cap{position:absolute;left:0;right:0;bottom:0;
  padding:38px 18px 14px;text-align:left;color:#fff;font-size:15px;font-weight:700;line-height:1.5;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  background:linear-gradient(to top,rgba(6,43,34,.9) 0%,rgba(6,43,34,.55) 55%,rgba(6,43,34,0) 100%)}
@media(max-width:700px){.bx .promo-card .cap,.bx .promo-one .cap{font-size:13.5px;padding:30px 14px 12px}}
.bx .promo-one{max-width:min(560px,100%)}
/* 蓋掉 swiper.css 的預設藍，換成分會頁配色 */
.bx .promo-sw .swiper-button-prev,.bx .promo-sw .swiper-button-next{color:var(--brand);top:auto;bottom:2px;width:34px;height:34px;margin-top:0;background:none}
.bx .promo-sw .swiper-button-prev{left:auto;right:44px}
.bx .promo-sw .swiper-button-next{right:0}
.bx .promo-sw .swiper-pagination{bottom:10px;text-align:left;width:auto;left:0}
.bx .promo-sw .swiper-pagination-bullet{background:var(--muted);opacity:.4}
.bx .promo-sw .swiper-pagination-bullet-active{background:var(--spark);opacity:1}

/* 關於我們 */
.bx .prose{font-size:16.5px;line-height:1.95}
.bx .prose :is(h1,h2,h3,h4){font-family:var(--f-head);color:var(--ink)}
.bx .prose img{border-radius:16px;margin:18px 0}
.bx .prose ul{list-style:none;padding-left:0}
.bx .prose ul li{position:relative;padding-left:26px}
.bx .prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;border-radius:50%;background:var(--spark)}
.bx .prose table{max-width:100%}

/* 組織團隊 */
.bx .people{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:start}
@media(max-width:860px){.bx .people{grid-template-columns:1fr}}
.bx .lead-card{border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 22px 44px rgba(6,43,34,.12)}
.bx .lead-card>img{aspect-ratio:4/5;object-fit:cover;object-position:center top;width:100%}
.bx .mono{aspect-ratio:4/5;display:grid;place-items:center;background:linear-gradient(150deg,var(--brand),var(--brand-2));color:#fff;font-family:var(--f-head);font-size:clamp(56px,9vw,84px);font-weight:900;letter-spacing:.06em}
.bx .lead-card .b{padding:22px}
.bx .lead-card .role{font-size:12.5px;font-weight:800;letter-spacing:.18em;color:var(--spark)}
.bx .lead-card .nm{font-family:var(--f-head);font-size:26px;font-weight:900;color:var(--ink);margin:6px 0 0}
.bx .lead-card .note{font-size:14px;color:var(--muted);margin:6px 0 0}
/* 手機：4:5 全寬等於一張 430px 高的照片（沒照片時是一整片深綠色塊），
   佔掉大半個螢幕還要再捲一次才看到名字。改成橫向名片，照片縮到 118px。
   容器 align-items:center 讓文字垂直居中，圖片要另外 stretch 才會撐滿整列高。 */
@media(max-width:640px){
  .bx .lead-card{display:grid;grid-template-columns:118px 1fr;align-items:center;
                 border-radius:16px;box-shadow:0 14px 30px rgba(6,43,34,.12)}
  .bx .lead-card>img,.bx .lead-card .mono{width:118px;align-self:stretch}
  .bx .lead-card .mono{font-size:44px}
  .bx .lead-card .b{padding:14px 16px}
  .bx .lead-card .nm{font-size:21px}
  .bx .lead-card .note{font-size:13px}
}
/* 名冊：依職稱分組，同職稱的人排在同一行並自動 wrap。
   24 人只會產生 8 組，不再一人一列把版面拉到 1900px。
   順序由分會後台的「管理職稱清單」決定，前台不另外分區重排。 */
.bx .rgrp{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:13px 0;align-items:start}
.bx .rgrp + .rgrp{border-top:1px dashed var(--line)}
.bx .rgrp .gl{font-size:14px;font-weight:800;color:var(--brand);padding-top:2px}
.bx .rgrp .gp{display:flex;flex-wrap:wrap;gap:10px 20px}
.bx .person{min-width:0;max-width:170px}
.bx .person b{display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.5}
.bx .person i{display:block;font-style:normal;font-size:12px;color:var(--muted);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx .person.tbd b{color:var(--muted);font-weight:600}
.bx .person.tbd i{color:var(--spark);font-weight:700}
@media(max-width:640px){.bx .rgrp{grid-template-columns:1fr;gap:6px}}
/* 團隊照片：整寬一段，張數決定欄數。上傳端裁切為 1200x800，故用 3/2。 */
.bx .tph-h{margin:34px 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.18em;color:var(--muted)}
.bx .tphotos{display:flex;flex-wrap:wrap;gap:14px}
.bx .tphotos figure{margin:0;min-width:0;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 14px 30px rgba(6,43,34,.10)}
.bx .tphotos img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bx .tphotos figure:hover img{transform:scale(1.04)}
.bx .tphotos.one{justify-content:center}
.bx .tphotos.one figure{flex:0 1 860px}
.bx .tphotos.two figure{flex:1 1 calc(50% - 7px)}
.bx .tphotos.three figure{flex:1 1 calc(33.333% - 10px)}
@media(max-width:860px){.bx .tphotos.three figure{flex:1 1 calc(50% - 7px)}}
@media(max-width:560px){.bx .tphotos figure{flex:1 1 100%}}

/* 功能委員會 */
.bx .cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.bx .cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bx .cgrid{grid-template-columns:1fr}}
.bx .ccard{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;overflow:hidden;transition:transform .3s,box-shadow .3s}
/* 圖片版：padding 移到 .cbd，圖片才能貼齊卡片上緣滿版 */
.bx .cgrid.withimg{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.bx .cgrid.withimg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.bx .cgrid.withimg{grid-template-columns:1fr}}
.bx .cgrid.withimg .ccard{padding:0;display:flex;flex-direction:column}
.bx .cgrid.withimg .cbd{padding:22px 24px 24px}
.bx .ccard .cph{margin:0;line-height:0}
.bx .ccard .cph img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
/* 委員名單 */
.bx .cmem{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.bx .cmem li{padding:6px 0;font-size:14.5px;line-height:1.6}
.bx .cmem li+li{border-top:1px dashed var(--line)}
.bx .cmem b{font-weight:700;color:var(--ink)}
.bx .cmem .r{margin-left:8px;font-size:12px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:2px 9px;white-space:nowrap}
.bx .cmem i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
/* 成員照片版：沿用代表照卡片，卡內加人頭。第一位（chief，通常是主任委員）
   放大並用 spark 色帶凸顯，其餘沿用 .cmem 名單列、前面加小圓頭像 */
.bx .cchief{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 12px;
  background:var(--spark-soft);border-radius:12px}
.bx .cchief .av{width:56px;height:56px;flex:none;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--spark)}
.bx .cchief .ci{min-width:0}
.bx .cchief .r{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--spark)}
.bx .cchief b{display:block;font-family:var(--f-head);font-size:16.5px;font-weight:900;color:var(--ink);line-height:1.4}
.bx .cchief i{display:block;font-style:normal;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx .cmem li.withav{display:flex;align-items:center;gap:10px}
.bx .cmem li.withav>div{min-width:0}
.bx .cmem .av{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;display:block}
.bx .mono-av{display:grid;place-items:center;background:linear-gradient(150deg,var(--brand),var(--brand-2));
  color:#fff;font-family:var(--f-head);font-weight:900}
.bx .cchief .mono-av{font-size:22px}
.bx .cmem .mono-av{font-size:14px}
.bx .ccard:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(6,43,34,.12)}
.bx .ccard::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--spark);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bx .ccard:hover::after{width:100%}
.bx .ccard .num{font-family:var(--f-en);font-weight:700;font-size:12px;letter-spacing:.16em;color:var(--muted);margin-bottom:10px}
.bx .ccard p{margin:10px 0 0;font-size:14.5px}

/* 行事曆：月份卡片牆，與 op=calendar 完整頁同一套版型（配色改用分會綠） */
.bx .cwall{columns:2;column-gap:20px}
.bx .cwall.one{columns:1;max-width:560px}   /* 只有一張時不分欄，否則半寬孤零零掛在左邊 */
@media(max-width:860px){.bx .cwall{columns:1}}
.bx .mcard{break-inside:avoid;margin:0 0 20px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(6,43,34,.05)}
.bx .mhead{display:flex;align-items:baseline;gap:10px;background:var(--brand);color:#fff;padding:12px 20px}
.bx .mhead .no{font-family:var(--f-en);font-size:27px;font-weight:700;line-height:1;color:var(--lime)}
.bx .mhead .nm{font-weight:800;font-size:15px;letter-spacing:.08em}
.bx .mhead .cnt{margin-left:auto;font-size:12px;color:rgba(255,255,255,.6)}
.bx .mev{display:flex;gap:14px;padding:13px 20px;transition:background .2s}
.bx .mev+.mev{border-top:1px solid var(--line)}
.bx .mev:hover{background:var(--soft)}
.bx .mev.past{opacity:.55}
.bx .mev .dd{flex:none;width:42px;font-family:var(--f-en);font-weight:700;font-size:19px;color:var(--brand);line-height:1.45}
.bx .mev .bd{flex:1;min-width:0}
.bx .mev .ttl{font-weight:700;color:var(--ink);font-size:15px;line-height:1.55;word-break:break-word}
.bx .mev .ttl .up{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--spark-soft);color:#C2400F;font-size:11px;font-weight:800;vertical-align:middle}
.bx .mev .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:5px}
.bx .mev .meta .tg{background:var(--brand-soft);border-radius:999px;padding:2px 10px;color:var(--brand);font-weight:700;font-size:12px}

/* 最新動態 */
.bx .newslist a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .2s,background .2s}
.bx .newslist a:hover{padding-left:14px;background:#fff}
.bx .newslist .dt{font-family:var(--f-en);font-weight:700;font-size:13.5px;color:var(--spark);white-space:nowrap}
.bx .newslist .ti{font-size:16px;font-weight:600;color:var(--ink)}
.bx .newslist .ar{font-weight:900;color:var(--muted);transition:transform .2s,color .2s}
.bx .newslist a:hover .ar{transform:translateX(4px);color:var(--spark)}
@media(max-width:600px){.bx .newslist a{grid-template-columns:1fr;gap:6px}.bx .newslist .ar{display:none}}

/* 活動剪影 */
.bx .gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
@media(max-width:900px){.bx .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}}
.bx .gal figure{position:relative;margin:0;border-radius:14px;overflow:hidden}
.bx .gal figure.w2{grid-column:span 2}
.bx .gal figure.h2{grid-row:span 2}
.bx .gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bx .gal figure:hover img{transform:scale(1.06)}
.bx .gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;background:linear-gradient(transparent,rgba(6,43,34,.88));color:#fff;font-size:13.5px;font-weight:600}

/* 資訊公開 */
.bx .disc{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:860px){.bx .disc{grid-template-columns:1fr}}
.bx .drow{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;transition:border-color .2s,transform .2s,box-shadow .2s}
/* 可下載的整列就是連結（a.drow）；「整理中」沒有連結，不給 hover 效果免得誤以為點得動 */
.bx a.drow{color:inherit;text-decoration:none;cursor:pointer}
.bx a.drow:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 12px 28px rgba(6,43,34,.08)}
.bx a.drow:hover .dn{color:var(--brand);text-decoration:underline}
.bx .drow .ic{width:38px;height:38px;border-radius:11px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:900}
.bx .drow .dn{font-weight:700;color:var(--ink);font-size:15px}
.bx .drow .dd{font-size:13px;color:var(--muted);margin-top:2px}
/* 開放對象標籤：四種狀態要能一眼分辨，所以色相＋填色輕重都不同——
   已公開=綠色淡底、新創會員=金色外框、本會會員=橘色實心（限制最嚴的最重）、整理中=灰虛線 */
.bx .drow .st{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;letter-spacing:.02em;
  padding:6px 12px;border-radius:999px;border:1px solid transparent;background:var(--soft);color:var(--muted);white-space:nowrap}
.bx .drow .st.lv-public{background:var(--brand-soft);color:var(--brand);border-color:rgba(14,75,60,.16)}
.bx .drow .st.lv-member{background:#FBF3E1;color:#8A6A18;border-color:rgba(194,161,77,.55)}
.bx .drow .st.lv-branch{background:#C2400F;color:#fff;border-color:#C2400F;box-shadow:0 4px 12px rgba(194,64,15,.26)}
.bx .drow .st.lv-todo{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.bx .drow .st .lk{font-size:11px;line-height:1}

/* 入會辦法 */
.bx .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.bx .steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.bx .steps{grid-template-columns:1fr}}
.bx .step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:24px 20px}
.bx .step .sn{font-family:var(--f-en);font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--lime)}
.bx .step h5{font-family:var(--f-head);font-size:18px;font-weight:800;color:#fff;margin:10px 0 0}
.bx .step p{font-size:14px;color:rgba(255,255,255,.72);margin:8px 0 0}
.bx .fee{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
@media(max-width:700px){.bx .fee{grid-template-columns:1fr}}
.bx .fee>div{background:rgba(255,255,255,.06);border-radius:18px;padding:22px}
/* 入會辦法的文件下載列（深底區塊內） */
.bx .jdocs{margin-top:26px}
.bx .jdocs-t{font-size:12.5px;font-weight:800;letter-spacing:.18em;color:var(--lime);margin:0 0 12px}
.bx .jdocs-list{display:flex;flex-wrap:wrap;gap:12px}
.bx .jdoc{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:14.5px;
  transition:background .2s,transform .2s}
.bx .jdoc:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-2px)}
.bx .jdoc .ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--lime);color:var(--brand-deep);font-weight:900;font-size:13px;flex:none}
.bx .fee b{display:block;font-size:13px;color:rgba(255,255,255,.7);font-weight:600}
.bx .fee strong{display:block;font-family:var(--f-en);font-size:30px;color:#fff;margin:6px 0}
.bx .fee span{font-size:13px;color:rgba(255,255,255,.6)}

/* 聯絡 */
.bx .ct{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}
@media(max-width:860px){.bx .ct{grid-template-columns:1fr}}
.bx .ct dl{margin:0}
.bx .cr{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.bx .cr dt{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.1em}
.bx .cr dd{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.bx .mapbox{border-radius:18px;overflow:hidden;min-height:280px;background:var(--soft)}
.bx .mapbox iframe{width:100%;height:100%;min-height:280px;border:0;display:block}
/* 地圖門面：按下才把 iframe 插進來，避免 Google Maps 的 JS 拖慢整頁捲動。
   底圖是純 CSS 畫的街廓示意（斜向主幹道＋橫直次要道路＋兩塊綠地），
   不用圖檔也不用外部服務——CSP 的 img-src 沒開 Google 靜態圖，載了也會被擋。 */
.bx .mapfacade{position:relative;display:grid;place-items:center;padding:34px 20px;text-align:center;
	background-color:#e9eee9;
	background-image:
		radial-gradient(circle at 78% 26%, rgba(140,180,130,.55) 0 46px, transparent 47px),
		radial-gradient(circle at 16% 76%, rgba(140,180,130,.45) 0 34px, transparent 35px),
		linear-gradient(118deg, transparent 0 44%, rgba(255,255,255,.95) 44% 50%, transparent 50%),
		repeating-linear-gradient(0deg,  transparent 0 52px, rgba(255,255,255,.8) 52px 58px),
		repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.8) 70px 76px);
}
.bx .mapfacade .mf-in{position:relative;background:rgba(255,255,255,.94);border-radius:14px;
	padding:22px 26px;box-shadow:0 10px 30px rgba(6,43,34,.14);max-width:420px}
/* 圓底＋尖角的地圖大頭針，同樣純 CSS */
.bx .mapfacade .mf-pin{width:26px;height:26px;margin:0 auto 12px;border-radius:50% 50% 50% 0;
	transform:rotate(-45deg);background:var(--spark);box-shadow:0 4px 10px rgba(255,90,31,.4)}
.bx .mapfacade .mf-pin::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;
	background:#fff;margin:8.5px 0 0 8.5px}
.bx .mapfacade .mf-addr{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 14px;line-height:1.6}
.bx .mapbox.is-loaded{display:block;border:0;padding:0;background:var(--soft)}

/* 空狀態 */
.bx .empty{border:1.5px dashed var(--line);border-radius:18px;background:#fff;padding:clamp(34px,5vw,54px) 30px;text-align:center}
.bx .sec.soft .empty{background:rgba(255,255,255,.6)}
.bx .sec.dark .empty{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.bx .empty .ei{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 16px;font-size:20px;font-weight:900}
.bx .empty h4{font-family:var(--f-head);margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.bx .sec.dark .empty h4{color:#fff}
.bx .empty p{margin:8px auto 0;max-width:440px;font-size:14.5px;color:var(--muted)}
.bx .empty .btn{margin-top:20px}