@import url("frontend-unit.css");
@import url("frontend-verify.css");

:root{
	/**--bg-primary: 	#FBFAF1;**/
	--bg-primary: 	#F9F8F1;
	--bg-secondary: #FEFEFF;
	--bg-dark:			#348b81;
	--main-btn: 		#24BBA5;
	--donate-btn: 	#D98A10;
	--main: 				#22CAD9;

	--dark: 				#0B0808;
	--light: 				#FFFFFF;  
	--text-dark: 		#0B0808;
	--text-gray: 		#848485;
	--menu-accent:  #1C83CE;   /* 導覽互動主色（hover/陰影調色基準） */
  --btn-secondary:#E98B2A;   /* Donate 專用底色 */
  --text-dark:    #222;      /* 深字色 */
  --brand-green:  #1e9e94;   /* 品牌綠（可作 active 底線等） */
  --nav-bg:       #DDF4F0;   /* 導覽背景（淡青綠） */

  /* jp-teal 主色（由 #1e9e94 調整而來） */
  --jp-teal: #2a9c93;

  /* 深一階：文字 / icon / 強調 */
  --jp-teal-deep: #1f7f77;

  /* 淺一階：hover / badge / 底色 */
  --jp-teal-soft: #8fd3cb;
  --jp-teal-soft-80: rgba(143, 211, 203, .8);

  /* 極淺：背景鋪底（卡片、hover 區） */
  --jp-teal-bg: rgba(42,156,147,.12);

  /* 外框 / focus ring */
  --jp-teal-ring: rgba(42,156,147,.28);
}


body{margin:0;overflow-x:hidden;}

body *{
	display:block;
	/*font-family:微軟正黑體,Arial;*/
	font-family: "New Tegomin", serif;
  line-height: 1.7;
}
body{
  font-size: clamp(18px, 1.5vw, 20px);
}


html{min-height:100vh;}
index, onnavbar, menu, btn, i, label { display:block; }

layers[part="mask"]{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.08);
  outline: 2px dashed var(--text-gray);
}

/*通用 PADDING*/
index[pt="about"], index[pt="impact"])
{padding: 3rem 2rem;}
@media(max-width: 500px){
		index:is([pt="news"], index[pt="about"], index[pt="impact"])
		{padding: 2.5rem 0;}
}

/*通用-標題圖片設定*/
img[id="news"],img[id="impact"],img[id="volunteer"],img[id="report"],img[id="video"]
{
	object-fit: cover;
	width: 150px;
}
img[id="about"]{
	object-fit: cover;
	width: 180px;
}

/* =========================================================
   BUTTON – pt=btn-more（維持 senior pt 寫法）
   視覺版本：對齊目前米白色膠囊按鈕
========================================================= */

/* === Base: Mobile (<500px) === */
btn[pt="btn-more"]{
  display: flex;
  justify-content: center;
  align-items: center;

  min-width: 140px;
  height: 46px;
  padding: 0 20px;

  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;

  background: var(--footer-bg);
  color: var(--jp-teal-deep);

  border: 1px solid var(--jp-teal-ring);
  border-radius: 1000px;

  cursor: pointer;

  box-shadow: 0 6px 18px rgba(0,0,0,.08);

  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .15s ease,
    opacity .25s ease;
}

/* ≥500px */
@media (min-width: 500px){
  btn[pt="btn-more"]{
    min-width: 180px;
    height: 52px;
    padding: 0 24px;
    font-size: 16px;
  }
}

/* ≥1024px */
@media (min-width: 1024px){
  btn[pt="btn-more"]{
    min-width: 220px;
    height: 56px;
    padding: 0 28px;
    font-size: 18px;
  }
}

/* ≥1440px */
@media (min-width: 1440px){
  btn[pt="btn-more"]{
    min-width: 235px;  /* 對齊你原本 235px 的視覺感 */
    height: 58px;
    padding: 0 30px;
    letter-spacing: .2px;
  }
}

/* === Hover / Active（只在支援 hover 的裝置） === */
@media (hover: hover){
  btn[pt="btn-more"]:hover{
/*    transform: translateY(-1px);*/
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    border-color: rgba(0,0,0,.08);
    background: var(--jp-teal-soft);
  }

  btn[pt="btn-more"]:active{
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
  }
}

/* === 可近性（鍵盤焦點） === */
btn[pt="btn-more"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.08),
    0 0 0 6px rgba(0,0,0,.18);
}




/* -------------------------
   按鈕容器：置中
------------------------- */
div[pt="news-actions"], div[pt="vol-actions"]{
  margin-top: clamp(20px, 3vw, 34px);
  display: flex;
  justify-content: center;
}
onmedia[pt="rv-actions"]{
	display: flex;
  justify-content: center;
}

/*STRUCTURE FOR PAGE && NAVBAR*/
Index[pt="fullscreen"] { min-height: 100dvh; }
Index[pt="border-out"] { background: rgba(0,0,0,.03); }
Index[pt="screendown"] { background: var(--bg-primary); }
Index[pt="screenup"]   {
/*	background: var(--main); */
	position: fixed;
	top:0;
	left:0;
	right:0;
	display; block;
	z-index:33;
}

index[pt="carousel"], index[pt="about"]{
	padding-bottom:130px;
}


/* =========================================================
   NAVBAR (FINAL) — desktop dropdown + mobile drawer
   規範：hover 一律 cursor:pointer + color:#2F8F83；不改背景色
========================================================= */


/* -------------------------
   Logo
------------------------- */
onnavbar[pt="logo-box"]{
  display: flex;
/*  align-items: center;
  flex: 0 0 auto;*/
}

