@charset "UTF-8";
/* ==========================================================================
   伯樂行為科學教育與發展協會 — 前台樣式
   設計稿基準：1920 × N（版面設計 / 色碼標示）
   結構順序：tokens → base → layout → header → hero → components
             → sections(home) → sections(inner) → footer → float → RWD
   ========================================================================== */

/* ==========================================================================
   01. Design tokens
   ========================================================================== */
:root {
    /* 色票（取自「色碼標示」設計稿） */
    --c-blue: #368ab9;            /* 主藍：標題、連結、按鈕底 */
    --c-blue-deep: #0b6597;       /* 按鈕漸層深色端 */
    --c-blue-soft: #78afcf;       /* 色帶：Nav／數據帶／Footer／副標 */
    --c-blue-pale: #bcd9e9;       /* 框線、分隔線、裝飾、箭頭底 */
    --c-blue-mist: #f0f6f9;       /* 極淡藍底（區塊底、hover 底） */
    --c-blue-mist2: #f1f6fa;      /* 極淡藍底（願景左半、動物圓底） */
    --c-hero-bg: #fbfcfe;         /* Hero 底（非純白） */
    --c-gold: #e8c889;            /* 金色：裝飾、回頂端、active 底線 */
    --c-gold-deep: #b89153;       /* 深金：標語文字 */
    --c-gold-shadow: #e2d5bc;     /* 金色系陰影 */
    --c-cream: #fcf9f4;           /* 米白底 */
    --c-cream-line: #fff1d6;      /* 米白外框 */
    --c-orange: #f95c0f;          /* 強調橘（申請步驟數字） */
    --c-text: #585858;            /* 內文 */
    --c-heading: #3b3b3b;         /* 深灰標題 */
    --c-white: #fff;

    /* 版面 */
    --container-max: 1648px;      /* 內容 1608 + 左右 padding 20 */
    --container-pad: 20px;
    --header-h: 114px;
    --nav-h: 94px;

    /* 字級（1920 為設計值，往下流體縮放） */
    --fs-body: clamp(15px, 0.9375vw, 18px);      /* 18px @1920 */
    --fs-sm: clamp(13px, 0.8333vw, 16px);        /* 16px @1920 */
    --fs-md: clamp(16px, 1.0417vw, 20px);        /* 20px @1920 */
    --fs-h3: clamp(19px, 1.25vw, 24px);          /* 24px @1920 */
    --fs-title: clamp(25px, 1.6667vw, 32px);     /* 32px @1920 */
    --fs-nav: clamp(15px, 0.9375vw, 18px);
    --lh-body: 2;
    --ls: 0.05em;

    /* 間距 */
    --sec-y: clamp(48px, 4.17vw, 80px);
    --sec-y-lg: clamp(60px, 5.73vw, 110px);

    /* 層級 */
    --z-header: 30;
    --z-drawer: 75;
    --z-scrim: 73;
    --z-float: 25;
}

/* ==========================================================================
   02. Base
   ========================================================================== */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 140px;     /* 錨點不被固定的 header 蓋住 */
}

body {
    font-family: "Noto Sans TC", "Inter", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls);
    color: var(--c-text);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;              /* 不用 hidden，否則 body 變成捲動容器、header 的 sticky 會失效 */
}

img { max-width: 100%; height: auto; }

a { color: var(--c-blue); text-decoration: none; transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
a:hover { color: var(--c-blue-deep); }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.6; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* ==========================================================================
   03. Layout — container
   ========================================================================== */
.container,
.container-fluid {
    width: 100%;
    max-width: var(--container-max);
    padding-inline: var(--container-pad);
    margin-inline: auto;
}
.container-fluid { max-width: none; }

/* 內容再內縮的窄容器（最新消息卡片群：1453 / 1608） */
.container-narrow {
    width: 100%;
    max-width: 1493px;              /* 1453 + 2×20 */
    padding-inline: var(--container-pad);
    margin-inline: auto;
}

/* ==========================================================================
   04. Header / Global nav
   ========================================================================== */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-header);
    background: var(--c-white);
    transition: box-shadow .28s ease;
}
/* 佔位永遠是「未收合」的高度：收合時不動到文件流，就不會有捲動抖動 */
.header-spacer { height: calc(var(--header-h) + var(--nav-h)); }

body.is-scrolled .site-header { box-shadow: 0 4px 16px rgba(54, 138, 185, .16); }

/* 桌機捲動後收合成精簡列，行動版本來就已經是精簡高度不再縮 */
@media (min-width: 992px) {
    .header-top,
    .nav-list { transition: height .28s ease; }
    .site-logo img,
    .header-support img { transition: width .28s ease; }

    body.is-scrolled .header-top { height: 74px; }
    body.is-scrolled .nav-list { height: 62px; }
    body.is-scrolled .site-logo img { width: 330px; }
    body.is-scrolled .header-support img { width: 148px; }
}

.header-top {
    height: var(--header-h);
    display: flex;
    align-items: center;
}
.header-top > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-logo { display: block; line-height: 0; }
.site-logo img { width: 472px; height: auto; display: block; }

.header-support { display: block; line-height: 0; flex: none; }
.header-support img { width: 192px; height: auto; display: block; }

.header-burger {
    display: none;
    flex: none;                    /* 不參與壓縮，否則窄螢幕三條線會被擠短 */
    width: 44px; height: 44px;     /* 44 為觸控目標下限 */
    border: 0; background: transparent;
    padding: 12px 6px;             /* 三條線 32×3，整體 32×20 */
    flex-direction: column; justify-content: space-between;
}
.header-burger span {
    display: block; height: 3px; width: 100%;
    background: var(--c-blue); border-radius: 3px;
}

/* --- Global nav 色帶 --- */
.global-nav { background: var(--c-blue-soft); }
.global-nav > .container { display: flex; justify-content: center; }

.nav-list {
    display: flex;
    align-items: center;
    height: var(--nav-h);
}
.nav-list > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.nav-list > li + li::before {
    content: "|";
    color: rgba(255, 255, 255, .55);
    font-size: var(--fs-nav);
    padding-inline: 30px;
    position: relative;
    top: -1px;
}
.nav-list > li > a {
    display: inline-block;
    position: relative;
    padding: 6px 0;
    color: var(--c-white);
    font-size: var(--fs-nav);
    font-weight: 700;
    letter-spacing: var(--ls);
    line-height: 1.2;
}
.nav-list > li > a::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px;
    bottom: -5px;
    height: 4px;
    background: var(--c-gold);
    opacity: 0;
    transition: opacity .25s ease;
}
/* 設計稿只在滑過（含下拉展開）時出現金線，當前頁不加底線 */
.nav-list > li:hover > a::after,
.nav-list > li:focus-within > a::after { opacity: 1; }

/* --- 桌機下拉 --- */
.nav-dropdown {
    position: absolute;
    top: 100%;                     /* 面板貼齊色帶底緣 y=208 */
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: 177px;
    background: var(--c-hero-bg);
    border: 1px solid var(--c-blue-soft);
    /* 設計稿：面板後方有一塊同尺寸的淡藍底，往左下偏移 5px */
    box-shadow: -4px 5px 0 var(--c-blue-pale);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 5;
}
.nav-list > li:hover > .nav-dropdown,
.nav-list > li:focus-within > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown li + li { margin-top: 5px; }
.nav-dropdown a {
    display: block;
    padding: 14px 18px;
    font-size: var(--fs-nav);
    letter-spacing: var(--ls);
    color: var(--c-blue);
    white-space: nowrap;
    text-align: center;
    line-height: 20px;
}
.nav-dropdown a:hover { background: var(--c-blue-mist2); }

