/* 通知（フラッシュメッセージ）。★操作の結果を、一度手を止めて見せる。
 *
 * ★本文の頭に1行足す形をやめた理由は inc/layout.php の flash_render() に。
 * ★色だけで区別しない。色が分からなくても**形**（印）で分かるようにする。
 */

/* ---------------------------------------------------------------- 通知 */
/* ★登録や決済の結果を黙らない。
 * ★本文の頭に1行足す形はやめた。スクロールしていると視界の外に出て、
 *   「出したのに伝わらない」が起きる。手を止めさせるほうが確実。
 * ★見た目は期間選択と同じ .mask/.dlg を使い回す。通知だけ別の作りにしない。 */
.flash-mask { z-index: 40; }        /* ヘッダー(10)・期間の選択(20)より上 */
.flash-dlg { max-width: 380px; animation: flash-in .16s ease-out; }
.flash-body { display: flex; gap: 12px; align-items: flex-start; }
/* ★色だけで区別しない。色覚や暗い画面でも形で分かるように印を変える。 */
.flash-icon { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.flash-icon svg { width: 22px; height: 22px; display: block; }
.flash-icon.ok svg { fill: var(--ok); }
.flash-icon.ng svg { fill: var(--ng); }
.flash-icon.info svg { fill: var(--accent); }
.flash-text { min-width: 0; }
.flash-label {
  font-size: 11px; color: var(--t3);
  letter-spacing: .04em;
}
.flash-msg {
  margin-top: 3px;
  font-size: 14px; line-height: 1.5; color: var(--t1);
  /* ★Stripeの英文エラーがそのまま入ることがある。切らずに折る。 */
  overflow-wrap: anywhere;
}
/* ★出るときだけ軽く動かす。消えるときは動かさない（次の操作を待たせない）。 */
@keyframes flash-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flash-dlg { animation: none; }
}