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

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`soft-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`)에서 불러오는데, 일부 서비스의 미리보기 창은 바깥 파일을 막기 때문입니다. **내려받아 브라우저(크롬·엣지 등)로 열면 정상**으로 보입니다.

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

## 라이선스

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

- Hakgyoansim Eunhasu: Hakgyoansim Eunhasu — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © KERIS. All rights reserved.
  파일: HakgyoansimEunhasuR.ttf
- Paperlogy 4Regular: Paperlogy — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © 2024 PT&
  파일: Paperlogy-4Regular.ttf

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

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

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

MIT License

Copyright (c) 2025 Zara Zhang

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

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

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

---

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

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

## 0. 당신(AI)의 일

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

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

### 반드시 지킬 것
1. **디자인 규칙(1)을 어기지 마세요.** 색·글꼴·배치·장식·움직임 규칙과 '하지 말 것'을 그대로 따릅니다. 규칙에 없는 효과(임의의 애니메이션, 새 색, 새 장식)를 더하지 마세요.
2. **뼈대(4)의 공통 파일 두 줄을 그대로 두세요.** `<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/soft-editorial.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/soft-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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Hakgyoansim Eunhasu(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. 디자인 규칙 (`soft-editorial` design.md)

````markdown
---
version: alpha
name: Soft Editorial
description: A warm magazine spread aesthetic — the kind of layout a small print quarterly with field-notes pretensions would commission. Cormorant Garamond carries every headline and ornamental moment with mixed roman and italic; Work Sans recedes into supporting body. The palette is cream paper with a quartet of pastel candy accents (dusty pink, chartreuse lemon, soft peach blush, sage green, lilac) used as colored card backgrounds. Generous rounded cards (24–36px radius) float on translucent white over the cream field. The mood is editorial calm with a sprinkling of riso-print color — closer to a literary research notebook than a corporate deck.

colors:
  paper: "#F2EEDF"
  paper-2: "#ECE6D2"
  ink: "#2A241B"
  ink-soft: "#5C5345"
  pink: "#E1A4C2"
  lemon: "#D6DD63"
  blush: "#E8C9B6"
  sage: "#B7C7A8"
  lilac: "#C9BEDC"
  card-fill: "rgba(255,255,255,0.55)"
  rule-soft: "rgba(42,36,27,0.18)"
  rule-medium: "rgba(42,36,27,0.35)"

color-aliases:
  background: paper
  text-primary: ink
  text-secondary: ink-soft

typography:
  display:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 232px
    fontWeight: 500
    lineHeight: 0.92
    letterSpacing: -0.02em
  title:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 188px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.015em
  closer:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 168px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.015em
  numeral-hero:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 320px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: -0.02em
  numeral-lg:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 200px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: -0.02em
  panel-headline:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 124px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.01em
  section-headline:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 96px
    fontWeight: 500
    lineHeight: 0.98
    letterSpacing: -0.01em
  page-headline:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 88px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
  quote-text:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 88px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.01em
  quote-mark:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 220px
    fontWeight: 500
    lineHeight: 0.7
    fontStyle: italic
  card-headline:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.01em
  drop-cap:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 132px
    fontWeight: 500
    lineHeight: 0.85
  opener:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 56px
    fontWeight: 500
    fontStyle: italic
    lineHeight: 1.1
  numeral-step:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 92px
    fontWeight: 500
    fontStyle: italic
    lineHeight: 0.9
  numeral-card:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 64px
    fontWeight: 500
    fontStyle: italic
    lineHeight: 1
  subhead-lg:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 56px
    fontWeight: 500
    fontStyle: italic
    lineHeight: 1.1
  subhead-md:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.05
  subhead-sm:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.05
  kicker:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 38px
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.2
  marker:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 32px
    fontWeight: 400
    fontStyle: italic
    lineHeight: 1.3
  card-sub:
    fontFamily: "Work Sans, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
  eyebrow:
    fontFamily: "Work Sans, sans-serif"
    fontSize: 28px
    fontWeight: 400
    letterSpacing: -0.005em
  page-marker:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 26px
    fontWeight: 400
    fontStyle: italic
  footer:
    fontFamily: "Cormorant Garamond, Garamond, serif"
    fontSize: 26px
    fontWeight: 400
    fontStyle: italic
  body:
    fontFamily: "Work Sans, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: "Work Sans, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.5
  attr:
    fontFamily: "Work Sans, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
  swatch-label:
    fontFamily: "Work Sans, sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.06em
    textTransform: uppercase

spacing:
  pad-outer: 80px
  pad-top: 60px
  pad-bottom: 50px
  card-pad-lg: "64px 48px"
  card-pad-md: "48px 52px"
  card-pad-sm: "28px 30px"
  gap-cards: 28px
  gap-cards-lg: 36px
  gap-stack: 36px

canvas:
  width: 1920px
  height: 1080px

components:
  card-soft:
    background: "{colors.card-fill}"
    borderRadius: "24px to 36px"
    padding: "{spacing.card-pad-sm} to {spacing.card-pad-lg}"
    description: "Translucent white card floating on the cream field. The system's default container — used for stats, columns, panels, content blocks."
  card-color:
    background: "any of pink, lemon, blush, sage, lilac"
    borderRadius: "22px to 36px"
    padding: "{spacing.card-pad-sm}"
    description: "Saturated pastel card containing numerals, step content, or featured items. Text stays ink/ink-soft on every accent fill — never inverted."
  pill:
    borderRadius: "999px"
    padding: "4px 14px"
    fontWeight: 500
    description: "Status pill in a pastel fill (lemon=yes, blush=partial, pink=no) or translucent white with a soft border for notes."
  swatch-dot:
    width: 56px
    height: 56px
    borderRadius: "50%"
    description: "Circular accent disc shown in a row at the top of cover slides — the visual signature of the system's color palette."
  swatch-tile:
    aspectRatio: "1/1.2"
    borderRadius: "16px"
    description: "Rounded rectangle paint chip used in palette displays and design-system layouts."
  rule-dashed:
    borderColor: "{colors.rule-soft}"
    borderStyle: "dashed"
    borderWidth: "1px"
    description: "1px dashed warm-ink hairline used inside matrix tables, panel dividers, and any subdivision that wants to read softer than a solid rule."
  rule-solid:
    borderColor: "{colors.rule-medium}"
    borderStyle: "solid"
    borderWidth: "1.5px"
    description: "Slightly heavier hairline for major dividers inside cards (head-row underlines, column rules)."
  drop-cap:
    typography: "{typography.drop-cap}"
    float: "left"
    description: "First letter of an opener paragraph floats left at ~132px, line-height 0.85, with 8px 14px 0 0 padding. The visible signature of editorial reads."
  legend-bar:
    width: 28px
    height: 12px
    borderRadius: "6px"
    description: "Rounded color bar used as a chart legend swatch."
  marker-rule:
    width: "auto"
    borderTop: "1px dashed {colors.rule-soft}"
    description: "Dashed top-rule used to mark source attributions or sign-offs beneath content."
  action-bar:
    background: "{colors.lemon}"
    borderRadius: "24px"
    padding: "24px 36px"
    description: "Lemon-yellow action band running near the top of a slide, containing a tag separator and a serif headline — used for important CTAs or callouts."
  chrome-eyebrow:
    position: "absolute top-left at 60px / 80px"
    typography: "{typography.eyebrow}"
    color: "{colors.ink}"
    description: "Section name in plain sans, sits at the top-left corner of standard slides."
  chrome-pagedot:
    position: "absolute top-right at 60px / 80px"
    typography: "{typography.page-marker}"
    color: "{colors.ink-soft}"
    description: "Roman or arabic page numeral in italic serif at the top-right corner."
  chrome-footer:
    position: "absolute bottom at 50px"
    typography: "{typography.footer}"
    color: "{colors.ink-soft}"
    description: "Two-column italic serif footer running across the bottom — date left, publication name right."
---

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

Soft Editorial is a **warm magazine spread** presentation system that takes its visual cues from small-press literary quarterlies and design-research notebooks. The premise is a single typeface (Cormorant Garamond) doing nearly all the talking, supported by a sober humanist sans (Work Sans) only where the serif would tire. The cream paper field is the constant — every slide sits on `{colors.paper}` (#F2EEDF), a warm aged-cream that reads as physical paper, not screen white. On top of the field, rounded cards float in two registers: translucent white softness for default content, and saturated pastel candy for accent moments.

The typography system is **single-family with mixed style**. Headlines are Cormorant Garamond medium (weight 500), but a roman headline often carries an `<em>` mid-sentence that switches to italic at weight 400 — the italic phrase is a lighter weight of the same family, which gives the system its characteristic "gentle emphasis" tone. Italic also runs the small ornamental text (kickers, markers, page numerals, sign-offs, opener paragraphs, step numerals). Work Sans steps in only for body paragraphs, eyebrows, and a small set of meta labels where the serif's personality would be too much.

The color philosophy is **cream plus five pastels**. The pastels — dusty pink (`{colors.pink}`), chartreuse lemon (`{colors.lemon}`), soft peach blush (`{colors.blush}`), sage green (`{colors.sage}`), and lilac (`{colors.lilac}`) — are interchangeable card fills. None of them carries a fixed semantic role (lemon is not "warning," pink is not "error"). They are color paints — the deck cycles through them for variety, often with three or four visible on a single slide. Text on every pastel surface stays in `{colors.ink}` (a warm near-black, #2A241B). The system never inverts text color on accent surfaces.

Depth comes from **soft rounded cards** with large border-radius values (24–36px on default cards; up to 999px on pills) and translucent white fills that sit slightly above the cream field. There are no drop shadows — depth is implied by the translucency and the rounded form. Hairlines inside cards are dashed in a warm ink with low opacity, which reinforces the "notebook" feel.

**Density philosophy: medium-high inside cards, generous between cards.** The cards themselves can hold substantial content — multi-column matrices, dense step grids, lengthy quoted text. But the slide canvas leaves comfortable air around them: 80px outer padding, 28–36px gaps between cards, plenty of cream field showing through. A slide that feels broken in this system is either (a) cards crammed together with no breathing field, or (b) a slide so sparse that the paper field reads as empty rather than as a deliberate margin. The target is "a generously laid-out magazine page where the cards group, breathe, and lead the eye."

**Key Characteristics:**
- Single warm cream surface (`{colors.paper}`) across every slide; pastels appear only as card fills, never as the slide background (except the full-bleed closer slide which fills with `{colors.pink}`).
- Cormorant Garamond carries every display, headline, kicker, and ornamental moment; Work Sans is reserved for body and eyebrows.
- Mixed roman + italic inside headlines is the system's typographic signal — italic phrases drop to weight 400 from the headline's weight 500.
- Saturated pastels (`{colors.pink}`, `{colors.lemon}`, `{colors.blush}`, `{colors.sage}`, `{colors.lilac}`) are interchangeable card fills with no fixed semantic meaning.
- Rounded cards (24–36px radius) are the default container; pills are fully rounded (999px); translucent white (`{colors.card-fill}`) is the default card fill.
- No drop shadows. Depth comes from translucency on top of the cream field and from the cards' rounded chrome.
- Page chrome is italic serif (page numerals and footers) plus plain sans (eyebrows) — never mono, never uppercase.
- Drop caps appear at the start of long-form opener paragraphs at ~132px Cormorant Garamond medium.

## Colors

### Palette

- **Paper** (`{colors.paper}` — #F2EEDF): The cream page. The default slide background, the constant across the deck. Warm and aged, never bright.
- **Paper Alt** (`{colors.paper-2}` — #ECE6D2): A slightly cooler cream reserved for adjacent-surface separation. Used sparingly; many decks never reach for it.
- **Ink** (`{colors.ink}` — #2A241B): Warm near-black with a brown bias. Primary text color on every surface — never pure black.
- **Ink Soft** (`{colors.ink-soft}` — #5C5345): A muted warm grey-brown. Secondary text — captions, leads, descriptions, page markers, sign-offs.
- **Pink** (`{colors.pink}` — #E1A4C2): Dusty rose pastel. The most-used accent fill — appears on cover swatches, step cards, full-bleed closer slides, status pills (where it reads as "no" in matrices).
- **Lemon** (`{colors.lemon}` — #D6DD63): Chartreuse yellow-green. The brightest accent — used on hero numeral cards, action bars, "yes" pills.
- **Blush** (`{colors.blush}` — #E8C9B6): Soft peach. The most neutral of the pastels — used on step cards, "partial" pills, and any slot needing warm neutrality.
- **Sage** (`{colors.sage}` — #B7C7A8): Muted green. The "extra" accent that joins for variety — process diagrams, design-system grids, secondary step cards.
- **Lilac** (`{colors.lilac}` — #C9BEDC): Soft violet-grey. The cool counterpart to sage — appears mostly in five-step process flows where all five pastels rotate.
- **Card Fill** (`{colors.card-fill}` — rgba(255,255,255,0.55)): Translucent white. The default card background — sits on the cream field as a "lifted" surface without committing to a saturated color.
- **Rule Soft** (`{colors.rule-soft}` — rgba(42,36,27,0.18)): Low-opacity warm ink for dashed internal hairlines.
- **Rule Medium** (`{colors.rule-medium}` — rgba(42,36,27,0.35)): Slightly heavier hairline for major dividers inside cards.

### Defaults

- **Default slide background**: `{colors.paper}` — every standard slide.
- **Default primary text color**: `{colors.ink}` — on every surface, including all pastel cards. Text is never inverted to white on pastel fills.
- **Default secondary text color**: `{colors.ink-soft}` — for descriptions, lead paragraphs, captions, page markers, sign-offs.
- **Default card fill**: `{colors.card-fill}` — translucent white. Reach for this whenever a content container doesn't need a saturated color.
- **Default accent card fill (when one is needed)**: `{colors.pink}` for the warmest moment, `{colors.lemon}` for the brightest, `{colors.blush}` for neutral warmth, `{colors.sage}` for cool variety, `{colors.lilac}` for the fifth slot in a five-up grid.
- **Default headline color**: `{colors.ink}`.
- **Default eyebrow color**: `{colors.ink}` (eyebrow is the top-left chrome label).
- **Default footer color**: `{colors.ink-soft}`.

Pastels do not carry semantic meaning. In matrix layouts, the convention is lemon = positive / partial / yes; blush = partial; pink = negative / no. Outside the matrix, any pastel can fill any card without conveying status.

## Typography

### Font Family

Soft Editorial runs **two families** in carefully separated roles:

- **Cormorant Garamond** (`{typography.display.fontFamily}`) — a refined old-style serif with a beautifully expressive italic axis. Carries every headline at every scale (display, title, closer, page-headline, card-headline, all subheads), every numeral, every quote, every kicker, every ornamental marker, every page numeral, every footer, every drop cap. The italic of this face is delicate and personal, and the system uses it generously — italic carries kickers, markers, page numerals, footers, step numerals, sign-offs, and any `<em>` inside a headline.
- **Work Sans** (`{typography.body.fontFamily}`) — a humanist grotesque. Reserved for body paragraphs, eyebrows, card sub-labels, attributions, and Work Sans-specific labels (the small uppercase swatch-label in palette displays). Work Sans never carries a headline.

The system's typographic signal is **mixed weight inside the same headline**: a serif headline at weight 500 carries an `<em>` that drops to weight 400 (italic). The weight difference is gentle — it reads as a softening, not as bold emphasis. This is opposite the magazine convention of italic-for-bold; here italic is the lighter, more intimate tone.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.numeral-hero}` | 320px | Cormorant Garamond | 500 | Featured hero numeral in a span-two stat card |
| `{typography.display}` | 232px | Cormorant Garamond | 500 | Cover-scale display headline |
| `{typography.numeral-lg}` | 200px | Cormorant Garamond | 500 | Standalone large statistical numeral |
| `{typography.title}` | 188px | Cormorant Garamond | 500 | Section or chapter title at near-cover scale |
| `{typography.closer}` | 168px | Cormorant Garamond | 500 | Closing or "moment" headline on a full-bleed colored slide |
| `{typography.panel-headline}` | 124px | Cormorant Garamond | 500 | Headline filling one panel of a two-column layout |
| `{typography.section-headline}` | 96px | Cormorant Garamond | 500 | Chart, comparison, or analysis section headline |
| `{typography.numeral-step}` | 92px | Cormorant Garamond italic | 500 | Italic ordinal numeral (i., ii., iii.) on step cards |
| `{typography.page-headline}` | 88px | Cormorant Garamond | 500 | Process diagram or general page headline |
| `{typography.quote-text}` | 88px | Cormorant Garamond | 500 | Pull-quote body text |
| `{typography.card-headline}` | 72px | Cormorant Garamond | 500 | Headline that fills the head of a square accent card |
| `{typography.numeral-card}` | 64px | Cormorant Garamond italic | 500 | Italic ordinal numeral on smaller item cards |
| `{typography.opener}` | 56px | Cormorant Garamond italic | 500 | Italic opener paragraph for foreword / long-form reads |
| `{typography.subhead-lg}` | 56px | Cormorant Garamond italic | 500 | Italic large subhead used for column-pair openers |
| `{typography.subhead-md}` | 44px | Cormorant Garamond | 500 | Card or column heading |
| `{typography.subhead-sm}` | 38px | Cormorant Garamond | 500 | Sub-headline within a panel; item headlines in lists |
| `{typography.kicker}` | 38px | Cormorant Garamond italic | 400 | Italic kicker above a cover headline |
| `{typography.card-sub}` | 32px | Work Sans | 500 | Sub-label beneath a serif card head (the only sans subhead) |
| `{typography.marker}` | 32px | Cormorant Garamond italic | 400 | Italic marker text (sign-offs, edition labels, "vol. iii") |
| `{typography.eyebrow}` | 28px | Work Sans | 400 | Plain-sans section name at top-left of standard slides |
| `{typography.page-marker}` | 26px | Cormorant Garamond italic | 400 | Roman or arabic page numeral at top-right |
| `{typography.footer}` | 26px | Cormorant Garamond italic | 400 | Italic serif footer line (date, publication) |
| `{typography.body}` | 26px | Work Sans | 400 | Default paragraph body |
| `{typography.body-md}` | 24px | Work Sans | 400 | Card body, list item body, dense paragraphs inside cards |
| `{typography.attr}` | 24px | Work Sans | 500 | Quote attribution name |
| `{typography.drop-cap}` | 132px | Cormorant Garamond | 500 | Drop cap at the start of a long-form opener paragraph |
| `{typography.swatch-label}` | 11px | Work Sans uppercase | 400 | Small uppercase label inside a swatch tile (palette display) |