/* ==========================================================================
   05. 手機側邊選單（off-canvas）
   ========================================================================== */
.menu-scrim {
    position: fixed; inset: 0;
    background: rgba(236, 243, 247, .8);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
    z-index: var(--z-scrim);
}
body.menu-open .menu-scrim { opacity: 1; visibility: visible; }

.menu-panel {
    position: fixed;
    inset: 0 0 0 auto;
    width: 55%;
    min-width: 265px;
    max-width: 340px;
    height: 100vh; height: 100dvh;
    background: var(--c-white);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: var(--z-drawer);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 40px;
}
body.menu-open .menu-panel {
    transform: translateX(0);
    /* 陰影只在展開時存在，收合時不得殘留於畫面右緣 */
    box-shadow: -6px 0 24px rgba(14, 5, 10, .28);
}
body.menu-open { overflow: hidden; }

.menu-close {
    display: flex; align-items: center; justify-content: flex-end;
    width: 100%;
    padding: 24px 24px 28px;      /* ✕ 中心 y≈37、首項文字中心 y≈110（設計稿 481×854） */
    background: transparent; border: 0;
    color: var(--c-gold);
    font-size: 26px; line-height: 1;
}
/* 分隔線內縮於面板左右各 20px */
.menu-nav { padding-inline: 20px; }
.menu-nav .menu-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-bottom: 1px solid var(--c-gold);
}
.menu-nav .menu-row > a {
    display: block;
    padding: 18px 0;
    color: var(--c-blue);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.menu-toggle {
    flex: none;
    padding: 0 2px;
    background: transparent; border: 0;
    color: var(--c-gold);
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.menu-toggle i { transition: transform .25s ease; display: block; }
.menu-nav > li.is-open .menu-toggle i { transform: rotate(180deg); }
.menu-sub {
    display: none;
    padding: 2px 0 3px;
    border-bottom: 1px solid var(--c-gold);
}
.menu-nav > li.is-open .menu-sub { display: block; }
.menu-sub a {
    display: block;
    padding: 7px 0;
    color: var(--c-blue);
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}
/* 最後一項（回首頁）下方不畫線 */
.menu-nav > li:last-child .menu-row { border-bottom: 0; }
.menu-sub a:hover { color: var(--c-blue-deep); }

/* ==========================================================================
   06. Hero（滿版合成 KV，素材已含文案與裝飾，勿再疊字或底色）
   ========================================================================== */
.hero {
    position: relative;
    background: var(--c-hero-bg);
    line-height: 0;
}
.hero .swiper-slide { line-height: 0; }
.hero img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   07. 共用元件
   ========================================================================== */

/* --- 區塊／頁面主標題 + 短底線 --- */
.sec-head { text-align: center; }
.sec-title {
    font-size: var(--fs-title);
    font-weight: 500;
    color: var(--c-heading);
    line-height: 1.4;
}
.sec-title--line::after {
    content: "";
    display: block;
    width: 44px; height: 5px;
    margin: 15px auto 0;
    background: var(--c-blue-soft);
    border-radius: 3px;
}
.sec-lead {
    margin-top: 18px;
    font-size: var(--fs-body);
    color: var(--c-text);
}

/* --- 內文標題 --- */
.h-blue {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-blue);
    line-height: 1.7;
}
.h-gold {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-gold-deep);
    line-height: 1.7;
}
.txt-body { font-size: var(--fs-body); color: var(--c-text); line-height: var(--lh-body); }

/* --- 主要按鈕（藍底 + 右側淺藍方塊箭頭） --- */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    gap: 36px;
    height: 57px;
    padding: 0 9px 0 29px;
    background: var(--c-blue);
    color: var(--c-white);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: var(--ls);
    border-radius: 6px;
    border: 0;
    line-height: 1;
}
.btn-arrow:hover { background: var(--c-blue-deep); color: var(--c-white); }
.btn-arrow .ico {
    flex: none;
    width: 38px; height: 35px;
    border-radius: 8px;
    background: #78afd0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.btn-arrow:hover .ico { background: var(--c-blue-pale); }

/* --- 漸層按鈕（參與協會頁） --- */
.btn-grad {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-width: 346px;
    height: 62px;
    padding: 0 26px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--c-blue-deep) 0%, var(--c-blue) 100%);
    color: var(--c-white);
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: var(--ls);
    line-height: 1;
}
.btn-grad:hover { color: var(--c-white); filter: brightness(1.08); }

/* --- 外框按鈕（白底藍框） --- */
.btn-line {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 26px;
    border: 1px solid var(--c-blue-soft);
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 3px 4px 0 rgba(188, 217, 233, .75);
    color: var(--c-blue);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.5;
}
.btn-line:hover { background: var(--c-blue-mist); color: var(--c-blue); }

/* --- 白底卡片列（加入我們 / 我想上課學習） --- */
.link-card {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 20px 19px 20px 55px;
    border: 1px solid var(--c-blue-soft);
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 5px 14px rgba(188, 217, 233, .75);
}
.link-card:hover { box-shadow: 0 8px 20px rgba(188, 217, 233, .95); }
.link-card__icon { flex: none; width: 64px; height: auto; }
.link-card__body { flex: 1 1 auto; min-width: 0; }
.link-card__sub { font-size: var(--fs-body); font-weight: 700; color: var(--c-blue); line-height: 1.8; }
.link-card__title { font-size: var(--fs-h3); font-weight: 700; color: var(--c-blue); line-height: 1.6; }
.link-card__arrow {
    flex: none;
    width: 75px; height: 75px;
    border-radius: 12px;
    background: var(--c-blue-pale);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-white);
    font-size: 20px;
}
.link-card:hover .link-card__arrow { background: var(--c-blue); }

/* --- 分頁子選單（膠囊） --- */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.tab-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 148px;
    height: 46px;
    padding: 0 20px;
    border: 1px solid var(--c-gold);
    border-radius: 4px;
    background: var(--c-white);
    color: var(--c-blue-soft);
    font-size: var(--fs-body);
    letter-spacing: var(--ls);
    line-height: 1.2;
}
.tab-nav a:hover { background: var(--c-blue-mist); }
.tab-nav a.is-active {
    background: var(--c-gold);
    border-color: var(--c-gold);
    color: var(--c-white);
}

