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

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

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

## 라이선스

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

- Paperlogy 2ExtraLight: Paperlogy — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © 2024 PT&
  파일: Paperlogy-2ExtraLight.ttf
- Noto Sans KR Thin: Noto Sans KR — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: (c) 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'.
  파일: NotoSansKR-Thin.ttf
- Noto Sans KR Regular: Noto Sans KR — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: (c) 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'.
  파일: NotoSansKR-Regular.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/monochrome.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/monochrome.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Paperlogy 2ExtraLight(200) · 본문 Noto Sans KR Thin(100) · 포인트 Noto Sans KR Regular)는 공통 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. 디자인 규칙 (`monochrome` design.md)

````markdown
---
version: alpha
name: Monochrome (Ivory Ledger)
description: A literary editorial system rendered in black ink on cream paper. Ultra-light geometric sans (Jost at weight 200–300) carries every headline; Lora italic serif handles quote text and insight-card titles; JetBrains Mono provides the structural chrome. There are no chromatic accents — every color in the palette is a graphite or cream tone, and "accent" simply means "darker ink." The aesthetic borrows from independent research reports, scholarly monographs, and the quietest end of contemporary editorial design — closer to a printed journal than a tech presentation.

colors:
  cream-paper: "#FAFADF"
  cream-paper-2: "#F2F2D2"
  cream-paper-3: "#F0F0D4"
  cream-warm: "#F5F0E4"
  ink-black: "#1A1A16"
  ink-graphite: "#5E5E54"
  ink-graphite-light: "#8A8A80"

color-aliases:
  c-bg: cream-paper
  c-bg-light: cream-paper
  c-bg-cream: cream-warm
  c-fg: ink-black
  c-fg-light: ink-black
  c-fg-2: ink-graphite
  c-fg-3: ink-graphite-light
  c-accent: ink-black
  c-border: ink-black
  c-border-light: ink-black

typography:
  display:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 8.5vw
    fontWeight: 200
    lineHeight: 0.96
    letterSpacing: -0.02em
  h1:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 5vw
    fontWeight: 200
    lineHeight: 1.1
    letterSpacing: -0.01em
  h2:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 3.2vw
    fontWeight: 300
    lineHeight: 1.2
  h3:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 2vw
    fontWeight: 400
    lineHeight: 1.3
  lead:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 1.5vw
    fontWeight: 300
    lineHeight: 1.65
  body:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 1.1vw
    fontWeight: 300
    lineHeight: 1.7
  caption:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 0.85vw
    fontWeight: 300
    lineHeight: 1.55
  label:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 0.72vw
    fontWeight: 400
    letterSpacing: 0.12em
    textTransform: uppercase
  quote-serif:
    fontFamily: "Lora, Noto Serif SC, Georgia, serif"
    fontSize: 3.2vw
    fontWeight: 400
    lineHeight: 1.35
  insight-serif:
    fontFamily: "Lora, Noto Serif SC, Georgia, serif"
    fontSize: 2.8vw
    fontWeight: 400
    lineHeight: 1.15
  stat-value:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 5.5vw
    fontWeight: 200
    lineHeight: 1.0
    letterSpacing: -0.03em
  flow-num:
    fontFamily: "Jost, Noto Sans SC, system-ui, sans-serif"
    fontSize: 3.5vw
    fontWeight: 200
    lineHeight: 1.0
    letterSpacing: -0.02em

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

canvas:
  width: 100vw
  height: 100vh

components:
  rule:
    width: 36px
    height: 1px
    background: "{colors.ink-black}"
    description: "A 36-pixel hairline accent rule. The system's signature small punctuation mark — appears under chapter labels, beside kickers, above stat values."
  rule-full:
    width: "100%"
    height: 1px
    background: "{colors.ink-black}"
    description: "Full-width 1px hairline rule for chrome bands, foot bands, and section dividers."
  kicker:
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: 0.14em
    textTransform: uppercase
    color: "{colors.ink-graphite-light}"
    description: "Muted mono uppercase eyebrow label above a headline."
  tag:
    border: "1px solid {colors.ink-black}"
    padding: "0.3em 0.8em"
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: 0.12em
    textTransform: uppercase
    description: "Bordered inline tag for version numbers, status labels."
  bullet-marker:
    content: "—"
    color: "{colors.ink-graphite-light}"
    fontFamily: "{typography.label.fontFamily}"
    description: "Em-dash in muted graphite via JetBrains Mono. The standard list mark; never a dot, never a check."
  insight-card:
    background: "{colors.cream-warm}"
    borderRadius: 16px
    padding: "3vh 2.5vw"
    description: "Tall rounded-rectangle card in cream tone (one of three near-identical creams). Holds a large Lora serif title and a Jost body block at the bottom."
  stat-cell:
    borderTop: "1px solid {colors.ink-black}"
    padding: "{spacing.gap-md} {spacing.gap-md} {spacing.gap-md} 0"
    description: "Rule-topped vertical cell with a 5.5vw weight-200 numeral, a Jost label, and a mono source note."
  timeline-dot:
    width: 8px
    height: 8px
    borderRadius: 50%
    background: "{colors.ink-black}"
    border: "2px solid {colors.cream-warm}"
    description: "Solid black dot with a cream border ring that punches through a horizontal connector rule."
  vtimeline-spine:
    width: 1px
    background: "{colors.ink-black}"
    description: "1px vertical rule that anchors a vertical timeline. Carries a 9px solid black dot at the top of each entry."
  pie-donut:
    width: "min(26vw, 42vh)"
    height: "min(26vw, 42vh)"
    borderRadius: 50%
    description: "Donut ring rendered by overlaying a same-color circular ::after pseudo on a conic-gradient or similar. Center cutout is the slide background."
  pyramid-bar:
    borderLeft: "2px solid {colors.ink-black}"
    background: "color-mix(in srgb, {colors.ink-black} N%, {colors.cream-paper})"
    description: "Horizontal pyramid level. Width grows down each level (36% → 100%); fill darkens up the pyramid via color-mix at increasing percentages."
  bar-fill:
    width: "100%"
    background: "{colors.ink-graphite-light}"
    opacity: 0.5
    description: "Vertical bar in muted graphite at half opacity. Accented variant uses solid ink-black at full opacity."
  img-placeholder:
    border: "1px solid {colors.ink-black}"
    background: "{colors.cream-paper-3}"
    color: "{colors.ink-graphite}"
    description: "Hairline-bordered cream void with a centered mono label. Used until photography is dropped in."
---

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

Monochrome (Ivory Ledger) is a **literary editorial system** built on a single material constraint: black ink on cream paper, and nothing else. The palette has eight tokens, but seven of them are tonal variations of cream or graphite. There is no chromatic accent — the "accent" color is just darker ink. The result is a system that reads as a carefully typeset research report or a quiet contemporary monograph, not a presentation.

The typeface stack is a three-voice editorial pairing. **Jost** at weights 200, 300, and 400 carries every display, headline, body, and label — its geometric sans construction stays calm at ultra-light weights and the contrast between weight 200 (display) and weight 300 (body) is the system's primary typographic rhythm. **Lora** italic serif is reserved for two specific moments: the body text of a pull-quote and the title of an insight card. The serif italic provides the only typographic warmth in the system — wherever it appears, it signals "this is the human voice." **JetBrains Mono** at weight 400 carries every structural marker: chrome labels, sidebar tags, version numbers, footer text, bullet dashes, axis labels, dates. Mono is uppercase and tracked at 0.12em or wider.

