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

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

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

## 라이선스

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

- KCCMurukmuruk: KCCMurukmuruk — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: © 2017 Korea Copyright Commission. All rights reserved.
  파일: KCCMurukmuruk.ttf
- Cafe24 Oneprettynight: Cafe24 Oneprettynight — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright (c) 2020 by Cafe24. All rights reserved.
  파일: Cafe24Oneprettynight-v2.0.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/bold-poster.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/bold-poster.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 KCCMurukmuruk(400) · 본문 Cafe24 Oneprettynight(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. 디자인 규칙 (`bold-poster` design.md)

````markdown
---
version: alpha
name: Bold Poster
description: "A populist editorial poster system that mashes vintage Italian sports-magazine display lettering with classical serif body and tight monospace metadata. The display face is Shrikhand — a heavy slab/script hybrid with playful italic personality — rendered at poster scale (often 200-320px) and routinely tilted off-axis. Body runs Libre Baskerville for a literary editorial register; Space Grotesk handles tiny uppercase labels and chrome. The palette is uncompromising: white canvas, deep brown-black ink (#1C1410), single saturated tomato red (#D8000F), and a warm off-white (#F5F2EF) for alternating panels. Borders are bold 1.5-3px ink rules; the only shadow is a single stacked offset behind red display text. The aesthetic is loud, confident, and unmistakably print-poster — closer to a 1970s European brand annual report or a wine merchant's catalogue than a contemporary slide deck."

colors:
  bg: "#FFFFFF"
  dark: "#1C1410"
  red: "#D8000F"
  light: "#F5F2EF"

typography:
  hero-title:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(72px, 16vw, 220px)"
    lineHeight: 0.88
    letterSpacing: 1px
    color: "{colors.dark}"
  hero-title-red:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(84px, 18vw, 260px)"
    lineHeight: 0.85
    color: "{colors.red}"
    transform: "rotate(-4deg)"
  hero-title-bottom:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(64px, 14vw, 200px)"
    lineHeight: 0.9
    color: "{colors.dark}"
    transform: "rotate(2deg)"
  close-big:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(80px, 18vw, 260px)"
    lineHeight: 0.88
    color: "{colors.red}"
    transform: "rotate(-5deg)"
  stat-big:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(120px, 26vw, 320px)"
    lineHeight: 0.82
    color: "{colors.red}"
    transform: "rotate(-6deg)"
  red-quote:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(32px, 7vw, 90px)"
    lineHeight: 1.15
    color: "{colors.bg}"
    textShadow: "2px 2px 0 rgba(28,20,16,0.25), 4px 4px 0 rgba(28,20,16,0.2), 6px 6px 0 rgba(28,20,16,0.15)"
  section-header:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(32px, 5vw, 64px)"
    lineHeight: 1
    color: "{colors.dark}"
  section-header-lg:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(36px, 6vw, 72px)"
    lineHeight: 1
    color: "{colors.dark}"
  cell-number-lg:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(28px, 3.5vw, 52px)"
    lineHeight: 1
    color: "{colors.red}"
  cell-number-md:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(28px, 3.5vw, 48px)"
    lineHeight: 1
    color: "{colors.red}"
  card-title:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(22px, 3vw, 36px)"
    lineHeight: 1.1
    color: "{colors.dark}"
  card-title-sm:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(20px, 2.5vw, 32px)"
    lineHeight: 1.1
    color: "{colors.dark}"
  pillar-num:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(36px, 5vw, 64px)"
    lineHeight: 1
    color: "{colors.red}"
  pillar-title:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(18px, 2.2vw, 28px)"
    lineHeight: 1.15
    color: "{colors.dark}"
  stat-item-num:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(28px, 4vw, 56px)"
    lineHeight: 1
    color: "{colors.dark}"
  roadmap-title:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(18px, 2.5vw, 32px)"
    lineHeight: 1.1
  inline-stat:
    fontFamily: "'Shrikhand', cursive"
    fontWeight: 400
    fontSize: "clamp(18px, 2vw, 28px)"
    lineHeight: 1
    color: "{colors.red}"
  body:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(13px, 1.2vw, 16px)"
    lineHeight: 1.75
    color: "{colors.dark}"
  body-card:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(12px, 1.1vw, 14px)"
    lineHeight: 1.6
    color: "{colors.dark}"
  body-cell:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(11px, 1vw, 13px)"
    lineHeight: 1.55
    color: "{colors.dark}"
  body-small:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(11px, 1vw, 13px)"
    lineHeight: 1.5
    color: "{colors.dark}"
  hero-meta:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(11px, 1vw, 14px)"
    lineHeight: 1.5
    color: "{colors.dark}"
  tag-body:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(13px, 1.2vw, 16px)"
    lineHeight: 1.6
    color: "{colors.dark}"
  red-cite:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(13px, 1.3vw, 16px)"
    lineHeight: 1.5
    color: "{colors.bg}"
  close-sub:
    fontFamily: "'Libre Baskerville', serif"
    fontWeight: 400
    fontSize: "clamp(14px, 1.5vw, 18px)"
    lineHeight: 1.6
    color: "{colors.dark}"
  label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 600
    fontSize: 10px
    letterSpacing: 2px
    textTransform: uppercase
    color: "{colors.dark}"
  label-red:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 600
    fontSize: 10px
    letterSpacing: 2px
    textTransform: uppercase
    color: "{colors.red}"
  rm-label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 600
    fontSize: 9px
    letterSpacing: 3px
    textTransform: uppercase
    color: "{colors.red}"
  tag-label:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 600
    fontSize: "clamp(10px, 0.9vw, 12px)"
    letterSpacing: 3px
    textTransform: uppercase
    color: "{colors.red}"
  bullet-body:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 400
    fontSize: "clamp(10px, 0.9vw, 12px)"
    lineHeight: 1.45
    color: "{colors.dark}"
  counter:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 600
    fontSize: 11px
    lineHeight: 1
    letterSpacing: 2px
    textTransform: uppercase
    color: "{colors.dark}"
  link:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 600
    fontSize: "clamp(10px, 0.9vw, 12px)"
    letterSpacing: 2px
    textTransform: uppercase
    color: "{colors.dark}"
  fc-micro:
    fontFamily: "'Space Grotesk', sans-serif"
    fontWeight: 400
    fontSize: 10px
    lineHeight: 1.4
    color: "{colors.dark}"

spacing:
  pad-slide: "48px 56px"
  pad-cell: "22px 20px"
  pad-cell-sm: "20px 24px"
  pad-pillar: "32px 24px"
  pad-card: "24px"
  pad-roadmap: "40px 48px"
  gap-grid-md: "24px 32px"
  gap-grid-roadmap: "28px 36px"
  gap-grid-stats: "48px"
  gap-stat-row: "20px"
  pad-bottom-clearance: "40px"
  max-width-content: 1100px
  max-width-services: 1000px

canvas:
  width: 100vw
  height: 100vh
  background: "{colors.bg}"

components:
  progress-bar:
    position: "fixed, bottom 0 left 0"
    height: 5px
    background: "{colors.red}"
    description: "Persistent thick red progress strip at the bottom of the viewport. Width grows linearly with slide index. The system's most prominent piece of chrome."
  counter:
    position: "fixed, bottom 18px right 24px"
    color: "{colors.dark}"
    opacity: 0.5
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 11px
    letterSpacing: 2px
    description: "Persistent slide counter NN / NN at 50% opacity in Space Grotesk uppercase."
  hint-pill:
    position: "fixed, bottom 18px center"
    background: "{colors.light}"
    padding: "6px 14px"
    borderRadius: 4px
    fontSize: 10px
    opacity: 0
    description: "Bottom-center hint pill that fades to 50% opacity on body hover. Subtle wayfinding only."
  section-bordered-grid:
    border: "3px solid {colors.dark}"
    description: "Heavy 3px ink border enclosing a grid of cells. Each child cell carries a 1.5px ink inner border, producing a hairline-on-heavy double-border tabular grid. Used for financial-figure and summary-highlight grids."
  cell-bordered:
    border: "1.5px solid {colors.dark}"
    padding: "22px 20px"
    description: "Tabular cell with 1.5px ink border. Lives inside a 3px-bordered parent grid; the two border weights touch to produce the system's signature grid-with-double-edge."
  red-leftbar-card:
    borderLeft: "4px solid {colors.red}"
    paddingLeft: 18px
    description: "Service or content card marked by a 4px solid red left rule and 18px left padding. The system's editorial card pattern — no outline, just the red rule signaling the start of a block."
  red-leftbar-card-thin:
    borderLeft: "3px solid {colors.red}"
    paddingLeft: 16px
    description: "Thinner variant of the red-leftbar card used on dark surfaces (roadmap phases). Same pattern, scaled-down rule weight."
  bullet-em-dash:
    glyph: "—"
    color: "{colors.red}"
    fontWeight: 700
    paddingLeft: 14px
    description: "List bullet using a red em-dash (—) glyph in place of a disc. The dash sits at position absolute left and the body text indents to clear it."
  bullet-bullet:
    glyph: "•"
    color: "{colors.red}"
    paddingLeft: 12px
    description: "List bullet using a red round bullet (•) glyph. Same indent pattern as the em-dash variant."
  pillar-panel:
    flex: 1
    padding: "32px 24px"
    borderRight: "3px solid {colors.dark}"
    description: "Vertical column panel inside a multi-pillar layout. Each pillar separated by a 3px ink vertical rule. Alternating panels swap background from {colors.bg} to {colors.light} for striping."
  pillar-bullet-row:
    padding: "5px 0"
    borderBottom: "1px solid rgba(28, 20, 16, 0.08)"
    description: "Bullet row inside a pillar with a hairline-soft bottom border (ink at 8%) separating items. The last item drops the border."
  global-card:
    border: "2px solid {colors.dark}"
    padding: 24px
    description: "Bordered information card with 2px ink outline. Used on the global presence layout. Heavier than the leftbar pattern, more contained."
  stacked-text-shadow:
    textShadow: "2px 2px 0 rgba(28,20,16,0.25), 4px 4px 0 rgba(28,20,16,0.2), 6px 6px 0 rgba(28,20,16,0.15)"
    description: "Three-step decreasing-opacity stacked offset shadow in ink. Applied only to large red display text on red panels. The system's only shadow treatment."
  red-panel:
    background: "{colors.red}"
    color: "{colors.bg}"
    description: "Full-bleed saturated red panel surface. Carries white text with the stacked-text-shadow treatment on display."
  dark-panel:
    background: "{colors.dark}"
    color: "{colors.bg}"
    description: "Full-bleed deep brown-black panel surface. Carries white text and red accents (left bars, mono labels)."
  link-underline:
    color: "{colors.dark}"
    borderBottom: "2px solid {colors.red}"
    paddingBottom: 4px
    description: "Footer link style — Space Grotesk uppercase with a 2px red underline. Hover swaps text color to red."
  hero-title-stack:
    description: "A three-line stacked title where each line is a Shrikhand display element at a slightly different size. Two of the three lines carry rotation transforms (-4deg, +2deg) and one is set in red. The composition is the system's signature opener."
---

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

Bold Poster is a **populist editorial poster system** that lifts its visual vocabulary from vintage Italian sports magazines, mid-century European brand annual reports, and wine-merchant catalogues. The premise is that every slide should feel printed — set in heavy display type, locked to one strong red accent, on a white or off-white sheet, with grids ruled in ink and decoration kept to a strict minimum.

The type system is three faces working in tight roles. **Shrikhand** (Google Fonts) is the display face — a heavy slab/script hybrid with chunky italic terminals, narrow apertures, and a distinctly Italian-sports-script personality. Used at poster scale (often 100-320px) and almost always with playful rotation (-6° to +2°), Shrikhand carries every hero title, every section header, every stat figure, every card title. **Libre Baskerville** (Google Fonts) is the body face — a classical literary serif with strong stroke contrast that anchors the system in editorial register. Used at 11-16px with 1.5-1.75 line-height in deep ink, Libre Baskerville is what makes the system feel printed rather than digital. **Space Grotesk** (Google Fonts) is the chrome face — used exclusively for tiny uppercase labels (9-12px, 2-3px tracking), bullet body inside cards, slide counters, and footer links. The Space Grotesk treatment is the system's "metadata" voice.

The color philosophy is **uncompromising restraint**: white canvas, deep brown-black ink (`{colors.dark}` — `#1C1410`), single saturated tomato red (`{colors.red}` — `#D8000F`), and a warm off-white (`{colors.light}` — `#F5F2EF`) for alternating panels. There are no secondary brand colors, no gradients (except the inside of the stacked text-shadow), no tints, no semantic state colors. Every numerical callout, every active rule, every CTA, every emphasis moment is red — and red is reserved for these moments only (it is never used as body text, never as fill on a card without text on top, never as a tint).

Depth is **structural, not atmospheric**. The system has no drop shadows except a single stacked text-shadow applied to red display text on red panels (three steps at 2/2, 4/4, 6/6 in decreasing-opacity ink). All other depth comes from heavy borders: 3px ink outlines on tabular grids, 1.5-2px ink borders on cells, 4px red left rules on editorial cards, 1px hairline rules between bullet items. The double-border treatment (3px outer + 1.5px inner) is the system's signature tabular pattern — it produces a printed-newsprint quality that defines the look.

**Density philosophy: high — populist and packed.** This system reads as authoritative when slides are dense and timid when sparse. Roadmap, pillar, and financial slides routinely carry 3-6 distinct cells with body paragraphs, bullet lists, and tabular data — and they read as energetic, not crowded. Conversely, hero, closing, and statement slides intentionally drop to one or two huge display elements with massive negative space — the very-low and very-high density polarities are both deliberate. A typical content slide carries a section header + a grid of 3-6 cells, each holding a red numerical/title + a Libre Baskerville body paragraph + 3-6 Space Grotesk mono bullets. A typical statement slide carries one rotated red Shrikhand element occupying half the canvas with a single tagline below.

**Key Characteristics:**
- White (`{colors.bg}`) canvas alternating with off-white (`{colors.light}`) panels for striping, plus dark (`{colors.dark}`) and red (`{colors.red}`) full-bleed panel surfaces for statement moments.
- Single tomato red (`{colors.red}`) as the only accent — used for every numerical figure, every section rule, every label, every left-bar marker.
- Three-face stack: Shrikhand (display + numerical), Libre Baskerville (body), Space Grotesk (mono labels + bullets + chrome).
- Display Shrikhand is routinely tilted (-6° to +2°) — the rotation is the system's signature movement.
- Heavy ink borders: 3px on tabular grid containers, 1.5-2px on cells, 4px red on editorial leftbar cards, 1px hairlines between bullet rows.
- Stacked text-shadow (three steps at 2/2, 4/4, 6/6 in decreasing ink opacity) on red display elements — the only shadow in the system.
- Persistent red progress bar (5px thick) at the bottom edge of every slide.
- Em-dash and bullet glyphs in red as list markers — never default disc bullets.
- Hero compositions stack three Shrikhand lines at varying sizes with at least one in red and at least one tilted.
- Footer links use Space Grotesk uppercase with a 2px red underline.

## Colors

### Palette

- **Bg** (`{colors.bg}` — `#FFFFFF`): Pure white canvas. The default ground for most surfaces. Reads as fresh newsprint paper.
- **Dark** (`{colors.dark}` — `#1C1410`): A deep brown-black with warm bias — not pure black. Used for every line of body text, every border, every Space Grotesk label, every Libre Baskerville paragraph, and as a full-bleed panel ground on roadmap-class surfaces. The warmth distinguishes it from generic editorial black.
- **Red** (`{colors.red}` — `#D8000F`): Saturated tomato red. The system's single accent. Used for every numerical figure (Shrikhand red numerals are the most common element), every section eyebrow label, every leftbar rule on editorial cards, every list bullet glyph, every footer link underline, the persistent progress bar, and as a full-bleed panel ground on statement-class surfaces. Never used as body text color, never as a tint, never as a card fill without overlaid text.
- **Light** (`{colors.light}` — `#F5F2EF`): Warm off-white. Used for alternating panel backgrounds inside pillar layouts (every other pillar swaps to off-white for vertical striping) and as the background of the hint-pill chrome. Subtly warmer than the white canvas — creates surface differentiation without disrupting the printed-paper register.

### Defaults

- **Default surface background**: `{colors.bg}` (white). For statement moments, switch to `{colors.red}` (full-bleed red panel). For roadmap-class moments, switch to `{colors.dark}`. For striping inside a pillar layout, alternate `{colors.bg}` and `{colors.light}`.
- **Default headline / display color on white surfaces**: `{colors.dark}` for primary headlines, `{colors.red}` for numerical figures and stat-class display elements.
- **Default headline color on red panels**: `{colors.bg}` (white) with the stacked text-shadow treatment.
- **Default headline color on dark panels**: `{colors.bg}` (white). Numerical accents stay `{colors.red}`.
- **Default body text color**: `{colors.dark}` on white/light surfaces, `{colors.bg}` (white) on dark/red surfaces with opacity 0.5-0.8 for tertiary content.
- **Default eyebrow / label color**: `{colors.red}` on white surfaces (red Space Grotesk uppercase at 2-3px tracking), `{colors.dark}` for the smaller cell labels inside grids.
- **Default leftbar rule color**: `{colors.red}`. The 4px (or 3px on dark surfaces) red left rule is the editorial card signature.
- **Default border color for cells and grids**: `{colors.dark}`. There are no colored cell borders.
- **Default bullet glyph color**: `{colors.red}`. Default disc bullets do not exist in this system; every list uses red em-dash or red round-bullet glyphs.

The system commits **hard** to the four-color palette. Don't introduce a fifth color (green for positive, blue for info, yellow for highlight). All emphasis is achieved by red, all body is dark on light, all inversion is white on red or white on dark. Categorical differentiation comes from positioning, label, and tilt — never from color.

## Typography

### Font Family Stack
The system runs three faces, each tightly bound to its role.

**Shrikhand** (Google Fonts) is the display + numerical face. It's a single-weight (400) heavy slab-script with playful italic-leaning forms and narrow apertures — a face that reads as both old-world (postcard-script) and contemporary (variable-weight digital display). Used at every scale from 18px (inline stats) to 320px (the hero stat). Always weight 400 (the face has no other weights). Rotation is part of the face's voice — multiple Shrikhand elements per slide carry transforms ranging from -6° to +2°.

**Libre Baskerville** (Google Fonts, 400 / 700 + italic) is the body face. A classical literary serif with high stroke contrast — used for every paragraph, every body cell, every metadata line, every cite, every close-sub. Set at 11-16px with 1.5-1.75 line-height, the face reads as comfortably editorial. The face's italic and bold weights are loaded but used sparingly — italic exists for inline emphasis, bold weight 700 is rarely needed since Shrikhand already handles all the heavy display work.

**Space Grotesk** (Google Fonts, weights 400-700) is the metadata + chrome face. Used at 9-12px in uppercase with 2-3px letter-spacing for labels, eyebrows, slide counters, link text, card bullet bodies (when not using Libre Baskerville), and progress chrome. The wide-tracked uppercase treatment is the system's "stamped metadata" voice.

The roles are non-overlapping: Shrikhand handles every display moment and every numerical figure; Libre Baskerville handles every body paragraph and editorial text; Space Grotesk handles every uppercase label, bullet, and chrome element. Don't cross — Shrikhand body would be illegible; Libre Baskerville labels would look like book footnotes; Space Grotesk headlines would feel like a tech startup.

### Typography Scale

| Token | Size (clamp / px) | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.stat-big}` | 120–320px clamp | Shrikhand | 400 | Hero-class stat figure (always rotated -6°, always red) |
| `{typography.hero-title-red}` | 84–260px clamp | Shrikhand | 400 | Red word in a multi-line hero stack (always rotated -4°) |
| `{typography.close-big}` | 80–260px clamp | Shrikhand | 400 | Closing-statement title (always rotated -5°, always red) |
| `{typography.hero-title}` | 72–220px clamp | Shrikhand | 400 | Top line of a hero stack (default no rotation) |
| `{typography.hero-title-bottom}` | 64–200px clamp | Shrikhand | 400 | Bottom line of a hero stack (always rotated +2°) |
| `{typography.section-header-lg}` | 36–72px clamp | Shrikhand | 400 | Large section header for financial / dense-data slides |
| `{typography.section-header}` | 32–64px clamp | Shrikhand | 400 | Standard section header (summary, services, global, close) |
| `{typography.pillar-num}` | 36–64px clamp | Shrikhand | 400 | Numeral atop a pillar panel (red) |
| `{typography.cell-number-lg}` / `{typography.cell-number-md}` | 28–52px clamp | Shrikhand | 400 | Tabular cell numerical figure (always red) |
| `{typography.stat-item-num}` | 28–56px clamp | Shrikhand | 400 | Inline supplementary stat numeral (dark color) |
| `{typography.card-title}` | 22–36px clamp | Shrikhand | 400 | Service card title or global card title |
| `{typography.card-title-sm}` | 20–32px clamp | Shrikhand | 400 | Smaller card title (global cards) |
| `{typography.pillar-title}` | 18–28px clamp | Shrikhand | 400 | Pillar panel title |
| `{typography.roadmap-title}` | 18–32px clamp | Shrikhand | 400 | Roadmap phase title (white on dark surface) |
| `{typography.red-quote}` | 32–90px clamp | Shrikhand | 400 | Quote body on a red panel (white text + stacked shadow) |
| `{typography.inline-stat}` | 18–28px clamp | Shrikhand | 400 | Inline mini-stat number (red) inside a body block |
| `{typography.body}` | 13–16px clamp | Libre Baskerville | 400 | Standard body paragraph |
| `{typography.body-card}` | 12–14px clamp | Libre Baskerville | 400 | Card body inside service/global cards |
| `{typography.body-cell}` | 11–13px clamp | Libre Baskerville | 400 | Tabular cell body inside grids |
| `{typography.body-small}` | 11–13px clamp | Libre Baskerville | 400 | Small body for summary highlights |
| `{typography.hero-meta}` | 11–14px clamp | Libre Baskerville | 400 | Hero meta line above the title stack |
| `{typography.red-cite}` | 13–16px clamp | Libre Baskerville | 400 | Citation under a red-panel quote (white text) |
| `{typography.close-sub}` | 14–18px clamp | Libre Baskerville | 400 | Subtitle / contact line under a closing title |
| `{typography.label-red}` / `{typography.tag-label}` | 10–12px | Space Grotesk | 600 | Section label (uppercase, 2-3px tracking, red) |
| `{typography.label}` | 10px | Space Grotesk | 600 | Cell label inside grids (uppercase, 2px tracking, dark) |
| `{typography.rm-label}` | 9px | Space Grotesk | 600 | Roadmap phase label (uppercase, 3px tracking, red) |
| `{typography.bullet-body}` | 10–12px clamp | Space Grotesk | 400 | List bullet body inside cards and pillars |
| `{typography.counter}` | 11px | Space Grotesk | 600 | Persistent slide counter |
| `{typography.link}` | 10–12px clamp | Space Grotesk | 600 | Footer / closing link text (uppercase, 2px tracking) |
| `{typography.fc-micro}` | 10px | Space Grotesk | 400 | Tiny micro-context line at the bottom of a tabular cell |

### Defaults

- **Default size for a hero or cover title**: `{typography.hero-title}` (72–220px) at the top of a stack, paired with `{typography.hero-title-red}` (84–260px, red, rotated -4°) on a second line and `{typography.hero-title-bottom}` (64–200px, rotated +2°) on a third line. The three-line stacked composition is the system's standard hero pattern.
- **Default size for a primary section headline**: `{typography.section-header}` (32–64px). Always Shrikhand.
- **Default size for a hero-class statistic**: `{typography.stat-big}` (120–320px) rotated -6°, always red.
- **Default size for a tabular cell numeral**: `{typography.cell-number-md}` (28–52px) in red.
- **Default size for body**: `{typography.body}` (13–16px) Libre Baskerville at line-height 1.75.
- **Default size for a card body**: `{typography.body-card}` (12–14px) at line-height 1.6.
- **Default size for a section eyebrow label**: `{typography.tag-label}` (10–12px) Space Grotesk weight 600 in red, uppercase, with 2-3px letter-spacing.
- **Default size for a list bullet body**: `{typography.bullet-body}` (10–12px) Space Grotesk weight 400.
- **Default weight for Shrikhand**: 400 — the face has no other weights.
- **Default weight for Libre Baskerville body**: 400. Bold (700) is used only for inline emphasis inside body paragraphs.
- **Default weight for Space Grotesk labels**: 600. Wide tracking is the system's label voice; weight 400 is for bullet bodies only.

When unsure which display token to reach for, default to `{typography.section-header}` (32–64px) for a primary slide section opener. Reserve `{typography.stat-big}` for hero-stat moments and `{typography.hero-title}` triples for cover-class surfaces.

### Signature Treatments

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

- **Every hero-class Shrikhand element is part of a multi-line stacked composition with at least one rotated line and at least one red line.** A single-line Shrikhand hero title without rotation or color contrast collapses into a generic display moment.
- **Every tabular numerical cell figure is Shrikhand at the cell-number scale (28–52px) in `{colors.red}`.** Numerical cells in dark text break the system's hierarchy — red is the data signal.
- **Every section eyebrow is Space Grotesk weight 600 in `{colors.red}`, uppercase, with 2-3px letter-spacing.** No exceptions. Eyebrows at any other tracking, weight, color, or case are not the system's eyebrow.
- **Every statement-class Shrikhand element (stat-big, close-big) is rotated -5° to -6° in `{colors.red}`.** Untilted red Shrikhand at hero scale looks like a misplaced word — the tilt is the system's "movement" signal.
- **Every red-panel display element carries the stacked text-shadow** (`2px 2px 0 rgba(28,20,16,0.25), 4px 4px 0 rgba(28,20,16,0.2), 6px 6px 0 rgba(28,20,16,0.15)`). Without the shadow, white Shrikhand on red reads as floating; with it, the text feels printed-and-pressed into the panel.
- **Every list bullet uses a `{colors.red}` em-dash (—) or round-bullet (•) glyph** at position absolute left with a 12-14px padding-left on the body. Default disc bullets do not exist; the red marker is the system's list signal.
- **Every Libre Baskerville body is at line-height ≥ 1.5 (preferably 1.6-1.75).** Tighter line-height collapses the editorial register.
- **Every body strong (`<strong>`) inside a Libre Baskerville paragraph switches face to Space Grotesk weight 600.** The inline face-switch is the system's primary inline emphasis mechanism — a serif strong tag does not produce the same effect.

### Typography Principles

The voice contrast is **chunky tilted display Shrikhand ↔ literary serif body ↔ wide-tracked mono labels**. Italic is rare (Libre Baskerville italic exists but is used only for inline emphasis inside body); underline is reserved for the red-underline footer link treatment. Bold within Libre Baskerville body is replaced by an inline face-switch to Space Grotesk weight 600 — the change-of-face is the emphasis signal.

Numerical content (stat figures, financial values, percentage callouts, mini-stats) is always Shrikhand in red. Even small inline stats inside body cells become red Shrikhand. The numerical-as-display pattern is what gives the system its sports-magazine register.

## Layout

### Canvas System
The system targets `100vw × 100vh` per slide. Slides are absolutely positioned and animate in via opacity + translateY (30px) + scale (0.98 → 1) on 550ms ease. Only one slide is `.active` at a time. Default slide padding is `48px 56px` with major variations:
- Hero slides: `5vh 7vw` top-padding, alignment shifted to top-left.
- Roadmap slides: `40px 48px` to accommodate the dense two-column grid.
- Pillars slides: `0` (the pillar columns provide their own internal padding).

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-slide}` | 48px 56px | Default slide padding |
| `{spacing.pad-cell}` | 22px 20px | Tabular cell internal padding (financial grid) |
| `{spacing.pad-cell-sm}` | 20px 24px | Summary highlight cell padding |
| `{spacing.pad-pillar}` | 32px 24px | Pillar column padding |
| `{spacing.pad-card}` | 24px | Global card padding |
| `{spacing.pad-roadmap}` | 40px 48px | Roadmap surface padding |
| `{spacing.gap-grid-md}` | 24px 32px | Standard service/global grid gap (row × col) |
| `{spacing.gap-grid-roadmap}` | 28px 36px | Roadmap two-column grid gap |
| `{spacing.gap-grid-stats}` | 48px | Big stat row gap |
| `{spacing.gap-stat-row}` | 20px | Vertical gap within a stat-item stack |

