/* ══════════════════════════════════════════════════════════════
   該当箇所確認（AI読取crop-check）モーダル 共通スタイル
   ──────────────────────────────────────────────────────────────
   営業マン画面（index.html）・お客様画面（apply.html）の両方から
   このファイルを読み込んで使う。以前は各画面がそれぞれ独自にモーダルの
   CSSを持っており（かつ営業マン画面には未実装だった）、見た目・挙動が
   ズレたりメンテナンスが二重になったりしないよう、ここに統一する。

   トリガーボタン（各アンペア行に出る「🔍 該当箇所を確認」ボタン。
   class="amp-row-crop-check"）自体の色・サイズは、行全体のデザインに
   合わせて各画面側のスタイルシート（app.css / apply.html内style）で
   個別に定義したままにしている。ここに置くのは、モーダル本体の
   スタイルのみ。
   ══════════════════════════════════════════════════════════════ */

.crop-check-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  padding: 16px;
}
.crop-check-overlay.active { display: flex; animation: cropCheckFadeIn 0.22s ease-out; }
.crop-check-box {
  background: #fff; border-radius: 14px; max-width: 420px; width: 100%;
  max-height: 90vh; overflow-y: auto; padding: 18px 18px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.crop-check-overlay.active .crop-check-box {
  animation: cropCheckPopIn 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cropCheckFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cropCheckPopIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.crop-check-title { font-size: 15px; font-weight: 800; margin-bottom: 4px; text-align: center; }
.crop-check-loading { font-size: 13px; color: #6b7280; padding: 24px 0; text-align: center; }

/* AI切り出しプレビュー（拡大表示canvas） */
.crop-check-canvas-wrap {
  position: relative; width: 100%; margin-top: 10px;
  border-radius: 10px; overflow: hidden; border: 1px solid #e5e5e5;
  background: #f3f4f6; min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.crop-check-canvas-wrap img { display: block; width: 100%; height: auto; }
.crop-check-caption { font-size: 12px; color: #6b7280; line-height: 1.6; margin-top: 10px; }
.crop-check-note { font-size: 11px; color: #6b7280; line-height: 1.6; margin-top: 6px; }
.crop-check-actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ── 位置調整UI：AIの切り出し位置がズレている場合に、元写真全体の上に
   ドラッグ・リサイズ可能な枠を重ねて表示し、手動で正しい位置に合わせられる
   ようにする。────────────────────────────────────────────────── */
.crop-check-adjust-toggle {
  display: none; width: 100%; text-align: center; margin-top: 10px;
  font-size: 12px; font-weight: 700; color: #2563eb; background: #eff6ff;
  border: 1px solid #93c5fd; border-radius: 8px; padding: 8px 10px; cursor: pointer;
  font-family: inherit;
}
.crop-check-adjust-toggle:hover { background: #dbeafe; }
.crop-check-adjust-wrap {
  display: none; position: relative; width: 100%; margin-top: 10px;
  border-radius: 10px; overflow: hidden; border: 1px solid #e5e5e5;
  touch-action: none;
}
.crop-check-adjust-wrap.active { display: block; }
.crop-check-adjust-wrap img {
  display: block; width: 100%; height: auto;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.crop-check-box-handle {
  position: absolute; border: 2px solid #2563eb; background: rgba(37,99,235,0.18);
  box-sizing: border-box; cursor: move; touch-action: none;
}
.crop-check-corner {
  position: absolute; width: 20px; height: 20px; margin: -10px;
  background: #2563eb; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); touch-action: none;
}
.crop-check-corner.cch-nw { top: 0;   left: 0;   cursor: nwse-resize; }
.crop-check-corner.cch-ne { top: 0;   left: 100%; cursor: nesw-resize; }
.crop-check-corner.cch-sw { top: 100%; left: 0;   cursor: nesw-resize; }
.crop-check-corner.cch-se { top: 100%; left: 100%; cursor: nwse-resize; }
.crop-check-adjust-hint { font-size: 11px; color: #6b7280; text-align: center; margin-top: 6px; }
.crop-check-reset-btn {
  display: none;
  font-size: 11px; font-weight: 700; color: #6b7280; background: #f4f4f4;
  border: 1px solid #e5e5e5; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  font-family: inherit;
}
.crop-check-reset-btn:hover { background: #eee; }