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

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

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

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

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

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

## 라이선스

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

- Cafe24 Oneprettynight: Cafe24 Oneprettynight — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright (c) 2020 by Cafe24. All rights reserved.
  파일: Cafe24Oneprettynight-v2.0.ttf
- 프리텐다드 Pretendard-Light: 프리텐다드 — 프리텐다드 (Pretendard) — 길형진 (orioncactus) / 눈누: https://noonnu.cc/font_page/694
  파일: Pretendard-Light.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/vellum.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/vellum.js"></script>`(body 맨 끝)는 주소 한 글자도 바꾸거나 지우지 마세요. **공통 CSS(5)나 엔진을 HTML 안에 옮겨 쓰거나, 줄이거나, 비슷하게 새로 짜지 마세요**(이미 불러오므로 같은 규칙을 또 쓰면 서로 부딪혀 깨집니다). `<style>`에는 '추가 부품' 줄과 그 아래에 직접 정의한 클래스만 둡니다. 엔진이 쓰는 속성 이름(`data-steps`, `data-s`, `data-quiz`, `data-opt`, `data-act`, `data-blank` 등)은 5의 엔진 사용법대로 씁니다.
3. **클래스는 부품 사전(3)과 공통 CSS(5)에 있는 것만 쓰세요.** 없는 클래스 이름을 지어 쓰면 아무 모양도 적용되지 않아 배치가 무너집니다(창이 좁아지고 빈 공간이 생김). 새 부품이 꼭 필요하면 `<style>`의 '추가 부품' 주석 줄 **아래에** 그 클래스를 직접 정의하세요(디자인 규칙의 색·선·글꼴만 사용). 모양을 `style="…"`로 하나하나 지정하는 것보다 부품 클래스를 쓰는 쪽이 낫습니다.
   - **새 배치를 만들기 전에, 예시 장의 배치 클래스로 할 수 있는지 먼저 보세요.** 직접 만든 배치는 화면을 볼 수 없는 상태에서 쓰기 때문에 깨질 위험이 큽니다. 예시 배치로 안 될 때만 새로 정의합니다.
4. **슬라이드의 장 수·순서·내용은 사용자 수업에 맞게 새로 구성하세요.** 뼈대의 슬라이드는 '계절의 변화' 예시이므로 그 문구는 하나도 남기지 마세요. 장을 늘리거나 줄이거나 순서를 바꾸면 **내비 점 개수와 쪽 표시(예: 01 / 06)를 실제 장 수에 맞추세요.** 뼈대의 6번째 장은 이 디자인의 대표 장치를 눌러 보여 주는 안내 장이므로, 그 부품·움직임(예: data-demo 시연 버튼과 .play 상태)만 참고하고 디자인 안내 문구는 남기지 마세요. 아래 '구성은 내용이 정합니다'를 따르세요.
5. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Cafe24 Oneprettynight(400) · 본문 프리텐다드 Pretendard-Light(300))는 공통 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. 디자인 규칙 (`vellum` design.md)

