5초 안에 읽는 수업 시작 카드

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>5초 안에 읽는 수업 시작 카드</title>
<style>
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:grid;place-items:center;background:#fff5da;color:#18304a;font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif}.card{width:min(980px,calc(100% - 32px));min-height:min(620px,calc(100vh - 32px));display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;border-radius:32px;background:#fff;box-shadow:0 24px 80px rgba(74,52,10,.14)}.copy{padding:clamp(28px,6vw,72px);display:flex;flex-direction:column;justify-content:center}.eyebrow{color:#b85618;font-weight:900}.copy h1{margin:12px 0;font-size:clamp(38px,7vw,74px);line-height:1.08}.lead{font-size:clamp(18px,3vw,26px);line-height:1.5;color:#4b5c6d}.action{margin-top:28px;padding:20px 24px;border-radius:18px;background:#173d6b;color:#fff;font-size:clamp(18px,2.5vw,24px);font-weight:900}.done{margin:18px 0 0;font-weight:800;color:#317353}.visual{display:grid;place-items:center;background:#f6a936;padding:32px}.planet{width:min(320px,70vw);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#2b83d5;color:#fff;font-size:clamp(70px,12vw,128px);box-shadow:inset -28px -20px 0 rgba(0,0,0,.12)}.check{position:fixed;right:20px;bottom:20px;border:0;border-radius:999px;padding:14px 18px;background:#173d6b;color:#fff;font:inherit;font-weight:900;cursor:pointer}.check:focus-visible{outline:4px solid #fff;box-shadow:0 0 0 7px #173d6b}@media(max-width:720px){.card{grid-template-columns:1fr;min-height:0}.visual{min-height:260px;order:-1}.copy{padding:28px}.check{position:static;margin:20px}}
</style>
</head>
<body>
<main class="card">
  <section class="copy">
    <span class="eyebrow">초등 5학년 과학</span>
    <h1>오늘, 지구를 식히는 선택</h1>
    <p class="lead">두 행동을 비교하고 탄소 배출을 줄이는 쪽을 고릅니다.</p>
    <div class="action">지금 할 일 · 더 나은 행동 하나 고르기</div>
    <p class="done">완료 신호 · 선택 이유를 친구에게 한 문장으로 말하기</p>
  </section>
  <div class="visual" aria-label="푸른 지구 일러스트"><div class="planet" aria-hidden="true">🌍</div></div>
</main>
<button class="check" type="button" aria-pressed="false" aria-live="polite">5초 확인 시작</button>
<script>
const button=document.querySelector(".check");button.addEventListener("click",()=>{const active=button.getAttribute("aria-pressed")==="true";button.setAttribute("aria-pressed",String(!active));button.textContent=active?"5초 확인 시작":"제목·행동·완료가 보이면 통과";});
</script>
</body>
</html>