a[pt="logo-link"]{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* -------------------------
   Desktop menu bar
------------------------- */
menu[pt="menu-bar"]{
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;

  flex: 1 1 auto;
  justify-content: flex-end;
}

/* 共用：桌機主項（單項、trigger） */
a[pt="nav-item"],
a[pt="nav-dd-trigger"]{
  position: relative;
  display: inline-flex;
  align-items: center;

  text-decoration: none;
  color: #1F3D3A;

  font-size: 18px;
  font-weight: 600;
  letter-spacing: .02em;

  padding: 10px 6px;
}

/* hover 統一（不變背景） */
a[pt="nav-item"]:hover,
a[pt="nav-dd-trigger"]:hover{
  cursor: pointer;
  color: #2F8F83;
  background: none !important;
}

/* active：用底線（不改背景） */
a[pt="nav-item"][active]{
  color: #2F8F83;
}
a[pt="nav-item"][active]::after{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* -------------------------
   Desktop dropdown
------------------------- */
menu[pt="nav-dd"]{
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

/* 面板：預設關閉 */
menu[pt="nav-dd-panel"]{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;

  min-width: 180px;
  margin: 0;
  padding: 10px;

  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);

  display: grid;
  gap: 6px;

  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms cubic-bezier(.2,.8,.2,1),
    transform 180ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 180ms;
}

/* hover / 鍵盤 focus 開啟 */
menu[pt="nav-dd"]:hover > menu[pt="nav-dd-panel"],
menu[pt="nav-dd"]:focus-within > menu[pt="nav-dd-panel"]{
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity 180ms cubic-bezier(.2,.8,.2,1),
    transform 180ms cubic-bezier(.2,.8,.2,1),
    visibility 0s;
}

/* 子項目：可點擊跳轉（不變背景） */
a[pt="dd-item"]{
  display: block;
  text-decoration: none;
  color: #1F3D3A;

  font-size: 16px;
  font-weight: 700;

  padding: 10px 10px;
  border-radius: 10px;

  background: none !important; /* 明確不變背景 */
}

a[pt="dd-item"]:hover{
  cursor: pointer;
  color: #2F8F83;
  background: none !important;
}

a[pt="dd-item"][active]{
  color: #2F8F83;
}

/* 父層 active：trigger 變綠（你 PHP 有塞 menu[pt=nav-dd][active]） */
menu[pt="nav-dd"][active] > a[pt="nav-dd-trigger"]{
  color: #2F8F83;
}

/* -------------------------
   Donate button (desktop right)
------------------------- */
a[pt="nav-donate"]{
  flex: 0 0 auto;
  text-decoration: none;

  background: #f2b01e;
  color: #1F3D3A;

  font-weight: 800;
  font-size: 18px;

  padding: 10px 14px;
  border-radius: 999px;

  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, filter .15s ease, color .15s ease;
}

a[pt="nav-donate"]:hover{
  cursor: pointer;
  color: #2F8F83;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

a[pt="nav-donate"][active]{
  color: #2F8F83;
}
/* --------------- NAVBAR base --------------- */
onnavbar[pt="navbar"]{
  position: relative;
  z-index: 999;
  background: var(--light);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 只保留「一份」inner 定義，避免重複覆寫 */
onnavbar[pt="inner"]{
  /* 用變數控 padding */
  --pad-y: 2px;
  --pad-x: 22px;
  padding: var(--pad-y) var(--pad-x);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;

  transition:
    padding 220ms ease,
    box-shadow 220ms ease;
}

/* shrink：只改變變數（比較不會被別段 CSS 蓋掉） */
onnavbar[pt="inner"].is-shrink{
  --pad-y: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* logo 一起縮 */
img#hs-logo{
  height: 80px;
  width: auto;
  display:block;
  transition: height 220ms ease;
}


/* =========================================================
   Mobile hamburger + drawer (pure CSS)
========================================================= */

/* hamburger button (mobile only) */
label[pt="hamburger-btn"]{
  display: none;
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  align-items: center;
  justify-content: center;

  cursor: pointer;
}

/* 你的 onNavbar() 實際結構是 label[pt=hamburger-btn] > span[pt=ham] > span*3 */
i[pt="hamburger"]{
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
}

i[pt="hamburger"] > span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #1f2a2a;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}

i[pt="hamburger"] > span:nth-child(1){ top: 0; }
i[pt="hamburger"] > span:nth-child(2){ top: 6px; }
i[pt="hamburger"] > span:nth-child(3){ top: 12px; }

/* ✅ checkbox 打開 → 變 X（selector 也要對） */
input#nav-toggle:checked ~ onnavbar[pt="inner"] label[pt="hamburger-btn"] i[pt="hamburger"] > span:nth-child(1){
  top: 6px;
  transform: rotate(45deg);
}
input#nav-toggle:checked ~ onnavbar[pt="inner"] label[pt="hamburger-btn"] i[pt="hamburger"] > span:nth-child(2){
  opacity: 0;
}
input#nav-toggle:checked ~ onnavbar[pt="inner"] label[pt="hamburger-btn"] i[pt="hamburger"] > span:nth-child(3){
  top: 6px;
  transform: rotate(-45deg);
}

/* mask */
label[pt="nav-mask"]{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;

  z-index: 998;
}

/* drawer */
onnavbar[pt="drawer"]{
  position: fixed;
  top: 0;
  right: 0;

  width: min(84vw, 340px);
  height: 100vh;

  background: #ffffff;
  border-left: 1px solid rgba(0,0,0,.08);
  box-shadow: -18px 0 38px rgba(0,0,0,.18);

  transform: translateX(102%);
  transition: transform .22s ease;

  z-index: 999;
  padding: 16px 14px;
  box-sizing: border-box;
}

menu[pt="drawer-list"]{
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 10px;
}

/* drawer items（你目前 PHP 手機版如果仍用 a，就套 a；若改 label for 自動關閉，也能用 label） */
a[pt="drawer-item"],
a[pt="drawer-subitem"],
label[pt="drawer-item"],
label[pt="drawer-subitem"],
label[pt="drawer-group"]{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 12px;
  border-radius: 12px;

  font-size: 15px;
  font-weight: 800;

  color: #1f2a2a;
  text-decoration: none;
  background: none !important;  /* 不變背景 */
}

/* hover 統一（不變背景） */
a[pt="drawer-item"]:hover,
a[pt="drawer-subitem"]:hover,
label[pt="drawer-item"]:hover,
label[pt="drawer-subitem"]:hover,
label[pt="drawer-group"]:hover{
  cursor: pointer;
  color: #2F8F83;
  background: none !important;
}

a[pt="drawer-item"][active],
a[pt="drawer-subitem"][active],
label[pt="drawer-item"][active],
label[pt="drawer-subitem"][active]{
  color: #2F8F83;
}

/* 子選單容器（預設收起） */
menu[pt="drawer-sub"]{
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;

  display: grid;
  gap: 10px;

  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}

/* dd-public / dd-join checkbox 開啟展開 */
input#dd-public:checked ~ menu[pt="drawer-sub"][data-dd="public"]{
  max-height: 320px;
}
input#dd-join:checked ~ menu[pt="drawer-sub"][data-dd="join"]{
  max-height: 320px;
}

/* nav-toggle checkbox 開啟 → 顯示 mask + drawer */
input#nav-toggle:checked ~ label[pt="nav-mask"]{
  opacity: 1;
  pointer-events: auto;
}
input#nav-toggle:checked ~ onnavbar[pt="drawer"]{
  transform: translateX(0);
}

/* drawer（深色） */
onnavbar[pt="drawer"]{
  background: #3c3c3c;            /* 類似你截圖 */
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.08);
  padding: 0;                      /* 交給 header + list 控 */
}

