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

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

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

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

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

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

## 라이선스

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

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

````markdown
---
version: alpha
name: Broadside
description: A protest-poster editorial system built on massive Barlow type and a single fire-orange environment color. The aesthetic is "ink on fire" — dark slides for documentation, orange slides for declaration. Display type is enormous (13vw, roughly 187px at 1440 width) in weight 900 lowercase, treating words as graphic elements rather than reading copy. The cultural reference is broadside printing, SPACE10 reports, and Wim Crouwel grids reinterpreted with one loud color and zero decoration.

colors:
  ink-black: "#111111"
  ink-black-alt: "#1A1A18"
  fire-orange: "#E85D26"
  cream: "#F0ECE5"
  cream-muted: "#888880"
  cream-hint: "#505048"
  border-dark: "#282826"
  ink-on-orange-muted: "rgba(17, 17, 17, 0.75)"
  ink-on-orange-hint: "rgba(17, 17, 17, 0.55)"
  ink-on-orange-faint: "rgba(17, 17, 17, 0.40)"
  ink-on-orange-border: "rgba(17, 17, 17, 0.20)"

color-aliases:
  c-bg: ink-black
  c-bg-alt: ink-black-alt
  c-bg-light: ink-black            # Broadside collapses "light" → dark; there are no cream slides
  c-bg-orange: fire-orange
  c-fg: cream
  c-fg-2: cream-muted
  c-fg-3: cream-hint
  c-accent: fire-orange
  c-border: border-dark

typography:
  display:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "13vw"
    fontWeight: 900
    lineHeight: 0.88
    letterSpacing: -0.04em
  h1:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "7.5vw"
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.03em
  h2:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "4.5vw"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  h3:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "2.8vw"
    fontWeight: 600
    lineHeight: 1.2
  lead:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "1.6vw"
    fontWeight: 400
    lineHeight: 1.5
  body:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "1.2vw"
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "0.9vw"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "IBM Plex Mono, monospace"
    fontSize: "0.72vw"
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.14em
    textTransform: uppercase
  stat-value:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "5.5vw"
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.04em
  quote-mark:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "10vw"
    fontWeight: 900
    lineHeight: 0.6
  quote-text:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "3.8vw"
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.02em
  fadelist-item:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "7.5vw"
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.03em
  fadelist-title:
    fontFamily: "Barlow, Noto Sans SC, sans-serif"
    fontSize: "10.5vw"
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.04em

spacing:
  pad-x: "5.5vw"
  pad-y: "5.5vh"
  gap-lg: "3.5vh"
  gap-md: "2vh"
  gap-sm: "1vh"

canvas:
  width: 100vw
  height: 100vh

motion:
  ease-slide: "cubic-bezier(0.77, 0, 0.175, 1)"
  dur-slide: "0.8s"
  ease-enter: "cubic-bezier(0.16, 1, 0.3, 1)"
  dur-enter: "0.5s"

components:
  slide-chrome:
    layout: "flex row, justify space-between"
    paddingBottom: "{spacing.gap-sm}"
    borderBottom: "1px solid {colors.border-dark}"
    marginBottom: "{spacing.gap-md}"
    description: "Top chrome bar carrying section label on left, slide number/meta on right. Suppressed on cover, chapter, quote, and end slides."
  slide-foot:
    layout: "flex row, justify space-between"
    paddingTop: "{spacing.gap-sm}"
    borderTop: "1px solid {colors.border-dark}"
    marginTop: "{spacing.gap-md}"
    description: "Bottom chrome bar, mirrors top chrome. Same suppression rules."
  rule:
    width: 36px
    height: 2px
    background: "{colors.fire-orange}"
    description: "Stub accent rule. On orange slides this flips to {colors.ink-black}."
  rule-full:
    width: "100%"
    height: 2px
    background: "{colors.border-dark}"
  kicker:
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: 0.14em
    textTransform: uppercase
    color: "{colors.fire-orange}"
    description: "Eyebrow above headlines. Orange on dark; dark-ink-at-55%-opacity on orange."
  tag:
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: 0.14em
    textTransform: uppercase
    color: "{colors.fire-orange}"
    border: "1px solid {colors.fire-orange}"
    padding: "0.3em 0.8em"
    description: "Bordered mono tag. On orange slides flips to dark ink with 40%-opacity dark border."
  broadside-num:
    fontFamily: "IBM Plex Mono, monospace"
    fontSize: "1.1vw"
    fontWeight: 500
    letterSpacing: 0.1em
    color: "rgba(17, 17, 17, 0.45)"
    description: "Catalogue-style slide number, typically anchored top-left on orange slides. On dark slides, color shifts to {colors.cream-hint}."
  stat-card:
    borderTop: "1px solid {colors.border-dark}"
    padding: "{spacing.gap-md} {spacing.gap-md} {spacing.gap-md} 0"
    description: "Top-border-only data card. Big orange numeral above body label above mono note."
  bullet-marker:
    content: "/"
    color: "{colors.fire-orange}"
    fontFamily: "IBM Plex Mono, monospace"
    fontWeight: 700
    description: "Slash glyph rendered via ::before on every bullet item. Orange on dark, dark-at-45%-opacity on orange."
  compare-panel-left:
    paddingRight: "calc({spacing.pad-x} * 0.55)"
    borderRight: "1px solid {colors.border-dark}"
  compare-panel-right:
    paddingLeft: "calc({spacing.pad-x} * 0.55)"
  compare-panel-orange:
    background: "{colors.fire-orange}"
    description: "Right-half panel filled with fire orange — the 'after' or payoff side in compare layouts."
  bar-track:
    height: "30vh"
    borderLeft: "1px solid {colors.border-dark}"
    description: "Vertical bar chart container. Bars are cream-hint by default; one bar per chart gets the .accent class for fire orange."
  bar-fill:
    background: "{colors.cream-hint}"
  bar-fill-accent:
    background: "{colors.fire-orange}"
  img-placeholder:
    height: "55vh"
    background: "rgba(255, 255, 255, 0.04)"
    border: "1px dashed {colors.border-dark}"
    textTransform: uppercase
    letterSpacing: 0.12em
    description: "Dashed-border placeholder shown when no image is wired. Same 55vh footprint as a real img."
  fadelist-stack:
    description: "Vertical stack of three display-weight words, opacities 1.0 / 0.5 / 0.22 top-to-bottom. The SPACE10 'before/during/after' treatment."
---

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

Broadside is a **protest-poster editorial system**. The defining premise: type is so large it stops behaving as text and starts behaving as graphic primitive. Display sizes at `13vw` (`{typography.display}`) put a single word at roughly 187px on a 1440-wide screen — wide enough that the eye scans letterforms before reading. This is the system's primary expressive instrument.

The typeface stack is monolithic. **Barlow** carries every text role from `{typography.display}` down to `{typography.body}` — there is no serif companion, no script accent, no secondary display face. The expressive range is achieved entirely through weight (400 to 900) and size, not face contrast. **IBM Plex Mono** is the only secondary face and it appears only in chrome: slide numbers, kickers, labels, tags, captions, and the bullet-list slash markers. **Noto Sans SC** sits in every font-family stack as the CJK fallback at matching weights. The voice is uniform, heavy, and lowercase — *Broadside does not use uppercase headlines.* That is a meaningful inversion of the brutalist norm.

The palette functions in two distinct registers. The **dark register** uses near-black canvas `{colors.ink-black}` with cream text `{colors.cream}` and `{colors.fire-orange}` as the singular accent — the orange is used only for emphasis (kickers, accent stats, bullet markers, the leading bar). The **orange register** flips the relationship entirely: `{colors.fire-orange}` becomes the full slide background, and the same dark `#111111` ink is used for headlines and body. There is no light/cream slide variant — the `.light` class is intentionally aliased to dark in the source. Cover and chapter slides default to the orange register; content slides default to dark.

Depth is **flat**. There are no drop shadows, no elevation tokens, no soft surfaces. Hierarchy is constructed entirely from type weight, type size, and 1px hairline dividers. The `slide-chrome` and `slide-foot` borders, the `stat-card` top borders, and the `compare-panel` divider are the system's only depth signals. Everything sits on a single plane.

