# pin-and-paper — 슬라이드 만들기 지시서 (채팅 AI용)

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`pin-and-paper`)으로 수업 슬라이드를 만들어 주도록 쓴 지시서입니다.
> 파일을 읽고 쓸 수 있는 에이전트 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`)에서 불러오는데, 일부 서비스의 미리보기 창은 바깥 파일을 막기 때문입니다. **내려받아 브라우저(크롬·엣지 등)로 열면 정상**으로 보입니다.

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

## 라이선스

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

- Hakgyoansim Undongjang: Hakgyoansim Undongjang — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © KERIS. All rights reserved.
  파일: HakgyoansimUndongjangL.ttf
- 프리텐다드 Pretendard-Regular: 프리텐다드 — 프리텐다드 (Pretendard) — 길형진 (orioncactus) / 눈누: https://noonnu.cc/font_page/694
  파일: Pretendard-Regular.ttf
- Hakgyoansim Badasseugi TTF L: Hakgyoansim Badasseugi TTF — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © KERIS. All rights reserved.
  파일: Hakgyoansim Badasseugi TTF L.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/pin-and-paper.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/pin-and-paper.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Hakgyoansim Undongjang(300) · 본문 프리텐다드 Pretendard-Regular(400) · 포인트 Hakgyoansim Badasseugi TTF L)는 공통 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. 디자인 규칙 (`pin-and-paper` design.md)

````markdown
---
version: alpha
name: Pin & Paper
description: A field-notebook editorial system rendered as yellow legal-pad paper with deep cobalt-blue ink. Every slide carries a fractalnoise paper-grain overlay, hand-drawn safety-pin SVG illustrations that "pin" cards to the page, and a hand-script Caveat face for personal annotations. Space Grotesk at heavy weights carries the printed headlines; DM Mono handles archival labels. The aesthetic borrows from analog field reports, vintage public-notice boards, and the diary pages of scientific notebooks — closer to a lab journal pinned to a corkboard than a polished deck.

colors:
  paper: "#EFE56A"
  paper-2: "#F5ECA0"
  paper-3: "#E8D85A"
  paper-extra: "#FBE6A4"
  cream: "#F8F1D6"
  kraft: "#C9A66B"
  ink: "#1F3A8A"
  ink-soft: "#2D4FB8"
  ink-line: "#3457C4"
  ink-deep: "#0E1430"
  red: "#C2342B"
  olive: "#6B7A2E"
  orange: "#D8702A"

color-aliases:
  c-bg: paper
  c-text: ink
  c-card: cream
  c-stamp: red

typography:
  display-mega:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 196px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.04em
  display-section:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 168px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.04em
  display-stat:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 168px
    fontWeight: 700
    lineHeight: 0.85
    letterSpacing: -0.04em
  h1-cta:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 130px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.035em
  h1-chart:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 110px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.035em
  h2:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
  h2-md:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 84px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.03em
  h2-sm:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.02em
  quote-text:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  card-row:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.02em
  card-h3:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.02em
  card-h3-sm:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -0.015em
  body:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
  body-md:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.35
  body-sm:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.45
  body-list:
    fontFamily: "Space Grotesk, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
  scribble-mega:
    fontFamily: "Caveat, cursive"
    fontSize: 360px
    fontWeight: 700
    lineHeight: 0.8
  scribble-lg:
    fontFamily: "Caveat, cursive"
    fontSize: 70px
    fontWeight: 700
    lineHeight: 0.9
  scribble-md:
    fontFamily: "Caveat, cursive"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 0.9
  scribble-sm:
    fontFamily: "Caveat, cursive"
    fontSize: 38px
    fontWeight: 600
    lineHeight: 1.05
  scribble-xs:
    fontFamily: "Caveat, cursive"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.05
  label-top:
    fontFamily: "DM Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 500
    letterSpacing: 0.12em
    textTransform: uppercase
  label-meta:
    fontFamily: "DM Mono, ui-monospace, monospace"
    fontSize: 16px
    fontWeight: 500
    letterSpacing: 0.18em
    textTransform: uppercase
  label-footer:
    fontFamily: "DM Mono, ui-monospace, monospace"
    fontSize: 15px
    fontWeight: 500
    letterSpacing: 0.14em
    textTransform: uppercase
  stamp:
    fontFamily: "DM Mono, monospace"
    fontSize: 16px
    fontWeight: 500
    letterSpacing: 0.18em
    textTransform: uppercase

spacing:
  pad-edge: 64px
  pad-top: 110px
  pad-bottom: 90px
  card-pad-md: "28px 28px 24px"
  card-pad-lg: "32px 22px 22px"
  card-pad-xl: "36px 28px 28px"
  card-pad-quote: "60px 80px"
  grid-gap-sm: 22px
  grid-gap-md: 28px
  grid-gap-lg: 32px

canvas:
  width: 1920px
  height: 1080px

components:
  paper-surface:
    background: "radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.18), transparent 60%), radial-gradient(140% 100% at 80% 95%, rgba(0,0,0,.05), transparent 55%), {colors.paper}"
    description: "Default slide surface — yellow paper with a soft upper-left highlight gradient and a soft lower-right shadow gradient layered over the base paper color."
  paper-grain-overlay:
    selector: ".slide::before"
    background: "fractalNoise SVG via data URI, baseFrequency=1.4, octaves=2"
    opacity: 0.35
    mixBlendMode: multiply
    description: "Non-optional fractal-noise paper grain overlay on every slide. Lives on the ::before pseudo-element; opacity 0.35, multiply blend. On ink slides, opacity drops to 0.25 with screen blend."
  pinned-card:
    background: "{colors.cream}"
    border: "1.5px solid {colors.ink}"
    borderRadius: 4px
    boxShadow: "5px 6px 0 0 {colors.ink}"
    padding: "{spacing.card-pad-md}"
    description: "Cream paper card with a 1.5px ink border, 4px micro-radius, and a hard 5px-6px ink-blue offset shadow. The system's universal card pattern — every card looks like a piece of paper pinned to the surface."
  pinned-card-alt:
    background: "{colors.paper-2}"
    description: "Card variant using the lighter paper-2 tone. Used to break up adjacent same-tone cards."
  pinned-card-alt2:
    background: "{colors.paper-extra}"
    transform: "rotate(0.6deg)"
    description: "Card variant with the deepest paper tone and a slight rotation (0.6 to 1.5 degrees) — gives the impression of being pinned slightly askew."
  pin-illustration:
    width: "varies (110–640px)"
    color: "currentColor"
    transform: "rotate(-14deg to +20deg)"
    description: "Hand-drawn safety-pin SVG illustration in ink-blue or paper (when on ink surface). Multiple variants: closed pin (#pin), open pin (#pin-open). Always rotated slightly off-axis. Acts as both decoration and the visual signal that a card is 'pinned' to the page."
  scribble:
    fontFamily: "Caveat, cursive"
    color: "{colors.ink}"
    lineHeight: 1.05
    description: "Caveat hand-script face used for handwritten notes, marginalia, and 'me' voice annotations. May be rotated slightly (-3 to -1.5 degrees) and underlined via 2px solid ink for emphasis."
  stamp:
    border: "3px solid {colors.red}"
    color: "{colors.red}"
    padding: "6px 16px"
    fontFamily: "DM Mono, monospace"
    fontSize: 16px
    letterSpacing: 0.18em
    textTransform: uppercase
    transform: "rotate(-4deg)"
    description: "Cinnabar-red rubber stamp — 3px solid red border, red mono text, rotated -4 degrees. Used for status marks like CONFIDENTIAL or RECEIVED."
  top-chrome:
    position: "absolute; top: 44px; left: 64px; right: 64px"
    fontFamily: "DM Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 500
    letterSpacing: 0.12em
    textTransform: uppercase
    description: "Top metadata band — brand lockup on left (with inline #mark SVG glyph), meta tags on right. Mono uppercase, line-height 1."
  footer-chrome:
    position: "absolute; left: 64px; right: 64px; bottom: 36px"
    fontFamily: "DM Mono, ui-monospace, monospace"
    fontSize: 15px
    fontWeight: 500
    letterSpacing: 0.14em
    textTransform: uppercase
    opacity: 0.65
    description: "Bottom metadata band — typically left-source + right-page-position pair at 65% opacity."
  pin-glyph-closed:
    svgId: "#pin"
    viewBox: "0 0 360 110"
    description: "Closed safety-pin SVG glyph — coiled spring on the right, shaft sweeping left, oval clasp cap on the left."
  pin-glyph-open:
    svgId: "#pin-open"
    viewBox: "0 0 360 130"
    description: "Open safety-pin SVG glyph — clasp lifted, sharp point exposed pointing left."
  mark-glyph:
    svgId: "#mark"
    viewBox: "0 0 32 16"
    description: "Small inline mark glyph for the top-chrome brand lockup — circle on the right, arrow shaft pointing left."
  table-cell:
    padding: "18px 22px"
    borderBottom: "1.5px solid rgba(31,58,138,.5)"
    borderRight: "1.5px solid rgba(31,58,138,.5)"
    fontSize: 21px
    lineHeight: 1.35
    description: "Comparison table cell with semi-transparent ink-blue dividers. Sits inside the same cream + ink-border + offset-shadow card pattern."
  pill-yes:
    background: "{colors.ink}"
    color: "{colors.paper}"
    border: "1.5px solid {colors.ink}"
    borderRadius: 999px
    padding: "4px 14px"
    fontFamily: "Caveat, cursive"
    fontSize: 28px
    fontWeight: 600
    description: "Affirmative pill — solid ink fill with paper text, rounded 999px, Caveat script face. Unusual treatment: handwritten letterforms inside a UI pill shape."
  pill-no:
    background: transparent
    color: "{colors.red}"
    border: "1.5px solid {colors.red}"
    fontFamily: "DM Mono, monospace"
    fontSize: 16px
    letterSpacing: 0.14em
    textTransform: uppercase
    description: "Negative pill — red mono uppercase text in a red-bordered transparent pill. The only place red appears in regular use (outside the stamp component)."
  pill-part:
    background: "{colors.paper-2}"
    color: "{colors.ink}"
    fontFamily: "Caveat, cursive"
    description: "Partial-state pill — light paper fill with Caveat script ink text."
  number-script:
    fontFamily: "Caveat, cursive"
    fontWeight: 700
    fontSize: "60–70px"
    color: "{colors.ink}"
    description: "Hand-script numeral used as step numbers in process diagrams and ordered CTA steps. The script face makes ordering feel hand-counted, not algorithmic."
---

## 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

Pin & Paper is a **field-notebook editorial system** built on a single material premise: every slide is yellow legal-pad paper. The paper is rendered through a base color (`{colors.paper}` — saturated cadmium yellow), two soft radial-gradient highlights (upper-left light, lower-right shadow), and a non-optional fractal-noise grain overlay on a `::before` pseudo-element with multiply blend. This stack creates a surface that reads as physical paper under raking light. Without the grain, the system collapses into flat cartoon-yellow; the texture is foundational, not decorative.

The typeface stack is a deliberate three-voice editorial pairing. **Space Grotesk** at weight 600–700 carries every printed headline and display moment — its tight geometric character at heavy weights reads as a poster or notice-board printout. **Caveat** (a hand-script face) carries every handwritten moment: marginalia, "me" voice annotations, step numerals, pill labels, oversized script ordinals. Caveat is the system's personal-voice mechanism — wherever script appears, the tone shifts from "official notice" to "handwritten note in the margin." **DM Mono** at weight 500 carries every archival metadata tag: top-chrome brand lockup, footer meta, source attribution, axis labels. The three voices — print headline, handwritten note, archival catalog tag — are non-overlapping, and the system's editorial rhythm depends on them staying in their lanes.

The palette is anchored to a yellow-and-blue complementary pair. **Paper yellow** (`{colors.paper}` and its three close variants) is every surface. **Ink blue** (`{colors.ink}` — a deep cobalt #1F3A8A) is every text moment, every border, every divider, every pin illustration. **Cream** (`{colors.cream}`) is the card background — a calmer off-white-ivory tone that lets cards visually recede from the loud yellow page. **Cinnabar red** (`{colors.red}` — #C2342B) is used in two specific roles only: the rotated rubber-stamp component and the negative-state pill. Red is never used as text, fill, or border outside these two roles. Tertiary colors (olive, orange, kraft) exist in the token list but are not actively deployed in the source.

Depth is created through a single signature mechanism: **the hard offset shadow**. Every card carries a `5px 6px 0 0 {colors.ink}` (or `4px 5px 0 0`, or `8px 9px 0 0` for the largest quote panel) — a solid ink-blue rectangle offset down and to the right with zero blur. This shadow plus the 4px micro-radius corner plus the 1.5px ink border defines the universal card pattern. Cards look pinned and slightly lifted from the page; the hard offset is the system's only depth language.

**Density philosophy: medium-dense, populated.** Pin & Paper reads as authoritative when its cards are pinned across the page in a clear arrangement — typically 3 to 6 cards per slide, each carrying a heading, a body block, and often a handwritten marginal annotation. A slide with one centered headline and otherwise empty space reads as broken — the system was designed as a populated field-notebook page, and a notebook page that's mostly blank reads as incomplete. Cards should be filled; pins should appear; the handwritten layer should add a marginal note in at least half the slides. The exception is the cover and section-divider slides, which are sparser by convention but compensate with oversized display type (196px) and large pin illustrations.

**Key Characteristics:**
- Yellow paper background (`{components.paper-surface}`) with two layered radial gradients and a non-optional fractal-noise grain overlay (`{components.paper-grain-overlay}`) on every slide.
- Deep cobalt-blue ink (`{colors.ink}`) as the universal text, border, divider, and pin-illustration color.
- Cream card surfaces (`{colors.cream}`) with 1.5px ink borders, 4px micro-radius, and **a hard ink-blue offset shadow** (5px–6px, zero blur).
- Hand-drawn safety-pin SVG illustrations (`{components.pin-illustration}`) — closed and open variants — pinned to cards at slight rotation angles.
- Three-voice typography: Space Grotesk for print headlines, Caveat hand-script for personal voice, DM Mono for archival labels.
- A signature cinnabar-red rotated rubber stamp (`{components.stamp}`) for status marks (CONFIDENTIAL, RECEIVED, etc.).
- 4px micro-radius on every card; pills go full 999px.
- Slight panel rotation (0.6 to 1.5 degrees) on alternating cards for the "pinned-askew" effect.

## Colors

### Palette

- **Paper Yellow** (`{colors.paper}` — #EFE56A): The dominant surface color. Saturated cadmium yellow. Combined with the layered radial gradients and grain overlay, this is what makes the slide read as physical paper.
- **Paper Light** (`{colors.paper-2}` — #F5ECA0): Lighter, less saturated yellow. Used as an alternate card fill to break adjacent same-tone cards.
- **Paper Deep** (`{colors.paper-3}` — #E8D85A): Deeper, more saturated yellow. Used on the `.deep` slide variant for higher-contrast moments.
- **Paper Extra** (`{colors.paper-extra}` — #FBE6A4): Warm yellow with a hint of cream, used as the most differentiated card variant — often paired with a slight rotation.
- **Cream** (`{colors.cream}` — #F8F1D6): The card background. A soft off-white ivory that lets cards recede from the loud yellow page. Used on every standard card surface.
- **Kraft** (`{colors.kraft}` — #C9A66B): A warm tan/kraft tone. Defined in the token system but not actively used in the source.
- **Ink Blue** (`{colors.ink}` — #1F3A8A): Deep cobalt navy. The universal text, border, divider, pin illustration, and shadow color. The system's structural identity.
- **Ink Soft** (`{colors.ink-soft}` — #2D4FB8): A slightly lighter cobalt variant; available but rarely used.
- **Ink Line** (`{colors.ink-line}` — #3457C4): A slightly brighter cobalt for line decorations; rarely used.
- **Ink Deep** (`{colors.ink-deep}` — #0E1430): Near-black with a slight blue cast. Used for the `.ink` slide variant background.
- **Cinnabar Red** (`{colors.red}` — #C2342B): The stamp color and the negative-pill border/text color. Used only in two roles — never as a general accent.
- **Olive** (`{colors.olive}`) and **Orange** (`{colors.orange}`): Defined but inactive. Available as reserved tertiary tones.

### Defaults

- **Default slide surface**: `{components.paper-surface}` — yellow paper with layered gradients. Always.
- **Default surface grain**: `{components.paper-grain-overlay}` at opacity 0.35 with multiply blend. Non-optional.
- **Default primary headline color**: `{colors.ink}` on yellow surfaces; `{colors.paper}` on ink surfaces.
- **Default body text color**: `{colors.ink}` on yellow/cream; `{colors.paper}` on ink (with `opacity: 0.85` for muted lead).
- **Default card surface**: `{colors.cream}`. Reach for `{colors.paper-2}` or `{colors.paper-extra}` to break up adjacent same-tone cards.
- **Default border color**: `{colors.ink}` at 1.5px. Always.
- **Default shadow**: `5px 6px 0 0 {colors.ink}` (hard offset, zero blur). Smaller cards may use `4px 5px 0 0`; the largest quote panel uses `8px 9px 0 0`.
- **Default label / metadata color**: `{colors.ink}` at opacity 0.65–0.75 for chrome and footer.
- **Default scribble / handwritten color**: `{colors.ink}`. Caveat is always ink-blue on yellow.
- **Default stamp color**: `{colors.red}` — the only routine use of red.

Cream is the card fill; yellow is the page fill. Mixing these breaks the visual hierarchy: a yellow card on a yellow page disappears; a cream card on a cream page collapses the layered-paper reading.

## Typography

### Font Family

The system loads three web fonts: **Space Grotesk** (weights 400, 500, 600, 700) carries all printed display and body type; **Caveat** (weights 500, 600, 700) carries all handwritten / personal-voice moments; **DM Mono** (weights 400, 500) carries all archival metadata.

The emotional register of each face is distinct and load-bearing:
- Space Grotesk reads as **printed, official, typeset** — the voice of the document itself.
- Caveat reads as **handwritten, personal, a note in the margin** — the voice of the person reading the document.
- DM Mono reads as **archival, catalog-card, indexical** — the voice of the system filing the document.

A key inline mixing rule: **a `<small>` element nested inside a Caveat number switches to a smaller Caveat at 60px** for unit suffixes (like `M`, `×`, `%`). The handwritten suffix preserves the hand-counted feeling of the parent numeral.

A second inline mixing rule: **a `.underline` span inside Caveat scribble text gets a 2px solid ink-blue underline** — used to mimic an underline drawn by hand for emphasis.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.scribble-mega}` | 360px | Caveat | 700 | Decorative oversized quote-mark glyph |
| `{typography.display-mega}` | 196px | Space Grotesk | 700 | Cover headline |
| `{typography.display-section}` | 168px | Space Grotesk | 700 | Section-divider headline (on ink slide) |
| `{typography.display-stat}` | 168px | Space Grotesk | 700 | Hero stat figure |
| `{typography.h1-cta}` | 130px | Space Grotesk | 700 | Closing CTA headline |
| `{typography.h1-chart}` | 110px | Space Grotesk | 700 | Chart-slide headline |
| `{typography.h2}` | 96px | Space Grotesk | 700 | Standard agenda or stats headline |
| `{typography.h2-md}` | 84px | Space Grotesk | 700 | Section heading inside dense slides |
| `{typography.scribble-lg}` | 70px | Caveat | 700 | Process step numerals |
| `{typography.scribble-md}` | 60px | Caveat | 700 | CTA step numerals, large script accents |
| `{typography.quote-text}` | 50px | Space Grotesk | 500 | Pull-quote body |
| `{typography.h2-sm}` | 50px | Space Grotesk | 700 | Notice-slide headline |
| `{typography.card-row}` | 44px | Space Grotesk | 600 | Agenda row label |
| `{typography.card-h3}` | 38px | Space Grotesk | 700 | Card title |
| `{typography.scribble-sm}` | 38px | Caveat | 600 | Handwritten marginal note on cover, notice-card meta |
| `{typography.scribble-xs}` | 32px | Caveat | 600 | Small in-card handwritten annotation |
| `{typography.card-h3-sm}` | 28px | Space Grotesk | 700 | Sub-card heading |
| `{typography.body}` | 22px | Space Grotesk | 400 | Standard body paragraph |
| `{typography.body-md}` | 21px | Space Grotesk | 400 | Body inside tables |
| `{typography.body-sm}` | 19px | Space Grotesk | 400 | Compact body inside dense cards |
| `{typography.body-list}` | 18px | Space Grotesk | 400 | List item inside a card |
| `{typography.label-top}` | 18px | DM Mono | 500 | Top-chrome brand lockup and meta |
| `{typography.label-meta}` | 16px | DM Mono | 500 | Date strip, attribution |
| `{typography.stamp}` | 16px | DM Mono | 500 | Stamp text |
| `{typography.label-footer}` | 15px | DM Mono | 500 | Footer chrome |

