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

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

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

## 라이선스

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

- Ghanachocolate: Ghanachocolate — 롯데웰푸드(구 롯데제과) 자체 규정(SIL 라이선스 아님): 누구나 무료로 사용 가능, 폰트 자체의 유료 양도·판매 금지. 무료 재배포 문구는 없어 선생님 판단으로 예외 사용(2026-10-15) / 파일 안 저작권: © 2020 by LOTTE CONFECTIONERY CO.LTD. All rights reserved.
  파일: Ghanachocolate.ttf
- Paperlogy 4Regular: Paperlogy — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © 2024 PT&
  파일: Paperlogy-4Regular.ttf

※ Ghanachocolate: SIL Open Font License가 아니라 제작사 자체 규정을 따릅니다(무료로 쓸 수 있고 폰트 파일 판매는 금지 — 위 안내 참고). 재배포 문구가 없어 운영자 판단으로 넣은 예외 폰트이니, 다시 나눠 줄 때는 제작사 규정을 확인하세요.

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/emerald-editorial.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/emerald-editorial.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Ghanachocolate(400) · 본문 Paperlogy 4Regular(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. 디자인 규칙 (`emerald-editorial` design.md)

````markdown
---
version: alpha
name: Emerald Editorial
description: "A bold display-serif editorial system in the register of a fashion masthead or vintage magazine cover. Bodoni Moda runs at weight 900 across a wide scale (44–460px), set against a saturated emerald-green canvas with deep navy ink and oat-paper accents. The signature treatment is a stacked double-rule ornament that brackets centered display words like a 19th-century theatrical playbill. The aesthetic borrows from Harper's Bazaar / Vogue / Wallpaper covers: confident, theatrical, paper-and-ink committed, with a tight three-color palette and zero gradients or shadows."

colors:
  bg: "#3CD896"
  bg-2: "#2DC684"
  bg-3: "#25B377"
  ink: "#0F1A5C"
  ink-2: "#1B2774"
  ink-3: "#3A4593"
  paper: "#F1E9D6"
  rule: "rgba(15, 26, 92, 0.22)"
  rule-strong: "rgba(15, 26, 92, 0.85)"

typography:
  numeral-jumbo:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 460
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.04em
  display-section:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 200
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.015em
  display-cover:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 184
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.01em
  display:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 130
    fontWeight: 900
    lineHeight: 0.96
    letterSpacing: -0.015em
  display-md:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 128
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.015em
  display-sm:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 120
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.015em
  headline-xl:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 104
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.015em
  headline:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 92
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.02em
  ornament-word-lg:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 84
    fontWeight: 800
    lineHeight: 1
  ornament-word:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 76
    fontWeight: 800
    lineHeight: 1
  ornament-word-sm:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 68
    fontWeight: 800
    lineHeight: 1
  title-card-lg:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 64
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.005em
  title-card:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 48
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.005em
  title-card-sm:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 44
    fontWeight: 800
    lineHeight: 1.05
    letterSpacing: -0.005em
  step-numeral:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 80
    fontWeight: 900
    lineHeight: 1
  step-title:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 40
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.005em
  kpi-figure:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 144
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.03em
  kpi-figure-unit:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 60
    fontWeight: 800
  stat-figure:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 92
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.02em
  stat-figure-unit:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 48
    fontWeight: 900
  eyebrow:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 28
    fontWeight: 800
    letterSpacing: 0.18em
    textTransform: uppercase
  label:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 26
    fontWeight: 700
    letterSpacing: 0.08em
    textTransform: uppercase
  label-tight:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 26
    fontWeight: 700
    letterSpacing: 0.05em
    textTransform: uppercase
  tag:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 24
    fontWeight: 800
    letterSpacing: 0.12em
    textTransform: uppercase
  caption:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 24
    fontWeight: 700
    letterSpacing: 0.1em
    textTransform: uppercase
  body-lg:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 28
    fontWeight: 500
    lineHeight: 1.5
  body:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 26
    fontWeight: 500
    lineHeight: 1.5
  body-sm:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 24
    fontWeight: 500
    lineHeight: 1.45
  credit:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 28
    fontWeight: 700
    letterSpacing: 0.18em
    textTransform: uppercase

spacing:
  pad-default: "110px 110px 70px"
  pad-cover: "56px 110px"
  pad-closing: "80px 110px"
  pad-statement: "110px 110px 70px"
  masthead-inset: "56px 80px"
  rule-thick: "4px"
  rule-thicker: "5px"
  rule-thin: "2px"

canvas:
  width: 1920px
  height: 1080px

components:
  ornament-double-rule:
    description: "The system's signature treatment. A centered serif word framed by two stacked 4px horizontal rules on each side. The rules sit 3px apart on top and 3px apart on bottom, giving a 19th-century playbill / theatrical-poster bracket effect. Configurable via :root[data-ornament] to switch between double (default), single, or none."
    ruleHeight: "4px"
    ruleGap: "3px"
    wordWeight: 800
    wordFamily: "'Bodoni Moda', serif"
  ornament-vertical:
    description: "An inline horizontal pair of stacked rules (each 4px tall, 8px apart) on either side of a small serif word. Used as a side bracket around connector words like prepositions."
    ruleHeight: "4px"
    ruleGap: "8px"
    barWidth: "64px"
  masthead:
    position: "absolute"
    placement: "top: 56px, full-width between 80px side padding"
    layout: "flex space-between"
    typography: "{typography.label-tight}"
    color: "{colors.ink}"
  footline:
    position: "absolute"
    placement: "bottom: 56px, full-width between 80px side padding"
    layout: "flex space-between"
    typography: "{typography.label-tight}"
    color: "{colors.ink}"
  rule-h-thick:
    height: "4px"
    background: "{colors.ink}"
    description: "Universal 4px horizontal rule used as section separator and tile/row border. The system's standard rule weight."
  agenda-row:
    description: "A three-column grid row (130px / 1fr / 320px) with 4px ink top borders. Holds a serif ordinal, serif name, and sans-serif kind label. The last row in a list also carries a 4px bottom border, sealing the list."
    rowPad: "26px 0"
    topBorder: "4px solid {colors.ink}"
  inverse-tile:
    description: "A solid {colors.ink} rectangle holding {colors.bg} text. Used for chart-card containers, kpi tiles, process steps, section-opener panels. Carries no corner radius and no shadow."
    background: "{colors.ink}"
    color: "{colors.bg}"
    padding: "32px to 36px"
  paper-tile:
    description: "A solid {colors.paper} rectangle holding {colors.ink} text. The alt variant of inverse-tile — used in rotation across a row of process steps or kpi tiles to break the monotony of ink fills."
    background: "{colors.paper}"
    color: "{colors.ink}"
  mark-pill:
    background: "{colors.ink}"
    color: "{colors.bg}"
    padding: "10px 22px"
    fontWeight: 700
    letterSpacing: 0.1em
    fontSize: 24
    textTransform: uppercase
    description: "A small ink-on-bg pill used as a category mark or section tag. No border-radius — strict rectangle."
  tag-pill:
    background: "{colors.ink}"
    color: "{colors.bg}"
    padding: "8px 20px"
    fontWeight: 700
    letterSpacing: 0.12em
    fontSize: 24
    textTransform: uppercase
  delta-pill:
    background: "{colors.bg}"
    color: "{colors.ink}"
    padding: "6px 16px"
    fontWeight: 800
    letterSpacing: 0.08em
    fontSize: 24
    textTransform: uppercase
    description: "A small bg-on-ink delta indicator placed inside an inverse kpi tile to show change direction. Inverted to ink-on-bg when inside a paper-tile."
  bar:
    description: "A vertical rectangular chart bar in bg (primary), paper (alt). Value label printed above bar in Bodoni 30px. No corner radius."
    background: "{colors.bg} or {colors.paper}"
  chart-card:
    background: "{colors.ink}"
    color: "{colors.bg}"
    padding: "36px 50px 30px"
    gridLineColor: "rgba(60, 216, 150, 0.22)"
    description: "An ink container framing a bar chart on bg. Y-axis labels are Bodoni 26px on the left; x-axis labels are Manrope 24px. Grid lines are 2px at 22% bg-on-ink."
  ornament-numeral-panel:
    description: "A full-bleed inverse panel (ink background) holding a single oversized Bodoni numeral (~460px weight 900) centered. Used as a section-opener device. Topbar / footline strings sit absolutely positioned in the panel corners."
---

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

Emerald Editorial is a **bold display-serif editorial system** rooted in the visual language of fashion magazines and 19th-century theatrical playbills. The foundational premise is a single typographic face — **Bodoni Moda at weight 900** — used at unapologetic scale: 92px for routine headlines, 130–200px for statements and section openers, and 460px for hero numerals. The serif is loud, theatrical, and confident. Every slide leads with type, not with image.

The palette is a tight three-color editorial set: a **saturated emerald green** (`{colors.bg}` — #3CD896) as the dominant surface, a **deep navy ink** (`{colors.ink}` — #0F1A5C) as both the primary text color and the inverse-panel surface, and an **oat paper** (`{colors.paper}` — #F1E9D6) as the secondary surface for alternate tiles. The navy / emerald contrast is the system's chromatic identity; every body of text is navy-on-emerald or emerald-on-navy. Two near-duplicates of the emerald (`{colors.bg-2}`, `{colors.bg-3}`) and two of the navy (`{colors.ink-2}`, `{colors.ink-3}`) exist in the token system but are reserved — the published slides commit almost entirely to the three primaries.

The supporting typeface is **Manrope**, a humanist geometric sans, run at weight 500 for body paragraphs and weight 700–800 in uppercase with wide letter-spacing for every label, tag, eyebrow, caption, and footline. Manrope never crosses into display territory — it stops at 28px and stays in the chrome layer.

The signature treatment is the **double-rule ornament** — a centered serif word framed by two stacked 4px horizontal rules on each side, with 3px between the rules. This treatment appears as the cover's centerpiece and as a recurring statement bracket. It reads as a 19th-century playbill or vintage program — a "The [word] of [word]" framing device. The double-rule ornament is configurable to a single-rule or no-rule variant via a `:root[data-ornament]` attribute, but the double variant is the system's identity.

Depth is **flat and ink-based**. There are no drop shadows, no gradients, no blur, no glow. Every surface is solid emerald, solid navy, or solid paper. Elevation happens through color-block inversion (a navy tile on the emerald canvas is the "elevated" element) and 4px ink rules separating sections. The whole system reads as printed ink on paper, not as a digital interface.

**Density philosophy: medium-full and centered.** Most slides carry one display headline at scale (92–200px) plus 3–4 supporting elements (a stat row, a kpi grid, a process flow, a chart card). The slide padding of 110px gives breathing room, and the masthead/footline chrome at top and bottom anchors the page. A slide that crams six small elements reads as broken; a slide with one giant headline plus three supporting tiles reads as authoritative. Reach for fewer, larger elements. The exception: the agenda-list pattern (a vertical list of large-numbered rows separated by 4px ink rules) is naturally dense and fills the canvas vertically — and it should, when used.

**Key Characteristics:**
- Bodoni Moda at weight 900 for every display moment; Manrope at weight 500/700/800 for every body and label moment.
- Saturated emerald canvas (`{colors.bg}`) with deep navy ink (`{colors.ink}`) text and inverse panels.
- Double-rule ornament with centered serif word is the signature decorative device.
- 4px ink horizontal rules separate every stacked section, every list row, every chart border. The 4px weight is the system's default rule.
- No corner radius anywhere. Every shape is a strict rectangle, except for the round logo/typographic glyphs themselves.
- No shadows, no gradients, no blur. Depth is color-block inversion + 4px rules.
- Display type scales aggressively — 184–460px for hero / section-opener / closing moments.
- Manrope chrome (labels, tags, captions) is always uppercase with 0.05em–0.18em letter-spacing.

## Colors

### Palette
- **BG / Emerald** (`{colors.bg}` — #3CD896): The dominant slide canvas. A saturated, slightly cool emerald — saturated enough to feel like printed ink, not like a CSS preset. The default slide background.
- **BG-2** (`{colors.bg-2}` — #2DC684): A slightly darker emerald reserved for tonal variation; available in the token system but used sparingly. Reach for it only when two emerald surfaces sit adjacent and need separation.
- **BG-3** (`{colors.bg-3}` — #25B377): The darkest emerald variant; similarly reserved.
- **Ink / Navy** (`{colors.ink}` — #0F1A5C): The deep navy primary. The text color on emerald and paper surfaces; the inverse-panel background color; the rule color; the border color. The system's structural color.
- **Ink-2** (`{colors.ink-2}` — #1B2774): A slightly lighter navy variant — available for tonal contrast inside ink-on-ink situations, but rarely used.
- **Ink-3** (`{colors.ink-3}` — #3A4593): The lightest navy variant; reserved.
- **Paper** (`{colors.paper}` — #F1E9D6): The oat-cream secondary surface. Used as the alt-tile fill in process / kpi rows, as the alt bar-chart series, and anywhere a third "warm" surface is needed to break a row of all-navy inverse tiles. Carries `{colors.ink}` text.
- **Rule** (`{colors.rule}` — `rgba(15, 26, 92, 0.22)`): A semi-transparent navy used only for subtle internal grid lines (e.g., chart grid lines on a dark ground). Not a structural rule color.
- **Rule Strong** (`{colors.rule-strong}` — `rgba(15, 26, 92, 0.85)`): An 85%-opacity navy, available as a near-solid rule alternative.

### Defaults
- **Default slide background**: `{colors.bg}` (emerald). Reach for `{colors.ink}` (navy) as a full slide surface when the moment wants gravity (section opener, closing).
- **Default headline color on emerald**: `{colors.ink}`.
- **Default headline color on navy**: `{colors.bg}` — emerald-on-navy is the only color flip the system uses for display type.
- **Default body color on emerald**: `{colors.ink}`.
- **Default body color on navy**: `{colors.bg}`.
- **Default body color on paper**: `{colors.ink}`.
- **Default label / eyebrow / tag color**: `{colors.ink}` on emerald and paper surfaces, `{colors.bg}` on navy surfaces.
- **Default rule color**: `{colors.ink}` at 4px solid. Always.
- **Default inverse tile fill**: `{colors.ink}` with `{colors.bg}` text. The alt tile in a row uses `{colors.paper}` with `{colors.ink}` text.
- **Default delta / pill fill** inside an ink tile: `{colors.bg}` background with `{colors.ink}` text. Inside a paper tile, invert to `{colors.ink}` background with `{colors.bg}` text.

The palette is intentionally tight. Introducing a fourth chromatic family (red, yellow, orange, lavender) shatters the editorial commitment. Stay inside emerald / navy / paper. The bg-2/3 and ink-2/3 variants exist for tonal nuance but should rarely be needed.

## Typography

### Font Family
The system loads several display serif families from Google Fonts (Bodoni Moda, Playfair Display, DM Serif Display, Rozha One, Yeseva One) plus Manrope as the supporting sans. **In practice, only Bodoni Moda is used for display** — the other serif families are loaded but dormant, reserved as future variants. Bodoni Moda is the canonical display face; the others are not part of the system's voice.

Bodoni Moda is run almost exclusively at **weight 900** — the heaviest cut. Weight 800 appears for small ornament words and tile titles (slightly less heavy so they don't compete with the primary headline). Weight 700 appears once or twice for the smallest ornament prepositions. There is no weight-500 Bodoni in the published system. The 900-weight commitment is what gives the system its theatrical-playbill voice.

Manrope handles everything else: body paragraphs at weight 500, labels / eyebrows / tags / captions at weight 700 or 800 in uppercase with 0.05em–0.18em letter-spacing. Manrope never appears at display scale; Bodoni never appears at chrome scale.

### Display, Body, and Chrome Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.numeral-jumbo}` | 460px | Bodoni Moda | 900 | Hero numeral on an inverse section-opener panel |
| `{typography.display-section}` | 200px | Bodoni Moda | 900 | Agenda / section-title hero |
| `{typography.display-cover}` | 184px | Bodoni Moda | 900 | Cover masthead title |
| `{typography.display}` | 130px | Bodoni Moda | 900 | Statement / pull-quote scale |
| `{typography.display-md}` | 128px | Bodoni Moda | 900 | KPI-row introductory headline |
| `{typography.display-sm}` | 120px | Bodoni Moda | 900 | Process-flow introductory headline |
| `{typography.headline-xl}` | 104px | Bodoni Moda | 900 | Chart / data introductory headline |
| `{typography.headline}` | 92px | Bodoni Moda | 900 | Routine slide headline |
| `{typography.ornament-word-lg}` | 84px | Bodoni Moda | 800 | Large ornament-bracketed word (statement variant) |
| `{typography.ornament-word}` | 76px | Bodoni Moda | 800 | Standard ornament-bracketed word (cover variant) |
| `{typography.ornament-word-sm}` | 68px | Bodoni Moda | 800 | Cover preposition between the double-rule brackets |
| `{typography.kpi-figure}` | 144px | Bodoni Moda | 900 | KPI-tile numeral |
| `{typography.kpi-figure-unit}` | 60px | Bodoni Moda | 800 | Unit suffix on a KPI numeral |
| `{typography.stat-figure}` | 92px | Bodoni Moda | 900 | Secondary stat numeral (in a side panel) |
| `{typography.stat-figure-unit}` | 48px | Bodoni Moda | 900 | Unit suffix on a secondary stat |
| `{typography.title-card-lg}` | 64px | Bodoni Moda | 800 | Title inside a large card / agenda-row name |
| `{typography.title-card}` | 48px | Bodoni Moda | 800 | Chart-card take-away title |
| `{typography.title-card-sm}` | 44px | Bodoni Moda | 800 | Statement-supporting cell title |
| `{typography.step-numeral}` | 80px | Bodoni Moda | 900 | Process-step ordinal |
| `{typography.step-title}` | 40px | Bodoni Moda | 800 | Process-step title (sits below a top rule) |
| `{typography.body-lg}` | 28px | Manrope | 500 | Lede / subtitle paragraph |
| `{typography.body}` | 26px | Manrope | 500 | Standard body paragraph |
| `{typography.body-sm}` | 24px | Manrope | 500 | Compact body in a tile / chart side panel |
| `{typography.eyebrow}` | 28px | Manrope | 800 / 0.18em | Section eyebrow above a headline |
| `{typography.label}` | 26px | Manrope | 700 / 0.08em | Masthead / footline label |
| `{typography.label-tight}` | 26px | Manrope | 700 / 0.05em | Cover top/bottom strings |
| `{typography.tag}` | 24px | Manrope | 800 / 0.12em | Inverse pill / tag (mark, delta, side-tag) |
| `{typography.caption}` | 24px | Manrope | 700 / 0.1em | Agenda-row kind label, chart x-axis, kpi label |
| `{typography.credit}` | 28px | Manrope | 700 / 0.18em | Author / org credit row |

### Defaults
- **Default size for a routine slide headline**: `{typography.headline}` (92px).
- **Default size for a hero / cover-scale moment**: `{typography.display-cover}` (184px) or `{typography.display-section}` (200px).
- **Default size for a body paragraph**: `{typography.body}` (26px) in Manrope weight 500.
- **Default size for a body paragraph inside a tile**: `{typography.body-sm}` (24px).
- **Default size for an eyebrow above a headline**: `{typography.eyebrow}` (28px) in Manrope 800 uppercase 0.18em.
- **Default size for a tag / pill / chip**: `{typography.tag}` (24px) in Manrope 800 uppercase 0.12em.
- **Default size for a KPI figure**: `{typography.kpi-figure}` (144px) with an optional 60px unit.
- **Default weight for any Bodoni display moment**: 900. The 800 variant is reserved for ornament words and tile titles, never for primary headlines.
- **Default weight for any Manrope body line**: 500.

When unsure, reach for `{typography.headline}` (92px) for the slide's primary headline. The 120–200px tier is reserved for section openers, statements, and KPI-row headlines — using it for routine headlines flattens the hierarchy.

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

- **Every primary Bodoni headline runs at weight 900 with negative letter-spacing (-0.01em to -0.03em) and tight line-height (0.9–0.95).** A weight-700 or weight-800 Bodoni headline reads as a sub-headline, not a primary moment.
- **Every Manrope label, eyebrow, tag, caption, footline, and credit element is UPPERCASE with letter-spacing of at least 0.05em.** Manrope in sentence case or with default tracking reads as web app body, not editorial chrome.
- **The double-rule ornament, when used, is bilateral — rules on both sides of the centered word.** A one-sided ornament breaks the bracket symmetry. The ornament can be downgraded to a single-rule or no-rule variant via `:root[data-ornament]`, but the default and recommended form is double.
- **Every section separator and tile divider is a 4px solid `{colors.ink}` rule.** Never 1px, never 2px, never colored beyond ink. The 4px weight is the system's structural rhythm.
- **Inverse tiles always carry `{colors.ink}` background with `{colors.bg}` text.** The alt paper tile carries `{colors.paper}` background with `{colors.ink}` text. Color combinations outside these pairings break the system's printed-ink discipline.
- **Bodoni numerals at jumbo scale (200px+) live on inverse navy panels.** Putting a 460px numeral on the emerald canvas is technically possible but visually breaks the panel-anchored playbill voice; the jumbo numerals belong inside ink panels.

### Typography Principles
The weight 900 + negative tracking + tight leading combination is the system's display voice. Switching any of those three properties (e.g., weight 700, or default tracking, or 1.2 leading) reads as a different design system. The serif/sans role split is strict: Bodoni never appears at body / label scale, Manrope never appears at display scale.

Italics are loaded in the Bodoni font request but not used in the published system — keep them out unless intentionally introducing a new pattern. Underline is not used. Emphasis is communicated through size, color inversion, and ornamentation.

## Layout

### Canvas System
The system targets a fixed **1920×1080** canvas. Slides are `<section class="slide">` elements at exact width/height. Rendering relies on `deck-stage.js` to scale the canvas to fit the viewport. The canvas is paper-stock, not a viewport — designed for projector, printer, or PDF export at 16:9.

### Padding Scale
| Token | Value | Use |
|---|---|---|
| `{spacing.pad-default}` | 110px 110px 70px | Standard content slide (asymmetric — slightly less bottom for footline) |
| `{spacing.pad-cover}` | 56px 110px | Cover slide (less top padding to give masthead room) |
| `{spacing.pad-closing}` | 80px 110px | Closing slide |
| `{spacing.masthead-inset}` | 56px top, 80px sides | Absolute masthead / footline inset on cover and closing |

### Chrome Anatomy
The cover and closing carry a **masthead** at top (a Manrope flex row with two label strings on opposite sides) and a **footline** at bottom (a matching row). Content slides typically skip the masthead and footline, leaning on the 110px-top padding to give the headline space. When the masthead is used, it lives at `top: 56px, left/right: 80px`.

### Card and Tile Treatment
The system has **no border-radius anywhere**. Cards, tiles, kpi panels, ornament rules, mark pills, tag pills — all strict rectangles. The only round shapes are the natural curves of the Bodoni glyphs themselves. The visual rhythm comes entirely from rectangle composition and 4px ink rules.

### Rule Weights
| Weight | Use |
|---|---|
| 2px | Chart grid lines (subtle, semi-transparent) |
| 4px | Universal structural rule — section separators, list-row borders, tile top rules |
| 5px | Cover ornament rules (slightly heavier so they hold weight next to the 184px display headline) |
| 18px height (with 4px rule top + 4px rule bottom) | Double-rule ornament span |

The 4px weight is the system's default; reach for it unless the moment specifically needs the cover's heavier 5px rules.

## Depth and Elevation

### Flat, No Shadows
The system uses **zero shadows**. No box-shadow, no text-shadow, no filter blur, no gradient. Elevation is communicated entirely through:

1. **Color-block inversion** — a navy tile on the emerald canvas is the system's "elevated" element. Inversion is the depth language.
2. **4px ink rules** — sections are separated by 4px solid navy lines that read as paper-fold creases between regions.
3. **Solid panels with no border-radius** — the strict-rectangle treatment combined with full inverse fill gives tiles the weight of printed ink blocks.

There is no soft-glow, no glass, no neumorphism. Adding box-shadow shatters the printed-ink discipline.

### Section-Opener Panel
A signature elevation device: a slide can be split into a full-bleed two-column grid where the left side is a solid `{colors.ink}` panel holding a jumbo Bodoni numeral (`{typography.numeral-jumbo}` at 460px) and the right side is the standard emerald canvas with headline + lede + category marks. The panel reads as a magazine title-page opening — heavy, anchored, ceremonial. Treat this as an opener pattern, not a routine slide layout.

## Shapes and Treatment

### Border Radius
**Zero.** Every shape is a strict rectangle. Pills, tags, tiles, panels, bars, mastheads, footlines, ornament words — all square corners.

### Border / Rule Style
- **4px solid `{colors.ink}`** — universal structural rule. Section separators, list-row borders, tile internal rules.
- **5px solid `{colors.ink}`** — the cover ornament's slightly heavier rule.
- **4px solid `currentColor`** — used inside tiles where the rule should match the tile's text color (e.g., a paper tile's internal rule is `{colors.ink}`; an ink tile's internal rule is `{colors.bg}`).

Rules are never dashed, never dotted, never colored beyond the ink / currentColor pattern.

### Decorative Element Types

**Double-Rule Ornament** (`{components.ornament-double-rule}`) — The system's signature. A centered serif word framed by two stacked 4px horizontal rules on each side (3px between them). Used on the cover ("The [word] of [word]" framing), on statement slides (around a small connector word), and anywhere a typographic moment needs theatrical bracketing. Configurable to single-rule or no-rule via `:root[data-ornament]`.

**Vertical Side-Bracket** (`{components.ornament-vertical}`) — A smaller inline variant: a pair of stacked 4px rules on the left and a matching pair on the right of a small serif preposition. Used inline within a sentence rather than as a centered span.

**Masthead / Footline** (`{components.masthead}`, `{components.footline}`) — Absolutely positioned flex rows at top/bottom of cover and closing slides. Two Manrope uppercase strings on opposite sides (e.g., publication name + date; section + page number). Establishes the magazine-page identity.

**Inverse Tile** (`{components.inverse-tile}`) — A solid `{colors.ink}` rectangle holding `{colors.bg}` text. Used as a chart-card container, a kpi tile, a process step, a side panel. No border-radius, no shadow.

**Paper Tile** (`{components.paper-tile}`) — The alt variant: solid `{colors.paper}` with `{colors.ink}` text. Used in rotation across a row of inverse tiles to break monotony (e.g., a four-step process flow alternates ink → paper → ink → paper).

**Mark Pill** (`{components.mark-pill}`) — A small ink-on-bg pill used as a category mark or section tag in the bottom margin of a section opener. Strict rectangle.

**Tag Pill** (`{components.tag-pill}`) — Slightly smaller pill variant used inside chart sides and kpi tiles to mark a takeaway or stat type.

**Delta Pill** (`{components.delta-pill}`) — A bg-on-ink (or inverted ink-on-bg when inside a paper tile) chip showing a directional change indicator (e.g., "↑ 12% YoY"). Lives at the corner of a kpi tile.

**Agenda Row** (`{components.agenda-row}`) — A three-column grid row separated above and below by 4px ink rules. Holds a serif ordinal in the left column, a serif name in the middle, and a Manrope kind label in the right. Stacked agenda rows form the system's table-of-contents pattern.

**Chart Card** (`{components.chart-card}`) — A navy inverse panel holding a bar chart on emerald + paper bars. Y-axis labels in Bodoni; x-axis labels in Manrope. Grid lines are 2px at 22% opacity emerald-on-navy. The panel reads as a magazine data-spread.

**Ornament Numeral Panel** (`{components.ornament-numeral-panel}`) — A full-bleed inverse half-slide holding a single Bodoni numeral at 460px. Topbar / footline strings sit in the corners. Used as a section-opener device only.

## Do's and Don'ts

### Do
- Run every Bodoni display headline at weight 900 with negative letter-spacing (-0.01em to -0.03em) and tight line-height (0.9–0.95). The combination is the system's voice.
- Run every Manrope label / eyebrow / tag / caption / footline in uppercase with at least 0.05em letter-spacing. Manrope in sentence case loses the editorial register.
- Default slide background to `{colors.bg}` (emerald). Reach for `{colors.ink}` as a full slide surface only for section openers and closing moments.
- Use 4px solid `{colors.ink}` rules for every section separator, list border, tile divider. The 4px weight is the system's structural rhythm.
- Reach for the double-rule ornament when a typographic moment needs theatrical framing — especially around small connector words ("of", "in", "for") between two display headlines.
- Use inverse tiles (`{colors.ink}` bg with `{colors.bg}` text) as the default elevated element. Rotate in paper tiles to break a row of all-inverse fills.
- Scale display type aggressively — 130–460px for hero, section-opener, and statement moments. The system rewards scale.
- Pair ink-on-bg with bg-on-ink for color flips. Do not introduce a third color flip (paper-on-ink, ink-on-paper) without a clear semantic reason.
- Keep every shape a strict rectangle. The no-radius commitment is the system's signature alongside the double-rule ornament.

### Don't
- Don't add box-shadow, text-shadow, gradient, or blur to any element. The system is flat printed-ink only.
- Don't introduce a third typeface beyond Bodoni Moda and Manrope. The other serif families in the Google Fonts request (Playfair, DM Serif, Rozha, Yeseva) are loaded but not part of the published voice — adding them shatters the Bodoni commitment.
- Don't run Bodoni at weight 500 or lighter. The system commits to 900 (default), 800 (ornament words, tile titles), and 700 (small prepositions only).
- Don't render Manrope in sentence case or without letter-spacing. Manrope is always uppercase chrome.
- Don't introduce a fourth chromatic family. The emerald / navy / paper triad is the entire palette.
- Don't use border-radius on any element. Zero radius is the system's signature.
- Don't use 1px or 2px structural rules. The 4px weight is the structural default; 2px is reserved for subtle chart grid lines.
- Don't place a 460px numeral on the emerald canvas without an ink panel anchor. Jumbo numerals live on inverse navy panels.
- Don't crowd a slide with six small elements. One display headline + 3–4 supporting tiles is the rhythm; more elements need a smaller scale and break the editorial register.
- Don't omit the masthead / footline on cover and closing slides. The chrome is what makes them read as magazine title pages.

## Responsive Behavior

This is a **fixed 1920×1080 presentation system** rendered through `deck-stage.js`. The canvas is not responsive in the CSS sense — there are no media queries, no breakpoints, no fluid sizing. Every measurement is in fixed pixels at 1920×1080.

### Scaling Behavior
`deck-stage.js` wraps each `<section class="slide">` and scales the 1920×1080 canvas uniformly to fit the browser viewport, letterboxing as needed. Type, padding, gaps, and rule weights are all fixed pixels and scale proportionally with the canvas.

### Presenter Behavior
Navigation is delegated to `deck-stage.js`. Each `<section class="slide">` is one frame; the runtime handles transitions.

### Print / Export
Fixed-pixel measurements inside a 1920×1080 canvas export cleanly to PDF at 16:9. Bodoni Moda renders well at print resolution because the heavy display weight carries the page even at large physical sizes.

### Ornament Variant Switch
The `:root[data-ornament]` attribute controls a global ornament style: `"double"` (default, two stacked rules), `"single"` (one rule centered), or `"none"` (no rule, word floats alone). This is a presentation-level decision per deck, not per slide.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Chinese Face | Weight | Why |
|---|---|---|---|
| Display headline (92–460px) | 霞鹜文楷 LXGW WenKai (with Noto Serif SC fallback at 900) | 400 / 900 | LXGW WenKai's hand-lettered warmth is the closest Chinese analog to Bodoni Moda's theatrical-playbill voice; Noto Serif SC at weight 900 carries the structural mass at jumbo sizes |
| Stat / KPI figure (144px+) | 思源宋体 Noto Serif SC | 900 | Mincho weight 900 provides the printed-ink mass Bodoni Moda achieves at 900 |
| Body paragraph (24–28px) | 思源宋体 Noto Serif SC | 400 | Mincho body voice for warm magazine-spread reading |
| Eyebrow / label / tag (24–28px) | 思源黑体 Noto Sans SC | 700–800 | Replaces Manrope for chrome-layer Chinese; geometric humanist quality |
| Tile mark / pill / caption | 思源黑体 Noto Sans SC | 700 | Maintains the uppercase-tracked chrome feel for inverse pills and tags |

### Mixed-Content Strategy

Use **Strategy C** — keep Bodoni Moda as the Latin display face and let CJK glyphs fall through to LXGW WenKai (display) or Noto Serif SC (body). The Bodoni Moda commitment at weight 900 is the entire brand identity of Emerald Editorial; replacing it with a CJK family would break the fashion-magazine / 19th-century playbill register that defines the deck. Stack:

```css
/* Bodoni Moda roles (every display moment) */
font-family: 'Bodoni Moda', 'LXGW WenKai TC', 'Noto Serif SC', Georgia, serif;
/* Manrope roles (every chrome / body moment) */
font-family: 'Manrope', 'Noto Sans SC', system-ui, sans-serif;
```

The per-glyph fallback strategy lets Latin words render in Bodoni 900 (with the theatrical compression that gives the system its voice) and Chinese characters render in LXGW WenKai or Noto Serif SC. Baseline mismatch at jumbo sizes (200–460px) is the biggest watchpoint — Bodoni Moda at -0.03em tracking sits visually denser than LXGW WenKai, so a mixed-script numeral panel like `第 3 期` may show wobble. For section-opener panels with jumbo numerals, prefer all-numeric (Bodoni) or all-Chinese (LXGW WenKai) lines.

### Loading

Add to the existing Google Fonts `<link>` (or as a second link tag):

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

LXGW WenKai TC is the version on Google Fonts (ships both traditional and simplified glyphs).

### Universal CJK Adjustments

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

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

### Aesthetic Notes for This System

Emerald Editorial's whole voice is "fashion masthead / 19th-century theatrical playbill" — Bodoni Moda weight 900 at extreme scale with the double-rule ornament bracketing centered words. The Chinese equivalent of that theatrical heaviness is **LXGW WenKai at large display sizes** (its brush-warmth replicates Bodoni's hand-set character) with **Noto Serif SC at weight 900 for jumbo numerals** (where pure mass matters more than warmth). Avoid Noto Sans SC for display — the geometric grotesque flattens the playbill voice into "modern corporate."

The double-rule ornament works in Chinese — bracket a single Chinese word (e.g., 「春」) between the 4px stacked rules and let LXGW WenKai's warmth carry the theatrical bracket. For the "The X of Y" cover convention, Chinese reads naturally as `「X」之「Y」` or `X 与 Y`, with the connector preposition (之 / 与 / 的) replacing the Latin "of" inside the small-prep slot. The connector word should use LXGW WenKai at weight 400 (matching the ornament-word-sm role in Latin).

Manrope's role as the chrome layer (uppercase + 0.08em–0.18em tracking) translates to **思源黑体 Noto Sans SC weight 700–800 with 0.05em positive tracking** for Chinese. Don't try to fake uppercase — drop the `text-transform: uppercase` rule on CJK runs and let the geometric humanist quality of Noto Sans SC carry the chrome feel through weight and tracking alone.

### Known CJK Gap

The system's commitment to Bodoni Moda weight 900 at 460px (jumbo numerals on inverse navy panels) is the hardest to translate — there is no Chinese face on the Google Fonts CDN that delivers Bodoni 900's optical heaviness at that scale. Noto Serif SC at weight 900 is the closest, but the contrast profile of Han glyphs at 460px reads visually heavier than Bodoni numerals, which can overwhelm the navy panel. For jumbo-numeral section openers in Chinese, consider: (1) using a Chinese numeral character (一二三四五六七八九十) which sits visually lighter than Western digits, or (2) keeping the numeral in Bodoni (Latin) and letting the panel label below it carry the Chinese context. The pure-Chinese jumbo numeral on this system is the riskiest moment and benefits from per-slide manual review.

## Iteration Guide

1. Any new display headline is Bodoni Moda at weight 900 with negative letter-spacing and tight leading. Pick the size from the display ladder (92 / 104 / 120 / 128 / 130 / 184 / 200) — do not invent a new size.
2. Any new chrome line (label, eyebrow, tag, caption) is Manrope at weight 700 or 800 uppercase with 0.05em–0.18em letter-spacing. Pick the size from the chrome ladder (24 / 26 / 28).
3. Any new section separator or list-row border is a 4px solid `{colors.ink}` rule. No 1px / 2px / 3px structural rules.
4. Any new tile uses the inverse-fill pattern (`{colors.ink}` bg with `{colors.bg}` text) or the paper-fill pattern (`{colors.paper}` bg with `{colors.ink}` text). Mix the two in rotation across a row of tiles.
5. Any new pill / tag / chip is a strict rectangle (no border-radius) in the inverse-fill or bg-fill color combination from `{components.tag-pill}` / `{components.delta-pill}`.
6. Any new KPI figure is `{typography.kpi-figure}` (144px) with an optional `{typography.kpi-figure-unit}` (60px) suffix. Smaller KPI sizes are not in the system.
7. Any new ornament moment uses the double-rule treatment by default. Switch to single or none only via the `:root[data-ornament]` global, not per-element.
8. Any new section-opener uses the half-bleed inverse panel + jumbo numeral pattern. The numeral lives on the navy panel; the right half holds the eyebrow + headline + lede + marks.
9. Any new color must come from `{colors.bg}` / `{colors.ink}` / `{colors.paper}` (or the reserved bg-2/3 / ink-2/3 variants if tonal nuance is needed). Do not introduce a yellow, red, or third accent.
10. When the layout feels crowded, increase the display headline size rather than adding more elements. The system rewards bigger type, not more pieces.

## Known Gaps

- The Google Fonts request loads Bodoni Moda, Playfair Display, DM Serif Display, Rozha One, Yeseva One, and Manrope. **In practice only Bodoni Moda and Manrope are used.** The other four serif families are dormant — loaded but not referenced in the CSS. They are available as alternate display voices but must be wired in explicitly.
- The system depends on `deck-stage.js` for canvas scaling and slide navigation. The script is not described in this design.md — treat it as a runtime dependency.
- The `:root[data-ornament]` switch (`double` / `single` / `none`) is a global presentation setting. It cannot be applied per-slide or per-ornament — switching variants applies deck-wide.
- The ink-2 / ink-3 and bg-2 / bg-3 color tokens are defined but not actively used in the published CSS. They are reserved for tonal variation but currently dormant.
- The bar chart uses hand-set bar heights (CSS `%`). There is no data-binding layer — extending the chart requires manually computing percentages.
- Offline rendering will fall back to system serif (likely Georgia) for Bodoni and system sans (likely SF/Segoe) for Manrope. The Bodoni fallback dramatically flattens the display voice; self-hosting recommended for offline / print reliability.
- The 92px Bodoni headlines maintain WCAG AA contrast at navy-on-emerald and emerald-on-navy, but smaller text (24–28px Manrope) on the same color pairings approaches the contrast floor. Keep small text in navy-on-emerald (the more contrastful direction) when possible.
- The masthead and footline strings are hardcoded placeholders in the source (publication name, date, page numbers). They must be edited per-deck.
- The system has no `@media print` rule and no responsive breakpoints. It is fixed 1920×1080 and relies on `deck-stage.js` for any viewport adaptation.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.c` — 1·6장 — 예: `<p class="eye c">`
- `.dr` — 1·4·6장 — 예: `<i class="dr">`
- `.em` — 1·2·3·4·5·6장 — 예: `<section class="slide em">`
- `.ens` — 1장 — 예: `<p class="ens">`
- `.eye` — 1·2·3·4·5·6장 — 예: `<p class="eye c">`
- `.foot` — 1·5장 — 예: `<div class="mast foot">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.marks` — 1장 — 예: `<div class="marks">`
- `.mast` — 1·5장 — 예: `<div class="mast">`
- `.mk` — 1·2·5·6장 — 예: `<span class="mk">`
- `.o1` — 1장 — 예: `<div class="orn o1">`
- `.orn` — 1·4장 — 예: `<div class="orn o1">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide em">`
- `.t1` — 1장 — 예: `<h1 class="t1">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.agenda` — 2·6장 — 예: `<div class="agenda">`
- `.ar` — 2·4·6장 — 예: `<div class="ar" data-s="1">`
- `.arow` — 2장 — 예: `<div class="arow note">`
- `.bt` — 2·5·6장 — 예: `<button class="mk bt" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03…`
- `.def` — 2장 — 예: `<p class="def">`
- `.dp` — 2·3·4·6장 — 예: `<span class="dp">`
- `.fig` — 2장 — 예: `<div class="tile paper fig">`
- `.hd` — 2·3·4·6장 — 예: `<h2 class="hd">`
- `.kind` — 2·5·6장 — 예: `<span class="kind">`
- `.note` — 2장 — 예: `<div class="arow note">`
- `.nr` — 2·4·5·6장 — 예: `<p class="nr">`
- `.ol` — 2장 — 예: `<button class="mk bt ol" data-act="reset">`
- `.paper` — 2·3·4·6장 — 예: `<div class="tile paper fig">`
- `.sn` — 2·4·5·6장 — 예: `<b class="sn">`
- `.tag` — 2·3·4·5·6장 — 예: `<span class="tag">`
- `.tile` — 2·3·4·6장 — 예: `<div class="tile paper fig">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.bar` — 3장 — 예: `<i class="bar e" style="height:139px">`
- `.bv` — 3장 — 예: `<span class="bv">`
- `.ccard` — 3장 — 예: `<div class="ccard">`
- `.cl` — 3장 — 예: `<div class="cl">`
- `.ct` — 3장 — 예: `<b class="ct">`
- `.e` — 3장 — 예: `<i class="k e">`
- `.grp` — 3장 — 예: `<div class="grp">`
- `.inv` — 3·4·6장 — 예: `<div class="tile inv kp">`
- `.inv2` — 3장 — 예: `<span class="tag inv2">`
- `.k` — 3장 — 예: `<i class="k e">`
- `.kf` — 3장 — 예: `<b class="kf">`
- `.kp` — 3장 — 예: `<div class="tile inv kp">`
- `.kpis` — 3장 — 예: `<div class="kpis">`
- `.lg` — 3장 — 예: `<span class="lg">`
- `.p` — 3장 — 예: `<i class="k p">`
- `.plot` — 3장 — 예: `<div class="plot">`
- `.src` — 3장 — 예: `<p class="src">`
- `.trow` — 3장 — 예: `<div class="trow">`
- `.yax` — 3장 — 예: `<div class="yax">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cc` — 4장 — 예: `<div class="tile inv cc">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.lst` — 4장 — 예: `<div class="lst">`
- `.o4` — 4장 — 예: `<div class="orn o4">`
- `.qt` — 4장 — 예: `<div class="qt">`
- `.sm` — 4·6장 — 예: `<div class="ar sm">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<p class="bl">`
- `.blank` — 5장 — 예: `<button class="tag blank" data-blank aria-pressed="false">`
- `.bls` — 5장 — 예: `<div class="bls">`
- `.em2` — 5장 — 예: `<span class="tag em2">`
- `.em3` — 5장 — 예: `<span class="mk em3">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.jumbo` — 5장 — 예: `<b class="jumbo">`
- `.ot` — 5장 — 예: `<span class="ot">`
- `.panel` — 5장 — 예: `<div class="panel">`
- `.pc` — 5장 — 예: `<div class="pc pcl">`
- `.pcl` — 5장 — 예: `<div class="pc pcl">`
- `.pcr` — 5장 — 예: `<div class="pc pcr">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.quiz` — 5장 — 예: `<div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해…`
- `.r` — 5장 — 예: `<div class="eye r">`
- `.row` — 5장 — 예: `<button class="row" data-opt="0">`
- `.rows` — 5장 — 예: `<div class="rows">`
- `.rt` — 5장 — 예: `<button class="mk bt rt" data-act="retry">`
- `.words` — 5장 — 예: `<div class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="tile inv d6 a">`
- `.b` — 6장 — 예: `<div class="tile paper d6 b">`
- `.ch6` — 6장 — 예: `<div class="ch6" id="ee-chip">`
- `.d6` — 6장 — 예: `<div class="tile inv d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.g6` — 6장 — 예: `<div class="agenda g6">`
- `.o6` — 6장 — 예: `<div class="o6" id="ee-orn">`
- `.sw6` — 6장 — 예: `<span class="sw6">`
- `.tl6` — 6장 — 예: `<div class="tl6" id="ee-tile">`

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="emerald-editorial">
<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=Bodoni+Moda:opsz,wght@6..96,800;6..96,900&family=Manrope:wght@500;700;800&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/emerald-editorial.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide em">
  <div class="mast"><span>초등 과학 · 6학년 2학기</span><span>1단원 · 3~4차시</span></div>
  <div class="orn o1"><i class="dr"></i><span>계절의 변화</span><i class="dr"></i></div>
  <p class="eye c">학습 목표</p>
  <h1 class="t1">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <p class="ens">Sun, Shadow & Temperature</p>
  <div class="marks"><span class="mk">태양 고도</span><span class="mk">그림자 길이</span><span class="mk">기온</span></div>
  <div class="mast foot"><span>00초등학교</span><span>2026</span></div>
</section>
<section class="slide em" data-steps="4">
  <div class="eye">측정 준비</div>
  <h2 class="hd">태양 고도 측정기 만들기</h2>
  <div class="tile paper fig"><span class="dp">FIG. 01</span><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></div>
  <div class="arow note"><span class="tag">NOTE</span><p>막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <p class="def"><b>태양 고도</b> — 태양이 지표면과 이루는 각</p>
  <div class="agenda"><div class="ar" data-s="1"><b class="sn">I</b><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div><span class="kind">준비</span></div><div class="ar" data-s="2"><b class="sn">II</b><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div><span class="kind">수직</span></div><div class="ar" data-s="3"><b class="sn">III</b><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div><span class="kind">실</span></div><div class="ar" data-s="4"><b class="sn">IV</b><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div><span class="kind">각도</span></div></div>
  <div class="btns"><button class="mk bt" data-act="step">다음 단계 →</button><button class="mk bt ol" 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>
  <p class="nr">버튼 규칙 없음 → 마크 칩 모양으로 표현</p>
</section>
<section class="slide em">
  <div class="eye">측정 결과</div>
  <h2 class="hd">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="kpis"><div class="tile inv kp"><span class="dp">남중 시각</span><b class="kf">12:30</b><p>태양 고도가 가장 높아요 무렵 · 남중</p></div><div class="tile paper kp"><span class="dp">남중 방향</span><b class="kf">정남</b><p>남중할 때 태양의 위치 쪽</p></div><div class="tile inv kp"><span class="dp">최고 기온</span><b class="kf">14:30</b><p>기온이 가장 높아요 무렵</p></div><div class="tile paper kp"><span class="dp">가장 긴 그림자</span><b class="kf">9:30</b><p>그림자가 가장 길어요 · 15:30</p></div></div>
  <div class="ccard">
    <div class="cl"><span class="tag inv2">예시 값</span><b class="ct">측정 시각별 태양 고도, 그림자 길이, 기온</b><span class="lg"><i class="k e"></i>태양 고도(°)</span><span class="lg"><i class="k p"></i>그림자 길이(cm)</span></div>
    <div class="plot"><div class="yax"><span>60°</span><span>30°</span><span>0°</span></div><div class="grp"><i class="bar e" style="height:139px"><span class="bv">38</span></i><i class="bar p" style="height:189px"><span class="bv">12.9</span></i><b>9:30</b></div><div class="grp"><i class="bar e" style="height:176px"><span class="bv">48</span></i><i class="bar p" style="height:133px"><span class="bv">9.1</span></i><b>10:30</b></div><div class="grp"><i class="bar e" style="height:202px"><span class="bv">55</span></i><i class="bar p" style="height:103px"><span class="bv">7</span></i><b>11:30</b></div><div class="grp"><i class="bar e" style="height:209px"><span class="bv">57</span></i><i class="bar p" style="height:94px"><span class="bv">6.4</span></i><b>12:30</b></div><div class="grp"><i class="bar e" style="height:198px"><span class="bv">54</span></i><i class="bar p" style="height:106px"><span class="bv">7.2</span></i><b>13:30</b></div><div class="grp"><i class="bar e" style="height:172px"><span class="bv">47</span></i><i class="bar p" style="height:138px"><span class="bv">9.4</span></i><b>14:30</b></div><div class="grp"><i class="bar e" style="height:136px"><span class="bv">37</span></i><i class="bar p" style="height:197px"><span class="bv">13.4</span></i><b>15:30</b></div></div>
    <div class="trow"><span>기온(℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div>
  </div>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
</section>
<section class="slide em">
  <div class="eye">관계 정리</div>
  <h2 class="hd">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="tile inv cc"><span class="dp">HIGH</span><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="tile paper cc"><span class="dp">LOW</span><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
  <div class="tbl"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
  <div class="lst"><span class="tag">남중</span><div class="ar sm"><b class="sn">I</b><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p></div><div class="ar sm"><b class="sn">II</b><p>이때의 태양 고도를 남중 고도라고 해요</p></div></div>
  <div class="qt"><div class="orn o4"><i class="dr"></i><span>오늘의 정리</span><i class="dr"></i></div><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p></div>
  <p class="nr">표 규칙 없음 → 목록 행으로 표현</p>
</section>
<section class="slide em">
  <div class="panel">
    <div class="pc pcl">확인하기</div><div class="pc pcr">00초등학교</div>
    <b class="jumbo">?</b>
    <span class="tag em2">빈칸을 눌러 확인해요</span>
    <div class="bls"><p class="bl"><button class="tag blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="bl"><button class="tag blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="bl"><button class="tag blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p></div>
    <div class="words"><span class="mk em3">태양 고도</span><span class="mk em3">남중 고도</span><span class="mk em3">그림자 길이</span><span class="mk em3">기온</span></div>
  </div>
  <div class="eye r">배운 내용을 확인해 볼까요?</div>
  <div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="rows"><button class="row" data-opt="0"><b class="sn">I</b><span class="ot">오전 9시 30분</span><span class="kind">OPTION A</span></button><button class="row" data-opt="1"><b class="sn">II</b><span class="ot">낮 12시 30분 무렵</span><span class="kind">OPTION B</span></button><button class="row" data-opt="2"><b class="sn">III</b><span class="ot">오후 3시 30분</span><span class="kind">OPTION C</span></button></div>
    <p class="fb" data-fb></p>
    <button class="mk bt rt" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="mast foot r"><span>계절의 변화</span><span>05 / 06</span></div>
  <p class="nr">빈칸 규칙 없음 → 태그 칩으로 표현</p>
</section>
<section class="slide em">
  <div class="eye">디자인 안내</div>
  <h2 class="hd">이 디자인 사용 설명서</h2>
  <div class="agenda g6"><div class="ar"><b class="sn">I</b><div><h3>한눈에</h3><p>패션 잡지 표지 + 19세기 극장 포스터. <b>에메랄드 바탕 · 남색 잉크 · 귀리 종이</b> 셋에 각진 모서리, 굵은 4px 선으로 칸을 봉인해요.</p></div><span class="kind"></span></div><div class="ar"><b class="sn">II</b><div><h3>색</h3><p><span class="sw6"><span><i style="background:#3CD896"></i>에메랄드</span><span><i style="background:#0F1A5C"></i>남색 잉크</span><span><i style="background:#F1E9D6"></i>귀리 종이</span></span></p></div><span class="kind"></span></div><div class="ar"><b class="sn">III</b><div><h3>글꼴</h3><p>제목·숫자 Bodoni Moda 900 → Ghanachocolate<br>본문·라벨 Manrope → Paperlogy 4Regular</p></div><span class="kind"></span></div><div class="ar"><b class="sn">IV</b><div><h3>이렇게 쓰면 좋아요</h3><p>발표회 포스터, 독서·작품 소개처럼 무게 있는 장면. 타일은 반전(남색) ↔ 종이를 번갈아.</p></div><span class="kind"></span></div></div>
  <div class="tile inv d6 a"><div class="dh"><h3>이중 선 장식</h3><button class="mk bt sm" data-demo="#ee-orn" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>가운데 낱말 양쪽에 5px 선 두 줄(3px 간격).</p><div class="o6" id="ee-orn"><i class="dr"></i><span>계절의 변화</span><i class="dr"></i></div></div>
  <div class="tile paper d6 b"><div class="dh"><h3>타일 교대</h3><button class="mk bt sm" data-demo="#ee-tile" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>이웃한 타일은 남색 반전 ↔ 종이를 번갈아 놓아요.</p><div class="tl6" id="ee-tile"><span class="tile">57°</span><span class="tile">12:30</span><span class="tile">정남</span></div></div>
  <div class="tile inv d6 c"><div class="dh"><h3>칩 세 가지</h3><button class="mk bt sm" data-demo="#ee-chip" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>마크 칩(핵심 낱말) · 태그 칩(분류) · 델타 칩(변화) — 모두 각진 사각.</p><div class="ch6" id="ee-chip"><span class="mk">태양 고도</span><span class="tag">측정</span><span class="dp">▲ +19°</span></div></div>
  <p class="nr">버튼 규칙 없음 → 마크 칩 모양으로 표현</p>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><button class="dk-next" aria-label="다음">→</button></nav>
  </main>
</div>

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* --- 토큰 --- */
:root{--bg:#3CD896;--ink:#0F1A5C;--paper:#F1E9D6;--rule:4px solid #0F1A5C}
.slide{font-family:'Manrope',var(--kb),sans-serif;font-weight:500}
.slide>*,.panel>*{position:absolute}
.em{background:var(--bg);color:var(--ink)}
.mast,.eye,.tag,.mk,.dp,.kind,.pc,.ens{font-family:'Manrope',var(--kb),sans-serif;text-transform:uppercase}
.sn,.jumbo,.kf{font-family:'Bodoni Moda',var(--kt),serif;font-weight:900}
h3,.hd,.t1,.q,.qt p,.arow p,.ct{font-family:'Bodoni Moda',var(--kt),serif;font-weight:var(--wt);letter-spacing:0}
.nr{left:110px;bottom:24px;font-size:18px;opacity:.7}
.mast{left:80px;right:80px;top:56px;display:flex;justify-content:space-between;font-weight:700;font-size:26px;letter-spacing:.05em}
.mast.foot{top:auto;bottom:56px}
.eye{left:110px;top:90px;font-weight:800;font-size:28px;letter-spacing:.18em}
.eye.c{left:0;right:0;text-align:center}
.tag,.mk{background:var(--ink);color:var(--bg);font-weight:800;letter-spacing:.1em}
.tag{display:inline-block;align-self:flex-start;padding:8px 20px;font-size:24px}
.mk{display:inline-block;padding:10px 24px;font-size:28px}
.hd{left:110px;right:110px;top:136px;font-size:84px;line-height:1.08;white-space:nowrap}
.tile.inv{background:var(--ink);color:var(--bg)}
.tile.paper{background:var(--paper);color:var(--ink)}
.tile{position:relative}
.dp{display:inline-block;padding:6px 14px;font-weight:800;font-size:22px;letter-spacing:.08em}
.inv .dp{background:var(--bg);color:var(--ink)}
.paper .dp{background:var(--ink);color:var(--bg)}
.bt{border:4px solid var(--ink)}
.bt.ol{background:transparent;color:var(--ink)}
.bt:disabled{opacity:.3}
.kind{justify-self:end;font-weight:700;font-size:22px;letter-spacing:.1em}

/* --- 이중 선 장식: 가운데 단어 + 양쪽 5px 선 두 줄(3px 간격) --- */
.orn{display:flex;align-items:center;gap:40px}
.orn span{font:800 76px/1.1 'Bodoni Moda',var(--kt),serif;letter-spacing:0;white-space:nowrap}
.dr{flex:1;border-top:5px solid var(--ink)}
.dr::after{content:'';display:block;margin-top:3px;border-top:5px solid var(--ink)}

/* --- 1. 표지: 마스트헤드 + 이중 선 속 단원 + 눈썹 + 학습 목표(display-cover) + 영문 + 마크 칩 + 꼬리줄 --- */
.o1{left:110px;right:110px;top:150px}
.eye.c{top:300px}
.t1{left:0;right:0;top:350px;text-align:center;font-size:132px;line-height:1.16;white-space:nowrap}
.t1 .gk{font-style:normal}
.ens{left:0;right:0;top:680px;text-align:center;font-weight:700;font-size:28px;letter-spacing:.18em}
.marks{left:0;right:0;top:770px;display:flex;justify-content:center;gap:18px}

/* --- 2. 흐름: 종이 타일 속 측정기 그림 + 봉인된 NOTE 행 | 정의 + 목록 행 4단계(Bodoni 서수 · 4px 윗선, 마지막 행 봉인) + 마크 칩 버튼 --- */
.fig{left:110px;top:270px;width:860px;padding:18px 30px 8px;
  --g-ink:var(--ink);--g-acc:var(--ink);--g-stick:var(--ink);--g-board:var(--bg);--g-ruler:#fff;--g-prot:rgba(60,216,150,.35);--g-shadow:var(--ink);--g-font:'Manrope',var(--kb),sans-serif;--g-sw:2.5}
.fig .dp{position:absolute;right:20px;top:18px}
.arow{display:grid;grid-template-columns:170px 1fr;align-items:center;border-top:var(--rule);border-bottom:var(--rule);padding:16px 0}
.note{left:110px;width:860px;top:880px}
.note p{font-size:34px;line-height:1.25}
.def{left:1030px;right:110px;top:270px;font-size:28px;line-height:1.45}
.def b{font-weight:800}
.agenda{left:1030px;right:110px;top:330px;border-bottom:var(--rule)}
.ar{display:grid;grid-template-columns:100px 1fr 120px;gap:10px;align-items:baseline;padding:14px 0;border-top:var(--rule)}
.slide[data-step]:not([data-step="0"]) .agenda .ar:not(.on){opacity:.35}
.ar .sn{font-size:48px;line-height:1}
.ar h3{font-size:40px;line-height:1.1}
.ar p{margin-top:4px;font-size:26px;line-height:1.45}
.btns{left:1030px;right:110px;top:870px;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.cap{width:100%;font-weight:700;font-size:26px}

/* --- 3. 숫자와 그래프: KPI 타일 4개(반전 ↔ 종이) + 남색 차트 카드(에메랄드 = 태양 고도, 종이 = 그림자 길이, 2px 22% 격자) + 기온 숫자 줄 --- */
.kpis{left:110px;right:110px;top:260px;display:grid;grid-template-columns:repeat(4,1fr)}
.kp{padding:22px 26px;display:flex;flex-direction:column;gap:8px}
.kf{font-size:104px;line-height:.95;letter-spacing:-.02em}
.kp p{font-size:26px;line-height:1.4}
.ccard{left:110px;right:110px;top:530px;background:var(--ink);color:var(--bg);padding:22px 40px 18px;display:flex;flex-direction:column;gap:6px}
.cl{display:flex;align-items:center;gap:26px}
.tag.inv2{background:var(--bg);color:var(--ink)}
.ct{margin-right:auto;font-size:34px}
.lg{font-weight:700;font-size:22px;letter-spacing:.06em;text-transform:uppercase}
.k{display:inline-block;width:22px;height:16px;margin-right:10px;vertical-align:middle}
.k.e{background:var(--bg)}.k.p{background:var(--paper)}
.plot{position:relative;height:270px;display:grid;grid-template-columns:90px repeat(7,1fr);align-items:end;border-bottom:4px solid var(--bg);background:repeating-linear-gradient(to top,rgba(60,216,150,.22) 0 2px,transparent 2px 110px)}
.yax{height:100%;display:flex;flex-direction:column;justify-content:space-between;font:900 24px 'Bodoni Moda',serif;padding:0 0 0 0}
.grp{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:8px;height:100%}
.bar{position:relative;display:block;width:44px}
.bar.e{background:var(--bg)}.bar.p{background:var(--paper)}
.bv{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font:900 24px 'Bodoni Moda',serif;color:var(--bg)}
.bar.p .bv{color:var(--paper)}
.grp b{position:absolute;left:0;right:0;bottom:-36px;text-align:center;font:700 22px 'Manrope',sans-serif}
.trow{margin-top:42px;display:grid;grid-template-columns:90px repeat(7,1fr);font:900 30px 'Bodoni Moda',serif;text-align:center;border-top:2px solid rgba(60,216,150,.4);padding-top:8px}
.trow span:first-child{font:700 18px 'Manrope',var(--kb),sans-serif;text-align:left;line-height:1.2}
.src{left:110px;right:520px;bottom:30px;font-size:20px;line-height:1.3}

/* --- 4. 비교와 표: 반전/종이 타일 둘 + 목록 행 표 / 남중 목록 행 + 이중 선 장식 인용 --- */
.cmp{left:110px;width:1040px;top:260px;display:grid;grid-template-columns:1fr 1fr}
.cc{padding:24px 28px;display:flex;flex-direction:column;gap:6px}
.cc h3{margin:8px 0 4px;font-size:42px;line-height:1.1}
.cc p{font-size:28px;line-height:1.45}
.tbl{left:110px;width:1040px;top:580px;border-bottom:var(--rule)}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:12px 0;border-top:var(--rule);font-size:28px;line-height:1.35}
.tr.th{font-weight:800;font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.tr span:first-child{font-family:'Bodoni Moda',var(--kt),serif;font-weight:var(--wt);font-size:32px}
.tr.th span:first-child{font:800 22px 'Manrope',var(--kb),sans-serif}
.lst{left:1200px;right:110px;top:260px;display:flex;flex-direction:column;border-bottom:var(--rule)}
.lst .tag{margin-bottom:12px}
.ar.sm{grid-template-columns:70px 1fr}
.ar.sm .sn{font-size:40px}
.ar.sm p{margin:0;font-size:28px}
.qt{left:1200px;right:110px;top:640px}
.o4 span{font-size:40px}
.o4{gap:20px}
.qt p{margin-top:18px;font-size:44px;line-height:1.25}

/* --- 5. 확인하기: 왼쪽 구획 여는 패널(남색 · 큰 '?' · 빈칸 태그 칩 · 낱말 마크 칩) | 에메랄드 목록 행 퀴즈 + 꼬리줄 --- */
.panel{left:0;top:0;bottom:0;width:820px;background:var(--ink);color:var(--bg)}
.pc{top:56px;font-weight:700;font-size:26px;letter-spacing:.05em}
.pc.pcl{left:80px}.pc.pcr{right:60px}
.jumbo{left:70px;top:90px;font-size:300px;line-height:1}
.tag.em2{left:80px;top:440px;background:var(--bg);color:var(--ink)}
.bls{left:80px;right:60px;top:500px;display:flex;flex-direction:column;border-bottom:4px solid var(--bg)}
.bl{padding:14px 0;border-top:4px solid var(--bg);font-size:28px;line-height:1.5}
.blank{position:relative;min-width:170px;margin-right:10px;padding:4px 16px;background:var(--bg);color:var(--ink);text-align:center;font-size:24px;vertical-align:middle}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--paper)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.words{left:80px;right:60px;top:880px;display:flex;flex-wrap:wrap;gap:12px}
.mk.em3{background:var(--bg);color:var(--ink);font-size:24px;padding:8px 18px}
.eye.r{left:900px;top:110px}
.quiz{left:900px;right:110px;top:170px;bottom:150px;display:flex;flex-direction:column}
.q{font-size:62px;line-height:1.12}
.rows{margin-top:30px;border-bottom:var(--rule)}
.row{width:100%;display:grid;grid-template-columns:100px 1fr 190px;align-items:center;text-align:left;padding:16px 0;border-top:var(--rule)}
.row .sn{font-size:44px;padding-left:10px}
.row .ot{font-size:36px;font-weight:700}
.row .kind{padding-right:14px}
.row.right{background:var(--ink);color:var(--bg)}
.row.wrong{background:var(--paper)}
.row.wrong .ot{opacity:.5}
.row:disabled:not(.right){opacity:.55}
.fb{margin-top:18px;min-height:80px;font-size:30px;line-height:1.45;font-weight:700}
.rt{align-self:flex-start;margin-top:auto}
.mast.foot.r{left:900px;right:110px}
section:last-of-type .nr{left:900px}

/* --- 내비: 아래 가운데 사각 점 + 사각 화살표(반경 0) --- */
.dk-nav{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;color:var(--ink)}
[data-slide="3"] .dk-nav{left:1560px;bottom:16px}
[data-slide="5"] .dk-nav{left:1360px}
.dk-dots{display:flex;gap:12px}
.dk-dot{width:14px;height:14px;border:3px solid currentColor}
.dk-dot.on{background:currentColor}
.dk-prev,.dk-next{width:50px;height:50px;border:4px solid currentColor;font:800 24px/1 var(--kb);color:inherit}
.dk-prev:disabled,.dk-next:disabled{opacity:.25}
/* --- 6. 디자인 안내(에메랄드): 목록 행 넷 | 반전/종이 타일 시연 3개 --- */
.g6{left:110px;right:auto;width:860px;top:270px}
.g6 .ar{grid-template-columns:90px 1fr 0;padding:16px 0}
.g6 h3{font-size:36px}
.g6 p{font-family:'Manrope',var(--kb),sans-serif!important;font-weight:500!important;font-size:24px;line-height:1.5}
.g6 b:not(.sn){font-weight:800}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:-6px;border:3px solid var(--ink)}
.slide>.d6{position:absolute;left:1030px;right:110px;height:206px;padding:16px 26px}
.d6.a{top:270px}.d6.b{top:494px}.d6.c{top:718px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:34px}
.d6 p{margin-top:2px;font-size:21px;line-height:1.4}
.bt.sm{font-size:18px;padding:6px 14px;border-width:3px}
.inv .bt.sm{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.bt.sm[aria-pressed="true"]{outline:3px solid currentColor;outline-offset:3px}
.o6{margin-top:12px;display:flex;align-items:center;gap:24px}
.o6 span{font:800 40px/1.1 'Bodoni Moda',var(--kt),serif}
.o6 .dr{border-color:var(--bg);visibility:hidden}
.o6 .dr::after{border-color:var(--bg)}
.o6.play .dr{visibility:visible}
.tl6{margin-top:12px;display:flex}
.tl6 .tile{flex:1;padding:10px 18px;font:900 40px/1 'Bodoni Moda',var(--kt),serif;background:var(--paper);color:var(--ink);border:3px solid var(--ink)}
.tl6.play .tile:nth-child(odd){background:var(--ink);color:var(--bg)}
.ch6{margin-top:14px;display:flex;align-items:center;gap:14px;visibility:hidden}
.ch6.play{visibility:visible}
.ch6 .mk,.ch6 .tag{background:var(--bg);color:var(--ink)}
.ch6 .dp{background:var(--paper);color:var(--ink)}
.ch6 .mk{font-size:24px;padding:8px 18px}

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