**Density philosophy: low to medium.** Broadside is built for negative space. A correctly composed slide pairs one massive display moment with a 1–2 line caption and nothing else. Bullet lists are explicitly capped at three items — the system prizes density of impact over density of information. A slide that feels broken in this system is one where four columns of body copy compete for attention; the correct density is one statement, one rule, breathing room. Cover, chapter, and quote slides take this furthest, suppressing chrome entirely and leaving the type alone in the field.

**Key Characteristics:**
- Massive Barlow display type at weight 900 in **lowercase** — never uppercase on display elements.
- Two-register color system: dark slides with cream text, or orange slides with dark ink. No cream/white slides exist.
- `{colors.fire-orange}` is both accent (on dark) and environment (on orange) — never a secondary color, always *the* color.
- Single-typeface system on Barlow + IBM Plex Mono for chrome only. No serif, no script, no third face.
- 1px hairline dividers (`{colors.border-dark}` on dark; `rgba(17,17,17,0.2)` on orange) provide all hierarchy structure.
- Mono kickers, mono tags, mono catalogue numbers — the chrome voice is always IBM Plex Mono uppercase.
- Bullet lists use `/` glyph in mono as the marker, capped at three items per list.
- Flat plane — no shadows, no rounded surfaces, no gradient backgrounds.
- `{spacing.pad-x}` of 5.5vw + `{spacing.pad-y}` of 5.5vh creates a generous frame; type fills the remaining space.

## Colors

### The Two Registers
Broadside operates on a binary surface system. Every slide is either **dark** (near-black background, cream text, orange as singular accent) or **orange** (fire-orange background, dark-ink text, dark-ink as the muted-emphasis tone). There is no cream/paper register — the `.light` class is aliased to dark in the source. Choose one register per slide and commit to it.

