수업 제작 근거 묶음

<!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:#f3f0ea;color:#282622;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;line-height:1.6}.page{width:min(900px,calc(100% - 32px));margin:32px auto 64px}.head{padding:34px;border-radius:24px;background:#312f2a;color:#fff}.head span{color:#e5b65d;font-weight:900}.head h1{margin:8px 0;font-size:clamp(30px,5vw,48px)}.head p{margin:0;color:#e6e2d9}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.card{padding:22px;border:1px solid #ddd4c5;border-radius:18px;background:#fff}.card h2{margin:0 0 12px;font-size:19px}.card ul{margin:0;padding-left:22px}.source{display:block;margin-top:8px;color:#6a5a3b;font-size:14px}.decision{border-left:6px solid #df9c31}.warning{background:#fff5df}.next{grid-column:1/-1;background:#e8f1ec;border-color:#b9d0c2}.next strong{font-size:22px}.checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.checks button{border:1px solid #b9d0c2;border-radius:999px;background:#fff;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}.checks button:focus-visible{outline:3px solid #246144;outline-offset:3px}.checks button[aria-pressed=true]{background:#246144;color:#fff}.status{margin:14px 0 0;font-weight:800;color:#246144}@media(max-width:680px){.grid{grid-template-columns:1fr}.next{grid-column:auto}.head{padding:24px}}
</style>
</head>
<body>
<main class="page">
  <header class="head"><span>Claude Cowork 정리 사례</span><h1>6학년 사회 · 우리 지역의 인구 변화</h1><p>원본은 수정하지 않고, 확인한 사실과 제작 결정을 분리했습니다.</p></header>
  <section class="grid">
    <article class="card"><h2>학습 목표</h2><p>연도와 수치를 근거로 인구 변화를 설명하고, 자료가 가상임을 밝힌다.</p><span class="source">출처 · 13-source-lesson-memo.html / 학습 목표</span></article>
    <article class="card warning"><h2>넣지 않을 정보</h2><ul><li>학생·보호자 이름과 연락처</li><li>개인 교사의 연락처</li><li>가상 학교 정보를 실제 일정처럼 보이게 하는 문장</li></ul><span class="source">출처 · 12-source-school-notice.html / 자료에 넣지 않을 정보</span></article>
    <article class="card"><h2>확인된 사실 1</h2><p>다온시 전체 인구는 2016년 312,400명에서 2025년 293,800명으로 감소했다.</p><span class="source">출처 · 11-source-population-table.html / 2016·2025 전체 인구 행</span></article>
    <article class="card"><h2>확인된 사실 2</h2><p>65세 이상 인구 비중은 2016년 14.0%에서 2025년 22.9%로 증가했다.</p><span class="source">출처 · 11-source-population-table.html / 2016·2025 비중 행</span></article>
    <article class="card"><h2>확인된 사실 3</h2><p>현재 자료만으로 인구 감소의 원인을 판단할 수 없다.</p><span class="source">출처 · 13-source-lesson-memo.html / 확인 필요 2</span></article>
    <article class="card decision"><h2>제작 결정</h2><p>학생은 인구 변화표에서 두 연도를 고르고 ‘늘었다·줄었다·비슷하다’ 중 하나를 선택한 뒤 근거 문장을 완성한다.</p></article>
    <article class="card decision"><h2>확인 필요</h2><p>실제 지역 자료로 바꿀 때 최신 연도와 인구 기준일을 다시 확인한다.</p><span class="source">출처 · 13-source-lesson-memo.html / 확인 필요 1</span></article>
    <article class="card next"><h2>다음 제작 요청</h2><strong>인구 변화표에서 연도와 수치를 골라 근거 문장을 완성하는 단일 HTML을 만든다.</strong><div class="checks"><button type="button">사실 1 원문 대조</button><button type="button">사실 2 원문 대조</button><button type="button">사실 3 원문 대조</button></div><p class="status" aria-live="polite">0 / 3 확인</p></article>
  </section>
</main>
<script>
const buttons=[...document.querySelectorAll("button")],status=document.querySelector(".status");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;status.textContent=count===3?"3 / 3 확인 · 제작 재료로 사용 가능":`${count} / 3 확인`;}));
</script>
</body>
</html>