/* form */
.odg-run { margin-top: 20px; }

#compare-details { margin-top: 12px; font-size: 14px; }
#compare-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: #374151; }
#compare { width: 100%; border-collapse: collapse; font-size: 14px; color: #374151; }
#compare caption { text-align: left; font-size: 14px; color: #6b7280; padding: 4px 0 8px; }
#compare thead th { text-align: left; padding: 6px 8px; border-bottom: 2px solid #e2e8f0; }
#compare tbody th, #compare tbody td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-weight: 400; }
#compare tbody th { font-weight: 600; }
@media (max-width: 640px) {
  #compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  #compare, #compare tbody, #compare tr, #compare th, #compare td { display: block; width: 100%; }
  #compare tr { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px; padding: 6px 0; }
  #compare tbody th { border-bottom: 0; }
  #compare tbody td { border-bottom: 0; padding: 2px 8px; }
  #compare tbody td::before { content: attr(data-label) "　"; color: #6b7280; }
}

/* result */
#odg-card .odg-heading { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: #7c3aed; }
#odg-card .odg-heading:focus { outline: none; }
#odg-card .odg-hero { background: #eff6ff; border-radius: 10px; padding: 16px; margin-bottom: 14px; }
#odg-emoji { font-size: 24px; margin-bottom: 8px; }
#odg-name { font-size: 18px; font-weight: 700; color: #1e40af; margin-bottom: 4px; }
#odg-stars { font-size: 20px; color: #f59e0b; margin-bottom: 8px; }
#odg-facts { font-size: 13px; color: #374151; line-height: 2; }
#odg-desc { font-size: 13px; color: #374151; margin-bottom: 12px; }
#odg-judge { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
#odg-caution { margin: 10px 0; padding: 10px 12px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; color: #7f1d1d; font-size: 14px; font-weight: 600; line-height: 1.7; }
#odg-tips .odg-tips-title { font-size: 13px; font-weight: 600; color: #374151; margin: 12px 0 6px; }
#odg-tips ul { padding-left: 18px; font-size: 13px; color: #475569; line-height: 1.9; }
#odg-tips li { margin-bottom: 5px; }
#odg-search { background: #fafafa; border-radius: 8px; padding: 10px; margin-top: 10px; font-size: 12px; color: #6b7280; }

/* notes */
#odg-note { font-size: 14px; color: #6b7280; line-height: 1.6; margin-top: 10px; }
#odg-safety { margin-top: 12px; padding: 10px 12px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 8px; color: #78350f; font-size: 14px; line-height: 1.7; }

/* a11y */
/* 読み上げ領域(#result)は計算前から描画しておく。display:none の領域は、描き替えが読み上げられないことがある。中身(カード)だけを隠す */
#result { display: block; }
#result:not(.show) #odg-card { display: none; }
#result.show { margin-top: 16px; }

/* 14px未満の文字を14pxへ(インライン style から移した分と、S0〜S2 の節の13px・12px) */
label { font-size: 14px; }
.odg-fs14 { font-size: 14px; }
#odg-facts, #odg-desc, #odg-judge, #odg-tips .odg-tips-title, #odg-tips ul, #odg-search { font-size: 14px; }
.badge { font-size: 14px; }

/* 押せる要素は高さ・幅44px以上(リンク全般。同意バナーは共有部品のため対象外) */
.odg-tap { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
#odg-sources a { display: flex; }
footer .odg-tap { justify-content: center; }
.sr-only:focus { position: static !important; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; margin: 0; display: inline-flex; align-items: center; min-height: 44px; }

/* ふりがな: rt は本文の0.65em */
ruby { ruby-position: over; ruby-align: center; }
rt { font-size: 0.65em; font-weight: 400; line-height: 1.2; }