### Defaults

- **Default primary content headline**: `{typography.h2}` (96px Space Grotesk 700).
- **Default cover / opening headline**: `{typography.display-mega}` (196px).
- **Default section-break headline**: `{typography.display-section}` (168px), used on the ink-blue slide variant.
- **Default body paragraph size**: `{typography.body}` (22px). For dense multi-card slides, drop to `{typography.body-sm}` (19px).
- **Default card heading**: `{typography.card-h3}` (38px) for standard cards; `{typography.card-h3-sm}` (28px) for sub-cards.
- **Default stat figure**: `{typography.display-stat}` (168px) — with a Caveat `<small>` suffix for unit (M, %, ×).
- **Default label / chrome size**: `{typography.label-top}` (18px) for the top chrome; `{typography.label-footer}` (15px) for the bottom.
- **Default handwritten annotation size**: `{typography.scribble-sm}` (38px) for marginal notes; `{typography.scribble-lg}` (70px) for step numerals.
- **Default weight for any display element**: 700.
- **Default weight for body**: 400.

When unsure, the canonical card composition is: a 38px Space Grotesk card heading + a 22px Space Grotesk body paragraph + a 32px Caveat handwritten note at the bottom. That three-layer typography rhythm (print headline, print body, handwritten margin note) is the system's most recognizable internal pattern.

