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

:root{
	--bg-primary: 	#FBFAF1;
	--bg-secondary: #FEFEFF;
	--bg-dark:			#348b81;
	--main-btn: 		#24BBA5;
	--donate-btn: 	#F7A815;
	--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;   /* 導覽背景（淡青綠） */
}


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

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

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:is([pt="news"], 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*/
/* === Base: Mobile (<500px) === */
btn[pt="btn-more"]{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 60px;        /* ← 500px 手機寬度 */
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  white-space: nowrap;
  background: var(--main-btn);
  color: #fff;
  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;
}

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

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

/* ≥1440px */
@media (min-width: 1440px){
  btn[pt="btn-more"]{
    min-width: 100px;
    height: 58px;
    padding: 0 26px;
    font-size: 18px;
    letter-spacing: .2px;
  }
}

/* 互動狀態（在支援 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(255,255,255,.25);
  }
  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(29,185,167,.35);
}

/*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(--light); }
Index[pt="screenup"]   {
/*	background: var(--main); */
	position: fixed;
	top:0;
	left:0;
	right:0;
	display; block;
	z-index:33;
}

Index[pt="navi"]{
	display: flex;
	justify-content:space-around;
	align-items:center;
	gap:10px;
	padding: 5px 8px 8px 0;
	/*padding: 5px 100px 0 100px;*/
	background: var(--bg-dark);
}

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

@media(max-width:500px){
	info[pt="content"]{
		display:none;
	}
	index[pt="navi"]{
		display:flex;
		justify-content:start;
	}
	[pt="nav-logo-box"]{
		display:flex;
		justify-content:start;
	}
}
/*---navbar Logo---*/
[pt="icon"]{display:none;}
Menu[pt="Twtext"],Menu[pt="Ustext"]{padding: 0;}

img[id="hs-logo"]{
	width: clamp(180px, 22vw, 280px);
 	height: auto; 
	object-fit:cover;
}

/*---導覽選單---*/
index[pt="menu"]{
  display:flex; justify-content:center; align-items:center;
  position:relative; z-index:50;
  max-width: 100% !important;
  background: var(--sb-active-bg);
}
@media(max-width:1200px){
	index[pt="menu"]{
  display:flex; justify-content:start; align-items:center;
  position:relative; z-index:50;
  max-width: 100% !important;
  background: var(--sb-active-bg);
}
}
onnavbar[pt="navbar"]{ display:flex; justify-content:center; }

/* 桌機選單的容器與內容 */
menu[pt="border"]{ margin:0; padding:0; }
menu[pt="content"]{
  width:100%;
  display:grid;
  padding:0;
  grid-template-columns: repeat(8, 150px); /* 桌機固定欄 */
}
menu[pt="menuItem"]{ padding:0; cursor:pointer; }
menu[pt="menuItem"] > [pt="Twtext"]{ font-size:18px; }
[pt="menu-container"]{ display:block; text-align:center; padding:0; color: var(--text-dark) !important;}


/* === 漢堡鈕（預設桌機隱藏） === */
btn[pt="nav-toggle"], label.btn[pt="nav-toggle"]{
  display:none;
  position:relative; z-index:888;
  cursor:pointer; padding:8px 10px;
  border-radius:10px; 
}

/* 兩條線圖示 */
i[pt="hamburger"]{
  position:relative; width:24px; height:18px; display:inline-block;
}
i[pt="hamburger"] > span{
  position:absolute; left:0; right:0; height:2px; background:var(--text-dark);
  transition:transform .22s ease, top .22s ease, opacity .22s ease;
}
i[pt="hamburger"] > span:nth-child(1){ top:3px; }
i[pt="hamburger"] > span:nth-child(2){ top:13px; }

/* 遮罩（關閉狀態） */
label[pt="nav-mask"]{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease; z-index:55;
}

/* 抽屜（獨立容器；關閉狀態） */
onnavbar[pt="drawer"]{
  position:fixed; inset:0 auto 0 0; width:min(80vw, 320px);
  transform:translateX(-100%);
  background:var(--light); box-shadow:0 10px 32px rgba(0,0,0,.18);
  z-index:70; transition:transform .25s ease;
  padding:18px 14px;
}
menu[pt="list"]{ display:flex; flex-direction:column; gap:8px; }
menu[pt="list"] > a[pt="link"]{
  display:block; padding:12px 10px; border-radius:10px;
  color:var(); text-decoration:none; transition:background-color .2s ease;
}
@media (hover:hover){
  menu[pt="list"] > a[pt="link"]:hover{ background:rgba(0,0,0,.06); }
}


