# scatterbrain — 슬라이드 만들기 지시서 (채팅 AI용)

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`scatterbrain`)으로 수업 슬라이드를 만들어 주도록 쓴 지시서입니다.
> 파일을 읽고 쓸 수 있는 에이전트 AI(Claude Code 등)를 쓴다면 갤러리의 **받기 .zip**을 쓰세요.

## 사용법 (사람이 읽는 안내)

1. 채팅 AI 대화창에 **이 파일을 첨부**합니다. 첨부가 안 되면 파일 내용을 **전부 복사해 붙여 넣습니다**(끝까지 빠짐없이).
2. 이어서 만들고 싶은 수업을 말합니다(**"결과는 .html 파일로 만들어 줘"**도 같이 말하면 좋습니다). 예) "6학년 2학기 과학 1단원 3~4차시, 학습 목표는 ○○○, 00초등학교, 슬라이드로 만들어 줘(장 수와 구성은 내용에 맞게 정해 줘)."
3. AI가 먼저 **장별 구성안**(장마다 제목·내용·쓸 부품)을 보여 줍니다. 마음에 들면 "좋아, 만들어 줘", 고칠 곳이 있으면 "3장은 빼고 퀴즈를 하나 더 넣어 줘"처럼 말합니다. 구성 확인 없이 바로 받고 싶으면 2번에서 "구성 확인 없이 바로 만들어 줘"라고 하세요.
4. AI가 **슬라이드.html 파일**을 만들어 줍니다. 내려받아 더블클릭하면 브라우저에서 열립니다. 방향키(→ ←)와 스페이스로 넘깁니다. 만약 파일 대신 **코드만 글로 보여 주면** "코드 말고 .html 파일로 만들어서 내려받게 해 줘"라고 다시 요청하세요. 그래도 안 되면 코드를 모두 복사해 메모장에 붙여 넣고 `슬라이드.html`로 저장합니다(파일 형식은 '모든 파일', 인코딩은 UTF-8).
5. 고치고 싶으면 AI에게 "2장 제목을 ○○로 바꿔 줘"처럼 말하면 됩니다. 중간에 코드가 끊기면 "끊긴 곳부터 이어서 출력해 줘"라고 하세요.

서비스별 팁 (메뉴 이름은 서비스마다 바뀔 수 있습니다)
- 공통: 고를 수 있다면 **생각하는(추론) 모드**나 상위 모델을 쓰세요. 긴 코드를 끝까지 정확하게 쓰는 데 차이가 큽니다.
- ChatGPT: "캔버스로 만들어 줘" 또는 "다운로드할 수 있는 .html 파일로 만들어 줘"라고 요청합니다.
- Gemini: 입력창의 **Canvas**를 켜고 요청하면 화면에서 바로 보고 내려받을 수 있습니다.
- Claude: 결과가 **아티팩트**(오른쪽 창)로 열리면 거기서 내려받습니다.
- AI가 그림 파일(이미지)을 따로 만들어 주더라도 슬라이드에는 들어가지 않습니다. 슬라이드는 .html 파일입니다.
- **AI 화면 안의 미리보기에서는 색·모양·버튼이 안 나올 수 있습니다.** 이 디자인의 공통 모양과 동작은 슬라이드를 열 때 인터넷(`https://k-slide.web.app`)에서 불러오는데, 일부 서비스의 미리보기 창은 바깥 파일을 막기 때문입니다. **내려받아 브라우저(크롬·엣지 등)로 열면 정상**으로 보입니다.

알아 둘 점
- 이 디자인의 한글 글씨체는 제목 Cafe24 ClassicType(400) · 본문 Hahmlet Regular(400) · 포인트 야근하는 김주임입니다. 글씨체와 공통 모양·동작은 **인터넷에서 불러오므로 슬라이드를 열 때 인터넷이 필요**합니다(영문 글꼴도 마찬가지). 인터넷 없이 발표하려면 갤러리의 **받기 .zip**(모든 것이 파일 안에 들어 있음)을 쓰세요.
- AI가 긴 코드를 일부 생략하거나 어긋나게 쓸 수 있습니다. 열어서 한 번 확인하세요. 안 열리거나 깨지면 "코드가 생략되었어. 완성된 HTML 하나로 처음부터 끝까지 다시 출력해 줘"라고 요청합니다.
- 사진·학생 이름 같은 개인정보는 AI에게 넣지 마세요.

## 라이선스

폰트 라이선스 안내
==================

- Cafe24 ClassicType: Cafe24 ClassicType — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright ⓒ Cafe24 Corp. All Rights Reserved.
  파일: Cafe24Classictype-v1.1.ttf
