/**
 * 主樣式 — 所有數值一律引用 tokens.css 的變數，禁止寫死色碼與字級。
 */

/* ===== 重置 ===== */
*, *::before, *::after { box-sizing: border-box; }

/*
 * 長字串（尤其是網址）必須能斷行。
 * 實例：多篇公告的內文含 https://marubeni.box.com/... 這種長網址，
 * 在 375px 下會把整頁撐寬 100px，產生橫向捲動。
 * 用 anywhere 而非 break-word，因為只有 anywhere 會影響 min-content 寬度，
 * 也就是真正阻止版面被撐開的那個值。
 */
body { overflow-wrap: anywhere; }

/*
 * 橫向溢出防線：內頁的裝飾造形（線稿、hero 色塊）與進場動畫的 translateX
 * （fade-left/right 隱藏態會把元素推出視窗）都可能在手機上撐出橫向捲軸。
 * 在內容容器裁掉水平溢出——用 clip 不會像 hidden 那樣產生額外的捲動容器，
 * 固定式導覽列在 #content 之外，不受影響。
 */
#content { overflow-x: clip; }

/* 標題與數字不該被硬斷，維持正常斷行規則 */
h1, h2, h3, h4, h5, h6,
.stat__value, .linklist__date, .row-item__meta { overflow-wrap: normal; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text-sub);
  background: var(--color-surface);
  /*
   * 只加導覽列高度，不加工具列高度：登入後 WordPress 自己會下
   * html { margin-top: 32px !important }（≤782px 為 46px）把整份文件推下去，
   * 位置已經留好了。這裡若再加一次，header 與內容之間就會多出一條
   * 恰好等於工具列高度的空白——實測就是 32px。
   */
  padding-top: var(--header-height);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--lh-heading);
  color: var(--color-text);
  font-weight: var(--fw-bold);
}

p { margin: 0 0 var(--space-2); }

a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { opacity: 0.75; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

/* ===== 版面容器 ===== */
.container {
  width: var(--container-max);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section-wrap { padding: var(--space-6) 0 var(--space-7); }
.section-wrap--tint { background: var(--color-second-bg); }
.section-wrap--brand { background: var(--color-primary-bg); }

.section-header { margin-bottom: var(--space-5); }

.section-title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

.section-lead {
  margin-top: var(--space-2);
  max-width: 46rem;
  color: var(--color-text-sub);
}

/* ===== 導覽列 =====
   vision 站手機為 50px，桌機以 padding: 11px 0 撐高。這裡改用變數表達同一意圖，
   讓 421×90 的 PNG logo 在桌機有足夠高度可讀。 */
@media (min-width: 801px) {
  :root { --header-height: 68px; }
}

/*
 * 登入後 WordPress 會在最上方插一條固定的工具列（32px，窄螢幕 46px），
 * z-index 99999 蓋過站台 header——管理者一登入就看不到自己網站的導覽列。
 *
 * 用一個變數統一處理，讓 header、抽屜選單、sticky 側欄都跟著位移，
 * 不必每個地方各寫一次 top: 32px。未登入時它是 0，什麼都不影響。
 */
:root { --admin-bar-height: 0px; }

body.admin-bar { --admin-bar-height: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar { --admin-bar-height: 46px; }
}

/*
 * 600px 以下 WordPress 把工具列改成 position: absolute——它會跟著頁面捲走，
 * 不再佔住頂部，所以 header 貼齊視窗頂端（變數歸零）。
 *
 * 但 html 的 46px margin 仍在（WordPress 不分寬度都加），header 又是
 * fixed 不受 margin 影響，這時 body 的上方留白要把那 46px 扣掉，
 * 否則 header 底下同樣會多一條空白。
 */
@media screen and (max-width: 600px) {
  body.admin-bar {
    --admin-bar-height: 0px;
    padding-top: calc(var(--header-height) - 46px);
  }
}

.header {
  position: fixed;
  inset: var(--admin-bar-height) 0 auto 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: var(--color-surface);
  box-shadow: var(--shadow-header);
  z-index: 999;
  transition: var(--transition);
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-logo { display: flex; align-items: center; min-width: 0; }
.header-logo a { display: flex; align-items: center; }

/* logo 目前只有 PNG（421×90），必須壓到導覽列高度內。
   同時限寬：這張 logo 很寬，若放到滿高會吃掉 ~260px，桌機一整排選單就擠。 */
.header-logo img {
  max-height: calc(var(--header-height) - 12px);
  max-width: 220px;
  width: auto;
  object-fit: contain;
}

.header-logo__text {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--ls-button);
}

.header-nav ul { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; }

.header-nav a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  letter-spacing: var(--ls-button);
  /*
   * 選單標籤絕不斷字。全站 body 有 overflow-wrap: anywhere（為了長網址），
   * 那條規則會把「Sustainability」硬切成「Sustainabilit y」——導覽列必須豁免。
   */
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav .current-menu-item > a { color: var(--color-primary); opacity: 1; }

.header-toggle {
  display: none;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 0;
  background: none;
  cursor: pointer;
}

.header-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--color-text);
  transition: var(--transition);
}