/* Drawer header：Menu + X */
div[pt="drawer-top"]{
  height: 56px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;

  background: #2f2f2f;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

div[pt="drawer-top-title"]{
  text-align: center;              /* 截圖是置中 */
  font-weight: 900;
  letter-spacing: .5px;
  opacity: .9;
}

/* 右上角 X（點它關閉） */
label[pt="drawer-close"]{
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
label[pt="drawer-close"]:hover{
  opacity: .9;
}

/* X icon */
i[pt="close-x"]{
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
}
i[pt="close-x"] > span{
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: rgba(255,255,255,.88);
  border-radius: 2px;
}
i[pt="close-x"] > span:nth-child(1){ transform: rotate(45deg); }
i[pt="close-x"] > span:nth-child(2){ transform: rotate(-45deg); }

menu[pt="drawer-list"]{
  padding: 10px 0;
  margin: 0;
  list-style: none;
  display: grid;
  gap: 0;                          /* 改成像截圖：一格一格貼齊 */
}

/* 一般項目 / 子項目 / 群組：先統一基礎 */
label[pt="drawer-item"],
label[pt="drawer-subitem"],
label[pt="drawer-group"]{
  height: 52px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 15px;
  font-weight: 900;
  color: #fff;

  border-radius: 0;               /* 截圖是方塊 */
  border-bottom: 1px solid rgba(0,0,0,.35);
}

/* 群組：更深一階 */
label[pt="drawer-group"]{
  background: #2f2f2f;
}

/* 單項：中間深度 */
label[pt="drawer-item"]{
  background: #383838;
}

/* 子選單容器：淺一階 + 縮排 */
menu[pt="drawer-sub"]{
  margin: 0;
  padding: 0;
  list-style: none;

  background: #3a3a3a;
  border-bottom: 1px solid rgba(0,0,0,.35);

  display: grid;
  gap: 0;

  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
}

/* 子項：更淺 + 左縮排 */
label[pt="drawer-subitem"]{
  background: #3a3a3a;
  padding-left: 28px;             /* 層次縮排 */
  font-weight: 800;
}

/* hover：不換背景，只提亮文字（維持你規則） */
label[pt="drawer-item"]:hover,
label[pt="drawer-subitem"]:hover,
label[pt="drawer-group"]:hover{
  color: #2F8F83;
}

/* 群組右側箭頭（chevron） */
label[pt="drawer-group"]::after{
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(255,255,255,.75);
  border-bottom: 2px solid rgba(255,255,255,.75);
  transform: rotate(45deg);       /* 預設向下/斜 */
  transition: transform .18s ease, opacity .18s ease;
  opacity: .85;
}

/* dd-public / dd-join checkbox 開啟 → 箭頭翻轉 */
input#dd-public:checked ~ label[pt="drawer-group"][data-dd="public"]::after{
  transform: rotate(-135deg);
}
input#dd-join:checked ~ label[pt="drawer-group"][data-dd="join"]::after{
  transform: rotate(-135deg);
}

/* dd-public / dd-join checkbox 開啟 → 展開子選單 */
input#dd-public:checked ~ menu[pt="drawer-sub"][data-dd="public"]{
  max-height: 520px;
}
input#dd-join:checked ~ menu[pt="drawer-sub"][data-dd="join"]{
  max-height: 520px;
}

/* 漢堡三條線 */
i[pt="hamburger"]{
  position: relative;
  width: 18px;
  height: 14px;
  display: inline-block;
}
i[pt="hamburger"] > span{
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #1f2a2a;
  border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease, top .18s ease;
}
i[pt="hamburger"] > span:nth-child(1){ top: 0; }
i[pt="hamburger"] > span:nth-child(2){ top: 6px; }
i[pt="hamburger"] > span:nth-child(3){ top: 12px; }

/* 打開 drawer → 漢堡變 X
   ⚠️ 這段取決於你 nav-toggle 在 navbar 根層（你前面那個結構修正） */
input#nav-toggle:checked ~ onnavbar[pt="inner"] label[pt="hamburger-btn"] i[pt="hamburger"] > span:nth-child(1){
  top: 6px;
  transform: rotate(45deg);
}
input#nav-toggle:checked ~ onnavbar[pt="inner"] label[pt="hamburger-btn"] i[pt="hamburger"] > span:nth-child(2){
  opacity: 0;
}
input#nav-toggle:checked ~ onnavbar[pt="inner"] label[pt="hamburger-btn"] i[pt="hamburger"] > span:nth-child(3){
  top: 6px;
  transform: rotate(-45deg);
}

/* -------------------------
   Responsive
------------------------- */
@media (max-width: 955px){
  menu[pt="menu-bar"]{
    display: none;
  }

   /* ✅ 手機不要右側 donate，縮合到 drawer */
  a[pt="nav-donate"]{ display: none; }

  label[pt="hamburger-btn"]{
    display: inline-flex;
  }

  onnavbar[pt="inner"]{
    justify-content: space-between;
  }

  [pt="logo-box"] {
    width: 400px;
    display: flex;
    /* justify-content: center; */
    align-items: baseline;
	}
	 /* 4) 手機：只改 inner 的 padding 變數，不覆寫整段 */
  onnavbar[pt="inner"]{
    --pad-y: 0px;
    --pad-x: 10px;

    gap: 10px;   /* 手機縮小一點更緊湊 */
  }
}


/*---SIDEBAR---*/
:root{
  --sb-open: 120px;   /* 展開寬度 */
  --sb-closed: 25px;  /* 收合時保留的可見寬度（當作把手） */
}

/* 固定在左側，預設只露出把手寬度 */
[pt="sidebar"]{

  position: fixed;      
  bottom: 100px;                 
  left: 0;              
  width: var(--sb-open);
  height: 150px; 
  z-index: 999;
  cursor: pointer;
  
  transform: translateX(calc(var(--sb-closed) - var(--sb-open)));
  transition: transform .48s ease, box-shadow .48s ease;
  box-shadow: none;

  display: flex;
  flex-direction: column; 
  justify-content: space-between; 
  align-items: center;     

  background: rgba(12,186,186,.3);      
  color: #fff;
  padding: 10px 0;
  border-radius: 0 10px 10px 0;

}

[pt="sidebar"]:focus-within{
  transform: translateX(0);
  box-shadow:6px 0 24px rgba(0,0,0,.18);
}

/* 進階：把手（擴大 hover 命中區，避免不好碰到） */
index[pt="sidebar"]::after{
  content: "";
  position: absolute;
  top: 0; right: -10px;
  width: 10px; height: 100%;
}
[pt="sidebar"]{
	  	display:none;
}
/* 滑入展開（滑出自動收回） */
@media (hover:hover) and (pointer:fine){
 	[pt="sidebar"]:hover,
  [pt="sidebar"]:focus-within{ 
    transform: translateX(0);
    box-shadow: 6px 0 24px rgba(0,0,0,.18);
  }
}


