/* ---------- 吊隱還是壁掛：拖拉比較＋逐項比較表（index/theme/compare.js，捲到附近才載入） ---------- */
.compare-sec{--compare-bg:#FAF7EF;--compare-card:#FFFFFF;--compare-line:#E6DFC9;--compare-ink:#1D2A36;--compare-ink2:#45525E;--compare-mute:#7A8590;--compare-blue:#2C6AA8;--compare-cop:#8E6228;
  --compare-gut:var(--gut,clamp(16px,4vw,48px));
  background:var(--compare-bg);color:var(--compare-ink);padding:clamp(56px,8vw,112px) var(--compare-gut) clamp(56px,8vw,104px);overflow-x:clip}
.compare-head,.compare-tbl{max-width:1180px;margin:0 auto}
.compare-label{font:500 14px/1.5 'IBM Plex Mono','Noto Sans TC',ui-monospace,monospace;letter-spacing:.06em;color:var(--compare-blue);margin:0}
.compare-h2{font:700 clamp(28px,3.6vw,46px)/1.3 'Noto Serif TC',serif;margin:12px 0 0;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.compare-lead{margin:16px 0 0;max-width:36em;font:400 16px/1.85 'Noto Sans TC',sans-serif;color:var(--compare-ink2)}

/* 拖拉框：上層（吊隱式）用 clip-path 只露出把手左邊 */
.compare{max-width:1180px;margin:clamp(28px,4vw,48px) auto 0}
.compare-frame{--compare-x:50%;position:relative;max-width:min(100%,calc((100svh - 200px)*1200/760));margin:0 auto;background:var(--compare-card);border:1px solid var(--compare-line);
  overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:ew-resize}
.compare-layer{position:relative;width:100%;aspect-ratio:1200/760}
.compare-layer svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.compare-hide{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--compare-x)) 0 0)}
.compare-handle{position:absolute;top:0;bottom:0;left:var(--compare-x);width:48px;margin-left:-24px;z-index:3;outline:none;touch-action:none}
.compare-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--compare-ink)}
.compare-knob{position:absolute;top:50%;left:50%;width:52px;height:52px;transform:translate(-50%,-50%);border-radius:50%;background:var(--compare-ink);color:#FAF7EF;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px -10px rgba(29,42,54,.55);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.compare-handle:hover .compare-knob,.compare-handle.compare-drag .compare-knob{transform:translate(-50%,-50%) scale(1.08)}
.compare-handle:focus-visible .compare-knob{outline:3px solid var(--compare-cop);outline-offset:4px}
.compare-tag{position:absolute;top:14px;z-index:2;background:#FAF7EF;border:1px solid var(--compare-ink);padding:4px 12px;font:700 16px/1.4 'Noto Serif TC',serif;color:var(--compare-ink);pointer-events:none;transition:opacity .3s}
.compare-tag-l{left:14px}.compare-tag-r{right:14px}
.compare-hint{position:absolute;left:var(--compare-x);top:calc(50% + 40px);transform:translateX(-50%);z-index:2;background:#FAF7EF;border:1px solid var(--compare-line);padding:2px 12px;font:500 14px/1.6 'Noto Sans TC',sans-serif;color:var(--compare-ink2);pointer-events:none;transition:opacity .4s;white-space:nowrap}
.compare-hint.compare-off{opacity:0}
.compare-air{animation:compare-flow 1.6s linear infinite;animation-play-state:paused}
.compare-on .compare-air{animation-play-state:running}
@keyframes compare-flow{to{stroke-dashoffset:-32}}

/* 圖下對照：編號 → 說明 */
.compare-legend{max-width:min(100%,calc((100svh - 200px)*1200/760));margin:18px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px}
.compare-legend h3{margin:0;font:700 17px/1.5 'Noto Serif TC',serif;color:var(--compare-ink)}
.compare-legend ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.compare-legend li{display:flex;gap:10px;align-items:baseline;font:400 15px/1.7 'Noto Sans TC',sans-serif;color:var(--compare-ink2)}
.compare-legend li b{font-weight:500;color:var(--compare-ink)}
.compare-legend em{font-style:normal;flex:none;width:22px;height:22px;border-radius:50%;background:var(--compare-ink);color:#FAF7EF;display:grid;place-items:center;font:500 14px/1 'IBM Plex Mono',ui-monospace,monospace;transform:translateY(3px)}

/* 減少動態：照樣可拖，氣流不動、不掃 */
.compare-rm .compare-air,html.rm .compare-air{animation:none}
.compare-rm .compare-knob,html.rm .compare-knob,.compare-rm .compare-tag,html.rm .compare-tag{transition:none}
@media (prefers-reduced-motion:reduce){.compare-air{animation:none}.compare-knob,.compare-tag,.compare-hint{transition:none}}

/* 逐項比較表：桌機三欄，手機每項一張卡 */
.compare-tbl{margin-top:clamp(48px,7vw,88px)}
.compare-h3{font:700 clamp(24px,2.8vw,36px)/1.35 'Noto Serif TC',serif;margin:12px 0 0;color:var(--compare-ink);word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.compare-sub{margin:10px 0 0;font:400 16px/1.8 'Noto Sans TC',sans-serif;color:var(--compare-ink2)}
.compare-tbl table{width:100%;margin-top:22px;border-collapse:collapse;background:var(--compare-card);border:1px solid var(--compare-line);font:400 16px/1.7 'Noto Sans TC',sans-serif}
.compare-tbl th,.compare-tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--compare-line)}
.compare-tbl thead th{font:700 18px/1.5 'Noto Serif TC',serif;color:var(--compare-ink);border-top:0;background:#FBF9F3}
.compare-tbl tbody th{font:500 15px/1.7 'Noto Sans TC',sans-serif;color:var(--compare-mute);white-space:nowrap;width:8em}
.compare-tbl td{color:var(--compare-ink2);width:42%}
.compare-tbl td b{font-weight:500;color:var(--compare-ink)}
.compare-tbl tbody tr:hover{background:#FCFAF4}
.compare-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.compare-notes{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.compare-notes p{margin:0;padding:16px 18px;background:var(--compare-card);border:1px solid var(--compare-line);border-left:3px solid var(--compare-cop);font:400 15px/1.8 'Noto Sans TC',sans-serif;color:var(--compare-ink2)}
.compare-notes b{display:block;font:700 16px/1.6 'Noto Serif TC',serif;color:var(--compare-ink);margin-bottom:4px}

@media (max-width:720px){
  .compare-frame,.compare-legend{max-width:100%}
  .compare-tag{top:auto;bottom:10px;padding:2px 8px;font-size:14px}
  .compare-tag-l{left:10px}.compare-tag-r{right:10px}
  .compare-hint{top:calc(50% + 32px)}
  .compare-knob{width:46px;height:46px}
  .compare-legend{grid-template-columns:1fr;gap:16px}
  .compare-tbl table,.compare-tbl tbody,.compare-tbl tr,.compare-tbl th,.compare-tbl td{display:block;width:auto}
  .compare-tbl table{background:none;border:0}
  .compare-tbl thead{display:none}
  .compare-tbl tr{background:var(--compare-card);border:1px solid var(--compare-line);margin-top:12px;padding:8px 16px 10px}
  .compare-tbl tbody th{padding:8px 0 4px;border:0;font:700 18px/1.5 'Noto Serif TC',serif;color:var(--compare-ink)}
  .compare-tbl td{position:relative;padding:8px 0 8px 4.6em;font-size:15px}
  .compare-tbl td::before{content:attr(data-k);position:absolute;left:0;top:8px;font:500 14px/1.7 'Noto Sans TC',sans-serif;color:var(--compare-mute)}
  .compare-tbl td+td{border-top:1px dashed var(--compare-line)}
  .compare-notes{grid-template-columns:1fr}
}