/* edit_field.css を流用しつつ、入力レイヤだけ追加 */

/* user_input は「下絵が薄く見える」問題を避けるため、背景も不透明に寄せる */
.scroll {
  background: #fff;
}

#input-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
}

.input-item {
  position: absolute;
  box-sizing: border-box;
}

.input-control {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #008000;
  border-radius: 4px;
  background: transparent;
  color: #111;
  font: 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  padding: 2px 6px;
  outline: none;
}

.input-control:focus {
  border-color: #008000;
  box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.2);
}

textarea.input-control {
  resize: none;
  padding: 4px 6px;
  line-height: 1.25;
}

/* 印刷用の「値表示」(select等が印刷で空になる対策) */
.print-text {
  display: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px 6px;
  color: #111;
  font: 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  white-space: pre-wrap;
  overflow: hidden;
}

@media print {
  /* A4に収める：bodyのpadding等で横幅が増えるのを防ぐ */
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    height: 297mm;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  #message {
    display: none !important;
  }

  .toolbar {
    display: none !important;
  }

  .scroll {
    overflow: visible !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  .canvas-wrapper {
    width: 210mm !important;
    margin: 0 !important;
  }

  .canvas-wrapper svg {
    width: 210mm !important;
    height: 297mm !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 印刷時: テーブル枠・罫線・円を物理的な太さで描画（1px→0.25mmで見やすく） */
  .canvas-wrapper svg rect[stroke]:not([stroke="transparent"]),
  .canvas-wrapper svg line[stroke]:not([stroke="transparent"]),
  .canvas-wrapper svg circle[stroke]:not([stroke="transparent"]) {
    stroke-width: 0.1mm !important;
    vector-effect: none !important;
  }

  /* 印刷時: 点線の黒い部分が長くなりすぎる問題を回避（ブラウザの印刷レンダリング差を補正） */
  .canvas-wrapper svg [stroke-dasharray="4 2"] {
    stroke-dasharray: 2 2 !important;
  }
  .canvas-wrapper svg [stroke-dasharray="4 2 0.5 2"] {
    stroke-dasharray: 2 2 0.5 2 !important;
  }

  .input-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* ブラウザによってはフォーム部品の値が印刷されないのでテキストに置換 */
  .input-control {
    display: none !important;
  }
  .print-text {
    display: block !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    /* 画面表示(14px)の約2倍相当: 28px ≒ 7.4mm (96dpi換算) */
    font-size: 4mm !important;
    line-height: 1.2 !important;
    /* 枠が小さい場合でも「見えない」を避ける */
    padding: 0 !important;
    overflow: visible !important;
    height: auto !important;
  }
}