/* 商業模式圖解副網頁：沿用主站 style.css 的色彩變數與元件，只補這個區塊需要的部分。
   色彩原則：品牌可可色（--accent）只用在主要行動與強調；角色、語意色取自同一組大地色系，
   每個色票都已算過對比（文字 ≥ 4.5:1、圖形 ≥ 3:1），且重要意義不只靠顏色（加符號與文字）。 */
:root{--role-獲客:#8a6410;--role-變現:#703f3e;--role-留存:#3f6f4f;--role-資金:#6d4c7d;--role-營運:#3b6a85;--role-方法:#5f6b65;--ok:#2f6b55;--ok-bg:#e8f0eb;--bad:#9a3b2f;--bad-bg:#f6e6e3;--pro:#6d4c7d;
--cell-good-bg:#2f6b55;--cell-good-fg:#ffffff;--cell-mid-bg:#d4e2d8;--cell-mid-fg:#273630;--cell-over-bg:#e6e8e2;--cell-over-fg:#273630;--cell-bad-bg:#8b2f24;--cell-bad-fg:#ffffff;--cell-pro-bg:#6d4c7d;--cell-pro-fg:#ffffff}
@media(prefers-color-scheme:dark){:root{--role-獲客:#e3c066;--role-變現:#edb6ae;--role-留存:#9fd0ac;--role-資金:#cdb4e0;--role-營運:#9ec6df;--role-方法:#b9c5bd;--ok:#9fd0ac;--ok-bg:#243a2f;--bad:#f0b3a8;--bad-bg:#3c2a27;--pro:#cdb4e0;
--cell-good-bg:#9fd0ac;--cell-good-fg:#1d2823;--cell-mid-bg:#3f5649;--cell-mid-fg:#edf0e9;--cell-over-bg:#36423b;--cell-over-fg:#edf0e9;--cell-bad-bg:#f0b3a8;--cell-bad-fg:#1d2823;--cell-pro-bg:#cdb4e0;--cell-pro-fg:#1d2823}}
.bm-role{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--ink)}.bm-role::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--role-color,var(--accent))}
[data-role="獲客"]{--role-color:var(--role-獲客)}[data-role="變現"]{--role-color:var(--role-變現)}[data-role="留存"]{--role-color:var(--role-留存)}[data-role="資金"]{--role-color:var(--role-資金)}[data-role="營運"]{--role-color:var(--role-營運)}[data-role="方法"]{--role-color:var(--role-方法)}
.bm-role-card{border-top:4px solid var(--role-color,var(--accent))}.bm-role-card h3{display:flex;align-items:center;gap:10px}.bm-role-card ul{list-style:none;margin:6px 0 0;padding:0}.bm-role-card li a{display:inline-block;padding-block:6px;text-decoration:underline;text-underline-offset:4px}.bm-role-card li a:hover{color:var(--accent)}
/* 快速入口（依問題選模式）：手機不橫向捲動，每個連結都是 44px 高的按鈕 */
.bm-guide{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bm-guide li{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:20px 22px}.bm-guide .bm-q{font-weight:700;color:var(--ink);line-height:1.6;margin:0 0 12px}.bm-guide .bm-links{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.bm-pill{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--control);border-radius:22px;font-size:15px;font-weight:600;color:var(--ink);background:var(--bg);text-decoration:none}.bm-pill:hover{border-color:var(--accent);color:var(--accent)}.bm-pill b{color:var(--muted);font-weight:600;margin-right:6px}
.bm-glance{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bm-glance li{padding:16px 18px;border-radius:12px;background:var(--surface)}.bm-glance small{display:block;font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--accent);margin-bottom:6px}.bm-glance p{margin:0;font-size:15px;line-height:1.75;color:var(--ink)}.bm-glance a{text-decoration:underline;text-underline-offset:4px;font-weight:700}
.bm-video{margin:22px 0 0}.bm-video video{width:100%;height:auto;aspect-ratio:16/9;display:block;border-radius:16px;background:#1f1514}.bm-video figcaption{font-size:13px;color:var(--muted);margin-top:10px}
/* 章節按鈕：先預留空間（visibility），JS 準備好才顯示，避免版面跳動 */
.bm-chapters{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-height:44px;visibility:hidden}.bm-chapters.ready{visibility:visible}.bm-chapters button{min-height:44px;padding:8px 14px;border:1px solid var(--control);border-radius:8px;background:var(--bg);color:var(--ink);font-size:14px}.bm-chapters button:hover{border-color:var(--accent);color:var(--accent)}.bm-chapters button[aria-current="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.bm-transcript{margin-top:16px}.bm-transcript ol{margin:10px 0 0;padding-left:1.4em;font-size:15px;line-height:1.9}.bm-transcript li{color:var(--ink)}
.bm-flow{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:step}.bm-flow li{position:relative;background:var(--surface);border-radius:14px;padding:26px 16px 18px;text-align:center;counter-increment:step}.bm-flow li::before{content:counter(step);position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}.bm-flow li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:15px;height:15px;border-top:3px solid var(--accent);border-right:3px solid var(--accent);transform:translateY(-50%) rotate(45deg)}.bm-flow b{display:block;font-size:17px;line-height:1.45;color:var(--ink)}.bm-flow span{display:block;margin-top:6px;font-size:14px;line-height:1.7;color:var(--muted)}
.bm-case{margin-top:20px;padding:18px 22px;background:var(--surface);border-radius:12px}.bm-case b{display:inline-block;font-size:12px;letter-spacing:.06em;padding:1px 10px;border-radius:10px;margin-right:8px;background:var(--accent);color:var(--on-accent)}.bm-case.demo b{background:var(--control);color:var(--bg)}
.bm-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}.bm-two>div{padding:20px 22px;border-radius:12px;background:var(--surface)}.bm-two h3{font-size:17px;margin-bottom:8px}.bm-two ul{margin:0;padding-left:1.2em;font-size:16px;line-height:1.85}.bm-two .risk{border-left:4px solid var(--bad)}.bm-two .kpi{border-left:4px solid var(--ok)}
.bm-combo{margin-top:18px;display:grid;gap:14px}.bm-combo article{padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.bm-combo h3{font-size:18px;margin-bottom:6px}.bm-combo p{font-size:16px;color:var(--ink)}.bm-combo a{text-decoration:underline;text-underline-offset:4px;color:var(--accent);font-weight:600;display:inline-block;padding-block:6px}.bm-avoid{margin-top:16px;padding:16px 20px;background:var(--bad-bg);border-left:5px solid var(--bad);border-radius:0 12px 12px 0}.bm-avoid p{font-size:16px;color:var(--ink)}.bm-avoid b{color:var(--bad)}
.bm-gl{margin-top:16px;padding:18px 22px;border:1px dashed var(--accent);border-radius:12px}.bm-gl p{color:var(--ink)}
.bm-related{margin-top:48px}.bm-related h2{font-size:20px!important}.bm-chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bm-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}.bm-pager a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:12px}.bm-pager a:hover{border-color:var(--accent)}.bm-pager small{display:block;color:var(--muted);font-size:13px}.bm-pager b{display:block;margin-top:4px;color:var(--ink);font-size:17px}.bm-pager .next{text-align:right}
.bm-pick{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:end;margin-top:24px}.bm-pick label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:6px}.bm-pick select{width:100%;min-height:48px;padding:10px 14px;font:inherit;font-size:16px;border:1px solid var(--control);border-radius:8px;background:var(--bg);color:var(--ink)}.bm-pick .x{font-size:26px;font-weight:700;color:var(--accent);padding-bottom:8px}
.bm-presets{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.bm-presets>span{font-size:14px;color:var(--muted);margin-right:4px}.bm-presets button{min-height:44px;padding:8px 16px;border:1px solid var(--control);border-radius:22px;background:var(--bg);color:var(--ink);font-size:15px;font-weight:600}.bm-presets button:hover{border-color:var(--accent);color:var(--accent)}
.bm-verdict{margin-top:20px;padding:20px 24px;border-radius:12px;background:var(--surface);border-left:6px solid var(--accent)}.bm-verdict h2{font-size:21px;margin-bottom:10px}.bm-verdict p{color:var(--ink);font-size:16px}.bm-verdict[data-tone="good"],.bm-verdict[data-tone="mid"]{background:var(--ok-bg);border-left-color:var(--ok)}.bm-verdict[data-tone="bad"]{background:var(--bad-bg);border-left-color:var(--bad)}.bm-verdict[data-tone="over"]{border-left-color:var(--control)}.bm-verdict[data-tone="pro"]{border-left-color:var(--pro)}
/* 矩陣：格子至少 32px、有邊框與符號，意義不只靠顏色；超出寬度時在容器內橫向捲動 */
.bm-mx-wrap{overflow:auto;margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--bg)}.bm-mx{border-collapse:separate;border-spacing:3px;margin:0 auto;width:max-content}.bm-mx th{font-size:11px;color:var(--muted);font-weight:700;min-width:32px;height:26px;text-align:center}.bm-mx td{width:32px;min-width:32px;height:32px;border-radius:6px;padding:0;cursor:pointer;text-align:center;font-size:15px;font-weight:800;line-height:1;border:1px solid var(--control);user-select:none}.bm-mx td.self{background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 4px,var(--bg) 4px,var(--bg) 8px);cursor:default;border-color:transparent}.bm-mx td.good{background:var(--cell-good-bg);color:var(--cell-good-fg)}.bm-mx td.mid{background:var(--cell-mid-bg);color:var(--cell-mid-fg)}.bm-mx td.over{background:var(--cell-over-bg);color:var(--cell-over-fg)}.bm-mx td.bad{background:var(--cell-bad-bg);color:var(--cell-bad-fg)}.bm-mx td.pro{background:var(--cell-pro-bg);color:var(--cell-pro-fg)}.bm-mx td:hover:not(.self){outline:3px solid var(--accent);outline-offset:1px}.bm-mx td:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.bm-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:13px;color:var(--muted)}.bm-legend span{display:inline-flex;align-items:center;gap:6px}.bm-key{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:5px;font-size:13px;font-weight:800;border:1px solid var(--control)}.bm-key.good{background:var(--cell-good-bg);color:var(--cell-good-fg)}.bm-key.mid{background:var(--cell-mid-bg);color:var(--cell-mid-fg)}.bm-key.over{background:var(--cell-over-bg);color:var(--cell-over-fg)}.bm-key.bad{background:var(--cell-bad-bg);color:var(--cell-bad-fg)}.bm-key.pro{background:var(--cell-pro-bg);color:var(--cell-pro-fg)}
.bm-scroll-hint{display:none;font-size:13px;color:var(--muted);margin-top:8px}
.bm-pairs{columns:2;column-gap:36px;margin:12px 0 0;padding-left:1.2em;font-size:16px;line-height:1.9}.bm-pairs li{break-inside:avoid;margin-bottom:6px}.bm-pairs a{text-decoration:underline;text-underline-offset:4px}
.bm-pick select:focus-visible,.bm-presets button:focus-visible,.bm-chapters button:focus-visible,.bm-pill:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:1023px){.bm-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.bm-flow li:nth-child(2)::after{display:none}.bm-glance{grid-template-columns:1fr}}
@media(max-width:767px){.bm-flow{grid-template-columns:1fr;gap:30px}.bm-flow li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-22px;transform:translateX(-50%) rotate(135deg)}.bm-two{grid-template-columns:1fr}.bm-pick{grid-template-columns:1fr}.bm-pick .x{text-align:center;padding-bottom:0}.bm-pager{grid-template-columns:1fr}.bm-pager .next{text-align:left}.bm-pairs{columns:1}.bm-guide{grid-template-columns:1fr}.bm-scroll-hint{display:block}}
@media(prefers-reduced-motion:reduce){.bm-chapters button,.bm-pill{transition:none}}
.bm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* 模式頁雙欄：內容在左，「角色與關係示意圖」在右（桌面版跟著捲動；手機版接在「一句話看懂」之後） */
.article.bm-wide{max-width:1120px}
.bm-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:44px;align-items:start}
.bm-grid>*{grid-column:1}
.bm-grid>.bm-aside{grid-column:2;grid-row:1 / span 30;position:sticky;top:96px;margin-top:32px;align-self:start}
.bm-diagram{margin:0;padding:18px 16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.bm-diagram h2{font-size:17px!important;margin:0 0 10px!important;text-align:center}
.bm-dg{display:block;width:100%;height:auto;background:var(--bg);border-radius:12px}
.bm-edge{fill:none;stroke-linecap:round}.bm-edge.m{stroke:var(--accent);stroke-width:2.6}.bm-edge.v{stroke:var(--ink);stroke-width:2;stroke-dasharray:7 5}.bm-edge.i{stroke:var(--muted);stroke-width:2.2;stroke-dasharray:2 5}
.bm-ah.m{fill:var(--accent)}.bm-ah.v{fill:var(--ink)}.bm-ah.i{fill:var(--muted)}
.bm-node rect{fill:var(--card);stroke:var(--control);stroke-width:1.5}.bm-node text{font-size:14px;font-weight:700;fill:var(--ink)}
.bm-node.self rect{fill:var(--accent);stroke:var(--accent)}.bm-node.self>text{fill:var(--on-accent)}
.bm-me circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.5}.bm-me text{font-size:11px;font-weight:800;fill:var(--accent)}
.bm-elabel rect{fill:var(--bg);opacity:.95}.bm-elabel text{font-size:12px;fill:var(--ink)}
.bm-dkey{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--muted)}.bm-dkey li{display:inline-flex;align-items:center;gap:6px}
.bm-dkey i{display:inline-block;width:26px;height:0;border-top:3px solid var(--accent)}.bm-dkey i.v{border-top:2px dashed var(--ink)}.bm-dkey i.i{border-top:2px dotted var(--muted)}
.bm-meb{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);font-size:10px;font-weight:800;color:var(--accent);background:var(--bg)}
.bm-diagram figcaption{margin:12px 0 0;font-size:14px;line-height:1.7;color:var(--ink);font-weight:600}
.bm-droles{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:8px}
.bm-droles dt{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;line-height:1.5}.bm-droles dt span{font-size:11px;font-weight:700;padding:0 8px;border-radius:9px;background:var(--accent);color:var(--on-accent)}
.bm-droles dd{margin:0 0 4px;font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:1023px){.bm-grid{display:block}.bm-grid>.bm-aside{position:static;margin:24px 0 0}}