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

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

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

## 라이선스

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

- Cafe24 PRO Slim Bold: Cafe24 PRO Slim — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright ⓒ Cafe24 Corp. All Rights Reserved. Cafe24 PRO Slim is a trademark of Cafe24.
  파일: Cafe24PROSlim-Bold.ttf
- Hakgyoansim Wooju: Hakgyoansim Wooju — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © KERIS. All rights reserved.
  파일: HakgyoansimWoojuR.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/coral.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/coral.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Cafe24 PRO Slim Bold(700) · 본문 Hakgyoansim Wooju(400))는 공통 CSS가 불러옵니다. `@font-face`를 새로 쓰지 말고, 글꼴은 `var(--kt)`(제목)·`var(--kb)`(본문)·`var(--ka)`(포인트) 변수로만 지정하세요.
6. **글자 크기와 화면 채우기** (슬라이드는 1920×1080 기준으로 그려져 화면 크기에 맞게 통째로 줄어듭니다)
   - 읽어야 하는 글(본문·설명·표 내용·보기)은 **28px 이상**, 보조 글(캡션·주석)은 **22px 이상**으로 씁니다. 창 제목줄·쪽 번호·작은 라벨 같은 장식 글자는 디자인 규칙의 크기를 따릅니다.
   - 창·판·카드가 **화면의 대부분을 채우게** 하세요. 한쪽에 작게 몰리거나 큰 빈 공간이 남으면 안 됩니다. 내용이 적은 장은 글자와 그림을 키우거나 다른 장과 합칩니다.
   - **높이 예산**: 장 제목과 아래 내비를 빼면 본문에 쓸 수 있는 높이는 대략 **650~750px**입니다. 모든 내용이 1920×1080 안에 들어가야 하고, 넘친 부분은 잘려서 보이지 않습니다. 쓰기 전에 줄 수 × 줄 높이(글자 크기의 약 1.5배)로 높이를 어림해 보세요.
   - **카드 규칙**: 한 장에 카드(칸)를 4개 이상 놓으면 카드마다 글은 **3줄 이하**로 줄입니다. 글이 들어가는 칸은 **너비 400px 이상**으로 두고(그림+글을 나란히 놓을 때는 글 칸 기준), 한 줄에 몇 글자밖에 안 들어가게 좁히지 마세요. 카드를 두 줄로 쌓아야 하면 그 줄들의 높이 합이 높이 예산 안에 드는지 확인합니다.
   - 제목은 **두 줄 이내**로 씁니다. 표지 제목은 한 줄에 15자 안팎으로 끊어 줄을 바꾸세요. 글이 창 밖으로 넘치거나 잘리면 글자를 줄이지 말고 문장을 짧게 고칩니다.
   - 한글은 단어 중간에서 줄이 바뀌지 않게(`word-break:keep-all`) 합니다(공통 CSS에 이미 들어 있음).
7. 저작권이 있는 글·그림·사진을 가져오지 마세요. **사용자가 요청하지 않으면 그림 파일(이미지 생성)을 따로 만들지 마세요. 슬라이드에 필요한 그림은 HTML 안에서 SVG·CSS로 그립니다.**

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

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

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

---

## 1. 디자인 규칙 (`coral` design.md)

````markdown
---
version: alpha
name: Coral
description: "A bold magazine-poster system that runs on three surface registers — coral fire, ink black, and warm cream — animated by Bebas Neue display caps and a constant 45° diagonal hatch pattern. Inter handles body copy; Bebas Neue handles every headline, stat, title, and meta-figure at heavy letter-spacing. The cultural reference is mid-century travel posters, Saul Bass film titles, and modern editorial sport magazines: solid color planes meeting at hard edges, oversized condensed caps as architectural elements, and a single coral hue used both as accent and as full-slide environment."

colors:
  coral: "#E85D5D"
  coral-dark: "#D44A4A"
  cream: "#F5F0E8"
  cream-dark: "#E8E0D4"
  black: "#1A1A1A"
  gray: "#6B6B6B"
  light-gray: "#B0B0B0"
  white: "#FFFFFF"

color-aliases:
  bg: cream
  ink: black

typography:
  hero-title:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "min(120px, 9vw, 13vh)"
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: 4px
  jumbo-feature:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(80px, 15vw, 200px)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 12px
  display-statement:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(42px, 7vw, 100px)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 2px
  section-headline:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(40px, 6vw, 80px)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 2px
  column-title:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(36px, 5vw, 72px)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 2px
  stat-numeral:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(48px, 7vw, 96px)"
    fontWeight: 400
    lineHeight: 1
  card-stat:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(36px, 4vw, 56px)"
    fontWeight: 400
    lineHeight: 1
  sidebar-value:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(28px, 3vw, 48px)"
    fontWeight: 400
    lineHeight: 1
  card-title:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(24px, 2.5vw, 36px)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 1px
  bar-title:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(28px, 4vw, 56px)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 2px
  meta-figure:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "min(44px, 3.5vw, 5.5vh)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 2px
  meta-date:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "min(38px, 3vw, 4.8vh)"
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 2px
  background-numeral:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(100px, 15vw, 200px)"
    fontWeight: 400
    lineHeight: 1
    description: "Decorative oversized numeral placed inside a coral region at rgba(0,0,0,0.12) — wallpaper opacity. Sits behind the actual column title at full opacity."
  giant-mark:
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "clamp(140px, 20vw, 280px)"
    fontWeight: 400
    lineHeight: 1
    description: "Oversized quote mark or single character placed inside a coral region at opacity 0.35 — half-decorative, half-content."
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: "clamp(15px, 1.4vw, 20px)"
    fontWeight: 400
    lineHeight: 1.7
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: "clamp(13px, 1.1vw, 16px)"
    fontWeight: 400
    lineHeight: 1.6
  body-light:
    fontFamily: "Inter, sans-serif"
    fontSize: "clamp(20px, 2.5vw, 36px)"
    fontWeight: 300
    lineHeight: 1.5
    description: "Lighter-weight Inter for pull quotes — weight 300 to contrast against the Bebas Neue dominant voice."
  item-text:
    fontFamily: "Inter, sans-serif"
    fontSize: "clamp(14px, 1.2vw, 18px)"
    fontWeight: 400
    lineHeight: 1.6
  card-text:
    fontFamily: "Inter, sans-serif"
    fontSize: "clamp(13px, 1.1vw, 16px)"
    fontWeight: 400
    lineHeight: 1.6
  bar-meta:
    fontFamily: "Inter, sans-serif"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2px
    textTransform: uppercase
  section-label:
    fontFamily: "Inter, sans-serif"
    fontSize: "12px"
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 4px
    textTransform: uppercase
  item-label:
    fontFamily: "Inter, sans-serif"
    fontSize: "11px"
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 3px
    textTransform: uppercase
  meta-label:
    fontFamily: "Inter, sans-serif"
    fontSize: "11px"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 3px
    textTransform: uppercase
  sidebar-label:
    fontFamily: "Inter, sans-serif"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px
  quote-attribution:
    fontFamily: "Inter, sans-serif"
    fontSize: "14px"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 3px
    textTransform: uppercase
  quote-role:
    fontFamily: "Inter, sans-serif"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1px

spacing:
  pad-y: "clamp(40px, 6vh, 80px)"
  pad-x: "clamp(40px, 8vw, 100px)"
  pad-y-tight: "clamp(28px, 4.5vh, 60px)"
  pad-col: "clamp(32px, 4vw, 60px)"
  gap-grid: "32px"
  gap-md: "40px"
  card-pad: "clamp(24px, 3vh, 40px)"
  bar-pad: "clamp(24px, 4vh, 40px)"

canvas:
  width: 100vw
  height: 100vh