````markdown
---
version: alpha
name: Vellum
description: An essay-pinned-to-a-wall presentation system — a single monochromatic field of deep periwinkle (#2A3870) with warm chartreuse-yellow type (#E8D85C) floating centered on it, every slide. Italic Cormorant Garamond carries every headline at all sizes — the italic serif is the personality, against the bold colorfield. DM Sans handles body in a quiet supporting role. Courier Prime mono provides the typed annotation voice — appearing as a "pin-note" attribution sitting in the bottom-left corner of every slide. The mood is gallery exhibition wall meets archive folder — quiet, monochromatic, deeply still. One color, two warm typefaces, zero motion.

colors:
  navy: "#2A3870"
  navy-alt: "#343F80"
  navy-deep: "#1F2858"
  navy-mid: "#34407A"
  yellow: "#E8D85C"
  yellow-2: "rgba(232,216,92,0.62)"
  yellow-3: "rgba(232,216,92,0.32)"
  emphasis-yellow: "#F5E168"
  teal: "#3A7878"
  border: "rgba(232,216,92,0.20)"

color-aliases:
  c-bg: navy
  c-bg-alt: navy-alt
  c-bg-light: navy
  c-fg: yellow
  c-fg-2: yellow-2
  c-fg-3: yellow-3
  c-fg-light: yellow
  c-emphasis: emphasis-yellow
  c-accent: teal
  c-border: border

typography:
  display:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 11vw
    fontWeight: 400
    fontStyle: italic
    lineHeight: 0.92
    letterSpacing: -0.01em
  h1:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 7vw
    fontWeight: 400
    fontStyle: italic
    lineHeight: 0.95
    letterSpacing: -0.01em
  h2:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 4vw
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.05
  h3:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 2.4vw
    fontWeight: 500
    fontStyle: italic
    lineHeight: 1.15
  quote-text:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 3.2vw
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.25
  quote-mark:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 7vw
    fontWeight: 400
    fontStyle: italic
    lineHeight: 0.6
    color: "{colors.teal}"
  stat-value:
    fontFamily: "Cormorant Garamond, Noto Serif SC, Georgia, serif"
    fontSize: 5.5vw
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1
    letterSpacing: -0.02em
  lead:
    fontFamily: "DM Sans, Noto Sans SC, system-ui, sans-serif"
    fontSize: 1.5vw
    fontWeight: 400
    lineHeight: 1.6
  body:
    fontFamily: "DM Sans, Noto Sans SC, system-ui, sans-serif"
    fontSize: 1.05vw
    fontWeight: 400
    lineHeight: 1.65
  caption:
    fontFamily: "DM Sans, Noto Sans SC, system-ui, sans-serif"
    fontSize: 0.85vw
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "Courier Prime, Courier New, monospace"
    fontSize: 0.72vw
    fontWeight: 400
    letterSpacing: 0.06em
  pin-note:
    fontFamily: "Courier Prime, Courier New, monospace"
    fontSize: 1.15vw
    fontWeight: 500
    lineHeight: 1.5
    color: "{colors.teal}"
    letterSpacing: 0.01em
  bar-val:
    fontFamily: "Courier Prime, Courier New, monospace"
    fontSize: 1.1vw
    fontWeight: 400
    lineHeight: 1

spacing:
  pad-x: 6vw
  pad-y: 6vh
  gap-lg: 5vh
  gap-md: 3vh
  gap-sm: 1.5vh

canvas:
  width: 100vw
  height: 100vh

components:
  pin-annotation:
    position: "absolute bottom-left, padding ~0.9 * pad-y from bottom and 1 * pad-x from left"
    typography: "{typography.pin-note}"
    color: "{colors.teal}"
    maxWidth: "22vw"
    description: "The system's signature element — a small stack of Courier Prime mono lines in dusty teal, sitting in the bottom-left of every slide. Holds slide counter (e.g., '03 / 09'), a short pinned label, and an optional second pin note. Functions as the 'tag stuck to the wall.'"
  kicker:
    typography: "{typography.label}"
    color: "{colors.teal}"
    description: "Small Courier Prime mono label in dusty teal, sits above a headline as a section marker."
  rule:
    width: 28px
    height: 1px
    background: "{colors.teal}"
    description: "A 28px hairline accent rule in dusty teal, used as a small kicker separator."
  chrome-bar:
    borderBottom: "1px solid {colors.border}"
    paddingBottom: "{spacing.gap-sm}"
    marginBottom: "{spacing.gap-md}"
    description: "Top chrome bar — mono label left, mono counter right, low-opacity hairline rule beneath."
  foot-bar:
    borderTop: "1px solid {colors.border}"
    paddingTop: "{spacing.gap-sm}"
    marginTop: "{spacing.gap-md}"
    description: "Bottom chrome bar — mirror of chrome-bar."
  bullet-list-numbered:
    listStyle: "none"
    counter: "list-counter"
    markerFontFamily: "{typography.label.fontFamily}"
    markerColor: "{colors.teal}"
    markerSize: "{typography.label.fontSize}"
    description: "Numbered list using CSS counters — the counter renders in Courier Prime mono at label size in dusty teal, with a 2em column for the number and 0.5em gap to the body."
  pin-stat:
    borderRight: "1px solid {colors.border}"
    padding: "{spacing.gap-md}"
    description: "Vertically-arranged centered stat (italic serif numeral above mono label), separated from neighbors by a single 1px low-opacity hairline. Last stat in row drops the border."
  pin-stat-val:
    typography: "{typography.stat-value}"
    color: "{colors.yellow}"
    description: "Large italic serif stat numeral (5.5vw italic Cormorant Garamond), centered in a pin-stat tile."
  pin-stat-label:
    typography: "{typography.caption}"
    fontFamily: "{typography.label.fontFamily}"
    color: "{colors.yellow-2}"
    description: "Small mono caption beneath a pin-stat numeral."
  compare-panel-dark:
    background: "{colors.navy-deep}"
    description: "Left compare panel — a slightly deeper navy to create internal contrast against the standard navy field."
  compare-panel-light:
    background: "{colors.navy-mid}"
    borderLeft: "1px solid {colors.border}"
    description: "Right compare panel — a slightly lighter navy with a hairline left-border, creating the two-shade panel pair."
  bar-fill-default:
    background: "{colors.yellow-3}"
    description: "Default chart bar fill — yellow at 32% opacity (the tier-3 muted color)."
  bar-fill-accent:
    background: "{colors.yellow}"
    description: "Highlighted chart bar — full yellow."
  chart-baseline:
    height: 1px
    background: "{colors.border}"
    description: "1px hairline baseline beneath chart bars."
  img-placeholder:
    background: "rgba(42,56,112,0.12)"
    border: "1px dashed {colors.border}"
    description: "Image slot — translucent navy fill with a dashed yellow-low-opacity border, centered mono label inside."
  quote-mark:
    typography: "{typography.quote-mark}"
    color: "{colors.teal}"
    description: "A 7vw italic Cormorant Garamond opening quote glyph in dusty teal, sitting centered above a centered pull-quote. The teal color is the system's only large-graphic accent."
---

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

Vellum is a **monochromatic essay-on-a-wall** presentation system. The visual premise is severe and tender at once: every slide is the same deep periwinkle navy field (`{colors.navy}` — #2A3870), with warm chartreuse-yellow type (`{colors.yellow}` — #E8D85C) floating centered on it. There is no alternate surface. There is no light/dark theme. There is no second background color. The field is the constant; the type and a single small annotation in the bottom-left corner are everything else.

The typographic premise is **italic serif as personality**. Cormorant Garamond runs every headline at every scale — display through h3, quote-text, stat-value — in italic at weight 400. The italic serif at large scale against the bold periwinkle field reads as gallery wall text: personal, considered, slightly intimate. DM Sans steps in for body and lead paragraphs in a quiet supporting role; the body is meant to recede so the italic serif headlines lead the eye. Courier Prime monospace plays the most distinctive role: it carries the "pin-note" — a small stack of typed-attribution lines that sits in the bottom-left corner of every slide. The pin-note in dusty teal looks like a typewriter label pinned to the wall beside the framed essay; it's the system's signature.

The color philosophy is **one field, two accents**. The field is `{colors.navy}`. Type is `{colors.yellow}` at full opacity for primary, 62% for secondary, 32% for tertiary. The first accent is `{colors.emphasis-yellow}` (#F5E168) — a brighter yellow used only for `<em>` emphasis inside italic headlines and for small accent text. The second accent is `{colors.teal}` (#3A7878) — a dusty desaturated teal used only for: the large quote-mark glyph, the pin-note text, kickers, the 28px accent rule, and list counter markers. The teal is the only non-yellow visible color in the system, and it appears in carefully limited contexts.

Depth is **flat and centered**. There are no drop shadows. No rounded corners. No gradients. Borders are 1px hairlines at 20% yellow opacity — barely visible, present mostly as faint structural marks rather than dividers. The compare layout is the single exception: it uses two slightly-different navy shades (`{colors.navy-deep}` and `{colors.navy-mid}`) to create a visible split panel, but even there, the difference is subtle. Animation is set to zero duration — slides do not transition. The system is, by design, completely still.

**Density philosophy: sparse and centered.** Vellum slides are pinned essays — each slide holds a small amount of content, centered in the canvas with significant breathing room above, below, and to the sides. A statement slide is one short headline centered on the field. A cover is a kicker, a display title, a lead sentence, and the pin-note in the corner — that's it. A list slide is four numbered rules in a 60% width column at center. The system reads as broken when crowded; the empty navy field around the content is structural, not negative space. It's wall.

**Key Characteristics:**
- Single monochromatic field — `{colors.navy}` (deep periwinkle) — on every slide. No light theme, no inversion.
- Italic Cormorant Garamond at weight 400 for every headline, every numeral, every featured serif moment.
- DM Sans for body and lead paragraphs; Courier Prime mono for chrome labels and the pin-note signature.
- Yellow type (`{colors.yellow}`) is the primary; brighter `{colors.emphasis-yellow}` is the only `<em>` color inside headlines.
- Dusty teal (`{colors.teal}`) is the second accent — used only for the large quote-mark glyph, the pin-note text, kickers, the 28px rule, and list counter markers.
- The pin-annotation (Courier Prime mono lines in dusty teal in the bottom-left corner of every slide) is the system's signature element.
- Content is centered on every slide — text-align center on most layouts, with content occupying 55–80% of canvas width.
- Hairline 1px borders at 20% yellow opacity for chrome separators; otherwise no borders, no shadows, no elevation.
- Zero motion — slide transitions and entrance animations are set to 0 duration. The system is meant to be still.
- Italic is structural, not decorative: serif italic at display scale is the system's identity, never the upright roman.

## Colors

### Palette

- **Navy** (`{colors.navy}` — #2A3870): Deep periwinkle field. The single surface across every slide. Slightly warmer than midnight, slightly cooler than ultramarine — sits in a contemplative blue register.
- **Navy Alt** (`{colors.navy-alt}` — #343F80): A slightly lifted navy for adjacent-surface differentiation. Rarely used in practice.
- **Navy Deep** (`{colors.navy-deep}` — #1F2858): The darker compare-panel shade. Used only on the left side of compare layouts to create internal panel contrast.
- **Navy Mid** (`{colors.navy-mid}` — #34407A): The lighter compare-panel shade. Used only on the right side of compare layouts.
- **Yellow** (`{colors.yellow}` — #E8D85C): The warm chartreuse-yellow primary text color. Warm, slightly green-biased — reads as aged vellum or chartreuse silk against the navy field.
- **Yellow 2** (`{colors.yellow-2}` — rgba(232,216,92,0.62)): Secondary text — yellow at 62% opacity. Used for lead paragraphs and descriptions.
- **Yellow 3** (`{colors.yellow-3}` — rgba(232,216,92,0.32)): Tertiary text — yellow at 32%. Used for muted captions, chart axis labels, default chart bars.
- **Emphasis Yellow** (`{colors.emphasis-yellow}` — #F5E168): Brighter yellow. Used only for `<em>` emphasis inside italic headlines (the `<em>` renders as roman non-italic in this brighter shade — see Signature Treatments) and for small accent text labels.
- **Teal** (`{colors.teal}` — #3A7878): Dusty desaturated teal. The system's second accent. Used only for: the large quote-mark glyph, the pin-note text, kicker labels, the 28px accent rule, list counter markers, and the bullet-list marker. The teal is the system's color signature beyond the yellow/navy binary.
- **Border** (`{colors.border}` — rgba(232,216,92,0.20)): Hairline border color — yellow at 20% opacity. Used on chrome bars, stat dividers, image placeholders.

### Defaults

- **Default surface**: `{colors.navy}` — every slide.
- **Default primary text color**: `{colors.yellow}`.
- **Default secondary text color**: `{colors.yellow-2}` (yellow at 62% opacity).
- **Default tertiary text color**: `{colors.yellow-3}` (yellow at 32%).
- **Default emphasis color (inside headlines)**: `{colors.emphasis-yellow}` — applied to `<em>` tags inside `display`, `h1`, `h2` (the emphasis renders roman non-italic in this brighter yellow, providing the system's `<em>` mechanism).
- **Default kicker / pin-note / accent rule color**: `{colors.teal}`.
- **Default large-graphic accent color**: `{colors.teal}` — used for the quote-mark glyph specifically.
- **Default border**: `{colors.border}` — yellow at 20% opacity. Hairline only.

There is no semantic mapping between colors. Teal is not "warning," yellow is not "highlight." Yellow is just the type; teal is the annotation voice; emphasis-yellow is just the emphasis flag. The palette is small enough that semantic roles aren't necessary.

## Typography

### Font Family

Vellum runs **three families** in carefully separated roles:

- **Cormorant Garamond** (`{typography.display.fontFamily}`) — an old-style serif with a beautifully expressive italic axis. Carries every headline (display through h3), every numeral (stat-value), every featured serif moment, the quote-text, and the quote-mark glyph. The headline tokens specify `fontStyle: italic` — italic is the default presentation, not an emphasis variant. Weight is 400 (regular) on display/h1/h2/quote-text; weight 500 on h3. Italic Cormorant Garamond at display scale against the periwinkle field is the system's defining visual moment.
- **DM Sans** (`{typography.body.fontFamily}`) — a clean humanist grotesque. Carries body, lead paragraphs, and bullet body text. DM Sans recedes behind the personality type — it's the substance, not the voice.
- **Courier Prime** (`{typography.label.fontFamily}`) — a typewriter-style monospace. Carries every chrome label, every slide counter, the pin-note in the bottom-left corner of every slide, list counter markers, and stat labels. Mono is the "typed-note voice" — it gives the system its archival/exhibition register.

The emotional split: italic serif for the personal essay voice (headlines, quotes); sans for the supporting substance (body); mono for the typed annotation (pin-notes, chrome). The mix of italic-serif + typed-mono is unusual and is the system's most distinctive typographic combination.

### Type Scale

| Token | Size | Family | Weight | Style | Use |
|---|---|---|---|---|---|
| `{typography.display}` | 11vw | Cormorant Garamond | 400 | italic | Cover hero at maximum scale |
| `{typography.h1}` | 7vw | Cormorant Garamond | 400 | italic | Chapter or statement headline |
| `{typography.quote-mark}` | 7vw | Cormorant Garamond | 400 | italic | Decorative opening quote glyph (in teal) |
| `{typography.stat-value}` | 5.5vw | Cormorant Garamond | 400 | italic | Large italic serif stat numeral |
| `{typography.h2}` | 4vw | Cormorant Garamond | 400 | italic | Primary slide headline |
| `{typography.quote-text}` | 3.2vw | Cormorant Garamond | 400 | italic | Pull-quote body |
| `{typography.h3}` | 2.4vw | Cormorant Garamond | 500 | italic | Sub-headline, compare panel title |
| `{typography.lead}` | 1.5vw | DM Sans | 400 | upright | Lead paragraph, intro sentence |
| `{typography.pin-note}` | 1.15vw | Courier Prime | 500 | upright | Pin-annotation text (in teal), bar-val accent |
| `{typography.bar-val}` | 1.1vw | Courier Prime | 400 | upright | Chart bar value label |
| `{typography.body}` | 1.05vw | DM Sans | 400 | upright | Default body paragraph |
| `{typography.caption}` | 0.85vw | DM Sans | 400 | upright | Caption, secondary text |
| `{typography.label}` | 0.72vw | Courier Prime | 400 | upright | Chrome label, slide counter, kicker, stat-label |

### Defaults

- **Default size for a primary section headline**: `{typography.h2}` (4vw).
- **Default size for a chapter or statement headline**: `{typography.h1}` (7vw).
- **Default size for a cover hero**: `{typography.display}` (11vw).
- **Default size for body paragraph**: `{typography.body}` (1.05vw).
- **Default size for a lead sentence**: `{typography.lead}` (1.5vw).
- **Default size for any chrome label, kicker, or mono metadata**: `{typography.label}` (0.72vw).
- **Default size for the pin-note**: `{typography.pin-note}` (1.15vw).
- **Default size for a statistical numeral**: `{typography.stat-value}` (5.5vw italic).
- **Default headline weight**: 400 italic.
- **Default headline color**: `{colors.yellow}`.

When unsure between sizes, lean larger. Vellum is sparse — the headline often is the slide, so it should be sized to anchor the empty field around it.

### Signature Treatments

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

- **Every headline is italic Cormorant Garamond at weight 400** (h3 is the exception at weight 500, still italic). Roman (non-italic) serif at display scale does not exist in this system except as `<em>` emphasis.
- **An `<em>` tag inside an italic headline (`display`, `h1`, `h2`) renders as upright roman Cormorant Garamond at weight 600 in `{colors.emphasis-yellow}`.** This is the system's emphasis mechanism — the inversion of italic to roman, plus the color shift, is non-negotiable. It is opposite the conventional "italic for emphasis" pattern; here, italic is the default and roman is the emphasis.
- **Every slide carries a pin-annotation in the bottom-left corner.** The pin-annotation is a stack of Courier Prime mono lines in `{colors.teal}` — typically a slide counter (e.g., "03 / 09") plus 1–2 short pin notes (label, attribution, or phrase). The pin-annotation is positioned absolute at `bottom: ~0.9 * pad-y`, `left: pad-x`, with max-width 22vw. A slide without a pin-annotation reads as a different system.
- **The pin-note typography uses Courier Prime at weight 500 in `{colors.teal}`** with letter-spacing 0.01em. Substituting any other face or color breaks the annotation register.
- **Kickers use Courier Prime mono at label size in `{colors.teal}`.** Sans kickers, italic kickers, or yellow kickers break the kicker convention.
- **The large quote-mark glyph (7vw italic Cormorant Garamond) renders in `{colors.teal}`, not yellow.** The teal quote mark is the only place a large-scale graphic is colored teal; everywhere else teal appears in small text (label-size).
- **Bullet-lists use a numbered counter rendered in Courier Prime mono at label size in `{colors.teal}`** — never bullet dots, never em-dashes. The numbered convention is the system's list signature.
- **Content is centered** on every layout (text-align: center, items aligned center on flex columns). Left-aligned headlines break the gallery-wall pinned-essay register.

### Typography Principles

The face ladder is fixed: italic serif (Cormorant Garamond italic) for headlines, numerals, quotes, and any personality moment; sans (DM Sans) for body and lead; mono (Courier Prime) for chrome, pin-notes, kickers, and list counters. Crossing the rails (e.g., using italic serif for body, or sans for headlines) breaks the gallery-wall register.

Italic is structural, not emphatic. Headlines default to italic; emphasis is achieved by switching to roman at weight 600 in `{colors.emphasis-yellow}`. This inverted pattern is the system's most distinctive typographic move.

Line-height runs tight at display scale (0.92 on display, 0.95 on h1) and opens to 1.5–1.65 on body. Letter-spacing on display is slightly negative (–0.01em); body and label are nearly neutral. Mono labels carry 0.06em tracking; pin-notes carry 0.01em (tighter than chrome labels).

Bold within body is not used. Underline is not used. Emphasis inside body text is achieved by the same roman-in-emphasis-yellow pattern as inside headlines — switch font-style from italic to upright at a heavier weight in the brighter yellow.

## Layout

### Canvas System

Vellum targets `100vw × 100vh` — full viewport. Each `.slide` flexes to fill the viewport exactly, and slides sit side-by-side in a horizontal strip. All sizes use viewport-relative units (`vw`, `vh`) so layout scales fluidly.

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-x}` | 6vw | Horizontal slide padding |
| `{spacing.pad-y}` | 6vh | Vertical slide padding |
| `{spacing.gap-lg}` | 5vh | Between major content sections |
| `{spacing.gap-md}` | 3vh | Between related elements |
| `{spacing.gap-sm}` | 1.5vh | Between tightly coupled elements |

Quote slides use 1.2× pad-y and 1.4× pad-x to give the centered quote extra breathing room. Compare layouts override slide padding to 0 because each panel carries its own internal padding.

### Chrome Frame

Standard slides carry chrome and foot bars (1px hairlines at 20% yellow opacity with mono labels). Chromeless layouts include cover, statement, quote, end, and any slide where the content is meant to float without structural framing — most of the deck.

The system's universal chrome element is the **pin-annotation in the bottom-left corner**, present on every slide regardless of whether the slide carries chrome/foot bars. The pin-annotation is the system's persistent identification mark.

### Content Centering

Every slide layout centers its content. Cover, statement, quote, end use `align-items: center; justify-content: center` with `text-align: center`. List, stats, chart use a centered body container at 60–80% width. Compare splits into two equal panels with each panel's content vertically centered.

Content rarely fills more than 70% of the canvas width or 60% of the canvas height. The remaining navy field is the pinned-wall context.

## Depth and Elevation

Vellum is **completely flat**. There are no drop shadows. No rounded corners. No gradients. No elevation system whatsoever.

What looks like differentiation comes from:
- **Color shifts within the navy family** — `{colors.navy-deep}` and `{colors.navy-mid}` on compare panels create a subtle two-shade pairing.
- **Hairline borders at 20% yellow opacity** — visible but quiet structural marks.
- **Opacity tiers in yellow** — the three opacity tiers (full, 62%, 32%) provide enough text-color contrast to create hierarchy without introducing additional colors.

The system is intentionally still. There is no motion (slide and entrance animation durations are set to 0). There is no shadow elevation. Slides are meant to be read like pages in a folio — one at a time, with no transition.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 0 | Everything except navigation dots |
| 50% (circle) | Nav dots (deck-stage chrome only, not slide content) |

Vellum has **no rounded chrome**. Cards, panels, stat tiles, image placeholders, compare panels — all strict rectangles. The only round shapes are the deck navigation dots, which are part of the deck-stage UI rather than slide content.

### Border Weights

- **1px solid** in `{colors.border}` (yellow at 20% opacity) — the universal hairline. Used on chrome bars, foot bars, stat dividers, chart baselines, compare-panel left edges.
- **1px dashed** in `{colors.border}` — used on the image placeholder frame (the dashed border marks "this is a slot").
- **1px solid** at slightly higher opacity (rgba(232,216,92,0.18)) — used on the compare panel left/right divider.

There are no heavier borders in the system. Every line is 1px.

### Decorative Element Types

**Italic display headline** — Cormorant Garamond italic at weight 400, 4–11vw, centered on the slide in `{colors.yellow}`. The headline is the dominant visual element of every content slide.

**Pin-annotation** — a stack of 1–3 Courier Prime mono lines in `{colors.teal}`, positioned absolute at the bottom-left corner of every slide. Lines typically include a slide counter (e.g., "04 / 09"), a short typed label, and an optional second pin phrase. Lines stack with 0.3vh gap, max-width 22vw. This is the system's signature.

**Teal quote-mark glyph** — a 7vw italic Cormorant Garamond `"` in `{colors.teal}`, centered above a centered pull-quote. The only large-scale teal element in the system.

**Kicker** — Courier Prime mono at label size (0.72vw) in `{colors.teal}`, with 0.1em letter-spacing. Sits above a headline.

**28px accent rule** — a 28px × 1px horizontal bar in `{colors.teal}`. Used as a small kicker separator or chapter accent.

**Numbered list** — uses CSS `counter-reset: list-counter; counter-increment: list-counter` to render numbers in Courier Prime mono at label size in `{colors.teal}`, with a 2em column for the number and 0.5em gap to the body text (DM Sans lead).

**Pin-stat** — a centered column containing an italic serif stat numeral (5.5vw) above a mono caption in muted yellow. In a row, pin-stats are separated by single 1px hairlines at 20% yellow opacity; the last stat in row drops the border.

**Compare panel pair** — two side-by-side panels filling the slide. Left panel: `{colors.navy-deep}` background. Right panel: `{colors.navy-mid}` background with a 1px left-border. Each panel contains a small mono compare-label in `{colors.yellow-2}`, an italic h3, an italic lead, and a numbered list.

**Image placeholder** — a 1px-dashed rectangle in `{colors.border}` with a faint navy interior, centered Courier Prime mono label, minimum 28vh height. The dashed border is the "slot" indication.

**Chart bar** — a flat vertical rectangle in `{colors.yellow-3}` (default) or `{colors.yellow}` (accent). Bar values render in Courier Prime mono (`{typography.bar-val}`).

## Do's and Don'ts

### Do

- Fill every slide with `{colors.navy}` — the monochromatic field is the constant. There is no light alternate.
- Render every headline in italic Cormorant Garamond at weight 400, in `{colors.yellow}`. The italic serif at display scale is the system's identity.
- Place a pin-annotation in the bottom-left corner of every slide — Courier Prime mono in `{colors.teal}`, 1.15vw, max-width 22vw. The pin-annotation is the system's persistent signature.
- Use `<em>` inside headlines as upright roman (non-italic) at weight 600 in `{colors.emphasis-yellow}`. This italic-to-roman emphasis pattern is non-negotiable.
- Color kickers, list counter markers, the 28px rule, and the large quote-mark glyph in `{colors.teal}`. Teal is the second accent and appears only in those specific contexts.
- Center content on every slide. Text-align center, items aligned center. Left-aligned headlines break the pinned-essay register.
- Use Courier Prime mono for chrome labels, slide counters, pin-notes, list counter markers, and bar values. Mono is the typed-annotation voice.
- Number bullet lists with Courier Prime mono counters in `{colors.teal}`. Bullet dots and em-dashes do not exist in this system.
- Leave generous empty navy field around every content block. Sparse is the correct register.
- Pad slides with `{spacing.pad-x}` 6vw and `{spacing.pad-y}` 6vh, increasing 1.2–1.4× on quote slides.

### Don't

- Don't introduce a second background color. The navy field is the single surface. Even compare layouts use two near-identical navy shades, not contrasting backgrounds.
- Don't render headlines in upright roman. Italic at display scale is the default; roman appears only as the `<em>` emphasis mechanism.
- Don't add drop shadows, rounded corners, or gradients. The system is severely flat.
- Don't use yellow on the quote-mark glyph or as a kicker color. Those moments are teal; substituting yellow flattens the teal-as-accent role.
- Don't use bullet dots or em-dashes. Lists are numbered with Courier Prime mono counters in teal.
- Don't motion the slides. The deck is intentionally still — slide transitions and entrance animations are both 0 duration.
- Don't omit the pin-annotation. It is on every slide — chromeless or chromed — and removing it breaks the system's signature.
- Don't introduce a third typeface. The three families (Cormorant Garamond italic, DM Sans, Courier Prime) are the entire stack.
- Don't render small text in italic serif. Italic is for display scale only; body and caption stay upright sans.
- Don't crowd slides edge-to-edge. The empty navy field is structural — sparse content centered with breathing room above and below is the register.

## Responsive Behavior

Vellum targets a 1920×1080 viewport and uses viewport-relative units (`vw`, `vh`) throughout, so layout scales fluidly between 1280×720 and 2560×1440. There are no media queries and no fixed-pixel sizes except deck-chrome dots and the pin-annotation positioning offsets (which are pad-relative and scale with the slide padding).

### Scaling Behavior

- Display headline scales: 11vw → ~211px at 1920px viewport, ~141px at 1280px.
- Body text scales: 1.05vw → ~20px at 1920px, ~13px at 1280px.
- Pin-annotation positioning is relative to `pad-y` and `pad-x`, so it scales with slide padding.

### Presenter Behavior

The deck is JS-driven, but slide transitions are zero-duration (the system is intentionally still). Slides sit side-by-side and navigate via the deck-stage's translateX, but the user perceives instant cuts rather than animated transitions. There is no entrance animation system — `[data-anim]` attributes have no associated keyframes because animation durations are 0.

Nav dots and a slide counter sit fixed at the bottom of the viewport.

### Print Behavior

There is no embedded print stylesheet. Static export depends on the deck container being unwound for sequential page rendering.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face (default) | Chinese face | Weight | Notes |
|---|---|---|---|---|
| Display / h1 / h2 / quote-text / stat-value | Cormorant Garamond italic 400 | 霞鹜文楷 LXGW WenKai (LXGW WenKai TC) | 400 | LXGW WenKai's hand-written kaiti warmth mirrors Cormorant's italic personality — the only CJK face on CDN that carries an italic-like personal register. |
| h3 | Cormorant Garamond italic 500 | 霞鹜文楷 LXGW WenKai | 400 | Single-weight kaiti; the visual step from h2 to h3 must come from size, not weight. |
| Quote-mark glyph (7vw, teal) | Cormorant Garamond italic 400 | LXGW WenKai 400 or `「`/`『` in NSC | 400 | For Chinese quotes, replace `"` with `「` (full-width corner bracket) in LXGW WenKai or NSC at the same teal color. |
| Body / lead | DM Sans 400 | 思源宋体 / Noto Serif SC | 400 | The system body switches from sans to serif in CJK to preserve the literary register — DM Sans beside kaiti reads as a textbook in Chinese. |
| Pin-note / kicker / chrome label / list counter | Courier Prime 400–500 | Courier Prime + Noto Sans Mono CJK SC fallback | 400–500 | Pin-notes are usually in Latin; if Chinese appears, fall back to Noto Sans Mono CJK SC. The teal color is preserved. |

### Mixed-Content Strategy

This template uses **Strategy C (literary)**: keep the Latin face for English glyphs and let the CJK fallback in only when a Chinese character appears, via a stacked `font-family`. Cormorant Garamond italic is Vellum's defining brand identity — replacing it with a kaiti for every headline strips the system of its italic-serif-against-periwinkle moment. Letting Latin stay in Cormorant italic while Chinese drops into LXGW WenKai preserves both registers.

```css
font-family: 'Cormorant Garamond', 'LXGW WenKai TC', 'Noto Serif SC', Georgia, serif;  /* headlines */
font-family: 'DM Sans', 'Noto Serif SC', system-ui, sans-serif;                         /* body */
font-family: 'Courier Prime', 'Noto Sans Mono CJK SC', 'Courier New', monospace;        /* pin-note / chrome */
```

**Warning — baseline mismatch at display sizes.** Cormorant Garamond italic's optical center sits below LXGW WenKai's optical center, especially at 11vw display and 7vw h1. A phrase like `Vellum 羊皮纸` will show the Chinese characters floating slightly high relative to the italic Latin baseline. Mitigations:
- Add `font-feature-settings: "palt"` on the Chinese segment to tighten metrics.
- Wrap CJK in a `<span lang="zh">` with a `vertical-align: -0.05em` adjustment on display tokens (display, h1, h2, quote-text, stat-value). The italic Latin's slope makes the baseline mismatch more visible than in upright pairings, so the offset may need to be slightly larger than in non-italic systems.
- For pure-CJK headlines (no Latin), the issue disappears entirely.

### Loading

Add to `<head>` (Google Fonts hosts LXGW WenKai TC, Noto Serif SC, and Courier Prime):

```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=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=DM+Sans:wght@400;500&family=Courier+Prime:wght@400;700&family=LXGW+WenKai+TC&family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
```

LXGW WenKai TC is the Traditional Chinese cut on Google Fonts; it includes the full CJK Unified Ideographs range and renders Simplified Chinese cleanly. Noto Serif SC carries body text in Simplified Chinese with proper hinting. The Cormorant italic axis stays as-is for Latin.

### Universal CJK Adjustments

Apply on any element rendering Chinese content (typically scope via `:lang(zh)` or `<span lang="zh">`):

- **Line-height**: body 1.75–1.85 (Vellum's 1.65 DM Sans-default is close, but bump for CJK strokes); display 1.15–1.25 (looser than Latin 0.92–1.05 because CJK glyphs at 7–11vw need vertical breathing).
- **Letter-spacing**: 0 on CJK. Vellum's negative tracking (-0.01 to -0.02em) on display Latin is wrong for Chinese — CJK glyphs are pre-spaced; negative tracking causes overlap.
- **Text-transform**: no uppercase on CJK. Vellum doesn't use uppercase on Latin either (italic serif is sentence case throughout), so this is just confirming no parent rule attempts it.
- **Full-width punctuation**: use `，。：；！？` (full-width) not `,.:;!?` (half-width). For Chinese quotes, replace `"…"` with `「…」` or `『…』` (full-width corner brackets) — these are the conventional Chinese quote glyphs and match the teal quote-mark treatment of the system.
- **No period on display headlines**: Chinese headlines drop the terminal `。` — the headline's visual closure is enough.
- **Pangu spacing (盘古之白)**: insert a thin space between CJK and adjacent Latin/numerals. Write `使用 Claude` not `使用Claude`; `2024 年` not `2024年`. This is editorial convention in good Chinese typography and matches Vellum's careful gallery-wall register.
- **One font per sentence**: don't mix LXGW WenKai and Noto Serif SC inside a single line. Use one or the other for the entire run; switching mid-sentence creates a metric jolt that's especially visible in this sparse, centered layout.

### Aesthetic Notes for This System

LXGW WenKai is an excellent match for Vellum's gallery-essay register. The kaiti's hand-written warmth is closely related to Cormorant Garamond italic's intimate personal voice — both faces read as personal, considered, slightly intimate. Against the deep periwinkle field in warm chartreuse-yellow, LXGW WenKai at 7–11vw display reads as **handwritten chartreuse on a gallery wall** — arguably more poetic in Chinese than the original Cormorant treatment in English. The kaiti's stroke modulation pairs naturally with the yellow's warmth.

The `<em>` emphasis mechanism (italic → upright roman in `{colors.emphasis-yellow}` at weight 600) does not translate to CJK because LXGW WenKai has no separate italic/roman pair. The CJK equivalent for emphasis is to switch to **NSC 700 in `{colors.emphasis-yellow}`** — a heavier weight + brighter color creates the same "this is the moment" signal. Keep the upright-not-italic inversion logic by ensuring the emphasis weight differs visibly from the kaiti regular.

The pin-annotation (Courier Prime mono in teal, bottom-left corner) is the system's signature and works without modification in mixed-script decks. For pure-Chinese pin-notes, fall back to Noto Sans Mono CJK SC — the typewriter texture is partially preserved (mono spacing) but the typewriter character is lost. Consider keeping pin-notes in Latin (dates, slide counters, studio names) even on Chinese decks; this is conventional in Chinese gallery exhibition design and feels deliberate rather than incomplete.

The numbered-list convention (Courier Prime counters in teal) translates directly — use `01.` `02.` `03.` numerals from Courier Prime rather than Chinese numerals (`一、` `二、`) to preserve the typed-annotation register. The teal color and 2em column width are unchanged.

### Known CJK Gap

- LXGW WenKai has only a single weight (regular). The system's h3 (weight 500 italic) cannot step up in weight in CJK — the visual hierarchy step must come from size alone (h2 4vw → h3 2.4vw). For decks that need stronger sub-headline emphasis, consider NSC 500 as an h3 alternate.
- LXGW WenKai has no italic axis. Vellum's defining italic-as-default convention is impossible to reproduce in CJK — the upright kaiti is the closest analogue, which sacrifices the system's italic register for an alternate "handwritten warmth" register. This is the largest aesthetic loss in CJK adaptation.
- The italic-to-roman `<em>` emphasis mechanism does not exist in CJK. Substitute with NSC 700 in `{colors.emphasis-yellow}` for the equivalent "emphasis flag" effect.
- LXGW WenKai TC's Traditional-cut glyphs may render a small number of characters with Traditional forms (e.g., 設 instead of 设). For pure Simplified Chinese decks, prefer `font-family: 'Noto Serif SC'` as the primary CJK face and reserve LXGW WenKai for accent moments (cover title, chapter titles).
- The teal quote-mark glyph (`"` at 7vw in `{colors.teal}`) does not exist in CJK conventions. Use `「` or `『` (full-width corner bracket) at the same 7vw size in teal — this is the correct Chinese equivalent and preserves the system's "teal quote moment" signal.
- Baseline mismatch at display sizes (see Mixed-Content Strategy) is more pronounced in italic-Latin + upright-CJK pairings than in upright-upright pairings. Per-deck tuning is required for mixed-script covers.

## Iteration Guide

1. Any new headline uses italic Cormorant Garamond at weight 400 in `{colors.yellow}`. Italic is the default, not the emphasis.
2. Any emphasized phrase inside a headline switches to upright roman at weight 600 in `{colors.emphasis-yellow}`. The italic-to-roman inversion is the system's `<em>` mechanism.
3. Every new slide must include a pin-annotation in the bottom-left corner. The pin-annotation contains 1–3 lines of Courier Prime mono in `{colors.teal}`: typically a slide counter plus one or two short typed phrases.
4. Any new kicker, list counter marker, or 28px accent rule uses `{colors.teal}`. Teal is the second accent and is reserved for these specific elements.
5. Any new list is numbered with Courier Prime mono counters in teal. Dot and dash bullets do not exist in this system.
6. Any new layout centers its content. Text-align center, items aligned center. Left-aligned layouts break the gallery register.
7. Any new background introduces a system break — there is only one surface color, `{colors.navy}`. Compare layouts use slight navy variants but do not introduce a different hue.
8. Any new font is forbidden. Cormorant Garamond, DM Sans, Courier Prime are the entire stack.
9. Any new chart, table, or data display uses 1px hairlines at 20% yellow opacity. No heavier borders, no shadows, no rounded chrome.
10. Content density should be low and centered. If a slide feels crowded, remove content rather than adjusting padding or shrinking text.

## Known Gaps

- The three font families (Cormorant Garamond, DM Sans, Courier Prime) load from Google Fonts. If fonts fail, fallbacks are Georgia (for the italic serif), system-ui (for sans), and Courier New (for mono). The system loses much of its character without Cormorant italic — Georgia italic substitutes acceptably but with different proportions.
- Chinese fallbacks (Noto Serif SC, Noto Sans SC) are wired into the stacks but Noto Serif SC has no true italic — Chinese italic headlines will fall back to upright Noto Serif SC, losing the system's defining italic moment.
- The `.light` class is preserved for backwards compatibility but renders identically to `.dark` (both use the navy field). The `.light` token aliases (`--c-bg-light`, `--c-fg-light`) are pointed at the dark tokens.
- Animation durations are set to 0 — the system is intentionally still. The animation keyframes and `[data-anim]` infrastructure exist in the engine but are no-ops in Vellum. Re-enabling motion would require changing `--dur-slide` and `--dur-enter` in the token block.
- The pin-annotation positioning uses `bottom: calc(var(--pad-y) * 0.9)` which is just slightly inside the pad-y boundary; at very small viewports the pin-note may approach the slide edge.
- The compare panel uses two near-identical navy shades (`{colors.navy-deep}` and `{colors.navy-mid}`) — at low-contrast displays or in heavy ambient light, the panel split may be hard to perceive.
- The teal accent color (`{colors.teal}` — #3A7878) is desaturated and may read as a muted blue rather than a teal on some displays.
- The system has no light theme, no inversion, and no alternate surface. Decks that require a "reset" slide (a different color background to break a long sequence) must either accept the monochromatic limitation or step outside the design system.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.center` — 1·2·3·6장 — 예: `<div class="center cov">`
- `.cov` — 1장 — 예: `<div class="center cov">`
- `.gl` — 1장 — 예: `<p class="kick gl">`
- `.kick` — 1·2·3·4·5·6장 — 예: `<p class="kick">`
- `.pin` — 1·2·3·4·5·6장 — 예: `<div class="pin">`
- `.rule` — 1·2·3·5·6장 — 예: `<i class="rule">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.bt` — 2·5·6장 — 예: `<button class="bt" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.col2` — 2장 — 예: `<div class="col2">`
- `.d` — 2·4·5·6장 — 예: `<span class="d">`
- `.ghost` — 2·5·6장 — 예: `<button class="bt ghost" data-act="reset">`
- `.hd` — 2·3·6장 — 예: `<h2 class="hd">`
- `.hdr` — 2·3·6장 — 예: `<div class="center hdr">`
- `.img` — 2장 — 예: `<figure class="img">`
- `.ld2` — 2장 — 예: `<p class="lead ld2">`
- `.lead` — 2장 — 예: `<p class="lead ld2">`
- `.n` — 2·3·4·5·6장 — 예: `<figcaption class="n">`
- `.nl` — 2·4·5·6장 — 예: `<ol class="nl">`
- `.t` — 2·5·6장 — 예: `<b class="t">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.bar` — 3장 — 예: `<i class="bar" style="height:63%">`
- `.bv` — 3장 — 예: `<span class="n bv">`
- `.chart` — 3장 — 예: `<div class="chart">`
- `.col` — 3장 — 예: `<div class="col">`
- `.mx` — 3·6장 — 예: `<div class="col mx">`
- `.plot` — 3장 — 예: `<div class="plot">`
- `.ps` — 3장 — 예: `<div class="ps">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.sv` — 3장 — 예: `<b class="sv">`
- `.tm` — 3장 — 예: `<div class="vr tm">`
- `.vr` — 3장 — 예: `<div class="vr tm">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.dk` — 4·5장 — 예: `<div class="panel dk p4">`
- `.l4` — 4장 — 예: `<ol class="nl sm l4">`
- `.md` — 4·5장 — 예: `<div class="panel md p4">`
- `.p4` — 4장 — 예: `<div class="panel dk p4">`
- `.panel` — 4·5장 — 예: `<div class="panel dk p4">`
- `.ph` — 4·5장 — 예: `<h3 class="ph">`
- `.qm` — 4장 — 예: `<span class="qm">`
- `.quote` — 4장 — 예: `<div class="quote">`
- `.sm` — 4·6장 — 예: `<ol class="nl sm">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`
- `.tt` — 4장 — 예: `<span class="tt">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<ol class="nl bl">`
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<ol class="nl opts">`
- `.p5` — 5장 — 예: `<div class="panel dk p5" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong=…`
- `.wl` — 5장 — 예: `<p class="kick wl">`
- `.words` — 5장 — 예: `<p class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="d6 a">`
- `.b` — 6장 — 예: `<div class="d6 b">`
- `.br6` — 6장 — 예: `<div class="br6" id="vl-bar">`
- `.c` — 6장 — 예: `<div class="d6 c">`
- `.d6` — 6장 — 예: `<div class="d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.em6` — 6장 — 예: `<p class="em6" id="vl-em">`
- `.g6` — 6장 — 예: `<ol class="nl g6">`
- `.pn6` — 6장 — 예: `<div class="pn6" id="vl-pin">`
- `.sl6` — 6장 — 예: `<p class="kick sl6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="vellum">
<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=Cormorant+Garamond:ital,wght@0,600;1,400;1,500&family=DM+Sans:wght@400;500&family=Courier+Prime:wght@400;700&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/vellum.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide">
  <div class="center cov">
    <p class="kick">초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</p><i class="rule"></i>
    <p class="unit">계절의 변화<span>Sun, Shadow & <em>Temperature</em></span></p>
    <p class="kick gl">학습 목표</p>
    <h1 class="t1">하루 동안 <em>태양 고도</em>,<br><em>그림자 길이</em>, <em>기온</em>의 관계</h1>
  </div>
  <div class="pin"><span>01 / 06</span><span>pinned — 00초등학교</span><span>2026</span></div>
</section>
<section class="slide" data-steps="4">
  <div class="center hdr"><p class="kick">측정 준비</p><i class="rule"></i><h2 class="hd">태양 고도 <em>측정기</em> 만들기</h2></div>
  <figure class="img"><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg><figcaption class="n">fig. 01 — 태양 고도 측정기</figcaption></figure>
  <div class="col2">
    <ol class="nl"><li data-s="1"><span class="n">01</span><span><b class="t">자 붙이기</b><span class="d">우드록 한쪽에 양면테이프로 자를 붙여요</span></span></li><li data-s="2"><span class="n">02</span><span><b class="t">수수깡 꽂기</b><span class="d">수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</span></span></li><li data-s="3"><span class="n">03</span><span><b class="t">실 묶기</b><span class="d">수수깡 끝에 실을 묶어요</span></span></li><li data-s="4"><span class="n">04</span><span><b class="t">각도기 끼우기</b><span class="d">실의 다른 끝을 각도기 가운데 구멍에 끼워요</span></span></li></ol>
    <div class="btns"><button class="bt" data-act="step">다음 단계 →</button><button class="bt ghost" data-act="reset">처음부터</button></div>
    <p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p>
  </div>
  <p class="lead ld2"><em>태양 고도</em> — 태양이 지표면과 이루는 각. 막대기의 그림자와 실이 이루는 각 = 태양 고도</p>
  <div class="pin"><span>02 / 06</span><span>측정 준비</span><span>버튼 규칙 없음 → 노랑 칸으로 표현</span></div>
</section>
<section class="slide">
  <div class="center hdr"><p class="kick">측정 결과</p><i class="rule"></i><h2 class="hd">하루 동안 무엇이 <em>어떻게</em> 변할까요?</h2></div>
  <div class="stats"><div class="ps"><b class="sv">12:30</b><span class="n">남중 시각</span><p>태양 고도가 가장 높아요</p></div><div class="ps"><b class="sv">정남</b><span class="n">남중 방향</span><p>남중할 때 태양의 위치</p></div><div class="ps"><b class="sv">14:30</b><span class="n">최고 기온</span><p>기온이 가장 높아요</p></div><div class="ps"><b class="sv">9:30</b><span class="n">가장 긴 그림자</span><p>그림자가 가장 길어요</p></div></div>
  <div class="chart">
    <div class="plot"><div class="col"><span class="n bv">38°</span><i class="bar" style="height:63%"></i></div><div class="col"><span class="n bv">48°</span><i class="bar" style="height:80%"></i></div><div class="col"><span class="n bv">55°</span><i class="bar" style="height:92%"></i></div><div class="col mx"><span class="n bv">57°</span><i class="bar" style="height:95%"></i></div><div class="col"><span class="n bv">54°</span><i class="bar" style="height:90%"></i></div><div class="col"><span class="n bv">47°</span><i class="bar" style="height:78%"></i></div><div class="col"><span class="n bv">37°</span><i class="bar" style="height:62%"></i></div></div>
    <div class="vr tm"><span>9:30</span><span>10:30</span><span>11:30</span><span>12:30</span><span>13:30</span><span>14:30</span><span>15:30</span></div>
    <div class="vr"><span class="n">그림자 길이(cm)</span><span>12.9</span><span>9.1</span><span>7</span><span>6.4</span><span>7.2</span><span>9.4</span><span>13.4</span></div>
    <div class="vr"><span class="n">기온(℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div>
  </div>
  <div class="pin"><span>03 / 06</span><span>태양 고도(°) · 예시 값</span><span>예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span></div>
</section>
<section class="slide">
  <div class="panel dk p4"><p class="kick">a · high</p><h3 class="ph">태양 고도가 높을 때</h3><ol class="nl sm"><li><span class="n">01</span><span class="d">그림자 길이는 짧아져요</span></li><li><span class="n">02</span><span class="d">기온은 높아져요</span></li></ol></div><div class="panel md p4"><p class="kick">b · low</p><h3 class="ph">태양 고도가 낮을 때</h3><ol class="nl sm"><li><span class="n">01</span><span class="d">그림자 길이는 길어져요</span></li><li><span class="n">02</span><span class="d">기온은 낮아져요</span></li></ol></div>
  <div class="tbl"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span class="tt">오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span class="tt">낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span class="tt">오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div>
    <ol class="nl sm l4"><li><span class="n">남중 01</span><span class="d">태양이 정남쪽에 있을 때 '남중했다'고 해요</span></li><li><span class="n">남중 02</span><span class="d">이때의 태양 고도를 남중 고도라고 해요</span></li></ol></div>
  <div class="quote"><span class="qm">“</span><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 <em>차이</em>가 있어요.</p><span class="n">— 오늘의 정리</span></div>
  <div class="pin"><span>04 / 06</span><span>관계 정리</span><span>표 규칙 없음 → 1px 헤어라인 줄으로 표현</span></div>
</section>
<section class="slide">
  <div class="panel dk p5" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <p class="kick">question</p><i class="rule"></i>
    <h3 class="ph">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <ol class="nl opts"><li><button class="opt" data-opt="0"><span class="n">01</span><span class="t">오전 9시 30분</span></button></li><li><button class="opt" data-opt="1"><span class="n">02</span><span class="t">낮 12시 30분 무렵</span></button></li><li><button class="opt" data-opt="2"><span class="n">03</span><span class="t">오후 3시 30분</span></button></li></ol>
    <p class="fb" data-fb></p>
    <button class="bt ghost" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="panel md p5">
    <p class="kick">빈칸을 눌러 확인해요</p><i class="rule"></i>
    <ol class="nl bl"><li><span class="n">01</span><span class="d"><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</span></li><li><span class="n">02</span><span class="d"><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</span></li><li><span class="n">03</span><span class="d"><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</span></li></ol>
    <p class="kick wl">오늘의 낱말</p>
    <p class="words">태양 고도 · 남중 고도 · 그림자 길이 · 기온</p>
  </div>
  <div class="pin"><span>05 / 06</span><span>배운 내용을 확인해 볼까요?</span><span>빈칸 규칙 없음 → 노랑 밑줄 칸으로 표현</span></div>
</section>
<section class="slide">
  <div class="center hdr"><p class="kick">디자인 안내</p><i class="rule"></i><h2 class="hd">이 디자인 사용 <em>설명서</em></h2></div>
  <ol class="nl g6"><li><span class="n">01</span><span><b class="t">한눈에</b><span class="d">벽에 꽂아 둔 에세이. <b>깊은 페리윙클 한 바탕 + 샤르트뢰즈 노랑 글자</b>, 내용은 언제나 가운데 — 그림자·둥근 모서리·움직임 없이.</span></span></li><li><span class="n">02</span><span><b class="t">색</b><span class="d"><span class="sw6"><span><i style="background:#2A3870"></i>페리윙클</span><span><i style="background:#E8D85C"></i>노랑 글자</span><span><i style="background:#F5E168"></i>밝은 노랑(em)</span><span><i style="background:#5A9A98"></i>청록(핀·킥커)</span></span></span></span></li><li><span class="n">03</span><span><b class="t">글꼴</b><span class="d">제목·숫자 Cormorant Garamond 이탤릭 → Cafe24 Oneprettynight<br>본문 DM Sans → 프리텐다드 Pretendard-Light · 메모 Courier Prime</span></span></li><li><span class="n">04</span><span><b class="t">이렇게 쓰면 좋아요</b><span class="d">시·글 감상, 한 문장을 오래 바라보는 수업. 장마다 문장 하나를 가운데에 크게.</span></span></li></ol>
  <p class="kick sl6">대표 장치 — 눌러 보세요</p>
  <div class="d6 a"><div class="dh"><h3>em 뒤집기</h3><button class="bt ghost sm" data-demo="#vl-em" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p class="em6" id="vl-em">the <span>shortest</span> shadow</p></div>
  <div class="d6 b"><div class="dh"><h3>노랑 막대 하나</h3><button class="bt ghost sm" data-demo="#vl-bar" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="br6" id="vl-bar"><i class="" style="height:20.8px"></i><i class="" style="height:46.800000000000004px"></i><i class="" style="height:65px"></i><i class="mx" style="height:70.2px"></i><i class="" style="height:62.400000000000006px"></i><i class="" style="height:44.2px"></i><i class="" style="height:18.2px"></i></div></div>
  <div class="d6 c"><div class="dh"><h3>핀 메모</h3><button class="bt ghost sm" data-demo="#vl-pin" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="pn6" id="vl-pin"><span>06 / 06</span><span>pinned — 00초등학교</span></div></div>
  <div class="pin"><span>06 / 06</span><span>디자인 안내</span><span>2026</span></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><button class="dk-next" aria-label="다음">→</button></nav>
  </main>
</div>

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

---

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

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

```css
/* vellum — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-9';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/cafe24-oneprettynight/Cafe24Oneprettynight-v2.0.woff2") format("woff2");font-weight:400}
@font-face{font-family:'kp-14';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/pretendard/Pretendard-Light.woff2") format("woff2");font-weight:300}
/* === THEME === */
:root{--stage-bg:#2A3870;--slide-bg:#2A3870;
  --kt:'kp-9';--kb:'kp-14';--ka:'kp-14';
  --wt:400;--wb:300}
*{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 === */

/* --- 한 바탕 · 노랑 · 청록 (6vw = 115px, 6vh = 65px) --- */
:root{--navy:#2A3870;--deep:#1F2858;--mid:#34407A;--y:#E8D85C;--y2:rgba(232,216,92,.62);--y3:rgba(232,216,92,.32);--em:#F5E168;--teal:#5A9A98;--bd:rgba(232,216,92,.20);--px:115px}
.slide{background:var(--navy);color:var(--y);font-family:'DM Sans',var(--kb),sans-serif;font-weight:var(--wb)}
.slide>*{position:absolute}
h1,h2,h3,.unit,.sv,.quote p,.tt,.words,.nl .t{font-family:'Cormorant Garamond',var(--kt),serif;font-weight:var(--wt);font-style:italic;letter-spacing:0}
.slide em{font-family:'Cormorant Garamond',var(--kt),serif;font-style:normal;font-weight:600;color:var(--em)}
.kick,.pin,.n,.bt{font-family:'Courier Prime',var(--kb),monospace}
.kick{font-size:24px;letter-spacing:.1em;color:var(--teal)}
.rule{display:block;width:28px;height:1px;background:var(--teal);margin:16px auto 0}
.center{left:var(--px);right:var(--px);text-align:center;display:flex;flex-direction:column;align-items:center}
.n{font-size:22px;letter-spacing:.06em;color:var(--teal)}
.lead{font-size:28px;line-height:1.6;color:var(--y2);text-align:center}
.bt{border:1px solid var(--y);padding:12px 26px;font-size:26px;color:var(--navy);background:var(--y)}
.bt.ghost{background:transparent;color:var(--y);border-color:var(--bd)}
.bt:disabled{opacity:.3}
/* 핀 메모: 모든 장 왼쪽 아래(청록 Courier Prime) */
.pin{left:var(--px);bottom:52px;display:flex;flex-direction:column;gap:2px;max-width:560px;font-weight:700;font-size:21px;line-height:1.45;letter-spacing:.01em;color:var(--teal);z-index:5}
.hdr{top:70px}
.hd{margin-top:18px;font-size:72px;line-height:1.1;white-space:nowrap}

/* --- 번호 목록(청록 모노 번호, 1px 20% 선) --- */
.nl{list-style:none;text-align:left;border-top:1px solid var(--bd)}
.nl li{display:grid;grid-template-columns:2.6em 1fr;gap:.5em;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--bd)}
.nl .d{display:block;font-size:24px;line-height:1.45;color:var(--y2)}

/* --- 1. 표지(가운데): 청록 킥커 + 28px 선 → 단원(이탤릭) → 청록 라벨 → 학습 목표 h1(가장 큰 이탤릭, 핵심 낱말 = 바로 선 밝은 노랑) --- */
.cov{top:200px}
.unit{margin-top:30px;display:flex;align-items:baseline;gap:30px;font-size:80px;line-height:1.1;white-space:nowrap}
.unit span{font:italic 400 56px/1 'Cormorant Garamond',serif;color:var(--y2)}
.gl{margin-top:70px}
.t1{margin-top:18px;font-size:124px;line-height:1.18;white-space:nowrap}

/* --- 2. 만들기: 가운데 머리 / 이미지 자리(반투명 + 점선) 속 측정기 그림 | 번호 목록 4단계(켜지면 노랑, 지금 = 밝은 노랑) + 노랑 칸 버튼 / 가운데 리드 --- */
.img{left:var(--px);top:300px;width:860px;padding:14px 30px 10px;background:rgba(42,56,112,.12);border:1px dashed var(--bd);
  --g-ink:var(--y);--g-acc:var(--em);--g-stick:var(--y2);--g-board:var(--deep);--g-ruler:var(--mid);--g-prot:rgba(232,216,92,.06);--g-shadow:var(--y3);--g-font:'DM Sans',var(--kb),sans-serif;--g-sw:1.5}
.img .gauge{width:760px;display:block;margin:0 auto}
.img figcaption{text-align:center;font-size:20px}
.col2{left:1040px;right:var(--px);top:300px;display:flex;flex-direction:column;align-items:center}
.col2 .nl{width:100%}
.nl .t{font-size:42px;line-height:1.1;color:var(--y3)}
.col2 .nl .d{color:var(--y3)}
.slide[data-step="0"] .nl .t,.nl li.on .t{color:var(--y)}
.slide[data-step="0"] .col2 .nl .d,.col2 li.on .d{color:var(--y2)}
.nl li.now .t{color:var(--em)}
.btns{margin-top:24px;display:flex;gap:16px}
.cap{margin-top:14px;font-size:24px;color:var(--y2);text-align:center}
.ld2{left:var(--px);width:860px;top:888px;font-size:24px}

/* --- 3. 숫자와 그래프: 핀 통계 4칸(이탤릭 숫자 + 모노 라벨) + 막대(32% 노랑, 가장 높은 값 = 100%) + 기준선 + 값 줄 --- */
.stats{left:var(--px);right:var(--px);top:300px;display:grid;grid-template-columns:repeat(4,1fr)}
.ps{text-align:center;padding:6px 30px;border-right:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;gap:6px}
.ps:last-child{border-right:0}
.sv{font-size:96px;line-height:1;letter-spacing:-.02em}
.ps p{font-size:23px;line-height:1.45;color:var(--y2)}
.chart{left:280px;right:280px;top:540px}
.plot{height:200px;display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--bd)}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bar{display:block;width:44%;background:var(--y3)}
.col.mx .bar{background:var(--y)}
.bv{margin-bottom:8px;color:var(--y2)}
.col.mx .bv{color:var(--y)}
.vr{position:relative;display:grid;grid-template-columns:repeat(7,1fr);text-align:center;padding:8px 0;border-bottom:1px solid var(--bd);font-size:26px}
.vr .n{position:absolute;right:100%;top:10px;margin-right:24px;white-space:nowrap;font-size:19px}
.vr.tm{font:400 22px/1.2 'Courier Prime',monospace;color:var(--y2)}

/* --- 4. 비교와 표: 비교 판 두 남색(짙은 | 중간, 번호 목록) / 헤어라인 표 + 남중 번호 목록 | 청록 큰 따옴표 인용(가운데) --- */
.panel{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.dk{background:var(--deep)}
.md{background:var(--mid);border-left:1px solid var(--bd)}
.p4{top:0;height:480px;padding:40px 120px 30px}
.p4.dk{left:0;width:960px}.p4.md{left:960px;right:0}
.ph{margin-top:14px;font-size:58px;line-height:1.15}
.nl.sm{margin-top:24px;width:520px}
.tbl{left:var(--px);width:900px;top:530px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:16px;text-align:center;padding:12px 0;border-bottom:1px solid var(--bd);font-size:26px}
.tr.th{font:400 20px/1.2 'Courier Prime',var(--kb),monospace;letter-spacing:.06em;color:var(--teal)}
.tt{font-size:30px}
.l4{margin-top:22px;width:100%;border-top:0}
.l4 li{grid-template-columns:7em 1fr;padding:8px 0}
.l4 .d{font-size:22px}
.quote{left:1110px;right:var(--px);top:540px;text-align:center}
.qm{display:block;height:80px;font:italic 400 134px/.9 'Cormorant Garamond',serif;color:var(--teal)}
.quote p{font-size:50px;line-height:1.25}
.quote .n{display:block;margin-top:18px}

/* --- 5. 확인하기: 짙은 판 퀴즈(번호 목록 보기, 정답 = 바로 선 밝은 노랑 ✓) | 중간 판 빈칸(노랑 밑줄 칸) + 낱말 --- */
.p5{top:0;bottom:0;padding:60px 110px 140px}
.p5.dk{left:0;width:1000px}.p5.md{left:1000px;right:0}
.opts{margin-top:30px;width:720px}
.opts li{display:block;padding:0}
.opt{width:100%;display:grid;grid-template-columns:2.6em 1fr;gap:.5em;align-items:baseline;text-align:left;padding:14px 0}
.opt .t{color:var(--y);font-size:40px}
.opt.right .t{font-style:normal;font-weight:600;color:var(--em)}
.opt.right .t::after{content:'  ✓';font-family:'Courier Prime',monospace;font-size:.7em;color:var(--teal)}
.opt.wrong .t{color:var(--y3);text-decoration:line-through;text-decoration-thickness:1px}
.opt:disabled:not(.right){opacity:.7}
.fb{margin:24px 0;width:720px;min-height:80px;font-size:26px;line-height:1.55;color:var(--y2)}
.nl.bl{margin-top:30px;width:100%}
.nl.bl .d{font-size:28px;line-height:1.7;color:var(--y)}
.blank{position:relative;min-width:160px;margin-right:8px;padding:0 10px;border-bottom:1px solid var(--em);font:600 28px/1.3 'Cormorant Garamond',var(--kt),serif;color:var(--em);text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:44px}
.words{margin-top:12px;font-size:44px;line-height:1.3}

/* --- 내비: 아래 가운데 작은 점 + 모노 화살표 --- */
.dk-nav{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:40}
.dk-dots{display:flex;gap:10px}
.dk-dot{width:8px;height:8px;border-radius:50%;background:var(--y3)}
.dk-dot.on{background:var(--y)}
.dk-prev,.dk-next{font:400 24px/1 'Courier Prime',monospace;color:var(--y2);padding:2px 8px}
.dk-prev:disabled,.dk-next:disabled{opacity:.25}
/* --- 6. 디자인 안내: 번호 목록 설명 | 헤어라인 칸 시연 3개 --- */
.g6{left:var(--px);width:840px;top:300px}
.g6 li{padding:16px 0}
.g6 .t{display:block;font-size:36px;line-height:1.2}
.g6 .d{margin-top:4px;font-size:27px}
.g6 b{font-weight:600;color:var(--y)}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-5px;border:1px solid var(--bd)}
.sl6{left:1060px;right:var(--px);top:262px;text-align:center}
.d6{left:1060px;right:var(--px);border-top:1px solid var(--bd);padding-top:14px;text-align:center}
.d6.a{top:300px}.d6.b{top:508px}.d6.c{top:740px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:40px;line-height:1.1}
.bt.sm{font-size:20px;padding:6px 14px}
.bt.sm[aria-pressed="true"]{background:var(--y);color:var(--navy)}
.em6{margin-top:20px;font:italic 400 60px/1.1 'Cormorant Garamond',serif}
.em6.play span{font-style:normal;font-weight:600;color:var(--em)}
.br6{margin:14px auto 0;width:80%;height:90px;display:flex;align-items:flex-end;gap:14px;border-bottom:1px solid var(--y3)}
.br6 i{flex:1;background:var(--y3)}
.br6.play i.mx{background:var(--y)}
.pn6{position:relative;margin:14px auto 0;width:80%;height:100px;border:1px dashed var(--bd);background:rgba(42,56,112,.12)}
.pn6 span{display:none}
.pn6.play{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:2px;padding:10px 16px}
.pn6.play span{display:block;font:700 19px/1.4 'Courier Prime',var(--kb),monospace;color:var(--teal)}

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