### Persistent Chrome
Three elements appear on every slide:
- **Progress bar** at the bottom edge — a 5px thick `{colors.red}` strip that grows in width with slide index. The thickest, most visible piece of chrome; it functions as both progress indicator and bottom-edge poster trim.
- **Slide counter** at bottom-right (`bottom: 18px right: 24px`) — Space Grotesk weight 600 uppercase NN / NN at 50% opacity.
- **Hint pill** at bottom-center — Space Grotesk uppercase text in an off-white pill, opacity 0 by default, fading to 50% on `body:hover`.

### Surface Variations
The deck cycles through five surface treatments:
- **White content surfaces** — default, most slides.
- **Off-white striped panels** — inside pillar layouts, alternating columns get `{colors.light}` background for vertical striping.
- **Full-bleed red panel** — statement / quote slides flood the canvas in `{colors.red}` with white display text and the stacked text-shadow.
- **Full-bleed dark panel** — roadmap-class surfaces use `{colors.dark}` ground with white text and red accents.
- **Bordered tabular grids** — financial-figure and summary-highlight grids carry a 3px ink outer border + 1.5px ink inner cell borders, producing the system's signature double-border tabular composition.

### Hero Stack Composition
The standard cover/hero pattern is a **three-line Shrikhand stack** where each line carries a different size and at least one carries rotation and at least one is in red. The stack reads top-left → bottom-right, with the smallest line at the bottom and the boldest red rotation in the middle. The composition is the system's most distinctive opener.

