인터랙티브 수업자료 제작 브리프

<!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:#eef2f6;color:#172538;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;line-height:1.55}.page{width:min(960px,calc(100% - 32px));margin:32px auto}.head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.head span{font-weight:900;color:#236fce}.head h1{margin:6px 0 0;font-size:clamp(30px,5vw,46px);line-height:1.15}.state{padding:8px 12px;border-radius:999px;background:#dceaff;color:#1557a8;font-weight:900}.board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card{min-height:170px;padding:22px;border:1px solid #d6e0eb;border-radius:18px;background:#fff}.card small{font-weight:900;color:#64738a}.card h2{margin:7px 0;font-size:21px}.card p{margin:0;color:#52627a}.source{margin-top:14px;padding-top:12px;border-top:1px solid #e5ebf2;font-size:14px}.unknown{background:#fff8df;border-color:#ecd988}.next{grid-column:1/-1;background:#173f73;color:#fff}.next small,.next p{color:#d7e5f7}.next h2{font-size:27px}.checks{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.checks button{border:1px solid #b9cce5;border-radius:999px;background:#fff;color:#173f73;padding:10px 14px;font:inherit;font-weight:900;cursor:pointer}.checks button:focus-visible{outline:3px solid #8fc1ff;outline-offset:3px}.checks button[aria-pressed=true]{background:#bfe4cf;border-color:#75b493}@media(max-width:700px){.board{grid-template-columns:1fr}.next{grid-column:auto}.head{align-items:start;flex-direction:column}}
</style>
</head>
<body>
<main class="page">
  <header class="head"><div><span>ChatGPT Work 결과 사례</span><h1>제작 브리프 · 지역 인구 변화표 읽기</h1></div><strong class="state" aria-live="polite">다음 행동 1개</strong></header>
  <section class="board">
    <article class="card"><small>01 사용자</small><h2>초등 6학년 학생</h2><p>인구 변화표에서 두 연도를 골라 변화의 방향을 근거 문장으로 설명합니다.</p></article>
    <article class="card"><small>02 학습 목표</small><h2>자료를 비교하고 근거 말하기</h2><p>늘었다·줄었다·비슷하다 중 하나를 고른 뒤 수치를 근거로 씁니다.</p></article>
    <article class="card"><small>03 화면 순서</small><h2>표 보기 → 선택 → 문장 완성</h2><p>한 화면에서 독립된 행동 하나만 수행합니다.</p></article>
    <article class="card"><small>04 사용할 근거</small><h2>2016–2025 가상 인구표</h2><p>전체 인구와 65세 이상 비중을 사용하고 가상 자료임을 밝힙니다.</p><div class="source">출처 · 11-source-population-table.html / 2016–2025 표 · 13-source-lesson-memo.html / 완료 기준</div></article>
    <article class="card unknown"><small>05 넣지 않을 것</small><h2>학생·보호자 정보와 개인 연락처</h2><p>가상 학교 정보를 실제 일정처럼 표현하지 않고, 표에 없는 인구 감소 원인을 단정하지 않습니다.</p><div class="source">출처 · 12-source-school-notice.html / 자료에 넣지 않을 정보 · 13-source-lesson-memo.html / 확인 필요 2</div></article>
    <article class="card"><small>06 완료 기준</small><h2>선택·근거·다시 시작</h2><p>375px와 키보드에서 세 기능을 직접 확인합니다.</p></article>
    <article class="card next"><small>다음 제작 행동</small><h2>표를 보고 근거 문장을 완성하는 단일 HTML 한 개 만들기</h2><p>요청을 더 늘리지 않고 이 행동 하나를 제작합니다.</p><div class="checks"><button type="button">사용자 확인</button><button type="button">근거 확인</button><button type="button">완료 기준 확인</button></div></article>
  </section>
</main>
<script>
const buttons=[...document.querySelectorAll("button")],state=document.querySelector(".state");buttons.forEach(button=>button.addEventListener("click",()=>{button.setAttribute("aria-pressed",String(button.getAttribute("aria-pressed")!=="true"));const count=buttons.filter(item=>item.getAttribute("aria-pressed")==="true").length;state.textContent=count===3?"제작 시작 가능":`${count} / 3 확인`;}));
</script>
</body>
</html>