### Defaults

- **Default size for a primary section headline**: `{typography.section-headline}` (96px) on standard slides, `{typography.panel-headline}` (124px) when the headline fills one panel of a two-up layout.
- **Default size for a cover or chapter headline**: `{typography.title}` (188px) to `{typography.display}` (232px).
- **Default size for a paragraph body**: `{typography.body}` (26px) on the open slide; `{typography.body-md}` (24px) inside cards or denser columns.
- **Default size for a kicker or marker**: `{typography.kicker}` (38px) for cover kickers; `{typography.marker}` (32px) for smaller ornamental notes.
- **Default size for a featured statistical numeral**: `{typography.numeral-lg}` (200px); reach for `{typography.numeral-hero}` (320px) only when one stat dominates a layout.
- **Default size for a step or item numeral**: `{typography.numeral-step}` (92px) on full step cards, `{typography.numeral-card}` (64px) on smaller items.
- **Default headline weight**: 500 (medium). Italic `<em>` inside drops to 400.
- **Default headline color**: `{colors.ink}`.

When unsure between sizes for a slide's primary moment, reach for `{typography.section-headline}` (96px) — it is the workhorse size for editorial reads.

### Signature Treatments

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

- **Every headline that includes an emphasized phrase renders the `<em>` in italic Cormorant Garamond at weight 400** (the surrounding headline runs at weight 500). The italic weight drop is the system's primary typographic signal.
- **All page chrome (eyebrow, page-marker, footer) is positioned absolute at fixed offsets** (eyebrow top-left 60/80px; pagedot top-right 60/80px; footer left/right 80px / bottom 50px). The chrome positions are non-negotiable across standard slides.
- **Eyebrows are plain Work Sans at 28px**, not italic, not uppercase. They are the only sans chrome element.
- **Page numerals and footers are italic serif at 26px in `{colors.ink-soft}`.** They are never sans, never uppercase, never bold.
- **Step numerals are italic serif lowercase Roman numerals (i., ii., iii., iv., v.)** — never arabic, never uppercase. The roman numeral is part of the editorial register.
- **Drop caps in opener paragraphs are Cormorant Garamond at weight 500, ~132px, with line-height 0.85 and padding `8px 14px 0 0`.** A drop cap that isn't this exact spec reads as a different system.
- **Cards always have border-radius in the 22–36px range** (or 999px for pills). Square cards do not exist in this system.