/* --- 文字型子選單（參與協會頁） --- */
.tab-text {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.tab-text a {
    padding: 0 34px;
    color: var(--c-blue-soft);
    font-size: var(--fs-body);
}
.tab-text a.is-active { color: var(--c-gold); }
.tab-text li + li { border-left: 1px solid var(--c-gold); line-height: 1; }

/* ==========================================================================
   08. 首頁區塊
   ========================================================================== */

/* --- S3 理念 --- */
.sec-ideal { padding: 27px 0 0; }
.sec-ideal__grid {
    display: grid;
    grid-template-columns: 648fr 64fr 896fr;
    align-items: start;
}
.sec-ideal__photo { grid-column: 1; }
.sec-ideal__photo img { width: 100%; height: auto; display: block; }
.sec-ideal__body { grid-column: 3; padding-top: 16px; }
.sec-ideal__body .h-blue + .txt-body { margin-top: 6px; }
.sec-ideal__body .block + .block { margin-top: 41px; }

/* --- S4 四步驟 --- */
.sec-steps { padding: 49px 0 0; position: relative; overflow: hidden; }
.steps-seedling { display: block; width: 288px; height: auto; margin: 0 auto; }
.steps-slogan {
    margin-top: 45px;
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-gold-deep);
    line-height: 1.6;
}
.steps-row {
    margin-top: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.step-item {
    flex: 0 0 auto;
    width: clamp(210px, 17.4vw, 334px);
    aspect-ratio: 1 / 1;
    border: 1px solid var(--c-blue-pale);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(16px, 1.875vw, 36px);
}
.step-item__no {
    font-family: "Inter", sans-serif;
    font-size: clamp(30px, 2.29vw, 44px);
    font-weight: 500;
    line-height: 1;
    color: var(--c-blue-pale);
    letter-spacing: .2em;
    text-indent: .2em;      /* 抵銷字距造成的視覺偏移，讓數字仍在圓心 */
}
.step-item__title {
    margin-top: 30px;
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-blue);
    line-height: 1.5;
}
.step-item__desc {
    margin-top: 5px;
    font-size: var(--fs-body);
    color: var(--c-text);
    line-height: 2.28;      /* 設計稿行距 41 / 18 */
}
/* 設計稿的刻意斷行；窄版回歸自動換行 */
.br-lg { display: none; }
@media (min-width: 992px) { .br-lg { display: inline; } }
.step-sep {
    flex: 0 0 auto;
    width: clamp(34px, 2.97vw, 57px);
    display: flex; align-items: center; justify-content: center;
    color: #a9cfe4;
    line-height: 0;
}
.step-sep svg { width: 20px; height: 24px; display: block; }

.steps-actions {
    margin-top: 72px;
    display: flex;
    justify-content: center;
    gap: 26px;
    padding-bottom: 78px;
}

/* 右下角條紋圓：貼右邊界、下緣被數據帶切斷 */
.sec-steps__circle {
    position: absolute;
    right: -84px;
    bottom: -132px;
    width: clamp(160px, 13.3vw, 256px);
    aspect-ratio: 1 / 1;
    background: url("../images/00-hp/r_circle.png") center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}
.sec-steps > .container { position: relative; z-index: 1; }

/* --- S5 數據帶 --- */
.sec-stats { background: var(--c-blue-soft); padding: 66px 0 75px; }
.stats-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}
.stat-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(20px, 3.8vw, 73px);
    color: var(--c-white);
    text-align: center;
}
/* 分隔線只有 117px 高、垂直置中，不是整欄高 */
.stat-item + .stat-item::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 117px;
    background: var(--c-blue-pale);
}
.stat-item__num {
    font-family: "Inter", "Noto Sans TC", sans-serif;
    font-size: clamp(44px, 3.85vw, 74px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
    display: flex;
    align-items: baseline;
}
.stat-item__num small {
    font-family: "Noto Sans TC", sans-serif;
    font-size: var(--fs-h3);
    font-weight: 500;
    margin-left: 4px;
}
.stat-item__label {
    margin-top: 6px;
    font-size: var(--fs-h3);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* --- S6 伯樂願景（左底色 / 右照片，交界為垂直硬邊） --- */
.sec-vision {
    position: relative;
    background: var(--c-blue-mist2);
    overflow: hidden;
}
.sec-vision__photo {
    position: absolute;
    top: 0; bottom: 0;
    left: 54.27%;              /* 1042 / 1920：與左側底色為左右相接的垂直硬邊 */
    right: 0;
    background: url("../images/00-hp/virsion_pic.png") center center / cover no-repeat;
}
.sec-vision__inner {
    position: relative;
    z-index: 1;
    padding: 86px 0 68px;
}
.sec-vision__col { width: 51%; }          /* 820 / 1608：容納設計稿單行不斷行的最長句 */
.vision-title {
    font-size: var(--fs-title);
    font-weight: 500;
    color: var(--c-heading);
    line-height: 1.4;
}
.vision-title::after {
    content: "";
    display: block;
    width: 44px; height: 5px;
    margin-top: 15px;
    background: var(--c-blue-soft);
    border-radius: 3px;
}
.vision-sub { margin-top: 17px; }
.vision-body { margin-top: 46px; }
.vision-body p + p { margin-top: 5px; }
.vision-join {
    margin-top: 57px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-blue);
    letter-spacing: .14em;
}
.vision-join img { width: 24px; height: auto; }
.vision-cards { margin-top: 17px; width: 93.4%; display: grid; gap: 28px; }

/* --- S7 最新消息 --- */
.sec-news { padding: 72px 0 102px; }
.news-grid {
    margin-top: 43px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 7.78%;          /* 113 / 1453 */
    row-gap: 75px;
}
.news-col { position: relative; }
.news-col + .news-col::before {
    content: "";
    position: absolute;
    left: -13.81%;              /* 半個欄距 56.5 / 409 */
    top: 0; bottom: 0;
    width: 1px;
    background: var(--c-blue-pale);
}
.news-card { display: flex; flex-direction: column; height: 100%; }
.news-card__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 409 / 257;
    border-radius: 6px;
    overflow: hidden;
    background: var(--c-blue-mist);
}
.news-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__meta {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.news-card__date { font-size: var(--fs-sm); color: var(--c-blue); letter-spacing: .04em; }
.news-card__tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 100px; height: 36px;
    padding: 0 14px;
    border: 1px solid var(--c-blue-soft);
    border-radius: 18px;
    color: var(--c-blue);
    font-size: var(--fs-sm);
    line-height: 1.2;
}
.news-card__title {
    margin-top: 18px;
    font-size: clamp(18px, 1.15vw, 22px);
    font-weight: 700;
    color: var(--c-blue);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__title a { color: inherit; }
.news-card__desc {
    margin-top: 12px;
    font-size: var(--fs-body);
    color: var(--c-text);
    line-height: 2.05;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__btn {
    margin-top: 20px;
    display: flex; align-items: center; justify-content: center;
    height: 46px;
    border: 1px solid var(--c-blue);
    border-radius: 6px;
    background: var(--c-blue);
    color: var(--c-white);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: var(--ls);
}
.news-card__btn:hover { background: var(--c-blue-mist); color: var(--c-blue); }
.news-card__views {
    margin-top: 14px;
    text-align: center;
    font-size: var(--fs-body);
    color: var(--c-blue);
}

/* ==========================================================================
   09. Footer
   ========================================================================== */
.site-footer { background: var(--c-blue-soft); padding: 43px 0 0; color: var(--c-white); }
.footer-logo { display: block; width: 472px; margin: 0 auto; }
.footer-logo img { width: 100%; height: auto; display: block; }
.footer-divider { margin-top: 40px; height: 1px; background: rgba(255, 255, 255, .55); }
.footer-row {
    padding: 33px 0 39px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}
.footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-body);
    line-height: 2.1;
    color: var(--c-white);
}
.footer-contact li img { width: 22px; height: auto; flex: none; }
.footer-contact a { color: var(--c-white); }
.footer-right { text-align: right; }
.footer-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; }
.footer-nav a { color: var(--c-white); font-size: var(--fs-body); font-weight: 500; }
.footer-nav li + li::before {
    content: "|";
    color: rgba(255, 255, 255, .6);
    padding-inline: 22px;
}
.footer-counter {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 36px;
    font-size: var(--fs-body);
    font-weight: 500;
}
.site-copyright {
    background: var(--c-blue-mist2);
    padding: 16px 0;
    text-align: center;
}
.site-copyright p {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--fs-body);
    color: var(--c-blue-soft);
    line-height: 1.5;
}
.site-copyright img { width: 18px; height: auto; }

/* ==========================================================================
   10. 浮動元件
   ========================================================================== */
.back-to-top {
    position: fixed;
    right: 43px;
    bottom: 60px;
    width: 70px; height: 70px;
    z-index: var(--z-float);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    line-height: 0;
}
.back-to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.back-to-top img { width: 100%; display: block; }

