/* やさしい日本語に言い換え: 原文と言い換えを左右に（狭い画面では上下） */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
.pair[hidden] { display: none; }
.pair h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.src p, .out p { margin: 0 0 0.6rem; line-height: 2.1; }
.src { opacity: 0.85; font-size: 0.95em; }
.out { font-size: 1.1em; }
.out rt { font-size: 0.55em; }
.out .marked { background: color-mix(in srgb, #e0a000 18%, transparent); border-radius: 4px; padding: 0 0.25rem; }
.mark { margin-right: 0.25rem; }
.toggle { display: inline-flex; gap: 0.4rem; align-items: center; margin-bottom: 0.5rem; min-height: 48px; }
.toggle input { width: 1.4rem; height: 1.4rem; }
.langs { border: 1px solid currentColor; border-radius: var(--radius); margin: 1rem 0 0.5rem; padding: 0.5rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.langs label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 48px; }
.langs input { width: 1.3rem; height: 1.3rem; }
.tr { border-top: 1px dashed currentColor; padding-top: 0.5rem; }
.tr p { line-height: 1.8; margin: 0 0 0.5rem; }
.speak-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.75rem 0; }
.speak-row[hidden] { display: none; }
.btn.speak { font-size: 1.2rem; min-height: 56px; padding: 0.5rem 1.4rem; }
.btn.speak.playing { outline: 3px solid currentColor; }
.rates label { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 48px; margin-right: 0.75rem; }
.rates input { width: 1.3rem; height: 1.3rem; }
@media (max-width: 720px) { .pair { grid-template-columns: 1fr; } }
@media print { .btn-row, .toggle { display: none; } }

/* 写真を読んだあとの知らせは output（状態の文。7.73 判断 3） */
output#photo-note:not([hidden]) { display: block; }

/* スマホで「結果」を 1 画面目に（見出しの上下を詰める・写真のボタンを 1 行に） */
@media (max-width: 480px) {
  .app-header { padding-block: var(--sp-2); }
  #photo-btn { padding-inline: var(--sp-2); }
  .req .btn-row { gap: var(--sp-2); margin: var(--sp-2) 0; }
  .req legend { margin-bottom: var(--sp-2); }
  fieldset.card.req { margin-bottom: var(--sp-2); }
  .notice { margin-bottom: var(--sp-2); }
}