/* 森麒現場擬真模擬器 qq-sim.css v1（2026-10-15）
   只作用於 .qqs 範圍內，不影響原頁面樣式；無外部字型或 CDN。
   深淺色：預設淺色（與現站一致）；html[data-theme=dark] 或容器 data-qq-theme="dark" 為深色；
   容器 data-qq-theme="auto" 時跟隨系統。 */
.qqs{
  --qq-bg:#f2f5f9;--qq-panel:#fff;--qq-ink:#122033;--qq-muted:#5b6778;--qq-line:#d6dfe9;--qq-soft:#e8eef6;
  --qq-navy:#0b2d62;--qq-blue:#1458a6;--qq-accent:#f58220;--qq-ok:#1f8a5b;--qq-warn:#b7791f;--qq-bad:#c2412d;
  --qq-cool:#2f7fc1;--qq-hot:#d2502d;--qq-stage:#e6ecf2;--qq-metal:#c7d0db;--qq-dark:#2a3646;--qq-led:#36d17a;
  --qq-shadow:0 10px 28px rgba(11,45,98,.10);
  color:var(--qq-ink);background:var(--qq-bg);border:1px solid var(--qq-line);border-radius:18px;
  padding:16px;margin:28px 0;font-size:16px;line-height:1.65;box-sizing:border-box;max-width:100%;overflow:hidden;
  font-family:inherit;
}
.qqs *,.qqs *::before,.qqs *::after{box-sizing:border-box}
html[data-theme="dark"] .qqs,.qqs[data-qq-theme="dark"]{
  --qq-bg:#0a1522;--qq-panel:#11223a;--qq-ink:#e6eef8;--qq-muted:#9fb1c7;--qq-line:#23405f;--qq-soft:#162b46;
  --qq-navy:#8bbcf0;--qq-blue:#6cb4f0;--qq-accent:#f39a4c;--qq-ok:#5fcf9f;--qq-warn:#e9b949;--qq-bad:#ff8a73;
  --qq-cool:#6cb4f0;--qq-hot:#ff8a5c;--qq-stage:#1a2c44;--qq-metal:#4a5b70;--qq-dark:#cbd6e3;--qq-led:#5fe39a;color-scheme:dark}
@media (prefers-color-scheme:dark){
  .qqs[data-qq-theme="auto"]{
  --qq-bg:#0a1522;--qq-panel:#11223a;--qq-ink:#e6eef8;--qq-muted:#9fb1c7;--qq-line:#23405f;--qq-soft:#162b46;
  --qq-navy:#8bbcf0;--qq-blue:#6cb4f0;--qq-accent:#f39a4c;--qq-ok:#5fcf9f;--qq-warn:#e9b949;--qq-bad:#ff8a73;
  --qq-cool:#6cb4f0;--qq-hot:#ff8a5c;--qq-stage:#1a2c44;--qq-metal:#4a5b70;--qq-dark:#cbd6e3;--qq-led:#5fe39a;color-scheme:dark}
}
.qqs-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:10px}
.qqs-kicker{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--qq-accent);text-transform:uppercase}
.qqs-title{font-size:20px;font-weight:800;color:var(--qq-navy);margin:0;line-height:1.35}
.qqs-sub{width:100%;color:var(--qq-muted);font-size:14px;margin:0}
.qqs-scen{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.qqs-chip{flex:0 0 auto;max-width:240px;text-align:left;border:1px solid var(--qq-line);background:var(--qq-panel);color:var(--qq-ink);
  border-radius:12px;padding:8px 12px;font:inherit;font-size:14px;line-height:1.4;cursor:pointer;white-space:normal}
.qqs-chip b{display:block;font-size:14px}
.qqs-chip small{display:block;color:var(--qq-muted);font-size:12px}
.qqs-chip[aria-pressed="true"]{border-color:var(--qq-blue);box-shadow:inset 0 0 0 2px var(--qq-blue);background:var(--qq-soft)}
.qqs-say{background:var(--qq-panel);border-left:4px solid var(--qq-accent);border-radius:10px;padding:10px 12px;margin:0 0 12px;font-size:15px}
.qqs-say b{color:var(--qq-accent)}
.qqs-progress{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px;color:var(--qq-muted)}
.qqs-bar{flex:1;height:6px;border-radius:6px;background:var(--qq-line);overflow:hidden}
.qqs-bar i{display:block;height:100%;background:var(--qq-blue);transition:width .3s}
.qqs-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}
@media (max-width:760px){.qqs-body{grid-template-columns:minmax(0,1fr)}}
.qqs-stage{background:var(--qq-stage);border-radius:14px;padding:10px;min-width:0;position:relative}
.qqs-stage svg{display:block;width:100%;height:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.qqs [data-drag],.qqs [data-rub]{touch-action:none}
.qqs-side{background:var(--qq-panel);border:1px solid var(--qq-line);border-radius:14px;padding:12px 14px;min-width:0}
.qqs-step-title{font-weight:800;font-size:17px;margin:0 0 6px;color:var(--qq-navy)}
.qqs-step-text{margin:0 0 8px;font-size:15px}
.qqs-step-text ol,.qqs-step-text ul{margin:4px 0 4px 1.2em;padding:0}
.qqs-warn{border:2px solid var(--qq-bad);background:color-mix(in srgb,var(--qq-bad) 8%,var(--qq-panel));color:var(--qq-ink);
  border-radius:10px;padding:8px 10px;margin:8px 0;font-size:14px}
.qqs-warn b{color:var(--qq-bad)}
.qqs-check{border-radius:10px;padding:8px 10px;margin:8px 0;font-size:14px;background:var(--qq-soft)}
.qqs-check.ok{background:color-mix(in srgb,var(--qq-ok) 14%,var(--qq-panel));border:1px solid var(--qq-ok)}
.qqs-check.ok::before{content:"✓ ";font-weight:800;color:var(--qq-ok)}
.qqs-check.wait::before{content:"○ ";color:var(--qq-muted)}
.qqs-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin:8px 0}
.qqs-read div{background:var(--qq-soft);border-radius:8px;padding:6px 8px;font-size:12px;color:var(--qq-muted)}
.qqs-read b{display:block;font-size:17px;color:var(--qq-ink);font-variant-numeric:tabular-nums}
.qqs-nav{display:flex;gap:8px;margin-top:12px}
.qqs-btn{font:inherit;font-size:15px;border-radius:10px;padding:9px 14px;border:1px solid var(--qq-line);background:var(--qq-panel);color:var(--qq-ink);cursor:pointer}
.qqs-btn.primary{background:var(--qq-blue);border-color:var(--qq-blue);color:#fff;font-weight:700;flex:1}
.qqs-btn[disabled]{opacity:.45;cursor:not-allowed}
.qqs-ctrl{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.qqs-tog{font:inherit;font-size:14px;border-radius:999px;padding:6px 12px;border:1px solid var(--qq-line);background:var(--qq-panel);color:var(--qq-ink);cursor:pointer}
.qqs-tog[aria-pressed="true"]{background:var(--qq-navy);color:var(--qq-panel);border-color:var(--qq-navy)}
.qqs-range{display:block;margin:8px 0;font-size:14px}
.qqs-range input{width:100%;accent-color:var(--qq-blue)}
.qqs-result{margin-top:14px;background:var(--qq-panel);border:1px solid var(--qq-line);border-radius:14px;padding:14px}
.qqs-result h4{margin:0 0 6px;font-size:17px;color:var(--qq-navy)}
.qqs-verdict{font-size:16px;font-weight:700;margin:0 0 8px}
.qqs-verdict.bad{color:var(--qq-bad)}.qqs-verdict.ok{color:var(--qq-ok)}.qqs-verdict.warn{color:var(--qq-warn)}
.qqs-card{border:2px dashed var(--qq-line);border-radius:12px;padding:12px;background:var(--qq-bg);margin:10px 0}
.qqs-card h5{margin:0 0 6px;font-size:15px}
.qqs-card ul{margin:0;padding-left:1.2em;font-size:14px}
.qqs-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:560px){.qqs-two{grid-template-columns:minmax(0,1fr)}}
.qqs-two .can h5{color:var(--qq-ok)}.qqs-two .cannot h5{color:var(--qq-bad)}
.qqs-line{margin-top:10px;border-radius:12px;padding:12px;background:color-mix(in srgb,#06c755 10%,var(--qq-panel));border:1px solid #06c755}
.qqs-line textarea{width:100%;min-height:150px;font:inherit;font-size:14px;border-radius:8px;border:1px solid var(--qq-line);padding:8px;background:var(--qq-panel);color:var(--qq-ink);resize:vertical}
.qqs-line .qqs-btn.primary{background:#06c755;border-color:#06c755}
.qqs-id{font-weight:800;font-size:18px;letter-spacing:.02em}
.qqs-src{font-size:12px;color:var(--qq-muted);margin-top:10px}
.qqs-toast{font-size:13px;color:var(--qq-ok);margin-left:8px}
.qqs-hint{font-size:13px;color:var(--qq-muted);margin:4px 0}
.qqs svg text{font-family:inherit}
.qqs [data-act]{cursor:pointer}
.qqs [data-drag]{cursor:grab}
.qqs .qqs-focus{outline:3px solid var(--qq-accent);outline-offset:2px}
@keyframes qqs-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.qqs .qqs-blink{animation:qqs-pulse 1s infinite}
@keyframes qqs-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.qqs .qqs-shake{animation:qqs-shake .2s 3}
@media (prefers-reduced-motion:reduce){.qqs .qqs-blink,.qqs .qqs-shake{animation:none}}
@media print{
  .qqs{border:0;background:#fff;color:#000}
  .qqs-scen,.qqs-nav,.qqs-stage,.qqs-progress,.qqs-line .qqs-btn{display:none}
  .qqs-body{display:block}
}

/* v1.1 實體／線路圖切換、現場照片、動畫 */
.qqs-view{display:flex;width:max-content;margin:0 0 6px auto;border-radius:999px;overflow:hidden;border:1px solid var(--qq-line);background:var(--qq-panel);box-shadow:var(--qq-shadow)}
.qqs-view button{font:inherit;font-size:12px;border:0;background:transparent;color:var(--qq-ink);padding:4px 10px;cursor:pointer}
.qqs-view button[aria-pressed="true"]{background:var(--qq-navy);color:var(--qq-panel)}
.qqs-say{display:flow-root}
.qqs-say p{margin:0 0 4px}
.qqs-photo{float:right;margin:0 0 6px 10px;width:150px;max-width:40%}
.qqs-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--qq-line);background:var(--qq-soft)}
.qqs-photo figcaption{font-size:11px;line-height:1.35;color:var(--qq-muted);margin-top:3px}
@keyframes qqs-rot{to{transform:rotate(360deg)}}
.qqs .qqs-spin{animation:qqs-rot .45s linear infinite}
@keyframes qqs-dash{to{stroke-dashoffset:-22}}
.qqs .qqs-flow{animation:qqs-dash .8s linear infinite}
@media (prefers-reduced-motion:reduce){.qqs .qqs-spin,.qqs .qqs-flow{animation:none}}
@media print{.qqs-view,.qqs-photo{display:none}}
@media (max-width:560px){.qqs{padding:12px}.qqs-stage{padding:4px;margin:0 -6px}}

/* v1.2：提高文字顏色優先權，避免網站文章樣式（p、h3、li）蓋過模擬器深淺色 */
.qqs.qqs p,.qqs.qqs li,.qqs.qqs div,.qqs.qqs label,.qqs.qqs span{color:inherit}
.qqs.qqs .qqs-title,.qqs.qqs .qqs-step-title,.qqs.qqs .qqs-result h4{color:var(--qq-navy)}
.qqs.qqs .qqs-kicker,.qqs.qqs .qqs-say b{color:var(--qq-accent)}
.qqs.qqs .qqs-sub,.qqs.qqs .qqs-chip small,.qqs.qqs .qqs-progress,.qqs.qqs .qqs-read div,.qqs.qqs .qqs-src,.qqs.qqs .qqs-hint,.qqs.qqs .qqs-photo figcaption,.qqs.qqs .qqs-say small{color:var(--qq-muted)}
.qqs.qqs .qqs-say p,.qqs.qqs .qqs-step-text,.qqs.qqs .qqs-warn,.qqs.qqs .qqs-read b,.qqs.qqs .qqs-result p,.qqs.qqs .qqs-card li,.qqs.qqs .qqs-line p,.qqs.qqs .qqs-check{color:var(--qq-ink)}
.qqs.qqs .qqs-warn b,.qqs.qqs .qqs-verdict.bad{color:var(--qq-bad)}
.qqs.qqs .qqs-verdict.warn{color:var(--qq-warn)}
.qqs.qqs .qqs-verdict.ok,.qqs.qqs .qqs-two .can h5,.qqs.qqs .qqs-toast{color:var(--qq-ok)}

/* v1.3：教學設定與依據收進展開說明 */
.qqs .qqs-more{margin:6px 0 0}
.qqs .qqs-more summary{cursor:pointer;color:var(--qq-blue);font-size:13px;font-weight:700}
.qqs .qqs-more[open] summary{margin-bottom:4px}
.qqs-illus-img{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:1px solid var(--qq-line);background:var(--qq-soft)}
.qqs-illus-img svg{display:block;width:100%;height:100%}
.qqs-illus-tag{position:absolute;left:4px;top:4px;font-size:10px;line-height:1.5;padding:0 5px;border-radius:4px;background:rgba(15,25,35,.72);color:#fff;font-weight:700}

/* PERF2：小字採深橘；品牌橘保留於圖形與邊線。 */
.qqs{--qq-accent-text:#984600;--qq-navy:#1e3f8f}
.qqs.qqs .qqs-kicker,.qqs.qqs .qqs-say b{color:var(--qq-accent-text)}
html[data-theme="dark"] .qqs,.qqs[data-qq-theme="dark"]{--qq-accent-text:#ffb875}
@media(prefers-color-scheme:dark){.qqs[data-qq-theme="auto"]{--qq-accent-text:#ffb875}}