가상 학교 안내문

<!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:#1b2638; --muted:#667085; --line:#dfe5ec; --accent:#087a63; --soft:#eaf8f4; }
    * { box-sizing:border-box; }
    body { margin:0; background:#f4f7f8; color:var(--ink); font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif; line-height:1.6; }
    main { width:min(760px,calc(100% - 32px)); margin:32px auto; }
    article { background:#fff; border:1px solid var(--line); border-radius:22px; padding:clamp(22px,5vw,40px); box-shadow:0 16px 45px rgba(35,55,70,.08); }
    h1 { margin:10px 0 6px; font-size:clamp(1.55rem,4vw,2.25rem); }
    h2 { margin:28px 0 8px; font-size:1.1rem; }
    p { margin:8px 0; }
    .eyebrow { color:var(--accent); font-weight:800; }
    .summary { padding:16px; border-radius:15px; background:var(--soft); }
    dl { display:grid; grid-template-columns:100px 1fr; gap:10px 16px; margin:18px 0; }
    dt { color:var(--muted); font-weight:700; }
    dd { margin:0; }
    button { margin-top:18px; 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 #ffd056; outline-offset:3px; }
    .check { margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; }
    .check[hidden] { display:none; }
    ul { padding-left:20px; }
    .meta { color:var(--muted); font-size:.92rem; }
    @media (max-width:520px) { dl { grid-template-columns:1fr; gap:2px; } dd { margin-bottom:8px; } }
  </style>
</head>
<body>
  <main>
    <article>
      <p class="eyebrow">Cowork 연습 자료 2 · 공개 정보</p>
      <h1>다온초등학교 수업 나눔 안내</h1>
      <p class="meta">가상 학교 안내문 · 작성일 2026년 7월 20일 · 작성 부서 교육연구부</p>

      <p class="summary">교사가 만든 인터랙티브 수업자료를 함께 사용해 보고, 학생의 다음 행동이 화면에서 분명한지 살펴봅니다.</p>

      <h2>운영 정보</h2>
      <dl>
        <dt>대상</dt><dd>교내 희망 교원</dd>
        <dt>일시</dt><dd>2026년 8월 12일 오후 3시</dd>
        <dt>장소</dt><dd>본관 2층 디지털 배움실</dd>
        <dt>준비물</dt><dd>개인 노트북, 최신 브라우저</dd>
        <dt>진행</dt><dd>예시 보기 10분, 개인 실습 25분, 함께 확인 15분</dd>
      </dl>

      <h2>자료에 넣을 수 있는 내용</h2>
      <ul>
        <li>연수 대상, 시간, 장소, 준비물, 활동 순서</li>
        <li>가상 수업 사례와 공개된 교육자료 링크</li>
        <li>문의 창구는 개인 연락처가 아닌 학교의 공식 안내 경로로 표시</li>
      </ul>

      <button id="toggle" type="button" aria-expanded="false" aria-controls="privacy-check">사용 전 확인 보기</button>
      <div id="privacy-check" class="check" hidden>
        <strong>자료에 넣지 않을 정보</strong>
        <ul>
          <li>학생·보호자 이름, 사진, 연락처, 상담 및 건강 정보</li>
          <li>개인 교사의 휴대전화 번호와 개인 메신저 주소</li>
          <li>가상 학교 정보를 실제 학교 일정처럼 표현하는 문장</li>
        </ul>
      </div>
      <p id="status" class="meta" role="status" aria-live="polite">작성일·작성 부서·가상 자료 표시를 확인하세요.</p>
    </article>
  </main>
  <script>
    const button = document.querySelector("#toggle");
    const panel = document.querySelector("#privacy-check");
    const status = document.querySelector("#status");
    button.addEventListener("click", () => {
      const willOpen = panel.hidden;
      panel.hidden = !willOpen;
      button.setAttribute("aria-expanded", String(willOpen));
      button.textContent = willOpen ? "사용 전 확인 닫기" : "사용 전 확인 보기";
      status.textContent = willOpen ? "넣지 않을 정보 세 가지를 열었습니다." : "사용 전 확인을 닫았습니다.";
    });
  </script>
</body>
</html>