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

> 이 파일은 **ChatGPT·Claude·Gemini 같은 채팅 AI**에게 통째로 주면, 이 디자인(`daisy-days`)으로 수업 슬라이드를 만들어 주도록 쓴 지시서입니다.
> 파일을 읽고 쓸 수 있는 에이전트 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 Ssurround v2.0(400) · 본문 BM JUA_TTF(400)입니다. 글씨체와 공통 모양·동작은 **인터넷에서 불러오므로 슬라이드를 열 때 인터넷이 필요**합니다(영문 글꼴도 마찬가지). 인터넷 없이 발표하려면 갤러리의 **받기 .zip**(모든 것이 파일 안에 들어 있음)을 쓰세요.
- AI가 긴 코드를 일부 생략하거나 어긋나게 쓸 수 있습니다. 열어서 한 번 확인하세요. 안 열리거나 깨지면 "코드가 생략되었어. 완성된 HTML 하나로 처음부터 끝까지 다시 출력해 줘"라고 요청합니다.
- 사진·학생 이름 같은 개인정보는 AI에게 넣지 마세요.

## 라이선스

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

- Cafe24 Ssurround v2.0: Cafe24 Ssurround — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © Cafe24 Corp. All Rights Reserved.
  파일: Cafe24Ssurround-v2.0.ttf
