送信ボタン — 二重送信防止（ローディング付き）

:root {
  --color-primary: #2B7FE8;
  --color-primary-dark: #1E6ECF;
  --color-error: #E53E3E;
  --color-border: #D0D7E0;
  --color-text: #1A2B3C;
  --color-muted: #5A6A7A;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #F4F6F9;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 16px;
}

/* ===カード=== */
.submit-lock-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  padding: 32px;
  width: 100%;
  max-width: 400px;
}

/* ===フィールド=== */
.submit-lock-field { margin-bottom: 16px; }

.submit-lock-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.submit-lock-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
}

.submit-lock-input:focus { border-color: var(--color-primary); }

/* ===エラーメッセージ=== */
.submit-lock-error {
  color: var(--color-error);
  font-size: 13px;
  margin: -8px 0 16px;
}
/* hidden属性の打ち消し（このセレクタはdisplay:blockなので本来は不要だが明示のため記述） */
.submit-lock-error[hidden] { display: none; }

/* ===送信ボタン=== */
.submit-lock-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s;
  font-family: inherit;
}

.submit-lock-btn:hover:not(:disabled) { background: var(--color-primary-dark); }
.submit-lock-btn:disabled { opacity: 0.75; cursor: not-allowed; }

/* スピナーアニメーション */
@keyframes spin { to { transform: rotate(360deg); } }
.submit-lock-btn-spinner { animation: spin 0.8s linear infinite; }

/* SVGのhidden属性はブラウザによっては効かないことがある（初期非表示の保険） */
.submit-lock-btn-spinner[hidden],
.submit-lock-btn-check[hidden] { display: none; }

/* ===デモ専用の補足表示=== */
.submit-lock-counter {
  margin: 16px 0 4px;
  font-size: 13px;
  color: var(--color-muted);
  text-align: center;
}

.submit-lock-hint {
  margin: 0;
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
}

@media (max-width: 480px) {
  .submit-lock-card { padding: 24px; }
}

// ===== 動作確認の切り替え =====
// true → 送信成功をシミュレート、false → 送信失敗をシミュレート
// 両方の動作を確認したら、この定数と下の setTimeout を実際の送信API呼び出しに差し替えてください
var SIMULATE_SUCCESS = true;
var FAKE_SUBMIT_MS   = 1500;

// 二重送信防止用のフラグ（disabled属性と併用する）
var isSubmitting = false;
// デモ専用：実際に送信処理が実行された回数
var submitCount = 0;

var submitLockForm  = document.getElementById('submitLockForm');
var submitLockBtn   = document.getElementById('submitLockBtn');
var btnText         = submitLockBtn.querySelector('.submit-lock-btn-text');
var btnSpinner      = submitLockBtn.querySelector('.submit-lock-btn-spinner');
var btnCheck        = submitLockBtn.querySelector('.submit-lock-btn-check');
var errorMessage    = document.getElementById('submitLockError');
var countDisplay    = document.getElementById('submitLockCount');

// SVG の表示切替（element.hidden は SVGElement では動作しないため style.display を使う）
function showSvg(el) { el.style.display = 'inline'; }
function hideSvg(el) { el.style.display = 'none'; }

function setLoading() {
  // 即座に・同期的にロックする（非同期処理が始まる前にガードを立てるのがポイント）
  isSubmitting = true;
  submitLockBtn.disabled = true;
  btnText.textContent = '送信中...';
  hideSvg(btnCheck);
  showSvg(btnSpinner);
}

function setSuccess() {
  submitCount++;
  countDisplay.textContent = submitCount;
  hideSvg(btnSpinner);
  btnText.textContent = '送信完了';
  showSvg(btnCheck);
  // 成功時はボタンを無効のまま維持する（isSubmitting も true のまま）
}

function setFailure() {
  submitCount++;
  countDisplay.textContent = submitCount;
  hideSvg(btnSpinner);
  hideSvg(btnCheck);
  btnText.textContent = '送信する';
  errorMessage.hidden = false;
  // 失敗時は再送信できるようにロックを解除する
  isSubmitting = false;
  submitLockBtn.disabled = false;
}

// クリックイベントではなく submit イベントでガードする。
// テキスト入力欄でのEnterキー送信も同じ submit イベントとして発火するため、
// ここ1箇所でガードすればクリック・Enterキーのどちらの経路でも二重送信を防げる
submitLockForm.addEventListener('submit', function (e) {
  e.preventDefault();

  // 送信処理中は以降のクリック・Enter送信を無視する（二重送信防止の本体）
  if (isSubmitting) return;

  errorMessage.hidden = true;
  setLoading();

  // 疑似レスポンス（実際は fetch 等の送信APIに差し替える）
  setTimeout(function () {
    if (SIMULATE_SUCCESS) {
      setSuccess();
    } else {
      setFailure();
    }
  }, FAKE_SUBMIT_MS);
});