/* ==========================================================================
   11. 進場動畫
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   12. RWD
   ========================================================================== */
@media (max-width: 1399.98px) {
    .news-col { padding-inline: 32px; }
}

@media (max-width: 1199.98px) {
    :root { --header-h: 92px; --nav-h: 76px; }
    .site-logo img { width: 360px; }
    .header-support img { width: 168px; }
    .footer-logo { width: 380px; }
    .nav-list > li + li::before { padding-inline: 20px; }
    .link-card__arrow { width: 62px; height: 62px; }
}

@media (max-width: 991.98px) {
    :root { --header-h: 84px; --nav-h: 0px; }
    html { scroll-padding-top: 96px; }
    .global-nav { display: none; }
    .header-burger { display: flex; }
    /* 三個元件都固定尺寸、改用 vw 隨螢幕縮放，避免 flex 壓縮把 logo 與漢堡壓扁 */
    .site-logo,
    .header-support { flex: none; }
    .header-support { margin-left: auto; margin-right: 14px; }
    .site-logo img { width: min(300px, 44vw); }
    .header-support img { width: min(150px, 26vw); }

    .sec-ideal__grid { grid-template-columns: 1fr; gap: 28px; }
    .sec-ideal__body { grid-column: 1; }

    .steps-row { flex-wrap: wrap; gap: 26px 0; }
    .step-item { width: min(46%, 300px); }
    .step-sep { width: 8%; }
    .step-sep:nth-of-type(2) { display: none; }

    .sec-vision__photo {
        position: relative;
        left: 0;
        width: 100%;
        height: 54vw;
        max-height: 420px;
        inset: auto;
    }
    .sec-vision__inner { padding: 48px 0 60px; }
    .sec-vision__col { width: 100%; max-width: 100%; }
    .vision-cards { width: 100%; }
    .vision-join { margin-top: 40px; }

    .news-grid { grid-template-columns: repeat(2, 1fr); row-gap: 46px; }
    .news-col { padding-inline: 18px; }
    .news-col:nth-child(2n+1)::before { display: none; }

    .footer-row { flex-direction: column; }
    .footer-right { text-align: left; }
    .footer-nav { justify-content: flex-start; }
    .footer-counter { justify-content: flex-start; gap: 24px; }

    .back-to-top { right: 18px; bottom: 24px; width: 56px; height: 56px; }
}

@media (max-width: 767.98px) {
    :root { --container-pad: 20px; }
    /* 手機同樣以 vw 收斂，讓 logo／支持鈕／漢堡三者永遠塞得下，不必靠 flex 壓縮 */
    .site-logo img { width: min(232px, 44vw); }
    .header-support img { width: min(122px, 26vw); }

    .sec-steps { padding-top: 44px; }
    .steps-actions { margin-top: 44px; gap: 14px; padding-bottom: 52px; }
    .btn-arrow { height: 50px; padding: 0 10px 0 20px; gap: 14px; }
    .btn-arrow .ico { width: 34px; height: 34px; font-size: 15px; }

    .stats-row { gap: 0; }
    .stat-item { width: 50%; padding: 18px 10px; }
    .stat-item + .stat-item { border-left: 0; }
    .stat-item:nth-child(2n) { border-left: 1px solid var(--c-blue-pale); }
    .sec-stats { padding: 34px 0; }

    .news-grid { grid-template-columns: 1fr; row-gap: 40px; }
    .news-col { padding-inline: 0; }
    .news-col::before { display: none !important; }

    .btn-grad { min-width: 0; width: 100%; height: 56px; padding: 0 18px; }
    .link-card { gap: 14px; padding: 14px; }
    .link-card__icon { width: 46px; }
    .link-card__arrow { width: 52px; height: 52px; font-size: 16px; }

    .tab-nav { gap: 10px; }
    .tab-nav a { min-width: 0; height: 40px; padding: 0 14px; font-size: 15px; }
    .tab-text a { padding: 0 16px; }
}

@media (max-width: 575.98px) {
    .step-item { width: 100%; max-width: 280px; margin-inline: auto; }
    .step-sep { display: none !important; }
    .steps-row { flex-direction: column; gap: 22px; }
    .steps-actions { flex-direction: column; align-items: center; }
    .btn-arrow { width: 100%; max-width: 300px; justify-content: space-between; }
    .footer-logo { width: 100%; max-width: 300px; }
}

/* ==========================================================================
   13. 內頁共用
   ========================================================================== */
.page-head { padding-top: 26px; }          /* 無子選單頁：標題文字上緣 y917 */
.page-head--tabs { padding-top: 20px; }    /* 有子選單頁：膠囊上緣 y903、標題 y1004 */
.page-head--tight { padding-top: 15px; }   /* 捐款完成頁 */
.page-head .tab-nav + .sec-head,
.page-head .tab-text + .sec-head { margin-top: 55px; }

/* 內頁段落：行距較首頁寬鬆（設計稿 42 / 18） */
.txt-relaxed { font-size: var(--fs-body); color: var(--c-text); line-height: 2.33; }
.txt-relaxed p + p { margin-top: 51px; }

/* ==========================================================================
   14. 01-1 起源與理念
   ========================================================================== */
.origin-intro { padding-top: 66px; }
.origin-intro__grid {
    display: grid;
    grid-template-columns: 695fr 115fr 798fr;
    align-items: start;
}
.origin-intro__body { grid-column: 1; padding-top: 47px; }
.origin-intro__body .h-blue + .txt-relaxed { margin-top: 12px; }
.origin-intro__photo { grid-column: 3; }
.origin-intro__photo img { width: 100%; height: auto; display: block; }

.origin-mission { padding-top: 83px; }
.mission-card {
    border: 1px solid var(--c-gold);
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 0 7px var(--c-cream);
}
.mission-row {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 32px 0;
    min-height: 236px;
}
.mission-row + .mission-row { border-top: 1px solid var(--c-gold); min-height: 256px; }
.mission-row__icon { flex: none; width: 134px; height: auto; margin-left: 45px; }
.mission-row__label {
    /* 設計稿墨跡量出來的字級，比 --fs-h3（24px）小一號 */
    --fs-mission: clamp(17px, 1.1198vw, 21.5px);
    flex: none;
    display: flex;
    align-items: center;
    /* 9px 讓分隔線左右的視覺留白各約 12px，與設計稿一致 */
    gap: 9px;
    /* 圖示放大到設計稿的 134px 後，這裡收回 9px 讓標籤維持原位 */
    margin-left: 15px;
    color: var(--c-gold-deep);
    font-weight: 700;
    white-space: nowrap;
}
.mission-row__label .en {
    font-family: "Inter", sans-serif;
    font-size: var(--fs-mission);
    letter-spacing: .06em;
    /* 設計稿：兩列英文靠右對齊，分隔線才會落在同一個 x */
    width: 140px;
    text-align: right;
}
.mission-row__label .sep { color: var(--c-gold); font-weight: 400; }
.mission-row__label .zh { font-size: var(--fs-mission); }
.mission-row__text {
    flex: 1 1 auto; min-width: 0;
    margin-left: 85px;
    font-size: var(--fs-body); color: var(--c-text); line-height: 1.9;
}

.origin-outro { padding: 66px 0 109px; }
.origin-outro__grid {
    display: grid;
    grid-template-columns: 798fr 85fr 727fr;
    align-items: start;
}
.origin-outro__photo { grid-column: 1; }
.origin-outro__photo img { width: 100%; height: auto; display: block; }
.origin-outro__body { grid-column: 3; padding-top: 30px; }

