/* ============================================================
   brand-v2 · 品牌色系統覆蓋層（預覽用）
   原則：完全保留客戶品牌色相，靠不透明度派生色階
   只改顏色，不改字號 / 字距 / 間距 / 字體 / 版式
   ============================================================ */

:root{
  /* 客戶品牌色（CMYK 原值轉 RGB，色相不做任何偏移） */
  --brand-red:  230 0 18;      /* #E60012  100M 100Y */
  --brand-gold: 255 191 0;     /* #FFBF00  25M 100Y  */

  /* 底色：暖黑（比原本 #16120d 更沉、更暖，像漆器底） */
  --base: #141110;

  /* 文字色階 */
  --ink:      #f5efe3;                       /* 月白 */
  --ink-dim:  rgb(245 239 227 / .74);
  --ink-mute: rgb(245 239 227 / .52);

  /* 強調色（原 --accent 磚紅 → 朱紅 85%，沉進底色） */
  --accent:   rgb(var(--brand-red) / .85);
  --accent-2: rgb(var(--brand-red) / .60);
  --accent-3: rgb(var(--brand-red) / .35);
  --accent-4: rgb(var(--brand-red) / .12);

  /* 光澤色（金只做小字、細線、描邊） */
  --gold-1:   rgb(var(--brand-gold) / .85);
  --gold-2:   rgb(var(--brand-gold) / .60);
  --gold-3:   rgb(var(--brand-gold) / .35);
  --gold-4:   rgb(var(--brand-gold) / .18);
  --gold-5:   rgb(var(--brand-gold) / .08);

  /* 玻璃／分隔線 */
  --glass:      rgb(var(--brand-red) / .10);
  --glass-line: rgb(var(--brand-gold) / .30);
}

/* ---------- 底色與氛圍光 ---------- */
body{
  background:
    radial-gradient(88% 52% at 78% 4%,  rgb(var(--brand-gold) / .045), transparent 62%),
    radial-gradient(72% 48% at 4% 96%,  rgb(var(--brand-red)  / .05),  transparent 64%),
    var(--base);
}

/* ---------- 全站噪點層：3%，去掉「數碼／AI 感」 ---------- */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