/* ===== 按鈕 =====
   命名沿用 vision 站：btn-primary 是白底藍字、btn-second 才是藍底白字。
   與 Bootstrap 慣例相反，改動前先確認。 */
.btn {
  display: inline-block;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-button);
  line-height: var(--lh-button);
  padding: 0.47rem 0.75rem 0.63rem;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary   { color: var(--color-primary); background: var(--color-surface); }
.btn-second    { color: #fff; background: var(--color-primary); }
/*
 * 主要行動按鈕＝ logo 橘黃。深藍照片與深藍區塊上，亮藍按鈕會藍疊藍糊掉；
 * 橘黃是藍的互補色，一眼就跳出來（vision 的 CTA 也是金橘色）。
 * 文字用深藍不用白：白字配橘黃對比僅約 1.9:1 讀不清，深藍配橘黃約 5.4:1 過 AA。
 */
.btn-accent    { color: var(--color-primary); background: var(--color-solar); }
.btn-accent::after { background: rgba(32, 69, 139, 0.18); }
.btn-accent:hover { background: #f5b943; }
.btn-outerline { color: var(--color-text-sub); background: transparent; border: 1px solid var(--color-border); }
.btn:hover     { opacity: 0.85; }

.btn-link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

/* ===== 首頁主視覺 ===== */
.hero { position: relative; min-height: 32rem; display: flex; align-items: center; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,27,72,.72) 0%, rgba(2,27,72,.25) 100%); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 注意：本元素同時掛 .container，只能設垂直內距。
   用 padding 簡寫會蓋掉 .container 的左右內距。 */
.hero__inner { position: relative; z-index: 1; color: #fff; padding-block: var(--space-6); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: #fff;
  max-width: 22em;
}

.hero__title small { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-medium); color: var(--color-accent); margin-top: var(--space-2); }
.hero__lead { margin-top: var(--space-3); max-width: 34rem; color: rgba(255,255,255,.9); }
.hero__actions { margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ===== 數據列 ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

.stat { padding: var(--space-3); background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.stat__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-text-muted); }
.stat__value { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--color-primary); line-height: var(--lh-tight); }
.stat__unit  { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text-sub); margin-left: 0.25em; }

/* ===== 卡片格線 ===== */
.grid { display: grid; gap: var(--space-3); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition);
}

/* 卡片 hover：整張抬起＋陰影加深＋圖片緩緩推近＋標題轉品牌藍。
   讓卡片「有反應、想點」，這是「會動的網站」和「靜態模板」的差別。 */
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 46px rgba(2, 27, 72, 0.16);
}
.card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-second-bg); }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__title { transition: color 0.3s var(--ease-out); }
.card:hover .card__title { color: var(--color-primary); }
.card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.card__meta { font-size: var(--fs-sm); color: var(--color-text-muted); }
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.card__excerpt { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text-sub); }
.card__footer { margin-top: auto; padding-top: var(--space-2); }

/* ===== 條列（服務、優勢）===== */
.item { display: flex; gap: var(--space-2); align-items: flex-start; }

