/* 全盛傢俱 demo — SVG 動畫圖解(共用)
   線稿描繪=stroke-dashoffset;依序出現=--d 延遲;進畫面才播、只播一次(diagrams.js 加 .dg-play)。
   不加任何壓暗/遮罩層;prefers-reduced-motion 直接顯示終態。 */
.dg{display:block;width:100%;height:auto;overflow:visible}
.dg text{font-family:var(--sans);fill:var(--text)}
.dg .t-main{font-size:13.5px;font-weight:500;fill:var(--ink)}
.dg .t-sub{font-size:12px;fill:var(--muted)}
.dg .t-br{fill:var(--brass)}
.dg .ln{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dg .ln.br,.dg .br{stroke:var(--brass)}
.dg .ring{fill:#fff;stroke:var(--line);stroke-width:1.2}
.dg .num{fill:var(--brass)}
.dg .num-t{font-family:var(--serif);font-size:10.5px;font-weight:600;fill:#fff}
.dg .wfill{fill:#fff}
.dg .bfill{fill:var(--brass)}

/* 動畫初始態 → .dg-play 終態 */
.dg [data-draw]{stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);transition:stroke-dashoffset var(--t,.9s) var(--ease) var(--d,0s)}
.dg [data-fade]{opacity:0;transform:translateY(6px);transition:opacity var(--t,.5s) var(--ease) var(--d,0s),transform var(--t,.5s) var(--ease) var(--d,0s)}
.dg [data-pop]{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.55);transition:opacity var(--t,.45s) var(--ease) var(--d,0s),transform var(--t,.45s) cubic-bezier(.3,1.5,.5,1) var(--d,0s)}
.dg [data-move]{transform:translateX(var(--from,0px));transition:transform var(--t,2s) cubic-bezier(.45,0,.25,1) var(--d,0s)}
.dg.dg-prep [data-draw]{transition:none}
.dg.dg-play [data-draw]{stroke-dashoffset:0}
.dg.dg-play [data-fade],.dg.dg-play [data-pop]{opacity:1;transform:none}
.dg.dg-play [data-move]{transform:none}
.dg.dg-done [data-draw]{stroke-dasharray:none}
@media (prefers-reduced-motion:reduce){
  .dg [data-draw]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .dg [data-fade],.dg [data-pop],.dg [data-move]{opacity:1!important;transform:none!important}
}

/* 流程圖外框 */
.dg-fig{margin:0}
.dg-fig figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* 量牆寬俯視圖(互動) */
.dg-fit{max-width:460px;margin:0 auto}
.dg-fit .wt{font-size:13px;font-weight:500;fill:var(--ink);transition:fill .35s}
.dg-fit .dim{fill:none;stroke:var(--ink);stroke-width:1}
.dg-fit .wallr{fill:url(#dgHatch);stroke:var(--ink);stroke-width:1.2}
.dg-fit .sf{fill:#DDE2D7;stroke:var(--ink);stroke-width:1.3;transition:fill .35s,stroke .35s}
.dg-fit .cush{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.45}
.dg-fit .sl{font-size:12.5px;fill:var(--ink)}
.dg-fit .gap{fill:none;stroke:var(--brass);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.dg-fit .acc{font-size:13px;font-weight:500;fill:var(--brass);transition:fill .35s}
.dg-fit .guide{fill:none;stroke:#B9B4A6;stroke-width:1;stroke-dasharray:2 3}
.dg-fit .over{fill:#B4473A;fill-opacity:0;transition:fill-opacity .35s}
.dg-fit[data-state=tight] .sf{fill:#F1E6CF}
.dg-fit[data-state=tight] .gap{stroke:#A8681E}
.dg-fit[data-state=tight] .acc{fill:#A8681E}
.dg-fit[data-state=bad] .sf{fill:#F7E3DE;stroke:#B4473A}
.dg-fit[data-state=bad] .sl,.dg-fit[data-state=bad] .acc,.dg-fit[data-state=bad] .wt{fill:#B4473A}
.dg-fit[data-state=bad] .guide{stroke:#B4473A;stroke-width:1.2}
.dg-fit[data-state=bad] .over{fill-opacity:.16}

/* 牆寬篩選小圖示(category) */
.dg-wallhint{display:flex;gap:14px;align-items:center;margin:-12px 0 16px;font-size:14px;color:var(--muted);line-height:1.55}
.dg-wallhint[hidden]{display:none}
.dg-wallhint svg{width:120px;flex:none}
.dg-wallhint b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.dg-wallhint .wallr{fill:url(#dgHatch2);stroke:var(--ink);stroke-width:1}
.dg-wallhint .sf{fill:#DDE2D7;stroke:var(--ink);stroke-width:1.2}
.dg-wallhint .gap{fill:none;stroke:var(--brass);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.dg-wallhint .acc{font-size:11px;font-weight:500;fill:var(--brass)}
@media (max-width:420px){.dg-wallhint{gap:12px;font-size:13.5px}.dg-wallhint svg{width:104px}}