/* ============================================================================
film-case.css — /film 상세 조판 (2026-08-05)
── 왜 `case.css` 를 안 쓰나 ────────────────────────────────────────
2026-08-05 Seal: "필름 작품 상세는 기존 sealkim처럼 각 작품에 최적화된 폼을 쓰고싶어."
`/work` 상세(`case.css`)는 **설명하는 면**이다. 어떻게 접근했고 왜 그렇게 결심했는지를
같은 문법으로 말해야 신뢰가 생긴다. `/film` 상세는 **겪게 하는 면**이라 목적이 다르다.
목적이 다르면 문법이 갈리는 것이 맞다.
── 그렇다고 백지 일곱 장은 아니다 ──────────────────────────────────
`/work` 상세가 여덟 면 동시 조립으로 세 판 연속 반려됐다. 그 자리로 다시 가지 않는다.
· **척추(§1~§4)** = 모든 작품이 공유한다. 진입·크레딧·재생·나가는 길·푸터 착지.
**안 보여야 하는 것들이다.** 방문자가 눈치채면 실패다
· **시그니처(§5~)** = 작품마다 하나. 작품에서 뽑은 **구조 장치**가 그 면의 조판을 지배한다.
장식이 아니라 구조다. 작품이 바뀌면 이 절만 새로 쓴다
⚠ CSS 주석에 별표 강조를 쓰지 않는다 — 별표 둘 뒤 슬래시가 주석 종료 기호가 되고
뒤따르는 @media 블록이 통째로 삼켜진다. `docs/solutions/tool-usage/sol-20260803-004.md`
============================================================================ */
/* ══ 1. 척추 — 지면 · 진입 ═══════════════════════════════════════════
지면은 `body.tone-void` 한 곳에서만 칠한다. 섹션에 배경을 주지 않는다. */
.fc{ position:relative; }
.fc-wrap{ max-width:1180px; margin:0 auto; padding:0 var(--edge); }
/* 히어로 = 영사(映寫).
⛔ **스코프 띠 표현은 2026-08-05 폐기됐다.** Seal: *"five days의 히어로 영상이
풀브리드가 아니네. 이거 고쳐."* 모든 면이 `is-fill`(아래) 을 쓴다.
왜 폐기가 맞았나 — 근거가 이미 무너져 있었다.
원래 논리는 "`five, days` **스틸**은 전부 1920×810(2.37 스코프)이고 단편 다섯은 16:9다.
장편만 판형이 다르다는 사실이 재료에 있으니 히어로도 스코프 띠로 띄운다"였다.
그런데 히어로에 거는 것은 스틸이 아니라 **루프**이고, 그 루프는 2026-08-05 전량 1080p
재컷 때 **1920×1080(16:9)** 이 됐다. 즉 2.37 띠가 16:9 영상의 **위아래를 잘라내고** 있었다.
화면도 좁고 프레임도 손해였다. **재료가 바뀌면 재료에서 나온 결정도 다시 봐야 한다.**
이 규칙(`.fc-scope` 의 2.37)은 스틸을 띠로 거는 자리가 다시 나올 때를 위해 남겨 둔다. */
/* ★`position:relative` 는 장식이 아니라 **안전장치**다 (2026-08-05 버그 수정).
§7 모바일이 `.fc-scope{position:absolute; inset:0}` 로 히어로를 풀블리드로 바꾸는데,
히어로가 위치 잡힌 요소가 아니면 그 `inset:0` 의 기준이 **`.fc`(=main 전체)** 가 된다.
`.fc` 는 §1 첫 줄에서 `position:relative` 라 조용히 담는 그릇 노릇을 한다.
결과 = 히어로 루프가 **면 전체를 덮고**, 위치 안 잡힌 본문(크레딧 스트립·제작 노트·
재생·나가는 길)이 그 아래로 깔려 사라진다. 실제로 `five, days` 모바일이 그 상태였다.
`.fc-hero.is-fill` 은 제가 `relative` 를 갖고 있어 멀쩡했고 — 그래서 `Yellow` 만 보고는
못 찾는다. 히어로 변종이 늘어도 같은 사고가 안 나도록 **밑판에 박는다.** */
.fc-hero{
position:relative;
min-height:100svh; display:flex; flex-direction:column; justify-content:center;
padding:var(--hud) 0 0;
}
.fc-scope{
position:relative; width:100%; aspect-ratio:2.37; overflow:hidden; background:#000;
}
.fc-scope video, .fc-scope img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 16:9 히어로 — 단편 여섯 편은 전부 이쪽이다(디스크 실측: `five, days` 스틸만 1920×810,
나머지는 전부 1920×1080). 판형을 우리가 고르지 않는다. 작품이 찍힌 대로 건다.
⚠ 처음엔 스코프 띠의 비율만 16:9 로 바꿨다. 그러면 **제목이 첫 화면에서 사라진다** —
1440 폭에서 16:9 는 810px 이고 제목까지 얹으면 히어로가 1010px 이 되는데 뷰포트는
813px 이다(실측). 197px 이 접혔다. 비율만 갈아 끼우면 안 되는 자리였다.
그래서 16:9 는 띄우지 않고 **화면을 채운다.** 스코프 띠가 극장에 걸린 장편의 모양이라면
이쪽은 화면비가 같은 영화가 화면을 그대로 먹는 모양이다. 제목은 그 위에 앉는다.
(§7 모바일이 이미 쓰던 처리와 같다 — 폭에 상관없이 한 가지로 선다) */
.fc-hero.is-fill{ position:relative; justify-content:flex-end;
padding:0 0 clamp(30px,6svh,66px); }
.fc-hero.is-fill .fc-scope{ position:absolute; inset:0; aspect-ratio:auto; }
.fc-hero.is-fill .fc-scope::after{
content:""; position:absolute; inset:0;
background:linear-gradient(0deg,rgba(0,0,0,.84),rgba(0,0,0,.16) 48%,rgba(0,0,0,.44));
}
.fc-hero.is-fill .fc-head{ position:relative; z-index:2; }
/* ══ 1-B. 서체 위계 — 얼굴이 둘이다 (2026-08-05) ═══════════════════════
★Seal: *"일반 본문에 쓰는 한국어 서체가 작은 타이틀·중간 타이틀·이미지 설명 구문에
통일적으로 쓰이니까 텍스트 디자인이 전체적으로 너무 빈약해 보여."*
맞는 지적이고 원인이 분명했다. **이 계열은 `Gmarket Sans` 를 한 번도 안 쓰고 있었다.**
확정 서체 넷 중 한글 제목 얼굴이 그것인데(`--title-ko`), `case.css`(=/work)와
`sections.css` 는 쓰고 `film-case.css` 만 처음부터 끝까지 Pretendard 한 벌이었다.
그래서 라벨도 소제목도 캡션도 본문과 **같은 얼굴에 크기만 다른 것**이 됐다.
── 위계 (얼굴 둘 · 세 층) ────────────────────────────────────────
큰 제목 `.fc-h` Pretendard 900 ← 손대지 않는다. 레퍼런스 35곳 실측으로
정하고 Seal 이 승인한 값이다
라벨·소제목·캡션 **Gmarket Sans** ← 새로 가른 층. 본문과 얼굴이 다르다
읽는 본문 `.fc-copy` Pretendard 400
라틴 소문자 라벨(`SCREENPLAY`·`WATCH`·`INDEX`)은 이미 `--body-en`(Onest)이라 그대로 둔다.
⚠ Gmarket Sans 는 **500·700 두 벌만** 있다. 그 밖의 웨이트를 쓰면 합성 볼드가 된다. */
/* ⚠ `--title-ko` 를 그대로 걸면 **라틴까지 Gmarket** 이 된다. 크레딧처럼 한글·라틴이
섞인 줄에서 이 면에만 라틴 얼굴이 하나 더 생기는 셈이라(사이트 라틴 = Onest) 스택으로 가른다.
Onest 에 한글이 없으므로 한글만 Gmarket 으로 떨어진다 — 한 줄 안에서 자동으로 갈린다.
`case.css` 가 `.is-ko` 로 한글 전용 요소를 표시해 온 것과 같은 문제를, 클래스가 아니라
스택으로 푼다(섞인 줄에는 `.is-ko` 를 못 붙인다). */
.fc{ --label-ko:"Onest","Gmarket Sans",sans-serif; }
.fc-head{ padding:26px var(--edge) 0; }
.fc-kick{
display:flex; align-items:center; gap:.9em; margin-bottom:12px;
font-family:var(--label-ko); font-size:12.5px; font-weight:700; letter-spacing:.22em;
color:rgba(255,255,255,.7);
}
.fc-kick > span:first-child{ color:var(--accent); }
.fc-title{
font-family:var(--display-en); font-weight:400; color:var(--ink);
font-size:clamp(40px,6.4vw,104px); line-height:.9; letter-spacing:-.015em;
}
/* ══ 2. 척추 — 크레딧 스트립 ═════════════════════════════════════════
`/work` 상세에서 선 헤어라인 크레딧을 이 계열에도 쓴다. 로고를 제단처럼 세우지 않는다.
(`/work` 1차 조판이 "조악한 로고"로 반려된 자리다) */
.fc-strip{
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px 34px;
padding:30px 0; border-top:1px solid rgba(255,255,255,.16);
border-bottom:1px solid rgba(255,255,255,.16);
}
.fc-strip dt{
font-family:var(--body-en); font-size:10px; font-weight:600; letter-spacing:.24em;
text-transform:uppercase; color:var(--dim); margin-bottom:9px;
}
.fc-strip dd{ font-family:var(--label-ko); font-weight:500; font-size:14.5px; line-height:1.7; color:var(--ink); }
/* ══ 3. 척추 — 제목 · 본문 · 인용 ════════════════════════════════════ */
/* ── 제목층 (2026-08-05 신설) ─────────────────────────────────────
★`/film/yellow` 1차 조판이 여기서 반려됐다.
2026-08-05 Seal: *"텍스트 디자인이 매우 애매해. 아마추어틱한 느낌을 지워줘."*
원인은 장식이 모자란 게 아니라 **위계가 없었던 것**이다. 진단 셋:
① 제목이 아예 없었다. 크레딧 스트립 다음에 곧바로 본문이 시작됐다
② 확정 제목 얼굴(Gmarket Sans)이 그 면에서 **한 번도 안 쓰였다.** 전부 본문 서체였다
③ 행폭이 통 끝(1180px)까지 늘어져 한글이 한 줄에 60자 넘게 들어갔다
그리고 문단 셋이 거의 같은 크기로 쌓였다. **어중간한 차이가 제일 아마추어틱하다** —
차이를 둘 거면 확실히 두고, 안 둘 거면 아예 같게 둔다.
★시그니처 절(§5)이 아니라 **척추에 둔다.** 상세면은 어느 작품이든 제목이 필요하다.
지역 문법 파일에 가둬 두면 다음 면이 못 찾거나 한 벌 더 쓴다
(`docs/solutions/architecture/sol-20260805-002.md` 에서 세 번 밟은 자리다).
⚠ `max-width` 는 **글 자신에게 em 으로** 준다. 통에 주면 통의 서체 크기(16px)가
기준이 되어 제목에는 턱없이 좁은 폭이 걸린다(§7 의 `ch` 함정과 같은 종류). */
/* ★2026-08-05 Seal 확정 = C안 **Pretendard 900**.
레퍼런스 35곳 라이브 실측(`2026-08-05-title-type-study.md`)에서 나온 밴드로 옮긴다:
전시·프레젠테이션 = 65~160px · 웨이트 **700+** · 행간 **0.90~1.00** · 자간 -0.02~-0.03
한국 기관 = 36~66px · 웨이트 300~700 · 행간 1.00~1.50
우리는 50px / 500 / 1.34 로 **기관 밴드 한가운데** 있었다. 그게 "공사중" 인상의 정체다.
★한글이라 작게 쓰는 게 아니다 — 광주비엔날레가 같은 Pretendard 를 100px 로 쓴다.
⚠ 제목 얼굴이 `--title-ko`(Gmarket Sans)가 아니라 `--body-ko`(Pretendard)다.
확정 서체 4종 밖으로 나가지 않는다 — **얼굴 수가 늘지 않고** 빌드의 가변폰트가
45~930 이라 900 이 자산 비용 0 이다. Gmarket Sans 는 다른 자리에 그대로 남는다. */
.fc-h{
font-family:var(--body-ko); font-weight:900; color:var(--ink);
font-size:clamp(30px,5.2vw,78px); line-height:1.04; letter-spacing:-.042em;
max-width:13em; text-wrap:balance;
}
/* 절의 정점에 서는 큰 제목. 여는 제목보다 커야 도착이 도착으로 읽힌다 */
.fc-h--big{
font-size:clamp(42px,8.2vw,118px); line-height:.94; letter-spacing:-.05em; max-width:none;
}
/* 다음 절을 여는 한 줄. 읽는 글이 아니라 넘겨주는 말이라 작게 두고 붙인다 */
.fc-intro{
font-family:var(--label-ko); font-weight:500; font-size:14px; line-height:1.85;
color:var(--dim); max-width:30em;
}
/* 제목과 제 본문은 한 덩어리다 — `.fc-flow` 가 덩어리끼리만 벌리도록 안쪽은 여기서 잡는다 */
.fc-block .fc-h + .fc-copy{ margin-top:clamp(20px,2.3vw,36px); }
/* ── 배치 카드 (2026-08-05) ────────────────────────────────────────
★`Yellow` 3차에서 선 규칙을 **밑판으로 올린다.**
Seal: "좌우 지그재그, 좌만, 우만, 센터, 좌우 동시 등 넌 여러가지 옵션을 가지고
적재적소에 사용할 줄 알아야해."
그 카드를 **면마다 다시 만들지 않는다.** 여기 있으면 다음 면이 골라 쓴다
(`sol-20260805-002.md` 에서 세 번 밟은 자리 — 지역 파일에 가둔 규칙은 다음 면이 못 찾는다).
⚠ `.at-mid` 와 `.at-center` 는 다른 카드다.
`at-mid` = **기둥만** 가운데. 글은 왼쪽 정렬 그대로다. 긴 글은 이쪽이다 —
좌우 여백이 같아져 쏠림이 없어지면서도 줄 첫머리가 고정된다
`at-center` = 기둥도 글도 가운데. **짧은 선언에만** 쓴다. 긴 글을 이걸로 두면
줄 첫머리가 들쭉날쭉해 읽는 눈이 다음 줄을 못 찾는다
★`.fc--yellow` 는 제 절(§5-B)에 같은 규칙을 손으로 갖고 있다. 게이트 대기 중이라
건드리지 않았다 — 통과하면 이쪽으로 합친다. */
.at-mid { margin-left:auto; margin-right:auto; }
.at-center{ margin-left:auto; margin-right:auto; text-align:center; }
.at-right { margin-left:auto; text-align:right; }
.fc-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:start; }
/* ── 제목|본문 쌍은 통을 **반씩 나누지 않는다** (2026-08-06 척추로 승격) ────
★`Earth Account` 라운드가 실측으로 얻은 처방인데 그 면 안에 갇혀 있었다.
그래서 이번 네 편이 기본값(`1fr 1fr` · 78px)으로 서다가 같은 자리에서 무너졌다:
반쪽 칸(510px)에 78px 을 넣으면 **한 줄에 한글 6자**밖에 안 들어가
`한 사람만 서 / 있습니다` 처럼 보조용언이 갈리고 `남고,` 가 한 줄을 혼자 쓴다.
⚠ 크기만 줄이면 제목 활자 스터디가 버린 **기관 밴드(36~66px · 얇은 웨이트)** 로 되돌아간다.
그래서 **폭을 기울이고**(1.6:1 · 약 674px) 크기를 62 로 잡는다 — 한 줄에 10~11자다.
⚠ 특정도가 (0,2,0) 이라 §7 의 `.fc-duo{1fr}`(0,1,0)을 이긴다. **접는 자리를 같이 적는다.**
이 함정은 2026-08-05 에 `.fc--earth` 에서 한 번 밟았다(모바일 2열이 안 접혔다).
★`.fc--earth` 의 같은 선언은 이 승격으로 지웠다. 값이 같아 그 면의 렌더는 안 바뀐다. */
.fc-duo.is-head{ grid-template-columns:1.6fr 1fr; }
.fc-duo.is-head .fc-h{ font-size:clamp(29px,4.3vw,62px); max-width:none; }
/* ★★나란히 세운 칸은 **흐름 마진을 받지 않는다.** (2026-08-05 Seal 지적 — 다시 나오면 안 되는 결함)
`.fc-copy + .fc-copy{margin-top:1.5em}` 는 **세로로 쌓인 문단**을 위한 규칙인데,
격자에서는 "인접 형제" 가 **오른쪽 칸**이라 그대로 걸린다. 실측 = 왼쪽 top 6231 · 오른쪽 6256,
**오른쪽만 25px 내려가 첫 줄이 어긋났다.** 눈으로는 "대충 맞는 것 같은" 정도라 더 위험하다.
⚠ 자리마다 손으로 지우지 않는다 — **카드가 스스로 막는다.** 나중에 무엇을 넣어도 안 어긋난다.
⚠ `!important` 를 쓴 이유: 흐름 규칙이 (0,2,0) 이라 `.fc-duo > *` (0,1,0) 로는 못 이긴다.
특정 클래스마다 (0,3,0) 짜리 예외를 다는 쪽이 오히려 빠뜨리기 쉽다(이번 결함이 그 증거다). */
.fc-duo > *, .fy-duo > *{ margin-top:0 !important; }
/* ★행폭 — `Yellow` 1차가 반려된 세 원인 중 하나다("행폭이 통 끝(1180px)까지 늘어져
한글이 한 줄에 60자 넘게 들어갔다"). 그때는 그 면에서만 고쳤는데, 통 폭은 척추가
주는 것이라 **읽는 글의 행폭도 척추가 준다.** 안 그러면 새 면마다 같은 자리에서 늘어진다.
⚠ 통이 아니라 **글 자신에게 em 으로** 준다 — 통에 주면 통의 서체 크기(16px)가 기준이 된다. */
.fc-copy{
font-family:var(--body-ko); font-size:clamp(15px,1.16vw,17px); line-height:1.95;
color:rgba(255,255,255,.82); max-width:38em;
}
.fc-copy + .fc-copy{ margin-top:1.5em; }
.fc-lead{ font-size:clamp(17px,1.5vw,21px); line-height:1.8; color:var(--ink); }
.fc-quote{
font-family:var(--label-ko); font-weight:500;
font-size:clamp(19px,2.3vw,34px); line-height:1.62; color:var(--ink);
text-shadow:0 2px 22px rgba(0,0,0,.7);
}
.fc-quote em{ font-style:normal; color:var(--accent); font-size:.62em; letter-spacing:.06em; }
.fc-src{
margin-top:18px; font-family:var(--body-en); font-size:11px; letter-spacing:.2em;
text-transform:uppercase; color:var(--dim);
}
/* ══ 4. 척추 — 재생 · 나가는 길 ══════════════════════════════════════ */
.fc-watch{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.fc-play{
position:relative; display:block; overflow:hidden; background:#0A0A0A;
border:1px solid rgba(255,255,255,.14); text-decoration:none; color:inherit;
transition:border-color .4s;
}
.fc-play:hover{ border-color:var(--accent); }
.fc-play .m{ aspect-ratio:2.37; overflow:hidden; }
.fc-play img, .fc-play video{ width:100%; height:100%; object-fit:cover; display:block;
transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.fc-play:hover img, .fc-play:hover video{ transform:scale(1.03); }
.fc-play .lb{ display:flex; align-items:baseline; gap:.8em; padding:15px 18px; }
.fc-play .lb b{ font-family:var(--label-ko); font-size:14px; font-weight:700; }
.fc-play .lb span{ font-family:var(--body-en); font-size:10.5px; letter-spacing:.2em;
text-transform:uppercase; color:var(--accent); margin-left:auto; }
.fc-next{
display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
padding:30px 0; border-top:1px solid rgba(255,255,255,.16);
}
.fc-next a{
display:inline-flex; align-items:baseline; gap:.8em; text-decoration:none; color:var(--ink);
font-family:var(--label-ko); font-size:clamp(17px,2vw,26px); font-weight:700;
}
.fc-next a small{
font-family:var(--body-en); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
color:var(--dim);
}
.fc-next a:hover{ color:var(--accent); }
/* 검은 지면에서는 푸터도 검정에서 시작해야 이음매가 없다 (`/work` 에서 밟은 자리) */
/* 지면·푸터 착지는 site.css 로 올라갔다 (2026-08-05) */
/* ══ 5. 시그니처 — 작품마다 한 절 ════════════════════════════════════
척추(§1~4)는 손대지 않고 여기에 작품 블록이 하나씩 쌓인다.
§5-A five, days — 두 도시가 만나지 않는다 (구조)
§5-B The Journey of Yellow — 여정이 끝나는 자리에서 색이 풀린다 (색)
────────────────────────────────────────────────────────────────── */
/* ── 5-A. `five, days` : 두 도시가 만나지 않는다 ─────────────────────
★이 폼은 내가 발명한 것이 아니다. **영화가 이미 하고 있다.**
`5days_7` 은 한 프레임을 대각선으로 갈라 왼쪽에 서울 거리의 문성을, 오른쪽에 방콕
옥상의 핑파를 놓는다. 둘 다 폰을 보고 있고 서로를 못 본다. 그 프레임을 면의
구조로 늘린 것이 이 조판이다.
확정 카피(strategy §4)의 사실만 쓴다:
· 밤에만 일하는 태국 디자이너 핑파 / 밤에만 휴대폰을 쓸 수 있는 서울 대리기사 문성
· 얼굴을 한 번도 보지 못한 채 문자로 가까워진다
· 방콕과 서울 두 나라에서 촬영했고 대본은 공동으로 썼다
두 단은 **문자 화면에서 딱 한 번 합쳐진다.** 그 자리가 인용이 서는 곳이다. */
/* 논지 — 영화가 만든 분할 프레임을 통째로 보여주고 거기서 면이 갈린다 */
.fd-thesis{ position:relative; }
.fd-thesis img{ width:100%; display:block; }
/* ── 캡션 얼굴 = Gmarket Sans 500 (2026-08-06 교체) ──────────────────
★2026-08-06 Seal: *"이미지를 설명하는 서체를 조선신명조로 했는데 눈에 안띄네.
너무 얇아서 중요성이 떨어지고 바람에 날리는 느낌이야. 다른 서체를 한번 넣어봐줘."*
맞다. 검은 지면에 14~16px 명조를 얹으면 **획이 가장 가는 곳부터 지면에 먹힌다.**
세리프의 가는 획은 종이(밝은 바탕)에서 버티는 것이고, 검은 바탕에서는 흰 획이
번져 보이기 전에 먼저 끊긴다. 크기를 키워 버티게 하면 캡션이 본문 무게가 된다 —
그래서 **크기가 아니라 얼굴을 바꾼다.**
── 왜 Gmarket Sans 500 인가 ──────────────────────────────────────
① **획 굵기가 균일하다.** 명조처럼 가는 자리가 없어 작은 크기에서 안 끊긴다
② **확정 4종 안이다.** 얼굴 수가 늘지 않고 자산 비용 0 (이미 빌드에 있다)
③ ⬛ **조선신명조 라이선스 열린 항목이 이걸로 닫힌다** — OFL 이 아니라
런칭 전 웹폰트 임베딩 조건을 확인해야 했던 그 건이다. 쓰지 않으면 확인할 것도 없다
④ 본문(Pretendard 400)과 **얼굴이 갈린다** — 캡션이 그림에 딸린 목소리라는 원래 취지는 유지된다.
라벨층도 Gmarket 이지만 그쪽은 700 + 넓은 자간이라 무게와 짜임에서 갈린다
⚠ 자간을 -0.1em 에서 **-0.02em** 으로 되돌린다. -0.1em 은 자간이 넉넉한 **명조 기준**이었다.
산세리프에 그대로 걸면 글자가 서로 붙어 오히려 안 읽힌다. 한 곳(`--cap-track`)에서만 준다.
⚠ Gmarket Sans 는 **500·700 두 벌뿐**이다. 그 밖의 웨이트를 쓰면 합성 볼드가 된다.
⚠ 라틴이 앞에 오는 것은 사이트 관례(라틴 = Onest)다. Onest 에 한글이 없어 한글만 Gmarket 으로 떨어진다.
⬛ 대안은 `_probe/caption.html` 에 실물로 세워 뒀다(현행 · 이 안 · Pretendard 600). */
.fc{ --cap-ko:"Onest","Gmarket Sans",sans-serif; --cap-track:-.02em; }
.fd-thesis .cap, .fd-gv .cap, .fd-stage .cap, .fy-stop figcaption{
font-family:var(--cap-ko); font-weight:500; letter-spacing:var(--cap-track);
}
.fd-thesis .cap{
margin-top:12px; text-align:center;
font-size:clamp(16px,1.7vw,23px); line-height:1.7;
color:rgba(255,255,255,.9);
}
/* ── 제목 (2026-08-05 신설) ────────────────────────────────────────
★이 면은 Seal 승인 뒤에 얼렸는데(*"이정도가 좋아"*), **그 뒤에 `Yellow` 에서
제목층이 섰다.** 그래서 여기엔 제목이 한 줄도 없었다 — 크레딧 다음에 곧바로
그림과 캡션이 왔다. `Yellow` 1차가 반려된 그 상태(위계 없음)와 같다.
★새 문장을 쓰지 않았다. 확정 카피(§4)의 **한 문장을 캡션에서 제목으로 올렸을 뿐**이다.
그 자리가 이미 이 면의 논지였는데 조판만 캡션 급이었다 —
`Yellow` 에서 배운 것과 정확히 같은 종류의 어긋남이다
("자리가 이미 중요도를 약속했는데 조판이 그걸 배신했다").
위의 `.cap` 은 지우지 않는다. 분할 프레임 아래에 설명이 필요한 면이 또 나올 수 있다.
⚠ 제목은 **그 그림의 말**이라 그림에 붙어야 한다. `.fc-flow` 기본 간격(최대 124px)을
그대로 받으면 혼자 떠서 어느 그림 얘긴지 모르게 된다 — `Yellow` 에서 한 줄이
"혼자 떠 있었다"고 지적받은 것과 같은 종류다. **간격이 소속을 정한다.** */
.fc-flow > .fd-thesis + .fc-block{ margin-top:clamp(22px,3.2vw,52px); }
/* ★제목 크기를 이 면에서만 내린다 (2026-08-05 Seal 줄바꿈 지시).
Seal: 앞판이 `...보지 못한 / 채, 문자로만...` 으로 끊겨 의존명사 `채` 가 다음 줄 머리에
홀로 떨어졌다. **어색한 한글이다.** 끊을 자리를 `
` 로 못박았는데, 그러려면
**첫 줄이 한 줄에 들어가야** 한다 — 안 들어가면 그 줄이 또 접혀 같은 사고가 난다.
척추 기본값(최대 78)이면 1440 폭에서 넘친다. 한글 한 자가 대략 글자 크기만큼 먹으므로
18자 ≈ 16.4em 이고 통의 안폭이 약 1100px 이라 **64px 이 상한**이다.
`max-width` 도 푼다 — 13em(글자 기준)이 두 줄짜리 제목에는 오히려 좁다.
★이 면의 **제목 둘 다** 같은 처리를 받는다. GV 제목도 `...방콕의 관객 / 앞에...` 으로
조사구가 갈려 있었다(같은 종류의 결함이다). 한 면의 제목 크기는 하나여야 하기도 하다. */
.fc--fivedays .fc-h{
font-size:clamp(28px,4.5vw,64px); max-width:none;
}
/* 두 단 — 가운데 이음매가 섹션 전체를 관통한다. 이 선이 이 면의 주장이다 */
.fd-split{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.fd-split::before{
content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
background:linear-gradient(180deg,transparent,rgba(255,255,255,.28) 12%,
rgba(255,255,255,.28) 88%,transparent);
}
/* ── 이음매가 스크롤로 그어진다 · 매듭이 스틸에 닿는다 (2026-08-05) ──────
★`Yellow` 에서 선 문법 **세로 실 → 가로 매듭 → 그림** 을 이 면의 **제 선**에 쓴다.
노란 실을 옮겨 오지 않는다 — 그건 그 작품의 색이고, 여기 있는 선은
두 도시 사이의 이음매다. 이 면은 그 선을 원래 갖고 있었다. 정적이었을 뿐이다.
★매듭이 곧 문자다. 얼굴을 못 본 채 **문자로만** 닿는 두 사람의 이야기라서,
가운데 선에서 좌우로 번갈아 뻗어 스틸에 닿는 가로선이 그대로 그 뜻이 된다.
발명한 장치가 아니라 이 면이 이미 하고 있던 말에 시간을 준 것이다.
⚠ 색을 새로 들이지 않는다. 검은 지면 + 흰 선 + 강조 하나가 이 면의 전부다.
(`Yellow` 가 `--y` 를 면 안쪽 토큰으로 가둔 것과 같은 이유 — 한 면 때문에 시스템을 흔들지 않는다)
⚠ JS 가 `is-drawn`·`is-seq` 를 걸어야 갈린다. no-JS·모션 최소화에서는
이음매가 처음부터 온전히 그어져 있고 매듭은 다 뻗어 있다(사라지는 것이 없다). */
.fd-split.is-drawn::before{ opacity:.34; }
.fd-split.is-drawn::after{
content:""; position:absolute; left:50%; top:0; width:1px;
height:calc(var(--p,0) * 100%);
background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,
rgba(255,255,255,.72) 76%,rgba(255,255,255,0) 100%);
filter:drop-shadow(0 0 8px rgba(255,255,255,.22));
}
/* 매듭 — 실에서 그 스틸까지의 거리는 `site.js §10` 이 **재서** `--tw` 로 준다.
숫자로 박으면 좌·우가 어긋난다(`Yellow` 에서 왼쪽만 34px 모자랐던 자리).
`--t` 는 세로 실의 머리가 그 칸에 닿은 만큼이다 — 세로가 와야 가로가 뻗는다. */
.fd-col figure{ position:relative; }
.fd-split.is-seq .fd-col figure::before{
content:""; position:absolute; top:0; height:1px; width:var(--tw,0px);
background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(255,255,255,.55));
transform:scaleX(var(--t,1));
}
/* 왼쪽 단의 매듭은 스틸의 오른쪽에서 가운데 선까지 — 선(오른쪽 끝)에서 자란다 */
.fd-split.is-seq .fd-col:first-child figure::before{ left:100%; transform-origin:100% 50%; }
/* 오른쪽 단은 거울상 — 선(왼쪽 끝)에서 자란다 */
.fd-split.is-seq .fd-col:last-child figure::before{
right:100%; transform-origin:0% 50%;
background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.10));
}
/* 매듭이 다하면 스틸이 온다. JS 가 `--io` 를 민다(없으면 그냥 보인다) */
.fd-split.is-seq .fd-col figure img{ opacity:var(--io,1); }
.fd-col{ padding:0 clamp(18px,3.2vw,52px); }
.fd-col:first-child{ padding-left:0; }
.fd-col:last-child{ padding-right:0; }
/* 도시 라벨.
★2026-08-05 반려된 자리 — 처음엔 `position:sticky` 로 따라오게 하고 글자가 이미지 위에서
읽히도록 검은 그라디언트를 깔았다. 그 판이 **스크롤해 올라오는 스틸을 가로로 잘랐다.**
화면에서는 이미지 한가운데 검은 띠가 지나가는 것으로 보인다.
판을 얇게 만들거나 투명도를 낮춰도 같은 종류의 사고가 남는다 — 고정된 요소가 흐르는
콘텐츠 위를 덮는 구조 자체가 원인이다. 그래서 **고정을 버렸다.**
두 줄기가 나란히 흐른다는 것은 가운데 이음매와 좌우 어긋남이 이미 말하고 있어서
라벨까지 따라다닐 필요가 없다. 라벨은 제 단의 머리에 한 번 선다. */
.fd-city{ padding:0 0 16px; }
.fd-city b{
display:block; font-family:var(--display-en); font-size:clamp(20px,2.4vw,34px);
line-height:1; color:var(--ink);
}
.fd-city span{
display:block; margin-top:8px;
font-family:var(--label-ko); font-weight:700; font-size:12.5px; letter-spacing:.18em; color:var(--accent);
}
.fd-col .who{
margin:0 0 26px; font-family:var(--label-ko); font-weight:500; font-size:clamp(15px,1.28vw,18px);
line-height:1.85; color:rgba(255,255,255,.88);
}
.fd-col figure{ margin:0 0 clamp(16px,2.4vw,30px); }
.fd-col img{ width:100%; display:block; }
/* 어긋나게 흐르게 둔다. 같은 높이로 맞추면 두 줄기가 한 표가 되어 버린다 */
.fd-col:last-child{ padding-top:clamp(40px,7vw,110px); }
/* 합류 — 문자 화면. 두 단이 만나는 유일한 자리라 풀블리드로 연다 */
.fd-merge{ position:relative; }
.fd-merge .shot{ position:relative; }
.fd-merge .shot img{ width:100%; display:block; }
.fd-merge .shot::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.2) 52%,transparent);
}
.fd-merge .over{
position:absolute; left:0; right:0; bottom:clamp(26px,5vw,64px);
padding:0 var(--edge); text-align:center;
}
/* 무대 — 이 면의 주 영상 하나. `.fc-watch` 격자(카드 여러 장)와 달리 한 장이 판을 쓴다.
2026-08-05 Seal: 본편이 공개된 적이 없어 공식 예고편이 이 자리를 받는다 */
.fc-stage .fc-play.is-stage{ display:block; }
.fc-play.is-stage .m{ aspect-ratio:2.37; }
.fc-play.is-wide .m{ aspect-ratio:16/9; } /* 단편 여섯 편 — `.fc-scope.is-wide` 와 같은 이유 */
/* ★`.ea-watch`(도착 그림 = 재생 버튼)도 **이 정의를 같이 쓴다** (2026-08-05).
버튼을 새로 그리지 않는다 — 사이트에 이미 있는 재생 어포던스가 정본이다.
⚠ `top` 만 다르다: `.fc-play` 는 아래에 라벨 바가 붙어 있어 26px 을 빼서 미디어 중앙을
맞추고, `.ea-watch` 는 라벨이 그림 **밖**이라 그냥 50% 다(아래에서 덮어쓴다). */
.fc-play .play, .ea-watch .play{
position:absolute; left:50%; top:calc(50% - 26px); transform:translate(-50%,-50%);
width:clamp(58px,6vw,86px); aspect-ratio:1; border-radius:50%;
background:rgba(0,0,0,.42); backdrop-filter:blur(3px);
border:1px solid rgba(255,255,255,.7);
transition:background .35s, border-color .35s, transform .5s cubic-bezier(.16,1,.3,1);
}
.fc-play .play::after, .ea-watch .play::after{
content:""; position:absolute; left:52%; top:50%; transform:translate(-50%,-50%);
border-style:solid; border-width:9px 0 9px 15px;
border-color:transparent transparent transparent var(--ink);
}
.fc-play:hover .play, .ea-watch:hover .play{
background:var(--accent); border-color:var(--accent); transform:translate(-50%,-50%) scale(1.06);
}
.fc-play:hover .play::after, .ea-watch:hover .play::after{ border-left-color:#000; }
.fc-play.is-stage .lb{ padding:18px 22px; }
.fc-play.is-stage .lb b{ font-size:16px; }
/* 줄거리 — 합류(문자 화면) 바로 뒤라 이야기가 도는 자리다. 기둥만 가운데로 놓는다(`at-mid`).
★센터 정렬로 두지 않았다. 두 문장이라 네 줄이 되는데 그걸 가운데 정렬하면
줄 첫머리가 들쭉날쭉해진다(`Yellow` 3차에서 확인한 자리). 기둥은 가운데, 글은 왼쪽. */
.fc--fivedays .fc-lead{ max-width:30em; }
/* ── 5-A-2. 시사회 · GV : 만나지 않던 것이 한 방에서 만난다 (2026-08-05) ──
자산 = Seal 이 만든 이벤트 스케치(`Projects/five, days/시사회/`).
★이 절의 폼도 발명한 것이 아니다. **이 면이 이미 세워 둔 구조의 뒤집기**다.
면의 전부는 "두 줄기가 끝까지 나란히 흐르고 딱 한 번 합쳐진다" 였다.
시사회는 그 반대 그림이다 — **여러 얼굴이 한 화면을 같은 쪽에서 본다.**
그래서 두 단(세로 · 갈라짐)을 쓰지 않고 **한 줄(가로 · 모임)** 로 세운다.
얼굴 넷은 전부 같은 쪽을 보고 있다(자산 실측 — 스크린이 카메라 왼쪽이다).
조판이 갈라져 있던 면에서 유일하게 가로로 눕는 자리라 그 자체가 도착으로 읽힌다.
⚠ 얼굴에 이름을 붙이지 않는다. 누가 누구인지 알 수 없고, 알아도 관객의 얼굴이다.
⚠ 새 색·새 서체 없음. 척추의 제목층(`.fc-h`)과 배치 카드를 그대로 골라 쓴다. */
/* ⚠ 얼굴 열은 `.fc-flow` 밖(풀블리드)이라 간격을 못 받는다. 극장 판과 같은 리듬을 제가 든다 */
/* ── 절의 머리 = 제목(왼쪽) | 글 한 덩어리(오른쪽) ────────────────────
★2026-08-05 Seal: *"이 문장을 양쪽 두개로 나누니 볼륨감이 너무 빈약해."*
짧은 문단을 좌우로 가르면 **양쪽 다 가벼워진다.** 각 칸이 두세 줄에서 끝나 아래가 비고,
판이 성기게 보인다. `Yellow` 의 "좌우 동시" 는 **성격이 다른 두 덩어리**(읽는 글 | 논지)를
나란히 둘 때 쓰는 카드이지, **같은 성격의 글을 반으로 자르는** 카드가 아니다.
여기서는 글을 한 덩어리로 모으고 맞은편에 제목을 세운다.
★균형은 **높이로 잡는다.** 제목은 크기로, 글은 행수로 부피가 정해지므로
제목 크기를 글기둥 높이에 맞춰 고른다(실측해서 조정한 값이다).
그래서 이 자리의 제목만 척추·이 면의 기본값과 다르다. 자리마다 크기를 바꾸는 게 아니라
**나란히 선 것끼리 무게를 맞추는** 것이다. */
/* ★2026-08-05 Seal: *"이 타이틀이 옆 문단과 균형이 안맞잖아. 옆문단과 비교해서 아래위 중앙을
생각해야지. 그리고 너무 좌측으로 붙어있기도하고."*
두 가지를 틀렸다.
① **위에 맞췄다**(`align-items:start`). 높이가 다른 두 덩어리를 윗변으로 맞추면
아래에서 어긋난 만큼이 고스란히 빈다. 나란히 세운 것끼리는 **가운데를 맞춰야**
위아래 여백이 반씩 갈려 균형으로 읽힌다. 높이를 비슷하게 맞추는 것과 별개의 문제다
② **글기둥을 칸의 왼쪽 끝에 박았다.** 칸이 510px 인데 제목은 그보다 좁아서
남는 폭이 전부 오른쪽에 몰렸다 — 제목이 통 가장자리에 붙고 가운데가 비는 모양이다.
`at-mid` 와 같은 처리를 쓴다: **글은 왼쪽 정렬 그대로 두고 기둥만 칸 가운데**로.
그러면 좌우 여백이 같아지면서 페이지 왼쪽 선에서 한 뼘 들어와 선다. */
.fd-gv-head{ align-items:center; }
.fd-gv-head .fc-h{
text-align:left;
/* 기둥만 가운데 — `width:fit-content` 라 폭이 가장 긴 줄에 딱 맞고, 남는 폭이 양쪽에 반씩 간다 */
width:fit-content; max-width:100%; margin:0 auto;
/* 세 줄이 각각 한 줄에 들어가야 못박은 자리가 유지된다. 가장 긴 줄(`이 영화를 걸었습니다`
= 한글 9자 + 공백 2)이 **좌우 여백을 남기고도** 칸에 들어가는 상한이다(칸 510px 실측) */
font-size:clamp(26px,3.3vw,47px); line-height:1.18; letter-spacing:-.035em;
}
.fd-gv{ position:relative; margin:0 0 clamp(56px,8vw,124px); }
/* 극장 판 — 스크린에 영화가 걸려 있고 그 앞에 객석이 있다. 이 절의 지문이라 풀블리드다.
합류(`.fd-merge`)와 같은 처리를 쓴다 — 두 자리 다 "만나는 그림"이라 판형이 같아야 한다 */
/* ⚠ 풀블리드는 `.fc-flow` 밖이라 간격을 못 받는다. `.fd-merge` 는 앞이 스틸이라 붙여도
숨이 있었는데(스틸의 아래 마진), 여기는 **앞이 글**이라 붙이면 글이 화면에 처박힌다.
그래서 이 절만 제 여백을 든다 — 흐름의 리듬과 같은 값이다. */
.fd-house{ position:relative; margin:clamp(56px,8vw,124px) 0; }
.fd-house video, .fd-house img{ width:100%; display:block; }
.fd-house::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 42%);
}
/* 얼굴 한 줄 — 넷이 같은 크기·같은 무게로 선다.
★`Yellow` 에서 배운 것: "나란히 세우면 크기·무게·색이 동등해야 한다."
여기서 낙차를 주면 어느 관객이 더 중요하다는 뜻이 되어 버린다. 그럴 이유가 없다. */
.fd-faces{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px); }
.fd-faces figure{ margin:0; }
/* ⚠ `height:auto` 가 빠지면 안 된다. `height` **속성**(788)이 프레젠테이션 힌트로 살아 있어서
높이가 확정돼 버리고 `aspect-ratio` 가 무시된다 — 얼굴 넷이 263×788 세로 기둥으로 섰다.
이 저장소의 다른 이미지들이 죄다 `style="height:auto"` 를 달고 있는 이유가 이것이다. */
.fd-faces img{ width:100%; height:auto; display:block; aspect-ratio:4/3; object-fit:cover; }
/* 무대 — 시사회의 셋째 박자. **재생 버튼을 달지 않는다.**
★2026-08-05 Seal: *"이게 메인이 아닌데 왜 이걸 메인영상취급을 해."*
버튼 달린 무대 카드(`.fc-play.is-stage`)는 이 면에서 **본편 예고편**의 판형이다.
같은 판형을 주면 위계가 같아진다. 자동재생 무음 루프로 내리고,
앞의 두 박자(극장·얼굴)가 지면을 다 쓴 뒤라 이건 **통 안에서 닫는다** —
넓게 열었다가 좁혀 들어와야 절이 끝난 것으로 읽힌다. */
.fd-stage video{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.fd-gv .cap, .fd-stage .cap{
margin-top:clamp(9px,1vw,14px); text-align:center;
font-size:clamp(15px,1.25vw,18px); line-height:1.8;
color:var(--dim);
}
/* ── 5-B. `The Journey of Yellow` : 여정이 끝나는 자리에서 색이 풀린다 ──
이 폼도 발명한 것이 아니다. 필름을 실측해서 받아 적었다.
── 실측 (마스터 4K · 8초 간격 표본 69장 + 전환 구간 1초 간격) ────────
0:00 ~ 6:46 채도 있는 화소가 사실상 전부 노랑(30~75도)이다. 그 밖의 색상은 0.0~1.2%
6:47 2.8%
6:48 94.9% 여기서 색이 돌아오고 끝까지 유지된다
컷이 아니라 한 숏 안의 디졸브다. 같은 리본 핀을 보고 있는 동안 세계가 색을 되찾는다
(티셔츠가 회색에서 파랑이 된다). 그래서 전환을 두 프레임으로 세운다 — 406.5s / 408s.
── 그래서 면의 규칙 ───────────────────────────────────────────────
여정 구간은 노랑 하나로만 간다(자산이 이미 그렇게 그레이딩돼 있다. CSS 필터를 걸지 않는다).
도착 구간에서 색이 풀리고, 거기서부터 노랑을 강조로 쓰지 않는다.
2026-08-05 Seal 확정: "필름의 규칙 그대로."
⚠ 사이트 강조색(--accent 주황)을 전역으로 갈아엎지 않는다. 노랑은 이 면 안쪽 토큰(--y)
이고 내비·푸터 크롬은 사이트와 같이 둔다. 한 면 때문에 시스템을 흔들지 않는다. */
.fc--yellow{ --y:#FFD400; }
.fc--yellow .fc-kick > span:first-child{ color:var(--y); }
/* ── 글의 배치 — 2026-08-05 2차 교정 ──────────────────────────────
★Seal: "텍스트가 좌측에만 치우쳐져 있는건 밸런스가 안맞지 않아? 그리고 네 문단의
크기가 전부다 다르게 채워져 있으면 이것도 디자인적으로 너무 산만하잖아."
1차 교정에서 위계를 만든다고 **크기를 네 단으로 벌렸다**(78/36/19/14).
그건 해결이 아니라 다른 종류의 산만함이었다. 레퍼런스 14곳의 **배치**를 다시 실측해
(`build/probe-layout.mjs`) 숫자로 확인한 것 셋:
① 좌우 쏠림 (0=대칭 · 1=완전히 한쪽)
criterion 0.00 · filmlinc 0.03 · bfi 0.10 · 광주비엔날레 0.18 · metrograph 0.20 · tate 0.25
**우리 0.59** — 글기둥을 통의 왼쪽에 붙이고 오른쪽을 비웠다
② 크기 단 수 (글자수 3% 이상을 차지하는 크기)
metrograph 3 · serpentine 4 · 광주비엔날레 4 · tate 4 · criterion 4
**우리 7** — 읽는 글에만 78/36/19/14 네 단이었다
③ 센터 정렬 비율
leeum 90% · metrograph 59% · 광주비엔날레 48% · criterion 26%
**우리 0%** — 전시 계열은 센터를 실제로 많이 쓴다. 우리만 안 쓰고 있었다
그래서 규칙 셋으로 정리한다:
· 읽는 글은 **한 크기**로 간다. 구분은 **무게와 색**이 한다 (크기로 가르지 않는다)
· 글기둥을 **화면 가운데**에 놓는다 — 좌우 여백이 같아진다
· **선언은 센터, 읽는 글은 왼쪽 정렬.** 센터는 짧은 문장에만 쓴다 —
긴 글을 센터로 두면 줄 첫머리가 들쭉날쭉해 읽는 눈이 다음 줄을 못 찾는다 */
/* ── 배치 옵션은 하나가 아니다 (2026-08-05 3차) ──────────────────
★Seal: "좌우 지그재그, 좌만, 우만, 센터, 좌우 동시 등 넌 여러가지 옵션을 가지고
적재적소에 사용할 줄 알아야해. (…) 지금 이건 새 디자인은 너무 센터에만 몰려있어.
이것 역시 촌스러워."
2차에서 쏠림(0.59)을 고친다고 **전부 센터로 밀었다.** 쏠림 수치는 0.00 이 됐지만
그건 한쪽 극단에서 다른 극단으로 간 것이지 밸런스가 아니다. 판이 가운데 기둥 하나가 됐다.
★가진 카드를 적어 둔다 — 자리마다 골라 쓴다:
· 센터 선언·정점 한 문장. 짧을 때만
· 좌만 읽는 글이 길 때. 줄 첫머리가 고정돼 눈이 안 헤맨다
· 우만 이미지가 왼쪽을 쥐고 있을 때의 대구(對句)
· 좌우 동시 본문과 논지처럼 **성격이 다른 두 덩어리**. 판을 가로로 다 쓴다
· 지그재그 여러 항목이 이어질 때(여정 스틸이 이걸 쓴다)
이 면의 배분: **제목=센터 · 본문|논지=좌우 동시 · 도입=센터 한 줄 · 여정=지그재그**
그래서 가운데로만 몰리지 않고, 좌우로 벌어졌다가, 다시 한 줄로 모여 여정에 넘긴다. */
/* 읽는 글 = 한 크기. 구분은 무게와 색이 한다(크기로 가르지 않는다) */
.fc--yellow .fc-copy,
.fc--yellow .fy-rule{
font-family:var(--body-ko); font-size:clamp(16px,1.35vw,19px); line-height:1.9;
letter-spacing:-.005em; text-wrap:pretty;
}
/* ★2026-08-05 Seal: "텍스트박스 좌우로 공평하게 했으면 서체도 공평해야지 왜 오른쪽은 굵어?
둘다 굵거나 둘다 얇거나 해야지."
맞다. 나란히 세워 놓고 한쪽만 600 을 준 건 **동등하다고 해 놓고 서열을 매긴 것**이다.
둘을 같은 크기·같은 무게·같은 색으로 둔다. 다른 것은 내용이고, 표시는 노란 낱말 하나면 된다. */
.fc--yellow .fc-copy,
.fc--yellow .fy-rule { font-weight:400; color:rgba(255,255,255,.82); }
/* ★2026-08-05 Seal: "좌우 텍스트박스를 동시에 세우고 밑에 센터에 마지막 문장을 박았지?
그럼 마지막 문장이 이 전체 문장의 결론처럼 보인단 말이야. 그런데 (…) 아무런 중요도가 없는
평범한 본문 서체로 넣었지? (…) 간격을 왜 이렇게 딱 붙이는거야 센스없이."
맞는 지적이다. **자리가 이미 중요도를 약속했는데 조판이 그걸 배신했다.**
두 단 아래 가운데에 놓이면 그건 결론의 자리다. 거기에 본문 서체를 붙여 놓으면
읽는 사람은 "중요한 자리에 안 중요한 걸 뒀네"로 읽는다 — 자리와 처리가 어긋난 것이다.
자리를 바꾸거나 처리를 올리거나 둘 중 하나여야 하고, 이 문장은 여정을 여는 선언이라
**처리를 올린다**: 본문(19)이 아니라 소제목(34) 층으로 세우고, 위에 크게 벌린다. */
.fc--yellow .fc-intro{
font-family:var(--label-ko); font-weight:700; color:var(--ink); text-align:center;
font-size:clamp(18px,1.9vw,26px); line-height:1.6; letter-spacing:-.022em;
max-width:24em; margin-left:auto; margin-right:auto;
}
.fy-rule em{ font-style:normal; color:var(--y); }
/* 좌우 동시 — 본문(읽는 글)과 논지(선언)는 성격이 달라서 나란히 두면 서로를 밀지 않는다.
논지 쪽은 왼쪽에 헤어라인을 세워 "다른 목소리"임을 표시한다. 크기는 안 바꾼다 */
.fy-duo{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:start;
}
/* 헤어라인도 뗐다 — 한쪽에만 세우면 그것 역시 서열이 된다. 간격만으로 가른다 */
/* 선언은 센터 — 다만 **제목과 마지막 한 줄에만** 쓴다 */
.fc--yellow .fc-h{ margin-left:auto; margin-right:auto; text-align:center; }
/* 글끼리는 좁게, 글과 그림 사이는 `.fc-flow` 기본값대로 넓게 */
.fc--yellow .fc-block + .fy-duo{ margin-top:clamp(56px,7.5vw,120px); }
/* ★순서는 건드리지 않는다. 문제는 **간격**이었다 (2026-08-05 Seal: "텍스트 순서를 왜 바꿔?
그대로 두면서 간격을 조절해야지.") — 한 번 이 줄을 제목 밑으로 옮겼다가 되돌렸다.
위로 187px 을 벌려 놓으니 어느 덩어리에도 안 붙어 **혼자 떠 있었다.**
위를 좁히고(96) 아래를 넓혀(160) 위 글덩어리에 붙이고 여정과는 떼어 놓는다.
간격이 소속을 정한다 — 가까운 쪽에 붙는다. */
.fc--yellow .fy-duo + .fc-intro{ margin-top:clamp(50px,6.4vw,96px); }
.fc--yellow .fc-intro + .fy-thread{ margin-top:clamp(84px,10.5vw,168px); }
/* 여정 — 노란 실 한 줄에 스틸이 매달린다.
6:32 에 난간을 따라 리본이 줄줄이 묶여 멀어지는 숏이 있다. 그 줄이 이 선이다.
폭은 내가 고르지 않았다 — 숏 사이즈가 정한다. 클로즈업(리본·시계·주유기)은 좁고
풍경(기억의 숲·기억관)은 넓다. 좁게 시작해 가운데서 열리고 다시 손으로 닫힌다. */
.fy-thread{ position:relative; padding-left:clamp(24px,4.4vw,60px); }
.fy-thread::before{
content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
background:linear-gradient(180deg,transparent,var(--y) 4%,var(--y) 94%,transparent);
}
/* 실이 **내려가면서 그어진다** (`site.js §10` 이 `--p` 를 0→1 로 민다).
여정을 읽는 속도로 선이 따라오는 것이라 장식이 아니라 이 절의 내용이다.
★기본값은 지금 그대로다 — JS 가 `is-drawn` 을 걸어야 바탕/획으로 갈린다.
그래서 no-JS·모션 최소화에서는 선이 처음부터 온전히 그어져 있다(사라지지 않는다). */
/* ★2026-08-05 Seal: "노란색진행이 뚝 끊기는건 왜 안고쳤어? 흑백사진 끝즈음에서 서서히
사라지면서 흑백사진이 나와줘야하는게 맞는거아니야? 이 노란색 진행이 이미지들과 같이
스크롤을 하면 같이 나오면서 퍼져나가는 효과는 안돼?"
끊겨 보인 이유 = 그은 선이 **단색이라 끝이 하드 엣지**였다. 길이만 늘렸지 끝을 안 녹였다.
고친 것 셋:
· 그은 선의 **끝이 녹는다** — 자라는 머리가 늘 부드러워서 "진행 중"으로 읽힌다
· 바탕 실도 아래에서 **미리 옅어진다**(84%부터) — 여정이 끝나기 전에 실이 스러진다
· **번짐** — 스크롤로 자라는 동안 빛이 퍼진다. 선 하나가 아니라 진행하는 기운이 된다 */
.fy-thread.is-drawn::before{
opacity:.2;
background:linear-gradient(180deg,transparent,var(--y) 4%,var(--y) 94%,transparent);
}
.fy-thread.is-drawn::after{
content:""; position:absolute; left:0; top:0; width:1px;
height:calc(var(--p,0) * 100%);
background:linear-gradient(180deg,var(--y) 0%,var(--y) 78%,rgba(255,212,0,0) 100%);
filter:drop-shadow(0 0 9px rgba(255,212,0,.30));
}
.fy-stop{ position:relative; margin:0 0 clamp(34px,5.4vw,78px); }
.fy-stop:last-child{ margin-bottom:0; }
/* ★2026-08-05 Seal: "오른쪽에 배치된 이미지들은 노란선과 닿아있지만 왼쪽 이미지들은
떨어져있잖아. 이것도 일관성을 가져가야지."
맞다 — 매듭 폭이 26px 고정인데 실에서 이미지까지는 60px 이라 왼쪽은 34px 모자랐다.
오른쪽은 `width:100vw` 라 닿아 있었고. **같은 규칙이 아니었다.**
그래서 폭을 숫자로 박지 않고 **JS 가 실에서 그 칸까지의 거리를 재서 `--tw` 로 준다.**
좌·우·센터 어디에 걸리든 매듭이 정확히 이미지에 닿는다.
★그리고 `--t` 로 **스크롤한 만큼만 뻗는다** (Seal: "가로선은 지금 하드하게 박혀있다구.
순서대로 세로 다음 가로 다음 이미지 (…) 이렇게 스크롤플레이를 하라고.")
세로 실의 머리가 그 칸에 닿으면 매듭이 뻗고, 매듭이 다하면 그림이 온다. */
.fy-stop::before{
content:""; position:absolute; left:calc(-1 * var(--tw,0px)); top:0;
width:calc(var(--tw,0px) * var(--t,1)); height:1px; background:var(--y);
}
.fy-stop img{ width:100%; display:block; }
/* 매듭이 다하면 그림이 온다. JS 가 --io 를 밀어 준다(없으면 그냥 보인다) */
/* ⚠ 빌드가 `![]()
` 를 `` 로 감싼다 — 직계 짝을 같이 적는다(위 case.css 주석 참조) */
.fy-thread.is-seq .fy-stop > img,
.fy-thread.is-seq .fy-stop > picture > img,
.fy-thread.is-seq .fy-stop figcaption{ opacity:var(--io,1); }
/* 폭은 내가 고른 게 아니라 **숏 사이즈**가 정한다. 클로즈업은 좁고 풍경은 넓다.
★한 번 36/60/82/100 으로 잡았다가 되돌렸다 — 가장 넓은 칸이 통의 69% 밖에 안 돼
오른쪽 40% 가 6000px 스크롤 내내 비었다. 폭의 낙차를 키워 큰 칸이 판을 쓰게 한다 */
.fy-stop.s { max-width:30%; }
.fy-stop.m { max-width:56%; }
.fy-stop.l { max-width:80%; }
.fy-stop.xl { max-width:100%; }
/* 오른쪽에 매다는 칸 — **클로즈업만** 간다(리본·시계·주유기 같은 곁가지).
풍경은 늘 왼쪽에서 폭을 쓴다. 그래서 지그재그가 장식이 아니라 **숏의 성격**이 된다.
6:32 에 난간을 따라 리본이 양쪽으로 묶여 멀어지는 숏이 있다 — 실에 매단 모양이 그것이다.
⚠ tether 를 `right:100%; width:100vw` 로 왼쪽으로 길게 뽑고 실에서 잘라 낸다.
칸 폭이 %로 변해서 "실까지의 거리"를 숫자로 못 적는다 — 넘치게 그리고 자르는 쪽이 맞다.
`.fy-thread` 의 `overflow:hidden` 이 그 칼이다(실이 통의 왼쪽 끝이라 딱 거기서 잘린다). */
.fy-stop.r{ margin-left:auto; }
.fy-stop.r figcaption{ text-align:right; }
/* 여정의 **마지막 칸** — 2026-08-05 Seal: "맨끝에 배치되어있는 흑백 이미지가 너무 작아.
그전 이미지를 중간쯤 크기로 두고 끝 이미지는 크게 센터에 배치한다음 스크롤을 하면 컬러가되도록."
실에 매달린 마지막 칸이 **선에서 내려와 화면 가운데로 선다.** 여기가 여정의 끝이고
바로 다음이 전환이라, 이 칸은 넘겨주는 자리다. 그래서 매듭을 달지 않는다. */
.fy-stop.end{
max-width:min(80%,940px); margin-left:auto; margin-right:auto;
/* 실의 padding-left 만큼 왼쪽으로 물려 **화면 한가운데**에 세운다.
통 안에서만 가운데면 화면 기준으론 padding 절반만큼 오른쪽으로 밀린다(실측 337 vs 307) */
transform:translateX(calc(clamp(24px,4.4vw,60px) / -2));
margin-top:clamp(70px,10vw,150px); margin-bottom:clamp(60px,8vw,120px);
}
.fy-stop.end::before{ content:none; }
.fy-stop figcaption{ /* 장소만 적는다. 대사 없는 영화에 말을 얹지 않는다 */
margin-top:7px; font-size:14px;
letter-spacing:var(--cap-track); color:var(--y);
}
/* 전환 — 같은 숏, 색만 다르다.
기본값(no-JS · 모션 최소화)은 두 프레임이 위아래로 서는 것이다. 그 상태에서도
스크롤이 곧 전환이라 면이 완결된다. JS 가 살아 있으면 한 자리에 겹쳐 놓고
스크롤 진행도로 녹인다 (site.js 10절이 --turn 을 0에서 1로 민다). */
/* ★2026-08-05 5차 — **이미지에는 아무것도 걸지 않는다.**
Seal: "흑백과 컬러이미지 사이에 스크롤을 할 수 있는 빈 공간을 두란얘기야.
이미지 자체에 이펙트를 넣으란 얘기가 전혀 아니잖아. (…) 빈 공간을 두고 스크롤을
할수록 뭔가 진행이 되고 있다는 것을 표현하라고. 지금보면 노란색 진행선이 뚝 끊기는데
그것이 빈 공간이 들어오는 시점에서 센터로 들어오면서 스크롤을 할수록 점점
얇아진다던지 이런걸 얘기하는거야."
내가 네 번 연속 틀린 지점 = **이미지를 건드리려고 했다.** 크로스페이드 → 스티키 →
레터박스 → 그라데이션 마스크. 전부 그림 위에 얹는 기교였다.
요구는 그 반대다 — 그림은 그냥 두고, **그림과 그림 사이의 빈 지면이 일을 한다.**
흑백 이미지 (손에 든 리본) — 손대지 않음
↓
빈 공간 — 여기가 전부다. 여정을 끌고 온 **노란 실이 센터로 들어와** 이어지고,
내려갈수록 그어지면서 **가늘어지고 옅어진다.** 실이 다하는 자리가 곧 도착이다
↓
컬러 이미지 풀블리드 — 손대지 않음
★실이 뚝 끊기지 않는 것이 요점이다. 여정의 진행선이 빈 공간을 건너 색까지 데려다준다. */
.fy-turn{ position:relative; }
.fy-turn figure{ margin:0; }
.fy-turn img{ width:100%; display:block; }
.fy-turn .fy-t1{ max-width:min(66%,820px); margin:0 auto; }
.fy-turn .fy-t3{ width:100%; }
/* ★2026-08-05 Seal: "노란색이 지금보면 세로도 있지만 가로도 있잖아? 스크롤을하면 세로로가다가
가로도 서서히 나타나서 그 끝에 이미지가 나오는 방식으로 진행을 해줬으면해.
이렇게되면 굳이 노란색 진행선을 페이드아웃할 필요가 없어지잖아."
맞다 — 여정이 이미 그 문법을 쓰고 있었다. **세로 실 + 가로 매듭 → 이미지.**
전환에도 같은 문법을 쓰면 선이 **이미지를 배달하고 끝난다.** 스러질 이유가 없어진다
(사라지는 것과 도착하는 것은 다르다. 앞엣것은 힘이 빠지는 것이고 뒤엣것은 다다르는 것이다).
세로가 내려간다 → 바닥에서 **가로로 뻗는다** → 가로가 다한 자리에서 컬러가 열린다
가로선은 곧 그 이미지의 **윗변**이 된다. 선이 그림의 문턱을 그어 주는 셈이다. */
.fy-void{ position:relative; height:clamp(420px,88vh,880px); }
.fy-void .ln{
position:absolute; left:50%; top:0; transform:translateX(-50%);
width:8px; height:100%;
/* 위는 여정에서 이어받는 자리라 스며들듯 나타난다. **아래는 안 지운다** — 가로로 이어지니까 */
background:linear-gradient(180deg,rgba(255,212,0,0) 0%,var(--y) 11%,var(--y) 100%);
clip-path:polygon(0 0,100% 0,56% 100%,44% 100%);
filter:drop-shadow(0 0 15px rgba(255,212,0,.30));
}
/* 가로 — 세로가 다한 자리에서 좌우로 뻗어 컬러 이미지의 윗변이 된다 */
.fy-void .lh{
position:absolute; left:50%; bottom:0; transform:translateX(-50%);
height:3px; width:calc(var(--lw,0) * 100%);
background:linear-gradient(90deg,rgba(255,212,0,0),var(--y) 14%,var(--y) 86%,rgba(255,212,0,0));
filter:drop-shadow(0 0 16px rgba(255,212,0,.42));
}
/* JS 가 살아 있으면 스크롤한 만큼 그어진다. 없으면 세로·가로 모두 온전히 서 있다 */
.fy-void.is-run .ln{ height:calc(var(--lp,0) * 100%); }
.fy-void:not(.is-run) .lh{ width:100%; }
/* 컬러 이미지 — 가로선이 그은 문턱에서 **아래로 펼쳐 내려온다.**
스크롤이 이미지를 옮기는 게 아니라 **여는** 것이라, 손가락을 미는 만큼 그림이 자란다.
★선이 윗변이고 그 아래가 열리는 구조라 세로 → 가로 → 그림이 한 줄기로 이어진다.
JS 없으면 그냥 온전히 보인다 — 여는 연출만 없고 내용은 같다 */
.fy-t3.is-open img{ clip-path:inset(0 0 calc((1 - var(--o,0)) * 100%) 0); }
/* 도착 — 여정은 1180 통 안에서 흘렀다. 여기서 통을 벗어난다.
폭이 곧 풀림이다. 문장은 색이 돌아온 뒤에 놓인다. */
.fy-arrive img{ width:100%; display:block; }
.fy-arrive .pair{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.2vw,18px);
margin-top:clamp(8px,1.2vw,18px);
}
/* 도착 제목 — 2026-08-05 Seal 지시로 서술 문장을 **타이틀 처리**로 바꿨다.
전에는 "기억의 숲을 지나 …" 한 문장이 검은 지면에 가운데로 떠 있었다. 캡션처럼 읽혔다.
이 자리는 이 면의 정점이라 여는 제목(50)보다 크게 세운다 — 크기가 곧 도착이다.
가운데 정렬을 버리고 본문과 같은 왼쪽 선에 맞춘다. 풀블리드 두 띠 사이에서
글 기둥이 한 줄로 서야 면이 흔들리지 않는다.
★장소 이름(기억의 숲 · 진도 팽목항)은 크레딧 스트립과 여정 캡션에 그대로 남아 있다 —
문장을 걷어냈지 사실을 걷어낸 것이 아니다.
★크기·서체는 척추의 `.fc-h.fc-h--big` 이 들고, 여기서는 이 자리의 여백만 준다. */
.fy-arrived{ padding:clamp(52px,7.5vw,116px) 0 clamp(46px,6.5vw,96px); }
/* ══ 모바일 — 데스크톱의 기조를 유지한다 ═════════════════════════════
★2026-08-05 Seal: "모든 데스크탑의 디자인은 모바일에서도 그 기조가 표현되고 작동하게 해야해.
모바일에서 좌, 우로 나눠서 표현되었던것들이 모바일로 넘어오면 죄다 센터로 집결하게되고
그렇게되면 모바일에서의 감상이 낮을 수 밖에 없어."
⛔ **좌우로 나눈 것을 1열 센터로 무너뜨리지 않는다.** 그 면의 스토리텔링이 거기서 사라진다.
폭이 없으면 좌우를 **번갈아 붙여서**(교차 접기) 성격을 남긴다 — 헤어라인이 어느 쪽 목소리인지
말해 준다. `five, days` 의 방콕/서울도 같은 규칙으로 선다(§5-A 아래). */
@media (max-width:820px){
.fy-thread{ padding-left:20px; }
/* 폭 낙차를 유지한다 — 전부 100% 로 눕히면 숏 사이즈가 사라져 여정이 밋밋해진다 */
.fy-stop.s { max-width:56%; }
.fy-stop.m { max-width:76%; }
.fy-stop.l { max-width:92%; }
.fy-stop.xl { max-width:100%; }
/* 지그재그도 유지 — 클로즈업은 모바일에서도 오른쪽에 매달린다 */
.fy-stop.r{ margin-left:auto; }
.fy-stop.r figcaption{ text-align:right; }
/* 좌우 동시 → 교차 접기. 센터로 모으지 않는다 */
.fy-duo{ grid-template-columns:1fr; gap:30px; }
.fy-duo .fc-copy{ text-align:left; padding-right:10%; }
.fy-duo .fy-rule{
text-align:right; margin-left:10%;
padding-left:0; padding-right:14px;
border-left:0; border-right:1px solid rgba(255,255,255,.22);
}
/* 전환 — 좁은 화면에서도 **빈 공간과 실**은 그대로 둔다. 이게 이 자리의 전부다 */
.fy-turn .fy-t1{ max-width:88%; }
.fy-void{ height:clamp(300px,62vh,520px); }
.fy-void .ln{ width:6px; }
.fy-void .lh{ height:2px; }
.fy-arrive .pair{ grid-template-columns:1fr; }
}
/* ── 5-C. `Earth Account` : 빌리고 돌려받는다 ─────────────────────────
★이 면의 1목표는 **접근·기획·시각**이다 (CLAUDE.md 불변 원칙).
"영상에서 무슨 일이 벌어지나"가 아니라 **"왜 이렇게 접근했고 왜 이런 결심을 했나"** 가 서야 한다.
1차 조판이 여기서 반려됐다 — 필름 화면에 찍힌 줄만 모아 명세서를 만들었더니
조판은 섰지만 **영상 구조 설명**이 됐다. 기획 자료를 안 열어 본 것이 원인이다.
── 시그니처 = 원장(元帳). 단 **기획서의 원장**이다 ────────────────────
기획서 스토리보드가 11신인데 그 배열이 그대로 계좌다:
#1 치킨 시킬 돈이 없으면 마련해 자취방
#2 업사이클 #7 해소: 업사이클
#3 분리수거 #8 해소: 분리수거
#4 에너지절약 #9 해소: 에너지절약
#5 탄소중립 #10 해소: 탄소중립
#6 지구의 응답
#11 치킨이다
**네 가지를 시련으로 한 번, 해소로 한 번 — 같은 항목이 두 번 선다.**
빌린 것이 왼쪽에 적히고 돌려받은 것이 오른쪽에 적힌다. 계좌가 하는 일이 정확히 그것이고,
제목이 곧 그 장치다. 그래서 이 면의 조판은 **두 단 원장**이고 가운데에 `#6 지구의 응답`이 선다.
★발명한 폼이 아니다. 기획서에 이미 있던 배열을 지면으로 옮긴 것뿐이다.
── 검은 지면이 웃긴 60초를 받는가 (인계서의 중심 질문) ─────────────────
받는다. 단 **면이 농담을 하지 않는 방식으로** 받는다.
확정 카피가 스스로 적어 뒀다 — "조금만 방심해도 계몽하는 영상이 된다".
면도 같아서 밝게 꾸미려 들면 그 순간 촌스러워진다. 면이 하는 일은 **부기(簿記)** 다.
위트는 필름과 기획서 안에 있고 지면은 자리를 내준다.
⛔ 연출을 그림에 얹지 않는다(`Yellow` 에서 네 판 반려로 얻은 원칙). 괘선과 빈칸이 일한다.
⛔ 기획 도구 이름을 지면에 쓰지 않는다 (2026-08-04 JANG 라운드 지적).
자료는 최대한 쓰되 어디에 적혀 있었는지는 말하지 않는다. */
/* ★제목|본문 = 통을 반씩 나누지 않는다 (2026-08-05 이 면에서 실측으로 정했다).
`1fr 1fr`(각 510px) 로 두니 제목이 **네 줄 311px**, 본문은 **155px** 에서 끝났다.
원인은 크기가 아니라 폭이다 — 24자를 78px 로 두 줄에 넣으려면 한 줄이 984px 이라
**반쪽 칸에는 애초에 안 들어간다.** 폭을 1.6:1 로 기울이고 62 로 잡아 194 대 200 을 만들었다.
⬛ 선언은 **2026-08-06 척추(§3)로 올라갔다** — 이 면 안에 갇혀 있어서 다음 네 편이
같은 자리에서 다시 무너졌기 때문이다(`sol-20260805-002` 에서 세 번 밟은 그 자리).
값이 같으므로 이 면의 렌더는 바뀌지 않는다. */
/* 인용 — 기획서 원문을 옮길 때 쓴다. 우리가 쓴 문장과 눈으로 갈려야 한다 */
.ea-src{
padding-left:clamp(16px,1.6vw,24px); border-left:2px solid var(--accent);
font-family:var(--label-ko); font-weight:500;
font-size:clamp(15px,1.45vw,18.5px); line-height:1.72; color:var(--ink); max-width:30em;
}
.ea-src + .ea-src{ margin-top:1.1em; }
.ea-from{
margin-top:14px; font-family:var(--body-en); font-size:10px; letter-spacing:.22em;
text-transform:uppercase; color:var(--dim);
}
/* 결심 — 세 칸. 번호가 아니라 **무엇을 정했나**가 먼저 읽혀야 한다 */
.ea-calls{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(28px,3.6vw,54px); }
.ea-call{ border-top:1px solid rgba(255,255,255,.22); padding-top:20px; }
.ea-call h3{
font-family:var(--label-ko); font-weight:700; font-size:clamp(16px,1.5vw,19px);
line-height:1.45; color:var(--ink); margin-bottom:.7em;
}
.ea-call p{
font-family:var(--body-ko); font-size:clamp(13.5px,1.05vw,15px); line-height:1.85;
color:rgba(255,255,255,.78);
}
/* ══ 원장 — 왼쪽은 빌린 것, 오른쪽은 돌려받은 것 ═══════════════════════
기획서의 `#2 업사이클` 과 `#7 해소: 업사이클` 이 한 줄에서 마주 본다.
가운데 괘선 하나가 그 둘을 가른다 — 판을 깔거나 색을 넣지 않는다.
★★시그니처 절의 클래스는 **전부 접두어를 붙인다** (2026-08-05에 밟았다).
처음에 두 칸을 `.give` / `.back` 으로 썼는데 `site.css:253` 에 **`.back` 이 이미 있었다**
(뒤로 가기 링크 · `display:inline-flex` + `::before{content:"←"}`).
결과 = 오른쪽 칸이 **flex 로 뒤집혀** 글이 한 줄에 한 글자씩 흐르고 화살표까지 딸려 왔다.
콘솔 에러도 빌드 실패도 없다. 파일을 읽어서는 못 찾고 **브라우저에 계산값을 물어야** 보인다
(`display:flex` 를 준 적이 없는데 flex 였다). 일반명은 전역과 부딪힌다 — `ea-` 를 붙인다. */
.ea-ledger{ border-top:1px solid rgba(255,255,255,.16); }
.ea-ledger .hd{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px);
padding:16px 0; border-bottom:1px solid rgba(255,255,255,.16);
}
.ea-ledger .hd span{
font-family:var(--body-en); font-size:10px; font-weight:600; letter-spacing:.24em;
text-transform:uppercase; color:var(--dim);
}
.ea-ledger .hd span:last-child{ text-align:right; color:var(--accent); }
/* ★두 칸의 그림이 **같은 높이·같은 폭·같은 바닥선**에 선다 (2026-08-05 Seal 지적).
실측이 어긋나 있었다 — 왼쪽 479×269 · 오른쪽 517×291, 시작 높이도 38px 차이.
원인 셋이 겹쳤다: ①글 길이가 달라 그림이 시작하는 자리가 밀린다
②`ea-give` 에만 괘선 안쪽 여백이 있어 폭이 좁다 ③원본 화면비가 컷마다 미세하게 다르다.
자리마다 손으로 맞추지 않고 **밑판이 세 가지를 다 막는다**:
· 칸을 세로 flex 로 세우고 그림에 `margin-top:auto` → 글이 몇 줄이든 **바닥에 붙는다**
· 양쪽에 같은 안쪽 여백 → 폭이 같아진다
· `aspect-ratio` + `object-fit:cover` → 높이가 같아진다
⚠ 다음에 무엇을 넣어도 안 어긋난다. `.fc-duo` 마진 사고와 같은 결의 처방이다. */
.ea-row{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px);
align-items:stretch; padding:clamp(28px,3.6vw,52px) 0;
border-bottom:1px solid rgba(255,255,255,.16);
}
.ea-cell{ min-width:0; display:flex; flex-direction:column; }
.ea-cell.ea-give{ border-right:1px solid rgba(255,255,255,.16); padding-right:clamp(20px,2.6vw,40px); }
.ea-cell.ea-back{ text-align:right; padding-left:clamp(20px,2.6vw,40px); }
.ea-no{
font-family:var(--body-en); font-size:10.5px; font-weight:600; letter-spacing:.2em;
color:var(--dim); display:block; margin-bottom:8px;
}
.ea-act{
font-family:var(--label-ko); font-weight:500;
font-size:clamp(16px,1.6vw,21px); line-height:1.5; color:var(--ink);
}
.ea-amt{
margin-top:.7em; font-family:var(--body-ko); font-weight:400;
font-size:clamp(13px,1.1vw,15px); line-height:1.8; color:var(--dim);
}
.ea-cell figure{ margin:22px 0 0; margin-top:auto; padding-top:22px; }
.ea-cell figure img{ width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
/* ⚠ 그림 없는 칸은 자산 부족의 흔적이 아니다 — 그 대목이 **60초 완성본에 없다**는 사실이다.
기획은 넷이었고 완성본에 셋이 남았다. 비워 두는 것이 그 사실을 말한다. */
/* 지구의 응답 — 두 단이 마주 보다 한 줄에서 만난다. 기획서 `#6` 이 그 자리다 */
.ea-answer{
padding:clamp(40px,5.4vw,84px) 0; border-bottom:1px solid rgba(255,255,255,.16);
text-align:center;
}
.ea-answer b{
display:block; font-family:var(--body-ko); font-weight:900;
font-size:clamp(24px,3.4vw,46px); letter-spacing:-.03em; color:var(--ink);
}
.ea-answer span{
display:block; margin-top:14px; font-family:var(--body-en); font-size:10.5px;
letter-spacing:.24em; text-transform:uppercase; color:var(--dim);
}
/* 말풍선은 검은 지면 위에 그대로 놓는다 — 원본 배경이 검정이라 통이 안 보인다.
이 한 장이 곧 `#6 지구의 응답` 이다. 설명을 붙이지 않는다 */
.ea-answer figure{ margin:0 auto clamp(24px,3.4vw,48px); max-width:min(100%,620px); }
.ea-answer img{ width:100%; display:block; }
/* ══ 기획 보드 — 실물을 지면에 놓는다 (2026-08-05 Seal 지시) ═══════════
★Seal: *"밀라노트 기획보드를 비쥬얼적으로 많이 이용하라고 내가 얘기 안했어?"*
1차에서 보드의 **글만** 옮겨 적었다. 그건 자료를 쓴 것이 아니라 자료를 요약한 것이다.
실물 판이 지면에 놓여야 "이 사람이 이렇게 준비했다"가 보인다(JANG 라운드와 같은 결).
⛔ 판에 **아무것도 얹지 않는다.** 보드는 흰 종이 위 회색 캔버스라 검은 지면 위에서
저절로 문서처럼 뜬다. 필터·틴트·테두리 장식을 걸면 그 순간 스크린샷이 아니라
"디자인된 이미지"가 되어 자료의 신뢰가 죽는다. 놓는 자리와 크기만 정한다.
⛔ 기획 도구 이름이 보이는 영역은 자르고 넣는다. 통장·거래내역처럼 계좌번호가
찍힌 레퍼런스도 뺀다(공개 지면이다). */
.ea-board{
display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:start;
}
.ea-board.is-wide{ grid-template-columns:1fr 1.25fr; }
.ea-board > .t{ min-width:0; }
.ea-board figure{ margin:0; }
.ea-board img{ width:100%; display:block; }
/* 아주 긴 판(시놉시스 전문·영수증 컬럼)은 통 안에서 스스로 폭을 줄인다 */
.ea-board figure.tall img{ max-width:min(100%,420px); }
.ea-cap{
margin-top:12px; font-family:var(--body-en); font-size:10px; letter-spacing:.22em;
text-transform:uppercase; color:var(--dim);
}
/* 보드 판 여럿을 한 줄에 눕힐 때 */
.ea-sheets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:clamp(20px,2.6vw,40px); align-items:start; }
.ea-sheets figure{ margin:0; }
.ea-sheets img{ width:100%; display:block; }
/* ══ 낭비 절 — 전기가 새고 있다 (2026-08-05 Seal 지시) ═════════════════
★Seal: *"전기가 매구 세고 있다는걸 표현하는 샷 세개를 더 추가해줘. 리치하게 만들어."*
이 필름의 첫째 발명이 여기다 — 안 보이는 낭비를 **영수증**으로 보이게 만든 것.
1차에서는 멀티탭 한 컷으로 넘겼는데 그건 발명을 소품 취급한 것이다.
★부감은 **풀블리드**로 간다. 방 전체가 영수증에 잠겨 있고 주인공은 그 한가운데
누워 폰을 본다 — 이 작품의 대표 프레임이라 통 안에 가두지 않는다.
그 아래 세 컷(수도꼭지·전등·멀티탭)이 같은 크기로 서서 **낭비가 한 군데가 아님**을 말한다.
⛔ 그림에 아무것도 얹지 않는다. 크기와 자리만 정한다. */
.ea-leak img{ width:100%; display:block; }
/* ★부감과 **이어 붙인다.** 통 안에 넣으면 각 컷이 354px 밖에 안 돼서 위의 풀블리드에
눌린다(실측). 낭비는 한 덩어리로 와야 세다 — 부감 아래에 틈만큼만 띄우고 세 컷이
화면을 가로로 다 쓴다. `.fc-flow` 의 절 간격을 받지 않도록 이 둘은 붙여 둔다. */
.ea-leak-trio{
display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
margin-top:4px; width:100%;
}
.ea-leak-trio figure{ margin:0; }
@media (max-width:820px){
/* ★세 컷을 1열로 세우지 않는다 — "한 군데가 아니다"가 사라진다 (Seal 원칙).
좁은 화면에서는 폭만 줄여 셋이 그대로 나란히 선다 */
.ea-leak-trio{ gap:6px; }
}
/* ★긴 판은 **끝을 흐려 짧게 자른다** (2026-08-05 Seal).
*"세로로 길게 스크린샷 뽑을것들을 전부 보여주는건 레이아웃상 너무 별로야.
세로에 있는 모든 정보를 알려줄 필요가 전혀 없잖아. 이런식으로 기획을 한다라고 하는게 더 중요하지."*
맞다 — 이 면이 파는 것은 **기획서의 내용**이 아니라 **이렇게 준비했다는 사실**이다.
전문을 다 펼치면 읽으라는 요구가 되고 조판도 세로로 늘어진다.
위에서부터 필요한 만큼만 보이고 아래가 지면으로 스러지게 한다.
⚠ `mask-image` 는 그림을 **자르는** 처리이지 그림 위에 무언가를 얹는 것이 아니다
(판 위에 검은 그라디언트를 겹치면 지면색이 바뀔 때 띠가 생긴다). */
.ea-fade{
overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.35) 84%,transparent);
mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.35) 84%,transparent);
}
.ea-sheets figure.ea-fade{ max-height:clamp(300px,38vw,540px); }
.ea-board figure.tall.ea-fade{ max-height:clamp(360px,46vw,660px); }
.ea-board figure.tall.ea-fade img{ max-width:100%; }
/* 캡션은 판 밖에 둔다 — 안에 있으면 페이드에 같이 지워진다 */
.ea-cap.is-out{ margin-top:14px; }
/* 도착 — 명세가 내내 적어 온 이름이 화면을 채운다.
★글을 그림 위에 얹지 않는다. 제목이 먼저 서고 그림이 통을 벗어난다(`Yellow` 와 같은 규칙) */
.ea-arrive .fc-wrap{ padding-top:clamp(56px,8vw,120px); }
.ea-arrived{ padding-bottom:clamp(44px,6.4vw,92px); }
.ea-arrive img{ width:100%; display:block; }
/* ★도착 그림이 곧 재생 버튼이다 (2026-08-05 Seal: *"풀영상을 마지막 이미지에 바로 링크하자"*).
자리가 맞다 — 이 프레임은 **발신자 이름이 "지구"인 폰**이고, 그걸 누르면 전화를 받는 셈이다.
면이 도착한 자리에서 본편으로 넘어간다.
★재생 버튼을 **그림 위에 세운다** (2026-08-05 Seal: *"재생버튼이 있어야 사람들이 재생을 하겠지?"*).
처음엔 "면의 정점이라 아이콘이 감정을 깎는다"고 라벨만 아래에 뒀는데, 그러면
**누를 수 있다는 사실 자체가 안 보인다.** 미감보다 먼저 작동해야 한다.
버튼을 새로 그리지 않고 사이트에 이미 있는 것(`.fc-play .play`)을 같이 쓴다.
호버는 사이트 공통값(`scale(1.03)` · 1.1s · `cubic-bezier(.16,1,.3,1)`)을 그대로 쓴다. */
.ea-watch{ display:block; text-decoration:none; color:inherit; }
.ea-watch .m{ display:block; position:relative; overflow:hidden; }
/* 라벨이 그림 밖이라 미디어 정중앙에 선다 */
.ea-watch .play{ top:50%; }
.ea-watch img{ transition:transform 1.1s cubic-bezier(.16,1,.3,1); }
.ea-watch:hover img{ transform:scale(1.03); }
.ea-watch .lb{
display:flex; align-items:baseline; justify-content:flex-end; gap:.9em;
padding:20px 0 0;
}
.ea-watch .lb b{ font-family:var(--label-ko); font-size:clamp(15px,1.5vw,19px); font-weight:700; }
.ea-watch .lb i{
font-style:normal; font-family:var(--body-en); font-size:10.5px; letter-spacing:.24em;
text-transform:uppercase; color:var(--accent); transition:color .3s;
}
.ea-watch:hover .lb i{ color:var(--ink); }
.ea-watch:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
@media (prefers-reduced-motion:reduce){ .ea-watch img{ transition:none } }
@media (max-width:820px){
/* ⬛ 여기 있던 `.fc--earth .fc-duo.is-head` 접기 두 줄은 **§7 척추로 올라갔다** (2026-08-06).
선언이 척추로 갔으니 접는 자리도 척추에 있어야 한다 — 한쪽만 올리면 그게 이 파일에서
두 번째로 밟는 "특정도는 올리고 접는 자리는 안 적은" 사고가 된다. */
/* ★원장은 좁은 화면에서도 **두 단을 유지한다** (Seal 원칙 — 좌우로 나눈 것을 1열로 무너뜨리지 않는다).
"빌린 것 | 돌려받은 것"이 이 면의 전부라 1열로 세우면 주장이 사라진다.
대신 간격과 글자를 줄여서 두 칸이 390 에서도 선다. */
.ea-board, .ea-board.is-wide{ grid-template-columns:1fr; gap:22px; }
.ea-board figure.tall img{ max-width:100%; }
.ea-row{ gap:14px; padding:22px 0; }
.ea-cell.ea-give{ padding-right:12px; }
.ea-cell figure{ margin-top:10px; }
.ea-calls{ grid-template-columns:1fr; gap:24px; }
}
/* ══ 6. 여백 — 절끼리의 간격을 한 곳에서 준다 ════════════════════════
★자리마다 손으로 마진을 주면 반드시 한 군데가 빠진다(인계서 §7).
본문 흐름은 `.fc-flow` 하나가 맡고, 풀블리드 절은 그 밖으로 빠진다. */
.fc-flow > * + *{ margin-top:clamp(56px,8vw,124px); }
.fc-bleed{ width:100%; }
/* ══ 7. 모바일 ═══════════════════════════════════════════════════════
★두 단을 그냥 1열로 접으면 "만나지 않는다"는 주장이 사라진다.
`/work` 에서 쓴 **교차 접기**를 가져온다 — 방콕은 왼쪽에, 서울은 오른쪽에 붙이고
각 단에 짧은 헤어라인을 그어 두 줄기가 번갈아 나오는 것이 보이게 한다. */
@media (max-width:820px){
/* 히어로 — 2.37 띠는 390px 에서 165px 밖에 안 된다. 풀블리드로 바꾼다 */
.fc-hero{ min-height:100svh; justify-content:flex-end; padding:0 0 clamp(28px,6svh,54px); }
.fc-scope{ position:absolute; inset:0; aspect-ratio:auto; }
.fc-scope::after{
content:""; position:absolute; inset:0;
background:linear-gradient(0deg,rgba(0,0,0,.86),rgba(0,0,0,.24) 46%,rgba(0,0,0,.5));
}
.fc-head{ position:relative; z-index:2; }
.fd-split{ grid-template-columns:1fr; }
/* ★2026-08-05 — 이음매를 **없애지 않는다.** 가운데가 사라졌으면 왼쪽 한 줄로 선다.
Seal: "모든 데스크탑의 디자인은 모바일에서도 그 기조가 표현되고 작동하게 해야해."
한 줄기 실에 방콕은 가깝게(짧은 매듭) 서울은 멀게(긴 매듭) 매달린다 —
**매듭 길이의 낙차가 곧 두 도시의 어긋남**이라 좌우로 못 벌려도 뜻이 남는다.
예전엔 여기서 `display:none` 으로 선을 통째로 껐고, 그래서 데스크톱의 주장이
모바일에서 증발했다. 방콕 단의 왼쪽 테두리는 이 실과 자리가 같아 뺀다(선이 둘이 되면 안 된다). */
.fd-split::before{ left:0; }
.fd-split.is-drawn::after{ left:0; }
.fd-col{ padding:0; }
.fd-col:last-child{ padding-top:clamp(40px,9vw,72px); }
.fd-col:first-child{ padding-left:16px; }
.fd-col:last-child{ text-align:right; border-right:1px solid rgba(255,255,255,.22); padding-right:16px; }
/* 매듭은 좌우 모두 **왼쪽 실에서** 오른쪽으로 뻗는다 (데스크톱 `:last-child` 규칙과 같은 결) */
.fd-split.is-seq .fd-col:first-child figure::before,
.fd-split.is-seq .fd-col:last-child figure::before{
left:auto; right:100%; transform-origin:0% 50%;
background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.10));
}
/* 좌우 동시 → 교차 접기. 센터로 모으지 않는다 (`.fy-duo` 와 같은 규칙) */
.fc-duo{ grid-template-columns:1fr; gap:30px; }
.fc-duo > :first-child{ padding-right:10%; }
.fc-duo > :last-child{ text-align:right; margin-left:10%; }
/* ⚠ 단 **제목|본문** 쌍에는 교차 접기를 걸지 않는다. 그 카드는 성격이 **동등한** 두 덩어리를
번갈아 붙여 갈라 보이게 하는 장치인데, 제목과 본문은 애초에 위계가 다르다.
여기에 걸면 본문이 오른쪽 정렬로 넘어가 **읽는 글의 줄 첫머리가 흔들린다.**
좁은 화면에서는 제목이 위, 글이 아래로 서는 것이 그대로 자연스러운 순서다. */
/* ★`.fc-duo.is-head` 는 위 주석의 규칙을 **척추 이름으로** 갖는다 (2026-08-05).
`.fd-gv-head`(§5-A-2)는 같은 필요에서 나왔지만 이름이 `five, days` 안에 갇혀 있어
다음 면이 못 찾는다 — `sol-20260805-002.md` 에서 세 번 밟은 자리다.
선언을 같이 두어 **한 곳에서만 정의**한다. `five, days` 의 렌더는 바뀌지 않는다
(아래 `.fd-gv-head .fc-h` 크기 규칙은 그 면 고유라 그대로 둔다). */
/* ★접는 자리 — 위 §3 의 `.fc-duo.is-head`(0,2,0)가 `.fc-duo{1fr}`(0,1,0)을 이기므로
여기서 **같은 특정도로 다시 접는다.** 안 적으면 좁은 화면에서 제목과 글이 반 칸씩 갇힌다
(2026-08-05 `Earth Account` 390 실측에서 잡았던 그 사고다). */
.fc-duo.is-head{ grid-template-columns:1fr; }
.fc-duo.is-head .fc-h{ font-size:clamp(26px,7.4vw,38px); }
.fd-gv-head, .fc-duo.is-head{ gap:22px; }
.fd-gv-head > :first-child, .fc-duo.is-head > :first-child{ padding-right:0; }
.fd-gv-head > :last-child, .fc-duo.is-head > :last-child{ text-align:left; margin-left:0; }
/* ⚠ 1열로 접히면 **기둥 가운데 맞추기를 되돌린다.** 좁은 화면에서는 제목이 글 위에 서므로
둘의 왼쪽 선이 같아야 한다 — 제목만 가운데로 밀면 그 선이 어긋나 보인다 */
.fd-gv-head .fc-h{ font-size:clamp(26px,7.4vw,38px); width:auto; margin:0; }
/* 얼굴 — 한 줄이 안 되면 **두 줄**로 접는다. 1열로 세우면 "여럿이 한 곳을 본다"가 사라진다 */
.fd-faces{ grid-template-columns:repeat(2,1fr); }
/* ★2026-08-05 — 글만 좌우로 갈리고 **스틸은 둘 다 100% 폭**이라 좁은 화면에서 분할이 사라졌다.
"두 도시가 만나지 않는다"가 이 면의 전부인데 모바일에서 그게 없어지는 셈이다.
그래서 스틸도 제 쪽에 붙인다 — 방콕은 왼쪽, 서울은 오른쪽. 사이에 어긋남이 남는다.
(Seal: "five, days의 방콕과 서울을 나누어서 표현하는 스토리텔링에도 포함이야.") */
.fd-col figure{ max-width:78%; }
.fd-col:last-child figure{ margin-left:auto; }
.fd-city{ position:static; background:none; padding:0 0 14px; }
.fd-col .who{ font-size:15px; }
.fc-strip{ grid-template-columns:1fr; gap:18px; padding:24px 0; }
.fc-next{ flex-direction:column; align-items:flex-start; gap:14px; }
}
@media (prefers-reduced-motion:reduce){
.fc-play img, .fc-play video{ transition:none; }
}
/* 제작 노트 — 포스터를 옆에 세운다. 세로 판형이 스코프 띠들 사이에서 숨을 만든다 */
.fd-note{ display:grid; grid-template-columns:minmax(230px,320px) 1fr; gap:clamp(26px,4vw,60px);
align-items:start; }
.fd-note figure{ margin:0 }
.fd-note img{ width:100%; display:block }
@media (max-width:820px){
.fd-note{ grid-template-columns:1fr; gap:26px }
.fd-note figure{ max-width:280px }
}
/* 키보드 초점 — 어두운 지면에서 강조색 실선 */
.fc-play:focus-visible, .fc-next a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
/* 여는 스틸 — 첫 장면(영수증이 뽑혀 나오는 자취방)은 통 폭을 그대로 쓴다.
원장에 들어가기 전에 한 장이 서야 "빌리고 돌려받는다"가 무엇을 두고 하는 말인지 보인다 */
.ea-open{ margin:0; }
.ea-open img{ width:100%; display:block; }
/* ── 5-D. `I Wanna Go Out` : 폭이 곧 바깥이다 ─────────────────────────
시그니처는 필름의 동선이 줬다. 방(소파·폰) → 흰 복도와 계단 → 강을 건너는 보트 →
니파야자 초록 터널 → 올려다본 하늘. 안에서 밖으로 가는 것이 이 필름의 전부라서,
지면도 같은 방향으로 간다 — 스틸의 폭이 계단처럼 자라 마지막에 통을 벗어난다.
연출을 그림에 얹지 않는다. 폭과 여백만 일한다.
⚠ 폭 낙차는 크게 둔다 (`Yellow` 의 fy-stop 에서 밟은 자리 — 낙차가 작으면
"커진다"가 아니라 "들쭉날쭉하다"로 읽힌다).
⚠ 왼쪽 선을 고정한다. 커지는 쪽이 늘 오른쪽(바깥)이어야 한 방향으로 읽힌다. */
.fo-steps figure{ margin:0 0 clamp(34px,5vw,72px); }
.fo-steps figure:last-child{ margin-bottom:0; }
.fo-steps img{ width:100%; display:block; }
.fo-steps figcaption{
margin-top:9px; font-family:var(--cap-ko); font-weight:400; letter-spacing:var(--cap-track);
font-size:clamp(14px,1.2vw,16px); color:var(--dim);
}
.fo-step.w1{ max-width:34%; }
.fo-step.w2{ max-width:48%; }
.fo-step.w3{ max-width:62%; }
.fo-step.w4{ max-width:78%; }
.fo-step.w5{ max-width:92%; }
/* 마지막 초록은 통을 벗어난다(마크업이 `.fc-bleed` 로 든다). 캡션만 통 안으로 들인다.
⚠ 풀블리드는 `.fc-flow` 밖이라 간격을 못 받는다 — 제 여백을 든다(`.fd-house` 와 같은 사정) */
.fo-arrive{ margin:clamp(34px,5vw,72px) 0 0; }
.fo-arrive figure{ margin:0; }
.fo-arrive figcaption{
margin-top:10px; padding:0 var(--edge); text-align:center;
font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(15px,1.3vw,18px); color:rgba(255,255,255,.85);
}
@media (max-width:820px){
/* 낙차 유지 — 전부 100% 로 눕히면 "밖으로"가 사라진다 (fy-stop 모바일과 같은 결) */
.fo-step.w1{ max-width:56%; }
.fo-step.w2{ max-width:67%; }
.fo-step.w3{ max-width:78%; }
.fo-step.w4{ max-width:89%; }
.fo-step.w5{ max-width:100%; }
}
/* ── 5-E. `I Can't Just Stay at Home` : 버킷리스트가 목차다 ─────────────
시그니처는 필름 안의 소품이 줬다. 세라가 손으로 쓴 버킷 리스트 다섯 줄이
그대로 영화의 목차다 — 적힌 순서대로 방 안에서 해치우고, 항목마다 SNS 인증
화면이 도장처럼 찍힌다. 그래서 이 면의 본체는 그 리스트를 표로 펴는 것이다:
[항목] → [방 안의 실행] → [인증]. 발명한 폼이 아니라 소품을 조판으로 옮겼다.
★다섯째 항목(운전면허따기)은 실행 장면이 없다. 마스터 전 구간을 프레임으로
확인한 사실이다. 빈 행을 지어서 채우지 않는다 — 빈 것이 그 사실을 말한다
(`Earth Account` 원장의 빈 칸과 같은 처방). */
/* 기획 의도 인용 — 우리가 쓴 문장과 눈으로 갈린다 (`ea-src` 와 같은 문법. 이 면 소유) */
.fh-src{
padding-left:clamp(16px,1.6vw,24px); border-left:2px solid var(--accent);
font-family:var(--label-ko); font-weight:500;
font-size:clamp(15px,1.45vw,18.5px); line-height:1.72; color:var(--ink); max-width:30em;
}
.fh-from{
margin-top:14px; font-family:var(--body-en); font-size:10px; letter-spacing:.22em;
text-transform:uppercase; color:var(--dim);
}
/* 방송 그래픽 두 장 — 뉴스가 계획을 깨고 단톡이 취소를 알린다. 나란히 = 동등 */
.fh-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,20px); }
.fh-pair figure{ margin:0; }
.fh-pair img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.fh-pair figcaption{
margin-top:8px; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(13.5px,1.1vw,15.5px); color:var(--dim);
}
/* 리스트 실물 — 이 면의 원본 문서. 통 가운데 선다 */
.fh-paper{ margin:0 auto; max-width:min(62%,700px); }
.fh-paper img{ width:100%; display:block; }
.fh-paper figcaption{
margin-top:10px; text-align:center; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(14px,1.2vw,16px); color:var(--dim);
}
/* 리스트 행 — [항목 | 실행 | 인증]. 괘선 하나가 행을 가른다. 판을 깔지 않는다 */
.fh-list{ border-top:1px solid rgba(255,255,255,.16); }
.fh-row{
display:grid; grid-template-columns:minmax(150px,.62fr) 1fr 1fr;
gap:clamp(18px,2.6vw,44px); align-items:start;
padding:clamp(26px,3.4vw,48px) 0; border-bottom:1px solid rgba(255,255,255,.16);
}
.fh-row .no{
display:block; font-family:var(--body-en); font-size:10.5px; font-weight:600;
letter-spacing:.2em; color:var(--dim); margin-bottom:8px;
}
.fh-row h3{
font-family:var(--label-ko); font-weight:700; color:var(--ink);
font-size:clamp(17px,1.8vw,23px); line-height:1.45;
}
.fh-row .why{
margin-top:.8em; font-family:var(--body-ko); font-size:clamp(13px,1.05vw,14.5px);
line-height:1.8; color:var(--dim); max-width:16em;
}
.fh-row figure{ margin:0; }
.fh-row img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.fh-row figcaption{
margin-top:8px; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(13px,1.05vw,15px); color:var(--dim);
}
/* ⬛ 아래 둘(`.fh-row.is-empty` · `.fh-cut`)은 2026-08-06 Seal 지시로 **지면에서 빠졌다.**
("운동하기 다음 에피소드는 삭제" — 스토리를 다 알려주지 않는다.)
선언은 남긴다: 자산도 그대로 있고, 되살리는 판단이 나오면 마크업만 되돌리면 된다. */
/* 빈 행 — 다섯째 항목. 그림 자리가 비어 있는 것이 내용이다 */
.fh-row.is-empty p{
font-family:var(--body-ko); font-size:clamp(13.5px,1.1vw,15px); line-height:1.85;
color:var(--dim); align-self:center; grid-column:2 / -1; max-width:26em;
}
/* 필름이 행 사이에 끼워 둔 자막 카드("슬슬 현타온다") — 리스트의 숨. 원본 그대로 */
.fh-cut{ margin:0 auto; max-width:min(78%,900px); }
.fh-cut img{ width:100%; display:block; }
@media (max-width:820px){
/* 항목이 위로 서고 실행|인증 두 컷은 나란히 남는다 — 1열로 무너뜨리지 않는다 */
.fh-row{ grid-template-columns:1fr 1fr; gap:14px; padding:22px 0; }
.fh-row > .t{ grid-column:1 / -1; }
.fh-row.is-empty p{ grid-column:1 / -1; }
.fh-paper{ max-width:88%; }
.fh-cut{ max-width:92%; }
}
/* ── 5-F. `I Am Korean Trying To Be Korean` : 코론이 잣대다 ─────────────
시그니처는 필름의 자막이 줬다. 한국의 낯섦을 잴 때마다 자막이 코론으로
환산한다 — "코론은 500원" · "코론은 현금박치기" · "코론은 단수되요".
잣대가 서울이 아니라 코론이라는 것, 그게 이 코미디의 문법이라 지면도
그 자막 카드를 그대로 세운다. 자막이 이미 그림 안에 있으므로 글을 얹지 않는다.
배치는 지그재그 — 여러 항목이 이어질 때의 카드(`Yellow` 여정과 같은 선택).
단 실은 없다. 이 면의 항목들은 여정이 아니라 낱낱의 소동이다. */
/* 대구(對句) — 코론과 한국, 2020 과 록다운. 나란히 세우면 크기·무게가 동등해야 한다 */
.fk-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,20px); }
.fk-pair figure{ margin:0; }
.fk-pair img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.fk-pair figcaption{
margin-top:8px; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(13.5px,1.1vw,15.5px); color:var(--dim);
}
.fk-gauge figure{ margin:0 0 clamp(30px,4.4vw,60px); }
.fk-gauge figure:last-child{ margin-bottom:0; }
.fk-gauge img{ width:100%; display:block; }
.fk-gauge figcaption{
margin-top:9px; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(14px,1.2vw,16px); color:var(--dim);
}
.fk-g{ max-width:72%; }
.fk-g.r{ margin-left:auto; }
.fk-g.r figcaption{ text-align:right; }
/* 통 폭을 그대로 쓰는 한 컷(정지 숏)과 통을 벗어나는 끝 카드 */
.fk-still{ margin:0; }
.fk-still img{ width:100%; display:block; }
.fk-still figcaption{
margin-top:9px; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(14px,1.2vw,16px); color:var(--dim);
}
.fk-end{ margin:0; }
.fk-end img{ width:100%; display:block; }
@media (max-width:820px){
.fk-g{ max-width:86%; } /* 지그재그 유지 — 센터로 모으지 않는다 */
}
/* ── 5-G. `Daily Life In Bangkok` : 시험 성적서가 붙은 하루 ──────────────
시그니처는 필름의 뼈대가 줬다. 여는 카드가 "Shot On Gopro8" 로 시험을
선언하고, 하루 종일 카메라를 몸과 살림 속에 집어넣어 굴린 뒤, 마지막 카드가
"Gopro8 is Awesome / except under low light" 로 성적을 적는다.
하루처럼 찍힌 성능 시험이라 지면도 시험지의 순서를 따른다 — 선언 → 시험 → 판정.
★2026-08-06 Seal — **판정은 카드 한 장으로 끝낸다.** 처음엔 각주가 한 박자 늦게
붙는 개그를 살린다고 두 장을 세로로 쌓고 그 앞에 제목·본문까지 세웠는데,
Seal 이 그 절을 통째로 걷으라고 했다(*"이미지와 함께 삭제하고 스크린샷에 있는
저 이미지만 남겨"*). 맞다 — **필름이 이미 다 적어 둔 문장**이라 지면이 다시
설명하면 같은 말을 두 번 하는 것이 된다. 카드가 스스로 성적서다. */
/* 여는 카드·곁들이 개그 — 동시에 서는 것들만 나란히 */
.fb-cards{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,20px); }
.fb-cards figure{ margin:0; }
.fb-cards img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.fb-cards figcaption{
margin-top:8px; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(13.5px,1.1vw,15.5px); color:var(--dim);
}
/* 알람 3연타 — 한 덩어리로 이어 붙인다. 셋으로 나뉘면 스누즈의 리듬이 죽는다 */
.fb-alarms{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.fb-alarms figure{ margin:0; }
.fb-alarms img{ width:100%; height:auto; display:block; }
/* 하루의 동선 — 네 컷이 같은 크기로 선다 */
.fb-day{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(8px,1vw,14px); }
.fb-day figure{ margin:0; }
.fb-day img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
/* 시험 항목 — 카메라가 들어간 자리 여섯. 액션캠이라 놓인 앵글이 이 면의 시각 주장이다 */
.fb-rig{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); }
.fb-rig figure{ margin:0; }
.fb-rig img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.fb-rig figcaption{
margin-top:7px; text-align:center; font-family:var(--cap-ko); letter-spacing:var(--cap-track);
font-size:clamp(13px,1.05vw,15px); color:var(--dim);
}
/* 판정 — 카드 한 장. 통보다 좁게 세워 지면이 그 카드를 향해 좁아지게 한다 */
.fb-verdict{ max-width:min(78%,880px); margin:0 auto; }
.fb-verdict figure{ margin:0 0 clamp(14px,1.8vw,24px); }
.fb-verdict figure:last-child{ margin-bottom:0; }
.fb-verdict img{ width:100%; display:block; }
@media (max-width:820px){
.fb-rig{ grid-template-columns:repeat(2,1fr); } /* 두 칸 유지 — "여섯 자리"의 병렬이 남는다 */
.fb-day{ grid-template-columns:repeat(2,1fr); }
.fb-verdict{ max-width:100%; }
}