### Signature Treatments

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

- **Every slide carries the paper-grain overlay (`{components.paper-grain-overlay}`).** Without it, the paper aesthetic collapses. The grain is part of the surface, not a decorative flourish.
- **Every card carries a 1.5px solid ink border, 4px border-radius, AND a hard ink-blue offset shadow (5–8px offset, zero blur).** All three together — missing the shadow makes the card feel un-pinned; missing the border makes it feel un-printed.
- **Caveat is always ink-blue** (`{colors.ink}`) on yellow/cream surfaces, and always paper-yellow on ink surfaces. Caveat in any other color does not exist.
- **Pin illustrations (`{components.pin-illustration}`) are always rotated off-axis** (typical range: -14° to +20°). A pin rendered at 0° rotation breaks the hand-pinned aesthetic.
- **The stamp component (`{components.stamp}`) is always rotated -4°** with a 3px solid red border, red mono text, and zero radius. Stamp text is always DM Mono uppercase.
- **Every Space Grotesk display headline uses negative letter-spacing** in the -0.02 to -0.04em range. Tighter for larger sizes.
- **Hand-script numerals (Caveat at 60–70px) are the only step-numbering mechanism** in process diagrams and ordered CTA lists. Don't substitute Space Grotesk numerals.
- **The top-chrome lockup includes the inline `#mark` SVG glyph** alongside the brand text. The glyph is part of the brand identity, not optional.

### Typography Principles

The rhythm of Pin & Paper is **printed headline + printed body + handwritten margin note + mono archival tag** — four voices, each in its assigned face. Switching any voice (e.g., setting a marginal note in Space Grotesk, or a body paragraph in Caveat) collapses the system's editorial register.

Italic letterforms are not used. Underline is used only on `.underline` spans inside Caveat scribble text (2px solid ink). Bold inside body is rare; emphasis is achieved either by switching to a heavier Space Grotesk weight at a larger size, or by adding a Caveat handwritten annotation below.

## Layout

### Canvas System

The system targets a **fixed 1920×1080 canvas** rendered inside a `<deck-stage>` web component. All sizes are pixel-fixed; the stage handles proportional scaling to the browser viewport.

Most slides use **absolute positioning** with edge-anchored elements (`left: 64px`, `right: 64px`, `top: 110px`, `bottom: 100px`) for the content stage, plus targeted grid layouts for card rows. Pin illustrations are absolutely-positioned overlays on top of card stacks.

### Padding and Anchoring

| Anchor | Value | Use |
|---|---|---|
| `pad-edge` | 64px | Left and right edge insets on every slide |
| `pad-top` | 110px | Top inset for content (below the 44px top chrome) |
| `pad-bottom` | 90px | Bottom inset for content (above the 36px footer chrome) |
| `grid-gap-sm` | 22px | Process card gap |
| `grid-gap-md` | 28px | Notice / stats card gap |
| `grid-gap-lg` | 32px | Notecard grid gap |

Cards typically use `28px–36px` internal padding on the top and `22px–28px` on the sides, with `22px–28px` on the bottom.

### Chrome Frame

