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

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`mat`)으로 수업 슬라이드를 만들어 주도록 쓴 지시서입니다.
> 파일을 읽고 쓸 수 있는 에이전트 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/mat.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/mat.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. 디자인 규칙 (`mat` design.md)

````markdown
---
version: alpha
name: Mat
description: A warm, material-tactile presentation system inspired by a high-end product landing page. Dark forest green is the dominant environment, warmed by a low atmospheric wood-brown glow from the bottom-right corner of every dark slide. Cream type floats directly on the field; warm orange acts as the single accent. The typeface stack pairs Bricolage Grotesque (a heavy, rounded grotesque) for display with DM Sans for body and DM Mono for labels — the result reads as industrial-design portfolio meets boutique product launch, never tech demo.

colors:
  bg-dark: "#232E26"
  bg-dark-alt: "#2E3D30"
  bg-cream: "#EDE6D0"
  bg-cream-alt: "#E4DAC4"
  ink-cream: "#F0E8D2"
  ink-cream-2: "rgba(240, 232, 210, 0.58)"
  ink-cream-3: "rgba(240, 232, 210, 0.3)"
  ink-dark: "#1E2820"
  ink-dark-2: "rgba(30, 40, 32, 0.6)"
  ink-dark-3: "rgba(30, 40, 32, 0.3)"
  accent-orange: "#C07030"
  border-on-dark: "rgba(240, 232, 210, 0.12)"
  border-on-cream: "rgba(30, 40, 32, 0.14)"
  wood-glow: "#7A4E24"

color-aliases:
  c-fg: ink-cream
  c-fg-light: ink-dark
  c-bg: bg-dark
  c-bg-light: bg-cream
  c-accent: accent-orange

typography:
  display:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 12vw
    fontWeight: 800
    lineHeight: 0.88
    letterSpacing: -0.03em
  h1:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 7vw
    fontWeight: 800
    lineHeight: 0.92
    letterSpacing: -0.025em
  h2:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 4vw
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.02em
  h3:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 2.4vw
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.01em
  lead:
    fontFamily: "DM Sans, Noto Sans SC, sans-serif"
    fontSize: 1.5vw
    fontWeight: 400
    lineHeight: 1.55
  body:
    fontFamily: "DM Sans, Noto Sans SC, sans-serif"
    fontSize: 1.05vw
    fontWeight: 400
    lineHeight: 1.65
  caption:
    fontFamily: "DM Sans, Noto Sans SC, sans-serif"
    fontSize: 0.82vw
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "DM Mono, monospace"
    fontSize: 0.7vw
    fontWeight: 400
    letterSpacing: 0.12em
    textTransform: uppercase
  stat-value:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 5.5vw
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -0.025em
  quote-text:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 3.4vw
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  quote-mark:
    fontFamily: "Bricolage Grotesque, Noto Sans SC, sans-serif"
    fontSize: 8vw
    fontWeight: 800
    lineHeight: 0.6

spacing:
  pad-x: 5.5vw
  pad-y: 5.5vh
  gap-lg: 4.5vh
  gap-md: 2.8vh
  gap-sm: 1.4vh

canvas:
  width: 100vw
  height: 100vh

components:
  kicker:
    fontFamily: "{typography.label.fontFamily}"
    fontSize: "{typography.label.fontSize}"
    letterSpacing: 0.12em
    textTransform: uppercase
    color: "{colors.accent-orange}"
  rule:
    width: 32px
    height: 1px
    background: "{colors.accent-orange}"
  bullet-marker:
    content: "—"
    color: "{colors.accent-orange}"
    fontFamily: "{typography.label.fontFamily}"
    description: "Em-dash prefix in warm orange; emerges in mono face. The system's standard list mark; never a bullet, never a checkmark."
  info-card:
    background: "{colors.bg-cream}"
    color: "{colors.ink-dark}"
    padding: "{spacing.gap-md} calc({spacing.pad-x} * 0.8)"
    maxWidth: 28vw
    description: "Cream inset box embedded on a dark green field. The signature material-contrast component; carries a heading and a body block, no border, no shadow."
  chrome-band:
    borderBottom: "1px solid {colors.border-on-dark}"
    paddingBottom: "{spacing.gap-sm}"
    description: "Label-pair on top of a 1px rule; suppressed on cover/quote/end slide types."
  foot-band:
    borderTop: "1px solid {colors.border-on-dark}"
    paddingTop: "{spacing.gap-sm}"
    description: "Label-pair under a 1px rule; mirrors the chrome band."
  stat-cell:
    borderRight: "1px solid {colors.border-on-dark}"
    padding: "{spacing.gap-md} {spacing.pad-x} {spacing.gap-md} 0"
    description: "A vertically-divided cell containing a large numerical value (with optional inline orange-emphasis em-span) and a one-line label. Last cell has no right border."
  bar-fill:
    width: "100%"
    background: "{colors.ink-cream-3}"
    description: "Vertical bar in muted cream; gets the orange accent (.accent variant) when it's the highlighted data point."
  compare-divider:
    width: 1px
    background: "{colors.border-on-dark}"
    description: "A 1px-wide vertical column (not a border) used to split a before/after comparison; subtle, not loud."
  image-placeholder:
    background: "rgba(240, 232, 210, 0.06)"
    border: "1px solid {colors.border-on-dark}"
    color: "{colors.ink-cream-3}"
    description: "Hairline-bordered void with centered mono label until photography is available."
  atmospheric-glow:
    selector: ".slide.dark::before"
    position: "bottom-right ellipse, 55% wide × 70% tall"
    gradient: "radial-gradient(ellipse at 70% 80%, rgba(122, 78, 36, 0.28) 0%, rgba(80, 50, 20, 0.14) 40%, transparent 70%)"
    description: "The wood-brown atmospheric glow that lives on every dark slide via ::before. Non-optional on dark surfaces; defines the warmth of the system."
---

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

Mat is a **material-tactile presentation system** built around a single environmental premise: a deep forest-green surface warmed from the bottom-right corner by a low wood-brown glow. The atmosphere does the heavy lifting — before any content lands, the slide already feels like a workbench in afternoon light. Cream type floats directly on the green field; there are no cards, no panels, no frames. Where the system needs to break the green, it does so with a single cream inset box (the info-card) that reads as a piece of warm paper laid on the dark surface.

The typeface stack is a deliberate three-voice pairing. **Bricolage Grotesque** at weights 700 and 800 is the display workhorse — heavy, rounded, with a slightly mechanical character that suits product writing without feeling tech-startup. **DM Sans** at weight 400 is the body voice, neutral enough to let the display type breathe. **DM Mono** at weight 400 handles all labels, kickers, metadata, and chrome — anything structural that needs to read as a tag rather than a sentence. Display type is **always mixed case** in this system, never uppercase; the uppercase work is reserved for mono labels.

The palette is intentionally narrow. **Dark forest green** is the dominant surface (`{colors.bg-dark}`), with a slightly lighter alternate available for layered regions. **Warm cream** is the primary text color on dark and the secondary surface color when a slide flips light. **Warm orange** (`{colors.accent-orange}`) is the single accent — it appears only as small inline marks: kicker text, bullet em-dashes, the `<em>` inside a stat numeral, the opening quote glyph, the single highlighted bar in a chart. Orange is never a background and never a large headline color; it's the structural emphasis dot of the system.

