/* =============================================================
   2023 ATCC x YLL NPO 永續創新個案大賽 — 靜態版共用樣式
   原站為 WordPress + Elementor,本檔為手刻重建版

   第三方素材出處(詳見 THIRD-PARTY-NOTICES.md):
   - Roboto 字型 — SIL Open Font License 1.1,
     Copyright 2011 The Roboto Project Authors
   - 介面圖示幾何 — Font Awesome Free 6, CC BY 4.0,
     Fonticons, Inc. <https://fontawesome.com>
     (上/下篇導覽的 angle-left / angle-right 共 42 處已修改:x 軸平移 ±32)
   ============================================================= */

/* ---------- 字型 (自架,無外部相依) ---------- */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2192;
}

/* ---------- 設計變數 ---------- */
:root {
  --blue: #004393;          /* 主色深藍 */
  --pink: #FF6DA2;          /* 報名按鈕粉紅 */
  --cyan: #6DFFFF;
  --yellow: #FDD000;        /* 題目區塊黃 */
  --ink: rgba(0, 0, 0, .95);
  --gray: #707070;          /* 導覽列文字灰 */
  --gray-mid: #757575;
  --gray-light: #F1F1F1;    /* NPO 介紹底色 */
  --gray-label: #B3B3B3;    /* 小節標籤灰 */
  --footer-bg: #1E1E1E;
  --copybar-bg: #D9D9D9;
  --grad-a: linear-gradient(208deg, #004393 49%, #D39DCA 97%);
  --grad-b: linear-gradient(152deg, #004393 49%, #D39DCA 97%);
  --grad-line: linear-gradient(180deg, #FDA7B5 0%, #5FF8DC 100%);
  /* 原站字型:內容區 (Elementor 全域) = Roboto webfont (CJK 落至系統字);
     導覽列與 footer 聯絡資訊 = WordPress 系統字型堆疊 */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --container: 1140px;
  --header-h: 76px;
  /* 滿版裝飾圖以 body 內容寬為基準縮放;--cl = 容器內容左緣距 body 左緣。
     扣 30 = html 捲軸 15 + 首頁 body 自身的捲軸槽 15 (見下方 body[data-page="home"])。
     --bw/--pad/--cl 僅供首頁的 .deco-* 使用,其餘頁面不參照。 */
  --bw: calc(100vw - 30px);
  --pad: min(60px, calc(var(--bw) * .05));
  --cl: calc((var(--bw) - min(var(--bw), 1200px)) / 2 + var(--pad));
}

/* ---------- 基本設定 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
/* 原站首頁 body 為 overflow-x:hidden(→ overflow-y 變 auto)且高度被腳本寫死,
   使 body 自己再吃掉一條 15px 捲軸,內容基準因此是 2530 而非 2545,
   全站置中元素連帶左移 7.5。僅首頁如此(其餘頁原站皆為 2545)。
   還原方式為保留一條捲軸寬的內距,而非 overflow-x:hidden + scrollbar-gutter:
   hidden 會讓 body 成為真正的捲動容器,而 sticky 受限於最近的 scrollport ——
   body 的 scrollTop 恆為 0(html 帶 overflow-x: clip,body 的 overflow 不會傳遞到
   viewport,見 CSS Overflow §3.3),表頭因此完全不會固定。實測 scrollY=1500 時
   表頭 top 為 -1500,而其餘 29 頁為 0。改用內距後 body 不再是 scrollport,sticky 恢復。
   內距值不可寫死 15px:calc(100vw - 100%) 解出來就是「本平台的捲軸實際寬度」
   (100vw 含捲軸,100% 是 html 內容寬),傳統捲軸得 15、覆蓋式捲軸得 0,
   與原 scrollbar-gutter 的平台相依行為一致 —— 寫死 15 會讓 macOS/iOS 憑空少 15px。 */
body[data-page="home"] { padding-right: calc(100vw - 100%); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: #333;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font-family: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

/* 原站容器規則:1200px 置中,內容左推 min(60px, 5%) (漸層條位於容器左緣) */
.container { max-width: 1200px; margin-inline: auto; padding-inline: min(60px, 5%) 0; }

/* =============================================================
   頁首
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  height: var(--header-h);
  box-shadow: 0 6px 6px rgba(0, 0, 0, .1);
}
/* 原站 header:獨立的 1400 置中容器 (內容區是 1200,兩者不同),無左右內距;
   logo 貼齊容器左緣、導覽貼齊容器右緣,連結 20px 黑字滿高 */
.site-header .container {
  max-width: 1400px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
}
.brand { display: flex; align-items: center; margin-left: 0; }
.brand img { width: 111px; height: 41px; object-fit: contain; }

/* 原站導覽:1400 容器內的第二欄,偏移 45%、寬 54.665% (右側餘 .335%),
   選單 ul = flex space-between。四個容器寬 (1400/1200/1039/900) 實測比例皆一致 */
.main-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 100%;
  width: 54.665%;
  margin-left: auto;
  margin-right: .335%;
}
.main-nav > a, .main-nav .has-dropdown > a {
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-family: var(--font-sys);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  transition: color .2s;
}
.main-nav > a:hover, .main-nav .has-dropdown > a:hover { color: var(--gray); }

/* 合作夥伴下拉選單 (原站 megamenu:400px 面板、置中粉紅連結、含標題) */
.main-nav .has-dropdown { position: relative; display: flex; align-items: stretch; }
.main-nav .has-dropdown > a svg { margin-left: 20px; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 400px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
  padding: 35px 0 10px 30px;
  opacity: 0;
  visibility: hidden;
  /* 原站開關兩態都是 translateY(-10),面板恆在 y=66;其宣告的 transform .4s
     因兩態同值而永不觸發,opacity/visibility 無過場 → 瞬間顯示,不淡入 */
  transform: translateY(-10px);
  transition: transform .4s;
  z-index: 150;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; }
.nav-dropdown .dd-head {
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 40px;
}
.nav-dropdown a {
  display: block;
  padding: 0;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #C36;
  text-align: center;
  transition: color .2s;
}
.nav-dropdown a:last-child { margin-bottom: 0; }
.nav-dropdown a:hover { color: var(--gray); }

/* 我要報名 藥丸按鈕 (原站 .apply_btn — hover 無變化) */
.main-nav a.nav-signup:hover { color: var(--ink); }
.apply-btn {
  display: inline-flex;
  align-items: center;
  background: #FF799C;
  color: #fff;
  border-radius: 55px;
  padding: 8px 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  white-space: nowrap;
}

/* 手機漢堡按鈕 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 手機抽屜選單 — 原站:左滑 350px 淺灰面板 (0.6s)、深灰半透遮罩、× 關閉 */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 290;
  background: rgba(51, 51, 51, .5);
  opacity: 0;
  visibility: hidden;
  /* pointer-events 在關閉態一併關掉:visibility 是離散屬性,在 .6s 過場期間
     一直保持 visible,而這是一層 inset:0 的固定層 —— 關閉抽屜後的 0.6 秒內
     整個視口的點擊都會被它吃掉(實測 elementFromPoint 在 350ms 時仍回傳它)。 */
  pointer-events: none;
  transition: opacity .6s, visibility .6s;
}
body.drawer-open .drawer-backdrop { pointer-events: auto; }
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: min(350px, 100vw);
  height: 100dvh;
  background: #F7F7F7;
  padding: 20px 20px 30px;
  transform: translateX(-100%);
  transition: transform .6s cubic-bezier(.6, .1, .68, .53);
  overflow-y: auto;
}
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
body.drawer-open .mobile-drawer { transform: none; }
/* 捲動鎖定必須下在根元素:body 的 overflow 只有在根元素兩軸皆為 visible 時
   才會傳遞到 viewport(CSS Overflow §3.3),而 html 帶有 overflow-x: clip,
   因此 body.drawer-open { overflow: hidden } 對頁面捲動完全無效。

   用 clip 而非 hidden:依 CSS Overflow §3.1,一軸為 clip 而另一軸既非 visible
   也非 clip 時,clip 會被計算成 hidden —— 寫 overflow-y: hidden 會連帶把
   overflow-x 從 clip 變成 hidden,使根元素成為真正的捲動容器
   (scrollLeft 可被 focus()/scrollIntoView() 改動且無捲軸可捲回)。
   兩軸皆 clip 就沒有這個轉換,鎖定效果相同。

   scrollbar-gutter 補回捲軸消失後的 15px:鎖定會移除垂直捲軸,
   在傳統捲軸平台上整頁會變寬 15px 再彈回。保留槽位即無位移。 */
html.drawer-open { overflow-y: clip; scrollbar-gutter: stable; }

.drawer-close {
  position: absolute;
  top: 22px;
  right: 12px;
  width: 45px;
  height: 42px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.mobile-drawer .drawer-brand { padding: 0 0 31px; margin-left: -15px; }
.mobile-drawer .drawer-brand img { width: 100px; }
.mobile-drawer a, .mobile-drawer .submenu-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10px 15px;
  font-family: var(--font-sys);
  font-size: 20px;
  font-weight: 700;
  color: #000;
  text-align: left;
  border-bottom: 1px solid currentColor;
}
.mobile-drawer a.is-current { color: var(--gray); }
.mobile-drawer .drawer-signup { color: #EB6100; }
/* 原站子選單:灰底 (#9E9E9E) 白字 600 */
.mobile-drawer .submenu {
  max-height: 0;
  overflow: hidden;
  background: #9E9E9E;
  transition: max-height .3s ease;
}
.mobile-drawer .submenu a { color: #fff; font-weight: 600; padding: 15px; font-size: 16px; border-bottom: 1px solid #fff; }
.mobile-drawer .submenu li:last-child a { border-bottom: 0; }
.submenu-toggle .chev { margin-left: 8px; transition: transform .25s; font-size: 14px; }
.submenu-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* =============================================================
   首頁 — Hero
   ============================================================= */
.hero { position: relative; background: #fff; }
/* 手機版主視覺改由 <picture> 的 <source media> 在同一個 <img> 上換圖,
   不再是兩個 <img> 互相 display 切換,故無 .kv-mobile 規則。 */
.hero .kv-desktop { width: 100%; }
.hero .hero-cta {
  position: absolute;
  left: 14%;
  top: 59%;
  display: inline-block;
  background: var(--pink);
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  line-height: 40px;
  padding: 20px 50px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, .25);
}
.hero .deco-hero {
  position: absolute;
  left: 60%;
  bottom: -74%;
  width: 50%;
  pointer-events: none;
  z-index: 3;
}

/* =============================================================
   漸層區塊 & 區塊標題
   ============================================================= */
.band { position: relative; color: #fff; overflow: hidden; }
.band-a { background: var(--grad-a); padding: 160px 0; }
.band-b { background: var(--grad-b); padding: 160px 0 160px; }

.sec-head { position: relative; margin-bottom: 60px; }
.sec-head h2 {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
}
.sec-head::before {
  content: "";
  position: absolute;
  /* 條子要貼在「容器的左邊框緣」,也就是往回推一個容器內距。
     寫死 -60px 只有在內距滿 60(body 內容寬 ≥ 1200)時才等價:實測視口
     1025–1229 之間內距是 49.75–59.95,條子左緣落到 -10.25 ~ -0.05 而被
     overflow-x: clip 永久裁掉(1025 時 16px 寬只剩 5.75px 可見)。
     改用 --pad —— 它就是 .container 那個 min(60px, 5%) 的等值長度式,
     桌機仍解為 -60(零變化),中間帶則自動跟著內距走。 */
  left: calc(var(--pad) * -1);
  top: 0;
  width: 16px;
  height: 200px;
  background: var(--grad-line);
}
.sec-head.dark h2 { color: var(--ink); }

/* 裝飾圖 (絕對定位、不擋滑鼠)
   六張全部都是「內容 wrapper 寬度的整數百分比」(2560 寬實測,原站值為
   50/9/55/30/25.233/55,x 為 60/83.5/75.5/−9/62.45/−32.5);
   sched 先前誤用容器百分比,已改回與其他張一致的 --bw 基準。
   max-width: none 是必要的 — 全域 img{max-width:100%} 會把 55% 的兩張
   夾到父層的 1140px (原站為 1391.5)。*/
.deco { position: absolute; pointer-events: none; user-select: none; z-index: 1; max-width: none; }
.deco-news-a { width: calc(var(--bw) * .09);    left: calc(var(--bw) * .835  - var(--cl)); top: -5px; }
.deco-news-b { width: calc(var(--bw) * .55);    left: calc(var(--bw) * .755  - var(--cl)); top: -238px; }
.deco-news-c { width: calc(var(--bw) * .30);    left: calc(var(--bw) * -.09  - var(--cl)); top: 449px; }
.deco-sched  { width: calc(var(--bw) * .25233); left: calc(var(--bw) * .6245 - var(--cl)); top: -78px; }
.deco-faq    { width: calc(var(--bw) * .55);    left: calc(var(--bw) * -.325 - var(--cl)); top: -480px; }
@media (max-width: 767px) {
  .deco-news-b, .deco-news-c, .deco-sched, .deco-faq { display: none; }
  .deco-news-a { width: 70px; left: auto; right: 10px; }
}

/* ---------- 活動介紹 ---------- */
/* 原站段落:margin-bottom 14.4px (0.9rem),段間空行為空 <p>,letter-spacing 1px */
.intro-text { font-size: 20px; line-height: 30px; letter-spacing: 1px; }
.intro-text p { margin-bottom: 14.4px; }
.intro-text p:empty { min-height: 1.5em; }

/* ---------- 首頁最新消息列表 ----------
   原站列結構:30px 上距 + 30px 文字列 + 10px 下距 + 1px 底線,首列無頂線 */
.home-news { margin-top: 174px; position: relative; z-index: 2; }
.home-news .sec-head { margin-bottom: 30px; }
.home-news-list li { border-bottom: 1px solid rgba(255, 255, 255, .19); }
.home-news-list a {
  display: block;
  padding: 30px 0 10px;
  font-size: 20px;
  line-height: 30px;
  color: #fff;
}

/* ---------- 議題合作夥伴 (首頁 logo 牆) ----------
   原站結構:兩欄各 540px;每列 = logo(原尺寸) + ➜(固定於欄內 x=430);
   列間為 61px 高的分隔線區塊 (30px 上下留白 + 1px 線) */
.partner-wall { margin-bottom: 160px; }
.partner-wall .sec-head h2 { line-height: 1.5; }
.partner-wall .sec-head .hl-pink { color: var(--pink); }
/* 欄距 = 容器寬 5.263% (1140 時為 60);logo 為欄寬百分比 (70/42/49/56) */
.partner-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5.263%; align-items: start; }
.partner-row { position: relative; display: flex; align-items: center; min-height: 38px; }
.partner-row img { display: block; height: auto; }
.p-divider { border: 0; border-top: 1px solid rgba(255, 255, 255, .35); margin: 30px 0; width: 100%; }
.p-logo-1 { width: 70%; } .p-logo-2 { width: 42%; } .p-logo-3 { width: 49%; }
.p-logo-4 { width: 70%; } .p-logo-5 { width: 56%; }
.partner-row .go {
  position: absolute;
  /* 430 是桌機欄寬下量到的固定位置,但欄寬會隨視口收縮而這個值不會:
     視口 1025–1080 時右欄的兩個箭頭會被推出視口(1025 時 25.2px,遞減到
     1080 時 0.5px),而 html,body 的 overflow-x: clip 讓它們既看不見也點不到
     —— 且箭頭是該列唯一的連結(logo 是 img 不是 a),等於兩個夥伴頁
     在首頁失去入口。
     以 min() 夾住:欄內放得下時維持 430(桌機零變化),放不下時貼齊欄右緣。
     58 = .go 的算繪寬度(左右內距 20+20、框線 1+1、字符 advance 16)。
     注意 ➜ (U+279C) 不在自架 Roboto 的 unicode-range 內,由系統字型回退算繪,
     若某平台的 advance 大於 1em,實際寬度會超過 58 而略微超出欄右緣。 */
  left: min(430px, calc(100% - 58px));
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  line-height: 1;
  border: 1px solid #fff;
  border-radius: 32px;
  color: #fff;
  font-size: 16px;
}

/* ---------- 活動流程 ---------- */
.schedule { position: relative; }
/* 原站月份欄:容器寬 47.982% 兩欄、欄距 3.947% (1140 時 = 547/45) */
.schedule .months { display: grid; grid-template-columns: repeat(2, 47.982%); gap: 40px 3.947%; position: relative; z-index: 2; align-items: start; }
.schedule .month-col { display: flex; flex-direction: column; }
.schedule .month { padding-left: 15px; }
.schedule ul { padding: 0 31px 0 16px; }
.schedule h3 {
  font-family: "Roboto", var(--font-sans);
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  margin: 90px 0 20px;
}
.schedule .month:first-child h3 { margin-top: 0; }
/* 原站清單:無項目符號;單行 30px + padding-bottom 10 + margin-bottom 10 */
.schedule li {
  font-size: 20px;
  line-height: 30px;
  padding: 0 0 10px;
  margin: 0 0 10px;
}
.schedule li:last-child { padding-bottom: 0; margin-bottom: 0; }
.schedule .note { margin-top: 90px; font-size: 16px; font-weight: 400; line-height: 1; color: #fff; text-align: center; }

/* ---------- 常見問題 (手風琴) ---------- */
.faq { position: relative; margin-top: 160px; }
.faq .sec-head { margin-bottom: 30px; }
.faq-list { position: relative; z-index: 2; }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .35); }
.faq-item + .faq-item { margin-top: 10px; }
.faq-q {
  position: relative;
  width: 100%;
  display: block;
  padding: 30px 0 10px;
  color: #fff;
  font-family: var(--font-sys);
  font-size: 20px;
  text-align: left;
  line-height: 1.2;
}
/* 原站 icon 絕對定位於右緣 30px,不佔文字寬度 */
.faq-q .ico { position: absolute; right: 30px; top: 32px; display: inline-flex; transition: transform .25s; }
.faq-q .ico svg { width: 17.5px; height: 20px; display: block; }
.faq-item.open .faq-q .ico { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.faq-a-inner {
  background: rgba(255, 255, 255, .25);
  border-radius: 0;
  padding: 30px 85px 30px 65px;
  margin-bottom: 0;
  font-family: var(--font-sys);
  font-size: 20px;
  line-height: 24px;
  color: #fff;
}
.faq-a-inner a { text-decoration: underline; }

/* =============================================================
   頁尾
   ============================================================= */
/* 原站頁尾:1200px 容器置中 (無左推)、單列排版
   標題寬 10%、公益 logo 寬 18% (隨容器縮放)、ATCC logo 固定 137px */
.site-footer { background: var(--footer-bg); color: #fff; padding: 60px 0; }
.site-footer .container {
  padding-inline: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}
.site-footer .ft-title { font-size: 20px; font-weight: 600; line-height: 1; flex: none; width: 10%; }
.site-footer .ft-logo-a { flex: none; width: 18%; align-self: center; }
.site-footer .ft-logo-a img { width: 100%; height: auto; }
.site-footer .ft-logo-b { flex: none; width: 137px; margin-left: 1.75%; align-self: center; }
.site-footer .ft-logo-b img { width: 137px; height: auto; }
.site-footer .ft-contact {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-sys);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  column-gap: 16px;
  row-gap: 0;
  font-size: 20px;
  line-height: 30px;
}
.site-footer .ft-contact a:hover { color: var(--cyan); }
.copybar {
  background: var(--copybar-bg);
  color: #000;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  padding: 22.5px 10px;
}

/* =============================================================
   內頁共用
   ============================================================= */
.page-banner img { width: 100%; }

/* =============================================================
   合作夥伴頁 — 原站版型:1200 容器、圓角橫幅、
   左側 300px 直立選單 + 右側 900px 圓角卡片欄
   ============================================================= */
.partner-page .container { padding-inline: 0; }
.pp-banner { margin-top: 60px; }
.pp-banner img { width: 100%; border-radius: 30px; display: block; }
.pp-title { font-size: 48px; font-weight: 600; line-height: 1; color: var(--ink); margin-top: 60px; }
/* 原站兩欄:左 300 + 右 900,無欄距;右欄與左選單同列頂 */
.pp-cols { display: grid; grid-template-columns: 300px 1fr; margin-top: 60px; align-items: start; }
.pp-main { margin-top: 0; }
/* 原站選單:全項 25px 內距膠囊,current 帶灰底 */
.pp-menu { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.pp-menu a { display: inline-block; padding: 0 25px; font-size: 24px; font-weight: 500; line-height: 36px; border-radius: 60px; color: #757575; transition: color .2s; }
.pp-menu a:hover { color: var(--ink); }
.pp-menu a.active { color: var(--ink); background: var(--gray-light); }

.npo-label { font-size: 24px; font-weight: 600; line-height: 1; color: var(--gray-label); text-align: right; margin-bottom: 20px; }
.npo-label.light { color: #fff; }

.npo-intro { background: var(--gray-light); border-radius: 30px; padding: 20px 40px; }
/* 原站 whatsyoung 的 NPO 盒末段之後多 25.6px 空間(盒高 808.3 vs 其他頁的算式),
   非元素造成,直接以下內距補足 */
.npo-intro.pb-extra { padding-bottom: 45.6px; }
.npo-logo { width: 328px; max-width: 60%; height: auto; display: block; margin-bottom: 60px; }
/* 原站 logo 到首段的間距逐頁不同:syinlu/scimonth/sunshine 為 60,whatsyoung/consumers 為 40 */
.npo-logo.tight { margin-bottom: 40px; }
.npo-text { font-size: 20px; line-height: 30px; color: #7A7A7A; }
.npo-text p { margin-bottom: 14.4px; }

/* 下內距 21 而非 20:原站的下載按鈕(inline-block)所在行框多出約 1px 的下沉空間,
   直接併入內距,使五個夥伴頁的影音盒起點與原站一致 */
.topic-band { background: var(--yellow); border-radius: 30px; padding: 20px 40px 21px; margin-top: 60px; }
.topic-title { font-size: 36px; font-weight: 600; color: var(--ink); line-height: 1.2; margin: 60px 0; }
.topic-text { font-size: 20px; line-height: 30px; color: var(--ink); }
.topic-text p { margin-bottom: 14.4px; }
.dl-btn { display: inline-block; margin-top: 24px; font-size: 18px; font-weight: 600; line-height: 1; color: var(--blue); transition: opacity .2s; }
.dl-btn:hover { opacity: .65; text-decoration: underline; }

/* 原站影音區 = 灰底圓角大盒,標籤在盒內 */
.pp-media { background: var(--gray-light); border-radius: 30px; padding: 20px 40px; margin-top: 60px; }
.media-label { font-size: 24px; font-weight: 600; line-height: 1; color: var(--gray-label); text-align: right; margin: 60px 0; }
.media-label.first { margin: 0 0 20px; }
/* 原站首個影音標籤到影片的間距逐頁不同:syinlu/whatsyoung 為 20,
   scimonth/consumers/sunshine 為 60 */
.media-label.first.wide { margin-bottom: 60px; }
/* 桌機瀏覽器都能在 iframe 內算繪 PDF,故隱藏備援連結以維持與原站相同的版面高度;
   手機端(iOS Safari 不在 iframe 內開 PDF)於 ≤767px 區塊改為顯示,見文末。 */
.pdf-fallback { display: none; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 原站 embedpress 外框 606 = iframe 600 + 行內元素基線間隙 6px,直接還原該高度差 */
.pdf-frame { width: 100%; height: 606px; }
.pdf-frame iframe { width: 100%; height: 600px; border: 0; }
.pdf-fallback { margin-top: 14px; font-size: 15px; color: var(--gray-mid); }
.pdf-fallback a { color: var(--blue); text-decoration: underline; }
.partner-page { padding-bottom: 60px; }

/* =============================================================
   最新消息列表頁 — 原站版型:1200 容器、16:9 圓角橫幅、
   左 300px「所有消息」籤 + 右 798px 卡片欄 (欄距 102)
   ============================================================= */
.news-page { padding-bottom: 160px; }
.news-page .container { padding-inline: 0; }
.np-banner { margin-top: 60px; }
/* 16:9。原本寫死 height:675px,只在容器恰為 1200 時才等於 16:9(1200×9/16 = 675);
   768–1199 區間容器變窄而高度不變,4000×2250 的原圖會被左右各裁掉一大塊。
   改用 aspect-ratio 後桌機值不變、平板自動正確。 */
.np-banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 30px; display: block; }
.np-title { font-size: 48px; font-weight: 600; line-height: 1; color: var(--ink); margin: 60px 0; }
.np-cols { display: grid; grid-template-columns: 300px 1fr; column-gap: 102px; align-items: start; }
.np-tab {
  display: inline-block;
  background: var(--gray-light);
  border-radius: 60px;
  padding: 8px 24px;
  font-size: 24px;
  line-height: 1;
  color: var(--gray-mid);
}
.news-cards { display: grid; gap: 20px; }
/* 原站卡片:1px ink 框、r10、無陰影、無 hover 效果;
   外盒內距 10/15、日期欄與內文間距 10、內文四邊內距 15,
   標題 lh36+mb10、摘要 lh30+mb10 → 1+10+15+122+15+10+1 = 單行卡總高 174 */
.news-card {
  position: relative;
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 10px 15px;
}
.news-card .date { flex: none; text-align: center; min-width: 62px; }
.news-card .date .d { font-size: 54px; font-weight: 600; color: var(--ink); line-height: 1; }
.news-card .date .m { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 18px; }
.news-card .body { flex: 1; padding: 15px; }
.news-card h2 { font-size: 24px; font-weight: 600; color: #000; line-height: 36px; margin-bottom: 10px; }
.news-card h2 a::after { content: ""; position: absolute; inset: 0; }
.news-card .excerpt { font-size: 20px; color: var(--gray-mid); line-height: 30px; margin-bottom: 10px; }
.news-card .more {
  position: relative;
  z-index: 2;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
  color: var(--gray-mid);
  border: 1px solid var(--gray-mid);
  border-radius: 60px;
  padding: 5px 15px;
  background: #fff;
}

/* =============================================================
   文章頁 — 原站版型:1200 容器、標題 36px、內文縮排 30px、
   圖片半寬左對齊、‹› 前後篇導覽
   ============================================================= */
/* 預設文章模板 (原站多數文章):滿寬 1200、行流式段落 (無段距,
   空行 = 30px)、圖 600 寬、標題下距 60;news-22 為縮排特例 (.pp-indent) */
.post-page { padding: 100px 0; }
.post-page .container { padding-inline: 0; }
.post-title { font-size: 36px; font-weight: 600; color: var(--ink); line-height: 1; margin-bottom: 60px; }
.post-body { padding: 0; font-size: 20px; line-height: 30px; color: var(--ink); }
.post-body p { margin-bottom: 0; }
.post-body p.gap { min-height: 30px; }
.post-body p.mt50 { margin-top: 50px; }
.post-body img { width: 600px; margin: 60px 0; }
/* 原站圖說:12px/18px 灰字,圖說到下一段間隔較大 (widget 邊距) */
.post-body .img-caption { font-size: 12px; line-height: 18px; color: #7A7A7A; margin-bottom: 54px; }
.post-body a { color: var(--blue); text-decoration: underline; word-break: break-all; }
/* news-22 縮排模板 */
.pp-indent .post-title { margin-bottom: 100px; }
.pp-indent .post-body { padding: 0 30px; }
.pp-indent .post-body p { margin-bottom: 14.4px; }
.pp-indent .post-body img { width: 50%; margin: 54px 0 20px; }
/* 格線內的圖佔滿欄寬 (原站三欄各 360),不套用上面的 50% 縮排規則 */
.pp-indent .post-body .post-grid img { width: 100%; margin: 0; }
/* 原站大合照那一則 widget 獨有 padding:10px,欄內容因此是 1120,圖為其 50% = 560
   (同頁另兩張沒有此內距,維持 570)。左右各 10 反映在寬與左移,上下各 10 併入外距。 */
.pp-indent .post-body img.inset10 { margin: 64px 0 30px 10px; width: calc((100% - 20px) * .5); }
/* 圖說的 54 下距會被 .pp-indent .post-body p (0,2,1) 壓過,補一條同權重的 */
.pp-indent .post-body p.img-caption { margin-bottom: 54px; }

/* 多欄版面 (名單五欄 / 照片三欄,原站三欄區塊帶 10px 左/上位移) */
.post-grid { display: grid; gap: 20px; margin: 0 0 20px; }
/* 錄取名單:滿容器 1200 (突破內文 30 縮排)、五欄無縫、fs16/lh24、
   欄首 (●夥伴名) 粗體 + 14.4 下距,隊名連續行 */
/* 原站名單容器實測 [672.5, 1200] = 容器本身,欄寬 240。先前的 margin-inline:-30px
   是為了抵銷 .pp-indent 的 30px 內距,但本頁用的是 pp2-wrap 沒有那層內距,
   反而把名單推出容器 30px、欄寬變成 252(兩側各被 overflow-x 裁掉)。 */
.post-grid.cols-5 { grid-template-columns: repeat(5, 1fr); column-gap: 0; }
.post-grid.cols-5 p { font-size: 16px; line-height: 24px; margin-bottom: 0; }
.post-grid.cols-5 .pg-col p:first-child { font-weight: 700; margin-bottom: 14.4px; }
/* 複賽晉級名單 (news-21):雙欄 600/580,fs16,隊伍區塊間 14.4 */
/* 欄寬用 minmax 而非寫死:600+10+580 = 1190,只有內容區 ≥1190 時才放得下。
   寫死時,768–1204 區間第二欄會整個掉出視口,而 html,body 的 overflow-x: clip
   讓使用者無法橫向捲動 → 該欄內容永久不可見(≤767 另有單欄覆寫,不受影響)。
   改用 minmax 後,內容區 ≥1190 時解為精確的 600/580(桌機零變化),
   不足時兩欄收縮而不溢出。注意依 CSS Grid §12.6,剩餘空間是「等量」分配
   而非依 600:580 的比例,所以一旦放不下,兩欄會收成等寬
   (例:內容區 800 → 379/379),而不是維持原比例。 */
.post-grid.cols-2 { grid-template-columns: minmax(0, 600px) minmax(0, 580px); column-gap: 10px; margin: 0; font-size: 16px; line-height: 24px; }
.post-body > .post-grid.cols-2:first-child { margin-top: 150px; }
.post-grid.cols-2 + .post-grid.cols-2 { margin-top: 25px; }
.post-grid.cols-2 p { font-size: 16px; line-height: 24px; margin-bottom: 14.4px; }
.post-grid.cols-2 .pg-col > p:first-child { margin-bottom: 14.4px; }
.post-grid.cols-3 { grid-template-columns: repeat(3, calc((100% - 50px) / 3)); column-gap: 19.5px; padding: 10px 0 0 10px; }
.post-grid img { width: 100%; margin: 0; }
.post-grid p { margin-bottom: 10px; }

/* 前後篇導覽:全寬 1px 分隔線 (rgba(0,0,0,.5))、線距內容 115 (標準頁) */
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 115px;
  border-top: 1px solid rgba(0, 0, 0, .5);
  padding-top: 35px;
}
.pn { display: flex; align-items: center; gap: 0; max-width: 48%; }
.pn-arrow { flex: none; width: 15px; font-size: 30px; line-height: 1; color: #D5D8DC; display: inline-flex; align-items: center; }
.pn-arrow svg { width: 13px; height: 22px; display: block; fill: currentColor; }
.pn-body { display: flex; flex-direction: column; gap: 0; }
.pn-body.pn-right { text-align: right; }
.pn-label { font-size: 12.8px; line-height: 1.5; color: #7A7A7A; }
.pn-title { font-size: 16px; line-height: 24px; color: #54595F; }
.pn.next { margin-left: auto; }

/* =============================================================
   報名頁面 — 原站版型:720 寬橫幅、綠色 48px 標題、
   內文只縮排左側 41.6px (右側齊容器右緣,文字欄寬 1158.4)、紅色置中「報名已截止」
   ============================================================= */
.signup-page { padding: 60px 0 70px; }
.signup-page .container { padding-inline: 0; }
.signup-banner img { width: 720px; max-width: 90%; }
.signup-h { font-size: 48px; font-weight: 600; line-height: 1; color: #23AC38; margin: 60px 0 83px; }
.signup-text { padding: 0 0 0 41.6px; font-size: 20px; line-height: 30px; color: var(--ink); }
.signup-text p { margin-bottom: 14.4px; }
/* 原站小節標籤:綠底白字膠囊 (p.apply_sub_title) */
.signup-text .sub-pill {
  display: inline-block;
  background: #23AC38;
  color: #fff;
  border-radius: 50px;
  padding: 4px 16px;
  margin: 30px 0 14.4px;
}
/* 原站前兩個膠囊之前是「無下邊距的裸文字節點」、第三個之前才是真正的 <p>,
   故前兩段標記 .tight 取消下邊距,三處間距才會分別是 30/30/44.4 (同原站) */
.signup-text p.tight { margin-bottom: 0; }
.signup-closed {
  /* 原站此處在獨立 widget,前段下邊距 14.4 不與之合併,實測總距 84.4;
     我們同屬一個流,邊距會合併,故直接寫合併後的值 */
  margin-top: 84.4px;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #FB4444;
}

/* =============================================================
   響應式
   ============================================================= */
@media (max-width: 1024px) {
  /* 顯示 PDF 備援下載連結。WebKit(iOS 與 iPadOS 同一套)不在 iframe 內算繪 PDF,
     只會得到一個空框。門檻取 1024 而非 767:iPad 各機型的 CSS 寬度是
     768 / 810 / 820 / 834 / 1024,全部落在 767 以上 —— 只放到手機斷點的話,
     最需要這條備援的裝置反而拿不到。桌機瀏覽器都能內嵌算繪,故維持隱藏
     以保住與原站相同的版面高度。 */
  .pdf-fallback { display: block; }
  .partner-rows { grid-template-columns: 1fr; column-gap: 0; }
  .pp-cols { grid-template-columns: 1fr; row-gap: 40px; }
}

/* 這四類頁面在 media query 外都有 .X-page .container { padding-inline: 0 }(權重 (0,2,0));
   桌機靠 max-width: 1200 置中取得左右留白,所以 0 內距沒問題。但只要
   clientWidth ≤ 1200,容器就填滿視口,0 內距會讓文字直接貼齊螢幕兩側。
   實測邊界:1024px 以下由上方區塊處理,而 1025–1215 這一段先前無人覆蓋
   (1215 = 1200 + 15px 捲軸;macOS 覆蓋式捲軸為 0,故實際門檻是 clientWidth > 1200)。
   夥伴頁原本就在 ≤1024 給 16px,此處統一延伸到整個會貼邊的範圍。
   不採用平板區塊 .container 的 120/57:該值只在 index.html 實測過,
   套到本頁型會把 .np-cols 的 300px 側欄擠爆而溢出視口。 */
@media (max-width: 1215px) {
  .post-page .container, .news-page .container,
  .signup-page .container, .partner-page .container { padding-inline: 16px; }
}

/* ---------- 平板 (原站 768–1024:迷你桌機選單、內距 120/72、字級縮小) ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { padding-inline: 120px 57px; }
  /* 注意:上面這條權重是 (0,1,0),對 .post-page / .news-page / .signup-page /
     .partner-page 四類頁面無效 — 它們被 media query 外的 .X-page .container
     { padding-inline: 0 }(0,2,0)壓過,media query 本身不加權重。
     那四類頁面的窄視口內距統一在上方的 @media (max-width: 1215px) 區塊處理。 */
  :root { --header-h: 64px; }
  .site-header .container { padding: 0; }
  .brand { margin-left: 17px; }
  .brand img { width: 97px; height: 36px; }
  .main-nav { width: auto; margin: 0 31px 0 auto; gap: 81px; align-items: center; }
  .main-nav > a, .main-nav .has-dropdown > a { font-size: 16px; padding: 0; }
  .main-nav .has-dropdown > a svg { margin-left: 12px; width: 16px; height: 16px; }
  .apply-btn { font-size: 16px; padding: 8px 16px; line-height: 24px; }
  .hero .hero-cta { font-size: 24px; padding: 12px 30px; line-height: 24px; }

  .band-a, .band-b { padding: 100px 0; }
  .sec-head { margin-bottom: 40px; }
  .sec-head h2 { font-size: 36px; }
  .sec-head::before { height: 150px; left: -120px; }
  .intro-text { font-size: 16px; line-height: 24px; }
  .home-news { margin-top: 115px; }
  .home-news .sec-head { margin-bottom: 20px; }
  .schedule h3 { margin: 60px 0 7px; }
  .schedule .note { margin-top: 68px; }
  .p-divider { margin: 16px 0; }
  .partner-wall { margin-bottom: 100px; }
  .faq { margin-top: 100px; }
  .faq .sec-head { margin-bottom: 20px; }
  .home-news-list a { font-size: 16px; line-height: 24px; padding: 20px 0 9px; }
  .schedule h3 { font-size: 56px; }
  .schedule li { font-size: 16px; line-height: 24px; }
  .faq-q { font-size: 16px; line-height: 24px; padding: 20px 0 9px; }
  /* 字級與上內距在此縮階(20/30 → 16/20),基底那個量自桌機的 top: 32px 必須跟著
     重推,否則箭頭比問句首行中心低 10.25px、下緣距分隔線只剩 1px。
     21px 與手機區塊(見文末)同值 —— 兩處的字型度量完全相同。 */
  .faq-q .ico { top: 21px; }
  .faq-a-inner { font-size: 16px; padding: 20px 40px; }

  /* 夥伴牆 (單欄) tablet logo 實測寬 */
  .p-logo-1, .p-logo-4 { width: 323px; }
  .p-logo-2, .p-logo-3 { width: 161px; }
  .p-logo-5 { width: 242px; }

  /* 頁尾:兩列 (標題+雙 logo / 聯絡資訊) */
  .site-footer .container { padding-inline: 0; }
  .site-footer .ft-title { width: auto; font-size: 16px; margin-right: 147px; }
  .site-footer .ft-logo-a { width: 181px; }
  .site-footer .ft-logo-b { margin-left: 142px; }
  .site-footer .ft-contact { flex-basis: 100%; margin: 40px 0 0 38px; justify-content: flex-start; column-gap: 49px; }
}

@media (max-width: 767px) {
  /* 原站手機版:內容左 45 / 右 16,漸層條在 x=9 (內容左緣 -36) */
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .container { padding-inline: 45px 16px; }
  .sec-head::before, .page-title-head::before { left: -36px; }

  /* header 63 高:漢堡置左 (45x29 帶框)、logo 靠右 */
  .site-header { height: 63px; }
  .brand { margin-left: auto; margin-right: 48px; padding-top: 3px; }
  .brand img { width: 100px; height: 37px; }
  .nav-toggle { order: -1; width: 45px; height: 29px; gap: 4px; padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 0; margin-left: 10px; }
  .nav-toggle span { height: 1px; }

  /* hero:無 CTA 按鈕,裝飾圖顯示於右下 (溢出至下個區塊) */
  .hero .hero-cta { display: none; }
  .hero .deco-hero { display: block; width: 188px; right: -38px; bottom: -124px; }

  .band-a { padding: 60px 0; }
  .band-b { padding: 60px 0 60px; }
  .sec-head { margin-bottom: 30px; }
  .sec-head h2, .page-title-head h1 { font-size: 28px; padding-left: 0; }
  .sec-head::before, .page-title-head::before { width: 8px; height: 100px; }
  .page-title-head::before { top: 0; }

  .intro-text { font-size: 16px; line-height: 24px; }
  .home-news { margin-top: 70px; }
  .home-news .sec-head { margin-bottom: 10px; }
  .home-news-list a { font-size: 16px; line-height: 24px; padding: 20px 0 9px; }

  /* 夥伴牆手機版:單欄、logo 縮版、➜ 靠內容右緣 (46x30) */
  .p-logo-1 { width: 227px; } .p-logo-2 { width: 134px; } .p-logo-3 { width: 214px; }
  .p-logo-4 { width: 227px; } .p-logo-5 { width: 174px; }
  .partner-wall { margin-bottom: 99px; }
  .partner-row .go { left: auto; right: 0; padding: 8px 16px; font-size: 12px; line-height: 12px; }
  .p-divider { margin: 16px 0; }

  .schedule h3 { font-size: 56px; margin: 66px 0 7px; padding-left: 20px; }
  .schedule .month { padding-left: 0; }
  .schedule ul { padding: 0 12px 0 16px; }
  .schedule li { font-size: 16px; line-height: 24px; margin-bottom: 0; }
  /* 單欄堆疊:跨欄處 = grid row-gap 40 + 66;第二欄第二月前 76 */
  .schedule .month-col + .month-col .month:first-child h3 { margin-top: 66px; }
  .schedule .month-col + .month-col .month + .month h3 { margin-top: 76px; }
  .schedule .note { margin-top: 86px; font-size: 16px; }
  .faq { margin-top: 60px; }
  .faq .sec-head { margin-bottom: 10px; }
  .faq-q { font-size: 16px; line-height: 24px; padding: 20px 0 8px; }
  .faq-q .ico { right: 0; top: 21px; }
  .faq-a-inner { font-size: 16px; padding: 18px 20px; }

  .npo-intro { padding: 28px 22px; margin-bottom: 60px; }
  .topic-band .topic-title { font-size: 26px; }
  /* 以下三條是夥伴頁漏掉的手機縮階,數值取自原站同位置實測:
     .pp-title 原站 24/24(重建版原為 48/48,整整兩倍)、
     .npo-text 與 .topic-text 原站 16/24(重建版原為 20/30,是全站 9 份
     20px 內文副本中僅有的兩份沒有手機覆寫者)、
     .media-label 原站與 .npo-label 同為 20(重建版原為 24,同一欄裡兩種大小)。 */
  .pp-title { font-size: 24px; }
  .npo-text, .topic-text { font-size: 16px; line-height: 24px; }
  .npo-label, .media-label { font-size: 20px; }
  .media-sec { padding: 60px 0 20px; }
  .pdf-frame { height: 420px; }

  .news-card { flex-direction: row; gap: 16px; }
  .news-card .date .d { font-size: 40px; }
  .news-card h2 { font-size: 19px; }
  .news-card .excerpt { font-size: 16px; }

  .post-grid.cols-5 { grid-template-columns: 1fr; margin-inline: 0; }
  .post-grid.cols-3 { grid-template-columns: 1fr; }
  /* 基底規則的 minmax 在此寬度會把兩欄各壓到約 156px(16px 字約 9 個中文字一行),
     故仍需單欄覆寫 —— 不是為了防溢出(minmax 已不會溢出),而是為了可讀性。 */
  .post-grid.cols-2 { grid-template-columns: 1fr; }
  .post-title { font-size: 24px; line-height: 1.4; margin-bottom: 50px; }
  .post-body { font-size: 16px; line-height: 26px; padding: 0 10px; }
  .post-body img { width: 100%; }
  /* 註:基底規則已是 aspect-ratio: 16/9,此處的 height: auto 不再改變比例,
     僅保留圓角覆寫。 */
  .np-banner img { height: auto; border-radius: 16px; }
  .np-cols { grid-template-columns: 1fr; row-gap: 24px; }
  .np-title { font-size: 28px; margin: 40px 0 20px; }
  .pp-banner img { border-radius: 16px; }
  .signup-h { font-size: 28px; margin: 40px 0 40px; }
  .signup-text { font-size: 16px; line-height: 26px; padding: 0 10px; }
  .signup-closed { font-size: 24px; }

  /* 頁尾手機版:全部置中堆疊 */
  .site-footer { padding: 60px 0 60px; }
  .site-footer .container { padding-inline: 16px; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
  .site-footer .ft-title { width: auto; font-size: 16px; }
  .site-footer .ft-logo-a, .site-footer .ft-logo-b { width: auto; margin-left: 0; }
  .site-footer .ft-logo-a img { width: auto; height: 42px; }
  .site-footer .ft-logo-b img { width: auto; height: 26px; }
  .site-footer .ft-contact { margin-left: 0; margin-top: 10px; flex-direction: column; align-items: center; gap: 30px; font-size: 16px; line-height: 1.5; }
  .copybar { font-size: 12px; padding: 20px 16px 18px; line-height: 1; }
}