/* 온말 홈페이지 — 움직임.
🔴 이 파일을 지우면 사이트가 완성된 채로 남아야 합니다. 정적 상태가 곧
폴백입니다. 여기에 "없으면 화면이 이상해지는 것"을 넣지 마십시오 —
그런 것은 scene.css(편집)나 home.css(형태)로 갑니다.
두 겹으로 막습니다:
① 링크에 media="(prefers-reduced-motion: no-preference)" — 축소 모션이면 받지도 않습니다
② 파일 안에서도 같은 조건으로 감쌉니다 — 아티팩트는 이 파일을 인라인하므로
①이 사라집니다. 감싸지 않으면 아티팩트에서만 축소 모션이 무시됩니다.
🔴 스크롤 구동은 전부 @supports 안입니다. 밖으로 새면 지원하지 않는
브라우저에서 opacity:0 이 그대로 굳어 글이 통째로 안 보입니다 —
움직임이 없는 것보다 나쁩니다.
🚫 법 문서(privacy · terms · licenses)에는 걸지 않습니다. 빌드가 첫 화면
라우트로만 스코프합니다. 법은 조용해야 합니다. */
@media (prefers-reduced-motion: no-preference) {
/* ── 스크롤이 곧 재생 ─────────────────────────────────────────────────────
#shots 를 화면에 붙여 두고 섹션을 길게 늘립니다. 그 구간을 지나는 동안
휠을 내리면 홈 → 설정 → 정보 가 저절로 넘어갑니다 — 영상을 넘기듯이.
🔴 스크롤 하이재킹이 아닙니다. 스크롤 양과 페이지 이동은 1:1 그대로이고,
상자만 제자리에 머뭅니다. 휠을 굴린 만큼 정확히 갑니다.
🔴 넘기는 일은 site.js 가 data-shot 한 곳만 바꿔서 합니다. 여기서
img 를 직접 건드리면 테마 전환과 두 곳이 같은 것을 다투게 됩니다
(home.css 의 경고 그대로 — 라이트에서 다크 화면이 뜨는 사고가 그것이었습니다).
⚠️ @supports 밖입니다 — sticky 는 스크롤 구동 애니메이션이 아니라 배치라
animation-timeline 울타리와 상관이 없습니다.
🔴 상한을 절대값으로 겁니다. 순수 180vh 로 두면 화면이 큰 만큼 늘어납니다 —
세로가 긴 모니터에서는 넘기는 데 스크롤을 한참 굴려야 하고, 전체 페이지
촬영(11,600px 창)에서는 20,880px 이 되어 문서가 터집니다.
⚠️ 늘린 높이만큼 문서가 길어집니다. tools/shoot.ps1 의 index 높이를 함께 보십시오.
🔴 늘리는 자리는 ::after 입니다 — padding 이 아닙니다. sticky 가 움직일 수
있는 범위는 담는 블록의 콘텐츠 상자인데 padding 은 그 바깥입니다.
padding-bottom 으로 늘리면 섹션만 길어지고 콘텐츠 상자는 상자 높이 그대로라,
.pin 이 한 번도 붙지 않은 채 그냥 지나갑니다. 개발자 도구에는
position: sticky 도 top: 40px 도 멀쩡히 찍히고 data-shot·data-step
도 제대로 오릅니다 — 그림만 안 멈춥니다. 2026-08-03 에 #shots·#how 둘 다
이 상태로 커밋됐고, 숨은 창에서는 속성값만 볼 수 있어 두 번을 놓쳤습니다. */
#shots::after { content: ""; display: block; height: min(180vh, 1500px); }
#shots .pin { position: sticky; }
/* ── 붙은 상자는 화면 가운데에 섭니다 ────────────────────────────────────
🔴 위에 붙이면(top:40px) 아래가 통째로 빕니다. 910px 화면에서 상자가
위 570px 만 쓰고 340px 이 남았습니다 — 재생 중인데 화면 절반이 비어 있으면
멈춘 것처럼 보입니다. 애플은 이 구간에서 한 화면에 하나를 가운데
세웁니다. 상자를 화면 높이만큼 잡고 안에서 가운데 맞춤합니다.
🔴 100vh 에 절대값 상한을 겁니다. 이 파일의 다른 vh 와 같은 이유입니다 —
전체 페이지 촬영(15,000px 창)에서는 100vh 가 그대로 15,000px 이 되어
문서가 터집니다. 상한을 두면 창을 아무리 키워도 1,000px 입니다. */
#shots .pin, #how .pin {
top: 0;
min-height: min(100vh, 1000px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* 붙어 있는 동안 캡션이 바뀌므로 높이가 흔들리지 않게 자리를 잡아 둡니다 —
안 그러면 글자 수가 다른 캡션으로 넘어갈 때 그림이 위아래로 튑니다. */
#shots .shot-cap { min-height: 3.2em; }
/* 🔴 붙일 상자는 화면보다 커서는 안 됩니다. 크면 아래가 잘린 채로 멈춰
캡션이 영영 안 보입니다. 그림은 aspect-ratio 로 높이가 정해지므로 폭에
상한을 걸어 높이를 맞춥니다.
220px 의 내역: 위 여백 40 + 탭·캡션 131 + 아래 숨 쉴 자리 49 (2026-08-03 실측).
⚠️ 이 상한은 세로가 짧을 때만 일합니다. 보통 창에서는 열 너비가 먼저
걸려 그림이 그대로 나옵니다 — 즉 평소 크기를 줄이지 않습니다. */
#shots .shot-view {
max-width: calc((100vh - 220px) * 1180 / 820);
margin-inline: auto;
}
/* ── 네 단계도 차례로 ─────────────────────────────────────────────────────
#shots 와 같은 장치인데 여기는 넘길 그림이 없습니다. 지금 단계만 남기고
나머지를 가라앉힙니다 — 계획서 §2 의 "01~04 가 차례로" 그대로입니다.
🔴 data-step="0" 일 때는 아무것도 가라앉히지 않습니다. 무JS·축소
모션·좁은 화면에서 0 에 머물기 때문입니다. 여기서 0 까지 어둡게 하면
JS 가 없는 사람은 영원히 흐린 글을 보게 됩니다.
⚠️ 가라앉히는 것은 opacity 뿐입니다. 크기나 위치를 건드리면 매 프레임 레이아웃이
다시 돌고, 옆 칸까지 흔들립니다(§2 규칙 3). */
#how::after { content: ""; display: block; height: min(150vh, 1200px); }
#how .pin { position: sticky; } /* 가운데 세우는 규칙은 위 #shots 와 함께 있습니다 */
.flow[data-step] .step { transition: opacity .34s var(--ease); }
.flow[data-step="1"] .step:not(:nth-child(1)),
.flow[data-step="2"] .step:not(:nth-child(2)),
.flow[data-step="3"] .step:not(:nth-child(3)),
.flow[data-step="4"] .step:not(:nth-child(4)) { opacity: .32; }
/* 좁은 화면에서는 붙이지 않습니다. 세로가 짧아 그림과 캡션이 한 화면에 안 들어오면
붙이는 것이 읽기를 방해합니다.
⚠️ 가라앉히기도 함께 끕니다 — 2열로 접힌 상태에서 넷 중 셋이 흐리면
읽던 자리를 잃습니다. */
@media (max-width: 880px), (max-height: 720px) {
#shots::after, #how::after { display: none; }
#shots .pin, #how .pin { position: static; display: block; min-height: 0; }
#shots .shot-view { max-width: none; }
.flow[data-step] .step { opacity: 1 !important; }
}
@supports (animation-timeline: view()) {
/* 장면이 들어오는 방식은 하나뿐입니다 — 아래에서 조금 올라오며 밝아짐.
종류를 늘리면 장면마다 다른 말을 하게 되고, 그 순간 편집이 아니라
효과 모음이 됩니다. 차이는 언제 오느냐로만 냅니다. */
@keyframes scene-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: none; }
}
/* ── 장면 머리 ────────────────────────────────────────────────────────
라벨 → 제목 → 설명 순으로 조금씩 늦게. 읽는 순서와 같은 순서입니다. */
section > .kicker,
section > h2,
section > .sub-lede {
animation: scene-in linear both;
animation-timeline: view();
}
section > .kicker { animation-range: entry 4% entry 38%; }
section > h2 { animation-range: entry 9% entry 46%; }
section > .sub-lede { animation-range: entry 14% entry 54%; }
/* ── 흐름 ─────────────────────────────────────────────────────────────
#glossary 둘 · #audio 셋. 왼쪽부터 차례로 들어옵니다 — 단계에는 순서가
있으니 한꺼번에 나타나면 순서가 사라집니다.
🔴 [data-step] 이 붙은 흐름(#how)은 뺍니다. 그쪽은 스크롤로
재생하는 장면이라 등장 연출과 같은 요소를 다투게 됩니다 —
실행 중인 애니메이션은 일반 선언을 이깁니다. scene-in 의 to 가
opacity:1 이고 fill 이 both 이라, 위의 opacity:.32 가 아무 말 없이
무시됐습니다(2026-08-03 실제로 겪음. data-step 은 제대로 오르는데 흐려지지만
않아서, 원인이 CSS 인지 JS 인지 한참 갈리지 않았습니다). */
.flow:not([data-step]) .step {
animation: scene-in linear both;
animation-timeline: view();
}
.flow:not([data-step]) .step:nth-child(1) { animation-range: entry 6% entry 42%; }
.flow:not([data-step]) .step:nth-child(2) { animation-range: entry 11% entry 47%; }
.flow:not([data-step]) .step:nth-child(3) { animation-range: entry 16% entry 52%; }
.flow:not([data-step]) .step:nth-child(4) { animation-range: entry 21% entry 57%; }
/* ── 줄 목록 ──────────────────────────────────────────────────────────
로드맵 열 줄 · 용어집 팩 다섯 · 단축키 일곱. 위에서 아래로 훑듯이.
⚠️ 상한을 둡니다 — 줄이 늘어도 마지막 줄이 한참 뒤에 오지 않게. */
.road > div {
animation: scene-in linear both;
animation-timeline: view();
animation-range: entry 4% entry 34%;
}
.road > div:nth-child(2) { animation-range: entry 6% entry 36%; }
.road > div:nth-child(3) { animation-range: entry 8% entry 38%; }
.road > div:nth-child(4) { animation-range: entry 10% entry 40%; }
.road > div:nth-child(n+5) { animation-range: entry 12% entry 42%; }
/* ── 카드 ─────────────────────────────────────────────────────────────
법적 고지 카드 셋 · 못 하는 것. */
.legal-cards > *,
.limits > * {
animation: scene-in linear both;
animation-timeline: view();
animation-range: entry 6% entry 44%;
}
.legal-cards > :nth-child(2),
.limits > :nth-child(2) { animation-range: entry 11% entry 49%; }
.legal-cards > :nth-child(3),
.limits > :nth-child(3) { animation-range: entry 16% entry 54%; }
/* ── 실제 화면 ────────────────────────────────────────────────────────
🔴 1180×820 이미지에는 transform 을 걸지 않습니다. 큰 그림을 움직이면
가장자리가 흐려지고, 테마·탭 교차와 겹쳐 두 곳이 같은 것을 다툽니다.
판 전체를 밝아지게만 합니다. */
@keyframes scene-fade { from { opacity: 0; } to { opacity: 1; } }
.shot-view {
animation: scene-fade linear both;
animation-timeline: view();
animation-range: entry 8% entry 46%;
}
}
}