Depth is minimal and atmospheric, not stacked. There are no drop shadows. There are no rounded corners on any structural element. The only depth signal is the wood-brown radial glow that sits behind every dark slide via a `::before` pseudo-element. Region separation comes from **thin 1px hairline rules** in low-opacity cream — for chrome bands, foot bands, stat cell dividers, compare panel splits, and chart baselines. Nothing about this system is loud.

**Density philosophy: medium-sparse.** Mat reads as elegant when the slide breathes — generous left and right padding (`{spacing.pad-x}` at 5.5vw), one main typographic moment, and one secondary block of supporting copy. Cramming three columns of bullets onto a slide breaks the system; the warm green field needs negative space to do its atmospheric work. The exception is the stats and compare slide types, where a clean three-up or two-up arrangement of restrained cells is correct. A slide with a single headline and one paragraph of lead copy is right in this system's lane. A slide that fills 80% of its area with type is fighting the design.

**Key Characteristics:**
- Dark forest green canvas (`{colors.bg-dark}`) with a warm wood-brown radial glow (`{components.atmospheric-glow}`) anchored to the bottom-right corner of every dark slide.
- Cream text (`{colors.ink-cream}`) floats directly on the green field with no card, panel, or frame around it.
- Bricolage Grotesque display type is **always mixed case** — never uppercase. Uppercase is reserved for DM Mono labels.
- A single accent color, warm orange (`{colors.accent-orange}`), used only as small inline emphasis (kicker, bullet marker, inline `<em>`, quote glyph, one chart bar).
- The cream **info-card** (`{components.info-card}`) is the signature material-contrast component — a warm paper rectangle inset on the dark field.
- Bullet lists use an em-dash prefix in warm orange via DM Mono — never a dot, never a check.
- Thin 1px hairline rules in low-opacity cream are the only divider language. No heavy borders, no shadows.
- The system has one light slide variant (cream background with dark green text) used as a tonal inversion within a deck, never as the default.

## Colors

### Palette

