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

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

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

## 라이선스

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

- Noto Serif KR Black: Noto Serif KR — [합침 2026-10-07] 같은 가족의 폴더를 이 폴더로 합침 / --- NotoSerifCJKKR ---
  파일: NotoSerifKR-Black.ttf
- Noto Sans KR Thin: Noto Sans KR — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: (c) 2014-2021 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'.
  파일: NotoSansKR-Thin.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/pink-script.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/pink-script.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Noto Serif KR Black(900) · 본문 Noto Sans KR Thin(100))는 공통 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. 디자인 규칙 (`pink-script` design.md)

````markdown
---
version: alpha
name: Pink Script (After Hours)
description: A nocturnal couture editorial system rendered in hot fuchsia ink on dim warm-black paper, with a soft film-grain overlay and a hairline interior frame. DM Serif Display carries every script and editorial moment at sizes up to 600px; Inter at weight 300 carries the body voice; JetBrains Mono carries the boutique-catalog metadata. The aesthetic borrows from glossy fashion magazine spreads, late-night perfume advertising, and the editorial pages of high-end zines — closer to a Maison's seasonal lookbook than a startup deck.

colors:
  ink-deep: "#060507"
  ink-violet: "#0F0D11"
  paper-blush: "#F5EDF1"
  pink: "#ED3D8C"
  pink-light: "#FF66A8"
  pink-deep: "#B81D67"
  line-pink: "rgba(237, 61, 140, 0.32)"
  mute-paper: "rgba(245, 237, 241, 0.55)"
  hair-paper: "rgba(245, 237, 241, 0.14)"

color-aliases:
  c-bg: ink-deep
  c-fg: paper-blush
  c-accent: pink
  c-line: line-pink

typography:
  script-huge:
    fontFamily: "DM Serif Display, serif"
    fontSize: 540px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
    color: "{colors.pink}"
  script-section:
    fontFamily: "DM Serif Display, serif"
    fontSize: 600px
    fontWeight: 400
    lineHeight: 0.82
    letterSpacing: -0.02em
    color: "{colors.pink}"
  script-giant:
    fontFamily: "DM Serif Display, serif"
    fontSize: 360px
    fontWeight: 400
    lineHeight: 1.05
    color: "{colors.pink}"
  script-cover:
    fontFamily: "DM Serif Display, serif"
    fontSize: 280px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.015em
    color: "{colors.pink}"
  script-large:
    fontFamily: "DM Serif Display, serif"
    fontSize: 220px
    fontWeight: 400
    lineHeight: 1.04
    color: "{colors.pink}"
  script-med:
    fontFamily: "DM Serif Display, serif"
    fontSize: 156px
    fontWeight: 400
    lineHeight: 1.04
    color: "{colors.pink}"
  script-sm:
    fontFamily: "DM Serif Display, serif"
    fontSize: 132px
    fontWeight: 400
    lineHeight: 1.06
    color: "{colors.pink}"
  serif-cta:
    fontFamily: "DM Serif Display, serif"
    fontSize: 140px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.015em
    color: "{colors.paper-blush}"
  serif-h2:
    fontFamily: "DM Serif Display, serif"
    fontSize: 132px
    fontWeight: 400
    lineHeight: 1.06
    color: "{colors.paper-blush}"
  serif-quote:
    fontFamily: "DM Serif Display, serif"
    fontSize: 92px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.005em
    color: "{colors.paper-blush}"
  serif-chart-h:
    fontFamily: "DM Serif Display, serif"
    fontSize: 90px
    fontWeight: 400
    lineHeight: 1.06
    color: "{colors.paper-blush}"
  serif-section-h:
    fontFamily: "DM Serif Display, serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 1.06
    color: "{colors.paper-blush}"
  serif-stat:
    fontFamily: "DM Serif Display, serif"
    fontSize: 116px
    fontWeight: 400
    lineHeight: 0.9
    color: "{colors.pink}"
  serif-toc-num:
    fontFamily: "DM Serif Display, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    color: "{colors.pink}"
  serif-toc-title:
    fontFamily: "DM Serif Display, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    color: "{colors.paper-blush}"
  serif-quote-attr:
    fontFamily: "DM Serif Display, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    color: "{colors.paper-blush}"
  serif-process-h:
    fontFamily: "DM Serif Display, serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.05
    color: "{colors.paper-blush}"
  serif-matrix-label:
    fontFamily: "DM Serif Display, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    color: "{colors.paper-blush}"
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.55
    color: "{colors.paper-blush}"
  body-muted:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.5
    color: "{colors.mute-paper}"
  body-toc-desc:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.4
    color: "{colors.mute-paper}"
  mono-runner:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    fontWeight: 400
    letterSpacing: 0.14em
    textTransform: uppercase
  mono-kicker:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 22px
    fontWeight: 400
    letterSpacing: 0.14em
    textTransform: uppercase
    color: "{colors.pink}"
  mono-label:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 22px
    fontWeight: 400
    letterSpacing: 0.14em
    textTransform: uppercase
    color: "{colors.paper-blush}"
  mono-cover-pre:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 28px
    fontWeight: 400
    letterSpacing: 0.42em
    textTransform: uppercase
    color: "{colors.paper-blush}"
  mono-pill:
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 16px
    fontWeight: 400
    letterSpacing: 0.08em
    textTransform: uppercase

spacing:
  edge-x: 60px
  edge-top-chrome: 60px
  edge-bottom-chrome: 60px
  content-top: 140px
  content-bottom: 140px
  inner-frame-inset: 36px

canvas:
  width: 1920px
  height: 1080px

components:
  slide-surface:
    background: "radial-gradient(ellipse 90% 70% at 30% 30%, #1A1218 0%, #0A0709 55%, #050306 100%)"
    description: "Universal dark surface — radial ellipse from a slightly warmer #1A1218 in the upper-left fading to near-black in the lower-right. The off-center light source is part of the system's identity."
  film-grain:
    selector: ".slide::before"
    background: "fractalNoise SVG via data URI, baseFrequency=0.9, octaves=2"
    opacity: 0.08
    mixBlendMode: screen
    description: "Subtle film grain overlay on every slide via ::before. Opacity 0.08 with screen blend — barely visible but reads as photographic grain rather than digital flatness."
  hairline-frame:
    selector: ".slide::after"
    position: "absolute; inset: 36px"
    border: "1px solid {colors.hair-paper}"
    description: "1px paper-blush-at-14%-opacity interior frame inset 36px from each slide edge. Always present. Functions as the editorial border of the magazine page."
  runner:
    position: "absolute; top: 60px; left: 60px; right: 60px"
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    letterSpacing: 0.14em
    textTransform: uppercase
    description: "Top metadata runner — brand name on left (colored pink), section / chapter tag on right (muted paper-blush)."
  footer:
    position: "absolute; bottom: 60px; left: 60px; right: 60px"
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 24px
    letterSpacing: 0.14em
    textTransform: uppercase
    description: "Bottom metadata runner — source / confidentiality on left, page-position (e.g. '03 / 09') on right. Page-position has paper-blush base text with a pink ::em for the current number."
  pink-rule:
    height: 1px
    background: "{colors.pink}"
    opacity: 0.45
    description: "Hairline pink rule for soft section separators."
  hair-rule:
    height: 1px
    background: "{colors.paper-blush}"
    opacity: 0.25
    description: "Hairline paper rule for muted section separators."
  pink-glow:
    textShadow: "0 0 80px rgba(237, 61, 140, 0.18)"
    description: "Soft pink halo behind large script titles. Applied via text-shadow on hero serif text only."
  pink-glow-mega:
    textShadow: "0 0 120px rgba(237, 61, 140, 0.22)"
    description: "Stronger pink halo for section-divider mega numerals."
  callout-rail:
    borderLeft: "1px solid {colors.pink}"
    paddingLeft: 24px
    description: "Pink left rule with right-aligned content — used as a callout container beside a chart, beside a chapter explanation."
  matrix-cell:
    padding: "16px 24px"
    borderBottom: "1px solid {colors.line-pink}"
    fontFamily: "Inter, sans-serif"
    fontSize: 22px
    fontWeight: 300
    color: "{colors.paper-blush}"
    description: "Comparison matrix cell. Rows are separated by hairline pink-at-32% rules; columns are gap-separated, no vertical borders."
  matrix-cell-us:
    background: "rgba(237, 61, 140, 0.08)"
    description: "Highlighted matrix row variant — soft pink wash to mark the 'our' column."
  pill-outline:
    border: "1px solid {colors.pink}"
    color: "{colors.pink}"
    padding: "6px 14px"
    fontFamily: "JetBrains Mono, monospace"
    fontSize: 16px
    letterSpacing: 0.08em
    textTransform: uppercase
    description: "Hollow pink pill — 1px pink border with pink mono text. The default pill state."
  pill-solid:
    background: "{colors.pink}"
    color: "{colors.ink-deep}"
    border: "1px solid {colors.pink}"
    fontWeight: 500
    description: "Solid pink pill — pink fill, deep-ink text. Affirmative / featured state."
  pill-dim:
    borderColor: "{colors.hair-paper}"
    color: "{colors.mute-paper}"
    description: "Dim pill — muted paper border, muted paper text. The de-emphasized state."
  qr-tile:
    width: 180px
    height: 180px
    background: "{colors.paper-blush}"
    padding: 12px
    description: "QR-code container — solid paper-blush square with 12px white padding around the SVG QR. The only large light-surface element in the system."
  stat-row:
    display: "grid; columns: 240px 1fr"
    borderBottom: "1px solid {colors.hair-paper}"
    paddingBottom: 16px
    description: "Stat row pattern — large pink serif figure on the left (with a paper-blush superscript unit) paired with a mono label and Inter description on the right. Rows are separated by 1px paper hairline."
  callout-num:
    fontFamily: "DM Serif Display, serif"
    fontSize: 120px
    lineHeight: 0.9
    color: "{colors.pink}"
    description: "Chart callout number — large pink serif numeral with smaller paper-colored unit suffix."
  arrow-glyph:
    width: 24px
    height: 24px
    color: "{colors.pink}"
    description: "Small pink right-arrow SVG used between process steps."