onsidebar[pt="fb"],
onsidebar[pt="service"],
onsidebar[pt="donation"]{
	display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
[pt^="text-"]{
	font-size: 16px;
	font-weight: 400;
}
onsidebar[pt="sidebar"]{
	display: flex; 
	align-items: center;
	flex-direction: column;
}
onsidebar[pt="fb"]{
	font-size: 30px;
	color: #364CDA; 
  padding: 10px;
  border-bottom: 1px solid var(--dark);
}
onsidebar[pt="service"]{
  font-size: 30px;
  padding: 10px;
/*  border-bottom: 1px solid var(--dark); */
  color: var(--dark);
}
onsidebar[pt="donation"]{
	display:none;
  position: fixed;
  bottom: 125px;
  right: 0;
  padding: 10px;
  color: var(--dark);
  border-radius: 9px 0 0 9px;
  background: rgba(247,168,21,.6);
  
  padding: 10px 18px;
}
onsidebar[pt="donation"]:hover{
	background: var(--text-gray);
	cursor: pointer;
	color: var(--light);
	transition: 
		background-color .25s ease;
	transform:
		translateY(-2px);
}
img[id="donate"]{
  width: 40px;
  padding: 10px;

}

[pt="totop"]{
	display:none;
  border-radius: 999px;
  position: fixed;
  bottom: 0;
  right: 0;
  background: var(--text-gray);
}

btn[pt="btn-top"]{
  display:flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;

  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .12s ease;
}


@media (hover: hover) and (pointer: fine){
  btn[pt="btn-top"]:hover{
  	border-radius: 999px;
  }

  [pt="totop"]:hover{
    background: var(--main-btn);           
    border-radius: 999px;
  }

}


/*CAROUSEL */
oncarousel[pt="carousel-container"]{
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: clamp(220px, 56.25vw, 70vh);
  margin-top: 80px;
}

oncarousel[pt="Content"]{
  position: relative;
  left: 0;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  will-change: left;        /*FOR JQUERY*/
}

oncarousel[pt="PlayItem"]{
  flex: 0 0 100vw;
  height: 100%;
  position: relative;
}

[pt="ImgLoader"]{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

/*CAROUSEL - MOBILE*/
@media (max-width:1024px){
  oncarousel[pt="carousel-container"]{
   margin-top:60px;
  }
}
@media (max-width:500px){
  oncarousel[pt="carousel-container"]{
   margin-top:50px;
  }
}
/*NEWS SECTION -- PC*/
[pt=news-background]{
	position:relative;
	background:var(--bg-main);
	height:110px;
	width: 100%;
}
[pt="news-background"]::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;

  background-image: url("../images/vol-tb-back.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 100% 100%;
    /* 👇 關鍵：上下左右顛倒 */
  transform: scale(-1, -1);

  pointer-events: none;
}


/* =========================
   NEWS (cards) - layout
========================= */

index[pt="news"]{
	background: var(--jp-paper);
}

onNews[pt="news-head"]{
  text-align:center;
  margin-bottom:60px;
}

onNews[pt="news-title"]{
	margin:0;
	font-weight:700;
	font-size: 28px;
  color: var(--jp-text);
  letter-spacing: .04em;
	
}
 onNews[pt="news-subtitle"]{
 	margin:0;
  font-size: 14px;
  color: var(--jp-muted);
}


/* 整段背景與置中 */
onNews[pt="news-wrap"]{
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: clamp(22px, 4vw, 44px) clamp(14px, 4vw, 24px);
  box-sizing: border-box;
}


/* -------------------------
   卡片群組：三欄置中
------------------------- */
ul[pt="news-cards"]{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2.2vw, 26px);

  align-items: stretch;
}

/* -------------------------
   卡片本體
------------------------- */
li[pt="news-card"]{
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  overflow: hidden;

  /* 卡片高度不要被內容撐爆太多，跟截圖接近 */
  display: flex;
}

figure[pt="card-kind"]{
	text-align:center;
}

li[pt="news-card"] > a[pt="card-link"]{
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

li[pt="news-card"]{
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

li[pt="news-card"] img[pt="card-img"]{
  transition: transform .6s ease;
}

/* hover 本體 */
li[pt="news-card"]:hover{
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    0 6px 14px rgba(0,0,0,.08);
}

/* 圖片微放大 */
li[pt="news-card"]:hover img[pt="card-img"]{
  transform: scale(1.06);
}

/* 光影掃過（偽元素） */
li[pt="news-card"]::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.35) 50%,
      transparent 70%
    );
  opacity:0;
  transform: translateX(-40%);
  transition: opacity .4s ease, transform .6s ease;
  pointer-events:none;
}

li[pt="news-card"]:hover::after{
  opacity:1;
  transform: translateX(40%);
}


/* -------------------------
   卡片上方「最新公告」區（用 :before 做出來）
   你現在 HTML 沒有這個元素，所以用偽元素最省事
------------------------- */

/* 分隔線 */
li[pt="news-card"] > a[pt="card-link"]::after{
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,.18);
  margin: 0 18px 14px;
}


/* -------------------------
   圖片區：固定高度 + 裁切置中
------------------------- */
figure[pt="card-media"]{
  margin: 0;
  padding: 0 18px;             /* 左右留白跟截圖接近 */
  box-sizing: border-box;
}

img[pt="card-img"]{
  display: block;
  width: 100%;
  height: 150px;               /* 你要更大就拉到 170~190 */
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
}


/* -------------------------
   文字區
------------------------- */
div[pt="card-body"]{
  padding: 14px 18px 18px;
  box-sizing: border-box;
  text-align: center;

  display: grid;
  gap: 10px;
}

/* 類別 + 日期：你截圖這張沒有顯示，可先藏起來 */
div[pt="card-meta"]{
  display: none;
}

