/* 沿用官網低彩度建築圖解，獨立預覽及文章共用。 */
.kv-visual { --kv-ink:var(--ink,#0d4d5e); --kv-muted:var(--muted,#52676b); --kv-line:#ccdcd8; --kv-gold:#826b43; --kv-soft:#f3f7f5; margin:64px 0 88px; color:var(--kv-ink); }
.kv-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:32px; }
.kv-heading h2 { font-size:clamp(23px,2.4vw,32px); font-weight:500; letter-spacing:.02em; }
.kv-heading p:not(.kv-eyebrow) { margin-top:14px; color:var(--kv-muted); font-size:16px; max-width:48em; }
.kv-eyebrow { color:var(--kv-gold); font-size:11px; letter-spacing:.15em; margin-bottom:12px; }
.kv-replay { flex-shrink:0; color:var(--kv-ink); border:0; border-bottom:1px solid var(--kv-line); background:none; padding:8px 0; min-height:44px; cursor:pointer; font-size:14px; }
.kv-replay[hidden] { display:none; }
.kv-replay:hover { border-bottom-color:var(--kv-ink); }
.kv-replay:focus-visible,.kv-sources summary:focus-visible { outline:2px solid var(--kv-ink); outline-offset:5px; }
.kv-replay:disabled { color:var(--kv-muted); cursor:default; border-bottom-color:transparent; }
.kv-grid { display:grid; background:linear-gradient(var(--kv-soft),#fff); }
.kv-scenarios { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kv-step { min-width:0; padding:26px 24px 28px; }
.kv-step + .kv-step { border-left:1px solid var(--kv-line); }
.kv-number { color:var(--kv-gold); font-size:12px; letter-spacing:.12em; }
.kv-step h3 { font-weight:500; font-size:23px; margin:12px 0 14px; }
.kv-condition { min-height:3.8em; line-height:1.7; font-size:14px; color:var(--kv-muted); }
.kv-label { margin-top:22px; font-size:14px; }
.kv-ratio { font-family:var(--latin,Arial,sans-serif); font-size:36px; line-height:1.3; margin:5px 0 14px; font-weight:300; }
.kv-ratio small { font-size:18px; margin-left:4px; }
.kv-step svg { width:100%; display:block; overflow:visible; stroke:#688f96; stroke-width:1; stroke-linejoin:round; stroke-linecap:round; fill:none; }
.kv-step svg text { font-family:inherit; font-size:11px; fill:var(--kv-muted); stroke:none; }
.kv-scenarios svg { height:auto; }
.kv-track { stroke:#d9e5e0; stroke-width:5; }
.kv-ratio-line { stroke:#789fa2; stroke-width:5; }
.kv-axis { stroke:#bdcdca; stroke-width:1; }
.kv-payment-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-step svg .kv-payment-value { font-size:19px; fill:var(--kv-ink); }
.kv-emphasis .kv-ratio,.kv-emphasis svg .kv-payment-value { color:var(--kv-gold); fill:var(--kv-gold); }
.kv-emphasis .kv-ratio-line { stroke:#b49a64; }
.kv-emphasis .kv-payment-bar { fill:#d9c49d; stroke:#9c845d; }
.kv-payment-label { font-size:14px; margin:10px 0 22px; }
.kv-payment-label strong { font-weight:500; }
.kv-values { font-size:13px; border-top:1px solid var(--kv-line); margin:0; padding-top:12px; }
.kv-values div { display:flex; justify-content:space-between; gap:8px; }
.kv-values dd { margin:0; font-family:var(--latin,Arial,sans-serif); }
.kv-values dt { color:var(--kv-muted); }
.kv-key { display:flex; gap:24px; font-size:15px; line-height:1.85; border-top:1px solid var(--kv-line); padding:22px 0 14px; }
.kv-key>span { flex-shrink:0; color:var(--kv-gold); }
.kv-key p { max-width:68em; }
.kv-note { color:var(--kv-muted); font-size:13px; line-height:1.9; max-width:80em; }
.kv-sources { border-top:1px solid var(--kv-line); margin-top:26px; padding-top:12px; font-size:14px; color:var(--kv-muted); }
.kv-sources summary { cursor:pointer; min-height:44px; padding:10px 0; }
.kv-sources p { max-width:78em; margin:12px 0; }
.kv-sources a { display:inline-flex; align-items:center; min-height:44px; color:var(--kv-ink); border-bottom:1px solid var(--kv-line); }
.kv-ownership { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kv-ownership .kv-step { padding:26px 28px 28px; display:flex; flex-direction:column; }
.kv-ownership .kv-step:nth-child(odd) { border-left:0; }
.kv-ownership .kv-step:nth-child(n+3) { border-top:1px solid var(--kv-line); }
.kv-ownership .kv-step svg { height:245px; margin:8px 0; }
.kv-ownership .kv-step svg text { font-size:12px; fill:#365f68; }
.kv-land { fill:#e0ebe5; stroke:#afc9bc; }
.kv-leader { stroke:#9c845d; stroke-width:1.2; }
.kv-step .rv-window { stroke:#8faeaf; stroke-width:.65; }
.kv-muted-art>path,.kv-muted-art>g { opacity:.38; }
.kv-shares { margin:-16px auto 14px; width:min(100%,330px); font-size:12px; }
.kv-shares p { margin-bottom:6px; color:var(--kv-muted); }
.kv-share-track { display:grid; grid-template-columns:3fr 1fr; }
.kv-share-track span { background:#c4d9d6; text-align:center; padding:3px; white-space:nowrap; }
.kv-share-track span+span { background:#e2d4b8; }
.kv-ownership-caption { margin-top:auto; font-size:16px; max-width:100%; }
.kv-case-note { color:var(--kv-muted); font-size:13px; margin-top:10px; max-width:100%; }
.kv-cols-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kv-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-topics .kv-step { display:flex; flex-direction:column; }
.kv-topics .kv-step svg { height:220px; margin:16px 0; }
.kv-topic-caption { font-size:16px; margin-top:auto; max-width:100%; }
.knowledge-body .kv-visual { container-type:inline-size; margin:36px 0 44px; }
.knowledge-body .kv-heading h2 { font-size:24px; margin:0; line-height:1.6; }
.knowledge-body .kv-step h3 { margin:12px 0 14px; font-size:21px; }
.knowledge-body .kv-heading p { margin-top:14px; }
.knowledge-body .kv-heading .kv-eyebrow { margin:0 0 12px; }
.knowledge-body .kv-visual p { line-height:1.8; }
.knowledge-body .kv-values { font-size:13px; }
.knowledge-body .kv-replay { border:0; border-bottom:1px solid var(--kv-line); background:transparent; padding:8px 0; min-height:44px; font-size:14px; box-shadow:none; border-radius:0; letter-spacing:0; }
.knowledge-body .kv-replay:hover { border-bottom-color:var(--kv-ink); }
@container(max-width:800px) {
  .kv-scenarios,.kv-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kv-scenarios .kv-step:nth-child(3),.kv-cols-4 .kv-step:nth-child(3) { border-left:0; }
  .kv-scenarios .kv-step:nth-child(n+3),.kv-cols-4 .kv-step:nth-child(n+3) { border-top:1px solid var(--kv-line); }
  .kv-heading { display:block; }
  .kv-replay { margin-top:12px; }
}
@container(max-width:620px) {
  .kv-grid { grid-template-columns:1fr; }
  .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
  .kv-condition { min-height:0; }
  .kv-scenarios svg { max-width:290px; margin:auto; }
  .kv-key { display:block; }
  .kv-key>span { display:block; margin-bottom:10px; }
}
.kv-preview { max-width:1320px; padding:48px 40px; margin:auto; }
.kv-preview-header { border-bottom:1px solid var(--line); padding-bottom:26px; }
.kv-preview-header h1 { font-size:28px; font-weight:500; margin-bottom:10px; }
.kv-preview-header p { font-size:14px; color:var(--muted); }
.kv-preview-header nav { display:flex; flex-wrap:wrap; gap:24px; margin-top:18px; font-size:14px; }
.kv-preview-header a { min-height:44px; display:inline-flex; align-items:center; border-bottom:1px solid var(--line); }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-step { animation:kv-enter 1.1s both; }
  .kv-playing .kv-step:nth-child(2) { animation-delay:.65s; }
  .kv-playing .kv-step:nth-child(3) { animation-delay:1.3s; }
  .kv-playing .kv-step:nth-child(4) { animation-delay:1.95s; }
  .kv-playing .kv-grow { transform-box:fill-box; transform-origin:center bottom; animation:kv-grow .9s .25s both; }
  .kv-playing .kv-draw { animation:kv-draw .9s .25s both; }
  .kv-playing .kv-step:nth-child(2) :is(.kv-grow,.kv-draw) { animation-delay:.9s; }
  .kv-playing .kv-step:nth-child(3) :is(.kv-grow,.kv-draw) { animation-delay:1.55s; }
  .kv-playing .kv-step:nth-child(4) :is(.kv-grow,.kv-draw) { animation-delay:2.2s; }
  @keyframes kv-enter { from { opacity:.2; transform:translateY(8px); } to { opacity:1; transform:none; } }
  @keyframes kv-grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
  @keyframes kv-draw { from { stroke-dasharray:200; stroke-dashoffset:200; } to { stroke-dasharray:200; stroke-dashoffset:0; } }
}
@media(max-width:1050px) { .kv-scenarios,.kv-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } .kv-scenarios .kv-step:nth-child(3),.kv-cols-4 .kv-step:nth-child(3) { border-left:0; } .kv-scenarios .kv-step:nth-child(n+3),.kv-cols-4 .kv-step:nth-child(n+3) { border-top:1px solid var(--kv-line); } }
@media(max-width:700px) {
  .kv-preview { padding:28px 22px; }
  .kv-visual { margin:44px 0 60px; }
  .kv-heading { display:block; margin-bottom:20px; }
  .kv-heading p:not(.kv-eyebrow) { font-size:15px; }
  .kv-replay { margin-top:12px; }
  .kv-grid { grid-template-columns:1fr; }
  .kv-step,.kv-ownership .kv-step { padding:24px 18px; }
  .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
  .kv-condition { min-height:0; }
  .kv-scenarios svg { max-width:290px; margin:auto; }
  .kv-ownership .kv-step svg { height:230px; }
  .kv-key { display:block; }
  .kv-key>span { display:block; margin-bottom:10px; }
}

/* 估價方法系列：comparison */
/* 比較法圖解（kv-comparison-）：沿用 kv- 配色與動畫，只補卡片排版與 SVG 元件。 */
/* 卡片最小 270px：SVG viewBox 寬 240，文字 15 單位，最窄時約 14px，手機單欄約 19px。 */
.kv-comparison-grid { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.kv-comparison-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-comparison .kv-step svg { height:auto; margin:14px 0; }
.kv-comparison .kv-step svg text { font-size:15px; fill:#365f68; }
.kv-comparison .kv-step svg .kv-comparison-small { font-size:14px; fill:var(--kv-muted); }
.kv-comparison .kv-ratio { font-size:32px; margin:2px 0 4px; }
.kv-comparison .kv-label { margin-top:4px; }
.kv-comparison-caption { font-size:15px; line-height:1.8; margin-top:auto; }
.kv-comparison-caption strong { font-weight:500; color:var(--kv-ink); }
.kv-comparison-circle { fill:#f3f7f5; stroke:#afc9bc; }
.kv-comparison-zone { fill:#e0ebe5; stroke:#afc9bc; }
.kv-comparison-focus { fill:#cfe0da; stroke:#9c845d; stroke-width:2; }
.kv-comparison-subject { fill:#0d4d5e; stroke:none; }
.kv-comparison-mark { fill:#b49a64; stroke:#826b43; }
.kv-comparison-limit { stroke:#9c845d; stroke-width:1.5; stroke-dasharray:4 3; }
.kv-comparison-bar { fill:#e1ece8; stroke:#688f96; }
.kv-comparison-bar-after { fill:#bfd4d3; stroke:#688f96; }
.kv-comparison-doc { fill:#f7faf8; }
.kv-comparison-cross { stroke:#9c845d; stroke-width:2; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-comparison-mark.kv-grow { transform-origin:center; }
}

/* 估價方法系列：cost */
/* 成本法三篇圖解：只補數據圖用的類別，其餘沿用 knowledge-visuals.css 的 kv- 元件。 */
.kv-step svg.kv-cost-svg { height:auto; max-width:300px; margin:16px auto; }
.kv-step svg.kv-cost-svg text { font-size:15px; fill:#365f68; }
.kv-cost-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-cost-bar-land { fill:#e1ece8; stroke:#9fbcb6; }
.kv-cost-bar-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-cost-bar-cut { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-cost-area { fill:#e1ece8; stroke:none; }
.kv-cost-ref { stroke:#b8c9c6; stroke-width:1.5; stroke-dasharray:4 4; fill:none; }
.kv-cost-dot { fill:#826b43; stroke:#fff; stroke-width:1.5; }
.kv-visual .kv-step .kv-values { margin-top:12px; }

/* 估價方法系列：income */
/* 收益法圖解補充樣式：只用 kv-income- 前綴，沿用 knowledge-visuals.css 的色票與動畫。 */
.kv-income-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kv-income-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-visual .kv-income-chart .kv-step svg { height:auto; max-width:440px; margin:16px auto; }
.kv-visual .kv-income-cols-3 .kv-step svg { max-width:300px; }
.kv-visual .kv-income-chart svg text { font-size:13px; fill:#365f68; }
.kv-visual .kv-income-cols-3 svg text { font-size:14px; }
.kv-visual .kv-income-chart svg .kv-income-value { font-size:14px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-visual .kv-income-chart svg .kv-income-unit { fill:var(--kv-muted); }
.kv-income-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-income-bar-muted { fill:#e1ece8; stroke:#8faeaf; }
.kv-income-bar-strong { fill:#8fb3b5; stroke:#4f7f86; }
.kv-income-bar-alt { fill:#e2d4b8; stroke:#9c845d; }
.kv-income-fade { opacity:.45; }
.kv-income-dot { fill:#688f96; stroke:none; }
.kv-income-point { fill:#fff; stroke:#0d4d5e; stroke-width:1.6; }
.kv-income-ref { stroke:#bdcdca; stroke-dasharray:4 4; }
.kv-income-line { stroke:#0d4d5e; stroke-width:2.2; }
.kv-income-line-b { stroke:#9c845d; }
.kv-income-ghost { fill:none; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-income-box { fill:#f3f7f5; stroke:#ccdcd8; }
.kv-income-list { margin-top:4px; }
.kv-income-list div { padding:3px 0; }
@container(max-width:700px) {
  .kv-income-cols-2,.kv-income-cols-3 { grid-template-columns:1fr; }
  .kv-income-chart .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-income-cols-2,.kv-income-cols-3 { grid-template-columns:1fr; }
  .kv-income-chart .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}

/* 估價方法系列：landdev */
/* 土地開發分析法圖解：只補 kv-landdev- 類別，沿用 knowledge-visuals.css 的配色與動畫。 */
.kv-step svg.kv-landdev-art text { font-size:15px; fill:#365f68; }
.kv-landdev-ghost { fill:none; stroke:#9c845d; stroke-width:1.2; stroke-dasharray:4 3; }
.kv-step svg .kv-landdev-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-step svg .kv-landdev-pale { fill:#e1ece8; stroke:#688f96; }
.kv-landdev-gold-line { stroke:#b49a64; }
.kv-landdev-dot { fill:#e1ece8; stroke:#688f96; }
.kv-topics .kv-step svg.kv-landdev-art { height:200px; }
.kv-step .kv-ratio small { font-size:15px; }
@media(max-width:700px) { .kv-topics .kv-step svg.kv-landdev-art { height:auto; max-width:320px; margin:12px auto; } }

/* 高流量文章：tilt */
/* 房屋傾斜篇圖解（kv-tilt-）：沿用 knowledge-visuals.css 的配色與動畫，只補數據圖元件。 */
/* viewBox 寬 240、文字 17 單位：760px 預覽三欄時卡內 SVG 約 179px，等效約 12.7px；手機單欄約 21px。 */
.kv-step svg.kv-tilt-svg { height:auto; max-width:300px; margin:16px auto; }
.kv-step svg.kv-tilt-svg text { font-size:17px; fill:#365f68; }
.kv-step svg.kv-tilt-svg .kv-tilt-big { font-size:30px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); font-weight:300; }
.kv-step svg.kv-tilt-svg .kv-tilt-gold { fill:var(--kv-gold); }
.kv-tilt-rule { stroke:#0d4d5e; stroke-width:1.5; }
.kv-tilt-ref { stroke:#9c845d; stroke-width:1.2; stroke-dasharray:4 3; }
.kv-tilt-bar { fill:#d9c49d; stroke:#9c845d; }
.kv-tilt-bar-limit { fill:#e1ece8; stroke:#688f96; }
.kv-tilt-seg { stroke:#0d4d5e; stroke-width:7; }
.kv-tilt-seg-muted { stroke:#bfd4d3; stroke-width:7; }
.kv-tilt-dot { fill:#b49a64; stroke:#826b43; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-tilt-lean { transform-box:fill-box; transform-origin:50% 100%; animation:kv-tilt-lean 1.2s .3s both; }
  .kv-playing .kv-tilt-grow { transform-box:fill-box; transform-origin:left center; animation:kv-tilt-grow .9s both; }
  .kv-playing .kv-step:nth-child(3) .kv-tilt-grow { animation-delay:1.55s; }
  .kv-playing .kv-tilt-dot.kv-grow { transform-origin:center; }
  @keyframes kv-tilt-lean { from { transform:rotate(-8deg); } to { transform:none; } }
  @keyframes kv-tilt-grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 高流量文章：salesratio */
/* 銷坪比圖解（kv-salesratio-）：沿用 kv- 配色與動畫，只補三欄卡片與 SVG 元件。 */
/* SVG viewBox 寬 200、文字 14 單位；文章 760px 三欄時 SVG 約 205px，文字約 14px；最窄三欄（容器 681px）約 12.5px。 */
.kv-salesratio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-salesratio-grid .kv-step { display:flex; flex-direction:column; }
.kv-salesratio .kv-step svg.kv-salesratio-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-salesratio .kv-step svg.kv-salesratio-art text { font-size:14px; fill:#365f68; }
.kv-salesratio .kv-step svg .kv-salesratio-result { font-size:16px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-salesratio .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-salesratio .kv-ratio small { font-size:15px; }
.kv-salesratio .kv-step h3 { font-size:20px; }
.kv-salesratio-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
.kv-salesratio-far { fill:#e1ece8; stroke:#688f96; }
.kv-salesratio-exclusive { fill:#bfd4d3; stroke:#688f96; }
.kv-salesratio-common { fill:#e2d4b8; stroke:#9c845d; }
.kv-salesratio-sales { fill:#cfe0da; stroke:#688f96; }
.kv-salesratio-parking { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-salesratio-rule { stroke:#365f68; stroke-width:1.2; }
.kv-salesratio-box { fill:#f3f7f5; stroke:#afc9bc; }
.kv-salesratio-missing { fill:#f4ead6; stroke:#9c845d; stroke-width:1.6; stroke-dasharray:5 3; }
.kv-salesratio-doc { fill:#f7faf8; }
.kv-salesratio .kv-step svg .kv-salesratio-ok { fill:#0d4d5e; font-weight:600; }
.kv-salesratio .kv-step svg .kv-salesratio-no { fill:#826b43; font-weight:600; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-salesratio-hbar.kv-grow { transform-origin:left center; }
}
@container(max-width:680px) {
  .kv-salesratio-grid { grid-template-columns:1fr; }
  .kv-salesratio-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-salesratio-grid { grid-template-columns:1fr; }
  .kv-salesratio-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}

/* 高流量文章：public7599 */
/* 7599／575 篇圖解：只補 kv-public7599- 類別，沿用 knowledge-visuals.css 的配色與動畫。 */
/* 卡片最小 270px：SVG viewBox 寬 240，文字 13～15 單位，最窄約 12px 以上，手機單欄約 17px。 */
.kv-public7599-grid { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.kv-public7599-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-public7599 .kv-step svg.kv-public7599-svg { height:auto; max-width:320px; margin:14px auto; }
.kv-public7599 .kv-step svg text { font-size:15px; fill:#365f68; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.kv-public7599 .kv-step svg .kv-public7599-value { fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-public7599 .kv-step svg .kv-public7599-tick { font-size:13px; fill:var(--kv-muted); font-family:var(--latin,Arial,sans-serif); }
.kv-public7599 .kv-step svg .kv-public7599-small { font-size:13px; fill:var(--kv-muted); }
.kv-public7599 .kv-step svg .kv-public7599-boxtext { font-size:14px; fill:var(--kv-ink); stroke:none; }
.kv-public7599 .kv-step svg .kv-public7599-exit { font-size:14px; fill:var(--kv-gold); }
.kv-public7599-track { fill:#eef3f1; stroke:#d9e5e0; }
.kv-public7599-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-public7599-bar-alt { fill:#e2d4b8; stroke:#9c845d; }
.kv-public7599-dot { fill:#0d4d5e; stroke:#fff; stroke-width:1.5; }
.kv-public7599-open { fill:#fff; stroke:#0d4d5e; stroke-width:2; }
.kv-public7599-guide { stroke:#b8c9c6; stroke-dasharray:3 4; }
.kv-public7599-box { fill:#f7faf8; stroke:#9fbcb6; }
.kv-public7599-box-hot { fill:#e2d4b8; stroke:#826b43; stroke-width:2; }
.kv-public7599-dash { fill:none; stroke:#9c845d; stroke-width:1.4; stroke-dasharray:5 4; }
.kv-public7599-excluded { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-public7599-doc { fill:#f7faf8; stroke:#688f96; }
.kv-public7599-cross { stroke:#9c845d; stroke-width:2.4; }
.kv-public7599-check { stroke:#0d4d5e; stroke-width:2.4; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-public7599-grow { transform-box:fill-box; transform-origin:left center; animation:kv-public7599-grow-x .9s .25s both; }
  .kv-playing .kv-step:nth-child(2) .kv-public7599-grow { animation-delay:.9s; }
  .kv-playing .kv-step:nth-child(3) .kv-public7599-grow { animation-delay:1.55s; }
  .kv-playing .kv-step:nth-child(4) .kv-public7599-grow { animation-delay:2.2s; }
  @keyframes kv-public7599-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 高流量文章：holding */
/* 都更分回房地合一稅持有期間圖解（kv-holding-）：沿用 kv- 配色與動畫，只補卡片排版與 SVG 元件。 */
/* 卡片最小 280px：SVG viewBox 寬 260，小字 14 單位；最窄卡片內 SVG 約 232px 時約 12.5px。 */
.kv-visual .kv-holding-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kv-visual .kv-holding-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-visual .kv-holding-grid .kv-step svg.kv-holding-svg { height:auto; max-width:340px; margin:14px auto; }
.kv-visual .kv-holding-grid svg text { font-size:15px; fill:#365f68; }
.kv-visual .kv-holding-grid svg .kv-holding-small { font-size:14px; }
.kv-visual .kv-holding-grid svg .kv-holding-value { font-size:16px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-visual .kv-holding-grid svg .kv-holding-muted { fill:#8a9c9f; }
.kv-visual .kv-emphasis svg .kv-holding-value { fill:var(--kv-gold); }
.kv-holding-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-holding-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-holding-ghost { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-holding-band { fill:#fff; fill-opacity:.45; stroke:#9c845d; stroke-dasharray:3 3; }
.kv-holding-dash { stroke:#9c845d; stroke-width:1.2; stroke-dasharray:3 3; }
.kv-holding-dot { fill:#826b43; stroke:#fff; stroke-width:1.5; }

/* 高流量文章：rvj */
/* 權利變換與協議合建圖解（kv-rvj-）：沿用 knowledge-visuals.css 色票與動畫，只補直條與門檻刻度。 */
/* SVG viewBox 寬 240、字 13～15 單位；四欄最窄卡片約 230px 時約 12.5px，手機單欄放大。 */
.kv-step svg.kv-rvj-svg { height:auto; max-width:300px; margin:16px auto; }
.kv-step svg.kv-rvj-svg text { font-size:14px; fill:#365f68; }
.kv-step svg.kv-rvj-svg .kv-rvj-small { font-size:13px; fill:var(--kv-muted); }
.kv-step svg.kv-rvj-svg .kv-rvj-value { font-size:16px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-rvj-rc { fill:#bfd4d3; stroke:#688f96; }
.kv-rvj-jc { fill:#e1ece8; stroke:#4f7f86; stroke-dasharray:6 3; }
.kv-rvj-cb { fill:#e2d4b8; stroke:#9c845d; }
.kv-rvj-pre { fill:#f3f7f5; stroke:#9fbcb6; }
.kv-rvj-mark { fill:#d9c49d; stroke:#826b43; stroke-width:1.5; }
.kv-rvj-wrong { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-rvj-person { fill:#e1ece8; stroke:#688f96; }
.kv-rvj-track { fill:#f3f7f5; stroke:#bdcdca; }
.kv-rvj-zone { fill:#bfd4d3; stroke:#688f96; }
.kv-rvj-limit { stroke:#9c845d; stroke-width:1.5; stroke-dasharray:4 3; }
.kv-topic-caption strong { font-weight:500; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-rvj-zone.kv-grow { transform-origin:left center; animation-name:kv-rvj-widen; }
  @keyframes kv-rvj-widen { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 傾斜率與非工程性補償率關係圖 */
.kv-tilt-pair { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.kv-step svg.kv-tilt-chart { width:100%; height:auto; max-width:520px; margin:14px auto; display:block; }
.kv-tilt-chart text { font-size:11px; fill:#365f68; }
.kv-tilt-chart .kv-tilt-val { font-size:11.5px; fill:#0d4d5e; font-family:var(--latin,Arial,sans-serif); paint-order:stroke; stroke:#fff; stroke-width:3px; }
.kv-tilt-chart .kv-tilt-val-ntpc { fill:#826b43; }
.kv-tilt-zone { fill:#f3ede1; }
.kv-tilt-grid { stroke:#dbe6e3; stroke-width:.8; }
.kv-tilt-curve { fill:none; stroke:#0d4d5e; stroke-width:2.4; }
.kv-tilt-curve-ntpc { fill:none; stroke:#b08a4e; stroke-width:2.4; stroke-dasharray:6 4; }
.kv-tilt-curve-dot { fill:#0d4d5e; }
.kv-tilt-curve-ntpc-dot { fill:#b08a4e; }
.kv-tilt-inc { stroke:#b08a4e; stroke-width:3; }

/* 高流量文章第二批：selection */
/* 選配與找補圖解（kv-selection-）：沿用 kv- 配色與動畫，只補卡片排版、SVG 元件與天平傾斜動畫。 */
/* 卡片最小 280px：SVG viewBox 寬 260，最小字 14 單位；最窄卡片內 SVG 約 232px 時約 12.5px。 */
.kv-visual .kv-selection-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kv-visual .kv-selection-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-visual .kv-selection-grid .kv-step svg.kv-selection-svg { height:auto; max-width:340px; margin:14px auto; }
.kv-visual .kv-selection-grid svg text { font-size:15px; fill:#365f68; }
.kv-visual .kv-selection-grid svg .kv-selection-small { font-size:14px; fill:var(--kv-muted); }
.kv-visual .kv-selection-grid svg .kv-selection-value { font-size:16px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-visual .kv-selection-grid svg .kv-selection-gold { font-size:15px; fill:var(--kv-gold); }
.kv-visual .kv-selection-grid svg .kv-selection-boxtext { font-size:14px; fill:var(--kv-ink); }
.kv-visual .kv-selection-grid svg .kv-selection-nodetext { font-size:14px; fill:#fff; font-family:var(--latin,Arial,sans-serif); }
.kv-visual .kv-emphasis svg .kv-selection-value { fill:var(--kv-gold); }
.kv-selection-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-selection-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-selection-burden { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-selection-node { fill:#0d4d5e; stroke:#fff; stroke-width:1.5; }
.kv-selection-dash { fill:none; stroke:#9c845d; stroke-width:1.4; stroke-dasharray:5 4; }
.kv-selection-limit { stroke:#0d4d5e; stroke-width:2.4; }
.kv-selection-box { fill:#f7faf8; stroke:#9fbcb6; }
.kv-selection-box-hot { fill:#fff; stroke:#826b43; stroke-width:2; }
.kv-selection-box-gold { fill:#e2d4b8; stroke:#826b43; }
.kv-selection-excluded { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-selection-beam { stroke:#0d4d5e; stroke-width:3; }
.kv-selection-stand { stroke:#688f96; stroke-width:2; }
.kv-selection-pan { fill:#e1ece8; stroke:#688f96; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-selection-grow { transform-box:fill-box; transform-origin:left center; animation:kv-selection-grow-x .9s .25s both; }
  .kv-playing .kv-step:nth-child(2) .kv-selection-grow { animation-delay:.9s; }
  .kv-playing .kv-step:nth-child(3) .kv-selection-grow { animation-delay:1.55s; }
  .kv-playing .kv-selection-tilt { transform-box:view-box; transform-origin:130px 62px; animation:kv-selection-tilt 1.1s .9s both; }
  .kv-playing .kv-step:nth-child(3) .kv-selection-tilt { animation-delay:1.55s; }
  .kv-playing .kv-selection-hang { animation:kv-selection-hang 1.1s .9s both; }
  .kv-playing .kv-step:nth-child(3) .kv-selection-hang { animation-delay:1.55s; }
  @keyframes kv-selection-hang { from { transform:translateY(var(--kv-selection-dy)); } to { transform:translateY(0); } }
  @keyframes kv-selection-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes kv-selection-tilt { from { transform:rotate(var(--kv-selection-tilt)); } to { transform:rotate(0deg); } }
}

/* 高流量文章第二批：stages */
/* 都市更新階段篇圖解（kv-stages-）：沿用 knowledge-visuals.css 的配色與動畫，只補本篇元件。 */
/* 卡片最小 270px：SVG viewBox 寬 240，文字 13～15 單位，最窄約 12px 以上，手機單欄約 17px。 */
.kv-stages-grid { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.kv-stages-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-stages .kv-step svg.kv-stages-svg { height:auto; max-width:320px; margin:14px auto; }
.kv-stages .kv-step svg text { font-size:15px; fill:#365f68; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.kv-stages .kv-step svg .kv-stages-value { fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-stages .kv-step svg .kv-stages-tick { font-size:13px; fill:var(--kv-muted); font-family:var(--latin,Arial,sans-serif); }
.kv-stages .kv-step svg .kv-stages-small { font-size:13px; fill:var(--kv-muted); }
.kv-stages .kv-step svg .kv-stages-muted { fill:var(--kv-muted); }
.kv-stages .kv-step svg .kv-stages-gold { fill:var(--kv-gold); }
.kv-stages .kv-step svg .kv-stages-here { font-size:13px; fill:var(--kv-ink); font-weight:500; }
.kv-stages .kv-step svg .kv-stages-chiptext { font-size:14px; fill:var(--kv-ink); stroke:none; }
.kv-stages .kv-step svg .kv-stages-resulttext { font-size:14px; fill:var(--kv-ink); stroke:none; font-family:var(--latin,Arial,sans-serif); }
.kv-stages-track { stroke:#d9e5e0; stroke-width:3; }
.kv-stages-done { stroke:#688f96; stroke-width:3; fill:none; }
.kv-stages-node { fill:#fff; stroke:#9fbcb6; stroke-width:1.5; }
.kv-stages-node-on { fill:#0d4d5e; stroke:#fff; stroke-width:1.5; }
.kv-stages-ring { fill:none; stroke:#0d4d5e; stroke-width:1.5; }
.kv-stages-chip { fill:#e1ece8; stroke:#9fbcb6; }
.kv-stages-bg { fill:#eef3f1; stroke:#d9e5e0; }
.kv-stages-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-stages-bar-alt { fill:#e2d4b8; stroke:#9c845d; }
.kv-stages-open { fill:#fff; stroke:#0d4d5e; stroke-width:2; }
.kv-stages-guide { stroke:#b8c9c6; stroke-dasharray:3 4; }
.kv-stages-q { fill:#f7faf8; stroke:#9fbcb6; }
.kv-stages-result { fill:#e1ece8; stroke:#0d4d5e; stroke-width:1.5; }
.kv-stages-row { fill:#f7faf8; stroke:#d9e5e0; }
.kv-stages-row-off { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-stages-check { fill:none; stroke:#0d4d5e; stroke-width:2.4; }
.kv-stages-cross { stroke:#9c845d; stroke-width:2.4; }
.kv-stages-crack { fill:none; stroke:#9c845d; stroke-width:2; }
.kv-stages-quake { fill:none; stroke:#9c845d; stroke-width:1.6; }
.kv-stages-lane { stroke:#9c845d; stroke-width:1.4; stroke-dasharray:4 3; }
.kv-stages-rail { fill:none; stroke:#0d4d5e; stroke-width:1.6; }
.kv-stages-gridline { fill:none; stroke:#9fbcb6; stroke-width:1; }
.kv-stages-lens { fill:none; stroke:#0d4d5e; stroke-width:2; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-stages-grow { transform-box:fill-box; transform-origin:left center; animation:kv-stages-grow-x .9s .25s both; }
  .kv-playing .kv-stages-grid .kv-step:nth-child(4) .kv-stages-grow { transform-origin:right center; animation-delay:2.2s; }
  @keyframes kv-stages-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 高流量文章第二批：rooftop */
/* 頂樓加蓋圖解（kv-rooftop-）：沿用 kv- 配色與動畫，只補卡片排版、剖面與文件元件。 */
/* 卡片最小 250px：SVG viewBox 寬 260，小字 14 單位；最窄卡片內 SVG 約 202px 時約 10.9px，故桌面四欄只在容器 ≥1000px 出現（每卡約 250px 以上）。 */
.kv-visual .kv-grid.kv-rooftop-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.kv-visual .kv-grid.kv-rooftop-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-visual .kv-rooftop-grid .kv-step svg.kv-rooftop-svg { height:auto; max-width:340px; margin:14px auto; }
.kv-visual .kv-rooftop-grid svg text { font-size:15px; fill:#365f68; }
.kv-visual .kv-rooftop-grid svg .kv-rooftop-small { font-size:14px; }
.kv-visual .kv-rooftop-grid svg .kv-rooftop-value { font-size:16px; fill:var(--kv-ink); font-family:var(--latin,Arial,sans-serif); }
.kv-visual .kv-rooftop-grid svg .kv-rooftop-gold { fill:var(--kv-gold); }
.kv-visual .kv-emphasis svg .kv-rooftop-value { fill:var(--kv-gold); }
.kv-rooftop-legal { fill:#bfd4d3; stroke:#688f96; }
.kv-rooftop-other { fill:#eef3f2; stroke:#a9c0c0; }
.kv-rooftop-add { fill:#efe4cf; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-rooftop-add-solid { fill:#d9c49d; stroke:#9c845d; }
.kv-rooftop-ghost { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-rooftop-line { stroke:#9c845d; stroke-width:1.2; stroke-dasharray:3 3; }
.kv-rooftop-doc { fill:#f7faf8; }
.kv-rooftop-person { fill:#bfd4d3; }
.kv-rooftop-facts { margin:14px 0 0; border-top:1px solid var(--kv-line); padding-top:10px; font-size:14px; line-height:1.7; }
.kv-rooftop-facts div { display:grid; grid-template-columns:7.5em 1fr; gap:8px; padding:4px 0; }
.kv-rooftop-facts dt { color:var(--kv-muted); }
.kv-rooftop-facts dd { margin:0; color:var(--kv-ink); }
@container(max-width:380px) { .kv-rooftop-facts div { grid-template-columns:1fr; gap:0; } }

/* 高流量文章第二批：share */
/* 土地持分與分配圖解（kv-share-）：沿用 kv- 配色與動畫，只補卡片排版、SVG 元件與第5、6格動畫延遲。 */
/* 卡片最小 280px：SVG viewBox 寬 260，小字 14 單位；最窄卡片內 SVG 約 232px 時約 12.5px。 */
.kv-visual .kv-share-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kv-visual .kv-share-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-visual .kv-share-grid .kv-step svg.kv-share-svg { height:auto; max-width:340px; margin:14px auto; }
.kv-visual .kv-share-grid svg text { font-size:15px; fill:#365f68; }
.kv-visual .kv-share-grid svg .kv-share-small { font-size:14px; }
.kv-visual .kv-share-grid svg .kv-share-value { font-size:17px; fill:var(--kv-ink); }
.kv-visual .kv-share-grid svg .kv-share-mark { font-size:14px; fill:var(--kv-ink); }
.kv-visual .kv-emphasis svg .kv-share-value { fill:var(--kv-gold); }
.kv-share-tag { align-self:flex-start; margin-top:8px; padding:2px 8px; font-size:12px; letter-spacing:.08em; color:#826b43; border:1px solid #d9c49d; }
.kv-share-land { fill:#e0ebe5; stroke:#afc9bc; }
.kv-share-tick { stroke:#fff; stroke-width:1.2; }
.kv-share-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-share-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-share-ghost { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-share-dash { stroke:#9c845d; stroke-width:1.2; stroke-dasharray:3 3; }
.kv-share-unit { fill:#d9c49d; stroke:#9c845d; }
.kv-share-dot { fill:#fff; stroke:#9c845d; stroke-width:1.5; }
.kv-share-box { fill:#f3f7f5; stroke:#afc9bc; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-share-hbar.kv-grow { transform-origin:left center; animation-name:kv-share-growx; }
  .kv-playing .kv-share-grid .kv-step:nth-child(5) { animation-delay:2.6s; }
  .kv-playing .kv-share-grid .kv-step:nth-child(6) { animation-delay:3.25s; }
  .kv-playing .kv-share-grid .kv-step:nth-child(5) .kv-grow { animation-delay:2.85s; }
  .kv-playing .kv-share-grid .kv-step:nth-child(6) .kv-grow { animation-delay:3.5s; }
  @keyframes kv-share-growx { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 高流量文章第二批：oneping */
/* 一坪換一坪圖解（kv-oneping-）：沿用 kv- 配色與動畫，只補三欄卡片與 SVG 元件。 */
/* SVG viewBox 寬 200、文字 14 單位；文章 760px 三欄時 SVG 約 205px，文字約 14px；最窄三欄（容器 681px）約 12.5px。 */
.kv-oneping-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-oneping-grid .kv-step { display:flex; flex-direction:column; }
.kv-oneping .kv-step svg.kv-oneping-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-oneping .kv-step svg.kv-oneping-art text { font-size:14px; fill:#365f68; }
.kv-oneping .kv-step svg .kv-oneping-value { fill:var(--kv-ink); font-weight:500; }
.kv-oneping .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-oneping .kv-ratio small { font-size:15px; }
.kv-oneping .kv-step h3 { font-size:20px; }
.kv-oneping-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
.kv-oneping-indoor { fill:#bfd4d3; stroke:#688f96; }
.kv-oneping-balcony { fill:#f3f7f5; stroke:#688f96; }
.kv-oneping-common { fill:#e2d4b8; stroke:#9c845d; }
.kv-oneping-old { fill:#e1ece8; stroke:#8faeaf; }
.kv-oneping-new { fill:#bfd4d3; stroke:#688f96; }
.kv-oneping-total { fill:#e1ece8; stroke:#8faeaf; }
.kv-oneping-remainder { fill:#cfe0da; stroke:#688f96; }
.kv-oneping-burden { fill:#e2d4b8; stroke:#9c845d; }
.kv-oneping-allocated { fill:#b49a64; stroke:#826b43; }
.kv-oneping-home { fill:#cfe0da; stroke:#688f96; }
.kv-oneping-parking { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; stroke-width:1.4; }
.kv-oneping-rule { stroke:#365f68; stroke-width:1.2; }
.kv-oneping-box { fill:#f3f7f5; stroke:#afc9bc; }
.kv-oneping-box-alt { fill:#f4ead6; stroke:#9c845d; }
.kv-oneping .kv-step svg .kv-oneping-up { fill:#0d4d5e; font-weight:600; }
.kv-oneping .kv-step svg .kv-oneping-down { fill:#826b43; font-weight:600; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-oneping-hbar.kv-grow { transform-origin:left center; animation-name:kv-oneping-grow-x; }
  @keyframes kv-oneping-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@container(max-width:680px) {
  .kv-oneping-grid { grid-template-columns:1fr; }
  .kv-oneping-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-oneping-grid { grid-template-columns:1fr; }
  .kv-oneping-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}

/* 高流量文章第三批：rental */
/* 租金毛淨投報率圖解（kv-rental-）：沿用 kv- 配色與動畫，三欄卡片；SVG viewBox 寬 200、文字 14 單位。 */
.kv-rental-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-rental-grid .kv-step { display:flex; flex-direction:column; }
.kv-rental .kv-step svg.kv-rental-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-rental .kv-step svg.kv-rental-art text { font-size:14px; fill:#365f68; }
.kv-rental .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-rental .kv-ratio small { font-size:15px; }
.kv-rental .kv-step h3 { font-size:20px; }
.kv-rental-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-rental-hbar.kv-grow { transform-origin:left center; animation-name:kv-rental-grow-x; }
  @keyframes kv-rental-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@container(max-width:680px) {
  .kv-rental-grid { grid-template-columns:1fr; }
  .kv-rental-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-rental-grid { grid-template-columns:1fr; }
  .kv-rental-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
.kv-rental .kv-step svg .kv-rental-value { fill:var(--kv-ink); font-weight:500; }
.kv-rental .kv-step svg .kv-rental-strong { fill:var(--kv-ink); font-weight:600; }
.kv-rental-gross { fill:#e1ece8; stroke:#8faeaf; }
.kv-rental-mid { fill:#cfe0da; stroke:#688f96; }
.kv-rental-net { fill:#e2d4b8; stroke:#9c845d; }
.kv-rental-cut { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; stroke-width:1.4; }
.kv-rental-guide { fill:none; stroke:#9c845d; stroke-dasharray:2 3; }
.kv-rental-pending { fill:#fff; stroke:#9c845d; stroke-dasharray:5 4; stroke-width:1.2; }
.kv-rental-box { fill:#f3f7f5; stroke:#afc9bc; }
.kv-rental-box-out { fill:#fbf6ec; stroke:#9c845d; stroke-dasharray:5 4; }
.kv-rental .kv-step svg .kv-rental-mark { fill:#0d4d5e; }
.kv-rental .kv-step svg .kv-rental-no { fill:#826b43; font-weight:600; }

/* 高流量文章第三批：landvalue */
/* 四種地價圖解（kv-landvalue-）：沿用 kv- 配色與動畫，三欄卡片；SVG viewBox 寬 200、文字 14 單位。 */
.kv-landvalue-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-landvalue-grid .kv-step { display:flex; flex-direction:column; }
.kv-landvalue .kv-step svg.kv-landvalue-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-landvalue .kv-step svg.kv-landvalue-art text { font-size:14px; fill:#365f68; }
.kv-landvalue .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-landvalue .kv-ratio small { font-size:15px; }
.kv-landvalue .kv-step h3 { font-size:20px; }
.kv-landvalue-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-landvalue-hbar.kv-grow { transform-origin:left center; animation-name:kv-landvalue-grow-x; }
  @keyframes kv-landvalue-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@container(max-width:680px) {
  .kv-landvalue-grid { grid-template-columns:1fr; }
  .kv-landvalue-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-landvalue-grid { grid-template-columns:1fr; }
  .kv-landvalue-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
.kv-landvalue .kv-step svg .kv-landvalue-name { fill:var(--kv-ink); font-weight:600; }
.kv-landvalue .kv-step svg .kv-landvalue-value { fill:var(--kv-ink); font-weight:600; }
.kv-landvalue .kv-step svg .kv-landvalue-group { fill:#826b43; font-weight:500; }
.kv-landvalue .kv-step svg .kv-landvalue-neq { fill:#826b43; font-size:20px; font-weight:600; }
.kv-landvalue .kv-step svg .kv-landvalue-no { fill:#826b43; font-weight:600; }
.kv-landvalue-sys { fill:#bfd4d3; stroke:#688f96; }
.kv-landvalue-mkt { fill:#e2d4b8; stroke:#9c845d; }
.kv-landvalue-divider { stroke:#ccdcd8; stroke-dasharray:4 3; }
.kv-landvalue-land { fill:#e1ece8; stroke:#688f96; }
.kv-landvalue-check { fill:#fff; stroke:#688f96; }
.kv-landvalue-in { fill:#cfe0da; stroke:#688f96; }
.kv-landvalue-out { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; stroke-width:1.2; }
.kv-landvalue-tick { stroke:#365f68; stroke-width:1.2; }
.kv-landvalue-dot { fill:#b49a64; stroke:#826b43; }
.kv-landvalue-box { fill:#fbf6ec; stroke:#9c845d; }

/* 高流量文章第三批：lvrspecial */
/* 實登特殊交易圖解（kv-lvrspecial-）：沿用 kv- 配色與動畫，三欄卡片；SVG viewBox 寬 200、文字 14 單位。 */
.kv-lvrspecial-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-lvrspecial-grid .kv-step { display:flex; flex-direction:column; }
.kv-lvrspecial .kv-step svg.kv-lvrspecial-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-lvrspecial .kv-step svg.kv-lvrspecial-art text { font-size:14px; fill:#365f68; }
.kv-lvrspecial .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-lvrspecial .kv-ratio small { font-size:15px; }
.kv-lvrspecial .kv-step h3 { font-size:20px; }
.kv-lvrspecial-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-lvrspecial-hbar.kv-grow { transform-origin:left center; animation-name:kv-lvrspecial-grow-x; }
  @keyframes kv-lvrspecial-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@container(max-width:680px) {
  .kv-lvrspecial-grid { grid-template-columns:1fr; }
  .kv-lvrspecial-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-lvrspecial-grid { grid-template-columns:1fr; }
  .kv-lvrspecial-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
.kv-lvrspecial .kv-step svg .kv-lvrspecial-strong { fill:var(--kv-ink); font-weight:600; }
.kv-lvrspecial .kv-step svg .kv-lvrspecial-value { fill:var(--kv-ink); font-weight:500; }
.kv-lvrspecial-box { fill:#f3f7f5; stroke:#afc9bc; }
.kv-lvrspecial-ask { fill:#f4ead6; stroke:#9c845d; }
.kv-lvrspecial-deal { fill:#cfe0da; stroke:#688f96; }
.kv-lvrspecial-house { fill:#fff; stroke:#688f96; stroke-dasharray:5 3; stroke-width:1.2; }
.kv-lvrspecial-flow { fill:none; stroke:#688f96; stroke-width:1.2; }
.kv-lvrspecial-out { stroke-width:1.2; }
.kv-lvrspecial-yes { fill:#e1ece8; stroke:#688f96; }
.kv-lvrspecial-no { fill:#fbf6ec; stroke:#9c845d; stroke-dasharray:5 4; }
.kv-lvrspecial-peer { fill:#cfe0da; stroke:#688f96; }
.kv-lvrspecial-subject { fill:#e2d4b8; stroke:#9c845d; }
.kv-lvrspecial-gap { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; stroke-width:1.4; }
.kv-lvrspecial-divider { stroke:#ccdcd8; stroke-dasharray:4 3; }
.kv-lvrspecial-check { fill:#fff; stroke:#688f96; }

/* 第四批：bonus */
/* 容積獎勵上限圖解（kv-bonus-）：沿用 kv- 配色與動畫，只補三欄卡片與 SVG 元件。 */
/* SVG viewBox 寬 200、文字 14 單位；文章 760px 三欄時 SVG 約 205px，文字約 14px；手機單欄放大。 */
.kv-bonus-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-bonus-grid .kv-step { display:flex; flex-direction:column; }
.kv-bonus .kv-step svg.kv-bonus-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-bonus .kv-step svg.kv-bonus-art text { font-size:14px; fill:#365f68; }
.kv-bonus .kv-step svg .kv-bonus-strong { fill:var(--kv-ink); font-weight:600; }
.kv-bonus .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-bonus .kv-ratio small { font-size:15px; }
.kv-bonus .kv-step h3 { font-size:20px; }
.kv-bonus-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
.kv-bonus-base { fill:#e1ece8; stroke:#688f96; }
.kv-bonus-add { fill:#e2d4b8; stroke:#9c845d; }
.kv-bonus-cap { stroke:#826b43; stroke-width:1.6; stroke-dasharray:6 4; }
.kv-bonus-ref { stroke:#688f96; stroke-width:1.2; stroke-dasharray:3 3; }
.kv-bonus-gate { fill:#f3f7f5; stroke:#afc9bc; }
.kv-bonus-band { fill:#f4ead6; stroke:none; }
.kv-bonus-line-plus { stroke:#0d4d5e; stroke-width:2.4; }
.kv-bonus-line-times { stroke:#9c845d; stroke-width:2.4; stroke-dasharray:7 4; }
.kv-bonus-dot { fill:#fff; stroke:#0d4d5e; stroke-width:2; }
.kv-bonus-plus { fill:#cfe0da; stroke:#688f96; }
.kv-bonus-times { fill:#e2d4b8; stroke:#9c845d; stroke-width:1.6; }
.kv-bonus-item { fill:#bfd4d3; stroke:#688f96; }
.kv-bonus-item2 { fill:#e1ece8; stroke:#688f96; }
.kv-bonus-level { fill:#cfe0da; stroke:#688f96; }
.kv-bonus-limited { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-bonus-over { fill:#fff; fill-opacity:.6; stroke:#826b43; stroke-width:1.4; stroke-dasharray:4 3; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-step:nth-child(2) .kv-bonus-later { animation-delay:1.7s; }
}
@container(max-width:680px) {
  .kv-bonus-grid { grid-template-columns:1fr; }
  .kv-bonus-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-bonus-grid { grid-template-columns:1fr; }
  .kv-bonus-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}

/* 第四批：tax */
/* 權利變換與協議合建稅負圖解（kv-tax-）：沿用 kv- 配色與動畫，只補卡片排版與 SVG 元件。 */
/* 卡片最小 280px：SVG viewBox 寬 260，小字 13 單位；最窄卡片內 SVG 約 232px 時約 11.6px，實際 390px 手機約 15px。 */
.kv-visual .kv-tax-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kv-visual .kv-tax-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-visual .kv-tax-grid .kv-step svg.kv-tax-svg { height:auto; max-width:340px; margin:14px auto; }
.kv-visual .kv-tax-grid svg text { font-size:15px; fill:#365f68; }
.kv-visual .kv-tax-grid svg .kv-tax-small { font-size:13.5px; }
.kv-visual .kv-tax-grid svg .kv-tax-value { font-size:16px; fill:var(--kv-ink); }
.kv-visual .kv-tax-grid svg .kv-tax-strong { fill:var(--kv-ink); font-weight:600; }
.kv-visual .kv-tax-grid svg .kv-tax-muted { fill:#8a9c9f; }
.kv-visual .kv-emphasis svg .kv-tax-value { fill:var(--kv-gold); }
.kv-tax-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-tax-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-tax-ghost { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-tax-dash { stroke:#9c845d; stroke-width:1.2; stroke-dasharray:3 3; fill:none; }
.kv-tax-rule { stroke:#dfe7e6; stroke-width:1; }
.kv-tax-tag { fill:#eef4f3; stroke:#688f96; }
.kv-tax-tag-joint { fill:#f6efe2; stroke:#9c845d; stroke-dasharray:3 2; }

/* 第四批：shop */
/* 一樓店面參加都更圖解（kv-shop-）：沿用 kv- 配色與動畫，只補卡片排版與 SVG 元件。 */
/* 卡片最小 280px：SVG viewBox 寬 260，小字 14 單位；最窄卡片內 SVG 約 232px 時約 12.5px。 */
.kv-visual .kv-shop-grid { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.kv-visual .kv-shop-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-visual .kv-shop-grid .kv-step svg.kv-shop-svg { height:auto; max-width:340px; margin:14px auto; }
.kv-visual .kv-shop-grid svg text { font-size:15px; fill:#365f68; }
.kv-visual .kv-shop-grid svg .kv-shop-small { font-size:14px; }
.kv-visual .kv-shop-grid svg .kv-shop-value { font-size:17px; fill:var(--kv-ink); }
.kv-visual .kv-shop-grid svg .kv-shop-mark { font-size:14px; fill:var(--kv-ink); }
.kv-visual .kv-emphasis svg .kv-shop-value { fill:var(--kv-gold); }
.kv-shop-tag { align-self:flex-start; margin-top:8px; padding:2px 8px; font-size:12px; letter-spacing:.08em; color:#826b43; border:1px solid #d9c49d; }
.kv-shop-land { fill:#e0ebe5; stroke:#afc9bc; }
.kv-shop-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-shop-gold { fill:#d9c49d; stroke:#9c845d; }
.kv-shop-ghost { fill:#fff; stroke:#9c845d; stroke-dasharray:4 3; }
.kv-shop-dash { stroke:#9c845d; stroke-width:1.2; stroke-dasharray:3 3; }
.kv-shop-box { fill:#f3f7f5; stroke:#afc9bc; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-shop-hbar.kv-grow { transform-origin:left center; animation-name:kv-shop-growx; }
  @keyframes kv-shop-growx { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 第四批：publicprivate */
/* 公辦都更與民間自辦篇圖解（kv-publicprivate-）：沿用 knowledge-visuals.css 的配色與動畫，只補本篇元件。 */
/* 卡片最小 270px：SVG viewBox 寬 240，文字 12～15 單位，縮放後最小約 12px 以上。 */
.kv-publicprivate-grid { grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }
.kv-publicprivate-grid .kv-step { display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--kv-line); }
.kv-publicprivate .kv-step svg.kv-publicprivate-svg { height:auto; max-width:320px; margin:14px auto; }
.kv-publicprivate .kv-step svg text { font-size:15px; fill:#365f68; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.kv-publicprivate .kv-step svg .kv-publicprivate-value { fill:var(--kv-ink); font-weight:500; }
.kv-publicprivate .kv-step svg .kv-publicprivate-tick { font-size:13px; fill:var(--kv-muted); font-family:var(--latin,Arial,sans-serif); }
.kv-publicprivate .kv-step svg .kv-publicprivate-here { font-size:13px; fill:var(--kv-ink); font-weight:500; font-family:var(--latin,Arial,sans-serif); }
.kv-publicprivate .kv-step svg .kv-publicprivate-small { font-size:13px; fill:var(--kv-muted); }
.kv-publicprivate .kv-step svg .kv-publicprivate-rowlabel { font-size:13px; }
.kv-publicprivate .kv-step svg .kv-publicprivate-chiptext { font-size:14px; fill:var(--kv-ink); stroke:none; }
.kv-publicprivate .kv-step svg .kv-publicprivate-boxtext { font-size:14px; fill:var(--kv-ink); stroke:none; }
.kv-publicprivate .kv-step svg .kv-publicprivate-boxsmall { font-size:12.5px; fill:var(--kv-ink); stroke:none; }
.kv-publicprivate-chip { fill:#e1ece8; stroke:#9fbcb6; }
.kv-publicprivate-link { fill:none; stroke:#688f96; stroke-width:1.5; }
.kv-publicprivate-link-dash { fill:none; stroke:#9c845d; stroke-width:1.5; stroke-dasharray:4 3; }
.kv-publicprivate-q { fill:#f7faf8; stroke:#9fbcb6; }
.kv-publicprivate-pub { fill:#e1ece8; stroke:#0d4d5e; stroke-width:1.5; }
.kv-publicprivate-pri { fill:#f6efe2; stroke:#9c845d; stroke-width:1.5; stroke-dasharray:5 3; }
.kv-publicprivate-cell { fill:#f7faf8; stroke:#d9e5e0; }
.kv-publicprivate-cell-on { fill:#bfd4d3; stroke:#0d4d5e; stroke-width:2; }
.kv-publicprivate-check { fill:none; stroke:#0d4d5e; stroke-width:2.6; }
.kv-publicprivate-track { stroke:#d9e5e0; stroke-width:3; }
.kv-publicprivate-done { stroke:#688f96; stroke-width:3; fill:none; }
.kv-publicprivate-node { fill:#fff; stroke:#9fbcb6; stroke-width:1.5; }
.kv-publicprivate-node-on { fill:#0d4d5e; stroke:#fff; stroke-width:1.5; }
.kv-publicprivate-ring { fill:none; stroke:#0d4d5e; stroke-width:1.5; }
.kv-publicprivate-bg { fill:#eef3f1; stroke:#d9e5e0; }
.kv-publicprivate-bar { fill:#bfd4d3; stroke:#688f96; }
.kv-publicprivate-bar-alt { fill:#e2d4b8; stroke:#9c845d; }
.kv-publicprivate-guide { stroke:#0d4d5e; stroke-width:1.5; stroke-dasharray:3 3; }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-publicprivate-grow { transform-box:fill-box; transform-origin:left center; animation:kv-publicprivate-grow-x .9s .25s both; }
  @keyframes kv-publicprivate-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}

/* 第四批：lease */
/* 租約與不動產役權圖解（kv-lease-）：沿用 kv- 配色與動畫；SVG viewBox 寬 200、文字 14 單位。 */
.kv-lease-grid.kv-lease-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.kv-lease-grid.kv-lease-cols-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kv-lease-grid .kv-step { display:flex; flex-direction:column; }
.kv-lease .kv-step svg.kv-lease-art { width:100%; max-width:320px; height:auto; margin:14px auto; }
.kv-lease .kv-step svg.kv-lease-art text { font-size:14px; fill:#365f68; }
.kv-lease .kv-ratio { font-size:30px; margin:2px 0 4px; }
.kv-lease .kv-ratio small { font-size:15px; }
.kv-lease .kv-step h3 { font-size:20px; }
.kv-lease-caption { font-size:15px; line-height:1.8; margin-top:auto; max-width:100%; }
.kv-lease-cols-4 .kv-step:nth-child(3) { border-left:0; }
.kv-lease-cols-4 .kv-step:nth-child(n+3) { border-top:1px solid var(--kv-line); }
@media(prefers-reduced-motion:no-preference) {
  .kv-playing .kv-lease-grow { transform-box:fill-box; transform-origin:left center; animation:kv-lease-grow-x .9s .25s both; }
  .kv-playing .kv-step:nth-child(2) .kv-lease-grow { animation-delay:.9s; }
  .kv-playing .kv-step:nth-child(3) .kv-lease-grow { animation-delay:1.55s; }
  @keyframes kv-lease-grow-x { from { transform:scaleX(0); } to { transform:scaleX(1); } }
}
@container(max-width:680px) {
  .kv-lease-grid.kv-lease-cols-3, .kv-lease-grid.kv-lease-cols-4 { grid-template-columns:1fr; }
  .kv-lease-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
@media(max-width:700px) {
  .kv-lease-grid.kv-lease-cols-3, .kv-lease-grid.kv-lease-cols-4 { grid-template-columns:1fr; }
  .kv-lease-grid .kv-step+.kv-step { border-left:0; border-top:1px solid var(--kv-line); }
}
.kv-lease .kv-step svg .kv-lease-strong { fill:var(--kv-ink); font-weight:600; }
.kv-lease .kv-step svg .kv-lease-label { fill:#0d4d5e; font-weight:600; }
.kv-lease .kv-step svg .kv-lease-muted { fill:#5d7a80; }
.kv-lease .kv-step svg .kv-lease-no { fill:#826b43; font-weight:600; }
.kv-lease .kv-step svg .kv-lease-tick { fill:#5d7a80; }
.kv-lease-lease { fill:#fff; stroke:#8faeaf; stroke-dasharray:4 3; }
.kv-lease-paid { fill:#e2d4b8; stroke:#9c845d; }
.kv-lease-blank { fill:#f6f8f7; stroke:#c7d8d3; stroke-dasharray:4 3; }
.kv-lease-divider { fill:none; stroke:#fff; stroke-width:1.2; }
.kv-lease-lease + .kv-lease-divider { stroke:#c7d8d3; }
.kv-lease-axis { fill:none; stroke:#8faeaf; }
.kv-lease-cap { fill:none; stroke:#0d4d5e; stroke-width:1.6; }
.kv-lease-node { fill:#e1ece8; stroke:#688f96; }
.kv-lease-node-off { fill:#fff; stroke:#9c845d; stroke-dasharray:5 4; }
.kv-lease-arrow { fill:none; stroke:#0d4d5e; stroke-width:1.6; }
.kv-lease-arrow-notice { stroke-dasharray:4 3; }
.kv-lease-box { fill:#f3f7f5; stroke:#afc9bc; }
.kv-lease-box-alt { fill:#fbf6ec; stroke:#9c845d; stroke-dasharray:5 4; }
.kv-lease-parcel { fill:#e1ece8; stroke:#8faeaf; }
.kv-lease-parcel-b { fill:#f3f7f5; }
.kv-lease-road { fill:#ece6da; stroke:#c9b892; }
.kv-lease-easement { fill:none; stroke:#9c845d; stroke-width:2; stroke-dasharray:5 4; }
.kv-lease-cross { fill:#fff; stroke:#9c845d; }