@media (max-width: 991.98px) {
    .page-head { padding-top: 26px; }
    .page-head .sec-head { margin-top: 34px; }
    .origin-intro { padding-top: 44px; }
    .origin-intro__grid,
    .origin-outro__grid { grid-template-columns: 1fr; gap: 26px; }
    .origin-intro__body,
    .origin-intro__photo,
    .origin-outro__photo,
    .origin-outro__body { grid-column: 1; padding-top: 0; }
    .origin-mission { padding-top: 46px; }
    .origin-outro { padding: 40px 0 56px; }
    .txt-relaxed { line-height: 2.1; }
    .txt-relaxed p + p { margin-top: 26px; }
    .mission-row { flex-wrap: wrap; gap: 14px 0; padding: 26px 20px; min-height: 0; }
    .mission-row__icon { width: 88px; margin-left: 0; }
    .mission-row__label { width: auto; margin-left: 18px; justify-content: flex-start; padding-right: 0; }
    .mission-row__label .en { width: auto; text-align: left; }
    .mission-row__text { flex: 1 0 100%; margin-left: 0; }
}

/* ==========================================================================
   15. 01-2 理監事團隊
   ========================================================================== */
.board { padding: 24px 0 71px; }
.board-lead { text-align: center; }
.board-lead .h-blue { line-height: 1.6; }
.board-lead .txt-body { margin-top: 4px; line-height: 2.2; }

.board-group { margin-top: 20px; }
.board-group--half { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }

.board-band {
    background: var(--c-blue-soft);
    color: var(--c-white);
    font-size: var(--fs-body);
    font-weight: 700;
    letter-spacing: .12em;
    text-align: center;
    line-height: 1.4;
    padding: 10px 12px;
    border-radius: 2px;
}

.board-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 26px;
    align-items: stretch;
}
.board-group--half .board-grid { grid-template-columns: 1fr; }

/* --- 成員卡 --- */
.member-card {
    border: 1px solid var(--c-gold);
    border-radius: 4px;
    background: var(--c-white);
    padding: 20px 26px 0;
}
.member-card__head {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
    padding-bottom: 20px;
}
.member-card__photo {
    flex: none;
    width: 136px; height: 156px;
    object-fit: cover;
    display: block;
    background: var(--c-blue-mist);
}
.member-card__info { flex: 1 1 auto; min-width: 0; padding-top: 30px; padding-right: 90px; }
.member-card__name { font-size: var(--fs-md); font-weight: 700; color: var(--c-heading); line-height: 1.5; }
.member-card__title {
    margin-top: 14px;
    font-size: var(--fs-body);
    color: var(--c-text);
    line-height: 1.7;
}
.member-card__title .label { color: var(--c-blue); }
.member-card__animal {
    position: absolute;
    top: 0; right: 4px;
    width: 48px; height: auto;
}

.member-card__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-top: 1px solid var(--c-gold);
    background: var(--c-cream);
    color: var(--c-gold-deep);
    font-size: var(--fs-sm);
    letter-spacing: var(--ls);
    padding: 5px 12px;
    margin-bottom: 20px;
    line-height: 1.6;
}
.member-card__toggle:hover { background: #f7f0e2; }
.member-card__toggle i { font-size: 12px; transition: transform .25s ease; }
.member-card.is-open .member-card__toggle i { transform: rotate(180deg); }

.member-card__detail { padding: 0 0 10px; }
.detail-row { display: flex; align-items: flex-start; }
.detail-row + .detail-row { margin-top: 16px; }
.detail-row__label { flex: none; color: var(--c-blue); font-size: var(--fs-body); line-height: 1.85; }
.detail-row__body { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); color: var(--c-text); line-height: 1.85; }
.detail-row__body .detail-head { color: var(--c-text); }

@media (max-width: 991.98px) {
    .board { padding: 26px 0 56px; }
    .board-group { margin-top: 30px; }
    .board-group--half { grid-template-columns: 1fr; row-gap: 30px; }
    .board-grid { grid-template-columns: 1fr; row-gap: 20px; }
    .member-card { padding: 16px 18px 0; }
    .member-card__head { gap: 18px; padding-bottom: 16px; }
    .member-card__photo { width: 104px; height: 120px; }
    .member-card__info { padding-top: 6px; padding-right: 56px; }
    .member-card__animal { width: 40px; }
}

/* ==========================================================================
   16. 01-3 秘書處組織圖
   ========================================================================== */
.secretariat { padding: 14px 0 78px; }
.org-chart { text-align: center; }
.org-chart img { width: min(632px, 100%); height: auto; display: inline-block; }

.secretariat-title {
    margin-top: 68px;
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-blue);
    letter-spacing: .04em;
    line-height: 1.5;
}

.staff-grid {
    margin-top: 51px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 31px;
    align-items: stretch;
}
.staff-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 36px;
    border: 1px solid var(--c-blue);
    border-radius: 4px;
    background: var(--c-white);
    padding: 33px 30px 37px;
}
.staff-card--lead { border-color: var(--c-gold); }
.staff-card__photo {
    flex: none;
    width: 132px; height: 155px;
    object-fit: cover;
    display: block;
    background: var(--c-blue-mist);
}
.staff-card__body { flex: 1 1 auto; min-width: 0; padding-right: 66px; }
.staff-card__role { font-size: var(--fs-body); font-weight: 700; color: var(--c-blue); line-height: 1.7; }
.staff-card--lead .staff-card__role { color: var(--c-gold-deep); }
.staff-card__name { margin-top: 8px; font-size: var(--fs-body); color: var(--c-heading); line-height: 1.7; }
.staff-card__duty { margin-top: 10px; font-size: var(--fs-body); color: var(--c-text); line-height: 1.85; }
.staff-card__duty .label { color: var(--c-gold-deep); }
.staff-card__animal { position: absolute; top: 14px; right: 22px; width: 48px; height: auto; }

@media (max-width: 991.98px) {
    .secretariat { padding: 28px 0 60px; }
    .secretariat-title { margin-top: 40px; }
    .staff-grid { grid-template-columns: 1fr; margin-top: 30px; row-gap: 20px; }
    .staff-card { gap: 18px; padding: 20px 18px; }
    .staff-card__photo { width: 100px; height: 118px; }
    .staff-card__body { padding-right: 52px; }
    .staff-card__animal { width: 40px; right: 14px; top: 12px; }
}

/* ==========================================================================
   17. 01-4 各縣市工作站
   ========================================================================== */
.stations { padding: 19px 0 103px; }
.station-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 36px;
    row-gap: 23px;
    align-items: stretch;
}
.station-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 32px;
    border: 1px solid var(--c-gold);
    border-radius: 4px;
    background: var(--c-white);
    padding: 30px 30px 31px;
}
.station-card__photo {
    flex: none;
    width: 122px; height: 155px;
    object-fit: cover;
    display: block;
    background: var(--c-blue-mist);
}
.station-card__body { flex: 1 1 auto; min-width: 0; padding-right: 66px; }
.station-card__area {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-body);
    color: var(--c-blue);
    line-height: 1.7;
}
.station-card__area img { width: 20px; height: auto; }
.station-card__name { margin-top: 10px; font-size: var(--fs-body); color: var(--c-heading); line-height: 1.7; }
.station-card__contact { margin-top: 14px; }
.station-card__contact li { font-size: var(--fs-body); color: var(--c-text); line-height: 1.85; word-break: break-all; }
.station-card__contact .label { color: var(--c-gold-deep); }
.station-card__animal { position: absolute; top: 14px; right: 22px; width: 48px; height: auto; }

/* ==========================================================================
   18. 01-5 伯樂青年團
   ========================================================================== */
