/**
 * アクセシビリティ対応 CSS
 *
 * 対応内容:
 *  1. スクリーンリーダー専用テキスト（.sr-only）
 *  2. 強化されたフォーカス表示
 *  3. 文字サイズ切り替え（body.fz-large / body.fz-xlarge）
 *  4. ハイコントラスト切り替え（body.high-contrast）
 *  5. アニメーション軽減（body.reduced-motion + prefers-reduced-motion）
 *  6. アクセシビリティツールバー
 *  7. スキップリンク強化
 *  8. PC-Talker / NVDA との互換性向上
 */

/* ============================================================
   1. スクリーンリーダー専用テキスト
   ============================================================ */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ============================================================
   2. 強化されたフォーカス表示（PC-Talker / NVDA のフォーカスを視覚化）
   ============================================================ */
:focus-visible {
  outline: 3px solid #ffb02e !important;
  outline-offset: 3px !important;
  border-radius: 2px;
  /* 影でさらに視覚的に強調 */
  box-shadow: 0 0 0 5px rgba(255, 176, 46, 0.25);
}
/* 入力フィールドのフォーカス */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #005ea7 !important;
  outline-offset: 0 !important;
  border-color: #005ea7 !important;
  box-shadow: 0 0 0 4px rgba(0, 94, 167, 0.2) !important;
}
/* ボタンのフォーカス */
button:focus-visible,
a:focus-visible {
  outline-offset: 4px !important;
}

/* ============================================================
   3. 文字サイズ切り替え
   ============================================================ */
body.fz-large {
  font-size: 1.15em;
}
body.fz-large h1 { font-size: 2.2rem; }
body.fz-large h2 { font-size: 1.8rem; }
body.fz-large h3 { font-size: 1.4rem; }
body.fz-large .btn { font-size: 1.05rem; padding: 12px 24px; }
body.fz-large input,
body.fz-large select,
body.fz-large textarea {
  font-size: 1.1rem;
  padding: 10px 12px;
}

body.fz-xlarge {
  font-size: 1.35em;
}
body.fz-xlarge h1 { font-size: 2.6rem; }
body.fz-xlarge h2 { font-size: 2.1rem; }
body.fz-xlarge h3 { font-size: 1.6rem; }
body.fz-xlarge .btn { font-size: 1.15rem; padding: 14px 28px; }
body.fz-xlarge input,
body.fz-xlarge select,
body.fz-xlarge textarea {
  font-size: 1.25rem;
  padding: 12px 14px;
}

/* ============================================================
   4. ハイコントラストモード
   ============================================================ */
