/**
 * edit.css — 修改模式(edit.html)專屬樣式:參考圖槽、前後對照卡。
 *
 * ★ 參考圖槽(.refs / .slot)已於 2026-09-01 搬到 form.css —— 局部重繪
 *   的底圖改用同一組元件,它就成了「共用的表單元件」,符合 form.css 的定位。
 *   本檔現在只剩前後對照卡與強度那個 <output>。
 */

.refs__out {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-dim);
}

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.compare figure { margin: 0; }
.compare img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.compare figcaption {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-dim);
  text-align: center;
}

@media (max-width: 620px) {
  .compare { grid-template-columns: 1fr; }
}