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

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

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

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

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

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

## 라이선스

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

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

````markdown
---
version: alpha
name: Stencil & Tablet
description: A West Coast skate-poster meets municipal stencil signage system. Stardos Stencil carries every headline, numeral, and chunky display moment with its characteristic ink-break gaps; Barlow Condensed runs all metadata and uppercase chrome at extra-heavy weights; Inter handles body. The palette is bone (#E2DCC9) and black, energized by a saturated retro-print accent set — sienna, magenta, orange, teal, blue, mustard, olive. Soft rounded "tablet" cards (22–26px radius) tile across slides in colored blocks. Type runs huge and uppercase, numerals dominate at 160–540px, and color blocks act as the layout. The mood is industrial poster, vintage workshop sign, and music festival lineup all at once.

colors:
  bone: "#E2DCC9"
  black: "#000000"
  ink: "#0A0A0A"
  paper: "#F4EFE0"
  sienna: "#A06A3C"
  magenta: "#C73B7A"
  orange: "#EE7A2E"
  teal: "#2D7E73"
  blue: "#3F73B7"
  mustard: "#D8A93B"
  olive: "#6F7A2E"

typography:
  cover-hero:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 220px
    fontWeight: 700
    lineHeight: 0.82
    letterSpacing: -0.015em
    textTransform: uppercase
  numeral-mega:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 540px
    fontWeight: 700
    lineHeight: 0.8
  numeral-card-xl:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 240px
    fontWeight: 700
    lineHeight: 0.85
    letterSpacing: -0.02em
  numeral-tablet:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 220px
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.02em
  numeral-stat:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 160px
    fontWeight: 700
    lineHeight: 0.85
    letterSpacing: -0.02em
  section-headline:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 120px
    fontWeight: 700
    lineHeight: 0.92
    letterSpacing: -0.005em
    textTransform: uppercase
  chart-headline:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 110px
    fontWeight: 700
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  page-headline:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 92px
    fontWeight: 700
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  quote-text:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.005em
  quote-mark:
    fontFamily: "Bowlby One, Stardos Stencil, serif"
    fontSize: 320px
    fontWeight: 700
    lineHeight: 0.8
  numeral-process:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 0.9
  date-mark:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 36px
    fontWeight: 700
    textTransform: uppercase
  card-headline:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.15
    textTransform: uppercase
    letterSpacing: -0.005em
  meta-headline:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
  card-h3:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.05
    textTransform: uppercase
    letterSpacing: 0.02em
  matrix-row:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 26px
    fontWeight: 700
    lineHeight: 1.1
    textTransform: uppercase
    letterSpacing: 0.01em
  matrix-head:
    fontFamily: "Stardos Stencil, serif"
    fontSize: 24px
    fontWeight: 700
    textTransform: uppercase
    letterSpacing: 0.02em
  topbar:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 32px
    fontWeight: 800
    letterSpacing: 0.04em
    textTransform: uppercase
    lineHeight: 1
  super:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 28px
    fontWeight: 800
    letterSpacing: 0.12em
    textTransform: uppercase
  who-name:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 30px
    fontWeight: 700
    letterSpacing: 0.04em
    textTransform: uppercase
  attribution:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 26px
    fontWeight: 800
    letterSpacing: 0.08em
    textTransform: uppercase
  meta:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 24px
    fontWeight: 600
    letterSpacing: 0.06em
  section-eyebrow:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 24px
    fontWeight: 800
    letterSpacing: 0.14em
    textTransform: uppercase
  footer:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 22px
    fontWeight: 600
    letterSpacing: 0.08em
    textTransform: uppercase
  process-sub:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 22px
    fontWeight: 600
    letterSpacing: 0.06em
    textTransform: uppercase
  timeline-marker:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 20px
    fontWeight: 700
    letterSpacing: 0.08em
    textTransform: uppercase
  legend:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 22px
    fontWeight: 700
    letterSpacing: 0.06em
    textTransform: uppercase
  pill:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 18px
    fontWeight: 700
    letterSpacing: 0.08em
    textTransform: uppercase
  chart-axis:
    fontFamily: "Barlow Condensed, sans-serif"
    fontSize: 18px
    fontWeight: 600
    letterSpacing: 0.06em
  body-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.45
  body-xs:
    fontFamily: "Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4

spacing:
  pad-outer: 64px
  pad-top: 48px
  pad-bottom: 36px
  card-pad: "24px 22px to 38px 32px"
  gap-card: "22px to 28px"
  radius-card: 22px
  radius-card-lg: 26px
  radius-action: 22px
  radius-pill: 999px
  radius-mark: 14px
  radius-timeline: 18px

canvas:
  width: 1920px
  height: 1080px

components:
  tablet:
    borderRadius: 26px
    padding: "38px 32px 32px"
    background: "any palette accent or {colors.bone}"
    color: "{colors.ink} on light fills, {colors.bone} on dark fills"
    description: "The system's namesake container — a rounded rectangle holding a giant stencil numeral above a stencil headline and Inter body. Numerals run to 220px+ inside."
  card-color:
    borderRadius: 22px
    padding: "{spacing.card-pad}"
    description: "Generic color-block card in any palette accent (sienna, magenta, orange, teal, blue, mustard, olive, paper)."
  pill-status:
    borderRadius: "{spacing.radius-pill}"
    padding: "6px 16px"
    typography: "{typography.pill}"
    description: "Uppercase Barlow Condensed pill used as a matrix cell value. teal=yes, mustard=partial, magenta=no, paper-with-ink-border=note."
  action-bar:
    background: "{colors.mustard}"
    borderRadius: 22px
    padding: "24px 32px"
    description: "Mustard-yellow callout bar running across the top of a slide, containing a tag separator and a stencil headline. Used for important section openers."
  num-mega:
    typography: "{typography.numeral-mega}"
    color: "{colors.orange} (default) or any saturated accent"
    description: "Giant 540px stencil numeral used as a section divider — the number IS the layout. Sits absolute top-left while the section headline runs bottom-right."
  num-tablet:
    typography: "{typography.numeral-tablet}"
    description: "220px stencil numeral inside a tablet card, paired with a stencil headline and Inter body underneath."
  num-stat:
    typography: "{typography.numeral-stat}"
    suffix: "{typography.attribution}"
    description: "160px stencil stat numeral with optional small-caps Barlow suffix (e.g., '%') at vertical-align top, 40px."
  cover-lockup:
    description: "Cover-bottom row containing a small rounded mark (56px square, 14px radius, accent fill), an uppercase Barlow name with small subtitle, and a stencil date."
  cover-mark:
    width: 56px
    height: 56px
    borderRadius: 14px
    background: "any accent (default orange)"
    description: "Small rounded square 'logo' tile in the cover lockup."
  section-num-block:
    description: "Section divider where a 540px stencil numeral fills the left side, a small Barlow eyebrow sits top-right, and a 120px stencil headline runs bottom-right."
  process-node:
    borderRadius: 22px
    padding: "24px 22px 22px"
    description: "Process step card with a 64px stencil ordinal at top, an uppercase stencil h3, and small Inter body. Each step takes a different accent fill."
  timeline-bar:
    background: "{colors.paper}"
    borderRadius: 14px
    padding: "0 28px"
    height: 50px
    description: "Paper-fill horizontal bar at the bottom of process diagrams, containing uppercase Barlow timeline markers spread evenly."
  matrix-cell:
    border: "1.5px solid rgba(10,10,10,0.35)"
    padding: "18px 22px"
    description: "Matrix table cell with a single warm-ink hairline border. Head row inverts to black fill with bone text. Last row drops bottom border."
  legend-bar:
    width: 32px
    height: 6px
    description: "Flat horizontal bar (no border-radius) used as a chart legend swatch."
  quote-panel:
    background: "{colors.magenta} (or any saturated accent)"
    borderRadius: 26px
    padding: "60px 80px"
    description: "Large rounded panel filling most of the slide, containing a 320px Bowlby One quote mark beside a 60px stencil quote text."
  organic-shape:
    description: "Decorative organic blob (SVG) sitting behind agenda items on the dark agenda layout, in any accent color. The shape is the background, the number and label float on top."
  topbar:
    position: "absolute top 48px, left/right 64px"
    typography: "{typography.topbar}"
    description: "Top chrome strip with section name left and meta columns right. Uppercase Barlow Condensed 800."
  footer-chrome:
    position: "absolute bottom 36px, left/right 64px"
    typography: "{typography.footer}"
    description: "Bottom chrome strip with date left and deck name right. Uppercase Barlow Condensed 600 at 0.75 opacity."
---

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

Stencil & Tablet is a **poster-loud, type-led** presentation system. The premise is a single display face — Stardos Stencil — handling every headline, every numeral, every featured moment, with characteristic stencil ink-breaks giving each glyph a slightly-distressed industrial register. The supporting cast is Barlow Condensed (extra-heavy 600–900, uppercase, generous tracking) running all metadata, chrome, pills, and legends — and Inter handling the small set of body paragraphs that exist mostly to caption the loud type above them.

The visual logic is **color blocks as layout**. The bone-cream field (`{colors.bone}` — #E2DCC9) is the default page; on top of it sit rounded "tablet" cards in saturated retro-print colors — sienna brown, magenta pink, orange, teal, deep blue, mustard yellow, olive green. The accents are not pastels — they read as printed ink, slightly muted but unmistakably saturated. The cards do the work of dividing the canvas; you can identify a slide's structure from across the room because the color blocks tile geometrically. A dark-bone alternate (`{colors.black}` field with bone-colored type) appears on agenda-style and bold-statement slides.

The typographic register is **huge and uppercase**. Cover titles run at 220px. Numerals inside tablets at 220–240px. Section dividers at 540px (yes, more than half the canvas in single-character height). Statement headlines at 120px. Even stat numerals start at 160px. The system's identity depends on running type at sizes that would be impossible on most decks — Stencil & Tablet uses scale as the primary expressive tool, with color as the secondary tool, and body text only as the supporting cast.

Depth is **flat with rounded chrome**. There are no drop shadows. No gradients. Cards have generous border-radius (22–26px) and saturated fills, and that's the entire depth system. Inside cards, dividers are 1.5–2px solid hairlines in warm ink — heavier than Soft Editorial's whisper-dashed rules because the system overall has more visual weight.

**Density philosophy: high and confident.** Stencil & Tablet is meant to feel filled. A typical slide covers most of its canvas in color blocks — tablets tile across, action bars run wide, section numerals fill half the slide. The bone field is visible mostly as gaps between cards (22–28px) and as the outer 64px slide padding. A slide that feels broken in this system is one that's mostly empty bone — the design needs the color blocks to hold its identity. The exception is the section-divider slide, where a single 540px numeral against a dark field IS the design and the empty space is intentional.

**Key Characteristics:**
- Bone (`{colors.bone}`) field on most slides; black field with bone type on agenda-style and bold-divider slides.
- Stardos Stencil for every headline, every numeral, every featured stencil moment — the ink-break stencil glyphs are the system's identity.
- Barlow Condensed extra-heavy uppercase for all chrome, metadata, pills, legends, and labels. Generous letter-spacing (0.06–0.14em).
- Inter for body — small role, supporting the loud type above.
- Seven-color accent palette (`{colors.sienna}`, `{colors.magenta}`, `{colors.orange}`, `{colors.teal}`, `{colors.blue}`, `{colors.mustard}`, `{colors.olive}`) plus paper (`{colors.paper}`) — used as full card fills.
- Tablet cards with 22–26px border-radius hold a giant stencil numeral above a stencil headline above Inter body. The numeral usually fills more than half the card height.
- Numerals run massive — section dividers at 540px, tablet cards at 220–240px, stats at 160px.
- All headlines uppercase. All metadata uppercase. Sentence case appears only in Inter body.
- No drop shadows, no gradients — flat blocks of color with rounded corners.

## Colors

### Palette

- **Bone** (`{colors.bone}` — #E2DCC9): The default page field. A warm cream with a slight green-grey undertone — reads as canvas, kraft paper, or a slightly-aged poster.
- **Black** (`{colors.black}` — #000000): The dark field. True black, used for agenda-style and section-divider slides where the type inverts to bone.
- **Ink** (`{colors.ink}` — #0A0A0A): Near-black for text on light surfaces. Slightly softer than pure black to read as ink rather than digital.
- **Paper** (`{colors.paper}` — #F4EFE0): A lighter cream than bone, used for cards that need to sit "lighter" against the bone field (matrix tables, chart frames, timeline bars).
- **Sienna** (`{colors.sienna}` — #A06A3C): Warm brown-orange. The earthiest of the accents — process steps, principle cards.
- **Magenta** (`{colors.magenta}` — #C73B7A): Saturated retro pink-red. The loudest warm accent — covers, quotes, statements, matrix "no" pills.
- **Orange** (`{colors.orange}` — #EE7A2E): Bright orange. The system's most-used accent — section dividers, principle cards, cover marks, stat cards.
- **Teal** (`{colors.teal}` — #2D7E73): Deep blue-green. The cool counterpart to orange — process cards, matrix "yes" pills, chart accents.
- **Blue** (`{colors.blue}` — #3F73B7): Mid-tone process blue. Used for fifth-step process cards and cool variety.
- **Mustard** (`{colors.mustard}` — #D8A93B): Saturated yellow-orange. Action bars, stat cards, matrix "partial" pills.
- **Olive** (`{colors.olive}` — #6F7A2E): Muted yellow-green. The least-used accent, reserved for variety in seven-up palettes or sixth-position cards.

### Defaults

- **Default page field**: `{colors.bone}` for content slides; `{colors.black}` for agenda-style, section-divider, stats-headline, and quote-panel-containing slides.
- **Default primary text color**: `{colors.ink}` on bone/paper/light-accent surfaces; `{colors.bone}` on black/teal/blue/dark accent surfaces.
- **Default text color on each accent**: ink on sienna, magenta, orange, mustard, olive, paper (warm or mid-tone accents stay with ink); bone on teal, blue, black (cool/dark accents flip to bone).
- **Default accent for sections (single-color moments)**: `{colors.orange}` — the system's loudest, most-used accent.
- **Default accent for warm color moments**: `{colors.magenta}` or `{colors.orange}`.
- **Default accent for cool color moments**: `{colors.teal}`.
- **Default accent for callout / action bar**: `{colors.mustard}`.
- **Default text-on-fill rule**: text never inverts to white. Light text on dark fills is always `{colors.bone}`, never white.

### Matrix Pill Color Conventions

Inside comparison matrices, status pills follow a fixed convention:
- `{colors.teal}` fill with bone text = yes / affirmative
- `{colors.mustard}` fill with ink text = partial / qualified
- `{colors.magenta}` fill with bone text = no / negative
- `{colors.paper}` fill with ink text and 1.5px ink border = note / annotation

Outside the matrix, accents are interchangeable. A process card can be magenta or teal without conveying yes/no — color is decorative there, not semantic.

## Typography

### Font Family

Stencil & Tablet runs **three families** plus one display-only specialist:

- **Stardos Stencil** (`{typography.cover-hero.fontFamily}`) — a single-weight (700, with a 400 italic for quotes) stencil display face. The ink-break gaps in every glyph are the system's identity. Used for every headline, every numeral, every featured stencil moment from 24px matrix-head all the way up to 540px section-numeral.
- **Bowlby One** — a single-purpose extra-heavy display face used only for the 320px quote-mark inside quote panels. The face has a different visual register (fatter, more solid) than Stardos Stencil and is reserved for that one element.
- **Barlow Condensed** (`{typography.topbar.fontFamily}`) — a tall narrow grotesque at weights 500–900. Carries every uppercase chrome, every metadata label, every pill, every legend item, every footer, every supporting label. The condensed width and heavy weights let it pack tight uppercase rows at small sizes (18–32px).
- **Inter** (`{typography.body.fontFamily}`) — a humanist grotesque at weights 400–600. Reserved for body paragraphs and card body copy at 18–24px. Inter is the system's "quiet" voice — used for sentence-case prose where Barlow would be too loud.

The emotional split is: Stardos = scale and signage; Barlow = metadata and labels; Inter = body; Bowlby = the quote-mark glyph only.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.numeral-mega}` | 540px | Stardos Stencil | 700 | Section-divider numeral that fills most of a slide |
| `{typography.quote-mark}` | 320px | Bowlby One | 700 | Opening quote glyph inside a quote panel |
| `{typography.numeral-card-xl}` | 240px | Stardos Stencil | 700 | Mega numeral inside a principle/feature card |
| `{typography.numeral-tablet}` | 220px | Stardos Stencil | 700 | Standard numeral inside a tablet card |
| `{typography.cover-hero}` | 220px | Stardos Stencil | 700 | Cover title at maximum scale |
| `{typography.numeral-stat}` | 160px | Stardos Stencil | 700 | Statistical numeral inside a stat card |
| `{typography.section-headline}` | 120px | Stardos Stencil | 700 | Headline on a section-divider slide |
| `{typography.chart-headline}` | 110px | Stardos Stencil | 700 | Large headline on chart slides |
| `{typography.page-headline}` | 92px | Stardos Stencil | 700 | Standard slide headline |
| `{typography.numeral-process}` | 64px | Stardos Stencil | 700 | Step ordinal at the top of a process node |
| `{typography.quote-text}` | 60px | Stardos Stencil | 400 | Pull-quote body inside a quote panel |
| `{typography.date-mark}` | 36px | Stardos Stencil | 700 | Date or marker in cover lockup |
| `{typography.card-headline}` | 34px | Stardos Stencil | 700 | Headline inside an action bar |
| `{typography.meta-headline}` | 32px | Stardos Stencil | 700 | Heavy meta headline inside a consult column |
| `{typography.card-h3}` | 30px | Stardos Stencil | 700 | Card sub-headline at the bottom of tablets |
| `{typography.topbar}` | 32px | Barlow Condensed | 800 | Top chrome label |
| `{typography.super}` | 28px | Barlow Condensed | 800 | Superscript label above cover headlines |
| `{typography.who-name}` | 30px | Barlow Condensed | 700 | Cover lockup name label |
| `{typography.attribution}` | 26px | Barlow Condensed | 800 | Quote attribution name |
| `{typography.matrix-row}` | 26px | Stardos Stencil | 700 | Matrix row-label cell |
| `{typography.matrix-head}` | 24px | Stardos Stencil | 700 | Matrix head-row cell |
| `{typography.meta}` | 24px | Barlow Condensed | 600 | Top chrome meta columns |
| `{typography.section-eyebrow}` | 24px | Barlow Condensed | 800 | Section eyebrow on divider slides |
| `{typography.body-lg}` | 24px | Inter | 400 | Standard body paragraph |
| `{typography.footer}` | 22px | Barlow Condensed | 600 | Bottom chrome footer |
| `{typography.process-sub}` | 22px | Barlow Condensed | 600 | Process diagram sub-headline |
| `{typography.legend}` | 22px | Barlow Condensed | 700 | Chart legend label |
| `{typography.body}` | 22px | Inter | 400 | Default body inside tablets and cards |
| `{typography.timeline-marker}` | 20px | Barlow Condensed | 700 | Timeline bar marker label |
| `{typography.body-sm}` | 20px | Inter | 400 | Consult column body, dense card body |
| `{typography.pill}` | 18px | Barlow Condensed | 700 | Pill label inside matrix or status chip |
| `{typography.chart-axis}` | 18px | Barlow Condensed | 600 | Chart axis tick label |
| `{typography.body-xs}` | 18px | Inter | 400 | Smallest body, process card descriptions |

### Defaults

- **Default size for a primary section headline**: `{typography.page-headline}` (92px) on standard slides, `{typography.chart-headline}` (110px) on chart-style headers, `{typography.section-headline}` (120px) on section-divider slides.
- **Default size for a cover hero**: `{typography.cover-hero}` (220px).
- **Default size for a featured numeral inside a tablet**: `{typography.numeral-tablet}` (220px); reach for `{typography.numeral-card-xl}` (240px) when the numeral dominates and `{typography.numeral-mega}` (540px) for section dividers.
- **Default size for a statistical numeral**: `{typography.numeral-stat}` (160px).
- **Default size for body**: `{typography.body}` (22px) inside cards; `{typography.body-lg}` (24px) for stand-alone body paragraphs.
- **Default size for any chrome label, pill, or legend**: `{typography.footer}` (22px) to `{typography.topbar}` (32px) depending on the chrome tier.
- **Default headline color**: `{colors.ink}` on light fills, `{colors.bone}` on dark fills.

When unsure between `{typography.page-headline}` (92px) and `{typography.chart-headline}` (110px), pick 92px — 110px is reserved for slides where the headline anchors a chart frame.

### Signature Treatments

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

- **Every headline is uppercase.** Stardos Stencil at any size, in any context, runs uppercase. Sentence-case stencil text does not exist in this system.
- **Every chrome, metadata, pill, and legend element is uppercase Barlow Condensed with at least 0.04em letter-spacing** (most run at 0.06–0.14em). Barlow Condensed without tracking reads as broken.
- **Numerals are always Stardos Stencil at weight 700** — never weight 400, never a different face. Even small numerals (matrix-head at 24px) follow the convention.
- **The 540px section-divider numeral always renders in a saturated accent on a dark (`{colors.black}` or near-black) field**, typically `{colors.orange}` or `{colors.magenta}`. A 540px numeral on a light field breaks the section-divider register.
- **Tablet cards always carry a numeral above their headline.** A tablet without a numeral is not a tablet — it's a generic card. The numeral is the tablet's defining feature.
- **Stat numerals use a Barlow Condensed superscript suffix at vertical-align top** for units (% sign, ×, K, M). The suffix runs at 40px / weight 800 / Barlow.
- **Body in Inter is always sentence case.** Uppercasing Inter breaks the contrast that lets it read as the "quiet voice."
- **Quote panels always use Bowlby One for the quote-mark glyph (not Stardos Stencil).** The chunkier face is non-negotiable for that one element.

### Typography Principles

The face ladder is fixed: Stardos for stencil display and numerals; Barlow for uppercase chrome/metadata/pills; Inter for sentence-case body; Bowlby for the single quote-mark application. Crossing the rails — e.g., using Stardos for body, or using Inter uppercase for chrome — breaks the typographic register.

Line-height runs tight at display scale (0.8–0.92 on numerals and headlines) and opens to 1.4–1.45 on body. Letter-spacing on stencil headlines is slightly negative (–0.005 to –0.02em) at large sizes; chrome and labels run with generous positive tracking (0.04–0.14em). Numerals at all sizes use negative letter-spacing (typically –0.02em).

Bold within body is not used. Strong tags inside Inter remain at weight 400; emphasis is achieved by switching to Barlow Condensed uppercase, not by bolding Inter.

## Layout

### Canvas System

Stencil & Tablet targets a **fixed 1920×1080 canvas** via the `<deck-stage>` component. Layout uses absolute positioning from slide edges. Top chrome sits at top: 48px, left/right: 64px. Bottom chrome at bottom: 36px, left/right: 64px. Card grids inset from those chrome positions with 22–28px gaps between cards.

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-outer}` | 64px | Standard slide left/right inset |
| `{spacing.pad-top}` | 48px | Top inset for chrome |
| `{spacing.pad-bottom}` | 36px | Bottom inset for chrome |
| Internal card pad | 24–38px | Padding inside cards (compact to spacious) |
| `{spacing.gap-card}` | 22–28px | Gap between cards in a row or grid |

### Chrome Frame

Every standard slide carries top chrome and footer chrome:

- **Top bar** — left-aligned section name + right-aligned meta columns (one or two columns of 24px Barlow Condensed labels). Both uppercase, condensed, heavy-weight.
- **Footer** — left-aligned date or slide marker + right-aligned deck name. Both uppercase Barlow Condensed at 22px / 0.75 opacity.

The cover, agenda, section-divider, quote-panel, and CTA slides typically omit standard chrome — those layouts contain their own layout-specific top labels (the cover's "super" + lockup, the section-divider's eyebrow, etc.).

## Depth and Elevation

Stencil & Tablet is **flat by design**. There are no drop shadows. No box-shadows. No gradients. Depth comes entirely from:

- **Color blocks** — saturated accent fills against the bone field. A magenta tablet next to a teal tablet reads as two distinct surfaces because the colors carry the separation.
- **Rounded chrome** — 22–26px border-radius on every card softens the form and lets the eye read "tablet" rather than "rectangle."
- **Tablet stack order** — tablets are flat siblings, never stacked. No card sits on top of another card.

The single exception is the **organic-shape background** on the dark agenda layout: SVG blob shapes sit absolutely behind each agenda item in an accent color, and the number/label float on top with z-index. This is the only z-index in the system.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 999px (pill) | Status pills (yes/partial/no/note) |
| 26px | Tablet cards, principles cards, quote panel, CTA panels |
| 22px | Standard cards, action bars, process nodes, matrix table, chart frames, consult columns, stats cards |
| 18px | Decorative timeline bar |
| 14px | Cover mark (small lockup square), timeline tablet |
| 0 (square) | Chart plot box edges (the 2px solid black plot frame), legend bars, organic-shape SVG (which has no border-radius by definition) |

Cards are uniformly 22–26px rounded. Square corners appear only on chart plot frames (where the geometry of the axis lines demands it) and on legend bars (flat 32×6px rectangles for chart legends).

### Border Weights

- **2px solid `{colors.ink}`** — used on chart plot frames (left and bottom edges of the chart area) and on consult column h3 underlines.
- **1.5px solid rgba(10,10,10,0.35)** — used on matrix cell borders. The matrix is the densest table in the system and needs visible cell dividers.
- **1px dashed rgba(10,10,10,0.18–0.35)** — used inside chart plots as grid lines and as source-attribution top rules.
- **2px solid `{colors.ink}`** as a vertical separator — used inside action bars and consult headers to divide a tag from a headline.

### Decorative Element Types

**Tablet card** — the system's namesake container. A 22–26px rounded card holding a 220px+ stencil numeral above a stencil headline above Inter body. The numeral fills the upper half of the card; the headline and body sit at the bottom via `margin-top: auto`. Background takes any accent fill; text color follows the surface (ink on warm/light fills, bone on cool/dark fills).

**Color card** — a generic 22–26px rounded card in any accent fill, used for principles, process nodes, stats, and consult columns. Contains a stencil headline, optional body, and optional accent elements.

**Section-divider numeral** — a 540px stencil numeral in an accent color (typically `{colors.orange}` or `{colors.magenta}`) sitting absolute on a black field, paired with a small Barlow eyebrow at top-right and a 120px stencil headline at bottom-right. The numeral IS the layout.

**Action bar** — a full-width mustard-filled rounded card (22px radius) running near the top of a slide, containing a left-aligned uppercase Barlow tag, a vertical ink rule separator, and a stencil headline at 34px. Used for important section-opening callouts.

**Status pill** — a fully rounded (999px) pill with uppercase Barlow text. Color-coded for matrix status (teal/mustard/magenta/paper-bordered).

**Matrix table** — a paper-fill rounded card containing a grid of 1.5px-bordered cells. Head row inverts to black fill with bone stencil type. Row-label cells use stencil uppercase. Status cells contain pills.

**Process node** — a small rounded card (22px radius) holding a 64px stencil ordinal, a 28px stencil h3, and small Inter body. Process nodes sit in a 5-up grid with arrow connectors between them.

**Timeline bar** — a paper-fill rounded card (14px radius) running across the bottom of process diagrams, height 50px, with uppercase Barlow timeline markers spread evenly inside.

**Cover lockup** — a row at the bottom of a cover slide containing a small 56px rounded-square accent mark, an uppercase Barlow name + subtitle stack, and a stencil date. Defines the cover-bottom convention.

**Quote panel** — a magenta-filled 26px-rounded panel filling most of the slide, with a 320px Bowlby One quote-mark on the left and 60px stencil quote-text on the right.

**Organic blob shape** — SVG amoeba-like shapes sitting behind agenda items in a saturated accent color. The blob is the background; the number and label float on top.

**Legend bar** — a flat 32×6px rectangle (no border-radius) in a chart color, used as a chart legend swatch beside an uppercase Barlow label.

**Stat suffix** — a Barlow Condensed superscript at 40px / weight 800, vertical-align top, sitting beside a 160px stencil numeral. Standard units (% sign, ×, K, M).

## Do's and Don'ts

### Do

- Set every headline in Stardos Stencil uppercase at weight 700, regardless of size. The stencil ink-break glyphs are the system's identity.
- Use Barlow Condensed extra-heavy (600–900) uppercase for every chrome, label, pill, legend, footer, and metadata element — with letter-spacing of at least 0.04em.
- Render numerals huge — tablets at 220px, stats at 160px, section dividers at 540px. Scale is the system's primary expressive tool.
- Tile cards in saturated accents (sienna, magenta, orange, teal, blue, mustard, olive) across the bone field. Color blocks ARE the layout.
- Round every card to 22–26px. Square corners on cards break the tablet register.
- Pair stencil headlines and numerals with Inter body — the loud/quiet contrast is the typographic rhythm.
- Use `{colors.bone}` (not white) for text on dark fills. The bone-on-black inversion is the system's only color inversion and white would clash.
- Apply the matrix pill convention (teal/mustard/magenta/paper-bordered) consistently — yes/partial/no/note. The convention earns its weight by appearing repeatedly.
- Use Bowlby One for the quote-mark glyph inside a quote panel. It's the only place that face appears.
- Position chrome at fixed offsets (top: 48px / 64px, bottom: 36px / 64px). Chrome positions are non-negotiable across standard slides.

### Don't

- Don't lowercase a stencil headline. Stardos Stencil at any scale is uppercase only.
- Don't render chrome or metadata in sentence case. Barlow Condensed in this system is always uppercase.
- Don't add drop shadows or gradients. The system is flat blocks of saturated color.
- Don't square the corners on cards, action bars, or pills. The minimum acceptable card radius is 22px; pills are 999px.
- Don't invert text to pure white on dark fills. Use `{colors.bone}` — the off-white keeps the system tied to its bone/paper register.
- Don't use Inter for headlines or chrome. Inter is the body voice; it never leads.
- Don't use Stardos Stencil for body paragraphs. The stencil face at body scale (under 22px) becomes illegible — Inter is the body voice for a reason.
- Don't introduce an eighth accent color. The seven-accent palette plus bone/black/paper is closed.
- Don't use the section-divider 540px numeral on a light field. The mega-numeral pattern lives on dark fields only.
- Don't crowd cards with less than 22px gaps. The bone field visible between cards is structural.

## Responsive Behavior

Stencil & Tablet is a **fixed 1920×1080** system rendered inside a `<deck-stage>` web component. Layout uses absolute pixel positioning; the deck-stage scales the entire 1920×1080 canvas uniformly to fit the viewport. There are no media queries.

### Scaling Behavior

All elements maintain relative position and size at any viewport. A 540px section numeral remains 540px on the deck-stage's internal canvas; the stage scales the canvas to the browser. The system depends on the deck-stage component for this scaling.

### Presenter Behavior

Navigation is handled by the external `deck-stage.js` script. Each slide carries a `data-label` attribute identifying it. Slides advance via the deck-stage's controls; some slides carry `data-om-validate="false"` to opt out of certain auto-validation.

### Print Behavior

There is no embedded print stylesheet. Static export depends on the deck-stage component; for PDF generation, each slide renders as a single 1920×1080 page.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face (default) | Chinese face | Weight | Notes |
|---|---|---|---|---|
| Display / Cover hero / Section divider | Stardos Stencil 700 uppercase | 思源宋体 / Noto Serif SC | 900 | Stardos Stencil's industrial signage register translates best to Noto Serif SC at the heaviest weight (900) — Song-style strokes carry equivalent visual mass at 120–540px scale. |
| Numerals (tablet, stat, mega) | Stardos Stencil 700 | 思源宋体 / Noto Serif SC | 900 | Chinese numerals (一二三四五 or 〇一二三四) rendered in NSC 900 hold their weight against accent fills. Latin/Arabic digits inside Chinese decks should stay in Stardos for the stencil break. |
| Chrome / metadata / pill | Barlow Condensed 800 uppercase | 思源黑体 / Noto Sans SC | 700–900 | Barlow Condensed has no condensed CJK equivalent on CDN — fall back to Noto Sans SC heavy. Use tighter `font-stretch` is not available; rely on shorter labels. |
| Body | Inter 400 | 思源宋体 / Noto Serif SC | 400 | NSC body matches the loud/quiet contrast; the serif body softens the industrial register slightly but stays legible. |

### Mixed-Content Strategy

This template uses **Strategy A**: replace the Latin display face entirely with the CJK display face for any element rendering Chinese characters. Stardos Stencil's ink-break gaps are physically tied to the Latin alphabet's stroke topology — there is no Chinese stencil face on CDN that reproduces the effect, and forcing Stardos to display CJK either fails (no glyph coverage) or renders an ugly fallback. Replace the entire `font-family` with Noto Serif SC 900 for any Chinese-content element.

```css
font-family: 'Noto Serif SC', 'Stardos Stencil', serif;  /* display / headlines — CJK first */
font-family: 'Noto Sans SC', 'Barlow Condensed', sans-serif;  /* chrome / pills — heavy weights only */
font-family: 'Noto Serif SC', 'Inter', sans-serif;  /* body */
```

Putting NSC first in the stack means Chinese characters render in NSC and any Latin/numeric content mixed inside the same element also gets NSC, which loses the stencil register for mixed lines. **Recommendation**: for cover slides with mixed-script headlines (e.g., `STUDIO 工作室`), split into two `<span>` elements — one in Stardos for the Latin word, one in NSC 900 for the Chinese phrase, sized so the visual weight matches (NSC 900 at the same px renders slightly heavier than Stardos 700).

### Loading

Add to `<head>` (Google Fonts hosts Noto Serif SC and Noto Sans SC; both ship with weight 900):

```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=Stardos+Stencil:wght@400;700&family=Bowlby+One&family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600&family=Noto+Serif+SC:wght@400;500;700;900&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
```

Noto Serif SC 900 is critical — it's the only weight that holds visual parity with Stardos Stencil at large scale. Lighter weights (700 or below) render Chinese headlines as "thin" beside Stencil Latin.

### Universal CJK Adjustments

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

- **Line-height**: body 1.75–1.85 (Stencil & Tablet's 1.4 Inter-default is too tight for CJK strokes); display 1.15–1.25 (looser than Latin 0.8–0.92 because CJK glyphs at 220–540px need vertical breathing room or strokes collide).
- **Letter-spacing**: 0 on CJK. Stencil & Tablet's negative tracking on Latin display (-0.005 to -0.02em) and positive tracking on Barlow chrome (0.04–0.14em) are both wrong for Chinese — CJK glyphs are pre-spaced; tracking creates either overlap or unnatural gaps.
- **Text-transform**: no uppercase on CJK. Stencil & Tablet uppercases nearly everything in Latin; on Chinese this is a no-op but ensure no parent rule attempts it (some browsers may render unpredictably).
- **Full-width punctuation**: use `，。：；！？` (full-width) not `,.:;!?` (half-width). The full-width forms include their own surrounding whitespace and align to the CJK em-box.
- **No period on display headlines**: Chinese headlines drop the terminal `。` — the headline's visual closure is enough.
- **Pangu spacing (盘古之白)**: insert a thin space between CJK and adjacent Latin/numerals. Write `使用 Claude` not `使用Claude`; `2024 年` not `2024年`. Especially important in this system since Stardos numerals frequently sit beside Chinese labels.
- **One font per sentence**: don't mix NSC and Noto Sans SC inside a single line. The serif/sans switch should happen at element boundaries, not mid-phrase.

### Aesthetic Notes for This System

Noto Serif SC 900 against a saturated accent fill (magenta, orange, teal) reproduces the poster-loud register of the system well — the heavy Song strokes have similar visual mass to Stardos Stencil's chunky stencil glyphs. The system's identity (industrial signage / municipal stencil) shifts slightly toward "Chinese newspaper headline" in CJK, which is a related but distinct register; for projects where the industrial stencil feel is essential, lean on Stardos for Latin words and accept that pure-Chinese headlines will read as authoritative newspaper-poster type rather than skate-deck stencil.

The matrix pill convention (teal=yes, mustard=partial, magenta=no) translates directly — replace the uppercase Barlow text inside pills with NSC 700 sentence-case Chinese labels (`是` / `部分` / `否`). Pill width may grow to accommodate Chinese (single-character labels are tightest); keep the 999px radius and accept slightly wider pills.

The 540px section-divider numeral pattern is one of the system's strongest moments and works beautifully with Chinese — `一` `二` `三` rendered at 540px NSC 900 against the black field carries equal visual authority to Stardos at the same size. For two-digit numerals, NSC 900 will be narrower than Stardos at the same px, so consider bumping to 600–620px to maintain the "numeral fills the canvas" register.

### Known CJK Gap

- Barlow Condensed has no condensed CJK equivalent. The system's uppercase-heavy-condensed-tracked chrome aesthetic cannot be reproduced; Noto Sans SC 900 is the closest fallback but lacks the condensed proportion. Accept that Chinese chrome will feel slightly wider than Latin chrome.
- Bowlby One is Latin-only and lives in a single place (the 320px quote-mark inside quote panels). For Chinese quote panels, replace with `「` (full-width left corner bracket) or `『` rendered in NSC 900 at 320px in the original `{colors.magenta}` or `{colors.teal}` — this is the conventional Chinese quote-opening glyph and reads correctly without the Bowlby weight.
- Stardos Stencil is a single weight (700). NSC ships with 400, 500, 700, 900; the system specifies weight 700 for everything in Stardos, but for CJK you should use NSC 900 to match visual mass — the spec's "weight 700" is a Latin convention that doesn't apply.
- The pill convention's `letter-spacing: 0.04–0.14em` is meaningless on CJK and should be zeroed for any Chinese pill content.

## Iteration Guide

1. Any new headline uses Stardos Stencil uppercase at weight 700. The stencil ink-break is the system's most recognizable trait.
2. Any new card uses 22–26px border-radius and a saturated accent fill from the seven-color palette. The tablet form factor is the default container.
3. Any new tablet must include a stencil numeral above its headline. A tablet without a numeral is just a card.
4. Any new chrome, label, pill, or legend uses uppercase Barlow Condensed at weight 600–900 with letter-spacing of at least 0.04em.
5. Any new body paragraph uses Inter at 18–24px. Inter is the system's only sentence-case face.
6. Status pills inside matrix layouts follow the fixed color convention (teal/mustard/magenta/paper-bordered). Don't invent new statuses with new colors — extend by reusing the existing palette.
7. Numerals always run weight 700 with negative letter-spacing (typically –0.02em). Smaller weight stencil numerals break the system.
8. Cool fills (teal, blue, black) flip text to `{colors.bone}`. Warm and mid fills (sienna, magenta, orange, mustard, olive, paper, bone) stay with `{colors.ink}`.
9. Section-divider slides use the 540px-numeral + 120px-headline + black-field pattern. Don't compress section dividers into smaller frames — the scale IS the divider.
10. The bone field visible between and around cards is structural. Don't shrink it to fit more content; if content doesn't fit, reduce content.

## Known Gaps

- The system depends on the external `deck-stage.js` script for slide scaling and navigation. Without it, slides render at intrinsic 1920×1080.
- All four font families (Stardos Stencil, Bowlby One, Barlow Condensed, Inter) load from Google Fonts. If fonts fail, fallbacks (serif, sans-serif, Helvetica, Arial) lose the stencil and condensed personality entirely.
- Stardos Stencil is a single-weight typeface — there is no weight axis. The system uses font-weight: 700 as a label but the face actually has only one weight; specifying 400 in the quote-text token renders nearly identically.
- Bowlby One appears in exactly one place (the 320px quote-mark). It is a heavyweight asset for a single glyph; if the quote panel is unused, Bowlby One is dead weight in the font load.
- The organic-shape SVG blobs on the agenda slide are inline SVG paths with hand-tuned bezier curves — they are not parametric and adding a new shape requires drawing it.
- The chart plot SVG uses hardcoded coordinates inside a fixed-aspect SVG; data updates require manually recomputing point positions.
- The seven-accent palette doesn't strictly map colors to semantic roles outside the matrix. Decks may follow loose conventions (orange = primary, teal = secondary) but the system doesn't enforce them.
- Cover hero, numeral-tablet, and section-headline all use generous letter-spacing in the negative direction — at very small viewport scaling, glyphs may touch. The deck-stage's uniform scaling avoids this in practice.
````

---

## 2. 글씨체

- 이 디자인의 한글 글씨체: 제목 Hakgyoansim Jiugae(400) · 본문 Hakgyoansim Wooju(400). (쓰는 폰트: Hakgyoansim Jiugae, 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장(표지)에서 처음 나오는 부품**
- `.a1` — 1장 — 예: `<div class="action a1">`
- `.action` — 1·2장 — 예: `<div class="action a1">`
- `.blue` — 1·3장 — 예: `<i class="blue">`
- `.bone` — 1·2·3·4·5·6장 — 예: `<section class="slide bone">`
- `.chips` — 1장 — 예: `<div class="chips">`
- `.date` — 1장 — 예: `<em class="date">`
- `.en` — 1장 — 예: `<p class="en">`
- `.lockup` — 1장 — 예: `<div class="lockup">`
- `.magenta` — 1·2·3·5장 — 예: `<i class="magenta">`
- `.mark` — 1장 — 예: `<i class="mark orange">`
- `.mustard` — 1·2·3·5장 — 예: `<i class="mustard">`
- `.nt` — 1·4장 — 예: `<b class="nt">`
- `.olive` — 1·3장 — 예: `<i class="olive">`
- `.orange` — 1·2·3·4·5장 — 예: `<div class="tablet orange tb1">`
- `.sienna` — 1·3장 — 예: `<i class="sienna">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide bone">`
- `.super` — 1장 — 예: `<p class="super">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.tablet` — 1·3·4장 — 예: `<div class="tablet orange tb1">`
- `.tag` — 1·2·6장 — 예: `<span class="tag">`
- `.tb1` — 1장 — 예: `<div class="tablet orange tb1">`
- `.teal` — 1·2·3·4·5장 — 예: `<i class="teal">`
- `.unit` — 1장 — 예: `<p class="unit">`
- `.vr` — 1·2·6장 — 예: `<i class="vr">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.a2` — 2장 — 예: `<div class="action a2">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.card` — 2·3·4·5·6장 — 예: `<div class="card paper fig">`
- `.fig` — 2장 — 예: `<div class="card paper fig">`
- `.footer` — 2·3·4·5·6장 — 예: `<div class="footer">`
- `.go` — 2장 — 예: `<button class="pillb go" data-act="step">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.lgd` — 2·4·5·6장 — 예: `<span class="lgd">`
- `.meta` — 2·3·4·5·6장 — 예: `<span class="meta">`
- `.no` — 2·5장 — 예: `<b class="no">`
- `.node` — 2장 — 예: `<div class="node orange" data-s="1">`
- `.nodes` — 2장 — 예: `<div class="nodes">`
- `.paper` — 2·3·4·5·6장 — 예: `<div class="card paper fig">`
- `.pillb` — 2·5·6장 — 예: `<button class="pillb go" data-act="step">`
- `.topbar` — 2·3·4·5·6장 — 예: `<div class="topbar">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.ax` — 3장 — 예: `<div class="vr2 ax">`
- `.bar` — 3장 — 예: `<i class="bar sienna" style="height:63%">`
- `.chart` — 3장 — 예: `<div class="card paper chart">`
- `.col` — 3장 — 예: `<div class="col">`
- `.cv` — 3장 — 예: `<span class="cv">`
- `.ink` — 3장 — 예: `<i class="lb ink">`
- `.lb` — 3장 — 예: `<i class="lb ink">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.plot` — 3장 — 예: `<div class="plot">`
- `.sc` — 3장 — 예: `<div class="tablet orange sc">`
- `.src` — 3장 — 예: `<p class="src">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.sv` — 3장 — 예: `<b class="sv">`
- `.vr2` — 3장 — 예: `<div class="vr2 ax">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.attr` — 4장 — 예: `<span class="attr">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.cp` — 4장 — 예: `<div class="tablet orange cp">`
- `.lst` — 4장 — 예: `<div class="card paper lst">`
- `.matrix` — 4·5장 — 예: `<div class="matrix mt4">`
- `.mr4` — 4장 — 예: `<div class="mr4 th">`
- `.mt4` — 4장 — 예: `<div class="matrix mt4">`
- `.part` — 4장 — 예: `<span class="st part">`
- `.qm` — 4장 — 예: `<b class="qm">`
- `.qpanel` — 4장 — 예: `<div class="qpanel">`
- `.rl` — 4장 — 예: `<span class="rl">`
- `.sm` — 4·5·6장 — 예: `<b class="nt sm">`
- `.st` — 4·5·6장 — 예: `<span class="st yes">`
- `.th` — 4장 — 예: `<div class="mr4 th">`
- `.yes` — 4장 — 예: `<span class="st yes">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="st blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="card paper blk">`
- `.br` — 5장 — 예: `<p class="br">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.mh` — 5장 — 예: `<div class="mh">`
- `.ml` — 5장 — 예: `<span class="ml">`
- `.mo` — 5장 — 예: `<span class="mo">`
- `.mr` — 5장 — 예: `<button class="mr" data-opt="0">`
- `.pk` — 5장 — 예: `<span class="st pk">`
- `.quiz` — 5장 — 예: `<div class="matrix quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong=…`
- `.rty` — 5장 — 예: `<button class="pillb rty" data-act="retry">`
- `.wl` — 5장 — 예: `<span class="lgd wl">`
- `.words` — 5장 — 예: `<div class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="card paper d6 a">`
- `.ac6` — 6장 — 예: `<div class="ac6" id="st-ac">`
- `.b` — 6장 — 예: `<div class="card paper d6 b">`
- `.c` — 6장 — 예: `<div class="card paper d6 c">`
- `.d6` — 6장 — 예: `<div class="card paper d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.g6` — 6장 — 예: `<div class="card paper g6">`
- `.pl6` — 6장 — 예: `<div class="pl6" id="st-pl">`
- `.r6` — 6장 — 예: `<div class="r6">`
- `.sl6` — 6장 — 예: `<span class="lgd sl6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`
- `.tb6` — 6장 — 예: `<div class="tb6" id="st-tb">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="stencil-tablet">
<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=Stardos+Stencil:wght@400;700&family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500&family=Bowlby+One&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/stencil-tablet.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide bone">
  <p class="super">초등 과학 · 6학년 2학기 · Science Poster</p>
  <p class="unit">계절의 변화</p>
  <p class="en">Sun, Shadow & Temperature</p>
  <div class="tablet orange tb1"><b class="nt">03</b><h3>1단원 · 3~4차시</h3></div>
  <div class="action a1"><span class="tag">학습 목표</span><i class="vr"></i><h1 class="t1">하루 동안 태양 고도,<br>그림자 길이, 기온의 관계</h1></div>
  <div class="chips"><i class="sienna"></i><i class="magenta"></i><i class="teal"></i><i class="blue"></i><i class="mustard"></i><i class="olive"></i></div>
  <div class="lockup"><i class="mark orange"></i><div><b>00초등학교</b><span>초등 과학 · 6학년 2학기</span></div><em class="date">2026</em></div>
</section>
<section class="slide bone" data-steps="4">
  <div class="topbar"><span>측정 준비</span><span class="meta">STEPS 04 · BUILD</span></div>
  <h2 class="hd">태양 고도 측정기 만들기</h2>
  <div class="card paper fig"><span class="lgd">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="nodes"><div class="node orange" data-s="1"><b class="no">01</b><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="node teal" data-s="2"><b class="no">02</b><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="node magenta" data-s="3"><b class="no">03</b><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="node mustard" data-s="4"><b class="no">04</b><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="pillb go" data-act="step">다음 단계 →</button><button class="pillb" 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="action a2"><span class="tag">태양 고도</span><i class="vr"></i><b>막대기의 그림자와 실이 이루는 각 = 태양 고도</b></div>
  <div class="footer"><span>2026 · 1단원 · 3~4차시 · 02/06</span><span>버튼 규칙 없음 → 둥근 알약으로 표현</span></div>
</section>
<section class="slide bone">
  <div class="topbar"><span>측정 결과</span><span class="meta">DATA · 예시 값</span></div>
  <h2 class="hd">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="tablet orange sc"><b class="sv">12:30</b><h3>남중 시각</h3><p>태양 고도가 가장 높아요</p></div><div class="tablet teal sc"><b class="sv">정남</b><h3>남중 방향</h3><p>남중할 때 태양의 위치</p></div><div class="tablet magenta sc"><b class="sv">14:30</b><h3>최고 기온</h3><p>기온이 가장 높아요</p></div><div class="tablet mustard sc"><b class="sv">9:30</b><h3>가장 긴 그림자</h3><p>그림자가 가장 길어요</p></div></div>
  <div class="card paper chart">
    <div class="lg"><span><i class="lb ink"></i>태양 고도(°) · 가장 높은 값 = 검정</span><span><i class="lb sienna"></i>막대 색은 시각 구분</span></div>
    <div class="plot"><div class="col"><span class="cv">38°</span><i class="bar sienna" style="height:63%"></i></div><div class="col"><span class="cv">48°</span><i class="bar orange" style="height:80%"></i></div><div class="col"><span class="cv">55°</span><i class="bar mustard" style="height:92%"></i></div><div class="col"><span class="cv">57°</span><i class="bar ink" style="height:95%"></i></div><div class="col"><span class="cv">54°</span><i class="bar teal" style="height:90%"></i></div><div class="col"><span class="cv">47°</span><i class="bar blue" style="height:78%"></i></div><div class="col"><span class="cv">37°</span><i class="bar olive" style="height:62%"></i></div></div>
    <div class="vr2 ax"><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="vr2"><b>그림자 길이(cm)</b><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="vr2"><b>기온(℃)</b><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>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
  <div class="footer"><span>2026 · 1단원 · 3~4차시 · 03/06</span><span>계절의 변화 — 00초등학교</span></div>
</section>
<section class="slide bone">
  <div class="topbar"><span>관계 정리</span><span class="meta">COMPARE · MATRIX</span></div>
  <h2 class="hd">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="tablet orange cp"><b class="nt sm">01</b><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="tablet teal cp"><b class="nt sm">02</b><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
  <div class="matrix mt4"><div class="mr4 th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="mr4"><span class="rl">오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="mr4"><span class="rl">낮 12:30</span><span><span class="st yes">가장 높아요</span></span><span><span class="st yes">가장 짧아요</span></span><span><span class="st part">높아지는 중</span></span></div><div class="mr4"><span class="rl">오후 14:30</span><span><span class="st part">낮아지는 중</span></span><span><span class="st part">길어지는 중</span></span><span><span class="st yes">가장 높아요</span></span></div></div>
  <div class="qpanel"><b class="qm">“</b><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="attr">— 오늘의 정리</span></div>
  <div class="card paper lst"><span class="lgd">남중</span><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p>이때의 태양 고도를 남중 고도라고 해요</p></div>
  <div class="footer"><span>2026 · 1단원 · 3~4차시 · 04/06</span><span>계절의 변화 — 00초등학교</span></div>
</section>
<section class="slide bone">
  <div class="topbar"><span>확인하기</span><span class="meta">CHECK · QUIZ</span></div>
  <h2 class="hd">배운 내용을 확인해 볼까요?</h2>
  <div class="matrix quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <div class="mh"><span>QUESTION</span><span>하루 중 그림자 길이가 가장 짧을 때는?</span></div>
    <button class="mr" data-opt="0"><span class="ml">A</span><span class="mo">오전 9시 30분</span><span class="st pk"></span></button><button class="mr" data-opt="1"><span class="ml">B</span><span class="mo">낮 12시 30분 무렵</span><span class="st pk"></span></button><button class="mr" data-opt="2"><span class="ml">C</span><span class="mo">오후 3시 30분</span><span class="st pk"></span></button>
    <p class="fb" data-fb></p>
    <button class="pillb rty" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="card paper blk">
    <span class="lgd">빈칸을 눌러 확인해요</span>
    <p class="br"><b class="no sm">01</b><span><button class="st blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</span></p><p class="br"><b class="no sm">02</b><span><button class="st blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</span></p><p class="br"><b class="no sm">03</b><span><button class="st blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</span></p>
    <span class="lgd wl">오늘의 낱말</span>
    <div class="words"><span class="st orange">태양 고도</span><span class="st teal">남중 고도</span><span class="st magenta">그림자 길이</span><span class="st mustard">기온</span></div>
  </div>
  <div class="footer"><span>2026 · 1단원 · 3~4차시 · 05/06</span><span>계절의 변화 — 00초등학교</span></div>
</section>
<section class="slide bone">
  <div class="topbar"><span>디자인 안내</span><span class="meta">GUIDE · SIGNATURE</span></div>
  <h2 class="hd">이 디자인 사용 설명서</h2>
  <div class="card paper g6"><div class="r6"><span class="lgd">한눈에</span><p>서해안 스케이트 포스터 + 관공서 스텐실 표지판. <b>뼈색 바탕 + 검정</b>에 레트로 인쇄 색 일곱으로 카드를 채워요 — 색 덩어리가 곧 레이아웃.</p></div><div class="r6"><span class="lgd">색</span><p><span class="sw6"><span><i style="background:#E2DCC9"></i>뼈색</span><span><i style="background:#0A0A0A"></i>검정</span><span><i style="background:#A06A3C"></i>시에나</span><span><i style="background:#C73B7A"></i>마젠타</span><span><i style="background:#EE7A2E"></i>주황</span><span><i style="background:#2D7E73"></i>청록</span><span><i style="background:#3F73B7"></i>파랑</span><span><i style="background:#D8A93B"></i>겨자</span><span><i style="background:#6F7A2E"></i>올리브</span></span></p></div><div class="r6"><span class="lgd">글꼴</span><p>제목·숫자 Stardos Stencil → Hakgyoansim Jiugae<br>라벨 Barlow Condensed · 본문 Inter → Hakgyoansim Wooju</p></div><div class="r6"><span class="lgd">이렇게 쓰면 좋아요</span><p>규칙·안전 수칙·단계 안내처럼 또렷하게 알리는 수업. 청록·파랑·검정 위 글자는 뼈색(흰색 금지).</p></div></div>
  <span class="lgd sl6">대표 장치 — 눌러 보세요</span>
  <div class="card paper d6 a"><div class="dh"><h3>타블렛 카드</h3><button class="pillb sm" data-demo="#st-tb" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="tb6" id="st-tb"><b>03</b><span>1단원 · 3~4차시</span></div></div>
  <div class="card paper d6 b"><div class="dh"><h3>겨자 행동 띠</h3><button class="pillb sm" data-demo="#st-ac" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="ac6" id="st-ac"><span class="tag">TODAY</span><i class="vr"></i><b>계절의 변화</b></div></div>
  <div class="card paper d6 c"><div class="dh"><h3>상태 알약</h3><button class="pillb sm" data-demo="#st-pl" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="pl6" id="st-pl"><span class="st">예</span><span class="st">부분</span><span class="st">아니오</span><span class="st">메모</span></div></div>
  <div class="footer"><span>2026 · 1단원 · 3~4차시 · 06/06</span><span>계절의 변화 — 00초등학교</span></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><button class="dk-next" aria-label="다음">→</button></nav>
  </main>
</div>

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

---

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

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

```css
/* stencil-tablet — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-28';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/hakgyoansim-jiugae/HakgyoansimJiugaeR.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:#E2DCC9;--slide-bg:#E2DCC9;
  --kt:'kp-28';--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 === */

/* --- 뼈색 + 검정 + 포인트 일곱 --- */
:root{--bone:#E2DCC9;--ink:#0A0A0A;--paper:#F4EFE0;--sienna:#A06A3C;--magenta:#C73B7A;--orange:#EE7A2E;--teal:#2D7E73;--blue:#3F73B7;--mustard:#D8A93B;--olive:#6F7A2E;--hl:1.5px solid rgba(10,10,10,.35)}
.slide{color:var(--ink);font-family:'Inter',var(--kb),sans-serif;font-weight:var(--wb)}
.bone{background:var(--bone)}
.slide>*{position:absolute}
.sienna{background:var(--sienna)}.magenta{background:var(--magenta)}.orange{background:var(--orange)}.teal{background:var(--teal);color:var(--bone)}.blue{background:var(--blue);color:var(--bone)}.mustard{background:var(--mustard)}.olive{background:var(--olive)}.paper{background:var(--paper)}.ink{background:var(--ink)}
h1,h2,h3,.unit,.action b,.mh span:last-child,.rl,.qpanel p{font-family:'Stardos Stencil',var(--kt),serif;font-weight:var(--wt);text-transform:uppercase;letter-spacing:0}
.topbar,.footer,.super,.tag,.pillb,.st,.mh,.lgd,.attr,.lg{font-family:'Barlow Condensed',var(--kb),sans-serif;text-transform:uppercase}
.card{border-radius:22px}
.lgd{display:block;font-weight:800;font-size:24px;letter-spacing:.14em}
.pillb{border-radius:999px;padding:12px 26px;font-weight:800;font-size:28px;letter-spacing:.06em;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}
.pillb.go{background:var(--orange);border-color:var(--orange)}
.pillb:disabled{opacity:.35}
.st{display:inline-block;border-radius:999px;padding:6px 16px;font-weight:700;font-size:22px;letter-spacing:.08em;background:var(--paper);border:1.5px solid var(--ink)}
.st.yes{background:var(--teal);color:var(--bone);border-color:var(--teal)}
.st.part{background:var(--mustard);border-color:var(--mustard)}
.st.orange{background:var(--orange);border-color:transparent}.st.mustard{background:var(--mustard);border-color:transparent}.st.teal{background:var(--teal);color:var(--bone);border-color:transparent}.st.magenta{background:var(--magenta);color:var(--bone);border-color:transparent}

/* --- 크롬 --- */
.topbar{left:64px;right:64px;top:48px;display:flex;justify-content:space-between;font-weight:800;font-size:30px;letter-spacing:.04em}
.topbar .meta{font-weight:600;font-size:24px;letter-spacing:.06em;opacity:.75}
.footer{left:64px;right:64px;bottom:36px;display:flex;justify-content:space-between;gap:40px;font-weight:600;font-size:22px;letter-spacing:.08em;opacity:.75}
.footer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd{left:64px;right:64px;top:100px;font-size:84px;line-height:1.05;white-space:nowrap}

/* 타블렛 카드 · 겨자 행동 띠 */
.tablet{border-radius:26px;padding:30px 32px 28px;display:flex;flex-direction:column}
.nt{font:700 200px/.86 'Stardos Stencil',serif;letter-spacing:-.02em}
.tablet h3{margin-top:auto;font-size:44px;line-height:1.05}
.tablet p{margin-top:8px;font-size:24px;line-height:1.4}
.action{border-radius:22px;background:var(--mustard);display:flex;align-items:center;gap:26px;padding:24px 32px}
.tag{flex:none;font-weight:800;font-size:28px;letter-spacing:.12em}
.vr{flex:none;width:2px;align-self:stretch;background:var(--ink)}

/* --- 1. 표지: Barlow 위첨자 + 스텐실 단원·영문 | 주황 타블렛(차시) / 겨자 행동 띠 = 학습 목표(가장 큰 스텐실) / 색 칩 + 로고 묶음 --- */
.super{left:64px;top:90px;font-weight:800;font-size:28px;letter-spacing:.12em}
.unit{left:60px;top:136px;font-size:120px;line-height:1.05;white-space:nowrap}
.en{left:64px;top:280px;font:700 64px/.9 'Stardos Stencil',serif;letter-spacing:-.015em;text-transform:uppercase}
.tb1{right:64px;top:80px;width:560px;height:290px;flex-direction:row;align-items:flex-end;gap:24px}
.tb1 .nt{font-size:220px}
.tb1 h3{margin:0 0 10px;font-size:48px}
.a1{left:64px;right:64px;top:400px;padding:30px 40px}
.t1{font-size:108px;line-height:1.14;white-space:nowrap}
.chips{left:64px;right:64px;top:760px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.chips i{height:50px;border-radius:14px}
.lockup{left:64px;right:64px;bottom:60px;display:flex;align-items:center;gap:22px;border-top:2px solid var(--ink);padding-top:24px}
.mark{width:56px;height:56px;border-radius:14px;flex:none}
.lockup b{display:block;font:700 32px/1.1 'Barlow Condensed',var(--kb),sans-serif;letter-spacing:.04em}
.lockup span{font:600 24px/1.2 'Barlow Condensed',var(--kb),sans-serif;letter-spacing:.06em;opacity:.75}
.date{margin-left:auto;font:700 44px/1 'Stardos Stencil',serif;font-style:normal}

/* --- 2. 만들기: 종이 판 속 측정기 그림 | 과정 노드 4개(64px 서수, 색이 다름, 켜지면 또렷) + 둥근 알약 버튼 / 겨자 행동 띠(정의 + 메모) --- */
.fig{left:64px;top:230px;width:900px;padding:20px 30px 14px;
  --g-ink:var(--ink);--g-acc:var(--magenta);--g-stick:var(--orange);--g-board:var(--bone);--g-ruler:var(--mustard);--g-prot:rgba(45,126,115,.18);--g-shadow:rgba(10,10,10,.35);--g-font:'Inter',var(--kb),sans-serif;--g-sw:2.5}
.fig .gauge{width:800px;display:block;margin:4px auto 0}
.nodes{left:1000px;right:64px;top:230px;display:flex;flex-direction:column;gap:14px}
.node{border-radius:22px;padding:16px 24px;display:grid;grid-template-columns:90px 1fr;gap:16px;align-items:center;transition:opacity .25s}
.no{font:700 64px/.9 'Stardos Stencil',serif}
.node h3{font-size:36px;line-height:1.05}
.node p{margin-top:4px;font-size:21px;line-height:1.4}
.slide[data-step]:not([data-step="0"]) .node:not(.on){background:var(--paper)!important;color:rgba(10,10,10,.35)!important;outline:1.5px dashed rgba(10,10,10,.35);outline-offset:-1.5px}
.btns{left:1000px;right:64px;top:800px;display:flex;align-items:center;gap:14px}
.cap{flex:1;font-size:22px;line-height:1.35;font-weight:500}
.a2{left:64px;right:64px;top:882px;height:84px;padding:0 32px}
.a2 b{font-size:36px}

/* --- 3. 숫자와 그래프: 색 타블렛 4장(스텐실 숫자) | 종이 차트 판(색 막대, 가장 높은 값 = 검정, 범례 막대 32×6) + 값 줄 --- */
.stats{left:64px;right:64px;top:220px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sc{padding:20px 28px 22px}
.sv{font:700 84px/.9 'Stardos Stencil',var(--kt),serif}
.sc h3{margin-top:10px;font-size:30px}
.sc p{font-size:21px}
.chart{left:64px;right:64px;top:470px;padding:20px 40px 16px}
.lg{display:flex;gap:40px;font-weight:700;font-size:22px;letter-spacing:.06em}
.lb{display:inline-block;width:32px;height:6px;margin-right:10px;vertical-align:middle}
.plot{height:220px;margin:8px 0 0 220px;display:grid;grid-template-columns:repeat(7,1fr);gap:26px;border-bottom:2px solid var(--ink)}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch}
.bar{display:block;border-radius:14px 14px 0 0}
.cv{text-align:center;margin-bottom:6px;font:700 30px/1 'Stardos Stencil',serif}
.vr2{display:grid;grid-template-columns:220px repeat(7,1fr);column-gap:26px;align-items:center;text-align:center;padding:7px 0;border-bottom:var(--hl);font-size:24px}
.vr2:last-child{border-bottom:0}
.vr2 b{text-align:left;font:700 20px/1.2 'Barlow Condensed',var(--kb),sans-serif;letter-spacing:.06em}
.src{left:64px;right:64px;top:956px;font-size:19px;opacity:.75}
.vr2.ax{padding-left:246px;grid-template-columns:repeat(7,1fr);font:600 22px/1 'Barlow Condensed',sans-serif;letter-spacing:.06em}

/* --- 4. 비교와 표: 주황·청록 타블렛 + 매트릭스(검정 머리, 알약: 청록 = 가장 · 겨자 = 바뀌는 중) | 마젠타 인용 판(Bowlby 따옴표) + 종이 남중 카드 --- */
.cmp{left:64px;width:1080px;top:220px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cp{min-height:300px}
.nt.sm{font-size:120px}
.cp h3{font-size:38px;margin-bottom:6px}
.matrix{background:var(--paper);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.mt4{left:64px;width:1080px;top:560px}
.mr4{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:center;border-bottom:var(--hl);padding:14px 24px;font-size:25px;gap:12px}
.mr4:last-child{border-bottom:0}
.mr4.th{background:#000;color:var(--bone);font:700 22px/1.2 'Stardos Stencil',var(--kt),serif;letter-spacing:.02em}
.rl{font-size:28px}
.qpanel{left:1180px;right:64px;top:220px;height:420px;background:var(--magenta);border-radius:26px;padding:20px 44px 30px;display:flex;flex-direction:column;overflow:hidden}
.qm{display:block;height:120px;font:700 220px/.8 'Bowlby One',serif}
.qpanel p{font-size:40px;line-height:1.12}
.attr{margin-top:auto;font-weight:800;font-size:26px;letter-spacing:.08em}
.lst{left:1180px;right:64px;top:668px;padding:24px 32px;display:flex;flex-direction:column;gap:8px}
.lst p{font-size:23px;line-height:1.45}

/* --- 5. 확인하기: 매트릭스 퀴즈(PICK → 청록 YES / 마젠타 NO) | 종이 빈칸 카드(메모 알약 → 열면 청록) + 색 알약 낱말 --- */
.quiz{left:64px;width:1080px;top:220px;bottom:90px}
.mh{display:grid;grid-template-columns:150px 1fr;align-items:center;background:#000;color:var(--bone);padding:18px 26px;font-weight:800;font-size:24px;letter-spacing:.08em}
.mh span:last-child{font-size:44px;line-height:1.15}
.mr{display:grid;grid-template-columns:80px 1fr auto;align-items:center;text-align:left;border-bottom:var(--hl);padding:14px 26px;color:var(--ink)}
.ml{font:700 40px/1 'Stardos Stencil',serif}
.mo{font-size:34px;font-weight:500}
.pk::after{content:'PICK'}
.mr.right .pk{background:var(--teal);color:var(--bone);border-color:var(--teal)}.mr.right .pk::after{content:'YES'}
.mr.wrong .pk{background:var(--magenta);color:var(--bone);border-color:var(--magenta)}.mr.wrong .pk::after{content:'NO'}
.mr:disabled:not(.right){opacity:.5}
.fb{padding:14px 26px;font-size:27px;line-height:1.45}
.rty{align-self:flex-start;margin:auto 26px 24px}
.blk{left:1180px;right:64px;top:220px;bottom:90px;padding:28px 32px;display:flex;flex-direction:column;gap:18px}
.br{display:grid;grid-template-columns:70px 1fr;align-items:baseline;font-size:27px;line-height:1.7}
.no.sm{font-size:44px}
.blank{position:relative;min-width:150px;margin-right:8px;text-align:center;text-transform:none;font-size:24px}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;top:6px}
.blank.open{background:var(--teal);color:var(--bone);border-color:var(--teal)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{display:flex;flex-wrap:wrap;gap:10px}
.words .st{font-size:24px;text-transform:none}

/* --- 내비: 아래 가운데 검정 알약 화살표 --- */
.dk-nav{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;gap:10px;z-index:40}
.dk-prev,.dk-next{width:64px;height:44px;border-radius:999px;background:#000;color:var(--bone);font:800 24px/1 'Barlow Condensed',sans-serif}
.dk-prev:disabled,.dk-next:disabled{opacity:.3}
[data-slide="1"] .dk-nav{bottom:150px;left:auto;right:64px;transform:none}
/* --- 6. 디자인 안내: 종이 카드 설명 | 종이 카드 시연 3개 --- */
.g6{left:64px;width:900px;top:230px;bottom:100px;padding:20px 36px;display:flex;flex-direction:column}
.r6{flex:1;display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center;border-top:var(--hl)}
.r6:first-child{border-top:0}
.r6 .lgd{font-size:28px}
.r6 p{font-size:27px;line-height:1.5}
.r6 b{font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:6px 18px}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-5px;border:1.5px solid var(--ink)}
.sl6{left:1004px;top:196px}
.d6{left:1000px;right:64px;height:226px;padding:18px 28px;display:flex;flex-direction:column}
.d6.a{top:234px}.d6.b{top:476px}.d6.c{top:718px;height:180px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:40px;line-height:1.05}
.pillb.sm{font-size:20px;padding:6px 16px}
.pillb.sm[aria-pressed="true"]{background:var(--orange);border-color:var(--orange)}
.tb6{margin-top:12px;flex:1;border-radius:26px;border:1.5px solid var(--ink);padding:10px 24px;display:flex;align-items:flex-end;justify-content:space-between}
.tb6 b{font:700 96px/.86 'Stardos Stencil',serif}
.tb6 span{font-family:'Stardos Stencil',var(--kt),serif;font-weight:var(--wt);font-size:30px}
.tb6.play{background:var(--orange);border-color:var(--orange)}
.ac6{margin-top:auto;border-radius:22px;border:1.5px solid var(--ink);display:flex;align-items:center;gap:22px;padding:16px 26px}
.ac6 .tag{font-size:24px}
.ac6 b{font-family:'Stardos Stencil',var(--kt),serif;font-weight:var(--wt);font-size:40px;line-height:1}
.ac6.play{background:var(--mustard);border-color:var(--mustard)}
.pl6{margin-top:auto;display:flex;gap:12px}
.pl6 .st{font-size:24px;padding:8px 20px}
.pl6.play .st:nth-child(1){background:var(--teal);color:var(--bone);border-color:var(--teal)}
.pl6.play .st:nth-child(2){background:var(--mustard);border-color:var(--mustard)}
.pl6.play .st:nth-child(3){background:var(--magenta);color:var(--bone);border-color:var(--magenta)}

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