/* confirm-dialog.css - 取り消せない操作の前に出す共通の確認ダイアログ */
.confirm-dialog-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:var(--z-modal);
}
.confirm-dialog{
  position:relative;
  background:var(--modal-bg-color);
  color:var(--color-text-primary);
  border:1px solid var(--color-accent);
  border-radius:8px;
  padding:24px;
  min-width:min(320px,90vw);
  max-width:min(440px,92vw);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
/* content に一覧や図を差し込むとき。文章だけの幅では収まらない */
.confirm-dialog.is-wide{
  max-width:min(680px,92vw);
}
.confirm-dialog-content{
  margin:0 0 20px 0;
}
.confirm-dialog-title{
  margin:0 0 12px 0;
  font-size:1rem;
  padding-right:1.5rem;
}
.confirm-dialog-message{
  margin:0 0 20px 0;
  font-size:0.85rem;
  line-height:1.6;
  white-space:pre-line;
  color:var(--color-text-secondary);
}
.confirm-dialog-buttons{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.confirm-dialog-buttons button{
  padding:0.5em 1.4em;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:0.85rem;
}
.confirm-dialog-cancel{
  background:var(--btn-bg);
  color:var(--color-text-primary);
}
.confirm-dialog-ok{
  background:var(--color-accent);
  color:#fff;
}
/* 3択以上のときの選択肢。取り消しと同じ見た目だと押し間違えるため枠で区別する */
.confirm-dialog-buttons button[data-choice].confirm-dialog-cancel{
  border:1px solid var(--color-accent);
}
.confirm-dialog-ok.is-danger{
  background:#a11;
  color:#fff;
}
/* 3択のうちの「消す」側。押し間違えないよう主ボタンと同じ塗りにはしない */
.confirm-dialog-cancel.is-danger{
  border-color:#a11;
  color:#e77;
}
.confirm-dialog-buttons button:focus-visible,
.confirm-dialog-close:focus-visible{
  outline:2px solid var(--color-text-primary);
  outline-offset:2px;
}
.confirm-dialog-close{
  position:absolute;
  top:8px;
  right:8px;
  background:transparent;
  border:none;
  color:var(--color-text-secondary);
  font-size:1rem;
  line-height:1;
  padding:4px 8px;
  cursor:pointer;
}
.confirm-dialog-close:hover{color:var(--color-text-primary);}