## Depth and Elevation

### No Cards, No Shadows (Mostly)
The system uses **almost no box-shadows**. Cards do not float off the surface via shadow. Depth comes from:
- **Heavy borders** (3px outer + 1.5px inner double-border on tabular grids; 2px solid borders on global cards; 4px red left rules on editorial leftbar cards).
- **Surface inversion** (full-bleed red or dark panels switch the entire surface).
- **Tilted display elements** that break the grid alignment.

### The Single Shadow Pattern (Stacked Text Shadow)
The only shadow in the entire system is the **stacked text-shadow on red display text on red panels**: three steps at 2/2, 4/4, 6/6 with decreasing-opacity ink fill (0.25, 0.20, 0.15). The shadow is applied via `text-shadow:` not `box-shadow:`. The effect is a printed-press feel — the text reads as having been stamped slightly off-register, three times. This treatment appears only on the red-quote and certain rotated Shrikhand display moments on red panels.

### Border-as-Depth (Tabular Grid Signature)
The financial-grid and summary-highlight-grid patterns use a **3px solid ink outer border** with **1.5px solid ink inner cell borders** — the two border weights touch at every cell intersection, producing a printed-newsprint quality. This is the system's primary structural depth mechanism on data-heavy surfaces.

### Leftbar Rules
Editorial cards (service cards, roadmap phases, global cards) are marked by a **4px (or 3px on dark surfaces) red solid left border** with 16-18px padding-left. The leftbar rule signals "this is a card" without enclosing it — the card reads as cantilevered off the red rule. This is the system's most common card pattern.