/* === 手機/平板： 顯示漢堡鈕、關閉桌機選單 === */
@media (max-width:1200px){
  label.btn[pt="nav-toggle"]{ display:inline-flex; align-items:center; gap:8px; }
  /* 手機/平板隱藏桌機水平選單（只藏這兩個） */
  menu[pt="border"], menu[pt="content"]{ display:none; }
}

/* === checkbox 狀態控制：打開抽屜、顯示遮罩、圖示變 X === */
#nav-toggle:checked ~ onnavbar[pt="drawer"]{ transform:translateX(0); }
#nav-toggle:checked ~ label[pt="nav-mask"]{
  opacity:1; visibility:visible; pointer-events:auto;
}
#nav-toggle:checked ~ label.btn[pt="nav-toggle"] i[pt="hamburger"] > span:nth-child(1){
  top:8px; transform:rotate(45deg);
}
#nav-toggle:checked ~ label.btn[pt="nav-toggle"] i[pt="hamburger"] > span:nth-child(2){
  top:8px; transform:rotate(-45deg);
}

/* ❌ 移除以下衝突寫法（請刪掉你原本的這些）
   - 任何把 menu[pt="content"] 重新定位為抽屜的樣式
   - 任何 .nav-open / html.nav-lock / body.nav-lock 的規則 */
menu[pt="list"]{ display:flex; flex-direction:column; gap:8px; }

label[pt="dItem"]{
  display:block; cursor:pointer;
  padding:12px 10px; border-radius:10px;
  background:transparent; color:var(--text-dark); 
  transition:background-color .2s ease, transform .06s ease;
  user-select:none;
}
label[pt="dItem"]:active{ transform:scale(.98); }

label[pt="dItem"] > [pt="tw"]{
  display:block; font-size:16px; line-height:1.3;
}
label[pt="dItem"] > [pt="us"]{
  display:block; font-size:13px; color:#666; margin-top:2px;
}

@media (hover:hover){
  label[pt="dItem"]:hover{ background:rgba(0,0,0,.06); }
}

/* === 桌機：≥1025 保留原本 Grid 版 === */
@media (min-width: 1025px){
  /* 這裡才使用 Grid 欄數設定；抽屜規則不會套用到桌機 */
  menu[pt="content"]{
    width: 100%;
    display: grid;
    padding: 0;
    grid-template-columns: repeat(8, 150px) auto;  /* 依你需求改寬度 */
    /* gap: 10px; 可視需要開啟 */
  }
  menu[pt="menuItem"]{ padding: 0; }
  menu[pt="menuItem"] > [pt="Ustext"]{ display: inline; }
  menu[pt="menuItem"] > [pt="Twtext"]{ font-size: 18px; }

  /* 桌機隱藏遮罩/開關（保險） */
  btn[pt="nav-toggle"]{ display: none; }
  onnavbar[pt="nav-mask"]{ display: none; }
}

menu[pt="menuItem"][mid="6"]{background: var(--donate-btn);}

/* 基底 */
menu[pt="menuItem"]{
  position: relative;
  display: flex; 
  align-items: center; 
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease, border-color .18s ease;
  outline: none;
  color: var(--text-dark);
}
/*（Thick Baseline Grow）*/
menu[pt="menuItem"]{ position:relative; }
menu[pt="menuItem"]::before{
  content:""; position:absolute; left:50%; right:50%; bottom:-2px; height:10px;
  background: var(--donate-btn);
  transition: left .5s ease, right .5s ease, opacity .4s ease; opacity:0;
}
@media (hover:hover) and (pointer:fine){
  menu[pt="menuItem"]:hover::before{ left:6px; right:6px; opacity:1; }
	menu[pt="menuItem"]:hover > [pt="menu-container"]{
	  color: var(--donate-btn) !important;
	  font-weight: 600;
	}
  menu[pt="menuItem"][mid="6"]:hover > [pt="menu-container"]{
     color: var(--menu-accent) !important;/* Donate 例外 */
    font-weight: 600;
  }
}
menu[pt="menuItem"]:focus-visible::before{ left:6px; right:6px; opacity:1; }

