/* WISELOOP 全站圖像化層 vx（2026-09-30）*/
/* ===== WISELOOP 全站圖像化層（vx）===== */
:root{--vx-g:#1f5130;--vx-g2:#2d7a4a;--vx-soft:#E7F3EB;--vx-soft2:#CFE6D7;--vx-ink:#0F172A}
/* 觸控裝置 header 雙語 CTA 同時出現的 bug */
.lang-zh .nav-cta[data-lang="en"],.lang-en .nav-cta[data-lang="zh"]{display:none!important}

/* h2 主題圖示 */
.vx-h2ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--vx-soft),var(--vx-soft2));color:var(--vx-g);vertical-align:middle;margin:0 12px 6px 0;flex-shrink:0}
.vx-h2ic svg{width:24px;height:24px}
.vx-h2wrap{display:block}
[style*="text-align:center"] .vx-h2ic,.section-inner[style*="center"] .vx-h2ic,.vx-center .vx-h2ic{display:flex;margin:0 auto 12px}

/* 長段落收合 */
.vx-clamp{display:-webkit-box!important;-webkit-box-orient:vertical;overflow:hidden;-webkit-line-clamp:2}
.vx-clamp.l3{-webkit-line-clamp:3}
.vx-more{display:inline-flex;align-items:center;gap:4px;margin:6px 0 4px;padding:4px 12px;border:1px solid var(--vx-soft2);background:#fff;color:var(--vx-g);border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;min-height:32px}
.vx-more:hover{background:var(--vx-soft)}

/* 數字高亮 */
.vx-num{color:var(--vx-g);font-weight:800;background:linear-gradient(transparent 62%,#D6ECDD 62%);padding:0 2px;border-radius:2px;white-space:nowrap}

/* 文章：重點目錄＋閱讀時間＋進度條 */
.vx-toc{margin:28px 0 8px;padding:22px;border-radius:18px;background:linear-gradient(180deg,#F4FAF6,#fff);border:1px solid #D9EBDF}
.vx-toc-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;font-weight:800;color:var(--vx-ink);font-size:16px}
.vx-rt{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--vx-g);background:#fff;border:1px solid var(--vx-soft2);border-radius:999px;padding:5px 12px}
.vx-rt svg{width:15px;height:15px}
.vx-toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.vx-toc a{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#fff;border:1px solid #E3EDE6;text-decoration:none;color:var(--vx-ink);font-size:14px;font-weight:600;line-height:1.35;transition:transform .15s,box-shadow .15s}
.vx-toc a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(31,81,48,.1)}
.vx-toc a .n{flex-shrink:0;width:32px;height:32px;border-radius:10px;background:var(--vx-soft);color:var(--vx-g);display:flex;align-items:center;justify-content:center}
.vx-toc a .n svg{width:18px;height:18px}
.vx-prog{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#34C25E,var(--vx-g));z-index:10000;transition:width .1s}

/* 清單圖示化 */
ul.vx-ul{list-style:none!important;padding-left:0!important}
ul.vx-ul>li{position:relative;padding-left:32px!important;margin:10px 0}
ul.vx-ul>li::before{content:"";position:absolute;left:0;top:.18em;width:22px;height:22px;border-radius:50%;background:var(--vx-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5130' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
ol.vx-ol{list-style:none!important;padding-left:0!important;counter-reset:vx}
ol.vx-ol>li{position:relative;padding-left:40px!important;margin:12px 0;counter-increment:vx}
ol.vx-ol>li::before{content:counter(vx);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--vx-g);color:#fff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}

/* 表格 */
.vx-tbl thead th,.vx-tbl tr:first-child th{background:var(--vx-g)!important;color:#fff!important}
.vx-tbl tbody tr:nth-child(even) td{background:#F6FAF7}
.vx-tbl td:first-child{font-weight:700;color:var(--vx-ink)}
.vx-swipe{display:none;font-size:12px;color:#64748B;margin:6px 0 0;text-align:right}
@media (max-width:760px){.vx-swipe{display:block}}

/* FAQ 問號 */
.vx-qi{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--vx-soft);color:var(--vx-g);display:inline-flex;align-items:center;justify-content:center;margin-right:10px;vertical-align:middle}
.vx-qi svg{width:15px;height:15px}
.faq-q.vx-hasq{justify-content:flex-start!important}
.faq-q.vx-hasq>:last-child:not(span[data-lang]){margin-left:auto}

/* 媒合進度：5 步驟預覽 */
.vx-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:26px 0 22px;position:relative}
.vx-step5{text-align:center;position:relative}
.vx-step5 .c{width:52px;height:52px;margin:0 auto 8px;border-radius:50%;background:#fff;border:2px solid var(--vx-soft2);color:var(--vx-g);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.vx-step5 .c svg{width:24px;height:24px}
.vx-step5 b{display:block;font-size:14px;color:var(--vx-ink)}
.vx-step5 small{display:block;font-size:12px;color:#64748B;line-height:1.4;margin-top:2px}
.vx-steps::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;background:repeating-linear-gradient(90deg,var(--vx-soft2) 0 8px,transparent 8px 14px)}
@media (max-width:640px){.vx-step5 small{display:none}.vx-step5 .c{width:42px;height:42px}.vx-step5 b{font-size:12px}.vx-steps::before{top:21px}}

/* 手機底部 CTA */
.m-sticky-cta{display:none}
@media (max-width:760px){
 .m-sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:900;align-items:center;justify-content:space-between;gap:10px;background:#1f5130;color:#fff;border-radius:14px;padding:10px 10px 10px 16px;box-shadow:0 8px 24px rgba(0,0,0,.22);transform:translateY(140%);transition:transform .3s}
 .m-sticky-cta.show{transform:none}
 .m-sticky-cta .t{font-size:13px;line-height:1.35}.m-sticky-cta .t b{display:block;font-size:15px}
 .m-sticky-cta a{background:#fff;color:#1f5130;font-weight:800;border-radius:10px;padding:11px 14px;text-decoration:none;white-space:nowrap;font-size:14px}
}


/* ===== 自動生成圖表 ===== */
.vx-charts{display:grid;gap:16px;margin:20px 0 14px;grid-template-columns:1fr}
.vx-charts.two{grid-template-columns:repeat(auto-fit,minmax(380px,1fr))}
.vx-chart{background:#fff;border:1px solid #D9EBDF;border-radius:16px;padding:18px 20px 12px;box-shadow:0 6px 18px rgba(15,23,42,.05);text-align:left}
.vx-ch-h{display:flex;align-items:center;gap:8px;font-weight:800;color:#0F172A;margin-bottom:12px;font-size:15px}
.vx-ch-h svg{width:20px;height:20px;color:#1f5130;flex-shrink:0}
.vx-ch-h small{margin-left:auto;font-size:11px;font-weight:600;color:#94A3B8;white-space:nowrap}
.vx-rg{display:grid;grid-template-columns:118px 1fr 118px;gap:10px;align-items:center;margin:9px 0;font-size:13px}
.vx-rl{font-weight:700;color:#0F172A;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vx-rt2{position:relative;height:14px;background:#EEF4F0;border-radius:7px}
.vx-rb{position:absolute;top:0;bottom:0;border-radius:7px;background:linear-gradient(90deg,#34C25E,#1f5130);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.vx-rb.m{background:linear-gradient(90deg,#7CB9F2,#1D5FAF)}
.vx-chart.in .vx-rb{transform:scaleX(1)}
.vx-rv{color:#334155;font-weight:700;white-space:nowrap;font-size:12.5px}
.vx-ax{margin-top:2px}.vx-ax .vx-rt2{background:none;height:14px}
.vx-ax i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:11px;color:#94A3B8;white-space:nowrap}
.vx-ax i:first-child{transform:none}.vx-ax i:last-child{transform:translateX(-100%)}
.vx-stair{width:100%;height:auto;display:block}
.vx-stp{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;transition-delay:var(--d,0s)}
.vx-chart.in .vx-stp{opacity:1;transform:none}
.vx-stp-line{stroke-dashoffset:400;transition:stroke-dashoffset 1.6s .6s}
.vx-chart.in .vx-stp-line{stroke-dashoffset:0}
@media (max-width:640px){
 .vx-charts.two{grid-template-columns:1fr}
 .vx-rg{grid-template-columns:86px 1fr;row-gap:2px}.vx-rv{grid-column:2;font-size:11.5px}
 .vx-ax .vx-rv{display:none}.vx-ch-h small{display:none}
}
/* ===== 頁首主題插畫 ===== */
.vx-hero-ill{display:none}
@media (min-width:1240px){
 .vx-hero-ill{display:block;position:absolute;right:3%;top:50%;width:250px;height:250px;transform:translateY(-50%);pointer-events:none}
 .article-hero .vx-hero-ill{right:6%;width:280px;height:280px}
}
.vx-hero-ill>svg{width:100%;height:100%;overflow:visible}
.vx-orbit{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5;stroke-dasharray:3 7;animation:vxspin 60s linear infinite;transform-origin:150px 150px}
.vx-halo{fill:rgba(52,194,94,.08);stroke:rgba(52,194,94,.35);animation:vxpulse 3.2s ease-in-out infinite;transform-origin:150px 150px}
.vx-core{fill:#1f5130;stroke:#34C25E;stroke-width:2}
.vx-core-ic{color:#fff}
.vx-ln{stroke:#34C25E;stroke-width:1.6;stroke-dasharray:5 6;opacity:.7;animation:vxflow 1.6s linear infinite;animation-delay:var(--d)}
.vx-sat{color:#A7F3C0;animation:vxfloat 4s ease-in-out infinite;animation-delay:var(--d)}
.vx-sc{fill:rgba(15,23,42,.85);stroke:rgba(52,194,94,.6);stroke-width:1.5}
@keyframes vxspin{to{transform:rotate(360deg)}}
@keyframes vxpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:.5}}
@keyframes vxflow{to{stroke-dashoffset:-22}}
@keyframes vxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.vx-orbit,.vx-halo,.vx-ln,.vx-sat{animation:none}}
@media (min-width:1240px){
 .article-hero.vx-has-ill .article-hero-inner{margin-left:6%!important;margin-right:0!important;max-width:min(820px,calc(100% - 380px))!important}
 .article-hero .vx-hero-ill{right:4%;width:250px;height:250px}
 .page-hero.vx-has-ill>*:not(.vx-hero-ill){max-width:min(760px,calc(100% - 560px));margin-left:auto!important;margin-right:auto!important}
}
.vx-note{font-size:11.5px;color:#94A3B8;margin-top:6px}
.vx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.vx-card{border:1px solid #E3EDE6;border-radius:14px;padding:16px;background:linear-gradient(180deg,#F8FCF9,#fff)}
.vx-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.vx-cic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#E3F2E8,#CDE7D6);color:#1f5130;display:flex;align-items:center;justify-content:center}
.vx-cic svg{width:22px;height:22px}
.vx-cno{font-size:12px;font-weight:800;color:#94A3B8}
.vx-ct{font-weight:800;font-size:16px;color:#0F172A;line-height:1.3}
.vx-cs{font-size:12px;color:#64748B;margin-top:2px}
.vx-cb{display:inline-block;margin:8px 0 2px;font-size:12px;font-weight:700;color:#1f5130;background:#E7F3EB;border-radius:999px;padding:3px 10px}
.vx-cd{font-size:13px;color:#334155;line-height:1.5;margin-top:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vx-cd small{display:block;font-size:11px;font-weight:700;color:#94A3B8;margin-bottom:2px}
/* ===== 多色系（依主題上色）===== */
.vx-h2ic{background:var(--cs,#E7F3EB)!important;color:var(--c,#1f5130)!important}
.vx-toc{background:linear-gradient(180deg,#F8FAFC,#fff)!important;border-color:#E2E8F0!important}
.vx-toc a .n{background:var(--cs,#E7F3EB)!important;color:var(--c,#1f5130)!important}
.vx-toc a:hover{border-color:var(--c,#1f5130)}
.vx-rt{color:#1D5FAF!important;border-color:#DBEAFE!important}
.vx-chart .vx-ch-h svg{color:var(--c,#1f5130)}
.vx-chart{border-color:#E2E8F0}
.vx-rb.\$ {background:linear-gradient(90deg,#FCD34D,#D97706)}
.vx-rb.t{background:linear-gradient(90deg,#5EEAD4,#0F766E)}
.vx-cic{background:var(--cs,#E3F2E8)!important;color:var(--c,#1f5130)!important}
.vx-cb{color:var(--c,#1f5130)!important;background:var(--cs,#E7F3EB)!important}
.vx-card{background:#fff!important;border-top:3px solid var(--c,#1f5130)!important}
.vx-step5 .c{border-color:var(--cs,#CFE6D7)!important;color:var(--c,#1f5130)!important;background:var(--cs,#fff)!important}
.vx-num{color:#92400E!important;background:linear-gradient(transparent 60%,#FDE68A 60%)!important}
ol.vx-ol>li::before{background:#1D5FAF!important}
.vx-tbl thead th,.vx-tbl tr:first-child th{background:#1E3A5F!important}
.vx-more{color:#1D5FAF!important;border-color:#DBEAFE!important}.vx-more:hover{background:#EFF6FF!important}
/* 清單／步驟收成 1–2 行 */
.vx-1l{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.vx-1l.l2{-webkit-line-clamp:2}
li.vx-1l{display:-webkit-box!important}
.vx-3l{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* 首頁：圖示卡、6 格、長條圖、CTA 步驟上色 */
.vx-tile:nth-child(1) .vi{color:#15803D;background:#DCFCE7}
.vx-tile:nth-child(2) .vi{color:#1D5FAF;background:#DBEAFE}
.vx-tile:nth-child(3) .vi{color:#B45309;background:#FEF3C7}
.vx-tile:nth-child(4) .vi{color:#6D28D9;background:#EDE9FE}
.vx-tile{border-top:3px solid transparent}
.vx-tile:nth-child(1){border-top-color:#22C55E}.vx-tile:nth-child(2){border-top-color:#3B82F6}.vx-tile:nth-child(3){border-top-color:#F59E0B}.vx-tile:nth-child(4){border-top-color:#8B5CF6}
.vx-hc:nth-child(1) .vx-hic{background:#DBEAFE}.vx-hc:nth-child(1) .vx-hic .vi{color:#1D5FAF}
.vx-hc:nth-child(2) .vx-hic{background:#CCFBF1}.vx-hc:nth-child(2) .vx-hic .vi{color:#0F766E}
.vx-hc:nth-child(3) .vx-hic{background:#FEF3C7}.vx-hc:nth-child(3) .vx-hic .vi{color:#B45309}
.vx-hc:nth-child(4) .vx-hic{background:#E0E7FF}.vx-hc:nth-child(4) .vx-hic .vi{color:#4338CA}
.vx-hc:nth-child(5) .vx-hic{background:#FCE7F3}.vx-hc:nth-child(5) .vx-hic .vi{color:#BE185D}
.vx-hc:nth-child(6) .vx-hic{background:#DCFCE7}.vx-hc:nth-child(6) .vx-hic .vi{color:#15803D}
.vx-hc:nth-child(1):hover{border-color:#93C5FD}.vx-hc:nth-child(2):hover{border-color:#5EEAD4}.vx-hc:nth-child(3):hover{border-color:#FCD34D}.vx-hc:nth-child(4):hover{border-color:#A5B4FC}.vx-hc:nth-child(5):hover{border-color:#F9A8D4}.vx-hc:nth-child(6):hover{border-color:#86EFAC}
.vx-bar:nth-child(6n+1) .vx-bic{color:#1D5FAF}.vx-bar:nth-child(6n+2) .vx-bic{color:#B45309}.vx-bar:nth-child(6n+3) .vx-bic{color:#6D28D9}.vx-bar:nth-child(6n+4) .vx-bic{color:#0F766E}.vx-bar:nth-child(6n+5) .vx-bic{color:#BE123C}.vx-bar:nth-child(6n) .vx-bic{color:#15803D}
.vx-bar.top:nth-child(1) .vx-bf{background:linear-gradient(90deg,#60A5FA,#1D5FAF)}.vx-bar.top:nth-child(2) .vx-bf{background:linear-gradient(90deg,#FCD34D,#D97706)}.vx-bar.top:nth-child(3) .vx-bf{background:linear-gradient(90deg,#C4B5FD,#6D28D9)}
.vx-bar.top:nth-child(1) b{color:#1D5FAF}.vx-bar.top:nth-child(2) b{color:#B45309}.vx-bar.top:nth-child(3) b{color:#6D28D9}
.vx-bf{background:#CBD5E1}
.vx-step:nth-child(1) .vx-sic .vi{color:#93C5FD}.vx-step:nth-child(3) .vx-sic .vi{color:#FCD34D}.vx-step:nth-child(5) .vx-sic .vi{color:#86EFAC}
.vx-gic{background:var(--cs,#E3F2E8)}

.vx-more{width:max-content!important;align-self:flex-start;justify-self:start;flex:0 0 auto}
.vx-stair{max-width:720px;margin:0 auto}

@media (max-width:640px){
 .vx-toc{padding:16px!important}
 .vx-toc-grid{display:flex!important;overflow-x:auto;gap:8px;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
 .vx-toc a{flex:0 0 72%;scroll-snap-align:start;font-size:13px}
 .vx-toc-h::after{content:"← 滑動 →";font-size:11px;font-weight:600;color:#94A3B8}
 .vx-toc-h .vx-rt{display:none}
}