### Tilt as Depth
Rotated Shrikhand display elements break the horizontal baseline and create perceived dimensionality without using perspective. The standard rotations are -6° (stat-big), -5° (close-big), -4° (hero-title-red), +2° (hero-title-bottom). These tilts are part of the system's spatial language.

## Shapes and Treatment

### Border Radius
- **0px** on everything except the hint-pill (4px) and the bar-track elements (none in this template, but if used should be 0px). Every card, every cell, every panel, every callout is a strict rectangle.
- **4px** on the hint-pill only — a minor concession for the floating chrome.

The square-corner discipline is essential. Rounded cards immediately collapse the printed-poster feel into generic web aesthetic.

### Border Weights
- **5px solid `{colors.red}`** — used only on the persistent progress bar.
- **4px solid `{colors.red}`** — used on the editorial leftbar card (service cards on white surfaces).
- **3px solid `{colors.dark}`** — used on the outer border of tabular grids (financial-grid, summary-highlights) and as the vertical pillar separator.
- **3px solid `{colors.red}`** — used on the leftbar of roadmap phase cards (on dark surfaces).
- **2px solid `{colors.red}`** — used as the underline rule on footer links.
- **2px solid `{colors.dark}`** — used as the outline border on global cards.
- **1.5px solid `{colors.dark}`** — used on inner cells of tabular grids.
- **1px solid `rgba(28, 20, 16, 0.08)`** — hairline-soft separator between bullet rows inside pillar panels.

The border ladder (1px-soft / 1.5px / 2px / 3px / 4px / 5px) is fixed. Every border is solid; dashed and dotted borders do not exist.

### Decorative Element Types

**Hero title stack** — A three-line Shrikhand composition at varying sizes with rotation and color contrast. The system's signature opener.

**Red panel** — Full-bleed `{colors.red}` ground with white display text carrying the stacked text-shadow. Used for statement / quote moments.

**Dark panel** — Full-bleed `{colors.dark}` ground with white text and red accents. Used for roadmap-class dense-data surfaces.

**Tabular bordered grid** — 3px ink outer border + 1.5px ink inner cell borders producing a double-border tabular composition. Each cell holds a Shrikhand red numeral + Space Grotesk uppercase label + Libre Baskerville body paragraph + optional Space Grotesk micro line at bottom.

**Red leftbar card** — A 4px solid red left rule with 18px left padding holding a Shrikhand card title + Libre Baskerville body + Space Grotesk red-bullet list. The system's primary editorial card pattern.

**Pillar panel** — A vertical column inside a multi-pillar layout, separated by 3px ink vertical rules and alternating between white and off-white backgrounds. Each pillar holds a Shrikhand red numeral, Shrikhand title, Libre Baskerville lead, and Space Grotesk bullets separated by 1px hairline-soft rules.

**Global card** — A 2px solid ink-bordered card with 24px padding holding a Space Grotesk red label + Shrikhand title + Libre Baskerville body + inline gc-stats row. Used on the global-presence surface.

**Em-dash bullet** — A red em-dash glyph at position absolute left with 14px padding-left on the body. The system's primary list marker.

**Round bullet** — A red round-bullet glyph at position absolute left with 12px padding-left on the body. Secondary list marker, used in card and pillar bullets.

**Footer link** — Space Grotesk uppercase text with a 2px red underline and 4px padding-bottom. Hover swaps text color to red.

**Stacked text shadow** — Three-step decreasing-opacity ink shadow applied to red display text on red panels. The system's only shadow treatment.

**Tilted display** — Shrikhand elements rotated -6° to +2°. Used on hero-title-red, stat-big, close-big, and hero-title-bottom.

## Do's and Don'ts

### Do

- Apply `{colors.bg}` (white) as the default canvas on most surfaces. Switch to `{colors.red}` for statement slides, `{colors.dark}` for dense-data slides, and alternate `{colors.bg}` / `{colors.light}` for vertical pillar striping.
- Set every hero-class title as a multi-line Shrikhand stack with at least one rotated line and at least one red line. The composed-stack is the system's opener signature.
- Use Shrikhand at every numerical-callout moment in `{colors.red}` — tabular cells, summary highlights, pillar numbers, inline mini-stats. Red Shrikhand numerals are the system's data voice.
- Set every section eyebrow in Space Grotesk weight 600 uppercase with 2-3px letter-spacing in `{colors.red}`. The wide-tracked red label is the universal section opener.
- Apply the stacked text-shadow to red display text on red panels. The three-step decreasing-opacity ink shadow is the system's only shadow and creates the printed-press feel.
- Use the 4px red leftbar pattern (`{components.red-leftbar-card}`) for editorial cards. The cantilevered-off-the-rule treatment is the system's primary card pattern.
- Build tabular grids with the double-border treatment: 3px ink outer border + 1.5px ink inner cell borders touching at intersections.
- Render every list bullet with a red em-dash (`{components.bullet-em-dash}`) or red round-bullet (`{components.bullet-bullet}`) at position absolute left. Default disc bullets are forbidden.
- Tilt Shrikhand statement elements (-5° to -6°) to create the system's signature movement. Untilted red statement display reads as misplaced.
- Use Libre Baskerville at line-height 1.5-1.75 in `{colors.dark}` for every body paragraph. The literary editorial body is what makes the system feel printed.

### Don't

- Don't introduce a second accent color. Red is the only accent — green for positive, blue for info, yellow for highlight all break the single-accent discipline.
- Don't round any corner on cards, panels, cells, or callouts. Square corners are non-negotiable; the only exception is the 4px hint-pill chrome.
- Don't add drop shadows or blurred shadows. The system has zero box-shadows; the only shadow is the stacked text-shadow on red display text.
- Don't substitute fonts. Shrikhand + Libre Baskerville + Space Grotesk is the trio. Replacing Shrikhand with any other display face collapses the entire identity.
- Don't use Shrikhand for body or Libre Baskerville for labels. The three-face role discipline is non-negotiable.
- Don't use default bullet points or disc list markers. Lists always use red em-dash or red round-bullet glyphs at position absolute left.
- Don't omit the tilt on hero-class red Shrikhand elements. The rotation is the system's signature movement; untilted red display reads as flat.
- Don't render headlines in red on white surfaces (except for stat-big, close-big, hero-title-red — the rotated statement elements). Most section headers are `{colors.dark}` Shrikhand, not red.
- Don't tighten Libre Baskerville body line-height below 1.5. Tight body line-height collapses the literary register into something cramped.
- Don't crowd a statement slide with cards or structural content. Statement surfaces (red panel, stat slide, close slide) deliberately reserve massive negative space around a single rotated red display element.

## Responsive Behavior

Bold Poster is designed as a **1920×1080 presentation system**. Sizing uses CSS `clamp()` with `vw`-based mid values for display type, fixed `px` for borders and chrome, and `rem`-adjacent fixed values for cell padding. The system has a single responsive breakpoint at 768px for narrow viewports.

