/* 온말 홈페이지 — 장면 구조.
페이지를 정보 순서가 아니라 장면 순서로 읽히게 하는 것이 여기 일입니다.
2026-08-03: 그전까지 모든 섹션이 section{padding:92px 0} 하나로 똑같이 떨어져
있었습니다. 정보로는 옳지만 읽는 사람에게는 전부 같은 크기의 외침입니다 —
어디가 중요한지 여백이 말해주지 않습니다.
🔴 이 파일은 motion.css 와 다릅니다. 지우면 안 됩니다.
motion.css 는 지워도 사이트가 완성돼 보여야 하는 움직임이고,
여기는 움직임 없이도 남아야 하는 편집입니다. 스크롤을 멈추고 봐도
장면의 호흡이 보여야 합니다.
🔴 styles/home.css 를 건드리지 않습니다. 여기서 덮어씁니다 — home.css 뒤에
실리므로 같은 명시도면 이깁니다. 파일을 나눈 이유는 되돌리기를 하나로 두기
위해서입니다(이 파일 링크 한 줄만 지우면 옛 리듬으로 돌아옵니다).
장면 나눔 — 이름이 붙은 섹션을 이정표로 씁니다. :nth-of-type 은 쓰지 않습니다.
섹션을 하나 끼워 넣는 순간 리듬이 통째로 밀리기 때문입니다. */
/* ── 1막 · 오프닝 ─────────────────────────────────────────────────────────
히어로와 #how 는 한 호흡입니다. "무엇인가"와 "어떻게 되는가" 사이를
벌리면 첫 화면에서 이야기가 한 번 끊깁니다. */
#how { padding-top: 56px; }
/* ── 오프닝 한 컷 ─────────────────────────────────────────────────────────
히어로를 한 열로 폅니다. 그전에는 글과 그림이 반씩 나눠 가져서, 첫 문장이
쓸 수 있는 폭이 488px 뿐이었습니다 — 거기서는 아무리 키워도 "듣습니다."가 세 줄로
깨지고 "다." 한 글자가 홀로 떨어집니다(실제로 그랬습니다).
글을 먼저 다 보여주고 그림을 아래에 두면 첫 문장이 폭을 전부 씁니다. 한 화면에
생각 하나 — 첫 화면에서 두 가지를 동시에 읽히려 하지 않습니다.
⚠️ 그림이 접히는 자리로 내려갑니다. 의도한 것입니다. 다만 그림 자체는 폭을
묶습니다 — 1032px 로 늘리면 모의 창의 자막이 우스울 만큼 넓어집니다. */
.hero {
grid-template-columns: 1fr;
gap: 52px;
padding: 64px 0 8px;
}
/* ⚠️ 최소값이 중요합니다. 44px 로 두면 375px 화면에서 "내 말로 듣습니다." 가
쓸 수 있는 폭(327px)을 넘어 또 세 줄이 됩니다 — 큰 화면만 보고 정하면
작은 화면에서 정확히 같은 결함이 돌아옵니다. */
.hero h1 { font-size: clamp(34px, 7.6vw, 96px); line-height: 1.12; }
.hero .lede { font-size: 20px; max-width: 42ch; }
.hero .frame { max-width: 860px; }
/* ── 2막 · 보여주는 장면 ──────────────────────────────────────────────────
증거(용어집 실측)와 실물(진짜 화면)입니다. 영화에서 무엇을 보여주기 직전에
한 박자 쉬는 것과 같은 자리 — 앞에 긴 사이를 둡니다. */
#glossary { padding-top: 150px; }
#shots { padding-top: 132px; }
/* ── 극장 ─────────────────────────────────────────────────────────────────
보여주는 장면 둘을 감싼 띠. .wrap 밖에 있어 저절로 화면 전체 폭입니다 —
100vw 로 비집고 나가면 세로 스크롤바 폭까지 세어 가로 스크롤이 생깁니다.
⚠️ 라이트 테마에서는 --night 가 흰색이라 더 밝은 띠가 됩니다. 뒤집힌 것이
아니라 의도한 것입니다 — 어두운 데서는 불이 꺼지고 밝은 데서는 화면이 켜집니다.
어느 쪽이든 "여기는 다른 자리"라는 말은 같습니다. */
.reel {
/* --night 는 --ink 와 너무 가까워 "패널 하나"로만 보였습니다(2026-08-03 실측).
--indigo 가 두 테마 모두에서 한 칸 더 떨어져 "다른 자리"로 읽힙니다. */
background: var(--indigo);
margin-block: 72px;
/* 🚫 구분선을 긋지 않습니다. 애플 홈페이지를 뜯어보면 타일 사이에 선이 하나도
없습니다 — 바탕과 여백만으로 나눕니다. 선을 그으면 "구획"이 되고, 안 그으면
"다음 장면"이 됩니다. 처음엔 border-block 을 넣었다가 뺐습니다. */
}
/* ── 그림이 주인공 ────────────────────────────────────────────────────────
애플 타일에서 제품 사진은 글의 폭에 갇히지 않고 가장자리까지 갑니다.
여기서는 글보다 한 뼘 넓게 내보내 같은 말을 합니다.
⚠️ 넓힐 자리가 있을 때만 합니다. .wrap 은 1080px 에서 멈추므로 화면이 1240px
보다 좁으면 밖으로 나간 만큼 가로 스크롤이 생깁니다 — 아티팩트 규격이
금지하는 것이고, 좁은 화면에서만 나타나 놓치기 쉬운 종류입니다. */
@media (min-width: 1240px) {
.reel .shot-view { margin-inline: -72px; }
}
/* 띠 안에서는 위아래 여백을 띠가 맡습니다 — 섹션이 각자 또 벌리면 띠만 길어집니다.
⚠️ 띠 안 순서는 #shots → #glossary 입니다. 첫 장면이 위를, 마지막 장면이 아래를
맡습니다 — 순서를 바꾸면 여기도 함께 옮기십시오. */
.reel #shots { padding-top: 132px; }
.reel #glossary { padding: 124px 0 132px; }
/* ── 크기 ─────────────────────────────────────────────────────────────────
장면 하나에 생각 하나. 제목이 본문 크기에 가까우면 전부 같은 목소리가
되어 어디서 숨을 쉬어야 할지 알 수 없습니다. 장면 제목을 확실히 키웁니다.
⚠️ home.css 의 h2 는 clamp(27px,3.4vw,38px) 입니다. 여기서 덮어쓰되
home.css 를 고치지 않습니다 — 되돌리기를 이 파일 하나로 두기 위해서입니다.
🚫 음수 자간을 걸지 않습니다. 라틴 제목은 크게 쓸수록 자간을 좁히는 것이
보통이지만 이 사이트의 제목은 기본이 한국어이고 31개 언어로 번역됩니다 —
한글·가나·한자는 좁히면 글자가 서로 붙습니다. 언어별로 풀어 주는
:lang() 규칙이 이 저장소에는 아직 없습니다(계획서 §6 의 접근성 항목,
C7 예정). 그것이 들어오기 전에는 걸면 안 됩니다. */
/* 제목이 커지면 마지막 줄에 글자 한둘만 남는 일이 잦아집니다("…올라옵 / 니다.").
balance 는 줄 길이를 고르게 나눠 그 꼴을 없앱니다. 본문에는 걸지 않습니다 —
긴 글에서는 브라우저가 줄 수를 제한해 두었고 효과도 없습니다.
🔴 .pin 갈래를 지우지 마십시오. 붙여 두는 섹션(#how·#shots)은 머리와 본문을
.pin 으로 한 번 감싸므로 section > h2 가 조용히 안 맞습니다.
2026-08-03 에 실제로 그랬습니다 — balance 를 걸어 없앴던 "…올라옵 / 니다." 가
#how 를 붙이는 순간 그대로 돌아왔고, 검사기는 아무 말도 하지 않았습니다. */
.hero h1,
section > h2,
section > .pin > h2 { text-wrap: balance; }
/* 크기는 애플 제품 페이지에서 직접 재서 맞췄습니다
(apple.com/kr/macbook-air, 창 1280px, 2026-08-03):
섹션 제목 80px / 줄높이 92px (1.15) / 700~817px 폭으로 흐름
하위 제목 56 · 48px
제목 밑 설명 21px / 32px, 회색
온말은 같은 자리가 60 · 48 · 19px 이었습니다 — 한 층 낮아 설명서처럼 읽혔습니다.
⚠️ 그대로 80px 을 쓰지는 않습니다. 애플 제목은 짧은 한 마디("가능성에 날개를.")이고
온말 제목은 문장("말이 끝나기도 전에 자막이 올라옵니다.")이라, 같은 크기면 석 줄이
됩니다. 한 단계만 올려 76 · 62 로 둡니다.
🚫 여기서 자간을 좁히지 마십시오 — 위 §2 주석의 이유가 그대로입니다. */
.reel h2 { font-size: clamp(36px, 6.4vw, 76px); line-height: 1.14; }
#how h2,
#audio h2,
#hands h2 { font-size: clamp(32px, 5.4vw, 62px); line-height: 1.16; }
/* 제목이 커졌으니 아래 설명도 함께 커져야 균형이 맞습니다(애플 21px). */
.reel .sub-lede,
#how .sub-lede,
#audio .sub-lede,
#hands .sub-lede { font-size: 21px; max-width: 46ch; }
/* ── 3막 · 기술 ───────────────────────────────────────────────────────────
소리와 손. 여기는 설명이라 기본 호흡으로 돌아옵니다(92px). 규칙을 두지 않는
것도 편집입니다 — 모든 장면에 연출을 걸면 아무 장면도 도드라지지 않습니다. */
/* ── 막간 ─────────────────────────────────────────────────────────────────
이름의 뜻. 짧고 조용한 한 문단이라 사방을 비웁니다. 페이지에서 유일하게
아무것도 설득하지 않는 자리입니다. */
#name { padding: 168px 0 156px; }
#name .sub-lede { max-width: 52ch; }
/* ── 크레딧 ───────────────────────────────────────────────────────────────
앞으로 · 자주 묻는 질문 · 법적 고지. 끝나가는 호흡으로 넓게 풉니다.
#roadmap 이후 전부를 이 규칙 하나로 잡습니다 — 사이에 섹션이 늘어도 따라옵니다. */
#roadmap,
#roadmap ~ section { padding: 116px 0; }
/* 마지막 장면은 아래를 더 비웁니다. 푸터가 바로 붙으면 끝난 느낌이 안 납니다.
⚠️ 앞의 `#roadmap ~ section` 은 명시도 (1,0,1) 이라 그냥 `#legal` (1,0,0) 로는
못 이깁니다. 뒤에 썼는데도 조용히 116px 이 남습니다 — 실제로 그랬습니다.
아이디 둘로 올려 (2,0,0) 을 만듭니다. */
#roadmap ~ #legal { padding-bottom: 148px; }
/* ── 좁은 화면 ────────────────────────────────────────────────────────────
호흡을 비율로 줄입니다. 넓은 화면의 150px 을 그대로 두면 휴대폰에서는
빈 화면만 두 번 넘기게 됩니다 — 사이가 아니라 공백이 됩니다. */
@media (max-width: 880px) {
/* ⚠️ home.css 의 좁은 화면 규칙(.hero{padding-top:34px})은 이 파일이 뒤에 실려
이미 졌습니다. 여기서 다시 잡아 주지 않으면 휴대폰에서 위가 64px 로
벌어진 채 남습니다 — 파일을 나눌 때 흔히 놓치는 자리입니다. */
.hero { gap: 36px; padding: 28px 0 4px; }
.hero .lede { font-size: 17.5px; }
.reel { margin-block: 44px; }
.reel #shots { padding-top: 76px; }
.reel #glossary { padding: 72px 0 76px; }
#how { padding-top: 40px; }
#glossary { padding-top: 92px; }
#shots { padding-top: 84px; }
#name { padding: 104px 0 96px; }
#roadmap,
#roadmap ~ section { padding: 78px 0; }
#roadmap ~ #legal { padding-bottom: 96px; } /* 위와 같은 명시도 이유 */
}