---

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

Pink Script is a **nocturnal couture editorial system** built on a single atmospheric premise: a deep warm-black surface lit from the upper-left by a slightly warmer #1A1218 ellipse that fades to near-black across the lower-right. The off-center light source reads as a studio softbox catching one corner of a magazine spread. Over this, a subtle film-grain overlay at 8% opacity with screen blend adds the photographic graininess of late-night editorial photography. Inside this surface sits a 1px hairline interior frame (paper-blush at 14% opacity, inset 36px from each edge) — the editorial border of every page. Without the lit gradient, the film grain, and the interior frame, the system collapses into flat dark UI.

The typeface stack is a deliberate three-voice editorial pairing. **DM Serif Display** carries every editorial moment — script titles (treated as the system's "pink script"), serif headlines, stat figures, quote text. It runs at weight 400 only; the face has just one weight and that's the system's display voice. The serif scales freely from 32px (table labels) all the way up to 600px (section-divider numerals). **Inter** at weight 300 carries every body paragraph, lead, description, and caption — the ultra-light geometric sans is the system's calm prose voice. **JetBrains Mono** at weight 400 carries every label, kicker, page number, axis tag, runner, and footer string — always uppercase with at least 0.08em positive tracking.

The palette is anchored to a single signature: **hot pink fuchsia** (`{colors.pink}` — #ED3D8C) against deep warm-black (`{colors.ink-deep}` — #060507). The pink is the entire editorial accent system; it appears as script title color, as kicker color, as chart line color, as pill border, as inline `<em>` switch inside paper-blush headlines, as callout numerals, as rule color, and as the soft halo (text-shadow glow) behind hero script titles. **Paper-blush** (`{colors.paper-blush}` — #F5EDF1) is the secondary text color — used for editorial sans-serif headlines, paragraph copy, and any moment that should read as ink rather than highlight. Muted paper at 55% opacity handles secondary text; hairline paper at 14% handles separators and the interior frame.

Depth is created through three layered mechanisms: the **off-center radial gradient surface** (lit from the upper-left), the **subtle film-grain overlay** (8% opacity, screen blend, adds photographic texture), and the **pink halo text-shadow** on hero script titles (a soft 80–120px glow that simulates the light bleed of large neon-saturated type on photographic paper). There are no drop shadows on any element; the depth is atmospheric and photographic, not structural.

**Density philosophy: sparse-medium with one hero moment.** Pink Script reads as elegant when a single oversized script anchors the slide and the rest is generous negative space punctuated by 2–4 small editorial fragments (a runner, a kicker, a paragraph, a footer). A slide with the hero script taking up 60–70% of the canvas and the supporting copy quietly orbiting the remaining margin is correct. Cramming the canvas with multiple equally-weighted regions breaks the late-night magazine feeling. The exception is the stats slide (5 stat rows side-by-side), the comparison matrix (full-grid table), and the system slide (multiple panels) — these slides are denser by design because the editorial purpose is reference, not poetry. Process and TOC slides are populated but always hierarchical: a giant script header dominates, with smaller card rows orbiting beneath.

**Key Characteristics:**
- Deep warm-black surface (`{components.slide-surface}`) lit from the upper-left by a radial gradient ellipse.
- A subtle film-grain overlay (`{components.film-grain}`) on every slide — opacity 0.08, screen blend.
- A 1px paper-blush interior frame (`{components.hairline-frame}`) inset 36px from each edge, present on every slide.
- Hot fuchsia pink (`{colors.pink}`) is the single chromatic accent — used as script color, kicker color, line color, pill outline, inline emphasis, and the soft halo behind hero scripts.
- DM Serif Display carries every editorial moment, scaling from 32px to 600px. There is no second display face.
- Inter at weight 300 carries every body paragraph — ultra-light sans is the system's prose voice.
- JetBrains Mono uppercase at 0.08em+ tracking carries every label, page number, and runner string.
- Top runner and bottom footer chromes appear on every slide; the runner brand text is pink, everything else in chrome is muted paper-blush.
- The inline `<em>` element switches paper-blush serif headlines to pink — the system's editorial emphasis mechanism.

## Colors

### Palette

- **Ink Deep** (`{colors.ink-deep}` — #060507): The base surface color. A near-black with a faint warm shift. Combined with the radial gradient, this anchors the dark editorial surface.
- **Ink Violet** (`{colors.ink-violet}` — #0F0D11): A slightly lifted dark with a violet cast. Reserved alternate dark — available but rarely used in current slide types.
- **Paper Blush** (`{colors.paper-blush}` — #F5EDF1): A warm off-white with a faint pink undertone. The primary editorial text color, the QR-tile background, and the secondary highlight surface. Reads as paper rather than pure white.
- **Pink** (`{colors.pink}` — #ED3D8C): Hot fuchsia. The system's single chromatic accent. Used as the script title color, kicker color, inline `<em>` color, callout numeral color, rule color, chart line color, pill outline color, and the source color for the halo text-shadow.
- **Pink Light** (`{colors.pink-light}` — #FF66A8): A brighter pink. Defined but not used in current slide types.
- **Pink Deep** (`{colors.pink-deep}` — #B81D67): A darker pink. Defined but not used in current slide types.
- **Line Pink** (`{colors.line-pink}` — rgba(237,61,140,0.32)): Pink at 32% opacity for table row dividers and chart axis lines.
- **Mute Paper** (`{colors.mute-paper}` — rgba(245,237,241,0.55)): Paper-blush at 55% for muted body text and metadata.
- **Hair Paper** (`{colors.hair-paper}` — rgba(245,237,241,0.14)): Paper-blush at 14% for the interior hairline frame, dim pill borders, and toc-row dividers.

### Defaults

- **Default slide surface**: `{components.slide-surface}` — the lit warm-black radial gradient. Always.
- **Default film grain**: `{components.film-grain}` at opacity 0.08 with screen blend. Non-optional.
- **Default interior frame**: `{components.hairline-frame}` at 1px paper-blush 14%. Non-optional.
- **Default primary headline color**: For a hero script moment, `{colors.pink}`. For an editorial headline that should read as ink (not highlight), `{colors.paper-blush}`.
- **Default body text color**: `{colors.paper-blush}` for primary copy; `{colors.mute-paper}` for muted lead and description.
- **Default kicker color**: `{colors.pink}`. The eyebrow label is always pink.
- **Default label / metadata color**: `{colors.mute-paper}` for runner, footer, and metadata.
- **Default line / divider color**: `{colors.pink}` at 45% opacity for soft pink rules; `{colors.hair-paper}` for muted hairlines.
- **Default emphasis mechanism inside a paper-blush headline**: wrap in `<em>` to switch that word to `{colors.pink}` (font-style stays upright).
- **Default pill state**: outline (`{components.pill-outline}`) — pink border, pink text.
- **Default chart series**: pink line for primary; muted paper-blush dashed for secondary.

The pink is the only chromatic color in regular use; the other pink variants (Pink Light, Pink Deep) are reserved. Don't introduce a second chromatic accent — Pink Script's identity is that it is monochromatically pink.

## Typography

### Font Family

The system loads three web fonts: **DM Serif Display** (weight 400, italic 0 only) carries every editorial / display moment from 32px up to 600px; **Inter** (weights 300, 400, 500, 600) carries every body paragraph and lead; **JetBrains Mono** (weights 400, 500) carries every label, runner, footer, and metadata string.

The emotional register of each face is distinct:
- DM Serif Display reads as **editorial, perfume-magazine, late-night couture** — the face has elegant high-contrast strokes and the system uses it for every moment that should feel literary or magazine-typeset.
- Inter at weight 300 reads as **calm, contemporary, neutrally elegant** — the ultra-light weight matches the editorial tone without competing with the serif.
- JetBrains Mono reads as **archival, boutique-catalog, edition-numbered** — the mono uppercase voice handles edition numbers, page positions, runner brand text, and section tags.

A key inline mixing rule: **the `<em>` element inside a DM Serif Display headline switches color to `{colors.pink}`** (font-style normalized to upright). This is the system's primary headline emphasis — pink ink inside paper-blush serif text.

A second inline mixing rule: **a `<sup>` element inside a stat figure renders at ~36px in `{colors.paper-blush}`** with a slight top-padding offset — used for unit suffixes (%, ×, M).

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.script-section}` | 600px | DM Serif Display | 400 | Section-divider mega numeral |
| `{typography.script-huge}` | 540px | DM Serif Display | 400 | Hero script in a feature display position |
| `{typography.script-giant}` | 360px | DM Serif Display | 400 | Large editorial script title |
| `{typography.script-cover}` | 280px | DM Serif Display | 400 | Cover script title |
| `{typography.script-large}` | 220px | DM Serif Display | 400 | TOC primary script |
| `{typography.script-med}` | 156px | DM Serif Display | 400 | Process slide primary headline |
| `{typography.serif-cta}` | 140px | DM Serif Display | 400 | Closing CTA headline (paper-blush color) |
| `{typography.script-sm}` | 132px | DM Serif Display | 400 | Stat-slide headline, matrix headline |
| `{typography.serif-stat}` | 116px | DM Serif Display | 400 | Stat row figure |
| `{typography.callout-num}` | 120px | DM Serif Display | 400 | Chart callout numeral |
| `{typography.serif-quote}` | 92px | DM Serif Display | 400 | Quote-slide body text |
| `{typography.serif-chart-h}` | 90px | DM Serif Display | 400 | Chart-slide headline |
| `{typography.serif-section-h}` | 88px | DM Serif Display | 400 | Section divider supporting headline |
| `{typography.serif-toc-num}` | 64px | DM Serif Display | 400 | TOC row numeral |
| `{typography.serif-toc-title}` | 56px | DM Serif Display | 400 | TOC row title |
| `{typography.serif-quote-attr}` | 48px | DM Serif Display | 400 | Quote attribution name |
| `{typography.serif-process-h}` | 38px | DM Serif Display | 400 | Process step heading |
| `{typography.serif-matrix-label}` | 32px | DM Serif Display | 400 | Matrix row label |
| `{typography.body}` | 24px | Inter | 300 | Standard body paragraph |
| `{typography.body-muted}` | 22px | Inter | 300 | Muted lead and description |
| `{typography.body-toc-desc}` | 24px | Inter | 300 | TOC row description |
| `{typography.mono-runner}` | 24px | JetBrains Mono | 400 | Top runner and bottom footer |
| `{typography.mono-kicker}` | 22px | JetBrains Mono | 400 | Pink kicker eyebrow |
| `{typography.mono-label}` | 22px | JetBrains Mono | 400 | Standard paper-blush label |
| `{typography.mono-cover-pre}` | 28px | JetBrains Mono | 400 | Cover preamble line (with 0.42em wide tracking) |
| `{typography.mono-pill}` | 16px | JetBrains Mono | 400 | Pill text |

### Defaults

- **Default primary content headline**: `{typography.script-sm}` (132px) — when the slide is a content moment with a strong headline.
- **Default cover / opening headline**: `{typography.script-cover}` (280px) — the cover script lockup.
- **Default section-divider mega numeral**: `{typography.script-section}` (600px).
- **Default body paragraph**: `{typography.body}` (24px Inter 300).
- **Default muted lead / description**: `{typography.body-muted}` (22px Inter 300, mute-paper color).
- **Default label / kicker**: `{typography.mono-kicker}` (22px JetBrains Mono, pink).
- **Default footer / runner**: `{typography.mono-runner}` (24px JetBrains Mono).
- **Default stat figure**: `{typography.serif-stat}` (116px) with a 36px paper-blush `<sup>` for unit.
- **Default weight for any display element**: 400 (DM Serif Display has only one weight).
- **Default weight for body**: 300.

When unsure, the canonical pattern is: a 22px pink kicker + a 132–156px DM Serif Display headline (with one `<em>`-wrapped word in pink if extra emphasis is needed) + a 22–24px Inter 300 paragraph in muted paper-blush. That three-element pattern is the system's most reliable rhythm.

### Signature Treatments

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

- **Every slide carries the radial-gradient surface, the film-grain overlay, AND the 1px paper-blush interior frame.** All three together. Removing any one collapses the editorial-magazine reading.
- **Every hero script element (sizes 280px and larger) carries the pink halo text-shadow.** `{components.pink-glow}` for hero scripts (80px blur); `{components.pink-glow-mega}` for section-divider mega numerals (120px blur). The halo simulates the light bleed of neon-saturated print.
- **Every script color is `{colors.pink}`.** DM Serif Display in any other color is not "script" — it becomes "serif headline." The pink color is what defines script vs. headline in this system.
- **Paper-blush serif headlines may switch one word to pink via `<em>`** — this is the system's headline emphasis mechanism. The `<em>` stays upright (font-style: normal).
- **DM Serif Display headlines always have `padding-bottom: .1em` (or `.12em` for the largest script).** This compensates for the serif descenders so the visual baseline reads correctly aligned.
- **All JetBrains Mono is uppercase with at least 0.08em positive tracking** (most chrome and labels use 0.12–0.18em; the cover preamble uses 0.42em).
- **Body text is always Inter at weight 300.** Inter at any other weight is not body — switching to 400 reads as a different tone.
- **The kicker is always pink** in `{colors.pink}`. The eyebrow color is non-negotiable.
- **Runner brand text on the left is always pink; the right-side meta is always muted paper-blush.** The pink brand text is the system's persistent identity signal.
- **The page-position footer uses paper-blush base text with a pink `<em>` for the current number.** Format: `<span>03 / 09</span>` where `03` is wrapped in `<em>` to render pink.

### Typography Principles

The rhythm of Pink Script is **oversized pink script + paper-blush serif paragraph headline + muted Inter prose + small mono editorial tag**. Switching any voice (e.g., setting a script in Inter, or body in DM Serif) collapses the system's editorial register. The serif scales freely from 32px to 600px; choose the size based on the slide's hero moment, not on a fixed scale.

Italic letterforms are not used (DM Serif Display does have an italic, but it's not loaded by the template). The `<em>` tag is repurposed as a pink color switch. Underline is not used. Bold weight is not available in DM Serif Display, and using bold Inter for body breaks the calm prose voice.

## Layout

### Canvas System

The system targets a **fixed 1920×1080 canvas** rendered inside a `<deck-stage>` web component. All sizes are pixel-fixed; the stage handles proportional scaling.

Most slides use **absolute positioning** with edge-anchored elements. The standard content area is `inset: 140px 60px 140px 60px` — a 140px top reserve for the runner + headline area, 140px bottom reserve for the footer, and 60px left/right edge margins.

### Padding and Anchoring

| Anchor | Value | Use |
|---|---|---|
| `edge-x` | 60px | Left and right edge margins for content |
| `edge-top-chrome` | 60px | Top inset for the runner chrome |
| `edge-bottom-chrome` | 60px | Bottom inset for the footer chrome |
| `content-top` | 140px | Top inset for slide body content (below runner) |
| `content-bottom` | 140px | Bottom inset for slide body content (above footer) |
| `inner-frame-inset` | 36px | The hairline interior frame inset |

### Chrome Frame

Every slide carries a **top runner** at 60px top / 60px sides — a brand name on the left (always pink) and a section / chapter tag on the right (muted paper-blush). The runner is JetBrains Mono uppercase at 24px with 0.14em tracking.

Every slide also carries a **bottom footer** at 60px bottom / 60px sides — typically a source or confidentiality string on the left and a page-position marker on the right. The page-position uses paper-blush base with a pink `<em>` for the current number (e.g., `01 / 09`).

The **hairline interior frame** at 1px paper-blush 14% sits at `inset: 36px` on every slide. It is the editorial border of the magazine page and present unconditionally.

## Depth and Elevation

### No Box Shadows, Atmospheric Depth Only

The system uses **zero box-shadow declarations** on any structural element. Depth comes from three atmospheric layers:

1. **The radial-gradient surface** (`{components.slide-surface}`) — lit from the upper-left by a warm dark ellipse fading to near-black across the lower-right. This creates the impression of a studio softbox catching one corner of the page.
2. **The film-grain overlay** (`{components.film-grain}`) — 8% opacity, screen blend, adds photographic graininess to the surface.
3. **The pink halo text-shadow** on hero script titles — a soft 80–120px blur in pink at low alpha that simulates the light bleed of large neon-saturated type on photographic paper.

### No Drop Shadows on Cards or Panels

Cards, tables, and panels do not carry shadows. The system's "card" pattern is structural rather than elevated: a region defined by a border or a left-rule, sitting flat on the surface.

### Hairline Rules as Structural Depth

Where the system needs to separate regions, it uses:
- 1px pink at 45% opacity (`{components.pink-rule}`) for soft pink rules.
- 1px paper-blush at 14% (`{components.hair-paper}`) for muted hairline separators.
- 1px pink at 32% (`{colors.line-pink}`) for table row dividers and chart axis lines.

Never a 2px or thicker rule. Never a colored rule outside pink and paper.

## Shapes and Treatment

### Border Radius

| Value | Use |
|---|---|
| 0px | Cards, panels, table cells, QR tiles, runner / footer text |
| 999px | None — pills here are explicitly rectangular |

The system has **zero border-radius** on any structural element. Pills are 0-radius rectangles (despite the "pill" naming convention). The only round element is the small chart-callout circle marker (an SVG `<circle>` element marking an inflection point).

### Border Weights

- **1px solid paper-blush at 14%** — the universal interior hairline frame.
- **1px solid pink** (`{colors.pink}`) — pill outlines.
- **1px solid pink at 32%** (`{colors.line-pink}`) — table dividers, chart axes.
- **1px solid paper-blush at 14%** — TOC row dividers, footer separators.
- **1px solid pink** at full opacity — left callout-rail border, top-of-step border in process slides.
- **1px dashed pink at 18%** — chart grid lines.

No other border weights exist. There is no 2px, 3px, or thicker border anywhere in the system.

### Decorative Element Types

**Hero script title** — A DM Serif Display headline at 220–600px in pink with the halo text-shadow. The defining moment of any slide that uses it. Always pink, always with the glow, always carries `padding-bottom: .1em` to compensate for descenders.

**Paper-blush serif headline** — A DM Serif Display headline at 88–140px in paper-blush. Used when the moment should read as ink rather than highlight. May contain `<em>` to switch one word to pink.

**Pink kicker** — A 22px JetBrains Mono uppercase eyebrow in `{colors.pink}` placed above a headline. The system's most consistent appearance of pink alongside the hero script.

**Mono runner / footer** — Standard JetBrains Mono chrome at 24px / 0.14em tracking. The brand on the runner is always pink; the rest is muted paper-blush.

**Pink rule (`{components.pink-rule}`)** — 1px pink at 45% opacity. Used as a soft separator.

**Hairline rule (`{components.hair-rule}`)** — 1px paper-blush at 14% opacity. Used as a muted separator and as the TOC row divider.

**Callout rail (`{components.callout-rail}`)** — A 1px pink left border with right-aligned content padding-left 24px. Used as a vertical callout container beside charts or beside a chapter explanation.

**Stat row (`{components.stat-row}`)** — A 240px serif figure paired with a mono label + Inter description, separated from the next row by a 1px paper hairline. Stat figures are pink; descriptions are muted paper-blush.

**Pills (`{components.pill-outline}`, `{components.pill-solid}`, `{components.pill-dim}`)** — Three pill states: hollow pink (default), solid pink with deep-ink text (affirmative / featured), and dim hairline (de-emphasized). All are 0-radius rectangles.

**QR tile (`{components.qr-tile}`)** — A 180×180 paper-blush square with 12px white padding and an SVG QR inside. The only large light-surface element in the system; it functions as a "ticket" object on the CTA slide.

**Chart callout** — A 120px pink serif numeral with a 0.5em paper-colored unit suffix, plus a small mono label and a 22px muted Inter description, anchored to the right of a chart by a 1px pink callout rail.

**Chart line** — A 3px solid pink line for the primary series; a 2px paper-blush dashed line for the secondary series. The inflection point on the primary line carries a 9px solid pink circle with an 18px hollow ring at 50% opacity and a vertical dashed line dropping to the axis.

**Process step** — A vertical column anchored by a 1px solid pink top border with a 96px pink serif numeral, a 38px paper-blush serif heading, and an Inter description. Steps are separated by a 24px gap and connected by a small pink arrow glyph.

**Matrix table** — A 4-column grid with the first column being a 32px paper-blush serif label, the column header row colored pink, and the "our column" row tinted with `rgba(237, 61, 140, 0.08)` to mark it.

## Do's and Don'ts

### Do
- Apply the radial-gradient surface, the film-grain overlay, and the 1px paper-blush interior frame to every slide. All three are non-optional.
- Set hero script titles in `{colors.pink}` with the halo text-shadow. The glow is part of the script's identity.
- Use DM Serif Display for every editorial / display moment. The serif is the system's only editorial face — don't substitute a second face.
- Set body paragraphs in Inter at weight 300. The ultra-light weight is the system's calm prose voice.
- Use JetBrains Mono uppercase with at least 0.08em tracking for every label, page number, runner, and footer string.
- Use `<em>` inside a paper-blush serif headline to switch one word to pink — the system's primary headline emphasis.
- Place a pink kicker above every primary headline. The pink eyebrow is the system's editorial signal.
- Use the pink left-rule callout (`{components.callout-rail}`) to anchor a stat, a callout, or a chapter explanation to the right of a chart or content region.
- Add `padding-bottom: .1em` to every DM Serif Display headline. The serif descenders need compensation.
- Use the page-position footer pattern with pink `<em>` for the current number: `<em>03</em> / 09`.

### Don't
- Don't omit the film grain or the interior hairline frame. The system's editorial atmosphere depends on both.
- Don't use box-shadow on any panel or card. Depth is atmospheric, not structural.
- Don't introduce a second chromatic accent. Pink is the only accent. Adding red, blue, or green breaks the system.
- Don't render the pink fuchsia as text on the paper-blush surface — the contrast inverts and looks like a typo.
- Don't put body copy in DM Serif Display. The serif is for editorial moments, not paragraphs.
- Don't put display headlines in Inter. The sans is the body voice, not the headline voice.
- Don't round any element. Cards, pills, tables, QR tiles — all strict rectangles.
- Don't use blurred shadows on any element. The only "shadow" in the system is the pink halo text-shadow on hero scripts, and that's a glow, not a drop shadow.
- Don't use italic letterforms. The `<em>` tag is repurposed as a pink color switch.
- Don't crowd a slide with multiple equally-weighted regions. The system reads as elegant when one hero moment dominates.

## Responsive Behavior

The system targets a **fixed 1920×1080 canvas** rendered inside a `<deck-stage>` web component. The stage handles proportional scaling to the browser viewport — all pixel-fixed sizes inside the canvas scale uniformly.

### Presenter Behavior
- Navigation, scaling, and presenter chrome are handled by the `<deck-stage>` component.
- Keyboard, touch, and mouse-wheel navigation are managed by the stage.
- The canvas is constant 1920×1080 regardless of viewport.

### Print Behavior
Print export depends on the deck-stage component's print handling. The pink halo text-shadow and the film-grain overlay may render inconsistently in PDF export — test before assuming visual parity.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin face | Chinese face (recommended) | Weight | Notes |
|---|---|---|---|---|
| Script / display (DM Serif Display) | DM Serif Display | **思源宋体 Noto Serif SC** | **900** | Heavy serif that holds visual mass on dark backgrounds. The default choice. |
| Display alternate (delicate moments) | DM Serif Display | 站酷小薇体 ZCOOL XiaoWei | 400 | Couture-thin display face — use only at very large sizes (400px+) where delicacy reads as intentional. Too thin on dark backgrounds at typical headline sizes (40–200px). |
| Body (Inter 300) | Inter | Noto Serif SC (思源宋体) | 400 | Serif body keeps the editorial register cohesive with the heavy display. |
| Label / runner (JetBrains Mono UPPERCASE tracked) | JetBrains Mono | Noto Sans SC | 400 (do not force monospace on CJK) | |

### Mixed-Content Strategy

Strategy A — extend each token's `fontFamily` to include the Chinese face after the Latin face. DM Serif Display tokens become `"DM Serif Display, 'Noto Serif SC', serif"` with `font-weight: 900` on the Chinese run; Inter body tokens become `"Inter, 'Noto Serif SC', system-ui, sans-serif"`; JetBrains Mono tokens become `"JetBrains Mono, 'Noto Sans SC', monospace"`. Latin glyphs render in their original face; CJK falls through automatically.

**Critical**: when Chinese text uses the display role, set `font-weight: 900` explicitly. DM Serif Display's "single weight" is already visually heavy because it's a high-contrast display serif — the equivalent CJK heaviness lives at weight 900 in Noto Serif SC, not weight 400.

### Loading

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

### Universal CJK Adjustments

- Line-height: body 1.75–1.85, display 1.15–1.25
- Letter-spacing: 0 on CJK
- Text-transform: no uppercase on CJK
- Full-width punctuation （，。：；！？「」（））
- No period on display headlines (Chinese typography convention)
- Pangu spacing 盘古之白 (space between CJK and Latin: `使用 Claude` not `使用Claude`)
- One font per sentence

### Aesthetic Notes for This System

Pink Script (After Hours) is a nocturnal couture system whose entire editorial identity rests on DM Serif Display in hot fuchsia pink at sizes up to 600px against dim warm-black paper. The visual weight of DM Serif Display at any size is substantial — high-contrast strokes, serif terminals, and a typographic mass that holds against the dark background.

The recommended Chinese equivalent is **思源宋体 Noto Serif SC at weight 900**. This carries the same visual mass as DM Serif Display: bold serif terminals, sufficient stroke density to read clearly against the dark surface, and the editorial register that defines the system. Weight 900 is non-negotiable for display moments — anything lighter (400, 500, even 700) will visually disappear against the pink-glow + dark-paper combination and break the entire couture register.

**站酷小薇体 ZCOOL XiaoWei** is a viable secondary option for moments where extreme delicacy reads as intentional — a single 400-px+ pull-quote, a hairline section divider title, a brand wordmark at the very top of a cover slide. Its single-weight 400 with extreme stroke contrast carries a different feeling: dressier, more whisper-thin, more vintage-Vogue than modern-fashion-editorial. For most display work, choose Noto Serif SC 900; reach for XiaoWei only when the moment is genuinely a delicate accent at extreme size.

The pink halo text-shadow (`{components.pink-glow}` at 80–120px blur) transfers perfectly to Chinese characters regardless of which display face you choose. **Apply the same glow to every Chinese display moment in pink** — the neon bleed effect is script-agnostic and the late-night magazine atmosphere survives the script switch fully.

The pink color (`{colors.pink}` — #ED3D8C) as the only chromatic accent works unchanged. The inline `<em>` color switch (paper-blush headline with one word in pink) is a clean transfer to Chinese — wrap one CJK character or one phrase in `<em>` and the pink ink switch reads exactly the same.

**Inter at weight 300 for body** does not transfer directly. Noto Serif SC at weight 400 is the recommended body face — its high-contrast serif stroke matches the couture register of the system's overall feel. Body color stays paper-blush (`{colors.paper-blush}`); the ultra-light register is achieved through size, paper-blush color, and the muted 55%-opacity lead, not through font weight.

JetBrains Mono uppercase tracked labels (runner brand, page numbers, footer chrome) do not transfer to CJK. Pure Latin chrome strings (the brand name itself, edition numbers like `01 / 09`) keep JetBrains Mono. For Chinese chrome text (a section / chapter tag in the upper-right), use Noto Sans SC 400 at the same 24px size with letter-spacing reset to 0 and no uppercase.

The radial-gradient surface, the film-grain overlay, the 1px paper-blush interior frame — all script-agnostic. The pink halo, the kicker, the callout rail, the stat-row pattern, the matrix-cell — all transfer unchanged.

### Known CJK Gap

DM Serif Display's "single weight" is misleading: it's a high-contrast display serif that reads as visually heavy at any size. The Chinese equivalent heaviness lives at Noto Serif SC **weight 900**, not weight 400 — using weight 400 for display will make Chinese headlines look limp and disconnected from the bold pink callouts. The system's reliance on size for hierarchy still works in Chinese, but you must lock display weight at 900 to preserve the visual mass.

ZCOOL XiaoWei is the only CDN-loadable Chinese face that captures the "high-contrast couture serif" character in its proportions, but its single-weight 400 is too thin for most display sizes on this template's dark surface. Treat XiaoWei as a niche option, not the default.

## Iteration Guide

1. Every new slide background is the lit radial gradient (`{components.slide-surface}`) with film grain and the interior hairline frame. Don't skip any of the three layers.
2. Every new hero script title is DM Serif Display in `{colors.pink}` with the halo text-shadow at 80–120px blur.
3. Every new editorial headline that should read as ink (not highlight) is DM Serif Display in `{colors.paper-blush}`. Use `<em>` inside to switch a word to pink.
4. Every new body paragraph is Inter at weight 300 in paper-blush (full) or mute-paper (muted).
5. Every new label, runner, footer, or metadata tag is JetBrains Mono uppercase at 0.08em+ tracking.
6. Every new kicker eyebrow is pink. Don't render a kicker in any other color.
7. Every new pill is a 0-radius rectangle. Choose outline (default), solid (affirmative), or dim (de-emphasized) state.
8. Every new table or matrix uses 1px pink-at-32% row dividers and no vertical borders.
9. Every chart uses a 3px solid pink line for primary and a 2px paper-blush dashed line for secondary. Don't introduce a third color.
10. The runner brand text is always pink; the right-side meta is always muted paper-blush. Don't swap.

## Known Gaps

- The system depends on a `<deck-stage>` web component loaded via `deck-stage.js`. Without it, the 1920×1080 canvas will not scale and slides will render at native pixel size.
- The film-grain overlay uses a data-URI SVG with `feTurbulence`. Some browsers (older Safari) render the noise inconsistently or skip it in PDF export.
- DM Serif Display has only weight 400. There is no bold or italic variant available — the system has no fallback weight scale and depends on size alone for hierarchy.
- The pink halo text-shadow uses fixed 80px and 120px blur values. At very small viewport scales, the glow may dominate the type; at very large scales, the glow may appear weak.
- The `{colors.pink-light}`, `{colors.pink-deep}`, and `{colors.ink-violet}` tokens are defined but inactive in current slide types. They are reserved for future variation.
- The QR-tile SVG inside the CTA slide is a hand-coded pattern of `<rect>` elements that does not encode a real scannable code. Real QR codes need to be generated externally.
- Chart line points and inflection markers are SVG `<polyline>` coordinates that must be computed manually. There is no data-binding layer.
- The cover script lockup uses `padding-left: 180px` on the second line for an indented hanging effect. This is a hardcoded layout decision and doesn't generalize to other word lengths — long second lines may break the centering.
- The runner and footer rely on `white-space: nowrap` to prevent line-wrap. Extremely long brand names or page-position strings may overflow the 60px edge margin.
- The matrix `cell.us` column highlight is a hardcoded `rgba(237, 61, 140, 0.08)` wash. Tinting other columns requires per-column class additions.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.brand` — 1·2·3·4·5·6장 — 예: `<span class="brand">`
- `.footer` — 1·2·3·4·5·6장 — 예: `<div class="footer">`
- `.k1` — 1장 — 예: `<p class="kick k1">`
- `.kick` — 1·2·3·4·5·6장 — 예: `<p class="kick k1">`
- `.lede` — 1장 — 예: `<p class="lede">`
- `.num` — 1장 — 예: `<b class="script num">`
- `.pre` — 1장 — 예: `<p class="pre">`
- `.runner` — 1·2·3·4·5·6장 — 예: `<div class="runner">`
- `.script` — 1장 — 예: `<b class="script num">`
- `.serif` — 1·2·3·4·5·6장 — 예: `<p class="serif unit">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.t1` — 1장 — 예: `<h1 class="serif t1">`
- `.unit` — 1장 — 예: `<p class="serif unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.arw` — 2장 — 예: `<svg class="arw" viewBox="0 0 24 24">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quo…`
- `.drl` — 2장 — 예: `<div class="rail drl">`
- `.fig` — 2장 — 예: `<figure class="fig">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="serif hd">`
- `.mu` — 2장 — 예: `<p class="mu">`
- `.pill` — 2·5·6장 — 예: `<button class="pill solid" data-act="step">`
- `.pn` — 2·4·6장 — 예: `<b class="pn">`
- `.proc` — 2장 — 예: `<div class="proc">`
- `.ps` — 2·4장 — 예: `<div class="ps" data-s="1">`
- `.rail` — 2·4·5·6장 — 예: `<div class="rail drl">`
- `.solid` — 2장 — 예: `<button class="pill solid" data-act="step">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.a` — 3·6장 — 예: `<i class="ln a">`
- `.axis` — 3장 — 예: `<line x1="0" x2="1000" y1="299" y2="299" class="axis"/>`
- `.b` — 3·6장 — 예: `<i class="ln b">`
- `.c` — 3·6장 — 예: `<i class="ln c">`
- `.chart` — 3장 — 예: `<svg class="chart" viewBox="0 0 1000 300">`
- `.dot` — 3·6장 — 예: `<circle cx="50" cy="177" r="7" class="dot"/>`
- `.grid` — 3장 — 예: `<line x1="0" x2="1000" y1="80" y2="80" class="grid"/>`
- `.hd3` — 3·4장 — 예: `<div class="mr hd3">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.ln` — 3장 — 예: `<i class="ln a">`
- `.m3` — 3장 — 예: `<div class="mtx m3">`
- `.main` — 3·6장 — 예: `<path d="M50 177 L200 119 L350 79 L500 67 L650 85 L800 125 L950 182" class="main"/>`
- `.ml` — 3·4·5·6장 — 예: `<span class="ml">`
- `.mr` — 3·4장 — 예: `<div class="mr hd3">`
- `.mtx` — 3·4장 — 예: `<div class="mtx m3">`
- `.ring` — 3·6장 — 예: `<circle cx="500" cy="67" r="18" class="ring"/>`
- `.sec` — 3장 — 예: `<path d="M50 82 L200 140 L350 173 L500 182 L650 170 L800 136 L950 75" class="sec"/>`
- `.sr` — 3장 — 예: `<div class="sr">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.sv` — 3장 — 예: `<b class="sv">`
- `.ter` — 3장 — 예: `<path d="M50 223 L200 171 L350 131 L500 99 L650 79 L800 67 L950 82" class="ter"/>`
- `.us` — 3·4장 — 예: `<div class="mr us">`
- `.vl` — 3장 — 예: `<text x="50" y="159" class="vl">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.cp` — 4장 — 예: `<div class="ps cp">`
- `.lst` — 4장 — 예: `<div class="rail lst">`
- `.m4` — 4장 — 예: `<div class="mtx m4">`
- `.pk` — 4·5·6장 — 예: `<p class="ml pk">`
- `.qt` — 4장 — 예: `<blockquote class="qt">`

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

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.ch6` — 6장 — 예: `<svg class="ch6" id="ps-ring" viewBox="0 0 560 90">`
- `.d6` — 6장 — 예: `<div class="d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.g6` — 6장 — 예: `<div class="rail g6">`
- `.gl6` — 6장 — 예: `<b class="gl6" id="ps-glow">`
- `.pl6` — 6장 — 예: `<div class="pl6" id="ps-pill">`
- `.r6` — 6장 — 예: `<div class="r6">`
- `.r6g` — 6장 — 예: `<circle cx="278" cy="16" r="18" class="ring r6g"/>`
- `.sl6` — 6장 — 예: `<p class="ml pk sl6">`
- `.sm` — 6장 — 예: `<button class="pill sm" data-demo="#ps-glow" data-mode="toggle" aria-pressed="false">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

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

---

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

```html
<!DOCTYPE html>
<html lang="ko" data-template="pink-script">
<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=DM+Serif+Display&family=Inter:wght@300;400&family=JetBrains+Mono:wght@400&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/pink-script.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide">
  <div class="runner"><span class="brand">00초등학교</span><span>초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</span></div>
  <p class="pre">After hours · Lesson 03</p>
  <p class="serif unit">계절의 변화<span>Sun, Shadow & Temperature</span></p>
  <b class="script num">03</b>
  <p class="kick k1">학습 목표</p>
  <h1 class="serif t1">하루 동안 <em>태양 고도</em>,<br><em>그림자 길이</em>, <em>기온</em>의 관계</h1>
  <p class="lede">자 붙이기  ·  수수깡 꽂기  ·  실 묶기  ·  각도기 끼우기</p>
  <div class="footer"><span>Sun, Shadow & Temperature — 2026</span><span><em>01</em> / 06</span></div>
</section>
<section class="slide" data-steps="4">
  <div class="runner"><span class="brand">00초등학교</span><span>측정 준비</span></div>
  <p class="kick">측정 준비</p><h2 class="serif hd">태양 고도 <em>측정기</em> 만들기</h2>
  <figure class="fig"><figcaption>Fig. 01 — 태양 고도 측정기</figcaption><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></figure>
  <div class="rail drl"><p><em>태양 고도</em> — 태양이 지표면과 이루는 각</p><p class="mu">막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <div class="proc"><div class="ps" data-s="1"><b class="pn">01</b><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div><svg class="arw" viewBox="0 0 24 24"><path d="M3 12h16M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></div><div class="ps" data-s="2"><b class="pn">02</b><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div><svg class="arw" viewBox="0 0 24 24"><path d="M3 12h16M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></div><div class="ps" data-s="3"><b class="pn">03</b><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div><svg class="arw" viewBox="0 0 24 24"><path d="M3 12h16M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></div><div class="ps" data-s="4"><b class="pn">04</b><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="pill solid" data-act="step">다음 단계 →</button><button class="pill" data-act="reset">처음부터</button><p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 — 자 붙이기&quot;,&quot;02 — 수수깡 꽂기&quot;,&quot;03 — 실 묶기&quot;,&quot;04 — 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  <div class="footer"><span>버튼 규칙 없음 → 알약으로 표현</span><span><em>02</em> / 06</span></div>
</section>
<section class="slide">
  <div class="runner"><span class="brand">00초등학교</span><span>측정 결과</span></div>
  <p class="kick">측정 결과</p><h2 class="serif hd">하루 동안 무엇이 <em>어떻게</em> 변할까요?</h2>
  <div class="lg"><span><i class="ln a"></i>태양 고도</span><span><i class="ln b"></i>그림자 길이</span><span><i class="ln c"></i>기온</span></div>
  <svg class="chart" viewBox="0 0 1000 300">
    <line x1="0" x2="1000" y1="80" y2="80" class="grid"/><line x1="0" x2="1000" y1="150" y2="150" class="grid"/><line x1="0" x2="1000" y1="220" y2="220" class="grid"/>
    <line x1="0" x2="1000" y1="299" y2="299" class="axis"/>
    <path d="M50 223 L200 171 L350 131 L500 99 L650 79 L800 67 L950 82" class="ter"/>
    <path d="M50 82 L200 140 L350 173 L500 182 L650 170 L800 136 L950 75" class="sec"/>
    <path d="M50 177 L200 119 L350 79 L500 67 L650 85 L800 125 L950 182" class="main"/>
    <circle cx="50" cy="177" r="7" class="dot"/><text x="50" y="159" class="vl">38°</text><circle cx="200" cy="119" r="7" class="dot"/><text x="200" y="101" class="vl">48°</text><circle cx="350" cy="79" r="7" class="dot"/><text x="350" y="61" class="vl">55°</text><circle cx="500" cy="67" r="7" class="dot"/><text x="500" y="49" class="vl">57°</text><circle cx="650" cy="85" r="7" class="dot"/><text x="650" y="67" class="vl">54°</text><circle cx="800" cy="125" r="7" class="dot"/><text x="800" y="107" class="vl">47°</text><circle cx="950" cy="182" r="7" class="dot"/><text x="950" y="164" class="vl">37°</text>
    <circle cx="500" cy="67" r="18" class="ring"/>
  </svg>
  <div class="mtx m3"><div class="mr 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="mr us"><span class="serif">태양 고도(°)</span><span>38</span><span>48</span><span>55</span><span>57</span><span>54</span><span>47</span><span>37</span></div><div class="mr"><span class="serif">그림자 길이(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="mr"><span class="serif">기온(℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div></div>
  <div class="stats"><div class="sr"><b class="sv">12:30</b><div><span class="ml">남중 시각</span><p>태양 고도가 가장 높아요 무렵 · 남중</p></div></div><div class="sr"><b class="sv">정남</b><div><span class="ml">남중 방향</span><p>남중할 때 태양의 위치 쪽</p></div></div><div class="sr"><b class="sv">14:30</b><div><span class="ml">최고 기온</span><p>기온이 가장 높아요 무렵</p></div></div><div class="sr"><b class="sv">9:30</b><div><span class="ml">가장 긴 그림자</span><p>그림자가 가장 길어요 · 15:30</p></div></div></div>
  <div class="footer"><span>예시 값 · 셋째 계열 규칙 없음 → 흐린 핑크 점선으로 표현</span><span><em>03</em> / 06</span></div>
</section>
<section class="slide">
  <div class="runner"><span class="brand">00초등학교</span><span>관계 정리</span></div>
  <p class="kick">관계 정리</p><h2 class="serif hd">태양 고도가 바뀌면 무엇이 <em>달라질까요</em>?</h2>
  <div class="cmp"><div class="ps cp"><b class="pn">A</b><div><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div></div><div class="ps cp"><b class="pn">B</b><div><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div></div>
  <div class="mtx m4"><div class="mr hd3"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="mr"><span class="serif">오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="mr us"><span class="serif">낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="mr"><span class="serif">오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
  <div class="rail lst"><p class="ml pk">남중</p><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p>이때의 태양 고도를 남중 고도라고 해요</p></div>
  <blockquote class="qt"><p class="serif">태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 <em>차이</em>가 있어요.</p><span class="ml">— 오늘의 정리</span></blockquote>
  <div class="footer"><span>시각별 변화</span><span><em>04</em> / 06</span></div>
</section>
<section class="slide">
  <div class="runner"><span class="brand">00초등학교</span><span>확인하기</span></div>
  <p class="kick">확인하기</p><h2 class="serif hd">배운 내용을 <em>확인해</em> 볼까요?</h2>
  <div class="matrix" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <p class="ml pk">Question</p>
    <h3 class="serif q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="rows"><button class="row" data-opt="0"><span class="serif rl">01</span><span class="ot">오전 9시 30분</span><span class="pill st"></span></button><button class="row" data-opt="1"><span class="serif rl">02</span><span class="ot">낮 12시 30분 무렵</span><span class="pill st"></span></button><button class="row" data-opt="2"><span class="serif rl">03</span><span class="ot">오후 3시 30분</span><span class="pill st"></span></button></div>
    <p class="fb" data-fb></p>
    <button class="pill rty" data-act="retry">다시 풀기 ↺</button>
  </div>
  <div class="rail blk">
    <p class="ml pk">빈칸을 눌러 확인해요</p>
    <p class="br"><button class="blank pill" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="br"><button class="blank pill" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="br"><button class="blank pill" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
    <p class="ml wl">Today's words</p>
    <p class="serif words">태양 고도 <em>·</em> 남중 고도 <em>·</em> 그림자 길이 <em>·</em> 기온</p>
  </div>
  <div class="footer"><span>빈칸 규칙 없음 → 알약으로 표현</span><span><em>05</em> / 06</span></div>
</section>
<section class="slide">
  <div class="runner"><span class="brand">00초등학교</span><span>디자인 안내</span></div>
  <p class="kick">디자인 안내</p><h2 class="serif hd">이 디자인 사용 <em>설명서</em></h2>
  <div class="rail g6"><div class="r6"><span class="ml pk">한눈에</span><p>한밤의 쿠튀르 화보. <b>따뜻한 검정 바탕 + 필름 그레인 + 1px 안쪽 틀</b>이 모든 장에 깔리고, 핫 푸크시아 하나로만 강조해요.</p></div><div class="r6"><span class="ml pk">색</span><p><span class="sw6"><span><i style="background:#ED3D8C"></i>핫 푸크시아</span><span><i style="background:#F5EDF1"></i>블러시 글자</span><span><i style="background:rgba(245,237,241,.6)"></i>흐린 글</span><span><i style="background:#060507"></i>검정</span></span></p></div><div class="r6"><span class="ml pk">글꼴</span><p>제목·스크립트 DM Serif Display → Noto Serif KR Black<br>본문 Inter 300 → Noto Sans KR Thin · 라벨 JetBrains Mono 대문자</p></div><div class="r6"><span class="ml pk">이렇게 쓰면 좋아요</span><p>감성적인 주제, 작품 감상·발표처럼 분위기가 중요한 수업. 핑크는 한 장에 몇 군데만 — 많으면 빛을 잃어요.</p></div></div>
  <p class="ml pk sl6">대표 장치 — 눌러 보세요</p>
  <div class="d6 a"><div class="dh"><b class="pn">01</b><h3>스크립트 빛번짐</h3><button class="pill sm" data-demo="#ps-glow" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>큰 핑크 글자 뒤에 80px 핑크 빛이 은은하게 번져요.</p><b class="gl6" id="ps-glow">03</b></div>
  <div class="d6 b"><div class="dh"><b class="pn">02</b><h3>꺾임점 + 고리</h3><button class="pill sm" data-demo="#ps-ring" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>3px 핑크 선의 꺾임점은 9px 점, 가장 높은 점에만 18px 고리.</p>
    <svg class="ch6" id="ps-ring" viewBox="0 0 560 90"><path d="M20 73 L106 43 L192 22 L278 16 L364 25 L450 46 L536 76" class="main"/><circle cx="20" cy="73" r="4.5" class="dot"/><circle cx="106" cy="43" r="4.5" class="dot"/><circle cx="192" cy="22" r="4.5" class="dot"/><circle cx="278" cy="16" r="4.5" class="dot"/><circle cx="364" cy="25" r="4.5" class="dot"/><circle cx="450" cy="46" r="4.5" class="dot"/><circle cx="536" cy="76" r="4.5" class="dot"/><circle cx="278" cy="16" r="18" class="ring r6g"/></svg></div>
  <div class="d6 c"><div class="dh"><b class="pn">03</b><h3>알약 세 상태</h3><button class="pill sm" data-demo="#ps-pill" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>테두리(기본) · 채움(선택) · 흐림(비활성) — 모서리는 0.</p><div class="pl6" id="ps-pill"><span class="pill">기본</span><span class="pill">선택</span><span class="pill">비활성</span></div></div>
  <div class="footer"><span>계절의 변화</span><span><em>06</em> / 06</span></div>
</section>
<nav class="dk-nav"><button class="dk-prev" aria-label="이전">←</button><button class="dk-next" aria-label="다음">→</button></nav>
  </main>
</div>

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

---

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

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

```css
/* pink-script — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-12';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/noto-serif-kr/NotoSerifKR-Black.woff2") format("woff2");font-weight:900}
@font-face{font-family:'kp-25';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/noto-sans-kr/NotoSansKR-Thin.woff2") format("woff2");font-weight:100}
/* === THEME === */
:root{--stage-bg:#060507;--slide-bg:#060507;
  --kt:'kp-12';--kb:'kp-25';--ka:'kp-25';
  --wt:900;--wb:100}
*{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 === */

/* --- 표면 3겹: 방사 그라디언트 + 필름 그레인 + 안쪽 틀 --- */
:root{--pink:#ED3D8C;--blush:#F5EDF1;--mute:rgba(245,237,241,.6);--hair:rgba(245,237,241,.14);--line:rgba(237,61,140,.32);--ink:#060507}
.slide{color:var(--blush);font-family:'Inter',var(--kb),sans-serif;font-weight:var(--wb);background:radial-gradient(ellipse 90% 70% at 30% 30%,#1A1218 0%,#0A0709 55%,#050306 100%)}
.slide::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:30;opacity:.08;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.slide::after{content:'';position:absolute;inset:36px;border:1px solid var(--hair);pointer-events:none}
.slide>*{position:absolute}
.slide em{font-style:normal;color:var(--pink)}
.runner,.footer,.pre,.kick,.pill,.ml,figcaption,.lg,.mr.hd3{font-family:'JetBrains Mono',var(--kb),monospace;font-weight:400;text-transform:uppercase}
.serif,.script,h1,h2,h3{font-family:'DM Serif Display',var(--kt),serif;font-weight:var(--wt);padding-bottom:.1em;letter-spacing:0}
.script{color:var(--pink);text-shadow:0 0 80px rgba(237,61,140,.18)}
.ml{display:block;font-size:22px;letter-spacing:.14em;color:var(--mute)}
.pk{color:var(--pink)}
.rail{border-left:1px solid var(--pink);padding-left:24px}
.pill{border:1px solid var(--pink);color:var(--pink);background:transparent;padding:10px 20px;font-size:22px;letter-spacing:.08em}
.pill.solid{background:var(--pink);color:var(--ink)}
.btns .pill,.rty{font-family:var(--kb);text-transform:none;font-size:28px}
.pill:disabled{border-color:var(--hair);color:var(--mute);background:transparent}
.arw{width:24px;height:24px;color:var(--pink)}

/* --- 러너 · 꼬리 · 킥커 · 제목 --- */
.runner,.footer{left:60px;right:60px;display:flex;justify-content:space-between;gap:40px;font-size:22px;letter-spacing:.14em;color:var(--mute);white-space:nowrap}
.runner{top:60px}.footer{bottom:60px}
.footer span:first-child{overflow:hidden;text-overflow:ellipsis}
.brand{color:var(--pink)}
.kick{left:120px;top:138px;font-size:22px;letter-spacing:.14em;color:var(--pink)}
.hd{left:120px;top:172px;font-size:78px;line-height:1.06;white-space:nowrap}

/* --- 1. 표지: 프리앰블 → 단원(세리프) → 오른쪽 위 거대한 핑크 스크립트 차시 숫자(빛번짐) → 킥커 → 학습 목표(블러시 세리프, 핵심 낱말 = em 핑크) → 흐린 리드 --- */
.pre{left:120px;top:150px;font-size:26px;letter-spacing:.42em;color:var(--blush)}
.unit{left:120px;top:206px;display:flex;align-items:baseline;gap:30px;font-size:76px;line-height:1.1;white-space:nowrap}
.unit span{font:400 48px/1 'DM Serif Display',serif;color:var(--mute)}
.num{right:150px;top:96px;font-size:280px;line-height:1.02;letter-spacing:-.015em;text-shadow:0 0 120px rgba(237,61,140,.22)}
.k1{top:396px}
.t1{left:116px;top:436px;font-size:122px;line-height:1.14;white-space:nowrap}
.t1 em{text-shadow:0 0 80px rgba(237,61,140,.3)}
.lede{left:120px;top:800px;font-size:32px;line-height:1.55;color:var(--mute)}

/* --- 2. 만들기: 측정기 그림(모노 캡션) + 콜아웃 레일 정의 | 과정 단계 4줄(1px 핑크 윗선, 켜지면 또렷) + 알약 버튼 --- */
.fig{left:120px;top:322px;width:820px;
  --g-ink:var(--blush);--g-acc:var(--pink);--g-stick:var(--mute);--g-board:rgba(245,237,241,.06);--g-ruler:#1A1218;--g-prot:rgba(237,61,140,.06);--g-shadow:rgba(245,237,241,.3);--g-font:'Inter',var(--kb),sans-serif;--g-sw:1.5}
.fig figcaption{font-size:20px;letter-spacing:.14em;color:var(--mute);padding-bottom:8px;border-bottom:1px solid var(--hair)}
.fig .gauge{width:720px;display:block;margin:10px auto 0}
.drl{left:120px;width:820px;top:884px}
.drl p{font-family:'DM Serif Display',var(--kt),serif;font-weight:var(--wt);font-size:32px;line-height:1.3}
.drl .mu{font-family:'Inter',var(--kb),sans-serif;font-weight:var(--wb);font-size:24px;color:var(--mute)}
.proc{left:1040px;right:120px;top:330px}
.ps{position:relative;display:grid;grid-template-columns:90px 1fr;align-items:baseline;border-top:1px solid var(--pink);padding:14px 30px 16px 0;transition:opacity .4s}
.ps .arw{position:absolute;right:0;bottom:-12px;background:#0b080a;transform:rotate(90deg)}
.pn{font:400 60px/1 'DM Serif Display',serif;color:var(--pink);text-shadow:0 0 60px rgba(237,61,140,.18)}
.ps h3{font-size:40px;line-height:1.1}
.ps p{margin-top:4px;font-size:24px;line-height:1.45;color:var(--mute)}
.slide[data-step]:not([data-step="0"]) .ps:not(.on){opacity:.3}
.ps.now .pn{text-shadow:0 0 40px rgba(237,61,140,.6)}
.btns{left:1040px;right:120px;top:878px;display:flex;align-items:center;gap:16px}
.cap{flex:1;font-size:24px;line-height:1.35;color:var(--mute)}

/* --- 3. 숫자와 그래프: 범례 + 핑크 선 차트(꺾임점, 가장 높은 점 = 18px 고리) + 매트릭스 값 | 통계 줄 4개 --- */
.lg{left:120px;top:300px;display:flex;gap:36px;font-size:20px;letter-spacing:.12em;color:var(--mute)}
.ln{display:inline-block;width:40px;height:0;vertical-align:middle;margin-right:12px;border-top:3px solid var(--pink)}
.ln.b{border-top:2px dashed var(--blush);opacity:.6}
.ln.c{border-top:2px dotted var(--pink);opacity:.6}
.chart{left:120px;top:350px;width:1000px;height:300px;overflow:visible}
.grid{stroke:rgba(237,61,140,.18);stroke-dasharray:4 8;stroke-width:1}
.axis{stroke:var(--line);stroke-width:1}
.main{fill:none;stroke:var(--pink);stroke-width:3;filter:drop-shadow(0 0 10px rgba(237,61,140,.5))}
.sec{fill:none;stroke:rgba(245,237,241,.55);stroke-width:2;stroke-dasharray:6 8}
.ter{fill:none;stroke:rgba(237,61,140,.6);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.dot{fill:var(--pink)}
.ring{fill:none;stroke:var(--pink);stroke-width:1.5;opacity:.6}
.vl{fill:var(--blush);font:400 22px 'JetBrains Mono',monospace;text-anchor:middle}
.mtx{font-size:24px}
.mr{display:grid;align-items:center;border-bottom:1px solid var(--line);padding:9px 0}
.mr>span{padding:0 8px}
.mr.us{background:rgba(237,61,140,.08)}
.mr.hd3{font-size:19px;letter-spacing:.12em;color:var(--mute);padding:6px 0}
.m3{left:120px;width:1000px;top:680px}
.m3 .mr{grid-template-columns:220px repeat(7,1fr);text-align:center}
.m3 .mr .serif{text-align:left;font-size:22px;padding-bottom:0;white-space:nowrap}
.stats{left:1220px;right:120px;top:300px}
.sr{display:grid;grid-template-columns:230px 1fr;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--hair)}
.sv{font:400 76px/.95 'DM Serif Display',var(--kt),serif;color:var(--pink);text-shadow:0 0 60px rgba(237,61,140,.18)}
.sr p{margin-top:6px;font-size:23px;line-height:1.4;color:var(--mute)}

/* --- 4. 비교와 표: 과정 단계식 비교 둘(1px 핑크 윗선, A/B 핑크) + 매트릭스(강조 행 8% 핑크) | 콜아웃 레일 남중 + 세리프 인용(em 핑크) --- */
.cmp{left:120px;width:980px;top:320px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cp{grid-template-columns:70px 1fr}
.cp h3{font-size:36px;margin-bottom:6px;white-space:nowrap}
.cp p{font-size:27px;line-height:1.55;color:var(--mute)}
.m4{left:120px;width:980px;top:630px}
.m4 .mr{grid-template-columns:1.2fr 1fr 1fr 1fr;padding:16px 0;font-size:27px}
.m4 .mr .serif{font-size:30px;padding-bottom:0}
.lst{left:1200px;right:120px;top:330px;display:flex;flex-direction:column;gap:12px}
.lst p:not(.ml){font-size:27px;line-height:1.5}
.qt{left:1200px;right:120px;top:600px}
.qt p{font-size:52px;line-height:1.2}
.qt .ml{margin-top:20px}

/* --- 5. 확인하기: 매트릭스 퀴즈(0 반경 알약 상태 Select/Correct/Not quite, 정답 행 8% 핑크) | 콜아웃 레일 빈칸(알약) + 낱말 --- */
.matrix{left:120px;width:960px;top:320px;bottom:150px;display:flex;flex-direction:column}
.q{margin-top:8px;font-size:58px;line-height:1.12}
.rows{margin-top:16px;border-top:1px solid var(--line)}
.row{width:100%;display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:14px;text-align:left;padding:14px;border-bottom:1px solid var(--line);color:var(--blush)}
.rl{font-size:38px;color:var(--pink);padding-bottom:0}
.row .ot{font-size:34px}
.st{font-size:18px;padding:6px 12px}
.st::after{content:'Select'}
.row.right{background:rgba(237,61,140,.08)}
.row.right .st{background:var(--pink);color:var(--ink)}
.row.right .st::after{content:'Correct'}
.row.wrong .st{border-color:var(--hair);color:var(--mute)}
.row.wrong .st::after{content:'Not quite'}
.row:disabled:not(.right){opacity:.5}
.fb{margin-top:14px;min-height:76px;font-size:26px;line-height:1.5;color:var(--mute)}
.rty{align-self:flex-start;margin-top:auto}
.blk{left:1180px;right:120px;top:330px;bottom:150px;display:flex;flex-direction:column;gap:18px}
.br{font-size:30px;line-height:1.7}
.blank{position:relative;min-width:170px;margin-right:10px;padding:2px 14px;font:400 26px/1.4 var(--kb);text-transform:none;letter-spacing:0;text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0;top:2px}
.blank.open{background:var(--pink);color:var(--ink)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{font-size:44px;line-height:1.25}

/* --- 내비: 꼬리 가운데 작은 핑크 화살표 --- */
.dk-nav{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);display:flex;gap:10px}
.dk-prev,.dk-next{width:46px;height:46px;font:400 24px/1 'JetBrains Mono',monospace;color:var(--pink);border:1px solid var(--line)}
.dk-prev:disabled,.dk-next:disabled{opacity:.3}
/* --- 6. 디자인 안내: 콜아웃 레일 설명 넷 | 과정 단계 모양 시연 3개 --- */
.g6{left:120px;width:860px;top:330px;display:flex;flex-direction:column;gap:26px}
.r6 .ml{font-size:20px}
.r6 p{margin-top:6px;font-size:27px;line-height:1.5;color:var(--mute)}
.r6 b{font-weight:400;color:var(--blush)}
.sw6{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--blush)}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:8px;vertical-align:-5px;border:1px solid var(--hair)}
.sl6{left:1060px;top:300px;font-size:20px}
.d6{left:1060px;right:120px;border-top:1px solid var(--pink);padding-top:12px}
.d6.a{top:346px}.d6.b{top:552px}.d6.c{top:768px}
.d6 .dh{display:flex;align-items:baseline;gap:20px}
.d6 .pn{font-size:44px}
.d6 h3{flex:1;font-size:36px;line-height:1.1}
.d6 p{margin-top:4px;font-size:22px;line-height:1.4;color:var(--mute)}
.pill.sm{font-family:var(--kb);text-transform:none;font-size:20px;padding:6px 14px}
.pill.sm[aria-pressed="true"]{background:var(--pink);color:var(--ink)}
.gl6{display:block;margin-top:2px;font:400 88px/1.05 'DM Serif Display',serif;color:var(--pink)}
.gl6.play{text-shadow:0 0 80px rgba(237,61,140,.6),0 0 30px rgba(237,61,140,.35)}
.ch6{display:block;width:100%;height:90px;margin-top:10px;overflow:visible}
.ch6 .main{filter:none}
.ch6 .r6g{visibility:hidden}
.ch6.play .main{filter:drop-shadow(0 0 10px rgba(237,61,140,.5))}
.ch6.play .r6g{visibility:visible}
.pl6{margin-top:12px;display:flex;gap:14px}
.pl6 .pill{font-family:var(--kb);text-transform:none;font-size:22px}
.pl6.play .pill:nth-child(2){background:var(--pink);color:var(--ink)}
.pl6.play .pill:nth-child(3){border-color:var(--hair);color:var(--mute)}

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