components:
  diagonal-hatch:
    background: "repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0,0,0,0.06) 20px, rgba(0,0,0,0.06) 40px)"
    description: "Signature 45° diagonal hatch pattern in 6%-opacity black. Applied as a pseudo-element overlay on coral regions to provide texture without changing the surface color. Variant: -45° hatch on coral quote-left, with 30/60px stride. Variant: 90° vertical hatch in 10%-opacity black on coral gradient regions, with 60/62px stride. The hatch is a per-region atmospheric treatment, not a slide-level overlay."
  accent-line:
    width: "80px"
    height: "4px"
    background: "{colors.coral}"
    description: "Solid 80×4 coral rectangle used as a sub-headline accent rule. Closing or section-divider variant uses 60×4."
  quote-accent:
    width: "60px"
    height: "4px"
    background: "{colors.coral}"
    description: "60×4 coral rectangle placed above a quote attribution as a terminal accent."
  title-rule:
    width: "100%"
    height: "3px"
    background: "{colors.black}"
    opacity: 0.15
    description: "Full-width 3px ink rule at 15% opacity used as a subtle horizontal divider beneath the hero title on the cover composition."
  card:
    background: "{colors.white}"
    padding: "{spacing.card-pad}"
    borderTop: "5px solid {colors.coral}"
    description: "Column card — white surface with a 5px solid coral top border as the only border on the element. No shadow, no radius."
  sidebar-item:
    background: "{colors.white}"
    padding: "20px 24px"
    borderLeft: "4px solid {colors.coral}"
    description: "Compact data tile — white surface with a 4px solid coral left border. Holds a Bebas value and an Inter label."
  card-icon:
    width: "48px"
    height: "48px"
    background: "{colors.coral}"
    fontFamily: "Bebas Neue, sans-serif"
    fontSize: "24px"
    color: "{colors.white}"
    description: "48px solid coral square (no radius) containing a 1-character Bebas Neue glyph in white. Used as a card mark."
  timeline-line:
    height: "4px"
    background: "{colors.black}"
    description: "Horizontal 4px solid ink line spanning the timeline width. A ::after pseudo overlays a repeating linear-gradient (20px ink + 10px transparent) to create a dashed effect. The dashed pattern is rendered through the gradient, not the border-style."
  t-point-dot:
    width: "20px"
    height: "20px"
    borderRadius: "50%"
    background: "{colors.coral}"
    border: "4px solid {colors.cream}"
    description: "Timeline node — 20px coral circle with a 4px cream halo, sitting on the timeline-line."
  nav-dot:
    width: "10px"
    height: "10px"
    borderRadius: "50%"
    background: "rgba(255, 255, 255, 0.3)"
    border: "2px solid rgba(255, 255, 255, 0.5)"
    description: "Small 10px nav indicator. White-translucent default on dark/coral surfaces; ink-translucent .dark variant on cream surfaces. Active state fills with coral."
  nav-arrow:
    width: "44px"
    height: "44px"
    borderRadius: "50%"
    background: "rgba(255, 255, 255, 0.1)"
    border: "2px solid rgba(255, 255, 255, 0.3)"
    description: "44px circular nav button with translucent fill and 2px translucent border. .dark variant for cream surfaces. Hover state fills with coral."
  zigzag-layer:
    description: "SVG zigzag pattern overlay used decoratively on the cover's coral top-section. Renders as a thin black zigzag line at low opacity behind the title."
  pattern-overlay:
    description: "Decorative repeating-pattern overlay applied to feature regions — typically 90° vertical hatch in ink at 10% opacity on coral gradient backgrounds. Separate from the 45° diagonal-hatch which is the system's primary texture."
  bar-fill:
    description: "Chart.js horizontal bar fills use solid coral (#E85D5D) as the primary series color, with a darker coral (#D44A4A) for comparison or secondary series."
---

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

Coral is a **bold magazine-poster system** built on three surface registers — coral fire, ink black, and warm cream — that meet at hard edges. The defining structural premise is **solid color planes**: a single slide will split into a coral half + a cream half + an ink top-section, with each region a flat solid color holding its own self-contained composition. There are no gradient transitions between regions; the meeting point of two colors is the layout. This is the populist counterpart to a more refined editorial system — closer to a sports magazine cover than a literary catalogue.

The typeface stack is a **two-face hierarchy**. **Bebas Neue** — a tall narrow condensed sans display face — carries every headline, every stat, every column title, every meta figure, every section name. Bebas runs at its single available weight (400) and is treated as architectural — heavy letter-spacing (2–12px), oversized scale (up to 200px on jumbo features), and always set in its native uppercase. **Inter** — a contemporary humanist sans — carries every body paragraph, every label, every micro-text, every attribution. Inter spans weights 300 to 700: 300 for pull-quote bodies, 400 for paragraph body, 600 for meta labels, 700 for section eyebrows. The Bebas/Inter pair creates the system's voice: Bebas declares, Inter explains.