- Hahmlet Regular: Hahmlet — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright 2020 The Hahmlet Project Authors (https://github.com/hyper-type/hahmlet)
  파일: Hahmlet-Regular.ttf
- 야근하는 김주임: 야근하는 김주임 — 야근하는 김주임 (Overtime Kim Joo-im) — 네이버 / 눈누: https://noonnu.cc/font_page/561
  파일: Kimjuim.ttf

SIL Open Font License 1.1 요약
- 폰트를 자유롭게 사용·복제·수정·재배포할 수 있습니다(폰트 파일 단독 판매는 불가).
- 수정본(글자를 줄인 서브셋 포함)은 원래 폰트의 '예약 이름'을 쓰지 못할 수 있습니다.
- 재배포할 때는 저작권 표시와 라이선스 문구를 함께 넣어야 합니다.
- 전문: https://openfontlicense.org

학교안심 글꼴과 easy3D 폴더의 글꼴은 사용자가 OFL로 확인한 내용을 따랐습니다. 배포 전에 각 배포처에서 최신 라이선스를 다시 확인하세요.

design.md 라이선스 (MIT)
=======================
design.md는 frontend-slides(https://github.com/zarazhangrui/frontend-slides)의 템플릿을 바탕으로 한 것이며, 아래 MIT 라이선스를 따릅니다.

MIT License

Copyright (c) 2025 Zara Zhang

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

# ▼▼▼ 여기부터 AI에게 주는 지시서 ▼▼▼

(이 줄 위의 '사용법'과 '라이선스'는 사람을 위한 안내입니다. AI는 아래 지시서를 따르세요.)

## 0. 당신(AI)의 일

당신은 슬라이드 제작 도우미입니다. 사용자가 알려 주는 수업 내용으로, 아래 **디자인 규칙(1)**, **부품 사전(3)**, **HTML 뼈대(4)**를 지켜 **브라우저에서 바로 열리는 슬라이드 HTML 파일 하나**를 만듭니다.
이 디자인의 공통 CSS(글씨체·색·부품 모양)와 동작 엔진은 사이트에 올려 둔 파일이라, 뼈대의 `<link>`·`<script src>` 두 줄이 불러옵니다. **당신이 쓰는 것은 슬라이드 HTML(`<section class="slide">`들과 내비)과, 꼭 필요할 때만 '추가 부품' CSS뿐입니다.** 공통 CSS의 내용은 참고용으로 5에 있습니다.

### 진행 순서
1. 사용자가 아직 수업 내용을 말하지 않았다면, 먼저 아래를 짧게 물어보세요: 학교급·학년·과목, 단원과 차시, 학습 목표, 학교 이름(선택), 원하는 장 수(말하지 않으면 내용 분량에 맞게 정함).
2. **장별 구성안을 먼저 보여 주고 확인을 받습니다**(아래 '구성은 내용이 정합니다'). 이때는 코드를 쓰지 마세요.
3. 확인을 받으면 HTML을 만들고, 내보내기 전에 아래 '내보내기 전 점검'을 하나씩 확인합니다.
- 내용은 사용자가 준 것만 쓰고, **숫자·사실·출처를 지어내지 마세요.** 모르면 묻거나 "(예시)"라고 표시하세요.
- **사용자가 주지 않은 사실(연도·기록·수치·등재·'세계 최고'·'가장 ○○하다' 같은 말)을 덧붙이고 싶으면, 구성안에 '추가 사실'로 따로 적어 확인을 받으세요.** 확인받지 않은 사실은 슬라이드에 넣지 않습니다. 널리 알려진 이야기라도 정확한 대상을 쓰세요(예: 유네스코 세계기록유산에 오른 것은 '한글'이 아니라 《훈민정음》 해례본이라는 책).

### 반드시 지킬 것
1. **디자인 규칙(1)을 어기지 마세요.** 색·글꼴·배치·장식·움직임 규칙과 '하지 말 것'을 그대로 따릅니다. 규칙에 없는 효과(임의의 애니메이션, 새 색, 새 장식)를 더하지 마세요.
2. **뼈대(4)의 공통 파일 두 줄을 그대로 두세요.** `<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/scatterbrain.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/scatterbrain.js"></script>`(body 맨 끝)는 주소 한 글자도 바꾸거나 지우지 마세요. **공통 CSS(5)나 엔진을 HTML 안에 옮겨 쓰거나, 줄이거나, 비슷하게 새로 짜지 마세요**(이미 불러오므로 같은 규칙을 또 쓰면 서로 부딪혀 깨집니다). `<style>`에는 '추가 부품' 줄과 그 아래에 직접 정의한 클래스만 둡니다. 엔진이 쓰는 속성 이름(`data-steps`, `data-s`, `data-quiz`, `data-opt`, `data-act`, `data-blank` 등)은 5의 엔진 사용법대로 씁니다.
3. **클래스는 부품 사전(3)과 공통 CSS(5)에 있는 것만 쓰세요.** 없는 클래스 이름을 지어 쓰면 아무 모양도 적용되지 않아 배치가 무너집니다(창이 좁아지고 빈 공간이 생김). 새 부품이 꼭 필요하면 `<style>`의 '추가 부품' 주석 줄 **아래에** 그 클래스를 직접 정의하세요(디자인 규칙의 색·선·글꼴만 사용). 모양을 `style="…"`로 하나하나 지정하는 것보다 부품 클래스를 쓰는 쪽이 낫습니다.
   - **새 배치를 만들기 전에, 예시 장의 배치 클래스로 할 수 있는지 먼저 보세요.** 직접 만든 배치는 화면을 볼 수 없는 상태에서 쓰기 때문에 깨질 위험이 큽니다. 예시 배치로 안 될 때만 새로 정의합니다.
4. **슬라이드의 장 수·순서·내용은 사용자 수업에 맞게 새로 구성하세요.** 뼈대의 슬라이드는 '계절의 변화' 예시이므로 그 문구는 하나도 남기지 마세요. 장을 늘리거나 줄이거나 순서를 바꾸면 **내비 점 개수와 쪽 표시(예: 01 / 06)를 실제 장 수에 맞추세요.** 뼈대의 6번째 장은 이 디자인의 대표 장치를 눌러 보여 주는 안내 장이므로, 그 부품·움직임(예: data-demo 시연 버튼과 .play 상태)만 참고하고 디자인 안내 문구는 남기지 마세요. 아래 '구성은 내용이 정합니다'를 따르세요.
5. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Cafe24 ClassicType(400) · 본문 Hahmlet Regular(400) · 포인트 야근하는 김주임)는 공통 CSS가 불러옵니다. `@font-face`를 새로 쓰지 말고, 글꼴은 `var(--kt)`(제목)·`var(--kb)`(본문)·`var(--ka)`(포인트) 변수로만 지정하세요.
6. **글자 크기와 화면 채우기** (슬라이드는 1920×1080 기준으로 그려져 화면 크기에 맞게 통째로 줄어듭니다)
   - 읽어야 하는 글(본문·설명·표 내용·보기)은 **28px 이상**, 보조 글(캡션·주석)은 **22px 이상**으로 씁니다. 창 제목줄·쪽 번호·작은 라벨 같은 장식 글자는 디자인 규칙의 크기를 따릅니다.
   - 창·판·카드가 **화면의 대부분을 채우게** 하세요. 한쪽에 작게 몰리거나 큰 빈 공간이 남으면 안 됩니다. 내용이 적은 장은 글자와 그림을 키우거나 다른 장과 합칩니다.
   - **높이 예산**: 장 제목과 아래 내비를 빼면 본문에 쓸 수 있는 높이는 대략 **650~750px**입니다. 모든 내용이 1920×1080 안에 들어가야 하고, 넘친 부분은 잘려서 보이지 않습니다. 쓰기 전에 줄 수 × 줄 높이(글자 크기의 약 1.5배)로 높이를 어림해 보세요.
   - **카드 규칙**: 한 장에 카드(칸)를 4개 이상 놓으면 카드마다 글은 **3줄 이하**로 줄입니다. 글이 들어가는 칸은 **너비 400px 이상**으로 두고(그림+글을 나란히 놓을 때는 글 칸 기준), 한 줄에 몇 글자밖에 안 들어가게 좁히지 마세요. 카드를 두 줄로 쌓아야 하면 그 줄들의 높이 합이 높이 예산 안에 드는지 확인합니다.
   - 제목은 **두 줄 이내**로 씁니다. 표지 제목은 한 줄에 15자 안팎으로 끊어 줄을 바꾸세요. 글이 창 밖으로 넘치거나 잘리면 글자를 줄이지 말고 문장을 짧게 고칩니다.
   - 한글은 단어 중간에서 줄이 바뀌지 않게(`word-break:keep-all`) 합니다(공통 CSS에 이미 들어 있음).
7. 저작권이 있는 글·그림·사진을 가져오지 마세요. **사용자가 요청하지 않으면 그림 파일(이미지 생성)을 따로 만들지 마세요. 슬라이드에 필요한 그림은 HTML 안에서 SVG·CSS로 그립니다.**

### 구성은 내용이 정합니다
- 예시 덱(deck.html)은 이 디자인의 **부품 견본**입니다. 따라야 할 장 구성이 아닙니다. 예시의 장 순서·장 수·제목 짜임·문장 구조를 그대로 따라 하지 마세요.
- 사용자가 준 내용을 먼저 살펴 **필요한 장 수와 장별 역할을 직접 정하세요.** 내용이 적으면 3~4장, 많으면 8장 이상도 괜찮습니다.
- **코드를 쓰기 전에 장별 구성안(장마다 제목 · 전할 내용 한 줄 · 쓸 부품)을 먼저 보여 주고 확인을 받으세요.** 사용자가 고치라고 하면 고친 구성안을 다시 보여 주고, "좋아", "만들어 줘"라고 하면 그때 만듭니다. 사용자가 처음부터 "구성 확인 없이 바로 만들어 줘"라고 했으면 이 단계는 건너뜁니다.
- 아래 부품 중 **필요한 것만 골라 쓰세요.** 안 쓰는 부품이 있어도 되고(예: 퀴즈 없는 덱), 같은 부품을 여러 장에 쓰거나 한 장에 섞어 써도 됩니다.
  · 표지 · 단계 버튼이 있는 흐름(data-steps) · 큰 숫자와 통계 · 그래프 · 비교와 표 · 목록과 인용 · 퀴즈와 다시 풀기 · 빈칸 채우기 · 시연 버튼(data-demo)
- 장마다 전하는 메시지는 하나로 하고, 같은 모양의 장이 연달아 나오지 않게 하세요.
- 지켜야 하는 것은 디자인 규칙(design.md)과 동작 엔진입니다. 자유로운 것은 장의 수·순서·구성입니다.

### 출력 방식
- **결과물은 '.html 파일'로 주세요.** 파일 이름은 슬라이드.html, 형식은 UTF-8 HTML 문서 하나입니다. 파일을 만들거나 내려받게 해 주는 기능(아티팩트·캔버스·코드 실행 환경·파일 첨부 등)이 있으면 **반드시 그 기능으로 .html 파일을 만들어 내려받거나 열 수 있게** 하세요. 코드만 글로 보여 주고 끝내지 마세요.
- 파일을 만들 수 있는 기능이 **전혀 없을 때만**, 설명은 한두 줄로 줄이고 **완성된 HTML 전체를 ```html 코드 블록 하나**로 출력하세요(이때 사용자가 직접 .html로 저장합니다).
- **`...`, "(이하 동일)", "(생략)" 같은 생략 표시를 쓰지 마세요.** `<!DOCTYPE html>`부터 `</html>`까지 전부 씁니다.
- 너무 길어 끊길 것 같으면 먼저 쓰지 말고, 사용자에게 "장 수를 줄일까요?"라고 묻거나, 끊기면 사용자가 "이어서"라고 할 때 **끊긴 글자 바로 다음부터** 이어 쓰세요.
- **미리보기 창에서 색·모양·버튼이 안 보여도 고치지 마세요.** 공통 CSS·엔진은 인터넷 주소(`https://k-slide.web.app`)에서 불러오는데, 일부 미리보기 창은 바깥 파일을 막습니다. 내려받아 브라우저로 열면 정상입니다. 이때 공통 CSS나 엔진을 HTML 안에 직접 써 넣으면 안 됩니다. 사용자에게 "내려받아 브라우저로 열어 보세요"라고 안내하세요.
- 파일을 코드(파이썬 등)로 써서 만든다면, HTML 전체를 **원문 그대로의 문자열**로 쓰세요(예: 파이썬은 따옴표 세 개짜리 raw 문자열). 백슬래시(`\`)가 다른 문자로 바뀌어 깨지는 일을 막기 위해서입니다. 새로 쓰는 CSS·JS에서도 `\00a0` 같은 이스케이프 대신 실제 문자를 쓰세요.
- 파일로 줬다면 "슬라이드.html을 내려받아 더블클릭하세요(열 때 인터넷 필요)"라고, 코드 블록으로 줬다면 "코드를 모두 복사해 메모장에 붙여 넣고 슬라이드.html로 저장한 뒤 더블클릭하세요(열 때 인터넷 필요)"라고 한 줄로 안내하세요.

### 내보내기 전 점검 (하나라도 아니면 고친 뒤 내보내기)
1. HTML에 쓴 클래스가 모두 부품 사전(3)·공통 CSS(5)·'추가 부품' 칸에 정의되어 있는가?
2. 공통 파일 두 줄(`<link>`·`<script src>`)이 주소 그대로 있고, 공통 CSS·엔진을 HTML 안에 옮겨 쓰지 않았는가? `@font-face`를 새로 쓰지 않았는가?
3. 장 수 = 내비 점 개수 = 쪽 표시 숫자인가?
4. 모든 장의 내용이 1920×1080 안에 들어가는가(높이 예산, 카드 규칙)? 제목·글이 창 밖으로 넘치거나 잘리지 않는가(특히 표지 제목과 마지막 장)? 읽는 글이 28px 이상이고, 화면에 큰 빈 공간이 없는가?
5. '계절의 변화' 예시 문구나 디자인 안내 문구가 남아 있지 않은가?
6. 사용자가 주지 않았고 확인도 받지 않은 사실을 넣지 않았는가?
7. `...`·"(생략)" 같은 생략이 없고, `<!DOCTYPE html>`부터 `</html>`까지 다 있는가?
8. 사용자가 요청하지 않은 그림 파일을 따로 만들지 않았는가?

---

## 1. 디자인 규칙 (`scatterbrain` design.md)

````markdown
---
version: alpha
name: Scatterbrain
description: "A Post-it-note-and-cork-board presentation system. Every content block is a colored sticky note on a textured paper or cork surface, layered with red thumbtacks, masking tape, and decorative doodles. Display type runs in Shrikhand (a chunky decorative display serif) on every headline; body type runs in Zilla Slab (a friendly slab serif); handwritten emphasis runs in Caveat. The palette is pastel sticky-note colors (yellow, blue, pink, green, orange, purple) on cream paper / cork / warm gradient backgrounds. The aesthetic borrows from creative-workshop wall art, brainstorming boards, and indie-studio mood boards: scattered slight rotations, multiple background texture variants per slide, pin / tape / drop-shadow combinations. The effect is warmth, play, and tactile creative-process energy."

colors:
  yellow: "#ffe066"
  yellow-deep: "#ffd43b"
  blue: "#a5d8ff"
  blue-deep: "#74c0fc"
  pink: "#ffc9c9"
  pink-deep: "#ff9f9f"
  green: "#b2f2bb"
  green-deep: "#8ce99a"
  orange: "#ffcc80"
  purple: "#d0bfff"
  cream: "#faf8f3"
  paper: "#f7f5f0"
  ink: "#2d2a26"
  ink-light: "#5c5750"
  shadow: "rgba(45, 42, 38, 0.15)"
  shadow-deep: "rgba(45, 42, 38, 0.25)"

typography:
  display-hero:
    fontFamily: "'Shrikhand', cursive"
    fontSize: "clamp(2.5rem, 5vw, 4.5rem)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  statement:
    fontFamily: "'Shrikhand', cursive"
    fontSize: "clamp(2rem, 4vw, 3.5rem)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline:
    fontFamily: "'Shrikhand', cursive"
    fontSize: "clamp(1.8rem, 3.5vw, 3rem)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  title:
    fontFamily: "'Shrikhand', cursive"
    fontSize: "clamp(1.3rem, 2.5vw, 1.8rem)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  body:
    fontFamily: "'Zilla Slab', serif"
    fontSize: "clamp(1rem, 1.5vw, 1.25rem)"
    fontWeight: 400
    lineHeight: 1.7
  list-item:
    fontFamily: "'Zilla Slab', serif"
    fontSize: "1.1rem"
    fontWeight: 400
    lineHeight: 1.6
  handwritten:
    fontFamily: "'Caveat', cursive"
    fontSize: "clamp(1.2rem, 2vw, 1.6rem)"
    fontWeight: 400
    lineHeight: 1.4
  handwritten-lg:
    fontFamily: "'Caveat', cursive"
    fontSize: "clamp(1.4rem, 2.5vw, 2rem)"
    fontWeight: 600
    lineHeight: 1.3
  handwritten-sm:
    fontFamily: "'Caveat', cursive"
    fontSize: "clamp(1.2rem, 1.5vw, 1.4rem)"
    fontWeight: 500
    lineHeight: 1.3
  label-script:
    fontFamily: "'Caveat', cursive"
    fontSize: "0.9rem"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.15em
    textTransform: uppercase
  stat-value:
    fontFamily: "'Shrikhand', cursive"
    fontSize: "1.8rem"
    fontWeight: 400
    lineHeight: 1.1
  caption-subtitle:
    fontFamily: "'Zilla Slab', serif"
    fontSize: "1.3rem"
    fontWeight: 400
    lineHeight: 1.6

spacing:
  slide-pad: 3rem
  post-it-pad-lg: "3rem 4rem"
  post-it-pad-md: "2.5rem"
  post-it-pad-sm: "1.5rem"
  post-it-pad-statement: "3.5rem 4rem"
  gap-lg: "3rem"
  gap-md: "2.5rem"
  gap-sm: "2rem"

canvas:
  width: 100vw
  height: 100vh

components:
  bg-cork:
    backgroundLayers: "radial-gradient ellipse + linear-gradient (warm browns) + SVG plus-sign pattern at 15% opacity"
    description: "Cork-board background variant. Warm tan/brown tonal gradient with a faint pattern of small plus-sign marks suggesting cork texture. Used on slides that feel like 'a wall of pinned notes.'"
  bg-paper:
    backgroundLayers: "linear-gradient (cream) + 40px grid lines at 8% opacity"
    description: "Desk-paper background variant. Cream gradient with a faint 40px grid overlay suggesting graph or notebook paper. Used on slides that feel like 'notes arranged on a desk.'"
  bg-warm:
    backgroundLayers: "multiple radial-gradients (yellow/blue/pink soft glows) + linear-gradient cream base"
    description: "Warm gradient background variant. Cream base with soft-glow ellipses of yellow, blue, and pink suggesting morning light. Used on slides that need a softer, less-textured atmosphere."
  grain-overlay:
    backgroundImage: "SVG fractal-noise filter, 256×256 tile"
    opacity: 0.04
    zIndex: 9999
    description: "Fixed full-viewport SVG grain texture above all content at 4% opacity. Reinforces the paper-and-cork tactile register. Always present."
  post-it:
    padding: "2rem"
    boxShadow: "2px 3px 15px {colors.shadow}, 0 1px 3px {colors.shadow-deep}"
    description: "Generic colored sticky-note base. Soft drop-shadow simulates the note's slight lift off the surface. Always carries a background color from the post-it palette (yellow, blue, pink, green, orange, purple, or white)."
  post-it-yellow:
    background: "linear-gradient(135deg, {colors.yellow} 0%, {colors.yellow-deep} 100%)"
    description: "Yellow sticky variant. Soft 135° gradient from light to deep yellow."
  post-it-blue:
    background: "linear-gradient(135deg, {colors.blue} 0%, {colors.blue-deep} 100%)"
    description: "Blue sticky variant."
  post-it-pink:
    background: "linear-gradient(135deg, {colors.pink} 0%, {colors.pink-deep} 100%)"
    description: "Pink sticky variant."
  post-it-green:
    background: "linear-gradient(135deg, {colors.green} 0%, {colors.green-deep} 100%)"
    description: "Green sticky variant."
  post-it-orange:
    background: "{colors.orange}"
    description: "Orange sticky variant. Flat fill (no gradient) — the only post-it that ships flat."
  post-it-purple:
    background: "{colors.purple}"
    description: "Purple sticky variant. Flat fill."
  post-it-white:
    background: "#fff"
    border: "2px solid {colors.ink}"
    description: "White note variant. Carries a 2px ink border (because pure white otherwise disappears into cream/paper backgrounds). Used as a 'plain note' in timelines or comparisons."
  pin:
    width: 16px
    height: 16px
    position: "::before, top: -12px, centered"
    background: "radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a)"
    boxShadow: "0 2px 4px {colors.shadow-deep}, inset -2px -2px 4px rgba(0,0,0,0.2)"
    description: "Red thumbtack mark sitting at the top-center of a post-it via ::before. Radial-gradient gives it a 3D bead-shaped highlight; inset shadow adds dimension. The default pin color."
  pin-blue:
    background: "radial-gradient(circle at 30% 30%, #4dabf7, #1864ab)"
    description: "Blue thumbtack variant."
  pin-green:
    background: "radial-gradient(circle at 30% 30%, #69db7c, #2f9e44)"
    description: "Green thumbtack variant."
  pin-gold:
    background: "radial-gradient(circle at 30% 30%, #ffd43b, #f59f00)"
    description: "Gold thumbtack variant."
  tape:
    width: 80px
    height: 25px
    position: "::after, top: -15px, centered, rotate(-2deg)"
    background: "rgba(255, 255, 255, 0.4)"
    border: "1px solid rgba(255, 255, 255, 0.3)"
    description: "Masking-tape mark across the top-center of a post-it via ::after. Translucent white, slightly rotated. Often combined with .pin so a single note has both tape and a tack."
  card-rotation:
    rotation: "±1° to ±15°"
    description: "Every post-it carries a small rotation. Statement and feature cards: ±1° to ±3°. Accent / floating notes: ±5° to ±15° (more dramatic to read as 'casually applied'). Rotations alternate direction across adjacent notes."
  feature-icon:
    width: 60px
    height: 60px
    border: "3px solid {colors.ink}"
    borderRadius: "50%"
    fontFamily: "'Shrikhand', cursive"
    fontSize: 1.5rem
    description: "Round ink-bordered icon containing a single character (letter, number, or symbol) in Shrikhand display. Used as a category marker at the top of feature post-its."
  versus-circle:
    width: 60px
    height: 60px
    background: "{colors.ink}"
    color: "{colors.paper}"
    borderRadius: "50%"
    fontFamily: "'Shrikhand', cursive"
    fontSize: 1.2rem
    boxShadow: "0 2px 8px {colors.shadow-deep}"
    description: "Ink-filled circle with cream text used between two compare-cards. Centered between the two cards with absolute positioning; reads as a 'vs' / 'and' connector."
  photo-frame:
    background: "#fff"
    padding: "1rem"
    boxShadow: "2px 3px 15px {colors.shadow}"
    rotation: "±1° to ±2°"
    description: "Polaroid-style image frame. White paper with 1rem padding around the inner image area; same drop shadow as post-its; small rotation. The inner image area has a 4:3 aspect ratio."
  chart-canvas:
    background: "#fff"
    padding: "2.5rem"
    boxShadow: "2px 3px 15px {colors.shadow}"
    rotation: "±1°"
    description: "White paper card hosting an inline SVG chart. Same drop shadow as post-its and photo-frames; small rotation. Charts use the post-it color palette for fills."
  stat-row:
    borderBottom: "1px dashed rgba(45, 42, 38, 0.2)"
    padding: "1rem 0"
    description: "A label-and-value row inside a stat post-it. Label in Zilla Slab body color; value in Shrikhand stat-value. Bottom-divider is a dashed ink-alpha hairline."
  doodle:
    opacity: 0.15
    stroke: "{colors.ink}"
    strokeWidth: 3
    description: "Decorative SVG mark placed absolutely in slide corners — a circle, squiggle, triangle, line, or X+ pair. All at 0.15 opacity, all in 3px ink stroke. Slides have 0–2 doodles each."
  timeline-connector:
    height: 60px
    pathStyle: "Q (quadratic) bezier curve at 0.3 opacity, stroke-dasharray '8 4', polygon arrowhead at end"
    description: "Dashed quadratic-bezier line between timeline nodes. Curve direction alternates row to row (concave up, concave down). Always ends with a triangle arrowhead."
  custom-cursor:
    cursor: "URL data-svg red-and-white thumbtack, 24×24, hotspot 12×12"
    description: "Browser cursor replaced with a tiny SVG thumbtack circle (red outer, white center) when hovering over any slide. Reinforces the 'pinning ideas to a board' metaphor."
---

## Frontend Slides Fixed-Stage Policy

When this design system is used by the `frontend-slides` skill, generate the final deck as a **fixed 1920×1080 stage** that scales uniformly to the browser viewport. The deck should preserve a 16:9 slide canvas on every screen, including phones; it may letterbox or pillarbox, but it should not reflow slide content for mobile.

This policy has higher priority than any source-template responsive behavior described later in this file. If a later section says the original template is viewport-fluid, treat that as source history only, not as the target generation model for `frontend-slides`.

This policy applies even if the source template was originally implemented with viewport-fluid CSS such as `100vw`, `100vh`, `vw`, `vh`, or `clamp()`. Treat those values as design proportions to translate into 1920×1080 stage coordinates, not as live responsive rules in the generated deck.

Use `deck-stage.js` or an equivalent inline stage scaler for final output: render each slide at 1920×1080, scale the whole stage with one transform, and verify rendered screenshots for both text overflow and panel overlap.


## Overview

Scatterbrain is a **Post-it-note-and-cork-board presentation system**. Every content block is a colored sticky note (`{components.post-it}`) layered onto one of three textured background variants — cork board, desk paper, or warm gradient — with red / blue / green / gold thumbtacks pinning the notes and translucent masking tape sometimes added on top. The visual metaphor is total: the deck is a creative-workshop wall, a brainstorming board, or a thinker's desk, and the content is the cluster of sticky notes pinned across it.

The typeface stack pairs three Google Fonts with distinct emotional roles. **Shrikhand** is the display voice — a chunky decorative display serif with playful curves and high contrast. Used at weight 400 (the only weight available) for every headline, statement, feature icon glyph, stat value, and oversized callout. Its loud, friendly personality is the system's primary signal: it reads as hand-lettered marker pen rather than typeset publication. **Zilla Slab** is the body voice — a friendly modern slab serif with humanist proportions. Used at weights 300–700 for body paragraphs, list items, and labels. Its slab serifs match the warm hand-drawn register of Shrikhand without competing for attention. **Caveat** is the hand-script voice — a casual cursive. Used for personal notes, side annotations, label-script eyebrows, stat-divider quips, and any moment that should read as "scribbled on the note in pen."

The color philosophy is **pastel sticky-note palette on tactile paper backgrounds**. Seven sticky-note colors (`yellow`, `blue`, `pink`, `green`, `orange`, `purple`, plus bordered `white`) provide categorical variety; each has a deeper sibling that drives the 135° gradient fill. The ink (`{colors.ink}` — #2d2a26) is a soft warm charcoal rather than pure black, sitting comfortably on warm pastels. Three background variants — cork (`bg-cork`), paper (`bg-paper`), warm gradient (`bg-warm`) — provide tactile variation across slides so the deck doesn't read as monotonous. The pastels are pale enough that ink text remains legible on every sticky-note color without inversion.

Depth comes from **soft drop shadows + small rotations + layered tactile elements** (pins, tape, doodles). The signature treatment: every post-it carries a soft blurred drop shadow (`2px 3px 15px {colors.shadow}`) that suggests a slight lift off the surface, plus a small rotation (±1° to ±15°) that reads as hand-placed rather than grid-snapped. Optional pins (red thumbtacks via `::before`) and tape (translucent white via `::after`) add tactile depth without using box-shadow tricks.

**Density philosophy: medium.** Each slide is anchored by 1–4 sticky notes plus 1–2 accent decorations (floating side-notes, doodles, decorative shapes). A slide with one large centered post-it reads as a manifesto moment; a slide with three feature-cards reads as a layout slide; a slide with one main post-it plus 2–4 small floating accent post-its reads as a hero spread. Crowding the canvas with simultaneous overlapping notes collapses the playful energy into chaos. The correct density is enough notes to feel like a creative-process spread, with enough negative space to read each note clearly.

**Key Characteristics:**
- Three textured background variants: cork (`{components.bg-cork}`), paper (`{components.bg-paper}`), warm gradient (`{components.bg-warm}`). Each slide picks one.
- A fixed SVG grain overlay at 4% opacity sits above all content, reinforcing the paper register.
- Seven sticky-note colors: yellow, blue, pink, green, orange, purple, white-bordered. Each gradient-filled (except orange / purple / white).
- Every post-it carries a soft drop shadow + small rotation. Rotations alternate direction across adjacent notes.
- Red thumbtacks (and blue / green / gold variants) via `::before`. Masking tape via `::after`. Often combined on a single note.
- Display headlines in Shrikhand (chunky display serif). Body in Zilla Slab (friendly slab). Personal annotations in Caveat (casual script).
- Decorative SVG doodles (circles, squiggles, triangles, X marks) live in slide corners at 0.15 opacity.
- Custom thumbtack cursor reinforces the "pinning ideas to a board" metaphor.

## Colors

### Palette

**Sticky-note colors** (gradient-filled or flat):
- **Yellow** (`{colors.yellow}` — #ffe066 → `{colors.yellow-deep}` — #ffd43b): Classic sticky-note yellow. Most common note color. The system's "default" sticky.
- **Blue** (`{colors.blue}` — #a5d8ff → `{colors.blue-deep}` — #74c0fc): Soft sky blue. The system's "secondary" sticky.
- **Pink** (`{colors.pink}` — #ffc9c9 → `{colors.pink-deep}` — #ff9f9f): Soft rose pink. The system's "warm accent" sticky.
- **Green** (`{colors.green}` — #b2f2bb → `{colors.green-deep}` — #8ce99a): Mint green. The system's "cool accent" sticky.
- **Orange** (`{colors.orange}` — #ffcc80): Warm peach-orange. Flat fill, no gradient. Used as a tertiary accent for variety.
- **Purple** (`{colors.purple}` — #d0bfff): Lavender purple. Flat fill, no gradient. Used as a tertiary accent for variety.

**Special note colors**:
- **White** (`#fff`): A bordered white sticky used in timelines and comparisons where a "plain" or "neutral" note is needed. Always carries a 2px ink border because pure white otherwise disappears into the cream/paper backgrounds.

**Paper / surface colors**:
- **Cream** (`{colors.cream}` — #faf8f3): The lightest paper variant. Used inside the `bg-paper` and `bg-warm` background gradients.
- **Paper** (`{colors.paper}` — #f7f5f0): The body background — sits just behind every slide as the page color visible through the bg overlays. Used as the inverted text color on dark ink surfaces.

**Ink / text colors**:
- **Ink** (`{colors.ink}` — #2d2a26): The structural color. All headlines, all body text, all borders, all doodle strokes. Slightly softer than pure black for warmth.
- **Ink Light** (`{colors.ink-light}` — #5c5750): Secondary text color for body paragraphs, captions, and de-emphasized text.

**Shadow tokens**:
- `{colors.shadow}` (rgba(45, 42, 38, 0.15)): Soft drop shadow — used on every post-it.
- `{colors.shadow-deep}` (rgba(45, 42, 38, 0.25)): Stronger contact shadow — used as the second layer of the post-it drop shadow.

### Defaults
- **Default surface background**: pick one of `{components.bg-cork}` / `{components.bg-paper}` / `{components.bg-warm}` per slide. Cork is the default for tactile / wall-of-notes moments; paper for desk / focused-content moments; warm-gradient for hero / atmospheric moments.
- **Default post-it color**: `{components.post-it-yellow}` — yellow is the most-common sticky and reads as the system's baseline.
- **Default headline color**: `{colors.ink}` (#2d2a26) — Shrikhand display in soft warm charcoal on every post-it.
- **Default body text color**: `{colors.ink-light}` (#5c5750) for paragraph body; `{colors.ink}` for list items and emphasized body.
- **Default border color**: `{colors.ink}` for the white-note 2px border and for the feature-icon round border. Most sticky notes have no border (the gradient fill defines them).
- **Default pin color**: `{components.pin}` (red) — the system's "default" thumbtack. Use blue / green / gold variants to match the post-it color underneath when visual variety is needed.
- **Default tape**: applied sparingly — typically on hero / statement post-its where the note feels "officially posted" with both a pin and a strip of tape.
- **Default text color on ink surfaces**: `{colors.paper}` (#f7f5f0).
- **Default decorative doodle color**: `{colors.ink}` at 0.15 opacity, 3px stroke.

The seven sticky-note colors have **no fixed semantic meaning** — yellow is not "warning," green is not "success." They serve as a categorical palette where the choice signals "which note in the cluster is this." Cycle through colors for visual variety; pair gradient-filled notes (yellow, blue, pink, green) with flat-filled notes (orange, purple) for textural variation.

## Typography

### Font Family
The system has three Google Fonts each with a distinct role:

- **Shrikhand** (display): A chunky decorative display serif with high stroke contrast, playful curves, and a hand-lettered marker-pen feel. Single weight (400). Used for every display moment — headlines, statements, titles, feature-icon glyphs, stat values, versus-circle text. Its loud personality is the system's primary identity; substituting another display serif loses the workshop voice.
- **Zilla Slab** (body): A friendly modern slab serif with humanist warmth. Multi-weight (300–700, with italic variants 300 and 400). Used at weight 400 for body paragraphs (the default), 300 for the lightest captions, 500–700 for emphasis. The slabs read as warm-handed rather than mechanical.
- **Caveat** (hand-script): A casual cursive with multiple weights (400–700). Used for personal notes, side annotations, label-script eyebrows (uppercase tracked 0.15em), closing-slide sign-offs, decorative quips inside stat-divider rows.

Italic exists for Zilla Slab (300 and 400 italic) but is rarely used — emphasis comes from weight switching or face switching, not from italics. Underline is not used.

### Type Scale

| Token | Size (clamp) | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display-hero}` | 2.5–4.5rem | Shrikhand | 400 | Cover or closing oversized headline |
| `{typography.statement}` | 2–3.5rem | Shrikhand | 400 | Centered statement or pulled quote |
| `{typography.headline}` | 1.8–3rem | Shrikhand | 400 | Primary slide headline / section headline |
| `{typography.title}` | 1.3–1.8rem | Shrikhand | 400 | Sub-region or card title |
| `{typography.caption-subtitle}` | 1.3rem | Zilla Slab | 400 | Slide subtitle below a hero headline |
| `{typography.body}` | 1–1.25rem | Zilla Slab | 400 | Standard paragraph body |
| `{typography.list-item}` | 1.1rem | Zilla Slab | 400 | Bulleted / check-marked list row |
| `{typography.handwritten}` | 1.2–1.6rem | Caveat | 400 | Decorative quip, personal note |
| `{typography.handwritten-lg}` | 1.4–2rem | Caveat | 600 | Larger handwritten subtitle |
| `{typography.handwritten-sm}` | 1.2–1.4rem | Caveat | 500 | Small accent label |
| `{typography.label-script}` | 0.9rem | Caveat | 400 | Tracked-caps eyebrow label |
| `{typography.stat-value}` | 1.8rem | Shrikhand | 400 | Numerical value in a stat-row |

### Defaults
- **Default size for a primary section headline (inside a post-it)**: `{typography.headline}` (1.8–3rem clamp) in Shrikhand.
- **Default size for a cover or closing oversized headline**: `{typography.display-hero}` (2.5–4.5rem clamp).
- **Default size for a centered manifesto / pulled-quote statement**: `{typography.statement}` (2–3.5rem clamp).
- **Default size for paragraph body**: `{typography.body}` (1–1.25rem clamp) in Zilla Slab 400.
- **Default size for list rows (bulleted, check-marked, or compare-list)**: `{typography.list-item}` (1.1rem) in Zilla Slab 400.
- **Default size for a side note or quip**: `{typography.handwritten}` (1.2–1.6rem clamp) in Caveat 400.
- **Default size for an eyebrow label above a card headline**: `{typography.label-script}` (0.9rem) in Caveat, uppercase, 0.15em tracking.
- **Default size for a stat value**: `{typography.stat-value}` (1.8rem) in Shrikhand.
- **Default weight for Shrikhand**: 400 (the only weight).
- **Default weight for Zilla Slab body**: 400. For emphasized body: 500–700. For light captions: 300.
- **Default weight for Caveat**: 400 for casual notes; 500–700 for emphasis.

When unsure between `{typography.headline}` and `{typography.title}` for a card's primary text, reach for `{typography.headline}` if the card is the slide's dominant element; reach for `{typography.title}` if it is one of several smaller cards.

### Signature Treatments
These treatments are **non-optional whenever the corresponding element type is used**:

- **Every display headline is set in Shrikhand.** Substituting Zilla Slab or another display face loses the workshop voice. Even small titles (1.3rem) inside feature cards use Shrikhand.
- **Every body paragraph and list item is set in Zilla Slab.** Setting body in Shrikhand reads as overproduced and unreadable.
- **Every casual / personal note is set in Caveat.** This includes side notes, decorative quips ("Jot it down before you forget!", "OK", ":)"), and stat-divider personal observations. Switching to italic Zilla loses the hand-drawn voice.
- **Every label-script eyebrow is uppercase with 0.15em tracking.** Caveat at normal tracking reads as a body cursive; the uppercase + tracking turns it into a categorical label.
- **Every feature-icon round border is 3px ink with a Shrikhand glyph inside.** Variations (2px border, sans-serif glyph) break the icon's visual signature.
- **Every post-it that hosts a primary headline gets a thumbtack pin via `::before`.** A pinless headline-post-it reads as floating and undefined.
- **Every hero / statement post-it carries both a pin and a strip of tape** (`.pin .tape` classes together). This is the system's "officially posted" treatment for the most-emphasized note.

### Typography Principles
The system's typographic rhythm comes from **three-face contrast**: Shrikhand display (loud, decorative, friendly serif) → Zilla Slab body (steady, readable, slab serif) → Caveat hand-script (personal, casual, cursive). A slide that uses only one face reads as monotonous; a slide that combines all three reads as workshop-correct.

Line-height: tight on display (1.1), generous on body (1.6–1.7), moderate on hand-script (1.3–1.4). Letter-spacing on display is subtly positive (0.02em) which gives Shrikhand a touch more openness than its default; body has no tracking; hand-script labels carry 0.15em uppercase tracking.

## Layout

### Canvas System
The system targets `100vw × 100vh`. Each `.slide` is absolutely positioned to fill the viewport with `display: none` by default; the `.active` slide is `display: flex` centered. Navigation is JS-driven via arrow keys, space, PageUp/Down, Home/End, touch swipe, and mouse wheel (with 700ms lock to prevent multi-skip).

### Slide Composition Patterns
The system supports several composition patterns without prescribing layouts:
- **Centered single-card**: one large post-it (statement, closing, RSVP-style).
- **2-column or 3-column grid**: aligned grid of post-its with small rotations.
- **Chart + legend**: a white chart-card on one side, a colored post-it legend on the other.
- **Image + text**: a polaroid-style photo-frame on one side, a text-post-it cluster on the other.
- **Free cluster**: a hero post-it surrounded by 2–4 small accent post-its at various rotations and positions.
- **Timeline rows**: alternating left/right node + dashed-curve connector + content card per row.
- **Compare**: two post-its side by side with a centered ink versus-circle between them.

In every pattern, individual post-its sit on one of the three background textures with small rotations and decorative doodle marks in unoccupied corners.

### Padding Scale
| Token | Value | Use |
|---|---|---|
| `{spacing.slide-pad}` | 3rem | Slide outer padding |
| `{spacing.post-it-pad-lg}` | 3rem 4rem | Hero / title post-it interior padding |
| `{spacing.post-it-pad-statement}` | 3.5rem 4rem | Statement post-it interior padding |
| `{spacing.post-it-pad-md}` | 2.5rem | Standard post-it interior padding |
| `{spacing.post-it-pad-sm}` | 1.5rem | Small accent post-it interior padding |
| `{spacing.gap-lg}` | 3rem | Multi-column grid gap |
| `{spacing.gap-md}` | 2.5rem | Feature grid gap |
| `{spacing.gap-sm}` | 2rem | Timeline row gap |

### Persistent Chrome
The system has no persistent slide chrome — no progress bar, no slide counter, no nav hint. The custom thumbtack cursor is the only persistent visual signal. Navigation is purely keyboard / swipe / wheel driven.

## Depth and Elevation

### Soft Drop Shadow (Primary Technique)
The system's defining depth treatment is the **soft drop shadow** on every post-it, photo-frame, chart-card, and diagram-canvas: `2px 3px 15px {colors.shadow}, 0 1px 3px {colors.shadow-deep}`. The 15px-blur outer shadow with 2px horizontal and 3px vertical offset suggests the note hovers slightly above the cork or paper surface. The 1px-blur inner shadow with 1px vertical offset adds the contact shadow at the bottom edge. Together they read as "lifted note pinned to a board."

This is the **only system that defines depth via soft blurred shadows** — most other templates in this library prohibit them. Scatterbrain embraces them because the visual metaphor depends on the tactile lift of a paper note off a textured surface.

### Rotation (Secondary Technique)
Every post-it carries a small rotation (±1° to ±15°). Hero / statement / feature post-its take small rotations (±1° to ±3°); accent / floating / closing-cluster post-its take larger rotations (±5° to ±15°). Rotations alternate direction across adjacent notes so the cluster reads as casually applied, not grid-snapped.

### Tactile Layering (Pins + Tape)
Optional layered marks on individual post-its provide additional depth:
- **Pin** (`{components.pin}`) — a 16px round red thumbtack via `::before` at the top-center of the note. The radial-gradient highlight + inset shadow + drop shadow make it read as a 3D bead.
- **Tape** (`{components.tape}`) — an 80×25px translucent white tape strip via `::after` at the top-center, slightly rotated.

Pins and tape can combine on a single note (the `.pin.tape` class pair). Color variants of pins (`pin-blue`, `pin-green`, `pin-gold`) match the underlying note color for visual cohesion.

### Background Texture (Atmospheric Layer)
The three background variants (`bg-cork`, `bg-paper`, `bg-warm`) and the full-viewport grain overlay (`{components.grain-overlay}` at 4% opacity) provide the foundational textural ground. Without the background variants the deck reads as floating notes on white; with them, the deck reads as physically grounded on cork, desk paper, or morning light.

## Shapes and Treatment

### Border Radius
| Value | Use |
|---|---|
| 0px | All post-its, chart-cards, photo-frames, diagram-canvases, compare-cards |
| 50% (circle) | Feature-icon round border, versus-circle, thumbtack pins |
| 3px | Chart bar `<rect>` corner radius (inline SVG) |
| Custom (no fixed token) | Photo-frame inner image area follows the polaroid aspect ratio 4:3 |

Most surfaces are strict rectangles. Round shapes are reserved for icons, pins, and the versus-marker. The chart bars carry a subtle 3px round corner (inside SVG) for friendliness.

### Border Weights
- **2px solid `{colors.ink}`** — used on the white-note border and on chart SVG `<rect>` strokes.
- **3px solid `{colors.ink}`** — used on feature-icon round border and on doodle SVG paths.
- **1px dashed rgba(ink, 0.2)** — used as stat-row hairline divider.
- **1px solid rgba(ink, 0.1)** — used as compare-list row divider.

Borders are universally ink (warm charcoal). Colored borders do not appear.

### Decorative Element Types

**Post-it** (`{components.post-it}`) — Colored sticky-note in one of seven variants (yellow, blue, pink, green, orange, purple, bordered-white). Padding from the `{spacing.post-it-pad-*}` scale. Always carries the soft drop shadow. Almost always carries a small rotation. Usually carries a pin and sometimes tape.

**Pin** (`{components.pin}`) — Red thumbtack via `::before`. Default color red; variants blue, green, gold. Sits at top-center of the note.

**Tape** (`{components.tape}`) — Translucent white masking-tape mark via `::after` at top-center of the note, slightly rotated.

**Feature icon** (`{components.feature-icon}`) — 60px round ink-bordered circle with a Shrikhand glyph (single character) inside. Used at the top of feature post-its as a category marker.

**Versus circle** (`{components.versus-circle}`) — Ink-filled circle with cream Shrikhand text, centered between two compare-post-its with absolute positioning. Carries its own drop shadow.

**Photo frame** (`{components.photo-frame}`) — Polaroid-style white card with 1rem padding around a 4:3 inner image area. Same drop shadow as post-its; small rotation.

**Chart canvas** (`{components.chart-canvas}`) — White card hosting an inline SVG chart. Same drop shadow as post-its; small rotation. SVG charts use the post-it color palette (yellow, blue, pink, green) for bars / segments. Axis labels in Zilla Slab; value labels in Caveat.

**Diagram canvas** — White card hosting a circular donut / pie SVG. Same treatment as chart canvas. SVG segments use post-it palette; legend rows use ink text.

**Stat row** (`{components.stat-row}`) — Label-value row inside a stat post-it. Zilla Slab label + Shrikhand stat-value, separated by a dashed ink-alpha bottom border.

**Timeline node + connector** — Each timeline row has a left post-it (timeline node with phase-label Caveat caption) + a center dashed-bezier SVG connector + a right white-bordered post-it (timeline content body). Row direction alternates (left/right) via `flex-direction: row-reverse` on even rows.

**Doodle SVG** (`{components.doodle}`) — Decorative SVG mark placed absolutely in slide corners: circle, squiggle, triangle, line, X+ pair. 3px ink stroke at 0.15 opacity. Slides have 0–2 doodles each.

**Custom cursor** — SVG thumbtack cursor (red outer circle + white center) replaces the default cursor when hovering over slides.

## Do's and Don'ts

### Do
- Pick a background variant per slide: `{components.bg-cork}` for "wall of notes" energy, `{components.bg-paper}` for "desk surface" focus, `{components.bg-warm}` for "morning light" atmosphere. Vary across slides for tactile variety.
- Keep the SVG grain overlay (`{components.grain-overlay}`) on every slide at 4% opacity. It is the texture that ties the deck to its paper register.
- Use Shrikhand for every display moment (headlines, titles, feature icons, stat values) and Zilla Slab for every body paragraph and list item.
- Use Caveat for casual / personal notes — side annotations, decorative quips ("Jot it down before you forget!", ":)"), and label-script eyebrows. The hand-script is the system's most distinctive voice.
- Give every post-it a small rotation (±1° to ±15°). Alternate rotation direction across adjacent notes; nothing should align to a grid.
- Apply the standard soft drop shadow (`2px 3px 15px shadow, 0 1px 3px shadow-deep`) to every post-it, photo-frame, chart-card, and diagram-canvas.
- Pin every primary post-it with a red thumbtack via `::before`. Use color-matched pin variants (blue / green / gold) when the post-it color suggests it.
- Combine pin + tape on hero / statement post-its for the "officially posted" treatment.
- Place small SVG doodles (circles, squiggles, triangles) in slide corners at 0.15 opacity as decorative punctuation. 1–2 doodles per slide is plenty.
- Cycle through post-it colors (yellow → blue → pink → green → orange → purple) for visual variety in multi-card grids. Don't repeat one color across all cards.

### Don't
- Don't omit background textures and let post-its float on a plain white viewport. The textured backgrounds are the system's foundational visual ground.
- Don't substitute another display face for Shrikhand. The chunky decorative serif is the system's identity; replacing it with a sans or another serif loses the workshop voice.
- Don't substitute another script face for Caveat. The casual cursive voice anchors the "scribbled by hand" register.
- Don't use Zilla Slab for headlines or Shrikhand for body paragraphs. The pairing is locked: Shrikhand display + Zilla Slab body + Caveat script.
- Don't assign semantic meaning to post-it colors (yellow = warning, green = good). The colors are categorical only.
- Don't rotate post-its more than ±15°. Beyond that, hand-placed becomes wonky.
- Don't rotate every post-it in the same direction. Alternate ±directions across adjacent notes; uniformity reads as tilted-canvas, not hand-placement.
- Don't use pure white as a post-it fill without the 2px ink border. White-on-cream backgrounds becomes invisible.
- Don't omit the pin on a headline post-it. Pinless headlines read as floating and undefined.
- Don't crowd a slide with overlapping post-its. The playful energy collapses when notes pile up; the correct density is 1–4 main notes plus 1–2 small accent / floating notes.

## Responsive Behavior

The system targets `100vw × 100vh` and uses `clamp()` throughout for fluid scaling. A single media query at `max-width: 900px` reflows multi-column grids and timelines to single-column, neutralizes some rotations (versus-circle becomes inline rather than absolute), and stacks compare-cards vertically.

### Scaling Behavior
- Display headlines scale via `clamp(2.5rem, 5vw, 4.5rem)` patterns — fluid between minimum and maximum.
- Body text scales from 1rem at minimum to 1.25rem at maximum.
- Post-it padding does not scale by viewport — fixed at the values in the spacing scale.
- Drop shadows, pin sizes, tape sizes, and decorative SVG sizes are fixed regardless of viewport.

### Presenter Behavior
- Slides advance via `ArrowRight`, `ArrowDown`, `Space`, or `PageDown`.
- Slides reverse via `ArrowLeft`, `ArrowUp`, or `PageUp`.
- `Home` jumps to first, `End` to last.
- Touch swipe horizontal advances/reverses on mobile.
- Mouse wheel advances/reverses, locked for 700ms between scrolls to prevent multi-skip on trackpads.
- The custom thumbtack cursor reinforces the metaphor on every hover.

### Print Behavior
A `@media print` rule sets `page-break-after: always` on each slide with `min-height: 100vh`. Printing produces a sequential page-per-slide output.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin | Chinese | Weight mapping |
|---|---|---|---|
| Display / Headline / Statement / Title / Stat-value / Feature-icon glyph | Shrikhand (400) | **站酷快乐体 ZCOOL KuaiLe** | regular (single weight) |
| Body / List-item / Caption-subtitle | Zilla Slab (400) | **悠哉字体 Yozai** | regular |
| Hand-script (Caveat) — Latin only | Caveat (400 / 500 / 600) | *(no CJK substitute)* | n/a |

### Mixed-Content Strategy

**Strategy A — display CJK + body CJK, each with its own personality.** Scatterbrain's whole register is playful-tactile-warmth, and the Chinese pairing should land in the same emotional register. **ZCOOL KuaiLe (站酷快乐体)** is a chunky decorative display face with rounded curves and a hand-drawn marker-pen feel — it is the closest CJK match for Shrikhand's chunky decorative serif voice. Both faces share the "loud and friendly" personality that defines the workshop-board aesthetic. **Yozai (悠哉字体)** is a warm rounded body face derived from M+ Rounded — it carries the same friendly humanist quality as Zilla Slab's slab serif, with soft terminals that feel like written notes rather than typeset text. Together the two CJK faces preserve the playful-chunky-display + warm-friendly-body rhythm that makes Scatterbrain's voice work.

### Loading

```html
<link href="https://chinese-fonts-cdn.deno.dev/packages/zcool-kuaile/dist/ZCOOLKuaiLe-Regular/result.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/cn-fontsource-yozai-regular/font.css" rel="stylesheet">
```

Then append the CJK families to the appropriate font stacks:
```css
/* Display roles */
font-family: 'Shrikhand', 'ZCOOL KuaiLe', cursive;
/* Body roles */
font-family: 'Zilla Slab', 'Yozai', serif;
```

### Universal CJK Adjustments

- Line-height: body 1.75–1.85, display 1.15–1.25
- Letter-spacing: 0 on CJK
- Text-transform: no uppercase on CJK
- Full-width punctuation
- No period on display headlines
- Pangu spacing (盘古之白): `使用 Claude` not `使用Claude`
- One font per sentence

### Aesthetic Notes for This System

- **The 0.02em positive tracking on Shrikhand display must drop to 0** on ZCOOL KuaiLe. Tracked Chinese display characters look broken.
- **Display line-height should open from 1.1 to 1.2–1.3** for ZCOOL KuaiLe — the rounded chunky strokes need more vertical breathing.
- **Feature-icon round borders work beautifully with a single Chinese character** (新, 巧, 趣) inside the 60px circle at ZCOOL KuaiLe. The chunky display weight makes the single character read as a stamped category mark.
- **Versus circles work with short Chinese words** (对比, 与) at smaller display weight; the cream-on-ink contrast carries through.
- **The label-script Caveat eyebrow (uppercase tracked 0.15em) becomes the trickiest translation.** Options: (1) keep eyebrows in Latin (`CHAPTER ONE`, `THE SETUP`) for the hand-script signature; (2) replace with a Yozai eyebrow at 0.9rem, no tracking, no uppercase — which loses the categorical-label affordance. Option (1) preserves the system's most distinctive small voice and works well when the Latin eyebrow sits above a Chinese headline (the deck reads as a Chinese article with an English kicker, which is a common editorial convention).
- **Personal notes / decorative quips in Caveat (`Jot it down before you forget!`, `:)`) should stay Latin** — the casual ballpoint script has no acceptable Chinese substitute. On Chinese-primary slides, treat hand-script moments as Latin margin notes; this can actually deepen the workshop voice (the deck reads as a Chinese brainstorm with English asides, which is plausible for any modern Chinese creative team).
- **Post-it pins, tape, drop shadows, rotations, custom cursor, doodle SVGs, background textures** are all glyph-agnostic — they carry the playful-tactile system equally well behind Chinese content.
- **Stat-row label-and-value pattern** works cleanly with Chinese labels (用户数量, 转化率) in Yozai and Latin numerical values in ZCOOL KuaiLe.

### Known CJK Gap

Caveat — the system's most distinctive voice (the casual ballpoint hand-script that anchors every personal note) — has no CJK equivalent. There are handwritten-style Chinese web fonts (悠果手写体, 站酷庆科黄油体), but the cultural register of casual cursive handwriting differs sharply between Latin and CJK traditions, and no Chinese face will read as "the same voice as Caveat." The recommended workaround is to retain Caveat for Latin margin annotations even on otherwise-Chinese slides — the Chinese-body-with-English-handwriting pattern is common in modern Chinese editorial design and lands as authentic rather than as a translation gap.

## Iteration Guide

1. Every new slide picks one of three background variants (`{components.bg-cork}`, `{components.bg-paper}`, `{components.bg-warm}`). Vary across slides for tactile variety.
2. Every new content block is a post-it in one of seven colors (yellow, blue, pink, green, orange, purple, bordered-white). Yellow is the default; cycle through colors for multi-card variety.
3. Every new post-it carries a small rotation. Hero / statement post-its: ±1–3°. Accent / floating post-its: ±5–15°. Alternate directions across neighbors.
4. Every new post-it carries the standard soft drop shadow (`2px 3px 15px shadow, 0 1px 3px shadow-deep`).
5. Every new primary post-it carries a pin via `::before` (red default; blue / green / gold variants for color cohesion).
6. Hero / statement / closing post-its add a tape strip via `::after` for the "officially posted" treatment.
7. Headlines use Shrikhand at sizes from `{typography.title}` (1.3rem) for small card titles up to `{typography.display-hero}` (4.5rem) for cover/closing. Body uses Zilla Slab. Personal notes use Caveat.
8. Feature post-its open with a 60px round ink-bordered feature-icon containing a single Shrikhand character (A/B/C, 1/2/3, !/✓/✗).
9. Decorative SVG doodles (circles, squiggles, triangles, X marks) live in 1–2 unoccupied corners per slide at 0.15 opacity, 3px ink stroke.
10. Charts and diagrams sit inside a white chart-canvas (`{components.chart-canvas}`) with the same drop shadow + small rotation as post-its. SVG fills use the post-it palette (yellow, blue, pink, green).

## Known Gaps

- The system loads three Google Fonts (Shrikhand, Zilla Slab, Caveat). Shrikhand is single-weight (400 only); attempting a heavier weight will fall back. Self-hosting is recommended for production.
- The custom SVG thumbtack cursor (`{components.custom-cursor}`) does not render on all browsers identically — Safari and Firefox may scale or position the cursor hotspot differently than Chrome. On touch-only devices the cursor is irrelevant.
- The background textures (`bg-cork`, `bg-paper`, `bg-warm`) use combinations of CSS gradients and inline SVG data-URI patterns. Rendering is consistent across modern browsers but the tonal warmth varies slightly with screen color profiles.
- Pins (`::before`) and tape (`::after`) consume both pseudo-element slots on a post-it. If additional decorative marks are needed (a corner curl, a stain, etc.), they would require a real child element instead of pseudo-elements.
- The soft drop shadow on every post-it adds rendering overhead. Slides with 10+ post-its may show slight shadow rendering lag on lower-end devices.
- The custom cursor and absolute-positioned pins / tape do not interact with screen readers as expected. The decorative elements should remain hidden from assistive tech.
- Inline SVG charts (bar, donut, pie) are hardcoded — bar heights, segment paths, and labels are baked into the SVG. There is no data-binding layer; new chart values require manual SVG path / position recalculation.
- The custom cursor (red thumbtack) appears on every slide including text-heavy ones, which may be visually noisy when users are reading body paragraphs. Treat the cursor as a deck-wide accent, not a per-slide affordance.
- The mouse-wheel navigation lock (700ms) is unusual and may surprise users expecting smooth-scroll. Trackpad users especially may find the wheel-step behavior counter-intuitive.
````

---

## 2. 글씨체

- 이 디자인의 한글 글씨체: 제목 Cafe24 ClassicType(400) · 본문 Hahmlet Regular(400) · 포인트 야근하는 김주임. (쓰는 폰트: Cafe24 ClassicType, Hahmlet Regular, 야근하는 김주임)
- 글씨체 파일은 공통 CSS(5)의 `@font-face`가 인터넷의 폰트 창고(`https://maker-ssam.github.io/korean-ofl-fonts/…`)에서 불러옵니다. 설치하지 않아도 되지만 열 때 인터넷이 필요합니다.
- 글씨체 규칙(굵기·크기·자간)은 1의 디자인 규칙을 따르고, 한글 폰트는 변수(`--kt` 제목, `--kb` 본문, `--ka` 포인트)로만 지정하세요.

---

## 3. 부품 사전 (이 디자인의 CSS에 정의된 클래스)

이 목록과 공통 CSS(5)에 있는 클래스만 쓰세요. '○장'은 아래 뼈대에서 그 클래스를 쓴 예시 장이고, '예'는 그 장의 실제 태그입니다. 장 구성은 따라 하지 말고, 필요한 부품을 골라 어느 장에서든 쓰면 됩니다. 클래스를 조합하는 방법(어떤 부품 안에 어떤 부품이 들어가는지)은 뼈대의 예시 장을 보고 따르세요.
- 여러 장에서 쓰인 클래스는 이 디자인의 공통 부품입니다(창·제목줄·버튼·표 등).
- 한 장에서만 쓰인 클래스 중 크기·위치를 정하는 것(이름에 번호가 붙은 창·격자 등)은 **그 예시 장 전용 배치**입니다. 같은 배치를 다시 쓸 때만 쓰고, 새 배치가 필요하면 비슷한 이름을 지어 쓰지 말고 '추가 부품' 칸에 직접 정의하세요.
- 예시 장의 측정기 그림(`g-…` 클래스)은 예시 주제 전용이라 이 목록에 없습니다. 새 주제의 그림은 SVG로 새로 그리세요.

**1장(표지)에서 처음 나오는 부품**
- `.a1` — 1장 — 예: `<div class="note blue pin acc a1" style="--r:8deg">`
- `.a2` — 1장 — 예: `<div class="note pink acc a2 pin gold" style="--r:-11deg">`
- `.a3` — 1장 — 예: `<div class="note green acc a3 pin bluepin" style="--r:6deg">`
- `.acc` — 1·2장 — 예: `<div class="note blue pin acc a1" style="--r:8deg">`
- `.big` — 1장 — 예: `<b class="big">`
- `.blue` — 1·2·4·5·6장 — 예: `<div class="note blue pin acc a1" style="--r:8deg">`
- `.bluepin` — 1·2·4·5·6장 — 예: `<div class="note green acc a3 pin bluepin" style="--r:6deg">`
- `.d1` — 1장 — 예: `<i class="dood d1">`
- `.d2` — 1장 — 예: `<i class="dood d2">`
- `.dood` — 1·3·4장 — 예: `<i class="dood d1">`
- `.gk` — 1장 — 예: `<b class="gk">`
- `.gl` — 1장 — 예: `<p class="hand gl">`
- `.gold` — 1·2·6장 — 예: `<div class="note pink acc a2 pin gold" style="--r:-11deg">`
- `.grain` — 1·2·3·4·5·6장 — 예: `<section class="slide warm grain">`
- `.green` — 1·2·4·5·6장 — 예: `<div class="note green acc a3 pin bluepin" style="--r:6deg">`
- `.hand` — 1·2·3·4·5·6장 — 예: `<p class="hand gl">`
- `.hero` — 1장 — 예: `<div class="note yellow pin tape hero" style="--r:-1.5deg">`
- `.lab` — 1·2·3·4·5·6장 — 예: `<p class="lab">`
- `.lg` — 1·2·3장 — 예: `<p class="hand lg">`
- `.note` — 1·2·3·4·5·6장 — 예: `<div class="note yellow pin tape hero" style="--r:-1.5deg">`
- `.pin` — 1·2·3·4·5·6장 — 예: `<div class="note yellow pin tape hero" style="--r:-1.5deg">`
- `.pink` — 1·2·4·5·6장 — 예: `<div class="note pink acc a2 pin gold" style="--r:-11deg">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide warm grain">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.tape` — 1·3·4·5·6장 — 예: `<div class="note yellow pin tape hero" style="--r:-1.5deg">`
- `.unit` — 1장 — 예: `<p class="unit">`
- `.warm` — 1·4장 — 예: `<section class="slide warm grain">`
- `.yellow` — 1·2·3·4·5·6장 — 예: `<div class="note yellow pin tape hero" style="--r:-1.5deg">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.bt` — 2·5·6장 — 예: `<button class="note orange pin bt" style="--r:-2deg" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="hand cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;…`
- `.cork` — 2·5장 — 예: `<section class="slide cork grain" data-steps="4">`
- `.feat` — 2장 — 예: `<div class="note yellow pin feat" data-s="1" style="--r:-2deg">`
- `.feats` — 2장 — 예: `<div class="feats">`
- `.fh` — 2장 — 예: `<div class="fh">`
- `.ficon` — 2·5장 — 예: `<i class="ficon">`
- `.greenpin` — 2·4·6장 — 예: `<div class="note green pin greenpin feat" data-s="4" style="--r:-2.2deg">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.head` — 2·3·4·5·6장 — 예: `<div class="note white pin head" style="--r:-1deg">`
- `.nr` — 2·5장 — 예: `<p class="hand nr">`
- `.nt2` — 2장 — 예: `<div class="note orange pin acc nt2" style="--r:4deg">`
- `.orange` — 2·5·6장 — 예: `<div class="note orange pin acc nt2" style="--r:4deg">`
- `.polaroid` — 2장 — 예: `<figure class="polaroid" style="--r:-1.5deg">`
- `.purple` — 2·5·6장 — 예: `<button class="note purple bt" style="--r:2deg" data-act="reset">`
- `.white` — 2·3·4·5·6장 — 예: `<div class="note white pin head" style="--r:-1deg">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.ax` — 3장 — 예: `<line x1="40" x2="1020" y1="420" y2="420" class="ax"/>`
- `.bar` — 3장 — 예: `<rect x="46" y="198" width="68" height="222" rx="4" class="bar"/>`
- `.bv` — 3장 — 예: `<text x="80" y="186" class="bv">`
- `.canvas` — 3장 — 예: `<div class="canvas" style="--r:-1deg">`
- `.d4` — 3장 — 예: `<i class="dood d4">`
- `.dt` — 3장 — 예: `<circle cx="80" cy="119" r="8" class="dt pk"/>`
- `.gr` — 3장 — 예: `<i class="sw gr">`
- `.ln` — 3장 — 예: `<polyline points="80,119 230,208 380,257 530,271 680,252 830,201 980,107" class="ln pk"/>`
- `.mx` — 3장 — 예: `<rect x="496" y="88" width="68" height="332" rx="4" class="bar mx"/>`
- `.paper` — 3·6장 — 예: `<section class="slide paper grain">`
- `.pk` — 3장 — 예: `<i class="sw pk">`
- `.sr` — 3장 — 예: `<div class="sr">`
- `.src` — 3장 — 예: `<p class="hand src">`
- `.stats` — 3장 — 예: `<div class="note yellow pin tape stats" style="--r:2deg">`
- `.sw` — 3장 — 예: `<i class="sw yel">`
- `.tx` — 3장 — 예: `<text x="80" y="456" class="tx">`
- `.yel` — 3장 — 예: `<i class="sw yel">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.by` — 4장 — 예: `<p class="hand by">`
- `.c0` — 4장 — 예: `<div class="note pink pin cmp c0" style="--r:-2deg">`
- `.c1` — 4장 — 예: `<div class="note blue bluepin pin cmp c1" style="--r:2deg">`
- `.cmp` — 4장 — 예: `<div class="note pink pin cmp c0" style="--r:-2deg">`
- `.d5` — 4장 — 예: `<i class="dood d5">`
- `.li` — 4장 — 예: `<p class="li">`
- `.lst` — 4장 — 예: `<div class="note green pin greenpin lst" style="--r:3deg">`
- `.sq` — 4장 — 예: `<p class="sq">`
- `.stmt` — 4장 — 예: `<div class="note yellow pin tape stmt" style="--r:-2deg">`
- `.tbl` — 4장 — 예: `<div class="note white tbl" style="--r:-.8deg">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`
- `.tt` — 4장 — 예: `<span class="tt">`
- `.vs` — 4장 — 예: `<i class="vs">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="note blue pin bluepin blk" style="--r:-1.5deg">`
- `.br` — 5장 — 예: `<p class="br">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.quiz` — 5장 — 예: `<div class="note yellow pin tape quiz" style="--r:1.2deg" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 …`
- `.rty` — 5장 — 예: `<button class="note purple bt rty" style="--r:-2deg" data-act="retry">`
- `.sm` — 5·6장 — 예: `<i class="ficon sm">`
- `.wn` — 5장 — 예: `<span class="note pink wn" style="--r:-6deg">`
- `.words` — 5장 — 예: `<div class="words">`
- `.yay` — 5장 — 예: `<p class="hand yay">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="note blue d6 a pin bluepin" style="--r:1.5deg">`
- `.b` — 6장 — 예: `<div class="note pink d6 b pin gold" style="--r:-1.5deg">`
- `.c` — 6장 — 예: `<div class="note green d6 c pin greenpin" style="--r:1deg">`
- `.d6` — 6장 — 예: `<div class="note blue d6 a pin bluepin" style="--r:1.5deg">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.ft6` — 6장 — 예: `<p class="ft6" id="sb-ft">`
- `.g6` — 6장 — 예: `<div class="note yellow pin tape g6" style="--r:-1deg">`
- `.pk6` — 6장 — 예: `<div class="pk6" id="sb-pin">`
- `.r6` — 6장 — 예: `<div class="r6">`
- `.sl6` — 6장 — 예: `<p class="hand sl6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`
- `.tl6` — 6장 — 예: `<div class="tl6" id="sb-tilt">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.on` `.now` `.open` `.right` `.wrong` `.play` `.solved` `.tried` `.active` `.visible` `.flash` `.in-frame`)와 내비 클래스(`.dk-…`)는 배치용으로 쓰지 마세요(뼈대의 내비 부분은 그대로 둡니다).

---

## 4. HTML 뼈대 (예시 덱 6장 — 부품 견본입니다. 장 구성은 따라 하지 말고, 공통 파일 두 줄은 그대로 두며, 장은 내용에 맞게 새로 구성)

```html
<!DOCTYPE html>
<html lang="ko" data-template="scatterbrain">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계절의 변화</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Zilla+Slab:wght@400;500;700&family=Caveat:wght@400;600&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/scatterbrain.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide warm grain">
  <div class="note yellow pin tape hero" style="--r:-1.5deg">
    <p class="lab">초등 과학 · 6학년 2학기</p>
    <p class="unit">계절의 변화<span>Sun, Shadow & Temperature</span></p>
    <p class="hand gl">학습 목표 —</p>
    <h1 class="t1">하루 동안 <b class="gk">태양 고도</b>,<br><b class="gk">그림자 길이</b>, <b class="gk">기온</b>의 관계</h1>
  </div>
  <div class="note blue pin acc a1" style="--r:8deg"><b class="big">03</b><p class="hand">1단원 · 3~4차시</p></div>
  <div class="note pink acc a2 pin gold" style="--r:-11deg"><p class="hand lg">2026 과학 탐구</p></div>
  <div class="note green acc a3 pin bluepin" style="--r:6deg"><p class="hand lg">00초등학교</p></div>
  <i class="dood d1"><svg viewBox="0 0 200 60"><path d="M5 30 Q 30 0 55 30 T 105 30 T 155 30 T 195 30"/></svg></i><i class="dood d2"><svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40"/></svg></i>
</section>
<section class="slide cork grain" data-steps="4">
  <div class="note white pin head" style="--r:-1deg"><p class="lab">측정 준비</p><h2 class="hd">태양 고도 측정기 만들기</h2></div>
  <div class="note orange pin acc nt2" style="--r:4deg"><p class="hand lg">막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <figure class="polaroid" style="--r:-1.5deg"><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg><figcaption class="hand">태양 고도 — 태양이 지표면과 이루는 각</figcaption></figure>
  <div class="feats"><div class="note yellow pin feat" data-s="1" style="--r:-2deg"><div class="fh"><i class="ficon">1</i><h3>자 붙이기</h3></div><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div><div class="note blue pin bluepin feat" data-s="2" style="--r:1.6deg"><div class="fh"><i class="ficon">2</i><h3>수수깡 꽂기</h3></div><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div><div class="note pink pin gold feat" data-s="3" style="--r:1.2deg"><div class="fh"><i class="ficon">3</i><h3>실 묶기</h3></div><p>수수깡 끝에 실을 묶어요</p></div><div class="note green pin greenpin feat" data-s="4" style="--r:-2.2deg"><div class="fh"><i class="ficon">4</i><h3>각도기 끼우기</h3></div><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div>
  <div class="btns"><button class="note orange pin bt" style="--r:-2deg" data-act="step">다음 단계 →</button><button class="note purple bt" style="--r:2deg" data-act="reset">처음부터</button><p class="hand cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  <p class="hand nr">버튼 규칙 없음 → 작은 포스트잇으로 표현</p>
</section>
<section class="slide paper grain">
  <div class="note white pin head" style="--r:1deg"><p class="lab">측정 결과</p><h2 class="hd">하루 동안 무엇이 어떻게 변할까요?</h2></div>
  <div class="canvas" style="--r:-1deg">
    <div class="lg"><span><i class="sw yel"></i>태양 고도(°)</span><span><i class="sw pk"></i>그림자 길이(cm)</span><span><i class="sw gr"></i>기온(℃)</span><span class="hand">예시 값</span></div>
    <svg viewBox="0 0 1040 470">
      <line x1="40" x2="1020" y1="420" y2="420" class="ax"/>
      <rect x="46" y="198" width="68" height="222" rx="4" class="bar"/><text x="80" y="186" class="bv">38°</text><text x="80" y="456" class="tx">9:30</text><rect x="196" y="140" width="68" height="280" rx="4" class="bar"/><text x="230" y="128" class="bv">48°</text><text x="230" y="456" class="tx">10:30</text><rect x="346" y="99" width="68" height="321" rx="4" class="bar"/><text x="380" y="87" class="bv">55°</text><text x="380" y="456" class="tx">11:30</text><rect x="496" y="88" width="68" height="332" rx="4" class="bar mx"/><text x="530" y="76" class="bv">57°</text><text x="530" y="456" class="tx">12:30</text><rect x="646" y="105" width="68" height="315" rx="4" class="bar"/><text x="680" y="93" class="bv">54°</text><text x="680" y="456" class="tx">13:30</text><rect x="796" y="146" width="68" height="274" rx="4" class="bar"/><text x="830" y="134" class="bv">47°</text><text x="830" y="456" class="tx">14:30</text><rect x="946" y="204" width="68" height="216" rx="4" class="bar"/><text x="980" y="192" class="bv">37°</text><text x="980" y="456" class="tx">15:30</text>
      <polyline points="80,119 230,208 380,257 530,271 680,252 830,201 980,107" class="ln pk"/><circle cx="80" cy="119" r="8" class="dt pk"/><circle cx="230" cy="208" r="8" class="dt pk"/><circle cx="380" cy="257" r="8" class="dt pk"/><circle cx="530" cy="271" r="8" class="dt pk"/><circle cx="680" cy="252" r="8" class="dt pk"/><circle cx="830" cy="201" r="8" class="dt pk"/><circle cx="980" cy="107" r="8" class="dt pk"/>
      <polyline points="80,257 230,215 380,182 530,156 680,140 830,131 980,142" class="ln gr"/><circle cx="80" cy="257" r="8" class="dt gr"/><circle cx="230" cy="215" r="8" class="dt gr"/><circle cx="380" cy="182" r="8" class="dt gr"/><circle cx="530" cy="156" r="8" class="dt gr"/><circle cx="680" cy="140" r="8" class="dt gr"/><circle cx="830" cy="131" r="8" class="dt gr"/><circle cx="980" cy="142" r="8" class="dt gr"/>
    </svg>
  </div>
  <div class="note yellow pin tape stats" style="--r:2deg"><p class="lab">하루 기록</p><div class="sr"><span>남중 시각<em class="hand">태양 고도가 가장 높아요</em></span><b>12:30</b></div><div class="sr"><span>남중 방향<em class="hand">남중할 때 태양의 위치</em></span><b>정남</b></div><div class="sr"><span>최고 기온<em class="hand">기온이 가장 높아요</em></span><b>14:30</b></div><div class="sr"><span>가장 긴 그림자<em class="hand">그림자가 가장 길어요</em></span><b>9:30</b></div></div>
  <p class="hand src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
  <i class="dood d4"><svg viewBox="0 0 100 100"><path d="M50 10 L90 85 L10 85 Z"/></svg></i>
</section>
<section class="slide warm grain">
  <div class="note white pin head" style="--r:1deg"><p class="lab">관계 정리</p><h2 class="hd">태양 고도가 바뀌면 무엇이 달라질까요?</h2></div>
  <div class="note pink pin cmp c0" style="--r:-2deg"><p class="lab">HIGH</p><h3>태양 고도가 높을 때</h3><p class="li">그림자 길이는 짧아져요</p><p class="li">기온은 높아져요</p></div><div class="note blue bluepin pin cmp c1" style="--r:2deg"><p class="lab">LOW</p><h3>태양 고도가 낮을 때</h3><p class="li">그림자 길이는 길어져요</p><p class="li">기온은 낮아져요</p></div>
  <i class="vs">VS</i>
  <div class="note white tbl" style="--r:-.8deg"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span class="tt">오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span class="tt">낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span class="tt">오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
  <div class="note yellow pin tape stmt" style="--r:-2deg"><p class="sq">태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><p class="hand by">— 오늘의 정리</p></div>
  <div class="note green pin greenpin lst" style="--r:3deg"><p class="lab">남중</p><p class="li">태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p class="li">이때의 태양 고도를 남중 고도라고 해요</p></div>
  <i class="dood d5"><svg viewBox="0 0 100 100"><path d="M20 20 L80 80 M80 20 L20 80"/></svg></i>
</section>
<section class="slide cork grain">
  <div class="note white pin head" style="--r:-1deg"><p class="lab">확인하기</p><h2 class="hd">배운 내용을 확인해 볼까요?</h2></div>
  <div class="note yellow pin tape quiz" style="--r:1.2deg" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <p class="lab">QUIZ TIME</p>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <button class="opt" data-opt="0"><i class="ficon sm">A</i><span>오전 9시 30분</span></button><button class="opt" data-opt="1"><i class="ficon sm">B</i><span>낮 12시 30분 무렵</span></button><button class="opt" data-opt="2"><i class="ficon sm">C</i><span>오후 3시 30분</span></button>
    <p class="fb" data-fb></p>
    <button class="note purple bt rty" style="--r:-2deg" data-act="retry">다시 풀기 ↺</button>
    <p class="hand yay">정답이에요 :)</p>
  </div>
  <div class="note blue pin bluepin blk" style="--r:-1.5deg">
    <p class="lab">빈칸을 눌러 확인해요</p>
    <p class="br"><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="br"><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="br"><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
  </div>
  <div class="words"><span class="note pink wn" style="--r:-6deg">태양 고도</span><span class="note green wn" style="--r:5deg">남중 고도</span><span class="note orange wn" style="--r:-3deg">그림자 길이</span><span class="note purple wn" style="--r:7deg">기온</span></div>
  <p class="hand nr">빈칸 규칙 없음 → 작은 노랑 메모 조각으로 표현</p>
</section>
<section class="slide paper grain">
  <div class="note white pin head" style="--r:1deg"><p class="lab">디자인 안내</p><h2 class="hd">이 디자인 사용 설명서</h2></div>
  <div class="note yellow pin tape g6" style="--r:-1deg"><div class="r6"><p class="lab">한눈에</p><p>워크숍 벽에 붙인 포스트잇. <b>모든 내용이 파스텔 메모</b> 위에 — 바탕은 장마다 따뜻한 빛·코르크·모눈종이로 바꿔요.</p></div><div class="r6"><p class="lab">색</p><p><span class="sw6"><span><i style="background:linear-gradient(135deg,#ffe066,#ffd43b)"></i>노랑</span><span><i style="background:linear-gradient(135deg,#a5d8ff,#74c0fc)"></i>파랑</span><span><i style="background:linear-gradient(135deg,#ffc9c9,#ff9f9f)"></i>분홍</span><span><i style="background:linear-gradient(135deg,#b2f2bb,#8ce99a)"></i>초록</span><span><i style="background:#ffcc80"></i>주황</span><span><i style="background:#d0bfff"></i>보라</span><span><i style="background:#2d2a26"></i>숯 잉크</span></span></p></div><div class="r6"><p class="lab">글꼴</p><p>제목·숫자 Shrikhand → Cafe24 ClassicType · 본문 Zilla Slab → Hahmlet Regular<br>손글씨 Caveat → 야근하는 김주임</p></div><div class="r6"><p class="lab">이렇게 쓰면 좋아요</p><p>생각 모으기·브레인스토밍·모둠 의견 정리. 주인공 메모는 ±1~3°, 떠다니는 메모는 더 크게 기울여요.</p></div></div>
  <p class="hand sl6">대표 장치 — 눌러 보세요 ↓</p>
  <div class="note blue d6 a pin bluepin" style="--r:1.5deg"><div class="dh"><h3>압정 + 테이프</h3><button class="note orange bt sm" data-demo="#sb-pin" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="pk6" id="sb-pin"><i class="note white pin"></i><i class="note pink pin bluepin"></i><i class="note green pin greenpin"></i><i class="note purple tape"></i></div></div>
  <div class="note pink d6 b pin gold" style="--r:-1.5deg"><div class="dh"><h3>이웃은 반대로</h3><button class="note orange bt sm" data-demo="#sb-tilt" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="tl6" id="sb-tilt"><span class="note yellow">생각</span><span class="note white">질문</span><span class="note green">정리</span></div></div>
  <div class="note green d6 c pin greenpin" style="--r:1deg"><div class="dh"><h3>글꼴 바꾸기 강조</h3><button class="note orange bt sm" data-demo="#sb-ft" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p class="ft6" id="sb-ft">태양 고도가 <b>가장 높을 때</b></p></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><button class="dk-next" aria-label="다음">→</button></nav>
  </main>
</div>

<!-- 슬라이드 넘김·단계 버튼·퀴즈 엔진. 이 줄은 지우거나 바꾸지 마세요 -->
<script src="https://k-slide.web.app/kit/v1/scatterbrain.js"></script>
</body>
</html>
```

---

## 5. 참고: 공통 CSS와 엔진 사용법 (뼈대가 이미 불러옴 — HTML에 옮겨 쓰지 마세요)

아래는 `https://k-slide.web.app/kit/v1/scatterbrain.css`의 내용과 엔진(`https://k-slide.web.app/kit/v1/scatterbrain.js`)의 사용법 주석입니다. 클래스의 모양·크기·배치를 이해하는 데에만 쓰세요. 이 내용을 `<style>`이나 `<script>`에 넣으면 안 됩니다.

```css
/* scatterbrain — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-38';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/cafe24-classictype/Cafe24Classictype-v1.1.woff2") format("woff2");font-weight:400}
@font-face{font-family:'kp-39';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/hahmlet/Hahmlet-Regular.woff2") format("woff2");font-weight:400}
@font-face{font-family:'kp-37';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/overtime-kim-joo-im/Kimjuim.woff2") format("woff2");font-weight:400}
/* === THEME === */
:root{--stage-bg:#f7f5f0;--slide-bg:#f7f5f0;
  --kt:'kp-38';--kb:'kp-39';--ka:'kp-37';
  --wt:400;--wb:400}
*{margin:0;padding:0;box-sizing:border-box}
body{font-synthesis:none;word-break:keep-all;letter-spacing:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
/* === VIEWPORT BASE (frontend-slides, mandatory) === */
/* ===========================================
   FIXED 16:9 STAGE: MANDATORY BASE STYLES
   Include this ENTIRE file in every presentation.
   Slides are authored at 1920×1080 and scaled as a whole.
   =========================================== */

/* 1. Lock the browser viewport */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 2. Full-window deck viewport */
.deck-viewport {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--stage-bg, #000);
}

/* 3. Fixed 16:9 design canvas.
   JavaScript sets transform: translate(...) scale(...). */
.deck-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: 0 0;
    background: var(--slide-bg, #fff);
}

/* 4. Slides stack inside the fixed stage.
   Content must be laid out at 1920×1080, not reflowed per device. */
.slide {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    background: var(--slide-bg, #fff);
}

.slide.active,
.slide.visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* 5. Keep media inside authored slide bounds */
img,
video,
canvas,
svg {
    max-width: 100%;
    max-height: 100%;
}

/* 6. Presentation chrome stays outside the slide design system */
.deck-controls {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 1000;
}

/* 7. Print one fixed-size slide per page */
@media print {
    html,
    body {
        width: 1920px;
        height: auto;
        overflow: visible;
        background: #fff;
    }

    .deck-viewport {
        position: static;
        overflow: visible;
        background: #fff;
    }

    .deck-stage {
        position: static;
        width: auto;
        height: auto;
        transform: none !important;
        background: none;
    }

    .slide {
        position: relative;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 1920px;
        height: 1080px;
        break-after: page;
        page-break-after: always;
    }

    .slide:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .deck-controls {
        display: none !important;
    }
}

/* 8. Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.2s !important;
    }
}

/* 동작 줄이기(Windows '애니메이션 효과' 끔 등): 위 규칙이 길이를 0.01ms로 줄이면 반복 애니메이션이 깜빡이듯 빨라짐 → 반복은 한 번만 */
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-iteration-count:1 !important}}
.dk-nav{position:absolute;z-index:50}


/* === 측정기 그림(figure-gauge.js) 기본 === */
.gauge{display:block;width:100%;height:auto;overflow:visible;--g-sw:2.5}
.gauge .g-lb{font-family:var(--g-font,var(--kb));font-size:40px;font-weight:700;fill:var(--g-ink,currentColor)}
.gauge .g-ground{stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw);opacity:.35}
.gauge .g-board{fill:var(--g-board,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-ruler{fill:var(--g-ruler,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-tick{stroke:var(--g-ink,currentColor);stroke-width:1.5}
.gauge .g-stick{fill:var(--g-stick,var(--g-ink,currentColor));stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-mark,.gauge .g-lead,.gauge .g-dim,.gauge .g-angle{fill:none;stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-angle{stroke-width:4}
.gauge .g-shadow{fill:var(--g-shadow,var(--g-ink,currentColor));opacity:.6}
.gauge .g-string{stroke:var(--g-acc,var(--g-ink,currentColor));stroke-width:4}
.gauge .g-prot{fill:var(--g-prot,none);stroke:var(--g-ink,currentColor);stroke-width:var(--g-sw)}
.gauge .g-prot2{fill:none;stroke:var(--g-ink,currentColor);stroke-width:1.5}
.gauge .g-hole{fill:var(--g-ink,currentColor)}
.gauge .g-ray{stroke:var(--g-acc,var(--g-ink,currentColor));stroke-width:7}
.gauge .g-rayh{fill:var(--g-acc,var(--g-ink,currentColor))}
/* 만드는 중(1~3단계): 아직 안 만든 부품과 측정 표시는 흐리게 / 0·4단계는 모두 또렷 */
.slide[data-step="1"] .gauge .g-part:not(.on),.slide[data-step="2"] .gauge .g-part:not(.on),.slide[data-step="3"] .gauge .g-part:not(.on),
.slide[data-step="1"] .gauge .g-meas,.slide[data-step="2"] .gauge .g-meas,.slide[data-step="3"] .gauge .g-meas{opacity:var(--g-dim,.2)}

/* === TEMPLATE STYLES === */

/* --- 팔레트 · 바탕 3종 · 종이결 --- */
:root{--ink:#2d2a26;--ink2:#5c5750;--sh:rgba(45,42,38,.15);--shd:rgba(45,42,38,.25);--paper:#f7f5f0;--cream:#faf8f3}
.slide{color:var(--ink);font-family:'Zilla Slab',var(--kb),serif;font-weight:var(--wb);cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='9' fill='%23e03131' stroke='white' stroke-width='2'/><circle cx='12' cy='12' r='3' fill='white'/></svg>") 12 12, pointer}
.slide button{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='12' cy='12' r='9' fill='%23e03131' stroke='white' stroke-width='2'/><circle cx='12' cy='12' r='3' fill='white'/></svg>") 12 12, pointer}
.warm{background:radial-gradient(ellipse at 15% 20%,rgba(255,224,102,.35),transparent 50%),radial-gradient(ellipse at 85% 30%,rgba(165,216,255,.35),transparent 50%),radial-gradient(ellipse at 60% 90%,rgba(255,201,201,.35),transparent 50%),linear-gradient(160deg,#faf8f3,#f3eee4)}
.cork{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><path d='M13 9v8M9 13h8' stroke='%235c4326' stroke-width='1.4' opacity='.15'/></svg>"),radial-gradient(ellipse at 30% 30%,#d6b48a,transparent 70%),linear-gradient(135deg,#c9a274,#b48b5e)}
.paper{background:linear-gradient(rgba(45,42,38,.08) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(45,42,38,.08) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(180deg,#faf8f3,#f3f0e8)}
.grain::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:50;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.slide>*{position:absolute}
h1,h2,h3,.unit,.big,.sq,.q,.sr b,.wn{font-family:'Shrikhand',var(--kt),cursive;font-weight:var(--wt);letter-spacing:.02em}
.hand,.lab{font-family:'Caveat',var(--ka),cursive}
.lab{font-size:28px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2)}
.hand{font-size:40px;line-height:1.3}
.hand.lg{font-size:46px}
.dood{opacity:.15;pointer-events:none}
.dood svg{width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.nr{left:110px;bottom:24px;font-size:30px;color:var(--ink)}
.cork .nr{color:#fff8e6}

/* 포스트잇 · 압정 · 테이프 · 원형 아이콘 */
.note{padding:40px;box-shadow:2px 3px 15px var(--sh),0 1px 3px var(--shd);transform:rotate(var(--r,0deg))}
.note.yellow{background:linear-gradient(135deg,#ffe066,#ffd43b)}.note.blue{background:linear-gradient(135deg,#a5d8ff,#74c0fc)}
.note.pink{background:linear-gradient(135deg,#ffc9c9,#ff9f9f)}.note.green{background:linear-gradient(135deg,#b2f2bb,#8ce99a)}
.note.orange{background:#ffcc80}.note.purple{background:#d0bfff}.note.white{background:#fff;border:2px solid var(--ink)}
.pin::before{content:'';position:absolute;left:50%;top:-12px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff6b6b,#c92a2a);box-shadow:0 2px 4px var(--shd),inset -2px -2px 4px rgba(0,0,0,.2);z-index:3}
.pin.bluepin::before{background:radial-gradient(circle at 30% 30%,#4dabf7,#1864ab)}
.pin.greenpin::before{background:radial-gradient(circle at 30% 30%,#69db7c,#2f9e44)}
.pin.gold::before{background:radial-gradient(circle at 30% 30%,#ffd43b,#f59f00)}
.tape::after{content:'';position:absolute;left:50%;top:-18px;width:130px;height:36px;margin-left:-65px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.3);transform:rotate(-2deg);z-index:2}
.tape.pin::before{left:30%}
.ficon{display:grid;place-items:center;width:60px;height:60px;border:3px solid var(--ink);border-radius:50%;font:400 28px/1 'Shrikhand',cursive;font-style:normal;flex:none}
.bt{padding:16px 30px;font:700 32px/1 'Zilla Slab',var(--kb),serif;color:var(--ink)}
.bt:disabled{opacity:.45}
.head{left:110px;top:60px;padding:24px 44px 26px}
.hd{font-size:64px;line-height:1.15;white-space:nowrap}

/* --- 1. 표지(따뜻한 빛): 압정 + 테이프 주인공 노랑 메모(단원 → 학습 목표, 핵심 낱말 = 제목 글꼴) + 떠다니는 메모 3장 + 낙서 --- */
.hero{left:110px;top:160px;width:1290px;padding:56px 66px 60px}
.unit{display:flex;align-items:baseline;gap:26px;margin-top:6px;font-size:70px;line-height:1.15;white-space:nowrap}
.unit span{font:400 40px/1 'Shrikhand',cursive;color:var(--ink2)}
.gl{margin-top:26px;font-size:44px}
.t1{margin-top:4px;font-family:'Zilla Slab',var(--kb),serif;font-weight:500;font-size:92px;line-height:1.3;letter-spacing:0;white-space:nowrap}
.t1 .gk{font-family:'Shrikhand',var(--kt),cursive;font-weight:var(--wt)}
.acc{padding:28px 34px}
.a1{left:1480px;top:150px;width:340px;text-align:center}
.big{display:block;font-size:110px;line-height:1.1}
.a2{left:1500px;top:520px;width:340px}
.a3{left:1180px;top:800px;width:440px}
.d1{left:160px;top:860px;width:300px;height:90px}.d2{left:1300px;top:60px;width:110px;height:110px}

/* --- 2. 만들기(코르크): 흰 메모 제목 + 주황 메모 | 폴라로이드 속 측정기 그림(손글씨 정의) | 기능 메모 4장(켜지면 또렷) + 작은 포스트잇 버튼 --- */
.nt2{left:1180px;top:70px;width:640px}
.polaroid{left:100px;top:270px;width:880px;background:#fff;padding:18px 18px 10px;box-shadow:2px 3px 15px var(--sh),0 1px 3px var(--shd);transform:rotate(var(--r));
  --g-ink:var(--ink);--g-acc:#c92a2a;--g-stick:#f59f00;--g-board:#ffe066;--g-ruler:#a5d8ff;--g-prot:rgba(208,191,255,.35);--g-shadow:rgba(45,42,38,.35);--g-font:'Zilla Slab',var(--kb),serif;--g-sw:2.5}
.polaroid figcaption{padding:4px 10px 0;text-align:center;font-size:38px}
.feats{left:1070px;right:100px;top:290px;display:grid;grid-template-columns:1fr 1fr;gap:36px 34px}
.feat{position:relative;padding:28px 26px 24px;min-height:250px;transition:opacity .25s}
.fh{display:flex;align-items:center;gap:14px}
.feat h3{font-size:40px;line-height:1.1}
.feat p{margin-top:12px;font-size:25px;line-height:1.5;color:var(--ink2)}
.slide[data-step]:not([data-step="0"]) .feat:not(.on){opacity:.4}
.feat.now .ficon{background:var(--ink);color:#ffe066}
.btns{left:1070px;right:100px;top:880px;display:flex;align-items:center;gap:30px}
.cap{flex:1;font-size:36px;color:#fff8e6}

/* --- 3. 숫자와 그래프(모눈종이): 흰 차트 캔버스(노랑 막대 = 태양 고도, 가장 높은 값 = 분홍, 분홍·초록 선) | 압정 + 테이프 노랑 통계 메모(점선 통계 줄) --- */
.canvas{left:100px;top:280px;width:1120px;background:#fff;padding:24px 30px 16px;box-shadow:2px 3px 15px var(--sh),0 1px 3px var(--shd);transform:rotate(var(--r))}
.lg{display:flex;align-items:center;gap:30px;font-size:24px}
.lg .hand{margin-left:auto;font-size:34px}
.sw{display:inline-block;width:22px;height:22px;border-radius:4px;margin-right:8px;vertical-align:-3px}
.sw.yel{background:#ffd43b}.sw.pk{background:#ff9f9f}.sw.gr{background:#8ce99a}
.canvas svg{display:block;width:100%;margin-top:6px}
.ax{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.bar{fill:#ffd43b}.bar.mx{fill:#ff9f9f}
.bv{font:400 28px 'Shrikhand',cursive;fill:var(--ink);text-anchor:middle}
.tx{font:500 24px 'Zilla Slab',serif;fill:var(--ink2);text-anchor:middle}
.ln{fill:none;stroke-width:4;stroke-linejoin:round}
.ln.pk{stroke:#e8590c;stroke:#ff6b6b}.ln.gr{stroke:#2f9e44}
.dt.pk{fill:#ff9f9f;stroke:#c92a2a;stroke-width:2}.dt.gr{fill:#8ce99a;stroke:#2f9e44;stroke-width:2}
.stats{left:1290px;right:100px;top:270px;padding:44px 40px 30px}
.sr{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px dashed rgba(45,42,38,.2);font-size:26px}
.sr span{display:flex;flex-direction:column}
.sr em{font-style:normal;font-size:30px;color:var(--ink2)}
.sr b{font-size:52px;line-height:1}
.src{left:110px;top:960px;font-size:28px;width:1100px}
.d4{left:1700px;top:900px;width:80px;height:80px}

/* --- 4. 비교와 표(따뜻한 빛): 분홍 · 파랑 메모 + 잉크 대결 원 + 흰 메모 표(점선 줄) | 압정 + 테이프 노랑 문장 메모(손글씨 서명) + 초록 남중 메모 --- */
.cmp{top:280px;width:520px;padding:34px 38px}
.c0{left:110px}.c1{left:760px}
.cmp h3{margin:4px 0 10px;font-size:42px;line-height:1.15}
.li{font-size:27px;line-height:1.55}
.li::before{content:'• ';color:var(--ink2)}
.vs{left:648px;top:420px;width:72px;height:72px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:400 24px/1 'Shrikhand',cursive;font-style:normal;box-shadow:0 2px 8px var(--shd);z-index:3}
.tbl{left:110px;width:1170px;top:640px;padding:20px 34px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(45,42,38,.2);font-size:27px}
.tr:last-child{border-bottom:0}
.tr.th{font:400 24px/1.2 'Caveat',var(--ka),cursive;letter-spacing:.15em;color:var(--ink2)}
.tt{font-family:'Shrikhand',var(--kt),cursive;font-weight:var(--wt)}
.stmt{left:1360px;right:100px;top:250px;padding:50px 46px 40px}
.sq{font-size:46px;line-height:1.2}
.by{margin-top:14px;font-size:38px;text-align:right}
.lst{left:1380px;right:110px;top:700px;padding:34px 36px}
.d5{left:1250px;top:150px;width:70px;height:70px}

/* --- 5. 확인하기(코르크): 압정 + 테이프 노랑 퀴즈 메모(원형 아이콘 보기, 정답 = 잉크 아이콘) | 파랑 빈칸 메모(노랑 메모 조각) + 낱말 포스트잇 --- */
.quiz{left:110px;width:960px;top:270px;height:720px;padding:50px 54px 30px;display:flex;flex-direction:column;gap:12px}
.q{margin:2px 0 12px;font-size:52px;line-height:1.15}
.opt{display:flex;align-items:center;gap:20px;text-align:left;font-size:36px;font-weight:500;color:var(--ink);padding:2px 0}
.opt.right .ficon{background:var(--ink);color:#ffe066}
.opt.right span{font-weight:700}
.opt.wrong span{text-decoration:line-through;text-decoration-thickness:3px;color:var(--ink2)}
.opt:disabled:not(.right){opacity:.5}
.fb{margin-top:10px;font-size:28px;line-height:1.5;color:var(--ink2)}
.rty{align-self:flex-start;margin-top:auto;font-size:28px;padding:12px 24px}
.yay{position:absolute;right:46px;bottom:40px;font-size:56px;transform:rotate(-8deg);visibility:hidden}
.quiz.solved .yay{visibility:visible}
.blk{left:1150px;right:110px;top:270px;padding:44px 40px 34px;display:flex;flex-direction:column;gap:18px}
.br{font-size:29px;line-height:1.7}
.blank{position:relative;min-width:160px;margin-right:10px;padding:2px 14px;background:linear-gradient(135deg,#ffe066,#ffd43b);box-shadow:1px 2px 6px var(--sh);transform:rotate(-2deg);font:400 28px/1.3 'Shrikhand',var(--kt),cursive;color:var(--ink);text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;top:2px}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.words{left:1170px;right:110px;top:770px;display:flex;flex-wrap:wrap;gap:26px 22px}
.wn{padding:16px 24px;font-size:32px}

/* --- 내비: 오른쪽 아래 압정 단추만 --- */
.dk-nav{position:absolute;right:40px;bottom:24px;display:flex;gap:16px;z-index:60}
.dk-prev,.dk-next{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff6b6b,#c92a2a);box-shadow:0 2px 6px var(--shd),inset -3px -3px 6px rgba(0,0,0,.2);color:#fff;font:700 24px/1 var(--kb)}
.dk-prev:disabled,.dk-next:disabled{opacity:.3}
/* --- 6. 디자인 안내(모눈종이): 노랑 메모 설명 | 포스트잇 시연 3개 --- */
.g6{left:110px;width:880px;top:330px;padding:40px 48px;display:flex;flex-direction:column;gap:16px}
.r6 .lab{font-size:26px}
.r6 p+p{font-size:27px;line-height:1.5}
.r6 b{font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-5px;border:1.5px solid var(--ink)}
.sl6{left:1080px;top:236px;font-size:40px;transform:rotate(-2deg)}
.d6{left:1080px;right:110px;height:200px;padding:22px 30px}
.d6.a{top:310px}.d6.b{top:540px}.d6.c{top:770px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:38px;line-height:1.15}
.bt.sm{font-size:22px;padding:10px 16px}
.bt.sm[aria-pressed="true"]{background:#fff;border:2px solid var(--ink)}
.pk6{position:relative;margin-top:28px;display:flex;gap:30px}
.pk6 .note{position:relative;width:80px;height:70px;padding:0}
.pk6 .note::before,.pk6 .note::after{visibility:hidden}
.pk6.play .note::before,.pk6.play .note::after{visibility:visible}
.pk6 .tape::after{width:70px;margin-left:-35px}
.tl6{margin-top:22px;display:flex;gap:22px}
.tl6 .note{padding:10px 22px;font-size:26px;font-weight:600;transition:transform .3s}
.tl6.play .note:nth-child(odd){--r:-4deg}.tl6.play .note:nth-child(even){--r:5deg}
.ft6{margin-top:24px;font-size:38px;line-height:1.2}
.ft6 b{font-weight:500}
.ft6.play b{font-family:'Shrikhand',var(--kt),cursive;font-weight:var(--wt)}

/* === DECK ENGINE (slide-refs 공용, 덱 HTML에 그대로 인라인됨) ===
   window.DECK_CFG = { type: 'x' | 'y' | 'fade' | 'shift' | 'rise', dur: ms, ease: css, dist: px, wheel: bool }
   window.DECK_FX  = { enter(slide, i), step(slide, k), answer(quiz, ok, btn) }  // 템플릿별 효과 훅(선택)
   - 넘김: → ↓ Space PageDown Enter = 다음(단계가 남았으면 단계 먼저), ← ↑ PageUp = 이전, Home/End
   - 내비: .dk-dot(점) .dk-count(번호, data-pad면 01 형식) .dk-prev .dk-next
   - 단계: <section data-steps="4"> 안의 [data-s="k"] 요소가 k단계부터 .on, 현재 단계는 .now
           [data-caps='["...",...]'] 요소의 글이 단계마다 바뀜, 버튼 [data-act="step"] [data-act="reset"]
   - 퀴즈: [data-quiz data-answer data-right data-wrong] 안의 버튼 [data-opt="i"], 결과 글 [data-fb], 다시 풀기 [data-act="retry"]
   - 빈칸: [data-blank] 를 누르면 .open (답 보이기/숨기기)
   - 시연(6장 디자인 안내): 버튼 [data-demo="선택자"] 를 누르면 같은 장 안의 그 요소에 .play
       data-mode="toggle" 이면 .play 켜기/끄기(aria-pressed), 아니면 .play를 뺐다 다시 붙여 애니메이션을 처음부터 다시 재생 */
```

(끝. 사용자의 수업 내용을 받아 위 지시대로 HTML을 만드세요.)