/* ============================================================================
   久方生技 Maxima Biotech — 統一版面樣式表 max-brand.css
   ----------------------------------------------------------------------------
   設計依據
     · 識別標誌：assets/maxima-logo-color.png（圖形 + MAXIMA 字標）
     · 品牌色（取自 maxima_logo_color.png 原始檔取樣，非沿用舊系統的 Tailwind 色）
         主藍  #006CB4   徽標主色、頁首、強調
         青綠  #18A884   徽標第二色、輔助強調、正向狀態
     · 三種身分以「識別帶」區隔，共用同一版面結構：
         A 對外投資人專區 → 主藍
         B 對內情報與策略 → 深藍（內部限閱）
         C 關鍵資訊留存   → 青綠（唯讀留存）

   本檔為「疊加層」（overlay layer）：在既有版面之上統一視覺。
   既有版面結構（.nav / .hero / .card / section 等）不需重寫，
   僅需在頁面加入 <link rel="stylesheet" href="…/max-brand.css"> 即可取得統一外觀。

   零外部依賴（除字體與 LOGO 檔本身），可列印、可脫離網路。
   ========================================================================== */

/* ── 1. 品牌色票與基礎變數 ───────────────────────────────────────────── */
:root{
  /* 品牌 */
  --mx-blue:#006CB4;
  --mx-blue-dark:#005A9C;
  --mx-blue-deep:#0A2E52;
  --mx-blue-ink:#08243F;
  --mx-teal:#18A884;
  --mx-teal-dark:#0F7A5F;
  --mx-teal-light:#E8F6F1;

  /* 中性 */
  --mx-ink:#0B1F3A;
  --mx-ink-2:#12417F;
  --mx-body:#33475B;
  --mx-muted:#5B677A;
  --mx-faint:#8A97A8;
  --mx-line:#DCE4ED;
  --mx-line-soft:#EBF0F5;
  --mx-bg:#F5F8FB;
  --mx-card:#FFFFFF;

  /* 語意 */
  --mx-ok:#0F7B3D;
  --mx-ok-bg:#F1F9F4;
  --mx-warn:#B26A00;
  --mx-warn-bg:#FDF8EF;
  --mx-risk:#A32D2D;
  --mx-risk-bg:#FDF3F3;

  /* 識別帶色（由 body class 切換） */
  --mx-accent:var(--mx-blue);
  --mx-accent-dark:var(--mx-blue-dark);

  /* 尺度 */
  --mx-radius:14px;
  --mx-radius-sm:10px;
  --mx-maxw:1120px;
  --mx-shadow:0 1px 10px rgba(11,31,58,.05);
  --mx-shadow-lift:0 6px 24px rgba(11,31,58,.10);

  --mx-font:"Noto Sans TC","Inter","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  --mx-font-num:"Inter","Helvetica Neue",Arial,sans-serif;
}

/* ── 2. 身分識別帶：同一版面，三種色票 ────────────────────────────────── */
/* mx-home 為根目錄首頁（堆疊基礎層），刻意與 A／B／C 三區不同色，
   避免讀者誤以為首頁就是 A 區（對外）。識別色取品牌最深藍。 */