- **Dark Forest Green** (`{colors.bg-dark}` — #232E26): The dominant environment. Default background for every slide unless a deliberate light-slide variant is chosen. The green is muted enough that cream type sits on it without vibration.
- **Slightly Lighter Green** (`{colors.bg-dark-alt}` — #2E3D30): A tonal step-up reserved for layered or recessed surfaces within a dark slide. Available but used sparingly.
- **Warm Cream** (`{colors.bg-cream}` — #EDE6D0): The light-slide background and the fill color of the info-card inset. Reads as warm paper, not white — the warmth is essential to the system's material identity.
- **Deeper Cream** (`{colors.bg-cream-alt}` — #E4DAC4): A secondary cream tone for image placeholders on light slides.
- **Cream Ink** (`{colors.ink-cream}` — #F0E8D2): Primary text color on every dark surface. Slightly warmer than the background cream — chosen so headlines feel like they're carved into the green rather than printed on it.
- **Cream Ink at 58% / 30%** (`{colors.ink-cream-2}`, `{colors.ink-cream-3}`): Secondary and tertiary text on dark. Used for muted lead copy and barely-there metadata respectively.
- **Dark Ink** (`{colors.ink-dark}` — #1E2820): Primary text color on cream surfaces (info-card body, light slide). A very dark forest green, never pure black.
- **Dark Ink at 60% / 30%** (`{colors.ink-dark-2}`, `{colors.ink-dark-3}`): Muted and tertiary text on cream.
- **Warm Orange** (`{colors.accent-orange}` — #C07030): The single accent. A burnt copper-orange that nods to wood, leather, and oxidized metal. Never a background, never a large headline color.
- **Wood Glow** (`{colors.wood-glow}` — #7A4E24): The radial atmospheric glow color, applied only at 0.28 and 0.14 alpha inside the bottom-right corner gradient. Never used as a flat fill.

### Defaults

- **Default surface background**: `{colors.bg-dark}` (forest green). The system is dark-default; cream slides are an intentional tonal break, not a routine choice.
- **Default headline color on dark**: `{colors.ink-cream}`. Headlines never appear in orange.
- **Default headline color on cream**: `{colors.ink-dark}`.
- **Default body text color on dark**: `{colors.ink-cream-2}` (the 58% cream — the `.muted` helper).
- **Default body text color on cream**: `{colors.ink-dark-2}`.
- **Default border / divider color**: `{colors.border-on-dark}` on dark; `{colors.border-on-cream}` on cream. Always 1px, never thicker.
- **Default kicker color**: `{colors.accent-orange}`. The kicker is the system's eyebrow label and is the most consistent place orange shows up.
- **Default inline emphasis color**: `{colors.accent-orange}`. An `<em>` inside a stat value, a quote attribution, or a chart label resolves to orange.
- **Default atmospheric treatment for dark slides**: the wood-brown radial glow (`{components.atmospheric-glow}`) is always on. It is part of the dark surface itself.

Orange functions as a punctuation color: it tells the eye where the structural emphasis lives without ever competing for surface area. If two orange elements end up adjacent on the same slide, one of them is wrong.

## Typography

### Font Family

The system runs on three Google Fonts plus CJK fallback. **Bricolage Grotesque** carries every display, h1, h2, h3, stat numeral, and quote text — its rounded, heavy character at weights 700–800 is the defining voice. **DM Sans** at weight 400 carries every paragraph, lead, caption, and bullet item — neutral, readable, lets the display type lead. **DM Mono** at weight 400 carries every label, kicker, chrome tag, footer text, bullet em-dash, and chart label — anything that needs to read as a structural marker rather than prose. **Noto Sans SC** is the CJK fallback for all sans roles; **Noto Serif SC** is not used.

A subtle but load-bearing rule: **the bullet em-dash before each list item renders in DM Mono in warm orange**, not in the body face. The mono shape is what makes the dash feel like a deliberate mark and not a stray punctuation glyph.

Italics are not used for typographic decoration in this system. The `<em>` tag is repurposed as an **orange inline emphasis** — `<em>` inside a stat value or a quote attribution switches to `{colors.accent-orange}` and stays upright (font-style: normal). There is no italicized face anywhere.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display}` | 12vw | Bricolage Grotesque | 800 | Cover or opening hero display — massive, line-broken into 1–2 words per line |
| `{typography.h1}` | 7vw | Bricolage Grotesque | 800 | Chapter-opening or closing headline |
| `{typography.h2}` | 4vw | Bricolage Grotesque | 700 | Primary content-slide headline |
| `{typography.stat-value}` | 5.5vw | Bricolage Grotesque | 800 | Large numerical figure inside a stat cell |
| `{typography.quote-mark}` | 8vw | Bricolage Grotesque | 800 | Decorative opening quotation glyph in warm orange |
| `{typography.quote-text}` | 3.4vw | Bricolage Grotesque | 600 | Pull-quote body text |
| `{typography.h3}` | 2.4vw | Bricolage Grotesque | 600 | Sub-headline or region heading |
| `{typography.lead}` | 1.5vw | DM Sans | 400 | Lead paragraph or large bullet item |
| `{typography.body}` | 1.05vw | DM Sans | 400 | Body paragraph and info-card body |
| `{typography.caption}` | 0.82vw | DM Sans | 400 | Image caption, tagline, fine print |
| `{typography.label}` | 0.7vw | DM Mono | 400 | Kicker, chrome tag, footer label, metadata, chart label |

### Defaults

- **Default primary section headline**: `{typography.h2}` (4vw).
- **Default opening or cover display**: `{typography.display}` (12vw) on a cover; `{typography.h1}` (7vw) on a chapter or closing moment.
- **Default body paragraph size**: `{typography.body}` (1.05vw). Reach for `{typography.lead}` (1.5vw) when the paragraph is the single supporting block under a large headline.
- **Default label / kicker size**: `{typography.label}` (0.7vw).
- **Default weight for any display element**: 700 (h2) or 800 (display, h1, stat-value).
- **Default weight for body**: 400.
- **Default headline letter-spacing**: negative — display at -0.03em, h1 at -0.025em, h2 at -0.02em. The negative tracking is essential.

When unsure, default to `{typography.h2}` for the primary text moment paired with one `{typography.lead}` paragraph as supporting copy — that pairing is the system's most reliable rhythm.

### Signature Treatments

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

- **All display, h1, h2, h3 text is mixed case** — never uppercase. Uppercase display type does not exist in this system. If text is in Bricolage Grotesque, it is sentence case.
- **All labels, kickers, chrome text, footers, and metadata are DM Mono uppercase with 0.12em positive tracking.** Mono in sentence case does not exist here.
- **The kicker is always warm orange.** When a slide carries a kicker (eyebrow label above a headline), its color is `{colors.accent-orange}` regardless of surface.
- **Bullet lists use an em-dash prefix in DM Mono colored warm orange.** Never a dot, never a check, never a numeral.
- **The `<em>` tag inside a stat numeral renders in warm orange and stays upright.** It is the mechanism for highlighting a unit suffix or a key digit inside a number.
- **Headlines on dark surfaces are cream; headlines on cream surfaces are dark ink.** Headlines are never orange.
- **All Bricolage display type uses negative letter-spacing.** Default tracking on display reads as untreated; the negative is what gives the type its compressed, premium-product character.

### Typography Principles

The rhythm of the system is **heavy mixed-case display + light mixed-case body + small uppercase mono label**. Switching any of those three modes (e.g., uppercasing the display, or making the body the same weight as the display) breaks the editorial register. Bricolage at 700–800 sits next to DM Sans at 400 — the weight gap is deliberate and wide. Do not use intermediate Bricolage weights (400, 500) for display moments; they read as undecided.

Italics are not used. Underline is not used. The only emphasis mechanism inside body copy is the orange `<em>` inline. The only structural emphasis is the kicker and the bullet em-dash.

## Layout

### Canvas System

Mat is **viewport-fluid by design**. All sizes use `vw` and `vh` units so the layout scales linearly with the viewport. The slide container is `100vw × 100vh` and the deck is a horizontal flex strip that translates left/right by full viewport widths. There is no fixed canvas dimension; the same composition renders correctly on any 16:9-ish viewport.

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-x}` | 5.5vw | Slide horizontal padding; the breathing room on left and right edges |
| `{spacing.pad-y}` | 5.5vh | Slide vertical padding |
| `{spacing.gap-lg}` | 4.5vh | Between major content sections |
| `{spacing.gap-md}` | 2.8vh | Between related elements (headline → lead, stat → label) |
| `{spacing.gap-sm}` | 1.4vh | Between tightly related elements (label pair in chrome band) |

The horizontal padding is generous — content occupies roughly the middle 89% of the viewport. Pushing content closer to the edges breaks the system's editorial spaciousness.

### Chrome Frame

Most slide types carry a **chrome band** (`{components.chrome-band}`) at the top and a **foot band** (`{components.foot-band}`) at the bottom. Each is a `flex space-between` row of two DM Mono labels (typically a section name on the left and a slide-position or section number on the right) separated from the body by a 1px hairline rule. Cover, quote, and end-style slides suppress both bands entirely — those moments are chromeless by convention.

### Navigation Chrome

A row of nav-dots is fixed center-bottom (5px circles in low-opacity white) and a slide counter sits bottom-right (10px DM Mono in `rgba(255,255,255,0.25)`, format `01 / 09`). These are presentation chrome, not part of the design language proper — they're consistent across all template families in this library.

## Depth and Elevation

### Atmospheric Glow (Primary Depth Mechanism)

The system's only depth treatment is the **bottom-right wood-brown radial glow** that lives on every dark slide via `::before`. The pseudo-element occupies 55% width × 70% height anchored to the bottom-right corner, with a radial gradient from `rgba(122,78,36,0.28)` to `rgba(80,50,20,0.14)` to transparent. The glow sits at `z-index: 0`; all slide content sits at `z-index: 1`. This is the depth — there are no drop shadows, no elevation cards, no glow effects on text.

### Hairline Rules (Structural Separation)

Where the system needs to separate regions, it uses **1px hairline rules in low-opacity cream** (`{colors.border-on-dark}` at 12% opacity) on dark surfaces, or low-opacity dark ink (`{colors.border-on-cream}` at 14% opacity) on cream. These rules appear under chrome bands, above foot bands, between stat cells, between compare panels, and as the chart baseline. Hairlines never go thicker than 1px, never colored.

### No Shadows

There are no `box-shadow` declarations on any structural element. The info-card sits on the dark field with no shadow — its material contrast is the cream-on-green tonal jump, not elevation. Adding a shadow to any component breaks the system's flat material-photography aesthetic.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 0px | Every structural element — info-card, image placeholders, stat cells, compare panels, bars |
| 50% | Nav-dot circles only |

The system has **no rounded corners** on any composed content. Cards, panels, and image frames are all strict rectangles. The only round shapes are the navigation UI dots.

### Border Weights

- **1px solid hairline** — the universal structural border. Used for chrome bands, foot bands, stat cell dividers, compare panel splits, chart baselines, and image placeholder outlines. Color is `{colors.border-on-dark}` on dark surfaces and `{colors.border-on-cream}` on cream.
- No other border weights exist. A 2px border breaks the system; a 3px border belongs to a different design family.

### Decorative Element Types

**Kicker** — A small DM Mono uppercase tag in warm orange with 0.12em positive tracking, placed above a headline as an eyebrow label. The most consistent appearance of orange in the system. Typically 0.7vw size.

**Rule** — A 32px-wide × 1px-tall horizontal accent line in warm orange. Used as a small underline-style separator between a kicker and a headline, or beneath a chapter number. Decorative, not structural.

**Bullet em-dash** — The list marker for every bullet list. Renders as `—` in DM Mono colored warm orange, prepended to the list item via the marker column of a CSS grid (`grid-template-columns: 1.4em 1fr`). The bullet voice of the system.

**Info-card** — A cream inset rectangle (`{components.info-card}`) placed on a dark slide. Carries a heading (h3-scale, dark ink) and a body block (body-scale, muted dark ink). The single most distinctive component in the system — used to puncture the green field with a piece of warm paper. Has no border, no shadow, no rounded corners; the tonal jump alone defines the edge.

**Stat cell** — A vertically-divided cell containing a large numerical value (`{typography.stat-value}`) above a one-line label (`{typography.body}` in muted cream). Cells line up in groups of three with a 1px right border separating each (last cell has no right border). The numerical value supports an inline `<em>` in orange for unit suffixes (e.g., the suffix in `4.7k`).

**Quote mark** — An oversized opening quotation glyph at `{typography.quote-mark}` size in warm orange. Sits above the quote text as a typographic ornament. Used only inside the quote slide type.

**Compare divider** — A 1px-wide vertical CSS column (not a border) between two side-by-side panels. Subtle by design — the contrast between the two panels does the visual work, not the divider.

**Image placeholder** — A void rectangle with a 1px hairline border, 6% cream background, and centered DM Mono label reading the placeholder name. Used until real photography is dropped in. The placeholder color is intentionally close to the background — image regions should not announce themselves.

## Do's and Don'ts

### Do
- Use the dark forest green (`{colors.bg-dark}`) as your default slide background. The system is dark-first; cream slides are a tonal break, not the default.
- Apply the wood-brown atmospheric glow to every dark slide. It is part of the surface, not an optional flourish.
- Pair Bricolage Grotesque display in mixed case with DM Mono labels in uppercase. The case contrast between the two faces is the system's typographic rhythm.
- Set headlines in cream (`{colors.ink-cream}`) on dark and dark ink (`{colors.ink-dark}`) on cream. Headlines never carry the orange accent.
- Use warm orange (`{colors.accent-orange}`) as the kicker color, the bullet em-dash color, and the inline `<em>` color. Orange is the punctuation, never the surface.
- Use the cream info-card (`{components.info-card}`) when a slide needs a piece of warm paper inset on the green field — the system's signature material-contrast move.
- Keep slides medium-sparse. One primary headline, one supporting paragraph, optionally one list of 3–5 short bullets is the right density.
- Use 1px hairline rules in low-opacity cream or dark ink for every structural divider. Borders never go thicker.
- Use the em-dash prefix in DM Mono for every bullet list. Never substitute a dot, check, or numeral.
- Render the `<em>` inside a numerical value in warm orange, font-style normal — that's how unit suffixes and emphasis digits read in this system.

### Don't
- Don't uppercase any Bricolage display, h1, h2, or h3 text. Display type is always mixed case. Uppercase is exclusively for DM Mono labels.
- Don't introduce a second accent color. The system has one accent (warm orange) and it cannot share that role.
- Don't add drop shadows, blur shadows, or elevation effects on any component. Depth is the atmospheric glow only.
- Don't round any corner on a structural element. Cards, panels, image frames, bars — all strict rectangles. Only the nav-dot circles are round.
- Don't fill a slide with three columns of bullets or stack five regions vertically. Mat reads as broken when crowded.
- Don't use orange as a background fill. Orange is inline-only.
- Don't use a serif face anywhere. There is no serif in this system; the rounded grotesque carries every editorial moment.
- Don't add a border around the info-card. The tonal jump between cream and forest green defines the edge — a border breaks the flat material reading.
- Don't use italic letterforms. The `<em>` tag is repurposed as an orange inline color switch and stays upright.
- Don't increase border weights above 1px. A 2px border breaks the hairline language of the system.

## Responsive Behavior

Mat targets a fluid `100vw × 100vh` viewport and uses `vw`/`vh` units for every typographic size, padding, and gap. The same composition renders correctly across 1280×720, 1920×1080, and 2560×1440 displays without breakpoints. Because all sizes are viewport-relative, content scales linearly — at wider viewports, both text and padding grow proportionally, so the visual density stays constant.

### Presenter Behavior
- Arrow Right / Arrow Down / Space advance to the next slide.
- Arrow Left / Arrow Up move back.
- Home jumps to the first slide; End jumps to the last.
- Touch swipe (horizontal) advances or reverses on mobile.
- Mouse wheel advances with a 1000ms debounce to prevent accidental multi-skip.
- Slides translate horizontally as a single flex strip with a 0s transition (the deck is configured for instant navigation, not animated transitions — the `--dur-slide` token is set to `0s`).

### Print Behavior
The template does not declare a `@media print` rule. To produce a PDF, use the browser's screenshot or printing tool; multi-slide PDF export requires manually triggering each slide.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Chinese Face | Weight | Why |
|---|---|---|---|
| Display / h1 / h2 / h3 / stat-value (Bricolage roles, 2.4–12vw) | 思源宋体 Noto Serif SC | 700 | Mincho heavy weight provides the structural mass that Bricolage 700–800 provides in Latin, while preserving the warm material register |
| Quote text / quote mark (3.4vw / 8vw) | 思源宋体 Noto Serif SC | 600–700 | Same Mincho voice for editorial moments |
| Lead / body / caption (DM Sans roles, 0.82–1.5vw) | 思源宋体 Noto Serif SC | 400 | Mincho body voice — calm and material; pairs with the wood-glow warmth |
| Info-card body / heading | 思源宋体 Noto Serif SC | 400 / 600 | Maintains the warm-paper-on-green contrast in Chinese |
| Label / kicker / chrome / footer (DM Mono roles, 0.7vw) | 思源宋体 Noto Serif SC | 500 with 0.05em letter-spacing | Replaces DM Mono — Chinese has no monospace tradition that reads as editorial chrome |

### Mixed-Content Strategy

Use **Strategy A** — switch the entire face stack to Noto Serif SC across all roles, replacing Bricolage Grotesque (display), DM Sans (body), and DM Mono (labels). Mat's identity does not depend on the specific Latin faces; it depends on the **dark forest green canvas with wood-brown atmospheric glow**, the **single warm orange accent**, the **cream info-card inset**, and the **1px hairline divider language**. Going all-Mincho in Chinese preserves every one of those identity markers cleanly without the baseline wobble that Strategy C would introduce on a viewport-fluid system. Stack:

```css
/* Bricolage roles (display, h1, h2, h3, stat-value, quote) */
font-family: 'Bricolage Grotesque', 'Noto Serif SC', sans-serif;
/* DM Sans roles (lead, body, caption) */
font-family: 'DM Sans', 'Noto Serif SC', sans-serif;
/* DM Mono roles (label, kicker, chrome, footer) */
font-family: 'DM Mono', 'Noto Serif SC', monospace;
```

The system's source currently lists `'Noto Sans SC'` as the CJK fallback — for Mat's material-tactile register, **swap to `'Noto Serif SC'`**. The Mincho face's warm letterforms match the wood-glow / forest-green atmosphere better than the geometric Noto Sans SC, which reads as too modern-clinical for this system.

### Loading

Replace the existing Noto Sans SC link with Noto Serif SC:

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
```

### Universal CJK Adjustments

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

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

### Aesthetic Notes for This System

Mat's whole voice is "industrial-design portfolio meets boutique product launch" — dark forest green with a wood-brown glow, cream type floating on the field, warm orange as the single accent. In Chinese, the system's identity does not depend on the Bricolage / DM Sans / DM Mono trio; it depends on the **environmental atmosphere** (the radial wood-glow on every dark slide), the **single-accent discipline** (orange only as kicker, em-dash bullet, inline emphasis), and the **cream info-card** as the signature material-contrast move. All of these translate without modification.

The bullet em-dash in orange works in Chinese identically — the em-dash character (—) is the same glyph in any script, and the orange Noto Serif SC at weight 500 prepended to a Chinese list item reads as a deliberate mark exactly as it does in Latin. Keep the bullet column in Noto Serif SC at weight 500 (replacing DM Mono); the warmth of the Mincho face matches the system's material-tactile register better than a sans-serif chrome face would.

The Bricolage rule "always mixed case, never uppercase" is interesting in Chinese — since Chinese has no case, the rule is automatically satisfied. But the system's uppercase rule for labels (DM Mono at 0.12em tracking) doesn't translate; in Chinese, labels should be **Noto Serif SC weight 500 with 0.05em positive tracking**, no `text-transform`. The positive tracking carries the chrome quality through weight and spacing alone.

The `<em>` inline-orange rule (for unit suffixes inside stat numerals) works in Chinese — a Chinese unit character like 「万」or 「亿」 inside `<em>` renders in warm orange and stays upright, exactly mirroring the Latin pattern. Use it the same way: `4.7<em>万</em>` for `4.7 万 (47k)`.

### Known CJK Gap

The Bricolage Grotesque "heavy, rounded grotesque with mechanical character" is one of Mat's most distinctive typographic moves in Latin — it's what gives the system its industrial-product-page voice. Chinese has no exact equivalent: Noto Serif SC at weight 700 provides structural mass but reads as more traditional / literary than Bricolage's rounded modernity. The Chinese rendering loses some of the industrial-design quality, partially compensated by the wood-glow atmosphere and the warm orange accent doing more of the personality work. For decks where the industrial register is critical (e.g., a product launch deck specifically about hardware or material design), consider supplementing Noto Serif SC with **思源黑体 Noto Sans SC at weight 800** for the largest display moments only (cover, hero) — the geometric heaviness of Noto Sans SC at 800 reads closer to Bricolage Grotesque 800 than Noto Serif SC does. Use sparingly to preserve the literary-material register elsewhere.

## Iteration Guide

1. Any new component sits on the dark surface as cream text; no card, panel, or frame wraps it unless it's the info-card move (cream-on-green tonal contrast).
2. Any new headline uses Bricolage Grotesque in mixed case, weight 700 (h2) or 800 (display/h1). Never reach for weight 500 on display.
3. Any new structural divider is a 1px hairline rule in low-opacity cream or dark ink. Never use a thicker or colored border.
4. Any new label, eyebrow, tag, or metadata text uses DM Mono uppercase with 0.12em tracking. Mono in mixed case does not exist here.
5. Any new bullet list uses the em-dash prefix in DM Mono colored warm orange. The marker face and color are non-negotiable.
6. Any new accent moment (a highlighted number, an emphasis word, a kicker) uses warm orange. Don't introduce a second accent.
7. Any new dark slide carries the atmospheric glow on `::before`. If you make a custom slide layout, replicate the pseudo-element or the slide will read flat.
8. If a slide needs a piece of warm paper to anchor it (a CTA, a summary, an attribution block), use the info-card. Don't invent a parallel card pattern.
9. Tonal break slides (cream backgrounds) are used once per deck for emphasis, not as a routine alternative to dark. The system reads as dark-default.

## Known Gaps

- The `--c-bg-dark-alt` (#2E3D30) variable is defined for a slightly lighter green surface but is not actively used in any selector. It's reserved for future layered-region work.
- The atmospheric glow is hardcoded to the bottom-right corner via the `::before` pseudo-element. Repositioning it requires editing the CSS rule directly; there's no token for glow position or intensity.
- The system loads four Google Fonts (Bricolage Grotesque, DM Sans, DM Mono, Noto Sans SC) — render parity depends on those fonts loading. The CJK fallback stack covers Chinese, but Japanese and Korean glyphs fall back to system serif/sans.
- The slide-transition duration is set to `0s` (instant). The `--ease-slide` and `--dur-slide` tokens exist for animation but are inert; if a deck needs animated transitions, the duration value must be raised.
- The vertical bar chart uses inline `style="height: XX%"` declarations on each bar fill. There is no data-binding layer; bar heights must be computed manually.
- The `.split-center` image region is fixed at 52vh height. Tall portrait imagery may need a layout-level override.
- Nav dots and slide counter use hardcoded `rgba(255,255,255,...)` values that don't adapt to the cream-slide variant — on cream slides, the white dots read as washed-out.
````

---

## 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장(표지)에서 처음 나오는 부품**
- `.dark` — 1·2·3·5·6장 — 예: `<section class="slide dark">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.gl` — 1장 — 예: `<span class="gl">`
- `.i1` — 1장 — 예: `<div class="info i1">`
- `.info` — 1·5장 — 예: `<div class="info i1">`
- `.k1` — 1장 — 예: `<div class="kick k1">`
- `.kick` — 1·2·3·4·5·6장 — 예: `<div class="kick k1">`
- `.r1` — 1장 — 예: `<i class="rule r1">`
- `.rule` — 1·2·3·4·5·6장 — 예: `<i class="rule r1">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide dark">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.unit` — 1장 — 예: `<p class="unit">`

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

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.bar` — 3장 — 예: `<i class="bar" style="height:63%">`
- `.cell` — 3장 — 예: `<div class="cell">`
- `.chart` — 3장 — 예: `<div class="chart">`
- `.col` — 3장 — 예: `<div class="col">`
- `.cv` — 3장 — 예: `<span class="cv">`
- `.mx` — 3장 — 예: `<div class="col mx">`
- `.rb` — 3장 — 예: `<span class="rl rb">`
- `.rl` — 3장 — 예: `<span class="rl rb">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.sv` — 3장 — 예: `<span class="sv">`
- `.tm` — 3장 — 예: `<span class="tm">`
- `.vv` — 3장 — 예: `<span class="vv">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cdiv` — 4장 — 예: `<i class="cdiv">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.cp` — 4장 — 예: `<div class="cp">`
- `.light` — 4장 — 예: `<section class="slide light">`
- `.lst` — 4장 — 예: `<div class="lst">`
- `.ml` — 4·5·6장 — 예: `<span class="ml">`
- `.qm` — 4장 — 예: `<b class="qm">`
- `.qt` — 4장 — 예: `<blockquote class="qt">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`

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

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.d6` — 6장 — 예: `<div class="d6">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.em6` — 6장 — 예: `<div class="em6" id="mt-em">`
- `.g6` — 6장 — 예: `<div class="g6">`
- `.gw6` — 6장 — 예: `<div class="gw6" id="mt-glow">`
- `.ic6` — 6장 — 예: `<div class="ic6" id="mt-info">`
- `.if6` — 6장 — 예: `<div class="if6">`
- `.sig6` — 6장 — 예: `<div class="sig6">`
- `.sm` — 6장 — 예: `<button class="bt sm" data-demo="#mt-glow" data-mode="toggle" aria-pressed="false">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.on` `.now` `.open` `.right` `.wrong` `.play` `.solved` `.tried` `.active` `.visible` `.flash` `.in-frame`)와 내비 클래스(`.dk-…`)는 배치용으로 쓰지 마세요(뼈대의 내비 부분은 그대로 둡니다).

---

## 4. HTML 뼈대 (예시 덱 6장 — 부품 견본입니다. 장 구성은 따라 하지 말고, 공통 파일 두 줄은 그대로 두며, 장은 내용에 맞게 새로 구성)

```html
<!DOCTYPE html>
<html lang="ko" data-template="mat">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>계절의 변화</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;500&family=DM+Mono:wght@400&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/mat.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide dark">
  <div class="kick k1">초등 과학 · 6학년 2학기</div><i class="rule r1"></i>
  <p class="unit">계절의 변화<span>Sun, Shadow & Temperature</span></p>
  <span class="gl">학습 목표</span>
  <h1 class="t1">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <div class="info i1"><h3>1단원 · 3~4차시</h3><p>00초등학교 · 2026</p></div>
</section>
<section class="slide dark" data-steps="4">
  <div class="band top"><span>계절의 변화</span><span>측정 준비</span></div>
  <div class="kick">측정 준비</div><i class="rule"></i>
  <h2 class="hd">태양 고도 측정기 만들기</h2>
  <figure class="img"><figcaption>태양 고도 측정기</figcaption><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></figure>
  <div class="def"><p class="bl"><span class="dash">—</span><span><b>태양 고도</b> — 태양이 지표면과 이루는 각</span></p><p class="bl"><span class="dash">—</span><span>막대기의 그림자와 실이 이루는 각 = 태양 고도</span></p></div>
  <div class="list"><div class="li" data-s="1"><span class="dash">—</span><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="li" data-s="2"><span class="dash">—</span><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="li" data-s="3"><span class="dash">—</span><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="li" data-s="4"><span class="dash">—</span><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="bt main" data-act="step">다음 단계 →</button><button class="bt" 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="band bot"><span>버튼 규칙 없음 → 1px 헤어라인 칸으로 표현</span><span>1단원 · 3~4차시</span></div>
</section>
<section class="slide dark">
  <div class="band top"><span>계절의 변화</span><span>측정 결과</span></div>
  <div class="kick">측정 결과</div><i class="rule"></i>
  <h2 class="hd">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="cell"><span class="sv">12:30</span><p>남중 시각 · 태양 고도가 가장 높아요</p></div><div class="cell"><span class="sv">정남</span><p>남중 방향 · 남중할 때 태양의 위치</p></div><div class="cell"><span class="sv">14:30</span><p>최고 기온 · 기온이 가장 높아요</p></div><div class="cell"><span class="sv">9:30</span><p>가장 긴 그림자 · 그림자가 가장 길어요</p></div></div>
  <div class="chart">
    <span class="rl rb">태양 고도 (°)</span>
    <div class="col"><span class="cv">38°</span><i class="bar" style="height:63%"></i></div><div class="col"><span class="cv">48°</span><i class="bar" style="height:80%"></i></div><div class="col"><span class="cv">55°</span><i class="bar" style="height:92%"></i></div><div class="col mx"><span class="cv">57°</span><i class="bar" style="height:95%"></i></div><div class="col"><span class="cv">54°</span><i class="bar" style="height:90%"></i></div><div class="col"><span class="cv">47°</span><i class="bar" style="height:78%"></i></div><div class="col"><span class="cv">37°</span><i class="bar" style="height:62%"></i></div>
    <span class="rl">시각</span><span class="tm">9:30</span><span class="tm">10:30</span><span class="tm">11:30</span><span class="tm">12:30</span><span class="tm">13:30</span><span class="tm">14:30</span><span class="tm">15:30</span>
    <span class="rl">그림자 길이 (cm)</span><span class="vv">12.9</span><span class="vv">9.1</span><span class="vv">7</span><span class="vv">6.4</span><span class="vv">7.2</span><span class="vv">9.4</span><span class="vv">13.4</span>
    <span class="rl">기온 (℃)</span><span class="vv">22</span><span class="vv">23.8</span><span class="vv">25.2</span><span class="vv">26.3</span><span class="vv">27</span><span class="vv">27.4</span><span class="vv">26.9</span>
  </div>
  <div class="band bot"><span>예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span><span>1단원 · 3~4차시</span></div>
</section>
<section class="slide light">
  <div class="band top"><span>계절의 변화</span><span>관계 정리</span></div>
  <div class="kick">관계 정리</div><i class="rule"></i>
  <h2 class="hd">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="cp"><h3>태양 고도가 높을 때</h3><p class="bl"><span class="dash">—</span><span>그림자 길이는 짧아져요</span></p><p class="bl"><span class="dash">—</span><span>기온은 높아져요</span></p></div><i class="cdiv"></i><div class="cp"><h3>태양 고도가 낮을 때</h3><p class="bl"><span class="dash">—</span><span>그림자 길이는 길어져요</span></p><p class="bl"><span class="dash">—</span><span>기온은 낮아져요</span></p></div></div>
  <div class="tbl"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
  <div class="lst"><span class="ml">남중</span><p class="bl"><span class="dash">—</span><span>태양이 정남쪽에 있을 때 '남중했다'고 해요</span></p><p class="bl"><span class="dash">—</span><span>이때의 태양 고도를 남중 고도라고 해요</span></p></div>
  <blockquote class="qt"><b class="qm">“</b><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="ml">오늘의 정리</span></blockquote>
  <div class="band bot"><span>표 규칙 없음 → 1px 헤어라인 줄으로 표현</span><span>1단원 · 3~4차시</span></div>
</section>
<section class="slide dark">
  <div class="band top"><span>계절의 변화</span><span>확인하기</span></div>
  <div class="kick">확인하기</div><i class="rule"></i>
  <h2 class="hd">배운 내용을 확인해 볼까요?</h2>
  <div class="info quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <span class="ql">QUESTION</span>
    <h3>하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="opts"><button class="opt" data-opt="0"><span class="dash">—</span><span>오전 9시 30분</span></button><button class="opt" data-opt="1"><span class="dash">—</span><span>낮 12시 30분 무렵</span></button><button class="opt" data-opt="2"><span class="dash">—</span><span>오후 3시 30분</span></button></div>
    <p class="fb" data-fb></p>
    <button class="bt dk" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="blk">
    <span class="ml">빈칸을 눌러 확인해요</span>
    <p class="bl"><span class="dash">—</span><span><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</span></p><p class="bl"><span class="dash">—</span><span><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</span></p><p class="bl"><span class="dash">—</span><span><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</span></p>
    <span class="ml wl">오늘의 낱말</span>
    <p class="words">태양 고도 · 남중 고도 · 그림자 길이 · 기온</p>
  </div>
  <div class="band bot"><span>빈칸 규칙 없음 → 1px 밑줄 칸으로 표현</span><span>1단원 · 3~4차시</span></div>
</section>
<section class="slide dark">
  <div class="band top"><span>계절의 변화</span><span>디자인 안내</span></div>
  <div class="kick">디자인 안내</div><i class="rule"></i>
  <h2 class="hd">이 디자인 사용 설명서</h2>
  <div class="g6">
    <span class="ml">한눈에</span><p class="bl"><span class="dash">—</span><span>제품 소개 페이지처럼 재질감 있게 — <b>짙은 숲 초록 바탕</b>에 오른쪽 아래에서 나무색 빛이 은은하게 번지고, 크림 글자가 바로 떠 있어요.</span></p>
    <span class="ml">색</span><p class="bl"><span class="dash">—</span><span><span class="sw6"><span><i style="background:#232E26"></i>숲 초록</span><span><i style="background:#F0E8D2"></i>크림 글자</span><span><i style="background:#EDE6D0"></i>크림 카드</span><span><i style="background:#C07030"></i>주황(작은 강조만)</span><span><i style="background:#7A4E24"></i>나무색 빛</span></span></span></p>
    <span class="ml">글꼴</span><p class="bl"><span class="dash">—</span><span>제목 Bricolage Grotesque(대소문자 섞어 쓰기) → Hakgyoansim Jiugae</span></p><p class="bl"><span class="dash">—</span><span>본문 DM Sans → Hakgyoansim Wooju · 라벨 DM Mono 대문자</span></p>
    <span class="ml">이렇게 쓰면 좋아요</span><p class="bl"><span class="dash">—</span><span>한 장에 제목 하나 + 설명 한 덩어리처럼 여백이 넉넉한 수업. 주황이 한 장에 두 군데 붙으면 하나는 빼요.</span></p>
  </div>
  <div class="sig6">
    <span class="ml">대표 장치 — 눌러 보세요</span>
    <div class="d6"><div class="dh"><h3>나무색 빛</h3><button class="bt sm" data-demo="#mt-glow" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>모든 어두운 장 오른쪽 아래에 55%×70% 타원 빛이 깔려요.</p><div class="gw6" id="mt-glow"><b>Mat</b></div></div>
    <div class="d6"><div class="dh"><h3>크림 정보 카드</h3><button class="bt sm" data-demo="#mt-info" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>초록 위에 놓인 따뜻한 종이 — 테두리·그림자·둥근 모서리 없이.</p><div class="if6"><div class="ic6" id="mt-info"><b>1단원 · 3~4차시</b><span>00초등학교</span></div></div></div>
    <div class="d6"><div class="dh"><h3>숫자 속 주황 em</h3><button class="bt sm" data-demo="#mt-em" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>큰 숫자의 단위나 강조 자리만 주황으로, 바로 세운 글자로.</p><div class="em6" id="mt-em">57<em>°</em> · 12<em>:30</em></div></div>
  </div>
  <div class="band bot"><span>계절의 변화</span><span>1단원 · 3~4차시</span></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><button class="dk-next" aria-label="다음">→</button><span class="dk-count" data-pad></span></nav>
  </main>
</div>

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

---

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

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

```css
/* mat — 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:#232E26;--slide-bg:#232E26;
  --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 === */

/* --- 토큰(5.5vw = 106px, 5.5vh = 60px) --- */
:root{--bg:#232E26;--cream:#EDE6D0;--fg:#F0E8D2;--fg2:rgba(240,232,210,.58);--fg3:rgba(240,232,210,.3);--ink:#1E2820;--ink2:rgba(30,40,32,.6);--ink3:rgba(30,40,32,.3);
  --or:#C07030;--bd:rgba(240,232,210,.12);--bdc:rgba(30,40,32,.14);--px:106px}
.slide{font-family:'DM Sans',var(--kb),sans-serif;font-weight:var(--wb)}
.dark{background:var(--bg);color:var(--fg);--m:var(--fg2);--h:var(--fg3);--b:var(--bd)}
.light{background:var(--cream);color:var(--ink);--m:var(--ink2);--h:var(--ink3);--b:var(--bdc)}
.dark::before{content:'';position:absolute;right:0;bottom:0;width:55%;height:70%;background:radial-gradient(ellipse at 70% 80%,rgba(122,78,36,.28) 0%,rgba(80,50,20,.14) 40%,transparent 70%);pointer-events:none;z-index:0}
.slide>*{position:absolute;z-index:1}
.slide em{font-style:normal;color:var(--or)}
.kick,.band,.ql,.ml,.gl,.cv,.tm,.rl,.dash,figcaption,.th,.dk-count{font-family:'DM Mono',var(--kb),monospace;font-weight:400;text-transform:uppercase}
h1,h2,h3,.unit,.sv,.qt p,.words{font-family:'Bricolage Grotesque',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}
.kick{left:var(--px);top:150px;font-size:26px;letter-spacing:.12em;color:var(--or)}
.rule{left:var(--px);top:194px;width:32px;height:1px;background:var(--or)}
.dash{color:var(--or)}
.ml{display:block;font-size:24px;letter-spacing:.12em;color:var(--m)}
.bl{display:grid;grid-template-columns:1.4em 1fr;align-items:baseline;font-size:30px;line-height:1.55}
.hd{left:var(--px);right:var(--px);top:216px;font-size:72px;line-height:1.1;white-space:nowrap}
.bt{border:1px solid var(--b);padding:14px 28px;font:500 30px/1 'DM Sans',var(--kb),sans-serif;color:inherit}
.bt.main{border-color:var(--fg2)}
.bt:disabled{opacity:.3}

/* --- 크롬 띠·발 띠(표지는 없음) --- */
.band{left:var(--px);right:var(--px);display:flex;justify-content:space-between;gap:40px;font-size:22px;letter-spacing:.12em;color:var(--m)}
.band span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band.top{top:56px;padding-bottom:14px;border-bottom:1px solid var(--b)}
.band.bot{bottom:56px;padding-top:14px;border-top:1px solid var(--b)}

/* --- 1. 표지(크롬 없음): 킥커 + 주황 선 → 단원 → 모노 라벨 → 학습 목표 h1(가장 큰 글자, 핵심 낱말 = 크림 100%) / 오른쪽 아래 크림 정보 카드 --- */
.k1{top:150px}.r1{top:194px}
.unit{left:var(--px);top:236px;display:flex;align-items:baseline;gap:30px;font-size:72px;line-height:1.1;white-space:nowrap}
.unit span{font:800 46px/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--fg2)}
.gl{left:var(--px);top:380px;font-size:26px;letter-spacing:.12em;color:var(--fg2)}
.t1{left:100px;top:420px;font-size:116px;line-height:1.16;white-space:nowrap;color:var(--fg2)}
.t1 .gk{color:var(--fg)}
.info{background:var(--cream);color:var(--ink);padding:40px 64px}
.i1{right:var(--px);bottom:110px;width:640px}
.info h3{font-size:52px;line-height:1.15}
.info p{margin-top:14px;font-size:28px;line-height:1.6;color:var(--ink2)}

/* --- 2. 만들기: 이미지 자리(1px 선 + 6% 크림 + 모노 라벨) 속 측정기 그림 + em-dash 정의 | em-dash 4단계(켜지면 또렷) + 헤어라인 버튼 --- */
.img{left:var(--px);top:330px;width:780px;padding:14px 40px 6px;background:rgba(240,232,210,.06);border:1px solid var(--bd);
  --g-ink:var(--fg);--g-acc:var(--or);--g-stick:var(--fg2);--g-board:var(--bg);--g-ruler:#2E3D30;--g-prot:rgba(240,232,210,.06);--g-shadow:var(--fg3);--g-font:'DM Sans',var(--kb),sans-serif;--g-sw:1.5}
.img figcaption{font-size:20px;letter-spacing:.12em;color:var(--fg3);text-align:center}
.def{left:var(--px);width:780px;top:850px}
.def .bl{font-size:27px;line-height:1.45;color:var(--fg2)}
.def b{font-weight:500;color:var(--fg)}
.list{left:990px;right:var(--px);top:322px}
.li{display:grid;grid-template-columns:1.4em 1fr;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--bd);font-size:34px}
.li h3{font-size:40px;line-height:1.2}
.li p{margin-top:4px;font-size:26px;line-height:1.45;color:var(--fg2)}
.slide[data-step]:not([data-step="0"]) .li:not(.on){color:var(--fg3)}
.slide[data-step]:not([data-step="0"]) .li:not(.on) p{color:var(--fg3)}
.slide[data-step]:not([data-step="0"]) .li:not(.on) .dash{color:var(--fg3)}
.btns{left:990px;right:var(--px);top:872px;display:flex;align-items:center;gap:16px}
.cap{flex:1;font-size:26px;line-height:1.35;color:var(--fg2)}

/* --- 3. 숫자와 그래프: 통계 칸 4개(1px 오른쪽 선) + 세로 막대(흐린 크림, 가장 높은 값만 주황) + 1px 기준선, 아래 모노 값 줄 --- */
.stats{left:var(--px);right:var(--px);top:330px;display:grid;grid-template-columns:repeat(4,1fr)}
.cell{padding:6px 40px 10px 0;margin-right:40px;border-right:1px solid var(--bd)}
.cell:last-child{border-right:0;margin-right:0}
.sv{display:block;font-size:84px;line-height:1;letter-spacing:-.02em}
.cell p{margin-top:12px;font-size:26px;line-height:1.45;color:var(--fg2)}
.chart{left:var(--px);right:var(--px);top:540px;display:grid;grid-template-columns:260px repeat(7,1fr);grid-template-rows:250px auto auto auto;column-gap:24px}
.col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;border-bottom:1px solid var(--bd)}
.bar{display:block;background:var(--fg3);margin:0 14px}
.col.mx .bar{background:var(--or)}
.cv{text-align:center;margin-bottom:8px;font-size:24px;letter-spacing:.06em;color:var(--fg2)}
.col.mx .cv{color:var(--fg)}
.rl{align-self:center;font-size:20px;letter-spacing:.1em;color:var(--fg2);padding:8px 0}
.rb{align-self:end}
.tm,.vv{text-align:center;padding:10px 0;border-bottom:1px solid var(--bd)}
.tm{font-size:24px;letter-spacing:.06em;color:var(--fg)}
.vv{font-size:26px;color:var(--fg2)}

/* --- 4. 비교와 표(밝은 장 한 번): 비교 두 칸(1px 세로 기둥, em-dash) + 1px 줄 표 | em-dash 남중 + 주황 따옴표 인용 --- */
.cmp{left:var(--px);width:1000px;top:330px;display:grid;grid-template-columns:1fr 1px 1fr;column-gap:48px}
.cdiv{background:var(--bdc)}
.cp h3{font-size:44px;line-height:1.2;margin-bottom:12px}
.tbl{left:var(--px);width:1000px;top:610px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--bdc);font-size:29px}
.tr.th{font-size:22px;letter-spacing:.12em;color:var(--ink2);padding:10px 0}
.tr:not(.th) span:first-child{font-family:'Bricolage Grotesque',var(--kt),sans-serif;font-weight:var(--wt)}
.lst{left:1230px;right:var(--px);top:330px;display:flex;flex-direction:column;gap:10px}
.lst .bl{font-size:29px}
.qt{left:1230px;right:var(--px);top:620px}
.qm{display:block;font:800 154px/.6 'Bricolage Grotesque',sans-serif;color:var(--or)}
.qt p{margin-top:10px;font-size:42px;line-height:1.3;font-weight:var(--wt)}
.qt .ml{margin-top:18px}

/* --- 5. 확인하기: 크림 정보 카드 퀴즈(em-dash 보기, 정답 = 굵게 + 주황 dash) | em-dash 빈칸(1px 밑줄 칸) + 낱말 --- */
.quiz{left:var(--px);width:1000px;top:330px;bottom:130px;display:flex;flex-direction:column;padding:32px 56px}
.ql{font-size:24px;letter-spacing:.12em;color:var(--or)}
.quiz h3{margin-top:12px;font-size:50px;line-height:1.2}
.opts{margin-top:20px;border-top:1px solid var(--bdc)}
.opt{width:100%;display:grid;grid-template-columns:1.4em 1fr;align-items:baseline;text-align:left;padding:14px 0;border-bottom:1px solid var(--bdc);font-size:34px;color:var(--ink)}
.opt .dash{color:var(--ink3)}
.opt.right{font-weight:700}
.opt.right .dash{color:var(--or)}
.opt.wrong{color:var(--ink3)}
.opt:disabled:not(.right){opacity:.6}
.fb{margin-top:14px;min-height:84px;font-size:28px;line-height:1.5;color:var(--ink2)}
.bt.dk{align-self:flex-start;margin-top:auto;border-color:var(--ink3);color:var(--ink)}
.blk{left:1190px;right:var(--px);top:330px;bottom:130px;display:flex;flex-direction:column;gap:16px}
.blk .bl{font-size:30px}
.blank{position:relative;min-width:170px;margin-right:10px;padding:0 10px;border-bottom:1px solid var(--fg);font:500 30px/1.4 'DM Sans',var(--kb),sans-serif;color:var(--fg);text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;color:var(--fg2)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{font-size:40px;line-height:1.35}

/* --- 내비: 아래 가운데 5px 흰 점(무대 2배 = 10px) + 오른쪽 아래 모노 번호(흰 25%) --- */
.dk-nav{position:absolute;inset:0;pointer-events:none;--dot:255,255,255}
[data-slide="4"] .dk-nav{--dot:30,40,32}
.dk-dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:14px;pointer-events:auto}
.dk-dot{width:10px;height:10px;border-radius:50%;background:rgba(var(--dot),.22)}
.dk-dot.on{background:rgba(var(--dot),.75)}
.dk-prev,.dk-next{position:absolute;bottom:6px;width:40px;height:40px;font:400 24px/1 'DM Mono',monospace;color:rgba(var(--dot),.4);pointer-events:auto}
.dk-prev{left:calc(50% - 130px)}.dk-next{left:calc(50% + 90px)}
.dk-prev:disabled,.dk-next:disabled{opacity:.3}
.dk-count{position:absolute;right:40px;bottom:14px;font-size:22px;letter-spacing:.1em;color:rgba(var(--dot),.25)}
/* --- 6. 디자인 안내(어두운 장): em-dash 설명 | 1px 선 칸 시연 3개 --- */
.g6{left:var(--px);width:900px;top:330px;display:flex;flex-direction:column;gap:6px}
.g6 .ml{margin-top:8px}
.g6 .bl{font-size:26px;line-height:1.5;color:var(--fg2)}
.g6 b{font-weight:500;color:var(--fg)}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-5px;border:1px solid var(--bd)}
.sig6{left:1080px;right:var(--px);top:330px;display:flex;flex-direction:column;gap:16px}
.d6{border-top:1px solid var(--bd);padding-top:12px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:36px}
.d6 p{margin-top:4px;font-size:22px;line-height:1.45;color:var(--fg2)}
.bt.sm{font-size:20px;padding:8px 16px}
.bt.sm[aria-pressed="true"]{border-color:var(--fg)}
.gw6{position:relative;margin-top:10px;height:90px;background:var(--bg);border:1px solid var(--bd);overflow:hidden;display:flex;align-items:center;padding:0 24px}
.gw6 b{position:relative;font:800 48px 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.gw6.play::before{content:'';position:absolute;right:0;bottom:0;width:55%;height:100%;background:radial-gradient(ellipse at 70% 80%,rgba(122,78,36,.6) 0%,rgba(80,50,20,.3) 40%,transparent 70%)}
.if6{margin-top:10px;height:90px;display:flex;align-items:center}
.ic6{padding:12px 30px;border:1px dashed var(--bd)}
.ic6 b{display:block;font-family:'Bricolage Grotesque',var(--kt),sans-serif;font-weight:var(--wt);font-size:30px}
.ic6 span{font-size:20px;opacity:.7}
.ic6.play{background:var(--cream);color:var(--ink);border-color:transparent}
.em6{margin-top:10px;font:800 64px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.em6 em{color:var(--fg)}
.em6.play em{color:var(--or)}

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