<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>3초 발표자 뽑기</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f3ee;color:#203d35;font:17px/1.6 system-ui,-apple-system,"Noto Sans KR",sans-serif}main{max-width:900px;margin:36px auto;padding:32px;background:#fff;border:1px solid #dcded5;border-radius:24px}h1{font-size:clamp(26px,5vw,40px);line-height:1.3;letter-spacing:-.03em;margin:8px 0 12px}h2{font-size:22px}p{margin:10px 0}.eyebrow{font-size:13px;font-weight:800;letter-spacing:.09em;color:#547060}.muted{color:#68786f;font-size:15px}.note{padding:14px 18px;background:#fff2c8;border-radius:12px;color:#4f481f}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit;border-radius:10px;padding:12px 16px}button{background:#245445;color:white;border:0;cursor:pointer;font-weight:700}button.secondary{background:#edf2ed;color:#245445}button:disabled{opacity:.45;cursor:wait}input,textarea,select{border:1px solid #bacbc2;background:#fff;color:#203d35;max-width:100%}input,textarea{flex:1;min-width:180px}textarea{width:100%;min-height:150px;resize:vertical}label{font-weight:700}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #e3ae35;outline-offset:3px}.card{border:1px solid #dce5df;padding:18px;border-radius:16px;margin:12px 0}.big{font-size:clamp(36px,8vw,72px);font-weight:800;text-align:center;padding:40px 0;background:#edf3ed;border-radius:18px}.badge{display:inline-block;background:#ecf2ed;color:#245445;padding:4px 10px;border-radius:7px;font-size:14px}.todo{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #e7ece8}.todo span{flex:1;overflow-wrap:anywhere}.todo.done span{text-decoration:line-through;color:#809086}.error{color:#9c382a}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:16px/1.7 system-ui,"Noto Sans KR",sans-serif}.hidden{display:none}nav{display:flex;gap:8px;flex-wrap:wrap}@media(max-width:600px){main{margin:0;padding:22px 18px;border-radius:0;border:0;min-height:100vh}.todo{flex-wrap:wrap}button{min-height:48px}}</style></head><body><main><div class="eyebrow">01 · 첫 요청의 실행 예시</div><h1>누가 먼저 해 볼까요?</h1><p>가상 이름 10개 중 한 명을 뽑습니다. 같은 사람이 다시 뽑힐 수도 있어요.</p><div id="result" class="big" aria-live="polite">준비됐나요?</div><div class="row"><button id="draw">3초 뽑기 시작</button><span id="status" class="muted">학생1 ~ 학생10</span></div><p class="note">확인할 것: 실행 중 버튼 잠금 → 3초 뒤 한 이름에서 멈춤 → 다시 실행</p></main><script>const names=Array.from({length:10},(_,i)=>'학생'+(i+1));const draw=document.getElementById('draw'),result=document.getElementById('result'),status=document.getElementById('status');draw.addEventListener('click',()=>{draw.disabled=true;status.textContent='이름이 바뀌는 중이에요';const tick=setInterval(()=>{result.textContent=names[Math.floor(Math.random()*names.length)]},80);setTimeout(()=>{clearInterval(tick);const winner=names[Math.floor(Math.random()*names.length)];result.textContent=winner;status.textContent=winner+' 발표 차례입니다';draw.disabled=false},3000)});</script></body></html>