수업 기획 메모

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>인구 변화 수업 기획 메모</title>
  <style>
    :root { --ink:#20273a; --muted:#667085; --line:#e0e4eb; --accent:#7b3fb2; --soft:#f5ecff; --warn:#8a4d00; --warn-bg:#fff4df; }
    * { box-sizing:border-box; }
    body { margin:0; background:#f6f5f8; color:var(--ink); font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; line-height:1.58; }
    main { width:min(820px,calc(100% - 32px)); margin:32px auto; }
    header, section { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; }
    section { margin-top:14px; }
    h1 { margin:8px 0; font-size:clamp(1.6rem,4vw,2.2rem); }
    h2 { margin:0 0 10px; font-size:1.12rem; }
    p { margin:8px 0; }
    .eyebrow { color:var(--accent); font-weight:800; }
    .goal { padding:16px; border-radius:14px; background:var(--soft); font-weight:700; }
    .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .card { border:1px solid var(--line); border-radius:16px; padding:18px; }
    .needs-check { color:var(--warn); background:var(--warn-bg); }
    ul { margin:8px 0; padding-left:20px; }
    button { border:0; border-radius:12px; padding:12px 16px; background:var(--accent); color:#fff; font:inherit; font-weight:800; cursor:pointer; }
    button:focus-visible { outline:4px solid #ffce4b; outline-offset:3px; }
    .meta { color:var(--muted); font-size:.92rem; }
    @media (max-width:640px) { .grid { grid-template-columns:1fr; } }
  </style>
</head>
<body>
  <main>
    <header>
      <p class="eyebrow">Cowork 연습 자료 3 · 수업 기획</p>
      <h1>인구 변화 자료 읽기</h1>
      <p class="goal">학습 목표: 자료의 출처와 성격을 확인하고, 인구 변화표에서 근거가 있는 설명 한 문장을 만듭니다.</p>
      <p class="meta">이 메모에는 실제 학생 정보가 없습니다. 다온시는 연수용 가상 지역입니다.</p>
    </header>

    <section aria-labelledby="plan-title">
      <h2 id="plan-title">수업에서 할 일</h2>
      <div class="grid">
        <div class="card">
          <strong>학생 행동</strong>
          <ul>
            <li>표에서 전체 인구가 줄어든 기간 찾기</li>
            <li>65세 이상 비중이 커진 근거 두 개 고르기</li>
            <li>자료가 가상임을 밝히고 설명 한 문장 쓰기</li>
          </ul>
        </div>
        <div class="card">
          <strong>완료 기준</strong>
          <ul>
            <li>연도와 수치를 함께 말합니다.</li>
            <li>출처 이름과 가상 자료 여부를 밝힙니다.</li>
            <li>표에 없는 원인을 추측하지 않습니다.</li>
          </ul>
        </div>
        <div class="card needs-check">
          <strong>확인 필요 1</strong>
          <p>실제 지역 자료로 바꿀 경우 최신 연도와 인구 기준일을 다시 확인해야 합니다.</p>
        </div>
        <div class="card needs-check">
          <strong>확인 필요 2</strong>
          <p>‘인구 감소의 원인’은 이 자료만으로 판단할 수 없습니다. 별도 근거 자료가 필요합니다.</p>
        </div>
      </div>
    </section>

    <section>
      <h2>제작 요청으로 넘길 내용</h2>
      <p>표에서 근거를 고르면 출처·연도·수치를 포함한 설명 문장이 보이는 단일 HTML 활동을 만듭니다. 실제 학생 정보, 점수 순위, 외부 저장은 넣지 않습니다.</p>
      <button id="confirm" type="button">확인 필요 항목 표시</button>
      <p id="status" class="meta" role="status" aria-live="polite">확인 필요 항목 두 개를 찾은 뒤 버튼을 누르세요.</p>
    </section>
  </main>
  <script>
    const button = document.querySelector("#confirm");
    const status = document.querySelector("#status");
    button.addEventListener("click", () => {
      status.textContent = "확인 필요 2개: 최신 실제 통계 확인, 인구 감소 원인 근거 추가.";
      button.textContent = "확인 필요 2개 표시됨";
    });
  </script>
</body>
</html>