# editorial-tri-tone — 슬라이드 만들기 지시서 (채팅 AI용)

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

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

## 라이선스

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

- Elice DigitalBaeum Bold: Elice DigitalBaeum — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright (c) 2016-2021 elice. All rights reserved.
  파일: EliceDigitalBaeum_Bold.ttf
- 프리텐다드 Pretendard-Regular: 프리텐다드 — 프리텐다드 (Pretendard) — 길형진 (orioncactus) / 눈누: https://noonnu.cc/font_page/694
  파일: Pretendard-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/editorial-tri-tone.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/editorial-tri-tone.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Elice DigitalBaeum Bold(700) · 본문 프리텐다드 Pretendard-Regular(400))는 공통 CSS가 불러옵니다. `@font-face`를 새로 쓰지 말고, 글꼴은 `var(--kt)`(제목)·`var(--kb)`(본문)·`var(--ka)`(포인트) 변수로만 지정하세요.
6. **글자 크기와 화면 채우기** (슬라이드는 1920×1080 기준으로 그려져 화면 크기에 맞게 통째로 줄어듭니다)
   - 읽어야 하는 글(본문·설명·표 내용·보기)은 **28px 이상**, 보조 글(캡션·주석)은 **22px 이상**으로 씁니다. 창 제목줄·쪽 번호·작은 라벨 같은 장식 글자는 디자인 규칙의 크기를 따릅니다.
   - 창·판·카드가 **화면의 대부분을 채우게** 하세요. 한쪽에 작게 몰리거나 큰 빈 공간이 남으면 안 됩니다. 내용이 적은 장은 글자와 그림을 키우거나 다른 장과 합칩니다.
   - **높이 예산**: 장 제목과 아래 내비를 빼면 본문에 쓸 수 있는 높이는 대략 **650~750px**입니다. 모든 내용이 1920×1080 안에 들어가야 하고, 넘친 부분은 잘려서 보이지 않습니다. 쓰기 전에 줄 수 × 줄 높이(글자 크기의 약 1.5배)로 높이를 어림해 보세요.
   - **카드 규칙**: 한 장에 카드(칸)를 4개 이상 놓으면 카드마다 글은 **3줄 이하**로 줄입니다. 글이 들어가는 칸은 **너비 400px 이상**으로 두고(그림+글을 나란히 놓을 때는 글 칸 기준), 한 줄에 몇 글자밖에 안 들어가게 좁히지 마세요. 카드를 두 줄로 쌓아야 하면 그 줄들의 높이 합이 높이 예산 안에 드는지 확인합니다.
   - 제목은 **두 줄 이내**로 씁니다. 표지 제목은 한 줄에 15자 안팎으로 끊어 줄을 바꾸세요. 글이 창 밖으로 넘치거나 잘리면 글자를 줄이지 말고 문장을 짧게 고칩니다.
   - 한글은 단어 중간에서 줄이 바뀌지 않게(`word-break:keep-all`) 합니다(공통 CSS에 이미 들어 있음).
7. 저작권이 있는 글·그림·사진을 가져오지 마세요. **사용자가 요청하지 않으면 그림 파일(이미지 생성)을 따로 만들지 마세요. 슬라이드에 필요한 그림은 HTML 안에서 SVG·CSS로 그립니다.**

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

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

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

---

## 1. 디자인 규칙 (`editorial-tri-tone` design.md)

````markdown
---
version: alpha
name: Editorial Tri-Tone
description: A literary magazine-meets-annual-report presentation system built on a strict three-color palette — blush pink, golden butter, and deep burgundy wine. Despite having eleven CSS variable names, only three hex values exist in the entire system; every alias is a semantic rename of one of those three. Headlines run Bricolage Grotesque (a variable grotesque with an optical-size axis) at extreme weights and negative letter-spacing. Instrument Serif (italic-cut only) appears as the expressive accent face for chapter numerals, pull-quotes, years, and signatures. JetBrains Mono carries all metadata, labels, and section markers at tight uppercase tracking. The aesthetic is "independent arts publication" — the kind with a colophon, hand-numbered editions, and an editorial desk.

colors:
  pink: "#F2B6C6"
  butter: "#F2D86A"
  burgundy: "#7A1F35"

color-aliases:
  pink-deep: pink
  sky: pink
  cream: butter
  lime: butter
  terracotta: butter
  navy: burgundy
  forest: burgundy
  ink: burgundy

typography:
  display-wordmark:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 300px
    fontWeight: 800
    lineHeight: 0.82
    letterSpacing: -0.04em
  display-closer:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 320px
    fontWeight: 700
    lineHeight: 0.82
    letterSpacing: -0.05em
  display-stat:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 540px
    fontWeight: 700
    lineHeight: 0.78
    letterSpacing: -0.06em
  display-stat-unit:
    fontFamily: "Instrument Serif, serif"
    fontSize: 220px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
  chapter-num:
    fontFamily: "Instrument Serif, serif"
    fontSize: 240px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0
  quote-mark:
    fontFamily: "Instrument Serif, serif"
    fontSize: 200px
    fontWeight: 400
    lineHeight: 0.6
    letterSpacing: 0
  display-xl:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 84px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.02em
  display-lg:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 76px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.02em
  signature:
    fontFamily: "Instrument Serif, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
  endorsement-num:
    fontFamily: "Instrument Serif, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
    color: pink
  timeline-year:
    fontFamily: "Instrument Serif, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
  subhead-serif:
    fontFamily: "Instrument Serif, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0
  lede:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.02em
  cover-pill:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0
  chart-title:
    fontFamily: "Instrument Serif, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
  card-title:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.02em
  quote-heading:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -0.02em
  body-lg:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  body-md:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  label:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.15em
    textTransform: uppercase
  label-wide:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.18em
    textTransform: uppercase
  label-mid:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.12em
    textTransform: uppercase
  label-tight:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.10em
    textTransform: uppercase
  footer:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.12em
    textTransform: uppercase
    opacity: 0.75

spacing:
  slide-pad: 96px
  chrome-gutter: 64px
  section-gap: 48px
  card-pad: 28px 28px 30px
  chart-pad: 48px 48px 56px
  footer-bottom: 36px
  grid-gap: 24px
  endorsement-pad: 20px 0

canvas:
  width: 1920px
  height: 1080px

components:
  pill:
    borderRadius: 999px
    padding: 0.35em 0.9em
    fontFamily: "Bricolage Grotesque, sans-serif"
    fontWeight: 500
    lineHeight: 1.0
  cover-pill:
    borderRadius: 999px
    padding: 16px 38px
    fontSize: 44px
    fontWeight: 500
  closer-pill:
    borderRadius: 999px
    padding: 12px 28px
    fontSize: 22px
  value-card:
    borderRadius: 28px
    padding: 28px 28px 30px
    height: 340px
  value-card-dark:
    background: "{colors.burgundy}"
    color: "{colors.butter}"
  value-card-light:
    background: "{colors.butter}"
    color: "{colors.burgundy}"
  chart-card:
    background: "{colors.butter}"
    color: "{colors.burgundy}"
    borderRadius: 32px
    padding: 48px 48px 56px
  timeline-ribbon:
    background: "{colors.burgundy}"
    color: "{colors.butter}"
    borderRadius: 999px
    padding: 24px 44px
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    letterSpacing: 0.15em
    textTransform: uppercase
  timeline-ribbon-accent:
    fontFamily: "Instrument Serif, serif"
    fontSize: 30px
    fontWeight: 400
    letterSpacing: 0
    textTransform: none
    color: "{colors.pink}"
  footer-chrome:
    position: absolute
    left: 64px
    right: 64px
    bottom: 36px
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 16px
    letterSpacing: 0.12em
    textTransform: uppercase
    opacity: 0.75
  footer-dot:
    width: 8px
    height: 8px
    borderRadius: 999px
    background: currentColor
    opacity-inactive: 0.3
    opacity-active: 1.0
  swatch-circle:
    width: 36px
    height: 36px
    borderRadius: 999px
  stat-breakdown-bar:
    height: 10px
    borderRadius: 999px
    background: "rgba(246,237,220,0.15)"
  stat-breakdown-divider:
    borderTop: "1px solid rgba(246,237,220,0.25)"
  endorsement-divider:
    borderTop: "1px solid rgba(246,237,220,0.30)"
  avatar:
    width: 72px
    height: 72px
    borderRadius: 999px
    background: "{colors.burgundy}"
    border: "3px solid {colors.burgundy}"
  timeline-axis:
    height: 4px
    background: "{colors.burgundy}"
    opacity: 0.15
  timeline-dot:
    width: 28px
    height: 28px
    borderRadius: 999px
    border: "4px solid {colors.butter}"
    background: "{colors.burgundy}"