body.mx-home{--mx-accent:var(--mx-blue-deep); --mx-accent-dark:#061E38}
body.mx-a{--mx-accent:var(--mx-blue); --mx-accent-dark:var(--mx-blue-dark)}
body.mx-b{--mx-accent:#12417F; --mx-accent-dark:#0B2C58}
body.mx-c{--mx-accent:var(--mx-teal); --mx-accent-dark:var(--mx-teal-dark)}
body.mx-sys{--mx-accent:var(--mx-blue); --mx-accent-dark:var(--mx-blue-dark)}

/* ── 3. 頁首品牌列（所有頁面共用結構） ────────────────────────────────── */
.mx-brandbar{
  background:#fff;
  border-bottom:3px solid var(--mx-accent);
  box-shadow:0 1px 10px rgba(11,31,58,.06);
  position:sticky; top:0; z-index:60;
}
.mx-brandbar-in{
  max-width:var(--mx-maxw); margin:0 auto; padding:7px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
/* 原始標誌（maxima-logo-color.png，3508×2481，圖形含網底留白約 6–8%）
   以 height 固定高度、width:auto 保持原始比例，不做任何變形或重繪。 */
.mx-logo{display:block; height:40px; width:auto; flex:none; overflow:hidden}
.mx-logo img{display:block; height:40px; width:auto; max-width:none}
.mx-brandtext{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.mx-brandname{
  font-family:var(--mx-font-num); font-weight:800; font-size:14.5px;
  letter-spacing:.06em; color:var(--mx-blue);
}
.mx-brandsub{font-size:10.5px; color:var(--mx-muted); letter-spacing:.08em}
.mx-brandtag{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--mx-accent);
  padding:4px 11px; border-radius:999px; white-space:nowrap;
}
body.mx-home .mx-brandtag{background:var(--mx-blue-deep)}
body.mx-b .mx-brandtag{background:#12417F}
body.mx-c .mx-brandtag{background:var(--mx-teal-dark)}

/* ── 4. 頁首主視覺（hero）統一為品牌漸層 ─────────────────────────────── */
.mx-hero{
  background:linear-gradient(128deg,var(--mx-blue-ink) 0%,var(--mx-blue-deep) 46%,var(--mx-accent-dark) 100%);
  color:#fff; padding:36px 0 32px; position:relative; overflow:hidden;
}
.mx-hero::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(24,168,132,.20) 0%,rgba(24,168,132,0) 70%);
  pointer-events:none;
}
.mx-hero-in{max-width:var(--mx-maxw); margin:0 auto; padding:0 20px; position:relative; z-index:1}
.mx-hero h1{margin:0 0 8px; font-size:27px; line-height:1.35; letter-spacing:.01em; font-weight:800}
.mx-hero .sub{margin:0; opacity:.9; font-size:14px; max-width:860px; line-height:1.7}
.mx-hero .meta{margin-top:13px; font-size:12px; opacity:.75}
.mx-hero .eyebrow{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.14em;
  color:#BFEFE0; border:1px solid rgba(191,239,224,.42);
  padding:3px 10px; border-radius:999px; margin-bottom:11px;
}

/* 原系統的產生器橫幅若自帶「深色藥丸底」，其 .tag 文字應沿用橫幅的白色，
   不該被通用 .tag 的灰字覆寫。
   注意：.w6rl／.w6p0 的藥丸是白底（本身已定義深色字），故不在此清單內。 */
.w6mon .tag, .v25mini .tag, .vbar .tag,
.w6mon .tag *, .v25mini .tag *, .vbar .tag *{
  color:inherit !important;
}

/* ── 5. 內容區與卡片 ─────────────────────────────────────────────────── */
.mx-wrap{max-width:var(--mx-maxw); margin:0 auto; padding:0 20px 76px}
.mx-card{
  background:var(--mx-card); border:1px solid var(--mx-line);
  border-radius:var(--mx-radius); padding:18px 20px; box-shadow:var(--mx-shadow);
}
.mx-card + .mx-card{margin-top:14px}

/* 章節標題：左側識別色條 */
h2.mx-st{
  font-size:19px; margin:34px 0 6px; padding:0 0 9px 12px;
  border-bottom:1px solid var(--mx-line); position:relative;
}
h2.mx-st::before{
  content:""; position:absolute; left:0; top:2px; bottom:10px;
  width:4px; border-radius:2px; background:var(--mx-accent);
}
h2.mx-st .n{color:var(--mx-accent); font-weight:800; margin-right:8px}

/* ── 6. 表格：統一表頭與斑馬紋 ───────────────────────────────────────── */
.mx-card table, .mx-wrap table{width:100%; border-collapse:collapse; font-size:13px}
.mx-wrap th{
  background:#F2F7FB; color:var(--mx-ink-2); font-weight:700;
  text-align:left; padding:9px 10px; border-bottom:2px solid var(--mx-line);
  font-size:12.5px; white-space:nowrap;
}
.mx-wrap td{padding:9px 10px; border-bottom:1px solid var(--mx-line-soft); vertical-align:top}
.mx-wrap tbody tr:nth-child(even){background:#FAFCFE}
.mx-wrap tbody tr:hover{background:#F4F9FD}
.mx-wrap td.n{font-family:var(--mx-font-num); font-variant-numeric:tabular-nums; white-space:nowrap}
.mx-wrap tr.hl{background:#EAF4FB !important}
.mx-wrap tr.hl td{font-weight:600}

/* ── 7. 標籤 ─────────────────────────────────────────────────────────── */
.mx-tag{
  display:inline-block; font-size:11px; font-weight:700; line-height:1.5;
  padding:2px 8px; border-radius:999px; border:1px solid transparent;
  white-space:nowrap;
}
.mx-tag.ok{background:#E3F4EB; color:var(--mx-ok); border-color:#BCE3CE}
.mx-tag.wn{background:#FCF3DE; color:var(--mx-warn); border-color:#EFDCA9}
.mx-tag.rk{background:#FAE7E7; color:var(--mx-risk); border-color:#EFC4C4}
.mx-tag.in{background:#ECE8F6; color:#4C3D8F; border-color:#D2C8EA}
.mx-tag.bd{background:#E4F1FA; color:var(--mx-blue-dark); border-color:#BFDCEF}

/* ── 8. 提示框 ───────────────────────────────────────────────────────── */
.mx-note{
  border-left:4px solid var(--mx-accent); background:#F1F7FC;
  padding:13px 16px; border-radius:var(--mx-radius-sm); margin:14px 0;
  font-size:13.5px; line-height:1.75;
}
.mx-note.ok{border-left-color:var(--mx-ok); background:var(--mx-ok-bg)}
.mx-note.warn{border-left-color:var(--mx-warn); background:var(--mx-warn-bg)}
.mx-note.risk{border-left-color:var(--mx-risk); background:var(--mx-risk-bg)}

/* ── 9. KPI 數字卡 ───────────────────────────────────────────────────── */
.mx-kpi{
  background:#fff; border:1px solid var(--mx-line);
  border-left:4px solid var(--mx-accent);
  border-radius:var(--mx-radius-sm); padding:15px 16px;
}
.mx-kpi .v{
  font-family:var(--mx-font-num); font-size:25px; font-weight:800;
  color:var(--mx-accent); line-height:1.2; font-variant-numeric:tabular-nums;
}
.mx-kpi .k{font-size:12.5px; font-weight:700; color:var(--mx-ink); margin-top:3px}
.mx-kpi p{margin:5px 0 0; font-size:12px; color:var(--mx-muted); line-height:1.6}
.mx-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:14px}
.mx-grid.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ── 10. 時間軸 ───────────────────────────────────────────────────────── */
.mx-tl{position:relative; padding-left:0}
.mx-tl .it{position:relative; padding:14px 0 14px 118px; border-bottom:1px solid var(--mx-line-soft)}
.mx-tl .it:last-child{border-bottom:0}
.mx-tl .d{
  position:absolute; left:0; top:14px; width:100px;
  font-family:var(--mx-font-num); font-size:12.5px; font-weight:700;
  color:var(--mx-accent); text-align:right;
}
.mx-tl .it.now{background:linear-gradient(90deg,rgba(0,108,180,.06),transparent 70%)}
.mx-tl .c{font-size:13.5px; line-height:1.75}
.mx-tl .now-mark{
  display:inline-block; font-size:10.5px; font-weight:700; color:#fff;
  background:var(--mx-accent); padding:1px 8px; border-radius:999px; margin-left:6px;
}

/* ── 11. 頁尾 ─────────────────────────────────────────────────────────── */
.mx-foot{
  margin-top:44px; border-top:3px solid var(--mx-accent);
  background:#fff; padding:24px 0 30px; font-size:12.5px; color:var(--mx-muted);
}
.mx-foot-in{max-width:var(--mx-maxw); margin:0 auto; padding:0 20px; line-height:1.9}
.mx-foot b{color:var(--mx-ink)}
.mx-foot .mx-foot-brand{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid var(--mx-line-soft);
}
.mx-foot .mx-foot-brand img{height:30px; width:auto}
.mx-foot .mx-foot-brand span{font-weight:700; color:var(--mx-blue); letter-spacing:.05em}

/* ── 12. 列印：LOGO 與色彩需可攜 ─────────────────────────────────────── */
@media print{
  .mx-brandbar{position:static; box-shadow:none; border-bottom-width:2px}
  .mx-hero{background:#0B2C58 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .mx-hero::after{display:none}
  .mx-card,.mx-kpi,.mx-note,tr.hl,
  /* 2026-10-05：warroom_v25／consulting_v25 自帶 inline `.card`、legacy_site_v24
     不載 max-layout.css——列印保色與 nav 隱藏補齊（print audit 實測補）。 */
  .card,.kpi,.note,.hero{ -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .nav{display:none}
  .mx-wrap{padding-bottom:0}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:10px; color:#666}
}

/* ── 14. 既有 hero 統一：讓三套原系統與三分類專區的頁首視覺一致 ──────────
   不改動任何既有 HTML 結構，僅以 CSS 覆寫其外觀。
   hero 為 sticky 品牌列之後的第一個視覺區塊，故一併統一為品牌漸層。      */
.mx-sys header:not(.mx-brandbar),
body.mx-sys > header,
.hero,
header.hero{
  background:linear-gradient(128deg,var(--mx-blue-ink) 0%,var(--mx-blue-deep) 46%,var(--mx-accent-dark) 100%) !important;
  color:#fff !important;
  border-bottom:0 !important;
  position:relative; overflow:hidden;
}
.mx-sys header:not(.mx-brandbar)::after,
body.mx-sys > header::after,
.hero::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(24,168,132,.20) 0%,rgba(24,168,132,0) 70%);
  pointer-events:none;
}
.mx-sys header:not(.mx-brandbar) h1,
body.mx-sys > header h1,
.hero h1,
header.hero h1,
.hero .hero-title{
  color:#fff !important;
}
.mx-sys header:not(.mx-brandbar) .sub,
body.mx-sys > header .sub,
.hero .sub{ color:rgba(255,255,255,.9) !important; opacity:1 }
header.hero .hero-sub{ color:rgba(255,255,255,.88) }
/* hero 內的淺色組件（提示盒／表格／代碼）文字必須回到深色，否則淺底白字不可讀 */
.hero .note, .hero table, .hero code, .hero pre, .hero .tag{
  color:var(--mx-body,#33475B) !important;
}
.hero .note b, .hero b{ color:inherit }
.hero .note a{ color:var(--mx-accent-dark,#005A9C) !important; font-weight:700 }
/* legacy 頁首其容器為淺色底，統一改為品牌漸層（文字為白色，必須有深底） */
body.mx-sys .hero{
  background:linear-gradient(128deg,var(--mx-blue-ink) 0%,var(--mx-blue-deep) 46%,var(--mx-accent-dark) 100%) !important;
  padding:0; border:0;
}
body.mx-sys > .hero > *{ position:relative; z-index:1 }
body.mx-sys > .hero-inner,
body.mx-sys > .hero > .wrap,
body.mx-sys > .hero > .container{
  background:linear-gradient(128deg,var(--mx-blue-ink) 0%,var(--mx-blue-deep) 46%,var(--mx-accent-dark) 100%);
  padding:36px 32px 32px; position:relative; overflow:hidden;
}
body.mx-sys > .hero-inner::after,
body.mx-sys > .hero > .wrap::after,
body.mx-sys > .hero > .container::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(24,168,132,.20) 0%,rgba(24,168,132,0) 70%);
  pointer-events:none;
}

/* ── 15. 章節標題統一加識別色條（既有 h2 / .st 類別） ──────────────────── */
body h2.st{ border-bottom:1px solid var(--mx-line) !important; position:relative; padding-left:12px !important }
body h2.st::before{
  content:""; position:absolute; left:0; top:2px; bottom:10px;
  width:4px; border-radius:2px; background:var(--mx-accent);
}
body.mx-sys h2{ position:relative; padding-left:12px; border-bottom:1px solid var(--mx-line) }
body.mx-sys h2::before{
  content:""; position:absolute; left:0; top:1px; bottom:9px;
  width:4px; border-radius:2px; background:var(--mx-accent);
}

/* ── 16. RWD ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* 窄螢幕：原系統的寬表格（戰情室／顧問系統）會超出視口被裁，
     改為可橫向捲動，僅影響 ≤900px 的平板／手機視圖，不改內容與桌機版。 */
  body.mx-sys table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  body.mx-sys pre{overflow-x:auto}
  /* 原系統某些長文字／長代號（如藥證號、檔名）未設換行點，會把段落撐寬
     造成整頁橫向溢出。窄屏允許在任意處斷行。 */
  body.mx-sys p, body.mx-sys li, body.mx-sys .mut{overflow-wrap:anywhere}
  /* 原系統部分標題列是 display:flex 且不換行（世界地圖頁的暢通率標籤），
     窄屏會被推出視口。允許換行即可，不改內容。 */
  body.mx-sys .ds-head,
  body.mx-sys .ds-head *,
  body.mx-sys .bc-mini-card,
  body.mx-sys .sb-exec-card{flex-wrap:wrap; min-width:0}
  /* 原系統多處把卡片柵格硬寫成 repeat(6/5/4, 1fr)，窄屏不會收成單欄，
     造成整頁橫向溢出 283px、內容被裁。此處僅在 ≤900px 覆寫為自適應欄數，
     桌面 (>900px) 維持原系統設計不變。 */
  body.mx-sys .bc-breakdown-grid,
  body.mx-sys .kpi-grid,
  body.mx-sys .card-grid,
  body.mx-sys .ds-grid,
  body.mx-sys .summary-banner-exec,
  body.mx-sys .reg-grid,
  body.mx-sys .tm-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important}
  body.mx-sys .v-grid{grid-template-columns:1fr !important}
}
@media (max-width:760px){
  .mx-brandbar-in{padding:6px 14px; gap:10px}
  /* logo 的 <img> 必須與容器同步縮放，否則 40px 的圖被塞進 34px 高的
     overflow:hidden 容器，底部 6px 會被裁掉（畫面上像「MAXIMA」字樣被切） */
  .mx-logo, .mx-logo img{height:34px}
  .mx-brandname{font-size:13px}
  .mx-brandsub{font-size:11.5px}
  .mx-brandtag{margin-left:0; order:3}
  .mx-hero{padding:26px 0 24px}
  .mx-hero h1{font-size:22px}
  .mx-wrap{padding:0 14px 56px}
  .mx-tl .it{padding-left:0; padding-top:30px}
  .mx-tl .d{position:static; width:auto; text-align:left; margin-bottom:3px}
  /* max-layout.css 的 .tag 是 white-space:nowrap，遇到長句標籤
     （如 A 類 clinical.html 的「Maxima range 240–300°C → all below melt
     point, no pad-melt risk」）在 390 視窗會撐破 23px 並被右緣裁切。
     窄視窗改為允許換行；短標籤內容本就不足一行，不受影響。 */
  .tag{white-space:normal; overflow-wrap:anywhere; max-width:100%}
}

/* ── 17. 無障礙：尊重降低動態偏好 ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ── 18. 對比不足修正（純呈現層，不改原系統 HTML） ──────────────────────────
   legacy_site_v24/products.html 的狀態徽章以「亮色字 on 亮色底」呈現：
     .badge-pending  #f59e0b on rgba(245,158,11,.15) → 對比 2.05
     .badge-clear    #10b981 on rgba(16,185,129,.15) → 對比 2.42
   兩者皆低於無障礙標準（一般文字 4.5:1），投影時幾乎看不見。
   此處只加深文字色並把底色改為實色，維持原本的語意配色與版面位置。 */
body.mx-sys .compare-table .badge-pending{
  color:#8A5200 !important; background:#FDF3DC !important;
  border:1px solid #E5C88A;
}
body.mx-sys .compare-table .badge-clear{
  color:#0B6B4A !important; background:#E2F5EC !important;
  border:1px solid #A8DCC4;
}
/* 同組語意的其他狀態徽章一併對齊（避免只修兩個造成同表色系不一致） */
body.mx-sys .compare-table .badge-shipping{
  color:var(--mx-blue-dark) !important; background:#E4F1FA !important;
  border:1px solid #BFDCEF;
}
body.mx-sys .compare-table .badge{
  border-radius:999px; padding:2px 9px; font-weight:700;
}

/* legacy_site_v24/index.html 的歷史分期標籤（.history-era）同樣是亮色字白底：
     .era-orange #FF9800 → 2.16、.era-green #4CAF50 → 2.28、.era-gray #9E9E9E → 2.85
   四個色階全部低於無障礙標準。此處只把字色壓深，保留原本的色相語意
   （灰＝已遠期、橙＝觀察期、藍＝建置期、綠＝執行期）。 */
body.mx-sys .history-era.era-gray{color:#5F5E5A !important}
body.mx-sys .history-era.era-orange{color:#8A5200 !important}
body.mx-sys .history-era.era-blue{color:var(--mx-blue-dark) !important}
body.mx-sys .history-era.era-green{color:#1F6B3A !important}

/* legacy_site_v24/index.html 的 FTO 金字塔層級標籤（L0–L3）由 JS 以 inline
   style 產生，色碼寫死在 `var CL`（L2 為 #22c55e，白底對比僅 2.28）。
   inline style 無法用一般選擇器覆寫，也沒有可區分層級的 class，
   因此此處把標籤文字統一壓深——層級色碼仍由每層的 border-top 3px 承載，
   語意不損失，文字則回到可讀範圍。 */
body.mx-sys #pyramid-grid > div > div:first-child{
  color:#1F2937 !important;
}