/* ── set_union_overlap_total_1（かさなりを一どだけかぞえよう、単元仕様書 v1.2）── */
/* 画面：問題文の下に、図の題名、左右の円の人数、二つの円とまんなかの●、2つの凡例、答えの欄とテンキー（§5-3・§7 画面表示）。 */
.suo-main{display:flex;flex-direction:column;align-items:center;margin:4px 0 6px;max-width:100%}
.suo-fig{display:flex;flex-direction:column;align-items:center;width:100%;max-width:360px;min-width:280px;box-sizing:border-box}
.suo-scene{margin:0 0 4px;font-weight:700;font-size:1rem;text-align:center}
.suo-labels{display:flex;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box}
.suo-label{font-weight:700;font-size:1rem;line-height:1.3;padding:2px 8px;border-radius:8px;background:#fff;max-width:calc(50% - 4px);box-sizing:border-box;text-align:center;word-break:keep-all;overflow-wrap:normal}
/* 幅320pxでは問題カードの内側が264pxになるため、図の列だけ左右へ8pxずつ広げて二円図の幅280px（§7）を保つ。ラベルは日本語を途中で折らず、英語は語の切れ目で折り返す（本番前品質検査 F-1・N-1）。 */
@media (max-width:339px){.suo-main{margin-left:-8px;margin-right:-8px;max-width:none}}
/* 単元紹介の例題：幅430px以下では、紹介カード・例題の枠・青い帯の余白が重なり、図の列が280pxより狭くなる（320pxで168px）。
   このときだけ例題の枠を紹介カードの左右いっぱいに広げ、枠の内側の余白をなくして、二円図を幅280px以上で出す。
   題名と答えの文は左右に12pxの余白を残す（§7・AC-08。本番前品質検査 N-2）。 */
@media (max-width:430px){
  #lesson-card-content .lesson-example:has(.suo-fig-example){margin-left:-32px;margin-right:-32px;padding-left:0;padding-right:0;border-left-width:0;border-right-width:0;border-radius:0}
  #lesson-card-content .lesson-example:has(.suo-fig-example)>h4{padding-left:12px;padding-right:12px}
  #lesson-card-content .lesson-example>div:has(>.suo-fig-example){padding-left:0!important;padding-right:0!important;border-left:0!important;border-radius:0!important}
  #lesson-card-content .suo-fig.suo-fig-example{max-width:none}
  #lesson-card-content .suo-example-answer{padding:0 12px}
  #lesson-card-content .suo-fig-example .suo-legend{padding:0 12px}
}
.suo-label-left{border:2px solid #be123c;color:#881337}
.suo-label-right{border:2px dashed #1d4ed8;color:#1e3a8a}
/* 音声支援で図をたどる順は「凡例→各●」（§7）。DOMでは凡例を図の前に置き、見た目は図の下に出す。 */
.suo-svg{display:block;width:100%;min-height:160px;height:auto;margin:4px 0;order:1}
.suo-circle{stroke-width:3}
.suo-circle-left{fill:rgba(244,114,182,.16);stroke:#be123c}
.suo-circle-right{fill:rgba(96,165,250,.16);stroke:#1d4ed8;stroke-dasharray:9 5}
.suo-dot{fill:#111827}
.suo-legend{margin:2px 0;font-size:.9rem;line-height:1.45;text-align:left;width:100%;min-height:1em}
.suo-legend{font-size:max(14px,.9rem);order:2}
.suo-example-answer{margin:6px 0 0;font-weight:700}
.suo-fields{display:flex;justify-content:center;align-items:center;gap:8px;margin:6px auto 2px;flex-wrap:wrap}
.suo-input-label{font-weight:700;font-size:1.05rem}
.suo-input{width:4em;min-height:44px;font-size:1.4rem;padding:4px 8px;border:3px solid #1d4ed8;background:#eff6ff;border-radius:10px;text-align:center;font-family:inherit;box-sizing:border-box}
.suo-input:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px}
.suo-input:disabled{background:#f8fafc;color:#111827;opacity:1;border-color:#94a3b8}
.suo-input.suo-input-ok{border:3px solid #15803d;background:#dcfce7}
.suo-input.suo-input-ng{border:3px dashed #b91c1c;background:#fff1f2}
.suo-unit{font-weight:700;font-size:1.05rem}
.suo-msg{margin:2px auto 0;color:#b91c1c;font-weight:700;font-size:.95rem;text-align:center;max-width:32em}
.suo-msg:empty{display:none}
.feedback.has-text.suo-feedback{height:auto;min-height:40px;padding:4px 0;text-align:center;line-height:1.45}
.suo-answer{margin:2px 0 6px;font-weight:700}
.suo-expl-text{margin:4px 0 6px;overflow-wrap:anywhere}
#page-quiz.active:has(.suo-main) #hint-area .kp-card{display:flex;align-items:flex-start;gap:8px}
#page-quiz.active:has(.suo-main) #hint-area .kp-head{margin-bottom:0;flex:none}
#page-quiz.active:has(.suo-main) #hint-area .kp-title:empty{display:none}
#page-quiz.active:has(.suo-main) #hint-area .kp-body{flex:1;min-width:0;padding-left:0}

/* 印刷：A4縦・1ページ（§7。用紙の余白 上下5mm・左右6mm、本文198×287mm、列97mm・列の間4mm）。 */
.suo-pr-page{width:198mm;height:287mm;box-sizing:border-box;display:flex;flex-direction:column;padding:0;margin:0 auto 8mm;overflow:hidden;background:#fff;color:#000;font-family:'Atkinson Hyperlegible','BIZ UDPGothic','Yu Gothic','Meiryo',sans-serif}
.suo-pr-head{display:flex;flex-direction:column;flex:none;box-sizing:border-box;width:198mm;height:15mm}
.suo-pr-title{box-sizing:border-box;margin:0;height:8mm;font-size:13.5pt;font-weight:700;line-height:7mm;text-align:center;white-space:nowrap;padding:0;border:1.5pt solid #666;background:#ffffcc;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.suo-pr-fields{display:flex;gap:9mm;align-items:flex-end;height:6mm;margin-top:0.5mm;font-size:12.6pt;line-height:6mm;white-space:nowrap}
.suo-pr-group{display:inline-flex;align-items:flex-end;gap:4mm;flex:none}
.suo-pr-field{display:inline-flex;align-items:flex-end;gap:1.5mm;flex:none}
.suo-pr-field-line{display:inline-block;box-sizing:border-box;width:13mm;height:5mm;border-bottom:1pt solid #555}
.suo-field-name{flex:1;min-width:0}
.suo-field-name .suo-pr-field-line{flex:1;width:auto;min-width:40mm}
.suo-pr-solid{box-sizing:content-box;display:block;height:0;padding:0;border:0;border-top:1.5pt solid #333;margin:0.4mm 0 0}
.suo-pr-common{flex:none;box-sizing:border-box;width:198mm;padding-top:0.6mm}
.suo-pr-q{margin:0;font-size:13pt;line-height:5.6mm;font-weight:700}
.suo-pr-qhead{display:inline-block;margin-right:2mm;padding:0 1.5mm;border:1pt solid #333;border-radius:1mm;font-size:12.6pt;line-height:5mm}
.suo-pr-legend,.suo-pr-inputnote{margin:0;font-size:12.6pt;line-height:5.2mm}
.suo-pr-inputnote{display:flex;align-items:center;gap:1mm}
.suo-pr-box-sample{width:10mm!important;height:4.6mm!important}
.suo-pr-problems{display:grid;grid-template-columns:97mm 97mm;column-gap:4mm;flex:none;margin-top:0.8mm}
.suo-pr-col{display:flex;flex-direction:column}
.suo-pr-cell{box-sizing:border-box;height:38mm;overflow:hidden;display:flex;flex-direction:column}
.suo-pr-row1{display:flex;align-items:flex-start;height:28mm}
.suo-pr-no{flex:none;width:9mm;font-size:12.6pt;font-weight:700;line-height:6mm}
.suo-pr-svg{display:block;flex:none;width:75mm;height:28mm}
.suo-pr-label{font-size:13.5px;font-weight:700;fill:#000;font-family:inherit}
.suo-pr-circle{fill:none;stroke-width:1.6}
.suo-pr-circle-left{stroke:#000}
.suo-pr-circle-right{stroke:#000;stroke-dasharray:6 3}
.suo-pr-dot{fill:#000}
.suo-pr-row2{display:flex;align-items:center;height:10mm;padding-left:9mm;font-size:12.6pt;white-space:nowrap}
.suo-pr-scratch{display:inline-flex;box-sizing:border-box;width:45mm;height:10mm;border:1pt dashed #777;margin-right:3mm;align-items:flex-start}
.suo-pr-scratch-label{font-size:12.6pt;line-height:5mm;color:#333;padding-left:1mm}
.suo-pr-box{display:inline-block;box-sizing:border-box;width:20mm;height:8mm;border:1pt solid #333;margin-right:1mm}
.suo-pr-answers{flex:none;box-sizing:border-box;margin-top:0.5mm}
.suo-pr-dashed{box-sizing:content-box;display:block;height:0;margin:0 0 0.3mm;padding:0;border:0;border-top:2pt dashed #aaa}
.suo-pr-answers-title{font-weight:700;font-size:12.6pt;height:5mm;line-height:5mm}
.suo-pr-ans-cols{display:grid;grid-template-columns:97mm 97mm;column-gap:4mm}
.suo-pr-ans{margin:0;font-size:12.6pt;line-height:5.2mm;min-height:10.4mm;overflow-wrap:anywhere}
.suo-app-pdf-page .suo-pr-page{box-shadow:none;margin:0}

#pr-sheet[data-unit="set_union_overlap_total_1"]{width:198mm;max-width:none;padding:0;margin:calc(12px + 6mm) auto;background:transparent;box-shadow:none}
#pr-sheet[data-unit="set_union_overlap_total_1"]>:not(#pr-problems){display:none!important}
#pr-sheet[data-unit="set_union_overlap_total_1"]>#pr-problems{display:block}
/* 画面のプレビューでは、用紙の余白を白い縁で見せる（印刷の寸法は変えない）。 */
#pr-sheet[data-unit="set_union_overlap_total_1"] .suo-pr-page{box-shadow:0 0 0 6mm #fff,0 0 4px 6mm rgba(0,0,0,.12);margin-bottom:calc(8mm + 6mm)}
@media print{
  #page-print #pr-sheet[data-unit="set_union_overlap_total_1"]{width:auto!important;max-width:none!important;margin:0!important;padding:0!important;transform:none!important;box-shadow:none!important}
  #page-print #pr-sheet[data-unit="set_union_overlap_total_1"]>:not(#pr-problems){display:none!important}
  #page-print #pr-sheet[data-unit="set_union_overlap_total_1"]>#pr-problems{display:block!important}
  #page-print #pr-sheet[data-unit="set_union_overlap_total_1"] .suo-pr-page{display:flex!important;margin:0!important;box-shadow:none!important;break-after:auto;page-break-after:auto}
}