/* =========================================================
    '/assets/css/ai-review-report-modal.css'

AIレビュー報告モーダル（映画側と同等の見た目）
   対象構造:
     #review-report-modal
       .report-modal-backdrop
       .report-modal-content
   ========================================================= */

/* オーバーレイ本体 */
#review-report-modal {
  display: none;               /* JSで fadeIn される */
  position: fixed;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0; の省略形 */
  z-index: 10000;              /* ページ上の最前面へ */
  /* 端末のセーフエリアに余白を確保（未対応ブラウザは0pxとして評価） */
  padding:
    max(0px, env(safe-area-inset-top))
    max(0px, env(safe-area-inset-right))
    max(0px, env(safe-area-inset-bottom))
    max(0px, env(safe-area-inset-left));
}

/* 半透明の背景 */
#review-report-modal .report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

/* モーダルボックス */
#review-report-modal .report-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 画面中央に配置 */
  width: min(520px, calc(100% - 32px)); /* 四辺16pxのマージンを確保 */
  box-sizing: border-box;

  /* 端末/回転に強い高さ制御：100dvh を優先し、なければ 100vh にフォールバック */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* 内側スクロールが外へ伝搬しないように */

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  /* 上部に × ボタンのスペースを確保して“窮屈”回避 */
  padding: 56px 20px 20px;
  z-index: 10001; /* バックドロップより前面 */
}

/* 100dvh 非対応ブラウザ向けフォールバック */
@supports not (height: 100dvh) {
  #review-report-modal .report-modal-content {
    max-height: calc(100vh - 32px);
  }
}

/* セーフエリア分も高さから差し引く（対応ブラウザのみ有効） */
@supports (height: 100dvh) {
  #review-report-modal .report-modal-content {
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
  }
}

/* ヘッダー */
#review-report-modal h3 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.5;
}

/* 閉じるボタン（×） */
#review-report-modal .report-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #555;
}
#review-report-modal .report-modal-close:hover { opacity: 0.8; }

/* ラベル類（項目間の間隔を自然に） */
#review-report-category-options {
  margin: 6px 0 12px;
}
#review-report-category-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;            /* ← 3つの項目の間隔を広げる */
  line-height: 1.4;
}
#review-report-form label {
  display: block;
  font-weight: 600;
  margin: 12px 0 6px;
}

/* テキストエリア */
#review_report_text {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  min-height: 110px;
}

/* 送信ボタン */
#review-report-submit-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
#review-report-submit-btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* メッセージ */
.review-report-complete { color: #2e7d32; }
.review-report-error    { color: #d32f2f; }