.youth { padding: 19px 0 0; }
.youth-lead { text-align: center; }
.youth-lead .txt-body { margin-top: 4px; line-height: 2.2; }

.youth-panel { margin-top: 24px; background: var(--c-blue-mist); padding: 44px 66px; }
.youth-row {
    display: grid;
    grid-template-columns: 57.4% 37.9%;   /* 853 / 564 於 1487 內寬 */
    column-gap: 4.7%;
    align-items: center;
}
.youth-row--rev { grid-template-columns: 37.9% 57.4%; }
.youth-row + .youth-row { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--c-blue-pale); }
.youth-row__photo img { width: 100%; height: auto; display: block; }
.youth-tag {
    display: flex; align-items: center; gap: 12px;
    white-space: nowrap;
    color: var(--c-gold-deep);
    font-weight: 700;
    line-height: 1.4;
}
.youth-tag img { width: 24px; height: auto; }
.youth-tag .en { font-family: "Inter", sans-serif; font-size: var(--fs-h3); letter-spacing: .1em; }
.youth-tag .sep { color: var(--c-gold); font-weight: 400; }
.youth-tag .zh { font-size: var(--fs-h3); }
.youth-row__body .h-blue { margin-top: 18px; }
.youth-row__body .txt-body { margin-top: 10px; line-height: 2.05; }

.youth-card { margin-top: 30px; gap: 22px; padding: 18px 18px 18px 26px; }
.youth-card__icon {
    flex: none;
    width: 84px; height: 84px;
    border-radius: 50%;
    background: var(--c-blue-mist);
    display: flex; align-items: center; justify-content: center;
}
.youth-card__icon img { width: 52px; height: auto; }
.youth-card__arrow {
    flex: none;
    width: 60px; height: 60px;
    border-radius: 8px;
    background: var(--c-blue);
    color: var(--c-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.youth-card:hover .youth-card__arrow { background: var(--c-blue-deep); }

/* --- 我想上課學習 --- */
.learn-cta { padding: 60px 0 104px; }
.learn-cta__title {
    display: flex; align-items: center; gap: 30px;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-blue);
    line-height: 1.5;
}
.learn-cta__title::before,
.learn-cta__title::after { content: ""; flex: 1 1 0; height: 1px; background: var(--c-blue-pale); }
.learn-cta__lead { margin-top: 22px; text-align: center; font-size: var(--fs-body); color: var(--c-text); }
.learn-cta__actions {
    margin-top: 30px;
    display: flex; justify-content: center; gap: 28px; flex-wrap: wrap;
}
.learn-btn {
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: 34px;
    min-width: 330px;
    padding: 18px 20px 18px 44px;
    border-radius: 8px;
    background: var(--c-blue-mist);
    color: var(--c-blue);
    font-size: var(--fs-h3);
    line-height: 1.4;
}
.learn-btn:hover { background: #e6eff5; color: var(--c-blue); }
.learn-btn .ico {
    flex: none;
    width: 56px; height: 56px;
    border-radius: 8px;
    background: var(--c-blue-pale);
    color: var(--c-white);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.learn-btn:hover .ico { background: var(--c-blue); }

@media (max-width: 991.98px) {
    .stations { padding: 30px 0 60px; }
    .station-grid { grid-template-columns: 1fr; row-gap: 20px; }
    .station-card { gap: 18px; padding: 20px 18px; }
    .station-card__photo { width: 96px; height: 122px; }
    .station-card__body { padding-right: 52px; }
    .station-card__animal { width: 40px; right: 14px; top: 12px; }

    .youth { padding-top: 26px; }
    .youth-panel { margin-top: 30px; padding: 30px 20px; }
    .youth-row,
    .youth-row--rev { grid-template-columns: 1fr; row-gap: 20px; }
    .youth-row--rev .youth-row__photo { order: 2; }
    .youth-row + .youth-row { margin-top: 30px; padding-top: 30px; }
    .learn-cta { padding: 40px 0 60px; }
    .learn-cta__title { gap: 16px; }
    .learn-btn { min-width: 0; width: 100%; max-width: 360px; padding: 14px 14px 14px 24px; gap: 16px; }
    .learn-btn .ico { width: 46px; height: 46px; }
}

/* ==========================================================================
   19. 02 核心工具
   ========================================================================== */
/* 滿版藍色標題帶（容器寬） */
.band-title {
    background: var(--c-blue);
    color: var(--c-white);
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.5;
    padding: 7px 16px;
}

.tool-intro { padding-top: 46px; }
.tool-intro__grid {
    display: grid;
    grid-template-columns: 680fr 60fr 867fr;
    align-items: start;
}
.tool-intro__photo { grid-column: 1; }
.tool-intro__photo img { width: 100%; height: auto; display: block; }
.tool-intro__body { grid-column: 3; }
.tool-intro__body .h-blue + .txt-body { margin-top: 42px; }
.tool-intro__note { margin-top: 46px; color: var(--c-gold-deep); }

.tool-animals { padding-top: 62px; }
.tool-animals__lead { margin-top: 26px; text-align: center; font-size: var(--fs-body); color: var(--c-text); }
.tool-animals__hint { margin-top: 20px; text-align: center; font-size: var(--fs-body); font-weight: 700; color: var(--c-blue); }

.animal-row,
.animal-panels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 2.604%;            /* 42 / 1613 */
}
.animal-row { margin-top: 29px; align-items: end; }
.animal-item {
    padding: 0;
    background: transparent;
    border: 7px solid var(--c-blue-mist2);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
/* 設計稿：1、3、5 為描邊圓；2、4 為滿版底色圓，交錯排列 */
.animal-item:nth-child(2n) {
    background: var(--c-blue-mist2);
    border-color: var(--c-blue-mist2);
}
.animal-item img { width: 73%; height: auto; display: block; }
.animal-item:hover { transform: translateY(-4px); }

.animal-panels { margin-top: 10px; align-items: start; }
.animal-panel { text-align: center; display: none; }
.animal-panel.is-active { display: block; }
/* 特質文字落在自己動物的欄位下方（桌機五欄時） */
@media (min-width: 992px) {
    /* 借用左右欄距，長姓名不會只剩一字落單 */
    .animal-panel { margin-inline: -1.302%; }
    .animal-panel:nth-child(1) { grid-column: 1; }
    .animal-panel:nth-child(2) { grid-column: 2; }
    .animal-panel:nth-child(3) { grid-column: 3; }
    .animal-panel:nth-child(4) { grid-column: 4; }
    .animal-panel:nth-child(5) { grid-column: 5; }
}
.animal-panel__name { font-size: var(--fs-md); color: var(--c-blue); line-height: 1.6; letter-spacing: .06em; }
.animal-panel__label {
    margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: var(--fs-body);
    color: var(--c-gold-deep);
    line-height: 1.6;
}
.animal-panel__label img { width: 20px; height: auto; }
.animal-panel__text { margin-top: 4px; font-size: var(--fs-body); color: var(--c-text); line-height: 1.6; }

.tool-facts { padding: 50px 0 86px; }
.tool-facts__lead { margin-top: 33px; text-align: center; font-size: var(--fs-body); color: var(--c-text); }
.fact-table {
    margin-top: 11px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--c-blue-soft);
}
.fact-cell {
    padding: 26px 20px 32px;
    text-align: center;
    border-right: 1px solid var(--c-blue-soft);
    border-bottom: 1px solid var(--c-blue-soft);
}
.fact-cell:nth-child(3n) { border-right: 0; }
.fact-cell:nth-last-child(-n+3) { border-bottom: 0; }
.fact-cell__num { font-size: var(--fs-h3); color: var(--c-blue); line-height: 1.5; letter-spacing: .03em; }
.fact-cell__text { margin-top: 10px; font-size: var(--fs-body); color: var(--c-text); line-height: 1.7; }

@media (max-width: 991.98px) {
    .tool-intro { padding-top: 40px; }
    .tool-intro__grid { grid-template-columns: 1fr; gap: 24px; }
    .tool-intro__photo,
    .tool-intro__body { grid-column: 1; }
    .tool-intro__body .h-blue + .txt-body { margin-top: 18px; }
    .tool-intro__note { margin-top: 24px; }
    .tool-animals { padding-top: 46px; }
    /* 圓縮小時描邊同步等比縮，維持設計稿 7 / 288 的比例 */
    .animal-item { border-width: clamp(3px, .787vw, 7px); }
    .animal-row { margin-top: 22px; grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
    .animal-panels { margin-top: 16px; grid-template-columns: 1fr; }
    .animal-panel { grid-column: 1; }
    .tool-facts { padding: 46px 0 60px; }
    .fact-table { grid-template-columns: 1fr 1fr; }
    .fact-cell { padding: 22px 12px 26px; }
    .fact-cell:nth-child(3n) { border-right: 1px solid var(--c-blue-soft); }
    .fact-cell:nth-child(2n) { border-right: 0; }
    .fact-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--c-blue-soft); }
    .fact-cell:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 575.98px) {
    .header-top > .container { gap: 10px; }
    .header-support { margin-right: 6px; }
}

@media (max-width: 400px) {
    .header-top > .container { padding-inline: 12px; gap: 8px; }
    .header-support { margin-right: 4px; }
}

@media (max-width: 575.98px) {
    .animal-row { row-gap: 14px; }
    .fact-table { grid-template-columns: 1fr; }
    .fact-cell { border-right: 0 !important; border-bottom: 1px solid var(--c-blue-soft) !important; }
    .fact-cell:last-child { border-bottom: 0 !important; }
}

/* ==========================================================================
   20. 03 參與協會
   ========================================================================== */
.tab-text__list { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.tab-text__list a { display: block; padding: 0 34px; color: var(--c-blue-soft); font-size: var(--fs-body); line-height: 38px; }
.tab-text__list a:hover { color: var(--c-blue); }
.tab-text__list li + li { border-left: 1px solid var(--c-gold); }

.join-block { padding-top: 80px; }
#join-school { padding-top: 26px; }
.join-block--last { padding-bottom: 89px; }
.join-block--last .join-card { padding-bottom: 53px; }

.join-card {
    border: 1px solid var(--c-gold);
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 0 7px rgba(226, 213, 188, .75);
    padding: 15px 24px 40px;
}
.join-card--cream { background: var(--c-cream); padding-bottom: 70px; }
.join-card__band {
    background: var(--c-blue);
    color: var(--c-white);
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.5;
    border-radius: 8px;
    padding: 14px 16px;
}
.join-card__inner { padding: 0 32px; }

.join-lead { margin-top: 34px; text-align: center; }
.join-lead p { font-size: var(--fs-body); color: var(--c-text); line-height: 2; }

.join-steps__title {
    margin-top: 15px;
    background: var(--c-cream);
    border-top: 1px solid var(--c-gold);
    border-bottom: 1px solid var(--c-gold);
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-heading);
    line-height: 1.6;
    padding: 14px 16px;
}
.join-steps__title em { font-style: normal; color: var(--c-orange); }

.join-steps { margin-top: 30px; max-width: 1150px; margin-inline: auto; }
.join-step { position: relative; display: flex; align-items: flex-start; gap: 35px; padding-bottom: 73px; }
.join-step:last-child { padding-bottom: 0; }
/* 圓與圓之間的連接線 */
.join-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 66px; top: 138px; bottom: -8px;
    width: 1px;
    background: var(--c-blue-soft);
}
.join-step__no {
    flex: none;
    width: 133px; height: 133px;
    border-radius: 50%;
    background: var(--c-blue-soft);
    color: var(--c-white);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: "Inter", sans-serif;
    font-size: clamp(26px, 1.98vw, 38px);
    font-weight: 500;
    line-height: 1;
}
.join-step__no small { font-size: 14px; letter-spacing: .12em; margin-bottom: 4px; }
.join-step__body { flex: 1 1 auto; min-width: 0; padding-top: 12px; }
.join-step__title { font-size: var(--fs-h3); font-weight: 700; color: var(--c-blue); line-height: 1.6; }
.join-step__body .txt-body { margin-top: 6px; line-height: 2.1; }
.join-step__body .txt-body a { word-break: break-all; color: inherit; }
.join-step__body .txt-body a:hover { color: var(--c-blue); text-decoration: underline; }

