/* 文件套印中心 premium 版專屬樣式。載入順序：skin.css → tw.css → 本檔（只覆寫入口頁 .fx-* 元件）。
   token 一律沿用 skin.css 的 --fx-*；本檔只新增 --fx-media-* 尺寸與 --fx-tile-* 底座。明暗跟 html[data-rex-theme]。 */
:root{
  --fx-media-lg:104px;--fx-media-sm:76px;
  --fx-tile-a:#12384f;--fx-tile-b:#071b2b;--fx-tile-rim:#d79a20;
}
body.embed-mode .fxp-h1,body.embed-mode .fxp-h2,body.embed-mode .fxp-trust{display:none!important}

/* ── 頁首：返回原版 ── */
html body #topnav a.fxp-back{border:1px solid rgba(232,160,32,.55);border-radius:999px;color:var(--fx-gold-soft)!important;padding:0 14px;margin-left:4px}
html body #topnav a.fxp-back:hover{background:rgba(232,160,32,.18)}

html body #topnav{max-width:1240px!important}
@media (min-width:641px){html body #topnav .fx-sep{display:none}html body #topnav a{padding:0 8px}html body #topnav a.fxp-back{padding:0 12px}}

/* ── 首屏：左文案、右 H1 槽（乾淨深藍漸層，不放假圖） ── */
.fxp-hero .fx-hero-in{max-width:1200px;padding:30px 20px 64px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.fxp-hero .fx-copy{min-width:0}
.fxp-hero h1{font-size:clamp(28px,3.2vw,40px);line-height:1.25}
.fxp-hero .fx-lead{font-size:16px;line-height:1.75;color:#c3d0dc;max-width:580px;margin-top:14px}
.fxp-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fxp-trust li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;border:1px solid rgba(232,160,32,.42);background:rgba(232,160,32,.08);color:#f3e7c6;font-size:14px;font-weight:600}
.fxp-trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fx-gold)}
.fxp-h1{align-self:stretch;min-height:230px;border-radius:22px;border:1px solid rgba(232,160,32,.38);position:relative;overflow:hidden;background-color:#0b2a3f;background-size:cover;background-position:center;
  background-image:radial-gradient(ellipse at 72% 28%,rgba(232,160,32,.2),transparent 56%),linear-gradient(150deg,#12384f 0%,#0a2334 58%,#061726 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 30px 50px -34px rgba(0,0,0,.8)}
.fxp-h1::after{content:"";position:absolute;inset:14px;border-radius:14px;border:1px solid rgba(232,160,32,.22);pointer-events:none}
/* H1 圖還沒到：不畫框（空框看起來像破圖），只留一團柔和金光與同心細線；換上圖後（.fxp-h1 有 background-image:url）再恢復外框 */
.fxp-h1:not([data-has-img]){border-color:transparent;box-shadow:none;background-color:transparent;
  background-image:radial-gradient(circle at 60% 46%,rgba(232,160,32,.22),rgba(232,160,32,.06) 34%,transparent 62%),
    repeating-radial-gradient(circle at 60% 46%,transparent 0 46px,rgba(232,160,32,.08) 47px 48px)}
.fxp-h1:not([data-has-img])::after{display:none}
.fxp-h2{display:none}
body:has(#fxResults:not([hidden])) .fxp-trust,body:has(#fxResults:not([hidden])) .fxp-h1,body:has(#fxResults:not([hidden])) .fxp-h2{display:none}

/* ── 搜尋台 ── */
.fx-find{max-width:1200px}
.fx-search{min-height:58px}
html body .fx-search input{font-size:17px}
.fx-chip{font-size:15px}
.fx-tags .fx-chip{font-size:14px}
.fx-cos-hd{font-size:14px}
.fx-cos-hd span{font-size:13.5px}
.fxp-cos-tg{display:none}
.fx-main,.fx-results,.fx-nocard{max-width:1200px}

/* ── 客戶資料帶：獨立細卡 ── */
html body #sharedBar.fxp-client{margin-top:22px;padding:10px 16px;gap:12px;border-radius:14px;box-shadow:none;border:1px solid var(--fx-line);border-left:4px solid var(--fx-gold)}
html body #sharedBar.fxp-client .avatar{flex-basis:40px;width:40px;height:40px;font-size:16px}
html body #sharedBar.fxp-client #curLine{font-size:16px}
html body #sharedBar.fxp-client #curMeta{font-size:14px}
html body #sharedBar.fxp-client .mini-btn{min-height:44px;font-size:14px}

/* ── 區塊標題 ── */
.fx-sec{margin-top:36px}
.fx-sec-hd h2{font-size:clamp(22px,2.4vw,26px)}
.fx-sec-hint{font-size:15px;margin-bottom:16px}

/* ── 工具卡 ── */
.fx-grid{gap:18px}
.fx-grid>.c12{grid-column:span 12}
.fx-grid>.fx-featured{grid-column:1/span 6;grid-row:1/span 2}
.fx-tool{border-radius:20px}
.fx-tool-a{display:grid!important;grid-template-columns:var(--fx-media-lg) minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;
  grid-template-areas:"media top" "title title" "desc desc" "note note" "cta cta";column-gap:16px;align-content:start;padding:22px 22px 16px}
.fx-tool-a:focus-visible{outline:3px solid var(--fx-gold);outline-offset:-5px;border-radius:20px}
.fx-tool-a>.fxp-media{grid-area:media}
.fx-tool-a>.fx-tool-top{grid-area:top;align-self:center;margin:0;padding-right:50px}
.fx-tool-a>h3{grid-area:title;margin-top:16px;font-size:20px}
.fx-tool-a>.fx-d{grid-area:desc;font-size:15px;line-height:1.75;margin-top:8px;max-width:64ch}
.fx-tool-a>.fx-note{grid-area:note;font-size:13.5px;margin-top:10px}
.fx-tool-a>.fx-tool-cta{grid-area:cta;align-self:end;margin-top:14px;font-size:16px;min-height:52px}
.fx-tool-for{font-size:13px;line-height:1.5}
.fx-pin:focus-visible{outline:3px solid var(--fx-gold);outline-offset:2px}
.fx-tool:has(.fx-tool-a:focus-visible){box-shadow:0 0 0 3px var(--fx-gold),var(--fx-shadow)}

/* 寬卡（旅平卡）：左圖、中文字、右 CTA */
@media (min-width:641px){
  .fx-grid>.c12 .fx-tool-a{grid-template-columns:var(--fx-media-lg) minmax(0,1fr) auto;grid-template-rows:auto auto auto auto;grid-template-areas:"media top cta" "media title cta" "media desc cta" "media note cta"}
  .fx-grid>.c12 .fx-tool-a>.fx-tool-cta{align-self:center;margin:0;padding:0 8px 0 24px;border-top:0;gap:14px;min-width:190px}
  .fx-grid>.c12 .fx-tool-a>.fx-tool-top{padding-right:60px}
  .fx-grid>.c12 .fx-tool-a>h3{margin-top:6px}
}
/* 主圖／底座 */
.fxp-media{position:relative;display:block;width:var(--fx-media-lg);height:var(--fx-media-lg);flex:none}
.fxp-media img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(10,35,52,.3));transition:transform .25s}
.fx-tool:hover .fxp-media img{transform:translateY(-2px) scale(1.03)}
.fxp-ico{display:none}
.fxp-media.noimg img{display:none}
.fxp-media.noimg .fxp-ico{display:grid;place-items:center;position:absolute;inset:6%;border-radius:25%;
  background:radial-gradient(circle at 50% 28%,var(--fx-tile-a),var(--fx-tile-b) 78%);border:2px solid var(--fx-tile-rim);
  box-shadow:inset 0 0 0 4px var(--fx-tile-b),inset 0 0 0 5px rgba(255,226,138,.35),0 14px 16px -12px rgba(10,35,52,.7)}
.fxp-ico svg{width:46%;height:46%;fill:none;stroke:#ffd88a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* 理賠主卡：較大、疊紙裝飾（P1 槽沿用表單縮圖疊影） */
.fx-tool.fx-featured{border-color:rgba(232,160,32,.65)}
.fx-featured .fx-tool-a{padding:26px 26px 20px;--fx-media-lg:112px}
.fx-featured .fxp-media{width:112px;height:112px}
.fx-featured .fx-tool-a>h3{font-size:26px;max-width:none;margin-top:20px}
.fx-featured .fx-tool-a>.fx-d{font-size:16px;max-width:calc(100% - 40px)}
.fx-featured .fx-tool-a>.fx-note{max-width:none}
.fx-featured .fx-papers{right:50%;top:auto;bottom:104px;width:190px;height:190px;margin-right:-95px;transform:scale(1.4);transform-origin:bottom center}
.fx-featured .fx-tool-a>.fx-d{max-width:calc(100% - 40px)}
.fx-featured .fx-tool-for{color:#b9c9d6}
.fx-featured .fxp-media img{filter:drop-shadow(0 14px 14px rgba(0,0,0,.5))}

/* 搜尋／篩選中：卡片區維持原樣，只收首屏 */
body:has(#fxResults:not([hidden])) .fxp-hero .fx-hero-in{padding-bottom:50px}

/* ── 平板 ── */
@media (max-width:1024px){
  .fxp-hero .fx-hero-in{grid-template-columns:1fr;gap:20px;padding:26px 20px 60px}
  .fxp-h1{display:none}
  .fxp-h2{display:block;height:76px;border-radius:16px;border:1px solid rgba(232,160,32,.38);background-color:#0b2a3f;background-size:cover;background-position:center;
    background-image:radial-gradient(ellipse at 80% 40%,rgba(232,160,32,.2),transparent 60%),linear-gradient(150deg,#12384f,#0a2334 60%,#061726)}
  .fx-grid>.fx-featured{grid-column:span 2;grid-row:auto}
  .fx-grid>.c12{grid-column:span 2}
  .fx-featured .fx-papers{right:26px;margin-right:0;bottom:80px;transform:scale(1.05);transform-origin:bottom right}
  .fx-featured .fx-tool-a>.fx-d{max-width:calc(100% - 200px)}
}
@media (min-width:641px) and (max-width:980px){
  .fxp-cos-tg{display:none}
}

/* ── 手機 ── */
@media (max-width:640px){
  :root{--fx-media-lg:var(--fx-media-sm)}
  .fxp-hero .fx-hero-in{padding:16px 16px 46px;gap:14px}
  .fxp-hero .fx-kick{display:inline-flex;font-size:11.5px;letter-spacing:.24em}
  .fxp-hero .fx-kick::after{display:none}
  .fxp-hero h1{font-size:28px;margin-top:8px;line-height:1.3}
  .fxp-hero .fx-lead{font-size:15px;-webkit-line-clamp:3;margin-top:10px}
  .fxp-trust{display:none}
  .fxp-h2{height:64px}
  .fx-find{margin-top:-34px}
  .fx-search{min-height:54px}
  /* 公司圓章：預設收合，點「依保險公司篩選」展開成單列橫滑 */
  .fx-cos-hd{display:none}
  .fx-filters{margin-top:8px}
  html body .fxp-cos-tg{display:flex!important;justify-content:flex-start;align-items:center;min-height:44px;margin-top:8px;padding:0 14px;font-size:14px;font-weight:700;border-style:solid;width:100%;box-sizing:border-box}
  .fx-find-box:not(:has(#fxMoreCos:checked)) .fx-cos{display:none}
  .fx-find-box:has(#fxMoreCos:checked) .fxp-cos-tg .fx-more-on{display:inline}
  .fx-find-box:has(#fxMoreCos:checked) .fxp-cos-tg .fx-more-off{display:none}
  .fx-find-box:has(#fxCos .fx-chip.on:not([data-v=""])) .fxp-cos-tg{background:var(--fx-acc-bg);border-color:var(--fx-gold)}
  .fx-find-box:has(#fxCos .fx-chip.on:not([data-v=""])) .fxp-cos-tg .fx-more-off::after{content:"・已選一家";color:var(--fx-gold-ink)}
  html body #sharedBar.fxp-client{padding:12px 14px;margin-top:18px}
  .fx-grid{gap:14px}
  .fx-grid>.fx-featured,.fx-grid>.c12{grid-column:auto;grid-row:auto}
  .fx-tool-a,.fx-featured .fx-tool-a{padding:18px 16px 14px;grid-template-columns:var(--fx-media-sm) minmax(0,1fr);column-gap:14px;
    grid-template-rows:auto auto auto auto auto 1fr;grid-template-areas:"media top" "media title" "desc desc" "note note" "cta cta"}
  .fx-featured .fxp-media{width:var(--fx-media-sm);height:var(--fx-media-sm)}
  .fx-tool-a>.fx-tool-top{align-self:end;padding-right:48px}
  .fx-tool-a>h3,.fx-featured .fx-tool-a>h3{margin-top:4px;font-size:19px;align-self:start;padding-right:0}
  .fx-tool-a>.fx-d,.fx-featured .fx-tool-a>.fx-d{margin-top:12px;max-width:none}
  .fx-featured .fx-papers{display:none}
  .fx-tool-a>.fx-tool-cta{min-height:48px}
  .fxp-media.noimg .fxp-ico{inset:5%}
}

/* ── 深色：圖本身自帶深藍金邊底座，只需把陰影收斂 ── */
html[data-rex-theme="dark"] .fxp-media img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.55))}
html[data-rex-theme="dark"] .fxp-trust li{background:rgba(232,160,32,.1)}
html[data-rex-theme="dark"] .fx-tool-a:focus-visible{outline-color:var(--fx-gold-hi)}

/* ── 減少動態 ── */
@media (prefers-reduced-motion:reduce){
  .fx-tool,.fxp-media img,.fx-chip,#fxCos .fx-chip,.fx-hit,.fx-pin,.mini-btn{transition:none!important}
  .fx-tool:hover,.fx-tool:hover .fxp-media img,#fxCos .fx-chip:hover,.mini-btn:hover{transform:none!important}
  html{scroll-behavior:auto!important}
}

/* 窄卡（四欄／三欄）：小標放到圖示下方單行，不再擠在圖示旁折成三四行 */
@media (min-width:641px){
  .fx-grid>.c3>.fx-tool-a,.fx-grid>.c4>.fx-tool-a{grid-template-areas:"media media" "top top" "title title" "desc desc" "note note" "cta cta"}
  .fx-grid>.c3>.fx-tool-a>.fx-tool-top,.fx-grid>.c4>.fx-tool-a>.fx-tool-top{margin-top:14px;padding-right:0;align-self:start}
  .fx-grid>.c3>.fx-tool-a>h3,.fx-grid>.c4>.fx-tool-a>h3{margin-top:4px}
}

/* ═══ 第二批素材（H1/H2/S1/S2/P1/E1/E2/B1/B2） ═══ */
/* 首屏背景：桌機 H1、手機 H2。左側本來就是乾淨深藍，再疊一層由左往右的深藍漸層確保標題對比 */
.fxp-hero{background-color:#071b2b}
.fxp-hero .fx-hero-bg{
  background-color:#071b2b;
  background-image:linear-gradient(90deg,rgba(7,27,43,.97) 0%,rgba(7,27,43,.94) 46%,rgba(7,27,43,0) 76%),
    url(/rex/forms/assets/H1-1024.webp);
  background-image:linear-gradient(90deg,rgba(7,27,43,.97) 0%,rgba(7,27,43,.94) 46%,rgba(7,27,43,0) 76%),
    image-set(url(/rex/forms/assets/H1-1024.webp) 1x,url(/rex/forms/assets/H1-1600.webp) 2x);
  background-size:100% 100%,auto 150%;background-position:0 0,100% 80%;background-repeat:no-repeat}
@media (min-width:1100px){
  .fxp-hero .fx-hero-bg{background-image:linear-gradient(90deg,rgba(7,27,43,.97) 0%,rgba(7,27,43,.94) 46%,rgba(7,27,43,0) 76%),url(/rex/forms/assets/H1-1600.webp);
    background-size:100% 100%,62% auto;background-position:0 0,100% 78%}  /* 依寬度縮放：首屏變矮（搜尋中）時圖左緣仍落在深色漸層下，不出現直線接縫 */
}
.fxp-hero .fx-hero-bg::after{display:none}
.fxp-hero .fx-hero-in{grid-template-columns:minmax(0,1fr);min-height:300px}
.fxp-hero .fx-copy{max-width:640px}
@media (min-width:641px){.fxp-hero .fx-hero-in{padding-bottom:70px}}
@media (min-width:641px) and (max-width:1099px){.fxp-hero .fx-hero-bg{background-size:100% 100%,auto 125%;background-position:0 0,100% 75%;background-image:linear-gradient(90deg,rgba(7,27,43,.97) 0%,rgba(7,27,43,.94) 62%,rgba(7,27,43,0) 92%),url(/rex/forms/assets/H1-1024.webp)}}
@media (max-width:640px){
  .fxp-hero .fx-hero-bg{
    background-image:linear-gradient(180deg,rgba(7,27,43,.92) 0%,rgba(7,27,43,.85) 46%,rgba(7,27,43,0) 66%),url(/rex/forms/assets/H2-600.webp);
    background-image:linear-gradient(180deg,rgba(7,27,43,.92) 0%,rgba(7,27,43,.85) 46%,rgba(7,27,43,0) 66%),image-set(url(/rex/forms/assets/H2-600.webp) 1x,url(/rex/forms/assets/H2-900.webp) 2x);
    background-size:100% 100%,100% auto;background-position:0 0,50% 100%}
  .fxp-hero .fx-hero-in{padding-bottom:210px;min-height:0}
}
body:has(#fxResults:not([hidden])) .fxp-hero .fx-hero-in{padding-bottom:50px}

/* 區塊標題右側插圖 */
.fx-sec{position:relative}
.fx-sec-hd{position:relative}
.fxp-sec-img{position:absolute;right:0;top:-26px;width:170px;height:auto;pointer-events:none;z-index:0}
@media (min-width:761px){.fx-sec>.fx-sec-hd{margin-right:190px}.fx-sec>.fx-sec-hint{margin-right:190px}}
@media (max-width:760px){.fxp-sec-img{display:none}}

/* 理賠主卡疊紙（P1） */
.fx-featured .fx-papers.fxp-p1{right:18px;top:auto;bottom:96px;margin-right:0;width:240px;height:240px;transform:none}
.fx-papers.fxp-p1 img{position:static;display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0;background:none;box-shadow:none;transform:none;opacity:1}
@media (max-width:1024px){.fx-featured .fx-papers.fxp-p1{right:12px;bottom:80px;width:170px;height:170px;transform:none}}
@media (max-width:640px){.fx-featured .fx-papers.fxp-p1{display:none}}

/* 搜尋無結果（E1） */
.fx-empty::before{content:"";display:block;width:120px;height:120px;margin:0 auto 10px;background:url(/rex/forms/assets/E1-240.webp) center/contain no-repeat}
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){.fx-empty::before{background-image:url(/rex/forms/assets/E1-480.webp)}}

/* 尚未帶入客戶（E2）：保留 DOM 的「？」，文字透明 */
html body #sharedBar:not(.has-client) .avatar{color:transparent;font-size:0;background:url(/rex/forms/assets/E2-240.webp) center/cover no-repeat;border-color:transparent;box-shadow:none}
@media (-webkit-min-device-pixel-ratio:1.5),(min-resolution:144dpi){html body #sharedBar:not(.has-client) .avatar{background-image:url(/rex/forms/assets/E2-480.webp)}}

/* 頁面底紋（B1 淺／B2 深）：單張覆蓋、不平鋪 */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background:url(/rex/forms/assets/B1-1200.webp) center/cover no-repeat}
html[data-rex-theme="dark"] body::before{background-image:url(/rex/forms/assets/B2-1200.webp);opacity:.28}
body.embed-mode::before{display:none}

@media print{
  .fxp-hero .fx-hero-bg,.fxp-sec-img,.fx-papers,body::before,.fx-empty::before{display:none!important;background:none!important}
}
/* 搜尋／篩選中（手機）：首屏收短，不放背景圖，避免圖壓到標題 */
@media (max-width:640px){
  body:has(#fxResults:not([hidden])) .fxp-hero .fx-hero-bg{background-image:linear-gradient(165deg,#0a2334,#061726)!important}
}