### Typography Principles

The serif/sans split is structural: Cormorant Garamond carries personality (every headline, every numeral, every ornament), Work Sans carries substance (every paragraph, every eyebrow, every Work Sans-only label). Crossing those rails breaks the editorial calm.

Italic is generous, not reserved. Italic serif appears on kickers, markers, page numerals, footers, step numerals, opener paragraphs, headline `<em>` phrases, and any small ornamental moment. Sans never italic — Work Sans should always render upright.

Line-height runs tight at display scale (0.9–0.98) and opens to 1.4–1.55 on body and card body. Letter-spacing is slightly negative on the largest sizes (–0.01 to –0.02em) and zero or near-zero on body. The 11px Work Sans swatch-label is the only uppercase element in the system — and it carries a generous 0.06em letter-spacing that makes its 11px size legible.

## Layout

### Canvas System

Soft Editorial targets a **fixed 1920×1080 canvas** via the `<deck-stage>` element. Layout is built on absolute positioning from the slide edges — every element is positioned via `position: absolute` with `top`/`left`/`right`/`bottom` offsets relative to the slide. The system does not use viewport-relative units; it relies on the deck-stage's scaling to handle viewport differences.

### Padding and Gap Scale

| Token | Value | Use |
|---|---|---|
| `{spacing.pad-outer}` | 80px | Standard left/right inset for content blocks |
| `{spacing.pad-top}` | 60px | Top inset for the eyebrow / pagedot chrome |
| `{spacing.pad-bottom}` | 50px | Bottom inset for the footer chrome |
| `{spacing.card-pad-lg}` | 64px 48px | Card padding for spacious cards (insights, closer) |
| `{spacing.card-pad-md}` | 48px 52px | Card padding for medium cards (next-step panels) |
| `{spacing.card-pad-sm}` | 28px 30px | Card padding for compact cards (columns, design-system tiles) |
| `{spacing.gap-cards}` | 28px | Standard gap between cards in a row or grid |
| `{spacing.gap-cards-lg}` | 36px | Larger gap between major panels |
| `{spacing.gap-stack}` | 36px | Vertical gap between stacked text elements |

### Chrome Frame

Every standard slide carries three chrome elements at fixed positions:

- **Eyebrow** — section name at top-left (60px from top, 80px from left), Work Sans 28px in `{colors.ink}`.
- **Pagedot** — page numeral at top-right (60px from top, 80px from right), italic Cormorant Garamond 26px in `{colors.ink-soft}`.
- **Footer** — two-column footer at bottom (50px from bottom, 80px from each side), italic Cormorant Garamond 26px in `{colors.ink-soft}` (date left, publication name right).

