/* === 根色票：依照需求提供三個主色 === */
    :root{
      --brand-green: #a7ce46; /* 主綠 */
      --brand-tan:   #b9996d; /* 金棕 */
      --brand-yellow:#f6d655; /* 亮黃 */
      --text-strong:#1f2937;  /* 深灰標題 */
      --text-body:  #374151;  /* 內文灰 */
      --bg:         #ffffff;  /* 背景白 */
      --bg-soft:    #f9fafb;  /* 柔和底 */
      --line:       #e5e7eb;  /* 邊線 */
      --success:    #2f855a;
      --danger:     #dc2626;
    }
	
	.hl {
    background-image: linear-gradient(transparent 60%, var(--hl-color, #f6d655) 0%);
    background-size: 100% 100%;
	}

	/* 3. 根據不同的 class 自動切換顏色變數 */
	.hl-green  { --hl-color: var(--brand-green); }
	.hl-tan    { --hl-color: var(--brand-tan); }
	.hl-yellow { --hl-color: var(--brand-yellow); }

    /* === 基礎排版 === */
    html,body{margin:0; padding:0; background:var(--bg); color:var(--text-body); font-family:"Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif; line-height:1.65;}
    img{max-width:100%; height:auto; display:block;}
    .container{max-width:1200px; margin:0 auto; padding:0 24px;}
    h1,h2,h3{color:var(--text-strong); line-height:1.25; margin:0 0 .5em}
    h1{font-size:clamp(28px, 4vw, 44px); font-weight:700}
    h2{font-size:clamp(22px, 3.2vw, 32px); font-weight:700}
    h3{font-size:clamp(18px, 2.4vw, 22px); font-weight:600}
    p{margin:.5em 0 1em}
    :focus{outline:3px solid var(--brand-yellow); outline-offset:2px}

    /* === 導覽列 === */
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(6px);
      background:color-mix(in srgb, #ffffff 78%, var(--brand-yellow) 0%);
      border-bottom:1px solid var(--line);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
    .logo{display:flex; align-items:center; gap:10px; text-decoration:none}
    .logo img{height:44px; width:auto}
    .nav a{color:var(--text-strong); text-decoration:none; padding:10px 12px; border-radius:10px}
    .nav a:hover{background:var(--bg-soft)}

    /* === 共用按鈕 === */
    .btn{display:inline-flex; align-items:center; gap:10px; border:none; border-radius:999px; padding:12px 20px; font-weight:700; cursor:pointer; text-decoration:none}
    .btn-primary{background:var(--brand-green); color:#103a14; box-shadow:0 6px 18px rgba(167,206,70,.35)}
    .btn-primary:hover{filter:brightness(0.98)}
    .btn-ghost{background:#fff; color:#1f2937; border:1.5px solid var(--line)}
    .btn-ghost:hover{background:#f3f4f6}
    .btn-accent{background:var(--brand-tan); color:#fffdf7}

    /* === Hero 區（品牌視覺） === */
    .hero{
      background:
        radial-gradient(1200px 400px at 80% -100%, rgba(246,214,85,.45), transparent 60%),
        radial-gradient(900px 300px at -20% 0%, rgba(167,206,70,.35), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f9fafb 60%);
      padding:64px 0 32px;
      border-bottom:1px solid var(--line);
    }
	
	.hero-card-body {
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: flex-start;
		padding: 6px;
	
		flex-wrap: nowrap !important;
		width: max-content;
	}
	
    .hero-wrap{display:grid; grid-template-columns:1.45fr .55fr; gap:32px; align-items:center}
    .hero .badge{display:inline-block; margin-bottom:18px; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; background:color-mix(in oklab, var(--brand-yellow) 80%, #fff 30%); color:#3d2d00; border:1px solid #f1cd49; letter-spacing:1px}
    .hl{white-space:nowrap}
    .hero p.lead{font-size:clamp(16px, 1.6vw, 18px); color:#4b5563}
    .hero-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.06)}

    .what-we-do {
		display:flex;
		justify-content:space-between;
		align-items:center;
		gap:16px;
		margin-top: 40px;
		margin-bottom:24px;
	}
	
	.what-we-do h2{
		margin-bottom: 0 !important;
	}

	
	/* === 服務主軸（卡片） === */
    .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
    .card{background:#fff; border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:0 6px 24px rgba(0,0,0,.05)}
    .card .tag1{/*低收入戶福利*//*社會公益活動*/
		display:inline-block; 
		margin-bottom:14px; 
		padding:5px 12px; 
		border-radius:999px; 
		font-size:12px; 
		font-weight:700; 
		background: #eef7db; 
		color:#294314; 
		border:1px solid #deefb0
	}
	.card .tag2{/*身心障礙者福利*//*急難救助*/
		display:inline-block; 
		margin-bottom:14px; 
		padding:5px 12px; 
		border-radius:999px; 
		font-size:12px; 
		font-weight:700; 
		background: #f1efe9; 
		color:#3a2f22; 
		border:1px solid #e2d8c7
	}
	.card .tag3{/*捐血活動*/
		display:inline-block; 
		margin-bottom:14px; 
		padding:5px 12px; 
		border-radius:999px; 
		font-size:12px; 
		font-weight:700; 
		background: #fde8e8; 
		color:#7f1d1d; 
		border:1px solid #f5c6c6
	}
	.card .tag4{/*兒童福利*/
		display:inline-block; 
		margin-bottom:14px; 
		padding:5px 12px; 
		border-radius:999px; 
		font-size:12px; 
		font-weight:700; 
		background: #fff6cc; 
		color:#3a2c00; 
		border:1px solid #f2e29b
	}

    /* === 成果數字 === */
	.annual-stats{/*年度主要活動成果*/
		display:flex; 
		justify-content:space-between; 
		align-items:center;
		gap:16px; 
		margin-bottom:24px;
		margin-top:48px;
	}
	.annual-stats h2{
		margin-bottom: 0 !important;
	}
    .stats{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; margin-top:8px}
    .stat{background:linear-gradient(180deg, #fff, #fafafa); border:1px solid var(--line); border-radius:16px; padding:18px; text-align:center}
    .stat h3{font-size:28px; color:#1a2b0e}
    .stat p{margin:0; color:#4b5563}

    /* === 專案列表 === */
	#projects {
		margin-top:40px;
		padding: 28px 0 40px;
		border-top: 1px solid var(--line);
	}
	/* 內容與金句樣式 */
	.project .highlight-text {
		font-weight: 700;
		color: #57534e;
		margin-bottom:20px;
	}

	/* 標籤容器 - 排列與間距 */
	.project .pill-group {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		/* 關鍵！強制讓標籤與上方的文字推開 24 像素的距離 */
		margin-top: 24px !important;
		
	}

	/* 圖片容器 - 置中對齊 */
	.project .project-image {
	  display: flex;
	  justify-content: center;
	}
    .project{display:grid; grid-template-columns: 1.4fr 0.8fr; gap:40px; align-items:center}
	.project img{
		width:100%;
		max-width:320px;
		height:auto;
		display:block;
	}
    .pill{
		display:inline-flex; 
		align-items:center; 
		/*justify-content: center;*/
		gap:6px; 
		padding:8px 18px; 
		background:#ffffff; 
		border:1px solid var(--line); 
		border-radius:999px
		/*width: auto;
		box-sizing: border-box;*/
	}
	
	
    /* === 募款/訂閱區塊 === */
    .cta{background:linear-gradient(180deg, rgba(167,206,70,.12), rgba(246,214,85,.14)); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
    .cta .wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center; padding:36px 0}
    .cta form{display:grid; grid-template-columns:1fr auto; gap:10px}
    .input{padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; font-size:16px}
    .quote{border-left:4px solid var(--brand-tan); padding:6px 0 6px 16px; color:#57534e; font-size:15px}

    /* === 頁尾 === */
    footer{background:#111827; color:#e5e7eb}
    .footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; padding:28px 0}
    .footer-logo{display:flex; align-items:center; gap:12px}
    .footer-logo img{height:40px; width:auto}
    .footer-logo .name{font-weight:800; letter-spacing:.5px; color:#f9fafb}
    .footer-logo .en{font-size:11px; color:#9ca3af; letter-spacing:1px}
    .mini{font-size:12px; color:#9ca3af}
	
	/* 頁尾標題（聯絡我們、社群） */
	#contact .footer-title {
	  color: #ffffff;
	}

	/* 版權宣告區塊（推開上方距離） */
	#contact .copyright {
	  margin-top: 10px;
	}

	/* 社群超連結樣式 */
	#contact .footer-links a {
	  color: #e5e7eb;
	  text-decoration: none;
	  transition: color 0.2s ease; /* 增加滑過時的微漸變效果 */
	}

	/* 滑鼠懸停在社群連結時的視覺反饋（選填，可讓網頁質感更好） */
	#contact .footer-links a:hover {
	  color: #ffffff;
	  text-decoration: underline;
	}

    /* === 標籤色系（可重用） === */
    .chip-green{background:#e7f5cf; color:#27430d; border:1px solid #cfe9a2}
    .chip-tan{background:#f4ebdf; color:#3b2f21; border:1px solid #e5d6bf}
    .chip-yellow{background:#fff6cc; color:#3a2c00; border:1px solid #f2e29b}

    /* === 響應式 === */
    @media (max-width: 960px){
      .hero-wrap, .project, .cta .wrap{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr 1fr}
      .stats{grid-template-columns:1fr 1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 600px){
      .grid-3{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .logo img{height:36px}
    }