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

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

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

## 라이선스

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

- Diphylleia: Diphylleia — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright 2022 The Diphylleia Project Authors (https://github.com/JAMO-TYPEFACE/Diphylleia)
  파일: Diphylleia-Regular.ttf
- Paperlogy 2ExtraLight: Paperlogy — KERIS 학교 안심폰트(https://copyright.keris.or.kr/wft/fntDwnld, 전체 OFL 안내)에서 받은 TTF (2026-10-07) / 파일 안 저작권: Copyright © 2024 PT&
  파일: Paperlogy-2ExtraLight.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/biennale-yellow.css">`(head 안)와 `<script src="https://k-slide.web.app/kit/v1/biennale-yellow.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. **글씨체는 바꾸지 마세요.** 한글 글씨체(제목 Diphylleia(400) · 본문 Paperlogy 2ExtraLight(200))는 공통 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. 디자인 규칙 (`biennale-yellow` design.md)

````markdown
---
version: alpha
name: Biennale Yellow
description: "A literary-editorial presentation system in the visual register of an art biennale catalogue or quiet exhibition poster. The aesthetic is built on warm parchment grounds (`#E9E5DB`) flooded with soft solar yellow (`#F1EE2E`) radial blooms, set against a single deep indigo navy ink color. Display type is Instrument Serif — a contemporary high-contrast serif with tall ascenders and elegant italics — paired with Archivo for sans-serif chrome and JetBrains Mono for numerical and metadata callouts. No drop shadows, no rounded corners, no bordered cards: the only structural lines are hairline 1px rules in ink. The mood sits between a folded museum brochure, a slow-reading literary quarterly, and a Mediterranean exhibition poster — confident, atmospheric, and deeply restrained."

colors:
  paper: "#E9E5DB"
  paper-deep: "#DCD6C4"
  sun: "#F1EE2E"
  sun-soft: "#F8F39B"
  haze: "#F0DA7C"
  ink: "#1B2566"
  ember: "#E26B4A"

color-aliases:
  line: ink

typography:
  display:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(120px, min(14.6vw, 22vh), 240px)"
    lineHeight: 0.86
    letterSpacing: -0.018em
  display-md:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(80px, min(10vw, 16vh), 200px)"
    lineHeight: 0.86
    letterSpacing: -0.018em
  display-sm:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(110px, min(11vw, 18vh), 200px)"
    lineHeight: 0.86
    letterSpacing: -0.018em
  display-it:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontStyle: italic
    fontSize: "clamp(56px, min(7vw, 11vh), 120px)"
    lineHeight: 1.04
    letterSpacing: -0.005em
  numeral-jumbo:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(220px, min(28vw, 64vh), 720px)"
    lineHeight: 0.84
    letterSpacing: -0.04em
  numeral-lg:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(120px, min(15vw, 22vh), 280px)"
    lineHeight: 0.9
    letterSpacing: -0.04em
  numeral-md:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(72px, min(7vw, 12vh), 144px)"
    lineHeight: 0.92
    letterSpacing: -0.01em
  headline:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(40px, min(4.6vw, 7vh), 88px)"
    lineHeight: 1.06
    letterSpacing: -0.005em
  headline-sm:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(32px, min(3.6vw, 6vh), 56px)"
    lineHeight: 1
  date-rail:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(48px, min(5.2vw, 9vh), 96px)"
    lineHeight: 0.96
    letterSpacing: -0.005em
  ledger-title:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(20px, 1.6vw, 30px)"
    lineHeight: 1.15
  strand-title:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(22px, 1.7vw, 32px)"
    lineHeight: 1.1
  strand-num:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontWeight: 400
    fontSize: "clamp(28px, 2vw, 38px)"
    lineHeight: 1
  body-lede:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 400
    fontSize: "clamp(15px, 1.05vw, 18px)"
    lineHeight: 1.55
  body:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 400
    fontSize: "clamp(14px, 0.95vw, 16px)"
    lineHeight: 1.5
  body-sm:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 400
    fontSize: "clamp(11px, 0.78vw, 13px)"
    lineHeight: 1.5
  micro-label:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 600
    fontSize: "clamp(11px, 0.85vw, 14px)"
    lineHeight: 1.2
    letterSpacing: 0.18em
    textTransform: uppercase
  micro-label-tight:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 600
    fontSize: "clamp(10px, 0.72vw, 12px)"
    lineHeight: 1.2
    letterSpacing: 0.16em
    textTransform: uppercase
  rail-label:
    fontFamily: "'Archivo', sans-serif"
    fontWeight: 600
    fontSize: "clamp(11px, 0.85vw, 13px)"
    lineHeight: 1
    letterSpacing: 0.32em
    textTransform: uppercase
  mono-data:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontWeight: 400
    fontSize: "clamp(12px, 0.85vw, 14px)"
    lineHeight: 1.4
    letterSpacing: 0.04em
  mono-date:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontWeight: 400
    fontSize: "clamp(13px, 0.95vw, 16px)"
    lineHeight: 1.4
    letterSpacing: 0.02em
  pagenum:
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontWeight: 400
    fontSize: "clamp(11px, 0.85vw, 13px)"
    lineHeight: 1
    letterSpacing: 0.08em

spacing:
  pad-edge: "clamp(40px, 4vw, 76px)"
  pad-region: "clamp(40px, 4.2vw, 80px)"
  pad-foot: "clamp(56px, 5vh, 88px)"
  pad-strand-y: "clamp(12px, 1.6vh, 22px)"
  gap-region: "clamp(20px, 2.5vw, 48px)"
  gap-strand: "clamp(14px, 1.8vh, 22px)"
  gap-footer-col: "clamp(20px, 2.4vw, 44px)"
  pagenum-bottom: "clamp(22px, 2.4vh, 42px)"
  pagenum-right: "clamp(24px, 2.4vw, 48px)"

canvas:
  width: 100vw
  height: 100vh
  background: "{colors.paper}"

components:
  pagenum:
    position: "absolute, right + bottom"
    color: "{colors.ink}"
    opacity: 0.75
    fontFamily: "'JetBrains Mono', ui-monospace, monospace"
    fontSize: "clamp(11px, 0.85vw, 13px)"
    letterSpacing: 0.08em
    description: "Single mono pagenum NN / NN pinned to bottom-right of every slide at 75% opacity. The only persistent chrome on every surface."
  hairline-rule:
    border: "1px solid {colors.ink}"
    description: "1px solid ink horizontal or vertical rule. The system's only border treatment — separates header bands from content, footer columns from each other, ledger rows from each other. No thicker rule exists."
  hairline-rule-soft:
    border: "1px solid rgba(27, 37, 102, 0.18-0.2)"
    description: "1px ink at 18-20% opacity. Used for between-row separators inside dense ledger or strand lists where a full-weight rule would feel oppressive."
  sun-bloom:
    background: "radial-gradient using {colors.sun} {colors.sun-soft} {colors.haze} blending to transparent on {colors.paper}"
    description: "Large soft radial bloom of solar yellow placed off-center or behind a focal element. The system's primary atmospheric layer. Sized 42-70% of viewport in the larger axis."
  ember-bloom:
    background: "radial-gradient using {colors.ember} at 15-22% opacity blending to transparent"
    description: "Small warm peach bloom used as a counter-temperature accent in a corner opposite the sun bloom. Always subordinate; never dominant."
  block-tile:
    background: "{colors.sun} at 40-70% opacity"
    description: "Geometric blocks of translucent solar yellow placed on an 8-row × 4-column grid behind cover or colophon surfaces. Suggests a layered poster underprint."
  yellow-panel:
    background: "{colors.sun}"
    color: "{colors.ink}"
    description: "Full-bleed yellow panel covering a column or third of the slide. The strongest possible color statement — used when a region needs to read as poster-fill, not paper."
  bar-ink:
    background: "{colors.ink}"
    height: "clamp(14px, 1.6vh, 22px)"
    description: "Solid ink horizontal bar for data charts. Width carries the data value."
  bar-lit:
    background: "{colors.sun}"
    border: "1px solid {colors.ink}"
    height: "clamp(14px, 1.6vh, 22px)"
    description: "Highlighted variant of bar-ink — yellow fill with 1px ink stroke. Used to mark the current or featured row in a series."
  strand-row:
    layout: "grid 56px 1fr, gap clamp(14px, 1.4vw, 24px), border-bottom hairline-soft, padding-bottom clamp(12px, 1.6vh, 22px)"
    description: "Numbered editorial list row — numeral cell + content cell separated by hairline-soft. Used for programmes, agendas, and curated lists."
  ledger-row:
    layout: "grid 92px 1.6fr 0.9fr 80px, gap clamp(14px, 1.4vw, 28px), border-bottom hairline-soft, padding clamp(10px, 1.3vh, 18px) 0"
    description: "Four-column tabular row for calendars and itineraries. Date column is mono, title is serif, venue is sans, duration is mono right-aligned."
  footer-band:
    layout: "grid 4-column with hairline-rule top border on each cell, gap clamp(20px, 2.4vw, 44px)"
    description: "Four-column metadata strip pinned to the bottom of cover and colophon surfaces. Each cell has a tiny uppercase tag + a brief plain-English statement."
  vertical-rail:
    transform: "rotate(-90deg) translateY(-50%) at left edge"
    fontFamily: "'Archivo', sans-serif"
    fontSize: "clamp(11px, 0.85vw, 13px)"
    letterSpacing: 0.32em
    textTransform: uppercase
    description: "Rotated vertical text label running up the left edge. Used on chapter/divider surfaces as a section marker."
  date-rail-stack:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: "clamp(48px, min(5.2vw, 9vh), 96px)"
    lineHeight: 0.96
    textAlign: right
    description: "Large serif date or date-range stacked at top-right of cover surfaces. Uses an en-dash to indicate spans."
---

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

Biennale Yellow is a **literary-editorial presentation system** modeled on the visual language of European art biennale catalogues, slow exhibition posters, and quarterly literary publications. There are no cards, no buttons, no shadows, no rounded corners. The structural vocabulary is just three things: paper, ink, and yellow.

The typographic system pivots on **Instrument Serif**, a contemporary high-contrast serif with tall ascenders, elegant italics, and slightly flared terminals. It carries every display moment, every numeral, every quote — at scales ranging from headline-small (40px) to jumbo numerals over 700px. Set tight (line-height 0.86, letter-spacing −0.018em), it reads as confident editorial display; set looser in italic (line-height 1.04, letter-spacing −0.005em), it becomes a slow-reading quotation face. **Archivo** is the sans companion — used for body paragraphs and as small, wide-tracked uppercase labels (the "micro-label" treatment). **JetBrains Mono** handles all numerical and metadata callouts: dates, ledger figures, page numbers. The three-face system is rigid and disciplined; the contrast between them is the entire typographic story.

The color world is built on **warm parchment** (`{colors.paper}` — `#E9E5DB`) as the universal ground, marked by a single **ink** color (`{colors.ink}` — `#1B2566`, a deep indigo navy) used for every line of type and every rule. The system's signature color is **sun** (`{colors.sun}` — `#F1EE2E`), a highly saturated solar yellow used as a flooded panel, as a soft blooming radial gradient, or as a geometric tile underprint. A **soft ember peach** (`{colors.ember}` — `#E26B4A`) appears only as a subordinate counter-temperature accent, always at 15-22% opacity in a corner radial bloom. Inverted color treatments are not used; the system commits to navy ink on a warm ground.

Depth is **atmospheric, not structural**. There are no drop shadows anywhere in the system. Depth comes from layered radial gradients of yellow (the sun-bloom and ember-bloom components) and the optional block-tile underprint on cover-class surfaces. Cards have no borders; regions are separated only by 1px hairline rules in ink. The lack of border weight is itself the aesthetic — the design feels printed, not engineered.

**Density philosophy: editorial-restrained.** This system reads as elegant when sparse and broken when crowded. A typical surface holds one large display moment + a handful of supporting elements (a micro-label, a body paragraph, an ordered list, or a single radial bloom). Crowding the canvas with cards, buttons, panels, or stacked components turns the system into a different aesthetic entirely. Even dense surfaces (a calendar or programme) achieve density through tabular repetition, not visual richness — many quiet rows of hairline-separated metadata, not many bordered cells. Generous edge padding (40-76px) and wide footer/header bands let the canvas breathe.

**Key Characteristics:**
- Warm parchment ground (`{colors.paper}`) on every surface; never white, never gray.
- Single ink color (`{colors.ink}`) for all text and all rules — no secondary text colors.
- Solar yellow (`{colors.sun}`) deployed three ways: as a flooded panel, as a soft radial bloom, as a translucent geometric tile underprint.
- Instrument Serif handles every display moment at scales from 40px to 720px+.
- Archivo Bold uppercase + 0.16–0.32em tracking is the universal label voice.
- JetBrains Mono is reserved exclusively for dates, ledger numerals, and page numbers.
- 1px hairline rules in `{colors.ink}` are the only border treatment — used for header bands, ledger rows, footer columns, and strand separators.
- No drop shadows, no rounded corners, no card outlines, no buttons. Decoration is atmospheric (radial blooms) or geometric (translucent tile blocks).
- Persistent `01 / NN` JetBrains Mono pagenumber at bottom-right of every surface at 75% opacity.
- Optional vertical rotated rail-label at the left edge of chapter/divider surfaces.

## Colors

### Palette

- **Paper** (`{colors.paper}` — `#E9E5DB`): The warm parchment canvas. The default and near-universal background. Reads as a softened off-white with strong warmth — never neutral, never cold.
- **Paper-deep** (`{colors.paper-deep}` — `#DCD6C4`): A slightly darker parchment tone, available as a secondary surface or to suggest a shadow band without using actual shadow. Reserved for moments that need surface differentiation while staying within the warm-paper family.
- **Ink** (`{colors.ink}` — `#1B2566`): The single text and line color across the entire system. A deep indigo navy that reads as confident editorial black-with-blue-bias. Used for headlines, body, micro-labels, monos, hairline rules, and ink-bar fills. The `--line` CSS variable resolves to this same color.
- **Sun** (`{colors.sun}` — `#F1EE2E`): The system's signature solar yellow. Highly saturated, slightly green-leaning. Used three ways: as a flooded full-bleed or column-bleed panel, as the core of soft radial blooms, and as 40-70% opacity geometric tile blocks.
- **Sun-soft** (`{colors.sun-soft}` — `#F8F39B`): A paler buttery yellow used in the middle stops of sun-bloom gradients to soften the transition from saturated sun to paper.
- **Haze** (`{colors.haze}` — `#F0DA7C`): A warmer mustard-leaning yellow used in the outermost stops of sun-bloom gradients to extend the bloom into the paper without a hard edge.
- **Ember** (`{colors.ember}` — `#E26B4A`): A warm peach-orange used only as a subordinate counter-temperature accent in 15-22% opacity radial blooms. Never used as a fill color, never as a text color. Its job is to balance a sun-bloom on the opposite side of the canvas.

### Defaults

- **Default surface background**: `{colors.paper}`. Every surface starts here.
- **Default headline color**: `{colors.ink}`. Always. Headlines never appear in yellow, ember, or paper-deep — only ink.
- **Default body text color**: `{colors.ink}`. Body uses the same color as display; the contrast is achieved through size and weight, not color.
- **Default rule color**: `{colors.ink}` (1px solid) for primary separators, ink at 18-20% opacity for secondary row separators.
- **Default accent surface for poster moments**: `{colors.sun}` — a flooded panel of solar yellow with `{colors.ink}` text on top.
- **Default atmospheric layer**: a single `{components.sun-bloom}` placed off-center on the surface, with an optional `{components.ember-bloom}` in the opposite corner.
- **Default chart bar color**: `{colors.ink}`. The featured/current bar uses `{components.bar-lit}` (yellow fill, ink stroke).
- **Default label color**: `{colors.ink}` for the text, no fill. Labels are tracking + uppercase + weight 600, not filled pills.

The system never inverts: ink text on a sun panel is correct (and a key signature treatment), but yellow text on an ink ground does not exist. Text is always ink; the variability lives in what's behind the text, not in the text color itself.

## Typography

### Font Family Stack
The system runs three faces, each with a tightly defined role.

**Instrument Serif** (Google Fonts, italic + roman) is the display and editorial face. Its high contrast, tall ascenders, and slightly flared terminals give it a contemporary literary register — closer to a magazine masthead than a traditional book serif. Roman is used for headlines, numerals, ledger titles, and date rails. Italic is used for manifesto quotes and certain emphasis moments. Set tight (line-height ≤ 1.06, negative letter-spacing −0.005 to −0.04em).

**Archivo** (Google Fonts) is the sans companion. Used at weight 400 for body paragraphs (line-height 1.5) and at weight 600 for the universal micro-label treatment (uppercase, 0.16-0.32em tracking, 10-14px). Never used at intermediate weights, never used for headlines.

**JetBrains Mono** (Google Fonts) is the numerical/metadata face. Used exclusively for dates in ledgers, mono numerical callouts in data slides, page numbers, and the nav-hint. Its slab character gives editorial weight to numerical content without leaning on bold styling.

### Typography Scale

| Token | Size (clamp) | Family | Weight | Use |
|---|---|---|---|---|
| `{typography.display}` | 120–240px | Instrument Serif | 400 | Cover-scale display title |
| `{typography.display-sm}` | 110–200px | Instrument Serif | 400 | Editorial display in a panel context |
| `{typography.display-md}` | 80–200px | Instrument Serif | 400 | Closing-statement display |
| `{typography.display-it}` | 56–120px | Instrument Serif italic | 400 | Manifesto-scale italic quote body |
| `{typography.numeral-jumbo}` | 220–720px | Instrument Serif | 400 | Chapter-divider ordinal numeral |
| `{typography.numeral-lg}` | 120–280px | Instrument Serif | 400 | Decorative quotation mark, oversized punctuation |
| `{typography.numeral-md}` | 72–144px | Instrument Serif | 400 | Hero stat figure |
| `{typography.headline}` | 40–88px | Instrument Serif | 400 | Primary section headline, large quote body |
| `{typography.headline-sm}` | 32–56px | Instrument Serif | 400 | Region headline, ledger/calendar topbar |
| `{typography.date-rail}` | 48–96px | Instrument Serif | 400 | Date or date-range stacked at top of a surface |
| `{typography.ledger-title}` | 20–30px | Instrument Serif | 400 | Title cell inside a calendar/ledger row |
| `{typography.strand-title}` | 22–32px | Instrument Serif | 400 | Title inside a numbered strand/list row |
| `{typography.strand-num}` | 28–38px | Instrument Serif | 400 | Numeral cell inside a strand row |
| `{typography.body-lede}` | 15–18px | Archivo | 400 | Lede paragraph following a chapter headline |
| `{typography.body}` | 14–16px | Archivo | 400 | Standard body paragraph |
| `{typography.body-sm}` | 11–13px | Archivo | 400 | Footer-band body text, dense metadata |
| `{typography.micro-label}` | 11–14px | Archivo | 600 | Universal uppercase eyebrow label |
| `{typography.micro-label-tight}` | 10–12px | Archivo | 600 | Smaller uppercase label inside footer cells |
| `{typography.rail-label}` | 11–13px | Archivo | 600 | Vertical rotated rail label |
| `{typography.mono-data}` | 12–14px | JetBrains Mono | 400 | Chart year/value labels, mono inline data |
| `{typography.mono-date}` | 13–16px | JetBrains Mono | 400 | Date column in calendar ledgers |
| `{typography.pagenum}` | 11–13px | JetBrains Mono | 400 | Persistent page number |

### Defaults

- **Default size for a cover-scale display headline**: `{typography.display}` (120–240px clamp). Anything smaller reads as section-level, not cover-level.
- **Default size for a primary section headline**: `{typography.headline}` (40–88px clamp).
- **Default size for a chapter-divider numeral**: `{typography.numeral-jumbo}` (220–720px clamp). Don't shrink — the jumbo numeral is the point of a divider surface.
- **Default size for a hero statistic**: `{typography.numeral-md}` (72–144px clamp). Stat figures share the same serif as headlines — they are display moments, not data chrome.
- **Default size for a paragraph body**: `{typography.body}` (14–16px). For a lede after a chapter headline, step up to `{typography.body-lede}` (15–18px).
- **Default size for any eyebrow label**: `{typography.micro-label}` (11–14px) at weight 600, uppercase, 0.18em tracking.
- **Default weight for any Archivo body**: 400. Archivo body at any other weight breaks the rhythm.
- **Default weight for any micro-label**: 600. Labels at weight 400 or 700 read as either timid or oversized.
- **Default tracking for any uppercase label**: 0.16em minimum, 0.32em maximum. Labels without wide tracking read as code, not editorial.

When unsure which display token to reach for, default to `{typography.headline}` (40–88px) for the primary moment, and `{typography.numeral-md}` (72–144px) for a single hero statistic. The display, display-sm, and display-md tokens are reserved for cover/colophon/poster-scale moments.

### Signature Treatments

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

- **Every display, numeral, headline, and ledger-title element is Instrument Serif at weight 400.** Bold serif display does not exist in this system — the face's contrast is its weight signal. Setting Instrument Serif at weight 700 collapses the entire elegance.
- **Every Instrument Serif display element uses tight line-height (0.84–1.06).** Generous line-height on display destroys the editorial poster feel — large serif headlines must feel stacked, not aerated.
- **Every Instrument Serif display element uses negative letter-spacing.** Display, headline, jumbo numerals at −0.018 to −0.04em; italic display at −0.005em. Without negative tracking, the wide-bodied glyphs read as untreated.
- **Every micro-label is uppercase Archivo weight 600 with tracking ≥ 0.16em.** No exceptions. A label without uppercase + tracking is not a label in this system; it's a stray sans element.
- **Every numerical metadata element (date, page number, chart value, calendar date) is JetBrains Mono.** Serif numerals are for display moments; mono numerals are for data chrome. Don't cross the line.
- **Every italic manifesto-scale quote uses `{typography.display-it}`.** Setting an italic quote at headline scale (40–88px) reads as a smaller moment; the italic is meant to dominate.
- **Every body paragraph is Archivo weight 400 with line-height ≥ 1.45.** Body in Instrument Serif does not exist — Instrument is for display only.

### Typography Principles

The voice contrast is **slow elegant serif ↔ wide-tracked uppercase sans ↔ tabular mono**. Italic Instrument is the system's "feeling" voice (reserved for quotes and manifesto moments); roman Instrument is the "statement" voice; Archivo upper-tracked is the "label" voice; mono is the "data" voice. Each has a single job.

Mixing rules are tight: an `<em>` inside an Instrument Serif headline stays in italic Instrument Serif (no face switch). An `<em>` inside an Archivo body paragraph becomes italic Archivo, not a serif. Don't mix faces inline.

Color is locked to ink on every element. There is no "accent color text" treatment in this system — accent is delivered through atmospheric blooms and panel fills, not text color.

## Layout

### Canvas System
The system targets `100vw × 100vh` per slide. Slides are absolutely positioned and crossfade via opacity transition (280ms ease). Only one slide is `.active` at a time. Every measurement uses CSS `clamp()` with both vw and vh terms — typography clamps include `min(...vw, ...vh)` patterns so display type scales by whichever viewport axis is shorter.

### Padding and Margin Scale

| Token | Range | Use |
|---|---|---|
| `{spacing.pad-edge}` | 40–76px | Standard edge padding from any slide edge to content |
| `{spacing.pad-region}` | 40–80px | Internal padding inside a flooded yellow panel or major region |
| `{spacing.pad-foot}` | 56–88px | Bottom padding when the footer band is present |
| `{spacing.gap-region}` | 20–48px | Gap between two major content columns/regions |
| `{spacing.gap-strand}` | 14–22px | Gap between strand rows in a numbered list |
| `{spacing.gap-footer-col}` | 20–44px | Gap between columns of the footer-band metadata strip |
| `{spacing.pagenum-bottom}` | 22–42px | Bottom inset of the persistent pagenum |
| `{spacing.pagenum-right}` | 24–48px | Right inset of the persistent pagenum |

### Persistent Chrome
The **pagenum** is the only persistent on-canvas element. It appears at `bottom-right` of every slide in JetBrains Mono at 11–13px, color ink, opacity 0.75. A **nav-hint** (`← / → · space`) appears once, fixed to the bottom-left of the viewport in JetBrains Mono at 10–12px / opacity 0.4. The nav-hint is not part of the slide composition — it lives outside the `.stage`.

### Edge Discipline
Every meaningful element respects a minimum 40px (mobile) to 76px (desktop) edge inset. The system's elegance depends on negative space at the edges — pushing content to the bleed (other than full-bleed panels, blooms, and tile blocks) breaks the catalogue feel.

### Atmospheric Layer
Every slide may carry one or both atmospheric layers behind content:
- A **sun-bloom** (`{components.sun-bloom}`) — a large soft radial gradient of solar yellow, sized 42-70% of viewport, placed off-center or behind a focal element.
- An **ember-bloom** (`{components.ember-bloom}`) — a small warm peach radial gradient at 15-22% opacity, placed in a corner opposite the sun bloom.

These layers are not optional decoration — they are the system's primary depth mechanism. A surface without a bloom reads as flat parchment.

## Depth and Elevation

### No Drop Shadows
The system has **zero drop shadows**. No `box-shadow`, no `text-shadow`, no `filter: drop-shadow(...)`. Depth is delivered atmospherically.

### Atmospheric Depth (Sun Bloom)
The primary depth mechanism is the **sun-bloom** — a large soft radial gradient of solar yellow blooming from a point on the canvas. Bloom anatomy is a layered radial gradient with three or four color stops:
- 0%: `{colors.sun}` at 70-95% opacity (the hot core)
- ~30-40%: `{colors.sun}` at 40-65% opacity (the bloom)
- ~55-65%: `{colors.haze}` at 18-22% opacity (the soft extension)
- 80-90%: `{colors.paper}` at 0% (smooth fade into ground)

Bloom size and position varies by surface need: cover surfaces use a centered or slightly-off-center bloom 42% × 38% of viewport; chapter surfaces use a corner-anchored 720px-radius bloom; closing surfaces use a bottom-anchored 55% × 50% bloom rising from below.

### Counter-Temperature Accent (Ember Bloom)
An optional **ember-bloom** in a corner opposite the sun-bloom provides warm-cool color tension without raising the saturation of the canvas. Always at 15-22% opacity, always smaller than the sun-bloom, always subordinate.

### Geometric Underprint (Block Tiles)
On cover and colophon surfaces, an additional **block-tile** layer can appear behind content — translucent solar yellow rectangles placed on an 8-row × 4-column grid system at 40-70% opacity. This layer suggests a layered poster underprint without committing to a solid panel. The tiles are decorative geometry, not active content regions.

### Yellow Panel (Structural Color)
For surfaces that need the strongest possible color statement, a **yellow-panel** flood (`{components.yellow-panel}`) covers a column, half, or third of the canvas in saturated `{colors.sun}`. This is the only "hard" color treatment in the system — when a panel is used, ink text sits on top at full opacity. Panels do not have borders or shadows; they meet the paper edge or another panel edge directly.

### Hairline Rules
Internal structural depth is delivered by **1px solid ink hairline rules** separating header bands from content, ledger rows from each other, and footer columns from each other. Rules are never thicker than 1px. Between secondary list rows (e.g., strand separators), the rule drops to `rgba(27, 37, 102, 0.18-0.2)` — same color, lower opacity.

## Shapes and Treatment

### Border Radius
**Zero, on everything.** Every shape is a strict rectangle. The radial blooms are technically circles but they have no visible edge — they fade into paper.

### Border Weights
- **1px solid `{colors.ink}`** — the universal rule. Used for header-band underlines, ledger row separators, footer-column tops, and the bordered chart bar accent on the lit row.
- **1px solid `rgba(27, 37, 102, 0.18-0.2)`** — soft variant of the same rule. Used for secondary row separators inside dense lists where full-weight ink would feel heavy.

The system has **no thicker borders**. There are no 2px, 3px, or 4px outlines anywhere. The visual structure depends on the lightness of the hairline.

### Decorative Element Types

**Sun-bloom** — Large soft radial gradient of solar yellow placed off-center or behind a focal element. The system's primary depth mechanism. Always one per surface, sometimes paired with a counter-bloom.

**Ember-bloom** — Small warm peach radial gradient at 15-22% opacity, placed in a corner opposite the sun-bloom. Subordinate atmospheric balance.

**Block-tile underprint** — Translucent solar yellow rectangles placed on an 8×4 grid system. Decorative geometry suggesting a layered poster, used on cover and colophon-type surfaces.

**Yellow panel** — A full-bleed column, half, or third of the canvas flooded with `{colors.sun}`. The system's strongest color statement. Carries ink text on top.

**Hairline rule** — 1px solid ink. Used for header-band underlines, ledger separators, footer column tops. The system's only border.

**Footer band** — A four-column metadata strip at the bottom of cover/colophon surfaces. Each cell has a `{components.hairline-rule}` top border, an Archivo micro-label, and a short body statement.

**Strand row** — Numbered editorial list row with serif numeral cell + serif title + sans body, separated from the next row by a hairline-soft rule.

**Ledger row** — Four-column tabular calendar/itinerary row: mono date + serif title + sans venue + mono duration (right-aligned), separated by hairline-soft rules.

**Vertical rail label** — Rotated Archivo uppercase text running up the left edge of a chapter-divider surface, with 0.32em tracking.

**Date rail** — Large serif date or date-range stacked at top-right of cover surfaces, often using an en-dash to indicate a span across years or months.

**Jumbo numeral** — A single huge Instrument Serif numeral (220-720px) dominating a divider surface. Always serif, always at weight 400, always with tight line-height.

**Chart bar** — A solid ink rectangle whose width carries the data value. The featured/current bar swaps to yellow fill with a 1px ink stroke (`{components.bar-lit}`). Chart layouts use grid-row patterns: mono year label + bar + mono value, separated by gap.

## Do's and Don'ts

### Do

- Apply `{colors.paper}` as the universal background. Every surface starts on parchment.
- Set every line of text in `{colors.ink}` — display, body, micro-label, mono, everything. The single text color is non-negotiable.
- Use Instrument Serif at weight 400 with tight line-height (0.84-1.06) and negative letter-spacing (-0.018 to -0.04em) for every display moment. The serif's elegance lives in this configuration.
- Add at least one `{components.sun-bloom}` to every surface. Atmospheric depth is the system's depth mechanism; a flat parchment surface reads as broken.
- Pair a sun-bloom with an `{components.ember-bloom}` in the opposite corner when you want warm-cool tension without raising the overall saturation.
- Use `{components.hairline-rule}` (1px solid ink) for every structural separator: header-band underline, ledger row, footer column, strand separator.
- Set every uppercase label in Archivo weight 600 with 0.16-0.32em tracking. Without the wide tracking, labels read as code, not editorial.
- Use `{components.yellow-panel}` (full-bleed sun column or panel) when a surface needs strongest color commitment — keep ink text on top at full opacity.
- Place the persistent `{components.pagenum}` (JetBrains Mono, 75% opacity ink) at bottom-right of every surface.
- Reserve JetBrains Mono exclusively for numerical and metadata callouts: dates, ledger figures, chart values, page numbers, nav-hint. Never use mono for display or body.

### Don't

- Don't add drop shadows. The system has zero box-shadows and zero text-shadows. Adding any blurred or offset shadow breaks the printed-paper feel immediately.
- Don't round any corner. Every shape is strict rectangle. Border-radius is forbidden.
- Don't use borders thicker than 1px. The hairline rule is the only border vocabulary; 2px, 3px, or 4px outlines do not exist.
- Don't set Instrument Serif at weight 700 or any bold weight. The serif's character lives at weight 400; bold serif display flattens the system.
- Don't introduce a second text color. Yellow text on paper, ember text anywhere, or muted-ink secondary text — none exist. Text is always full-opacity ink.
- Don't crowd the canvas with cards or panels. The system reads as elegant when sparse. Bordered cards, button stacks, or multi-region grids of containers break the editorial restraint.
- Don't invert: ink panels with yellow or paper text are not part of the system. Ink ground is reserved for chart bars and small rule elements only.
- Don't substitute Inter, Helvetica, or system-ui for Archivo, or Times for Instrument Serif. The font selection is the visual identity; substitution collapses the aesthetic.
- Don't use mono for body or headlines. JetBrains Mono is exclusively for numerical/metadata chrome.
- Don't omit the bloom layer on a surface. A flat parchment slide reads as a CMS template; the bloom is the atmosphere that signals "biennale".

## Responsive Behavior

This system is built as a **viewport-fluid 100vw × 100vh deck** with no responsive breakpoints. Every font size, padding value, and gap uses CSS `clamp()` with both vw and vh terms — `clamp(40px, min(4.4vw, 7vh), 88px)` is a typical pattern. Display type scales by whichever viewport axis is shorter, so portrait orientations don't blow out the headlines.

### Scaling Behavior
- Cover-scale display scales 120px → 240px.
- Chapter-divider jumbo numeral scales 220px → 720px.
- Headline scales 40px → 88px.
- Body scales 14px → 16px.
- Edge padding scales 40px → 76px.
- Hairline rule (1px) and pagenum sizing (11-13px) are essentially fixed.

### Presenter Behavior
- Slides advance via `ArrowRight`, `PageDown`, or `Space`.
- Slides reverse via `ArrowLeft` or `PageUp`.
- `Home` jumps to first slide, `End` to last.
- Horizontal touch swipe with a 40px threshold advances/reverses.
- Slide crossfades at 280ms ease via `opacity` toggle on the `.active` class. Only the active slide is `pointer-events: auto`.

### Print Behavior
The system has no `@media print` rule. The crossfade transition is screen-only. For static export, capturing each slide individually via screenshot preserves all atmospheric layers (the radial blooms are pure CSS gradients, not assets).

### Mobile Behavior
The `min(vw, vh)` pattern in display clamps means narrow portrait viewports automatically shrink display type to fit. The strand and ledger rows use fixed-px first columns (56px, 92px) that may feel tight on narrow widths — the system is designed for landscape presentation contexts and is functional but not optimized for sub-768px portrait usage.

## CJK & International Content

When using this template for Chinese (or other CJK) content, swap the Latin typeface stack for an equivalent Chinese pairing and apply universal CJK adjustments. All recommended Chinese fonts load via CDN — no install required.

### Recommended Chinese Pairing

| Role | Latin (default) | Chinese counterpart |
|---|---|---|
| Display / numerals / headlines / date rail | Instrument Serif 400 | 得意黑 Smiley Sans (oblique) — display moments; 思源宋体 Noto Serif SC 400 as fallback for long-form serif headlines |
| Body / lede / micro-label | Archivo 400–600 | 思源宋体 Noto Serif SC 400 for body; 思源黑体 Noto Sans SC 600 for micro-labels |
| Mono data / dates / page numbers | JetBrains Mono 400 | 思源黑体 Noto Sans SC 500 with tabular-feeling alignment — see Known CJK Gap below |

### Mixed-Content Strategy

**Strategy A** — single CJK family per role, with Latin glyphs handled by the same CJK family. Both 思源宋体 and 思源黑体 ship Latin glyphs that read cleanly alongside Chinese characters, so a mixed sentence renders in a consistent face. 得意黑 is used surgically — only on the biggest display moments where its slight oblique slant matches the Italian-poster register Instrument Serif provides in the Latin original. For everything else (body, micro-label, mono), Noto Serif SC / Noto Sans SC carries both scripts.

### Loading

Add to the template's `<head>`:

```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=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cn-fontsource-smiley-sans-oblique/font.min.css">
```

After loading, reference 得意黑 as `font-family: 'Smiley Sans Oblique', 'Noto Serif SC', serif` on the display tokens that should carry the strongest poster register.

### Universal CJK Adjustments

- **Line-height**: increase by ~15–25% from the Latin spec. Body 1.75–1.85 (up from 1.5–1.55), display 1.05–1.15 (up from the very tight 0.84–0.96 used on Instrument Serif). The Latin display tokens here use line-height as low as 0.84 — at that compression, CJK characters collide vertically. Open display to a minimum of 1.0 for Chinese, and 1.15+ on multi-line headlines.
- **Letter-spacing**: set to 0 on every CJK run. The Latin display tokens use negative tracking from −0.005em down to −0.04em; on square CJK glyphs this overlaps strokes and reads as broken. Micro-labels at 0.16–0.32em wide tracking also drop to 0.
- **Text transform**: don't apply `uppercase` to Chinese text — CJK has no case. Every micro-label and rail-label in this system uses `text-transform: uppercase`; remove it for CJK runs.
- **Punctuation**: use full-width Chinese punctuation （，。：；！？「」（））. Replace the en-dash separator in date ranges with a Chinese 至 or full-width 「—」 hyphen.
- **No period on display headlines**: Chinese typography convention omits trailing 。 on display-scale headlines.
- **Space between CJK and Latin (盘古之白)**: insert an ASCII space between every Chinese character and adjacent Latin character or digit. Write `2024 春季双年展` not `2024春季双年展`.
- **One font per sentence**: 思源宋体 covers both CJK and Latin glyphs in a unified serif style — let it handle mixed editorial sentences. Don't let the browser font-switch to Archivo mid-paragraph.

### Aesthetic Notes for This System

The system's editorial identity rests on Instrument Serif's high-contrast, tall-ascender personality — a face that signals "art biennale catalogue" and "slow literary quarterly". The closest Chinese equivalent for register is **思源宋体 Noto Serif SC** for body and editorial display, with **得意黑 Smiley Sans Oblique** reserved for the poster-scale display moments where Instrument Serif at 120–240px does the heaviest identity work in the Latin original. 得意黑's slight italic tilt and slab character matches the Italian-exhibition-poster register; pure Noto Serif SC at jumbo numerals reads as restrained academic Chinese rather than biennale-loud.

The "single text color, single accent" discipline of this system transfers cleanly to CJK — ink-on-paper, sun-bloom atmosphere, hairline rules, no shadows. The micro-label treatment (Archivo weight 600, uppercase, 0.16–0.32em tracking) is the system's most fragile element when translated: CJK micro-labels lose both the uppercase signal and the wide tracking. Compensate by setting Chinese micro-labels in 思源黑体 weight 600 at 0 tracking with the **slightly heavier weight contrast** (drop body to weight 400 of 思源宋体, keep labels at 600 of 思源黑体) and by **always pairing the label with a hairline-soft rule beneath** — the rule does the chrome-recognition work the wide-tracked uppercase did in Latin.

### Known CJK Gap

- **No CDN-loadable Chinese monospace face for tabular data.** JetBrains Mono's role here (calendar ledger dates, chart year/value labels, page numbers) depends on monospaced figure rhythm that CJK doesn't provide. 思源黑体 at weight 500 with `font-feature-settings: "tnum"` gives tabular Latin digits but Chinese characters remain proportional. For ledger rows where alignment is structural, keep the date and value columns in Latin digits (Arabic numerals + Latin date abbreviations) and use 思源黑体 only for the title/venue cells.
- **Instrument Serif italic has no direct Chinese counterpart.** The italic display token (manifesto-scale quote body) loses its slow-reading personality entirely in CJK. Use 思源宋体 400 with looser line-height (1.4) and slightly larger size to compensate; consider 「」 quotation framing to signal "this is a quoted passage".
- **得意黑 may not load on restricted networks.** The cn-fontsource CDN is reliable in mainland China but less proven internationally. Always include `'Noto Serif SC', serif` in the stack as fallback so display headlines remain editorial even when 得意黑 fails.

## Iteration Guide

1. Any new surface starts on `{colors.paper}`, places at least one `{components.sun-bloom}` for atmosphere, and pins the persistent `{components.pagenum}` to bottom-right.
2. Any new headline uses Instrument Serif weight 400 with tight line-height and negative tracking. Reach for `{typography.headline}` for primary moments and `{typography.display}` only for cover-scale.
3. Any new body paragraph uses Archivo weight 400 with line-height 1.5. Lede paragraphs following a headline use the slightly larger `{typography.body-lede}` for breathing room.
4. Any new eyebrow or section tag uses the micro-label treatment: Archivo weight 600, uppercase, 0.16-0.32em tracking, ink color, no fill. Don't substitute a pill or chip.
5. Any new structural separator is a 1px `{components.hairline-rule}` in ink, or its soft variant for secondary list rows. Never reach for a thicker border.
6. Any new numerical or metadata content (date, page number, chart value, ledger figure) uses JetBrains Mono. Serif numerals are reserved for display moments only.
7. Any new "poster-scale" color statement uses `{components.yellow-panel}` — a flooded column or fraction of the canvas in `{colors.sun}` with ink text on top.
8. Any new ordered list of program items uses the `{components.strand-row}` pattern: serif numeral cell + serif title + sans body, separated by hairline-soft rule.
9. Any new tabular itinerary uses the `{components.ledger-row}` pattern: mono date + serif title + sans venue + mono duration right-aligned, separated by hairline-soft rule.
10. If a surface feels flat, add an `{components.ember-bloom}` in the opposite corner from the sun-bloom — never add a card border or shadow.

## Known Gaps

- **Instrument Serif, Archivo, and JetBrains Mono are loaded from Google Fonts** via a preconnect + `<link>`. Fallbacks (`Georgia`, `Helvetica Neue`, `ui-monospace`) are defined but render very differently — in environments where Google Fonts fail, the system collapses to generic editorial defaults and loses its identity.
- **The Instrument Serif italic axis is loaded** but used only for the manifesto-scale quote treatment. Other italic moments (an `<em>` inside a body paragraph, for instance) will not stylistically signal the same as the dedicated italic display.
- **The system has no chart engine** — the data slide uses inline `style="width: XX%"` on bar divs. Building dynamic charts requires computing widths in JS or templating the markup server-side.
- **The block-tile underprint uses hardcoded grid positions** (`grid-column: 1 / 3; grid-row: 6 / 9;`) per tile. Tiles are decorative and the placements are tuned per surface; there is no parametric tile placement system.
- **The vertical rail-label uses a rotated transform** that can produce subtle subpixel rendering artifacts on some browsers. The label is decorative; if rendering looks off, it can safely be dropped.
- **The slide navigation has no slide indicator beyond the pagenum.** There are no dot-rails, no progress bar, no thumbnail bar. The pagenum text is the only positional cue.
- **The crossfade transition is screen-only** and doesn't degrade to a sensible print/static state. Capturing slides for PDF export requires manual screenshot per surface.
- **The cover and colophon footer-band columns use fractional widths** (`1.1fr 1fr 1.4fr 2fr` and `1.2fr 1.1fr 1fr 1.4fr`). These ratios are tuned to the demo content and may need adjusting if footer cells carry significantly different text length.
- **The system loads Google Fonts with `ital` axis for Instrument Serif** but only `wght` axes for Archivo and JetBrains Mono. Adding italic body or italic mono moments requires updating the font-loading request.
````

---

## 2. 글씨체

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

---

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

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

**1장(표지)에서 처음 나오는 부품**
- `.band` — 1장 — 예: `<div class="band">`
- `.bloom` — 1·2·3·4·5·6장 — 예: `<div class="bloom" style="left:36%;top:14%;width:64%;height:78%">`
- `.display` — 1장 — 예: `<h1 class="display">`
- `.ember` — 1·3·5장 — 예: `<div class="ember" style="left:-6%;bottom:-20%">`
- `.gk` — 1장 — 예: `<em class="gk">`
- `.gl` — 1장 — 예: `<div class="ml gl">`
- `.ml` — 1·2·3·4·5·6장 — 예: `<div class="ml ">`
- `.rail` — 1장 — 예: `<div class="rail">`
- `.slide` — 1·2·3·4·5·6장 — 예: `<section class="slide">`
- `.tiles` — 1장 — 예: `<div class="tiles">`
- `.unit` — 1장 — 예: `<p class="unit">`

**2장(흐름·단계)에서 처음 나오는 부품**
- `.cap` — 2장 — 예: `<p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03…`
- `.col2` — 2장 — 예: `<div class="col2">`
- `.def` — 2장 — 예: `<p class="def">`
- `.hd` — 2·3·4·5·6장 — 예: `<h2 class="hd">`
- `.in` — 2·4장 — 예: `<div class="ml in">`
- `.links` — 2·5장 — 예: `<div class="links">`
- `.lk` — 2·5·6장 — 예: `<button class="lk" data-act="step">`
- `.nr` — 2·3·5장 — 예: `<p class="nr">`
- `.panel` — 2·4장 — 예: `<div class="panel">`
- `.sn` — 2·4·5·6장 — 예: `<span class="sn">`
- `.strand` — 2·4·5·6장 — 예: `<div class="strand" data-s="1">`
- `.strands` — 2·6장 — 예: `<div class="strands">`

**3장(숫자와 그래프)에서 처음 나오는 부품**
- `.lb` — 3·4·5·6장 — 예: `<span class="lb">`
- `.ledger` — 3장 — 예: `<div class="ledger">`
- `.lh` — 3장 — 예: `<div class="lr lh">`
- `.lit` — 3장 — 예: `<div class="lr lit">`
- `.lr` — 3장 — 예: `<div class="lr lh">`
- `.mono` — 3·4·5·6장 — 예: `<span class="mono">`
- `.nm` — 3장 — 예: `<b class="nm">`
- `.src` — 3장 — 예: `<p class="src">`
- `.st` — 3장 — 예: `<div class="st">`
- `.stats` — 3장 — 예: `<div class="stats">`
- `.track` — 3장 — 예: `<span class="track">`

**4장(비교와 표)에서 처음 나오는 부품**
- `.cb` — 4장 — 예: `<div class="cb">`
- `.col4` — 4장 — 예: `<div class="col4">`
- `.left` — 4장 — 예: `<div class="panel left">`
- `.lst` — 4장 — 예: `<div class="lst">`
- `.qt` — 4장 — 예: `<blockquote class="qt">`
- `.tbl` — 4장 — 예: `<div class="tbl">`
- `.th` — 4장 — 예: `<div class="tr th">`
- `.tr` — 4장 — 예: `<div class="tr th">`

**5장(확인(퀴즈·빈칸))에서 처음 나오는 부품**
- `.blank` — 5장 — 예: `<button class="blank" data-blank aria-pressed="false">`
- `.blk` — 5장 — 예: `<div class="blk">`
- `.fb` — 5장 — 예: `<p class="fb" data-fb>`
- `.mk` — 5장 — 예: `<span class="mono mk">`
- `.opt` — 5장 — 예: `<button class="opt" data-opt="0">`
- `.opts` — 5장 — 예: `<div class="opts">`
- `.ot` — 5장 — 예: `<span class="ot">`
- `.q` — 5장 — 예: `<h3 class="q">`
- `.quiz` — 5장 — 예: `<div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해…`
- `.split` — 5장 — 예: `<div class="split">`
- `.wl` — 5장 — 예: `<span class="lb wl">`
- `.words` — 5장 — 예: `<p class="words">`

**6장(디자인 안내(시연))에서 처음 나오는 부품**
- `.bl6` — 6장 — 예: `<div class="box6 bl6" id="by-bloom">`
- `.box6` — 6장 — 예: `<div class="box6 bl6" id="by-bloom">`
- `.br6` — 6장 — 예: `<div class="box6 br6" id="by-bar">`
- `.d6` — 6장 — 예: `<div class="d6">`
- `.dh` — 6장 — 예: `<div class="dh">`
- `.mx` — 6장 — 예: `<i class="mx" style="height:75.8px">`
- `.s6l` — 6장 — 예: `<div class="strands s6l">`
- `.sig6` — 6장 — 예: `<div class="sig6">`
- `.sw6` — 6장 — 예: `<p class="sw6">`
- `.tl6` — 6장 — 예: `<div class="box6 tl6" id="by-tile">`

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

**직접 쓰지 말 것**: 엔진이 상태를 나타내려고 붙이는 클래스(`.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="biennale-yellow">
<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=Instrument+Serif:ital@0;1&family=Archivo:wght@400;600&family=JetBrains+Mono:wght@400&display=swap">
<!-- 이 디자인의 공통 CSS(글씨체·색·부품 모양). 이 줄은 지우거나 바꾸지 마세요 -->
<link rel="stylesheet" href="https://k-slide.web.app/kit/v1/biennale-yellow.css">
<style>
/* === 추가 부품: 새 클래스가 꼭 필요할 때만 이 줄 아래에 정의하세요(공통 CSS는 위 <link>가 이미 불러옴 — 여기에 옮겨 쓰지 않음) === */
</style>
</head>
<body>
<div class="deck-viewport">
  <main class="deck-stage" id="deckStage">
<section class="slide">
  <div class="bloom" style="left:36%;top:14%;width:64%;height:78%"></div><div class="ember" style="left:-6%;bottom:-20%"></div>
  <div class="tiles"><i style="grid-column:1/3;grid-row:6/9;opacity:0.55"></i><i style="grid-column:3/5;grid-row:1/3;opacity:0.4"></i><i style="grid-column:2/4;grid-row:3/5;opacity:0.3"></i><i style="grid-column:4/5;grid-row:6/9;opacity:0.5"></i></div>
  <div class="ml "><span>초등 과학 · 6학년 2학기 · 1단원 · 3~4차시</span></div>
  <div class="rail">2026<br>— 3~4차시</div>
  <p class="unit">계절의 변화<span>Sun, Shadow & Temperature</span></p>
  <div class="ml gl"><span>학습 목표</span></div>
  <h1 class="display">하루 동안 <em class="gk">태양 고도</em>,<br><em class="gk">그림자 길이</em>, <em class="gk">기온</em>의 관계</h1>
  <div class="band">
    <div><b>과목</b><span>초등 과학 · 6학년 2학기</span></div>
    <div><b>단원</b><span>1단원 계절의 변화</span></div>
    <div><b>차시</b><span>3~4차시</span></div>
    <div><b>학교</b><span>00초등학교</span></div>
  </div>
</section>
<section class="slide" data-steps="4">
  <div class="bloom" style="left:-16%;top:46%;width:56%;height:66%"></div>
  <div class="panel"><div class="ml in"><span>FIG. 01 — 태양 고도 측정기</span></div><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>막대기의 그림자와 실이 이루는 각 = 태양 고도</p></div>
  <div class="col2">
    <div class="ml "><span>측정 준비</span></div>
    <h2 class="hd">태양 고도 측정기 만들기</h2>
    <p class="def"><b>태양 고도</b> — 태양이 지표면과 이루는 각</p>
    <div class="strands"><div class="strand" data-s="1"><span class="sn">01</span><div><h3>자 붙이기</h3><p>우드록 한쪽에 양면테이프로 자를 붙여요</p></div></div><div class="strand" data-s="2"><span class="sn">02</span><div><h3>수수깡 꽂기</h3><p>수수깡을 10cm 정도 잘라 자의 '0' 위치에 수직으로 꽂아요</p></div></div><div class="strand" data-s="3"><span class="sn">03</span><div><h3>실 묶기</h3><p>수수깡 끝에 실을 묶어요</p></div></div><div class="strand" data-s="4"><span class="sn">04</span><div><h3>각도기 끼우기</h3><p>실의 다른 끝을 각도기 가운데 구멍에 끼워요</p></div></div></div>
    <div class="links"><button class="lk" data-act="step">다음 단계 →</button><button class="lk" data-act="reset">처음부터</button><p class="cap" data-caps="[&quot;버튼을 눌러 순서대로 만들어 보세요&quot;,&quot;01 자 붙이기&quot;,&quot;02 수수깡 꽂기&quot;,&quot;03 실 묶기&quot;,&quot;04 각도기 끼우기&quot;]">버튼을 눌러 순서대로 만들어 보세요</p></div>
  </div>
  <p class="nr">버튼 규칙 없음 → 라벨 글자 + 1px 밑줄으로 표현</p>
</section>
<section class="slide">
  <div class="bloom" style="left:44%;top:-18%;width:62%;height:74%"></div><div class="ember" style="left:-8%;bottom:-24%"></div>
  <div class="ml "><span>측정 결과</span></div>
  <h2 class="hd">하루 동안 무엇이 어떻게 변할까요?</h2>
  <div class="stats"><div class="st"><b class="nm">12:30</b><span class="lb">남중 시각</span><p>태양 고도가 가장 높아요 <span class="mono">무렵 · 남중</span></p></div><div class="st"><b class="nm">정남</b><span class="lb">남중 방향</span><p>남중할 때 태양의 위치 <span class="mono">쪽</span></p></div><div class="st"><b class="nm">14:30</b><span class="lb">최고 기온</span><p>기온이 가장 높아요 <span class="mono">무렵</span></p></div><div class="st"><b class="nm">9:30</b><span class="lb">가장 긴 그림자</span><p>그림자가 가장 길어요 <span class="mono">· 15:30</span></p></div></div>
  <div class="ledger">
    <div class="lr lh"><span>시각</span><span>태양 고도 (°) — 예시 값</span><span></span><span>그림자 길이 (cm)</span><span>기온 (℃)</span></div>
    <div class="lr"><span class="mono">9:30</span><span class="track"><i style="width:63%"></i></span><span class="mono">38°</span><span class="mono">12.9</span><span class="mono">22</span></div><div class="lr"><span class="mono">10:30</span><span class="track"><i style="width:80%"></i></span><span class="mono">48°</span><span class="mono">9.1</span><span class="mono">23.8</span></div><div class="lr"><span class="mono">11:30</span><span class="track"><i style="width:92%"></i></span><span class="mono">55°</span><span class="mono">7</span><span class="mono">25.2</span></div><div class="lr lit"><span class="mono">12:30</span><span class="track"><i style="width:95%"></i></span><span class="mono">57°</span><span class="mono">6.4</span><span class="mono">26.3</span></div><div class="lr"><span class="mono">13:30</span><span class="track"><i style="width:90%"></i></span><span class="mono">54°</span><span class="mono">7.2</span><span class="mono">27</span></div><div class="lr"><span class="mono">14:30</span><span class="track"><i style="width:78%"></i></span><span class="mono">47°</span><span class="mono">9.4</span><span class="mono">27.4</span></div><div class="lr"><span class="mono">15:30</span><span class="track"><i style="width:62%"></i></span><span class="mono">37°</span><span class="mono">13.4</span><span class="mono">26.9</span></div>
  </div>
  <p class="src">예시 값 — 태양 고도·그림자(10cm 막대)는 9월 중순 북위 36° 기준 계산, 기온은 교과서 그래프 모양을 따른 값</p>
  <p class="nr">꺾은선 규칙 없음 → 장부 행의 숫자 열으로 표현</p>
</section>
<section class="slide">
  <div class="bloom" style="right:-18%;bottom:-30%;width:60%;height:70%"></div>
  <div class="panel left"><div class="cb"><div class="ml in"><span>HIGH</span></div><h3>태양 고도가 높을 때</h3><p>그림자 길이는 짧아져요</p><p>기온은 높아져요</p></div><div class="cb"><div class="ml in"><span>LOW</span></div><h3>태양 고도가 낮을 때</h3><p>그림자 길이는 길어져요</p><p>기온은 낮아져요</p></div></div>
  <div class="col4">
    <div class="ml "><span>관계 정리</span></div>
    <h2 class="hd">태양 고도가 바뀌면 무엇이 달라질까요?</h2>
    <div class="tbl"><div class="tr th"><span>시각</span><span>태양 고도</span><span>그림자 길이</span><span>기온</span></div><div class="tr"><span class="mono">오전 9:30</span><span>낮아요</span><span>길어요</span><span>낮아요</span></div><div class="tr"><span class="mono">낮 12:30</span><span>가장 높아요</span><span>가장 짧아요</span><span>높아지는 중</span></div><div class="tr"><span class="mono">오후 14:30</span><span>낮아지는 중</span><span>길어지는 중</span><span>가장 높아요</span></div></div>
    <div class="lst"><span class="lb">남중</span><div class="strand"><span class="sn">1</span><p>태양이 정남쪽에 있을 때 '남중했다'고 해요</p></div><div class="strand"><span class="sn">2</span><p>이때의 태양 고도를 남중 고도라고 해요</p></div></div>
    <blockquote class="qt"><p>「태양 고도가 가장 높은 시각과 기온이 가장 높은 시각에는 차이가 있어요.」</p><span>— 오늘의 정리</span></blockquote>
  </div>
</section>
<section class="slide">
  <div class="bloom" style="left:20%;top:52%;width:58%;height:62%"></div><div class="ember" style="right:-8%;top:-20%"></div>
  <div class="ml "><span>확인하기</span></div>
  <h2 class="hd">배운 내용을 확인해 볼까요?</h2>
  <div class="split">
    <div class="quiz" data-quiz data-answer="1" data-right="정답! 태양 고도가 가장 높을 때(남중) 그림자가 가장 짧아요" data-wrong="다시 생각해 볼까요? 태양 고도와 그림자 길이의 관계를 떠올려 보세요">
      <h3 class="q">하루 중 그림자 길이가 가장 짧을 때는?</h3>
      <div class="opts"><button class="opt" data-opt="0"><span class="sn">A</span><span class="ot">오전 9시 30분</span><span class="mono mk"></span></button><button class="opt" data-opt="1"><span class="sn">B</span><span class="ot">낮 12시 30분 무렵</span><span class="mono mk"></span></button><button class="opt" data-opt="2"><span class="sn">C</span><span class="ot">오후 3시 30분</span><span class="mono mk"></span></button></div>
      <p class="fb" data-fb></p>
      <div class="links"><button class="lk" data-act="retry">다시 풀기 ↺</button></div>
    </div>
    <div class="blk">
      <span class="lb">빈칸을 눌러 확인해요</span>
      <div class="strand"><span class="sn">1</span><p><button class="blank" data-blank aria-pressed="false"><span>태양 고도</span></button>는 점점 높아졌다가 다시 낮아진다</p></div><div class="strand"><span class="sn">2</span><p><button class="blank" data-blank aria-pressed="false"><span>그림자 길이</span></button>는 점점 짧아졌다가 다시 길어진다</p></div><div class="strand"><span class="sn">3</span><p><button class="blank" data-blank aria-pressed="false"><span>기온</span></button>은 점점 높아졌다가 다시 낮아진다</p></div>
      <span class="lb wl">오늘의 낱말</span>
      <p class="words">태양 고도 · 남중 고도 · 그림자 길이 · 기온</p>
    </div>
  </div>
  <p class="nr">버튼 규칙 없음 → 라벨 글자 + 1px 밑줄으로 표현 · 빈칸 규칙 없음 → 1px 밑줄 칸으로 표현</p>
</section>
<section class="slide">
  <div class="bloom" style="left:58%;top:-18%;width:52%;height:70%"></div>
  <div class="ml "><span>디자인 안내</span></div>
  <h2 class="hd">이 디자인 사용 설명서</h2>
  <div class="strands s6l">
    <div class="strand"><span class="sn">01</span><div><h3>한눈에</h3><p>비엔날레 도록처럼 <b>종이 + 남색 잉크 하나</b>로 씁니다. 깊이는 그림자 대신 <b>노란 빛 번짐</b>으로 내고, 구조는 1px 선뿐이에요.</p></div></div>
    <div class="strand"><span class="sn">02</span><div><h3>색</h3><p class="sw6"><span><i style="background:#E9E5DB"></i>종이</span><span><i style="background:#1B2566"></i>잉크 남색</span><span><i style="background:#F1EE2E"></i>솔라 옐로</span><span><i style="background:#F8F39B"></i>부드러운 노랑</span><span><i style="background:#E26B4A"></i>엠버(번짐만)</span></p></div></div>
    <div class="strand"><span class="sn">03</span><div><h3>글꼴</h3><p>세리프 Instrument Serif(굵게 금지) → Diphylleia<br>본문·라벨 Archivo → Paperlogy 2ExtraLight · 숫자 JetBrains Mono</p></div></div>
    <div class="strand"><span class="sn">04</span><div><h3>이렇게 쓰면 좋아요</h3><p>전시 안내문처럼 차분한 설명 · 작품·자료 소개 수업에 어울려요. 한 장에 노란 번짐은 하나면 충분해요.</p></div></div>
  </div>
  <div class="sig6">
    <span class="lb">대표 장치 — 눌러 보세요</span>
    <div class="d6"><div class="dh"><h3>노란 빛 번짐</h3><button class="lk" data-demo="#by-bloom" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>노랑 핵 → 번짐 → 헤이즈 → 종이로 퍼지는 원형 빛. 모든 장에 하나 이상 있어요.</p><div class="box6 bl6" id="by-bloom"><i></i><span class="mono">SOLAR 01</span></div></div>
    <div class="d6"><div class="dh"><h3>반투명 노란 타일</h3><button class="lk" data-demo="#by-tile" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>표지 격자 위에 노란 사각형을 곱하기(multiply)로 겹쳐 글자가 비쳐 보여요.</p><div class="box6 tl6" id="by-tile"><b>하루 동안</b><i></i><i></i></div></div>
    <div class="d6"><div class="dh"><h3>가장 높은 막대만 노랑</h3><button class="lk" data-demo="#by-bar" data-mode="toggle" aria-pressed="false">켜기 / 끄기</button></div><p>막대는 모두 잉크 남색, 강조할 하나만 노랑 + 1px 잉크 테두리.</p><div class="box6 br6" id="by-bar"><i class="" style="height:49.199999999999996px"></i><i class="" style="height:63.19999999999999px"></i><i class="" style="height:73px"></i><i class="mx" style="height:75.8px"></i><i class="" style="height:71.6px"></i><i class="" style="height:61.8px"></i><i class="" style="height:47.8px"></i></div></div>
  </div>
</section>
<nav class="dk-nav"><span class="hint">← / → · space</span><span class="dk-count" data-pad></span></nav>
  </main>
</div>

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

---

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

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

```css
/* biennale-yellow — k-slide 공통 CSS v1 (채팅 AI용 받기 .md가 불러옴, 고치지 말 것) */
/* === KOREAN FONTS === */
@font-face{font-family:'kp-2';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/diphylleia/Diphylleia-Regular.woff2") format("woff2");font-weight:400}
@font-face{font-family:'kp-3';font-display:swap;src:url("https://maker-ssam.github.io/korean-ofl-fonts/fonts/paperlogy/Paperlogy-2ExtraLight.woff2") format("woff2");font-weight:200}
/* === THEME === */
:root{--stage-bg:#E9E5DB;--slide-bg:#E9E5DB;
  --kt:'kp-2';--kb:'kp-3';--ka:'kp-3';
  --wt:400;--wb:200}
*{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 무대: 가장자리 76px. 글자는 교실 화면용 최소 28px로 키움) --- */
:root{--paper:#E9E5DB;--deep:#DCD6C4;--sun:#F1EE2E;--soft:#F8F39B;--haze:#F0DA7C;--ink:#1B2566;--ember:#E26B4A;--edge:76px;--soft-line:rgba(27,37,102,.18)}
.slide{background:var(--paper);color:var(--ink);font-family:'Archivo',var(--kb),sans-serif}
.slide>*{position:absolute}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.nr{left:var(--edge);bottom:40px;font-size:18px;opacity:.6}

/* --- 분위기: 노란 빛 번짐(핵 → 번짐 → 헤이즈 → 종이) + 반대쪽 엠버 번짐 + 반투명 타일 --- */
.bloom{border-radius:50%;background:radial-gradient(closest-side,rgba(241,238,46,.9) 0%,rgba(241,238,46,.55) 36%,rgba(240,218,124,.2) 62%,rgba(233,229,219,0) 88%);pointer-events:none}
.ember{width:620px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(226,107,74,.2),rgba(226,107,74,0) 85%);pointer-events:none}
.tiles{inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(8,1fr);pointer-events:none}
.tiles i{background:var(--sun);mix-blend-mode:multiply}

/* --- 라벨: Archivo 600(한글은 대문자·자간 없음) + 아래 18% 선 --- */
.ml{left:var(--edge);top:70px;right:var(--edge);font-weight:600;font-size:28px;padding-bottom:14px;border-bottom:1px solid var(--soft-line)}
.ml span{letter-spacing:0}
.ml.in{position:static}
.lb{display:block;font-weight:600;font-size:28px;padding-bottom:10px;border-bottom:1px solid var(--soft-line)}
.hd{left:var(--edge);right:var(--edge);top:142px;font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:84px;line-height:1.15;letter-spacing:0;white-space:nowrap}
.sn{font-family:'Instrument Serif',serif;font-size:52px;line-height:1}
.strand{display:grid;grid-template-columns:90px 1fr;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--soft-line)}
.strand h3{font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:46px;line-height:1.15}
.strand p{font-size:29px;line-height:1.55}
.strand h3+p{margin-top:4px}
.links{display:flex;gap:48px;align-items:baseline}
.lk{font-weight:600;font-size:32px;padding:0 0 8px;border-bottom:1px solid var(--ink)}
.lk:disabled{border-bottom-color:var(--soft-line);color:rgba(27,37,102,.35)}

/* --- 1. 표지: 단원(작은 세리프 + 이탤릭 영문) + 오른쪽 위 날짜 레일 + 학습 목표(표지 크기 세리프) + 4칸 하단 띠, 반투명 노란 타일 --- */
.rail{right:var(--edge);top:124px;text-align:right;font-family:'Instrument Serif',var(--kt),serif;font-size:92px;line-height:1.02}
.unit{left:var(--edge);top:150px;display:flex;align-items:baseline;gap:30px;font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:72px;line-height:1.1;white-space:nowrap}
.unit span{font:italic 400 64px/1.04 'Instrument Serif',serif;letter-spacing:-.005em}
.ml.gl{top:380px;right:auto;width:560px}
.display{left:var(--edge);top:450px;font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:150px;line-height:1.14;letter-spacing:0;white-space:nowrap}
.display .gk{font-style:normal}
.band{left:var(--edge);right:var(--edge);bottom:110px;display:grid;grid-template-columns:1.2fr 1.3fr 1fr 1fr;gap:40px}
.band div{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.band b{font-weight:600;font-size:26px}
.band span{font-size:30px;line-height:1.5}

/* --- 2. 흐름: 오른쪽 절반 노란 판(측정기 그림 · 잉크 선) + 왼쪽 정의 + 번호 목록 4단계(단계마다 켜짐) + 밑줄 링크 --- */
.panel{top:0;right:0;bottom:0;width:940px;background:var(--soft);padding:70px 60px 110px;display:flex;flex-direction:column;gap:20px;
  --g-ink:var(--ink);--g-acc:var(--ink);--g-stick:var(--ink);--g-ruler:var(--paper);--g-prot:rgba(233,229,219,.55);--g-shadow:var(--ink);--g-font:'Archivo',var(--kb),sans-serif;--g-sw:2;--g-dim:.18}
.panel .gauge{margin-top:30px}
.panel>p{margin-top:auto;font-size:32px;line-height:1.55;border-top:1px solid var(--ink);padding-top:20px}
.col2{left:0;top:0;bottom:0;right:940px}
.col2>*{position:absolute}
.col2 .ml,.col2 .hd{right:60px}
.col2 .hd{font-size:76px}
.def{left:var(--edge);right:60px;top:262px;font-size:30px;line-height:1.5}
.def b{font-weight:600}
.strands{left:var(--edge);right:60px;top:330px;display:flex;flex-direction:column;gap:18px}
.slide[data-step]:not([data-step="0"]) .strands .strand:not(.on){opacity:.35}
.col2 .links{left:var(--edge);right:60px;top:900px;flex-wrap:wrap;row-gap:14px}
.cap{width:100%;font-size:30px;line-height:1.5}

/* --- 3. 숫자와 그래프: 큰 세리프 숫자 4개(1px 윗선) + 장부 행(시각 · 잉크 막대 · 값 · 그림자 · 기온), 가장 높은 막대 = 노랑 + 1px 잉크 --- */
.stats{left:var(--edge);right:var(--edge);top:268px;display:grid;grid-template-columns:repeat(4,1fr);gap:44px}
.st{border-top:1px solid var(--ink);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.st .nm{font-family:'Instrument Serif',var(--kt),serif;font-weight:400;font-size:100px;line-height:1;letter-spacing:0}
.st .lb{border:0;padding:0}
.st p{font-size:28px;line-height:1.45}
.st p .mono{font-size:24px}
.ledger{left:var(--edge);right:var(--edge);top:556px;border-top:1px solid var(--ink)}
.lr{display:grid;grid-template-columns:140px 1fr 110px 220px 180px;gap:28px;align-items:center;padding:7px 0;border-bottom:1px solid var(--soft-line);font-size:28px}
.lr.lh{font-weight:600;font-size:24px;padding:10px 0}
.lr .mono{font-size:28px}
.track{height:24px;position:relative}
.track i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.lr.lit .track i{background:var(--soft);outline:1px solid var(--ink);outline-offset:-1px}
.src{left:var(--edge);right:300px;bottom:84px;font-size:20px;line-height:1.4}

/* --- 4. 비교와 표: 왼쪽 1/3 노란 판(높을 때 | 낮을 때, 1px 선) + 장부 행 표 + 번호 목록(남중) + 「」 인용 --- */
.panel.left{right:auto;left:0;width:640px;padding:150px 64px 110px;gap:0;justify-content:center}
.cb{padding:30px 0}
.cb+.cb{border-top:1px solid var(--ink)}
.cb h3{margin-top:14px;font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:56px;line-height:1.15}
.cb p{margin-top:10px;font-size:32px;line-height:1.55}
.col4{left:640px;top:0;bottom:0;right:0}
.col4>*{position:absolute}
.col4 .hd{font-size:72px}
.tbl{left:var(--edge);right:var(--edge);top:270px;border-top:1px solid var(--ink)}
.tr{display:grid;grid-template-columns:200px 1fr 1fr 1fr;gap:24px;padding:12px 0;border-bottom:1px solid var(--soft-line);font-size:29px}
.tr.th{font-weight:600;font-size:24px}
.tr .mono{font-size:26px}
.lst{left:var(--edge);right:var(--edge);top:560px;display:flex;flex-direction:column;gap:12px}
.lst .strand{grid-template-columns:60px 1fr;padding-bottom:10px}
.lst .sn{font-size:44px}
.qt{left:var(--edge);right:var(--edge);top:800px}
.qt p{font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:46px;line-height:1.4}
.qt span{display:block;margin-top:12px;font-weight:600;font-size:24px}

/* --- 5. 확인하기: 번호 목록형 퀴즈(정답 줄 = 노란 판) | 1px 선 | 빈칸(1px 밑줄 칸) 번호 목록 + 오늘의 낱말 --- */
.split{left:var(--edge);right:var(--edge);top:290px;bottom:120px;display:grid;grid-template-columns:1fr 1fr;gap:80px}
.split>div{position:relative;display:flex;flex-direction:column}
.q{font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:58px;line-height:1.2}
.opts{margin-top:30px;border-top:1px solid var(--ink)}
.opt{width:100%;display:grid;grid-template-columns:80px 1fr 110px;align-items:center;gap:20px;text-align:left;padding:18px 16px;border-bottom:1px solid var(--soft-line)}
.opt .ot{font-family:'Instrument Serif',var(--kt),serif;font-size:42px}
.opt .mk{text-align:right;font-size:26px}
.opt.right{background:var(--soft)}
.opt:disabled:not(.right){color:rgba(27,37,102,.35)}
.fb{margin-top:22px;min-height:96px;font-size:30px;line-height:1.6}
.quiz .links{margin-top:auto}
.blk{border-left:1px solid var(--ink);padding-left:70px;gap:18px}
.blk .strand{grid-template-columns:60px 1fr;align-items:baseline}
.blk .sn{font-size:44px}
.blk .strand p{font-size:32px}
.blank{position:relative;min-width:180px;margin-right:10px;padding:0 8px;border-bottom:1px solid var(--ink);font-weight:600;text-align:center}
.blank span{visibility:hidden}
.blank::after{content:'?';position:absolute;left:0;right:0}
.blank.open{background:var(--soft)}
.blank.open span{visibility:visible}
.blank.open::after{content:none}
.wl{margin-top:auto}
.words{font-family:'Instrument Serif',var(--kt),serif;font-size:48px;line-height:1.3}

/* --- 내비: 쪽번호(오른쪽 아래, 75%) + 안내(왼쪽 아래, 40%) --- */
.dk-nav{inset:0;pointer-events:none}
.dk-count{position:absolute;right:48px;bottom:40px;font:400 24px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--ink);opacity:.75}
.hint{position:absolute;right:200px;bottom:40px;font:400 22px 'JetBrains Mono',monospace;color:var(--ink);opacity:.4}
/* --- 6. 디자인 안내: 번호 목록 설명 | 시연 3개(1px 잉크 윗선, 밑줄 링크 버튼) --- */
.s6l{right:auto;width:960px;top:270px;gap:16px}
.s6l .strand h3{font-size:40px}
.s6l .strand p{font-size:26px;line-height:1.5}
.s6l b{font-weight:600}
.sw6{display:flex;flex-wrap:wrap;gap:6px 22px}
.sw6 i{display:inline-block;width:26px;height:26px;margin-right:8px;vertical-align:-6px;border:1px solid var(--ink)}
.sig6{left:1110px;right:var(--edge);top:250px;display:flex;flex-direction:column;gap:16px}
.d6{border-top:1px solid var(--ink);padding-top:12px}
.d6 .dh{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.d6 h3{font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:38px}
.d6 .lk{font-size:24px;padding-bottom:4px}
.d6 .lk[aria-pressed="true"]{border-bottom-width:3px}
.d6 p{margin-top:6px;font-size:22px;line-height:1.45}
.box6{position:relative;margin-top:8px;height:90px;overflow:hidden;background:var(--paper);border:1px solid var(--soft-line)}
.bl6 i{position:absolute;left:30%;top:-60%;width:60%;height:220%;border-radius:50%;background:radial-gradient(closest-side,rgba(241,238,46,.9) 0%,rgba(241,238,46,.55) 36%,rgba(240,218,124,.2) 62%,rgba(233,229,219,0) 88%);opacity:0}
.bl6.play i{opacity:1}
.bl6 span{position:absolute;left:20px;bottom:14px;font-size:22px}
.tl6 b{position:absolute;left:24px;top:8px;font-family:'Instrument Serif',var(--kt),serif;font-weight:var(--wt);font-size:64px}
.tl6 i{position:absolute;background:var(--sun);mix-blend-mode:multiply;opacity:0}
.tl6 i:nth-of-type(1){left:120px;top:0;width:200px;height:110px}.tl6 i:nth-of-type(2){left:260px;top:40px;width:220px;height:70px}
.tl6.play i:nth-of-type(1){opacity:.55}.tl6.play i:nth-of-type(2){opacity:.4}
.br6{display:flex;align-items:flex-end;gap:16px;padding:0 20px;border:0;border-bottom:1px solid var(--ink);background:none}
.br6 i{width:44px;background:var(--ink)}
.br6.play i.mx{background:var(--soft);outline:1px solid var(--ink);outline-offset:-1px}

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