<div class="keyboard-demo-container">
  <h2>접근성 심화 훈련장</h2>
  <p class="hint">💡 마우스 대신 <strong>Tab 키</strong>를 눌러 포커스를 이동해보세요.</p>

  <!-- 1. 키보드 접근성 (tabindex) -->
  <div class="card">
    <h3>1. 키보드 포커스 관리 (tabindex)</h3>
    <div class="flex-box">
      <!-- 기본적으로 포커스를 받을 수 없는 div에 tabindex="0" 부여 -->
      <div tabindex="0" class="focus-box" onclick="alert('클릭됨!')" onkeydown="if(event.key==='Enter') alert('키보드로 실행됨!')">
        난 div지만 Tab 키로 선택 가능해! (tabindex="0")
      </div>
      
      <!-- tabindex="-1"은 Tab 키로는 못 가고, 모달창 띄울 때 강제로 포커스 줄 때만 씁니다 -->
      <div tabindex="-1" class="focus-box disabled-box">
        난 탭 키로 절대 올 수 없어! (tabindex="-1")
      </div>
    </div>
  </div>

  <!-- 2. 동적 화면 알림 (aria-live) -->
  <div class="card">
    <h3>2. 동적 긴급 방송 시스템 (aria-live)</h3>
    <p>버튼을 누르면 화면 아래 텍스트가 바뀝니다. 스크린 리더는 이 변화를 감지하고 시각장애인에게 귀에다 방송해 줍니다.</p>
    
    <button id="addCartBtn" class="action-btn">장바구니에 담기</button>
    <button id="errorBtn" class="action-btn danger-btn">결제 오류 발생</button>

    <!-- polite: 현재 하던 말이 끝나면 예의 바르게 알려줌 -->
    <div id="liveRegionPolite" aria-live="polite" class="live-region polite-msg"></div>
    
    <!-- assertive: 다 무시하고 지금 즉시 경고함 -->
    <div id="liveRegionAssertive" aria-live="assertive" class="live-region assertive-msg"></div>
  </div>
</div>