:root { --gap: 16px; }
* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto; }
main { max-width: 1200px; margin: auto; padding: var(--gap); }
h1 { margin: 0 0 var(--gap); }
.controls { display: grid; gap: var(--gap); max-width: 560px; }
.controls .row { display: flex; gap: var(--gap); align-items: center; }
textarea, input { width: 100%; padding: 8px; font: inherit; }
button { padding: 8px 12px; font: inherit; cursor: pointer; }
.preview { margin-top: 24px; }

/* 画面表示用（見た目サイズ）。両キャンバス共通 */
#preview, #answers {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  background: #fff;
  display: block;
  margin: 0 auto;
}

/* 2枚目は少し余白 */
#answers { margin-top: 24px; }

/* ---- 印刷用（A4横／余白ゼロ／2ページ） ---- */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  main, .preview {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
  }

  /* 両キャンバスをページ幅にフィット */
  #preview, #answers {
    width: 100vw !important;
    height: auto !important;
    border: none;          /* 印刷では枠線不要なら消す */
    margin: 0 auto !important;
  }

  /* 2ページ目に送る */
  #answers {
    page-break-before: always;
    break-before: page;
    margin-top: 0 !important;
  }
}