/* utils/custom_dialog.js が組み立てるダイアログのスタイル。
 *
 * ⚠️ **JS の util と対で使う**。custom_dialog.js を読む面はこの CSS も読むこと。
 * 読まないとダイアログが素のまま本文の末尾に出る (計画書 185 の自己点検で発見)。
 *
 * 元は pixel_art_contests.css の中にあったものを、単語練習帳のカバー購入
 * (計画書 185) で 3 つ目の面から必要になった時点で切り出した。
 */
/* design-allow-start: color-literal */
/* ダイアログは固定ダーク前提の面。pixel_art_editor と同様にテーマ非依存の固定色を使う */

.pxm-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
}
.pxm-modal {
  /* ピクセルアート選考会も pixel_art_editor と同じく固定ダーク前提。
     テーマ依存変数を dark 値に局所上書き */
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted: #888;
  --card-bg: #2a2a44;
  --bg-secondary: rgba(255,255,255,0.05);
  --border-color: rgba(255,255,255,0.15);
  --border: rgba(255,255,255,0.15);
  background: #1a1a2e;
  color: var(--text-primary);
  border-radius: 12px; width: 95vw; max-width: 600px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.pxm-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pxm-modal-title { font-weight: 600; font-size: 1rem; }
.pxm-modal-close {
  background: none; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer;
  padding: 0.25rem; line-height: 1;
}
.pxm-modal-close:hover { color: #fff; }
.pxm-modal-body { flex: 1; overflow-y: auto; padding: 1rem; }

/* --- カスタムダイアログ（alert/confirm 置き換え） --- */
.pac-dialog-modal {
  max-width: 420px;
}

.pac-dialog-message {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.pac-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.pac-dialog-btn {
  padding: 0.4rem 1rem;
  font-size: 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.pac-dialog-btn:hover {
  background: rgba(255,255,255,0.06);
}

.pac-dialog-btn-cancel {
  color: var(--text-muted);
}

.pac-dialog-btn-ok {
  background: var(--lh-accent);
  color: #1a1a1a;
  font-weight: 600;
  border-color: var(--lh-accent);
}

.pac-dialog-btn-ok:hover {
  background: rgba(255, 204, 34, 0.9);
}

/* ⚠️ ここは .pxm-modal（固定ダーク）の中なので、light/dark で反転する
   --lh-danger / --text-on-accent を使うと hover 側と噛み合わない。
   実測: 既定 4.82 に対し **hover が 3.39（light-shell）= 押すと薄くなる逆転**だった
   （hover の地だけ固定の明るい赤で、文字は light テーマだと #fff のまま）。
   固定ダーク面の流儀に合わせて両方とも固定色にし、hover は濃くする向きに揃える
   （既定 7.31 / hover 8.70。計画書 182 Phase 3-3 の自己点検） */
.pac-dialog-btn-ok.pac-dialog-btn-danger {
  background: rgba(185, 28, 28, 0.9);
  color: #fff;
  border-color: rgba(185, 28, 28, 0.9);
}

.pac-dialog-btn-ok.pac-dialog-btn-danger:hover {
  background: rgba(153, 27, 27, 0.95);
}

/* design-allow-end: color-literal */