### Palette
- **Ink Black** (`{colors.ink-black}` — #111111): The dark register's primary canvas, and the primary text color on orange slides. Slightly softer than pure black but reads as black. This is the universal "ink" of the system.
- **Ink Black Alt** (`{colors.ink-black-alt}` — #1A1A18): A secondary surface for the dark register, used when a region needs to feel slightly raised from the base canvas without breaking the flat plane.
- **Fire Orange** (`{colors.fire-orange}` — #E85D26): The signature. On dark slides it is the accent — kickers, accent stat values, bullet markers, the leading bar in a chart, the orange opening quote mark. On orange slides it is the entire environment. Saturation is high but the hue is warm rather than electric; it reads as protest poster, not safety vest.
- **Cream** (`{colors.cream}` — #F0ECE5): Primary text color on dark slides. Warm off-white, never pure white — the warmth softens the dark canvas and signals an editorial register.
- **Cream Muted** (`{colors.cream-muted}` — #888880): Secondary text on dark slides — supporting body, sub-headings, the muted half of a comparison.
- **Cream Hint** (`{colors.cream-hint}` — #505048): Tertiary text on dark — chart axis labels, source notes, slide numbers when not in mono context.
- **Border Dark** (`{colors.border-dark}` — #282826): The 1px divider color on dark slides. Barely visible against the canvas; provides structure without drawing attention.
- **Ink-on-orange overlays**: Dark ink at four opacities (75% / 55% / 40% / 20%) for body, hint, label, and border treatments on orange slides. These are the orange register's "muted" equivalents.

### Defaults
- **Default surface for content slides**: `{colors.ink-black}` (dark register).
- **Default surface for cover, chapter, statement-payoff, and section-divider slides**: `{colors.fire-orange}` (orange register).
- **Default headline color on dark surfaces**: `{colors.cream}`.
- **Default headline color on orange surfaces**: `{colors.ink-black}`.
- **Default body text color on dark surfaces**: `{colors.cream}`.
- **Default body text color on orange surfaces**: `rgba(17, 17, 17, 0.75)`.
- **Default accent color on dark surfaces**: `{colors.fire-orange}` — used for kickers, accent stat values, bullet markers, the lead bar in a chart, and the opening quote mark.
- **Default accent color on orange surfaces**: `{colors.ink-black}` — the dark ink itself becomes the contrast pop.
- **Default chrome border color**: `{colors.border-dark}` on dark; `rgba(17, 17, 17, 0.2)` on orange.

The orange register has no third color. When emphasis is needed on an orange slide, use weight or opacity contrast on the existing ink, not a new hue. Introducing a second accent color breaks the system.

## Typography

### Font Family
The system is monolingual on **Barlow** (with Noto Sans SC as the CJK fallback for identical role coverage). Every display, heading, lead, body, and caption token uses Barlow. The only secondary face is **IBM Plex Mono**, which is reserved entirely for chrome: slide numbers, kickers, tags, labels, captions in chart axes, bullet-list markers, image captions, and source notes. The contrast between Barlow's tight grotesque density and IBM Plex Mono's even monospace is the system's secondary typographic rhythm; the primary rhythm is Barlow's own weight and size axis.

Italic is not used. Underline is not used. The only emphasis mechanisms are weight, size, and color (orange accent on dark, or weight-only on orange).

### Display, Heading, and Body Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display}` | 13vw | Barlow | 900 | Cover-scale display — the single dominant element on a slide where type *is* the composition |
| `{typography.fadelist-title}` | 10.5vw | Barlow | 900 | Oversized side-of-stage display in a fadelist composition |
| `{typography.quote-mark}` | 10vw | Barlow | 900 | The opening quotation glyph on a pull-quote slide |
| `{typography.h1}` | 7.5vw | Barlow | 800 | Chapter or section-opener title |
| `{typography.fadelist-item}` | 7.5vw | Barlow | 900 | Each stacked word in a three-stage fadelist treatment |
| `{typography.stat-value}` | 5.5vw | Barlow | 900 | Large data figure inside a stat card |
| `{typography.h2}` | 4.5vw | Barlow | 700 | Primary slide headline |
| `{typography.quote-text}` | 3.8vw | Barlow | 700 | Pull-quote body |
| `{typography.h3}` | 2.8vw | Barlow | 600 | Sub-headline or panel title inside a comparison |
| `{typography.lead}` | 1.6vw | Barlow | 400 | Lead paragraph, list items, prominent supporting copy |
| `{typography.body}` | 1.2vw | Barlow | 400 | Standard body paragraph |
| `{typography.caption}` | 0.9vw | Barlow | 400 | Image caption, footnote, source line |
| `{typography.label}` | 0.72vw | IBM Plex Mono | 500 | Chrome labels, kickers, tags, mono notes |

### Defaults
- **Default size for a primary content slide headline**: `{typography.h2}` (4.5vw).
- **Default size for a cover or chapter title**: `{typography.h1}` (7.5vw).
- **Default size for the single declarative display moment on a statement slide**: `{typography.display}` (13vw).
- **Default size for paragraph body**: `{typography.body}` (1.2vw); for the lead paragraph immediately following a headline, `{typography.lead}` (1.6vw).
- **Default size for any inline chrome element (label, kicker, tag, slide number, axis label)**: `{typography.label}` (0.72vw).
- **Default size for a hero numerical figure inside a stat card**: `{typography.stat-value}` (5.5vw).
- **Default weight for any Barlow display moment (h2 and above)**: 700+; for the largest display, 900.
- **Default weight for body**: 400.

When unsure, reach for `{typography.h2}` for the slide's primary text moment. `{typography.h1}` is reserved for chapter/section openers; `{typography.display}` for the rare moment where type is the entire composition.

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

- **All Barlow display, heading, lead, and body text is set in sentence case (or true title case for proper nouns).** Uppercase Barlow at display weights does not exist in this system — it reads as a different design language entirely. The lowercase-display choice is the most distinctive single decision in Broadside.
- **All IBM Plex Mono chrome text is uppercase with at least 0.1em letter-spacing.** Mono labels, kickers, tags, slide numbers, axis labels, source notes, and bullet markers are always uppercase. The uppercase/lowercase split between Barlow body and mono chrome is the system's primary case rhythm.
- **All display tokens carry negative letter-spacing.** `{typography.display}` and `{typography.stat-value}` at -0.04em; `{typography.h1}` and `{typography.fadelist-title}` at -0.03em or -0.04em; `{typography.h2}` and `{typography.quote-text}` at -0.02em. Barlow at display weight without negative tracking reads as untreated.
- **All Barlow display elements run at weight 700, 800, or 900 — never lighter.** Lighter Barlow at display sizes loses the broadside density.
- **On orange slides, every Barlow display/h1/h2/h3 element is forced to `{colors.ink-black}`.** This is the "ink on fire" rule — cream-colored headlines on orange do not exist.
- **Every bulleted list item carries the orange `/` mono marker via `::before`.** Bullet discs, dashes, or numerals do not exist in this system.
- **Every kicker is uppercase IBM Plex Mono at `{typography.label}` size in `{colors.fire-orange}`** (or dark-ink-at-55%-opacity on orange).

### Typography Principles
The weight-900 + lowercase + negative-tracking + Barlow combination is the system's voice. Substituting uppercase, switching to weight 600, or removing the negative tracking each reads as a different system. The chrome's IBM Plex Mono uppercase + 0.14em-tracking is similarly inseparable.

Line-height collapses at scale: `{typography.display}` runs at 0.88, `{typography.h1}` at 0.9, `{typography.h2}` at 1.1, and only by `{typography.lead}` does it open to 1.5+. The compression at the top of the scale is what makes the display feel monolithic.

## Layout

### Canvas System
The canvas is `100vw × 100vh` — full viewport with hidden overflow. Slides sit side-by-side in a horizontal `#deck` flexbox; navigation translates the deck container horizontally rather than swapping `display`. All sizes are viewport-relative (`vw` / `vh`) — there is no fixed 1920×1080 grid.

### Padding and Gap Scale
| Token | Value | Use |
|---|---|---|
| `{spacing.pad-x}` | 5.5vw | Outer horizontal padding on every slide |
| `{spacing.pad-y}` | 5.5vh | Outer vertical padding on every slide |
| `{spacing.gap-lg}` | 3.5vh | Large vertical spacing between major blocks |
| `{spacing.gap-md}` | 2vh | Standard spacing between sibling elements |
| `{spacing.gap-sm}` | 1vh | Tight spacing — kicker to headline, chrome bar inner gap |

The padding is deliberately tighter than a generic editorial system. Broadside's massive type needs the slide's edge to feel close, not distant — the type is supposed to crowd the frame.

### Chrome Frame
The system has an optional chrome frame consisting of two horizontal hairline bars: a top `slide-chrome` bar (label left, slide number right) and a bottom `slide-foot` bar (mirror). Both are 1px solid borders in `{colors.border-dark}` on dark slides, or `rgba(17, 17, 17, 0.2)` on orange. Internal padding/margin uses `{spacing.gap-sm}` and `{spacing.gap-md}`.

The chrome is **suppressed entirely** on the system's "declarative" slide types — cover, chapter, statement, quote, and end. Those slides remove all chrome and let the type occupy the whole field. Content slides (split, stats, list, compare, chart, diagram) keep the chrome.

A separate `broadside-num` element (mono, ~1.1vw, low-opacity) may also be placed independently of the chrome bar as a catalogue-style slide number anchored at the top-left of orange cover/chapter slides.

## Depth and Elevation

### Flat Plane (Only Technique)
Broadside is entirely flat. There are no drop shadows, no inner shadows, no blurred elevations, no rounded surface gradients. Every element sits on a single plane.

Hierarchy is constructed from:
- **Type weight + size contrast** — the dominant signal.
- **1px hairline dividers** — `slide-chrome`/`slide-foot` borders, `stat-card` top borders, `compare-panel` dividers, `bar-track` left border, `chart-baseline` baseline.
- **Color shift** — orange against ink, ink against cream, cream-muted against cream.
- **Negative space** — generous padding and intentional empty regions.

Introducing a `box-shadow`, a card with elevation, or a soft gradient breaks the system. The flatness is the editorial signal.

## Shapes and Treatment

### Border Radius
Border radius is **0px everywhere** except `nav-dot` (50% — the tiny navigation circles at the bottom). Cards, panels, tags, image placeholders, stat cards, chart bars — all rectangles with sharp corners.

### Border Weights
- **1px solid** — the only structural weight. Used on `slide-chrome`, `slide-foot`, `stat-card` top, `compare-panel` divider, `bar-track` left edge, `chart-baseline`, image captions, the `rule.full` divider.
- **1px dashed** — used only on `img-placeholder` to signal "no image wired".
- **2px solid** — used only on the small `rule` accent stub (36px wide) and the `chapter-rule` mark.

All borders are either `{colors.border-dark}` (dark slides), `rgba(17, 17, 17, 0.2)` (orange slides), or `{colors.fire-orange}` (the tag border on dark slides).

### Decorative Element Types

**Stub accent rule** — A 36×2px solid bar in `{colors.fire-orange}` (on dark) or `{colors.ink-black}` (on orange). Used as a visual "section break" mark above a chapter title, above a stat, or beside a kicker. Functions as Broadside's only ornament.

**Mono catalogue number** — A small IBM Plex Mono numeral anchored top-left on cover/chapter slides at low opacity (`rgba(17, 17, 17, 0.45)` on orange, `{colors.cream-hint}` on dark). Reads as a publication catalogue mark.

**Stat card** — A top-border-only data block: 1px solid border on top, no other borders, padded body containing `{typography.stat-value}` (large orange numeral on dark; dark ink on orange) above `{typography.body}` (label) above `{typography.caption}` (mono note in `{colors.cream-hint}` or dark-faint).

**Compare panel pair** — Two equal-width panels divided by a 1px vertical border. The right panel may optionally be filled with `{colors.fire-orange}` (`compare-panel-orange`) as the "after" / payoff side; the left panel remains transparent over the dark canvas.

**Vertical bar chart** — A `bar-track` container with `border-left` only (no other axes), bars dropping from the top with `cream-hint` fill, one bar per chart carrying the `.accent` class for fire orange. Axis labels in mono uppercase below the baseline.

**Fadelist** — A SPACE10-style composition: three stacked Barlow-900 words at descending opacity (1.0 / 0.5 / 0.22) paired with one oversized display title on the opposite side of the slide. Used for "before / during / after" or "past / present / future" narratives.

**Pull quote** — An oversized fire-orange `{typography.quote-mark}` glyph (with line-height 0.6 so it sits on the baseline rather than below), followed by `{typography.quote-text}` capped at ~78% of the column width, followed by a two-line `quote-attr` with name above mono role/affiliation.

**Bordered mono tag** — A small inline pill in IBM Plex Mono uppercase with a 1px solid border, padded 0.3em vertical × 0.8em horizontal. The border and text are both `{colors.fire-orange}` on dark; dark ink at 40% opacity on orange.

## Do's and Don'ts

### Do
- Set every Barlow display, heading, lead, and body element in sentence case. Lowercase display is Broadside's most distinctive single choice.
- Use IBM Plex Mono uppercase at 0.1em+ tracking for every chrome element: slide numbers, kickers, labels, tags, axis labels, source notes, bullet markers.
- Make `{colors.fire-orange}` the singular accent on dark slides — kickers, accent stat values, bullet `/` markers, the leading chart bar, the opening quote mark, the `rule` stub.
- Make orange the *full background* on cover, chapter, and declarative-payoff slides. Use it as environment, not just accent, on those slide types.
- Cap bullet lists at three items. Broadside prizes density of impact over density of information.
- Apply negative letter-spacing on every Barlow display moment — -0.04em on the largest, -0.02em on h2.
- Use 1px hairline borders (`{colors.border-dark}` on dark, `rgba(17,17,17,0.2)` on orange) for all structural division. They are the system's only hierarchy chrome.
- Suppress slide-chrome and slide-foot on cover, chapter, statement, quote, and end slides — let the type breathe edge-to-edge.
- Place the `broadside-num` catalogue number top-left on orange cover/chapter slides as a publication-style mark.
- Use the `/` mono glyph in fire orange as the bullet marker on every list item.

### Don't
- Don't uppercase Barlow at display or heading weights. Uppercase Barlow at 13vw reads as a different design system entirely.
- Don't introduce a second accent color. Orange is *the* color — adding a blue, yellow, or green accent breaks the protest-poster identity.
- Don't add drop shadows, blurred elevations, or rounded surfaces. Broadside is strictly flat — depth comes from type and 1px lines.
- Don't use cream-colored text on orange slides. The "ink on fire" rule is absolute: orange slides use `{colors.ink-black}` for headlines and body.
- Don't pair Barlow with a serif companion. The single-typeface monolith is part of the identity.
- Don't use border-radius on cards, tags, panels, or stat blocks. The only round shapes in the system are the small nav dots.
- Don't pack more than one display moment into a slide. Broadside is for one statement, one rule, breathing room — not magazine-style layered composition.
- Don't render chrome elements in Barlow. Chrome is exclusively IBM Plex Mono uppercase.
- Don't introduce a third surface register. There are two: dark and orange. A cream/paper slide does not exist.
- Don't use italic or underline. Emphasis is achieved through weight, size, or orange color only.

## Responsive Behavior

This is a viewport-fluid 1920×1080 presentation system that uses `vw`/`vh` units throughout. There are no fixed pixel breakpoints. Every typography token, padding value, and component dimension scales linearly with the viewport.

### Scaling Behavior
- Display headline (`{typography.display}`) scales from ~138px at 1066-wide viewports to ~250px at 1920-wide.
- Body text (`{typography.body}`) scales from ~13px to ~23px across the same range.
- Outer padding (`{spacing.pad-x}` 5.5vw) scales from ~59px to ~106px.
- All borders are fixed at 1px or 2px and do not scale.

### Presenter Behavior
- Slides advance via `ArrowRight`, `ArrowDown`, `Space`, or `PageDown`.
- Slides reverse via `ArrowLeft`, `ArrowUp`, or `PageUp`.
- Navigation translates the deck container horizontally with a `cubic-bezier(0.77, 0, 0.175, 1)` ease at 0.8s.
- Per-element entry animations (`data-anim="fade-up"`, `fade-in`, `reveal-right`, `reveal-left`, `scale-in`) replay every time a slide becomes `.is-active`, staggered by `data-delay` (0 through 6).
- Nav dots at bottom-center, mono slide counter at bottom-right.

### Print / Export
Not explicitly handled by the source. Each slide is a `100vw × 100vh` block; export workflows should target 1920×1080 PNG/PDF per slide.

## CJK & International Content

When using this template for Chinese (or other CJK) content, swap the Latin typeface stack for an equivalent Chinese pairing and apply universal CJK adjustments. All recommended Chinese fonts load via CDN — no install required.

### Recommended Chinese Pairing

| Role | Latin (default) | Chinese counterpart |
|---|---|---|
| Display / h1 / h2 / h3 / stat-value / quote / fadelist | Barlow 700–900 (lowercase, negative tracking) | 思源宋体 Noto Serif SC 900 |
| Lead / body / caption | Barlow 400 | 霞鹜文楷 LXGW WenKai 400 |
| Label / kicker / tag / slide number / bullet marker | IBM Plex Mono 500 (uppercase, 0.14em tracking) | 思源黑体 Noto Sans SC 500 (no transform, no tracking) |

### Mixed-Content Strategy

**Strategy A** — single CJK family per role with Latin glyph coverage built in. Use **思源宋体 Noto Serif SC** weight 900 for every display and heading role; use **霞鹜文楷 LXGW WenKai** weight 400 for body and lead text; use **思源黑体 Noto Sans SC** weight 500 for chrome (kickers, labels, slide numbers, bullet markers). All three faces ship Latin glyphs that pair cleanly with Chinese characters. The serif/handwritten/sans contrast loosely echoes Broadside's display/body/mono distinction even though the source uses Barlow throughout.

### Loading

Add to the template's `<head>`:

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

### Universal CJK Adjustments

- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (up from 1.6), display 1.15–1.25 (up from the very tight 0.88–0.9 used on Barlow display). The Latin template compresses display to 0.6 on the quote-mark token; at that compression CJK characters overlap entirely. Open display to 1.0 minimum.
- **Letter-spacing**: set to 0 on every CJK run. The template's −0.02 to −0.04em negative tracking on Barlow display overlaps CJK strokes; the +0.14em positive tracking on IBM Plex Mono chrome reads as gappy on square glyphs.
- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every IBM Plex Mono label, kicker, tag, slide number, and bullet marker uses `text-transform: uppercase` in the Latin original; remove for CJK runs.
- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））.
- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines. Especially important for Broadside's massive display moments — a trailing 。 at 13vw is visually disruptive.
- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `2024 大字海报` not `2024大字海报`.
- **One font per sentence**: 思源宋体 covers both CJK and Latin glyphs in a unified serif style for display; 霞鹜文楷 covers both for body. Don't let the browser fall back to Barlow mid-word for ASCII characters in a Chinese sentence.

### Aesthetic Notes for This System

Broadside's most distinctive single decision is **lowercase Barlow at weight 900 at 13vw display sizes**. The lowercase-display choice is what separates this system from generic brutalist decks. In CJK that signal disappears entirely — Chinese has no case. The system compensates because its identity is **80% structural + color**: the two-register surface system (dark / orange), the singular fire-orange accent, the flat plane, the 1px hairline dividers, the `/` mono bullet markers, the suppressed chrome on declarative slides, and the negative-space-as-composition philosophy all transfer cleanly.

The closest Chinese face to Barlow's "monolithic heavy grotesque" register is **思源宋体 weight 900** — but a serif heavy display rather than a sans heavy display. This is a deliberate register shift: heavy Chinese serif at protest-poster scale reads as "broadside printed-poster" (the system's actual cultural reference) more credibly than heavy Chinese sans, which reads more "corporate signage." For the body face, **霞鹜文楷 LXGW WenKai** brings a handwritten/calligraphic warmth that pairs with the editorial-protest register; if a more institutional body is needed, swap to 思源宋体 400.

Keep the chrome's "stamped metadata" voice by maintaining the small font size (0.72vw equivalent) and the orange color on kickers/labels. The IBM Plex Mono uppercase + tracked treatment loses both signals in CJK, but the orange color carries enough chrome-recognition on its own. The `/` bullet marker can stay as a Latin slash character even in Chinese contexts — it's a graphic mark, not a language element.

### Known CJK Gap

- **No CDN Chinese face matches Barlow's monolithic grotesque + lowercase identity.** Barlow's distinctive choice in this system is lowercase-display at heavy weights — and CJK has no equivalent expressive lever. The system's "protest-poster lowercase-shouting" character softens to "heavy-serif declarative." The two-register color system (dark / orange) and the singular fire-orange accent carry the protest-poster identity on their own.
- **No CDN Chinese monospace face for the chrome voice.** IBM Plex Mono's role (kickers, labels, slide numbers, `/` bullet markers) depends on monospaced rhythm + uppercase + 0.14em tracking. 思源黑体 weight 500 at 0 tracking is the closest match but loses the "catalogue mark" signal. Keep the orange color and the small font size; the color and scale do the chrome-recognition work.
- **霞鹜文楷 may not load on restricted networks.** The Google Fonts CDN serves the Traditional Chinese variant (LXGW WenKai TC) reliably; the Simplified variant is also available via cn-fontsource. Always include `'Noto Serif SC', serif` in the body stack as fallback.
- **The quote-mark glyph at 10vw with line-height 0.6 is a Latin-quote convention.** Chinese typography uses 「」 or 『』 framing rather than oversized opening-quote glyphs. For Chinese pull-quotes, consider replacing the oversized fire-orange quote-mark with a full-width 「 character at 8vw, or dropping the decorative quote glyph entirely and relying on the orange color + larger size to signal "this is a quoted passage."

## Iteration Guide

1. Every new content slide opens with a `kicker` in mono uppercase fire orange, followed by `{typography.h2}` headline in Barlow lowercase. Don't skip the kicker — it is the system's content-slide chrome signal.
2. Every cover, chapter, statement-payoff, or end slide uses the orange register. Don't use orange for content/data slides — orange is for declaration moments.
3. New stat cards use the `stat-card` top-border-only pattern with `{typography.stat-value}` in orange (on dark) or ink (on orange). Don't bottom-border or fully-border stat cards.
4. New bullet lists use the `/` mono marker in fire orange. Cap at three items.
5. New charts use the `bar-track` vertical-bar pattern with one accent bar per chart in fire orange; remaining bars in `{colors.cream-hint}`.
6. New quotes use the oversized fire-orange `{typography.quote-mark}` opening glyph, followed by `{typography.quote-text}` at max 78% width.
7. Headlines on orange slides are always `{colors.ink-black}`. There are no cream headlines on orange.
8. New tags use `tag` styling: 1px fire-orange border + fire-orange mono uppercase text on dark; dark-ink at 40% opacity on orange.
9. The system has nine canonical layout patterns — cover, chapter, statement, split, stats, quote, list, compare, end — plus fadelist, chart, and diagram extensions. New layouts should respect the chrome/no-chrome rule based on whether the slide is declarative or content-bearing.

## Known Gaps

- Broadside's `.light` slide class is intentionally overridden to dark — the source comments confirm "there are no cream/white slides." Any attempt to use `.light` will fall back to the dark register.
- Noto Sans SC is in every font stack as the CJK fallback but the system was not designed with mixed Latin/CJK headlines in mind; line-height behavior on CJK display sizes may need per-slide adjustment.
- The bullet marker glyph (`/`) is set in IBM Plex Mono via `::before` — replacing it with a different glyph requires editing CSS, not markup.
- The bar chart `bar-fill` heights are inline-styled via `style="height: NN%"` in the source; there is no data-binding layer.
- The fadelist and bar-chart layouts are not in the canonical "9 layout patterns" comment block; they are extensions added beyond the documented system.
- Image placeholders use a dashed `{colors.border-dark}` border and a mono uppercase label — replace with a real `<img src>` at the same 55vh height to maintain layout.
- The `c-fg-light` token exists in the palette (`#111111`) for "light theme primary text" but since the light theme is suppressed, this token is effectively unused in the rendered output.
- The system loads three Google Fonts families (Barlow, IBM Plex Mono, Noto Sans SC) with multiple weights — initial render requires successful font load to avoid Times New Roman fallback.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.cfoot` — 1장 — 예: `<div class="cfoot" data-anim="fade-in" style="--dl:5">`
- `.cover` — 1장 — 예: `<section class="slide orange cover">`
- `.cv` — 1장 — 예: `<div class="cv">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.h1` — 1장 — 예: `<h1 class="h1" data-anim="fade-up" style="--dl:3">`
- `.kick` — 1·5장 — 예: `<div class="kick" data-anim="fade-in" style="--dl:1">`
- `.mono` — 1·3·4장 — 예: `<span class="mono">`
- `.num` — 1장 — 예: `<div class="num" data-anim="fade-in" style="--dl:0">`
- `.orange` — 1·6장 — 예: `<section class="slide orange cover">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide orange cover">`
- `.stub` — 1장 — 예: `<i class="stub" data-anim="reveal-left" style="--dl:2">`
- `.unit` — 1장 — 예: `<p class="unit" data-anim="fade-up" style="--dl:1">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.btns` — 2·5장 — 예: `<div class="btns" data-anim="fade-in" style="--dl:6">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03…`
- `.chrome` — 2·3·4·5·6장 — 예: `<header class="chrome" data-anim="fade-in" style="--dl:0">`
- `.dark` — 2·3·4·5·6장 — 예: `<section class="slide dark" data-steps="4">`
- `.def` — 2장 — 예: `<p class="def" data-anim="fade-in" style="--dl:2">`
- `.foot` — 2·3·4·5·6장 — 예: `<footer class="foot" data-anim="fade-in" style="--dl:6">`
- `.frame` — 2·3·4·5·6장 — 예: `<div class="frame">`
- `.ghost` — 2장 — 예: `<button class="tag ghost" data-act="reset">`
- `.img` — 2장 — 예: `<figure class="img" data-anim="scale-in" style="--dl:2">`
- `.kicker` — 2·3·4·5·6장 — 예: `<div class="kicker" data-anim="fade-in" style="--dl:1">`
- `.note` — 2장 — 예: `<p class="note" data-anim="fade-up" style="--dl:5">`
- `.nr` — 2·3·4·5장 — 예: `<span class="nr">`
- `.side` — 2장 — 예: `<div class="side">`
- `.sl` — 2·4·5·6장 — 예: `<span class="sl">`
- `.split2` — 2장 — 예: `<div class="split2">`
- `.stat` — 2·3장 — 예: `<div class="stat" data-s="1" data-anim="fade-up" style="--dl:2">`
- `.steps` — 2장 — 예: `<div class="steps">`
- `.sv` — 2·3장 — 예: `<b class="sv">`
- `.tag` — 2·3·5·6장 — 예: `<button class="tag" data-act="step">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.accent` — 3장 — 예: `<div class="bar accent">`
- `.ax` — 3장 — 예: `<span class="ax">`
- `.bar` — 3장 — 예: `<div class="bar">`
- `.bars` — 3장 — 예: `<div class="bars">`
- `.bv` — 3장 — 예: `<span class="bv">`
- `.chart` — 3장 — 예: `<div class="chart" data-anim="fade-in" style="--dl:4">`
- `.ctl` — 3장 — 예: `<div class="ctl">`
- `.lb` — 3장 — 예: `<p class="lb">`
- `.nrow` — 3장 — 예: `<div class="nrow tm">`
- `.sm` — 3·4·6장 — 예: `<span class="tag sm">`
- `.st3` — 3장 — 예: `<div class="stat st3" data-anim="fade-up" style="--dl:2">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.tm` — 3장 — 예: `<div class="nrow tm">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cmp` — 4장 — 예: `<div class="cmp" data-anim="fade-in" style="--dl:2">`
- `.cp` — 4장 — 예: `<div class="cp">`
- `.li` — 4장 — 예: `<p class="li">`
- `.or` — 4장 — 예: `<div class="cp or">`
- `.qm` — 4장 — 예: `<b class="qm">`
- `.qt` — 4장 — 예: `<blockquote class="qt" data-anim="fade-up" style="--dl:5">`
- `.row4` — 4장 — 예: `<div class="row4">`
- `.rr` — 4장 — 예: `<div class="rr">`
- `.tbl` — 4장 — 예: `<div class="tbl" data-anim="fade-up" style="--dl:3">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<p class="bl">`
- `.blank` — 5장 — 예: `<button class="tag blank" data-blank aria-pressed="false">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts" data-anim="fade-up" style="--dl:2">`
- `.pl` — 5장 — 예: `<div class="pl" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼…`
- `.pr` — 5장 — 예: `<div class="pr" data-anim="reveal-left" style="--dl:2">`
- `.q` — 5장 — 예: `<h3 class="q" data-anim="fade-up" style="--dl:1">`
- `.split5` — 5장 — 예: `<div class="split5">`
- `.wl` — 5장 — 예: `<div class="kick wl">`
- `.words` — 5장 — 예: `<p class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<span class="a">`
- `.b` — 6장 — 예: `<span class="b">`
- `.bar6` — 6장 — 예: `<div class="box6 bar6" id="bs-bar">`
- `.box6` — 6장 — 예: `<div class="box6 strip6" id="bs-strip">`
- `.c` — 6장 — 예: `<span class="c">`
- `.d6` — 6장 — 예: `<div class="d6">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.g6` — 6장 — 예: `<div class="g6" data-anim="fade-in" style="--dl:2">`
- `.in6` — 6장 — 예: `<div class="box6 in6" id="bs-in">`
- `.kick6` — 6장 — 예: `<span class="kick6">`
- `.mx` — 6장 — 예: `<i class="mx" style="height:57px">`
- `.pp` — 6장 — 예: `<div class="pp orange">`
- `.sig6` — 6장 — 예: `<div class="sig6" data-anim="fade-up" style="--dl:3">`
- `.split6` — 6장 — 예: `<div class="split6">`
- `.strip6` — 6장 — 예: `<div class="box6 strip6" id="bs-strip">`
- `.sw6` — 6장 — 예: `<p class="sw6">`
- `.trk` — 6장 — 예: `<div class="trk">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="broadside">
<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=Barlow:wght@400;600;700;900&family=IBM+Plex+Mono:wght@500&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/broadside.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide orange cover">
  <div class="num" data-anim="fade-in" style="--dl:0">01</div>
  <div class="cv">
    <div class="kick" data-anim="fade-in" style="--dl:1">초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</div>
    <p class="unit" data-anim="fade-up" style="--dl:1">계절의 변화<span>sun, shadow & temperature</span></p>
    <i class="stub" data-anim="reveal-left" style="--dl:2"></i>
    <div class="kick" data-anim="fade-in" style="--dl:2">학습 목표</div>
    <h1 class="h1" data-anim="fade-up" style="--dl:3">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  </div>
  <div class="cfoot" data-anim="fade-in" style="--dl:5"><span class="mono">00초등학교</span><span class="mono">2026</span></div>
</section>
<section class="slide dark" data-steps="4">
  <div class="frame">
    <header class="chrome" data-anim="fade-in" style="--dl:0"><span>측정 준비</span><span>1단원 · 3~4차시 · 02 / 06</span></header>
    <div class="kicker" data-anim="fade-in" style="--dl:1">측정 준비</div>
    <h2 data-anim="fade-up" style="--dl:1">태양 고도 측정기 만들기</h2>
    <div class="split2">
      <figure class="img" data-anim="scale-in" style="--dl:2"><figcaption>태양 고도 측정기</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="side">
        <p class="def" data-anim="fade-in" style="--dl:2"><span class="sl">/</span><b>태양 고도</b> — 태양이 지표면과 이루는 각</p>
        <div class="steps"><div class="stat" data-s="1" data-anim="fade-up" style="--dl:2"><b class="sv">01</b><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="stat" data-s="2" data-anim="fade-up" style="--dl:3"><b class="sv">02</b><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="stat" data-s="3" data-anim="fade-up" style="--dl:4"><b class="sv">03</b><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="stat" data-s="4" data-anim="fade-up" style="--dl:5"><b class="sv">04</b><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
        <div class="btns" data-anim="fade-in" style="--dl:6"><button class="tag" data-act="step">다음 단계 →</button><button class="tag ghost" 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>
    </div>
    <p class="note" data-anim="fade-up" style="--dl:5"><span class="sl">/</span>막대기의 그림자와 실이 이루는 각 = 태양 고도</p>
    <footer class="foot" data-anim="fade-in" style="--dl:6"><span>00초등학교</span><span class="nr">버튼 규칙 없음 → 테두리 모노 태그으로 표현</span><span>계절의 변화</span></footer>
  </div>
</section>
<section class="slide dark">
  <div class="frame">
    <header class="chrome" data-anim="fade-in" style="--dl:0"><span>측정 결과</span><span>1단원 · 3~4차시 · 03 / 06</span></header>
    <div class="kicker" data-anim="fade-in" style="--dl:1">측정 결과</div>
    <h2 data-anim="fade-up" style="--dl:1">하루 동안 무엇이 어떻게 변할까요?</h2>
    <div class="stats"><div class="stat st3" data-anim="fade-up" style="--dl:2"><b class="sv">12:30</b><p class="lb">태양 고도가 가장 높아요</p><span class="mono">남중 시각 무렵 · 남중</span></div><div class="stat st3" data-anim="fade-up" style="--dl:3"><b class="sv">정남</b><p class="lb">남중할 때 태양의 위치</p><span class="mono">남중 방향 쪽</span></div><div class="stat st3" data-anim="fade-up" style="--dl:4"><b class="sv">14:30</b><p class="lb">기온이 가장 높아요</p><span class="mono">최고 기온 무렵</span></div><div class="stat st3" data-anim="fade-up" style="--dl:5"><b class="sv">9:30</b><p class="lb">그림자가 가장 길어요</p><span class="mono">가장 긴 그림자 · 15:30</span></div></div>
    <div class="chart" data-anim="fade-in" style="--dl:4">
      <div class="ctl"><span class="mono">측정 시각별 태양 고도, 그림자 길이, 기온</span><span class="tag sm">예시 값</span></div>
      <div class="bars"><span class="ax">태양 고도<br>(°)</span><div class="bar"><span class="bv">38</span><i style="height:120px"></i></div><div class="bar"><span class="bv">48</span><i style="height:152px"></i></div><div class="bar"><span class="bv">55</span><i style="height:174px"></i></div><div class="bar accent"><span class="bv">57</span><i style="height:181px"></i></div><div class="bar"><span class="bv">54</span><i style="height:171px"></i></div><div class="bar"><span class="bv">47</span><i style="height:149px"></i></div><div class="bar"><span class="bv">37</span><i style="height:117px"></i></div></div>
      <div class="nrow tm"><span class="ax">시각</span><span>9:30</span><span>10:30</span><span>11:30</span><span>12:30</span><span>13:30</span><span>14:30</span><span>15:30</span></div><div class="nrow "><span class="ax">그림자 길이 (cm)</span><span>12.9</span><span>9.1</span><span>7</span><span>6.4</span><span>7.2</span><span>9.4</span><span>13.4</span></div><div class="nrow "><span class="ax">기온 (℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div>
    </div>
    <footer class="foot" data-anim="fade-in" style="--dl:6"><span>00초등학교</span><span class="nr">꺾은선 규칙 없음 → 숫자 줄으로 표현 · 예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span><span>계절의 변화</span></footer>
  </div>
</section>
<section class="slide dark">
  <div class="frame">
    <header class="chrome" data-anim="fade-in" style="--dl:0"><span>관계 정리</span><span>1단원 · 3~4차시 · 04 / 06</span></header>
    <div class="kicker" data-anim="fade-in" style="--dl:1">관계 정리</div>
    <h2 class="sm" data-anim="fade-up" style="--dl:1">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
    <div class="cmp" data-anim="fade-in" style="--dl:2"><div class="cp"><h3>태양 고도가 높을 때</h3><p class="li"><span class="sl">/</span>그림자 길이는 짧아져요</p><p class="li"><span class="sl">/</span>기온은 높아져요</p></div><div class="cp or"><h3>태양 고도가 낮을 때</h3><p class="li"><span class="sl">/</span>그림자 길이는 길어져요</p><p class="li"><span class="sl">/</span>기온은 낮아져요</p></div></div>
    <div class="row4">
      <div class="tbl" data-anim="fade-up" style="--dl:3"><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="rr">
        <div data-anim="fade-up" style="--dl:4"><div class="kicker">남중</div><p class="li"><span class="sl">/</span>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p class="li"><span class="sl">/</span>이때의 태양 고도를 남중 고도라고 해요</p></div>
        <blockquote class="qt" data-anim="fade-up" style="--dl:5"><b class="qm">“</b><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="mono">오늘의 정리</span></blockquote>
      </div>
    </div>
    <footer class="foot" data-anim="fade-in" style="--dl:6"><span>00초등학교</span><span class="nr">표 규칙 없음 → 1px 선 행으로 표현</span><span>계절의 변화</span></footer>
  </div>
</section>
<section class="slide dark">
  <div class="frame">
    <header class="chrome" data-anim="fade-in" style="--dl:0"><span>확인하기</span><span>1단원 · 3~4차시 · 05 / 06</span></header>
    <div class="split5">
      <div class="pl" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
        <div class="kicker" data-anim="fade-in" style="--dl:1">배운 내용을 확인해 볼까요?</div>
        <h3 class="q" data-anim="fade-up" style="--dl:1">하루 중 그림자 길이가 가장 짧을 때는?</h3>
        <div class="opts" data-anim="fade-up" style="--dl:2"><button class="opt" data-opt="0"><span class="sl">/</span>오전 9시 30분</button><button class="opt" data-opt="1"><span class="sl">/</span>낮 12시 30분 무렵</button><button class="opt" data-opt="2"><span class="sl">/</span>오후 3시 30분</button></div>
        <p class="fb" data-fb></p>
        <div class="btns"><button class="tag" data-act="retry">다시 풀기 ↺</button></div>
      </div>
      <div class="pr" data-anim="reveal-left" style="--dl:2">
        <div class="kick">빈칸을 눌러 확인해요</div>
        <p class="bl"><button class="tag blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="bl"><button class="tag blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="bl"><button class="tag blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
        <div class="kick wl">오늘의 낱말</div>
        <p class="words">태양 고도 / 남중 고도 / 그림자 길이 / 기온</p>
      </div>
    </div>
    <footer class="foot" data-anim="fade-in" style="--dl:6"><span>00초등학교</span><span class="nr">빈칸 규칙 없음 → 테두리 모노 태그으로 표현</span><span>계절의 변화</span></footer>
  </div>
</section>
<section class="slide dark">
  <div class="frame">
    <header class="chrome" data-anim="fade-in" style="--dl:0"><span>디자인 안내</span><span>1단원 · 3~4차시 · 06 / 06</span></header>
    <div class="kicker" data-anim="fade-in" style="--dl:1">디자인 안내</div>
    <h2 data-anim="fade-up" style="--dl:1">이 디자인 사용 설명서</h2>
    <div class="split6">
      <div class="g6" data-anim="fade-in" style="--dl:2">
        <span class="kick6">한눈에</span><p><span class="sl">/</span>신문 호외·선언문처럼 <b>주황 면과 검정 면 두 가지</b>로만 씁니다. 장식은 짧은 강조선 하나, 구조는 1px 헤어라인뿐이에요.</p>
        <span class="kick6">색</span><p class="sw6"><span><i style="background:#E85D26"></i>불꽃 주황</span><span><i style="background:#111111"></i>잉크 검정</span><span><i style="background:#F0ECE5"></i>크림 글자</span><span><i style="background:#888880"></i>흐린 글</span></p>
        <span class="kick6">글꼴</span><p><span class="sl">/</span>Barlow 400~900 하나로 제목·본문 → Cafe24 Ohsquare v2.0 / Hakgyoansim Wooju</p><p><span class="sl">/</span>IBM Plex Mono는 위아래 크롬·번호만</p>
        <span class="kick6">이렇게 쓰면 좋아요</span><p><span class="sl">/</span>"오늘의 질문"을 선언하듯 크게 — 주황 면은 표지·선언 장에만, 내용은 검정 면에.</p>
      </div>
      <div class="sig6" data-anim="fade-up" style="--dl:3">
        <span class="kick6">대표 장치 — 눌러 보세요</span>
        <div class="d6"><div class="dh"><h3>가로 이동 넘김</h3><button class="tag sm" data-demo="#bs-strip">다시 보기</button></div><p>장이 옆으로 밀려 넘어가요(0.8초, 처음과 끝이 느린 곡선).</p><div class="box6 strip6" id="bs-strip"><div class="trk"><div class="pp orange"><b>01</b></div><div class="pp dark"><b>02</b></div><div class="pp dark"><b>03</b></div></div></div></div>
        <div class="d6"><div class="dh"><h3>요소 등장 세 가지</h3><button class="tag sm" data-demo="#bs-in">다시 보기</button></div><p>아래에서 떠오르기 · 왼쪽부터 드러나기 · 살짝 커지기(0.5초, 차례로).</p><div class="box6 in6" id="bs-in"><span class="a">fade-up</span><span class="b">reveal-left</span><span class="c">scale-in</span></div></div>
        <div class="d6"><div class="dh"><h3>주황 막대는 하나만</h3><button class="tag sm" data-demo="#bs-bar" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>막대는 모두 흐린 크림, 강조할 하나만 주황으로.</p><div class="box6 bar6" id="bs-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>
    <footer class="foot" data-anim="fade-in" style="--dl:6"><span>00초등학교</span><span>계절의 변화</span></footer>
  </div>
</section>
<nav class="dk-nav"><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><span class="dk-count" data-pad></span></nav>
  </main>
</div>

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* --- 토큰(1920×1080 무대로 환산: pad 5.5vw=106px / 5.5vh=59px, 글자는 교실 화면용 최소 28px) --- */
:root{--ink:#111111;--ink2:#1A1A18;--fire:#E85D26;--cream:#F0ECE5;--muted:#888880;--hint:#505048;--border:#282826;
  --enter:cubic-bezier(0.16,1,0.3,1);--px:106px;--py:59px}
.slide{font-family:'Barlow',var(--kb),sans-serif}
.slide.dark{background:var(--ink);color:var(--cream)}
.slide.orange{background:var(--fire);color:var(--ink)}
.mono,.chrome,.foot,.kicker,.kick,.num,.tag,.sl,.ax,figcaption{font-family:'IBM Plex Mono',var(--kb),monospace;font-weight:500}
.sl{color:var(--fire);font-weight:700;margin-right:18px}

/* --- 등장 애니메이션(명세): data-anim + --dl(0~6), 장이 보일 때마다 다시 재생 --- */
[data-anim]{opacity:0;transition:opacity .5s var(--enter),transform .5s var(--enter),clip-path .7s var(--enter);transition-delay:calc(var(--dl,0) * 90ms + 120ms)}
[data-anim=fade-up]{transform:translateY(42px)}
[data-anim=scale-in]{transform:scale(.94)}
[data-anim=reveal-left]{opacity:1;clip-path:inset(0 100% 0 0)}
.visible [data-anim]{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* --- 1. 표지(주황 면, 크롬 없음): 카탈로그 번호 + 키커 + 단원 + 강조선 + 키커 '학습 목표' + 학습 목표 h1 --- */
.cover .num{position:absolute;left:var(--px);top:var(--py);font-size:30px;letter-spacing:.1em;color:rgba(17,17,17,.45)}
.cover .cv{position:absolute;left:var(--px);right:var(--px);top:170px}
.cover .kick{font-size:30px;color:rgba(17,17,17,.55)}
.unit{margin-top:22px;display:flex;align-items:baseline;gap:30px;font-family:'Barlow',var(--kt),sans-serif;font-weight:900;font-size:76px;line-height:1.1;white-space:nowrap}
.unit span{font:700 44px 'Barlow',sans-serif;letter-spacing:-.02em;color:rgba(17,17,17,.75)}
.cover .stub{display:block;width:72px;height:4px;background:var(--ink);margin:52px 0 26px}
.h1{margin-top:16px;font-family:'Barlow',var(--kt),sans-serif;font-weight:900;font-size:136px;line-height:1.12;letter-spacing:0;white-space:nowrap}
.h1 .gk{font-style:normal}
.cover .cfoot{position:absolute;left:var(--px);right:var(--px);bottom:110px;display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(17,17,17,.2);padding-top:14px}
.cover .mono{font-size:28px;letter-spacing:.1em;color:rgba(17,17,17,.55)}

/* --- 내용 장 공통 틀: 크롬 바(위) + 하단 바(아래), 1px 헤어라인 --- */
.frame{position:absolute;inset:var(--py) var(--px);display:flex;flex-direction:column}
.chrome{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:28px;font-size:24px;letter-spacing:.06em;color:var(--muted)}
.foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:30px;font-size:22px;letter-spacing:.04em;color:var(--muted)}
.foot .nr{flex:1;text-align:center;font-size:18px;color:var(--hint)}
.kicker{font-size:28px;color:var(--fire);margin-bottom:8px}
h2{font-family:'Barlow',var(--kt),sans-serif;font-weight:900;font-size:80px;line-height:1.15;letter-spacing:0}
h2.sm{font-size:68px}
h3{font-family:'Barlow',var(--kt),sans-serif;font-weight:700;letter-spacing:0}

/* --- 2. 흐름: 점선 이미지 자리 속 측정기 그림 | 정의 + 숫자 카드(윗선) 4단계 + 태그 버튼 / '/' 메모 --- */
.split2{flex:1;min-height:0;margin-top:26px;display:grid;grid-template-columns:860px 1fr;gap:56px}
.img{background:rgba(255,255,255,.04);border:1px dashed var(--border);padding:16px 30px 10px;
  --g-ink:var(--cream);--g-acc:var(--fire);--g-stick:var(--fire);--g-board:var(--ink2);--g-ruler:var(--ink);--g-prot:rgba(255,255,255,.06);--g-shadow:var(--muted);--g-font:'Barlow',var(--kb),sans-serif;--g-sw:2}
.img figcaption{font-size:22px;letter-spacing:.06em;color:var(--hint)}
.side{display:flex;flex-direction:column;min-height:0}
.def{font-size:30px;line-height:1.5;color:var(--muted)}
.def b{color:var(--cream);font-weight:700}
.steps{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.steps .stat{display:grid;grid-template-columns:90px 1fr;gap:12px;border-top:1px solid var(--border);padding-top:12px}
.slide[data-step]:not([data-step="0"]) .steps .stat:not(.on){color:var(--hint)}
.slide[data-step]:not([data-step="0"]) .steps .stat:not(.on) .sv{color:var(--hint)}
.sv{display:block;font-weight:900;font-size:56px;line-height:1;letter-spacing:0;color:var(--fire)}
.steps h3{font-size:38px;line-height:1.2}
.steps p{margin-top:2px;font-size:28px;line-height:1.5;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:auto}
.cap{width:100%;font-size:28px;line-height:1.5;color:var(--muted)}
.tag{border:1px solid var(--fire);color:var(--fire);font-size:28px;letter-spacing:.04em;padding:14px 28px}
.tag.ghost{border-color:var(--hint);color:var(--muted)}
.tag.sm{font-size:22px;padding:4px 14px}
.tag:disabled{opacity:.3}
.note{margin-top:16px;font-size:32px;line-height:1.5}

/* --- 3. 숫자와 그래프: 숫자 카드 4장(윗선 · 주황 큰 숫자) + 세로 막대(흐림, 가장 높은 막대만 주황) + 숫자 줄 --- */
.stats{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:38px}
.st3{border-top:1px solid var(--border);padding-top:16px}
.st3 .sv{font-size:84px;letter-spacing:-.02em}
.st3 .lb{margin-top:12px;font-size:28px;line-height:1.4}
.st3 .mono{display:block;margin-top:8px;font-size:22px;color:var(--hint)}
.chart{margin-top:30px;display:flex;flex-direction:column;gap:6px}
.ctl{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ctl .mono{font-size:22px;color:var(--muted)}
.bars,.nrow{display:grid;grid-template-columns:250px repeat(7,1fr);gap:28px;align-items:end}
.bars{height:240px;border-left:1px solid var(--border);border-bottom:1px solid var(--border);padding-left:0}
.ax{font-size:22px;line-height:1.3;color:var(--hint);padding-left:16px}
.bar{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px;height:100%}
.bar i{display:block;background:var(--hint)}
.bar.accent i{background:var(--fire)}
.bv{font:700 28px 'Barlow',sans-serif;color:var(--muted)}
.bar.accent .bv{color:var(--fire)}
.nrow{align-items:baseline;font-size:28px;font-weight:600;padding-top:6px}
.nrow.tm{font:500 22px 'IBM Plex Mono',monospace;color:var(--hint)}

/* --- 4. 비교와 표: 비교 두 칸(1px 세로선 · 오른쪽 주황 칸) / 표(1px 선 행) + '/' 목록 + 큰 따옴표 인용 --- */
.cmp{margin-top:22px;display:grid;grid-template-columns:1fr 1fr}
.cp{padding:24px 58px 26px 0;border-right:1px solid var(--border)}
.cp.or{background:var(--fire);color:var(--ink);padding:24px 40px 26px;border:0}
.cp.or .sl{color:rgba(17,17,17,.45)}
.cp h3{font-size:44px;line-height:1.2;margin-bottom:10px}
.li{font-size:30px;line-height:1.55}
.cp.or .li{color:rgba(17,17,17,.75)}
.row4{flex:1;min-height:0;margin-top:28px;display:grid;grid-template-columns:1.1fr 1fr;gap:58px}
.tbl{border-top:1px solid var(--border)}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:28px;line-height:1.4}
.tr.th{font:500 22px 'IBM Plex Mono',var(--kb),monospace;color:var(--hint)}
.rr{display:flex;flex-direction:column;gap:22px}
.qt{position:relative;padding-left:70px}
.qm{position:absolute;left:0;top:-6px;font:900 130px/.6 'Barlow',sans-serif;color:var(--fire)}
.qt p{font-family:'Barlow',var(--kt),sans-serif;font-weight:700;font-size:38px;line-height:1.3}
.qt .mono{display:block;margin-top:10px;font-size:22px;color:var(--muted)}

/* --- 5. 확인하기: 왼쪽 검정 퀴즈('/' 보기, 1px 선) | 오른쪽 주황 칸(빈칸 태그 + 낱말) --- */
.split5{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;margin-bottom:22px}
.pl{padding-right:58px;border-right:1px solid var(--border);display:flex;flex-direction:column}
.q{font-weight:900;font-size:58px;line-height:1.2}
.opts{margin-top:28px;border-bottom:1px solid var(--border)}
.opt{display:flex;align-items:center;width:100%;text-align:left;padding:18px 14px;border-top:1px solid var(--border);font-family:'Barlow',var(--kb),sans-serif;font-weight:700;font-size:40px}
.opt.right{background:var(--fire);color:var(--ink)}
.opt.right .sl{color:var(--ink)}
.opt.wrong,.opt:disabled:not(.right){color:var(--hint)}
.fb{margin-top:22px;min-height:96px;font-size:30px;line-height:1.5}
.pr{background:var(--fire);color:var(--ink);padding:40px 50px;display:flex;flex-direction:column;gap:20px}
.pr .kick{font-size:26px;color:rgba(17,17,17,.55)}
.bl{font-size:32px;line-height:1.55;color:rgba(17,17,17,.75)}
.blank{position:relative;min-width:190px;margin-right:12px;border-color:rgba(17,17,17,.4);color:var(--ink);padding:4px 16px;text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--ink);color:var(--fire)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{font-weight:900;font-size:48px;line-height:1.25}

/* --- 내비: 아래 가운데 점(유일한 원) + 오른쪽 아래 모노 번호 --- */
.dk-nav{left:0;right:0;bottom:22px;height:30px}
.dk-dots{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:18px}
.dk-dot{width:14px;height:14px;border-radius:50%;background:var(--hint)}
.dk-dot.on{background:var(--fire)}
.dk-count{position:absolute;right:var(--px);bottom:0;font:500 24px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:var(--muted)}
[data-slide="1"] .dk-dot{background:rgba(17,17,17,.3)}
[data-slide="1"] .dk-dot.on{background:var(--ink)}
[data-slide="1"] .dk-count{color:rgba(17,17,17,.55)}
/* --- 6. 디자인 안내(검정 면): '/' 글머리 설명 | 시연 3개(윗선 1px 숫자 카드 모양) --- */
.split6{flex:1;min-height:0;margin-top:20px;display:grid;grid-template-columns:900px 1fr;gap:64px}
.g6{display:flex;flex-direction:column;gap:8px}
.kick6{display:block;margin-top:10px;font:500 22px 'IBM Plex Mono',var(--kb),monospace;letter-spacing:.06em;color:var(--fire)}
.g6 p{font-size:27px;line-height:1.5}
.g6 b{color:var(--fire);font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:8px 24px}
.sw6 i{display:inline-block;width:28px;height:28px;margin-right:8px;vertical-align:-7px;border:1px solid var(--border)}
.sig6{display:flex;flex-direction:column;gap:16px}
.d6{border-top:1px solid var(--border);padding-top:10px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-family:'Barlow',var(--kt),sans-serif;font-weight:900;font-size:34px}
.d6 p{margin-top:4px;font-size:22px;line-height:1.45;color:var(--muted)}
.tag.sm[aria-pressed="true"]{background:var(--fire);color:var(--ink)}
.box6{margin-top:8px;height:84px;overflow:hidden;border:1px solid var(--border)}
.strip6 .trk{display:flex;width:300%;height:100%}
.pp{flex:1;display:flex;align-items:center;padding:0 24px}
.pp.orange{background:var(--fire);color:var(--ink)}.pp.dark{background:var(--ink2);color:var(--cream)}
.pp b{font:900 52px/1 'Barlow',sans-serif}
.strip6.play .trk{animation:bs-strip 2.8s both}
@keyframes bs-strip{0%{transform:none;animation-timing-function:cubic-bezier(.77,0,.175,1)}29%,50%{transform:translateX(-33.333%);animation-timing-function:cubic-bezier(.77,0,.175,1)}79%,100%{transform:translateX(-66.666%)}}
.in6{display:flex;align-items:center;gap:20px;padding:0 20px}
.in6 span{border:1px solid var(--fire);color:var(--fire);font:500 22px 'IBM Plex Mono',monospace;padding:8px 14px}
.in6.play .a{animation:bs-up .5s var(--enter) .12s both}.in6.play .b{animation:bs-rl .7s var(--enter) .21s both}.in6.play .c{animation:bs-sc .5s var(--enter) .3s both}
@keyframes bs-up{from{opacity:0;transform:translateY(42px)}}
@keyframes bs-rl{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes bs-sc{from{opacity:0;transform:scale(.94)}}
.bar6{display:flex;align-items:flex-end;gap:16px;padding:0 20px;border-width:0 0 1px 1px}
.bar6 i{width:40px;background:rgba(240,236,229,.25)}
.bar6.play i.mx{background:var(--fire)}

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