.btn-form {
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 26px;
    border: 1px solid var(--c-blue-soft);
    border-radius: 8px;
    background: var(--c-white);
    box-shadow: 3px 4px 0 rgba(188, 217, 233, .75);
    color: var(--c-blue);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.4;
}
.btn-form img { width: 24px; height: auto; }
.btn-form:hover { background: var(--c-blue-mist); }

/* --- 支持伯樂 兩張白卡 --- */
.support-grid { margin-top: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: stretch; }
.support-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--c-gold);
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 0 6px var(--c-cream-line);
    padding: 40px 40px 71px;
}
.support-card__head {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--c-gold);
}
.support-card__head img { width: 46px; height: auto; }
.support-card__titles { display: block; text-align: center; }
.support-card__titles .zh { display: block; font-size: var(--fs-h3); font-weight: 700; color: var(--c-heading); line-height: 1.5; }
.support-card__titles .zh--blue { color: var(--c-blue); }
.support-card__titles .en {
    display: block; margin-top: 2px;
    font-family: "Inter", serif;
    font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
    color: var(--c-gold-deep);
}
.support-card__list {
    /* 下緣留白：按鈕靠 margin-top:auto 貼卡片底部，內容較多的那張卡沒有剩餘空間，
       沒有這個下緣就會直接黏在最後一行文字上 */
    margin: 34px 0 32px;
}
.support-card__list > div { display: flex; align-items: flex-start; }
.support-card__list > div + div { margin-top: 16px; }
.support-card__list dt { flex: none; color: var(--c-gold-deep); font-weight: 400; font-size: var(--fs-body); line-height: 2; }
.support-card__list dd { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--c-text); font-size: var(--fs-body); line-height: 2; }
.support-card__list .box {
    display: inline-block;
    width: 15px; height: 15px;
    border: 1px solid var(--c-text);
    margin-right: 10px;
    vertical-align: -1px;
}
.support-card .btn-grad { margin-top: auto; align-self: center; width: 100%; max-width: 346px; }
.support-card .btn-grad i { font-size: 18px; }

/* --- 加入伯樂青年團 --- */
.join-youth__grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 730fr 60fr 727fr;
    align-items: start;
}
.join-youth__photo { grid-column: 1; }
.join-youth__photo img { width: 100%; height: auto; display: block; }
.join-youth__body { grid-column: 3; }
.join-youth__body .txt-body { line-height: 2.1; }
.join-youth__body .txt-body + .txt-body { margin-top: 6px; }
.join-youth__body .txt-body a { word-break: break-all; color: inherit; }
.join-youth__body .txt-body a:hover { color: var(--c-blue); text-decoration: underline; }
.join-youth__body .mark { color: var(--c-gold-deep); }
.join-youth__label { margin-top: 26px; font-size: var(--fs-h3); font-weight: 700; color: var(--c-blue); line-height: 1.7; }

