진행 표시 오류 재현 실험실

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>진행 표시 오류 재현 실험실</title>
<style>
*{box-sizing:border-box}body{margin:0;background:#101a29;color:#eef4fb;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}.lab{width:min(860px,calc(100% - 32px));margin:32px auto}.head span{color:#6ad6bd;font-weight:900}.head h1{font-size:clamp(32px,6vw,52px);margin:8px 0}.head p{color:#afbdd0}.grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;margin-top:24px}.panel{padding:22px;border:1px solid #314156;border-radius:20px;background:#172438}.panel h2{margin-top:0}.steps{display:grid;gap:10px}.steps button{display:flex;gap:12px;align-items:center;width:100%;border:1px solid #3b4d63;border-radius:14px;background:#1e2d43;color:#eef4fb;padding:14px;font:inherit;font-weight:800;text-align:left;cursor:pointer}.steps button:focus-visible,.run:focus-visible{outline:3px solid #ffd98c;outline-offset:3px}.steps button span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2d4058}.steps button[aria-pressed=true]{border-color:#6ad6bd;background:#153b39}.console{min-height:200px;border-radius:14px;background:#0c1421;padding:18px;color:#b9c9db;font-family:ui-monospace,monospace;line-height:1.7}.console strong{color:#6ad6bd}.run{width:100%;margin-top:14px;border:0;border-radius:14px;background:#6ad6bd;color:#0c2a27;padding:14px;font:inherit;font-weight:950;cursor:pointer}.status{margin-top:14px;color:#ffd98c;font-weight:800}@media(max-width:700px){.grid{grid-template-columns:1fr}.lab{margin:18px auto}.panel{padding:18px}}
</style>
</head>
<body>
<main class="lab">
  <header class="head"><span>Codex 검증 사례</span><h1>오류를 말하지 말고 재현하세요</h1><p>예상·실제·재현 순서가 갖춰져야 한 문제씩 안전하게 고칠 수 있습니다.</p></header>
  <section class="grid">
    <article class="panel"><h2>재현 순서</h2><div class="steps"><button type="button"><span>1</span>첫 번째 보기를 선택한다</button><button type="button"><span>2</span>다음을 두 번 누른다</button><button type="button"><span>3</span>화면을 375px로 줄인다</button></div><p class="status" aria-live="polite">0 / 3 재현</p></article>
    <article class="panel"><h2>작업 계약</h2><div class="console"><strong>예상</strong> · 진행 숫자가 한 번씩 늘고 가로 스크롤이 없다.<br><strong>실제</strong> · 숫자가 두 칸씩 늘고 카드가 화면 밖으로 나간다.<br><strong>범위</strong> · 첫 수정은 진행 숫자만, 확인 뒤 너비를 고친다.<br><strong>유지</strong> · 선택 피드백과 다시 시작.</div><button class="run" type="button">검증 결과 보기</button><p class="status result" aria-live="polite">재현 순서를 먼저 완료하세요.</p></article>
  </section>
</main>
<script>
const steps=[...document.querySelectorAll(".steps button")],status=document.querySelector(".steps + .status"),result=document.querySelector(".result");steps.forEach((button,index)=>button.addEventListener("click",()=>{const previousReady=index===0||steps[index-1].getAttribute("aria-pressed")==="true";if(!previousReady){status.textContent="앞 순서부터 실행하세요.";return;}button.setAttribute("aria-pressed","true");const count=steps.filter(item=>item.getAttribute("aria-pressed")==="true").length;status.textContent=`${count} / 3 재현`;if(count===3)status.textContent="3 / 3 재현 · 수정 요청 준비 완료";}));document.querySelector(".run").addEventListener("click",()=>{const ready=steps.every(item=>item.getAttribute("aria-pressed")==="true");result.textContent=ready?"PASS · 두 문제를 한 번에 하나씩 수정하고 유지 기능까지 확인합니다.":"재현 순서를 먼저 완료하세요.";});
</script>
</body>
</html>