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

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

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

## 라이선스

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

- 프리텐다드 Pretendard-Black: 프리텐다드 — 프리텐다드 (Pretendard) — 길형진 (orioncactus) / 눈누: https://noonnu.cc/font_page/694
  파일: Pretendard-Black.ttf
- Noto Sans KR Regular: Noto Sans KR — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: (c) 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'.
  파일: NotoSansKR-Regular.ttf

SIL Open Font License 1.1 요약
- 폰트를 자유롭게 사용·복제·수정·재배포할 수 있습니다(폰트 파일 단독 판매는 불가).
- 수정본(글자를 줄인 서브셋 포함)은 원래 폰트의 '예약 이름'을 쓰지 못할 수 있습니다.
- 재배포할 때는 저작권 표시와 라이선스 문구를 함께 넣어야 합니다.
- 전문: https://openfontlicense.org

학교안심 글꼴과 easy3D 폴더의 글꼴은 사용자가 OFL로 확인한 내용을 따랐습니다. 배포 전에 각 배포처에서 최신 라이선스를 다시 확인하세요.

design.md 라이선스 (MIT)
=======================
design.md는 frontend-slides(https://github.com/zarazhangrui/frontend-slides)의 템플릿을 바탕으로 한 것이며, 아래 MIT 라이선스를 따릅니다.

MIT License

Copyright (c) 2025 Zara Zhang

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

# ▼▼▼ 여기부터 AI에게 주는 지시서 ▼▼▼

(이 줄 위의 '사용법'과 '라이선스'는 사람을 위한 안내입니다. AI는 아래 지시서를 따르세요.)

## 0. 당신(AI)의 일

당신은 슬라이드 제작 도우미입니다. 사용자가 알려 주는 수업 내용으로, 아래 **디자인 규칙(1)**, **부품 사전(3)**, **HTML 뼈대(4)**를 지켜 **브라우저에서 바로 열리는 슬라이드 HTML 파일 하나**를 만듭니다.
이 디자인의 공통 CSS(글씨체·색·부품 모양)와 동작 엔진은 사이트에 올려 둔 파일이라, 뼈대의 `<link>`·`<script src>` 두 줄이 불러옵니다. **당신이 쓰는 것은 슬라이드 HTML(`<section class="slide">`들과 내비)과, 꼭 필요할 때만 '추가 부품' CSS뿐입니다.** 공통 CSS의 내용은 참고용으로 5에 있습니다.

### 진행 순서
1. 사용자가 아직 수업 내용을 말하지 않았다면, 먼저 아래를 짧게 물어보세요: 학교급·학년·과목, 단원과 차시, 학습 목표, 학교 이름(선택), 원하는 장 수(말하지 않으면 내용 분량에 맞게 정함).
2. **장별 구성안을 먼저 보여 주고 확인을 받습니다**(아래 '구성은 내용이 정합니다'). 이때는 코드를 쓰지 마세요.
3. 확인을 받으면 HTML을 만들고, 내보내기 전에 아래 '내보내기 전 점검'을 하나씩 확인합니다.
- 내용은 사용자가 준 것만 쓰고, **숫자·사실·출처를 지어내지 마세요.** 모르면 묻거나 "(예시)"라고 표시하세요.
- **사용자가 주지 않은 사실(연도·기록·수치·등재·'세계 최고'·'가장 ○○하다' 같은 말)을 덧붙이고 싶으면, 구성안에 '추가 사실'로 따로 적어 확인을 받으세요.** 확인받지 않은 사실은 슬라이드에 넣지 않습니다. 널리 알려진 이야기라도 정확한 대상을 쓰세요(예: 유네스코 세계기록유산에 오른 것은 '한글'이 아니라 《훈민정음》 해례본이라는 책).

### 반드시 지킬 것
1. **디자인 규칙(1)을 어기지 마세요.** 색·글꼴·배치·장식·움직임 규칙과 '하지 말 것'을 그대로 따릅니다. 규칙에 없는 효과(임의의 애니메이션, 새 색, 새 장식)를 더하지 마세요.
2. **뼈대(4)의 공통 파일 두 줄을 그대로 두세요.** `<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/creative-mode.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/creative-mode.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 프리텐다드 Pretendard-Black(900) · 본문 Noto Sans KR Regular(400))는 공통 CSS가 불러옵니다. `@font-face`를 새로 쓰지 말고, 글꼴은 `var(--kt)`(제목)·`var(--kb)`(본문)·`var(--ka)`(포인트) 변수로만 지정하세요.
6. **글자 크기와 화면 채우기** (슬라이드는 1920×1080 기준으로 그려져 화면 크기에 맞게 통째로 줄어듭니다)
   - 읽어야 하는 글(본문·설명·표 내용·보기)은 **28px 이상**, 보조 글(캡션·주석)은 **22px 이상**으로 씁니다. 창 제목줄·쪽 번호·작은 라벨 같은 장식 글자는 디자인 규칙의 크기를 따릅니다.
   - 창·판·카드가 **화면의 대부분을 채우게** 하세요. 한쪽에 작게 몰리거나 큰 빈 공간이 남으면 안 됩니다. 내용이 적은 장은 글자와 그림을 키우거나 다른 장과 합칩니다.
   - **높이 예산**: 장 제목과 아래 내비를 빼면 본문에 쓸 수 있는 높이는 대략 **650~750px**입니다. 모든 내용이 1920×1080 안에 들어가야 하고, 넘친 부분은 잘려서 보이지 않습니다. 쓰기 전에 줄 수 × 줄 높이(글자 크기의 약 1.5배)로 높이를 어림해 보세요.
   - **카드 규칙**: 한 장에 카드(칸)를 4개 이상 놓으면 카드마다 글은 **3줄 이하**로 줄입니다. 글이 들어가는 칸은 **너비 400px 이상**으로 두고(그림+글을 나란히 놓을 때는 글 칸 기준), 한 줄에 몇 글자밖에 안 들어가게 좁히지 마세요. 카드를 두 줄로 쌓아야 하면 그 줄들의 높이 합이 높이 예산 안에 드는지 확인합니다.
   - 제목은 **두 줄 이내**로 씁니다. 표지 제목은 한 줄에 15자 안팎으로 끊어 줄을 바꾸세요. 글이 창 밖으로 넘치거나 잘리면 글자를 줄이지 말고 문장을 짧게 고칩니다.
   - 한글은 단어 중간에서 줄이 바뀌지 않게(`word-break:keep-all`) 합니다(공통 CSS에 이미 들어 있음).
7. 저작권이 있는 글·그림·사진을 가져오지 마세요. **사용자가 요청하지 않으면 그림 파일(이미지 생성)을 따로 만들지 마세요. 슬라이드에 필요한 그림은 HTML 안에서 SVG·CSS로 그립니다.**

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

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

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

---

## 1. 디자인 규칙 (`creative-mode` design.md)

````markdown
---
version: alpha
name: Creative Mode
description: A neo-brutalist editorial presentation system built for 1920x1080 slides. The deck anchors on a warm cream canvas with heavy 4px ink borders, hard offset drop-shadows, and a bold four-color accent palette (forest green, hot pink, burnt orange, sunshine yellow). Display headlines run Archivo Black in pure uppercase — aggressive, loud, zero letter-spacing softness. Monospace labels in JetBrains Mono echo a typesetting rule-sheet. Body copy sits in Space Grotesk. Every slide uses flat color-blocking with no gradients, no rounded cards, and no subtlety. The aesthetic is part Bauhaus grid, part punk zine, part Swiss editorial.

colors:
  cream: "#EFE9D9"
  cream-2: "#E4DCC4"
  ink: "#0F0F0F"
  ink-2: "#2A2A2A"
  green: "#1F8A4C"
  green-dark: "#136636"
  pink: "#F06CA8"
  pink-dark: "#D14E8B"
  orange: "#E85A1F"
  yellow: "#F5C518"

typography:
  display-jumbo:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 220px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-hero:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 160px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-xl:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 140px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-lg:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 100px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-md:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-sm:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 84px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
    textTransform: uppercase
  display-xs:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -0.01em
    textTransform: uppercase
  stat-num:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0
  step-num:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 140px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: 0
  step-title:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
    textTransform: uppercase
  stamp-num:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 0
  marker-label:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 46px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
    textTransform: uppercase
  badge-label:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
    textTransform: uppercase
  table-head:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
    textTransform: uppercase
  table-label:
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
    textTransform: uppercase
  body-lg:
    fontFamily: "Space Grotesk, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-md:
    fontFamily: "Space Grotesk, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0
  mono-label:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.06em
    textTransform: uppercase
  mono-kicker:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.14em
    textTransform: uppercase
  mono-tag:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.1em
    textTransform: uppercase
  mono-chart:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.08em
    textTransform: uppercase

spacing:
  slide-gutter: 96px
  chrome-gutter: 64px
  grid-gap: 28px
  cell-pad: 32px
  step-pad: 28px
  topbar-top: 48px
  meta-bottom: 40px
  table-cell-pad: 18px 26px

canvas:
  width: 1920px
  height: 1080px

components:
  slide-chrome:
    topbar:
      fontFamily: "JetBrains Mono, monospace"
      fontSize: 24px
      letterSpacing: 0.08em
      textTransform: uppercase
      position: absolute
      left: 64px
      right: 64px
      top: 48px
    topbar-pill:
      border: "2px solid {colors.ink}"
      padding: 6px 14px
      borderRadius: 999px
    slide-meta:
      fontFamily: "JetBrains Mono, monospace"
      fontSize: 24px
      letterSpacing: 0.06em
      textTransform: uppercase
      position: absolute
      left: 64px
      right: 64px
      bottom: 40px
    slide-meta-dot:
      width: 10px
      height: 10px
      background: "{colors.ink}"
      borderRadius: 50%
  stat-cell:
    border: "4px solid {colors.ink}"
    padding: 28px 32px
  stat-cell-green:
    background: "{colors.green}"
    color: "{colors.cream}"
  stat-cell-pink:
    background: "{colors.pink}"
    color: "{colors.ink}"
  stat-cell-cream:
    background: "{colors.cream}"
    color: "{colors.ink}"
  stat-cell-orange:
    background: "{colors.orange}"
    color: "{colors.cream}"
  step-card:
    border: "4px solid {colors.ink}"
    padding: 28px
    height: 420px
  step-card-cream:
    background: "{colors.cream}"
    color: "{colors.ink}"
  step-card-pink:
    background: "{colors.pink}"
    color: "{colors.ink}"
  step-card-yellow:
    background: "{colors.yellow}"
    color: "{colors.ink}"
  step-card-green:
    background: "{colors.green}"
    color: "{colors.cream}"
  step-arrow:
    borderTop: "18px solid transparent"
    borderBottom: "18px solid transparent"
    borderLeft: "24px solid {colors.ink}"
  table:
    border: "4px solid {colors.ink}"
    background: "{colors.cream-2}"
    rowBorder: "3px solid {colors.ink}"
    colBorder: "3px solid {colors.ink}"
  table-head-row:
    background: "{colors.ink}"
    color: "{colors.cream}"
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 28px
    borderColor: "{colors.cream}"
  table-col-pink:
    background: "{colors.pink}"
    color: "{colors.ink}"
  table-col-green:
    background: "{colors.green}"
    color: "{colors.cream}"
  table-col-orange:
    background: "{colors.orange}"
    color: "{colors.cream}"
  marker-block:
    background: "{colors.pink}"
    border: "4px solid {colors.ink}"
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 46px
    hardShadow: "24px 24px 0 {colors.orange}, 24px 24px 0 4px {colors.ink}"
  iso-panel:
    background: "{colors.green}"
    border: "4px solid {colors.ink}"
  stacked-block:
    border: "4px solid {colors.ink}"
    hardShadow: "18px 18px 0 {colors.ink}"
  badge-rotated:
    background: "{colors.yellow}"
    border: "4px solid {colors.ink}"
    fontFamily: "Archivo Black, sans-serif"
    fontSize: 28px
    textTransform: uppercase
    transform: rotate(-4deg)
  stamp:
    background: "{colors.pink}"
    border: "4px solid {colors.cream}"
    width: 340px
    height: 340px
    transform: rotate(-6deg)
  stamp-inner:
    border: "4px solid {colors.cream}"
    borderRadius: 50%
  kicker-block:
    background: "{colors.ink}"
    color: "{colors.cream}"
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    letterSpacing: 0.14em
    textTransform: uppercase
    padding: 8px 16px
  bar-chart-bar:
    border: "3px solid {colors.ink}"
  bar-chart-axis:
    borderRight: "3px solid {colors.ink}"
    borderBottom: "3px solid {colors.ink}"
  decorative-circle:
    background: "{colors.yellow}"
    border: "4px solid {colors.ink}"
    borderRadius: 50%
  closing-slide:
    background: "{colors.green}"
    color: "{colors.cream}"
---

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

Creative Mode is a **neo-brutalist editorial slide system** for 1920x1080 presentations. The foundational aesthetic choice is restraint of technique paired with aggression of expression: no rounded cards, no gradients, no shadows that suggest light sources — only flat color-blocking and hard offset drop-shadows (the "Risograph" or "screen-print" kind where the shadow is a sold same-color offset).

The canvas is warm cream (`{colors.cream}` — #EFE9D9) with near-black ink (`{colors.ink}` — #0F0F0F) for borders, text, and rules. Four accent colors fire at full saturation: forest green, hot pink, burnt orange, and sunshine yellow. These never blend — they collide on the slide and the collision is the design.

Headlines run **Archivo Black** (weight 400 due to the display face being intrinsically heavy) in strict uppercase with tight line-height (0.92). Font sizes are extreme: 220px for closing slides, 160px for titles. **JetBrains Mono** carries all metadata, labels, topbar text, and axis labels — reinforcing a "designed artifact" or "technical manual" register. **Space Grotesk** handles all body paragraphs.

Every slide follows an identical chrome frame: a JetBrains Mono topbar at 48px from top (left text + right pill), and a JetBrains Mono meta footer at 40px from bottom (label left, slide number right with ink dot divider). Content lives inside this frame with 96px side gutters.

**Key Characteristics:**
- Cream canvas (`{colors.cream}` — #EFE9D9) as the universal background; green (`{colors.green}` — #1F8A4C) used for the closing slide only.
- 4px solid ink borders on every structural element — cards, panels, table cells, chart axes.
- Hard offset box-shadows in place of blurred drops: `24px 24px 0 color, 24px 24px 0 4px ink` on featured blocks.
- Archivo Black display type in uppercase with 0.92 line-height for extreme tightness.
- Four accent colors used as flat fills; each slide uses two or three of the four, never all simultaneously.
- Topbar pill badge (JetBrains Mono, 2px ink border, 999px radius) as the only rounded element per slide.

## Colors

### Canvas and Ink
- **Cream** (`{colors.cream}` — #EFE9D9): The universal slide background. Warm, not white. Distinguishes the deck from sterile white-background slides.
- **Cream 2** (`{colors.cream-2}` — #E4DCC4): One step darker cream. Used exclusively as the comparison table's background fill, creating a subtle recessed surface inside the ink border.
- **Ink** (`{colors.ink}` — #0F0F0F): Near-black used for all borders, body text, rules, topbar chrome, and the closing stamp border. Not pure #000000 — slightly softened.
- **Ink 2** (`{colors.ink-2}` — #2A2A2A): Softer near-black for secondary body text, descriptions inside stat cells, chart footnotes.

### Accent Colors
- **Green** (`{colors.green}` — #1F8A4C): Forest green. The dominant accent. Works on stat cells, diagram panels, process steps, and as a full-slide background for maximum visual impact.
- **Green Dark** (`{colors.green-dark}` — #136636): Darker green variant — available for lever/depth decorative effects. Not used as a primary surface fill.
- **Pink** (`{colors.pink}` — #F06CA8): Hot pink. High energy. Works on toggle switch illustrations, section markers, stat cells, process steps, and stamp elements.
- **Pink Dark** (`{colors.pink-dark}` — #D14E8B): Darker pink for depth on decorative lever elements. Available for shadow-side accents.
- **Orange** (`{colors.orange}` — #E85A1F): Burnt orange. The hard drop-shadow color on featured blocks; also works as a stat cell fill, bar chart color, and table column background.
- **Yellow** (`{colors.yellow}` — #F5C518): Sunshine yellow. Works on decorative circles, process steps, rotated badges, and bar chart bars. A warm punctuation color.


## Typography

### Font Families
The system uses three typefaces, each in a strict register:
- **Archivo Black** — display headlines, step numbers, stat numbers, table labels, all uppercase presentation text. Intrinsically heavy, no additional font-weight needed.
- **JetBrains Mono** — all metadata: topbar labels, meta footer, kicker labels, chart axes, legend rows, layer tags, figure notes. Carries the "technical spec" voice.
- **Space Grotesk** — body copy only: body column text (slide 2), stat cell descriptors, diagram subtext, step descriptions, closing strap.

### Display Scale
The slide canvas is 1920x1080px, so font sizes are far larger than web norms.

| Token | Size | Use |
|---|---|---|
| `{typography.display-jumbo}` | 220px | Jumbo title or closing headline |
| `{typography.display-hero}` | 160px | Primary deck title or hero name |
| `{typography.display-xl}` | 140px | Section-opening display headline |
| `{typography.display-lg}` | 100px | Section headline alongside a panel |
| `{typography.display-md}` | 96px | Mid-weight section headline |
| `{typography.display-sm}` | 84px | Section headline for data-heavy layouts |
| `{typography.display-xs}` | 72px | Section headline for grid layouts |
| `{typography.step-num}` | 140px | Large ordinal numerals in stepped layouts |
| `{typography.stat-num}` | 96px | Large numerals in stat or data cells |
| `{typography.stamp-num}` | 64px | Stamp or seal numeral |
| `{typography.marker-label}` | 46px | Featured marker or callout block label |
| `{typography.step-title}` | 34px | Card or step title |
| `{typography.table-head}` | 28px | Table header or label row text |
| `{typography.badge-label}` | 28px | Rotated badge or annotation label |

### Monospace Scale
All JetBrains Mono text sits at 24px. Letter-spacing varies by use:
- Topbar labels: 0.08em
- Meta footer: 0.06em
- Kicker labels (inverted): 0.14em
- Chart axes: 0.08em (via `{typography.mono-chart}`)
- Legend rows: 0.06em
- Layer tags: 0.1em

### Body Scale
- `{typography.body-lg}` (28px): Body copy for wide column layouts or lede paragraphs.
- `{typography.body-md}` (24px): Body text in stat cells, diagram annotations, step descriptions, footnotes, and strap lines.

### Principles
Archivo Black has a line-height of 0.92 — headlines overlap their own cap-height, which is intentional. Uppercase lock is non-negotiable for the display face; lowercase Archivo Black breaks the editorial register. The monospace face uses generous letter-spacing (0.06–0.16em) to feel like a typewritten label. Never use letter-spacing on Archivo Black or Space Grotesk.

## Layout

### Canvas System
Every slide is exactly 1920×1080px in a fixed, non-scrolling viewport. The `deck-stage` custom element handles centering and scaling.

### Gutter System
- **Chrome gutter** (64px left/right): Used by topbar and slide-meta only.
- **Content gutter** (96px left/right): Used by all content — headlines, body, grids.
- Headlines occasionally push right to within 96px of the right edge, or are constrained by `right: 1000px` / `right: 900px` to coexist with a right-panel diagram.


### Chrome Frame (All Slides)
```
┌─ topbar @ top:48px, left:64px, right:64px ──────────────────────────────────┐
│  SECTION LABEL                                       [pill badge]            │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│   CONTENT (96px left gutter, 96px right gutter)                            │
│                                                                              │
├─ slide-meta @ bottom:40px, left:64px, right:64px ───────────────────────────┤
│  DESCRIPTOR LABEL                                    01 • 08                 │
└─────────────────────────────────────────────────────────────────────────────┘
```

## Depth and Elevation

The system uses **zero blurred shadows**. Depth is expressed through two techniques:

### Hard Offset Shadow
The signature treatment: a second solid shape offset by a fixed amount in both X and Y. Two values are used:
- **Large offset** (24px 24px): Featured blocks like the marker and poster switch — `box-shadow: 24px 24px 0 {colors.orange}, 24px 24px 0 4px {colors.ink}`. The first shadow is the colored offset; the second is the ink border around it.
- **Medium offset** (18px 18px): Stacked blocks in the diagram — `box-shadow: 18px 18px 0 {colors.ink}`. Pure ink shadow only.

### Color-Block Contrast
Depth perception comes from juxtaposing surfaces: cream on cream-2 (table), ink on cream (kicker block), green on cream (diagram panel). No shadow needed when contrast does the work.

### Flat Elements
Topbar, meta footer, chart axis lines, legend swatches: flat, no shadow, no border-radius.

## Shapes and Treatment

### Border Radius
- **0px (square)**: All structural elements — stat cells, step cards, table cells, chart bars, diagram panels, stacked blocks. No rounding.
- **50% (circle)**: Decorative circles within diagram (yellow circ), the topbar pill dot (slide meta separator dot).
- **999px (pill)**: Topbar badge pill only. The one exception to the system's overall squareness, and it reads as a label chip rather than a card.
- **Rotated elements**: The comparison badge rotates -4deg; the closing stamp rotates -6deg. These are the system's only non-orthogonal placements.

### Borders
- **4px solid `{colors.ink}`**: All structural borders — stat cells, step cards, diagram panels, table (outer), poster block, marker block, switch block, stamp.
- **3px solid `{colors.ink}`**: All internal structural lines — table rows, table columns, chart axis, bar chart bars.
- **2px solid `{colors.ink}`**: Topbar pill badge.
- **3px dashed `{colors.ink}`**: Dashed horizontal rule separating the process slide's topbar from its flow cards.

### Decorative Elements
- **Toggle switch**: Pink square with a lever shape (skewed div) and thick/dark underside, offset shadow in orange with ink border.
- **Stacked blocks**: Four overlapping absolute-positioned rectangles in pink, yellow, orange, cream-2 with 18px ink hard shadows.
- **Circle overlay**: Yellow circle centered in a green square — shape contrast acting as decorative figure.
- **Stamp**: Pink rotated square with a cream circular inner border — acts as a seal or approval mark.

## Do's and Don'ts

### Do
- Use 4px ink borders on every structural element. Thinner looks soft; thicker looks like a web component.
- Use hard offset shadows in exactly two sizes: 24px for featured hero blocks, 18px for diagram stacked blocks. Don't mix sizes.
- Stay uppercase on all Archivo Black usage. The font in sentence case reads as a different brand.
- Use the four accents in groups of two or three per slide. Every accent on one slide is noise.
- Reserve the green background for a single dominant slide. Its rarity is what gives it impact.
- Use JetBrains Mono for all labels, metadata, indices, figure notes, and axis text. Never use it for body or headlines.
- Keep line-height at 0.92 for all display text. Looser leading breaks the tight editorial register.
- Maintain 96px content gutter and 64px chrome gutter consistently across all slides.

### Don't
- Don't round card corners (except the topbar pill). Rounding signals "friendly SaaS"; sharp corners signal "editorial precision."
- Don't use gradients, drop shadows with blur, or glow effects. All depth must come from hard offset or color contrast.
- Don't use Archivo Black in sentence case. Never lowercase the display face.
- Don't apply letter-spacing to Archivo Black (except at -0.01em which is already encoded). Extra tracking breaks its density.
- Don't introduce a fifth accent color. The four-color palette is the brand constraint.
- Don't use pure white (#ffffff) as a background. Cream is the canvas; white reads as blank.
- Don't use Space Grotesk for labels or metadata. That role belongs to JetBrains Mono.
- Don't add multiple typefaces. The three-family stack is complete.
- Don't center-align body text. All body copy is left-aligned; centered text breaks the grid discipline.
- Don't soften the stamp or badge rotation. The -4deg and -6deg angles are deliberate imperfection signals.

## Responsive Behavior

This template is designed **exclusively for 1920x1080 presentation display**. It is not a web page and has no mobile breakpoints. The `deck-stage` web component handles viewport scaling via CSS transforms, so the 1920x1080 canvas scales proportionally on any screen size without layout changes.

### Touch / Presenter Behavior
- Slides advance via keyboard arrow keys or presentation clicker (handled by `deck-stage.js`).
- No hover states are defined or needed.
- No interactive form elements exist.

### Print / Export Behavior
- At 96dpi, the 1920x1080 canvas maps to a standard 20x11.25 inch frame.
- For PDF export, a 1920x1080 viewport capture or browser print-to-PDF at 100% scale is recommended.
- At 1pt = 1.333px, the effective print sizes of headlines range from 54pt (72px) to 165pt (220px) — correct for poster/title cards.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin font | Recommended Chinese pairing | Source |
|---|---|---|---|
| Display / Headline (Archivo Black uppercase 400) | Archivo Black | 思源宋体 Noto Serif SC 900 | Google Fonts |
| Body (Space Grotesk 400) | Space Grotesk | 思源宋体 Noto Serif SC 400 | Google Fonts |
| Mono / Label (JetBrains Mono uppercase) | JetBrains Mono | JetBrains Mono (Latin/digit only — keep mono chrome in Latin) | Google Fonts |

### Mixed-Content Strategy

Use **Strategy A — single-font-stack with fallback**: declare Noto Serif SC *after* the Latin face in the same `font-family` stack so Latin glyphs render in Archivo Black / Space Grotesk and CJK glyphs fall through to NSC automatically. JetBrains Mono chrome stays Latin/digit-only — topbar labels, slide-meta, axis ticks, and figure notes do not need a CJK fallback (and JetBrains Mono has no CJK glyphs by design).

### Loading

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

```css
:root {
  --font-display: "Archivo Black", "Noto Serif SC", sans-serif;
  --font-body: "Space Grotesk", "Noto Serif SC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
/* Display headlines use Noto Serif SC 900; body uses NSC 400. */
```

### Universal CJK Adjustments

- **Line-height**: bump CJK body line-height to ~1.55 (from 1.4) — Hanzi need more vertical breathing than Latin lowercase. For display NSC 900 at 100–220px, keep line-height tight at ~1.0 (NSC heavy weight at display size needs less leading than Archivo Black).
- **Letter-spacing**: zero out `letter-spacing` on Hanzi runs (negative tracking that flatters Archivo Black caps jams Hanzi strokes together). Keep tight tracking only on Latin spans.
- **Text-transform**: drop `text-transform: uppercase` on any display/label/mono when content is Hanzi — Chinese has no case; forcing uppercase does nothing for Hanzi but breaks the rendering of any mixed Latin acronyms inside.
- **Punctuation**: use Chinese full-width punctuation (，。：；「」) for Chinese sentences, half-width (`,.:;""`) for Latin. Never mix half-width punctuation into a Chinese sentence.
- **No period on headlines**: Chinese headline convention omits the terminal 。 — strip it from display strings.
- **Pangu spacing**: insert a thin space (or a regular space) between adjacent Hanzi and Latin/digit runs (e.g. `2026 年`, `AI 产品`). Improves readability of mixed runs.
- **One font per sentence**: don't switch CJK families mid-sentence. Pick a single weight of Noto Serif SC for a given text run, never two inside one phrase.

### Aesthetic Notes

Creative Mode's neo-brutalist register depends on Archivo Black's extreme density at 100–220px — there is no Hanzi face that matches this exact mass, so Noto Serif SC at weight 900 is the closest available substitute. NSC 900's modulated serif strokes will read as more literary than the punk-zine Archivo Black voice, but the four-color block palette, 4px ink borders, and hard 24px offset shadows do most of the brutalist work — the typography becomes one component of a louder system rather than the system itself. The "uppercase always" rule for Archivo Black is meaningless for Hanzi (no case), so drop both `text-transform: uppercase` and the -0.01em tracking when content switches to Chinese — NSC 900 stands on size and color alone. JetBrains Mono chrome (topbar pill, slide-meta, axis ticks, kicker block) intentionally stays Latin/digit-only: render `04 / 08` slide counters in mono, but render any Chinese descriptor label in NSC 400 inside the meta footer. The four accents (green / pink / orange / yellow), stat-cell color blocks, table treatment, and decorative geometry (stamp, badge, stacked blocks) are all content-agnostic.

### Known CJK Gap

**Heavy Latin display has no exact CJK equivalent.** Archivo Black's brutalist density at 220px is the system's signature — Noto Serif SC 900 is the heaviest commonly available Hanzi weight, but it reads as a literary serif rather than a poster-grotesk. Chinese decks built with Creative Mode will feel ~30% less "punk-zine" than the Latin original; compensate by leaning harder on the accent color blocks, the hard offset shadows, and the rotated badge / stamp elements. Avoid the alternative of `Smiley Sans Oblique` for display — its oblique cut conflicts with the system's strict orthogonal rectangle geometry. NSC has no italic axis, but the system doesn't use italic anywhere — no loss. The mono chrome's "technical spec" voice is best preserved by keeping all JetBrains Mono content in Latin/digit and reserving NSC for headline and body roles only.

## Iteration Guide

1. New slide layouts must respect the chrome frame: topbar at top:48px left:64px, slide-meta at bottom:40px left:64px.
2. Content begins at 96px from each side edge.
3. When adding a data section (chart, table, grid), pair a display headline above with JetBrains Mono labels inside.
4. Pick two or three accent fills per slide. Never mix all four on a single slide.
5. Hard shadows go on featured single elements only (marker, featured block). Grid cells do not get individual shadows.
6. New step/stat cards follow the existing color-sequence pattern: alternate cream with accents, end the sequence on green.
7. All borders are 4px solid ink. Internal sub-borders within a table or axis are 3px solid ink.
8. Rotated elements (badge, stamp) use single fixed angles (-4deg, -6deg). Do not introduce other angles.
9. Icons and illustrations are CSS-only geometric shapes (divs, borders, pseudo-elements). No external images or SVGs needed.

## Known Gaps

- The `deck-stage.js` script (slide advancement, keyboard nav) is an external dependency not documented here.
- Animation and transition between slides is not in scope for this template; all slides are static.
- The title slide poster contains a decorative toggle switch illustration built from nested divs; it has no functional state.
- Chart data (bar heights, values, labels) is hardcoded as inline styles and placeholder content — there is no data-binding layer.
- Table data is all placeholder; no dynamic population is supported.
- The `--rule` CSS variable (#0F0F0F, identical to `--ink`) is defined but not used explicitly — it is reserved for horizontal rule elements and can be considered an alias for ink.
- Font fallback for Archivo Black is `sans-serif` — the font must be loaded from Google Fonts for the design to render correctly.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.badge` — 1·4장 — 예: `<div class="badge">`
- `.circ` — 1장 — 예: `<div class="circ">`
- `.en` — 1장 — 예: `<p class="en">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.k1` — 1장 — 예: `<span class="kb k1">`
- `.kb` — 1·2·4·5·6장 — 예: `<span class="kb k1">`
- `.lever` — 1장 — 예: `<i class="lever">`
- `.meta` — 1·2·3·4·5·6장 — 예: `<div class="meta">`
- `.pg` — 1·2·3·4·5·6장 — 예: `<span class="pg">`
- `.pill` — 1·2·3·4·5·6장 — 예: `<span class="pill">`
- `.poster` — 1장 — 예: `<div class="poster">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.sw` — 1장 — 예: `<div class="sw">`
- `.sw-lab` — 1장 — 예: `<span class="sw-lab">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.topbar` — 1·2·3·4·5·6장 — 예: `<div class="topbar">`
- `.track` — 1장 — 예: `<i class="track">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.arw` — 2장 — 예: `<i class="arw">`
- `.btn` — 2·5·6장 — 예: `<button class="btn go" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03…`
- `.card` — 2장 — 예: `<div class="card cream" data-s="1">`
- `.cream` — 2·3·5장 — 예: `<div class="card cream" data-s="1">`
- `.dash` — 2·6장 — 예: `<i class="dash">`
- `.def` — 2장 — 예: `<p class="def">`
- `.fig` — 2장 — 예: `<div class="fig">`
- `.flow` — 2장 — 예: `<div class="flow">`
- `.go` — 2장 — 예: `<button class="btn go" data-act="step">`
- `.green` — 2·3·4장 — 예: `<div class="card green" data-s="4">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.note` — 2장 — 예: `<div class="note">`
- `.num` — 2장 — 예: `<b class="num">`
- `.pink` — 2·3·4·5장 — 예: `<div class="card pink" data-s="2">`
- `.yellow` — 2·5장 — 예: `<div class="card yellow" data-s="3">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.ax` — 3장 — 예: `<span class="mono ax">`
- `.bars` — 3장 — 예: `<div class="bars">`
- `.bv` — 3장 — 예: `<span class="mono bv">`
- `.chart` — 3장 — 예: `<div class="chart">`
- `.col` — 3장 — 예: `<div class="col">`
- `.ct` — 3장 — 예: `<span class="mono ct">`
- `.hd3` — 3·4·5장 — 예: `<h2 class="hd hd3">`
- `.lb` — 3·4·6장 — 예: `<span class="lb">`
- `.mono` — 3·4장 — 예: `<span class="mono">`
- `.mx` — 3장 — 예: `<i class="mx" style="height:181px">`
- `.orange` — 3·4·5장 — 예: `<div class="stat orange">`
- `.sn` — 3장 — 예: `<b class="sn">`
- `.stat` — 3·4장 — 예: `<div class="stat green">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.t3` — 3장 — 예: `<div class="tbl t3">`
- `.tbl` — 3·4·6장 — 예: `<div class="tbl t3">`
- `.th` — 3·4장 — 예: `<div class="tr th">`
- `.tr` — 3·4·6장 — 예: `<div class="tr th">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.b4` — 4장 — 예: `<div class="badge b4">`
- `.cc` — 4장 — 예: `<div class="stat green cc">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.marker` — 4장 — 예: `<div class="marker">`
- `.qt` — 4장 — 예: `<div class="qt">`
- `.t4` — 4장 — 예: `<div class="tbl t4">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<p class="bl">`
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="blk">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.green-bg` — 5장 — 예: `<section class="slide green-bg">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.qb` — 5장 — 예: `<span class="qb">`
- `.quiz` — 5장 — 예: `<div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해…`
- `.rt` — 5장 — 예: `<button class="btn rt" data-act="retry">`
- `.stamp` — 5·6장 — 예: `<div class="stamp">`
- `.wl` — 5장 — 예: `<span class="kb wl">`
- `.words` — 5장 — 예: `<div class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="d6 a">`
- `.b` — 6장 — 예: `<div class="d6 b">`
- `.blk6` — 6장 — 예: `<div class="blk6" id="cm-sh">`
- `.c` — 6장 — 예: `<div class="d6 c">`
- `.d6` — 6장 — 예: `<div class="d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.g6` — 6장 — 예: `<div class="tbl g6">`
- `.lv` — 6장 — 예: `<i class="lv">`
- `.r6` — 6장 — 예: `<div class="tr r6">`
- `.shd6` — 6장 — 예: `<div class="shd6">`
- `.sl6` — 6장 — 예: `<span class="kb sl6">`
- `.sm` — 6장 — 예: `<button class="btn sm" data-demo="#cm-sw" data-mode="toggle" aria-pressed="false">`
- `.st6` — 6장 — 예: `<div class="stamp st6">`
- `.std6` — 6장 — 예: `<div class="std6" id="cm-st">`
- `.sw6` — 6장 — 예: `<span class="sw6">`
- `.sw6d` — 6장 — 예: `<div class="sw6d" id="cm-sw">`
- `.tk` — 6장 — 예: `<i class="tk">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="creative-mode">
<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=Archivo+Black&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/creative-mode.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide">
  <div class="topbar"><span>초등 과학 · 6학년 2학기</span><span class="pill">1단원 · 3~4차시</span></div>
  <span class="kb k1">학습 목표</span>
  <h1 class="t1">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <p class="unit">계절의 변화</p>
  <p class="en">Sun, Shadow & Temperature</p>
  <div class="poster"><div class="sw"><i class="track"></i><i class="lever"></i></div><span class="sw-lab">ON</span></div>
  <div class="badge">6학년 과학</div>
  <div class="circ"><i></i></div>
  <div class="meta"><span>00초등학교 · 2026</span><span class="pg">01<i></i>06</span></div>
</section>
<section class="slide" data-steps="4">
  <div class="topbar"><span>측정 준비</span><span class="pill">1단원 · 3~4차시</span></div>
  <i class="dash"></i>
  <h2 class="hd">태양 고도 측정기 만들기</h2>
  <div class="fig"><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="note"><span class="kb">NOTE</span><p>막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <p class="def"><b>태양 고도</b> = 태양이 지표면과 이루는 각</p>
  <div class="flow"><div class="card cream" data-s="1"><b class="num">01</b><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><i class="arw"></i><div class="card pink" data-s="2"><b class="num">02</b><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><i class="arw"></i><div class="card yellow" data-s="3"><b class="num">03</b><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><i class="arw"></i><div class="card green" data-s="4"><b class="num">04</b><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="btn go" data-act="step">다음 단계 →</button><button class="btn" data-act="reset">처음부터</button></div>
  <p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03 실 묶기&quot;,&quot;04 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p>
  <div class="meta"><span>버튼 규칙 없음 → 4px 테두리 칸으로 표현</span><span class="pg">02<i></i>06</span></div>
</section>
<section class="slide">
  <div class="topbar"><span>측정 결과</span><span class="pill">예시 값</span></div>
  <h2 class="hd hd3">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="stat green"><span class="mono">남중 시각</span><b class="sn">12:30</b><p>태양 고도가 가장 높아요 무렵 · 남중</p></div><div class="stat pink"><span class="mono">남중 방향</span><b class="sn">정남</b><p>남중할 때 태양의 위치 쪽</p></div><div class="stat cream"><span class="mono">최고 기온</span><b class="sn">14:30</b><p>기온이 가장 높아요 무렵</p></div><div class="stat orange"><span class="mono">가장 긴 그림자</span><b class="sn">9:30</b><p>그림자가 가장 길어요 · 15:30</p></div></div>
  <div class="chart">
    <span class="mono ct">측정 시각별 태양 고도, 그림자 길이, 기온</span>
    <div class="bars"><span class="mono ax">태양 고도(°)</span><div class="col"><span class="mono bv">38°</span><i class="" style="height:120px"></i></div><div class="col"><span class="mono bv">48°</span><i class="" style="height:152px"></i></div><div class="col"><span class="mono bv">55°</span><i class="" style="height:174px"></i></div><div class="col"><span class="mono bv">57°</span><i class="mx" style="height:181px"></i></div><div class="col"><span class="mono bv">54°</span><i class="" style="height:171px"></i></div><div class="col"><span class="mono bv">47°</span><i class="" style="height:149px"></i></div><div class="col"><span class="mono bv">37°</span><i class="" style="height:117px"></i></div></div>
  </div>
  <div class="tbl t3"><div class="tr th"><span>시각</span><span>9:30</span><span>10:30</span><span>11:30</span><span>12:30</span><span>13:30</span><span>14:30</span><span>15:30</span></div>
    <div class="tr"><span class="lb">그림자 길이(cm)</span><span>12.9</span><span>9.1</span><span>7</span><span>6.4</span><span>7.2</span><span>9.4</span><span>13.4</span></div>
    <div class="tr"><span class="lb">기온(℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div>
  </div>
  <div class="meta"><span>예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</span><span class="pg">03<i></i>06</span></div>
</section>
<section class="slide">
  <div class="topbar"><span>관계 정리</span><span class="pill">남중</span></div>
  <h2 class="hd hd3">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="stat green cc"><span class="mono">HIGH</span><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="stat pink cc"><span class="mono">LOW</span><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
  <div class="marker"><span class="kb">남중</span><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p>이때의 태양 고도를 남중 고도라고 해요</p></div>
  <div class="tbl t4"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span class="lb">오전 9:30</span><span class="pink">낮아요</span><span class="green">길어요</span><span class="orange">낮아요</span></div><div class="tr"><span class="lb">낮 12:30</span><span class="pink">가장 높아요</span><span class="green">가장 짧아요</span><span class="orange">높아지는 중</span></div><div class="tr"><span class="lb">오후 14:30</span><span class="pink">낮아지는 중</span><span class="green">길어지는 중</span><span class="orange">가장 높아요</span></div></div>
  <div class="qt"><span class="kb">QUOTE</span><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="mono">— 오늘의 정리</span></div>
  <div class="badge b4">관계 정리</div>
  <div class="meta"><span>계절의 변화</span><span class="pg">04<i></i>06</span></div>
</section>
<section class="slide green-bg">
  <div class="topbar"><span>확인하기</span><span class="pill">00초등학교</span></div>
  <h2 class="hd hd3">배운 내용을 확인해 볼까요?</h2>
  <div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <span class="qb">QUIZ</span>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="opts"><button class="opt" data-opt="0"><b>A</b><span>오전 9시 30분</span></button><button class="opt" data-opt="1"><b>B</b><span>낮 12시 30분 무렵</span></button><button class="opt" data-opt="2"><b>C</b><span>오후 3시 30분</span></button></div>
    <p class="fb" data-fb></p>
    <button class="btn rt" data-act="retry">다시 풀기 ↺</button>
    <div class="stamp"><div><b>OK</b><span>참 잘했어요</span></div></div>
  </div>
  <div class="blk">
    <span class="kb">빈칸을 눌러 확인해요</span>
    <p class="bl"><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="bl"><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="bl"><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
    <span class="kb wl">오늘의 낱말</span>
    <div class="words"><span class="pink">태양 고도</span><span class="yellow">남중 고도</span><span class="orange">그림자 길이</span><span class="cream">기온</span></div>
  </div>
  <div class="meta"><span>빈칸 규칙 없음 → 4px 테두리 칸으로 표현</span><span class="pg">05<i></i>06</span></div>
</section>
<section class="slide">
  <div class="topbar"><span>디자인 안내</span><span class="pill">GUIDE</span></div>
  <i class="dash"></i>
  <h2 class="hd">이 디자인 사용 설명서</h2>
  <div class="tbl g6"><div class="tr r6"><span class="lb">한눈에</span><span>네오브루탈리즘 잡지 — <b>4px 잉크 테두리 + 흐림 없는 오프셋 그림자</b>, 크림 바탕에 초록·분홍·주황·노랑 평면을 장마다 2~3색만.</span></div><div class="tr r6"><span class="lb">색</span><span><span class="sw6"><span><i style="background:#EFE9D9"></i>크림</span><span><i style="background:#0F0F0F"></i>잉크</span><span><i style="background:#1F8A4C"></i>초록</span><span><i style="background:#F06CA8"></i>분홍</span><span><i style="background:#E85A1F"></i>주황</span><span><i style="background:#F5C518"></i>노랑</span></span></span></div><div class="tr r6"><span class="lb">글꼴</span><span>제목 Archivo Black → 프리텐다드 Pretendard-Black · 본문 Space Grotesk → Noto Sans KR Regular<br>라벨·상단줄·하단줄은 JetBrains Mono 24px</span></div><div class="tr r6"><span class="lb">이렇게 쓰면 좋아요</span><span>모둠 발표·캠페인 포스터 만들기처럼 힘 있는 수업. 24px 그림자는 장마다 주인공 하나에만.</span></div></div>
  <span class="kb sl6">대표 장치 — 눌러 보세요</span>
  <div class="d6 a"><div class="dh"><h3>토글 스위치 포스터</h3><button class="btn sm" data-demo="#cm-sw" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>분홍 판 위 크림 트랙과 초록 레버 — 표지의 상징이에요.</p><div class="sw6d" id="cm-sw"><i class="tk"></i><i class="lv"></i><span>OFF</span><span class="on">ON</span></div></div>
  <div class="d6 b"><div class="dh"><h3>하드 오프셋 그림자</h3><button class="btn sm" data-demo="#cm-sh" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>쌓인 블록은 잉크 18px, 장의 주인공 하나는 주황 24px.</p><div class="shd6"><div class="blk6" id="cm-sh">주인공</div></div></div>
  <div class="d6 c"><div class="dh"><h3>분홍 도장</h3><button class="btn sm" data-demo="#cm-st" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>-6° 기울어진 분홍 도장 안에 크림 원 — 정답을 맞히면 찍혀요.</p><div class="std6" id="cm-st"><div class="stamp st6"><div><b>OK</b><span>정답</span></div></div></div></div>
  <div class="meta"><span>00초등학교 · 2026</span><span class="pg">06<i></i>06</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/creative-mode.js"></script>
</body>
</html>
```

---

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

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

```css
/* creative-mode — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-18';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/pretendard/Pretendard-Black.woff2") format("woff2");font-weight:900}
@font-face{font-family:'kp-13';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/noto-sans-kr/NotoSansKR-Regular.woff2") format("woff2");font-weight:400}
/* === THEME === */
:root{--stage-bg:#EFE9D9;--slide-bg:#EFE9D9;
  --kt:'kp-18';--kb:'kp-13';--ka:'kp-13';
  --wt:900;--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{--cream:#EFE9D9;--cream2:#E4DCC4;--ink:#0F0F0F;--ink2:#2A2A2A;--green:#1F8A4C;--pink:#F06CA8;--orange:#E85A1F;--yellow:#F5C518;--bd:4px solid #0F0F0F}
.slide{background:var(--cream);color:var(--ink);font-family:'Space Grotesk',var(--kb),sans-serif;font-weight:var(--wb)}
.slide.green-bg{background:var(--green);color:var(--cream)}
.slide>*{position:absolute}
.mono,.topbar,.meta,.kb,.qb{font-family:'JetBrains Mono',var(--kb),monospace;font-weight:500;text-transform:uppercase}
.mono{font-size:24px;letter-spacing:.06em}
h3{font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}
.pink{background:var(--pink)}.yellow{background:var(--yellow)}.orange{background:var(--orange);color:var(--cream)}.green{background:var(--green);color:var(--cream)}.cream{background:var(--cream)}

/* --- 크롬: 상단줄(라벨 + 알약) · 하단줄(설명 + 01 ● 05) --- */
.topbar{left:64px;right:64px;top:48px;display:flex;justify-content:space-between;align-items:center;font-size:26px;letter-spacing:.08em}
.pill{border:2px solid currentColor;border-radius:999px;padding:6px 20px}
.meta{left:64px;right:260px;bottom:40px;display:flex;justify-content:space-between;align-items:center;gap:30px;font-size:22px;letter-spacing:.04em}
.meta>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg{display:flex;align-items:center;gap:14px;flex:none}
.pg i{width:10px;height:10px;border-radius:50%;background:currentColor}
.kb{display:inline-block;align-self:flex-start;background:var(--ink);color:var(--cream);font-size:24px;letter-spacing:.14em;padding:8px 16px}
.hd{left:96px;right:96px;top:150px;font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt);font-size:84px;line-height:1.1;letter-spacing:0;white-space:nowrap}
.hd3{top:120px}
.btns{display:flex;gap:24px}
.btn{border:var(--bd);background:var(--cream);color:var(--ink);padding:14px 30px;font:700 30px/1 'Space Grotesk',var(--kb),sans-serif}
.btn.go{background:var(--yellow)}
.btn:disabled{opacity:.35}
.badge{background:var(--yellow);color:var(--ink);border:var(--bd);padding:14px 28px;font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt);font-size:36px;transform:rotate(-4deg)}
.tbl{border:var(--bd);background:var(--cream2);color:var(--ink)}
.tr{display:grid}
.tr>span{border-left:3px solid var(--ink);padding:12px 18px;font-size:28px;line-height:1.35}
.tr>span:first-child{border-left:0}
.tr+.tr{border-top:3px solid var(--ink)}
.th{background:var(--ink);color:var(--cream)}
.th>span{border-color:var(--cream);font:400 24px/1.2 'Archivo Black',var(--kt),sans-serif}
.lb{font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt)}

/* --- 1. 표지: 킥커 + 학습 목표 + 단원(+ 초록 영문) | 토글 스위치 포스터(주황 24px 그림자) · 노랑 배지 -4° · 노랑 원 --- */
.k1{left:96px;top:190px}
.t1{left:90px;top:254px;font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt);font-size:104px;line-height:1.12;letter-spacing:0;white-space:nowrap}
.t1 .gk{font-style:normal}
.unit{left:96px;top:560px;font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt);font-size:72px;line-height:1.05}
.en{left:96px;top:660px;width:1100px;font:400 64px/.92 'Archivo Black',sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:var(--green)}
.poster{left:1340px;top:230px;width:440px;height:440px;background:var(--pink);border:var(--bd);box-shadow:24px 24px 0 var(--orange),24px 24px 0 4px var(--ink)}
.sw{position:absolute;left:70px;top:160px;width:300px;height:130px}
.sw .track{position:absolute;inset:0;background:var(--cream);border:var(--bd)}
.sw .lever{position:absolute;right:12px;top:-48px;width:120px;height:190px;background:var(--green);border:var(--bd);transform:skewX(-12deg);box-shadow:-14px 0 0 #136636}
.sw-lab{position:absolute;left:36px;bottom:30px;font:400 56px/.9 'Archivo Black',sans-serif}
.slide>.badge{left:1250px;top:170px}
.circ{left:1560px;top:770px;width:240px;height:190px;background:var(--green);border:var(--bd);display:grid;place-items:center}
.circ i{width:120px;height:120px;border-radius:50%;background:var(--yellow);border:var(--bd)}

/* --- 2. 흐름: 3px 점선 + 주인공 블록(크림2 + 주황 24px 그림자) 속 측정기 그림 + NOTE | 단계 카드 4장(켜지면 색, 삼각 화살표) + 버튼 --- */
.dash{left:96px;right:96px;top:124px;border-top:3px dashed var(--ink)}
.fig{left:96px;top:270px;width:820px;background:var(--cream2);border:var(--bd);box-shadow:24px 24px 0 var(--orange),24px 24px 0 4px var(--ink);padding:16px 28px 6px;
  --g-ink:var(--ink);--g-acc:var(--ink);--g-stick:var(--green);--g-board:var(--pink);--g-ruler:var(--cream);--g-prot:var(--yellow);--g-shadow:var(--ink);--g-font:'Space Grotesk',var(--kb),sans-serif;--g-sw:3}
.fig .g-lb{font-weight:700}
.note{left:96px;width:820px;top:860px;display:flex;align-items:center;gap:20px}
.note p{font-size:30px;font-weight:700;line-height:1.3}
.def{left:1010px;right:96px;top:262px;font-size:28px;line-height:1.45;font-weight:500}
.def b{font-weight:700}
.flow{left:1010px;right:96px;top:316px;display:flex;flex-direction:column;align-items:stretch}
.card{border:var(--bd);padding:10px 18px;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:var(--cream)}
.slide[data-step]:not([data-step="0"]) .card:not(.on){background:var(--cream);color:var(--ink);opacity:.45}
.num{font:400 72px/.85 'Archivo Black',sans-serif}
.card h3{font-size:36px;line-height:1.1}
.card p{margin-top:2px;font-size:26px;line-height:1.4;font-weight:500}
.arw{flex:none;align-self:center;width:0;height:0;margin:4px 0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:16px solid var(--ink)}
.slide[data-steps] .btns{left:1010px;top:860px}
.cap{left:1010px;right:96px;top:940px;font-size:26px;font-weight:500}

/* --- 3. 숫자와 그래프: 통계 칸 4개(초록·분홍·크림·주황, 4px) + 막대 차트(3px 테두리 노랑 막대, 가장 높은 막대 = 주황) + 표(그림자 · 기온) --- */
.stats{left:96px;right:96px;top:260px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stat{border:var(--bd);padding:20px 28px;display:flex;flex-direction:column;gap:6px}
.sn{font:400 76px/.95 'Archivo Black',var(--kt),sans-serif}
.stat p{font-size:26px;line-height:1.35;font-weight:500}
.chart{left:96px;right:96px;top:490px;display:flex;flex-direction:column;gap:6px}
.ct{font-size:22px}
.bars{height:250px;display:grid;grid-template-columns:280px repeat(7,1fr);align-items:end;border-bottom:3px solid var(--ink)}
.bars .ax{align-self:end;padding:0 0 10px 4px;font-size:22px;border-right:3px solid var(--ink);height:100%;display:flex;align-items:flex-end}
.col{padding:0 18px}
.col{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px;height:100%}
.col i{display:block;background:var(--yellow);border:3px solid var(--ink);border-bottom:0}
.col i.mx{background:var(--orange)}
.bv{text-align:center;font-size:24px}
.t3{left:96px;right:96px;top:780px}
.t3 .tr{grid-template-columns:280px repeat(7,1fr)}
.t3 .tr>span{padding:8px 14px;font-size:26px;text-align:center}
.t3 .tr>span:first-child{text-align:left;font-size:24px}

/* --- 4. 비교와 표: 통계 칸 둘(초록·분홍) + 마커 블록(분홍·주황 24px 그림자) / 표(머리 잉크, 열 = 분홍·초록·주황) + 인용 + 노랑 배지 --- */
.cmp{left:96px;width:1000px;top:250px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cc h3{margin:6px 0 6px;font-size:38px;line-height:1.1}
.cc p{font-size:28px;line-height:1.45}
.marker{left:1160px;right:120px;top:250px;background:var(--pink);border:var(--bd);box-shadow:24px 24px 0 var(--orange),24px 24px 0 4px var(--ink);padding:20px 26px;display:flex;flex-direction:column;gap:10px}
.marker p{font-size:28px;line-height:1.4;font-weight:700}
.t4{left:96px;width:1000px;top:570px}
.t4 .tr{grid-template-columns:1.2fr 1fr 1fr 1fr}
.qt{left:1160px;right:96px;top:610px;border:var(--bd);background:var(--cream2);padding:22px 26px;display:flex;flex-direction:column;gap:12px}
.qt p{font-family:'Archivo Black',var(--kt),sans-serif;font-weight:var(--wt);font-size:38px;line-height:1.25}
.slide>.badge.b4{left:1500px;top:560px}

/* --- 5. 확인하기(초록 마무리 장): 쌓인 블록 퀴즈(크림 + 18px 잉크 그림자, 노랑 QUIZ 배지 -4°, 정답 = 분홍 도장 -6°) | 빈칸(4px 칸) + 낱말 블록 --- */
.green-bg .kb{background:var(--cream);color:var(--ink)}
.quiz{left:96px;width:960px;top:250px;bottom:140px;background:var(--cream);color:var(--ink);border:var(--bd);box-shadow:18px 18px 0 var(--ink);padding:40px 40px 30px;display:flex;flex-direction:column}
.qb{position:absolute;right:30px;top:-30px;background:var(--yellow);border:var(--bd);padding:10px 22px;font:400 30px/1 'Archivo Black',sans-serif;transform:rotate(-4deg)}
.q{font-size:50px;line-height:1.15}
.opts{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.opt{display:flex;align-items:center;gap:20px;text-align:left;border:var(--bd);background:var(--cream);padding:10px 18px;font-size:34px;font-weight:700}
.opt b{flex:none;width:52px;height:52px;display:grid;place-items:center;background:var(--ink);color:var(--cream);font:400 28px/1 'Archivo Black',sans-serif}
.opt.right{background:var(--green);color:var(--cream)}
.opt.right b{background:var(--cream);color:var(--ink)}
.opt.wrong{background:var(--pink)}
.opt:disabled:not(.right){opacity:.4}
.fb{margin-top:18px;min-height:84px;font-size:30px;line-height:1.45;font-weight:500;padding-right:200px}
.rt{align-self:flex-start;margin-top:auto}
.stamp{position:absolute;right:-30px;bottom:-30px;width:220px;height:220px;background:var(--pink);border:4px solid var(--cream);outline:4px solid var(--ink);display:grid;place-items:center;transform:rotate(-6deg);visibility:hidden;pointer-events:none}
.stamp>div{width:170px;height:170px;border:4px solid var(--cream);border-radius:50%;display:grid;place-items:center;align-content:center;color:var(--ink);text-align:center}
.stamp b{font:400 64px/.9 'Archivo Black',sans-serif}
.stamp span{font:700 26px/1.2 var(--kb)}
.quiz.solved .stamp{visibility:visible}
.blk{left:1120px;right:96px;top:250px;bottom:140px;display:flex;flex-direction:column;gap:18px}
.bl{font-size:30px;line-height:1.55;font-weight:500}
.blank{position:relative;min-width:180px;margin-right:10px;padding:2px 14px;border:var(--bd);background:var(--cream);color:var(--ink);font:400 28px/1.3 'Archivo Black',var(--kt),sans-serif;text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--yellow)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{display:flex;flex-wrap:wrap;gap:14px}
.words span{border:var(--bd);padding:8px 18px;font:400 30px/1.2 'Archivo Black',var(--kt),sans-serif;color:var(--ink)}
.words span.orange{color:var(--cream)}

/* --- 내비: 오른쪽 아래 사각 화살표(하단줄 번호 오른쪽) --- */
.dk-nav{inset:0;pointer-events:none}
.dk-prev,.dk-next{position:absolute;bottom:26px;width:56px;height:56px;border:var(--bd);background:var(--cream);color:var(--ink);font:700 28px/1 var(--kb);pointer-events:auto}
.dk-prev{right:130px}.dk-next{right:64px}
.dk-prev:disabled,.dk-next:disabled{opacity:.25}
/* --- 6. 디자인 안내: 4px 테두리 표 | 4px 테두리 칸 시연 3개 --- */
.g6{left:96px;width:900px;top:290px}
.r6{grid-template-columns:200px 1fr}
.r6>span{font-size:25px;line-height:1.5;padding:16px 18px}
.r6 .lb{font-size:28px;background:var(--yellow)}
.r6:nth-child(2) .lb{background:var(--pink)}.r6:nth-child(3) .lb{background:var(--green);color:var(--cream)}.r6:nth-child(4) .lb{background:var(--orange);color:var(--cream)}
.r6 b{font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:-6px;border:3px solid var(--ink)}
.sl6{left:1060px;top:290px}
.d6{left:1060px;right:96px;height:200px;border:var(--bd);background:var(--cream2);padding:16px 24px}
.d6.a{top:340px}.d6.b{top:556px}.d6.c{top:772px;height:160px;padding-right:190px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:34px}
.d6 p{margin-top:4px;font-size:22px;line-height:1.4}
.btn.sm{font-size:20px;padding:8px 16px;border-width:3px}
.btn.sm[aria-pressed="true"]{background:var(--yellow)}
.sw6d{position:relative;margin-top:10px;width:300px;height:70px;background:var(--pink);border:3px solid var(--ink)}
.sw6d .tk{position:absolute;left:20px;right:80px;top:20px;height:30px;background:var(--cream);border:3px solid var(--ink)}
.sw6d .lv{position:absolute;left:20px;top:6px;width:50px;height:58px;background:var(--green);border:3px solid var(--ink);transform:skewX(-12deg)}
.sw6d.play .lv{left:150px}
.sw6d span{position:absolute;right:10px;top:20px;font:500 22px 'JetBrains Mono',monospace}
.sw6d .on,.sw6d.play span:not(.on){display:none}.sw6d.play .on{display:block}
.shd6{margin-top:12px;height:80px;display:flex;align-items:center}
.blk6{border:var(--bd);background:var(--pink);padding:12px 40px;font:400 30px 'Archivo Black',var(--kt),sans-serif;box-shadow:18px 18px 0 var(--ink)}
.blk6.play{box-shadow:24px 24px 0 var(--orange),24px 24px 0 4px var(--ink)}
.std6{position:absolute;right:40px;bottom:16px;width:130px;height:130px;pointer-events:none}
.std6 .st6{right:0;bottom:0;width:130px;height:130px}
.std6 .st6>div{width:96px;height:96px}
.std6 .st6 b{font-size:36px}.std6 .st6 span{font-size:18px}
.std6.play .st6{visibility:visible}

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