### Scaling Behavior
- Hero stat scales 120px → 320px on viewport width.
- Hero titles scale 64px → 260px.
- Section headers scale 32px → 72px.
- Body scales 11px → 16px.
- Borders (1px-soft / 1.5px / 2px / 3px / 4px / 5px) and rotation transforms are fixed and do not scale.

### Mobile Breakpoint (max-width: 768px)
A single `@media (max-width: 768px)` block restructures dense layouts for narrow viewports:
- Slide padding shrinks from 48px × 56px to 32px × 24px.
- Summary columns collapse from 2 → 1.
- Summary highlights grid collapses from 3 → 1.
- Financial grid collapses from 3 → 2.
- Service grid collapses from 2 → 1.
- Roadmap grid collapses from 2 → 1.
- Pillars switch from horizontal flex-row to vertical flex-column; vertical separators become horizontal bottom borders.
- Global grid collapses from 2 → 1.
- Stat row stacks vertically.
- Hero tagline shifts from absolute-positioned bottom-right to relative-positioned below the hero title stack.

The system is functional but not optimized for sub-768px portrait usage — it's designed for landscape presentation contexts.

### Presenter Behavior
- Slides advance via `ArrowRight`, `ArrowDown`, `Space`, `Enter`, or `PageDown`.
- Slides reverse via `ArrowLeft`, `ArrowUp`, or `PageUp`.
- Click on the right half of the viewport advances; click on the left half reverses.
- Horizontal touch swipe with a 50px threshold advances/reverses.
- Slide transitions are 550ms cubic-bezier `(0.22, 1, 0.36, 1)` with combined opacity, translateY (30px), and scale (0.98 → 1).
- Progress bar at bottom edge animates to current slide percentage with a 500ms cubic-bezier ease.

### Print Behavior
The system has no `@media print` rule. The transition is screen-only. For static export, screenshots of each slide preserve all rotation transforms and the stacked text-shadow (both are pure CSS).

### Interactive States
- Footer links swap text color from `{colors.dark}` to `{colors.red}` on hover.
- The hint-pill fades from opacity 0 to 0.5 on `body:hover` via a 400ms ease.

## CJK & International Content

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

### Recommended Chinese Pairing

| Role | Latin (default) | Chinese counterpart |
|---|---|---|
| Display / hero / stat / section header / numerical figures / card titles | Shrikhand 400 (heavy slab-script, rotated) | 思源宋体 Noto Serif SC 900 |
| Body / body-card / body-cell / hero-meta / cite / close-sub | Libre Baskerville 400 (literary serif) | 思源宋体 Noto Serif SC 400 |
| Label / bullet body / counter / link / micro chrome | Space Grotesk 400–600 (uppercase, 2–3px tracking) | 思源黑体 Noto Sans SC 500 (no transform, no tracking) |

### Mixed-Content Strategy

**Strategy A** — single CJK family per role with Latin glyph coverage built in. Use **思源宋体 Noto Serif SC** for both display and body (weight 900 for display, weight 400 for body — visual hierarchy comes from weight, size, color, and rotation, not face contrast). Use **思源黑体 Noto Sans SC** weight 500 for the small uppercase chrome (labels, bullet bodies, counter, links). 思源宋体 ships Latin glyphs that pair cleanly with Chinese characters; for mixed display moments, 思源宋体 weight 900 will render both 中文 and Latin in the same heavy serif voice.

### Loading

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

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

### Universal CJK Adjustments

- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (already close to Libre Baskerville 1.75; keep at 1.8 for CJK), display 1.1–1.25 (up from the very tight 0.82–0.9 used on Shrikhand). Display at 0.82 collides vertically in CJK; open to 1.0 minimum.
- **Letter-spacing**: set to 0 on every CJK run. The template's 1px positive tracking on hero-title and the 2–3px tracking on Space Grotesk labels both read as gappy on square CJK glyphs.
- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every Space Grotesk label, tag-label, rm-label, counter, and link uses `text-transform: uppercase` in the Latin original; remove for CJK runs.
- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））.
- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines.
- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `1970 米兰式海报` not `1970米兰式海报`.
- **One font per sentence**: 思源宋体 covers both CJK and Latin glyphs in a unified serif style — let it handle mixed sentences in display and body. Don't let the browser fall back to Shrikhand or Libre Baskerville mid-word for ASCII characters.

### Aesthetic Notes for This System

The system's identity rests on **Shrikhand's chunky slab-script personality + rotation + saturated red**. Shrikhand is the most distinctive single decision in this template — and it has no Chinese equivalent. 思源宋体 weight 900 carries weight and editorial register but loses the playful italic-leaning slab character entirely. Compensate by **leaning harder on the non-typographic signatures**: keep all rotations intact (-6° on stat-big, -5° on close-big, -4° on hero-title-red, +2° on hero-title-bottom), keep the stacked text-shadow on red-panel display, keep the saturated tomato red as the only accent, keep the 3px + 1.5px double-border tabular grids, keep the red leftbar cards, keep the red em-dash bullet markers. The rotation, red, and printed-newsprint structural language survive the face swap.

The system's three-face role discipline (Shrikhand display / Libre Baskerville body / Space Grotesk chrome) collapses to a two-face system in CJK: 思源宋体 for everything Latin-serif, 思源黑体 for everything Latin-mono. The body-vs-display contrast becomes pure weight (400 vs 900) plus color (dark vs red). For inline `<strong>` emphasis inside body, switch from 思源宋体 400 to 思源黑体 600 — the change-of-face is what signals emphasis in the Latin original, and the serif-to-sans swap preserves the same logic in CJK.

### Known CJK Gap

- **No exact online CJK match for Shrikhand's slab-script personality.** The face is Italian-sports-magazine display script with chunky terminals and playful italic forms — there is no Chinese equivalent on Google Fonts, Adobe Fonts, or cn-fontsource. 思源宋体 weight 900 gives heft and editorial register but reads as serious rather than playful. The rotation transforms and saturated red carry the playful-sports-magazine voice on their own; don't drop the tilts when translating to CJK.
- **No CDN Chinese monospace face for the chrome voice.** Space Grotesk's role (uppercase tracked labels, slide counter, footer links with red underline) depends on the uppercase + 2–3px tracking treatment. 思源黑体 weight 500–600 at 0 tracking is the closest match but loses the "stamped metadata" signal. The red color and 1–2px border treatments on tags/links do most of the chrome-recognition work in a CJK build.
- **Libre Baskerville's classical literary register has no exact Chinese counterpart.** 思源宋体 reads as institutional-modern rather than 19th-century-literary. For projects that need the literary-quarterly voice specifically (long body paragraphs in essays or manifestos), consider 霞鹜文楷 LXGW WenKai instead of 思源宋体 — it carries a hand-written/calligraphic warmth closer to Baskerville's editorial personality.

## Iteration Guide

1. Any new content slide starts with a Shrikhand section header at `{typography.section-header}` (32–64px) in `{colors.dark}`, optionally preceded by a Space Grotesk red eyebrow label.
2. Any new numerical callout (cell figure, pillar number, inline stat, summary highlight) is Shrikhand in `{colors.red}` at the appropriate cell-number scale.
3. Any new body paragraph is Libre Baskerville weight 400 in `{colors.dark}` at line-height 1.5-1.75.
4. Any new editorial card uses the `{components.red-leftbar-card}` pattern (4px red left rule + 18px padding-left), holding a Shrikhand title + Libre Baskerville body + Space Grotesk red-bullet list.
5. Any new data-grid is wrapped in a 3px ink outer border with 1.5px ink inner cell borders. Each cell holds: Shrikhand red numeral + Space Grotesk uppercase label + Libre Baskerville body + optional Space Grotesk micro-context line at bottom.
6. Any new statement slide uses a full-bleed `{colors.red}` panel with white Shrikhand display text carrying the stacked text-shadow, and white Libre Baskerville cite below.
7. Any new dense-data slide uses a full-bleed `{colors.dark}` panel with white text, red Space Grotesk labels, red 3px leftbar rules on phase cards, and red round-bullet glyphs on lists.
8. Any new list uses red em-dash or red round-bullet glyphs at position absolute left — never default disc bullets.
9. Any new hero composition is a multi-line Shrikhand stack: at least three lines, at least one rotated, at least one in red. Don't collapse to a single horizontal title.
10. If a surface feels too monotone, switch the surface ground (white → red / dark / off-white panel) — don't add a second accent color or a third typeface.

## Known Gaps

