APIエラーバナー（API Error Banner）

/* ===== CSS変数（色の調整はここで）===== */
:root {
  --aeb-primary:        #2B7FE8;
  --aeb-primary-hover:  #1A6FD8;
  --aeb-text:           #1A2332;
  --aeb-text-muted:     #5A6A7A;
  --aeb-border:         #D0D7E0;
  --aeb-spinner-color:  #9AA5B4;
  /* 警告（タイムアウト）*/
  --aeb-warn-bg:        #FFF7ED;
  --aeb-warn-border:    #F97316;
  --aeb-warn-text:      #7C2D12;
  /* エラー（403/500）*/
  --aeb-err-bg:         #FEF2F2;
  --aeb-err-border:     #EF4444;
  --aeb-err-text:       #7F1D1D;
  /* 接続断 */
  --aeb-net-bg:         #F4F6F9;
  --aeb-net-border:     #9AA5B4;
  --aeb-net-text:       #374151;
}

/* hidden 属性を display:flex が上書きしないよう明示的に打ち消す */
.aeb-spinner[hidden],
.aeb-banner[hidden] {
  display: none;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: sans-serif; padding: 32px 24px; background: #F4F6F9; }

/* ===== ラッパー ===== */
.aeb-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

/* ===== 案内テキスト ===== */
.aeb-guide {
  margin: 0;
  font-size: 13px;
  color: var(--aeb-text-muted);
}

/* ===== トリガーボタン ===== */
.aeb-trigger {
  align-self: flex-start;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--aeb-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: sans-serif;
  transition: background 0.15s, opacity 0.15s;
}
.aeb-trigger:hover:not(:disabled) {
  background: var(--aeb-primary-hover);
}
.aeb-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== スピナー ===== */
.aeb-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--aeb-text-muted);
}
.aeb-spinner-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--aeb-border);
  border-top-color: var(--aeb-spinner-color);
  border-radius: 50%;
  animation: aeb-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes aeb-spin {
  to { transform: rotate(360deg); }
}

/* ===== エラーバナー（共通）===== */
.aeb-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 4px solid transparent;
}
.aeb-banner-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.aeb-banner-body {
  flex: 1;
  min-width: 0;
}
.aeb-banner-title {
  margin: 0 0 3px;
  font-size: 14px;
  font-weight: 700;
}
.aeb-banner-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* ===== エラー種別カラー ===== */
.aeb-banner--warning {
  background: var(--aeb-warn-bg);
  border-color: var(--aeb-warn-border);
  color: var(--aeb-warn-text);
}
.aeb-banner--error {
  background: var(--aeb-err-bg);
  border-color: var(--aeb-err-border);
  color: var(--aeb-err-text);
}
.aeb-banner--network {
  background: var(--aeb-net-bg);
  border-color: var(--aeb-net-border);
  color: var(--aeb-net-text);
}

/* ===== 再試行ボタン ===== */
.aeb-retry-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif;
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.aeb-retry-btn:hover {
  opacity: 1;
}

// エラーパターン定義（順番に循環する）
var ERROR_PATTERNS = [
  {
    title: 'タイムアウトエラー',
    desc:  'サーバーが応答しません。時間をおいて再試行してください。',
    type:  'warning'
  },
  {
    title: '403 Forbidden',
    desc:  'アクセス権限がありません。ログイン状態を確認してください。',
    type:  'error'
  },
  {
    title: '500 Server Error',
    desc:  'サーバーで問題が発生しました。しばらく経ってから再試行してください。',
    type:  'error'
  },
  {
    title: '接続断（Network Error）',
    desc:  'ネットワーク接続を確認してください。',
    type:  'network'
  }
];

var currentIndex = 0;

var aebTrigger = document.getElementById('aebTrigger');
var aebSpinner = document.getElementById('aebSpinner');
var aebBanner  = document.getElementById('aebBanner');
var aebTitle   = document.getElementById('aebTitle');
var aebDesc    = document.getElementById('aebDesc');
var aebRetry   = document.getElementById('aebRetry');

// ボタン押下で通信を模擬してエラーを表示
function triggerRequest() {
  // 連打防止：disabled の間は処理しない
  if (aebTrigger.disabled) return;

  // ローディング開始
  aebTrigger.disabled = true;
  aebBanner.setAttribute('hidden', '');
  aebSpinner.removeAttribute('hidden');

  // 1.5秒後にエラーバナーを表示
  setTimeout(function() {
    aebSpinner.setAttribute('hidden', '');
    showError(ERROR_PATTERNS[currentIndex]);
    // 次回は次のパターンへ循環
    currentIndex = (currentIndex + 1) % ERROR_PATTERNS.length;
    aebTrigger.disabled = false;
  }, 1500);
}

// エラーバナーを表示する
function showError(pattern) {
  // 前回の種別クラスをリセットしてから付与
  aebBanner.classList.remove('aeb-banner--warning', 'aeb-banner--error', 'aeb-banner--network');
  aebBanner.classList.add('aeb-banner--' + pattern.type);

  // textContent で安全に代入（innerHTML に変数を結合しない）
  aebTitle.textContent = pattern.title;
  aebDesc.textContent  = pattern.desc;

  aebBanner.removeAttribute('hidden');
}

aebTrigger.addEventListener('click', triggerRequest);
aebRetry.addEventListener('click', triggerRequest);