The palette is **three surfaces + ink + neutrals**. The coral `{colors.coral}` is both *the* accent (a 4px left border on a sidebar tile, a 5px top border on a card, a 48px solid icon square) and an entire slide environment (a full coral panel, the cover's top-section, a coral gradient feature region). The cream `{colors.cream}` is the warm canvas — the magazine paper. Ink `{colors.black}` is the strongest surface, used as full-slide background on quote and statement layouts. White appears only as card fills against coral or cream regions. Two grays (`{colors.gray}`, `{colors.light-gray}`) carry body and meta text.

Depth is **flat with hard color edges**. There are no drop shadows, no rounded surfaces, no soft elevations. Hierarchy comes from:
- **Solid color region splits** — coral / ink / cream regions meeting at hard edges.
- **Accent borders** — 4px coral left, 5px coral top, 3px ink top, 4px ink horizontal.
- **45° diagonal hatch** — a signature 6%-opacity black diagonal repeating pattern overlaid on coral regions, providing texture.
- **Oversized decorative typography** — background numerals at 12% opacity, giant quote marks at 35% opacity, sitting behind or beside primary content.

**Density philosophy: medium-high, structured by region.** Coral slides are structured rather than dense — each color region holds a self-contained composition (a single column title with one body block, a single stat tile with one label, a single timeline line with five dots). The aesthetic relies on regions feeling fully populated within their boundary, not on the slide overall being crowded. A correctly composed slide pairs 2–3 substantive regions, each fully expressed. A slide that feels broken is one where a coral region holds only a sparse fragment, or where a cream region attempts to carry too many competing elements. Decorative oversized numerals at 12% opacity behind a region's primary title are the standard "fill the region" move when content alone doesn't fully occupy the plane.

**Key Characteristics:**
- Three-surface system: `{colors.coral}` (fire), `{colors.black}` (ink), `{colors.cream}` (paper) — used as solid regions meeting at hard edges.
- Bebas Neue uppercase condensed display for every headline/stat/title; Inter sans for every body/label/attribution.
- 45° diagonal hatch in 6%-opacity black on coral regions as the signature atmospheric texture.
- Coral as both accent (4–5px borders, 48px icon squares, 4-point timeline dots) and environment (full-region surfaces).
- Decorative oversized numerals at 12% opacity behind column titles inside coral regions.
- Oversized quote marks at 35% opacity inside coral regions as half-decorative content.
- No rounded corners on rectangles; circular shapes only for nav dots, nav arrows, and timeline nodes.
- Heavy letter-spacing on every Bebas element: 1–4px on most, 12px on the largest feature treatment.
- Hard-edge color splits (vertical, horizontal, or 40/60 ratios) define slide composition.

## Colors

### Three-Surface System
- **Coral** (`{colors.coral}` — #E85D5D): The signature color — a warm orange-red, vivid but not neon. Used both as accent (4px sidebar-item left border, 5px card top border, 48px card-icon fill, 80×4 accent line, 60×4 quote accent, timeline-point dot, chart primary series, hover-state fills, section eyebrows, stat-numerals on cream surfaces) and as a full-region surface (cover top-section, two-column left panel, full-width feature region, quote left panel). Defines the system.
- **Coral Dark** (`{colors.coral-dark}` — #D44A4A): A darker coral variant. Used as the start stop in linear-gradient feature regions (135° from coral-dark to coral), and as the chart secondary/comparison series color.
- **Cream** (`{colors.cream}` — #F5F0E8): The warm canvas. Used as default slide background, as the cover's bottom-section, as info-bar surfaces, as body text color on ink-black surfaces, and as the timeline-point dot halo.
- **Cream Dark** (`{colors.cream-dark}` — #E8E0D4): A slightly deeper cream. Available in the palette for subtle region differentiation but sparingly used.
- **Black** (`{colors.black}` — #1A1A1A): Near-black ink. Used as headline color on cream surfaces, as the full-background ink register for quote and certain feature slides, as timeline-line color, as title-rule color, as decorative background-numeral color (at 12% opacity inside coral regions), and as giant-mark color (at 35% opacity inside coral regions).
- **Gray** (`{colors.gray}` — #6B6B6B): Mid neutral. Used for body paragraph text on cream surfaces, for meta labels, for sidebar labels, for card body copy, for quote roles.
- **Light Gray** (`{colors.light-gray}` — #B0B0B0): Pale neutral. Defined in the palette but used sparingly — available for tertiary text where gray is too strong.
- **White** (`{colors.white}` — #FFFFFF): True white. Used as card fills (sidebar-item, card, column-card), as item-text color on ink surfaces, as nav-dot/nav-arrow translucent fills.

### Defaults
- **Default slide surface**: `{colors.cream}`. (Cover and feature slides use mixed-surface compositions; statement, quote, and three-column slides default to cream or ink.)
- **Default headline color on cream surfaces**: `{colors.black}` — Bebas Neue headlines are ink, not coral.
- **Default headline color on coral surfaces**: `{colors.black}` — ink-on-fire. Bebas on coral is always ink, never white.
- **Default headline color on ink surfaces**: `{colors.cream}`.
- **Default body text color on cream surfaces**: `{colors.gray}`.
- **Default body text color on ink surfaces**: `{colors.cream}`.
- **Default body text color on coral surfaces**: `{colors.black}` — ink, not white.
- **Default eyebrow / section-label color**: `{colors.coral}` on cream and ink surfaces; `{colors.black}` on coral surfaces.
- **Default accent border color**: `{colors.coral}` — 4px left (sidebar tiles), 5px top (cards), 48px solid (icon squares).
- **Default decorative numeral color inside a coral region**: `rgba(0, 0, 0, 0.12)` (ink at 12% opacity).
- **Default giant-mark color inside a coral region**: `rgba(0, 0, 0, 0.35)` (ink at 35% opacity).
- **Default chart primary series color**: `{colors.coral}`.
- **Default chart comparison series color**: `{colors.coral-dark}`.

The three surfaces are intermixed by composition: a slide may be split coral/cream, coral/ink, ink/cream, or held to a single surface. There is no semantic mapping between surfaces; each is chosen for compositional balance and contrast.

## Typography

### Font Family
The system runs on a **two-face hierarchy**: `Bebas Neue` (display, single weight 400) carries every headline, stat numeral, column title, meta figure, bar title, card stat, sidebar value, and decorative numeral; `Inter` (sans, weights 300 / 400 / 600 / 700) carries every body paragraph, label, eyebrow, meta-label, attribution, role, and chart legend. There is no third face.

Bebas Neue is a tall narrow condensed sans display face — its narrow letterforms allow large sizes without overwhelming the slide width, and its single available weight (400) is treated as the system's only weight. Bebas is always set in its native uppercase. The display character of the system comes from heavy letter-spacing (1–4px on standard headlines, 12px on the largest jumbo feature treatment) and oversized scale (up to 200–280px on jumbo / giant-mark moments).

Inter carries the supporting voice with weight contrast: 300 for pull-quote bodies (a lighter register against Bebas's dominance), 400 for body paragraphs, 600 for meta labels, 700 for section eyebrows. Italic and underline are not used.

### Type Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.giant-mark}` | clamp(140px, 20vw, 280px) | Bebas Neue | 400 | Oversized decorative quote mark or feature character inside a coral region |
| `{typography.jumbo-feature}` | clamp(80px, 15vw, 200px) | Bebas Neue | 400 | Single dominant word filling a feature region |
| `{typography.background-numeral}` | clamp(100px, 15vw, 200px) | Bebas Neue | 400 | Decorative wallpaper numeral inside a coral region at 12% opacity |
| `{typography.hero-title}` | min(120px, 9vw, 13vh) | Bebas Neue | 400 | Largest cover title — 3-line title cap-and-line-broken |
| `{typography.display-statement}` | clamp(42px, 7vw, 100px) | Bebas Neue | 400 | Big declarative statement on a cream surface |
| `{typography.stat-numeral}` | clamp(48px, 7vw, 96px) | Bebas Neue | 400 | Hero stat figure |
| `{typography.section-headline}` | clamp(40px, 6vw, 80px) | Bebas Neue | 400 | Primary section headline |
| `{typography.column-title}` | clamp(36px, 5vw, 72px) | Bebas Neue | 400 | Column or panel title inside a region |
| `{typography.card-stat}` | clamp(36px, 4vw, 56px) | Bebas Neue | 400 | Per-card stat figure |
| `{typography.bar-title}` | clamp(28px, 4vw, 56px) | Bebas Neue | 400 | Info-bar title |
| `{typography.sidebar-value}` | clamp(28px, 3vw, 48px) | Bebas Neue | 400 | Sidebar tile value |
| `{typography.card-title}` | clamp(24px, 2.5vw, 36px) | Bebas Neue | 400 | Card or column-card title |
| `{typography.meta-figure}` | min(44px, 3.5vw, 5.5vh) | Bebas Neue | 400 | Cover meta value (location, date, brand) |
| `{typography.meta-date}` | min(38px, 3vw, 4.8vh) | Bebas Neue | 400 | Cover date variant |
| `{typography.body-light}` | clamp(20px, 2.5vw, 36px) | Inter | 300 | Pull-quote body (lighter weight against Bebas dominance) |
| `{typography.body}` | clamp(15px, 1.4vw, 20px) | Inter | 400 | Standard paragraph body |
| `{typography.item-text}` | clamp(14px, 1.2vw, 18px) | Inter | 400 | Item body on ink surfaces |
| `{typography.card-text}` | clamp(13px, 1.1vw, 16px) | Inter | 400 | Card body copy |
| `{typography.body-sm}` | clamp(13px, 1.1vw, 16px) | Inter | 400 | Compact body |
| `{typography.section-label}` | 12px | Inter | 700 | Section eyebrow above a headline, 4px letter-spacing |
| `{typography.item-label}` | 11px | Inter | 700 | Item eyebrow in a list, 3px letter-spacing |
| `{typography.meta-label}` | 11px | Inter | 600 | Cover meta label, 3px letter-spacing |
| `{typography.quote-attribution}` | 14px | Inter | 600 | Author name below a pull quote, 3px letter-spacing |
| `{typography.bar-meta}` | 12px | Inter | 400 | Info-bar meta-text, 2px letter-spacing |
| `{typography.sidebar-label}` | 12px | Inter | 400 | Sidebar tile label, 1px letter-spacing |
| `{typography.quote-role}` | 12px | Inter | 400 | Author role below quote attribution, 1px letter-spacing |

### Defaults
- **Default size for the primary section headline**: `{typography.section-headline}` (clamp 40–80px).
- **Default size for a cover/hero title**: `{typography.hero-title}` (min(120px, 9vw, 13vh)).
- **Default size for a feature dominant word**: `{typography.jumbo-feature}` (clamp 80–200px) with 12px letter-spacing.
- **Default size for paragraph body**: `{typography.body}` (clamp 15–20px).
- **Default size for any uppercase eyebrow / label**: `{typography.section-label}` (12px) at weight 700 with 4px letter-spacing; or `{typography.item-label}` (11px) at weight 700 with 3px letter-spacing for in-list contexts.
- **Default weight for any Bebas Neue element**: 400 (the only available weight).
- **Default weight for body**: 400; for pull quotes, 300.
- **Default weight for labels**: 600 or 700.
- **Default size for a hero stat figure**: `{typography.stat-numeral}` (clamp 48–96px).
- **Default size for an in-card stat figure**: `{typography.card-stat}` (clamp 36–56px).

When unsure, reach for `{typography.section-headline}` for the slide's primary text moment.

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

- **Every Bebas Neue element is set in its native uppercase.** Bebas Neue in sentence case does not exist — the typeface itself doesn't support it. This is the system's most foundational typographic rule.
- **Every Bebas Neue element carries letter-spacing of at least 1px.** Standard headlines at 2px, hero-title at 4px, jumbo-feature at 12px. Untracked Bebas reads as untreated.
- **Every Inter label, eyebrow, and meta-text is uppercase with 1–4px letter-spacing.** Section labels at 4px, item labels at 3px, bar-meta at 2px, sidebar-labels at 1px. Inter caps without tracking break the editorial register.
- **Every Bebas headline is rendered in `{colors.black}`, `{colors.cream}`, or `{colors.coral}`** based on surface contrast — never gray. Color choice: ink on cream/coral, cream on ink, coral on cream when emphasis is needed.
- **Every section eyebrow is rendered in `{colors.coral}`** when sitting on cream or ink, or in `{colors.black}` when sitting on coral. Coral-on-coral does not exist.
- **Every decorative oversized numeral inside a coral region is rendered at `rgba(0, 0, 0, 0.12)`** — the wallpaper-numeral signature. Sits behind primary content at full opacity.
- **Every giant decorative mark (quote, single character) inside a coral region is rendered at `rgba(0, 0, 0, 0.35)`** — half-decorative, half-content.
- **Pull-quote bodies use Inter weight 300, not Bebas.** This is the system's primary "voice break" — when content needs to feel personal rather than declarative, Inter Light takes over.

### Typography Principles
The Bebas-uppercase-tracked + Inter-mixed-weight combination is the system's voice. Switching either face — using a different display sans for headlines, or using Bebas for body — breaks the system entirely. Italic does not appear. Underline does not appear. The only emphasis mechanism is weight (Bebas dominance), case (uppercase always on Bebas + labels), color (coral on cream surfaces), and surface inversion (placing the element in a different region).

Line-height is uniformly tight at the top of the scale: Bebas elements at 0.9–1.0; Inter body at 1.6–1.7. The display compression + open body is what gives the system its magazine-poster rhythm.

## Layout

### Canvas System
The canvas is `100vw × 100vh` — full viewport with hidden overflow. Each `.slide` is absolutely positioned to fill the viewport; one slide carries `.active` (opacity 1, visibility visible) at a time. Transitions are 0.6s opacity + visibility fades.

The system has **no universal chrome bar**. Each slide is its own self-contained composition with its own padding, region structure, and color treatment. Navigation is per-page (nav arrows + nav dots + slide counter) and floats over the active surface with `.dark` variants for cream surfaces.

### Padding and Gap Scale
| Token | Value | Use |
|---|---|---|
| `{spacing.pad-y}` | clamp(40px, 6vh, 80px) | Standard vertical slide padding |
| `{spacing.pad-x}` | clamp(40px, 8vw, 100px) | Standard horizontal slide padding |
| `{spacing.pad-y-tight}` | clamp(28px, 4.5vh, 60px) | Compact vertical padding (cover bottom-section) |
| `{spacing.pad-col}` | clamp(32px, 4vw, 60px) | Column padding inside a region |
| `{spacing.gap-grid}` | 32px | Column-grid gap |
| `{spacing.gap-md}` | 40px | Chart container internal gap |
| `{spacing.card-pad}` | clamp(24px, 3vh, 40px) | Card internal padding |
| `{spacing.bar-pad}` | clamp(24px, 4vh, 40px) | Info-bar internal padding |

### Region Composition
Coral's primary layout move is **multi-surface composition**. Slides split into regions of solid color, with the boundary between regions defining the layout. Standard splits include:
- `grid-template-rows: 32% 68%` — top accent strip + main body (cover composition).
- `grid-template-rows: 1fr auto` — large feature region + bottom info-bar.
- `grid-template-columns: 1fr 1fr` — equal vertical split (often coral left + ink right).
- `grid-template-columns: 40% 60%` — narrow accent column + wider content column (quote layout).
- Single-surface slides — cream or ink as the whole canvas (statement, three-column, timeline layouts).

The boundary between regions is always a **hard color edge** — no soft transitions, no gradients across the boundary, no rounded corners at the junction. The meeting of two solid colors is the layout structure.

## Depth and Elevation

### Flat With Hard Color Edges
Coral has no drop shadows, no soft elevations, no rounded surfaces. Every element sits on a single plane.

Depth signals are entirely structural:
- **Hard color region boundaries** — the primary structural signal.
- **Accent borders** — 5px coral top on cards, 4px coral left on sidebar tiles, 4px ink horizontal timeline-line, 3px ink at 15% opacity title-rule.
- **45° diagonal hatch** — 6%-opacity black diagonal repeating-linear-gradient overlay on coral regions creates texture without depth.
- **Decorative wallpaper typography** — oversized numerals at 12% opacity and giant marks at 35% opacity sit behind primary content as wallpaper, creating a layered effect without z-index trickery.

Introducing a box-shadow, an elevated card, or a soft gradient breaks the populist-poster aesthetic that defines the system.

### Atmospheric Hatch Variants
The 45° diagonal hatch is the system's primary atmospheric treatment, but several stride/angle variants appear:
- **45° at 20/40px stride** in 6%-opacity black — the standard coral region overlay.
- **-45° at 30/60px stride** in 6%-opacity black — coral quote-left panel variant.
- **90° vertical at 60/62px stride** in 10%-opacity black — coral gradient feature-region overlay.

All hatches are subtle (6–10% opacity black). They provide texture without competing with content.

## Shapes and Treatment

### Border Radius
| Value | Use |
|---|---|
| 50% (circle) | Circular elements only: `nav-dot` (10px), `nav-arrow` (44px), `t-point-dot` (20px timeline node) |
| 0 | Everything else: every region, every card, every sidebar tile, every icon square, every chart, every accent line, every accent border |

The system uses **only two radius values**: 50% (true circle) or 0 (sharp rectangle). Soft-rounded corners do not exist. Cards, icon squares, info-bars, and feature regions are all strict rectangles.

### Border Weights
- **5px solid `{colors.coral}` (top)** — used on card top borders (column-card pattern).
- **4px solid `{colors.coral}` (left)** — used on sidebar-item left borders.
- **4px solid `{colors.black}` (horizontal)** — used on timeline-line.
- **4px solid `{colors.cream}` (ring)** — used as the halo around 20px coral timeline-point dots.
- **3px solid `{colors.black}` at 15% opacity** — used on title-rule beneath the cover hero title.
- **2px solid translucent** — used on nav-dot and nav-arrow borders (rgba(255,255,255,0.3–0.5) on dark surfaces; rgba(26,26,26,0.2–0.4) on cream surfaces).

All borders are either coral, black, cream, or translucent. There is no border-radius on bordered rectangles.

### Decorative Element Types

**45° diagonal hatch** — A `repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(0,0,0,0.06) 20px, rgba(0,0,0,0.06) 40px)` applied as a `::before` pseudo-element overlay on coral regions. The signature atmospheric texture. Variants: -45°, 90° vertical, different stride widths.

**Background numeral** — An oversized Bebas Neue numeral (clamp 100–200px) at `rgba(0, 0, 0, 0.12)` placed inside a coral region. Sits behind the region's primary column-title at full opacity, creating a layered "ordinal wallpaper" effect.

**Giant mark** — An oversized Bebas Neue character (clamp 140–280px) at `rgba(0, 0, 0, 0.35)` placed inside a coral region. Used as a half-decorative half-content element, typically a quotation mark on the coral left panel of a quote layout.

**Card (column-card)** — A white-fill rectangle with a 5px coral top border as its only border. Contains a 48px solid coral icon square at top, a Bebas card-title, an Inter card-text body, and a coral card-stat figure at the bottom. The 5px top border is the only chrome — no other border, no shadow, no radius.

**Sidebar item** — A white-fill rectangle with a 4px coral left border as its only border. Contains a Bebas sidebar-value and an Inter sidebar-label. The 4px left border is the only chrome.

**Icon square** — A 48px solid coral rectangle (no radius) containing a 1-character Bebas glyph in white. Used as a card mark.

**Info bar** — A flex row spanning a region's full width, holding a Bebas bar-title left and an uppercase Inter bar-meta right. Cream background; used as a footer band beneath a feature region.

**Timeline** — A 4px solid ink horizontal line spanning the timeline width, with a `::after` repeating-linear-gradient overlay (20px ink + 10px transparent) creating a dashed effect. Timeline points are 20px coral circles with 4px cream halos, distributed evenly along the line.

**Accent line** — An 80×4 solid coral rectangle used as a sub-headline accent rule, or 60×4 for closing/quote contexts. Always coral, always solid, no radius.

**Title rule** — A full-width 3px solid ink line at 15% opacity, used as a subtle horizontal divider beneath the cover hero title.

**Zigzag layer** — An SVG zigzag pattern rendered as a thin ink line at low opacity, overlaid decoratively on the cover's coral top-section.

**Pattern overlay** — A separate repeating-pattern overlay (typically 90° vertical hatch in 10%-opacity ink) applied to coral gradient feature regions. Distinct from the standard 45° diagonal hatch.

## Do's and Don'ts

### Do
- Compose slides as multi-surface region splits — coral, ink, and cream meeting at hard color edges. The region boundary is the layout structure.
- Set every Bebas Neue element in its native uppercase with at least 1px letter-spacing — 2px for standard headlines, 4px for hero titles, 12px for jumbo feature treatments.
- Render every section eyebrow in `{colors.coral}` uppercase Inter weight 700 with 3–4px letter-spacing on cream and ink surfaces.
- Apply the 45° diagonal hatch (6% opacity black, 20/40px stride) as a `::before` overlay on coral regions for atmospheric texture.
- Use the 5px coral top border on cards and the 4px coral left border on sidebar tiles as the only chrome on those elements — no other border, no shadow, no radius.
- Place oversized decorative Bebas numerals at 12% opacity behind column titles inside coral regions when a region needs more visual weight than the title alone provides.
- Use Inter weight 300 (light) for pull-quote bodies on ink-surface quote layouts — the lighter weight contrasts against Bebas dominance.
- Render Bebas headlines on coral surfaces in `{colors.black}` (ink-on-fire). White headlines on coral do not exist in this system.
- Use the coral chart series + coral-dark comparison series convention for any chart data.
- Use the 48px solid coral icon square (no radius, single white Bebas glyph) as the standard card mark.

### Don't
- Don't render Bebas Neue in sentence case. The typeface is uppercase only — that is the entire identity.
- Don't render Bebas without letter-spacing. Untracked Bebas reads as untreated, even at large sizes.
- Don't introduce a fourth surface color. The three surfaces (coral / ink / cream) are the system — adding a yellow or blue region breaks the magazine-poster identity.
- Don't render headlines in `{colors.gray}`. Headlines are ink, cream, or coral; gray is reserved for body and meta text only.
- Don't add drop shadows, elevated cards, or rounded surfaces. The system is flat — depth comes from color region splits and accent borders.
- Don't round any rectangular element. Cards, sidebar tiles, info bars, icon squares, accent lines — all sharp rectangles.
- Don't pair Bebas with a different sans body face. The Bebas + Inter pairing is fixed.
- Don't render Inter labels in sentence case. Small Inter text is always uppercase with 1–4px tracking.
- Don't soften region boundaries with gradients (except in the rare 135° coral-dark → coral feature gradient). Region edges are hard color meetings.
- Don't fill a coral region with sparse content. Coral wants weight — either fully populate the region's composition or use a decorative oversized numeral / giant mark as wallpaper.

## Responsive Behavior

Coral is a viewport-fluid 1920×1080 presentation system using `clamp()`, `min()`, and viewport-relative units throughout. There are no explicit responsive breakpoints in the source — every dimension scales between minimum and maximum bounds.

### Scaling Behavior
- Hero title scales via `min(120px, 9vw, 13vh)` — capped by both width and height so the 3-line title cannot overflow a short laptop screen.
- Jumbo feature scales from 80px at minimum viewport to 200px at maximum.
- Body text scales from 15px to 20px.
- Padding scales via `clamp` per-region.
- Borders, icon squares (48px), nav dots (10px), nav arrows (44px), and timeline dots (20px) are fixed and do not scale.

### Presenter Behavior
- Slides advance via `ArrowRight` or `Space`.
- Slides reverse via `ArrowLeft`.
- Nav-dots float at right edge; nav-arrows at bottom-left; slide counter at bottom-right. All three carry `.dark` variants for cream surfaces (ink-translucent fills) and standard variants for coral/ink surfaces (white-translucent fills).
- Active nav-dot fills with `{colors.coral}` regardless of surface.

### Charts
Charts are rendered with Chart.js (loaded via CDN). Primary series uses `{colors.coral}`; comparison series uses `{colors.coral-dark}`. Chart styling is configured inline in the JS; restyling requires editing JS, not CSS.

### Print / Export
Not explicitly handled. Each slide is a 100vw × 100vh block; export workflows should snapshot each slide at 1920×1080. The 45° hatch overlays should render correctly in PDF capture.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin font | Recommended Chinese pairing | Source |
|---|---|---|---|
| Display / Headline (Bebas Neue uppercase 400) | Bebas Neue | 站酷小薇体 ZCOOL XiaoWei | Google Fonts |
| Body / Label (Inter 300–700) | Inter | 悠哉字体 Yozai | cn-fontsource CDN |

### Mixed-Content Strategy

Use **Strategy A — single-font-stack with fallback**: declare ZCOOL XiaoWei *after* Bebas Neue and Yozai *after* Inter in the same `font-family` stack so Latin glyphs render in Bebas / Inter and CJK glyphs fall through to the Chinese face automatically. One CSS rule per role, no manual class switching.

### 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=Bebas+Neue&family=Inter:wght@300..700&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/cn-fontsource-yozai-regular/font.css" rel="stylesheet">
```

```css
:root {
  --font-display: "Bebas Neue", "ZCOOL XiaoWei", sans-serif;
  --font-body: "Inter", "Yozai", sans-serif;
}
```

### Universal CJK Adjustments

- **Line-height**: bump CJK body line-height to ~1.8 (from 1.7) — Hanzi need more vertical breathing than Latin lowercase, and Coral's body already favors generous leading.
- **Letter-spacing**: zero out `letter-spacing` on Hanzi runs (the 1–12px Bebas tracking and 1–4px Inter tracking shatter Hanzi cadence). Keep heavy tracking only on Latin spans.
- **Text-transform**: drop `text-transform: uppercase` on any label/eyebrow/meta when content is Hanzi — Chinese has no case; forcing uppercase does nothing for Hanzi but breaks the rendering of any mixed Latin acronyms inside.
- **Punctuation**: use Chinese full-width punctuation (，。：；「」) for Chinese sentences, half-width (`,.:;""`) for Latin. Never mix half-width punctuation into a Chinese sentence.
- **No period on headlines**: Chinese headline convention omits the terminal 。 — strip it from display strings.
- **Pangu spacing**: insert a thin space (or a regular space) between adjacent Hanzi and Latin/digit runs (e.g. `2026 年`, `AI 产品`). Improves readability of mixed runs.
- **One font per sentence**: don't switch CJK families mid-sentence. Pick ZCOOL XiaoWei *or* Yozai for a given text run based on its role, never both inside one phrase.

### Aesthetic Notes

ZCOOL XiaoWei carries the magazine-poster voice that Bebas Neue provides for Latin — its tall narrow Hanzi forms have a similar architectural-display register, and at the 80–200px sizes Coral uses for jumbo features, ZCOOL XiaoWei holds shape without crumbling the way a system Hanzi face would. Critically, Bebas Neue's "uppercase only with heavy tracking" rule is meaningless for Hanzi (no case, no tracking), so the system's most foundational typographic rule simply doesn't apply to CJK — drop the tracking, drop the uppercase, and let ZCOOL XiaoWei stand on size alone. Yozai pairs with Inter for body and labels: its rounded humanist forms match Inter's warmth and stay legible inside coral / cream / ink surfaces. The three-surface region splits, 45° diagonal hatch, decorative oversized numerals (which can stay Latin — 01, 02, 03 work perfectly as wallpaper behind a Chinese column title), and 5px coral top borders are all content-agnostic and work identically in any language.

### Known CJK Gap

ZCOOL XiaoWei is a single-weight display face with limited glyph coverage compared to Noto family — exotic or technical Hanzi (rare surnames, classical characters, simplified-only variants outside GB2312) may fall back to system font. For Traditional Chinese decks, swap Yozai for `LXGW WenKai TC` (Google Fonts) which has fuller TC coverage. Bebas Neue's narrow condensed proportion has no exact Chinese equivalent — ZCOOL XiaoWei is medium-condensed at best, so Chinese hero titles will occupy ~20% more horizontal space than Latin equivalents. Adjust line-breaks (typically a 2-line Chinese title fills the same area as a 3-line English hero-title) and consider increasing the hero-title `min()` cap when a Chinese title runs long.

## Iteration Guide

1. Every new slide is a composition of one to three surface regions (coral, ink, cream) meeting at hard edges. Choose the surface split based on content emphasis.
2. Every new headline uses Bebas Neue uppercase with at least 1–2px letter-spacing. Don't sentence-case; don't untracked.
3. Every new section eyebrow uses Inter weight 700 uppercase 4px-tracked in `{colors.coral}` on cream/ink, or `{colors.black}` on coral.
4. Every new card uses the 5px coral top border + white fill + no shadow + no radius pattern.
5. Every new sidebar tile uses the 4px coral left border + white fill + no radius pattern.
6. Every new coral region carries a 45° diagonal hatch overlay at 6% opacity for texture.
7. New coral regions that feel underweight get a decorative oversized Bebas numeral at 12% opacity as wallpaper behind the primary title.
8. New chart series use coral + coral-dark; don't introduce additional series colors.
9. New quote layouts pair a coral left panel (with a giant mark at 35% opacity) with an ink or cream right panel (carrying the quote body in Inter weight 300).
10. The system has three surfaces and one accent (coral). Don't introduce a fourth surface color or a second accent.

## Known Gaps

- The Chart.js library is loaded via CDN; chart styling is configured inline in JS rather than reading from CSS variables — restyling requires editing JS.
- The 45° diagonal hatch stride values (20px/40px standard; 30px/60px variant; 60px/62px vertical) are hardcoded per usage; there is no parameterized hatch component.
- Decorative oversized numerals are placed as inline content with hardcoded values; there is no generative ordinal system.
- The cover composition's SVG zigzag-layer is an inline SVG embedded in the source — adjusting the zigzag pattern requires editing SVG markup.
- The timeline-line's dashed effect is rendered via a `::after` repeating-linear-gradient overlay rather than `border-style: dashed` — this gives precise control over dash dimensions but is unusual.
- The cover composition uses `min(120px, 9vw, 13vh)` triple-cap sizing to prevent the 3-line title from overflowing on short laptops; new cover variants should follow the same multi-axis cap pattern.
- The pull-quote layout uses Inter weight 300; Inter weight 300 is loaded explicitly but not used elsewhere — this is the system's only Inter Light deployment.
- The `cream-dark` and `light-gray` palette tokens are defined but used sparingly across the source; they are available for new compositions that need additional neutral shades.
- The nav-dot and nav-arrow `.dark` variant must be manually applied on cream-surface slides to maintain visibility — there is no automatic surface detection.
- Linear-gradient feature regions (135° coral-dark → coral) are the system's only intentional gradient; all other surfaces are flat colors. Using gradients elsewhere breaks the flat-surface aesthetic.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.aline` — 1·2장 — 예: `<i class="aline">`
- `.bgnum` — 1·6장 — 예: `<span class="bgnum">`
- `.bottom` — 1장 — 예: `<div class="bottom">`
- `.coralbg` — 1·4·5·6장 — 예: `<div class="top coralbg">`
- `.cream` — 1·2·3·4·5·6장 — 예: `<section class="slide cream">`
- `.eb` — 1·2·3·4·5·6장 — 예: `<span class="eb ink">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.hero` — 1장 — 예: `<h1 class="hero">`
- `.info` — 1장 — 예: `<div class="info">`
- `.ink` — 1·4·5·6장 — 예: `<span class="eb ink">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide cream">`
- `.top` — 1장 — 예: `<div class="top coralbg">`
- `.trule` — 1장 — 예: `<i class="trule">`
- `.unit` — 1장 — 예: `<p class="unit">`
- `.zig` — 1장 — 예: `<svg class="zig" viewBox="0 0 1920 120" preserveAspectRatio="none">`

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

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.brow` — 3장 — 예: `<div class="brow">`
- `.ch` — 3장 — 예: `<div class="ch">`
- `.chart` — 3장 — 예: `<div class="chart">`
- `.dk` — 3장 — 예: `<span class="tr dk">`
- `.k` — 3장 — 예: `<i class="k" style="background:var(--coral)">`
- `.lb` — 3장 — 예: `<span class="lb">`
- `.src` — 3장 — 예: `<p class="src">`
- `.st` — 3장 — 예: `<div class="sitem st">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.tm` — 3장 — 예: `<b class="tm">`
- `.tr` — 3장 — 예: `<span class="tr">`
- `.tv` — 3장 — 예: `<b class="tv">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cc` — 4장 — 예: `<div class="card cc">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.hd3` — 4장 — 예: `<h2 class="hd3">`
- `.lst` — 4장 — 예: `<div class="lst">`
- `.mark` — 4·5장 — 예: `<span class="mark">`
- `.nr` — 4·5·6장 — 예: `<p class="nr">`
- `.q45` — 4장 — 예: `<div class="qleft coralbg q45">`
- `.qa` — 4장 — 예: `<i class="qa">`
- `.qatt` — 4장 — 예: `<span class="qatt">`
- `.ql` — 4장 — 예: `<p class="ql">`
- `.qleft` — 4장 — 예: `<div class="qleft coralbg q45">`
- `.rp` — 4장 — 예: `<div class="rp">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr2 th">`
- `.tr2` — 4장 — 예: `<div class="tr2 th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<div class="sitem bl">`
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.hd2` — 5장 — 예: `<h2 class="hd2">`
- `.left5` — 5장 — 예: `<div class="left5">`
- `.ol` — 5장 — 예: `<span class="ol">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.rpanel` — 5장 — 예: `<div class="rpanel coralbg" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wro…`
- `.sm` — 5·6장 — 예: `<span class="eb sm">`
- `.wl` — 5장 — 예: `<span class="eb sm wl">`
- `.words` — 5장 — 예: `<p class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.a` — 6장 — 예: `<div class="card d6 a">`
- `.b` — 6장 — 예: `<div class="card d6 b">`
- `.b6` — 6장 — 예: `<span class="bgnum b6">`
- `.br6` — 6장 — 예: `<div class="dr br6" id="co-bar">`
- `.c` — 6장 — 예: `<div class="card d6 c">`
- `.d6` — 6장 — 예: `<div class="card d6 a">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.dr` — 6장 — 예: `<div class="dr nb6">`
- `.h6` — 6장 — 예: `<h2 class="h6">`
- `.ht6` — 6장 — 예: `<div class="ht6" id="co-hatch">`
- `.list6` — 6장 — 예: `<div class="list6">`
- `.lp6` — 6장 — 예: `<div class="lp6 coralbg">`
- `.m` — 6장 — 예: `<i class="m" style="width:76%">`
- `.nb6` — 6장 — 예: `<div class="dr nb6">`
- `.s` — 6장 — 예: `<i class="s" style="width:52%">`
- `.s6` — 6장 — 예: `<div class="sitem s6">`
- `.sl6` — 6장 — 예: `<span class="eb sl6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

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

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="coral">
<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=Bebas+Neue&family=Inter:wght@300;400;500;700&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/coral.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide cream">
  <div class="top coralbg"><svg class="zig" viewBox="0 0 1920 120" preserveAspectRatio="none"><polyline fill="none" stroke="#1A1A1A" stroke-width="3" points="0,100 60,20 120,100 180,20 240,100 300,20 360,100 420,20 480,100 540,20 600,100 660,20 720,100 780,20 840,100 900,20 960,100 1020,20 1080,100 1140,20 1200,100 1260,20 1320,100 1380,20 1440,100 1500,20 1560,100 1620,20 1680,100 1740,20 1800,100 1860,20 1920,100"/></svg><span class="bgnum">01</span>
    <span class="eb ink">학습 목표</span>
    <h1 class="hero">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  </div>
  <div class="bottom">
    <i class="trule"></i>
    <p class="unit">계절의 변화<span>SUN, SHADOW & TEMPERATURE</span></p>
    <i class="aline"></i>
    <div class="info"><b>00초등학교</b><span>초등 과학 · 6학년 2학기 · 1단원 · 3~4차시 · 2026</span></div>
  </div>
</section>
<section class="slide cream" data-steps="4">
  <span class="eb" style="left:110px;top:70px">측정 준비</span>
  <h2 class="hd">태양 고도 측정기 만들기</h2>
  <div class="card fig"><span class="isq">F</span><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg></div>
  <p class="def"><b>태양 고도</b> — 태양이 지표면과 이루는 각</p>
  <div class="steps"><div class="sitem" data-s="1"><b class="sv">01</b><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="sitem" data-s="2"><b class="sv">02</b><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="sitem" data-s="3"><b class="sv">03</b><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="sitem" data-s="4"><b class="sv">04</b><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
  <div class="btns"><button class="btn fire" data-act="step">다음 단계 →</button><button class="btn" 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="inkband"><i class="aline"></i><p>막대기의 그림자와 실이 이루는 각 = 태양 고도</p><span class="nrw">버튼 규칙 없음 → 코랄 사각 칸으로 표현</span></div>
</section>
<section class="slide cream">
  <span class="eb" style="left:110px;top:70px">측정 결과</span>
  <h2 class="hd">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="sitem st"><b class="sv">12:30</b><span class="lb">남중 시각</span><p>태양 고도가 가장 높아요 무렵 · 남중</p></div><div class="sitem st"><b class="sv">정남</b><span class="lb">남중 방향</span><p>남중할 때 태양의 위치 쪽</p></div><div class="sitem st"><b class="sv">14:30</b><span class="lb">최고 기온</span><p>기온이 가장 높아요 무렵</p></div><div class="sitem st"><b class="sv">9:30</b><span class="lb">가장 긴 그림자</span><p>그림자가 가장 길어요 · 15:30</p></div></div>
  <div class="chart">
    <div class="ch"><b>측정 시각별 태양 고도, 그림자 길이, 기온</b><span><i class="k" style="background:var(--coral)"></i>태양 고도(°)</span><span><i class="k" style="background:var(--coral-d)"></i>그림자 길이(cm)</span><span>기온(℃)</span><span class="lb">예시 값</span></div>
    <div class="brow"><b class="tm">9:30</b><span class="tr"><i style="width:63%"></i><em>38°</em></span><span class="tr dk"><i style="width:86%"></i><em>12.9</em></span><b class="tv">22</b></div><div class="brow"><b class="tm">10:30</b><span class="tr"><i style="width:80%"></i><em>48°</em></span><span class="tr dk"><i style="width:61%"></i><em>9.1</em></span><b class="tv">23.8</b></div><div class="brow"><b class="tm">11:30</b><span class="tr"><i style="width:92%"></i><em>55°</em></span><span class="tr dk"><i style="width:47%"></i><em>7</em></span><b class="tv">25.2</b></div><div class="brow"><b class="tm">12:30</b><span class="tr"><i style="width:95%"></i><em>57°</em></span><span class="tr dk"><i style="width:43%"></i><em>6.4</em></span><b class="tv">26.3</b></div><div class="brow"><b class="tm">13:30</b><span class="tr"><i style="width:90%"></i><em>54°</em></span><span class="tr dk"><i style="width:48%"></i><em>7.2</em></span><b class="tv">27</b></div><div class="brow"><b class="tm">14:30</b><span class="tr"><i style="width:78%"></i><em>47°</em></span><span class="tr dk"><i style="width:63%"></i><em>9.4</em></span><b class="tv">27.4</b></div><div class="brow"><b class="tm">15:30</b><span class="tr"><i style="width:62%"></i><em>37°</em></span><span class="tr dk"><i style="width:89%"></i><em>13.4</em></span><b class="tv">26.9</b></div>
  </div>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값 · 꺾은선 규칙 없음 → 숫자 열으로 표현</p>
</section>
<section class="slide cream">
  <div class="qleft coralbg q45"><span class="mark">“</span>
    <span class="eb ink">오늘의 정리</span>
    <p class="ql">태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p>
    <i class="qa"></i><span class="qatt">계절의 변화 · 1단원 · 3~4차시</span>
  </div>
  <div class="rp">
    <span class="eb">관계 정리</span>
    <h2 class="hd3">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
    <div class="cmp"><div class="card cc"><span class="isq">H</span><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="card cc"><span class="isq">L</span><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
    <div class="tbl"><div class="tr2 th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr2"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr2"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr2"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
    <div class="lst"><span class="eb">남중</span><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p>이때의 태양 고도를 남중 고도라고 해요</p></div>
  </div>
  <p class="nr">표 규칙 없음 → 왼쪽 4px 선 칸 행으로 표현</p>
</section>
<section class="slide cream">
  <div class="left5">
    <span class="eb">확인하기</span>
    <h2 class="hd2">배운 내용을 확인해 볼까요?</h2>
    <span class="eb sm">빈칸을 눌러 확인해요</span>
    <div class="sitem bl"><b class="sv">01</b><p><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p></div><div class="sitem bl"><b class="sv">02</b><p><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p></div><div class="sitem bl"><b class="sv">03</b><p><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p></div>
    <span class="eb sm wl">오늘의 낱말</span>
    <p class="words">태양 고도 · 남중 고도 · 그림자 길이 · 기온</p>
  </div>
  <div class="rpanel coralbg" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
    <span class="mark">?</span>
    <span class="eb ink">QUIZ</span>
    <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
    <div class="opts"><button class="opt" data-opt="0"><span class="ol">A</span>오전 9시 30분</button><button class="opt" data-opt="1"><span class="ol">B</span>낮 12시 30분 무렵</button><button class="opt" data-opt="2"><span class="ol">C</span>오후 3시 30분</button></div>
    <p class="fb" data-fb></p>
    <div class="btns"><button class="btn" data-act="retry">다시 풀기 ↺</button></div>
  </div>
  <p class="nr">빈칸 규칙 없음 → 4px 선 칸으로 표현</p>
</section>
<section class="slide cream">
  <div class="lp6 coralbg"><span class="bgnum b6">06</span>
    <span class="eb ink">디자인 안내</span>
    <h2 class="h6">이 디자인 사용 설명서</h2>
    <div class="list6"><div class="sitem s6"><b class="eb sm">한눈에</b><p><b>코랄 · 먹 · 크림</b> 세 면이 칼같은 경계로 맞닿는 포스터. 압축 대문자 제목을 크게 쓰고, 코랄 위 제목은 언제나 검정.</p></div><div class="sitem s6"><b class="eb sm">색</b><p><span class="sw6"><span><i style="background:#E85D5D"></i>코랄</span><span><i style="background:#D44A4A"></i>짙은 코랄</span><span><i style="background:#F5F0E8"></i>크림</span><span><i style="background:#1A1A1A"></i>먹</span></span></p></div><div class="sitem s6"><b class="eb sm">글꼴</b><p>제목·숫자 Bebas Neue → Cafe24 PRO Slim Bold<br>본문 Inter → Hakgyoansim Wooju</p></div><div class="sitem s6"><b class="eb sm">이렇게 쓰면 좋아요</b><p>수업 시작·정리처럼 한 메시지를 힘 있게 전할 때. 면을 두세 개로만 나누고, 강조는 80×4 코랄 선으로.</p></div></div>
  </div>
  <span class="eb sl6">대표 장치 — 눌러 보세요</span>
  <div class="card d6 a"><div class="dh"><h3>원형 화살표 호버</h3><span class="eb sm">직접 올려 보세요</span></div><p>내비 원에 마우스를 올리면 코랄로 채워져요.</p><div class="dr nb6"><button>‹</button><button>›</button></div></div>
  <div class="card d6 b"><div class="dh"><h3>코랄 면 45° 빗금</h3><button class="btn sm" data-demo="#co-hatch" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>코랄 면에는 6% 검정 빗금을 깔아 인쇄물 느낌을 내요.</p><div class="dr"><div class="ht6" id="co-hatch"><b>FIRE</b></div></div></div>
  <div class="card d6 c"><div class="dh"><h3>주 계열과 비교 계열</h3><button class="btn sm" data-demo="#co-bar" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>가로 막대 — 주 계열은 코랄, 비교 계열은 짙은 코랄로 나란히.</p><div class="dr br6" id="co-bar"><i class="m" style="width:76%"></i><i class="s" style="width:52%"></i></div></div>
  <p class="nr">버튼 규칙 없음 → 코랄 사각 칸으로 표현</p>
</section>
<nav class="dk-nav"><span class="dk-dots"><button class="dk-dot" aria-label="1장"></button><button class="dk-dot" aria-label="2장"></button><button class="dk-dot" aria-label="3장"></button><button class="dk-dot" aria-label="4장"></button><button class="dk-dot" aria-label="5장"></button><button class="dk-dot" aria-label="6장"></button></span><span class="nb"><button class="dk-prev" aria-label="이전">‹</button><button class="dk-next" aria-label="다음">›</button></span><span class="dk-count" data-pad></span></nav>
  </main>
</div>

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* --- 토큰(1920 무대, 글자는 교실 화면용 최소 28px) --- */
:root{--coral:#E85D5D;--coral-d:#D44A4A;--cream:#F5F0E8;--cream-d:#E8E0D4;--ink:#1A1A1A;--gray:#6B6B6B;--lg:#B0B0B0}
.slide{font-family:'Inter',var(--kb),sans-serif;color:var(--ink)}
.slide.cream{background:var(--cream)}
.slide>*{position:absolute}
.coralbg{background:var(--coral)}
.coralbg::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 20px,rgba(0,0,0,.06) 20px 40px);pointer-events:none}
.coralbg.q45::before{background:repeating-linear-gradient(-45deg,transparent 0 30px,rgba(0,0,0,.06) 30px 60px)}
.coralbg>*{position:relative}
.eb{font-weight:700;font-size:28px;letter-spacing:.12em;color:var(--coral)}
.eb.ink{color:var(--ink)}
.eb.sm{font-size:26px}
.aline{display:block;flex:none;width:80px;height:4px;background:var(--coral)}
h3{font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);letter-spacing:0}
.card{background:#fff;border-top:5px solid var(--coral)}
.isq{display:grid;place-items:center;width:56px;height:56px;background:var(--coral);color:#fff;font:400 34px 'Bebas Neue',sans-serif;letter-spacing:1px}
.sitem{background:#fff;border-left:4px solid var(--coral);padding:14px 22px}
.sv{font:400 44px/1 'Bebas Neue',var(--kt),sans-serif;letter-spacing:2px;color:var(--coral)}
.nr{left:200px;bottom:34px;font-size:18px;color:var(--gray)}
.btns{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.btn{border:3px solid var(--ink);padding:12px 32px;font:700 28px 'Inter',var(--kb),sans-serif;letter-spacing:.04em;background:#fff}
.btn.fire{background:var(--coral);border-color:var(--coral)}
.btn:disabled{opacity:.35}

/* --- 1. 표지: 위쪽 코랄 구역(빗금·지그재그·12% 배경 숫자) — '학습 목표' + 학습 목표 hero / 아래 크림 구역(15% 잉크 선, 단원, 정보 띠) --- */
.top{left:0;right:0;top:0;height:650px;padding:110px 120px 0}
.zig{position:absolute!important;left:0;right:0;top:30px;width:100%;height:80px;opacity:.18}
.bgnum{position:absolute!important;right:120px;top:40px;font:400 440px/1 'Bebas Neue',sans-serif;color:rgba(0,0,0,.12)}
.hero{margin-top:26px;font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:134px;line-height:1.16;letter-spacing:0;color:var(--ink);white-space:nowrap}
.hero .gk{font-style:normal}
.bottom{left:120px;right:120px;top:650px;bottom:0;padding-top:40px}
.trule{display:block;height:3px;background:var(--ink);opacity:.15;margin-bottom:30px}
.unit{display:flex;align-items:baseline;gap:30px;font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:72px;line-height:1.1;white-space:nowrap}
.unit span{font:400 48px 'Bebas Neue',sans-serif;letter-spacing:4px;color:var(--gray)}
.bottom .aline{margin:24px 0}
.info{position:absolute;left:0;right:0;bottom:70px;display:flex;justify-content:space-between;align-items:baseline;background:var(--cream-d);padding:16px 28px}
.info b{font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:400;font-size:40px;letter-spacing:2px}
.info span{font-weight:500;font-size:28px;letter-spacing:.06em;color:var(--gray)}

/* --- 2. 흐름(크림): 5px 코랄 선 카드 속 측정기 그림 | 정의 + 왼쪽 4px 선 칸 4단계 + 코랄 버튼 / 아래 잉크 띠(메모, Inter 300) --- */
.hd{left:110px;right:110px;top:118px;font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:84px;line-height:1.15;letter-spacing:0}
.fig{left:110px;top:250px;width:840px;padding:20px 32px 10px;--g-ink:var(--ink);--g-acc:var(--coral);--g-stick:var(--coral);--g-board:var(--cream-d);--g-ruler:#fff;--g-prot:rgba(245,240,232,.8);--g-shadow:var(--ink);--g-font:'Inter',var(--kb),sans-serif;--g-sw:2}
.fig .isq{position:absolute;right:24px;top:20px}
.def{left:1010px;right:110px;top:256px;font-size:28px;line-height:1.5;color:var(--gray)}
.def b{color:var(--ink);font-weight:700}
.steps{left:1010px;right:110px;top:316px;display:flex;flex-direction:column;gap:12px}
.steps .sitem{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:10px 20px}
.slide[data-step]:not([data-step="0"]) .steps .sitem:not(.on){opacity:.4}
.steps h3{font-size:40px;line-height:1.15}
.steps p{margin-top:2px;font-size:28px;line-height:1.45;color:var(--gray)}
section[data-steps] .btns{position:absolute;left:1010px;right:110px;top:826px}
.cap{flex:1;min-width:300px;font-size:28px;line-height:1.4}
.inkband{left:0;right:0;bottom:0;height:120px;background:var(--ink);color:var(--cream);display:flex;align-items:center;gap:36px;padding:0 220px 0 200px}
.inkband p{flex:1;font-weight:300;font-size:36px}
.nrw{font-size:18px;color:var(--lg)}

/* --- 3. 숫자와 그래프(크림): 왼쪽 선 칸 4개(Bebas 값) + 가로 막대(태양 고도 = 코랄, 그림자 길이 = 짙은 코랄) + 기온 숫자 열 --- */
.stats{left:110px;right:110px;top:250px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.st{display:flex;flex-direction:column;gap:6px}
.st .sv{font-size:72px;letter-spacing:2px;color:var(--ink)}
.lb{font-weight:700;font-size:24px;letter-spacing:.1em;color:var(--coral)}
.st p{font-size:28px;line-height:1.4;color:var(--gray)}
.chart{left:110px;right:110px;top:530px;background:#fff;border-top:5px solid var(--coral);padding:18px 32px;display:flex;flex-direction:column;gap:6px}
.ch{display:flex;align-items:center;gap:30px;font-size:26px;color:var(--gray);margin-bottom:4px}
.ch b{margin-right:auto;font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:36px;color:var(--ink)}
.k{display:inline-block;width:22px;height:16px;margin-right:10px;vertical-align:middle}
.brow{display:grid;grid-template-columns:110px 1.4fr 1fr 110px;gap:24px;align-items:center}
.tm,.tv{font:400 34px/1 'Bebas Neue',sans-serif;letter-spacing:2px}
.tv{text-align:right}
.tr{position:relative;height:30px;display:flex;align-items:center}
.tr i{display:block;height:100%;background:var(--coral)}
.tr.dk i{background:var(--coral-d)}
.tr em{margin-left:12px;font:400 28px/1 'Bebas Neue',sans-serif;font-style:normal;letter-spacing:1px}
.src{left:200px;right:200px;bottom:34px;font-size:20px;color:var(--gray)}

/* --- 4. 비교와 표: 왼쪽 40% 코랄 인용 판(-45° 빗금 · 35% 큰 따옴표 · Inter 300) | 크림: 5px 선 카드 둘(사각 아이콘) + 표(4px 선 칸 행) + 남중 --- */
.qleft{left:0;top:0;bottom:0;width:720px;padding:120px 80px 110px 110px;display:flex;flex-direction:column}
.qleft .mark{position:absolute!important;right:40px;top:-30px;font:400 420px/1 'Bebas Neue',sans-serif;color:rgba(0,0,0,.35)}
.ql{margin-top:auto;font-weight:300;font-size:46px;line-height:1.5}
.qa{display:block;width:60px;height:4px;background:var(--ink);margin:30px 0 16px}
.qatt{font-weight:600;font-size:24px;letter-spacing:.1em}
.rp{left:720px;right:0;top:0;bottom:0;padding:70px 110px 110px 80px;display:flex;flex-direction:column}
.hd3{margin-top:12px;font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:64px;line-height:1.15}
.cmp{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.cc{padding:22px 26px;display:flex;flex-direction:column;gap:4px}
.cc h3{margin:12px 0 4px;font-size:40px;line-height:1.15}
.cc p{font-size:28px;line-height:1.5;color:var(--gray)}
.tbl{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.tr2{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;background:#fff;border-left:4px solid var(--coral);padding:8px 20px;font-size:28px;line-height:1.35}
.tr2.th{background:transparent;border-left-color:var(--ink);font-weight:700;font-size:22px;letter-spacing:.06em;color:var(--gray)}
.tr2 span:first-child{font-family:'Bebas Neue',var(--kt),sans-serif;letter-spacing:1px}
.lst{margin-top:20px}
.lst p{margin-top:6px;font-size:28px;line-height:1.5}
.lst p::before{content:'—';margin-right:12px;color:var(--coral);font-weight:700}

/* --- 5. 확인하기: 크림 왼쪽(왼쪽 선 칸 빈칸 + 낱말) | 코랄 오른쪽(빗금 · 35% 큰 기호 퀴즈, 흰 칸 보기) --- */
.left5{left:0;top:0;bottom:0;width:1060px;padding:70px 80px 110px 110px;display:flex;flex-direction:column;gap:14px}
.hd2{font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:76px;line-height:1.15;margin-bottom:16px}
.bl{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center}
.bl p{font-size:30px;line-height:1.55}
.blank{position:relative;min-width:180px;margin-right:10px;padding:2px 14px;border:3px solid var(--ink);font-weight:700;text-align:center;background:var(--cream)}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--coral);border-color:var(--coral)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:52px;letter-spacing:1px}
.rpanel{right:0;top:0;bottom:0;width:860px;padding:90px 90px 110px;display:flex;flex-direction:column}
.rpanel .mark{position:absolute!important;right:60px;top:-30px;font:400 420px/1 'Bebas Neue',sans-serif;color:rgba(0,0,0,.35)}
.q{margin-top:90px;font-size:64px;line-height:1.2;color:var(--ink)}
.opts{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.opt{display:flex;align-items:center;gap:22px;text-align:left;background:#fff;border-left:4px solid var(--ink);padding:14px 24px;font-weight:500;font-size:34px}
.ol{font:400 40px 'Bebas Neue',sans-serif;color:var(--coral)}
.opt.right{background:var(--ink);color:var(--cream)}
.opt.wrong{background:var(--cream-d);color:var(--gray)}
.opt:disabled:not(.right){opacity:.6}
.fb{margin-top:22px;min-height:90px;font-weight:500;font-size:30px;line-height:1.5}
.rpanel .btns{margin-top:auto}

/* --- 내비: 오른쪽 점(활성 코랄) + 왼쪽 아래 원형 화살표(호버 코랄) + 오른쪽 아래 번호(크림 면은 잉크 변형) --- */
.dk-nav{inset:0;pointer-events:none}
.dk-dots{position:absolute;right:36px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:16px;pointer-events:auto}
.dk-dot{width:16px;height:16px;border-radius:50%;background:rgba(26,26,26,.25)}
.dk-dot.on{background:var(--coral)}
.nb{position:absolute;left:30px;bottom:24px;display:flex;gap:12px;pointer-events:auto}
.nb button{width:56px;height:56px;border-radius:50%;background:rgba(26,26,26,.06);border:2px solid rgba(26,26,26,.2);font-size:32px;line-height:1}
.nb button:hover:not(:disabled){background:var(--coral);border-color:var(--coral)}
.nb button:disabled{opacity:.3}
.dk-count{position:absolute;right:40px;bottom:36px;font:400 30px 'Bebas Neue',sans-serif;letter-spacing:2px;color:var(--gray)}
[data-slide="2"] .nb button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:var(--cream)}
[data-slide="2"] .dk-count{color:var(--cream)}
[data-slide="5"] .dk-dot{background:rgba(255,255,255,.5)}[data-slide="5"] .dk-dot.on{background:var(--ink)}
[data-slide="5"] .dk-count{color:var(--ink)}
/* --- 6. 디자인 안내: 코랄 면(설명) | 크림 면 흰 카드 시연 3개 --- */
.lp6{left:0;top:0;bottom:0;width:1000px;padding:90px 80px 110px 120px;display:flex;flex-direction:column}
.b6{right:60px;top:auto!important;bottom:-40px}
.h6{margin-top:16px;font-family:'Bebas Neue',var(--kt),sans-serif;font-weight:var(--wt);font-size:84px;line-height:1.1;color:var(--ink)}
.list6{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.s6 p{margin-top:4px;font-size:24px;line-height:1.5}
.s6 b:not(.eb){font-weight:700}
.sw6{display:flex;flex-wrap:wrap;gap:6px 20px}
.sw6 i{display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:-6px;border:2px solid var(--ink)}
.sl6{left:1080px;top:110px}
.d6{left:1080px;right:110px;height:240px;padding:22px 30px}
.d6.a{top:170px}.d6.b{top:440px}.d6.c{top:710px}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:44px;line-height:1.1}
.d6 p{margin-top:6px;font-size:23px;line-height:1.45;color:var(--gray)}
.btn.sm{font-size:20px;padding:6px 16px;border-width:2px}
.btn.sm[aria-pressed="true"]{background:var(--coral);border-color:var(--coral)}
.dr{margin-top:14px;height:76px;display:flex;align-items:center;gap:14px}
.nb6 button{width:64px;height:64px;border-radius:50%;background:rgba(26,26,26,.06);border:2px solid rgba(26,26,26,.2);font-size:34px;line-height:1}
.nb6 button:hover{background:var(--coral);border-color:var(--coral)}
.ht6{position:relative;width:100%;height:76px;background:var(--coral);display:flex;align-items:center;padding:0 24px}
.ht6 b{position:relative;font:400 56px/1 'Bebas Neue',sans-serif;letter-spacing:2px}
.ht6.play::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0 20px,rgba(0,0,0,.06) 20px 40px)}
.br6{flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
.br6 i{display:block;height:24px}
.br6 .m{background:var(--coral)}
.br6 .s{background:var(--coral-d);opacity:0}
.br6.play .s{opacity:1}
[data-slide="6"] .nb button{background:rgba(255,255,255,.15);border-color:rgba(26,26,26,.3)}

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