/*movie-edit-modal-form.css*/
#movie-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000; /* 他の要素より上に */
}

.movie-edit-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6); /* 半透明の黒 */
}

.movie-edit-modal-content {
  position: absolute;
  top: 50%; /* 縦方向中央 */
  left: 50%; /* 横方向中央 */
  transform: translate(-50%, -50%); /* 正確な中央位置へ移動 */
  width: 90%;
  max-width: 700px;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  z-index: 10001; /* backdropよりも上に */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* 閉じるボタン（バツ印）をモーダル右上にシンプルに表示する */
.movie-edit-modal-content .modal-close-btn {
  position: absolute; /* 基準は.movie-edit-modal-content */
  top: 10px;  /* 上から10pxの位置 */
  right: 10px; /* 右から10pxの位置 */
  background: none; /* 背景色なし */
  border: none; /* 枠線なし */
  font-size: 26px; /* 大きめの文字サイズ */
  cursor: pointer; /* カーソルを指に */
  color: #888; /* 色をグレー系に */
  line-height: 1;
  padding: 0; /* 余白なし */
}

/* ホバー時の色変化（オプションで見やすく） */
.movie-edit-modal-content .modal-close-btn:hover {
  color: #333;
}

/* 既存 .movie-edit-modal-content に追加 */
.movie-edit-modal-content {
  /* 四辺に 16px 相当の安全余白を確保しつつ、端末のセーフエリアにも対応 */
  width: min(700px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  scrollbar-gutter: stable;
  touch-action: auto;

  /* セーフエリアを考慮したパディング（既存 padding:20px を拡張） */
  padding-top:    calc(20px + env(safe-area-inset-top));
  padding-right:  calc(20px + env(safe-area-inset-right));
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  padding-left:   calc(20px + env(safe-area-inset-left));
}

/* svh/dvh に対応している端末ではより正確に */
@supports (height: 100svh) {
  .movie-edit-modal-content { max-height: calc(100svh - 32px); }
}
@supports (height: 100dvh) {
  .movie-edit-modal-content { max-height: calc(100dvh - 32px); }
}

/* あると安定する（iOS のゴムスク抑止） */
#movie-edit-modal { overscroll-behavior: contain; }



/* モーダル内の見出しとフォームの余白調整 */
.movie-edit-modal-content .modal-header {
  margin-bottom: 20px; /* 上部タイトルとフォームの距離を適度に */
  padding-right: 30px; /* 閉じるボタンとの重なり防止 */
}

.movie-edit-modal-content .modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* モーダルフォーム内の各フォーム要素に対する余白とデザイン調整 */
#movie-edit-modal-fields textarea,
#movie-edit-modal-fields input[type="text"],
#movie-edit-modal-fields select {
  width: 100%; /* フォーム要素を幅いっぱいに */
  padding: 8px 10px; /* 入力欄内の余白 */
  margin-bottom: 15px; /* 各項目間の余白 */
  border-radius: 5px; /* 角丸デザイン */
  border: 1px solid #ccc; /* 境界線追加 */
  box-sizing: border-box; /* 内側にpaddingを含むサイズ計算 */
  font-size: 14px; /* 読みやすいフォントサイズ */
  color: #333; /* 入力文字色 */
}

/* プルダウンのデザイン調整 */
#movie-edit-modal-fields select {
  appearance: none; /* ブラウザ標準スタイル無効化 */
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="gray"><polygon points="0,0 20,0 10,10"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px top 50%; /* 矢印の位置調整 */
  background-size: 8px 8px; /* 矢印サイズ調整 */
}

/* 保存ボタン調整 */
.movie-edit-modal-content .modal-submit-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  margin-top: 10px;
}

.movie-edit-modal-content .modal-submit-btn:hover {
  background-color: #0056b3;
}

/* 削除ボタンデザイン改善 */
#movie-edit-modal-fields .multi-tag-del-btn {
  background-color: #ff4d4f; /* 赤系カラー */
  color: #fff; /* 白色文字 */
  border: none;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
  margin-left: 8px; /* 入力フィールドとの余白調整 */
}

#movie-edit-modal-fields .multi-tag-del-btn:hover {
  background-color: #e33e41; /* 濃い赤色へ */
}

/* 追加ボタンデザイン改善 */
#movie-edit-modal-fields .multi-tag-add-btn {
  background-color: #28a745; /* 緑系カラー */
  color: #fff; /* 白色文字 */
  border: none;
  padding: 6px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
  margin-top: 8px; /* 上部の余白調整 */
}

#movie-edit-modal-fields .multi-tag-add-btn:hover {
  background-color: #218838; /* 濃い緑色へ */
}


/* 入力欄（氏名・フリガナ・役柄）を見やすく調整 */
#movie-edit-modal-fields .edit-row input[type="text"],
#movie-edit-modal-fields .edit-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

/* ドラッグハンドル（移動用アイコン） */
#movie-edit-modal-fields .row-drag-handle {
  cursor: move;
  font-size: 18px;
  color: #888;
  margin-right: 8px;
}

/* 詳細開閉ボタン */
#movie-edit-modal-fields .row-toggle-btn {
  background-color: #f0f0f0;
  color: #555;
  border: none;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

#movie-edit-modal-fields .row-toggle-btn:hover {
  background-color: #e0e0e0;
}

/* 削除ボタンのデザイン改善 */
#movie-edit-modal-fields .row-delete-btn {
  background-color: #ff4d4f;
  color: #fff;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
  transition: background-color 0.3s;
}

#movie-edit-modal-fields .row-delete-btn:hover {
  background-color: #e33e41;
}

/* 追加ボタンのデザイン改善 */
#movie-edit-modal-fields .row-add-btn {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 8px;
}

#movie-edit-modal-fields .row-add-btn:hover {
  background-color: #218838;
}

/* 主役チェックボックス周辺のデザイン改善 */
#movie-edit-modal-fields .main-role-check {
  margin-right: 4px;
}

/* エラーメッセージデザイン */
#movie-edit-modal-fields .field-error,
#movie-edit-modal-fields .main-role-error {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
}