- **Shrikhand is a single-weight (400) display face** — there are no bolder or lighter weights available. Every Shrikhand element is the same weight; visual hierarchy comes from size, color, and rotation only.
- **Shrikhand, Libre Baskerville, and Space Grotesk are loaded from Google Fonts** via a single `<link>` request. There are no system fallbacks beyond `cursive` / `serif` / `sans-serif` — in environments where Google Fonts fail, the system collapses to generic system fonts and loses its identity entirely.
- **The stacked text-shadow is hardcoded for ink-on-red contexts.** Applying it to different color combinations (e.g., red text on a light ground) does not produce the same effect; the three-step shadow is specifically tuned for the red-panel surface.
- **Rotation transforms are fixed per element type** (-6° on stat-big, -5° on close-big, -4° on hero-title-red, +2° on hero-title-bottom). Adjusting individual rotations requires per-instance style overrides.
- **The financial-grid and summary-highlights grid use overlapping borders** (3px outer + 1.5px inner that physically overlap by half-pixel due to box-sizing). Browser rendering of this overlap is generally clean but can produce subtle 1-pixel artifacts at certain zoom levels.
- **The pillars layout uses `overflow-y: auto`** on each pillar column. On surfaces with long content, this introduces visible scrollbars on certain operating systems — the system is designed for content that fits the viewport.
- **The hero tagline on slide-hero is absolutely positioned at `bottom: 8vh; right: 7vw`** with a 300px max-width. On very wide aspect ratios or very narrow ones it may misalign with the hero title stack.
- **The progress bar is a 5px height strip** that may visually overlap content on slides with bottom-edge text — the slide-close surface in particular places close-links at `bottom: 5vh` which clears the progress bar but only by a small margin.
- **The click-to-advance interaction divides the viewport at 50% width** for next/prev. This may conflict with click-to-interact behaviors on links inside slides (the close-slide footer links). The system relies on link click events to stopPropagation, which they do not by default.
- **The bullet-list class is defined globally** with em-dash glyphs but is not used in the demo template — the pillar bullets, service bullets, and roadmap bullets all redefine their own bullet styles inline. There's some inconsistency between the defined utility and the actual usage patterns.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.bot` — 1장 — 예: `<span class="h1 bot">`
- `.foot` — 1장 — 예: `<div class="foot">`
- `.h1` — 1장 — 예: `<span class="h1">`
- `.lab` — 1·2·3·4·5·6장 — 예: `<span class="lab red">`
- `.lbar` — 1장 — 예: `<div class="lbar">`
- `.r` — 1·2·3·4·5·6장 — 예: `<span class="r">`
- `.red` — 1·2·3·4·5·6장 — 예: `<span class="lab red">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.stack` — 1장 — 예: `<div class="stack">`
- `.topbar` — 1·2·3·4·5·6장 — 예: `<div class="topbar">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.big` — 2장 — 예: `<p class="dash big">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.dash` — 2·4·5장 — 예: `<p class="dash big">`
- `.def` — 2장 — 예: `<p class="def">`
- `.fig` — 2장 — 예: `<div class="gcard fig">`
- `.gcard` — 2·6장 — 예: `<div class="gcard fig">`
- `.lcard` — 2장 — 예: `<div class="lcard" data-s="1">`
- `.lcol` — 2장 — 예: `<div class="lcol">`
- `.links` — 2·5장 — 예: `<div class="links">`
- `.lk` — 2·5·6장 — 예: `<button class="lk" data-act="step">`
- `.nr` — 2·3·5장 — 예: `<p class="nr">`
- `.rcol` — 2장 — 예: `<div class="rcol">`
- `.split` — 2장 — 예: `<div class="split">`
- `.steps` — 2장 — 예: `<div class="steps">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.bc` — 3장 — 예: `<div class="cell bc">`
- `.bgrid` — 3·4·5장 — 예: `<div class="bgrid four">`
- `.cell` — 3·4·5장 — 예: `<div class="cell">`
- `.cn` — 3·5장 — 예: `<b class="cn">`
- `.dk` — 3장 — 예: `<b class="cn dk">`
- `.four` — 3장 — 예: `<div class="bgrid four">`
- `.hd` — 3·4장 — 예: `<div class="cell hd">`
- `.lg` — 3·6장 — 예: `<h2 class="lg">`
- `.mc` — 3·6장 — 예: `<span class="mc">`
- `.rl` — 3장 — 예: `<div class="cell rl">`
- `.sn` — 3·4·6장 — 예: `<b class="sn">`
- `.src` — 3장 — 예: `<p class="src">`
- `.tgrid` — 3장 — 예: `<div class="bgrid tgrid">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.alt` — 4장 — 예: `<div class="pillar alt">`
- `.pillar` — 4장 — 예: `<div class="pillar">`
- `.pillars` — 4장 — 예: `<div class="pillars">`
- `.pn` — 4장 — 예: `<b class="pn">`
- `.rc` — 4장 — 예: `<span class="rc">`
- `.redp` — 4·5장 — 예: `<div class="redp">`
- `.row4` — 4장 — 예: `<div class="row4">`
- `.rq` — 4장 — 예: `<p class="rq">`
- `.tbl` — 4장 — 예: `<div class="bgrid tbl">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="bgrid blk">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.half` — 5장 — 예: `<div class="redp half quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wro…`
- `.ok` — 5장 — 예: `<span class="ok">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.quiz` — 5장 — 예: `<div class="redp half quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wro…`
- `.rhalf` — 5장 — 예: `<div class="rhalf">`
- `.s5` — 5장 — 예: `<section class="slide s5">`
- `.w` — 5장 — 예: `<button class="lk w" data-act="retry">`
- `.words` — 5장 — 예: `<div class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.b` — 6장 — 예: `<span class="b">`
- `.c6` — 6장 — 예: `<div class="c6">`
- `.cols6` — 6장 — 예: `<div class="cols6">`
- `.d6` — 6장 — 예: `<div class="gcard d6">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.lt` — 6장 — 예: `<div class="c6 lt">`
- `.pg6` — 6장 — 예: `<div class="pg6" id="bo-rise">`
- `.rp6` — 6장 — 예: `<div class="rp6" id="bo-sh">`
- `.rs6` — 6장 — 예: `<div class="rs6">`
- `.sig6` — 6장 — 예: `<div class="sig6">`
- `.split6` — 6장 — 예: `<div class="split6">`
- `.stk6` — 6장 — 예: `<div class="stk6" id="bo-stack">`
- `.sw6` — 6장 — 예: `<p class="sw6">`

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

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="bold-poster">
<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=Shrikhand&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@500;600;700&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/bold-poster.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="r">1단원 · 3~4차시</span><span>01 / 06</span></div>
  <div class="lbar"></div>
  <div class="stack">
    <span class="h1">계절의 변화</span>
    <span class="lab red">학습 목표</span>
    <h1><span class="h1 red">하루 동안 태양 고도,</span><span class="h1 bot">그림자 길이, 기온의 관계</span></h1>
  </div>
  <div class="foot"><a>00초등학교</a><a>Sun, Shadow & Temperature</a><a>2026</a></div>
</section>
<section class="slide" data-steps="4">
  <div class="topbar"><span>측정 준비</span><span class="r">1단원 · 3~4차시</span><span>02 / 06</span></div>
  <h2>태양 고도 측정기 만들기</h2>
  <div class="split">
    <div class="lcol">
      <div class="gcard fig"><span class="lab red">FIG. 01 — 태양 고도 측정기</span><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></div>
      <p class="dash big">막대기의 그림자와 실이 이루는 각 = 태양 고도</p>
    </div>
    <div class="rcol">
      <p class="def"><b>태양 고도</b> = 태양이 지표면과 이루는 각</p>
      <div class="steps"><div class="lcard" data-s="1"><span class="lab red">STEP 01 · 준비</span><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div><div class="lcard" data-s="2"><span class="lab red">STEP 02 · 수직</span><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div><div class="lcard" data-s="3"><span class="lab red">STEP 03 · 실</span><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div><div class="lcard" data-s="4"><span class="lab red">STEP 04 · 각도</span><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div>
      <div class="links"><button class="lk" data-act="step">다음 단계 →</button><button class="lk" data-act="reset">처음부터</button><p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
    </div>
  </div>
  <p class="nr">버튼 규칙 없음 → 빨간 밑줄 링크으로 표현</p>
</section>
<section class="slide">
  <div class="topbar"><span>측정 결과</span><span class="r">예시 값</span><span>03 / 06</span></div>
  <h2 class="lg">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="bgrid four"><div class="cell"><b class="cn">12:30</b><span class="lab">남중 시각</span><p>태양 고도가 가장 높아요 <span class="mc">무렵 · 남중</span></p></div><div class="cell"><b class="cn">정남</b><span class="lab">남중 방향</span><p>남중할 때 태양의 위치 <span class="mc">쪽</span></p></div><div class="cell"><b class="cn">14:30</b><span class="lab">최고 기온</span><p>기온이 가장 높아요 <span class="mc">무렵</span></p></div><div class="cell"><b class="cn">9:30</b><span class="lab">가장 긴 그림자</span><p>그림자가 가장 길어요 <span class="mc">· 15:30</span></p></div></div>
  <div class="bgrid tgrid">
    <div class="cell hd"><span class="lab">시각</span></div><div class="cell hd"><span class="lab">9:30</span></div><div class="cell hd"><span class="lab">10:30</span></div><div class="cell hd"><span class="lab">11:30</span></div><div class="cell hd"><span class="lab">12:30</span></div><div class="cell hd"><span class="lab">13:30</span></div><div class="cell hd"><span class="lab">14:30</span></div><div class="cell hd"><span class="lab">15:30</span></div>
    <div class="cell rl"><span class="lab red">태양 고도</span><span class="mc">(°)</span></div><div class="cell bc"><b class="cn dk">38°</b><i style="height:82px"></i></div><div class="cell bc"><b class="cn dk">48°</b><i style="height:104px"></i></div><div class="cell bc"><b class="cn dk">55°</b><i style="height:119px"></i></div><div class="cell bc"><b class="cn">57°</b><i style="height:124px"></i></div><div class="cell bc"><b class="cn dk">54°</b><i style="height:117px"></i></div><div class="cell bc"><b class="cn dk">47°</b><i style="height:102px"></i></div><div class="cell bc"><b class="cn dk">37°</b><i style="height:80px"></i></div>
    <div class="cell rl"><span class="lab red">그림자 길이</span><span class="mc">(cm)</span></div><div class="cell"><b class="sn">12.9</b></div><div class="cell"><b class="sn">9.1</b></div><div class="cell"><b class="sn">7</b></div><div class="cell"><b class="sn">6.4</b></div><div class="cell"><b class="sn">7.2</b></div><div class="cell"><b class="sn">9.4</b></div><div class="cell"><b class="sn">13.4</b></div>
    <div class="cell rl"><span class="lab red">기온</span><span class="mc">(℃)</span></div><div class="cell"><b class="sn">22</b></div><div class="cell"><b class="sn">23.8</b></div><div class="cell"><b class="sn">25.2</b></div><div class="cell"><b class="sn">26.3</b></div><div class="cell"><b class="sn">27</b></div><div class="cell"><b class="sn">27.4</b></div><div class="cell"><b class="sn">26.9</b></div>
  </div>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
  <p class="nr">그래프 규칙 없음 → 겹선 격자 + 잉크 막대으로 표현</p>