/* Donate 專屬底線 */
menu[pt="menuItem"][mid="6"]::before{
  background: color-mix(in oklab, var(--donate-btn) 70%, #000 10%);
}

/*=== Active（選定頁）固定狀態 === */
menu[pt="menuItem"][active]::before{
  left:6px; right:6px; opacity:1;
}
menu[pt="menuItem"][active] > [pt="menu-container"]{
  color: var(--donate-btn) !important;
  font-weight: 700;
}
menu[pt="menuItem"][mid="6"][active] > [pt="menu-container"]{
  color: var(--menu-accent) !important;
}

/* === 觸控裝置：保留點擊回饋、不做浮起動畫 === */
@media (hover:none){
  menu[pt="menuItem"]:active{
    background: rgba(0,0,0,.06);
    border-radius: 14px;
  }
}
/*---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: 140px;
}

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*/
onnews[pt="news-container"]{
	display: grid;
  grid-template-columns: clamp(180px, 24%, 320px) 1fr;
  column-gap: clamp(16px, 2vw, 32px);
  max-width: clamp(960px, 88vw, 1280px);
  margin-inline: auto;
  align-items: stretch;     /* same height*/

}

onnews[pt="news-left"] {
  /*	outline:1px solid darkblue;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

[pt="news-icon"]{
	display:flex;
	justify-content: start;
}


onnews[pt="news-btn"]{
	display: flex;
	justify-content: start;
	align-items: center;
	 /*padding: 16px 0;*/
}

	/* hover: focus on reversed btn */
	onnews[pt="news-btn"] > btn[pt="btn-more"]:hover,
	onnews[pt="news-btn"] > btn[pt="btn-more"]: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);
	}
/* 列表基礎 */
ul[pt="news-list"]{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 一列：分類 / 日期 / 標題 / 右箭頭 */
li[pt="list-item"]{
  display: grid;
  grid-template-columns: 6em 9ch 1fr 24px; /* 固寬/等寬數字/彈性/箭頭 */
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--dark);
}

/* 分類（粗體、固定不換行） */
li[pt="list-item"] > item[pt="kind"]{
  font-weight: 700;
  color: var(--text-gray);
  white-space: nowrap;
}

/* 日期（等寬數字更整齊） */
li[pt="list-item"] > item[pt="date"]{
  color: var(--text-gray);
  white-space: nowrap;
  font-feature-settings: "tnum" 1; /* tabular numbers */
}

/* 標題（單行省略）*/
li[pt="list-item"] > item[pt="title"]{
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 右側箭頭（若無字型可用 pseudo） */
li[pt="list-item"] > item[pt="icon"]{
  justify-self: end;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--text-gray);
}
li[pt="list-item"] > item[pt="icon"]::before{
  content: "›"; /* 或 \203A、\f105 (Font Awesome) */
  font-size: 20px; line-height: 1;
}

/* 互動（整列 hover 高亮）*/
@media (hover:hover){
  li[pt="list-item"]:hover{
    background: rgba(0,0,0,.03);
  }
}

/* 可近性：鍵盤焦點 */
li[pt="list-item"]:focus-within{
  outline: 2px solid rgba(0,0,0,.08);
}
/* ===== 共用：News 區 ===== */
index[pt="news"] onnews[pt="news-container"]{
  display: grid;
  grid-template-columns: 1fr 1fr;      /* desktop: 左右兩欄 */
  gap: 24px;
}

/* 清單 */
ul[pt="news-list"]{
  list-style: none;
  margin: 0;
  padding: 0 12px;                     /* 手機/桌機都可用的安全邊距 */
}