.item__icon {
  flex-shrink: 0;
  width: 2.6875rem;
  height: 2.6875rem;
  border-radius: var(--radius-full);
  background: rgba(34, 37, 38, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.item__title   { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.item__content { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--color-text-sub); }

/* ===== 條列式（新聞與公告）=====
   不放縮圖：公告類文章的內文首圖多為掃描件，當縮圖無資訊量。 */
.rowlist { border-top: 1px solid var(--color-line); }

.row-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }

.row-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.row-item__tag {
  padding: 0.1em 0.6em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: var(--radius-sm);
}

.row-item.is-sticky { background: var(--color-second-bg); padding-inline: var(--space-3); border-radius: var(--radius-sm); }
.row-item__tag--sticky { color: #fff; background: var(--color-accent); }

.row-item__title { font-size: var(--fs-lg); margin-bottom: var(--space-1); }
.row-item__title a { color: var(--color-text); }
.row-item__title a:hover { color: var(--color-primary); opacity: 1; }
.row-item__excerpt { margin: 0; font-size: var(--fs-base); color: var(--color-text-sub); }

/* ===== 篩選列 ===== */
.filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }

.filter__item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
  background: var(--color-second-bg);
  border-radius: var(--radius-button);
  transition: var(--transition);
}

.filter__item:hover { background: var(--color-primary-bg); color: var(--color-primary); opacity: 1; }
.filter__item.is-active { background: var(--color-primary); color: #fff; }
.filter__count { font-size: var(--fs-xs); opacity: 0.7; }

.listing-count { font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* ===== 連結目錄（簡明月報）===== */
.linklist { border-top: 1px solid var(--color-line); }

.linklist li a,
.linklist__row {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text);
}

.linklist__row.is-empty { color: var(--color-text-muted); }
.linklist__hint--muted { color: var(--color-text-muted); font-weight: var(--fw-regular); }

.linklist li a:hover { color: var(--color-primary); opacity: 1; }
.linklist__date { font-size: var(--fs-sm); color: var(--color-text-muted); flex-shrink: 0; min-width: 6em; }
.linklist__title { flex: 1; font-weight: var(--fw-medium); }

.linklist__hint {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

/* ===== CTA ===== */
.cta { background: var(--color-second); color: #fff; text-align: center; }
.cta .section-title { color: #fff; }
.cta p { color: rgba(255,255,255,.85); }

/* ===== 頁尾 ===== */
/* ===== 頁尾 =====
 * 目標：緊湊、好掃讀。原本網站導覽八個項目排成一長條，把頁尾撐到近兩倍高；
 * 改成兩欄後高度砍半，上下內距也收緊。連結加底線滑入，滑過才「有感」。 */
.footer { background: var(--color-second); color: rgba(255,255,255,.72); padding: var(--space-4) 0 var(--space-2); }
.footer a { color: rgba(255,255,255,.72); transition: color 0.25s var(--ease-out); }
.footer a:hover { color: #fff; opacity: 1; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1.4fr 0.9fr 1.2fr; gap: var(--space-3) var(--space-4); }
.footer__brand { font-size: var(--fs-base); font-weight: var(--fw-bold); color: #fff; margin-bottom: 0.5rem; }
.footer__grid > div > p:not(.footer__brand):not(.footer__title) { font-size: var(--fs-sm); line-height: 1.75; margin: 0; }

.footer__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: #fff;
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.footer__list li { padding: 0.18rem 0; font-size: var(--fs-sm); }

/* 網站導覽分兩欄；break-inside 避免項目被拆到兩欄之間 */
.footer__list--nav { columns: 2; column-gap: var(--space-3); }
.footer__list--nav li { break-inside: avoid; }

/* 連結底線由左滑入 */
.footer__list a { position: relative; }
.footer__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--color-solar);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.footer__list a:hover::after { transform: scaleX(1); }

/* 頁尾品牌標誌：反白處理，深藍底上才看得清楚 */
.footer__logo { margin: 0 0 0.75rem; }
.footer__logo img {
  width: auto;
  max-width: 190px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.footer__addr { margin-top: 0.6rem; font-size: var(--fs-sm); color: rgba(255,255,255,.6); }

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--fs-xs);
  color: rgba(255,255,255,.5);
}

.footer__copy { margin: 0; }

/* 丸紅集團背書：標籤＋反白標誌 */
.footer__group {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
}

.footer__group-label { font-size: var(--fs-xs); color: rgba(255,255,255,.45); letter-spacing: 0.08em; }

.footer__group-logo {
  width: auto;
  max-width: 132px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

/* ===== 頁面標頭與內文 ===== */
.page-hero { background: var(--color-primary-bg); padding: var(--space-5) 0; }
.page-hero__title { font-size: var(--fs-4xl); color: var(--color-primary); letter-spacing: var(--ls-heading); }
.entry-content { max-width: 48rem; }
.entry-content h2 { font-size: var(--fs-2xl); margin: var(--space-4) 0 var(--space-2); }
.entry-content h3 { font-size: var(--fs-xl); margin: var(--space-3) 0 var(--space-1); }
.entry-content img { border-radius: var(--radius-card); margin: var(--space-3) 0; }

/*
 * 內文的裸 <svg>（Elementor 遺留的圖示）沒有寬高屬性，
 * 不限制的話會撐滿容器——/contact/ 就出現過佔滿全頁的電話圖示。
 */
.entry-content svg,
.chenya-inline-icon {
  width: 1.6rem;
  height: 1.6rem;
  fill: var(--color-primary);
  vertical-align: middle;
  display: inline-block;
}

/* 內嵌地圖等 iframe 一律填滿寬度，不可超出 */
.entry-content iframe {
  width: 100%;
  max-width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: var(--radius-card);
  margin: var(--space-3) 0;
  display: block;
}

/* ===== 分頁 ===== */
.pagination { display: flex; gap: var(--space-1); justify-content: center; margin-top: var(--space-5); }
.pagination .page-numbers { padding: 0.4rem 0.8rem; border-radius: var(--radius-sm); color: var(--color-text-sub); }
.pagination .current { background: var(--color-primary); color: #fff; }

/* ===== 響應式：主分界 800px ===== */
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/*
 * 導覽列收合分界＝1199px，比版面主分界（800px）寬。
 * 原因：七個頂層項目在英文（About Us／Sustainability／Investments…）比中文長得多，
 * 加上偏寬的 logo、Contact 按鈕與語言切換，在筆電寬度（~1000–1150px）根本排不進一行。
 * 與其讓它擠爆換行，不如在放不下時就收成抽屜——這也更接近 startrade 那種
 * 「logo ＋ 精簡右側」的沉穩作法。真正的桌機寬度（≥1200px）才展開整排。
 */
@media (max-width: 1199px) {
  .header-toggle { display: block; }

  .header-nav {
    position: fixed;
    inset: calc(var(--header-height) + var(--admin-bar-height, 0px)) 0 auto 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-header);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .header-nav.is-open { max-height: 80vh; overflow-y: auto; }
  .header-nav ul { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; padding: var(--space-1) var(--container-pad); }
  .header-nav li { border-bottom: 1px solid var(--color-line); }
  .header-nav li:last-child { border-bottom: 0; }
  .header-nav a { display: block; padding: var(--space-2) 0; font-size: var(--fs-base); white-space: normal; }
}

@media (max-width: 800px) {
  :root { --container-pad: 5vw; --fs-hero: 2.25rem; --space-6: 3rem; --space-7: 3.5rem; }

  .grid--3, .grid--2, .stats, .footer__grid { grid-template-columns: 1fr; }
  .footer__grid { gap: var(--space-3); }
  .hero { min-height: 24rem; }
  .hero__actions .btn { flex: 1; text-align: center; }

  /* 月報列表在窄螢幕改為兩行，避免日期與標題擠在一起 */
  .linklist li a { flex-wrap: wrap; gap: 0.25rem var(--space-1); }
  .linklist__date { min-width: 0; width: 100%; }
  .linklist__title { flex: 1 1 auto; }

  .filter { gap: 0.4rem; }
  .filter__item { padding: 0.35rem 0.7rem; }
}

/* ===== 表單（Gravity Forms 與一般表單共用）=====
   舊站的「合作機會」頁把 Gravity Forms 的 HTML 貼死在內容裡，
   沒有樣式也送不出去。改用短代碼後由 GF 輸出 markup，這裡負責讓它符合站上的語彙。 */
.gform_wrapper form { max-width: 46rem; }

.gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 單欄的欄位類型（多行文字、單選群組、說明）跨滿兩欄 */
.gform_wrapper .gfield--type-textarea,
.gform_wrapper .gfield--type-radio,
.gform_wrapper .gfield--type-checkbox,
.gform_wrapper .gfield--type-html,
.gform_wrapper .gfield--width-full { grid-column: 1 / -1; }

.gform_wrapper .gfield_label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
}

/* 必填一律紅色星號（不用「(Required)」英文字，表單是三語共用的） */
.gform_wrapper .gfield_required {
  color: #b32d2e;
  margin-left: 0.15em;
  font-weight: 700;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--color-text);
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.gform_wrapper textarea { min-height: 8rem; resize: vertical; }

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* 單選與複選：標籤要在按鈕旁邊，不是下一行 */
.gform_wrapper .gfield_radio,
.gform_wrapper .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * flex 項目預設 flex-shrink: 1，會把選項擠得比文字還窄然後切掉右半截
 * （三語標籤變長後才浮現）。改成不收縮、寬度超過就換行；單一選項本身
 * 太長時由 max-width 收住，再由標籤自己折行。
 */
.gform_wrapper .gchoice {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  flex: 0 0 auto;
  max-width: 100%;
}

.gform_wrapper .gchoice input[type="radio"],
.gform_wrapper .gchoice input[type="checkbox"] { margin-top: 0.35em; }

.gform_wrapper .gchoice input { width: auto; margin: 0; accent-color: var(--color-primary); }
/* 同樣要覆寫 body 的 overflow-wrap: anywhere，否則「開發商」會被切成「開發／商」 */
.gform_wrapper .gchoice label {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-text);
  overflow-wrap: normal;
  word-break: keep-all;
}

.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font-size: var(--fs-sm);
  color: #b32d2e;
  margin-top: 0.3rem;
}

.gform_wrapper .gform_footer { margin-top: var(--space-4); }

.gform_wrapper .gform_button {
  display: inline-block;
  padding: 0.55rem 1.6rem;
  font-family: inherit;
  font-size: var(--fs-base);
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.gform_wrapper .gform_button:hover { background: var(--color-second); transform: translateY(-2px); }

.gform_confirmation_message {
  padding: var(--space-3);
  background: var(--color-primary-bg);
  border-radius: var(--radius-card);
  color: var(--color-text);
}

@media (max-width: 800px) {
  .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
  .gform_wrapper .gform_button { width: 100%; }
}

/* ===== 排版切換列（評估期間用，定案後可刪）===== */
.layout-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.layout-switch__item {
  padding: 0.25rem 0.7rem;
  color: var(--color-text-sub);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

.layout-switch__item.is-active {
  color: #fff;
  background: var(--color-text-sub);
  border-color: var(--color-text-sub);
}

/* ===== 摘要行數限制 =====
   即使字數估錯，版面高度也不會失控。 */
.row-item__excerpt,
.media-item__excerpt,
.card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ===== 排版 B：圖文左右並列 ===== */
.medialist { border-top: 1px solid var(--color-line); }

.media-item {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.media-item__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-second-bg);
}

.media-item__media img { width: 100%; height: 100%; object-fit: cover; }

.media-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 0.35rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.media-item__title { font-size: var(--fs-lg); margin-bottom: 0.35rem; }
.media-item__title a { color: var(--color-text); }
.media-item__excerpt { margin: 0; font-size: var(--fs-sm); color: var(--color-text-sub); }

/* ===== 排版 C：精簡表格式 ===== */
.compactlist { border-top: 1px solid var(--color-line); }

.compact-item { border-bottom: 1px solid var(--color-line); }

.compact-item__link {
  display: grid;
  grid-template-columns: 6.5rem 6rem 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.85rem var(--space-2);
  color: var(--color-text);
}

.compact-item__date { font-size: var(--fs-sm); color: var(--color-text-muted); }

.compact-item__tag {
  justify-self: start;
  padding: 0.1em 0.6em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-radius: var(--radius-sm);
}

.compact-item__title { font-weight: var(--fw-medium); }

@media (max-width: 800px) {
  .media-item { grid-template-columns: 7.5rem 1fr; gap: var(--space-2); }
  .compact-item__link { grid-template-columns: 1fr; gap: 0.2rem; }
  .compact-item__date { order: -1; }
}

/* ===== Cookie 使用告知 =====
   左下角卡片。預設 hidden，JS 判斷過 localStorage 才顯示，
   已同意的訪客不會看到它閃一下。 */
.cookiebar {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 950;
  width: min(30rem, calc(100vw - 1.5rem));
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgba(2, 27, 72, 0.2);
}

.cookiebar[hidden] { display: none; }
.cookiebar__body { padding: var(--space-3); }
.cookiebar__title { margin: 0 0 0.4rem; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-text); }
.cookiebar__text { margin: 0; font-size: var(--fs-sm); color: var(--color-text-sub); }
.cookiebar__text a { color: var(--color-accent); text-decoration: underline; }
.cookiebar__actions { margin: var(--space-2) 0 0; }
.cookiebar__accept { border: none; cursor: pointer; font-family: inherit; }

/* 頁尾版權列的分隔線 */
.footer__sep { margin: 0 0.5rem; opacity: 0.4; }

@media (max-width: 900px) {
  /* 手機上若同時有底部行動列，Cookie 卡要往上讓位 */
  .cookiebar { bottom: calc(var(--consult-h, 0px) + 0.75rem); }
}

/* 「僅使用必要 Cookie」低調文字鍵——有拒絕選項，同意才算有效同意 */
.cookiebar__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cookiebar__decline {
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
.cookiebar__decline:hover { color: var(--color-text); }

/* ===== SheetSelect：取代原生下拉 =====
 * 桌機是貼齊欄位的下拉面板，手機是底部抽屜＋遮罩（照 admin-scaffold 規範）。
 * 原生 select 仍在 DOM 裡當唯一真實來源，只是視覺隱藏——
 * 用 clip 而非 display:none，表單驗證訊息才還能定位到它。
 */
.ssel { position: relative; }

.ssel-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.ssel-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--color-text);
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out);
}

.ssel-btn:hover,
.ssel-btn:focus-visible { border-color: var(--color-primary); }

.ssel-val { overflow-wrap: normal; word-break: keep-all; }
.ssel-ar { flex-shrink: 0; color: var(--color-text-muted); font-size: var(--fs-sm); }

.ssel-overlay { display: none; }

.ssel-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 17rem;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 28px rgba(2, 27, 72, 0.16);
}