</section>
<section class="slide">
  <div class="topbar"><span>관계 정리</span><span class="r">남중</span><span>04 / 06</span></div>
  <h2>태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="pillars">
    <div class="pillar"><b class="pn">HIGH</b><h3>태양 고도가 높을 때</h3><p class="dash">그림자 길이는 짧아져요</p><p class="dash">기온은 높아져요</p></div><div class="pillar alt"><b class="pn">LOW</b><h3>태양 고도가 낮을 때</h3><p class="dash">그림자 길이는 길어져요</p><p class="dash">기온은 낮아져요</p></div>
    <div class="pillar"><b class="pn">남중</b><p class="dash">태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p class="dash">이때의 태양 고도를 남중 고도라고 해요</p></div>
  </div>
  <div class="row4">
    <div class="bgrid tbl"><div class="cell hd"><span class="lab">시각</span></div><div class="cell hd"><span class="lab">태양 고도</span></div><div class="cell hd"><span class="lab">그림자 길이</span></div><div class="cell hd"><span class="lab">기온</span></div><div class="cell"><b class="sn red">오전 9:30</b></div><div class="cell"><span>낮아요</span></div><div class="cell"><span>길어요</span></div><div class="cell"><span>낮아요</span></div><div class="cell"><b class="sn red">낮 12:30</b></div><div class="cell"><span>가장 높아요</span></div><div class="cell"><span>가장 짧아요</span></div><div class="cell"><span>높아지는 중</span></div><div class="cell"><b class="sn red">오후 14:30</b></div><div class="cell"><span>낮아지는 중</span></div><div class="cell"><span>길어지는 중</span></div><div class="cell"><span>가장 높아요</span></div></div>
    <div class="redp"><p class="rq">태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span class="rc">— 오늘의 정리</span></div>
  </div>
</section>
<section class="slide s5">
  <div class="redp half quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <span class="lab">확인하기</span>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="opts"><button class="opt" data-opt="0"><span class="ok">A</span>오전 9시 30분</button><button class="opt" data-opt="1"><span class="ok">B</span>낮 12시 30분 무렵</button><button class="opt" data-opt="2"><span class="ok">C</span>오후 3시 30분</button></div>
    <p class="fb" data-fb></p>
    <div class="links"><button class="lk w" data-act="retry">다시 풀기 ↺</button></div>
  </div>
  <div class="rhalf">
    <div class="topbar"><span>배운 내용을 확인해 볼까요?</span><span class="r">00초등학교</span><span>05 / 06</span></div>
    <span class="lab red">빈칸을 눌러 확인해요</span>
    <div class="bgrid blk"><div class="cell"><b class="cn">1</b><p><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p></div><div class="cell"><b class="cn">2</b><p><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p></div><div class="cell"><b class="cn">3</b><p><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p></div></div>
    <span class="lab red">오늘의 낱말</span>
    <div class="words"><p class="dash">태양 고도</p><p class="dash">남중 고도</p><p class="dash">그림자 길이</p><p class="dash">기온</p></div>
  </div>
  <p class="nr">버튼 규칙 없음 → 빨간 밑줄 링크으로 표현 · 빈칸 규칙 없음 → 1.5px 잉크 칸으로 표현</p>
</section>
<section class="slide">
  <div class="topbar"><span>디자인 안내</span><span class="r">GUIDE</span><span>06 / 06</span></div>
  <h2 class="lg">이 디자인 사용 설명서</h2>
  <div class="split6">
    <div class="cols6">
      <div class="c6"><span class="lab red">한눈에</span><p>극장 포스터처럼 <b>굵고 둥근 장식 글자</b>를 기울여 쌓아요. 색은 흰 바탕 · 갈색 잉크 · 토마토 빨강 · 미색 넷뿐.</p></div>
      <div class="c6 lt"><span class="lab red">색</span><p class="sw6"><span><i style="background:#fff"></i>흰 바탕</span><span><i style="background:#1C1410"></i>갈색 잉크</span><span><i style="background:#D8000F"></i>토마토 빨강</span><span><i style="background:#F5F2EF"></i>미색 줄</span></p></div>
      <div class="c6"><span class="lab red">글꼴</span><p>제목·큰 숫자 Shrikhand → KCCMurukmuruk<br>본문 Libre Baskerville → Cafe24 Oneprettynight<br>라벨 Space Grotesk</p></div>
      <div class="c6 lt"><span class="lab red">이렇게 쓰면 좋아요</span><p>수업 첫 장·마무리 장처럼 한 문장을 크게 외칠 때. 빨강은 한 줄만, 나머지는 잉크로.</p></div>
    </div>
    <div class="sig6">
      <span class="lab red">대표 장치 — 눌러 보세요</span>
      <div class="gcard d6"><div class="dh"><h3 class="sn">세 줄 기울여 쌓기</h3><button class="lk" data-demo="#bo-stack" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p class="mc">가운데 줄은 빨강 −4°, 아래 줄은 잉크 +2°로 비뚤게.</p><div class="stk6" id="bo-stack"><span>하루 동안</span><span class="r">태양 고도</span><span class="b">그림자 길이</span></div></div>
      <div class="gcard d6"><div class="dh"><h3 class="sn">빨간 판 글자 그림자</h3><button class="lk" data-demo="#bo-sh" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p class="mc">빨간 판 위 흰 글자에 2·4·6px 세 겹 그림자를 찍어요.</p><div class="rp6" id="bo-sh">남중!</div></div>
      <div class="gcard d6"><div class="dh"><h3 class="sn">떠오르는 장 넘김</h3><button class="lk" data-demo="#bo-rise">다시 보기</button></div><p class="mc">새 장이 아래 30px에서 0.98배로 떠오르며 나타나요(0.55초).</p><div class="rs6"><div class="pg6" id="bo-rise"><b>06</b><span>NEXT SLIDE</span></div></div></div>
    </div>
  </div>
</section>
<nav class="dk-nav"><span class="hp">← → 키로 넘기기</span><span class="dk-count" data-pad></span><i class="prog"></i></nav>
  </main>