The cover slide swaps the pagedot for a row of three circular pastel swatches at top-right (the visual signature of the deck's palette). Full-bleed accent slides (the closer) shift chrome to dark ink on the colored field while preserving positions.

## Depth and Elevation

Soft Editorial uses **no drop shadows**. Depth comes entirely from translucency and rounded form:

- **Translucent white cards** — `{colors.card-fill}` (rgba 255,255,255,0.55) — sit on top of the cream field. The translucency lets the warm paper bleed through and makes the card feel "lifted" without any shadow.
- **Saturated pastel cards** — pink, lemon, blush, sage, lilac fills — sit on the cream field at full opacity. The visual difference between card and field is the color, not the elevation.
- **Rounded corners** — every card has a generous border-radius (22–36px), which softens the form and reads as "physical card" rather than "screen rectangle."

There is no second tier of elevation. Cards do not stack on cards. If a layout needs visual hierarchy, it uses size and color, not z-stacking.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 999px (pill) | Status pills (yes/partial/no/note) |
| 36px | Large insight cards, closer card |
| 32px | Method step cards |
| 28px | Item cards, process nodes, chart frames |
| 24px | Default panel cards, consult columns, design-system tiles, action bars |
| 22px | Larger system tiles in design-system grids |
| 18px | Decorative timeline bar |
| 16px | Palette swatch tiles |
| 14px | Smallest decorative chips inside design-system grids |
| 6px | Chart legend swatch (a flat rounded bar) |
| 50% (circle) | Cover swatch dots |

There are **no square corners in the system**. Every container is at least 14px rounded; cards are 22–36px rounded; pills are fully rounded.

### Border Weights

- **No solid borders on standard cards**. The card's background and rounded form provide its definition.
- **1px dashed** in `{colors.rule-soft}` (rgba 42,36,27,0.18) — internal hairlines for table cells, matrix dividers, source-line markers, system-tile separators.
- **1.5px solid** in `{colors.rule-medium}` (rgba 42,36,27,0.35) — heavier dividers for matrix head-row underlines, column header rules.
- **1px solid** in a similar low-opacity ink — used on chart plot edges and a small set of "note" pills.

### Decorative Element Types

**Soft card** — the default content container. A translucent white card with 24–36px border-radius and 28–64px internal padding. Sits on the cream field as a lifted region.

**Color card** — a saturated pastel card (pink, lemon, blush, sage, lilac) with 22–36px border-radius. Used for stats, step cards, insight cards, and any moment that wants color. Text inside stays ink/ink-soft — never inverted.

**Status pill** — a fully rounded 999px-radius pill with mixed serif/sans contents. Pastel-filled (lemon, blush, pink) for affirmative/partial/negative status; translucent white with a 1px ink border for "note."

**Action bar** — a full-width lemon-filled rounded card (24px radius) running across the top of a slide, containing a tag-separator structure and a serif headline. Used for callouts, CTAs, or attention-grabbing meta moments.

**Cover swatch row** — a row of 3–5 circular 56px discs in the deck's accent palette, positioned at top-right of the cover slide. The visual signature of the system's color philosophy.

**Drop cap** — a 132px Cormorant Garamond medium first letter that floats left at the start of an opener paragraph, with 8px 14px 0 0 padding. The single most editorial typographic moment in the system.

**Italic step numeral** — an italic Cormorant Garamond Roman numeral (i., ii., iii.) in the 64–92px range, sitting at the top of a step card above a serif headline and sans body. The Roman numeral is non-negotiable for steps.

**Quote mark** — a single italic Cormorant Garamond `"` at 220px in `{colors.blush}`, sitting above a centered pull-quote. The quote mark's color is its own signal — soft peach, not ink.

**Legend bar** — a 28px × 12px rounded-end (6px radius) horizontal bar in a chart's accent color, paired with a label.

**Source line** — a dashed-top-rule italic serif line at the bottom of a column or panel, marking a source attribution or sign-off.

## Do's and Don'ts

### Do

- Use Cormorant Garamond at weight 500 for every headline, and drop italic `<em>` phrases to weight 400 inside. The weight drop is the system's voice.
- Set the slide background to `{colors.paper}` on every standard slide — the warm cream field is the constant.
- Default cards to translucent white (`{colors.card-fill}`) at 24–36px border-radius. Reach for pastel fills when a card needs color or status, not by default.
- Keep text in `{colors.ink}` on every surface, including all pastel cards. The system never inverts to white on pastels.
- Use italic serif (Cormorant Garamond italic) for kickers, markers, page numerals, footers, step numerals, sign-offs, and any small ornamental moment.
- Apply a drop cap to opener paragraphs in long-form reads — 132px Cormorant Garamond medium, line-height 0.85, padding 8px 14px 0 0.
- Use Roman numerals (lowercase italic: i., ii., iii.) for step ordinals. Arabic step numbers break the editorial register.
- Render every page numeral as italic Cormorant Garamond at 26px in `{colors.ink-soft}`, positioned absolute at top-right.
- Use Work Sans only for body, eyebrows, attributions, and the small uppercase swatch-labels. Work Sans never carries a headline.
- Pad slides with 80px outer insets and leave 28–36px gaps between cards. The cream field breathing around cards is part of the design.

### Don't

- Don't fill the slide background with a pastel — the pastels are card fills (with one exception: the full-bleed closer slide can take a full pink field for a single "moment"). Default slides stay on cream.
- Don't invert text to white on pastel cards. Text always reads ink-on-color.
- Don't use square corners on any card or container. The minimum acceptable radius is 14px; cards live at 22–36px.
- Don't add drop shadows. The system's depth comes from translucency and form, not from elevation.
- Don't use a third typeface. Cormorant Garamond and Work Sans are the only families. Adding a display font or a mono breaks the editorial register.
- Don't bold inside body. If body needs emphasis, switch to italic serif or use a strong tag at weight 500 inside Work Sans (rare).
- Don't render kickers, markers, or footers in roman serif. The ornamental small text is always italic.
- Don't use uppercase outside the 11px swatch-label. The system is sentence case throughout.
- Don't use mono. There is no monospace in this system — every label is sans or italic serif.
- Don't crowd cards edge-to-edge. The 28–36px gaps and the cream field around cards are load-bearing.

## Responsive Behavior

Soft Editorial is a **fixed 1920×1080** system rendered inside a `<deck-stage>` web component. The deck-stage handles scaling: the slide content is laid out at exact 1920×1080 pixel dimensions and the component scales the entire stage to fit the viewport (letterboxing or fitting as configured by the stage). All `top`/`left`/`right`/`bottom`/`width`/`height` values inside slides are in pixels and assume the fixed 1920×1080 canvas.

### Scaling Behavior

Because the deck-stage scales uniformly, all elements maintain their relative positions and sizes at any output viewport. A 232px display headline remains 232px on the deck-stage's internal canvas; the stage scales the entire canvas to fit the browser viewport.

### Presenter Behavior

Navigation is handled by the `deck-stage.js` script (an external dependency, not embedded). Each slide carries a `data-label` attribute identifying it in the presenter UI. Slides advance via the deck-stage's own controls.

### Print Behavior

There is no embedded print stylesheet. Static export depends on the deck-stage component's print/export behavior; for PDF generation, the deck-stage should render each slide as a single page at the 1920×1080 canvas size.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face (default) | Chinese face | Weight | Notes |
|---|---|---|---|---|
| Display / Headline | Cormorant Garamond 500 | 霞鹜文楷 LXGW WenKai (LXGW WenKai TC) | 400 | LXGW WenKai is a hand-written-feel kaiti that mirrors Cormorant's literary register. The single regular weight matches Cormorant's gentle medium. |
| Italic emphasis (`<em>`) | Cormorant Garamond italic 400 | 霞鹜文楷 LXGW WenKai | 400 | LXGW WenKai has no true italic — emphasis instead drops to `{colors.ink-soft}` or a faint underline. Do not synthesize italic. |
| Body | Work Sans 400 | 思源宋体 / Noto Serif SC | 400 | The system body switches from sans to serif in CJK to preserve the literary register; Work Sans loses its editorial calm beside a kaiti headline. |
| Body — alt sans (optional) | Work Sans 400 | Noto Sans SC | 400 | Only use if the deck has very dense data; default to Noto Serif SC. |
| Kicker / marker / page numeral | Cormorant Garamond italic 400 | 霞鹜文楷 LXGW WenKai 400 | 400 | Italic ornament becomes upright kaiti; rely on `{colors.ink-soft}` color shift instead of italic for the same "soft ornament" feel. |

### Mixed-Content Strategy

This template uses **Strategy C (literary)**: keep the Latin face for English glyphs and let the CJK fallback in only when a Chinese character appears, via a stacked `font-family`. Cormorant Garamond is part of Soft Editorial's brand identity — replacing it with a kaiti for every headline strips the system of its old-style serif personality. Letting Latin stay in Cormorant while Chinese drops into LXGW WenKai preserves both registers.

```css
font-family: 'Cormorant Garamond', 'LXGW WenKai TC', 'Noto Serif SC', serif;  /* headlines */
font-family: 'Work Sans', 'Noto Serif SC', sans-serif;                          /* body */
```

**Warning — baseline mismatch at display sizes.** Cormorant Garamond's x-height sits noticeably lower than LXGW WenKai's optical center. At 96px+ headlines, a phrase like `Soft Editorial 软编辑` will show the Chinese characters floating slightly above the Latin baseline. Mitigations:
- Add `font-feature-settings: "palt"` on the Chinese segment to tighten metrics.
- Wrap CJK in a `<span lang="zh">` with a small `vertical-align: -0.04em` adjustment on display tokens (display, title, closer, numeral-hero, panel-headline).
- For pure-CJK headlines (no Latin), the issue disappears — the mismatch only surfaces in mixed-script lines.

### Loading

Add to `<head>` (Google Fonts hosts LXGW WenKai TC and Noto Serif SC):

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Work+Sans:wght@400;500&family=LXGW+WenKai+TC&family=Noto+Serif+SC:wght@400;500;700&display=swap" rel="stylesheet">
```

LXGW WenKai TC is the Traditional Chinese cut on Google Fonts; it includes the full CJK Unified Ideographs range and renders Simplified Chinese cleanly. Noto Serif SC carries body text in Simplified Chinese with proper hinting.

### Universal CJK Adjustments

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

- **Line-height**: body 1.75–1.85 (Soft Editorial's 1.5 sans-default needs more air for CJK strokes); display 1.15–1.25 (tighter than Latin 0.92–1 because CJK glyphs already include intrinsic spacing).
- **Letter-spacing**: 0 on CJK. The system's negative tracking (-0.01 to -0.02em) on display Latin is wrong for Chinese — CJK glyphs are pre-spaced; negative tracking causes overlap.
- **Text-transform**: no uppercase on CJK. Chinese has no case, and CSS `text-transform: uppercase` is a no-op on Han characters anyway, but make sure no parent rule attempts it.
- **Full-width punctuation**: use `，。：；！？` (full-width) not `,.:;!?` (half-width). The full-width forms include their own surrounding whitespace and align to the CJK em-box.
- **No period on display headlines**: Chinese headlines drop the terminal `。` — the headline's visual closure is enough. (Latin headlines in this system already drop periods; the rule extends to CJK.)
- **Pangu spacing (盘古之白)**: insert a thin space between CJK and adjacent Latin/numerals. Write `使用 Claude` not `使用Claude`; `2024 年` not `2024年`. This is editorial convention in good Chinese typography and matches Soft Editorial's literary care.
- **One font per sentence**: don't mix LXGW WenKai and Noto Serif SC inside a single line. Use one or the other for the entire run; switching mid-sentence creates a metric jolt.

### Aesthetic Notes for This System

LXGW WenKai is exceptionally well-matched to Soft Editorial's register. The kaiti's slight hand-written warmth picks up where Cormorant Garamond's old-style italic leaves off — both faces read as personal, considered, slightly intimate against the cream paper field. On a pastel card (pink, lemon, blush, sage, lilac), LXGW WenKai at headline scale reads as a calligraphic moment, which strengthens rather than weakens the editorial calm. The drop cap treatment (132px Cormorant Garamond medium) does not translate to CJK — kaiti drop caps look severed rather than ornamental; for Chinese opener paragraphs, drop the drop cap entirely and rely on the italic kicker above the paragraph for the "essay opening" cue.

The serif body switch (Work Sans → Noto Serif SC) is the most consequential change. Work Sans's humanist grotesque feels paired with Cormorant in Latin, but a sans body beside a kaiti headline reads as a cheap textbook in Chinese. Noto Serif SC's Song-style strokes resonate with both the cream field and the literary headline face, preserving the small-press literary quarterly mood across languages. Keep eyebrows (28px) in Noto Sans SC if you want a small register shift from the body, mirroring the Latin sans-vs-serif distinction.

### Known CJK Gap

- LXGW WenKai has only a single weight (regular). The system's signature "weight drop" inside headlines (Cormorant 500 → italic 400) cannot be reproduced in CJK. Substitute with a color shift to `{colors.ink-soft}` for emphasis, or accept that Chinese headlines read as one consistent weight.
- LXGW WenKai TC's Traditional-cut glyphs may render a small number of characters with Traditional forms (e.g., 設 instead of 设). For pure Simplified Chinese decks, prefer `font-family: 'Noto Serif SC'` as the primary CJK face and reserve LXGW WenKai for accent moments (cover title, chapter titles).
- The italic ornament moments (kickers, page numerals, footers, sign-offs) lose their italic in CJK because no CJK face carries true italic. Compensate by using `{colors.ink-soft}` and slightly smaller sizes to keep the "ornamental whisper" register.
- Baseline mismatch at display sizes (see Mixed-Content Strategy) requires per-deck tuning if covers carry mixed-script headlines.

## Iteration Guide

1. Any new headline uses Cormorant Garamond at weight 500, with italic `<em>` phrases dropping to weight 400. The weight drop is the editorial signal.
2. Any new card defaults to translucent white (`{colors.card-fill}`) at 24–36px border-radius. Pastel fills are for moments that need color, not for every card.
3. Any new step ordinal is an italic lowercase Roman numeral (i., ii., iii.) in Cormorant Garamond italic at 64–92px.
4. Any new kicker, marker, page numeral, footer, or sign-off is italic Cormorant Garamond at 26–38px in `{colors.ink-soft}` or `{colors.ink}`.
5. Any new pastel introduction (a sixth color) breaks the system. The five-pastel palette (pink, lemon, blush, sage, lilac) is closed.
6. Any new pill uses 999px border-radius with a pastel fill or translucent white. Pills are sub-headline emphasis units, not chrome.
7. The cover swatch row (three circular discs at top-right) is the system's identity mark. Preserve it on cover slides.
8. Page chrome (eyebrow, pagedot, footer) sits at fixed absolute positions on every standard slide. Don't drift the positions.
9. Long-form paragraph reads should open with a drop cap (132px Cormorant Garamond medium) — this is the system's most distinctive editorial moment.
10. The cream field around and between cards is load-bearing. If a layout needs to be denser, increase card content rather than shrinking the field.

## Known Gaps

- The system depends on the external `deck-stage.js` script for slide scaling and navigation. The script is referenced but not embedded; without it, slides will render at intrinsic 1920×1080 without viewport scaling.
- Cormorant Garamond and Work Sans both load from Google Fonts. If fonts fail, the serif falls back to Garamond/serif and the sans falls back to Helvetica/sans-serif; the editorial character degrades significantly without Cormorant.
- The full-bleed closer slide is the only place where a pastel covers the entire canvas. The pattern is intentional but should be used sparingly — every closer at full pink would diminish the cream-as-default identity.
- The five pastels (`{colors.pink}`, `{colors.lemon}`, `{colors.blush}`, `{colors.sage}`, `{colors.lilac}`) are listed as semantically interchangeable, but the source template uses lemon = yes / blush = partial / pink = no inside the matrix layout. New decks may follow or ignore this convention.
- The drop cap treatment depends on CSS `:first-letter` rendering, which has slight cross-browser variation in metric handling. Padding and line-height values are tuned for Cormorant Garamond and may need adjustment if the font fails to load.
- The translucent white card fill (`rgba(255,255,255,0.55)`) depends on the cream paper showing through. On a different background color, the card would read differently — the spec assumes `{colors.paper}` is the surface.
- Card padding values vary across layouts (28/30, 48/52, 64/48) without a strict scale; the rule is "compact, medium, spacious" rather than a fixed token system.
````

---

## 2. 글씨체

- 이 디자인의 한글 글씨체: 제목 Hakgyoansim Eunhasu(400) · 본문 Paperlogy 4Regular(400). (쓰는 폰트: Hakgyoansim Eunhasu, 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장(표지)에서 처음 나오는 부품**
- `.action` — 1장 — 예: `<div class="action">`
- `.blush` — 1·2·4·5장 — 예: `<i class="blush">`
- `.card` — 1·2·3·4·5·6장 — 예: `<div class="card soft opener">`
- `.dc` — 1·6장 — 예: `<span class="dc">`
- `.footer` — 1·2·3·4·5·6장 — 예: `<div class="footer">`
- `.kicker` — 1장 — 예: `<p class="kicker">`
- `.lemon` — 1·2·3·4·5·6장 — 예: `<i class="lemon">`
- `.lilac` — 1·4장 — 예: `<i class="lilac">`
- `.marker` — 1·2·3·4·5·6장 — 예: `<p class="marker">`
- `.opener` — 1장 — 예: `<div class="card soft opener">`
- `.pink` — 1·2·3·5·6장 — 예: `<i class="pink">`
- `.sage` — 1·2·3·4·5·6장 — 예: `<i class="sage">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.soft` — 1·2·3·4·5·6장 — 예: `<div class="card soft opener">`
- `.swatches` — 1장 — 예: `<div class="swatches">`
- `.t1` — 1장 — 예: `<h1 class="t1">`
- `.tagc` — 1장 — 예: `<div class="card pink tagc">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.bt` — 2·5장 — 예: `<button class="pill lemon bt" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.cap2` — 2장 — 예: `<p class="marker cap2">`
- `.eyebrow` — 2·3·4·5·6장 — 예: `<p class="eyebrow">`
- `.fig` — 2장 — 예: `<div class="card soft fig">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.note` — 2·5·6장 — 예: `<button class="pill note bt" data-act="reset">`
- `.nr` — 2·5장 — 예: `<p class="nr">`
- `.num` — 2·4·5·6장 — 예: `<span class="num">`
- `.pagedot` — 2·3·4·5·6장 — 예: `<p class="pagedot">`
- `.pill` — 2·4·5·6장 — 예: `<button class="pill lemon bt" data-act="step">`
- `.step` — 2장 — 예: `<div class="card pink step" data-s="1">`
- `.steps` — 2장 — 예: `<div class="steps">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.bar` — 3장 — 예: `<i class="bar sage" style="height:63%">`
- `.chart` — 3장 — 예: `<div class="card soft chart">`
- `.col` — 3장 — 예: `<div class="col">`
- `.cs` — 3장 — 예: `<p class="cs">`
- `.cv` — 3장 — 예: `<span class="cv">`
- `.hd3` — 3장 — 예: `<div class="vr hd3">`
- `.lb` — 3장 — 예: `<i class="lb sage">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.nv` — 3장 — 예: `<b class="nv">`
- `.plot` — 3장 — 예: `<div class="plot">`
- `.src` — 3장 — 예: `<p class="marker src">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.stc` — 3장 — 예: `<div class="card lemon stc">`
- `.vr` — 3장 — 예: `<div class="vr hd3">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.cp` — 4장 — 예: `<div class="card blush cp">`
- `.lst` — 4장 — 예: `<div class="card lilac lst">`
- `.mtx` — 4장 — 예: `<div class="card soft mtx">`
- `.qbox` — 4장 — 예: `<div class="card soft qbox">`
- `.qm` — 4장 — 예: `<span class="qm">`
- `.sm` — 4·6장 — 예: `<span class="num sm">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`
- `.tt` — 4장 — 예: `<span class="tt">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="pill note blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="card soft blk">`
- `.br` — 5장 — 예: `<p class="br">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.matrix` — 5장 — 예: `<div class="card soft matrix" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-w…`
- `.ot` — 5장 — 예: `<span class="ot">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.row` — 5장 — 예: `<button class="row" data-opt="0">`
- `.rows` — 5장 — 예: `<div class="rows">`
- `.rty` — 5장 — 예: `<button class="pill note bt rty" data-act="retry">`
- `.st` — 5장 — 예: `<span class="pill st">`
- `.wl` — 5장 — 예: `<p class="marker wl">`
- `.words` — 5장 — 예: `<div class="words">`
- `.xs` — 5장 — 예: `<span class="num xs">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="card pink d6 a">`
- `.ab6` — 6장 — 예: `<p class="ab6">`
- `.b` — 6장 — 예: `<div class="card lemon d6 b">`
- `.c` — 6장 — 예: `<div class="card sage d6 c">`
- `.d6` — 6장 — 예: `<div class="card pink d6 a">`
- `.dc6` — 6장 — 예: `<p class="dc6" id="se-dc">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.em6` — 6장 — 예: `<p class="em6" id="se-em">`
- `.g6` — 6장 — 예: `<div class="card soft g6">`
- `.pl6` — 6장 — 예: `<div class="pl6" id="se-pl">`
- `.r6` — 6장 — 예: `<div class="r6">`
- `.sl6` — 6장 — 예: `<p class="marker sl6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

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

---

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

```html
<!DOCTYPE html>
<html lang="ko" data-template="soft-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=Cormorant+Garamond:ital,wght@0,500;1,400;1,500&family=Work+Sans:wght@400;500&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/soft-editorial.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide">
  <div class="swatches"><i class="pink"></i><i class="lemon"></i><i class="blush"></i><i class="sage"></i><i class="lilac"></i></div>
  <p class="kicker">vol. iii — 초등 과학 · 6학년 2학기</p>
  <p class="unit">계절의 변화<span>Sun, Shadow & <em>Temperature</em></span></p>
  <div class="action"><p class="marker">학습 목표</p><h1 class="t1">하루 동안 <em>태양 고도</em>,<br><em>그림자 길이</em>, <em>기온</em>의 관계</h1></div>
  <div class="card soft opener"><p><span class="dc">하</span>루 동안 태양 고도, 그림자 길이, 기온의 관계는? 막대기의 그림자와 실이 이루는 각 = 태양 고도.</p></div>
  <div class="card pink tagc"><p class="marker">이번 호</p><b>1단원 · 3~4차시</b></div>
  <div class="footer"><span>2026</span><span>00초등학교 과학 노트</span></div>
</section>
<section class="slide" data-steps="4">
  <p class="eyebrow">측정 준비</p><p class="pagedot">ii</p><div class="footer"><span>2026 · 1단원 · 3~4차시</span><span>00초등학교 과학 노트</span></div>
  <h2 class="hd">태양 고도 <em>측정기</em> 만들기</h2>
  <div class="card soft fig"><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg><p class="marker cap2"><em>태양 고도</em> — 태양이 지표면과 이루는 각. 막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <div class="steps"><div class="card pink step" data-s="1"><span class="num">i.</span><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div><div class="card lemon step" data-s="2"><span class="num">ii.</span><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div><div class="card blush step" data-s="3"><span class="num">iii.</span><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div><div class="card sage step" data-s="4"><span class="num">iv.</span><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div>
  <div class="btns"><button class="pill lemon bt" data-act="step">다음 단계 →</button><button class="pill note bt" data-act="reset">처음부터</button><p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  <p class="nr">버튼 규칙 없음 → 알약으로 표현</p>
</section>
<section class="slide">
  <p class="eyebrow">측정 결과</p><p class="pagedot">iii</p><div class="footer"><span>2026 · 1단원 · 3~4차시</span><span>00초등학교 과학 노트</span></div>
  <h2 class="hd">하루 동안 무엇이 <em>어떻게</em> 변할까요?</h2>
  <div class="stats"><div class="card lemon stc"><b class="nv">12:30</b><p class="cs">남중 시각</p><p>태양 고도가 가장 높아요</p></div><div class="card soft stc"><b class="nv">정남</b><p class="cs">남중 방향</p><p>남중할 때 태양의 위치</p></div><div class="card soft stc"><b class="nv">14:30</b><p class="cs">최고 기온</p><p>기온이 가장 높아요</p></div><div class="card soft stc"><b class="nv">9:30</b><p class="cs">가장 긴 그림자</p><p>그림자가 가장 길어요</p></div></div>
  <div class="card soft chart">
    <div class="lg"><span><i class="lb sage"></i>태양 고도(°)</span><span><i class="lb pink"></i>가장 높은 값</span><span class="marker">예시 값</span></div>
    <div class="plot"><div class="col"><span class="cv">38°</span><i class="bar sage" style="height:63%"></i></div><div class="col"><span class="cv">48°</span><i class="bar sage" style="height:80%"></i></div><div class="col"><span class="cv">55°</span><i class="bar sage" style="height:92%"></i></div><div class="col"><span class="cv">57°</span><i class="bar pink" style="height:95%"></i></div><div class="col"><span class="cv">54°</span><i class="bar sage" style="height:90%"></i></div><div class="col"><span class="cv">47°</span><i class="bar sage" style="height:78%"></i></div><div class="col"><span class="cv">37°</span><i class="bar sage" style="height:62%"></i></div></div>
    <div class="vr hd3"><span></span><span>9:30</span><span>10:30</span><span>11:30</span><span>12:30</span><span>13:30</span><span>14:30</span><span>15:30</span></div>
    <div class="vr"><span>그림자 길이(cm)</span><span>12.9</span><span>9.1</span><span>7</span><span>6.4</span><span>7.2</span><span>9.4</span><span>13.4</span></div>
    <div class="vr"><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="marker src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
</section>
<section class="slide">
  <p class="eyebrow">관계 정리</p><p class="pagedot">iv</p><div class="footer"><span>2026 · 1단원 · 3~4차시</span><span>00초등학교 과학 노트</span></div>
  <h2 class="hd">태양 고도가 바뀌면 무엇이 <em>달라질까요</em>?</h2>
  <div class="cmp"><div class="card blush cp"><span class="num sm">i.</span><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="card sage cp"><span class="num sm">ii.</span><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
  <div class="card soft mtx"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span class="tt">오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span class="tt">낮 12:30</span><span><span class="pill lemon">가장 높아요</span></span><span><span class="pill lemon">가장 짧아요</span></span><span><span class="pill blush">높아지는 중</span></span></div><div class="tr"><span class="tt">오후 14:30</span><span><span class="pill blush">낮아지는 중</span></span><span><span class="pill blush">길어지는 중</span></span><span><span class="pill lemon">가장 높아요</span></span></div></div>
  <div class="card soft qbox"><span class="qm">“</span><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 <em>차이</em>가 있어요.</p><p class="marker">— 오늘의 정리</p></div>
  <div class="card lilac lst"><p class="marker">남중</p><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p>이때의 태양 고도를 남중 고도라고 해요</p></div>
</section>
<section class="slide">
  <p class="eyebrow">확인하기</p><p class="pagedot">v</p><div class="footer"><span>2026 · 1단원 · 3~4차시</span><span>00초등학교 과학 노트</span></div>
  <h2 class="hd">배운 내용을 <em>확인해</em> 볼까요?</h2>
  <div class="card soft matrix" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <p class="marker">한 가지 질문</p>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="rows"><button class="row" data-opt="0"><span class="num xs">a.</span><span class="ot">오전 9시 30분</span><span class="pill st"></span></button><button class="row" data-opt="1"><span class="num xs">b.</span><span class="ot">낮 12시 30분 무렵</span><span class="pill st"></span></button><button class="row" data-opt="2"><span class="num xs">c.</span><span class="ot">오후 3시 30분</span><span class="pill st"></span></button></div>
    <p class="fb" data-fb></p>
    <button class="pill note bt rty" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="card soft blk">
    <p class="marker">빈칸을 눌러 확인해요</p>
    <p class="br"><span class="num xs">i.</span><span><button class="pill note blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</span></p><p class="br"><span class="num xs">ii.</span><span><button class="pill note blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</span></p><p class="br"><span class="num xs">iii.</span><span><button class="pill note blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</span></p>
    <p class="marker wl">오늘의 낱말</p>
    <div class="words"><span class="pill pink">태양 고도</span><span class="pill lemon">남중 고도</span><span class="pill blush">그림자 길이</span><span class="pill sage">기온</span></div>
  </div>
  <p class="nr">빈칸 규칙 없음 → 메모 알약으로 표현</p>
</section>
<section class="slide">
  <p class="eyebrow">디자인 안내</p><p class="pagedot">vi</p><div class="footer"><span>2026 · 1단원 · 3~4차시</span><span>00초등학교 과학 노트</span></div>
  <h2 class="hd">이 디자인 사용 <em>설명서</em></h2>
  <div class="card soft g6">
    <p class="marker">한눈에</p>
    <p class="ab6"><span class="dc">소</span>규모 문예 계간지·연구 노트. <b>크림 종이 한 바탕</b>에 둥근 카드 두 종류(반투명 흰 · 파스텔)만 — 그림자도 대문자도 없어요.</p>
    <div class="r6"><p class="marker">색</p><p><span class="sw6"><span><i style="background:#F2EEDF"></i>크림 종이</span><span><i style="background:#E1A4C2"></i>분홍</span><span><i style="background:#D6DD63"></i>레몬</span><span><i style="background:#E8C9B6"></i>블러시</span><span><i style="background:#B7C7A8"></i>세이지</span><span><i style="background:#C9BEDC"></i>라일락</span><span><i style="background:#2A241B"></i>잉크</span></span></p></div><div class="r6"><p class="marker">글꼴</p><p>제목·숫자 Cormorant Garamond → Hakgyoansim Eunhasu<br>본문 Work Sans → Paperlogy 4Regular</p></div><div class="r6"><p class="marker">이렇게 쓰면 좋아요</p><p>읽기·감상·글쓰기처럼 차분한 수업. 파스텔에는 뜻이 없으니 색으로 구분하지 말고 글로 말해요.</p></div>
  </div>
  <p class="marker sl6">대표 장치 — 눌러 보세요</p>
  <div class="card pink d6 a"><div class="dh"><h3><span class="num">i.</span> 드롭캡</h3><button class="pill note sm" data-demo="#se-dc" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p class="dc6" id="se-dc"><span>오</span>늘은 해가 가장 높이 뜨는 시각을 찾아 그림자를 재어 보아요.</p></div>
  <div class="card lemon d6 b"><div class="dh"><h3><span class="num">ii.</span> 가벼운 강조</h3><button class="pill note sm" data-demo="#se-em" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p class="em6" id="se-em">a study of <span>light</span> &amp; shadow</p></div>
  <div class="card sage d6 c"><div class="dh"><h3><span class="num">iii.</span> 매트릭스 알약</h3><button class="pill note sm" data-demo="#se-pl" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><div class="pl6" id="se-pl"><span class="pill note">예</span><span class="pill note">부분</span><span class="pill note">아니오</span></div></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">‹</button><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><button class="dk-next" aria-label="다음">›</button></nav>
  </main>
</div>

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

---

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

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

```css
/* soft-editorial — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-41';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/hakgyoansim-eunhasu/HakgyoansimEunhasuR.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:#F2EEDF;--slide-bg:#F2EEDF;
  --kt:'kp-41';--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{--paper:#F2EEDF;--ink:#2A241B;--soft:#5C5345;--pink:#E1A4C2;--lemon:#D6DD63;--blush:#E8C9B6;--sage:#B7C7A8;--lilac:#C9BEDC;--card:rgba(255,255,255,.55);--rs:rgba(42,36,27,.18);--rm:rgba(42,36,27,.35)}
.slide{background:var(--paper);color:var(--ink);font-family:'Work Sans',var(--kb),sans-serif;font-weight:var(--wb)}
.slide>*{position:absolute}
.pink{background:var(--pink)}.lemon{background:var(--lemon)}.blush{background:var(--blush)}.sage{background:var(--sage)}.lilac{background:var(--lilac)}
h1,h2,h3,.unit,.nv,.qbox p:not(.marker),.tt,.q,.tagc b{font-family:'Cormorant Garamond',var(--kt),serif;font-weight:var(--wt);letter-spacing:-.01em}
.slide em{font-family:'Cormorant Garamond',var(--kt),serif;font-style:italic;font-weight:400}
.card{border-radius:28px}
.card.soft{background:var(--card)}
.num,.kicker,.marker,.pagedot,.footer,.qm,.nr{font-family:'Cormorant Garamond',var(--kb),serif;font-style:italic}
.marker{font-size:32px;font-weight:400;color:var(--soft)}
.pill{display:inline-block;border-radius:999px;padding:6px 18px;font:500 24px/1.2 'Work Sans',var(--kb),sans-serif;color:var(--ink)}
.pill.note{background:var(--card);border:1px solid var(--rm)}
.bt{font-size:28px;padding:12px 28px}
.bt:disabled{opacity:.4}
.nr{left:50%;transform:translateX(-50%);bottom:96px;font-size:24px;color:var(--soft);white-space:nowrap}
.hd{left:80px;right:80px;top:120px;font-size:88px;line-height:1.05;white-space:nowrap}

/* --- 크롬(고정 위치): 눈썹 · 쪽번호 · 꼬리 --- */
.eyebrow{left:80px;top:60px;font-size:28px}
.pagedot{right:80px;top:60px;font-size:30px;color:var(--soft)}
.footer{left:80px;right:80px;bottom:50px;display:flex;justify-content:space-between;font-size:26px;color:var(--soft)}

/* --- 1. 표지: 파스텔 원 줄 + 이탤릭 킥커 + 단원(영문 em) + 레몬 행동 띠(학습 목표, 핵심 낱말 = em) + 드롭캡 여는 글 + 분홍 카드 --- */
.swatches{right:80px;top:60px;display:flex;gap:14px}
.swatches i{width:56px;height:56px;border-radius:50%}
.kicker{left:80px;top:130px;font-size:38px;font-weight:400;color:var(--soft)}
.unit{left:76px;top:186px;display:flex;align-items:baseline;gap:30px;font-size:92px;line-height:1.05;white-space:nowrap}
.unit span{font:500 58px/1 'Cormorant Garamond',serif;color:var(--soft)}
.action{left:80px;right:80px;top:330px;background:var(--lemon);border-radius:24px;padding:24px 36px 30px}
.t1{margin-top:6px;font-size:112px;line-height:1.16;white-space:nowrap}
.t1 em{font-weight:400}
.opener{left:80px;width:1080px;top:750px;padding:30px 44px}
.opener p{font-size:30px;line-height:1.6}
.dc{float:left;font:500 132px/.85 'Cormorant Garamond',var(--kt),serif;padding:8px 14px 0 0}
.tagc{left:1220px;right:80px;top:750px;height:170px;padding:26px 40px;display:flex;flex-direction:column;justify-content:space-between;border-radius:36px}
.tagc b{font-size:72px;line-height:1}

/* --- 2. 만들기: 반투명 카드 속 측정기 그림(이탤릭 마커 = 정의) | 파스텔 단계 카드 2×2(이탤릭 로마 숫자, 켜지면 또렷) + 알약 버튼 --- */
.fig{left:80px;top:260px;width:900px;padding:22px 30px 22px;
  --g-ink:var(--ink);--g-acc:#b0457a;--g-stick:var(--soft);--g-board:var(--blush);--g-ruler:var(--lemon);--g-prot:rgba(201,190,220,.45);--g-shadow:rgba(42,36,27,.3);--g-font:'Work Sans',var(--kb),sans-serif;--g-sw:2}
.fig .gauge{width:800px;display:block;margin:0 auto}
.cap2{margin-top:8px;padding-top:12px;border-top:1px dashed var(--rs);font-size:28px;line-height:1.35}
.steps{left:1020px;right:80px;top:260px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.step{border-radius:32px;padding:22px 26px 24px;min-height:262px;display:flex;flex-direction:column;transition:opacity .3s}
.num{font-size:64px;font-weight:500;line-height:.9}
.step h3{margin-top:auto;font-size:44px;line-height:1.05}
.step p{margin-top:8px;font-size:23px;line-height:1.45}
.slide[data-step]:not([data-step="0"]) .step:not(.on){opacity:.35}
.step.now{outline:1.5px solid var(--rm);outline-offset:6px}
.btns{left:1020px;right:80px;top:850px;display:flex;align-items:center;gap:16px}
.cap{flex:1;font-size:24px;line-height:1.35;color:var(--soft)}

/* --- 3. 숫자와 그래프: 레몬 + 반투명 통계 카드 4장 | 반투명 카드 막대(세이지, 가장 높은 값 = 분홍, 범례 막대) + 점선 값 줄 --- */
.stats{left:80px;right:80px;top:250px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.stc{padding:20px 30px;border-radius:28px}
.nv{display:block;font-size:76px;line-height:1}
.cs{margin-top:6px;font:500 24px/1.2 'Work Sans',var(--kb),sans-serif}
.stc p:last-child{margin-top:4px;font-size:23px;line-height:1.4;color:var(--soft)}
.chart{left:80px;right:80px;top:470px;padding:22px 40px 18px}
.lg{display:flex;align-items:center;gap:30px;font-size:22px}
.lg .marker{margin-left:auto;font-size:28px}
.lb{display:inline-block;width:28px;height:12px;border-radius:6px;margin-right:10px}
.plot{height:200px;margin-top:10px;display:grid;grid-template-columns:200px repeat(7,1fr);border-bottom:1.5px solid var(--rm)}
.plot::before{content:''}
.col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bar{display:block;width:44%;border-radius:12px 12px 0 0}
.cv{margin-bottom:6px;font:italic 500 28px/1 'Cormorant Garamond',serif}
.vr{display:grid;grid-template-columns:200px repeat(7,1fr);text-align:center;padding:8px 0;border-bottom:1px dashed var(--rs);font-size:24px}
.vr:last-child{border-bottom:0}
.vr span:first-child{text-align:left;font-size:22px;color:var(--soft)}
.vr.hd3{font:italic 500 26px/1.2 'Cormorant Garamond',serif}
.src{left:80px;right:80px;top:946px;font-size:22px}

/* --- 4. 비교와 표: 블러시·세이지 카드(로마 숫자) + 매트릭스 카드(레몬 = 가장 · 블러시 = 바뀌는 중) | 따옴표 카드(블러시 따옴표) + 라일락 남중 카드 --- */
.cmp{left:80px;width:1060px;top:250px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cp{padding:22px 32px 26px}
.cp h3{margin:6px 0 8px;font-size:42px;line-height:1.1}
.cp p{font-size:25px;line-height:1.5}
.num.sm{font-size:48px;color:var(--soft)}
.mtx{left:80px;width:1060px;top:600px;padding:20px 36px}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:16px;align-items:center;padding:12px 0;border-bottom:1px dashed var(--rs);font-size:25px}
.tr:last-child{border-bottom:0}
.tr.th{font:italic 400 26px/1.2 'Cormorant Garamond',var(--kb),serif;color:var(--soft);border-bottom:1.5px solid var(--rm)}
.tt{font-size:32px}
.tr .pill{font-size:21px;padding:4px 14px}
.qbox{left:1180px;right:80px;top:250px;padding:20px 40px 26px;border-radius:36px}
.qm{display:block;height:84px;font-size:170px;line-height:.9;color:var(--blush)}
.qbox p:not(.marker){font-size:46px;line-height:1.15}
.qbox .marker{margin-top:12px;font-size:28px}
.lst{left:1180px;right:80px;top:700px;padding:22px 36px;border-radius:28px}
.lst p:not(.marker){font-size:24px;line-height:1.5}

/* --- 5. 확인하기: 매트릭스 퀴즈(a. b. c. + 상태 알약 고르기 → 예 / 아니오) | 반투명 빈칸 카드(메모 알약) + 파스텔 낱말 알약 --- */
.matrix{left:80px;width:1020px;top:250px;bottom:140px;border-radius:36px;padding:30px 44px 26px;display:flex;flex-direction:column}
.q{margin-top:6px;font-size:56px;line-height:1.1}
.rows{margin-top:18px;border-top:1.5px solid var(--rm)}
.row{width:100%;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;text-align:left;padding:14px 0;border-bottom:1px dashed var(--rs);font-size:34px;color:var(--ink)}
.num.xs{font-size:40px;color:var(--soft)}
.st{font-size:22px;padding:4px 14px;background:var(--card);border:1px solid var(--rs)}
.row .st::after{content:'고르기'}
.row.right .st{background:var(--lemon);border-color:transparent}.row.right .st::after{content:'예'}
.row.right .ot{font-family:'Cormorant Garamond',var(--kt),serif;font-style:italic}
.row.wrong .st{background:var(--pink);border-color:transparent}.row.wrong .st::after{content:'아니오'}
.row:disabled:not(.right){opacity:.5}
.fb{margin-top:14px;font-size:27px;line-height:1.5;color:var(--soft)}
.rty{align-self:flex-start;margin-top:auto}
.blk{left:1140px;right:80px;top:250px;bottom:140px;border-radius:36px;padding:30px 40px;display:flex;flex-direction:column;gap:16px}
.br{display:grid;grid-template-columns:56px 1fr;align-items:baseline;font-size:28px;line-height:1.7}
.blank{position:relative;min-width:160px;margin-right:8px;text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;top:6px}
.blank.open{background:var(--lemon);border-color:transparent}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{display:flex;flex-wrap:wrap;gap:10px}

/* --- 내비: 꼬리 가운데 작은 점 + 이탤릭 화살표 --- */
.dk-nav{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;z-index:40}
.dk-dots{display:flex;gap:10px}
.dk-dot{width:12px;height:12px;border-radius:50%;background:var(--rs)}
.dk-dot.on{background:var(--pink)}
.dk-prev,.dk-next{font:italic 400 40px/1 'Cormorant Garamond',serif;color:var(--soft);padding:0 8px}
.dk-prev:disabled,.dk-next:disabled{opacity:.3}
/* --- 6. 디자인 안내: 반투명 카드 설명 | 파스텔 카드 시연 3개 --- */
.g6{left:80px;width:960px;top:270px;bottom:120px;padding:26px 40px}
.g6>.marker{font-size:28px}
.ab6{display:flow-root;margin:4px 0 14px;font-size:30px;line-height:1.6}
.ab6 b{font-weight:600}
.r6{display:grid;grid-template-columns:230px 1fr;gap:16px;align-items:baseline;padding:20px 0;border-top:1px dashed var(--rm)}
.r6:first-of-type{border-top:1.5px solid var(--ink)}
.r6 .marker{font-size:28px}
.r6 p+p{font-size:27px;line-height:1.5}
.sw6{display:flex;flex-wrap:wrap;gap:6px 18px}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-5px;border-radius:50%;border:1px solid var(--rm)}
.sl6{left:1100px;top:240px;font-size:30px}
.d6{left:1100px;right:80px;height:212px;padding:20px 32px}
.d6.a{top:296px}.d6.b{top:526px}.d6.c{top:756px;height:180px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:44px;line-height:1.05}
.d6 .num{font-size:36px;font-weight:400;margin-right:6px}
.pill.sm{font-size:20px;padding:6px 16px}
.pill.sm[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.dc6{margin-top:12px;font-size:24px;line-height:1.5}
.dc6.play span{float:left;font:500 82px/.85 'Cormorant Garamond',var(--kt),serif;padding:6px 12px 0 0}
.em6{margin-top:18px;font-size:50px;line-height:1.3;font-family:'Cormorant Garamond',var(--kt),serif;font-weight:var(--wt)}
.em6.play span{font-style:italic;font-weight:400}
.pl6{margin-top:22px;display:flex;gap:14px}
.pl6 .pill{font-size:24px;padding:8px 24px}
.pl6.play .pill:nth-child(1){background:var(--lemon);border-color:transparent}
.pl6.play .pill:nth-child(2){background:var(--blush);border-color:transparent}
.pl6.play .pill:nth-child(3){background:var(--pink);border-color:transparent}

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