The palette functions in three roles. **Cream paper** (`{colors.cream-paper}` and its three near-identical sibling tones) is the canvas — slides are never white, always a warm off-yellow cream. **Black ink** (`{colors.ink-black}` — actually #1A1A16, a very dark olive-black) is every text moment, every border, every divider, every shape fill that isn't decorative cream. **Graphite** in two tones (`{colors.ink-graphite}` for secondary text, `{colors.ink-graphite-light}` for tertiary) handles muted copy. That's the whole color system.

Depth is achieved entirely through **1px hairline rules** and **generous whitespace**. There are no drop shadows, no gradients, no elevation, no atmospheric effects. When two regions need separation, a 1px black line divides them. When a region needs visual weight, it gets more padding, not a fill change. The insight-card surfaces are nearly indistinguishable from the page itself — the cards are defined by their corner radius and padding, not by a contrast jump.

**Density philosophy: sparse.** Ivory Ledger reads as elegant when generous whitespace dominates and a single typographic moment anchors the slide. The horizontal padding is set to 8vw (the most generous in the library), and content typically uses only the middle 60–70% of the canvas. A slide that fills 80% of its area with type reads as cramped and breaks the editorial reading. The system is asking the agent to leave space — to let a single Jost-200 headline carry an otherwise nearly-empty slide. When density is required (a research timeline, a two-column dense-text spread, a 12-row table), the system holds together only because the type is so light and the rules so thin that even dense content reads as airy.

**Key Characteristics:**
- Cream paper background (`{colors.cream-paper}`) on every slide — never white, never dark by default. The cream is the surface, not a stylistic choice.
- Ultra-light Jost (weight 200 for display, weight 300 for body) is the dominant typographic voice.
- Lora italic serif appears in two specific moments: pull-quote bodies and insight-card titles. Nowhere else.
- JetBrains Mono uppercase with 0.12em+ tracking handles every structural label, chrome tag, axis, and bullet marker.
- The system has no chromatic accent. The accent color is `{colors.ink-black}` — slightly darker ink.
- All structural separation is 1px hairline rules in black, plus the signature 36px short rule (`{components.rule}`) used as a small punctuation mark.
- The bullet list marker is an em-dash in muted graphite via JetBrains Mono.
- Generous 8vw horizontal padding — the most spacious in the template library.

## Colors

### Palette

- **Cream Paper** (`{colors.cream-paper}` — #FAFADF): The default surface. Warm off-yellow, never pure white. Every slide background is this color or a near-identical variant.
- **Cream Paper Alt** (`{colors.cream-paper-2}` — #F2F2D2): A slightly deeper cream for inset surfaces. Used sparingly — the difference from the default cream is barely perceptible.
- **Cream Paper Deep** (`{colors.cream-paper-3}` — #F0F0D4): The image-placeholder fill. Slightly more saturated cream that distinguishes a void rectangle from the slide surface.
- **Cream Warm** (`{colors.cream-warm}` — #F5F0E4): The insight / timeline slide background, a warmer tone that signals these slides as related sub-aesthetic moments within the deck.
- **Ink Black** (`{colors.ink-black}` — #1A1A16): Every text moment, every rule, every divider, every border. A very dark olive-black, not pure black — chosen for warmth against the cream paper.
- **Ink Graphite** (`{colors.ink-graphite}` — #5E5E54): Secondary text color. Used for muted lead copy, body paragraphs in dense slides, and labels that need to step back from headline weight.
- **Ink Graphite Light** (`{colors.ink-graphite-light}` — #8A8A80): Tertiary text. Used for kickers, axis labels, source notes, bullet markers, footer chrome — anything that should read as barely-present structural metadata.

### Defaults

- **Default surface background**: `{colors.cream-paper}`. The system is single-surface by default.
- **Default primary headline color**: `{colors.ink-black}`. Headlines never appear in graphite or any other tone.
- **Default body text color**: `{colors.ink-black}` for primary copy on light slides; `{colors.ink-graphite}` for muted lead paragraphs.
- **Default kicker / label color**: `{colors.ink-graphite-light}` — the most muted graphite. Labels should sit back, not lead.
- **Default border / divider color**: `{colors.ink-black}` — every divider is solid black. There is no muted border tone.
- **Default rule weight**: 1px. The system never uses thicker rules.
- **Default "accent" color**: `{colors.ink-black}` — the same as the primary text color. Accent in this system means darker emphasis ink, not a chromatic switch.
- **Default warmer-surface treatment for insight or timeline groups**: `{colors.cream-warm}` — used to tonally identify a group of slides without breaking the monochrome palette.

The system has no warm/cool pairing, no semantic color (no red for warning, no green for success), no chromatic emphasis. Every emphasis comes from typography (size, weight, italic switch) or from a rule, never from color.

## Colors (continued)

The three "insight card surfaces" (`--c-card-a`, `--c-card-b`, `--c-card-c`) are all near-identical cream tones (#FAFADF, #F5F0E4, #FAFADF). They are intentionally collapsed — the card distinction is meant to come from padding and serif title, not surface color. Treat the three card-surface tokens as effectively one surface.

## Typography

### Font Family

The system loads five faces: **Jost** (weights 200, 300, 400, 500, 600) carries all sans display and body; **Lora** (italic and roman, weights 400, 500, 600) carries only the pull-quote text and the insight-card title; **JetBrains Mono** (weights 300, 400, 500) carries every structural label; **Noto Serif SC** is the CJK fallback for Lora; **Noto Sans SC** is the CJK fallback for Jost.

The emotional register is deliberate:
- Jost reads as **quiet, geometric, almost mathematical** at weight 200. It is the system's editorial voice.
- Lora italic reads as **literary, personal, hand-set**. It signals "this is the voice of a human or a quote" — wherever it appears, the tone shifts from analytical to lyrical.
- JetBrains Mono reads as **archival, indexical, structural**. It is the system's catalog-card voice — version numbers, dates, axis labels, anything that's metadata rather than message.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display}` | 8.5vw | Jost | 200 | Cover or opening hero display — generous and airy |
| `{typography.h1}` | 5vw | Jost | 200 | Chapter-opening or section-break headline |
| `{typography.h2}` | 3.2vw | Jost | 300 | Primary content-slide headline |
| `{typography.stat-value}` | 5.5vw | Jost | 200 | Large numerical figure inside a stat cell |
| `{typography.quote-serif}` | 3.2vw | Lora italic | 400 | Pull-quote body text |
| `{typography.insight-serif}` | 2.8vw | Lora | 400 | Insight-card title |
| `{typography.h3}` | 2vw | Jost | 400 | Sub-headline, region heading, flow-step title |
| `{typography.lead}` | 1.5vw | Jost | 300 | Lead paragraph or large bullet item |
| `{typography.body}` | 1.1vw | Jost | 300 | Body paragraph |
| `{typography.caption}` | 0.85vw | Jost | 300 | Image caption, source note, fine print |
| `{typography.label}` | 0.72vw | JetBrains Mono | 400 | Kicker, chrome label, axis label, version tag |
| `{typography.flow-num}` | 3.5vw | Jost | 200 | Large step numeral in a process diagram |

### Defaults

- **Default primary section headline**: `{typography.h2}` (3.2vw at weight 300). Don't reach for `{typography.h1}` for a standard content slide — that size is for chapter breaks.
- **Default opening or cover display**: `{typography.display}` (8.5vw at weight 200).
- **Default body paragraph size**: `{typography.body}` (1.1vw at weight 300).
- **Default lead paragraph size**: `{typography.lead}` (1.5vw at weight 300) when a paragraph is the single supporting block under a headline.
- **Default label / kicker size**: `{typography.label}` (0.72vw).
- **Default weight for any display element**: 200. Jost at 200 is the system's display voice.
- **Default weight for body**: 300.

When unsure, the canonical pairing is `{typography.h2}` (weight 300) for the headline + one paragraph at `{typography.lead}` (weight 300) for the supporting block. The narrow weight gap (300 vs. 300, distinguished only by size) is correct — Ivory Ledger does not lean on heavy weight contrast.

### Signature Treatments

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

- **Every Jost display, h1, h2, h3 element is mixed case** — never uppercase. Uppercase is reserved exclusively for JetBrains Mono labels.
- **Every label, kicker, chrome tag, footer, axis label, and source note uses JetBrains Mono uppercase with at least 0.12em positive tracking** (most are 0.14–0.18em). Mono in sentence case does not exist here.
- **The pull-quote body is always Lora italic.** A pull-quote in Jost reads as a different design system.
- **The insight-card title is always Lora roman (not italic).** The serif face is the card's defining visual signal.
- **The bullet-list marker is always an em-dash in JetBrains Mono colored `{colors.ink-graphite-light}`.** Never a dot, never a check, never a numeral.
- **Stat values, display headlines, and flow numerals all use Jost weight 200 with negative letter-spacing.** The combination of ultra-light weight and tight tracking is the system's display signature.
- **Headlines and body text are colored `{colors.ink-black}`; muted lead is `{colors.ink-graphite}`; labels are `{colors.ink-graphite-light}`.** Headlines never carry the graphite tones.

### Typography Principles

The rhythm of Ivory Ledger is **ultra-light Jost + Lora italic in two specific moments + tracked mono labels**. Switching Jost to a heavier weight (500+) for a headline reads as a different system. Setting body text in Lora reads as a different system. Setting a label in Jost rather than JetBrains Mono reads as a different system. The role of each face is narrow and unmoving.

Italic is used exclusively in Lora (pull-quote body) and not in Jost. Underline is not used anywhere. Bold is not used to emphasize body text — emphasis inside a paragraph is achieved either by Lora italic switch (rare) or by isolation through whitespace.

## Layout

### Canvas System

The system targets a fluid `100vw × 100vh` viewport with all sizes in `vw`/`vh`. The deck is a horizontal flex strip with slide-to-slide transitions at 0.9s with a smooth easing curve. Animation tokens (`fade-up`, `fade-in`, `reveal-right`, `reveal-left`, `scale-in`) are available with stagger delays via `data-delay` attributes — these run on each slide entrance.

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-x}` | 8vw | Slide horizontal padding (the most generous in the library) |
| `{spacing.pad-y}` | 6vh | Slide vertical padding |
| `{spacing.gap-lg}` | 5vh | Between major content sections |
| `{spacing.gap-md}` | 3vh | Between related elements |
| `{spacing.gap-sm}` | 1.5vh | Between tightly related elements |

The slide container reserves an additional 3.5vw on the left for a vertical sidebar element (currently disabled in the source — see Known Gaps), so total left padding is ~11.5vw. Content sits inside this generous gutter system.

### Chrome Frame

Most content slides carry a **chrome header** and **chrome foot**: each is a `flex space-between` row of two JetBrains Mono labels, separated from the slide body by a 1px solid black rule. Cover-style, chapter-break, quote, and closing slide types suppress chrome and foot entirely.

### Disabled Sidebar

The CSS defines a `.slide-sidebar` element — a thin vertical 1px black line in the left gutter with rotated mono labels reading bottom-to-top. The source explicitly disables this with `display: none !important`, with a comment noting it reads as "visual noise." The styling remains in the CSS as a dormant artifact; do not re-enable without intentional design rationale.

## Depth and Elevation

### No Shadows, Hairline Rules Only

The system uses **zero box-shadow declarations** on any structural element. Depth is created through three mechanisms:

1. **1px hairline rules in solid `{colors.ink-black}`** — under chrome bands, above foot bands, between compare panels, above stat cells, across timeline tracks, across chart baselines. The rule is the divider, the separator, the structural mark.
2. **The 36px short rule** (`{components.rule}`) — a small punctuation mark used under chapter labels, beside kickers, or as a delicate accent break.
3. **Generous whitespace** — the primary depth signal is the 8vw horizontal gutter and the space around each typographic moment.

### No Atmospheric Effects

There are no gradients, no glows, no textures, no grain overlays. Even the donut chart center cutout is just a same-color circle laid over the conic ring — there is no contrast jump.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 0px | Every structural element — image placeholders, stat cells, compare panels, tables, chart areas |
| 16px | Insight cards only |
| 50% (circle) | Pie/donut chart shape, timeline-dot small circles, vt-spine dot |
| 999px (pill) | None — pills are not used |

The system is dominantly square-cornered. The 16px rounded radius on insight cards is the only structural soft edge and is the visual signal that distinguishes a card from a region.

### Border Weights

- **1px solid `{colors.ink-black}`** — the universal structural rule weight. Used for every divider, every chrome rule, every chart axis, every cell border.
- **2px solid `{colors.ink-black}`** — used only on the pyramid-bar left edge (`{components.pyramid-bar}`) as a slightly stronger left-anchor for that specific chart type.

There is no thicker border weight, no dashed border (except a `1px dashed` graphite hint inside dense charts), no colored border.

### Decorative Element Types

**36px short rule** — A small 36px-wide × 1px-tall solid black horizontal accent rule. The system's signature punctuation mark. Used under a chapter number, beside a kicker, or as a delicate section break.

**Kicker / mono eyebrow** — A muted JetBrains Mono uppercase label in `{colors.ink-graphite-light}` placed above a headline. The eyebrow is barely-there by design.

**Bordered tag** — A small inline element with a 1px black border and 0.3em × 0.8em padding, containing a mono uppercase string. Used for version tags or status labels.

**Bullet em-dash** — A `—` glyph in JetBrains Mono colored `{colors.ink-graphite-light}`, prepended to each list item via a CSS grid marker column (`grid-template-columns: 1.2em 1fr`).

**Insight card** — A 16px-rounded rectangle (`{components.insight-card}`) on a slightly warmer cream surface. Carries a Lora roman title (2.8vw weight 400) and a Jost body block (weight 300) pushed to the bottom of the card. The card is identified by its rounded corners and its serif title, not by a color contrast.

**Stat cell** — A vertical region with a 1px solid black top rule (`{components.stat-cell}`), containing a 5.5vw Jost-200 numeral, a Jost label, and a small mono source note. Three stat cells side by side is the canonical arrangement.

**Timeline dot** — An 8px solid black circle with a 2px cream-warm border ring (`{components.timeline-dot}`) that punches through the horizontal connector rule. The ring color matches the warm-cream slide surface so the dot reads as floating on the rule, not crossing it.

**Vertical timeline spine** — A 1px-wide vertical solid black line (`{components.vtimeline-spine}`) with 9px solid black dots at the top of each entry. Used in long chronological lists.

**Pie / donut chart** — A circle (`{components.pie-donut}`) at min(26vw, 42vh) size, with a same-color circular cutout via `::after` to create the donut ring. The chart sits beside a legend column.

**Pyramid bar** — A horizontal bar (`{components.pyramid-bar}`) with a 2px solid black left edge and a tonal cream-to-graphite fill computed via `color-mix(in srgb, ink-black N%, cream-paper)` where N ranges from 4% to 55% across the five levels. Widths step from 36% (top, darkest) to 100% (bottom, lightest).

**Vertical bar chart** — A muted graphite (`{colors.ink-graphite-light}`) bar at 50% opacity for default bars; a solid black bar at full opacity for the highlighted bar. The chart has a 1px black left axis and a 1px black baseline.

**Image placeholder** — A 1px-bordered cream-paper-3 rectangle with centered mono label. Used until photography arrives.

**Process flow with no arrows** — Flow diagrams in this system are explicit about not using arrows between steps. Whitespace between steps implies sequence; the system declares this with a comment in the CSS.

## Do's and Don'ts

### Do
- Use the cream paper background (`{colors.cream-paper}`) on every slide. The single-surface canvas is the system's foundation.
- Set every headline in `{colors.ink-black}` and let the weight (Jost 200) and size do the work. Headlines never need a chromatic shift.
- Use Jost at weight 200 for any display moment. The ultra-light weight is the system's defining typographic voice.
- Reach for Lora italic only when the text is a pull-quote body; reach for Lora roman only when it's an insight-card title. The serif's two roles are non-overlapping.
- Use JetBrains Mono uppercase with at least 0.12em tracking for every structural label, axis tag, footer, and bullet marker. Mono is the catalog-card voice.
- Render every structural divider as a 1px solid black rule. There is no thicker, no muted, no dashed border in the system.
- Apply the em-dash marker in muted graphite via JetBrains Mono for every bullet list.
- Leave generous whitespace. Content should sit comfortably in the middle 60–70% of the canvas; cramming content to the edges breaks the editorial reading.

### Don't
- Don't introduce a chromatic color. Red, blue, green, yellow do not exist in this system. The accent is darker ink.
- Don't use heavy weights (Jost 500, 600, 700) for headlines. The system reads as broken if display type weighs more than 300.
- Don't put a pull-quote in Jost. The Lora italic body is the quote's identity — switching to sans collapses the typographic distinction.
- Don't use box-shadow on any element. The system has no elevation.
- Don't use a card surface with chromatic contrast. Insight cards are identified by corner radius and serif title; a colored fill breaks the monochrome reading.
- Don't crowd a slide. The horizontal padding is 8vw for a reason — content needs to breathe.
- Don't use bold to emphasize body text. Inline emphasis is rare; when used, switch to Lora italic, not weight increase.
- Don't substitute the em-dash bullet marker with a dot, check, arrow, or numeral. The em-dash is the system's only list mark.
- Don't enable the disabled sidebar (`.slide-sidebar`). It's hidden intentionally — re-enabling it adds visual noise that the system was tuned to remove.
- Don't round any element other than insight cards (16px) or true circles (dots, donut). Square corners are the structural default.

## Responsive Behavior

The system is viewport-fluid by design. All sizes use `vw`/`vh` so the same composition renders correctly across any 16:9 viewport without breakpoints. At smaller viewports, both typography and padding scale linearly so the visual density and the negative-space ratio stay constant.

### Presenter Behavior
- Standard keyboard navigation: arrows, space, Home, End.
- Touch swipe for mobile.
- Mouse wheel with debounce to prevent multi-skip.
- Slide-to-slide transitions animate over 0.9s with a smooth easing curve.
- Each slide can declare entrance animations on individual elements via `data-anim` (fade-up, fade-in, reveal-right, reveal-left, scale-in) with stagger delays via `data-delay="N"` where N maps to a discrete delay step (0s, 0.08s, 0.18s, 0.3s, 0.44s, 0.6s, 0.78s, 0.96s).
- Elements with `[data-anim]` start invisible (opacity:0) and animate on `.is-active` — re-visiting a slide replays the entrance.

### Print Behavior
The template does not declare a `@media print` rule. Browser-driven PDF export will capture only the active slide; multi-slide export requires manual navigation per slide.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face | Chinese face | Weight |
|---|---|---|---|
| Display / headline (Jost 200) | Jost | Noto Sans SC (思源黑体) | 700 (heaviest available; CJK at 200 reads as broken — see Aesthetic Notes) |
| Body / lead (Jost 300) | Jost | Noto Sans SC (思源黑体) | 400 |
| Pull quote / insight title (Lora italic / roman) | Lora | Noto Serif SC (思源宋体) | 400 |
| Label / mono chrome (JetBrains Mono) | JetBrains Mono | Noto Sans SC | 400 (do not force monospace on CJK; see Aesthetic Notes) |

### Mixed-Content Strategy

Strategy A — same `font-family` stack, Latin-first fallback. Each typographic token already lists `"Jost, Noto Sans SC, system-ui, sans-serif"` (or the Lora equivalent). Latin glyphs render in Jost / Lora; CJK glyphs automatically fall through to Noto Sans SC / Noto Serif SC. No per-language class needed. Mixed sentences like `使用 Claude 思考` render in one logical run with the correct face per script.

### 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=Jost:wght@200;300;400;500;600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Serif+SC:wght@400;500;700&display=swap" 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

Ivory Ledger's defining trait is Jost at weight 200 — paper-thin geometric strokes against cream. **Noto Sans SC does not have a usable weight 200.** Its lightest weight (300) still reads heavier than Jost 200 because Chinese glyphs carry far more strokes per character. Set Chinese display in **Noto Sans SC 700** to match the *visual presence* of Jost 200 on the cream paper (counterintuitive, but Chinese readers perceive lighter weights as anemic at large sizes). For body, Noto Sans SC 400 against Jost 300 is the correct match — the cream-paper-and-graphite ink moment carries across scripts.

Lora italic is the system's "human voice" in pull-quote bodies. **Noto Serif SC has no italic.** Drop italic entirely for Chinese pull quotes; the serif face itself carries the editorial warmth. Don't try to fake italic with `font-style: italic` — Noto Serif SC will render an auto-slanted glyph that looks broken.

JetBrains Mono's uppercase tracked labels (0.12–0.18em) do not transfer to CJK. **Set Chinese labels in Noto Sans SC 400, mixed case, with letter-spacing reset to 0.** The "catalog-card" voice in Chinese is achieved through the small size and the cream-paper-light color, not through monospace + tracking. If a label is pure Latin (a version number, a date), keep it in JetBrains Mono uppercase as originally designed.

The em-dash bullet marker (`—`) works perfectly in Chinese — the Chinese em-dash is also `—` and renders the same width. Keep the marker as-is.

### Known CJK Gap

The 8vw horizontal padding (the most generous in the library) was tuned for Latin's narrower glyph widths. Chinese characters are roughly square and consume more horizontal space at the same point size. Long Chinese headlines that would fit on one line in English may wrap to two. Reduce display headline sizes by ~15% (Jost 8.5vw → Noto Sans SC 7.2vw) when the headline is pure Chinese, or accept the wrap as part of the editorial rhythm.

## Iteration Guide

1. Any new slide background is `{colors.cream-paper}` (or `{colors.cream-warm}` for the insight/timeline sub-aesthetic). Never introduce a dark or chromatic background.
2. Any new headline uses Jost in mixed case at weight 200 (display, h1) or 300 (h2). Never reach for heavier weights.
3. Any new label, eyebrow, tag, or metadata text uses JetBrains Mono uppercase with at least 0.12em tracking colored `{colors.ink-graphite-light}`.
4. Any new structural divider is a 1px solid black rule. Use `{components.rule}` (36px short) for decorative accents and `{components.rule-full}` for region separation.
5. Any new pull-quote uses Lora italic at `{typography.quote-serif}` size. Quotes never appear in sans.
6. Any new card moment uses 16px rounded corners and a Lora roman title. Don't introduce square cards or sans-titled cards.
7. Any new bullet list uses the em-dash in muted graphite via JetBrains Mono.
8. Generous whitespace is a feature, not a missing layout. Don't fill space because it's available.
9. If you need to emphasize a moment, increase size or wrap a span in Lora italic. Do not introduce color.
10. Color tokens that look chromatic (e.g. `--c-accent`) are aliased to `{colors.ink-black}` — they exist for token compatibility but resolve to black. Don't add a chromatic value to them.

## Known Gaps

- The CSS defines a `.slide-sidebar` element (rotated mono labels in the left gutter) that is intentionally hidden via `display: none !important`. The dormant styles remain in the source; re-enabling without design review will add visual noise the system was tuned to remove.
- The three insight-card surface tokens (`--c-card-a`, `--c-card-b`, `--c-card-c`) resolve to two near-identical values (#FAFADF, #F5F0E4). The card "color variation" is effectively cosmetic — cards are distinguished by serif title and padding, not surface tone.
- The pie/donut chart uses a `::after` pseudo cutout that requires the chart background to match the slide surface. Slides with a different background (e.g., the cream-warm variant) need the `--c-bg-light` token adjusted for the cutout to disappear correctly.
- The pyramid chart uses `color-mix(in srgb, ...)` which requires a modern browser. Older browsers will render the bars as solid `{colors.cream-paper}`.
- The animation system requires the `.is-active` class to be applied to a slide for entrance animations to play. Without proper navigation engine wiring, `[data-anim]` elements will remain at opacity 0.
- Lora italic at large sizes (3.2vw quote body) has noticeably wider stroke contrast than the surrounding Jost — this is intentional but creates a perceived weight jump. Don't compensate by making the surrounding text heavier.
- The bar-chart `bar-fill` uses inline `style="height: XX%"` declarations — there's no data-binding layer. Heights are computed manually.
- The system was originally named "Ivory Ledger" in the source comments. The template is exposed in the library as "Monochrome"; both names refer to the same design system.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.gk` — 1장 — 예: `<em class="gk">`
- `.gl` — 1장 — 예: `<span class="gl" data-anim="fade-in" data-delay="3">`
- `.k1` — 1장 — 예: `<div class="kick k1" data-anim="fade-in" data-delay="0">`
- `.kick` — 1·2·3·4·5·6장 — 예: `<div class="kick k1" data-anim="fade-in" data-delay="0">`
- `.meta` — 1장 — 예: `<div class="meta" data-anim="fade-in" data-delay="5">`
- `.paper` — 1·2·3·5·6장 — 예: `<section class="slide paper">`
- `.r1` — 1장 — 예: `<i class="rule r1" data-anim="reveal-right" data-delay="1">`
- `.rule` — 1·2·3·4·5·6장 — 예: `<i class="rule r1" data-anim="reveal-right" data-delay="1">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide paper">`
- `.t1` — 1장 — 예: `<h1 class="t1" data-anim="fade-up" data-delay="3">`
- `.tag` — 1장 — 예: `<span class="tag">`
- `.unit` — 1장 — 예: `<p class="unit" data-anim="fade-up" data-delay="2">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.bl` — 2·4·5장 — 예: `<p class="bl">`
- `.bot` — 2·3·4·5·6장 — 예: `<div class="chrome bot">`
- `.bt` — 2·5·6장 — 예: `<button class="bt" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns" data-anim="fade-in" data-delay="3">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.chrome` — 2·3·4·5·6장 — 예: `<div class="chrome top">`
- `.dash` — 2·4·5장 — 예: `<span class="dash">`
- `.def` — 2장 — 예: `<div class="def" data-anim="fade-in" data-delay="4">`
- `.flow` — 2장 — 예: `<div class="flow">`
- `.fn` — 2·6장 — 예: `<span class="fn">`
- `.fs` — 2장 — 예: `<div class="fs" data-s="1" data-anim="fade-up" data-delay="3">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd" data-anim="fade-up" data-delay="2">`
- `.img` — 2장 — 예: `<figure class="img" data-anim="fade-in" data-delay="3">`
- `.top` — 2·3·4·5·6장 — 예: `<div class="chrome top">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.bar` — 3장 — 예: `<i class="bar" style="height:63%">`
- `.cell` — 3장 — 예: `<div class="cell" data-anim="fade-up" data-delay="3">`
- `.chart` — 3장 — 예: `<div class="chart" data-anim="fade-in" data-delay="5">`
- `.col` — 3장 — 예: `<div class="col">`
- `.cv` — 3장 — 예: `<span class="cv">`
- `.mx` — 3·6장 — 예: `<div class="col mx">`
- `.plot` — 3장 — 예: `<div class="plot">`
- `.rb` — 3장 — 예: `<span class="rl rb">`
- `.rl` — 3장 — 예: `<span class="rl rb">`
- `.row` — 3장 — 예: `<div class="row">`
- `.src` — 3장 — 예: `<span class="src">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.sv` — 3장 — 예: `<span class="sv">`
- `.tm` — 3장 — 예: `<span class="tm">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.card` — 4·5장 — 예: `<div class="card" data-anim="fade-up" data-delay="3">`
- `.cb` — 4장 — 예: `<div class="cb">`
- `.cl` — 4·5장 — 예: `<span class="cl">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.ct` — 4·5·6장 — 예: `<h3 class="ct">`
- `.lst` — 4장 — 예: `<div class="lst" data-anim="fade-up" data-delay="4">`
- `.ml` — 4·5·6장 — 예: `<span class="ml">`
- `.qt` — 4장 — 예: `<blockquote class="qt" data-anim="fade-in" data-delay="6">`
- `.tbl` — 4장 — 예: `<div class="tbl" data-anim="fade-in" data-delay="5">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`
- `.warm` — 4장 — 예: `<section class="slide warm">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="blk" data-anim="fade-up" data-delay="4">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.q` — 5장 — 예: `<h3 class="ct q">`
- `.quiz` — 5장 — 예: `<div class="card quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다…`
- `.rty` — 5장 — 예: `<button class="bt rty" data-act="retry">`
- `.words` — 5장 — 예: `<p class="words">`
- `.wr` — 5장 — 예: `<i class="rule wr">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.br6` — 6장 — 예: `<div class="br6" id="mo-bar">`
- `.cd6` — 6장 — 예: `<div class="cd6" id="mo-card">`
- `.d6` — 6장 — 예: `<div class="d6">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.fs6` — 6장 — 예: `<div class="fs6">`
- `.g6` — 6장 — 예: `<div class="g6">`
- `.kick6` — 6장 — 예: `<span class="kick6">`
- `.rl6` — 6장 — 예: `<div class="rl6" id="mo-rule">`
- `.sig6` — 6장 — 예: `<div class="sig6">`
- `.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="monochrome">
<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=Jost:wght@200;300;400&family=Lora:ital,wght@0,400;1,400&family=JetBrains+Mono:wght@400&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/monochrome.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide paper">
  <div class="kick k1" data-anim="fade-in" data-delay="0">초등 과학 · 6학년 2학기</div><i class="rule r1" data-anim="reveal-right" data-delay="1"></i>
  <p class="unit" data-anim="fade-up" data-delay="2">계절의 변화<span>Sun, Shadow & Temperature</span></p>
  <span class="gl" data-anim="fade-in" data-delay="3">학습 목표</span>
  <h1 class="t1" data-anim="fade-up" data-delay="3">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <div class="meta" data-anim="fade-in" data-delay="5"><span class="tag">VOL. 03</span><span>1단원 · 3~4차시</span><span>00초등학교</span><span>2026</span></div>
</section>
<section class="slide paper" data-steps="4">
  <div class="chrome top"><span>계절의 변화</span><span>측정 준비</span></div>
  <div class="kick" data-anim="fade-in" data-delay="0">측정 준비</div><i class="rule" data-anim="reveal-right" data-delay="1"></i><h2 class="hd" data-anim="fade-up" data-delay="2">태양 고도 측정기 만들기</h2>
  <div class="btns" data-anim="fade-in" data-delay="3"><button class="bt" data-act="step">다음 단계 →</button><button class="bt" data-act="reset">처음부터</button></div>
  <p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]" data-anim="fade-in" data-delay="3">버튼을 눌러 순서대로 만들어 보세요</p>
  <figure class="img" data-anim="fade-in" data-delay="3"><figcaption>FIG. 01 — 태양 고도 측정기</figcaption><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></figure>
  <div class="def" data-anim="fade-in" data-delay="4"><p class="bl"><span class="dash">—</span><span>태양 고도 — 태양이 지표면과 이루는 각</span></p><p class="bl"><span class="dash">—</span><span>막대기의 그림자와 실이 이루는 각 = 태양 고도</span></p></div>
  <div class="flow"><div class="fs" data-s="1" data-anim="fade-up" data-delay="3"><span class="fn">01</span><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="fs" data-s="2" data-anim="fade-up" data-delay="4"><span class="fn">02</span><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="fs" data-s="3" data-anim="fade-up" data-delay="5"><span class="fn">03</span><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="fs" data-s="4" data-anim="fade-up" data-delay="6"><span class="fn">04</span><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="chrome bot"><span>버튼 규칙 없음 → 테두리 태그으로 표현</span><span>02 / 06</span></div>
</section>
<section class="slide paper">
  <div class="chrome top"><span>계절의 변화</span><span>측정 결과</span></div>
  <div class="kick" data-anim="fade-in" data-delay="0">측정 결과</div><i class="rule" data-anim="reveal-right" data-delay="1"></i><h2 class="hd" data-anim="fade-up" data-delay="2">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="cell" data-anim="fade-up" data-delay="3"><span class="sv">12:30</span><p>태양 고도가 가장 높아요</p><span class="src">남중 시각 무렵 · 남중</span></div><div class="cell" data-anim="fade-up" data-delay="4"><span class="sv">정남</span><p>남중할 때 태양의 위치</p><span class="src">남중 방향 쪽</span></div><div class="cell" data-anim="fade-up" data-delay="5"><span class="sv">14:30</span><p>기온이 가장 높아요</p><span class="src">최고 기온 무렵</span></div><div class="cell" data-anim="fade-up" data-delay="6"><span class="sv">9:30</span><p>그림자가 가장 길어요</p><span class="src">가장 긴 그림자 · 15:30</span></div></div>
  <div class="chart" data-anim="fade-in" data-delay="5">
    <span class="rl rb">태양 고도 (°)</span>
    <div class="plot"><div class="col"><span class="cv">38°</span><i class="bar" style="height:63%"></i></div><div class="col"><span class="cv">48°</span><i class="bar" style="height:80%"></i></div><div class="col"><span class="cv">55°</span><i class="bar" style="height:92%"></i></div><div class="col mx"><span class="cv">57°</span><i class="bar" style="height:95%"></i></div><div class="col"><span class="cv">54°</span><i class="bar" style="height:90%"></i></div><div class="col"><span class="cv">47°</span><i class="bar" style="height:78%"></i></div><div class="col"><span class="cv">37°</span><i class="bar" style="height:62%"></i></div></div>
    <span class="rl">시각 · 예시 값</span><div class="row"><span class="tm">9:30</span><span class="tm">10:30</span><span class="tm">11:30</span><span class="tm">12:30</span><span class="tm">13:30</span><span class="tm">14:30</span><span class="tm">15:30</span></div>
    <span class="rl">그림자 길이 (cm)</span><div class="row"><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>
    <span class="rl">기온 (℃)</span><div class="row"><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="chrome bot"><span>예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span><span>03 / 06</span></div>
</section>
<section class="slide warm">
  <div class="chrome top"><span>계절의 변화</span><span>관계 정리</span></div>
  <div class="kick" data-anim="fade-in" data-delay="0">관계 정리</div><i class="rule" data-anim="reveal-right" data-delay="1"></i><h2 class="hd" data-anim="fade-up" data-delay="2">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="card" data-anim="fade-up" data-delay="3"><span class="cl">A · 높을 때</span><h3 class="ct">태양 고도가 높을 때</h3><div class="cb"><p class="bl"><span class="dash">—</span><span>그림자 길이는 짧아져요</span></p><p class="bl"><span class="dash">—</span><span>기온은 높아져요</span></p></div></div><div class="card" data-anim="fade-up" data-delay="4"><span class="cl">B · 낮을 때</span><h3 class="ct">태양 고도가 낮을 때</h3><div class="cb"><p class="bl"><span class="dash">—</span><span>그림자 길이는 길어져요</span></p><p class="bl"><span class="dash">—</span><span>기온은 낮아져요</span></p></div></div></div>
  <div class="tbl" data-anim="fade-in" data-delay="5"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
  <div class="lst" data-anim="fade-up" data-delay="4"><span class="ml">남중</span><p class="bl"><span class="dash">—</span><span>태양이 정남쪽에 있을 때 '남중했다'고 해요</span></p><p class="bl"><span class="dash">—</span><span>이때의 태양 고도를 남중 고도라고 해요</span></p></div>
  <blockquote class="qt" data-anim="fade-in" data-delay="6"><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="ml">— 오늘의 정리</span></blockquote>
  <div class="chrome bot"><span>시각별 변화</span><span>04 / 06</span></div>
</section>
<section class="slide paper">
  <div class="chrome top"><span>계절의 변화</span><span>확인하기</span></div>
  <div class="kick" data-anim="fade-in" data-delay="0">확인하기</div><i class="rule" data-anim="reveal-right" data-delay="1"></i><h2 class="hd" data-anim="fade-up" data-delay="2">배운 내용을 확인해 볼까요?</h2>
  <div class="card quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요" data-anim="fade-up" data-delay="3">
    <span class="cl">INSIGHT · QUESTION</span>
    <h3 class="ct q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="opts"><button class="opt" data-opt="0"><span class="dash">—</span><span>오전 9시 30분</span></button><button class="opt" data-opt="1"><span class="dash">—</span><span>낮 12시 30분 무렵</span></button><button class="opt" data-opt="2"><span class="dash">—</span><span>오후 3시 30분</span></button></div>
    <p class="fb" data-fb></p>
    <button class="bt rty" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="blk" data-anim="fade-up" data-delay="4">
    <span class="ml">빈칸을 눌러 확인해요</span>
    <p class="bl"><span class="dash">—</span><span><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</span></p><p class="bl"><span class="dash">—</span><span><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</span></p><p class="bl"><span class="dash">—</span><span><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</span></p>
    <i class="rule wr"></i>
    <span class="ml">오늘의 낱말</span>
    <p class="words">태양 고도 · 남중 고도 · 그림자 길이 · 기온</p>
  </div>
  <div class="chrome bot"><span>빈칸 규칙 없음 → 1px 밑줄 칸으로 표현</span><span>05 / 06</span></div>
</section>
<section class="slide paper">
  <div class="chrome top"><span>계절의 변화</span><span>디자인 안내</span></div>
  <div class="kick" data-anim="fade-in" data-delay="0">디자인 안내</div><i class="rule" data-anim="reveal-right" data-delay="1"></i><h2 class="hd" data-anim="fade-up" data-delay="2">이 디자인 사용 설명서</h2>
  <div class="g6"><div class="fs6"><span class="fn">01</span><div><h3>한눈에</h3><p>연구 보고서·조용한 모노그래프. <b>크림 종이 위 검정 잉크만</b> — 색 강조가 없고, 강조는 더 짙은 잉크와 넉넉한 여백으로 해요.</p></div></div><div class="fs6"><span class="fn">02</span><div><h3>색</h3><p><span class="sw6"><span><i style="background:#FAFADF"></i>크림 종이</span><span><i style="background:#1A1A16"></i>검정 잉크</span><span><i style="background:#5E5E54"></i>회색 1</span><span><i style="background:#8A8A80"></i>회색 2</span><span><i style="background:#F5F0E4"></i>따뜻한 크림</span></span></p></div></div><div class="fs6"><span class="fn">03</span><div><h3>글꼴</h3><p>제목·숫자 Jost 200 → Paperlogy 2ExtraLight<br>본문 Jost 300 → Noto Sans KR Thin · 인용 Lora 이탤릭 · 라벨 JetBrains Mono</p></div></div><div class="fs6"><span class="fn">04</span><div><h3>이렇게 쓰면 좋아요</h3><p>생각을 정리하고 차분히 비교하는 수업. 한 장에 한 가지만 크게, 나머지는 비워 두세요.</p></div></div></div>
  <div class="sig6">
    <span class="ml">대표 장치 — 눌러 보세요</span>
    <div class="d6"><div class="dh"><h3>36px 짧은 선</h3><button class="bt" data-demo="#mo-rule">다시 보기</button></div><p>킥커가 나타나고(fade-in) → 1px 선이 왼쪽부터 그어지고(reveal-right) → 제목이 올라와요(fade-up) — 차례로.</p><div class="rl6" id="mo-rule"><span class="kick6">MEASURE</span><i></i><b>태양 고도</b></div></div>
    <div class="d6"><div class="dh"><h3>인사이트 카드</h3><button class="bt" data-demo="#mo-card" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>덱에서 유일하게 둥근 판(16px) — Lora 제목 + 아래쪽 본문.</p><div class="cd6" id="mo-card"><span class="ct">남중 고도</span><span>가장 높은 태양 고도</span></div></div>
    <div class="d6"><div class="dh"><h3>검정 막대는 하나만</h3><button class="bt" data-demo="#mo-bar" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>막대는 회색 50%, 강조할 하나만 검정 — 1px 축과 기준선.</p><div class="br6" id="mo-bar"><i class="" style="height:38px"></i><i class="" style="height:48px"></i><i class="" style="height:55px"></i><i class="mx" style="height:57px"></i><i class="" style="height:54px"></i><i class="" style="height:47px"></i><i class="" style="height:37px"></i></div></div>
  </div>
  <div class="chrome bot"><span>계절의 변화</span><span>06 / 06</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/monochrome.js"></script>
</body>
</html>
```

---

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

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

```css
/* monochrome — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-3';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/paperlogy/Paperlogy-2ExtraLight.woff2") format("woff2");font-weight:200}
@font-face{font-family:'kp-25';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/noto-sans-kr/NotoSansKR-Thin.woff2") format("woff2");font-weight:100}
@font-face{font-family:'kp-13';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/noto-sans-kr/NotoSansKR-Regular.woff2") format("woff2");font-weight:400}
/* === THEME === */
:root{--stage-bg:#FAFADF;--slide-bg:#FAFADF;
  --kt:'kp-3';--kb:'kp-25';--ka:'kp-13';
  --wt:200;--wb:100}
*{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 === */

/* --- 토큰(8vw = 154px, 6vh = 65px) --- */
:root{--paper:#FAFADF;--p3:#F0F0D4;--warm:#F5F0E4;--ink:#1A1A16;--g2:#5E5E54;--g3:#8A8A80;--px:154px;--sm:cubic-bezier(.16,1,.3,1)}
.slide{color:var(--ink);font-family:'Jost',var(--kb),sans-serif;font-weight:var(--wb)}
.paper{background:var(--paper)}.warm{background:var(--warm)}
.slide>*{position:absolute}
.kick,.chrome,.tag,.meta,.cl,.ml,.gl,.dash,.bt,.src,.rl,.cv,.tm,.th,figcaption{font-family:'JetBrains Mono',var(--kb),monospace;font-weight:400;text-transform:uppercase}
h1,h2,h3,.unit,.fn,.sv,.words{font-family:'Jost',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}
.kick{left:var(--px);top:150px;font-size:24px;letter-spacing:.14em;color:var(--g3)}
.rule{left:var(--px);top:194px;width:36px;height:1px;background:var(--ink)}
.hd{left:var(--px);top:214px;font-size:64px;line-height:1.2;white-space:nowrap}
.dash{color:var(--g3)}
.ml{display:block;font-size:22px;letter-spacing:.14em;color:var(--g3)}
.bl{display:grid;grid-template-columns:1.2em 1fr;align-items:baseline;font-size:29px;line-height:1.6}
.bt{border:1px solid var(--ink);padding:.4em .9em;font-size:24px;letter-spacing:.12em;color:var(--ink);background:none}
.bt:disabled{opacity:.3}

/* --- 크롬 머리·꼬리(1px 검정 선, 표지는 없음) --- */
.chrome{left:var(--px);right:var(--px);display:flex;justify-content:space-between;gap:40px;font-size:22px;letter-spacing:.14em;color:var(--g3)}
.chrome span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chrome.top{top:56px;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.chrome.bot{bottom:56px;padding-top:14px;border-top:1px solid var(--ink)}

/* --- 1. 표지(크롬 없음): 킥커 + 36px 선 → 단원(Jost 200) → 모노 라벨 → 학습 목표 h1(가장 큰 글자, 핵심 낱말 = 굵게) → 테두리 태그 줄 --- */
.k1{top:210px}.r1{top:256px}
.unit{left:var(--px);top:296px;display:flex;align-items:baseline;gap:30px;font-size:64px;line-height:1.2;white-space:nowrap}
.unit span{font:200 48px/1 'Jost',sans-serif;letter-spacing:-.01em;color:var(--g2)}
.gl{left:var(--px);top:440px;font-size:24px;letter-spacing:.14em;color:var(--g3)}
.t1{left:148px;top:486px;font-size:124px;line-height:1.24;white-space:nowrap}
.t1 .gk{font-style:normal;font-family:'Jost',var(--ka),sans-serif;font-weight:400}
.meta{left:var(--px);bottom:120px;display:flex;align-items:center;gap:36px;font-size:22px;letter-spacing:.14em;color:var(--g3)}
.tag{border:1px solid var(--ink);padding:.3em .8em;color:var(--ink);letter-spacing:.12em}

/* --- 2. 만들기: 이미지 자리 속 측정기 그림 + em-dash 정의 | 화살표 없는 흐름도(1px 윗선 칸, 켜지면 짙은 잉크) + 테두리 태그 버튼 --- */
.btns{right:var(--px);top:232px;display:flex;gap:14px}
.cap{left:1000px;right:var(--px);top:306px;font-size:26px;color:var(--g2);text-align:right}
.img{left:var(--px);top:350px;width:760px;padding:14px 50px 8px;border:1px solid var(--ink);background:var(--p3);
  --g-ink:var(--ink);--g-acc:var(--ink);--g-stick:var(--g2);--g-board:var(--paper);--g-ruler:var(--warm);--g-prot:rgba(26,26,22,.04);--g-shadow:var(--g3);--g-font:'Jost',var(--kb),sans-serif;--g-sw:1.5;--g-dim:.18}
.img figcaption{font-size:20px;letter-spacing:.14em;color:var(--g2);text-align:center}
.def{left:var(--px);width:760px;top:866px}
.def .bl{font-size:26px;line-height:1.5;color:var(--g2)}
.flow{left:1000px;right:var(--px);top:356px}
.fs{display:grid;grid-template-columns:110px 1fr;align-items:start;padding:14px 0;border-top:1px solid var(--ink);transition:color .5s}
.fn{font-size:64px;line-height:1;letter-spacing:-.02em}
.fs h3{font-size:38px;line-height:1.25}
.fs p{margin-top:4px;font-size:25px;line-height:1.5;color:var(--g2)}
.slide[data-step]:not([data-step="0"]) .fs:not(.on),.slide[data-step]:not([data-step="0"]) .fs:not(.on) p{color:var(--g3);opacity:.6}

/* --- 3. 숫자와 그래프: 통계 칸 4개(1px 윗선) + 세로 막대(회색 50%, 가장 높은 값만 검정) + 1px 축·기준선, 아래 값 줄 --- */
.stats{left:var(--px);right:var(--px);top:330px;display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.cell{border-top:1px solid var(--ink);padding-top:20px}
.sv{display:block;font-size:92px;line-height:1;letter-spacing:-.03em}
.cell p{margin-top:10px;font-size:27px;line-height:1.4}
.src{display:block;margin-top:6px;font-size:20px;letter-spacing:.12em;color:var(--g3)}
.chart{left:var(--px);right:var(--px);top:584px;display:grid;grid-template-columns:240px 1fr;column-gap:24px}
.plot{height:200px;display:grid;grid-template-columns:repeat(7,1fr);border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bar{display:block;width:56%;background:var(--g3);opacity:.5}
.col.mx .bar{background:var(--ink);opacity:1}
.cv{margin-bottom:6px;font-size:21px;letter-spacing:.06em;color:var(--g3)}
.col.mx .cv{color:var(--ink)}
.rl{align-self:center;font-size:19px;letter-spacing:.12em;color:var(--g3);padding:6px 0}
.rb{align-self:end;padding-bottom:10px}
.row{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;border-bottom:1px dashed rgba(94,94,84,.4);font-size:26px;padding:6px 0}
.tm{font-size:22px;letter-spacing:.06em}

/* --- 4. 비교와 표(따뜻한 크림): 인사이트 카드 둘(16px, Lora 제목 + 아래 em-dash) + 1px 줄 표 | em-dash 남중 + Lora 이탤릭 인용 --- */
.card{background:var(--paper);border-radius:16px;padding:32px 40px;display:flex;flex-direction:column}
.warm .card{background:var(--paper)}
.cl{font-size:22px;letter-spacing:.14em;color:var(--g3)}
.ct{margin-top:12px;font:400 48px/1.2 'Lora',var(--kt),serif}
.cmp{left:var(--px);width:980px;top:330px;height:290px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cb{margin-top:auto}
.tbl{left:var(--px);width:980px;top:660px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--ink);font-size:28px}
.tr.th{font-size:21px;letter-spacing:.12em;color:var(--g3);padding:10px 0}
.lst{left:1220px;right:var(--px);top:330px;display:flex;flex-direction:column;gap:10px}
.qt{left:1220px;right:var(--px);top:640px}
.qt p{font:italic 400 42px/1.35 'Lora',var(--kb),serif}
.qt .ml{margin-top:20px}

/* --- 5. 확인하기: 인사이트 카드 퀴즈(Lora 질문 + em-dash 보기, 정답 = Lora 이탤릭) | em-dash 빈칸(1px 밑줄 칸) + 36px 선 + 낱말 --- */
.quiz{left:var(--px);width:980px;top:320px;bottom:136px;background:var(--warm)}
.q{font-size:48px}
.opts{margin-top:auto;border-top:1px solid var(--ink)}
.opt{width:100%;display:grid;grid-template-columns:1.2em 1fr;align-items:baseline;text-align:left;padding:12px 0;border-bottom:1px solid rgba(26,26,22,.2);font-size:32px}
.opt.right{font-family:'Lora',var(--ka),serif;font-style:italic}
.opt.right .dash{color:var(--ink)}
.opt.wrong{color:var(--g3);text-decoration:line-through;text-decoration-thickness:1px}
.opt:disabled:not(.right){opacity:.55}
.fb{margin-top:14px;min-height:80px;font-size:27px;line-height:1.5;color:var(--g2)}
.rty{align-self:flex-start;margin-top:6px}
.blk{left:1220px;right:var(--px);top:330px;bottom:136px;display:flex;flex-direction:column;gap:14px}
.blank{position:relative;min-width:170px;margin-right:10px;padding:0 10px;border-bottom:1px solid var(--ink);font:400 29px/1.4 'Jost',var(--kb),sans-serif;color:var(--ink);text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;color:var(--g3)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wr{position:static;display:block;margin-top:auto}
.words{font-size:40px;line-height:1.35}

/* --- 요소 등장(명세): [data-anim] + [data-delay] --- */
[data-anim]{opacity:0;transition:opacity .8s var(--sm),transform .8s var(--sm)}
[data-anim="fade-up"]{transform:translateY(32px)}
[data-anim="reveal-right"]{opacity:1;transform:scaleX(0);transform-origin:left}
.visible [data-anim]{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.18s}[data-delay="3"]{transition-delay:.3s}[data-delay="4"]{transition-delay:.44s}[data-delay="5"]{transition-delay:.6s}[data-delay="6"]{transition-delay:.78s}
.visible .fs[data-anim]{transition:opacity .8s var(--sm),transform .8s var(--sm),color .5s}

/* --- 내비: 아래 가운데 작은 점 + 모노 화살표(흐린 회색) --- */
.dk-nav{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:18px}
.dk-dots{display:flex;gap:12px}
.dk-dot{width:8px;height:8px;border-radius:50%;background:var(--g3);opacity:.4}
.dk-dot.on{background:var(--ink);opacity:1}
.dk-prev,.dk-next{width:36px;height:36px;font:400 22px/1 'JetBrains Mono',monospace;color:var(--g3)}
.dk-prev:disabled,.dk-next:disabled{opacity:.3}
/* --- 6. 디자인 안내(크림 종이): 흐름 칸 넷 | 시연 3개 --- */
.g6{left:var(--px);width:880px;top:330px;display:flex;flex-direction:column;gap:14px}
.fs6{display:grid;grid-template-columns:90px 1fr;border-top:1px solid var(--ink);padding-top:12px}
.fs6 .fn{font-size:52px}
.fs6 h3{font-size:34px;line-height:1.2}
.fs6 p{margin-top:4px;font-size:24px;line-height:1.55;color:var(--g2)}
.fs6 b{font-weight:400;color:var(--ink);font-family:'Jost',var(--ka),sans-serif}
.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(--ink)}
.sig6{left:1110px;right:var(--px);top:320px;display:flex;flex-direction:column;gap:10px}
.d6{border-top:1px solid var(--ink);padding-top:12px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:34px}
.d6 .bt{font-size:20px}
.d6 .bt[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.d6 p{margin-top:4px;font-size:21px;line-height:1.45;color:var(--g2)}
.rl6{margin:10px 0 4px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.kick6{font:400 20px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--g3)}
.rl6 i{display:block;flex:none;width:36px;height:2px;background:var(--ink);transform-origin:left}
.rl6 b{line-height:1.1;font:400 32px/1.1 'Jost',var(--ka),sans-serif}
.rl6.play .kick6{animation:mo-fi .8s var(--sm) both}.rl6.play i{animation:mo-rv .8s var(--sm) .3s both}.rl6.play b{animation:mo-up .8s var(--sm) .6s both}
@keyframes mo-fi{from{opacity:0}}
@keyframes mo-rv{from{transform:scaleX(0)}}
@keyframes mo-up{from{opacity:0;transform:translateY(32px)}}
.cd6{margin-top:10px;height:84px;display:flex;flex-direction:column;justify-content:center;padding:0 24px;border:1px dashed var(--g3)}
.cd6 .ct{margin:0;font-size:32px}
.cd6 span:last-child{font-size:20px;color:var(--g2)}
.cd6.play{background:var(--warm);border-color:transparent;border-radius:16px}
.br6{margin-top:8px;height:60px;display:flex;align-items:flex-end;gap:16px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:0 14px}
.br6 i{width:34px;background:var(--g3);opacity:.5}
.br6.play i.mx{background:var(--ink);opacity:1}

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