h3[pt="card-title"]{
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;

  /* 讓卡片高度整齊：最多兩行，超過省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}



/* =========================
   RWD
========================= */

/* 平板：2 欄 */
@media (max-width: 980px){
  ul[pt="news-cards"]{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 手機：1 欄 */
@media (max-width: 560px){
  ul[pt="news-cards"]{
    grid-template-columns: 1fr;
  }

  img[pt="card-img"]{
    height: 170px; /* 手機可稍大，視覺更飽滿 */
  }
}


/*=======
ABOUT
========*/
index[pt="about"]{
  position: relative;        
  background: var(--bg-primary);
}

/* 1) 外層：寬度自適應、Grid 兩欄 */
onabout[pt="about-container"]{
  width: min(1280px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
  column-gap: clamp(10px, 4vw, 40px);
  align-items: start;              
  /* background: white;
  border-bottom: 1px solid; 
  padding: 20px;*/
}


/* 2) 左欄：用 gap 排版；用 margin-top:auto 把按鈕壓底（若需要） */
onabout[pt="about-left"]{
  display:flex;
  flex-direction: column;
  gap: 40px;
}

/* 內文與首字 */
onabout[pt="about-text"]{
  text-indent: 0;
  line-height: 1.6;
  font-size: clamp(16px, 1.15vw, 24px);
}
onabout[pt="about-text"]::first-letter{
  float: left;
  font-size: clamp(36px, 3vw, 60px);
  line-height: 1;
  font-weight: 600;
  margin-left: 0;                 /* ★ 不要再往內縮，避免行首擠壓 */
  margin-right: .25em;
  margin-top: -0.2em;
}

/* 3) 右欄圖片：用容器控制比例，圖用 object-fit */
onabout[pt="img-container"]{
  justify-self: center;
  width: 100%;
  max-width: clamp(320px, 38vw, 560px);
  aspect-ratio: 16 / 11;          /* 需要就改 4/3 或 1/1 */
}
onabout[pt="img-container"] > img[id="cover"]{
  display:block;
  width: 150%;
 /*  height: 100%;*/
  object-fit: contain;             /* 或 cover：若希望滿版裁切 */
}
:root{
  --switch-bg:        rgba(0,0,0,.08);      /* 膠囊底色 */
  --switch-glass:     rgba(255,255,255,.55);/* 可疊在淺色底上 */
  --switch-indicator: var(--main);
  --switch-text:      #374151;              /* 未選中文字 */
  --switch-text-on:   #fff;                 /* 選中熱門字色 */
  --switch-shadow:    0 4px 14px rgba(0,0,0,.15);
}
/* 外層膠囊容器 */
[pt="about-dots"]{
  position: absolute;
  top: 30px;
  right: 100px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 2px rgba(0,0,0,.06) inset;
  user-select: none;
  isolation: isolate;
}

/* 兩個選項按鈕（膠囊狀） */
btn[pt="about-prev"],
btn[pt="about-next"]{
  position: relative;
  z-index: 2;
  min-width: 128px;
  padding: 10px 16px;
  border-radius: 9999px;
  background: transparent;
  color: var(--switch-text, #444);
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 600;
  letter-spacing: .2px;
  text-align: center;
  cursor: pointer;
  transition: 
    background-color .25s ease,
    color .25s ease,
    transform .12s ease;
}

/* hover 效果 */
@media (hover:hover){
  btn[pt="about-prev"]:hover,
  btn[pt="about-next"]:hover{
    transform: translateY(-1px);
    background: rgba(0,0,0,.06);
  }
}

/* active 點擊壓下 */
btn[pt="about-prev"]:active,
btn[pt="about-next"]:active{
  transform: scale(.96);
}

/* focus outline */
btn[pt="about-prev"]:focus-visible,
btn[pt="about-next"]:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(30,158,148,.25);
}

/* ✅ 選中狀態（有 active 屬性時） */
btn[pt="about-prev"][active],
btn[pt="about-next"][active]{
  background: var(--switch-indicator, var(--main-btn, #1e9e94));
  color: var(--switch-text-on, #fff);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* 窄螢幕 */
@media (max-width:600px){
  btn[pt="about-prev"], btn[pt="about-next"]{
    min-width: 100px;
    padding: 8px 10px;
    font-size: 14px;
  }
}
/* ======================== */
/* 🔹 滑移亮色 indicator 底層 */
/* ======================== */
i[pt="about-indicator"]{
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 9999px;
  
  /* 亮色漸層底 */
 	background: var(--switch-indicator, var(--main-btn, #1e9e94));
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.35),
    0 2px 10px rgba(0,0,0,0.25);

  /* 動畫：位置＋透明度 */
  transition:
    transform .5s cubic-bezier(.25,.8,.25,1),
    opacity .5s ease;
  opacity: 0.95;
}

/* indicator 在第二顆按鈕下方時（右滑） */
[pt="about-dots"][data-active="1"] > i[pt="about-indicator"] {
  transform: translateX(100%);
}

/* indicator 初始狀態（在左側） */
[pt="about-dots"][data-active="0"] > i[pt="about-indicator"] {
  transform: translateX(0);
}

/* 讓文字在上層 */
[pt="about-dots"] btn[pt="about-prev"],
[pt="about-dots"] btn[pt="about-next"]{
  position: relative;
  z-index: 2;
}

/* 5) RWD：疊成一欄 */
@media (max-width: 1024px){
  onabout[pt="about-container"]{
    grid-template-columns: 1fr;
   /*    row-gap: 24px;*/
  }
  onabout[pt="img-container"]{
    max-width: min(520px, 92%);
    aspect-ratio: auto;           /* 行動裝置用圖自身比例 */
  }
}

	onabout[pt="about-btn"]{
		display: flex;
	  flex-wrap: wrap;
	  gap: clamp(10px, 1.8vw, 16px);
	  align-items: center;
	}

	btn[pt="btn-donate"],
	btn[pt="about-more"]
	{
		display: flex;
	  justify-content: center;
	  align-items: center;
	  min-width: 100px;
	  height: 55px;                      /* mobile: 44–48px */
	  padding: 0 20px;     
	  border: 3px solid transparent;
	  border-radius: 1000px;             
	  cursor: pointer;
	  box-shadow: 0 6px 18px rgba(0,0,0,.08);
	  transition:
	    background-color .25s ease,
	    color .25s ease,
	    border-color .25s ease,
	    box-shadow .25s ease,
	    transform .15s ease,
	    opacity .25s ease;
	}
 btn[pt="btn-donate"]{
		background: var(--donate-btn);
		color: var(--light);
	}
btn[pt="about-more"]{
		background: var(--main-btn);
		color: var(--light);
	}

	/* hover: focus on reversed btn */
	onabout[pt="about-btn"] > btn[pt="btn-donate"]:hover,
	onabout[pt="about-btn"] > btn[pt="btn-donate"]:focus-visible{
	  transform: translateY(-1px);
	  background-color: #fff;
	  color: var(--dark);
	  border-color: var(--main-btn);
	  box-shadow: 0 10px 24px rgba(0,0,0,.12);
	}
	onabout[pt="about-btn"] > btn[pt="about-more"]:hover,
	onabout[pt="about-btn"] > btn[pt="about-more"]:focus-visible{
		  transform: translateY(-1px);
		  background-color: #fff;
		  color: var(--dark);
		  border-color: var(--secondary-btn);
		  box-shadow: 0 10px 24px rgba(0,0,0,.12);
	}

/* ===== Tablet ≤ 1024px =====
   1280 → 1024 時，把兩欄疊成一欄、置中圖片與按鈕 */
@media (max-width: 1024px){
	index[pt="about"]{ padding: 5rem; }
  onabout[pt="about-btn"]{
  	justify-content:center;

  }
  img[id=cover]{ max-width: 380px; margin-inline:auto; }
	img[id=about]{ max-width: 220px; margin-inline:auto; }
	 /* 🔽 新增這一段：1024 以下膠囊置底置中 */
  [pt="about-dots"]{
    position: absolute;          /* 改為固定定位，不被內容推擠 */
    bottom: 0px;             /* 距離畫面底 24px，可再微調 */
    left: 50%;                /* 水平中心點 */
    transform: translateX(-50%);
    top: auto;                /* 取消原 top:30px 設定 */
    right: auto;
    background: rgba(255,255,255,0.65);
    padding: 8px 10px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    backdrop-filter: blur(8px);
  }

  /* 手指操作範圍放大（UX 提升） */
  btn[pt="about-prev"],
  btn[pt="about-next"]{
    min-width: 140px;
    padding: 10px 14px;
  }

  /* indicator 縮小些，滑動距離重算 */
  i[pt="about-indicator"]{
    top: 5px; bottom: 5px; left: 5px;
    width: calc(50% - 5px);
  }
	
}

/* ===== Mobile ≤ 850px ===== */
@media (max-width: 850px){
  index[pt="about"]{ padding: 3rem 1.5rem; }

  onabout[pt="about-text"]{
    text-indent: 0;       /* 仍維持兩字縮排 */
    line-height: 1.7;       /* 行高略放鬆，提升可讀性 */
  }
  onabout[pt="about-text"]::first-letter{
    /* 比桌機更保守的放大：不壓縮第二行 */
    font-size: clamp(32px, 6vw, 46px);
    line-height: 1;
    margin-left: 0;         /* 手機不再往右推，避免首行被擠 */
    margin-right: .2em;     /* 與正文留一點間距 */
    margin-top: -0.1em;     /* 微抬，讓頂線對齊更自然 */
  }
  img[id=cover]{ max-width: 300px; }
  onabout[pt="about-btn"] > btn[pt]{
  	height:48px;
  	padding:0 16px;
  }
}
/* ===== Small Mobile ≤ 500px（新增）=====
   滿版按鈕、縮小圖片、文字舒適邊距 */
@media (max-width: 500px){
  index[pt="about"]{ padding: 2.25rem 1rem; }
  onabout[pt="about-container"]{
    grid-template-columns: 1fr;
   /* gap: 20px; */
    text-align: start;
    padding:0;
  }
  onabout[pt="about-left"]{
  	gap:20px;
  }
  onabout[pt="about-text"]{
  	padding:10px;
  }
  img[id=cover]{ max-width: 360px; }
  img[id=about]{ max-width: 200px;  }
	
	/* 手指操作範圍放大（UX 提升） */
  btn[pt="about-prev"],
  btn[pt="about-next"]{
    min-width: 100px;
    padding: 8px 10px;
  }

  /* indicator 縮小些，滑動距離重算 */
  i[pt="about-indicator"]{
    top: 5px; bottom: 5px; left: 5px;
    width: calc(50% - 8px);
  }
}

/* =========================
   IMPACT SECTION (整理版)
   ========================= */

/* 外層 section */
index[pt="impact"]{
  display: flex;
  justify-content: center;
  background: var(--bg-primary);
}
/* ========== Impact: 紅色資訊帶（像參考圖） ========== */

/* 外層容器不重要，保留即可 */
onimpact[pt="impact-container"]{
  width: min(100%, 1300px);
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

/* 整條資訊帶 */
onimpact[pt="impact-banner"]{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;

  padding: 35px 20px;
  border-radius: 16px;

  background: #1F4E47;
  color: #fff;
  overflow: hidden;
}

/* 左側 CTA */
onimpact[pt="impact-left"]{
  flex: 0 0 280px;          /* 左邊固定寬一點 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

/* 標題（像 Let’s Start...） */
onimpact[pt="impact-topic"]{
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .2px;
}

/* 可選副標 */
onimpact[pt="impact-subtitle"]{
  opacity: .92;
  line-height: 1.5;
}


/* 右側統計區 */
onimpact[pt="impact-right"]{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

/* 三欄 */
onimpact[pt="card-group"]{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

card[pt="impact-metric"]{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

/* 每一欄（不要像卡片） */
card[pt="impact-item"]{
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 8px 10px;
  background: transparent;
  border-radius: 0;
}

/* 中間分隔線（像參考圖） */
card[pt="impact-item"] + card[pt="impact-item"]{
  border-left: 1px solid rgba(255,255,255,.25);
}

/* icon */
card[pt="label-icon"]{
  display: block;
  margin-bottom: 8px;
  font-size: clamp(18px, 2vw, 30px);   /* ← 改這裡 */
  opacity: .95;
}

/* 大數字 */
card[pt="impact-value"]{
  display: block;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  margin-bottom: 6px;
    font-size: clamp(22px, 2.2vw, 36px);
}

onimpact[pt="impact-topic"]{
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 900;
  line-height: 1.2;
}

card[pt="impact-label"]{
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: .8px;
  opacity: .95;
}

/* RWD：手機改直排，左區在上，三欄改直列 */
@media (max-width: 820px){
  onimpact[pt="impact-banner"]{
    flex-direction: column;
    gap: 14px;
  }

  onimpact[pt="impact-left"]{
    flex: 0 0 auto;
  }

  onimpact[pt="card-group"]{
    flex-direction: column;
    align-items: stretch;
  }

  card[pt="impact-item"] + card[pt="impact-item"]{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.25);
  }
}


/*---- VOLUNTEER SECTION ----*/

		
	:root{
	  --hs-primary: #348b81;

	  /* 日系米白與紙感 */
	  --jp-paper: #f2ebd4;         /* 大底 */
	  --jp-paper-2: #fbf8f0;       /* 卡片內底 */
	  --jp-line: rgba(47, 62, 59, .14);

	  /* 文字 */
	  --jp-text: #2f3e3b;
	  --jp-muted: rgba(47,62,59,.62);

	  /* 點綴（溫暖但不刺） */
	  --jp-warm: #f2a65a;          /* 溫暖橘 */
	  --jp-mint: #6fc2b0;          /* 薄荷綠 */

	  /* hover */
	  --jp-hover-bg: rgba(255,255,255,.70);
	  --jp-hover-ring: rgba(52,139,129,.18);
	}

/* =========================
   Volunteer Section (JP style)
========================= */
[pt="volunteer"]{
  background: var(--jp-paper);
  padding-bottom: 10px;
}

[pt="vol-container"]{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0 90px;
  /*margin-bottom:clamp(64px,12vh,160px);*/
}

[pt="vol-header"],[pt="media-header"]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

[pt="vol-title"],[pt="media-title"]{
  font-weight: 800;
  font-size: 28px;
  color: var(--jp-text);
  letter-spacing: .04em;
}

[pt="vol-subtitle"],[pt="media-subtitle"]{
  font-size: 14px;
  color: var(--jp-muted);
}

/* 外殼：像圖中的「白色公告卡」 */
div[pt="vol-list-wrap"]{
  width: min(980px, 92vw);
  margin: 0 auto;

  background: rgba(255,255,255,.62);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;

  box-shadow: 0 18px 44px rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

/* 每一列：日系的關鍵是「細線 + 留白」 */
row[pt="vol-item"]{
  display: grid;
  grid-template-columns: 110px 120px 150px 1fr;
  align-items: center;
  gap: 16px;

  padding: 18px 26px;
  border-top: 1px solid rgba(47,62,59,.12);

  background: rgba(255,255,255,.34);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

row[pt="vol-item"]:first-child{
  border-top: 0;
}

/* Hover：不要太浮誇，像圖那樣「淡淡亮起」 */
row[pt="vol-item"]:hover{
  background: var(--jp-hover-bg);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px var(--jp-hover-ring);
  cursor:pointer;
}

/* 日期：小、穩、略灰（像日站） */
cell[pt="vol-date"]{
  font-weight: 700;
  color: var(--jp-muted);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

cell[pt="vol-tag"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 26px;
  min-width: 74px;
  padding: 0 10px;

  border-radius: 6px;                 
  font-size: 14px;
 /* font-weight: 800; */
  letter-spacing: .06em;

  border: 1px solid rgba(47,62,59,.14);
  background: rgba(255,255,255,.55);
  color: var(--jp-text);
}

cell[pt="vol-tag"][data-area="n"]{
  background: #e3dbe6;
  color: #5f4a66;
}

cell[pt="vol-tag"][data-area="c"]{
  background: #e1e6d8;
  color: #5c6b4f;
}

cell[pt="vol-tag"][data-area="s"]{
  background: #eccd97;
  color: #6a4a1f;   /* 我幫你微調，比 #2a746c 更和諧 */
}
cell[pt="vol-tag"][data-area="e"]{
  background: #d6e2e8;
  color: #4a6573;
}

row[pt="vol-item"]:hover cell[pt="vol-tag"]{
  filter: brightness(1.05);
}


/* 標題：是主角，hover 只做顏色加深 */
cell[pt="vol-item-title"]{
  min-width: 0;
}

a[pt="vol-link"]{
  display: inline-block;
  color: rgba(47,62,59,.90);
  text-decoration: none;

  font-weight: 750;
  font-size: 16px;
  line-height: 1.4;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

row[pt="vol-item"]:hover a[pt="vol-link"]{
  color: #244a45; /* 主字更深一點 */
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 底部備註：淡淡置中 */
txt[pt="vol-note"]{
  display: block;
  text-align: center;
  margin: 14px auto 0;
  color: var(--jp-muted);
  font-weight: 650;
  font-size: 13px;
}

/* 空狀態 */
div[pt="vol-empty"]{
  padding: 22px 26px;
  color: var(--jp-muted);
  font-weight: 650;
}
cell[pt="vol-date"],cell[pt="vol-place"]{
	font-size:17px;
}


/* RWD：小螢幕改兩行 */
@media (max-width: 768px){
  row[pt="vol-item"]{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date tag"
      "title title";
    gap: 10px;
    padding: 14px 16px;
  }
  cell[pt="vol-date"]{ grid-area: date; }
  cell[pt="vol-tag"]{ grid-area: tag; justify-self: end; }
  cell[pt="vol-item-title"]{ grid-area: title; }
}

[pt="vol-background"]{
  position: relative;
  background-color: #fbfaf1;
  height:110px;
}

[pt="vol-background"]::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;

  background-image: url("../images/vol-tb-back.png");
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 100% 100%;

  pointer-events: none;
}


/*=====================
=========Media=========
=======================*/

/* =========================================================
   RV 區塊：左右 1:1（由 rv-wrap 控制）
   每欄：head / body / actions
========================================================= */

/* 兩欄容器 */
onmedia[pt="rv-wrap"]{
  width: min(1280px, 100%);
  margin-inline: auto;
  padding: clamp(18px, 3vw, 34px);
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 28px);
}

/* 每一欄（report / video） */
onmedia[pt="rv-col"]{
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  overflow: hidden;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* -------------------------
   HEAD：欄內標題
------------------------- */
onmedia[pt="rv-col"] > onmedia[pt="rv-head"]{
  display: flex;
  align-items: center;
  justify-content: flex-start;

  padding: 18px 18px 14px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

h3[pt="rv-title"]{
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  color:var(--jp-text);
}

/* -------------------------
   BODY：欄內內容（這裡不做左右 grid！）
------------------------- */
onmedia[pt="rv-col"] > onmedia[pt="rv-body"]{
  padding: 16px 18px;
  box-sizing: border-box;
}

/* -------------------------
   ACTIONS：欄內按鈕
------------------------- */
onmedia[pt="rv-col"] > onmedia[pt="rv-actions"]{
  padding: 12px 18px 18px;
  box-sizing: border-box;

  display: flex;
  justify-content: center;
}

/* =========================================================
   內容卡共用（report-card / video-card）
========================================================= */
div[pt="report-card"],
onmedia[pt="video-card"]{
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;

  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}

/* report 卡內容 */
div[pt="report-card"]{
  padding: 18px;
}

/* report 標題/內文 */
h4[pt="card-title"]{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

p[pt="card-desc"]{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}

/* report 卡可點 */
div[pt="report-card"][EXECUTEURI]{
  cursor: pointer;
}

/* -------------------------
   video 卡內容
------------------------- */
onmedia[pt="video-card"]{
  padding: 12px;
}

div[pt="card-media"]{
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

/* iframe RWD */
iframe#hs-video{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  border: 0;
}

div[pt="card-body"]{
  padding: 12px 6px 2px;
  box-sizing: border-box;
}

h4[pt="card-title"][id="video-caption"]{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}
p[pt="card-desc"][id="video-desc"]{
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  text-align:left;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* =========================================================
   RWD：手機改上下堆疊（只改 rv-wrap！）
========================================================= */
@media (max-width: 980px){
  onmedia[pt="rv-wrap"]{
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   REPORT + VIDEO (1:1) — 共享 rv-head（左右兩標題）
   結構：
   onmedia[pt=rv-wrap]
     ├─ onmedia[pt=rv-head]   (h3#report-title + h3#video-title)
     ├─ onmedia[pt=rv-body]   (左右內容 1:1)
     └─ onmedia[pt=rv-actions]（左右按鈕 1:1）
========================================================= */

	/* ===============
	最後宣傳底區塊 
	==================*/
[pt="ad-container"]{
		width:100%;
		background: linear-gradient(135deg,#9FBEB4,#CFE0D8);
	  display:flex;
	  justify-content:center;
	  align-items:center;
	  min-height:300px;
	  padding:24px;
	  color: var(--light);
	  column-gap: clamp(16px, 4vw, 48px);
	  row-gap:    clamp(12px, 2vw, 24px);
	  position: relative;
  	overflow: hidden;
  	margin-top:100px;
	}
[pt="ad-container"]::after{
	  content:"";
	  position:absolute;
	  inset:0;
	  background: radial-gradient(700px 320px at 25% 30%, rgba(255,255,255,.18), rgba(0,0,0,0) 60%),
	              radial-gradient(900px 420px at 90% 70%, rgba(0,0,0,.18), rgba(0,0,0,0) 55%);
	  pointer-events:none;
	}

	/* 左圖 */
	img[id="vol-icon"]{ width:200px; height:auto; flex:0 0 auto; }

	[pt="ad-right"]{ max-width: 680px; }
	[pt="ad-btn"]{
	  display:flex;
	  justify-content:flex-start;
	  align-items:center;
	  gap:10px;
	  flex-wrap:wrap;          /* 文字多時能自動換行到下一列 */
	  padding-top:
	}

	[pt="ad-title"]{
	  font-weight: 700;
	  line-height: 1.2;
	  letter-spacing: .02em;
	  /* 最小 22px → 隨寬度成長 → 最大 40px */
	  font-size: clamp(22px, 2.2vw + 0.5rem, 36px);
	  margin: 0 0 .5em;
	  
	}
	[pt="ad-content"]{
		margin: 0 0 .5em;
		text-indent: 2em;              /* 段首空兩格（只縮第一行）*/
		text-align: start;
	}

	@media (max-width: 720px){
	  [pt="ad-container"]{
	    flex-direction:column;
	    text-align:center;
	  }
	  [pt="ad-right"]{ max-width: 680px; }
	  [pt="ad-btn"]{ justify-content:center; }
	}
	/*======
	FOOTER
	========*/
	:root{
  /* 主視覺 */
  --hs-primary: #348b81;

  /* Footer 背景（暖灰、比較不平面） */
  --footer-bg: #f9f8f1;        /* 主背景建議 */
  /* #dfe3df;      footer-bottom 可用 */
 	--footer-bg-2: #20403b;

  /* 文字 */
  --footer-text: #2f3e3b;
  --footer-muted: #4a5a57;

  /* 分隔線 */
  --footer-line: rgba(47, 62, 59, .25);

  /* 活潑點綴 */
  --accent-mint: #6fc2b0;
  --accent-warm: #f2a65a;
  --accent-hope: #f6d36b;

  /* Hover（重點） */
  --link-hover: #2a746c;       /* 主色加深，穩重 */
  --link-hover-warm: #e1913f;  /* 溫暖橘 hover */
}

	/* -------------------------
   Footer: Top
------------------------- */
onfooter[pt="footer-top"]{
  display: flex;
  justify-content: space-around;
  gap: 20px;
  padding: 10px;
  position: relative;
  overflow: hidden;
  background-color: var(--hs-line);
  /*background-image: url("../images/bg-t-footer.png");*/
  background-repeat: repeat;
}

/* Logo */
img#hs-logo-green{
  width: clamp(200px, 22vw, 280px);
  height: auto;
  object-fit: contain; /* 保留清晰 logo，不要用 cover */
}

onfooter[pt="logo-box"]{
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

/* 右側區 */
[pt="external-link"]{
  width: 250px;
}

/* 區塊標題底線 */
[pt="title-contact"],
[pt="title-link"]{
  border-bottom: 1px solid var(--footer-line);
  color: var(--footer-text);
}

/* -------------------------
   Footer: Content Layout
------------------------- */
onfooter[pt="content-container"]{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* 每一列：icon + 文字 */
[pt="time"],
[pt="phone"],
[pt="mail"],
[pt="address"]{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.75rem;
  line-height: 1.6;
  color: var(--footer-muted);
}

/* icon 統一 */
contact[pt="icon"]{
  font-size: 1.1rem;
  color: var(--accent-mint);  /* 活潑薄荷：比純綠更有溫度 */
  flex-shrink: 0;
  width: 1.25em;
  text-align: center;
  margin-top: 2px;
}

/* 詳細文字 */
[pt="detail"]{
  font-size: 1rem;
  color: var(--footer-text);
  word-break: break-word;
}

/* -------------------------
   Footer: Links
------------------------- */
onfooter[pt="content-link"] > a[pt="footer-link"]{
  text-decoration: none;
  color: var(--footer-text);
  padding: 8px;
  border-radius: 10px;
  transition: color .2s ease, background-color .2s ease;
}

/* Hover：給一點「暖」的背景霧面感 */
onfooter[pt="content-link"] > a[pt="footer-link"]:hover{
  color: var(--link-hover);
  background-color: rgba(242, 166, 90, .18); /* 溫暖橘淡底 */
}

/* Email hover（如果 mail 是可點擊的） */
contact[pt="mail"] [pt="detail"]:hover{
  color: var(--link-hover-warm);
}

/* -------------------------
   Footer: Bottom
------------------------- */
[pt="footer-bottom"]{
  text-align: center;
  background: var(--footer-bg-2);
  /*background-image: url("../images/bg-t-footer.png");*/
  color: var(--footer-text);
  padding: 20px 0;
}

[pt="charity-name"],
[pt="gov-num"],
[pt="copyright"]{
  font-size: 14px;
  color: var(--light);
}

/* -------------------------
   RWD
------------------------- */
@media (max-width: 1050px){
  onfooter[pt="content-container"]{
    grid-template-columns: 1fr; /* 修正原本 2fr 的錯誤 */
  }
}

@media (max-width: 700px){
  [pt="footer-top"]{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  [pt="contact-info"],
  [pt="external-link"]{
    width: -webkit-fill-available;
  }
}

	
	
	/*========
	LOADING 遮罩
	==========*/
		
	layers[part=mask]{
	  display:none;
	  position:fixed;
	  inset:0;
	  z-index:999999;

	  background:#f9fafb;
	}

layers[part=mask] [pt="loading-card"]{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(360px, calc(100vw - 48px));
  padding:22px 20px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  text-align:center;
}

layers[part=mask] [pt="loading-mark"]{
  position:relative;
  width:56px; height:56px;
  margin:0 auto 10px;
}

layers[part=mask] [pt="ring"]{
  position:absolute; inset:0;
  border-radius:999px;
  border:2px solid rgba(14,165,163,.35);
  animation: hsPulse 1.4s ease-in-out infinite;
}

layers[part=mask] [pt="logo-dot"]{
  position:absolute; inset:8px;
  border-radius:999px;
  background:rgba(14,165,163,.12);
  border:1px solid rgba(14,165,163,.22);
  display:flex; align-items:center; justify-content:center;
}

layers[part=mask] [pt="care-glyph"]{
  font-size:18px;
  line-height:1;
  color:rgba(14,165,163,.95);
  transform:translateY(-1px);
}

layers[part=mask] [pt="loading-title"]{
  font-size:15px;
  font-weight:700;
  letter-spacing:.5px;
  color:rgba(0,0,0,.78);
  margin-bottom:6px;
}

layers[part=mask] [pt="loading-text"]{
  font-size:13px;
  color:rgba(0,0,0,.60);
  line-height:1.6;
}

layers[part=mask] [pt="loading-tagline"]{
  margin-top:10px;
  font-size:12px;
  color:rgba(0,0,0,.45);
  letter-spacing:.3px;
}

@keyframes hsPulse{
  0%{ transform:scale(1); opacity:.65; }
  70%{ transform:scale(1.22); opacity:.20; }
  100%{ transform:scale(1); opacity:.65; }
}