::selection{ background:rgb(var(--brand-red) / .45); color:#fff; }

/* ---------- 金色：kicker 小標、序號、標籤 ---------- */
.sect__no,
.film__no{ color:var(--gold-1); }
.hcard__no{ color:var(--gold-2); }
.m-no{ color:var(--gold-2); }
.c-line span:first-child{ color:var(--gold-2); }
.f__label{ color:var(--ink-mute); }

/* ---------- 分隔線／描邊：金 18–35% ---------- */
.c-line{ border-top:1px solid var(--gold-4); }
.globe__line{ border-top:1px solid var(--gold-4); }
.globe__line:last-child{ border-bottom:1px solid var(--gold-4); }

/* ---------- 卡片：紅霧底 + 紅邊（同源色階，不和金撞） ---------- */
.hcard{
  background:var(--accent-4);
  border:1px solid var(--accent-3);
  backdrop-filter:blur(calc(9 * var(--u))) saturate(.95);
  -webkit-backdrop-filter:blur(calc(9 * var(--u))) saturate(.95);
}
.hcard:hover{ background:rgb(var(--brand-red) / .18); border-color:var(--accent-2); }

.rvw__bub{
  background:rgb(var(--brand-red) / .08);
  border:1px solid var(--accent-3);
}

/* ---------- 主 CTA：全站唯一的 100% 實色紅 ---------- */
.f__submit{
  background:rgb(var(--brand-red) / 1);
  color:#fff;
  box-shadow:0 0 0 1px var(--gold-3), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgb(var(--brand-red) / .22);
}
.f__submit:hover{
  background:rgb(var(--brand-red) / .88);
  color:#fff;
  box-shadow:0 0 0 1px var(--gold-2), 0 calc(12 * var(--u)) calc(34 * var(--u)) rgb(var(--brand-red) / .3);
}

/* 導航電話按鈕：另一處 100% 紅，永遠不和表單按鈕同屏出現 */
.pill--phone{
  background:rgb(var(--brand-red) / 1);
  border-color:var(--gold-3);
  color:#fff;
}
.pill--phone:hover{
  background:rgb(var(--brand-red) / .88);
  border-color:var(--gold-2);
  color:#fff;
}

/* 其餘 pill：玻璃質感 hover 泛紅霧 + 金邊 */
.pill{ border-color:rgb(255 255 255 / .10); }
.pill:hover{
  background:rgb(var(--brand-red) / .14);
  border-color:var(--gold-3);
}

/* ---------- 圓形播放器／滾動提示：金環 ---------- */
.film__play-disc,
.vfilm__disc,
.scroll__disc{
  border:1px solid var(--gold-3);
  background:rgb(var(--brand-red) / .12);
}
.film__play-txt,
.vfilm__txt,
.scroll__label{ color:var(--ink-dim); }

/* ---------- 首屏標題：月白，不改字號，只加一層極淡金暈 ---------- */
.hero__title{ text-shadow:0 0 calc(40 * var(--u)) rgb(var(--brand-gold) / .06); }
.brandline{ color:var(--ink); }
.brandnote{ color:var(--ink-mute); }

/* ---------- 章節標題：月白 + 金色序號已在 .sect__no ---------- */
.sect__title{ color:var(--ink); }
.sect__note{ color:var(--ink-dim); }
.sect__lead{ color:var(--ink-dim); }

/* ---------- 表單輸入框：紅霧底 + 金邊聚焦 ---------- */
.f input,
.f textarea,
.f select{
  background:rgb(var(--brand-red) / .07);
  border:1px solid rgb(255 255 255 / .10);
  color:var(--ink);
}
.f input:focus,
.f textarea:focus,
.f select:focus{
  outline:none;
  border-color:var(--gold-3);
  background:rgb(var(--brand-red) / .12);
}

/* ---------- 頁尾 ---------- */
.foot--site{ border-top:1px solid var(--gold-4); }
.foot__brand{ color:var(--ink); }
.foot__meta,
.foot__legal{ color:var(--ink-mute); }
.foot__nav a{ color:var(--ink-dim); }
.foot__nav a:hover{ color:var(--gold-1); }

/* ---------- 字級按鈕：跟隨新金色 ---------- */
.sl-fsz{
  border:1px solid var(--gold-3) !important;
  color:var(--gold-1) !important;
  background:rgb(var(--brand-red) / .14) !important;
}
.sl-fsz:hover{ background:rgb(var(--brand-red) / .22) !important; }

/* ---------- 章節底圖：微微向暖黑靠，避免原圖偏黃 ---------- */
.sect__bg{ filter:saturate(.92) brightness(.94); }

/* ---------- 社群平台入口（聯絡頁 02 COMMUNITY） ---------- */
a.social__row{
  text-decoration:none;
  color:inherit;
  transition:background .35s ease, padding-left .35s ease;
}
a.social__row:hover{
  background:rgb(var(--brand-gold) / .05);
  padding-left:calc(10 * var(--u));
}
a.social__row:hover .social__name{ color:var(--gold-1); }
a.social__row:hover .dir__no{ color:var(--gold-1); }
.social__desc a{
  color:var(--gold-1);
  text-decoration:none;
  border-bottom:1px solid var(--gold-3);
  padding-bottom:1px;
  transition:border-color .3s ease, color .3s ease;
}
.social__desc a:hover{ color:#fff; border-color:var(--gold-1); }

/* ---------- 語言切換 ---------- */
.pill--lang{
  min-width:calc(34 * var(--u));
  justify-content:center;
  font-variant-numeric:tabular-nums;
  color:var(--gold-1);
  border-color:var(--gold-3);
  background:rgb(var(--brand-red) / .10);
}
.pill--lang:hover{ background:rgb(var(--brand-red) / .20); border-color:var(--gold-1); }
