/* ============================================================================
   久方生技 Maxima Biotech — 通用版面骨架  max-layout.css
   ----------------------------------------------------------------------------
   定位：三分類專區（A 對外／B 對內／C 留存）與入口頁共用的「版面骨架」。
        品牌色票、LOGO、頁首頁尾等識別元件由 max-brand.css 提供；
        本檔只管「版怎麼排」——容器、導覽、區段、卡片、表格、時序、RWD。

   載入順序（由 _apply_brand.py 保證）：
       既有頁面樣式 → max-layout.css → max-brand.css
       後者只做識別疊加，不與本檔的版面規則爭奪。

   為何需要本檔：
       三分類頁面大量使用 .nav／.wrap／.hero／.card／.kpi／.tag／.note／.grid
       等通用類別，但原先沒有任何樣式表定義它們，導致版面「無容器、無層次」。
       本檔一次補齊，讓所有三分類頁面的骨架一致。

   鐵律：不重繪、不轉換 LOGO；本檔不含任何 LOGO 規則（全權交給 max-brand.css）。
   ========================================================================== */

/* ── 0. 基礎 ───────────────────────────────────────────────────────────── */
:root{
  /* 品牌列高度：導覽列 sticky 時要接在其下方，避免兩條黏頂重疊 */
  --mx-bar-h:57px;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--mx-font,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif);
  font-size:14.5px;
  line-height:1.78;
  color:var(--mx-body,#33475B);
  background:var(--mx-bg,#F5F8FB);
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
a{color:var(--mx-accent,#006CB4)}
a:hover{color:var(--mx-accent-dark,#005A9C)}
code{
  font-family:ui-monospace,"SFMono-Regular",Consolas,Menlo,monospace;
  font-size:.88em; background:var(--mx-line-soft,#EBF0F5);
  padding:1px 5px; border-radius:4px; color:var(--mx-accent-dark,#005A9C);
}
.mut,.mut td{color:var(--mx-muted,#5B677A)}

/* ── 1. 容器 ───────────────────────────────────────────────────────────── */
.wrap,.container{max-width:var(--mx-maxw,1120px); margin:0 auto; padding:0 24px}
.wrap.wide,.container.wide{max-width:1360px}

/* ── 2. 導覽列 ─────────────────────────────────────────────────────────────
   接在品牌列下方 sticky；品牌列 z-index 60，本列 40，兩條不互相遮蓋。 */
.nav{
  position:sticky; top:var(--mx-bar-h); z-index:40;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid var(--mx-line,#DCE4ED);
  box-shadow:0 1px 6px rgba(11,31,58,.045);
}
.navin{
  max-width:var(--mx-maxw,1120px); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  min-height:52px;
}
.navb{
  font-weight:800; font-size:14.5px; letter-spacing:.02em;
  color:var(--mx-accent,#006CB4); white-space:nowrap;
}
.navl{display:flex; gap:2px; flex-wrap:wrap; flex:1; min-width:0}
.navl a{
  display:inline-block; padding:6px 12px; border-radius:7px;
  font-size:13px; color:var(--mx-body,#33475B); text-decoration:none;
  white-space:nowrap; transition:background .15s,color .15s;
}
.navl a:hover{background:var(--mx-line-soft,#EBF0F5); color:var(--mx-accent-dark,#005A9C)}
/* 目前頁：品牌色實心，讓使用者隨時知道自己在哪一頁 */
.navl a.on{
  background:var(--mx-accent,#006CB4); color:#fff; font-weight:700;
}
.navl a.on:hover{background:var(--mx-accent-dark,#005A9C); color:#fff}
.navx{
  font-size:11px; line-height:1.4; text-align:right; white-space:nowrap;
  color:var(--mx-warn,#B26A00);
  border-left:2px solid var(--mx-accent,#006CB4); padding-left:10px;
}

/* ── 3. 頁首主視覺 ─────────────────────────────────────────────────────── */
.hero{padding:40px 0 34px}
.hero h1,.hero .hero-title{
  margin:0 0 9px; font-size:29px; font-weight:800; line-height:1.35; letter-spacing:.01em;
}
.hero .sub,.hero .hero-sub{
  margin:0 0 10px; font-size:14.5px; max-width:900px; line-height:1.75;
}
.hero .meta{margin:0; font-size:12px; font-family:var(--mx-font-num,Inter,monospace)}

/* ── 4. 區段與標題 ─────────────────────────────────────────────────────── */
section{margin:36px 0}
h2.st,h2.mx-st{
  font-size:19px; font-weight:800; margin:0 0 14px;
  color:var(--mx-ink,#0B1F3A);
}
/* 僅作用於卡片／章節下的 h3，避免誤傷其他版面自訂的 h3（如總導覽的 .cat h3） */
.card h3, section > h3{
  font-size:15.5px; font-weight:700; margin:22px 0 9px;
  color:var(--mx-accent-dark,#005A9C);
  padding-left:10px; border-left:3px solid var(--mx-accent,#006CB4);
}
h4{font-size:14px; font-weight:700; margin:16px 0 6px; color:var(--mx-ink,#0B1F3A)}
.lead{font-size:14.5px; color:var(--mx-muted,#5B677A); margin:0 0 16px; line-height:1.78; max-width:960px}
p{margin:0 0 12px}

/* ── 5. 卡片與格線 ─────────────────────────────────────────────────────── */
.card{
  background:var(--mx-card,#fff); border:1px solid var(--mx-line,#DCE4ED);
  border-radius:12px; padding:18px 20px; margin:0 0 14px;
  box-shadow:var(--mx-shadow,0 1px 10px rgba(11,31,58,.05));
}
.card > h3:first-child,.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.grid{
  display:grid; gap:14px; margin:0 0 16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ── 6. KPI ────────────────────────────────────────────────────────────── */
.kpi{
  background:var(--mx-card,#fff); border:1px solid var(--mx-line,#DCE4ED);
  border-left:4px solid var(--mx-accent,#006CB4);
  border-radius:10px; padding:14px 16px;
}
.kpi .v{
  font-family:var(--mx-font-num,Inter,sans-serif);
  font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.01em;
  color:var(--mx-accent,#006CB4); font-variant-numeric:tabular-nums;
}
.kpi .v small{font-size:.5em; font-weight:700; letter-spacing:0}
.kpi .k{font-size:12.5px; font-weight:700; color:var(--mx-ink,#0B1F3A); margin-top:4px}
.kpi p{margin:6px 0 0; font-size:12.5px; color:var(--mx-muted,#5B677A); line-height:1.6}

/* ── 7. 標籤 ───────────────────────────────────────────────────────────── */
.tag{
  display:inline-block; font-size:11px; font-weight:700; line-height:1.5;
  padding:2px 9px; border-radius:999px; white-space:nowrap;
  background:var(--mx-line-soft,#EBF0F5); color:var(--mx-body,#33475B);
  border:1px solid transparent;
}
.tag.ok{background:#E3F4EB; color:var(--mx-ok,#0F7B3D); border-color:#BCE3CE}
.tag.wn{background:#FCF3DE; color:var(--mx-warn,#B26A00); border-color:#EFDCA9}
.tag.rk{background:#FAE7E7; color:var(--mx-risk,#A32D2D); border-color:#EFC4C4}
.tag.in{background:#ECE8F6; color:#4C3D8F; border-color:#D2C8EA}
.tag.bd{background:#E4F1FA; color:var(--mx-blue-dark,#005A9C); border-color:#BFDCEF}
/* 灰字小注（清單的檔案大小、表格註記） */
.mut{font-size:11.5px; color:var(--mx-muted,#7A8798); font-weight:400; white-space:nowrap}
/* 證據等級 */
.g{font-size:10.5px; padding:1px 7px; border-radius:4px; font-weight:800; font-family:var(--mx-font-num,Inter,sans-serif)}
.gA{background:#E3F4EB; color:var(--mx-ok,#0F7B3D)}
.gB{background:#FCF3DE; color:var(--mx-warn,#B26A00)}
.gC{background:#FAE7E7; color:var(--mx-risk,#A32D2D)}
.gX{background:#ECE8F6; color:#4C3D8F}

/* ── 8. 提示框 ─────────────────────────────────────────────────────────── */
.note{
  border-left:4px solid var(--mx-accent,#006CB4); background:#F1F7FC;
  padding:14px 17px; border-radius:0 10px 10px 0; margin:14px 0;
  font-size:13.5px; line-height:1.8;
}
.note b{color:var(--mx-ink,#0B1F3A)}
.note.ok{border-left-color:var(--mx-ok,#0F7B3D); background:var(--mx-ok-bg,#F1F9F4)}
.note.warn{border-left-color:var(--mx-warn,#B26A00); background:var(--mx-warn-bg,#FDF8EF)}
.note.risk{border-left-color:var(--mx-risk,#A32D2D); background:var(--mx-risk-bg,#FDF3F3)}

/* ── 9. 表格 ───────────────────────────────────────────────────────────── */
table{
  width:100%; border-collapse:collapse; margin:0 0 16px;
  background:var(--mx-card,#fff); font-size:13.5px;
  border:1px solid var(--mx-line,#DCE4ED); border-radius:10px; overflow:hidden;
}
th,td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--mx-line-soft,#EBF0F5); vertical-align:top}
th{
  background:#F2F7FB; font-weight:700; font-size:12.5px;
  color:var(--mx-ink-2,#12417F); white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#FAFCFE}
tbody tr:hover{background:#F4F9FD}
td.n{font-family:var(--mx-font-num,Inter,sans-serif); font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--mx-accent-dark,#005A9C)}
tr.hl{background:#EAF4FB !important}
tr.hl td{font-weight:600}

/* ── 10. 時間軸 ────────────────────────────────────────────────────────── */
.tl{border-left:2px solid var(--mx-line,#DCE4ED); padding-left:0; margin:0 0 16px}
.tl .it{position:relative; padding:12px 0 12px 24px; border-bottom:1px solid var(--mx-line-soft,#EBF0F5)}
.tl .it:last-child{border-bottom:0}
.tl .it::before{
  content:""; position:absolute; left:-7px; top:18px;
  width:12px; height:12px; border-radius:50%;
  background:#fff; border:3px solid var(--mx-accent,#006CB4);
}
.tl .it.now::before{background:var(--mx-accent,#006CB4)}
.tl .d{
  font-family:var(--mx-font-num,Inter,sans-serif); font-size:12.5px; font-weight:800;
  color:var(--mx-accent,#006CB4); margin-bottom:3px;
}
.tl .c{font-size:13.5px; color:var(--mx-body,#33475B); line-height:1.75}

/* ── 11. 其他小元件 ────────────────────────────────────────────────────── */
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13.5px}
.kv dt{color:var(--mx-muted,#5B677A); white-space:nowrap}
.kv dd{margin:0; color:var(--mx-ink,#0B1F3A)}
ul.li,ol.li{margin:0 0 12px; padding-left:22px}
ul.li li,ol.li li{margin:0 0 8px; line-height:1.78}

/* ── 12. 頁尾 ──────────────────────────────────────────────────────────── */
.foot{
  margin-top:40px; padding:22px 0 34px;
  border-top:1px solid var(--mx-line,#DCE4ED);
  font-size:12.5px; color:var(--mx-muted,#5B677A); line-height:1.9;
}
.foot b{color:var(--mx-ink,#0B1F3A)}
/* 若頁面同時有 .mx-foot（品牌頁尾），避免兩條底線重複 */
.mx-foot + .foot,.foot + .mx-foot{margin-top:0; border-top:0}

/* ── 13. 入口頁專用：警示列與快捷入口 ─────────────────────────────────────
   原入口頁有三條各自為政的橫幅（酒紅／深紅／淺灰）堆疊在頁首，視覺噪音過重。
   改為：一條深藍警示列（收斂為同一個容器）+ 一條導覽列，兩者皆沿用品牌色。 */
.mx-alert{
  background:var(--mx-blue-deep,#0A2E52); color:#fff; font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mx-alert-in{
  max-width:var(--mx-maxw,1120px); margin:0 auto; padding:8px 24px;
  display:flex; flex-direction:column; gap:5px;
}
.mx-alert .w6rl,.mx-alert .w6p0{
  display:flex; flex-wrap:wrap; gap:5px 13px; align-items:center; line-height:1.5;
}
.mx-alert .w6rl + .w6p0{padding-top:5px; border-top:1px dashed rgba(255,255,255,.16)}
.mx-alert b{color:#fff; font-weight:700}
.mx-alert span,.mx-alert a{color:rgba(255,255,255,.82)}
.mx-alert a{text-decoration:none; border-bottom:1px solid rgba(191,239,224,.5)}
.mx-alert a:hover{color:#BFEFE0}
.mx-alert .tag{
  display:inline-block; background:#fff; color:var(--mx-blue-deep,#0A2E52);
  border-radius:999px; padding:1px 9px; font-size:10.5px; font-weight:800;
  white-space:nowrap;
}

/* 快捷入口：把原本塞進 <h1> 的兩顆按鈕移出來，獨立成一列 */
.mx-quick{
  display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0;
}
.mx-quick a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; text-decoration:none;
  padding:8px 15px; border-radius:8px;
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.26);
  transition:background .15s;
}
.mx-quick a:hover{background:rgba(255,255,255,.24); color:#fff}
.mx-quick a.hot{background:var(--mx-teal,#18A884); border-color:var(--mx-teal,#18A884)}
.mx-quick a.hot:hover{background:var(--mx-teal-dark,#0F7A5F)}

/* ── 14. RWD ───────────────────────────────────────────────────────────── */
/* 品牌列在 760px 以下會縮小（LOGO 34px），導覽列的貼頂距離必須同步 */
@media (max-width:760px){
  :root{--mx-bar-h:49px}
}

@media (max-width:860px){
  .wrap,.container,.navin{padding:0 14px}
  .hero{padding:28px 0 24px}
  .hero h1,.hero .hero-title{font-size:23px}
  .navx{display:none}
  .navb{font-size:13.5px}
  .mx-alert-in{padding:7px 14px}
  .mx-quick a{font-size:12.5px; padding:7px 12px}
  .grid{grid-template-columns:1fr}
  table{font-size:12.5px}
  th,td{padding:8px 9px}
  /* 窄螢幕：寬表格改為可橫向捲動的容器，避免右欄被視口裁掉。
     只作用在掛 max-layout.css 的頁面（自建版面層），原系統頁面不受影響。 */
  table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
  table table{display:table}
  /* 長路徑／程式碼片段在窄螢幕會撐破版面，允許斷行 */
  code, pre, kbd, samp{overflow-wrap:anywhere; word-break:break-word}
  pre{overflow-x:auto}
}

/* ── 15. 列印 ─────────────────────────────────────────────────────────── */
@media print{
  body{background:#fff; font-size:11.5px}
  .nav{display:none}
  .mx-brandbar{position:static}
  .hero{background:var(--mx-blue-deep,#0A2E52) !important; color:#fff; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  section{page-break-inside:avoid; margin:18px 0}
  table,.card,.kpi,.note{page-break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  a{text-decoration:none; color:inherit}
}