@media (max-width: 991.98px) {
    .join-block { padding-top: 34px; }
    .join-block--last { padding-bottom: 56px; }
    .join-card { padding: 16px 16px 28px; }
    .join-card__inner { padding: 0; }
    .join-steps { margin-top: 24px; }
    .join-step { gap: 18px; padding-bottom: 30px; }
    .join-step__no { width: 74px; height: 74px; }
    .join-step:not(:last-child)::before { left: 37px; top: 78px; }
    .join-step__body { padding-top: 4px; }
    .support-grid { grid-template-columns: 1fr; gap: 24px; }
    .support-card { padding: 22px 18px 26px; }
    .join-youth__grid { grid-template-columns: 1fr; gap: 22px; }
    .join-youth__photo,
    .join-youth__body { grid-column: 1; }
    .tab-text__list a { padding: 0 16px; }
}

/* ==========================================================================
   21. 05 常見問答
   ========================================================================== */
.faq { padding: 24px 0 57px; }
.faq-intro {
    display: grid;
    grid-template-columns: 496fr 60fr 1052fr;
    align-items: center;
}
.faq-intro__illu { grid-column: 1; text-align: center; }
.faq-intro__illu img { width: 100%; max-width: 496px; height: auto; }
.faq-intro__body { grid-column: 3; }
.faq-intro__body .txt-body { line-height: 2.1; }

.faq-list { margin-top: 25px; }
.faq-card {
    border-radius: 10px;
    background: var(--c-white);
    box-shadow: 0 0 14px rgba(120, 175, 207, .22);
    padding: 34px 42px 34px;
    overflow: hidden;
}
.faq-card + .faq-card { margin-top: 40px; }
.faq-card__band {
    background: var(--c-blue-soft);
    color: var(--c-white);
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: .1em;
    line-height: 1.5;
    border-radius: 6px;
    padding: 5px 16px;
}
.faq-card__inner { padding: 30px 0 11px; }
.faq-card__q { font-size: var(--fs-h3); font-weight: 500; color: var(--c-blue); line-height: 1.6; }
.faq-card__a { margin-top: 17px; font-size: var(--fs-body); color: var(--c-text); line-height: 1.9; }

.faq-card__toggle {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    border: 0;
    border-top: 1px solid var(--c-blue-pale);
    background: var(--c-blue-mist);
    color: var(--c-blue);
    font-size: var(--fs-body);
    letter-spacing: var(--ls);
    padding: 9px 12px;
    line-height: 1.6;
}
.faq-card__toggle:hover { background: #e6eff5; }
.faq-card__toggle i { font-size: 12px; transition: transform .25s ease; }
.faq-card.is-open .faq-card__toggle i { transform: rotate(180deg); }

.faq-card__detail { padding: 22px 0 0; }
.faq-detail__intro { font-size: var(--fs-body); color: var(--c-text); line-height: 1.85; }
.faq-detail__item { margin-top: 3px; font-size: var(--fs-body); color: var(--c-text); line-height: 1.85; }
.faq-detail__item strong { color: var(--c-heading); font-weight: 700; }
.faq-detail__item a { word-break: break-all; }

@media (max-width: 991.98px) {
    .faq { padding: 26px 0 60px; }
    .faq-intro { grid-template-columns: 1fr; gap: 20px; }
    .faq-intro__illu,
    .faq-intro__body { grid-column: 1; }
    .faq-list { margin-top: 30px; }
    .faq-card { padding: 20px 20px 0; }
    .faq-card + .faq-card { margin-top: 22px; }
    .faq-card__inner { padding: 20px 0 18px; }
}

/* ==========================================================================
   22. 04 最新消息（列表 / 內頁）
   ========================================================================== */
.news-page { padding: 28px 0 112px; }
.news-detail { padding: 28px 0 71px; }

.news-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 18px;
}
.news-filter__label { color: var(--c-blue); font-size: var(--fs-body); letter-spacing: .04em; }
.news-filter a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 130px; height: 38px;
    padding: 0 18px;
    border: 1px solid var(--c-gold);
    border-radius: 4px;
    background: var(--c-white);
    color: var(--c-blue);
    font-size: var(--fs-body);
    line-height: 1.2;
}
.news-filter a:hover { background: var(--c-blue-mist); color: var(--c-blue); }
.news-filter a.is-active { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-white); }

.news-count {
    margin-top: 22px;
    text-align: right;
    font-size: var(--fs-body);
    color: var(--c-gold-deep);
    line-height: 1.6;
}
.news-page .news-grid { margin-top: 14px; }

/* --- 內頁 --- */
.article { margin-top: 40px; }
.article__title {
    background: var(--c-blue-mist);
    border-radius: 8px;
    text-align: center;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--c-blue);
    line-height: 1.6;
    padding: 16px 24px;
}
.article__meta {
    margin-top: 20px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: var(--fs-body);
    line-height: 1.6;
}
.article__meta .date { color: var(--c-gold-deep); }
.article__meta .sep { color: var(--c-blue-pale); }
.article__meta .cat { color: var(--c-heading); }

.article__body { margin-top: 34px; padding-inline: 46px; font-size: var(--fs-body); color: var(--c-text); line-height: 2.05; }
.article-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 34px; }
.article-photos img { width: 100%; height: auto; display: block; margin: 0; border-radius: 0; }
.article__body img { max-width: 100%; height: auto; display: block; margin: 0 auto 26px; border-radius: 4px; }
.article__body h2,
.article__body h3 { margin: 34px 0 8px; font-size: var(--fs-h3); font-weight: 500; color: var(--c-blue); line-height: 1.6; }
.article__body h2:first-child,
.article__body h3:first-child { margin-top: 0; }
.article__body p { margin-bottom: 6px; }
.article__body a { word-break: break-all; }

.article__views { margin-top: 30px; text-align: right; font-size: var(--fs-body); color: var(--c-blue); }
.article__foot {
    margin-top: 22px;
    padding-top: 34px;
    border-top: 1px solid var(--c-blue-pale);
    display: flex; justify-content: center;
}
.btn-back {
    display: inline-flex; align-items: center; gap: 22px;
    min-width: 150px;
    padding: 12px 30px;
    border: 1px solid var(--c-blue-soft);
    border-radius: 6px;
    background: var(--c-white);
    color: var(--c-blue);
    font-size: var(--fs-body);
    line-height: 1.5;
}
.btn-back:hover { background: var(--c-blue-mist); color: var(--c-blue); }

/* ==========================================================================
   23. 03 捐款完成
   ========================================================================== */
.donate-done { padding: 25px 0 99px; }
.donate-done__card {
    border: 1px solid var(--c-gold);
    border-radius: 10px;
    background: var(--c-white);
    text-align: center;
    padding: 59px 24px 78px;
}
.donate-done__card img { width: 120px; height: auto; }
.donate-done__card .txt-body { line-height: 2.22; }
.donate-done__card img + .txt-body { margin-top: 37px; }

@media (max-width: 991.98px) {
    .news-page,
    .news-detail { padding: 26px 0 60px; }
    .news-filter { gap: 10px; }
    .news-filter a { min-width: 0; height: 34px; padding: 0 14px; font-size: 15px; }
    .news-filter__label { flex: 1 0 100%; text-align: center; }
    .article { margin-top: 28px; }
    .article__body { margin-top: 24px; padding-inline: 0; }
    .article-photos { grid-template-columns: 1fr; gap: 16px; margin-bottom: 22px; }
    .donate-done { padding: 26px 0 60px; }
    .donate-done__card { padding: 40px 18px 46px; }
    .donate-done__card img + .txt-body { margin-top: 30px; }
}