</div>

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* --- 토큰(1920 무대, 글자는 교실 화면용으로 키움) --- */
:root{--bg:#fff;--dark:#1C1410;--red:#D8000F;--light:#F5F2EF;--sh3:2px 2px 0 rgba(28,20,16,.25),4px 4px 0 rgba(28,20,16,.2),6px 6px 0 rgba(28,20,16,.15)}
.slide{background:var(--bg);color:var(--dark);font-family:'Libre Baskerville',var(--kb),serif;padding:56px 100px 110px;display:flex;flex-direction:column}
.lab,.topbar,.foot a,.lk,.mc{font-family:'Space Grotesk',var(--kb),sans-serif;font-weight:600;letter-spacing:.14em}
.lab{font-size:26px}.lab.red{color:var(--red)}
.mc{font-size:22px;font-weight:500;letter-spacing:0;opacity:.7}
.topbar{display:flex;justify-content:space-between;border-top:6px solid var(--dark);border-bottom:2px solid var(--dark);padding:14px 0;font-size:26px}
.topbar .r{color:var(--red)}
h2{margin-top:28px;font-family:'Shrikhand',var(--kt),serif;font-weight:400;font-size:76px;line-height:1.2}
h2.lg{font-size:72px}
h3{font-family:'Shrikhand',var(--kt),serif;font-weight:400}
.dash{position:relative;padding-left:44px;font-size:29px;line-height:1.6}
.dash::before{content:'—';position:absolute;left:0;color:var(--red);font-weight:700}
.nr{position:absolute;left:100px;bottom:30px;font:500 18px 'Space Grotesk',var(--kb),sans-serif;opacity:.55}
.links{display:flex;flex-wrap:wrap;gap:14px 44px;align-items:baseline}
.lk{font-size:28px;padding-bottom:4px;border-bottom:2px solid var(--red)}
.lk:hover:not(:disabled){color:var(--red)}
.lk:disabled{opacity:.35}
.bgrid{display:grid;border:3px solid var(--dark)}
.cell{border:1.5px solid var(--dark);padding:18px 20px}
.cn{display:block;font-family:'Shrikhand',var(--kt),serif;font-weight:400;font-size:60px;line-height:1.15;color:var(--red)}
.sn{font-family:'Shrikhand',var(--kt),serif;font-weight:400;font-size:36px;line-height:1.2}
.sn.red{color:var(--red)}

/* --- 1. 표지: 빨간 왼쪽 막대 + 세 줄 쌓기(단원 / 빨강 -4° 학습 목표 / 잉크 +2° 학습 목표) + 밑줄 링크 --- */
.lbar{position:absolute;left:100px;top:200px;bottom:170px;width:20px;background:var(--red)}
.stack{margin:44px 0 0 70px;display:flex;flex-direction:column}
.stack .lab{margin-top:26px}
.stack h1{display:flex;flex-direction:column;margin-top:18px;font-weight:400}
.h1{font-family:'Shrikhand',var(--kt),serif;font-size:100px;line-height:1.2;white-space:nowrap}
.h1.red{font-size:150px;line-height:1.24;color:var(--red);transform:rotate(-4deg);transform-origin:left center}
.h1.bot{margin-top:22px;font-size:136px;line-height:1.24;transform:rotate(2deg);transform-origin:left center}
.foot{margin:auto 0 0 70px;display:flex;gap:44px}
.foot a{font-size:28px;padding-bottom:6px;border-bottom:2px solid var(--red)}

/* --- 2. 흐름: 2px 잉크 카드 속 측정기 그림 + 줄표 메모 | 정의 + 빨간 왼쪽 선 단계 카드 4장(켜지면 또렷) + 밑줄 링크 --- */
.split{flex:1;min-height:0;margin-top:22px;display:grid;grid-template-columns:840px 1fr;gap:60px}
.lcol{display:flex;flex-direction:column;gap:22px}
.gcard{border:2px solid var(--dark);padding:22px 26px}
.fig{--g-ink:var(--dark);--g-acc:var(--red);--g-stick:var(--dark);--g-board:var(--light);--g-ruler:#fff;--g-prot:rgba(245,242,239,.85);--g-shadow:var(--dark);--g-font:'Space Grotesk',var(--kb),sans-serif;--g-sw:2}
.dash.big{font-size:30px}
.rcol{display:flex;flex-direction:column;min-height:0}
.def{font-size:29px;line-height:1.6}
.def b{font-family:'Space Grotesk',var(--kb),sans-serif;font-weight:600}
.steps{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.steps .lab{font-size:22px}
.lcard{border-left:4px solid var(--red);padding-left:20px}
.slide[data-step]:not([data-step="0"]) .lcard:not(.on){opacity:.35}
.lcard h3{margin-top:2px;font-size:36px;line-height:1.2}
.lcard p{font-size:28px;line-height:1.5}
.rcol .links{margin-top:auto}
.cap{width:100%;font-size:28px;line-height:1.5}

/* --- 3. 숫자와 그래프: 겹선 격자 4칸(빨간 Shrikhand 숫자) + 겹선 격자 표(시각별: 잉크 막대 · 빨강 = 가장 높음 / 그림자 · 기온 숫자) --- */
.four{margin-top:24px;grid-template-columns:repeat(4,1fr)}
.four .cell{display:flex;flex-direction:column;gap:6px}
.four p{font-size:28px;line-height:1.5}
.tgrid{margin-top:22px;grid-template-columns:230px repeat(7,1fr)}
.tgrid .cell{padding:8px 14px;display:flex;align-items:center;justify-content:center;text-align:center}
.tgrid .cell.rl{flex-direction:column;align-items:flex-start;text-align:left}
.tgrid .hd{background:var(--light)}
.tgrid .bc{flex-direction:column;justify-content:flex-end;height:220px;gap:8px}
.tgrid .bc i{display:block;width:56px;background:var(--dark)}
.tgrid .cn{font-size:44px}
.tgrid .cn.dk{color:var(--dark)}
.src{margin-top:12px;font-size:20px;line-height:1.4;opacity:.75}

/* --- 4. 비교와 표: 기둥 3칸(3px 세로선, 흰/미색 번갈아, 빨간 숫자 머리) / 겹선 격자 표 + 빨간 판 인용(흰 글자 + 3단 글자 그림자) --- */
.pillars{margin-top:26px;display:grid;grid-template-columns:1fr 1fr 1.2fr;border-top:3px solid var(--dark);border-bottom:3px solid var(--dark)}
.pillar{padding:22px 28px;border-left:3px solid var(--dark);display:flex;flex-direction:column;gap:8px}
.pillar:first-child{border-left:0}
.pillar.alt{background:var(--light)}
.pn{font-family:'Shrikhand',var(--kt),serif;font-weight:400;font-size:44px;line-height:1.1;color:var(--red)}
.pillar h3{font-size:38px;line-height:1.25}
.row4{flex:1;min-height:0;margin-top:30px;display:grid;grid-template-columns:1.25fr 1fr;gap:40px}
.tbl{grid-template-columns:1.2fr 1fr 1fr 1fr;align-self:start}
.tbl .cell{padding:12px 16px;font-size:28px;line-height:1.35}
.tbl .hd{background:var(--light)}
.redp{background:var(--red);color:#fff;padding:34px 40px;display:flex;flex-direction:column;justify-content:center}
.rq{font-family:'Shrikhand',var(--kt),serif;font-size:46px;line-height:1.35;text-shadow:var(--sh3)}
.rc{margin-top:18px;font-size:26px}

/* --- 5. 확인하기: 왼쪽 반 빨간 판 퀴즈(흰 Shrikhand + 3단 그림자, 흰 줄표 보기) | 위 띠 + 겹선 격자 빈칸 + 줄표 낱말 --- */
.s5{padding:0;display:grid;grid-template-columns:900px 1fr}
.half{padding:70px 70px 110px 100px}
.quiz .lab{color:#fff;opacity:.8}
.q{margin-top:20px;font-size:58px;line-height:1.3;text-shadow:var(--sh3)}
.opts{margin-top:30px;display:flex;flex-direction:column;border-top:1.5px solid rgba(255,255,255,.5)}
.opt{display:flex;align-items:baseline;gap:28px;text-align:left;padding:18px 8px;font-size:36px;color:#fff;border-bottom:1.5px solid rgba(255,255,255,.5)}
.ok{font:600 26px 'Space Grotesk',sans-serif;letter-spacing:.14em}
.opt.right{background:#fff;color:var(--red)}
.opt.wrong,.opt:disabled:not(.right){opacity:.5}
.fb{margin-top:22px;min-height:92px;font-size:30px;line-height:1.55}
.quiz .links{margin-top:auto}
.lk.w{border-bottom-color:#fff}
.lk.w:hover:not(:disabled){color:#fff;opacity:.75}
.rhalf{padding:56px 100px 110px 70px;display:flex;flex-direction:column;gap:22px}
.blk{grid-template-columns:1fr}
.blk .cell{display:flex;align-items:center;gap:26px}
.blk .cn{font-size:52px}
.blk p{font-size:29px;line-height:1.6}
.blank{position:relative;min-width:180px;margin-right:12px;padding:0 10px;border:1.5px solid var(--dark);font-family:'Space Grotesk',var(--kb),sans-serif;font-weight:600;text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;color:var(--red)}
.blank.open{color:var(--red)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.words{display:grid;grid-template-columns:1fr 1fr;gap:6px 30px}
.words .dash{font-family:'Shrikhand',var(--kt),serif;font-size:36px}
.s5 .nr{left:960px}

/* --- 크롬: 5px 빨간 진행 막대 + 번호(50%) + 안내 알약 --- */
.dk-nav{inset:0;pointer-events:none}
.prog{position:absolute;left:0;bottom:0;height:5px;background:var(--red);width:16.7%;transition:width .5s cubic-bezier(0.22,1,0.36,1)}
[data-slide="2"] .prog{width:33.3%}[data-slide="3"] .prog{width:50%}[data-slide="4"] .prog{width:66.7%}[data-slide="5"] .prog{width:83.3%}[data-slide="6"] .prog{width:100%}
[data-slide="6"] .prog{background:var(--dark)}
.dk-count{position:absolute;right:40px;bottom:28px;font:600 24px 'Space Grotesk',monospace;letter-spacing:.14em;opacity:.5}
.hp{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:var(--light);border-radius:4px;padding:8px 20px;font:600 20px 'Space Grotesk',var(--kb),sans-serif;opacity:0;transition:opacity .4s ease}
.deck-stage:hover .hp{opacity:.5}
/* --- 6. 디자인 안내: 기둥 칸 넷(3px 세로선, 흰/미색) | 2px 잉크 카드 시연 3개 --- */
.split6{flex:1;min-height:0;margin-top:24px;display:grid;grid-template-columns:960px 1fr;gap:56px}
.cols6{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;border-left:3px solid var(--dark);border-right:3px solid var(--dark)}
.c6{padding:20px 26px;display:flex;flex-direction:column;gap:10px}
.c6:nth-child(odd){border-right:3px solid var(--dark)}
.c6.lt{background:var(--light)}
.c6 p{font-size:25px;line-height:1.6}
.c6 b{color:var(--red)}
.sw6{display:flex;flex-direction:column;gap:8px}
.sw6 i{display:inline-block;width:28px;height:28px;margin-right:12px;vertical-align:-7px;border:2px solid var(--dark)}
.sig6{display:flex;flex-direction:column;gap:16px}
.d6{padding:14px 22px 16px}
.d6 .dh{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.d6 .sn{font-size:32px}
.d6 .lk{font-size:22px}
.d6 .lk[aria-pressed="true"]{color:var(--red)}
.d6 .mc{display:block;margin-top:4px;font-size:21px;line-height:1.4}
.stk6{margin-top:8px;height:118px;display:flex;flex-direction:column;font-family:'Shrikhand',var(--kt),serif}
.stk6 span{font-size:30px;line-height:1.25}
.stk6 .r{font-size:40px;color:var(--red);transform-origin:left center}
.stk6 .b{font-size:36px;transform-origin:left center}
.stk6.play .r{transform:rotate(-4deg)}.stk6.play .b{transform:rotate(2deg)}
.rp6{margin-top:10px;height:80px;display:grid;place-items:center;background:var(--red);color:#fff;font:400 48px/1 'Shrikhand',var(--kt),serif}
.rp6.play{text-shadow:var(--sh3)}
.rs6{margin-top:10px;height:84px;background:var(--light);overflow:hidden;padding:10px 14px}
.pg6{height:100%;background:#fff;border:2px solid var(--dark);display:flex;align-items:center;gap:18px;padding:0 20px}
.pg6 b{font:400 40px/1 'Shrikhand',serif;color:var(--red)}
.pg6 span{font:600 20px 'Space Grotesk',sans-serif;letter-spacing:.14em}
.pg6.play{animation:bo-rise .55s cubic-bezier(.22,1,.36,1) both}
@keyframes bo-rise{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}

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