/* crm-polish.css — rex/crm 質感深化共用層（2026-10-19，評審總表）。只放視覺規則，載入順序在 cj-ui.css 之後、頁面 <style> 之前。
   所有規則以 html.cj 或 html.cp 起頭拉高權重；頁面專屬樣式寫在各頁 <style> 末尾「crm-polish 頁面層」。
   ── 頁面可直接使用的 class／變數 ──
   變數：--cp-warn-bg / --cp-warn-ink / --cp-warn-edge（佣金警示酒紅）、--cp-sec-bg / --cp-sec-ink / --cp-sec-line（深色次要鈕）、
         --cp-safe-top（右上膠囊安全區高度 92px）、--cp-fade（右緣漸層寬度）
   class：.cp-warn（實心酒紅警示條）、.cp-warn .btn（白底酒紅字）、.cp-sec（次要鈕，深色自動清楚）、
          .cp-scroll（橫向捲動容器，JS 會自動加 .is-scrollable/.at-end 並出現右緣漸層）、.cp-sticky1（窄螢幕首欄 sticky）、
          .cp-noic（強制隱藏晶片內小圖示）、.cp-ic-hide（JS 自動加）、.cp-ovl（JS 對開啟中的彈窗背板自動加）、
          html.cp-modal-open（有彈窗開啟）、.cp-1line（單行省略）、.cp-num-dim（深色下降亮度的數字）
*/
:root {
  --cp-warn-bg: #8E1F2B; --cp-warn-ink: #ffffff; --cp-warn-edge: #e8bd76;
  --cp-sec-bg: color-mix(in srgb, var(--cj-acc) 14%, transparent);
  --cp-sec-ink: var(--cj-text); --cp-sec-line: var(--cj-line);
  --cp-safe-top: 92px; --cp-fade: 30px;
}
html[data-rex-theme="dark"] {
  --cp-warn-bg: #7A1B26;
  --cp-sec-bg: color-mix(in srgb, var(--cj-acc) 18%, transparent);
  --cp-sec-ink: #E6F2F3;
}

/* ── 佣金模式警示（實心酒紅、左 4px 金邊；內部按鈕白底酒紅字） ── */
html.cj .cp-warn {
  background: var(--cp-warn-bg); color: var(--cp-warn-ink); border: 0; border-left: 4px solid var(--cp-warn-edge);
  border-radius: 12px; padding: 10px 14px; font-weight: 700;
}
html.cj .cp-warn a { color: #fff; text-decoration: underline; }
html.cj .cp-warn .btn, html.cj .cp-warn button {
  background: #fff; color: #8E1F2B; border: 1px solid #fff; font-weight: 800;
}
html.cj .cp-warn .btn.ghost, html.cj .cp-warn .btn.line { background: transparent; color: #fff; border-color: #fff; }

/* ── 深色次要鈕：JS 偵測到瀏覽器預設灰底的鈕會加 .cp-sec；頁面也可直接加 ── */
html.cj .cp-sec, html[data-rex-theme="dark"] .cp-sec {
  background: var(--cp-sec-bg); color: var(--cp-sec-ink); border: 1px solid var(--cp-sec-line);
}
html[data-rex-theme="dark"] .cp-sec:hover:not(:disabled) { background: color-mix(in srgb, var(--cj-acc) 28%, transparent); border-color: var(--cj-acc); }

/* ── 停用鈕：看得出是停用（虛線邊、not-allowed），文字對比仍 ≥3:1，不再靠整體淡出 ── */
html.cj :is(button, .btn, .cj-btn, a.btn, input[type="button"], input[type="submit"])[disabled],
html.cj :is(.btn, .cj-btn, a.btn)[aria-disabled="true"], html.cj :is(.btn, .cj-btn, a.btn).disabled {
  opacity: 1; cursor: not-allowed; box-shadow: none;
  background: var(--cj-surface-3); color: var(--cj-text-2); border: 1px dashed var(--cj-text-3);
}

/* ── 輸入框 placeholder：深色提亮 ── */
html[data-rex-theme="dark"] :is(input, textarea)::placeholder { color: #94a6b3; opacity: 1; }

/* ── 單行省略 ── */
html.cj .cp-1line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ── 橫向捲動提示：右緣漸層（以 mask 淡出內容，不需知道底色）；左緣捲過後也淡出 ── */
html.cj .cp-scroll { scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
html.cj .cp-scroll.is-scrollable:not(.at-end):not(.at-start) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cp-fade), #000 calc(100% - var(--cp-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--cp-fade), #000 calc(100% - var(--cp-fade)), transparent 100%);
}
html.cj .cp-scroll.is-scrollable.at-start:not(.at-end) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--cp-fade)), transparent 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--cp-fade)), transparent 100%);
}
html.cj .cp-scroll.is-scrollable.at-end:not(.at-start) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--cp-fade));
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--cp-fade));
}
@media print { html.cj .cp-scroll { -webkit-mask-image: none !important; mask-image: none !important; } }