.ssel-head { display: none; }

.ssel-opt {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--color-text);
  text-align: left;
  background: none;
  border: 0;
  border-radius: calc(var(--radius-card) - 2px);
  cursor: pointer;
}

.ssel-opt:hover,
.ssel-opt:focus-visible { background: var(--color-primary-bg); }
.ssel-opt.on { font-weight: var(--fw-bold); color: var(--color-primary); background: var(--color-primary-bg); }

@media (max-width: 1024px) {
  .ssel-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2, 27, 72, 0.5);
  }

  .ssel-panel {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    max-height: 70vh;
    /* 底部留出手機的安全區，否則最後一個選項會被 home indicator 蓋住 */
    padding: 0.5rem 0.75rem calc(0.9rem + env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0;
    border: 0;
    box-shadow: 0 -8px 30px rgba(2, 27, 72, 0.25);
  }

  .ssel-head {
    display: block;
    padding: 0.5rem 0.4rem 0.75rem;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
  }

  .ssel-opt {
    padding: 0.9rem 0.75rem;
    border-bottom: 1px solid var(--color-line);
  }

  .ssel-opt:last-child { border-bottom: 0; }
}

/*
 * hidden 屬性必須贏過上面的 display 規則。
 * UA 樣式表的 [hidden]{display:none} 特異性只有 0,0,1，會被 .ssel-overlay（0,1,0）蓋掉——
 * 實測手機上遮罩因此永遠顯示，整頁一直是暗的。用屬性選擇器把特異性拉到 0,2,0。
 */
.ssel-overlay[hidden],
.ssel-panel[hidden] { display: none; }

/* 抽屜展開時鎖住背景，避免手指滑動捲到底下的表格 */
body.ssel-locked { overflow: hidden; }