/* Opt-in styles for individually edited guide summaries.
   Journal notation continues to use style.css's journal-grid components. */
.grade3-reading #quick-answer .topic-summary > :last-child { margin-bottom: 0; }
.grade3-reading #quick-answer .topic-summary h3 { margin: 24px 0 10px; font-size: 18px; }
.grade3-reading #quick-answer .topic-table-scroll { max-width: 100%; overflow-x: auto; margin: 20px 0; }
.grade3-reading #quick-answer .topic-table { width: 100%; min-width: 440px; margin: 0; border-collapse: collapse; table-layout: auto; background: #fff; font-size: 15px; line-height: 1.8; }
.grade3-reading #quick-answer .topic-table caption { text-align: left; color: #213c5d; font-weight: 700; padding: 0 0 9px; }
.grade3-reading #quick-answer .topic-table :is(th, td) { border: 1px solid #cbdbee; padding: 12px 14px; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.grade3-reading #quick-answer .topic-table thead th { background: #e4edf8; color: #203c5d; font-weight: 700; }
.grade3-reading #quick-answer .topic-table tbody th { background: #f7faff; color: #203c5d; font-weight: 700; min-width: 6em; }
.grade3-reading #quick-answer .topic-table td { font-weight: 400; }
.grade3-reading #quick-answer .topic-table-journals { min-width: 700px; table-layout: fixed; }
.grade3-reading #quick-answer .topic-table-journals th:first-child { width: 24%; }
.grade3-reading #quick-answer .topic-table-journals th:nth-child(2) { width: 46%; }
.grade3-reading #quick-answer .topic-table-journals :is(th, td) { padding: 12px; vertical-align: middle; }
.grade3-reading #quick-answer .topic-steps { display: block; margin: 20px 0; padding-left: 1.5em; }
.grade3-reading #quick-answer .topic-steps > li { padding-left: 2px; margin: 0 0 16px; }
.grade3-reading #quick-answer .topic-steps > li::marker { font-weight: 700; color: #325e99; }
.grade3-reading #quick-answer .topic-steps p { margin: 5px 0 0; }
.grade3-reading #quick-answer .topic-formula { padding: 12px 16px; margin: 18px 0; border-left: 3px solid #5e84b2; background: #e6effa; color: #193e6b; font-weight: 700; line-height: 1.8; }
.grade3-reading #quick-answer .topic-journal { margin: 18px 0; padding: 12px 0; border-top: 1px solid #cbdbee; border-bottom: 1px solid #cbdbee; }
.grade3-reading #quick-answer .topic-journal-caption { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #203c5d; }
.grade3-reading #quick-answer .topic-journal-scroll { overflow-x: auto; max-width: 100%; }
.grade3-reading #quick-answer .topic-summary .journal-grid { --journal-col-min: 0px; --journal-col-gap: 1em; --journal-group-gap: 6px; --journal-bottom-gap: 0px; flex-wrap: nowrap; margin: 0; font-size: 14px; }
.grade3-reading #quick-answer .topic-journal-scroll .journal-grid { min-width: max-content; width: 100%; padding: 4px 0; }
.grade3-reading #quick-answer :is(.topic-table-scroll, .topic-journal-scroll):focus-visible { outline: 2px solid #2670c9; outline-offset: 3px; }
@media (max-width: 600px) {
  .grade3-reading #quick-answer .topic-summary { padding: 18px 16px; }
  .grade3-reading #quick-answer .topic-table-scroll::before { content: "表は横にスクロールできます →"; display: block; margin-bottom: 6px; color: #526278; font-size: 12px; }
  .grade3-reading #quick-answer .topic-table { font-size: 14px; }
  .grade3-reading #quick-answer .topic-table :is(th, td) { padding: 10px 12px; }
  .grade3-reading #quick-answer .topic-summary .grade3-answer { font-size: 17px; }
  .grade3-reading #quick-answer .topic-formula { font-size: 16px; padding: 10px 12px; }
}