/* 首欄 sticky（窄螢幕；需要底色不透明，沿用卡片底） */
@media (max-width: 760px) {
  html.cj .cp-sticky1 :is(th, td):first-child { position: sticky; left: 0; z-index: 2; background: var(--cj-surface); box-shadow: 1px 0 0 var(--cj-line-2); }
}

/* ── 晶片內小圖示：<20px 糊成色塊 → 隱藏改用文字（JS 量到實際尺寸 <20px 加 .cp-ic-hide） ── */
html.cj .cp-ic-hide, html.cj .cp-noic img.cj-ic, html.cj .cp-noic .cj-ic { display: none !important; }
html.cj :is(.chip, .cmchip, .fchip, .evtog) > img.cj-ic.s16 { display: none; }

/* ── 深色下降亮度的大數字（佣金逐年格等） ── */
html[data-rex-theme="dark"] .cp-num-dim { color: #d3dde4; font-weight: 700; }

/* ── 右上安全區：功能膠囊（top10，高 38）與個資遮罩膠囊（top56，約 28）在彈窗開啟時不得壓到彈窗內容／關閉鈕 ── */
html.cj .cp-ovl { box-sizing: border-box; padding-top: var(--cp-safe-top) !important; }

/* ── 手機（≤600）：橫幅瘦身、標題／副標不蓋到右上兩顆膠囊 ── */
@media (max-width: 600px) {
  html.cj .cj-hero { padding: 14px 16px; min-height: 0; max-height: 112px; align-items: center; border-radius: 16px; overflow: hidden; }
  html.cj .cj-hero-art { inset: 0; width: 100%; height: 100%; object-position: 70% center; opacity: .85; }
  html.cj .cj-hero::after { background: linear-gradient(90deg, var(--cj-navy) 0%, rgba(10, 35, 52, .9) 55%, rgba(10, 35, 52, .2) 100%); }
  html.cj .cj-band { padding: 12px 14px; min-height: 0; gap: 8px 12px; border-radius: 14px; }
  html.cj :is(.cj-hero h1, .cj-hero .cj-hero-t, .cj-band h1, .cj-band .cj-band-t) {
    font-size: 18px; line-height: 1.3; margin-bottom: 2px; padding-right: 84px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  html.cj :is(.cj-hero p, .cj-hero .cj-hero-s, .cj-band p, .cj-band .cj-band-s) {
    font-size: 12.5px; line-height: 1.45; padding-right: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  /* 觸控目標 ≥44px */
  html.cj :is(button.btn, a.btn, .cj-btn, .chip, .cmchip, .tab-btn):not(.xs) { min-height: 44px; }
  html.cj .cp-ovl { padding-left: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { html.cj .cp-scroll { scroll-behavior: auto; } }

/* 主控補：手機版面防撐寬（checkup-visuals.css 的 .cv-card 提示框 ::before 在 hover:none 仍溢出，會把 fixed 右上膠囊推出畫面）。clip 不建立捲動容器，sticky 照常 */
@media (max-width:600px){html.cj body{overflow-x:clip}}

/* ── 2026-10-20 ChatGPT 補圖 C1～C6 ── */
/* C1 手機矮橫幅：右側天際線，靠右裁；標題壓在左側乾淨深藍 */
img.cp-band-m{object-fit:cover!important;object-position:right center!important}
/* C4 佣金模式印章 */
.cm-banner .cm-seal{width:28px;height:28px;flex:none;filter:drop-shadow(0 0 4px rgba(232,189,118,.45))}
@media (max-width:600px){.cm-banner .cm-seal{width:24px;height:24px}}
/* C6 佣金尚未對到：左側插圖 */
.cp-empty-link{background-image:url(/assets/cj/em-comm-empty-240.webp)!important;background-repeat:no-repeat!important;background-position:10px center!important;background-size:64px 64px!important;padding-left:84px!important;min-height:72px;display:flex;align-items:center}
@media (max-width:600px){.cp-empty-link{background-size:52px 52px!important;padding-left:70px!important;min-height:60px}}
/* 列印不印裝飾圖 */
@media print{img.cj-band-art,img.cj-hero-art,.cm-banner .cm-seal{display:none!important}.cp-empty-link{background-image:none!important;padding-left:12px!important}}