---

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

Editorial Tri-Tone is a **literary magazine presentation system** built on the strictest possible palette: three hex values, eleven CSS variable names. The naming system reveals editorial intent — `--pink` and `--sky` point at the same blush; `--cream`, `--butter`, `--lime`, and `--terracotta` all resolve to the same golden yellow; `--burgundy`, `--navy`, `--forest`, and `--ink` all collapse to the same deep wine. The aliases exist to communicate the role of the color in context, not to introduce variation.

The typeface stack is a deliberate three-way conversation:
1. **Bricolage Grotesque** — a variable grotesque with an optical-size axis. Used at weights 500, 600, 700, and 800 for all display and body sans text.
2. **Instrument Serif** — used exclusively in weight 400, often in its italic guise. Reserved for chapter numerals, pull-quote marks, timeline years, signatures, endorsement ordinals, and stat percentage symbols.
3. **JetBrains Mono** — all metadata, labels, section markers, footnotes, footer chrome.

The editorial voice is that of an independent magazine with a colophon — the deck's last slide is literally called "Colophon." Section markers use the section sign (§) followed by a number and a title. The tone is measured, literary, and warm rather than corporate or high-energy.

**Key Characteristics:**
- Three-color palette with semantic aliases: blush pink (#F2B6C6), golden butter (#F2D86A), deep burgundy (#7A1F35).
- Mixed typography: Bricolage Grotesque grotesque for display and body; Instrument Serif for expressive accent numerals, quotes, and years; JetBrains Mono for all labels.
- The `em` tag within Bricolage Grotesque headlines always triggers a switch to Instrument Serif italic — the system's primary typographic mix.
- Pills (border-radius 999px) are the universal tag component; used at three different sizes across cover, chart legend, and closer.
- Value cards have a generous 28px border-radius — soft, rounded, not brutalist.
- Dividers on dark surfaces use low-opacity rgba (0.25–0.30) rather than solid colors — whispered separators.
- Footer dot row: a progress indicator using 8px circles at 30% opacity (inactive) and 100% opacity (active).
- The sole SVG chart combines four series types on a single canvas: filled area, vertical bars, connected circles, dotted line.

## Colors

### The Three Actual Colors
Despite many CSS variable names, the palette is:

| Name | Hex | Role |
|---|---|---|
| Blush Pink | #F2B6C6 | Accent / highlight on dark surfaces; stat figure color; quote mark glow |
| Golden Butter | #F2D86A | Warm mid-tone; background for light slides; accent text on dark surfaces |
| Deep Burgundy | #7A1F35 | Primary dark surface; ink color; structural tone |

### Alias Map
All aliases resolve to one of the three values above. The alias name signals context:

| Alias | Points to | Context of use |
|---|---|---|
| `--pink` | #F2B6C6 | Default accent label |
| `--pink-deep` | #F2B6C6 | (unused distinct value — same as pink) |
| `--sky` | #F2B6C6 | Segment D bar in breakdown |
| `--cream` | #F2D86A | Light surface background |
| `--butter` | #F2D86A | Accent text on dark; card backgrounds |
| `--lime` | #F2D86A | Ribbon accent text; kicker label on dark surfaces |
| `--terracotta` | #F2D86A | Italic em highlights in lede or body |
| `--navy` | #7A1F35 | Alternate label for dark surface contexts |
| `--forest` | #7A1F35 | Dark panel or column background |
| `--burgundy` | #7A1F35 | Structural background color |
| `--ink` | #7A1F35 | All text color |


## Typography

### Font Families
- **Bricolage Grotesque**: The primary typeface. Variable with optical-size axis (opsz 12..96) and weights from 400 to 800. The weight range is the expressive tool — 400 for body, 500 for lede, 600 for card titles and quote headers, 700 for section headlines, 800 for the wordmark.
- **Instrument Serif**: Weight 400 only, italic variant loaded. Functions as the expressive counterpoint to Bricolage Grotesque. Never used for body copy; always for large numerals, quotation marks, signatures, years, endorsement ordinals, and the stat percentage symbol. The key insight is that the system never uses Instrument Serif for "normal" running text — only for moments of human expressiveness.
- **JetBrains Mono**: Weights 400 and 500. All labels are uppercase with 0.10–0.18em letter-spacing. Always secondary information: section markers, metadata, footnotes, legend categories, kickers, footer chrome.

### The `em` Rule
Within any Bricolage Grotesque headline, an `<em>` tag triggers a switch to Instrument Serif at weight 400. This is the system's primary in-line typographic mix — a grotesque headline interrupted by a serif aside. Example: "A short trajectory, told in *five stops*." The em portion reads as a quieter, more reflective counterpoint.

### The `b` Rule (Quote Slide Only)
Within Instrument Serif blockquotes, a `<b>` tag triggers a switch back to Bricolage Grotesque weight 600 in burgundy. The reverse of the em rule — a serif quote punctuated by a grotesk emphasis.

### Display Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display-stat}` | 540px | Bricolage Grotesque | 700 | Full-bleed oversized stat or number figure |
| `{typography.display-closer}` | 320px | Bricolage Grotesque | 700 | Jumbo title or closing wordmark |
| `{typography.display-wordmark}` | 300px | Bricolage Grotesque | 800 | Primary wordmark or deck title |
| `{typography.display-stat-unit}` | 220px | Instrument Serif | 400 | Accent symbol alongside a stat figure |
| `{typography.chapter-num}` | 240px | Instrument Serif | 400 | Large chapter or section numeral |
| `{typography.quote-mark}` | 200px | Instrument Serif | 400 | Decorative large quotation mark |
| `{typography.display-xl}` | 84px | Bricolage Grotesque | 700 | Section headline for data or chart layouts |
| `{typography.display-lg}` | 76px | Bricolage Grotesque | 700 | Section headlines |
| `{typography.signature}` | 64px | Instrument Serif | 400 | Signature or sign-off element |
| `{typography.lede}` | 56px | Bricolage Grotesque | 500 | Lede or opening statement |
| `{typography.quote-heading}` | 56px | Bricolage Grotesque | 600 | Panel heading or editorial subhead |
| `{typography.endorsement-num}` | 56px | Instrument Serif | 400 | Endorsement or list ordinals |
| `{typography.timeline-year}` | 56px | Instrument Serif | 400 | Year stamps or large ordinal accents |
| `{typography.subhead-serif}` | 48px | Instrument Serif | 400 | Secondary subheads on dark surfaces |
| `{typography.cover-pill}` | 44px | Bricolage Grotesque | 500 | Large tag cloud or keyword pills |
| `{typography.chart-title}` | 40px | Instrument Serif | 400 | Card or panel title |
| `{typography.card-title}` | 40px | Bricolage Grotesque | 600 | Card or value title |

### Body and Label Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.body-lg}` | 28px | Bricolage Grotesque | 400 | Manifesto right-column body |
| `{typography.body-md}` | 26px | Bricolage Grotesque | 600/400 | Attribution name, endorsement body |
| `{typography.body-sm}` | 24px | Bricolage Grotesque | 400 | Card descriptions, stat annotation, closer index |
| `{typography.label}` | 24px | JetBrains Mono | 400 | Standard section labels (0.15em tracking) |
| `{typography.label-wide}` | 24px | JetBrains Mono | 400 | Kickers on dark slides (0.18em tracking) |
| `{typography.label-mid}` | 24px | JetBrains Mono | 400 | Manifesto bottom meta (0.12em) |
| `{typography.label-tight}` | 24px | JetBrains Mono | 400 | Legend categories, breakdown labels (0.10em) |
| `{typography.footer}` | 16px | JetBrains Mono | 400 | Page footer chrome (0.12em, opacity 0.75) |

### Principles
Bricolage Grotesque's optical-size axis makes the face significantly more expressive at large sizes and more legible at small sizes without changing weight. At 540px and 300px (stat and wordmark), the display renders with wide, open letterforms; at 24px (body), it compresses. Both are weight 700 or 800 at display; both are weight 400 at body. The face is never used in intermediate sizes (48–72px) — that zone belongs to Instrument Serif.

Letter-spacing on Bricolage Grotesque is always negative at display: -0.04em at 300px, -0.05em at 320px, -0.06em at 540px. At body sizes (24–28px), no letter-spacing is applied.

JetBrains Mono label tracking is always positive and varies by use: 0.10em for dense data contexts, 0.12em for secondary meta, 0.15em for standard section labels, 0.18em for headline kickers on dark slides.

## Layout

### Canvas System
Every slide is exactly 1920×1080px. The `deck-stage` custom element handles centering and scaling.

### Gutter System
- **Chrome gutter** (64px left/right): Used by footer chrome and most content edges.
- **Generous slide padding** (96px): Most slides use `padding: 96px 64px` — the top/bottom pad is larger than the sides, giving a portrait-publication feel even on landscape slides.
- **Wide slide padding** (88px top on chart slide): Slight reduction to accommodate the two-column layout.


### Slide Internal Spacing Pattern
Each slide follows a top-to-bottom reading order:
1. Section marker (`§ XX — Title`, JetBrains Mono, 24px, label tracking)
2. Headline or major content
3. Body / grid content
4. Footer meta (absolute, bottom 36px)

## Elevation and Depth

The system uses **no box shadows at all**. Depth comes entirely from:

### Color Surface Contrast
The burgundy/butter/pink trio creates its own depth hierarchy:
- Butter surfaces feel "forward" (warm, light)
- Pink feels "accented" (warm, mid)
- Burgundy feels "recessed" (dark, anchoring)

Alternating surface colors within split slides (cream left / burgundy right on manifesto; lime left / burgundy right on quote) creates depth through edge contrast rather than shadow.

### Opacity Dividers
On dark (burgundy) surfaces, all dividers and structural lines use rgba rather than solid colors:
- Row separators in stat breakdown: `rgba(246,237,220,0.25)`
- Endorsement rows in quote slide: `rgba(246,237,220,0.30)`
- Timeline axis: `opacity: 0.15` on solid burgundy

The cream values (246,237,220) in those rgba strings approximate the butter color at full opacity — dividers feel like recessed etchings rather than drawn lines.

### Chart Card Lift
The chart card (slide 6) achieves its "lifted" feeling through border-radius 32px on a butter card placed over a burgundy background. No shadow — the rounded corner on a contrasting surface signals elevation.

## Shapes and Treatment

### Border Radius Scale
| Value | Use |
|---|---|
| 999px | All pills, timeline ribbon, swatch circles, avatar, breakdown bars, timeline dots, footer dots, chart data circles |
| 32px | Chart card (slide 6) |
| 28px | Value cards (slide 3) |
| 4px | SVG chart bars (rx="4") |
| 0px | Section headlines, grid cells (no rounding) |

The system has a strong binary: either fully rounded (pills, circles) or square (content blocks). The exception is the chart card (32px) and value cards (28px) — large enough radius to feel "soft" but geometric rather than circular.

### Pill System
Pills are the universal label/tag component. Three size variants:
- **Cover pills**: 44px font, 16px 38px padding — large enough to read as headline elements in the tag cloud
- **Standard pills** (section labels, legend items): 22–24px font, 10–12px 24–28px padding
- **Color assignments** alternate: burgundy-bg/pink-text and butter-bg/burgundy-text on cover; burgundy/cream or lime/ink on closer

### SVG Chart (Slide 6)
The inline SVG chart at 720×380 viewBox combines four series types deliberately to demonstrate the range of a single chart surface:
- **Area series** (Series A): Filled path with pink fill at 0.85 opacity, burgundy stroke at weight 3
- **Bar series** (Series C): Burgundy rectangles with rx="4"
- **Connected circle series** (Series B): Butter circles (r=8) with burgundy stroke/fill on a burgundy line at weight 3
- **Dotted line** (Series D): Burgundy dashed stroke (stroke-dasharray="2 10", stroke-linecap="round") at 60% opacity

Y-axis labels are JetBrains Mono 24px at 60% opacity, left-aligned to x=0.

## Do's and Don'ts

### Do
- Treat the three hex values as a closed system. Every element uses pink, butter, or burgundy — no neutrals, no grays, no white.
- Use Instrument Serif only for moments of human expressiveness: numerals, years, signatures, quotation marks, endorsement ordinals. Never for running body text.
- Use the `em` tag in Bricolage Grotesque headlines to trigger the serif switch. This is the system's primary inline mix and its clearest editorial voice.
- Give all label text (JetBrains Mono) positive letter-spacing between 0.10em and 0.18em. Monospace without tracking reads as code, not editorial.
- Alternate surface colors across the two-column split slides. One side is always butter, the other always burgundy.
- Keep body text in Bricolage Grotesque at weights 400 (text) and 500–600 (emphasized labels). The weight axis is the tonal dial.
- Use pills at multiple sizes — the pill is the universal tag and its size signals context: 44px for headline-level categorization, 22–24px for utility labels.
- Section markers follow the pattern `§ NN — Title` in JetBrains Mono — every slide opens with this convention.

### Don't
- Don't introduce a fourth color. The tri-tone constraint is the design premise.
- Don't use Instrument Serif at small sizes or in body paragraphs. It is purely an accent face.
- Don't break the em rule — using Bricolage Grotesque italic instead of Instrument Serif for inline emphasis loses the typographic mix.
- Don't use letter-spacing on Bricolage Grotesque at display sizes — only negative tracking via `letter-spacing: -0.02em` to `-0.06em` depending on size.
- Don't add solid-color dividers on dark (burgundy) surfaces. All structural lines on dark backgrounds must use low-opacity rgba.
- Don't apply box shadows. The system has none. Depth comes from surface contrast and border-radius on contrasting backgrounds.
- Don't round large content containers (section panels, grid backgrounds). Rounding applies only to pill-scale and card-scale elements (value cards, chart card).
- Don't use Bricolage Grotesque weight 800 except in the wordmark. The weight 800 is reserved for the single largest typographic moment.

## Responsive Behavior

This template is designed **exclusively for 1920x1080 presentation display**. The `deck-stage` web component handles viewport scaling via CSS transforms; the 1920x1080 canvas scales proportionally to any screen without layout changes.

### Presenter Behavior
- Slide advancement via keyboard or presentation clicker (handled by `deck-stage.js`).
- No hover states are defined.
- No interactive elements.

### Print / Export
- At 96dpi, 1920x1080 maps to a 20x11.25 inch frame.
- The stat figure at 540px renders at ~405pt — suitable for large-format print.
- The three-color palette is print-safe; burgundy is a deep PMS-range wine tone, butter is a warm yellow, pink is a muted blush — all reproduce well in CMYK offset.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Chinese Face | Weight | Why |
|---|---|---|---|
| Display wordmark / closer / stat (300–540px) | 站酷小薇体 ZCOOL XiaoWei | 400 | A literary decorative serif with the same expressive personality as Bricolage Grotesque + Instrument Serif italic at extreme scale |
| Section headlines (76–84px) | 思源黑体 Noto Sans SC | 700 | The grotesque equivalent in CJK — carries the Bricolage Grotesque structural weight |
| Chapter numerals / quote marks / years (200–240px) | 霞鹜文楷 LXGW WenKai | 400 | Hand-set warmth that matches Instrument Serif's expressive accent role |
| Body paragraph (24–28px) | 思源宋体 Noto Serif SC | 400 | Mincho body voice; literary register |
| Lede / quote-heading (56px) | 思源黑体 Noto Sans SC | 500–600 | Matches Bricolage Grotesque weight 500/600 |
| Mono label / section marker / footer | 思源等宽 Noto Sans Mono CJK SC | 400–500 | Preserves the JetBrains Mono chrome quality for `§ NN — Title` markers |

### Mixed-Content Strategy

Use **Strategy C** — keep Bricolage Grotesque (display, body) and Instrument Serif (italic accents) as the Latin faces and fall back to the Chinese stack only for CJK glyphs. The literary-magazine identity of Editorial Tri-Tone depends on Bricolage Grotesque's optical-size axis and Instrument Serif's italic cut as part of the brand voice; replacing them wholesale with a CJK family would flatten the system into "generic Chinese editorial." Stack:

```css
/* Bricolage Grotesque roles (display, body) */
font-family: 'Bricolage Grotesque', 'Noto Sans SC', sans-serif;
/* Instrument Serif roles (chapter-num, quote-mark, year, signature) */
font-family: 'Instrument Serif', 'LXGW WenKai TC', serif;
/* JetBrains Mono roles (labels, section markers) */
font-family: 'JetBrains Mono', 'Noto Sans Mono CJK SC', monospace;
```

The system's signature `<em>` rule (Bricolage Grotesque → Instrument Serif italic inline) is what carries the editorial tone in Latin. The CJK equivalent: an `<em>` inside a 思源黑体 (Noto Sans SC) headline should switch to **站酷小薇体 (ZCOOL XiaoWei)** — a decorative literary serif with the same softness contrast as Instrument Serif italic. Add a CSS rule:

```css
h1 em, h2 em, .lede em, .quote-heading em {
  font-family: 'Instrument Serif', 'ZCOOL XiaoWei', 'LXGW WenKai TC', serif;
  font-style: italic; /* Latin only — CJK ignores font-style */
}
```

Watch for baseline mismatch at display sizes (300–540px): Bricolage Grotesque at -0.04em to -0.06em tracking sits visually tighter than Noto Sans SC, so a mixed-script wordmark like `INTO 中国` may feel uneven. For hero / wordmark moments, prefer single-script lines and let the second script live on its own line below.

### Loading

Add to the existing Google Fonts `<link>` (or as a second link tag):

```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=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&family=LXGW+WenKai+TC&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
```

ZCOOL XiaoWei is the decorative-terminal serif used for the em-switch role; it's hosted on Google Fonts at weight 400 only.

### Universal CJK Adjustments

These adjustments apply to **every CJK block** in this system, regardless of size or role:

- **Loosen line-height by 0.05–0.08.** CJK glyphs are full-width squares with more visual weight than Latin letterforms; line-heights tuned for Latin (0.78–0.92 on display, 1.4–1.45 on body) read as cramped in Chinese. Bump display to 0.95–1.05 and body to 1.5–1.6.
- **Remove negative letter-spacing on CJK headlines.** Bricolage Grotesque display uses -0.04em to -0.06em tracking, which collides Chinese glyphs into each other. For CJK runs, set `letter-spacing: 0` — or a tiny positive `0.02em` if the headline feels visually packed.
- **Never `text-transform: uppercase` on CJK text.** Chinese has no case; the CSS property does nothing on Han glyphs but will silently break any mixed-script line where the Latin portion was meant to be capitalized.
- **Use Chinese full-width punctuation** (`，。：；！？「」『』（）`) inside Chinese sentences, not the Latin equivalents (`,.:;!?""''()`). Mixing punctuation systems within one sentence reads as a typesetting error.
- **No period (。) at the end of CJK headlines.** Chinese headlines follow the same rule as Latin — title-style lines drop terminal punctuation. Body paragraphs keep their 。
- **Apply Pangu spacing (盘古之白) at the boundary between CJK and Latin runs.** A space (or 0.25em margin) belongs between a Chinese character and an adjacent Latin word or digit, e.g. `2026 年 5 月` not `2026年5月`. Either type the spaces manually or use a `pangu.js`-style auto-spacer.
- **One font per sentence.** Don't switch between Noto Sans SC, Noto Serif SC, and ZCOOL XiaoWei inside the same sentence — pick the face that matches the role (headline = Noto Sans SC, body = Noto Serif SC, em-accent = ZCOOL XiaoWei) and commit to it for the whole run.

### Aesthetic Notes for This System

Editorial Tri-Tone's literary-magazine voice depends on the typographic contrast between Bricolage Grotesque (structural) and Instrument Serif italic (expressive). In Chinese, that same contrast lives in the **思源黑体 ↔ 站酷小薇体** pairing — a clean grotesque set against a literary decorative serif. The em-rule inside headlines should switch from 思源黑体 to **站酷小薇体** specifically (not 霞鹜文楷, which is warmer but less "literary-decorative"); this preserves the typographic mix that defines the system.

For the system's signature display moments — the 300px wordmark, the 540px stat figure, the 240px chapter numeral — Chinese is at its loudest. Reach for **站酷小薇体** when the moment is decorative (a chapter ordinal "第一章" rendered in literary serif) and **思源黑体 weight 700** when the moment is structural (a section headline like "我们的方法"). The 200px quote-mark glyph is harder in Chinese — Chinese quotation marks (「」) don't carry the same decorative weight as Latin 'curly quotes', so consider rendering the entire quote moment in the Latin glyph (using the `Instrument Serif` face on the punctuation character itself) and let the body text below switch to 思源宋体.

The section marker convention `§ NN — Title` works in Chinese: `§ 02 — 我们的承诺`. Keep the section sign and the numeral in JetBrains Mono / Noto Sans Mono CJK SC; the title text can switch to 思源黑体 weight 400 with 0.05em tracking to preserve the chrome quality.

### Known CJK Gap

ZCOOL XiaoWei is the right aesthetic match for the em-switch role, but it ships as **weight 400 only with no italic cut**. Chinese has no italic concept (slanted Han glyphs read as broken, not emphasized), so the lack of italic is fine — but the visual softness contrast that Instrument Serif italic provides in Latin (a slanted, more flowing letterform) cannot be exactly replicated in Chinese. The decorative-terminal serif quality of ZCOOL XiaoWei provides the closest equivalent, but the contrast against 思源黑体 is **face-based, not slant-based**. Decks with heavy reliance on the em-rule should test the visual rhythm in Chinese before committing — if the contrast feels muted, increase the em-portion font-size by 4–8px to compensate.

## Iteration Guide

1. Section labels always use the `§ NN — Title` convention in JetBrains Mono with `{typography.label}` tracking.
2. Every headline with an em/italic moment uses `<em>` to trigger Instrument Serif. Never use `font-style: italic` on Bricolage Grotesque directly.
3. Value card alternation: odd-numbered cards (c1, c3, c5, c7) are dark (burgundy/butter); even-numbered (c2, c4, c6, c8) are light (butter/burgundy).
4. New dark-surface sections use `rgba(246,237,220,0.25)` for dividers — not `{colors.butter}` at full opacity.
5. New pills follow the existing alternation: burgundy-bg/pink-text and butter-bg/burgundy-text for variety in clusters.
6. Adding a chart series: use the four established visual encodings (area, bars, circles, dotted line) before inventing a new one.
7. All section backgrounds must be one of the three palette colors — never mix (no half-pink half-butter).
8. Footer chrome is shared across all slides: `position:absolute; left:64px; right:64px; bottom:36px; font-family:JetBrains Mono; font-size:16px; opacity:0.75`.

## Known Gaps

- The `deck-stage.js` script is an external dependency not documented here.
- The footer dot-row progress indicator (`.footer .dotrow`) is rendered in the HTML but the dots are all styled with class "on" or left as inactive — a presenter would need to update slide state dynamically.
- The SVG chart uses hardcoded paths, coordinates, and placeholder values — no data-binding layer exists.
- The breakdown bars in slide 4 use inline `width: XX%` as a style — percentages must be set manually.
- The timeline stop dots (`.stop .dot`) have `display: none` — they are styled but not visible. A presenter populating this slide would enable them via CSS.
- Instrument Serif italic is loaded as a font variant but is not explicitly called with `font-style: italic` in every context — in some cases the browser selects it from the variable font's italic axis automatically based on surrounding context.
- Color swatch circles on slide 4 reference `--terracotta` and `--sky`, which resolve identically to `--butter` and `--pink` — the visual distinction exists only semantically in the source, not visually.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.bg` — 1·2·3·5·6장 — 예: `<span class="pill bg">`
- `.bt` — 1·5·6장 — 예: `<span class="pill bt">`
- `.chap` — 1장 — 예: `<div class="chap">`
- `.cloud` — 1·5장 — 예: `<div class="cloud">`
- `.foot` — 1·2·3·4·5·6장 — 예: `<div class="foot ">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.lab` — 1장 — 예: `<span class="lab">`
- `.pill` — 1·2·3·5·6장 — 예: `<span class="pill bg">`
- `.pink` — 1장 — 예: `<section class="slide pink">`
- `.sec` — 1·2·3·4·5·6장 — 예: `<div class="sec">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide pink">`
- `.sm` — 1·5·6장 — 예: `<span class="pill bt sm">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.btns` — 2장 — 예: `<div class="btns">`
- `.butter` — 2장 — 예: `<section class="slide butter" data-steps="4">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03…`
- `.cards` — 2장 — 예: `<div class="cards">`
- `.def` — 2장 — 예: `<p class="def">`
- `.dk` — 2·4장 — 예: `<div class="vc st dk" data-s="1">`
- `.fig` — 2장 — 예: `<div class="vc lt fig">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.lt` — 2·4·6장 — 예: `<div class="vc lt fig">`
- `.mono` — 2·4·5장 — 예: `<span class="mono">`
- `.ol` — 2장 — 예: `<button class="pill ol" data-act="reset">`
- `.ord` — 2·4·5·6장 — 예: `<span class="ord">`
- `.ra` — 2장 — 예: `<span class="ra">`
- `.ribbon` — 2장 — 예: `<div class="ribbon">`
- `.rk` — 2장 — 예: `<span class="rk">`
- `.st` — 2장 — 예: `<div class="vc st dk" data-s="1">`
- `.vc` — 2·4·6장 — 예: `<div class="vc lt fig">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.a` — 3·6장 — 예: `<i class="sw a">`
- `.ar` — 3·6장 — 예: `<path class="ar" d="M135,380 L135,170 L265,138.5 L395,114 L525,94.75 L655,82.5 L785,75.50000000000006 L915,84.…`
- `.ax` — 3장 — 예: `<text x="0" y="388" class="ax">`
- `.b` — 3·6장 — 예: `<i class="sw b">`
- `.base` — 3장 — 예: `<line x1="70" x2="980" y1="380" y2="380" class="base"/>`
- `.bn` — 3·6장 — 예: `<rect x="109" y="213.75" width="52" height="166.25" rx="4" class="bn"/>`
- `.br` — 3장 — 예: `<div class="br">`
- `.brk` — 3장 — 예: `<div class="brk">`
- `.bur` — 3장 — 예: `<section class="slide bur">`
- `.bv` — 3장 — 예: `<text x="135" y="201.75" class="bv" text-anchor="middle">`
- `.c` — 3·6장 — 예: `<i class="sw c">`
- `.ccard` — 3장 — 예: `<div class="ccard">`
- `.cp` — 3장 — 예: `<circle cx="135" cy="267.125" r="9" class="cp"/>`
- `.ct` — 3장 — 예: `<span class="ct">`
- `.cv` — 3장 — 예: `<svg class="cv" viewBox="0 0 1000 440">`
- `.kick` — 3·4·5·6장 — 예: `<span class="kick">`
- `.l3` — 3장 — 예: `<h2 class="hd l3">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.lg2` — 3장 — 예: `<div class="lg2">`
- `.ln` — 3·6장 — 예: `<polyline class="ln" points="135,267.125 265,300.375 395,318.75 525,324 655,317 785,297.75 915,262.75"/>`
- `.pv` — 3장 — 예: `<text x="153" y="297.125" class="pv">`
- `.sf` — 3장 — 예: `<b class="sf">`
- `.stat` — 3장 — 예: `<div class="stat">`
- `.sw` — 3장 — 예: `<i class="sw b">`
- `.tv` — 3장 — 예: `<text x="135" y="156" class="tv" text-anchor="middle">`
- `.xs` — 3·6장 — 예: `<span class="pill bg xs">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cc` — 4장 — 예: `<div class="vc dk cc">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.endo` — 4장 — 예: `<div class="endo">`
- `.er` — 4장 — 예: `<div class="er">`
- `.half` — 4·5·6장 — 예: `<div class="half l">`
- `.l` — 4·5·6장 — 예: `<div class="half l">`
- `.qb` — 4장 — 예: `<span class="kick qb">`
- `.qh` — 4장 — 예: `<p class="qh">`
- `.qm` — 4장 — 예: `<b class="qm">`
- `.r` — 4·5·6장 — 예: `<div class="half r">`
- `.split` — 4·5·6장 — 예: `<section class="slide split">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5·6장 — 예: `<p class="bl">`
- `.blank` — 5장 — 예: `<button class="pill blank" data-blank aria-pressed="false">`
- `.bls` — 5장 — 예: `<div class="bls">`
- `.bt5` — 5장 — 예: `<span class="mono bt5">`
- `.c5` — 5장 — 예: `<div class="cloud c5">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.ot` — 5장 — 예: `<span class="ot">`
- `.pk` — 5장 — 예: `<section class="slide split pk">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.row` — 5장 — 예: `<button class="row" data-opt="0">`
- `.rows` — 5장 — 예: `<div class="rows">`
- `.rt` — 5장 — 예: `<button class="pill bt rt" data-act="retry">`
- `.wl` — 5장 — 예: `<span class="mono wl">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.bt6` — 6장 — 예: `<div class="vc d6 c bt6">`
- `.ch6` — 6장 — 예: `<svg class="ch6" id="tt-ch" viewBox="0 0 600 90">`
- `.d6` — 6장 — 예: `<div class="vc lt d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.em6` — 6장 — 예: `<div class="em6" id="tt-em">`
- `.g6` — 6장 — 예: `<div class="g6">`
- `.pl6` — 6장 — 예: `<div class="pl6" id="tt-pill">`
- `.r6` — 6장 — 예: `<div class="bl r6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

**예시 장에는 없지만 CSS에 정의된 클래스**(디자인 규칙에 맞으면 써도 됨): `.yr`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="editorial-tri-tone">
<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=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/editorial-tri-tone.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide pink">
  <div class="sec">§ 01 — 초등 과학 · 6학년 2학기</div>
  <div class="chap"><span>CHAPTER</span><b>3–4</b></div>
  <p class="unit">계절의 변화<span>Sun, Shadow & <em>Temperature</em></span></p>
  <span class="lab">학습 목표</span>
  <h1 class="t1">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <div class="cloud"><span class="pill bg">태양 고도</span><span class="pill bt">그림자 길이</span><span class="pill bg">기온</span><span class="pill bt sm">1단원 · 3~4차시</span></div>
  <div class="foot "><span>00초등학교</span><span>2026</span></div>
</section>
<section class="slide butter" data-steps="4">
  <div class="sec">§ 02 — 측정 준비</div>
  <h2 class="hd">태양 고도 측정기 <em>만들기</em></h2>
  <div class="vc lt fig"><span class="mono">FIG. 01 — 태양 고도 측정기</span><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></div>
  <div class="ribbon"><span class="rk">NOTE</span><span class="ra">막대기의 그림자와 실이 이루는 각 = 태양 고도</span></div>
  <p class="def"><b>태양 고도</b> — 태양이 지표면과 이루는 각</p>
  <div class="cards"><div class="vc st dk" data-s="1"><span class="ord">01</span><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="vc st lt" data-s="2"><span class="ord">02</span><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="vc st dk" data-s="3"><span class="ord">03</span><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="vc st lt" data-s="4"><span class="ord">04</span><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="pill bg" data-act="step">다음 단계 →</button><button class="pill ol" data-act="reset">처음부터</button><p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03 실 묶기&quot;,&quot;04 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  <div class="foot "><span>버튼 규칙 없음 → 알약으로 표현</span><span>1단원 · 3~4차시</span></div>
</section>
<section class="slide bur">
  <div class="sec">§ 03 — 측정 결과</div>
  <h2 class="hd l3">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stat"><span class="kick">남중 시각</span><b class="sf">12:30<em>무렵</em></b><p>태양 고도가 가장 높아요</p></div>
  <div class="brk"><div class="br"><span class="kick">남중 방향</span><b>정남</b><p>남중할 때 태양의 위치 쪽</p></div><div class="br"><span class="kick">최고 기온</span><b>14:30</b><p>기온이 가장 높아요 무렵</p></div><div class="br"><span class="kick">가장 긴 그림자</span><b>9:30</b><p>그림자가 가장 길어요 · 15:30</p></div></div>
  <div class="ccard">
    <div class="lg"><span class="ct">측정 시각별 태양 고도, 그림자 길이, 기온</span><span class="pill bg xs">예시 값</span></div>
    <div class="lg2"><span><i class="sw b"></i>태양 고도(°)</span><span><i class="sw c"></i>그림자 길이(cm)</span><span><i class="sw a"></i>기온(℃)</span></div>
    <svg class="cv" viewBox="0 0 1000 440"><text x="0" y="388" class="ax">0°</text><text x="0" y="300.5" class="ax">20°</text><text x="0" y="213" class="ax">40°</text><text x="0" y="125.5" class="ax">60°</text><text x="0" y="38" class="ax">80°</text><path class="ar" d="M135,380 L135,170 L265,138.5 L395,114 L525,94.75 L655,82.5 L785,75.50000000000006 L915,84.25000000000006 L915,380Z"/><text x="135" y="156" class="tv" text-anchor="middle">22</text><text x="265" y="124.5" class="tv" text-anchor="middle">23.8</text><text x="395" y="100" class="tv" text-anchor="middle">25.2</text><text x="525" y="80.75" class="tv" text-anchor="middle">26.3</text><text x="655" y="68.5" class="tv" text-anchor="middle">27</text><text x="785" y="61.50000000000006" class="tv" text-anchor="middle">27.4</text><text x="915" y="70.25000000000006" class="tv" text-anchor="middle">26.9</text><rect x="109" y="213.75" width="52" height="166.25" rx="4" class="bn"/><text x="135" y="201.75" class="bv" text-anchor="middle">38°</text><rect x="239" y="170" width="52" height="210" rx="4" class="bn"/><text x="265" y="158" class="bv" text-anchor="middle">48°</text><rect x="369" y="139.375" width="52" height="240.625" rx="4" class="bn"/><text x="395" y="127.375" class="bv" text-anchor="middle">55°</text><rect x="499" y="130.625" width="52" height="249.375" rx="4" class="bn"/><text x="525" y="118.625" class="bv" text-anchor="middle">57°</text><rect x="629" y="143.75" width="52" height="236.25" rx="4" class="bn"/><text x="655" y="131.75" class="bv" text-anchor="middle">54°</text><rect x="759" y="174.375" width="52" height="205.625" rx="4" class="bn"/><text x="785" y="162.375" class="bv" text-anchor="middle">47°</text><rect x="889" y="218.125" width="52" height="161.875" rx="4" class="bn"/><text x="915" y="206.125" class="bv" text-anchor="middle">37°</text><polyline class="ln" points="135,267.125 265,300.375 395,318.75 525,324 655,317 785,297.75 915,262.75"/><circle cx="135" cy="267.125" r="9" class="cp"/><text x="153" y="297.125" class="pv">12.9</text><circle cx="265" cy="300.375" r="9" class="cp"/><text x="283" y="330.375" class="pv">9.1</text><circle cx="395" cy="318.75" r="9" class="cp"/><text x="413" y="348.75" class="pv">7</text><circle cx="525" cy="324" r="9" class="cp"/><text x="543" y="354" class="pv">6.4</text><circle cx="655" cy="317" r="9" class="cp"/><text x="673" y="347" class="pv">7.2</text><circle cx="785" cy="297.75" r="9" class="cp"/><text x="803" y="327.75" class="pv">9.4</text><circle cx="915" cy="262.75" r="9" class="cp"/><text x="933" y="292.75" class="pv">13.4</text><line x1="70" x2="980" y1="380" y2="380" class="base"/><text x="135" y="420" class="ax" text-anchor="middle">9:30</text><text x="265" y="420" class="ax" text-anchor="middle">10:30</text><text x="395" y="420" class="ax" text-anchor="middle">11:30</text><text x="525" y="420" class="ax" text-anchor="middle">12:30</text><text x="655" y="420" class="ax" text-anchor="middle">13:30</text><text x="785" y="420" class="ax" text-anchor="middle">14:30</text><text x="915" y="420" class="ax" text-anchor="middle">15:30</text></svg>
  </div>
  <div class="foot "><span>예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span><span></span></div>
</section>
<section class="slide split">
  <div class="half l">
    <div class="sec">§ 04 — 관계 정리</div>
    <h2 class="hd">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
    <div class="cmp"><div class="vc dk cc"><span class="mono">HIGH</span><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="vc lt cc"><span class="mono">LOW</span><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
    <div class="tbl"><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="foot fl"><span>표 규칙 없음 → 2px 버건디 줄으로 표현</span><span></span></div>
  </div>
  <div class="half r">
    <b class="qm">“</b>
    <p class="qh">태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p>
    <span class="kick qb">— 오늘의 정리</span>
    <div class="endo"><span class="kick">남중</span><div class="er"><span class="ord">01</span><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p></div><div class="er"><span class="ord">02</span><p>이때의 태양 고도를 남중 고도라고 해요</p></div></div>
    <div class="foot fr"><span></span><span>00초등학교</span></div>
  </div>
</section>
<section class="slide split pk">
  <div class="half l">
    <div class="sec">§ 05 — 확인하기</div>
    <h2 class="hd">배운 내용을 확인해 볼까요?</h2>
    <span class="mono bt5">빈칸을 눌러 확인해요</span>
    <div class="bls"><p class="bl"><span class="ord">01</span><span><button class="pill blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</span></p><p class="bl"><span class="ord">02</span><span><button class="pill blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</span></p><p class="bl"><span class="ord">03</span><span><button class="pill blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</span></p></div>
    <span class="mono wl">오늘의 낱말</span>
    <div class="cloud c5"><span class="pill bg sm">태양 고도</span><span class="pill bt sm">남중 고도</span><span class="pill bg sm">그림자 길이</span><span class="pill bt sm">기온</span></div>
    <div class="foot fl"><span>빈칸 규칙 없음 → 알약으로 표현</span><span></span></div>
  </div>
  <div class="half r" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <span class="kick">QUESTION</span>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="rows"><button class="row" data-opt="0"><span class="ord">01</span><span class="ot">오전 9시 30분</span></button><button class="row" data-opt="1"><span class="ord">02</span><span class="ot">낮 12시 30분 무렵</span></button><button class="row" data-opt="2"><span class="ord">03</span><span class="ot">오후 3시 30분</span></button></div>
    <p class="fb" data-fb></p>
    <button class="pill bt rt" data-act="retry">다시 풀기 ↺</button>
    <div class="foot fr"><span></span><span>00초등학교</span></div>
  </div>
</section>
<section class="slide split">
  <div class="half l">
    <div class="sec">§ 06 — 디자인 안내</div>
    <h2 class="hd">이 디자인 사용 설명서</h2>
    <div class="g6"><div class="bl r6"><span class="ord">01</span><div><h3>한눈에</h3><p>문학 잡지 + 연차보고서. 색은 <b>블러시 핑크 · 버터 · 버건디 단 셋</b> — 회색도 흰색도 없어요. 숫자·연도·서수는 세리프로.</p></div></div><div class="bl r6"><span class="ord">02</span><div><h3>색</h3><p><span class="sw6"><span><i style="background:#F2B6C6"></i>블러시 핑크</span><span><i style="background:#F2D86A"></i>버터</span><span><i style="background:#7A1F35"></i>버건디</span></span></p></div></div><div class="bl r6"><span class="ord">03</span><div><h3>글꼴</h3><p>제목·본문 Bricolage Grotesque → Elice DigitalBaeum Bold / 프리텐다드 Pretendard-Regular<br>숫자·<em>강조</em> Instrument Serif · 라벨 JetBrains Mono</p></div></div><div class="bl r6"><span class="ord">04</span><div><h3>이렇게 쓰면 좋아요</h3><p>결과 보고, 한 해 활동 돌아보기처럼 숫자가 주인공인 수업. 장마다 바탕 한 색, 나눌 땐 분할 장으로.</p></div></div></div>
    <div class="foot fl"><span>00초등학교</span><span></span></div>
  </div>
  <div class="half r">
    <span class="kick">대표 장치 — 눌러 보세요</span>
    <div class="vc lt d6 a"><div class="dh"><h3>알약 교대</h3><button class="pill xs bg" data-demo="#tt-pill" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>알약은 버건디/핑크 ↔ 버터/버건디를 번갈아 써요.</p><div class="pl6" id="tt-pill"><span class="pill sm bg">태양 고도</span><span class="pill sm bt">그림자 길이</span><span class="pill sm bg">기온</span></div></div>
    <div class="vc lt d6 b"><div class="dh"><h3>세리프 이탤릭 강조</h3><button class="pill xs bg" data-demo="#tt-em" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>제목 속 &lt;em&gt;은 Instrument Serif 이탤릭으로 바뀌어요.</p><div class="em6" id="tt-em">Sun, Shadow &amp; <i>Temperature</i></div></div>
    <div class="vc d6 c bt6"><div class="dh"><h3>차트 겹 층</h3><button class="pill xs bg" data-demo="#tt-ch" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>버건디 막대 위에 점 이은 선과 핑크 채운 영역을 겹쳐요.</p><svg class="ch6" id="tt-ch" viewBox="0 0 600 90"><path class="ar" d="M30 90 L30 50 L120 40 L210 30 L300 24 L390 20 L480 22 L570 30 L570 90Z"/><rect x="18" y="40.6" width="26" height="49.4" rx="4" class="bn"/><rect x="108" y="27.599999999999994" width="26" height="62.400000000000006" rx="4" class="bn"/><rect x="198" y="18.5" width="26" height="71.5" rx="4" class="bn"/><rect x="288" y="15.899999999999991" width="26" height="74.10000000000001" rx="4" class="bn"/><rect x="378" y="19.799999999999997" width="26" height="70.2" rx="4" class="bn"/><rect x="468" y="28.9" width="26" height="61.1" rx="4" class="bn"/><rect x="558" y="41.9" width="26" height="48.1" rx="4" class="bn"/><polyline class="ln" points="30,20 120,40 210,52 300,56 390,50 480,38 570,18"/></svg></div>
    <div class="foot fr"><span></span><span>06 / 06</span></div>
  </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/editorial-tri-tone.js"></script>
</body>
</html>
```

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* --- 세 가지 색(별칭은 역할 이름일 뿐) --- */
:root{--pink:#F2B6C6;--butter:#F2D86A;--bur:#7A1F35;--etch:rgba(246,237,220,.30)}
.slide{font-family:'Bricolage Grotesque',var(--kb),sans-serif;font-weight:var(--wb);color:var(--bur)}
.slide>*,.half>*{position:absolute}
.pink{background:var(--pink)}.butter{background:var(--butter)}.bur{background:var(--bur);color:var(--butter)}
.slide em{font-family:'Instrument Serif',var(--kt),serif;font-style:italic;font-weight:400;letter-spacing:0}
.sec,.foot,.kick,.rk,.mono,.lab{font-family:'JetBrains Mono',var(--kb),monospace;font-weight:400;text-transform:uppercase}
.sec{left:64px;top:84px;font-size:24px;letter-spacing:.15em}
.foot{left:64px;right:64px;bottom:36px;display:flex;justify-content:space-between;gap:30px;font-size:20px;letter-spacing:.08em;opacity:.75}
.ord,.yr{font-family:'Instrument Serif',serif;font-weight:400}
.mono{font-size:22px;letter-spacing:.12em}
.kick{font-size:22px;letter-spacing:.18em;color:var(--pink)}
.hd,h3,.q,.unit,.t1,.qh{font-family:'Bricolage Grotesque',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}
.hd{left:64px;right:64px;top:140px;font-size:76px;line-height:1.1}
.pill{display:inline-block;border-radius:999px;padding:14px 36px;font:500 40px/1.1 'Bricolage Grotesque',var(--kb),sans-serif}
.pill.bg{background:var(--bur);color:var(--pink)}
.pill.bt{background:var(--butter);color:var(--bur)}
.pill.ol{box-shadow:inset 0 0 0 3px var(--bur);color:var(--bur)}
.pill.sm{font-size:30px;padding:10px 26px}
.pill.xs{font-size:22px;padding:6px 18px}
.pill:disabled{opacity:.35}
.vc{border-radius:28px}
.vc.dk{background:var(--bur);color:var(--butter)}
.vc.lt{background:var(--pink);color:var(--bur)}

/* --- 1. 표지(핑크): § 01 + 장 번호(Instrument 240px) + 단원(+ em 영문) + 라벨 + 학습 목표(가장 큰 글자) + 알약 태그 구름 --- */
.chap{right:64px;top:64px;text-align:right}
.chap span{display:block;font:400 22px/1 'JetBrains Mono',monospace;letter-spacing:.18em}
.chap b{display:block;font:400 220px/.9 'Instrument Serif',serif}
.unit{left:60px;top:190px;display:flex;align-items:baseline;gap:30px;font-size:80px;line-height:1.1;white-space:nowrap}
.unit span{font:700 56px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.lab{left:64px;top:380px;font-size:24px;letter-spacing:.15em}
.t1{left:56px;top:426px;font-size:124px;line-height:1.14;white-space:nowrap}
.t1 .gk{font-style:normal}
.cloud{left:64px;right:64px;top:770px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}

/* --- 2. 흐름(버터): 핑크 값 카드 속 측정기 그림 + 타임라인 리본 | 정의 + 값 카드 4단계(버건디 ↔ 핑크, 켜지면 또렷) + 알약 버튼 --- */
.fig{left:64px;top:270px;width:860px;padding:18px 32px 10px;
  --g-ink:var(--bur);--g-acc:var(--bur);--g-stick:var(--bur);--g-board:var(--butter);--g-ruler:var(--butter);--g-prot:rgba(242,216,106,.7);--g-shadow:var(--bur);--g-font:'Bricolage Grotesque',var(--kb),sans-serif;--g-sw:2.5}
.ribbon{left:64px;width:860px;top:870px;display:flex;align-items:center;gap:26px;background:var(--bur);color:var(--butter);border-radius:999px;padding:18px 36px}
.rk{flex:none;font-size:22px;letter-spacing:.15em}
.ra{font-size:30px;color:var(--pink);font-family:'Instrument Serif',var(--kt),serif}
.def{left:990px;right:64px;top:270px;font-size:28px;line-height:1.45}
.def b{font-weight:600}
.cards{left:990px;right:64px;top:330px;display:flex;flex-direction:column;gap:14px}
.st{padding:14px 26px;display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:baseline}
.slide[data-step]:not([data-step="0"]) .st:not(.on){opacity:.35}
.st .ord{font-size:52px;line-height:1}
.st.dk .ord{color:var(--pink)}
.st h3{font-size:38px;line-height:1.1}
.st p{margin-top:2px;font-size:26px;line-height:1.4}
.btns{left:990px;right:64px;top:850px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.btns .pill{font-size:30px;padding:12px 30px}
.cap{width:100%;font-size:26px}

/* --- 3. 숫자와 그래프(버건디): 큰 숫자 + 세리프 단위 + 구분 줄(rgba .25) | 버터 차트 카드(32px) --- */
.l3{right:900px;font-size:64px;color:var(--butter)}
.stat{left:64px;top:330px;width:780px}
.sf{display:flex;align-items:baseline;gap:14px;margin-top:6px;font:700 220px/.9 'Bricolage Grotesque',var(--kt),sans-serif;letter-spacing:-.04em;color:var(--pink)}
.sf em{font-size:72px;color:var(--butter)}
.stat p{margin-top:10px;font-size:28px;line-height:1.45}
.brk{left:64px;width:780px;top:640px;display:flex;flex-direction:column}
.br{display:grid;grid-template-columns:220px 170px 1fr;gap:16px;align-items:baseline;padding:12px 0;border-top:1px solid rgba(246,237,220,.25)}
.br b{font-family:'Bricolage Grotesque',var(--kt),sans-serif;font-weight:var(--wt);font-size:40px;color:var(--pink)}
.br p{font-size:26px;line-height:1.35}
.ccard{left:900px;right:64px;top:140px;bottom:100px;background:var(--butter);color:var(--bur);border-radius:32px;padding:34px 40px 26px;display:flex;flex-direction:column;gap:10px}
.lg{display:flex;justify-content:space-between;align-items:center}
.ct{font-family:'Instrument Serif',var(--kt),serif;font-size:36px}
.lg2{display:flex;flex-wrap:wrap;gap:8px 26px;font:400 22px 'JetBrains Mono',var(--kb),monospace;letter-spacing:.06em}
.sw{display:inline-block;width:28px;height:28px;border-radius:999px;margin-right:10px;vertical-align:-7px}
.sw.b{background:var(--bur)}.sw.c{background:var(--butter);box-shadow:inset 0 0 0 4px var(--bur)}.sw.a{background:var(--pink);box-shadow:inset 0 0 0 3px var(--bur)}
.cv{flex:1;min-height:0;width:100%}
.cv .ax{font:400 22px 'JetBrains Mono',monospace;fill:var(--bur);opacity:.6}
.cv .base{stroke:var(--bur);stroke-width:2;opacity:.4}
.cv .ar{fill:var(--pink);fill-opacity:.85;stroke:var(--bur);stroke-width:3}
.cv .tv{font:400 30px 'Instrument Serif',serif;fill:var(--bur)}
.cv .bn{fill:var(--bur)}
.cv .bv{font:400 22px 'JetBrains Mono',monospace;fill:var(--bur)}
.cv .ln{fill:none;stroke:var(--bur);stroke-width:3}
.cv .cp{fill:var(--butter);stroke:var(--bur);stroke-width:3}
.cv .pv{font:400 22px 'JetBrains Mono',monospace;fill:var(--bur)}

/* --- 4. 분할 장: 왼쪽 버터(값 카드 둘 + 2px 버건디 줄 표) | 오른쪽 버건디(200px 따옴표 + 인용 머리글 + 서수 줄, rgba 구분선) --- */
.split{background:var(--butter)}
.split.pk{background:var(--pink)}
.half{top:0;bottom:0}
.half.l{left:0;width:1080px}
.half.r{left:1080px;right:0;background:var(--bur);color:var(--butter)}
.half.l .hd{right:40px;font-size:50px;white-space:nowrap}
.cmp{left:64px;right:64px;top:270px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cc{padding:24px 28px;display:flex;flex-direction:column;gap:6px}
.cc h3{margin:6px 0 4px;font-size:38px;line-height:1.1}
.cc p{font-size:28px;line-height:1.45}
.tbl{left:64px;right:64px;top:590px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:12px 0;border-bottom:2px solid var(--bur);font-size:28px;line-height:1.35}
.tr.th{font:400 22px 'JetBrains Mono',var(--kb),monospace;letter-spacing:.1em}
.tr span:first-child{font-family:'Instrument Serif',var(--kb),serif;font-size:32px}
.tr.th span:first-child{font:400 22px 'JetBrains Mono',var(--kb),monospace}
.qm{left:64px;top:40px;font:400 200px/1 'Instrument Serif',serif;color:var(--pink)}
.qh{left:64px;right:64px;top:240px;font-size:52px;line-height:1.25}
.qb{left:64px;top:500px}
.endo{left:64px;right:64px;top:590px;display:flex;flex-direction:column}
.er{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:baseline;padding:16px 0;border-top:1px solid var(--etch)}
.er .ord{font-size:56px;line-height:1;color:var(--pink)}
.er p{font-size:28px;line-height:1.45}
.half .foot{left:64px;right:64px}

/* --- 5. 분할 장: 왼쪽 핑크(서수 빈칸 + 낱말 알약) | 오른쪽 버건디(서수 줄 퀴즈, 정답 = 핑크 알약) --- */
.bt5{left:64px;top:280px}
.bls{left:64px;right:64px;top:326px;display:flex;flex-direction:column}
.bl{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:center;padding:14px 0;border-top:2px solid var(--bur);font-size:30px;line-height:1.5}
.bl .ord{font-size:52px;line-height:1}
.blank{position:relative;min-width:180px;margin-right:10px;padding:4px 22px;font-size:28px;background:var(--butter);color:var(--bur);text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--bur);color:var(--pink)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{left:64px;top:770px}
.c5{top:816px}
.half.r .kick{left:64px;top:84px}
.q{left:64px;right:64px;top:150px;font-size:54px;line-height:1.2}
.rows{left:64px;right:64px;top:320px;border-top:1px solid var(--etch)}
.row{width:100%;display:flex;align-items:center;gap:26px;text-align:left;padding:16px 22px;border-bottom:1px solid var(--etch)}
.row .ord{font-size:52px;line-height:1;color:var(--pink);min-width:60px}
.row .ot{font-size:34px}
.row.right{background:var(--pink);color:var(--bur);border-radius:999px;border-color:transparent}
.row.right .ord{color:var(--bur)}
.row:disabled:not(.right){opacity:.5}
.fb{left:64px;right:64px;top:700px;font-size:30px;line-height:1.5;color:var(--pink)}
.rt{left:64px;top:860px}

/* --- 내비: 하단 가운데 8px 점(비활성 30%) + 작은 원 화살표 --- */
.dk-nav{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;color:var(--bur)}
[data-slide="3"] .dk-nav{color:var(--butter);left:1380px}
[data-slide="4"] .dk-nav,[data-slide="5"] .dk-nav{left:1440px;color:var(--butter)}
.dk-dots{display:flex;gap:12px}
.dk-dot{width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.3}
.dk-dot.on{opacity:1}
.dk-prev,.dk-next{width:44px;height:44px;border-radius:999px;box-shadow:inset 0 0 0 2px currentColor;font-size:20px;color:inherit}
.dk-prev:disabled,.dk-next:disabled{opacity:.25}
/* --- 6. 디자인 안내(분할): 왼쪽 버터 서수 줄 | 오른쪽 버건디 값 카드 시연 3개 --- */
.g6{left:64px;right:64px;top:250px;display:flex;flex-direction:column}
.r6{grid-template-columns:80px 1fr;align-items:baseline;padding:16px 0}
.r6 h3{font-size:34px;line-height:1.2}
.r6 p{margin-top:4px;font-size:24px;line-height:1.5}
.r6 b{font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:-6px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--bur)}
.half.r>.kick{left:64px;top:84px}
.d6{left:64px;right:64px;height:220px;padding:18px 28px}
.d6.a{top:140px}.d6.b{top:384px}.d6.c{top:628px;height:240px}
.bt6{background:var(--butter);color:var(--bur)}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:34px}
.d6 p{margin-top:4px;font-size:22px;line-height:1.4}
.pill.xs[aria-pressed="true"]{background:var(--butter);color:var(--bur)}
.pl6{margin-top:12px;display:flex;gap:12px;flex-wrap:wrap}
.pl6 .pill{font-size:26px;padding:8px 22px}
.pl6:not(.play) .pill{background:var(--bur);color:var(--pink)}
.em6{margin-top:14px;font:700 44px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}
.em6.play i{font-family:'Instrument Serif',serif;font-weight:400;font-size:52px}
.em6 i{font-style:normal}
.em6.play i{font-style:italic}
.ch6{margin-top:12px;width:100%;height:90px}
.ch6 .bn{fill:var(--bur)}
.ch6 .ar{fill:var(--pink);stroke:var(--bur);stroke-width:3;opacity:0}
.ch6 .ln{fill:none;stroke:var(--bur);stroke-width:3;opacity:0}
.ch6.play .ar{opacity:.85}.ch6.play .ln{opacity:1}
[data-slide="6"] .dk-nav{left:1440px;color:var(--butter)}

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