- BM JUA_TTF: BM JUA_TTF — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright (c) 2014 WOOWA BROTHERS Corporation(www.woowahan.com) with Reserved Font Name "BM JUA "
  파일: BMJUA_ttf.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/daisy-days.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/daisy-days.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 Ssurround v2.0(400) · 본문 BM JUA_TTF(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. 디자인 규칙 (`daisy-days` design.md)

````markdown
---
version: alpha
name: Daisy Days
description: A cheerful, childlike presentation system built around the chunky display face Fredoka One and the rounded humanist sans Quicksand. The palette is a sunny garden — cream canvas, turquoise, soft pink, butter yellow, mint, lavender, peach, sky blue, and a single coral accent — with charcoal-brown 2D outlines wrapping every shape. Hard offset shadows in dark charcoal, generous border-radius, and hand-drawn SVG decorations (daisies, stars, suns, clouds, rainbows) anchor the aesthetic somewhere between a children's storybook spread and a sticker-sheet kawaii zine.

colors:
  cream: "#F5F0E6"
  turquoise: "#7ECDC0"
  soft-pink: "#F7C8D4"
  butter: "#FDE68A"
  mint: "#A8E6CF"
  lavender: "#D4A5E8"
  peach: "#FFCBA4"
  sky: "#A8D8F0"
  coral: "#F8635F"
  text-dark: "#2D2D2D"
  text-muted: "#6B6B6B"
  white: "#FFFFFF"

borders:
  primary: "3px solid {colors.text-dark}"
  thin: "2px solid {colors.text-dark}"

shadows:
  default: "6px 6px 0 {colors.text-dark}"
  small: "4px 4px 0 {colors.text-dark}"
  text-headline: "3px 3px 0 {colors.text-dark}"
  text-headline-soft: "3px 3px 0 rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "clamp(3.2rem, 7vw, 6.5rem)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  headline:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "clamp(2.5rem, 5vw, 4.5rem)"
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.02em
  title:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "clamp(1.8rem, 3.5vw, 3rem)"
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.02em
  subtitle:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "clamp(1.3rem, 2vw, 1.8rem)"
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  label-display:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "clamp(1rem, 1.5vw, 1.3rem)"
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.02em
  quote:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "clamp(1.3rem, 2.5vw, 2rem)"
    fontWeight: 400
    lineHeight: 1.35
  body:
    fontFamily: "'Quicksand', sans-serif"
    fontSize: "clamp(0.95rem, 1.3vw, 1.15rem)"
    fontWeight: 500
    lineHeight: 1.6
  body-strong:
    fontFamily: "'Quicksand', sans-serif"
    fontSize: "clamp(0.95rem, 1.4vw, 1.15rem)"
    fontWeight: 600
    lineHeight: 1.5
  meta:
    fontFamily: "'Quicksand', sans-serif"
    fontSize: "clamp(0.8rem, 1.1vw, 0.95rem)"
    fontWeight: 600
    lineHeight: 1.45
  badge:
    fontFamily: "'Fredoka One', cursive"
    fontSize: "0.85rem"
    fontWeight: 400
    letterSpacing: 0.02em

spacing:
  pad-slide: "40px 60px"
  pad-card-lg: "48px 56px"
  pad-card-md: "32px 40px"
  pad-card-sm: "16px 24px"
  gap-grid-lg: "28px"
  gap-grid-md: "24px"
  gap-grid-sm: "14px"
  radius: "20px"
  radius-lg: "28px"
  radius-pill: "50px"
  radius-round: "50%"

canvas:
  width: 100vw
  height: 100vh

components:
  card:
    background: "{colors.white}"
    border: "3px solid {colors.text-dark}"
    borderRadius: "{spacing.radius}"
    boxShadow: "{shadows.default}"
  card-lg:
    background: "{colors.white}"
    border: "3px solid {colors.text-dark}"
    borderRadius: "{spacing.radius-lg}"
    boxShadow: "{shadows.default}"
  badge-pill:
    display: "inline-block"
    padding: "8px 20px"
    borderRadius: "{spacing.radius-pill}"
    border: "3px solid {colors.text-dark}"
    fontFamily: "'Fredoka One', cursive"
    fontSize: "0.85rem"
    background: "{colors.butter}"
  framed-header:
    description: "A two-part stacked card: a colored header strip (any accent surface) with rounded top corners and no bottom border, sitting flush above a white body with rounded bottom corners. The pair reads as a single unit with a tonal cap."
    headerBackground: "any accent surface"
    headerBorderRadius: "{spacing.radius-lg} {spacing.radius-lg} 0 0"
    bodyBackground: "{colors.white}"
    bodyBorderRadius: "0 0 {spacing.radius-lg} {spacing.radius-lg}"
    border: "3px solid {colors.text-dark}"
    boxShadow: "{shadows.default}"
  circle-dot:
    width: "48px"
    height: "48px"
    borderRadius: "{spacing.radius-round}"
    border: "3px solid {colors.text-dark}"
    fontFamily: "'Fredoka One', cursive"
    color: "{colors.white}"
    description: "Outlined colored disc holding a numeral or single letter. Used as timeline node, step marker, or list bullet anchor."
  circle-icon:
    width: "44px"
    height: "44px"
    borderRadius: "{spacing.radius-round}"
    border: "3px solid {colors.text-dark}"
    fontFamily: "'Fredoka One', cursive"
    background: "any accent surface"
    description: "Smaller cousin of circle-dot used as a card icon at the top of an info card."
  step-circle-lg:
    width: "90px"
    height: "90px"
    borderRadius: "{spacing.radius-round}"
    border: "3px solid {colors.text-dark}"
    fontFamily: "'Fredoka One', cursive"
    color: "{colors.white}"
    boxShadow: "{shadows.small}"
    description: "Oversized outlined disc used as a process step marker. Carries a hard offset shadow."
  avatar-circle:
    width: "100px"
    height: "100px"
    borderRadius: "{spacing.radius-round}"
    border: "3px solid {colors.text-dark}"
    background: "{colors.white}"
    boxShadow: "{shadows.small}"
    overflow: "hidden"
  bullet-dot:
    width: "20px"
    height: "20px"
    borderRadius: "{spacing.radius-round}"
    border: "2px solid {colors.text-dark}"
    background: "{colors.butter}"
    description: "Small outlined disc used as a ::before bullet for body list items, anchored 4px from the top of the line."
  list-dash:
    description: "A simple muted-text dash character used as a ::before bullet for compact in-card lists (day-card body)."
  legend-swatch:
    width: "18px"
    height: "18px"
    border: "2px solid {colors.text-dark}"
    borderRadius: "4px"
  decoration:
    position: "absolute"
    pointerEvents: "none"
    zIndex: 1
    description: "Hand-drawn SVG sticker (daisy, star, sun, cloud, rainbow) placed at slide corners and edges as atmospheric ornament. Often crops past the slide edge."
  nav-dots:
    position: "fixed"
    placement: "right edge, vertically centered"
    dotSize: "12px"
    dotBorder: "2px solid {colors.text-dark}"
    activeBackground: "{colors.butter}"
    activeTransform: "scale(1.2)"
  slide-counter:
    position: "fixed"
    placement: "bottom center"
    background: "{colors.white}"
    border: "3px solid {colors.text-dark}"
    borderRadius: "{spacing.radius-pill}"
    padding: "6px 20px"
    fontFamily: "'Fredoka One', cursive"
    boxShadow: "{shadows.small}"
  chart-container:
    background: "{colors.white}"
    border: "3px solid {colors.text-dark}"
    borderRadius: "{spacing.radius-lg}"
    boxShadow: "{shadows.default}"
    padding: "{spacing.pad-card-md}"
---

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

Daisy Days is a **cheerful childlike presentation system** rooted in a single typographic pairing: the chubby rounded display face **Fredoka One** for every headline, and the friendly humanist sans **Quicksand** for every line of body and meta text. The visual language descends from picture-book illustration and sticker-sheet kawaii: every shape carries a charcoal 2D outline, every elevated element casts a solid offset shadow, and every surface is a pastel from a sunny garden palette.

The color philosophy is **multi-pastel with a single warm pop**. The background canvas alternates between a soft cream (`{colors.cream}`) and the saturated pastels (`{colors.turquoise}`, `{colors.soft-pink}`, `{colors.butter}`, `{colors.mint}`, `{colors.lavender}`, `{colors.peach}`, `{colors.sky}`). The lone high-saturation accent is `{colors.coral}` — used sparingly on small marker dots and headline strokes, never as a full surface. Headlines on top of a colored surface get a 3px charcoal text-shadow, which gives display text the same outlined appearance as the shapes around it; headlines on cream stay flat. Body text never leaves `{colors.text-dark}` or `{colors.text-muted}`.

Depth is **2D and graphic**, not photographic. Every elevated element gets a `{shadows.default}` or `{shadows.small}` — a solid charcoal block offset to the bottom-right, with zero blur. The combination of thick charcoal outline plus hard offset shadow gives the system its sticker-on-paper feel. There are no gradients, no glow, no glass effects.

The signature treatment is the **hand-drawn SVG decoration layer**. Every region carries 3–7 absolutely-positioned ornaments — yellow-centered daisies, multi-color stars, smiling suns, fluffy clouds, arched rainbows — that cluster at the corners and edges, often cropping past the slide boundary at `top:-30px / right:-20px`. These decorations sit on a `z-index:1` layer behind the content (`z-index:2`) and carry the same 2px-ish charcoal stroke as the rest of the system, unifying ornament with structure.

**Density philosophy: full but not crowded.** This system reads as authoritative when every slide carries one focused content region (a card, a frame, a grid) at the center plus a generous wreath of corner ornaments at the edges. An empty corner with no decoration reads as broken — the ornaments are part of the structural composition, not optional garnish. Conversely, dense overlapping content panels read as anxious; the system wants one main subject, framed and surrounded, not three competing ones. Aim for one bordered/shadowed container per slide, with the corner decorations doing the work of filling the rest of the canvas.

**Key Characteristics:**
- Cream (`{colors.cream}`) default canvas with rotating pastel surfaces — every slide may pick a different surface color.
- Fredoka One for all headline / display / quote text; Quicksand 500/600 for all body and meta text.
- Every shape and card carries a 3px solid charcoal outline (`{colors.text-dark}`) plus a hard offset shadow (`{shadows.default}` or `{shadows.small}`).
- Generous border-radius: 20px on standard cards, 28px on featured cards, pill (`{spacing.radius-pill}`) on badges, full circle on dots and avatars.
- Hand-drawn SVG ornaments (daisies, stars, suns, clouds, rainbows) cluster at corners and crop past slide edges as atmospheric layer.
- Headlines on colored surfaces always carry a 3px solid charcoal text-shadow; headlines on cream sit flat.
- Bullets are colored outlined dots (`{components.bullet-dot}`), not glyphs. Lists feel hand-set.
- One main content container per slide, surrounded by 3–7 ornaments. Empty corners are wrong.

## Colors

### Palette
- **Cream** (`{colors.cream}` — #F5F0E6): The default canvas. A warm off-white that reads as paper-stock rather than digital white. Used as the deck's neutral surface — title openings, info-card slides, anything that wants to feel like a storybook page.
- **Turquoise** (`{colors.turquoise}` — #7ECDC0): A medium-saturation teal-green. The boldest of the surface pastels; loud enough that headlines on top need the charcoal text-shadow to stay legible.
- **Soft Pink** (`{colors.soft-pink}` — #F7C8D4): A bubblegum blush. Used as a full surface, a header-strip color, a day-marker fill, and the quote-mark accent inside a quote card.
- **Butter** (`{colors.butter}` — #FDE68A): A buttery pastel yellow. The active-state color for nav dots, the default badge fill, and the default bullet-dot fill. It is the system's "highlight" color when something needs to feel marked.
- **Mint** (`{colors.mint}` — #A8E6CF): A cool celadon green. A surface color, a header-strip color, a circle-icon fill, and a timeline-dot color.
- **Lavender** (`{colors.lavender}` — #D4A5E8): A muted purple. Surface, header-strip, marker-dot, day-marker — same role flexibility as mint and soft-pink.
- **Peach** (`{colors.peach}` — #FFCBA4): A warm pastel orange. Used as a surface (typically on process or sequence slides) and an accent.
- **Sky** (`{colors.sky}` — #A8D8F0): A pastel blue. Surface and accent color, often paired with cloud decorations.
- **Coral** (`{colors.coral}` — #F8635F): The single saturated accent. Used only as a marker fill (a numbered dot, a timeline node, a step circle) and a day-header — never as a full slide surface. Coral is the system's "look here" color and loses its punch if overused.
- **Text Dark** (`{colors.text-dark}` — #2D2D2D): The structural color. Every border, every body text run on light surfaces, every shadow, every SVG stroke. Slightly warmer than pure black — reads charcoal, not jet.
- **Text Muted** (`{colors.text-muted}` — #6B6B6B): The de-emphasized text color. Subtitles, descriptions under headlines, list-dash bullets, role labels.
- **White** (`{colors.white}` — #FFFFFF): The default card fill — every card, every avatar, every chart-container interior. Cards on a cream canvas still get white interiors so the card edge reads cleanly.

### Defaults
- **Default slide background**: `{colors.cream}`. Use a saturated pastel surface (turquoise, soft-pink, mint, butter, lavender, peach, sky) when the slide wants a tonal personality; default to cream when it doesn't.
- **Default card background**: `{colors.white}` — on any surface, including pastel surfaces. White-on-pastel is the standard card treatment.
- **Default headline color**: `{colors.text-dark}` — always.
- **Default body color**: `{colors.text-dark}` for primary body, `{colors.text-muted}` for descriptions, role labels, captions, and sublines.
- **Default border color**: `{colors.text-dark}` — always. There are no colored borders anywhere.
- **Default shadow color**: `{colors.text-dark}` — always. Shadows are never pastel.
- **Default badge fill**: `{colors.butter}`.
- **Default marker / accent fill** when an element needs a single "attention" color: `{colors.coral}`. When a sequence of markers is needed, rotate through the full pastel set (coral → mint → sky → lavender → butter) for sequence steps and dots.
- **Default header-strip color** on a framed-header component: any pastel surface — pick whichever harmonizes with the slide's surface color.

The pastels are interchangeable at the surface level — they do not carry fixed semantic meaning (mint is not "success", coral is not "warning"). Pick the surface that best serves the slide's emotional register. The one rule: coral is reserved for small high-contrast accents, not surfaces.

## Typography

### Font Family
The system loads exactly two web fonts from Google Fonts: **Fredoka One** (a single-weight rounded display face) and **Quicksand** (a humanist sans available at 400/500/600/700). The pairing is the entire typographic identity.

Fredoka One is a chunky single-weight display face — it has no italic, no lighter variants, no condensed cuts. The display weight reads as 400 by spec but visually behaves as a heavy weight because the letterforms are so rounded and full. Every headline, every title, every step number, every quote in the system runs in Fredoka One. There is no exception — using Quicksand for a heading or Fredoka One for a body paragraph breaks the system instantly.

Quicksand carries everything else: paragraphs, list items, role labels, captions, day-card body lists, legend text. Quicksand 500 is the body default; 600 is the "slightly stronger" variant used for emphasized body (welcome-list items, info-card descriptions, legend labels); 700 is used sparingly for quote-author attribution.

### Display, Body, and Marker Scale

| Token | Size | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display}` | clamp(3.2rem, 7vw, 6.5rem) | Fredoka One | 400 | Cover / opening hero headline |
| `{typography.headline}` | clamp(2.5rem, 5vw, 4.5rem) | Fredoka One | 400 | Primary slide headline |
| `{typography.title}` | clamp(1.8rem, 3.5vw, 3rem) | Fredoka One | 400 | Section title or framed-header title |
| `{typography.quote}` | clamp(1.3rem, 2.5vw, 2rem) | Fredoka One | 400 | Pull-quote body text |
| `{typography.subtitle}` | clamp(1.3rem, 2vw, 1.8rem) | Fredoka One | 400 | Sub-headline, in-card title |
| `{typography.label-display}` | clamp(1rem, 1.5vw, 1.3rem) | Fredoka One | 400 | Small Fredoka labels — day-card header, step title |
| `{typography.body-strong}` | clamp(0.95rem, 1.4vw, 1.15rem) | Quicksand | 600 | Emphasized body — welcome lists, info-card descriptions |
| `{typography.body}` | clamp(0.95rem, 1.3vw, 1.15rem) | Quicksand | 500 | Standard paragraph body |
| `{typography.meta}` | clamp(0.8rem, 1.1vw, 0.95rem) | Quicksand | 600 | Compact secondary text — day-card lists, step descriptions, legend rows |
| `{typography.badge}` | 0.85rem | Fredoka One | 400 | Text inside a pill badge |

### Defaults
- **Default size for a primary slide headline**: `{typography.headline}` (clamp 2.5–4.5rem).
- **Default size for a cover-level title moment**: `{typography.display}` (clamp 3.2–6.5rem).
- **Default size for a paragraph**: `{typography.body}` (clamp 0.95–1.15rem) in Quicksand 500.
- **Default size for emphasized list items**: `{typography.body-strong}` (Quicksand 600).
- **Default size for a description under a card title or a meta caption**: `{typography.meta}` in `{colors.text-muted}`.
- **Default size for a section / framed-header title**: `{typography.title}`.
- **Default family for any text larger than ~1.3rem**: Fredoka One. Default family for any text smaller than that: Quicksand. The size threshold roughly tracks the Fredoka / Quicksand role boundary.

When unsure, reach for `{typography.headline}` for the slide's main text moment, not `{typography.subtitle}` or `{typography.title}` (which are intra-content titles, not the primary slide voice).

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

- **Every Fredoka One headline placed on a saturated pastel surface carries a 3px charcoal text-shadow** (`{shadows.text-headline}` on bold surfaces like turquoise / mint, `{shadows.text-headline-soft}` on softer surfaces like pink / lavender). Headlines on cream sit flat without the shadow. The text-shadow is what makes the headline read as "outlined" in the same vocabulary as the rest of the system. Skipping it on a colored surface reads as broken.
- **Headlines placed on saturated surfaces switch text color to `{colors.white}`**; headlines on cream and on light pastel cards stay `{colors.text-dark}`. The pairing is white-on-saturated, dark-on-cream-or-card.
- **Every body list item uses an outlined colored disc as its bullet, not a glyph.** Default fill is `{colors.butter}`. The bullet is rendered as a `::before` 20px circle with 2px charcoal border, positioned 4px from the top of the first line.
- **Every quote uses the Fredoka quote-mark treatment**: an oversized `"` glyph in `{colors.soft-pink}` sits above the quoted text. Quotes never appear without a quote-mark anchor.
- **Quicksand body text never goes uppercase.** No display-style ALL-CAPS treatments on body. Fredoka has its own personality and doesn't need shouting.

### Typography Principles
The size ladder is the rhythm. Fredoka One does not get italicized, underlined, or rendered in alternate weights — Fredoka has one weight, full stop. Quicksand stays inside the 500 / 600 / 700 ladder; do not introduce 400 or 800 even if available. Letter-spacing on Fredoka stays at the spec default of `0.02em`. Letter-spacing on Quicksand stays at 0.

Mixing Quicksand into a headline (e.g. for an italicized phrase) is not supported in this system — the headline runs in one face. If a headline needs a different emotional register, the size and color do the work, not the font swap.

## Layout

### Canvas System
The system targets full viewport — every `.slide` is `100vw × 100vh` with `padding: 40px 60px` (default slide padding). Slides are stacked vertically inside a `.slides-container` that uses CSS scroll-snap (`scroll-snap-type: y mandatory`) to lock each slide to the viewport. Navigation is handled via fixed right-edge nav dots, a fixed bottom-center counter pill, keyboard arrows / spacebar, and intersection-observer-driven dot state.

### Padding and Gap Scale
| Token | Value | Use |
|---|---|---|
| `{spacing.pad-slide}` | 40px 60px | Outer slide padding |
| `{spacing.pad-card-lg}` | 48px 56px | Large featured cards (quote box, welcome body) |
| `{spacing.pad-card-md}` | 32px 40px | Standard cards (chart container, framed-header body) |
| `{spacing.pad-card-sm}` | 16px 24px | Compact cards (timeline card, day-card body) |
| `{spacing.gap-grid-lg}` | 28px | Major grid gaps (team grid, info-card grid) |
| `{spacing.gap-grid-md}` | 24px | Standard grid gaps |
| `{spacing.gap-grid-sm}` | 14px | Tight grid gaps (weekly day-card grid) |

### Border-Radius Scale
| Token | Value | Use |
|---|---|---|
| `{spacing.radius}` | 20px | Standard cards, day-cards, timeline cards |
| `{spacing.radius-lg}` | 28px | Featured cards (chart container, welcome frame, quote box) |
| `{spacing.radius-pill}` | 50px | Badges, slide counter |
| `{spacing.radius-round}` | 50% | All circles (avatars, bullet dots, marker dots, step circles, icons) |

Every visible region carries some radius. There are zero square corners in this system besides the SVG decorations themselves.

### Content Centering
Slide content is flex-centered both vertically and horizontally inside the slide padding. The main content container has a max-width that varies by composition (typically 700–1100px) and never spans the full slide width — there is always margin between content and slide edge for the decorations to occupy.

## Depth and Elevation

### Hard Offset Shadow (Only Technique)
Every elevated element uses one of two shadow values:
- **`{shadows.default}`** = `6px 6px 0 {colors.text-dark}` — standard offset for cards, frames, chart containers, badges, the slide counter.
- **`{shadows.small}`** = `4px 4px 0 {colors.text-dark}` — lighter offset for smaller elevated elements (day-cards, timeline-cards, info-cards, step circles, avatars).

The shadow is **solid charcoal, zero blur, fixed bottom-right offset**. There is no rgba shadow, no blur, no soft elevation. An element either casts a hard offset shadow in `{colors.text-dark}` or it casts no shadow.

### Text Shadow for Display Type
A separate text-shadow treatment lives only on display headlines placed over saturated pastel surfaces:
- **`{shadows.text-headline}`** = `3px 3px 0 {colors.text-dark}` for bold pastel surfaces (turquoise, butter, peach).
- **`{shadows.text-headline-soft}`** = `3px 3px 0 rgba(0,0,0,0.2)` for softer pastel surfaces (soft-pink, mint) where the full charcoal would feel too heavy.

Headlines on cream get no text-shadow.

### Decorative Z-Index Layer
The atmospheric SVG decorations live on `z-index: 1` with `pointer-events: none`. Content sits on `z-index: 2`. This means decorations may visually overlap content rectangles, but never block interaction. Decorations frequently crop past the slide edge with negative offsets like `top:-30px / left:-30px`, which gives the layout a "stickers reaching off the page" feel.

## Shapes and Treatment

### Border Weight and Style
- **3px solid `{colors.text-dark}`** — the universal structural border. Cards, framed headers, badges, marker circles, step circles, avatars, chart containers, the slide counter.
- **2px solid `{colors.text-dark}`** — the lighter border used only on small elements at the bullet / nav-dot / legend-swatch / day-header divider scale.
- **~2.1px solid `#232323` or `#000`** — the SVG stroke weight used inside the daisy / star / cloud / sun decorations. This matches the perceived weight of the 3px structural border at the SVG's natural scale.

Borders are never colored. Borders are never dashed. The only line style in the system is solid charcoal.

### Decorative Element Types

**Daisy** — A six-petal white-petal / yellow-center daisy in two paired stem positions. The system's signature ornament. Place at corners (typically `top-left`, `top-right`, `bottom-left`, `bottom-right`), often cropped past the edge at `top:-30px` or `right:-20px`. Two daisies plus 2–3 stars is the most common decoration cluster.

**Star** — A puffy five-pointed sticker star in a solid pastel fill (pink, yellow, mint, lavender, white) with charcoal outline. Used as scattered accents between the larger daisy / sun / cloud ornaments. Vary fill color across instances on the same slide; do not use all-white or all-yellow stars.

**Sun** — A smiling round sun in butter yellow with rays. Used as a single feature ornament, typically at top-left or bottom-right.

**Cloud** — A puffy white-and-blue cloud with optional smaller cloud variant. Used in sequences (two clouds at opposing corners) or as a single ornament on slides that want a sky atmosphere.

**Rainbow** — An arched four-band rainbow (coral / yellow / mint / sky) with the standard charcoal outline. Used as a single feature ornament, typically at top-right or bottom-right.

**Framed Header** (`{components.framed-header}`) — A two-part stacked card: a colored header strip (any pastel) sits flush above a white body. The pair shares one rounded outer corner radius and one continuous 3px border, and the whole unit casts a single offset shadow. Used as a featured info container.

**Badge Pill** (`{components.badge-pill}`) — A short rounded-pill chip with 3px border and butter (default) fill. Used as a section tag or small label. Pill text is Fredoka One at 0.85rem.

**Marker Circle Set** — Three sizes (`{components.bullet-dot}` 20px, `{components.circle-dot}` 48px, `{components.circle-icon}` 44px, `{components.step-circle-lg}` 90px). All are outlined circles in a pastel fill, all carry charcoal border. Numerals or single letters inside larger marker circles are always Fredoka One in white text (except on butter-yellow, where text returns to dark).

**Avatar Circle** — A 100px outlined white circle holding a small character SVG portrait or initial. Carries `{shadows.small}`.

**Quote Mark** — An oversized `"` glyph in Fredoka One at ~4rem in `{colors.soft-pink}`, placed above the quote body inside a quote card.

**Process Arrow** — A simple `→` glyph in Fredoka One at ~2rem in `{colors.text-dark}`, sat between process steps.

**Legend Swatch** — A 18px square with 4px rounded corners and a 2px border. Holds a fill color matched to a corresponding data series.

## Do's and Don'ts

### Do
- Pair Fredoka One with Quicksand strictly by role — Fredoka for every headline and display moment, Quicksand for every paragraph and meta line. The two-face contrast is the system's voice.
- Set the default canvas to `{colors.cream}`. Reach for a saturated pastel surface (turquoise, soft-pink, mint, etc.) when the slide wants a tonal mood, but cream is the safe default for content-heavy moments.
- Apply a 3px solid charcoal outline plus a `{shadows.default}` or `{shadows.small}` hard offset shadow to every elevated container. The outline + offset shadow combo is the system's signature elevation.
- Apply the `{shadows.text-headline}` text-shadow to every Fredoka One headline placed over a saturated pastel surface. Skip it only on cream.
- Cluster 3–7 hand-drawn SVG decorations (daisies, stars, suns, clouds, rainbows) around every slide's edges, often cropping past the boundary. Empty corners look broken in this system.
- Use outlined colored discs as list bullets — never bare hyphens or asterisks. The `{components.bullet-dot}` with `{colors.butter}` fill is the default.
- Reserve `{colors.coral}` for small high-attention markers (step numbers, timeline dots, day-headers). Coral as a full slide surface breaks the warmth-balance and reads aggressive.
- Center the main content container with a max-width well inside the slide padding. The decorations need room at the edges; full-bleed content blocks the ornament layer.
- Rotate marker / dot colors through the pastel set (coral → mint → sky → lavender → butter) when a sequence needs distinct steps. Do not use a single color for all steps.

### Don't
- Don't use any font other than Fredoka One and Quicksand. The system loads only those two faces from Google Fonts. Adding a third face breaks the storybook voice.
- Don't put Quicksand into a headline or Fredoka One into a paragraph. The role / face mapping is strict.
- Don't use square corners. Every card, every badge, every marker has some radius — the smallest radius in the system is 4px (legend swatch), and most are 20px or larger.
- Don't use blurred or rgba shadows. The system uses solid charcoal offsets only. `0 4px 12px rgba(0,0,0,0.1)` does not exist here.
- Don't use colored borders. All borders are charcoal `{colors.text-dark}`.
- Don't use coral as a full slide surface. Coral is the system's high-attention spot color; it loses power if it covers a region.
- Don't render Fredoka One in italic, underline, or stretched weights. Fredoka has one weight — that's the design.
- Don't omit the text-shadow on Fredoka headlines that sit on a saturated pastel surface. The shadow is what unifies headline weight with the outlined-shape vocabulary.
- Don't leave a slide's corners empty of decorations. The ornament layer is part of the composition, not optional dressing.
- Don't pile two cards on top of each other without separation. The system reads as one main content region per slide, surrounded by ornament — not as a stack of competing panels.

## Responsive Behavior

The system targets a viewport-fluid layout (everything sized in `clamp()` or `vw`), but is tuned for desktop / projector at roughly 1280–1920 width. Two responsive breakpoints adapt the grids:

- **`@media (max-width: 768px)`**: Slide padding tightens to `24px 20px`. Multi-column grids collapse: the 5-column weekly grid drops to 3, the 4-column team grid drops to 2, the 2-column info-card grid drops to 1, the horizontal process flow stacks vertically with rotated arrows, and the horizontal donut layout stacks. The right-edge nav dots hide. Decoration opacity drops to 0.6 so they don't overwhelm the cramped layout.
- **`@media (max-width: 480px)`**: The 3-column weekly grid drops further to 2. Decoration opacity drops to 0.4.

### Presenter Behavior
- Scroll-snap-y mandatory locks each slide to the viewport on vertical scroll.
- Keyboard: ArrowDown / ArrowRight / Space / PageDown advance; ArrowUp / ArrowLeft / PageUp reverse; Home jumps to first; End jumps to last.
- Right-edge nav dots show current slide and accept click-to-jump.
- A bottom-center counter pill displays `N / total` and updates via IntersectionObserver.

### Print / Export
There is no `@media print` rule defined. Print export will inherit the scroll-container layout, which may not paginate cleanly. Treat this as a screen-first system; a separate print stylesheet would be needed for PDF export.

## CJK & International Content

### Recommended Chinese Pairing

| Role | Latin font | Recommended Chinese pairing | Source |
|---|---|---|---|
| Display / Headline (Fredoka One 400) | Fredoka One | 站酷小薇体 ZCOOL XiaoWei | Google Fonts |
| Body (Quicksand 500–600) | Quicksand | 悠哉字体 Yozai | cn-fontsource CDN |

### Mixed-Content Strategy

Use **Strategy A — single-font-stack with fallback**: declare ZCOOL XiaoWei *after* Fredoka One and Yozai *after* Quicksand in the same `font-family` stack so Latin glyphs render in the Latin face 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=Fredoka+One&family=Quicksand:wght@400..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: "Fredoka One", "ZCOOL XiaoWei", cursive;
  --font-body: "Quicksand", "Yozai", sans-serif;
}
```

### Universal CJK Adjustments

- **Line-height**: bump CJK body line-height to ~1.75 (from 1.6) — Hanzi need more vertical breathing than Latin lowercase.
- **Letter-spacing**: zero out `letter-spacing` on Hanzi runs (the 0.02em Fredoka tracking jams Hanzi strokes together). Keep Latin tracking only on Latin spans.
- **Text-transform**: drop `text-transform: uppercase` on any badge/label 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's rounded soft display register is the closest Hanzi analogue to Fredoka One's chubby storybook voice — it carries the same "friendly children's-book" mood at headline scale without becoming saccharine. Yozai's open counters and modest stroke contrast match Quicksand's humanist warmth, so body paragraphs and meta lines feel continuous with the pastel-garden aesthetic. The 3px charcoal text-shadow on headlines that sit on saturated pastel surfaces works identically on ZCOOL XiaoWei — apply `{shadows.text-headline}` to Chinese headlines on turquoise / butter / peach surfaces, and `{shadows.text-headline-soft}` on soft-pink / mint, exactly as the Latin rule prescribes. The colored bullet-dots, hand-drawn SVG decorations (daisies, stars, suns, clouds, rainbows), framed-header cap-and-body pattern, and pastel marker rotation are all content-agnostic. The single-weight constraint of Fredoka One maps cleanly to ZCOOL XiaoWei's single-weight constraint — neither face supports italic, underline, or weight axis variation, which preserves the system's "one weight, one face per role" discipline.

### 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 and a similar friendly humanist register. ZCOOL XiaoWei reads slightly more literary-formal than Fredoka One's chubby chunky personality — Chinese decks built with Daisy Days will feel ~20% more "calm pastel" and ~20% less "sticker-sheet kawaii" than the Latin original. The hand-drawn SVG ornaments (daisy, star, sun, cloud, rainbow) carry the storybook mood that the typography slightly loses, so on Chinese decks consider clustering 5–7 ornaments per slide (the upper end of the 3–7 range) to recover the playful weight.

## Iteration Guide

1. Any new container is rounded (20px / 28px / pill / circle), bordered in 3px charcoal, and shadowed with `{shadows.default}` or `{shadows.small}`. Never ship a flat rectangle with square corners.
2. Any new headline is Fredoka One. If it sits on a saturated pastel surface, it gets a 3px charcoal text-shadow and switches color to `{colors.white}`. If it sits on cream or on a white card, it stays `{colors.text-dark}` and skips the shadow.
3. Any new paragraph is Quicksand 500 by default; Quicksand 600 when the paragraph needs emphasis.
4. Any new bullet is an outlined colored disc (`{components.bullet-dot}`), not a glyph. The default fill is butter, but circle bullets can rotate through the pastel set.
5. Any new sequence of markers (steps, timeline nodes, day labels) rotates through the pastel set (`coral → mint → sky → lavender → butter`) rather than reusing one color.
6. Any new slide needs 3–7 SVG decorations clustered at corners and edges. Draw from the established ornament types (daisy, star, sun, cloud, rainbow) — do not introduce a new ornament style (e.g. line-art arrows, photo cutouts).
7. Any new accent surface picks one of the eight pastels. Do not introduce a ninth color.
8. Coral stays a small-marker color only. Do not make a coral surface, a coral card, or a coral headline.
9. Any list bullet sits 4px from the top of the first text line, vertically aligned with x-height, not the line baseline.
10. When a new component needs a "two-part frame" feel, reach for the `{components.framed-header}` pattern (colored cap + white body) rather than nesting two separate cards.

## Known Gaps

- The two Google Fonts (Fredoka One, Quicksand) are loaded via `<link>` from Google Fonts CDN. Offline rendering will fall back to `cursive` and `sans-serif` system defaults, which collapses the entire typographic identity. Self-hosting the fonts is required for offline / print reliability.
- The hand-drawn SVG decorations (daisy, star, sun, cloud, rainbow) are inline SVG with their stroke colors hardcoded to `#232323` or `#2D2D2D`. There is no programmatic way to recolor them to match a new palette — extending the decoration library requires authoring new SVG sources.
- The system uses scroll-snap navigation (not absolute-positioned slides). It does not have a dedicated print stylesheet; PDF export of the deck will not paginate one-slide-per-page out of the box.
- The nav-dots / slide-counter / keyboard / observer JavaScript is embedded inline and hardcodes the slide count via the `<div class="nav-dot">` array. Adding a new slide requires manually adding a corresponding nav-dot div.
- The pastel surfaces (turquoise, mint, peach) have varying perceived brightness; the text-shadow treatment for headlines must be tuned per-surface (the system already does this — full charcoal for bold surfaces, 20%-opacity charcoal for soft surfaces). New surface colors will require a similar tuning decision.
- The `--text-muted` color (#6B6B6B) is used for subtitles and captions but has limited contrast against pastel surfaces. Reserve muted text for use on cream or on white cards, not on pastel surfaces directly.
- The decoration SVGs include a placeholder comment string `SVG created with Arrow, by QuiverAI (https://quiver.ai)` — this is the original authoring tool credit and can be stripped without affecting rendering.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.badge` — 1·2·3·4·5·6장 — 예: `<span class="badge">`
- `.center` — 1장 — 예: `<div class="center">`
- `.display` — 1장 — 예: `<h1 class="display">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.meta` — 1장 — 예: `<span class="meta">`
- `.orn` — 1·2·3·4·5·6장 — 예: `<div class="orn" style="left:-70px;top:-70px;width:320px">`
- `.pk` — 1·5·6장 — 예: `<span class="badge pk">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide surf-cream">`
- `.surf-cream` — 1장 — 예: `<section class="slide surf-cream">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.b2` — 2장 — 예: `<div class="fbody b2">`
- `.btn` — 2·5·6장 — 예: `<button class="badge btn go" data-act="step">`
- `.btns` — 2장 — 예: `<div class="btns">`
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03…`
- `.circle` — 2·6장 — 예: `<span class="circle" style="background:#F8635F">`
- `.dot` — 2장 — 예: `<i class="dot">`
- `.fbody` — 2·5·6장 — 예: `<div class="fbody b2">`
- `.fhead` — 2·4·5·6장 — 예: `<div class="fhead mint">`
- `.figc` — 2장 — 예: `<div class="figc">`
- `.frame` — 2·5·6장 — 예: `<div class="frame">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="on-color hd">`
- `.mint` — 2장 — 예: `<div class="fhead mint">`
- `.note` — 2장 — 예: `<p class="note">`
- `.nr` — 2·4·5장 — 예: `<p class="nr">`
- `.on-color` — 2·3·4·5·6장 — 예: `<h2 class="on-color hd">`
- `.step` — 2장 — 예: `<div class="step" data-s="1">`
- `.steps` — 2장 — 예: `<div class="steps">`
- `.surf-peach` — 2장 — 예: `<section class="slide surf-peach" data-steps="4">`
- `.tag` — 2·5·6장 — 예: `<span class="tag">`
- `.wh` — 2장 — 예: `<button class="badge btn wh" data-act="reset">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.ax` — 3장 — 예: `<span class="ax">`
- `.bars` — 3장 — 예: `<div class="bars">`
- `.bv` — 3장 — 예: `<b class="bv">`
- `.card` — 3·4장 — 예: `<div class="card chartc">`
- `.chartc` — 3장 — 예: `<div class="card chartc">`
- `.ci` — 3장 — 예: `<span class="ci" style="background:#F8635F">`
- `.col` — 3장 — 예: `<div class="col">`
- `.lg` — 3장 — 예: `<div class="lg">`
- `.mx` — 3장 — 예: `<i class="mx" style="height:162px">`
- `.nrow` — 3장 — 예: `<div class="nrow tm">`
- `.si` — 3장 — 예: `<div class="si">`
- `.sm` — 3·4·5·6장 — 예: `<span class="badge sm">`
- `.src` — 3장 — 예: `<p class="src">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.surf-turq` — 3장 — 예: `<section class="slide surf-turq">`
- `.sv` — 3장 — 예: `<b class="sv">`
- `.sw` — 3장 — 예: `<i class="sw" style="background:var(--sky)">`
- `.tm` — 3장 — 예: `<div class="nrow tm">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.butter` — 4·5·6장 — 예: `<div class="fhead butter">`
- `.cmp` — 4장 — 예: `<div class="cmp">`
- `.fb2` — 4장 — 예: `<div class="fb2">`
- `.fcard` — 4장 — 예: `<div class="fcard">`
- `.li` — 4·5·6장 — 예: `<p class="li">`
- `.lst` — 4장 — 예: `<div class="card lst">`
- `.qm` — 4장 — 예: `<b class="qm">`
- `.qt` — 4장 — 예: `<div class="card qt">`
- `.sky` — 4장 — 예: `<div class="fhead sky">`
- `.soft` — 4·6장 — 예: `<h2 class="on-color hd soft">`
- `.surf-lav` — 4장 — 예: `<section class="slide surf-lav">`
- `.tbl` — 4장 — 예: `<div class="card tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.bl` — 5장 — 예: `<p class="li bl">`
- `.blank` — 5장 — 예: `<button class="badge blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="blk">`
- `.bt` — 5장 — 예: `<h3 class="bt">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.od` — 5장 — 예: `<span class="od" style="background:#A8E6CF">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.quiz` — 5장 — 예: `<div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해…`
- `.rt` — 5장 — 예: `<button class="badge btn go rt" data-act="retry">`
- `.surf-sky` — 5장 — 예: `<section class="slide surf-sky">`
- `.wl` — 5장 — 예: `<h3 class="bt wl">`
- `.words` — 5장 — 예: `<div class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.b6` — 6장 — 예: `<div class="fbody b6">`
- `.d6` — 6장 — 예: `<div class="d6">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.g6` — 6장 — 예: `<div class="g6">`
- `.on6` — 6장 — 예: `<div class="on6" id="dd-on">`
- `.orn6` — 6장 — 예: `<div class="orn6" id="dd-orn">`
- `.seq6` — 6장 — 예: `<div class="seq6" id="dd-seq">`
- `.sig6` — 6장 — 예: `<div class="sig6">`
- `.surf-pink6` — 6장 — 예: `<section class="slide surf-pink6">`
- `.sw6` — 6장 — 예: `<span class="sw6">`

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

---

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

```html
<!DOCTYPE html>
<html lang="ko" data-template="daisy-days">
<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=Fredoka+One&family=Quicksand:wght@500;600;700&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/daisy-days.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide surf-cream">
  <div class="orn" style="left:-70px;top:-70px;width:320px"><svg viewBox="-60 -60 120 120"><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(36)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(72)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(108)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(144)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(216)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(252)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(288)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(324)"/><circle r="32" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><circle cx="-11" cy="-5" r="3.5" fill="#2D2D2D"/><circle cx="11" cy="-5" r="3.5" fill="#2D2D2D"/><path d="M-12 8 Q0 19 12 8" fill="none" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/><circle cx="-19" cy="6" r="4" fill="#F7C8D4"/><circle cx="19" cy="6" r="4" fill="#F7C8D4"/></svg></div><div class="orn" style="left:1520px;top:50px;width:360px"><svg viewBox="-104 -104 208 108"><path d="M-100 0A100 100 0 0 1 100 0L82 0A82 82 0 0 0 -82 0Z" fill="#F8635F" stroke="#2D2D2D" stroke-width="3"/><path d="M-82 0A82 82 0 0 1 82 0L64 0A64 64 0 0 0 -64 0Z" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><path d="M-64 0A64 64 0 0 1 64 0L46 0A46 46 0 0 0 -46 0Z" fill="#A8E6CF" stroke="#2D2D2D" stroke-width="3"/><path d="M-46 0A46 46 0 0 1 46 0L28 0A28 28 0 0 0 -28 0Z" fill="#A8D8F0" stroke="#2D2D2D" stroke-width="3"/></svg></div>
  <div class="orn" style="left:40px;top:460px;width:220px"><svg viewBox="0 0 160 90"><path d="M30 78a24 24 0 0 1 2-47 34 34 0 0 1 64-10 28 28 0 0 1 36 28 20 20 0 0 1-6 29z" fill="#fff" stroke="#2D2D2D" stroke-width="3.5" stroke-linejoin="round"/><path d="M40 70h80" stroke="#A8D8F0" stroke-width="6" stroke-linecap="round"/></svg></div><div class="orn" style="left:1640px;top:520px;width:190px"><svg viewBox="0 0 160 90"><path d="M30 78a24 24 0 0 1 2-47 34 34 0 0 1 64-10 28 28 0 0 1 36 28 20 20 0 0 1-6 29z" fill="#fff" stroke="#2D2D2D" stroke-width="3.5" stroke-linejoin="round"/><path d="M40 70h80" stroke="#A8D8F0" stroke-width="6" stroke-linecap="round"/></svg></div>
  <div class="orn" style="left:-60px;top:830px;width:290px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:1680px;top:850px;width:220px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div>
  <div class="orn" style="left:400px;top:110px;width:86px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#F7C8D4" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:1420px;top:360px;width:66px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#D4A5E8" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:300px;top:790px;width:76px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#FDE68A" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div>
  <div class="center">
    <span class="badge">초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</span>
    <p class="unit">계절의 변화<span>Sun, Shadow & Temperature</span></p>
    <span class="badge pk">학습 목표</span>
    <h1 class="display">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
    <span class="meta">00초등학교 · 2026</span>
  </div>
</section>
<section class="slide surf-peach" data-steps="4">
  <div class="orn" style="left:1730px;top:-70px;width:240px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:1640px;top:40px;width:90px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#FDE68A" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:-50px;top:930px;width:260px"><svg viewBox="0 0 160 90"><path d="M30 78a24 24 0 0 1 2-47 34 34 0 0 1 64-10 28 28 0 0 1 36 28 20 20 0 0 1-6 29z" fill="#fff" stroke="#2D2D2D" stroke-width="3.5" stroke-linejoin="round"/><path d="M40 70h80" stroke="#A8D8F0" stroke-width="6" stroke-linecap="round"/></svg></div><div class="orn" style="left:40px;top:40px;width:96px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#A8E6CF" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div>
  <h2 class="on-color hd">태양 고도 측정기 만들기</h2>
  <div class="frame">
    <div class="fhead mint"><span>태양 고도 = 태양이 지표면과 이루는 각</span><span class="tag">측정 준비</span></div>
    <div class="fbody b2">
      <div class="figc"><svg class="gauge" viewBox="0 0 1000 660" role="img" aria-label="태양 고도 측정기: 태양 빛, 수수깡, 실, 태양 고도, 그림자 길이, 자, 각도기">
  <line class="g-ground" x1="20" x2="980" y1="580" y2="580"/>
  <rect class="g-board" x="80" y="540" width="860" height="40"/>
  <g class="g-part" data-s="1"><rect class="g-ruler" x="110" y="524" width="800" height="16"/><line class="g-tick" x1="120" x2="120" y1="524" y2="536"/><line class="g-tick" x1="140" x2="140" y1="524" y2="530"/><line class="g-tick" x1="160" x2="160" y1="524" y2="530"/><line class="g-tick" x1="180" x2="180" y1="524" y2="530"/><line class="g-tick" x1="200" x2="200" y1="524" y2="530"/><line class="g-tick" x1="220" x2="220" y1="524" y2="536"/><line class="g-tick" x1="240" x2="240" y1="524" y2="530"/><line class="g-tick" x1="260" x2="260" y1="524" y2="530"/><line class="g-tick" x1="280" x2="280" y1="524" y2="530"/><line class="g-tick" x1="300" x2="300" y1="524" y2="530"/><line class="g-tick" x1="320" x2="320" y1="524" y2="536"/><line class="g-tick" x1="340" x2="340" y1="524" y2="530"/><line class="g-tick" x1="360" x2="360" y1="524" y2="530"/><line class="g-tick" x1="380" x2="380" y1="524" y2="530"/><line class="g-tick" x1="400" x2="400" y1="524" y2="530"/><line class="g-tick" x1="420" x2="420" y1="524" y2="536"/><line class="g-tick" x1="440" x2="440" y1="524" y2="530"/><line class="g-tick" x1="460" x2="460" y1="524" y2="530"/><line class="g-tick" x1="480" x2="480" y1="524" y2="530"/><line class="g-tick" x1="500" x2="500" y1="524" y2="530"/><line class="g-tick" x1="520" x2="520" y1="524" y2="536"/><line class="g-tick" x1="540" x2="540" y1="524" y2="530"/><line class="g-tick" x1="560" x2="560" y1="524" y2="530"/><line class="g-tick" x1="580" x2="580" y1="524" y2="530"/><line class="g-tick" x1="600" x2="600" y1="524" y2="530"/><line class="g-tick" x1="620" x2="620" y1="524" y2="536"/><line class="g-tick" x1="640" x2="640" y1="524" y2="530"/><line class="g-tick" x1="660" x2="660" y1="524" y2="530"/><line class="g-tick" x1="680" x2="680" y1="524" y2="530"/><line class="g-tick" x1="700" x2="700" y1="524" y2="530"/><line class="g-tick" x1="720" x2="720" y1="524" y2="536"/><line class="g-tick" x1="740" x2="740" y1="524" y2="530"/><line class="g-tick" x1="760" x2="760" y1="524" y2="530"/><line class="g-tick" x1="780" x2="780" y1="524" y2="530"/><line class="g-tick" x1="800" x2="800" y1="524" y2="530"/><line class="g-tick" x1="820" x2="820" y1="524" y2="536"/><line class="g-tick" x1="840" x2="840" y1="524" y2="530"/><line class="g-tick" x1="860" x2="860" y1="524" y2="530"/><line class="g-tick" x1="880" x2="880" y1="524" y2="530"/><line class="g-tick" x1="900" x2="900" y1="524" y2="530"/><text class="g-lb" x="922" y="516" text-anchor="start">자</text></g>
  <g class="g-meas"><rect class="g-shadow" x="220" y="524" width="446" height="16"/>
    <path class="g-dim" d="M220 600v24M666 600v24M220 612H666"/><text class="g-lb" x="443" y="652" text-anchor="middle">그림자 길이</text></g>
  <g class="g-part" data-s="2"><rect class="g-stick" x="196" y="150" width="24" height="374"/><path class="g-mark" d="M220 504h20v20"/>
    <path class="g-lead" d="M182 330H196"/><text class="g-lb" x="174" y="342" text-anchor="end">수수깡</text></g>
  <g class="g-part" data-s="4"><path class="g-prot" d="M546 524A120 120 0 0 1 786 524Z"/><path class="g-prot2" d="M588 524A78 78 0 0 1 744 524"/><line class="g-tick" x1="570" y1="524" x2="546" y2="524"/><line class="g-tick" x1="561.6" y1="505.6" x2="547.8" y2="503.2"/><line class="g-tick" x1="566.4" y1="487.7" x2="553.2" y2="483"/><line class="g-tick" x1="582.9" y1="476" x2="562.1" y2="464"/><line class="g-tick" x1="584.8" y1="455.9" x2="574.1" y2="446.9"/><line class="g-tick" x1="597.9" y1="442.8" x2="588.9" y2="432.1"/><line class="g-tick" x1="618" y1="440.9" x2="606" y2="420.1"/><line class="g-tick" x1="629.7" y1="424.4" x2="625" y2="411.2"/><line class="g-tick" x1="647.6" y1="419.6" x2="645.2" y2="405.8"/><line class="g-tick" x1="666" y1="428" x2="666" y2="404"/><line class="g-tick" x1="684.4" y1="419.6" x2="686.8" y2="405.8"/><line class="g-tick" x1="702.3" y1="424.4" x2="707" y2="411.2"/><line class="g-tick" x1="714" y1="440.9" x2="726" y2="420.1"/><line class="g-tick" x1="734.1" y1="442.8" x2="743.1" y2="432.1"/><line class="g-tick" x1="747.2" y1="455.9" x2="757.9" y2="446.9"/><line class="g-tick" x1="749.1" y1="476" x2="769.9" y2="464"/><line class="g-tick" x1="765.6" y1="487.7" x2="778.8" y2="483"/><line class="g-tick" x1="770.4" y1="505.6" x2="784.2" y2="503.2"/><line class="g-tick" x1="762" y1="524" x2="786" y2="524"/><circle class="g-hole" cx="666" cy="524" r="5"/><text class="g-lb" x="800" y="456" text-anchor="start">각도기</text></g>
  <g class="g-part" data-s="3"><line class="g-string" x1="220" y1="150" x2="666" y2="524"/><text class="g-lb" x="478" y="344" text-anchor="start">실</text></g>
  <g class="g-meas"><path class="g-angle" d="M616 524A50 50 0 0 1 627.7 491.9"/><path class="g-lead" d="M542 498L615 506.9"/><text class="g-lb" x="536" y="508" text-anchor="end">태양 고도</text>
    <line class="g-ray" x1="74.5" y1="27.9" x2="187.8" y2="123"/><polygon class="g-rayh" points="209.3,141 179.5,133 196.2,113"/><text class="g-lb" x="150" y="60" text-anchor="start">태양 빛</text></g>
</svg><p class="note"><i class="dot"></i>막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
      <div class="steps">
        <div class="step" data-s="1"><span class="circle" style="background:#F8635F">1</span><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="step" data-s="2"><span class="circle" style="background:#A8E6CF">2</span><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="step" data-s="3"><span class="circle" style="background:#A8D8F0">3</span><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="step" data-s="4"><span class="circle" style="background:#D4A5E8">4</span><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div>
        <div class="btns"><button class="badge btn go" data-act="step">다음 단계 →</button><button class="badge btn wh" data-act="reset">처음부터</button></div>
        <p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03 실 묶기&quot;,&quot;04 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p>
      </div>
    </div>
  </div>
  <p class="nr">버튼 규칙 없음 → 배지 알약으로 표현</p>
</section>
<section class="slide surf-turq">
  <div class="orn" style="left:1700px;top:-60px;width:240px"><svg viewBox="-60 -60 120 120"><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(36)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(72)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(108)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(144)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(216)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(252)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(288)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(324)"/><circle r="32" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><circle cx="-11" cy="-5" r="3.5" fill="#2D2D2D"/><circle cx="11" cy="-5" r="3.5" fill="#2D2D2D"/><path d="M-12 8 Q0 19 12 8" fill="none" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/><circle cx="-19" cy="6" r="4" fill="#F7C8D4"/><circle cx="19" cy="6" r="4" fill="#F7C8D4"/></svg></div><div class="orn" style="left:60px;top:30px;width:90px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#F7C8D4" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:-70px;top:930px;width:220px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:1700px;top:940px;width:200px"><svg viewBox="0 0 160 90"><path d="M30 78a24 24 0 0 1 2-47 34 34 0 0 1 64-10 28 28 0 0 1 36 28 20 20 0 0 1-6 29z" fill="#fff" stroke="#2D2D2D" stroke-width="3.5" stroke-linejoin="round"/><path d="M40 70h80" stroke="#A8D8F0" stroke-width="6" stroke-linecap="round"/></svg></div>
  <h2 class="on-color hd">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="card chartc">
    <div class="stats"><div class="si"><span class="ci" style="background:#F8635F">1</span><div><b class="sv">12:30</b><p>남중 시각 · 태양 고도가 가장 높아요</p></div></div><div class="si"><span class="ci" style="background:#A8E6CF">2</span><div><b class="sv">정남</b><p>남중 방향 · 남중할 때 태양의 위치</p></div></div><div class="si"><span class="ci" style="background:#A8D8F0">3</span><div><b class="sv">14:30</b><p>최고 기온 · 기온이 가장 높아요</p></div></div><div class="si"><span class="ci" style="background:#D4A5E8">4</span><div><b class="sv">9:30</b><p>가장 긴 그림자 · 그림자가 가장 길어요</p></div></div></div>
    <div class="lg"><span><i class="sw" style="background:var(--sky)"></i>태양 고도(°)</span><span><i class="sw" style="background:var(--butter)"></i>가장 높아요</span><span class="badge sm">예시 값</span></div>
    <div class="bars"><span class="ax">측정 시각별 태양 고도, 그림자 길이, 기온</span><div class="col"><b class="bv">38°</b><i class="" style="height:108px"></i></div><div class="col"><b class="bv">48°</b><i class="" style="height:136px"></i></div><div class="col"><b class="bv">55°</b><i class="" style="height:156px"></i></div><div class="col"><b class="bv">57°</b><i class="mx" style="height:162px"></i></div><div class="col"><b class="bv">54°</b><i class="" style="height:153px"></i></div><div class="col"><b class="bv">47°</b><i class="" style="height:133px"></i></div><div class="col"><b class="bv">37°</b><i class="" style="height:105px"></i></div></div>
    <div class="nrow tm"><span class="ax">시각</span><span>9:30</span><span>10:30</span><span>11:30</span><span>12:30</span><span>13:30</span><span>14:30</span><span>15:30</span></div><div class="nrow"><span class="ax">그림자 길이(cm)</span><span>12.9</span><span>9.1</span><span>7</span><span>6.4</span><span>7.2</span><span>9.4</span><span>13.4</span></div><div class="nrow"><span class="ax">기온(℃)</span><span>22</span><span>23.8</span><span>25.2</span><span>26.3</span><span>27</span><span>27.4</span><span>26.9</span></div>
  </div>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
</section>
<section class="slide surf-lav">
  <div class="orn" style="left:1620px;top:-30px;width:300px"><svg viewBox="-104 -104 208 108"><path d="M-100 0A100 100 0 0 1 100 0L82 0A82 82 0 0 0 -82 0Z" fill="#F8635F" stroke="#2D2D2D" stroke-width="3"/><path d="M-82 0A82 82 0 0 1 82 0L64 0A64 64 0 0 0 -64 0Z" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><path d="M-64 0A64 64 0 0 1 64 0L46 0A46 46 0 0 0 -46 0Z" fill="#A8E6CF" stroke="#2D2D2D" stroke-width="3"/><path d="M-46 0A46 46 0 0 1 46 0L28 0A28 28 0 0 0 -28 0Z" fill="#A8D8F0" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:-60px;top:-60px;width:220px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:1800px;top:940px;width:90px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#FDE68A" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:40px;top:960px;width:80px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#A8E6CF" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div>
  <h2 class="on-color hd soft">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
  <div class="cmp"><div class="fcard"><div class="fhead butter"><span>태양 고도가 높을 때</span></div><div class="fb2"><p class="li">그림자 길이는 짧아져요</p><p class="li">기온은 높아져요</p></div></div><div class="fcard"><div class="fhead sky"><span>태양 고도가 낮을 때</span></div><div class="fb2"><p class="li">그림자 길이는 길어져요</p><p class="li">기온은 낮아져요</p></div></div></div>
  <div class="card tbl"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span>오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span>낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span>오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
  <div class="card lst"><span class="badge sm">남중</span><p class="li">태양이 정남쪽에 있을 때 '남중했다'고 해요</p><p class="li">이때의 태양 고도를 남중 고도라고 해요</p></div>
  <div class="card qt"><b class="qm">“</b><p>태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.</p><span>— 오늘의 정리</span></div>
  <p class="nr">표 규칙 없음 → 카드 안 2px 줄으로 표현</p>
</section>
<section class="slide surf-sky">
  <div class="orn" style="left:-60px;top:30px;width:280px"><svg viewBox="0 0 160 90"><path d="M30 78a24 24 0 0 1 2-47 34 34 0 0 1 64-10 28 28 0 0 1 36 28 20 20 0 0 1-6 29z" fill="#fff" stroke="#2D2D2D" stroke-width="3.5" stroke-linejoin="round"/><path d="M40 70h80" stroke="#A8D8F0" stroke-width="6" stroke-linecap="round"/></svg></div><div class="orn" style="left:1660px;top:-20px;width:300px"><svg viewBox="-104 -104 208 108"><path d="M-100 0A100 100 0 0 1 100 0L82 0A82 82 0 0 0 -82 0Z" fill="#F8635F" stroke="#2D2D2D" stroke-width="3"/><path d="M-82 0A82 82 0 0 1 82 0L64 0A64 64 0 0 0 -64 0Z" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><path d="M-64 0A64 64 0 0 1 64 0L46 0A46 46 0 0 0 -46 0Z" fill="#A8E6CF" stroke="#2D2D2D" stroke-width="3"/><path d="M-46 0A46 46 0 0 1 46 0L28 0A28 28 0 0 0 -28 0Z" fill="#A8D8F0" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:-70px;top:920px;width:230px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div><div class="orn" style="left:1800px;top:950px;width:100px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#F7C8D4" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:1850px;top:440px;width:76px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#FDE68A" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div>
  <h2 class="on-color hd">배운 내용을 확인해 볼까요?</h2>
  <div class="frame f5">
    <div class="fhead butter"><span>확인하기</span><span class="tag pk">퀴즈</span></div>
    <div class="fbody">
      <div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
        <h3>하루 중 그림자 길이가 가장 짧을 때는?</h3>
        <div class="opts"><button class="opt" data-opt="0"><span class="od" style="background:#A8E6CF">가</span>오전 9시 30분</button><button class="opt" data-opt="1"><span class="od" style="background:#A8D8F0">나</span>낮 12시 30분 무렵</button><button class="opt" data-opt="2"><span class="od" style="background:#D4A5E8">다</span>오후 3시 30분</button></div>
        <p class="fb" data-fb></p>
        <button class="badge btn go rt" data-act="retry">다시 풀기 ↺</button>
      </div>
      <div class="blk">
        <h3 class="bt">빈칸을 눌러 확인해요</h3>
        <p class="li bl"><button class="badge blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p><p class="li bl"><button class="badge blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p><p class="li bl"><button class="badge blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p>
        <h3 class="bt wl">오늘의 낱말</h3>
        <div class="words"><span class="badge sm" style="background:#A8E6CF">태양 고도</span><span class="badge sm" style="background:#A8D8F0">남중 고도</span><span class="badge sm" style="background:#D4A5E8">그림자 길이</span><span class="badge sm" style="background:#FDE68A">기온</span></div>
      </div>
    </div>
  </div>
  <p class="nr">빈칸 규칙 없음 → 배지 알약으로 표현</p>
</section>
<section class="slide surf-pink6">
  <div class="orn" style="left:1720px;top:-60px;width:220px"><svg viewBox="-60 -60 120 120"><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(36)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(72)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(108)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(144)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(216)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(252)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(288)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(324)"/><circle r="32" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><circle cx="-11" cy="-5" r="3.5" fill="#2D2D2D"/><circle cx="11" cy="-5" r="3.5" fill="#2D2D2D"/><path d="M-12 8 Q0 19 12 8" fill="none" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/><circle cx="-19" cy="6" r="4" fill="#F7C8D4"/><circle cx="19" cy="6" r="4" fill="#F7C8D4"/></svg></div><div class="orn" style="left:60px;top:40px;width:90px"><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#A8D8F0" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></div><div class="orn" style="left:-60px;top:900px;width:220px"><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></div>
  <h2 class="on-color soft hd">이 디자인 사용 설명서</h2>
  <div class="frame">
    <div class="fhead butter"><span>디자인 안내</span><span class="tag pk">대표 장치 — 눌러 보세요</span></div>
    <div class="fbody b6">
      <div class="g6">
        <p class="li"><b>한눈에</b> — 동화책처럼 <b>둥근 글자 · 차콜 테두리 · 흐림 없는 그림자</b>, 장마다 다른 파스텔 면에 손그림 데이지·별·해를 가장자리에 걸쳐 둬요.</p>
        <p class="li"><b>색</b> — <span class="sw6"><span><i style="background:#F5F0E6"></i>크림</span><span><i style="background:#7ECDC0"></i>청록</span><span><i style="background:#F7C8D4"></i>분홍</span><span><i style="background:#FDE68A"></i>버터</span><span><i style="background:#A8E6CF"></i>민트</span><span><i style="background:#F8635F"></i>코랄(작은 표시만)</span></span></p>
        <p class="li"><b>글꼴</b> — 제목 Fredoka One → Cafe24 Ssurround v2.0 · 본문 Quicksand → BM JUA_TTF</p>
        <p class="li"><b>이렇게 쓰면 좋아요</b> — 저학년·놀이 활동, 규칙 안내, 칭찬 장에 잘 어울려요. 장식은 장마다 3~7개, 내용 뒤로.</p>
      </div>
      <div class="sig6">
        <div class="d6"><div class="dh"><h3>색 면 위 제목</h3><button class="badge btn sm" data-demo="#dd-on" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>크림 위 제목은 평평한 차콜, 색 면 위 제목은 흰 글자 + 3px 차콜 그림자.</p><div class="on6" id="dd-on"><b>오늘의 탐구</b></div></div>
        <div class="d6"><div class="dh"><h3>손그림 장식</h3><button class="badge btn sm" data-demo="#dd-orn" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>꽃잎 6장 데이지 · 별 · 해 · 구름 · 무지개 — 가장자리에서 잘리게 놓아요.</p><div class="orn6" id="dd-orn"><i><svg viewBox="-50 -50 100 100"><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(60)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(120)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(240)"/><ellipse cx="0" cy="-25" rx="13" ry="22" fill="#fff" stroke="#2D2D2D" stroke-width="3" transform="rotate(300)"/><circle r="14" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/></svg></i><i><svg viewBox="-50 -50 100 100"><polygon points="0.0,-44.0 12.3,-17.0 41.8,-13.6 20.0,6.5 25.9,35.6 0.0,21.0 -25.9,35.6 -20.0,6.5 -41.8,-13.6 -12.3,-17.0" fill="#FDE68A" stroke="#2D2D2D" stroke-width="4" stroke-linejoin="round"/></svg></i><i><svg viewBox="-60 -60 120 120"><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(0)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(36)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(72)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(108)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(144)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(180)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(216)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(252)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(288)"/><rect x="-5" y="-56" width="10" height="18" rx="5" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3" transform="rotate(324)"/><circle r="32" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><circle cx="-11" cy="-5" r="3.5" fill="#2D2D2D"/><circle cx="11" cy="-5" r="3.5" fill="#2D2D2D"/><path d="M-12 8 Q0 19 12 8" fill="none" stroke="#2D2D2D" stroke-width="3" stroke-linecap="round"/><circle cx="-19" cy="6" r="4" fill="#F7C8D4"/><circle cx="19" cy="6" r="4" fill="#F7C8D4"/></svg></i><i><svg viewBox="0 0 160 90"><path d="M30 78a24 24 0 0 1 2-47 34 34 0 0 1 64-10 28 28 0 0 1 36 28 20 20 0 0 1-6 29z" fill="#fff" stroke="#2D2D2D" stroke-width="3.5" stroke-linejoin="round"/><path d="M40 70h80" stroke="#A8D8F0" stroke-width="6" stroke-linecap="round"/></svg></i><i><svg viewBox="-104 -104 208 108"><path d="M-100 0A100 100 0 0 1 100 0L82 0A82 82 0 0 0 -82 0Z" fill="#F8635F" stroke="#2D2D2D" stroke-width="3"/><path d="M-82 0A82 82 0 0 1 82 0L64 0A64 64 0 0 0 -64 0Z" fill="#FDE68A" stroke="#2D2D2D" stroke-width="3"/><path d="M-64 0A64 64 0 0 1 64 0L46 0A46 46 0 0 0 -46 0Z" fill="#A8E6CF" stroke="#2D2D2D" stroke-width="3"/><path d="M-46 0A46 46 0 0 1 46 0L28 0A28 28 0 0 0 -28 0Z" fill="#A8D8F0" stroke="#2D2D2D" stroke-width="3"/></svg></i></div></div>
        <div class="d6"><div class="dh"><h3>단계 색 순환</h3><button class="badge btn sm" data-demo="#dd-seq" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>단계 원 색은 코랄 → 민트 → 하늘 → 라벤더 → 버터 차례로.</p><div class="seq6" id="dd-seq"><span class="circle" style="--c:#F8635F">1</span><span class="circle" style="--c:#A8E6CF">2</span><span class="circle" style="--c:#A8D8F0">3</span><span class="circle" style="--c:#D4A5E8">4</span><span class="circle" style="--c:#FDE68A">5</span></div></div>
      </div>
    </div>
  </div>
</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="dk-count"></span></nav>
  </main>
</div>

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

---

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

/* --- 토큰: 명세 값을 1920×1080 무대에 맞게 키움(테두리 3→4px, 그림자 6→8px, 반경 20/28→28/40px) --- */
:root{--cream:#F5F0E6;--turq:#7ECDC0;--pink:#F7C8D4;--butter:#FDE68A;--mint:#A8E6CF;--lav:#D4A5E8;--peach:#FFCBA4;--sky:#A8D8F0;--coral:#F8635F;
  --k:#2D2D2D;--muted:#6B6B6B;--bd:4px solid #2D2D2D;--sh:8px 8px 0 #2D2D2D;--sh-s:5px 5px 0 #2D2D2D}
.slide{color:var(--k);font-family:'Quicksand',var(--kb),sans-serif;font-weight:500}
.surf-cream{background:var(--cream)}.surf-turq{background:var(--turq)}.surf-sky{background:var(--sky)}.surf-peach{background:var(--peach)}.surf-lav{background:var(--lav)}
.display,h2,h3,.badge,.circle,.ci,.od,.unit,.dk-count,.qm,.sv,.bv,.fhead{font-family:'Fredoka One',var(--kt),sans-serif;font-weight:400;letter-spacing:0}
.on-color{color:#fff;text-shadow:4px 4px 0 var(--k)}
.on-color.soft{text-shadow:4px 4px 0 rgba(0,0,0,.2)}
.orn{position:absolute;z-index:1;pointer-events:none}
.orn svg{display:block;width:100%;height:auto;overflow:visible}
.slide>:not(.orn){position:absolute;z-index:2}
.card{background:#fff;border:var(--bd);border-radius:28px;box-shadow:var(--sh)}
.badge{display:inline-block;background:var(--butter);border:var(--bd);border-radius:50px;padding:8px 30px;font-size:32px;box-shadow:var(--sh-s);color:var(--k)}
.badge.pk{background:var(--pink)}.badge.sm{font-size:26px;padding:4px 20px;box-shadow:none;border-width:3px}
.btn.wh{background:#fff}
.btn:disabled{opacity:.4}
.li{position:relative;padding-left:40px;font-weight:600;font-size:29px;line-height:1.55}
.li::before{content:'';position:absolute;left:0;top:8px;width:24px;height:24px;border-radius:50%;background:var(--butter);border:3px solid var(--k)}
.hd{left:0;right:0;top:56px;text-align:center;font-size:76px;line-height:1.2}
.nr{left:110px;bottom:24px;font-size:18px;font-weight:600}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:var(--bd);padding:14px 36px;font-size:34px}
.fhead.mint{background:var(--mint)}.fhead.butter{background:var(--butter)}.fhead.sky{background:var(--sky)}
.tag{background:#fff;border:3px solid var(--k);border-radius:50px;padding:2px 22px;font-size:26px;flex:none}
.tag.pk{background:var(--pink)}
.frame{left:110px;right:110px;top:180px;bottom:90px;border:var(--bd);border-radius:40px;box-shadow:var(--sh);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.fbody{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}

/* --- 1. 표지(크림 면, 크림 위 제목은 그림자 없이 차콜): 배지 + 단원 + 배지 '학습 목표' + 학습 목표 display + 장식 9개 --- */
.center{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.unit{margin-top:30px;display:flex;align-items:baseline;gap:26px;font-size:64px;line-height:1.2}
.unit span{font-size:44px;color:var(--turq);text-shadow:3px 3px 0 var(--k)}
.center .badge.pk{margin-top:44px}
.display{margin-top:24px;font-size:116px;line-height:1.28;white-space:nowrap}
.display .gk{font-style:normal}
.meta{margin-top:36px;font-weight:600;font-size:30px;color:var(--muted)}

/* --- 2. 흐름(복숭아 면, 흰 제목 + 차콜 그림자): 민트 색띠 머리 카드 — 측정기 그림 | 원 표시 4단계(코랄 → 민트 → 하늘 → 라벤더) + 알약 버튼 --- */
.b2{grid-template-columns:1.1fr 1fr}
.figc{padding:18px 30px 16px;border-right:var(--bd);display:flex;flex-direction:column;justify-content:space-between;
  --g-ink:var(--k);--g-acc:var(--coral);--g-stick:var(--butter);--g-board:var(--pink);--g-ruler:#fff;--g-prot:var(--sky);--g-shadow:var(--k);--g-font:'Quicksand',var(--kb),sans-serif;--g-sw:3}
.note{display:flex;align-items:center;gap:16px;font-weight:700;font-size:28px}
.dot{flex:none;width:26px;height:26px;border-radius:50%;background:var(--butter);border:3px solid var(--k)}
.steps{padding:22px 32px 20px;display:flex;flex-direction:column;gap:14px}
.step{display:grid;grid-template-columns:76px 1fr;gap:18px;align-items:center}
.slide[data-step]:not([data-step="0"]) .step:not(.on){opacity:.4}
.circle{width:76px;height:76px;border-radius:50%;border:var(--bd);box-shadow:var(--sh-s);display:grid;place-items:center;font-size:40px;color:#fff;text-shadow:2px 2px 0 var(--k)}
.step h3{font-size:38px;line-height:1.15}
.step p{margin-top:2px;font-weight:600;font-size:26px;line-height:1.4;color:var(--muted)}
.steps .btns{margin-top:auto;display:flex;gap:18px}
.cap{font-weight:700;font-size:28px}

/* --- 3. 숫자와 그래프(청록 면): 차트 틀 하나 — 원 아이콘 통계 4개 + 둥근 막대(하늘, 가장 높은 막대 = 버터) + 범례 칸 + 숫자 줄 --- */
.chartc{left:130px;right:130px;top:180px;bottom:130px;border-radius:40px;padding:26px 40px;display:flex;flex-direction:column;gap:10px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-bottom:16px;border-bottom:3px solid var(--k)}
.si{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start}
.ci{width:52px;height:52px;border-radius:50%;border:3px solid var(--k);display:grid;place-items:center;font-size:26px;color:#fff;text-shadow:2px 2px 0 var(--k)}
.sv{font-size:56px;line-height:1}
.si p{margin-top:4px;font-weight:600;font-size:26px;line-height:1.35;color:var(--muted)}
.lg{display:flex;align-items:center;gap:30px;font-weight:600;font-size:26px}
.lg .badge{margin-left:auto}
.sw{display:inline-block;width:22px;height:22px;border:2px solid var(--k);border-radius:5px;margin-right:10px;vertical-align:-4px}
.bars,.nrow{display:grid;grid-template-columns:240px repeat(7,1fr);gap:20px;align-items:end}
.bars{height:220px;border-bottom:3px solid var(--k);padding-bottom:0}
.ax{font-weight:700;font-size:24px;line-height:1.3;align-self:center}
.col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:6px;height:100%;padding:0 10px}
.col i{display:block;background:var(--sky);border:3px solid var(--k);border-bottom:0;border-radius:16px 16px 0 0}
.col i.mx{background:var(--butter)}
.bv{text-align:center;font-size:28px}
.nrow{align-items:center;font-weight:700;font-size:28px;text-align:center;padding:4px 0;border-bottom:2px solid rgba(45,45,45,.15)}
.nrow .ax{text-align:left}
.nrow.tm{font-family:'Fredoka One',sans-serif;font-weight:400;font-size:26px}
.src{left:130px;right:130px;bottom:88px;text-align:center;font-weight:600;font-size:20px}

/* --- 4. 비교와 표(라벤더 면, 부드러운 그림자): 색띠 머리 카드 둘 + 표 카드 / 남중 카드 + 따옴표 카드(분홍 “) --- */
.cmp{left:110px;width:1060px;top:180px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.fcard{border:var(--bd);border-radius:28px;box-shadow:var(--sh);overflow:hidden;background:#fff}
.fcard .fhead{font-size:36px}
.fb2{padding:18px 30px;display:flex;flex-direction:column;gap:6px}
.tbl{left:110px;width:1060px;top:520px;padding:16px 26px;display:flex;flex-direction:column}
.tr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;padding:10px 6px;border-bottom:2px solid rgba(45,45,45,.15);font-weight:600;font-size:28px;line-height:1.35}
.tr:last-child{border-bottom:0}
.tr.th{font-family:'Fredoka One',var(--kt),sans-serif;font-weight:400;font-size:26px;border-bottom:3px solid var(--k)}
.tr span:first-child{font-family:'Fredoka One',var(--kt),sans-serif;font-weight:400}
.lst{left:1230px;right:110px;top:180px;padding:22px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.qt{left:1230px;right:110px;top:560px;padding:20px 30px 22px}
.qm{display:block;font-size:110px;line-height:.7;color:var(--pink);-webkit-text-stroke:3px var(--k)}
.qt p{margin-top:10px;font-family:'Fredoka One',var(--kt),sans-serif;font-size:38px;line-height:1.35}
.qt span{display:block;margin-top:10px;font-weight:700;font-size:24px}

/* --- 5. 확인하기(하늘 면): 버터 색띠 머리 카드 — 퀴즈(알약 보기, 정답 = 민트) | 빈칸(배지 알약) + 낱말 배지 --- */
.quiz{padding:30px 40px;border-right:var(--bd);display:flex;flex-direction:column}
.quiz h3{font-size:50px;line-height:1.25}
.opts{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.opt{display:flex;align-items:center;gap:20px;background:#fff;border:var(--bd);border-radius:50px;box-shadow:var(--sh-s);padding:10px 28px 10px 12px;font-weight:700;font-size:34px;text-align:left}
.od{flex:none;width:56px;height:56px;border-radius:50%;border:3px solid var(--k);display:grid;place-items:center;font-size:28px}
.opt.right{background:var(--mint)}
.opt.wrong{background:var(--pink)}
.opt:disabled:not(.right){opacity:.5}
.fb{margin-top:18px;min-height:84px;font-weight:700;font-size:30px;line-height:1.45}
.rt{align-self:flex-start;margin-top:auto}
.blk{padding:30px 40px;display:flex;flex-direction:column;gap:16px}
.bt{font-size:38px}
.bl{font-size:30px}
.blank{position:relative;min-width:170px;margin-right:10px;padding:2px 18px;font-size:28px;text-align:center;background:#fff;box-shadow:none;border-width:3px}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--butter)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{display:flex;flex-wrap:wrap;gap:12px}
.words .badge{font-size:30px}

/* --- 내비: 오른쪽 세로 점(활성 버터 1.2배) + 아래 가운데 번호 알약 --- */
.dk-nav{inset:0;pointer-events:none}
.dk-dots{position:absolute;right:34px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;pointer-events:auto;z-index:3}
.dk-dot{width:22px;height:22px;border-radius:50%;border:3px solid var(--k);background:#fff}
.dk-dot.on{background:var(--butter);transform:scale(1.2)}
.dk-count{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:#fff;border:var(--bd);border-radius:50px;box-shadow:var(--sh-s);padding:4px 28px;font-size:28px}
/* --- 6. 디자인 안내(분홍 면): 버터 색띠 머리 카드 — 설명 | 시연 3개 --- */
.surf-pink6{background:var(--pink)}
.b6{grid-template-columns:1fr 1fr}
.g6{padding:26px 34px;border-right:var(--bd);display:flex;flex-direction:column;justify-content:space-around}
.g6 .li{font-size:25px;line-height:1.55}
.g6 .li::before{top:6px}
.g6 b{font-weight:700}
.sw6{display:inline-flex;flex-wrap:wrap;gap:4px 16px}
.sw6 i{display:inline-block;width:24px;height:24px;margin-right:6px;vertical-align:-5px;border:3px solid var(--k);border-radius:50%}
.sig6{padding:18px 30px;display:flex;flex-direction:column;justify-content:space-around}
.d6{border-bottom:3px solid rgba(45,45,45,.15);padding-bottom:10px}
.d6:last-child{border-bottom:0}
.d6 .dh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.d6 h3{font-size:34px}
.d6 p{margin-top:2px;font-size:21px;line-height:1.4;font-weight:600;color:var(--muted)}
.badge.sm{font-size:20px;padding:4px 16px;box-shadow:3px 3px 0 var(--k);border-width:3px;background:#fff}
.badge.sm[aria-pressed="true"]{background:var(--butter)}
.on6{margin-top:8px;height:72px;border:3px solid var(--k);border-radius:20px;background:var(--cream);display:flex;align-items:center;padding:0 24px}
.on6 b{font:400 40px 'Fredoka One',var(--kt),sans-serif;color:var(--k)}
.on6.play{background:var(--turq)}
.on6.play b{color:#fff;text-shadow:3px 3px 0 var(--k)}
.orn6{margin-top:8px;height:72px;display:flex;align-items:center;gap:18px}
.orn6 i{width:64px;opacity:0}
.orn6 i svg{display:block;width:100%;height:auto;overflow:visible}
.orn6.play i{opacity:1}
.seq6{margin-top:8px;height:72px;display:flex;align-items:center;gap:16px}
.seq6 .circle{width:60px;height:60px;font-size:30px;background:#fff;color:var(--k);text-shadow:none}
.seq6.play .circle{background:var(--c);color:#fff;text-shadow:2px 2px 0 var(--k)}

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