Every slide carries a **top chrome band** at 44px top / 64px sides — a brand lockup on the left (with inline #mark SVG glyph) and a meta-tag pair on the right. The chrome is DM Mono uppercase at 18px with 0.12em tracking.

Every slide also carries a **footer chrome** at 36px bottom / 64px sides — typically a source attribution on the left and a page-position marker on the right. The footer is DM Mono uppercase at 15px with 0.14em tracking at 65% opacity.

On ink-blue slides, both chromes flip color to `{colors.paper}` and the grain overlay shifts to opacity 0.25 with screen blend mode.

## Depth and Elevation

### Hard Offset Shadow (Primary Depth)

The system's only depth treatment is the **hard ink-blue offset shadow** on every card: `5px 6px 0 0 {colors.ink}` (standard), `4px 5px 0 0` (compact), `6px 7px 0 0 rgba(239,229,106,.25)` (chart-card with yellow-tinted shadow), or `8px 9px 0 0` (the largest quote panel). The shadow is always solid, always offset down-right, always zero blur. There are no blurred drop shadows anywhere in the system.

### Paper Texture Depth

The fractal-noise grain (`{components.paper-grain-overlay}`) at opacity 0.35 with multiply blend adds a subtle perceived depth — the texture creates micro-variation that reads as paper fiber. This is depth at the surface level, not at the element level.

### Pin Illustrations as Depth Signal

The hand-drawn safety-pin SVGs positioned at the top edge of cards (typically `position: absolute; top: -14 to -22px; left: 28–90px; transform: rotate(-6 to -12deg)`) create the visual illusion that the card has been pinned to the page. The pin is the depth narrative: a pin appearing at the top of a card explains why the card has a shadow and a rotation.

### Slight Rotation on Alternate Cards

Some card variants (`{components.pinned-card-alt2}`) carry a slight rotation (`transform: rotate(0.6deg)` to `rotate(1.5deg)`) that reads as a sheet of paper pinned slightly askew. This is a deliberate imperfection — used sparingly (one or two cards per slide), not on every card.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 0px | Stamp, pin glyphs, page numbers |
| 4px | Cards, panels, table containers, image wrappers — the system's micro-radius |
| 999px | Pills only |

The system uses a **4px micro-radius** on every card — small enough to read as "printed corner with slight bleed" rather than rounded UI. Pills are the only round shape; pills with the unusual treatment of Caveat handwritten letterforms inside.

### Border Weights

- **1.5px solid `{colors.ink}`** — the universal card border. Used on every cream card, every table container, every panel.
- **1.5px dashed rgba(31,58,138,.45)** — used as a dotted separator between agenda rows, between CTA steps, and at the top of source notes inside cards. Adds the "graph-paper line break" feel.
- **3px solid `{colors.red}`** — used only on the stamp component (`{components.stamp}`).
- **2px solid `{colors.ink}`** — used only on the Caveat `.underline` span treatment.

### Decorative Element Types

**Pin illustration (`{components.pin-illustration}`)** — The defining visual signature. A hand-drawn safety-pin SVG (two variants: closed and open) rendered in `currentColor` and rotated at a slight angle. Pins appear at the top of cards, as decorative overlays on the cover, as oversized accent illustrations on section dividers (up to 640px wide), and pinned to agenda rows. The pin is the system's voice — wherever a pin appears, the page reads as a pinned document.

**Stamp (`{components.stamp}`)** — A cinnabar-red rotated rubber-stamp tag with 3px solid red border, red mono uppercase text, and -4° rotation. Used for status marks (CONFIDENTIAL, RECEIVED). The stamp is one of the two roles where red is used in this system.

**Scribble (`{components.scribble}`)** — A Caveat hand-script text block, often rotated -1.5° to -3° for the "handwritten" feel. Used for marginal notes, "me" voice annotations, large script accents. May include `.underline` spans for handwritten emphasis.

**Pinned card (`{components.pinned-card}`)** — The universal card pattern: cream fill, 1.5px ink border, 4px micro-radius, 5–6px hard ink offset shadow. Often carries a pin illustration overlapping its top edge. Three alternate fill colors break up adjacent same-tone cards.

**Top chrome lockup** — The brand text accompanied by an inline #mark SVG glyph (a circle on the right with an arrow shaft pointing left). The glyph is part of the brand's identity.

**Dashed border separators** — Used as inter-row dividers in agenda lists, CTA step lists, and inside cards as source-attribution separators. Always `1.5px dashed rgba(31,58,138,.45)`.

**Caveat pills (`{components.pill-yes}`, `{components.pill-part}`)** — Pills with hand-script letterforms inside (Caveat 28px) on solid or paper-tone fills. The mismatch between rounded UI shape and handwritten text is intentional.

**Process / CTA script numerals** — Caveat 60–70px ordinals inside cards or list rows. The hand-script number signals "step counted by hand, not by an algorithm."

**Oversized script quote-mark** — A Caveat at 360px rendered as the opening glyph on the quote slide. The script size pushes into the realm of decoration; the glyph is so large that it functions as composition, not punctuation.

## Do's and Don'ts

### Do
- Apply the paper-grain overlay (`{components.paper-grain-overlay}`) to every slide. The texture is foundational to the paper reading.
- Set every card with the universal pattern: 1.5px ink border + 4px radius + hard ink offset shadow. The three together define the card.
- Use Space Grotesk weight 700 in mixed case (with negative letter-spacing) for every printed headline.
- Use Caveat for every handwritten or personal-voice moment — marginal notes, step numerals, pill text. The script is the system's "me" voice.
- Use DM Mono uppercase at 0.12–0.18em tracking for every archival tag, chrome label, and footer string.
- Rotate every pin illustration off-axis (typical range -14° to +20°). A pin at 0° rotation breaks the hand-pinned aesthetic.
- Populate cards. The system reads as authoritative when 3–6 cards are pinned across the page, each with heading + body + marginal note.
- Use the rotated stamp component (`{components.stamp}`) for status marks. The -4° rotation is its identity.
- Pair a Caveat step numeral with a Space Grotesk card heading inside process and CTA lists. The script numeral is the system's ordering voice.
- Use a slight rotation (0.6° to 1.5°) on one card per slide for the "pinned-askew" effect. Don't rotate every card.

### Don't
- Don't omit the paper-grain overlay. Without it, the surface collapses into flat cartoon-yellow.
- Don't substitute a different list marker for the Caveat hand-script numeral. Step numbers are always hand-script.
- Don't use red outside the stamp and the negative pill. Red is a two-role accent only.
- Don't render pin illustrations at 0° rotation. The off-axis tilt is what makes them read as physical pins.
- Don't use blurred shadows. Cards use hard ink-blue offset shadows only.
- Don't fill a card with yellow on the yellow page surface. Cards are cream; the contrast between cream cards and yellow page is the layered-paper signal.
- Don't put body copy in Caveat. The hand-script is for marginal notes and accents, never paragraphs.
- Don't put headline copy in DM Mono. Mono is the archival voice, not the editorial voice.
- Don't use radius larger than 4px on cards. The micro-radius is the printed-corner signal; larger radius collapses into generic UI.
- Don't compose a near-empty slide. The system was designed as a populated notebook page; sparseness reads as broken.

## Responsive Behavior

The system targets a **fixed 1920×1080 canvas** rendered inside a `<deck-stage>` web component (loaded via `deck-stage.js`). The stage handles proportional scaling to the browser viewport — all pixel-fixed sizes inside the canvas scale uniformly.

### Presenter Behavior
- The `<deck-stage>` component manages navigation, scaling, and presenter chrome.
- Keyboard, touch, and mouse-wheel navigation are handled by the stage component.
- The slide canvas is constant 1920×1080 regardless of viewport size.

### Print Behavior
Print export depends on the deck-stage component's print handling. The fractal-noise grain overlay may not render in all PDF exports — test before assuming texture transfers.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face | Chinese face | Weight |
|---|---|---|---|
| Display / headline (Space Grotesk 700) | Space Grotesk | 龙藏体 Long Cang | 400 (only weight available) |
| Body (Space Grotesk 400) | Space Grotesk | 霞鹜文楷 LXGW WenKai | 400 |
| Handwritten / scribble (Caveat) | Caveat | 龙藏体 Long Cang | 400 |
| Label / mono (DM Mono UPPERCASE tracked) | DM Mono | 霞鹜文楷 LXGW WenKai | 400 (do not force monospace on CJK) |

### Mixed-Content Strategy

Strategy A — extend each token's `fontFamily` to include the Chinese face after the Latin face. Space Grotesk display tokens become `"Space Grotesk, Long Cang, Helvetica Neue, Arial, sans-serif"`; Space Grotesk body tokens become `"Space Grotesk, LXGW WenKai, Helvetica Neue, Arial, sans-serif"`; Caveat tokens become `"Caveat, Long Cang, cursive"`. Latin glyphs render in the original face; CJK falls through automatically.

### Loading

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Caveat:wght@500;600;700&family=DM+Mono:wght@400;500&family=Long+Cang&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-regular/font.css" rel="stylesheet">
```

### 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 (Chinese typography convention)
- Pangu spacing 盘古之白 (space between CJK and Latin: `使用 Claude` not `使用Claude`)
- One font per sentence

### Aesthetic Notes for This System

Pin & Paper is the strongest fit for Chinese in this entire library. The yellow legal-pad surface, the cobalt ink, the safety-pin illustrations, and the field-notebook register all translate naturally into Chinese — the system reads as a 笔记本 / 手账 page in either script.

**龙藏体 Long Cang** is a hard-pen handwritten Chinese face — the brushless, ballpoint-on-paper equivalent of Chinese handwriting. It is the perfect Chinese substitute for the Space Grotesk + Caveat dual-role headline-and-scribble voices in this system. Long Cang at large sizes (96–168px) reads as a confident handwritten field-note headline — exactly what Pin & Paper is trying to evoke. Use it for both display headlines and the Caveat-equivalent scribble layer. Layering two visually-distinct hand-script faces in pure Chinese is unnecessary; Long Cang carries both roles.

**霞鹜文楷 LXGW WenKai** is a kaishu-derived body face designed for screen reading — it carries the warmth and slight irregularity of handwritten 楷书 but stays legible at body sizes (18–22px). It is the strongest counterweight to Long Cang's handwritten display and matches the system's "field-notebook personal voice" register exactly. Set every Chinese body paragraph in LXGW WenKai 400.

The pin illustrations, the rotated red stamp, the cream cards with hard ink offset shadows — all transfer unchanged. The Caveat pill component (handwritten letters inside a rounded pill) translates to Long Cang inside the same pill shape and reads as charmingly hand-counted in Chinese.

The system's most recognizable rhythm (printed headline + printed body + handwritten margin note) becomes (Long Cang headline + LXGW WenKai body + Long Cang margin note in a slightly different size). The voice distinction in pure Chinese comes from size, rotation, and color rather than from face swap — Long Cang at 38px rotated -3° in the margin reads clearly as "marginal annotation" against Long Cang at 96px upright in the headline.

DM Mono uppercase tracked labels do not transfer to CJK. Chinese metadata in the top chrome should use LXGW WenKai 400 mixed case with letter-spacing 0. Pure Latin metadata (date strings, source URLs) stays in DM Mono.

### Known CJK Gap

Long Cang and LXGW WenKai are visually adjacent — both carry handwritten kaishu DNA. The three-voice editorial pairing (print / handwritten / archival) collapses into a two-voice pairing in pure Chinese (handwritten-display / handwritten-body / archival-Latin-only). This is not a bug — pure-Chinese decks in Pin & Paper read as more uniformly hand-touched than their Latin counterparts, which is actually closer to the field-notebook aesthetic the system aims for.

## Iteration Guide

1. Every new slide background is the paper-surface (`{components.paper-surface}`) with the grain overlay on `::before`. Don't skip the texture.
2. Every new card uses the universal pattern: cream fill, 1.5px ink border, 4px radius, hard ink offset shadow. Don't customize.
3. Every new headline is Space Grotesk weight 700 mixed case with negative letter-spacing. Don't reach for a different weight.
4. Every new step numeral or ordered-list marker is Caveat hand-script at 60–70px. Don't substitute a numeric font.
5. Every new label or metadata tag is DM Mono uppercase with 0.12–0.18em tracking.
6. Every new pin illustration is rotated off-axis. Choose closed (#pin) for a "secured" feel; open (#pin-open) for a "lifted" feel.
7. To add personal voice to a card, append a Caveat marginal note at the bottom — usually with a `.underline` span for handwritten emphasis.
8. To mark a card with status, place the stamp component (`{components.stamp}`) at a slight rotation in the upper area of the card.
9. To break up adjacent same-tone cards, alternate between cream, paper-2, and paper-extra fills. Add a slight rotation on one card for variety.
10. To use the ink-blue surface variant (e.g., a section divider), flip text color to `{colors.paper}` and reduce grain opacity to 0.25 with screen blend mode.

## Known Gaps

- The system depends on a `<deck-stage>` web component loaded via `deck-stage.js`. Without it, the 1920×1080 canvas will not scale and slides will render at native pixel size.
- The pin illustrations are embedded as inline SVG symbol definitions at the top of the document. New slides that need pin illustrations must reference them via `<use href="#pin">` or `<use href="#pin-open">` — and the symbol definitions must be present in the document.
- The fractal-noise grain overlay uses a data-URI SVG with `feTurbulence`. Some browsers (especially older Safari versions) may render the noise inconsistently or skip it during PDF export.
- The Caveat font carries hand-script ligatures and may render inconsistently between operating systems. Default fallback is `cursive` which varies wildly across systems.
- The `kraft`, `olive`, and `orange` color tokens are defined but inactive in the source. They are reserved for future extension but have no current role.
- The pill-yes component uses Caveat letterforms inside a rounded pill shape — this is intentionally unusual but may read as a UI bug to viewers unfamiliar with the system.
- The paper-grain overlay uses `mix-blend-mode: multiply` on standard slides and `mix-blend-mode: screen` on ink slides. The blend mode flip is essential — using multiply on the dark ink slide turns the slide muddy.
- The bar chart and line chart components use SVG with manually-positioned points. There is no data-binding layer.
- The hand-drawn pin SVG is a fixed-path illustration. Re-coloring works via `currentColor`, but the pin proportions cannot be adjusted without editing the SVG path data.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.bigpin` — 1장 — 예: `<div class="bigpin">`
- `.bot` — 1·2·3·4·5·6장 — 예: `<div class="chrome bot">`
- `.card` — 1·2·3·4·5·6장 — 예: `<div class="card px tilt cover-card">`
- `.chrome` — 1·2·3·4·5·6장 — 예: `<div class="chrome top">`
- `.cover-card` — 1장 — 예: `<div class="card px tilt cover-card">`
- `.dash` — 1장 — 예: `<p class="dash">`
- `.en` — 1장 — 예: `<p class="en">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.gl` — 1·3장 — 예: `<span class="lbl gl">`
- `.goal` — 1장 — 예: `<h1 class="goal">`
- `.lbl` — 1·2·3·4·5·6장 — 예: `<span class="lbl gl">`
- `.mk` — 1·2·3·4·5·6장 — 예: `<svg class="mk" viewBox="0 0 32 16">`
- `.num` — 1·2·4·5·6장 — 예: `<b class="num">`
- `.part` — 1·5·6장 — 예: `<span class="pill part">`
- `.pill` — 1·5·6장 — 예: `<span class="pill part">`
- `.pills` — 1장 — 예: `<div class="pills">`
- `.pin` — 1·2·3·4·5·6장 — 예: `<svg class="pin" viewBox="0 0 360 110">`
- `.px` — 1·2·4장 — 예: `<div class="card px tilt cover-card">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.stamp` — 1·3·5·6장 — 예: `<span class="stamp">`
- `.t1` — 1장 — 예: `<p class="t1">`
- `.tilt` — 1·2·4·5장 — 예: `<div class="card px tilt cover-card">`
- `.top` — 1·2·3·4·5·6장 — 예: `<div class="chrome top">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.bt` — 2·5·6장 — 예: `<button class="card bt" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="scrib cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기 — 끝!&quot;,&quot;02 수수깡 꽂기 — 끝…`
- `.cards` — 2장 — 예: `<div class="cards">`
- `.cpin` — 2·3·4·5·6장 — 예: `<i class="cpin pfg">`
- `.def` — 2장 — 예: `<p class="scrib def">`
- `.figc` — 2장 — 예: `<div class="card figc">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.note` — 2장 — 예: `<span class="scrib note">`
- `.nr` — 2·5장 — 예: `<span class="nr">`
- `.p2` — 2·3·4·5장 — 예: `<div class="card p2 step" data-s="2">`
- `.pfg` — 2장 — 예: `<i class="cpin pfg">`
- `.s2n` — 2장 — 예: `<p class="scrib s2n">`
- `.scrib` — 2·3·5·6장 — 예: `<p class="scrib def">`
- `.ul` — 2·6장 — 예: `<span class="ul">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.ax` — 3장 — 예: `<text x="60" y="286" class="ax" text-anchor="end">`
- `.base` — 3장 — 예: `<line x1="70" x2="980" y1="280" y2="280" class="base"/>`
- `.big` — 3장 — 예: `<b class="big">`
- `.bn` — 3장 — 예: `<i class="k bn">`
- `.bvl` — 3장 — 예: `<text x="135" y="186.5" class="bvl" text-anchor="middle">`
- `.chartc` — 3장 — 예: `<div class="card chartc">`
- `.cs` — 3장 — 예: `<span class="stamp cs">`
- `.cv` — 3장 — 예: `<svg class="cv" viewBox="0 0 1000 330">`
- `.k` — 3장 — 예: `<i class="k bn">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.ls` — 3장 — 예: `<i class="k ls">`
- `.lsp` — 3장 — 예: `<circle cx="135" cy="196.15" r="6" class="lsp"/>`
- `.lst` — 3·4장 — 예: `<text x="171" y="204.15" class="pv lst">`
- `.lt` — 3장 — 예: `<i class="k lt">`
- `.ltp` — 3장 — 예: `<circle cx="135" cy="124" r="6" class="ltp"/>`
- `.ltt` — 3장 — 예: `<text x="135" y="110" class="pv ltt" text-anchor="middle">`
- `.md` — 3·4·5장 — 예: `<h2 class="hd md">`
- `.pc` — 3장 — 예: `<i class="cpin pc">`
- `.pv` — 3장 — 예: `<text x="171" y="204.15" class="pv lst">`
- `.s3n` — 3장 — 예: `<p class="scrib s3n">`
- `.stat` — 3장 — 예: `<div class="card cream stat">`
- `.stats` — 3장 — 예: `<div class="stats">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.it` — 4장 — 예: `<p class="it">`
- `.li` — 4장 — 예: `<div class="li">`
- `.pl2` — 4장 — 예: `<i class="cpin pl2">`
- `.qm` — 4장 — 예: `<b class="qm">`
- `.qt` — 4장 — 예: `<div class="card px tilt qt">`
- `.sm` — 4·5·6장 — 예: `<b class="num sm">`
- `.tbl` — 4장 — 예: `<div class="card tbl">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<p class="bl">`
- `.blank` — 5장 — 예: `<button class="pill part blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="card p2 tilt blk">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.no` — 5·6장 — 예: `<span class="pill no">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.pb` — 5장 — 예: `<i class="cpin pb">`
- `.pq` — 5장 — 예: `<i class="cpin pq">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.qs` — 5장 — 예: `<span class="stamp qs">`
- `.quiz` — 5장 — 예: `<div class="card quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다…`
- `.rt` — 5장 — 예: `<button class="card bt rt" data-act="retry">`
- `.words` — 5장 — 예: `<div class="words">`
- `.yes` — 5·6장 — 예: `<span class="pill yes">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="card d6 a">`
- `.ab6` — 6장 — 예: `<p class="ab6">`
- `.b` — 6장 — 예: `<div class="card d6 b">`
- `.c` — 6장 — 예: `<div class="card d6 c">`
- `.cl` — 6장 — 예: `<i class="pc6 cl">`
- `.d6` — 6장 — 예: `<div class="card d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.ft6` — 6장 — 예: `<div class="ft6">`
- `.g6` — 6장 — 예: `<div class="card g6">`
- `.h6` — 6장 — 예: `<h2 class="hd h6">`
- `.m6` — 6장 — 예: `<p class="scrib m6">`
- `.op` — 6장 — 예: `<i class="pc6 op">`
- `.pc6` — 6장 — 예: `<i class="pc6 cl">`
- `.pg6` — 6장 — 예: `<i class="cpin pg6">`
- `.pinbox` — 6장 — 예: `<div class="pinbox" id="pp-pin">`
- `.pl6` — 6장 — 예: `<div class="pl6">`
- `.sl6` — 6장 — 예: `<span class="lbl sl6">`
- `.st6` — 6장 — 예: `<span class="stamp st6">`
- `.stbox` — 6장 — 예: `<div class="stbox" id="pp-st">`
- `.sw6` — 6장 — 예: `<div class="sw6">`
- `.tc6` — 6장 — 예: `<div class="card tc6" id="pp-tilt">`
- `.tip6` — 6장 — 예: `<div class="tip6">`
- `.tlbox` — 6장 — 예: `<div class="tlbox">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="pin-and-paper">
<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=Space+Grotesk:wght@400;500;600;700&family=Caveat:wght@600;700&family=DM+Mono:wght@500&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/pin-and-paper.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide">
  <div class="chrome top"><span><svg class="mk" viewBox="0 0 32 16"><g fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="24" cy="8" r="5"/><path d="M19 8H3M8 3L3 8l5 5"/></g></svg>00초등학교 · FIELD NOTES</span><span>초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</span></div>
  <p class="t1">계절의 변화</p>
  <p class="en">Sun, Shadow & Temperature</p>
  <span class="lbl gl">학습 목표</span>
  <h1 class="goal">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <div class="pills"><span class="pill part">초등 과학 · 6학년 2학기</span><span class="pill part">1단원 · 3~4차시</span></div>
  <div class="card px tilt cover-card"><span class="lbl">SUBJECT No. 01</span><b class="num">01</b><h3>관찰 노트 · 2026</h3><p class="dash">태양 · 막대기 · 그림자</p><span class="stamp">RECEIVED 2026</span></div>
  <div class="bigpin"><svg class="pin" viewBox="0 0 360 110"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 74 C220 76 150 76 88 72"/><path d="M300 74 C326 76 338 62 334 52 C330 40 314 36 302 42 C292 48 296 62 310 62 C322 62 326 50 318 46"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/><path d="M40 44 h28"/></g></svg></div>
  <div class="chrome bot"><span>00초등학교 · 관찰 기록 2026</span><span>P. 01 / 06</span></div>
</section>
<section class="slide" data-steps="4">
  <div class="chrome top"><span><svg class="mk" viewBox="0 0 32 16"><g fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="24" cy="8" r="5"/><path d="M19 8H3M8 3L3 8l5 5"/></g></svg>00초등학교 · FIELD NOTES</span><span>측정 준비</span></div>
  <h2 class="hd">태양 고도 측정기 만들기</h2>
  <p class="scrib def"><span class="ul">태양 고도</span> = 태양이 지표면과 이루는 각</p>
  <div class="card figc"><i class="cpin pfg"><svg class="pin" viewBox="0 0 360 110"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 74 C220 76 150 76 88 72"/><path d="M300 74 C326 76 338 62 334 52 C330 40 314 36 302 42 C292 48 296 62 310 62 C322 62 326 50 318 46"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/><path d="M40 44 h28"/></g></svg></i><span class="lbl">FIG. 01 · 태양 고도 측정기</span><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><p class="scrib s2n">막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <div class="cards"><div class="card cream step" data-s="1"><b class="num">01</b><div><h3>자 붙이기<span class="scrib note">테이프로 단단히!</span></h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="card p2 step" data-s="2"><b class="num">02</b><div><h3>수수깡 꽂기<span class="scrib note">꼭 수직으로</span></h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="card cream step" data-s="3"><b class="num">03</b><div><h3>실 묶기<span class="scrib note">실은 팽팽하게</span></h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="card px tilt step" data-s="4"><b class="num">04</b><div><h3>각도기 끼우기<span class="scrib note">구멍에 쏙</span></h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="card bt" data-act="step">다음 단계 →</button><button class="card bt" data-act="reset">처음부터</button><p class="scrib cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기 — 끝!&quot;,&quot;02 수수깡 꽂기 — 끝!&quot;,&quot;03 실 묶기 — 끝!&quot;,&quot;04 각도기 끼우기 — 끝!&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  <div class="chrome bot"><span>계절의 변화</span><span class="nr">버튼 규칙 없음 → 꽂힌 카드으로 표현</span><span>P. 02 / 06</span></div>
</section>
<section class="slide">
  <div class="chrome top"><span><svg class="mk" viewBox="0 0 32 16"><g fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="24" cy="8" r="5"/><path d="M19 8H3M8 3L3 8l5 5"/></g></svg>00초등학교 · FIELD NOTES</span><span>측정 결과</span></div>
  <h2 class="hd md">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="card cream stat"><span class="lbl">남중 시각</span><b class="big">12:30<small>무렵 · 남중</small></b><p>태양 고도가 가장 높아요</p></div><div class="card p2 stat"><span class="lbl">남중 방향</span><b class="big">정남<small>쪽</small></b><p>남중할 때 태양의 위치</p></div><div class="card cream stat"><span class="lbl">최고 기온</span><b class="big">14:30<small>무렵</small></b><p>기온이 가장 높아요</p></div><div class="card p2 stat"><span class="lbl">가장 긴 그림자</span><b class="big">9:30<small>· 15:30</small></b><p>그림자가 가장 길어요</p></div></div>
  <div class="card chartc"><i class="cpin pc"><svg class="pin" viewBox="0 0 360 110"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 74 C220 76 150 76 88 72"/><path d="M300 74 C326 76 338 62 334 52 C330 40 314 36 302 42 C292 48 296 62 310 62 C322 62 326 50 318 46"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/><path d="M40 44 h28"/></g></svg></i>
    <div class="lg"><span class="lbl">측정 시각별 태양 고도, 그림자 길이, 기온</span><span><i class="k bn"></i>태양 고도(°)</span><span><i class="k ls"></i>그림자 길이(cm)</span><span><i class="k lt"></i>기온(℃)</span></div>
    <svg class="cv" viewBox="0 0 1000 330"><line x1="70" x2="980" y1="280" y2="280" class="gl"/><text x="60" y="286" class="ax" text-anchor="end">0°</text><line x1="70" x2="980" y1="150" y2="150" class="gl"/><text x="60" y="156" class="ax" text-anchor="end">40°</text><line x1="70" x2="980" y1="20" y2="20" class="gl"/><text x="60" y="26" class="ax" text-anchor="end">80°</text><rect x="105" y="156.5" width="60" height="123.5" class="bn"/><text x="135" y="186.5" class="bvl" text-anchor="middle">38</text><rect x="235" y="124" width="60" height="156" class="bn"/><text x="265" y="154" class="bvl" text-anchor="middle">48</text><rect x="365" y="101.25" width="60" height="178.75" class="bn"/><text x="395" y="131.25" class="bvl" text-anchor="middle">55</text><rect x="495" y="94.75" width="60" height="185.25" class="bn"/><text x="525" y="124.75" class="bvl" text-anchor="middle">57</text><rect x="625" y="104.5" width="60" height="175.5" class="bn"/><text x="655" y="134.5" class="bvl" text-anchor="middle">54</text><rect x="755" y="127.25" width="60" height="152.75" class="bn"/><text x="785" y="157.25" class="bvl" text-anchor="middle">47</text><rect x="885" y="159.75" width="60" height="120.25" class="bn"/><text x="915" y="189.75" class="bvl" text-anchor="middle">37</text><polyline class="ls" points="135,196.15 265,220.85 395,234.5 525,238.4 655,233.2 785,218.9 915,192.9"/><circle cx="135" cy="196.15" r="6" class="lsp"/><text x="171" y="204.15" class="pv lst">12.9</text><circle cx="265" cy="220.85" r="6" class="lsp"/><text x="301" y="228.85" class="pv lst">9.1</text><circle cx="395" cy="234.5" r="6" class="lsp"/><text x="431" y="242.5" class="pv lst">7</text><circle cx="525" cy="238.4" r="6" class="lsp"/><text x="561" y="246.4" class="pv lst">6.4</text><circle cx="655" cy="233.2" r="6" class="lsp"/><text x="691" y="241.2" class="pv lst">7.2</text><circle cx="785" cy="218.9" r="6" class="lsp"/><text x="821" y="226.9" class="pv lst">9.4</text><circle cx="915" cy="192.9" r="6" class="lsp"/><text x="951" y="200.9" class="pv lst">13.4</text><polyline class="lt" points="135,124 265,100.6 395,82.4 525,68.1 655,59 785,53.80000000000001 915,60.30000000000001"/><circle cx="135" cy="124" r="6" class="ltp"/><text x="135" y="110" class="pv ltt" text-anchor="middle">22</text><circle cx="265" cy="100.6" r="6" class="ltp"/><text x="265" y="86.6" class="pv ltt" text-anchor="middle">23.8</text><circle cx="395" cy="82.4" r="6" class="ltp"/><text x="395" y="68.4" class="pv ltt" text-anchor="middle">25.2</text><circle cx="525" cy="68.1" r="6" class="ltp"/><text x="525" y="54.099999999999994" class="pv ltt" text-anchor="middle">26.3</text><circle cx="655" cy="59" r="6" class="ltp"/><text x="655" y="45" class="pv ltt" text-anchor="middle">27</text><circle cx="785" cy="53.80000000000001" r="6" class="ltp"/><text x="785" y="39.80000000000001" class="pv ltt" text-anchor="middle">27.4</text><circle cx="915" cy="60.30000000000001" r="6" class="ltp"/><text x="915" y="46.30000000000001" class="pv ltt" text-anchor="middle">26.9</text><line x1="70" x2="980" y1="280" y2="280" class="base"/><text x="135" y="312" class="ax" text-anchor="middle">9:30</text><text x="265" y="312" class="ax" text-anchor="middle">10:30</text><text x="395" y="312" class="ax" text-anchor="middle">11:30</text><text x="525" y="312" class="ax" text-anchor="middle">12:30</text><text x="655" y="312" class="ax" text-anchor="middle">13:30</text><text x="785" y="312" class="ax" text-anchor="middle">14:30</text><text x="915" y="312" class="ax" text-anchor="middle">15:30</text></svg>
    <span class="stamp cs">예시 값</span>
  </div>
  <p class="scrib s3n">↑ 12:30 그림자가 가장 짧아요!</p>
  <div class="chrome bot"><span>SOURCE · 예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span><span>P. 03 / 06</span></div>
</section>
<section class="slide">
  <div class="chrome top"><span><svg class="mk" viewBox="0 0 32 16"><g fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="24" cy="8" r="5"/><path d="M19 8H3M8 3L3 8l5 5"/></g></svg>00초등학교 · FIELD NOTES</span><span>관계 정리</span></div>
  <h2 class="hd md">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="card cream"><span class="lbl">HIGH</span><h3>태양 고도가 높을 때</h3><p class="it">그림자 길이는 짧아져요</p><p class="it">기온은 높아져요</p></div><div class="card p2"><span class="lbl">LOW</span><h3>태양 고도가 낮을 때</h3><p class="it">그림자 길이는 길어져요</p><p class="it">기온은 낮아져요</p></div></div>
  <div class="card lst"><i class="cpin pl2"><svg class="pin" viewBox="0 0 360 130"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 76 C230 92 150 108 40 118"/><path d="M300 76 C326 78 338 64 334 54 C330 42 314 38 302 44 C292 50 296 64 310 64 C322 64 326 52 318 48"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/></g></svg></i><span class="lbl">MEMO · 남중</span><div class="li"><b class="num sm">1</b><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p></div><div class="li"><b class="num sm">2</b><p>이때의 태양 고도를 남중 고도라고 해요</p></div></div>
  <div class="card tbl"><span class="lbl">시각별 변화</span><table><tr><th>시각</th><th>태양 고도</th><th>그림자 길이</th><th>기온</th></tr><tr><td>오전 9:30</td><td>낮아요</td><td>길어요</td><td>낮아요</td></tr><tr><td>낮 12:30</td><td>가장 높아요</td><td>가장 짧아요</td><td>높아지는 중</td></tr><tr><td>오후 14:30</td><td>낮아지는 중</td><td>길어지는 중</td><td>가장 높아요</td></tr></table></div>
  <div class="card px tilt qt"><b class="qm">“</b><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="lbl">— 오늘의 정리</span></div>
  <div class="chrome bot"><span>계절의 변화</span><span>P. 04 / 06</span></div>
</section>
<section class="slide">
  <div class="chrome top"><span><svg class="mk" viewBox="0 0 32 16"><g fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="24" cy="8" r="5"/><path d="M19 8H3M8 3L3 8l5 5"/></g></svg>00초등학교 · FIELD NOTES</span><span>확인하기</span></div>
  <h2 class="hd md">배운 내용을 확인해 볼까요?</h2>
  <div class="card quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요"><i class="cpin pq"><svg class="pin" viewBox="0 0 360 130"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 76 C230 92 150 108 40 118"/><path d="M300 76 C326 78 338 64 334 54 C330 42 314 38 302 44 C292 50 296 64 310 64 C322 64 326 52 318 48"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/></g></svg></i>
    <span class="lbl">QUESTION · 퀴즈</span>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="opts"><button class="opt" data-opt="0"><b class="num sm">a</b><span class="ot">오전 9시 30분</span><span class="pill yes">맞아요!</span><span class="pill no">NO</span></button><button class="opt" data-opt="1"><b class="num sm">b</b><span class="ot">낮 12시 30분 무렵</span><span class="pill yes">맞아요!</span><span class="pill no">NO</span></button><button class="opt" data-opt="2"><b class="num sm">c</b><span class="ot">오후 3시 30분</span><span class="pill yes">맞아요!</span><span class="pill no">NO</span></button></div>
    <p class="fb" data-fb></p>
    <button class="card bt rt" data-act="retry">다시 풀기</button>
    <span class="stamp qs">CHECKED</span>
  </div>
  <div class="card p2 tilt blk"><i class="cpin pb"><svg class="pin" viewBox="0 0 360 110"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 74 C220 76 150 76 88 72"/><path d="M300 74 C326 76 338 62 334 52 C330 40 314 36 302 42 C292 48 296 62 310 62 C322 62 326 50 318 46"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/><path d="M40 44 h28"/></g></svg></i>
    <span class="lbl">빈칸을 눌러 확인해요</span>
    <p class="bl"><button class="pill part blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="bl"><button class="pill part blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="bl"><button class="pill part blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
    <div class="words"><span class="lbl">오늘의 낱말</span><p class="scrib">태양 고도 · 남중 고도 · 그림자 길이 · 기온</p></div>
  </div>
  <div class="chrome bot"><span>계절의 변화</span><span class="nr">버튼 규칙 없음 → 꽂힌 카드으로 표현 · 빈칸 규칙 없음 → PART 알약으로 표현</span><span>P. 05 / 06</span></div>
</section>
<section class="slide">
  <div class="chrome top"><span><svg class="mk" viewBox="0 0 32 16"><g fill="none" stroke="currentColor" stroke-width="2.4"><circle cx="24" cy="8" r="5"/><path d="M19 8H3M8 3L3 8l5 5"/></g></svg>00초등학교 · FIELD NOTES</span><span>디자인 안내</span></div>
  <h2 class="hd h6">이 디자인 사용 설명서</h2>
  <div class="card g6"><i class="cpin pg6"><svg class="pin" viewBox="0 0 360 110"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 74 C220 76 150 76 88 72"/><path d="M300 74 C326 76 338 62 334 52 C330 40 314 36 302 42 C292 48 296 62 310 62 C322 62 326 50 318 46"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/><path d="M40 44 h28"/></g></svg></i>
    <span class="lbl">한눈에</span><p class="ab6">노란 리갈패드에 쓴 <span class="ul">현장 관찰 노트</span>예요. 짙은 코발트 잉크 한 색으로 쓰고, 크림 카드를 <b>옷핀으로 꽂아</b> 붙입니다. 사람 목소리는 손글씨로 여백에 적어요.</p>
    <span class="lbl">색</span><div class="sw6"><span><i style="background:#EFE56A"></i>노란 종이</span><span><i style="background:#F8F1D6"></i>크림 카드</span><span><i style="background:#1F3A8A"></i>코발트 잉크</span><span><i style="background:#C2342B"></i>빨강 = 도장·NO만</span></div>
    <span class="lbl">글꼴</span><div class="ft6"><p><b>인쇄 제목</b> Space Grotesk 700 → Hakgyoansim Undongjang</p><p><b>본문</b> 프리텐다드 Pretendard-Regular · <b>기록 라벨</b> DM Mono</p><p><b>손글씨</b> Caveat → Hakgyoansim Badasseugi TTF L</p></div>
    <span class="lbl">알약</span><div class="pl6"><span class="pill yes">YES</span><span class="pill no">NO</span><span class="pill part">PART</span><span class="scrib">← 맞음 / 틀림 / 반쯤</span></div>
    <span class="lbl">이렇게 쓰면 좋아요</span><div class="tip6"><p>— 실험·관찰 기록, 조사 발표처럼 '내가 적은 노트' 느낌의 수업</p><p>— 카드는 한 장에 한두 장만 비뚤게 — 다 기울이면 어지러워요</p><p>— 손글씨는 짧은 여백 메모에만</p></div>
    <p class="scrib m6">여백 메모는 이렇게!</p>
  </div>
  <span class="lbl sl6">대표 장치 — 눌러 보세요</span>
  <div class="card d6 a"><div class="dh"><h3>옷핀 닫힘 ↔ 열림</h3><button class="card bt sm" data-demo="#pp-pin" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>카드를 잡아 주는 손그림 옷핀 — 닫힌 핀과 벌어진 핀 두 가지예요.</p><div class="pinbox" id="pp-pin"><i class="pc6 cl"><svg class="pin" viewBox="0 0 360 110"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 74 C220 76 150 76 88 72"/><path d="M300 74 C326 76 338 62 334 52 C330 40 314 36 302 42 C292 48 296 62 310 62 C322 62 326 50 318 46"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/><path d="M40 44 h28"/></g></svg></i><i class="pc6 op"><svg class="pin" viewBox="0 0 360 130"><g fill="none" stroke="currentColor" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M296 42 C230 40 140 38 74 40"/><path d="M300 76 C230 92 150 108 40 118"/><path d="M300 76 C326 78 338 64 334 54 C330 42 314 38 302 44 C292 50 296 64 310 64 C322 64 326 52 318 48"/><path d="M28 30 h50 a12 12 0 0 1 12 12 v18 a12 12 0 0 1 -12 12 h-50 a12 12 0 0 1 -12 -12 v-18 a12 12 0 0 1 12 -12 z"/></g></svg></i></div></div>
  <div class="card d6 b"><div class="dh"><h3>빨간 고무도장</h3><button class="card bt sm" data-demo="#pp-st" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>-4° 기울어진 빨간 도장 — 'RECEIVED', '확인' 같은 상태 표시에만 써요.</p><div class="stbox" id="pp-st"><span class="scrib">관찰 기록지 No.03</span><span class="stamp st6">CHECKED</span></div></div>
  <div class="card d6 c"><div class="dh"><h3>비뚤게 꽂기</h3><button class="card bt sm" data-demo="#pp-tilt" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>카드를 0.6~1.5° 기울이고 잉크색 그림자(5px 6px)를 붙여요.</p><div class="tlbox"><div class="card tc6" id="pp-tilt"><b class="num sm">1</b><span>꽂힌 카드</span></div></div></div>
  <div class="chrome bot"><span>계절의 변화</span><span>P. 06 / 06</span></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/pin-and-paper.js"></script>
</body>
</html>
```

---

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

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

```css
/* pin-and-paper — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-33';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/hakgyoansim-undongjang/HakgyoansimUndongjangL.woff2") format("woff2");font-weight:300}
@font-face{font-family:'kp-5';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/pretendard/Pretendard-Regular.woff2") format("woff2");font-weight:400}
@font-face{font-family:'kp-34';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/hakgyoansim-badasseugi/Hakgyoansim-Badasseugi-TTF-L.woff2") format("woff2");font-weight:300}
/* === THEME === */
:root{--stage-bg:#EFE56A;--slide-bg:#EFE56A;
  --kt:'kp-33';--kb:'kp-5';--ka:'kp-34';
  --wt:300;--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 === */

/* --- 종이 · 잉크 --- */
:root{--paper:#EFE56A;--p2:#F5ECA0;--px:#FBE6A4;--cream:#F8F1D6;--ink:#1F3A8A;--ink2:#2D4FB8;--red:#C2342B;--olive:#6B7A2E;--orange:#D8702A;--dash:1.5px dashed rgba(31,58,138,.45)}
.slide{color:var(--ink);font-family:'Space Grotesk',var(--kb),sans-serif;background:radial-gradient(120% 90% at 20% 10%,rgba(255,255,255,.18),transparent 60%),radial-gradient(140% 100% at 80% 95%,rgba(0,0,0,.05),transparent 55%),var(--paper)}
.slide::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:30;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.28  0 0 0 0 0.1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.slide>*{position:absolute}
.scrib,.num,.pill.yes,.pill.part,.big small,.qm{font-family:'Caveat',var(--ka),cursive}
.chrome,.lbl,.stamp,.pill.no{font-family:'DM Mono',var(--kb),monospace;font-weight:500;text-transform:uppercase}
.hd,h3,.t1,.big,.q,.qt p{font-family:'Space Grotesk',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}
.ul{border-bottom:2px solid var(--ink);padding-bottom:2px}

/* --- 크롬 --- */
.chrome{left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;letter-spacing:.12em}
.chrome.top{top:44px;font-size:22px}
.chrome.bot{bottom:36px;font-size:19px;letter-spacing:.14em;opacity:.65}
.chrome.bot span:first-child{max-width:1100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nr{text-transform:none;letter-spacing:.02em;font-size:18px}
.mk{width:38px;height:19px;vertical-align:-3px;margin-right:12px}

/* --- 꽂힌 카드 · 옷핀 · 도장 · 알약 --- */
.card{background:var(--cream);border:1.5px solid var(--ink);border-radius:4px;box-shadow:5px 6px 0 0 var(--ink);padding:28px 28px 24px}
.card.p2{background:var(--p2)}.card.px{background:var(--px)}
.tilt{transform:rotate(1deg)}
.pin{display:block;width:100%;height:auto;color:var(--ink)}
.cpin{position:absolute;width:170px;top:-28px;left:40px;transform:rotate(-9deg)}
.stamp{display:inline-block;border:3px solid var(--red);color:var(--red);padding:6px 16px;font-size:22px;letter-spacing:.18em;transform:rotate(-4deg)}
.pill{display:inline-block;border-radius:999px;padding:4px 16px;white-space:nowrap}
.pill.yes{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);font-size:34px;font-weight:600}
.pill.no{border:1.5px solid var(--red);color:var(--red);font-size:20px;letter-spacing:.14em;padding:8px 16px}
.pill.part{background:var(--p2);color:var(--ink);border:1.5px solid var(--ink);font-size:32px;font-weight:600}
.num{font-size:70px;font-weight:700;line-height:.9}
.num.sm{font-size:52px}
.lbl{font-size:20px;letter-spacing:.18em;opacity:.75}

/* --- 1. 표지: 단원 제목(인쇄) + 영문 + 기록 라벨 '학습 목표' + 학습 목표(가장 큰 인쇄 글자 덩어리) + PART 알약 + 기울어진 카드(도장) + 큰 옷핀 --- */
.t1{left:60px;top:128px;font-size:80px;line-height:1.08;white-space:nowrap}
.en{left:64px;top:232px;width:1050px;font:700 46px/1.05 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.gl{left:66px;top:350px;font-size:24px;opacity:.85}
.goal{left:58px;top:388px;width:1180px;font-size:108px;line-height:1.16;white-space:nowrap}
.goal .gk{font-style:normal}
.pills{left:64px;top:700px;display:flex;gap:16px}
.cover-card{left:1260px;top:250px;width:560px;height:520px;display:flex;flex-direction:column;transform:rotate(1.4deg)}
.cover-card .num{margin-top:14px;font-size:200px;line-height:.8}
.cover-card h3{margin-top:18px;font-size:44px;line-height:1.15}
.cover-card .dash{margin-top:auto;border-top:var(--dash);padding-top:16px;font-size:28px}
.cover-card .stamp{position:absolute;right:24px;top:110px}
.bigpin{left:1150px;top:170px;width:380px;transform:rotate(-14deg)}

/* --- 2. 만드는 순서: 84px 제목 + 밑줄 손글씨 정의 / 옷핀 꽂은 그림 카드(잉크 선 그림 + 손글씨 이름표, 아직 안 만든 부품은 흐림) | 꽂힌 카드 4장(손글씨 숫자 · 여백 메모, 단계마다 켜짐) + 카드 단추 --- */
.hd{left:64px;right:64px;top:110px;font-size:96px;line-height:1.1}
.hd.md{font-size:84px}
.def{left:70px;top:222px;font-size:44px;font-weight:700;transform:rotate(-1.5deg);transform-origin:left}
.figc{left:64px;width:880px;top:300px;padding:30px 30px 18px;display:flex;flex-direction:column;
  --g-ink:var(--ink);--g-acc:var(--orange);--g-stick:var(--px);--g-board:var(--p2);--g-ruler:var(--cream);--g-prot:rgba(255,255,255,.45);--g-shadow:var(--ink);--g-font:'Caveat',var(--ka),cursive;--g-dim:.22}
.figc .gauge{margin-top:4px}
.figc .g-lb{font-size:46px}
.pfg{left:auto;right:60px;top:-30px;transform:rotate(12deg)}
.s2n{position:static;margin-top:16px;font-size:38px;font-weight:700;transform:rotate(-1.5deg);transform-origin:left}
.cards{left:990px;right:72px;top:300px;display:flex;flex-direction:column;gap:16px}
.cards .card{position:relative;display:grid;grid-template-columns:76px 1fr;align-items:start;padding:14px 22px 16px;opacity:.38}
.cards .card.on{opacity:1}
.cards .num{font-size:62px;line-height:.9}
.cards h3{font-size:38px;line-height:1.15;display:flex;align-items:baseline;gap:18px}
.cards .note{font-size:32px;font-weight:600;line-height:1;transform:rotate(-1.5deg)}
.cards p{margin-top:4px;font-size:28px;line-height:1.4}
.btns{left:990px;right:200px;top:872px;display:flex;gap:20px;align-items:center}
.bt{flex:none;padding:14px 26px;font:700 30px/1 var(--kb);color:var(--ink)}
.bt:disabled{opacity:.4}
.cap{font-size:34px;font-weight:600;line-height:1.05;margin-left:4px}

/* --- 3. 숫자와 그래프: 큰 숫자 카드 4장(손글씨 단위) | 그래프 카드(옷핀 · 도장 '예시 값') + 손글씨 메모 --- */
.stats{left:64px;width:700px;top:250px;bottom:110px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:28px}
.stat{display:flex;flex-direction:column}
.big{margin-top:10px;font-size:96px;line-height:.95;letter-spacing:-.02em;white-space:nowrap}
.big small{display:block;margin-top:4px;font-size:36px;font-weight:600;letter-spacing:0}
.stat p{margin-top:auto;font-size:26px;line-height:1.35}
.chartc{left:810px;right:72px;top:250px;height:600px;display:flex;flex-direction:column;gap:8px;padding-top:40px}
.pc{left:auto;right:70px;top:-30px;transform:rotate(10deg)}
.lg{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font-size:24px}
.lg .lbl{width:100%}
.k{display:inline-block;width:22px;height:14px;margin-right:8px;vertical-align:middle;border-radius:2px}
.k.bn{background:var(--ink)}.k.ls{background:var(--olive)}.k.lt{background:var(--orange)}
.cv{flex:1;width:100%;min-height:0}
.cv .gl{stroke:rgba(31,58,138,.45);stroke-width:1.5;stroke-dasharray:6 6}
.cv .base{stroke:var(--ink);stroke-width:1.5}
.cv .ax{font:500 18px 'DM Mono',monospace;fill:var(--ink)}
.cv .bn{fill:var(--ink)}
.cv .bvl{font:700 26px 'Caveat',cursive;fill:var(--cream)}
.cv .ls{fill:none;stroke:var(--olive);stroke-width:3}.cv .lsp,.cv .lst{fill:var(--olive)}
.cv .lt{fill:none;stroke:var(--orange);stroke-width:3}.cv .ltp,.cv .ltt{fill:var(--orange)}
.cv .pv{font:700 26px 'Caveat',cursive;paint-order:stroke;stroke:var(--cream);stroke-width:6px}
.cs{position:absolute;right:28px;bottom:24px}
.s3n{left:830px;top:880px;font-size:42px;font-weight:700;transform:rotate(-2deg)}

/* --- 4. 비교와 표: 비교 카드 두 장 + 남중 메모 카드(손글씨 숫자) / 비교 표(점선 ink 칸) + 기울어진 인용 카드(큰 손글씨 따옴표, 8px 9px 그림자) --- */
.cmp{left:64px;width:1080px;top:240px;height:260px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cmp h3{margin:8px 0 10px;font-size:40px;line-height:1.1}
.it{font-size:28px;line-height:1.5;border-top:var(--dash);padding-top:6px}
.lst{left:1190px;right:72px;top:240px;height:260px;padding-top:36px}
.pl2{left:auto;right:40px;top:-34px;width:160px;transform:rotate(16deg)}
.li{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:baseline;margin-top:10px}
.li p{font-size:26px;line-height:1.4}
.tbl{left:64px;width:1080px;top:540px;padding:20px 24px 16px}
.tbl table{width:100%;border-collapse:collapse;margin-top:10px}
.tbl th,.tbl td{padding:14px 18px;border-bottom:1.5px solid rgba(31,58,138,.5);border-right:1.5px solid rgba(31,58,138,.5);font-size:26px;line-height:1.35;text-align:left}
.tbl th{font:500 19px 'DM Mono',var(--kb),monospace;letter-spacing:.14em}
.tbl tr>*:last-child{border-right:0}
.tbl tr:last-child td{border-bottom:0}
.qt{left:1190px;right:72px;top:560px;height:340px;padding:40px 40px 30px;box-shadow:8px 9px 0 0 var(--ink);display:flex;flex-direction:column}
.qm{position:absolute;left:24px;top:-60px;font-size:200px;line-height:1;font-weight:700}
.qt p{margin-top:30px;font-size:40px;line-height:1.3;font-weight:500}
.qt .lbl{margin-top:auto}

/* --- 5. 확인하기: 퀴즈 카드(손글씨 a b c · YES/NO 알약 · 정답 시 도장) | 기울어진 빈칸 카드(PART 알약 → YES 알약) + 오늘의 낱말 --- */
.quiz{left:64px;width:1000px;top:262px;bottom:110px;display:flex;flex-direction:column;padding:42px 36px 26px}
.pq{width:180px;left:auto;right:40px;top:-40px;transform:rotate(16deg)}
.q{margin-top:10px;font-size:48px;line-height:1.15}
.opts{margin-top:14px}
.opt{width:100%;display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;text-align:left;padding:10px 0;border-bottom:var(--dash);font-size:34px;color:var(--ink)}
.opt .pill{display:none}
.opt.right .pill.yes,.opt.wrong .pill.no{display:inline-block}
.opt:disabled:not(.right){opacity:.5}
.fb{margin-top:14px;min-height:76px;font-size:28px;line-height:1.4}
.rt{align-self:flex-start;margin-top:auto}
.qs{position:absolute;right:250px;top:34px;font-size:28px;padding:8px 20px;visibility:hidden}
.quiz.solved .qs{visibility:visible}
.blk{left:1110px;right:72px;top:262px;bottom:165px;display:flex;flex-direction:column;gap:18px;padding-top:44px}
.pb{left:60px;top:-30px;transform:rotate(-8deg)}
.bl{font-size:30px;line-height:1.5}
.blank{margin-right:8px;min-width:160px;text-align:center;position:relative;vertical-align:middle}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--ink);color:var(--paper)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.words{margin-top:auto;border-top:var(--dash);padding-top:12px}
.words .scrib{font-size:38px;font-weight:700;line-height:1.1;margin-top:6px}

/* --- 내비: 오른쪽 아래 작은 꽂힌 카드 화살표 --- */
.dk-nav{position:absolute;right:64px;bottom:80px;display:flex;gap:14px;z-index:40}
.dk-prev,.dk-next{width:54px;height:50px;background:var(--cream);border:1.5px solid var(--ink);border-radius:4px;box-shadow:3px 4px 0 0 var(--ink);font:700 24px/1 'DM Mono',monospace;color:var(--ink)}
.dk-prev:disabled,.dk-next:disabled{opacity:.35}
/* --- 6. 디자인 안내: 큰 꽂힌 카드(설명) | 대표 장치 카드 3장(눌러 보기) --- */
.h6{font-size:84px}
.g6{left:64px;width:960px;top:236px;bottom:96px;display:flex;flex-direction:column;gap:8px;padding:34px 36px 22px}
.pg6{left:auto;right:60px}
.g6 .lbl{margin-top:8px}
.ab6{font-size:27px;line-height:1.5}
.sw6{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:23px}
.sw6 i{display:inline-block;width:28px;height:28px;margin-right:8px;vertical-align:-7px;border:1.5px solid var(--ink);border-radius:4px}
.ft6 p,.tip6 p{font-size:23px;line-height:1.45}
.ft6 b{font-weight:700}
.pl6{display:flex;align-items:center;gap:14px}
.pl6 .pill.yes,.pl6 .pill.part{font-size:28px}
.pl6 .scrib{font-size:30px}
.m6{position:absolute;right:30px;bottom:24px;font-size:38px;transform:rotate(-3deg);border-bottom:2px solid var(--ink)}
.sl6{left:1070px;top:236px;font-size:20px}
.d6{left:1070px;right:64px;height:200px;padding:20px 24px 16px}
.d6.a{top:272px}.d6.b{top:494px}.d6.c{top:716px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:34px}
.d6 p{margin-top:6px;font-size:21px;line-height:1.4}
.bt.sm{padding:6px 16px;font-size:22px;box-shadow:3px 4px 0 0 var(--ink)}
.bt.sm[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.pinbox{position:relative;height:70px;margin-top:6px}
.pc6{position:absolute;left:30px;top:0;width:230px;transform:rotate(-6deg)}
.pc6.op{visibility:hidden}
.pinbox.play .cl{visibility:hidden}.pinbox.play .op{visibility:visible}
.stbox{position:relative;height:70px;display:flex;align-items:center;gap:30px;margin-top:6px}
.stbox .scrib{font-size:36px}
.st6{visibility:hidden}
.stbox.play .st6{visibility:visible}
.tlbox{height:74px;display:flex;align-items:center;padding-left:20px;margin-top:4px}
.tc6{display:flex;align-items:center;gap:16px;padding:6px 22px;font-size:24px}
.tc6.play{transform:rotate(1.4deg)}

/* === 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을 만드세요.)