/* 每列：分類 | 標題 | icon */
ul[pt="news-list"] li[pt="list-item"]{
  display: grid;
  grid-template-columns: 8.5em 1fr 20px;
  grid-template-areas: "kind title icon";
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

/* 讓 <a pt="rowlink"> 不破壞格線（整列可點） */
li[pt="list-item"] > a[pt="rowlink"]{ display: contents; }

/* 區塊對應格線 */
li[pt="list-item"] > item[pt="kind"] { grid-area: kind; color:#666; white-space: nowrap; }
li[pt="list-item"] > item[pt="title"]{ 
  grid-area: title; 
  min-width: 0;              /* 讓 ellipsis 生效 */
  overflow: hidden;
  text-overflow: ellipsis; 
  white-space: nowrap;       /* 單行省略 */
}
li[pt="list-item"] > item[pt="icon"] { grid-area: icon; text-align: right; }

/* 日期：桌機隱藏、手機才併到標題前
li[pt="list-item"] > item[pt="date"]{ display: none; } */

/* ===== 平板 ≤1024：收成一欄 ===== */
@media (max-width: 1024px){
	onnews[pt="news-left"]{
		display: flex;
    flex-direction: row;
	}
  index[pt="news"] onnews[pt="news-container"]{
    grid-template-columns: 1fr;        /* 單欄 */
    row-gap: 16px;
  }
}

/* ===== 手機 ≤500：更緊湊、日期併到標題 ===== */
@media (max-width: 500px){
  onnews[pt="news-right"]{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100vw;
    margin: 0 auto;
    padding-top: 0;
  }
		onnews[pt="news-left"]{
				display: flex;
		    flex-direction: row;
			}
  /* list row 更緊湊 + 三欄 */
  ul[pt="news-list"] li[pt="list-item"]{
    gap: 10px;
    padding: 12px 0;
    grid-template-columns: 7.5em 1fr 20px;
    grid-template-areas: "kind title icon";
  }

  /* 日期顯示在標題前，淡色小字 */
  li[pt="list-item"] > item[pt="date"]{
    display: inline;
    color: var(--text-gray, #888);
    margin-right: 8px;
    font-size: 13px;
  }

  /* 標題保持省略 */
  li[pt="list-item"] > item[pt="title"]{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 分類略縮寬 */
  li[pt="list-item"] > item[pt="kind"]{ width: 100px; }
}



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, 1.2fr) minmax(360px, .8fr);
  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: 100%;
 /*  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;             /* capsule*/
	  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----*/
	index[pt="impact"]{
		display: flex;
		justify-content: center;
		background: var(--bg-primary);
	}
	card[pt="impact-item"][iid="0"],
	card[pt="impact-item"][iid="2"]{
		background: #096B72;
	}
	card[pt="impact-item"][iid="1"]{
		background: #A2E4DD;
	}
	[pt="impact-item"][iid="1"] [pt="impact-label"]{
		color: var(--dark);

	}
	[pt="impact-item"][iid="1"] [pt="impact-value"]{
		color: var(--dark);

	}
	onimpact[pt="impact-container"]{
		width: min(100%, 1300px);
		padding: 40px 20px 0 20px;
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: var(--bg-secondary);
		box-sizing: border-box;
	}

	onimpact[pt="impact-top"]{
		display: flex;
		justify-content: space-evenly;
	}

	onimpact[pt="impact-leftop"]{
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	onimpact[pt="impact-rightop"]{
		max-width: 1080px;
		display:flex;
		flex-direction: column;
		justify-content: space-between;
	}

	onimpact[pt="card-group"]{
		 /* 可調參數 */
	  --col: 200px;          /* 欄寬（桌機） */
	 /*   --gap: 24px;          欄間距 */
	  --pad-x: 10px;         /* 左右 padding */

	  display: inline-grid;                              /* 關鍵：縮到剛好 */
	  grid-template-columns: repeat(3, var(--col));      /* 永遠 3 欄 */
	  gap:  24px;
	  padding: 0 var(--pad-x);
	  margin-inline: auto;
	  box-sizing: border-box;
	}

/* 卡片（字級用 clamp 流體縮放） */
	card[pt="impact-item"]{
	  position: relative;
	  display: flex;
	  flex-direction: column;
	 /* gap: 15px; */
	  gap: 10px;      /* 隨視窗縮放 */
	  padding: 10px;
	  border-radius: 16px;
	  box-shadow: 0 8px 24px rgba(0,0,0,.06);
	  aspect-ratio: 4 / 3;
	  min-height: 140px;
	  border: 1px solid var(--dark);
	  text-align: center;
	  overflow: visible;
	}
	card[pt="impact-item"]{
	  position: relative;
	  overflow: visible;            /* 允許右下角超出邊界 */
	  border-radius: 16px;
	  text-align: center;
	}

	/* 2) 右下角圓標：固定尺寸、陰影、黑/白圖示都可 */

	card[pt="impact-item"] > card[pt="label-icon"]{
	 --pop: 30%;
  position: absolute; right: 10px; bottom: 8px;
  font-size: clamp(25px, 1vw, 30px);   /* 相對卡片字級 */
  padding: .6em .55em;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--light); color: var(--dark);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transform: translate(var(--pop), var(--pop));
	}

/* 永遠 3 欄 → 每第 3 個是最右欄：取消探出
onimpact[pt="card-group"] > card[pt="impact-item"]:nth-child(3n)
  > card[pt="label-icon"]{ --pop: 0%; }*/

	card[pt="impact-label"]
	{
		color: var(--light);
		font-size: 24px;
	}
	card[pt="impact-value"]
	{
		color: #F4DB57;
		font-size: 35px;
		font-weight: 800;
		text-align: center;
	}

	onimpact[pt="impact-source"]{
		text-align: end;
		padding-top: 50px;
	}

	onimpact[pt="impact-bottom"]{
		display: flex;
		justify-content: center;
	}

	/*（保險）外框避免偶發水平捲動 */
onimpact[pt="impact-container"]{ overflow-x: clip; }

	@media (max-width: 1024px){
		onimpact[pt="impact-top"]{
			display: flex;
			flex-direction: column;
		}
		onimpact[pt="impact-leftop"]{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		onimpact[pt="impact-rightop"]{
			padding-top:50px;
		}
		onimpact[pt="impact-container"]{
	    width: 100%;              /* 直接滿版即可 */
	    padding: 32px 20px 0;     /* 邊距縮一點 */
	  }
	 	onimpact[pt="card-group"]{
	 		gap: 10px;
	 		}
  	card[pt="impact-item"]{
  		width: 160px;
  		font-size: clamp(14px, 1vw + .1rem, 17px);
  	}

	  card[pt="impact-label"]
		{
			font-size: 25px;
		}
		card[pt="impact-value"]
		{
			font-size: 30px;
			font-weight: 800;
		}
		card[pt="impact-item"] > card[pt="label-icon"]{
		   --pop: 35%;                   /* ← 右下角往外探出的百分比 */
		  position: absolute;
		  right: 12px; bottom: 10px;
		  transform: translate(var(--pop), var(--pop));
		  padding: 20px 15px;
		  border-radius: 999px;
		  display: grid; place-items: center;
		  font-size: 25px;
		  background: var(--light);
		  color: var(--dark);
		  box-shadow: 0 8px 20px rgba(0,0,0,.18);
		}
	}
	@media (max-width: 700px){
		onimpact[pt="impact-top"]{
			display: flex;
			flex-direction: column;
		}
		onimpact[pt="impact-leftop"]{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		onimpact[pt="impact-rightop"]{
			padding-top:20px;
		}
		onimpact[pt="impact-container"]{
	    width: 100%;
	    padding: 40px 12px 0;     /* 手機更窄的安全內距 */
	  }
	onimpact[pt="card-group"]{
		display: inline-grid;                              /* 關鍵：縮到剛好 */
	  grid-template-columns: repeat(1, 200px);      /* 永遠 3 欄 */
	}
  card[pt="impact-item"]{

    font-size: 16px;
    aspect-ratio: 16 / 12;   /* 稍扁一點，資訊更好放 */
    min-height: 120px;
  }
  card[pt="impact-item"] > card[pt="label-icon"]{
    --pop: 0%;               /* 手機乾脆不探出最穩 */
    font-size: 1.2em; padding: .5em .45em;
  }
	   card[pt="impact-label"]
		{
			font-size: 20px;
		}
		card[pt="impact-value"]
		{
			font-size: 30px;
		}
		card[pt="impact-item"] > card[pt="label-icon"]{

		   --pop: 35%;                   /* ← 右下角往外探出的百分比 */
		  position: absolute;
		  right: 12px; bottom: 10px;
		  transform: translate(var(--pop), var(--pop));
		  padding: 15px 10px;
		  border-radius: 999px;
		  display: grid; place-items: center;
		  font-size: 20px;
		  background: var(--light);
		  color: var(--dark);
		  box-shadow: 0 8px 20px rgba(0,0,0,.18);
		}
		onimpact[pt="impact-source"]{
			text-align: center;
			padding-top: 50px;
		}

	}

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

	onVolunteer[pt="ad-container"]{
	  background:#348B81;
	  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);
	}

	/* 左圖 */
	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){
	  onVolunteer[pt="ad-container"]{
	    flex-direction:column;
	    text-align:center;
	  }
	  [pt="ad-right"]{ max-width: 680px; }
	  [pt="ad-btn"]{ justify-content:center; }
	}

	[pt="volunteer"]{
		background: var(--bg-primary);
    padding-bottom: 50px;
	}
	[pt="vol-container"]{
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	[pt="vol-table"]{
		max-width:1200px;
	}


/* 整體外殼 */
[pt="vol-container"]{
  max-width:960px;
  margin:30px auto 3rem;
  padding:2rem 2.5rem;
  border:2px solid #0f766e;
  background:#f8fafc;
}

/* 上方 icon + 標題區 */
[pt="vol-top"]{
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
[pt="icon-container"] img[id="volunteer"]{
  max-width: 120px;
  height: auto;
}

/* 主標 / 副標 */
[pt="vol-header"]{
  text-align: center;
}
[pt="vol-title"]{
  display:block;
  text-align:center;
  font-size:1.6rem;
  letter-spacing:.1em;
  margin-bottom:.3rem;
}
[pt="vol-subtitle"]{
  display:block;
  text-align:center;
  font-size:.9rem;
  color:#475569;
  margin-bottom:1.2rem;
}

/* 手機版本：篩選列 */
[pt="vol-filter"]{
  display:none; /* default hidden, only mobile shows */
  justify-content:center;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.5rem;
}
@media(min-width:800px){
  [pt="vol-regions-grid"]{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:2rem;
  }
}
@media(max-width:800px){

  /* 顯示篩選 select */
  [pt="vol-filter"]{
    display:flex;
  }

  /* 預設全部隱藏 */
  [pt="vol-region"]{
    display:none;
  }

  /* 預設對應順序 */
  [pt="vol-region"][area="north"]{
    display:block;
  }
}


label[pt="vol-label"]{
  font-size: .9rem;
}
select[pt="vol-select"]{
  padding: .3rem .6rem;
  border-radius: 999px;
  border: 1px solid #ccc;
  font-size: .9rem;
}


/* 區域標題（例如：北部地區） */
ttl[pt="vol-region-title"]{
  display:block;
  font-size:1.05rem;
  padding:.4rem .75rem;
  margin:0 0 .5rem;
  background:#e0f2f1;
  border-left:4px solid #0ea5a3;
}

/* grid 容器 */
/* 整個假表格容器（只負責 group rows） */
volgrid[pt="vol-grid"]{
  display:grid;
  gap:6px;
}

/* 每一列表頭與資料列 */
row[pt="vol-row-head"],
row[pt="vol-row"]{
  display:grid;
  grid-template-columns: 60px 80px minmax(0,1fr) minmax(110px, auto);
  padding:.6rem .8rem;
  border-radius:4px;
  background:#fff;
  border:1px solid #e2e8f0;
  align-items:center;
  column-gap:12px;
}

/* 表頭背景 */
row[pt="vol-row-head"]{
  background:#0f766e;
  color:#fff;
  font-weight:600;
}

cell[pt="vol-cell"]{
  font-size:.95rem;
}

/* 報名按鈕右側（原本 .vol-actions） */
cell[pt="vol-actions"]{
  display:flex;
  justify-content:flex-end;
}

/* 報名鈕 */
a[pt="btn-signup"]{
	display:inline-flex;
	align-items:center;
  justify-content:center;
  white-space:nowrap;
  
  padding:.35rem .9rem;
  border-radius:999px;
  background: var(--donate-btn);
  color: var(--light);
  font-size:.9rem;
  text-decoration:none;
  margin-top: 0;
}
a[pt="btn-signup"]:hover{
  filter:brightness(1.05);
}

/* 備註文字 */
txt[pt="vol-note"]{
  display:block;
  margin-top:1rem;
  font-size:.8rem;
  color:#475569;
  text-align:right;
}

/* 窄螢幕專用調整 */
@media (max-width: 500px){

  /* 一般資料列的 grid 改成兩欄：日期 + 其他 */
  row[pt="vol-row-head"],
  row[pt="vol-row"]{
    grid-template-columns: 50px 70px minmax(0, 1fr);
    grid-auto-rows: auto;
  }

  /* 「報名」那一格改成佔滿第二列，放在最下面 */
  cell[pt="vol-actions"]{
    grid-column: 1 / -1;   /* 從第 1 欄跨到最後一欄 */
    justify-content: flex-end;
   	margin-top: 4px;     /*    和上面的資料留一點距離 */
  }

  /* 確保按鈕本身不要被壓到變形 */
  a[pt="btn-signup"]{
    white-space: nowrap;   /* 文字不要換行 */
    min-width: 80px;       /* 至少保留一個基本寬度 */
    text-align: center;

  }
}

  /*---Media---*/
	index[pt="media"]{

		display: flex;
		justify-content: center;
		background: var(--bg-primary);
	}

	[pt="report-top"],
	[pt="video-top"]{
		display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    width: 100%;
	}

	content[pt=content-item]{
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
		padding: 10px;
		background: var(--bg-secondary);
    /* border-radius: 10px; */
    border-bottom: 1px solid var(--dark);
	}
	content[pt=re-title]{

		font-weight: 500;
	}
	content[pt=re-press]{
		font-size: smaller;
	}
	/* 區塊外觀與版心邏輯 */
	index[pt="media"]{
	  /* 版面 */
	  display: flex;
	  flex-wrap: wrap;                /* 需要時允許換行 */
	  gap: 24px;                      /* 欄間距 */
	  justify-content: center;        /* 兩欄整體置中 */
	  align-items: flex-start;

	  /* 外觀 */
	  background: var(--bg-primary);
	  padding: 0 48px 16px;
	}

	/* base：兩欄，單欄上限 680 */
index[pt="media"]{
  display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
  padding:48px 16px; background:var(--bg-primary);
}
index[pt="media"] > onmedia[pt="report-container"],
index[pt="media"] > onmedia[pt="video-container"]{
  flex:1 1 560px;          /* 理想寬度 */
  max-width:680px;         /* 每欄上限（在大螢幕時） */
  min-width:0;
}

/* <=1260：改一欄，並允許欄位寬到 1280（不超過視窗） */
@media (max-width: 1260px){
  index[pt="media"]{ flex-direction:column; align-items:center; }
  index[pt="media"] > onmedia[pt="report-container"],
  index[pt="media"] > onmedia[pt="video-container"]{
    flex:0 1 auto;
    width: min(100%, 1280px);  /* 1260 螢幕時會是 1260，螢幕更大時到 1280 */
    max-width:1280px;          /* 放寬上限 */
  }
}

	@media (max-width: 720px){
	  index[pt="media"]{ padding:32px 12px; }
	}

	/* 容器控制欄寬 */
	[pt="video-iframe"]{
	  width: 680px;
	}

	/* 1300 以下：改單欄，允許到 1280，但不超過視窗寬 */
	@media (max-width: 1260px){
	  [pt="video-iframe"],
	  [pt="video-text"]{
	    width: 1000px;
	}
	  [pt="video-caption"]{
	  	font-size: 22px;
	  }
	}
	@media (max-width: 1000px){
	  [pt="video-iframe"],
	  [pt="video-text"]{
	    width: 800px;
	    font-size: 22px;
	  }
	}
	@media (max-width: 800px){
	  [pt="video-iframe"],
	  [pt="video-text"]{
	    width: 680px;
	  }
	}
	@media (max-width: 680px){
	  [pt="video-iframe"],
	  [pt="video-text"]{
	    width: 390px;
	  }
	  [pt="video-caption"]{
	  	font-size: 18px;
	  }
	}
	/* 讓 iframe 跟著容器縮放並維持 16:9 比例 */
	[id="hs-video"]{
	  width: 100%;
	  aspect-ratio: 16 / 9;
	  height: auto;
	  display: block;
	  border: 0;
	}

	onmedia[pt="video-container"]{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
   /* background: #404040; */
    padding: 0 10px 30px;
	}
	[pt="video-text"]{
		background: var(--light);
    padding-top: 10px;
    border-radius: 0 0 10px 10px;
	}
	[pt="video-caption"]{
		font-weight: 500;
		padding: 10px;
	}
	[pt="video-desc"]{
		font-weight: 400;
		padding: 10px;
	}

	content[pt="content-item"]{
	  display: flex;
	  align-items: flex-start;
	  gap: clamp(12px, 2.5vw, 20px);
	  padding: clamp(12px, 2vw, 16px);
	  background: var(--bg-secondary);
	  border-bottom: 1px solid var(--border, rgba(0,0,0,.12));
	}
	content[pt="content-item"] [pt="report-detail"]{ order: 0; min-width:0; }
	content[pt="content-item"] [pt="report-img"]{ order: 1; }
	/* last-child no border-line*/
	content[pt="content-item"]:last-child{
	  border-bottom: 0;
	}



	@media (hover:hover) and (pointer:fine){
	  content[pt="content-item"]{
	    transition: background-color .2s ease, box-shadow .2s ease, transform .15s ease;
	  }

	}
	content[pt="content-item"]:hover{
	    background-color: lightblue;
	    box-shadow: 0 1px 8px rgba(0,0,0,.06);
	    transform: translateY(-1px);
	    font-size:20px;
	  }
	  content[pt="content-item"] [pt="report-img"]{
	  flex: 0 0 200px;                          /* fixed height */
	  aspect-ratio: 4 / 3;
	  border-radius: 10px;
	  overflow: hidden;
	  img {
		  	width:100%;
		  	height:100%;
		  	object-fit:cover;
		  	display:block;
	  	}
	}
	/* 右側文字容器 */
	content[pt="content-item"] [pt="report-detail"]{
	  flex: 1 1 auto;
	  min-width: 0;                            /* ！讓文字能在 flex 內正確縮排/截斷 */
	}

	/* 標題/內文的行數與省略（可選） */
	content[pt="content-item"] [pt="re-title"]{
	  font-weight: 700;
	  font-size: clamp(18px, 2.5vw, 20px);
	  line-height: 1.4;
	  display: -webkit-box;                    /* 多行省略 */
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	}
	content[pt="content-item"] [pt="re-press"]{
	  color: var(--muted, #666);
	  font-size: 14px;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}

	/* 手機 RWD：720 以下調整排版與間距 */
	@media (max-width: 720px){
	  content[pt="content-item"]{
	    gap: 12px;
	    padding: 12px 10px;
	  }
	  content[pt="content-item"] [pt="report-img"]{
	    flex-basis: 96px;                      /* 縮小縮圖 */
	  }
	}


	/*===FOOTER===*/
	img[id="hs-logo-green"]{
		width: 250px;
		object-fit: contain;
		width: clamp(200px, 22vw, 280px); 
		height:auto; object-fit:cover;
	}
	onfooter[pt="footer-top"]{
		display: flex;
		justify-content:center;
		gap: 20px;
		padding: 10px;
	}
	
	[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(--text-gray);
	}
	
	[pt="time"],[pt="phone"],[pt="mail"],[pt="address"]{
		display: flex;
		align-items: center;
		gap: 5px;
	}
	onfooter[pt="content-container"]{
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr)); 
	  gap: 24px;
	  align-items: start;
	}
	a[pt="link"]{
		text-decoration: none;
    color: var(--hs-text);
    padding:8px;
	}
	@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;
	  }
	  
	}
	@media (max-width: 1050px){
	  onfooter[pt="content-container"]{ grid-template-columns: 2fr; }
	}
	/* 每一列：icon + 文字 */
	[pt="time"],
	[pt="phone"],
	[pt="mail"],
	[pt="address"] {
	  display: flex;
	  align-items: flex-start;   /* icon 與多行文字對齊 */
	  gap: 8px;                  /* icon 與文字間距 */
	  margin-bottom: 0.75rem;    /* 各列之間拉開距離 */
	  line-height: 1.6;          /* 提升可讀性 */
	}

	/* icon 統一大小、顏色 */
	contact[pt="icon"] {
	  font-size: 1.1rem;         /* icon 大小一致 */
	  color: #24BBA5;            /* 依你網站主色，可改 */
	  flex-shrink: 0;            /* icon 固定，不被壓縮 */
	  width: 1.25em;             /* 留點寬度，對齊整齊 */
	  text-align: center;
	  margin-top: 2px;           /* icon 稍微下移，和文字 baseline 對齊 */
	}

	/* 文字內容 */
	[pt="detail"] {
	  font-size: 1.1rem;
	  color: #333;
	  word-break: break-word;    /* 避免長字串爆版 */
	}

	/* Email 特殊處理：分行可點擊 */
	[pt="mail"] [pt="detail"] {
	  white-space: pre-line;     /* 讓 | 或 \n 換行 */
	  color: #0066cc;            /* 超連結藍色感 */
	}


	[pt="footer-bottom"]{
		text-align: center;
		background: #404040;
		color: var(--light);
		padding: 20px 0;
	}
	[pt="charity-name"],[pt="gov-num"],[pt="copyright"]{
		font-size: 14px;
	}