body.high-contrast {
  background: #000 !important;
  color: #fff !important;
}
body.high-contrast a,
body.high-contrast a:visited {
  color: #ffe600 !important;
  text-decoration: underline !important;
}
body.high-contrast a:hover,
body.high-contrast a:focus {
  color: #fff !important;
  background: #ffe600 !important;
}
body.high-contrast .site-header,
body.high-contrast .admin-header,
body.high-contrast .site-footer,
body.high-contrast header,
body.high-contrast footer {
  background: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.high-contrast .brand,
body.high-contrast .brand a,
body.high-contrast h1,
body.high-contrast h2,
body.high-contrast h3,
body.high-contrast h4 {
  color: #fff !important;
}
body.high-contrast .card,
body.high-contrast .form-page,
body.high-contrast .form-section,
body.high-contrast .stat-card,
body.high-contrast section,
body.high-contrast .modal {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.high-contrast .btn-primary,
body.high-contrast .btn-secondary {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}
body.high-contrast .btn-primary:hover,
body.high-contrast .btn-primary:focus-visible,
body.high-contrast .btn-secondary:hover,
body.high-contrast .btn-secondary:focus-visible {
  background: #ffe600 !important;
  color: #000 !important;
}
body.high-contrast .btn-ghost,
body.high-contrast .btn-outline {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.high-contrast input::placeholder { color: #999 !important; }
body.high-contrast .err,
body.high-contrast .has-error {
  color: #ff6e6e !important;
}
body.high-contrast .auto-filled { background: #333 !important; color: #ffe600 !important; }
body.high-contrast .step-indicator li {
  background: #000 !important;
  color: #fff !important;
  border: 2px solid #fff !important;
}
body.high-contrast .step-indicator li.is-current {
  background: #ffe600 !important;
  color: #000 !important;
  font-weight: bold;
}
body.high-contrast .step-indicator li.is-done {
  background: #fff !important;
  color: #000 !important;
}
body.high-contrast .choice {
  border: 2px solid #fff !important;
  background: #000 !important;
}
body.high-contrast .choice:has(input:checked) {
  background: #ffe600 !important;
  color: #000 !important;
}
body.high-contrast .upload-area {
  background: #000 !important;
  border: 3px dashed #fff !important;
  color: #fff !important;
}
body.high-contrast .toast {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #ffe600 !important;
}

/* ============================================================
   5. アニメーション軽減
   ============================================================ */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   6. アクセシビリティツールバー（折りたたみ式・画面右下）
   ============================================================ */
/* 折りたたみ時の小さなボタン（右下に常駐） */
.a11y-fab {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1f2630;
  color: #fff;
  border: 2px solid #ffb02e;
  cursor: pointer;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s;
}
.a11y-fab:hover,
.a11y-fab:focus-visible {
  transform: scale(1.1);
  background: #2d3543;
}
.a11y-fab[aria-pressed="true"] {
  background: #ffb02e;
  color: #000;
}

.a11y-toolbar {
  position: fixed;
  bottom: 88px;
  right: 20px;
  z-index: 9998;
  background: #1f2630;
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  border: 2px solid #ffb02e;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  font-size: 0.85rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  min-width: 200px;
}
.a11y-toolbar[hidden] { display: none !important; }
.a11y-toolbar .a11y-label {
  font-size: 0.78rem;
  color: #ccc;
  padding: 0 4px;
  font-weight: 700;
}
.a11y-toolbar button {
  background: #2d3543;
  color: #fff;
  border: 1px solid #4a5260;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  min-height: 36px;
  font-family: inherit;
  width: 100%;
}
.a11y-toolbar button:hover,
.a11y-toolbar button:focus-visible {
  background: #3e4654;
  border-color: #ffb02e;
}
.a11y-toolbar button[aria-pressed="true"] {
  background: #ffb02e;
  color: #000;
  border-color: #fff;
  font-weight: 700;
}
.a11y-toolbar .a11y-group {
  display: flex;
  gap: 4px;
  align-items: stretch;
  border: 1px solid #4a5260;
  border-radius: 4px;
  padding: 2px;
  background: #181c24;
}
.a11y-toolbar .a11y-group button {
  border: 0;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 0.8rem;
  flex: 1;
  min-width: auto;
}
.a11y-toolbar .a11y-toolbar-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 24px;
  height: 24px;
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: #ccc;
  font-size: 1.2rem;
  line-height: 1;
  width: auto;
  cursor: pointer;
}
.a11y-toolbar .a11y-toolbar-close:hover { color: #ffb02e; background: transparent; }
@media print {
  .a11y-fab,
  .a11y-toolbar { display: none !important; }
}

/* PC-Talker等読み上げの妨げにならないように、ロード時にツールバーが
   フォーカスの先頭にならないよう、開閉ボタンを最後に置く */

/* ============================================================
   7. スキップリンク強化
   ============================================================ */
.skip-link,
a.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  background: #ffb02e;
  color: #000;
  padding: 10px 18px;
  text-decoration: underline;
  font-weight: 700;
  border: 2px solid #000;
  border-radius: 0 0 6px 0;
  transform: translateY(-110%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible,
.skip-link:active {
  transform: translateY(0);
  outline: 4px solid #000 !important;
  outline-offset: 0 !important;
}

/* ============================================================
   8. ARIA / フォーム関連
   ============================================================ */
/* 必須マーク（視覚的） + screen reader にも "必須" を読み上げ */
.req::after {
  content: '';
}
[aria-required="true"] {
  /* スクリーンリーダーが「必須」と読み上げる */
}
[aria-invalid="true"] {
  border-color: #c8102e !important;
  background: #fff5f5;
}
[aria-invalid="true"]:focus-visible {
  outline-color: #c8102e !important;
}

/* live region は視覚的には隠すが、スクリーンリーダーには読み上げさせる */
.a11y-live-region {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ステップインジケータ：現在ステップを明示 */
.step-indicator li[aria-current="step"] .num {
  outline: 3px solid #ffb02e;
  outline-offset: 2px;
}

/* 色だけでステータスを伝えないように、ステータスバッジに記号を付ける */
.status-badge[data-status="approved"]::before { content: '✓ '; }
.status-badge[data-status="rejected"]::before { content: '✕ '; }
.status-badge[data-status="pending"]::before { content: '⌛ '; }

/* ============================================================
   9. PC-Talker / NVDA 互換性
   ============================================================ */
/* PC-Talker は CSS の display: none / visibility: hidden を尊重するが、
   hidden 属性も尊重するので、JS で hidden 属性を使う */

/* PC-Talker はフォームのラベルとコントロールの関連付け（for/id）を厳格に解釈 */
/* label が無い input は aria-label でカバーする */

/* タッチターゲット 44x44px 以上を確保（WCAG 2.5.5 AAA） */
button, a.btn, input[type="submit"], input[type="button"] {
  min-height: 44px;
}
.btn-sm { min-height: 32px; }   /* admin の小さいボタン用に例外 */

/* チェックボックス / ラジオは label をクリック可能領域にする */
label.choice,
label.upload-area {
  min-height: 44px;
}

/* リンクの下線（色だけに頼らない） */
main a:not(.btn):not(.tab-btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   テスト環境バナー（本番ではないことを明示）
   ============================================================ */
.test-env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: repeating-linear-gradient(
    45deg,
    #ffeb3b,
    #ffeb3b 10px,
    #fff176 10px,
    #fff176 20px
  );
  color: #1a1a1a;
  text-align: center;
  padding: 6px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 2px solid #c8102e;
  letter-spacing: 0.05em;
}
.test-env-banner::before {
  content: '⚠ ';
  font-size: 1.1em;
}
.test-env-banner .sample-note {
  display: inline-block;
  background: #c8102e;
  color: #fff;
  padding: 1px 8px;
  border-radius: 3px;
  margin-left: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
body.has-test-banner {
  padding-top: 36px !important;
}
@media print {
  .test-env-banner { display: none !important; }
  body.has-test-banner { padding-top: 0 !important; }
}

/* @media (prefers-contrast: more) 対応 */
@media (prefers-contrast: more) {
  body {
    background: #fff;
    color: #000;
  }
  .btn-primary {
    background: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
  }
  :focus-visible {
    outline: 4px solid #000 !important;
  }
}