/* ============================================================================
sealkim.com — 공용 스타일 (site.css)
정본 = DESIGN.md. 값을 여기서 임의로 바꾸지 말고 DESIGN.md를 먼저 고친다.
레이아웃·컴포넌트 = 현 sealkim.com 실측 승계
모션 = YSK 승계 (Lenis + GSAP ScrollTrigger)
색·서체 = 재설계 (2026-08-02 확정)
============================================================================ */
:root{
/* 색 — 현 사이트 픽셀 실측. 완전 무채색 + 강조 하나 */
--void:#000000; --ground:#353535; --band:#EEEEEE;
--ink:#FFFFFF; --dim:#A3A3A3; --line:#4A4A4A;
--accent:#F56E23; /* H21 S91 L55 — ground 4.17:1 · void 7.14:1 */
--accent-dark:#B94609; /* 밝은 밴드 전용 — band 4.59:1 */
/* 서체 — 라틴·한글을 따로 잡는다 */
--title-en:"Bayon",sans-serif;
--title-ko:"Gmarket Sans","Bayon",sans-serif;
--body-en:"Onest",sans-serif;
--body-ko:"Pretendard Variable","Onest",sans-serif;
/* 히어로 큰 글자 전용 (2026-08-03 Seal: "sealkim.com처럼 더 굵고 강렬하게").
Bayon 은 콘덴스드지만 획이 얇아 그 자리를 못 버틴다. Anton 은 라이브가 실제로 쓰던 얼굴 */
--display-en:"Anton","Bayon",sans-serif;
--edge:clamp(18px,4vw,44px);
--max:1180px;
--hud:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{
background:var(--ground); color:var(--ink);
font-family:var(--body-ko);
-webkit-font-smoothing:antialiased; overflow-x:hidden;
/* ★한글 필수 — 없으면 어절 중간에서 잘린다. anywhere가 없으면 긴 URL이 가로로 삐져나간다 */
word-break:keep-all; overflow-wrap:anywhere;
}
/* ══ 영문 조판 분기 (2026-08-06 · 영문 라운드) ═══════════════════════
★한글에서 얻은 규칙을 영문에 그대로 물리지 않는다. 언어가 줄을 접는 방식이 다르다.
① `word-break` — 한글은 어느 글자에서나 접히므로 `keep-all` 로 어절을 지켜야 한다.
영문은 애초에 낱말 단위로 접히니 `keep-all` 은 **뜻이 없고**, `anywhere` 는
들어갈 자리가 있는데도 **긴 낱말을 아무 데서나 자른다**(`Srinakharinwir/ot`).
영문은 `break-word` 가 맞다 — 정말 안 들어갈 때만 자른다.
② `text-wrap:pretty` — **과부(widow)를 브라우저가 막는다.**
영문은 낱말이 통째로 넘어가서 마지막 줄에 낱말 하나만 남는 일이 잦다.
모바일 390 에서 확정 인용문의 끝이 `[331 · 21]` 로 접혀 `so` 한 낱말이 홀로
떨어졌다(`build/measure-type.mjs` 가 잡았다). 글은 확정본이라 못 고치고,
` ` 로 못박으면 데스크톱에서 멀쩡한 줄까지 끊긴다. 이 자리는 브라우저가 푼다.
⚠ 못박은 ` ` 는 그대로 존중된다 — 자동으로 접히는 구간에만 걸린다.
⛔ 한글 면에는 안 건다. 확정된 조판을 건드리지 않는다(한글은 `keep-all` 이 이미 푼다). */
html[lang="en"] body{
font-family:var(--body-en);
word-break:normal; overflow-wrap:break-word;
}
html[lang="en"] :is(p,figcaption,dd,dt,li,blockquote){ text-wrap:pretty }
/* ③ 제목은 `balance` — 짧은 제목의 줄 길이를 브라우저가 **고르게** 나눈다.
`pretty` 는 마지막 줄만 손보는데, 제목은 세 줄이 되면 줄마다 길이가 들쭉날쭉해진다.
`/about` 의 키워드 셋이 모바일에서 그렇게 무너졌다. 여섯 줄까지만 도는 규칙이라
긴 산문에는 안 건다(그래서 문단과 갈라 적는다).
⚠ 못박은 ` ` 는 그대로 존중된다. */
html[lang="en"] :is(h1,h2,h3,h4){ text-wrap:balance }
img,video{display:block;max-width:100%}
/* ★★`` 는 **상자를 만들지 않는다** (2026-08-06 신설)
─────────────────────────────────────────────────────────────────────────
빌드(`wrapPictures`)가 avif/webp 를 주려고 `` 를 `` 로 감싼다.
소스에는 없고 **배포본에만 생기는 층**이라, 조판이 조용히 어긋난다:
· `.fs--mark{display:flex;justify-content:center}` 의 flex 아이템이 img 가 아니라
**picture** 가 된다 → 홈 워드마크(싸인 로고)가 가운데가 아니라 **왼쪽으로 몰렸다**
· 격자·flex 의 자식 수를 세는 규칙, `object-fit`·`aspect-ratio` 가 걸린 자리 전부 같은 종류
`display:contents` 는 picture 의 상자를 없애고 **img 를 원래 부모의 자식처럼 배치**한다.
그래서 소스에서 본 조판이 배포본에서도 그대로 선다.
⚠ 이것으로 **선택자까지 고쳐지지는 않는다.** 선택자 매칭은 상자가 아니라 DOM 기준이라
`A > img` 는 여전히 안 걸린다(`A > picture > img` 가 됐다). 그 자리는 규칙마다 짝을
같이 적어 둔다 — `case.css` 의 `.cs-voice`, `film-case.css` 의 `.fy-stop` 이 그렇다.
⚠ 그래서 **눈으로 못 찾는다.** 확정본과 빌드본의 이미지 치수를 기계로 대조한다
(`build/diff-build.mjs`). 이 결함 넷이 전부 거기서 나왔다. */
picture{display:contents}
/* ⛔⛔ `display:contents` 는 picture 의 **모든 자식을 부모의 아이템으로 노출**시킨다 —
`` 뿐 아니라 `` 까지. 평소 `` 는 picture 가 자식을 상자로 안 그려서
보이지 않을 뿐, **제 `display:none` 을 가진 것이 아니다.**
그래서 격자·flex 안에서 칸을 먹는다. 실측(`.cs-two` · 두 칸 격자):
확정본 img1 x162(1열) · img2 x743(2열)
빌드본 img1 x743(2열) · img2 x743(2열, 겹쳐서 안 그려짐)
PNG 는 avif 변종이 없어 `` 가 **하나**씩 붙는데, 그 하나가 1열을 먹은 것이다.
(jpg 는 avif+webp 둘이라 두 칸을 먹어 오히려 어긋남이 덜 보였다 — 그래서 이 면에서만 났다.)
★내가 넣은 고침(`display:contents`)이 **새 결함을 만든 자리**다. 둘은 한 쌍으로 간다. */
picture > source{display:none}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--edge)}
/* ══ 지면 = 검정 (2026-08-03 Seal 확정 · 사이트 전체) ═════════════════
*"전체적인 배경을 지금 work페이지 같이 검정색이 좋은 것 같아. 훨씬 고급져보이네."*
★2026-08-05 여기로 올렸다. 전역 확정 사항인데 `work.css` 와 `case.css` **두 곳에만**
있었다. 그래서 그 둘을 안 부르는 면(`/film` 상세)에서 지면이 회색으로 떴다.
전역 규칙을 문법 파일에 두면 그 문법을 안 쓰는 면에서 조용히 빠진다.
푸터도 같이 눕힌다 — 기본 푸터는 `--ground` 에서 시작하는 그라디언트라
검은 지면 위에서 위쪽 회색이 띠로 뜬다. 지면을 바꾸면 푸터 착지를 같이 봐야 한다. */
body.tone-void{background:var(--void)}
body.tone-void footer.site{background:var(--void)}
/* ══ HUD — 상단 내비 (2026-08-03 재디자인) ═══════════════════════════
왜 다시 짰나: 2026-08-03 Seal — "너의 탑메뉴 스타일이 매우 마음에 안들어."
전 판은 #2A2A2A 통짜 바가 화면 위에 늘 얹혀 있어, 라이브 홈이 **히어로 자체를
메뉴로 쓰는**(원장 §0 ViewType="Menu") 구성과 정면으로 부딪혔다.
바뀐 것
① 처음엔 판이 없다 — 투명 오버레이. 히어로의 큰 글자가 곧 메뉴다
② 스크롤하면 판이 생긴다 — `.stuck` 에서 반투명 검정 + 블러, 높이 80→56
③ 현재 면 표시를 밑줄에서 **강조색 점**으로. 밑줄은 링크 호버와 신호가 겹쳤다
④ 자간·크기를 키워 라벨이 조판으로 읽히게 (12/.14em → 13/.18em) */
.hud{position:fixed;top:0;left:0;right:0;z-index:60;height:80px;
display:flex;align-items:center;justify-content:flex-end;gap:34px;padding:0 5vw;
background:transparent;
transition:height .35s cubic-bezier(.16,1,.3,1),background .35s,backdrop-filter .35s}
.hud .mark{margin-right:auto}
/* ── 판을 쓰지 않는다 (2026-08-03 재검토) ─────────────────────────────
Seal 질문: "탑메뉴에서 어두운바를 내세우는데 이게 없이도 디자인적으로 괜찮을까?"
없는 쪽이 낫다고 본다. 근거 넷:
① **DESIGN.md 원칙과 부딪힌다** — "톤 사다리가 곧 섹션 구분이다. 구분선을 따로 긋지 않는다."
불투명 바는 화면 맨 위에 상시 구분선을 하나 긋는 것이다
② **모션을 가져온 YSK 에도 판이 없다** — `.hud` 가 투명이다. 대신 스크롤하면 링크를
치워 버려서 가독성 문제를 아예 피한다. 우리는 반대로 링크가 **도착해서 머무르므로**
YSK 가 피해 간 문제를 우리가 풀어야 한다 — 그 답이 판일 필요는 없다
③ **풀블리드 영상이 잘린다** — 케이스 섹션은 배경 영상이 화면을 꽉 채우는데 위 56px 이
검은 띠로 덮인다. "영상이 무게를 진다"(DESIGN.md 원칙 3)와 정면으로 어긋난다
④ **라이브 sealkim.com 에도 통짜 바가 없다** — 오버레이 메뉴다
판 없이 가독성을 확보하는 방법 = 스크림 + 그림자. 둘 다 경계가 없어서 "띠"로 안 보인다.
· 위→아래 그라디언트 스크림 (여기 `::before`)
· 글자 그림자 `0 1px 10px rgba(0,0,0,.4)` — YSK 가 쓰는 값 그대로
높이가 80→56 으로 주는 것은 남긴다. 그게 "스크롤 중"이라는 유일한 신호가 된다.
⬛ 되돌리려면 `.hud` 에 `hud--plate` 를 붙인다. 비교 화면 = `_probe/hud.html` */
.hud::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.16) 62%,transparent);
transition:opacity .35s}
.hud.stuck{height:56px}
/* 어두운 판 — 반려된 전 판. 비교용으로 남겨 둔다 */
.hud--plate.stuck{background:rgba(10,10,10,.82);backdrop-filter:blur(14px)}
.hud--plate.stuck::before{opacity:0}
.hud .mark{font-family:var(--body-en);font-size:12px;letter-spacing:.28em;font-weight:700;
text-decoration:none;transition:color .25s}
.hud .mark:hover{color:var(--accent)}
/* ── 내비 링크 — YSK 조판 그대로 (2026-08-03 Seal: "yourstorykorea의 폰트를 따라가보자")
실측 출처: `태국강의사업/site/src/site.css` — Onest 11px · 자간 .2em · 굵기 600 ·
밑줄 `::after` 1.5px 가 왼→오로 채워진다. Bayon 을 쓰던 전 판을 버렸다.
메뉴는 셋뿐이다 (2026-08-03 Seal: WORK · FILM · I AM SEAL. CONTACT 는 I AM SEAL 안으로) */
.hud nav{display:flex;gap:28px;align-items:center}
.hud nav a{position:relative;font-family:var(--body-en);font-size:11px;letter-spacing:.2em;
font-weight:600;text-transform:uppercase;color:var(--ink);text-decoration:none;
text-shadow:0 1px 10px rgba(0,0,0,.4);white-space:nowrap}
.hud nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;
background:var(--accent);transition:right .35s ease}
.hud nav a:hover::after,.hud nav a[aria-current="page"]::after{right:0}
/* ── 언어 전환 — **갈 곳 하나만 표기한다** (2026-08-03 Seal)
국기 아이콘 안을 냈다가 반려됐다("아이콘뷰는 별로네"). 두 언어를 나란히 놓는 것도 반려 —
*"둘다 표시하지말고 하나만 표시해서 바꾸는걸로 하자. 표기는 전처럼."*
그래서 한국어 면에는 `EN` 하나, 영문 면에는 `KO` 하나만 있다. 지금 언어는 표시하지 않는다.
자동 리디렉트하지 않는다 — 사용자가 고른다. */
.hud .lang{position:relative;font-family:var(--body-en);font-size:11px;letter-spacing:.2em;
font-weight:600;text-transform:uppercase;color:rgba(255,255,255,.62);text-decoration:none;
text-shadow:0 1px 10px rgba(0,0,0,.4);
padding-left:22px;border-left:1px solid rgba(255,255,255,.22);transition:color .25s}
.hud .lang:hover{color:var(--ink)}
/* ══ 홈 모프 — 히어로의 큰 글자가 탑메뉴로 옮겨가 자리잡는다 ═══════════
2026-08-03 Seal: "처음엔 탑메뉴가 안 보이고 히어로의 큰 타이틀만. 스크롤이 조금이라도
되면 그 셋이 탑메뉴로 움직여서 자리잡는 모션. 느낌은 yourstorykorea 탑메뉴처럼."
YSK 원본(`태국강의사업/site/src/site.js`·`site.css`)에서 가져온 것 — 값까지 그대로다:
· 나갈 때 `.6s cubic-bezier(.16,1,.3,1)` · 앞에서부터 0/.05/.1 스태거
· 들어올 때 `.62s cubic-bezier(.62,0,.9,.4)`(ease-in — 느리게 시작해 확 빨라진다)
· **히스테리시스 70 내려갈 때 / 24 올라올 때** — 경계에서 깜빡이지 않게 하는 장치
· 이동 거리는 JS 가 `getBoundingClientRect` 로 실측해 넣는다. 눈대중 상수를 안 쓴다
YSK 와 다른 것: YSK 는 스크롤하면 메뉴가 원 안으로 **빨려 들어가고**, 여기는 반대로
히어로에서 **나와 자리잡는다.** 방향만 뒤집었고 이징·스태거·히스테리시스는 같다.
서체가 도중에 바뀐다(Anton → Onest). 한 요소로는 불가능해서 두 요소가 같은 경로를
지나가며 교차한다 — 히어로 글자가 날아가며 사라지고, 도착 지점에서 메뉴 글자가 켜진다. */
.morphing .hud .mark,
.morphing .hud .lang{opacity:0;transition:opacity .5s ease .1s}
.morphing.scrolled .hud .mark,
.morphing.scrolled .hud .lang{opacity:1}
/* 메뉴 글자 — 히어로 자리에 있다가 제 슬롯으로. 도착할 때쯤 켜진다 */
.morphing .hud nav a{
transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--ms,1));
transform-origin:left center;opacity:0;pointer-events:none;
transition:transform .62s cubic-bezier(.62,0,.9,.4),opacity .3s ease}
.morphing.scrolled .hud nav a{transform:none;opacity:1;pointer-events:auto;
transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .34s ease .26s}
.morphing.scrolled .hud nav a:nth-child(1){transition-delay:0s,.26s}
.morphing.scrolled .hud nav a:nth-child(2){transition-delay:.05s,.31s}
.morphing.scrolled .hud nav a:nth-child(3){transition-delay:.1s,.36s}
/* 히어로 글자 — 메뉴 슬롯으로 날아가며 꺼진다. 앞 절반은 온전히 보인다 */
.morphing .hero-nav a{
transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s ease .2s}
.morphing.scrolled .hero-nav a{
transform:translate(var(--hx,0px),var(--hy,0px)) scale(var(--hs,1));
transform-origin:left center;opacity:0;pointer-events:none;
transition:transform .62s cubic-bezier(.62,0,.9,.4),opacity .26s ease .16s}
.morphing.scrolled .hero-nav a:nth-child(3){transition-delay:0s,.16s}
.morphing.scrolled .hero-nav a:nth-child(2){transition-delay:.05s,.21s}
.morphing.scrolled .hero-nav a:nth-child(1){transition-delay:.1s,.26s}
/* JS 가 죽어도 메뉴는 눌려야 한다 — 모프는 `.morphing` 이 붙어야만 걸린다 */
.morphing .hud{pointer-events:none}
.morphing.scrolled .hud{pointer-events:auto}
@media(prefers-reduced-motion:reduce){
.morphing .hud nav a,.morphing .hero-nav a{transition-duration:.01ms!important}
}
/* 내비가 화면 위에 떠 있으므로 첫 섹션이 그 아래로 깔린다. 히어로처럼 배경이
깔리는 면은 그대로 두고, 배경이 없는 면만 이 클래스로 자리를 비운다 */
.pg--offset{padding-top:80px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;gap:5px;flex-direction:column}
.burger i{display:block;width:22px;height:2px;background:var(--ink)}
/* ══ 톤 사다리 — 배경 전환이 곧 섹션 구분. 구분선을 따로 긋지 않는다 ══ */
.s-void {background:var(--void)}
.s-ground{background:var(--ground)}
.s-band {background:var(--band);color:#1A1A1A}
.s-band a{color:var(--accent-dark)}
.s-band .dim,.s-band .body,.s-band .meta{color:#4A4A4A}
section{padding:clamp(30px,5vw,64px) 0}
section.tight{padding:clamp(22px,3.5vw,40px) 0}
/* ══ 타이포 ═══════════════════════════════════════════════════════ */
.kick{font-family:var(--title-en);font-size:12px;letter-spacing:.2em;color:var(--accent);
text-transform:uppercase}
.t-en{font-family:var(--title-en);text-transform:uppercase;line-height:1.06;letter-spacing:.005em}
.t-ko{font-family:var(--title-ko);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.h-hero{font-size:clamp(30px,6vw,76px)}
.h-1{font-size:clamp(24px,4vw,50px)}
.h-2{font-size:clamp(19px,2.4vw,30px)}
.h-3{font-size:clamp(16px,1.7vw,21px)}
.lead{font-size:clamp(15px,1.15vw,17px);line-height:1.9;color:#D2D2D2;max-width:60ch}
.meta{font-size:13px;font-weight:600;color:var(--dim);line-height:1.6}
.body{font-size:clamp(15px,1.1vw,16.5px);line-height:1.9;color:#D2D2D2;max-width:58ch}
.body + .body{margin-top:14px}
.quote{font-size:clamp(16px,1.4vw,20px);font-weight:600;line-height:1.6;
padding-left:16px;border-left:2px solid var(--accent);max-width:44ch}
/* ══ 영상 ═════════════════════════════════════════════════════════ */
/* 풀영상 = Vimeo 임베드 (방문자가 눌러서 본다) */
.embed{position:relative;aspect-ratio:16/9;background:var(--void);overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 자동 루프 = 셀프호스트 muted MP4. 뷰포트 진입 1개만 재생(site.js) */
.loop{position:relative;overflow:hidden;background:var(--void)}
.loop video{width:100%;height:100%;object-fit:cover}
.bleed{width:100vw;margin-left:calc(50% - 50vw)}
/* ══ 작품 그리드 ══════════════════════════════════════════════════
썸네일은 정지 이미지가 아니라 **자동 루프 영상**이다 (2026-08-03 Seal).
img·video 어느 쪽이 들어와도 같은 규칙을 받는다 — 루프 자산이 아직 없는 작품은
img 로 두고, 자산이 생기면 video 로 갈아끼우면 레이아웃이 그대로다. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.grid.two{grid-template-columns:repeat(2,1fr)}
/* 장편 — 같은 그리드 안에서 가로 2칸. 크기 하나로 위계를 낸다(별도 섹션을 만들지 않는다) */
.grid .card.wide{grid-column:span 2}
.card{text-decoration:none;display:block}
.card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--void)}
.card .thumb img,.card .thumb video{width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.16,1,.3,1)}
.card:hover .thumb img,.card:hover .thumb video{transform:scale(1.04)}
.card .thumb::after{content:"";position:absolute;inset:0;border:1px solid transparent;
transition:border-color .35s;pointer-events:none}
.card:hover .thumb::after{border-color:rgba(255,255,255,.45)}
.card h3{margin-top:14px}
.card .meta{margin-top:6px}
/* 형식 배지 — FEATURE / SHORT. 그리드 위계를 글자로 한 번 더 확인해 준다.
루프 위에 얹히므로 밑에 그러데이션을 깔아 어떤 프레임에서도 읽히게 한다 */
/* 스크림이 얕으면 밝은 프레임(흰 종이·하늘)에서 오렌지가 2.5:1로 떨어져 안 읽힌다.
루프는 프레임이 계속 바뀌므로 **가장 밝은 프레임 기준**으로 깔아야 한다 */
.card .badge{position:absolute;left:0;bottom:0;z-index:2;
font-family:var(--title-en);font-size:11px;letter-spacing:.18em;
padding:26px 14px 10px;width:100%;pointer-events:none;
background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.5) 46%,transparent)}
.card .badge b{font-weight:400;color:var(--accent)}
.card .badge span{color:#CFCFCF;margin-left:10px}
/* ══ 작품 상세 (/film/) ═════════════════════════════════════
그리드에서 카드를 누르면 오는 면. 순서 = 풀영상 → 제목/형식 → 본문 → 크레딧 → 스틸.
풀영상만 Vimeo 임베드고 나머지는 전부 셀프호스트다. */
.back{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
font-family:var(--title-en);font-size:12px;letter-spacing:.14em;color:var(--dim);
transition:color .25s}
.back:hover{color:var(--accent)}
.back::before{content:"←";font-size:14px;line-height:1}
.detail .grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:clamp(22px,4vw,64px);align-items:start}
.detail .poster{background:var(--void)}
/* height:auto 없으면 width/height 속성값이 그대로 높이로 쓰인다 — 세로 포스터가 늘어난다 */
.detail .poster img{width:100%;height:auto}
.credits{margin-top:26px;border-top:1px solid var(--line);padding-top:18px}
.credits dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:13.5px;line-height:1.7}
.credits dt{color:var(--dim);font-weight:600;white-space:nowrap}
.credits dd{color:#D2D2D2}
/* 스틸 갤러리 — /film 유지 확정 (2026-08-02 Seal). /work 에서는 쓰지 않는다 */
.stills .g{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stills .g img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--void)}
/* 다음 작품 — 상세에서 막다른 길을 만들지 않는다 */
.nextwork{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:baseline;
border-top:1px solid var(--line);padding-top:22px;margin-top:clamp(30px,5vw,56px)}
.nextwork .kick{flex:0 0 auto}
/* 카피 대기 표시 — 지어낸 문장을 넣지 않고 빈자리를 눈에 보이게 둔다.
런칭 전 QA에서 .pending 이 하나라도 남아 있으면 게이트를 통과시키지 않는다. */
.pending{color:#8A8A8A;font-style:italic;border:1px dashed var(--line);
padding:10px 14px;border-radius:2px;display:inline-block;font-size:13.5px}
/* ══ CTA ══════════════════════════════════════════════════════════ */
.cta{display:inline-block;background:var(--accent);color:var(--void);text-decoration:none;
font-family:var(--body-en);font-size:12px;letter-spacing:.12em;font-weight:700;
padding:13px 22px;border-radius:2px;transition:background .3s,transform .3s}
.cta:hover{background:#FF8340;transform:translateY(-2px)}
.link{font-family:var(--title-en);font-size:13px;letter-spacing:.12em;text-decoration:none;
border-bottom:2px solid var(--accent);padding-bottom:2px;display:inline-block}
/* ══ 푸터 (2026-08-03 재설계) ═══════════════════════════════════════
라이브 sealkim.com 에는 푸터가 없다 — 원장에 없으니 이건 **새로 짓는 자리**다.
그래서 카피를 지어내지 않았다(2026-08-03 Seal: "카피는 나중에 다시 정리하겠다").
조판과 구조만 세워 두고, 문장이 들어갈 자리는 비워 뒀다.
설계 — 지면이 톤 사다리(void → ground → band)로 끝나야 하므로 푸터는 맨 아래 `void`.
히어로가 Anton 큰 글자로 열리니 **푸터도 같은 얼굴로 닫는다** — 위아래가 한 벌로 묶인다.
그 아래는 실선 하나와 최소 정보뿐이다. 링크를 늘어놓지 않는다(내비가 이미 셋이다). */
/* ── 지면 (2026-08-03 재설계) ──────────────────────────────────────
Seal: "검은색 배경이 너무 이질적인데 이건 우리의 컬러팔레트 문제일까?"
→ **팔레트 문제가 아니다.** 홈은 처음부터 끝까지 `--ground` + 풀블리드 영상뿐이고
`--void` 가 **한 번도 안 나온다.** 거기에 순검정 판이 갑자기 들어오니 예고 없는 톤이라
붙어 있는 게 아니라 얹혀 있는 걸로 보인다. 색이 틀린 게 아니라 **이행이 없었다.**
고친 방법: 위 끝을 지면색 그대로 두고 아래로 내려가며 void 에 **도착**하게 한다.
경계선이 사라지고(위 5vh 빈 띠와 같은 색으로 시작한다) 톤 사다리도 지켜진다 —
void 가 없어지는 게 아니라 잘못된 자리에서 시작하던 것을 끝자리로 옮긴 것이다. */
footer.site{padding:clamp(64px,9vw,132px) 5vw clamp(26px,3vw,40px);
background:linear-gradient(180deg,var(--ground) 0%,#242424 40%,var(--void) 100%)}
/* 비교용으로 남겨 둔 전 판 — `_probe/footer.html` */
footer.site.f--slab{background:var(--void)}
/* 워드마크를 지면에 가라앉힌 안 */
footer.site.f--sunk .fmark{color:rgba(255,255,255,.17)}
/* 폭을 채우는 워드마크. `vw` 하나로 잡아야 어느 폭에서도 같은 비율로 찬다 —
clamp 의 px 하한을 쓰면 좁은 화면에서 글자가 여백을 넘어간다.
22vw = 안쪽 폭(90vw)에 "SEAL KIM" 이 딱 맞는 값이다(Anton 실측 4.09em 폭).
★가운데 정렬 (2026-08-03 Seal). 넓은 화면에서 상한 330px 이 걸리면 폭이 남는데,
그때 왼쪽에 붙어 보였다. 가운데로 두면 채울 땐 채우고 남을 땐 가운데 선다. */
footer.site .fmark{display:block;text-align:center;font-family:var(--display-en);
font-size:min(22vw,330px);line-height:.86;letter-spacing:0;
text-transform:uppercase;text-decoration:none;color:var(--ink);
transition:color .4s cubic-bezier(.16,1,.3,1)}
footer.site .fmark:hover{color:var(--accent)}
footer.site .frow{display:flex;flex-wrap:wrap;justify-content:space-between;
align-items:flex-end;gap:24px 40px;
margin-top:clamp(30px,4vw,54px);padding-top:22px;border-top:1px solid var(--line)}
/* 링크 조판은 탑메뉴와 같은 규격이다 — 같은 것은 같게 보여야 한다 */
footer.site .fnav{display:flex;flex-wrap:wrap;gap:26px}
footer.site .fnav a,footer.site .fmeta a{position:relative;font-family:var(--body-en);
font-size:11px;letter-spacing:.2em;font-weight:600;text-transform:uppercase;
color:var(--dim);text-decoration:none;transition:color .25s}
footer.site .fnav a:hover,footer.site .fmeta a:hover{color:var(--ink)}
footer.site .fnav a::after,footer.site .fmeta a::after{content:"";position:absolute;
left:0;right:100%;bottom:-5px;height:1.5px;background:var(--accent);
transition:right .35s ease}
footer.site .fnav a:hover::after,footer.site .fmeta a:hover::after{right:0}
footer.site .fmeta{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
/* 메일 주소는 소문자 그대로 — 대문자로 바꾸면 주소로 안 읽힌다 */
footer.site .fmeta .mail{text-transform:none;letter-spacing:.06em;color:var(--ink)}
footer.site .fbase{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
margin-top:clamp(26px,3vw,42px);
font-family:var(--body-en);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:#6E6E6E}
@media(max-width:700px){
footer.site .frow{flex-direction:column;align-items:flex-start}
}
/* ══ 모션 — YSK 리빌 토큰 (y:34 · blur 8→0 · ~1s · power4.out · once) ══
초기 hidden은 JS(html.mo)로만 건다 → no-JS·크롤러에서도 콘텐츠가 보인다 */
html.mo [data-reveal]{opacity:0;transform:translateY(34px);filter:blur(8px)}
html.mo [data-reveal].in{opacity:1;transform:none;filter:none;
transition:opacity .95s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1),
filter 1s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
html.mo [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;
transition:none!important}
html{scroll-behavior:auto}
}
/* ══ 반응형 — 860px ═══════════════════════════════════════════════ */
/* ══ 전체화면 내비 (버거) — 2026-08-03 재설계 ═══════════════════════
Seal: "지금은 너무 성의없이 나와있는 느낌이야. 배경을 조금 투명하게하고 메뉴들을 센터에."
"지금 english로 해놓은건 다른 메뉴와 동격으로 보이잖아."
바뀐 것 넷
① **지면이 반투명해졌다** — 뒤 화면이 비친다. 덮어 버리는 게 아니라 위에 얹히는 느낌
② **가운데 정렬** — 왼쪽에 붙어 있던 목록을 화면 한가운데로
③ **얼굴을 Anton 으로** — 히어로·푸터와 같은 큰 글자 계열이다. 이 면이 그 셋째 자리다
(Bayon 을 쓰던 전 판은 크기만 컸지 무게가 없었다)
④ **언어는 동격이 아니다** — 실선 아래로 내리고 탑메뉴 규격(11px)까지 줄였다.
메뉴 셋과 나란한 큰 글자였던 것을 고친 것이다 */
.navfs{position:fixed;inset:0;z-index:110;display:none;flex-direction:column;
justify-content:center;align-items:center;padding:0 var(--edge);
/* 더 투명하게 (2026-08-03 Seal: "그래야 더 감각적으로 보일 수 있을 것 같아").
.84 → .52. 대신 블러를 26 → 34 로 올렸다 — 뒤가 더 비치되 형체는 뭉개져서
Anton 굵은 글자가 그 위에서 버틴다. 투명도만 올리면 배경 디테일이 글자를 갉아먹는다 */
background:rgba(6,6,6,.52);backdrop-filter:blur(34px) saturate(.9);
-webkit-backdrop-filter:blur(34px) saturate(.9);
opacity:0;visibility:hidden;
transition:opacity .5s cubic-bezier(.16,1,.3,1),visibility .5s}
.navfs.on{opacity:1;visibility:visible}
/* 메뉴 셋 — 열릴 때 아래에서 올라오며 켜진다. 스태거는 사이트 공통값(.05s) */
.navfs .items{display:flex;flex-direction:column;align-items:center;
gap:min(2.4vh,16px);text-align:center}
.navfs .items a{display:block;font-family:var(--display-en);
font-size:clamp(34px,11.5vw,68px);line-height:1.04;letter-spacing:.03em;
text-transform:uppercase;text-decoration:none;color:var(--ink);
opacity:0;transform:translateY(24px);
transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),color .3s}
.navfs.on .items a{opacity:1;transform:none}
.navfs.on .items a:nth-child(1){transition-delay:.08s}
.navfs.on .items a:nth-child(2){transition-delay:.13s}
.navfs.on .items a:nth-child(3){transition-delay:.18s}
.navfs .items a:hover,.navfs .items a[aria-current="page"]{color:var(--accent)}
/* 언어 — 메뉴와 동격이 아니다. 실선으로 끊고 탑메뉴와 같은 규격으로 줄인다 */
.navfs .lang-row{display:flex;justify-content:center;
width:min(260px,56vw);margin-top:min(7vh,52px);padding-top:20px;
border-top:1px solid var(--line);
opacity:0;transition:opacity .45s ease .3s}
.navfs.on .lang-row{opacity:1}
.navfs .lang-row a{font-family:var(--body-en);font-size:11px;letter-spacing:.2em;
font-weight:600;text-transform:uppercase;color:var(--dim);text-decoration:none;
transition:color .25s}
.navfs .lang-row a:hover{color:var(--ink)}
/* 닫기 — 글리프(×) 대신 두 획으로 그린다. 크기·굵기가 버거와 맞는다 */
.navfs .cx{position:absolute;top:22px;right:var(--edge);width:34px;height:34px;
background:none;border:0;padding:0;cursor:pointer}
.navfs .cx span{position:absolute;left:4px;right:4px;top:50%;height:2px;
background:var(--ink);transition:background .25s}
.navfs .cx span:first-child{transform:rotate(45deg)}
.navfs .cx span:last-child{transform:rotate(-45deg)}
.navfs .cx:hover span{background:var(--accent)}
@media(prefers-reduced-motion:reduce){
.navfs .items a{transition-duration:.01ms!important;transform:none!important}
}
@media(max-width:860px){
.hud nav{display:none}
/* ★언어 전환을 헤더에서 뺀다 — 버거 옆에 `EN` 이 끼어 어색했다(2026-08-03 Seal).
버거 안(`.navfs .lang-row`)으로 들어간다 */
.hud .lang{display:none}
.burger{display:flex}
.navfs{display:flex}
.grid,.grid.two{grid-template-columns:1fr}
/* 1열이 되면 span 2 는 없는 두 번째 열을 만들어낸다 — 반드시 되돌린다 */
.grid .card.wide{grid-column:auto}
.detail .grid2{grid-template-columns:1fr}
.stills .g{grid-template-columns:repeat(2,1fr)}
}
/* ══ 시네 라이트박스 — 우리 재생툴의 크롬 ═══════════════════════════
★2026-08-05 `case.css` 에서 여기로 올렸다. 장치(주입·파괴·정지·포커스)는 `site.js §8` 로
이미 공용인데 크롬만 `/work` 문법 파일에 갇혀 있었다. `/film` 상세가 같은 재생툴을 쓰면서
같은 규칙을 한 벌 더 쓸 뻔했다 — 규칙이 두 곳에 있으면 반드시 한쪽만 고쳐진다.
`case.css`·`film-case.css` 는 둘 다 `site.css` 뒤에 오므로 필요하면 각자 덮어쓸 수 있다. */
.cine{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.96);opacity:0;visibility:hidden;
transition:opacity .4s ease,visibility .4s}
.cine.on{opacity:1;visibility:visible}
.cine .cwrap{width:min(1500px,94vw);aspect-ratio:16/9;max-height:86vh;background:#000}
.cine .cwrap iframe{width:100%;height:100%;border:0}
.cine .clabel{position:absolute;left:5vw;top:30px;margin:0;max-width:60vw;
font-family:var(--body-en);font-size:10.5px;letter-spacing:.24em;
text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.62);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cine .cx{position:absolute;top:22px;right:5vw;width:40px;height:40px;
background:none;border:0;padding:0;cursor:pointer}
.cine .cx span{position:absolute;left:6px;right:6px;top:50%;height:2px;
background:var(--ink);transition:background .25s}
.cine .cx span:first-child{transform:rotate(45deg)}
.cine .cx span:last-child{transform:rotate(-45deg)}
.cine .cx:hover span{background:var(--accent)}
/* ══ 로더 — 로고가 **써지면서** 뜬다 (2026-08-06 Seal) ════════════════
> *"yourstorykorea 처럼 로딩페이지가 있으면 좋겠어. 이게 내 로고인데 필기체처럼
> 되어있으니 이게 써지면서 로딩이 되는 식으로 하면 어떨까싶어."*
⚠ **YSK 에는 로더가 없다.** 라이브 HTML·번들 JS를 받아 `loader|splash|intro|curtain`
전수로 훑었고 진입 연출도 없다. 그러니 이건 이식이 아니라 새로 만든 것이다.
★로고 원본은 2019년 PNG 넉 장뿐이고 벡터가 없다(디스크 전수 검색 · zip 까지 열었다).
그래서 `build/trace-logo.mjs` 로 **획의 중심선을 직접 뽑았다**(세선화 → 왼쪽부터 걷기).
화면에 뜨는 것은 그 선이 아니라 **진짜 로고 PNG** 다 — 중심선은 마스크로만 쓴다.
⛔ 로고를 생성형으로 다시 그리지 않는다. 브랜드 마크는 있는 것을 쓴다.
── 안전장치 ────────────────────────────────────────────────────────
`html.ldrun` 이 걸릴 때만 로더가 보인다. 그 클래스는 `` 인라인 한 줄이 건다 —
JS 가 죽거나 모션을 끈 환경에서는 **로더가 아예 없다**(§2 `html.mo`·§7 `html.fx` 와 같은 장치).
⚠ 첫 페인트 전에 걸어야 한다. `site.js` 는 defer 라 늦다 — 그래서 head 인라인이다. */
.ld{display:none}
/* ⚠ 시간은 세 곳이 서로 맞아야 한다 — 쓰기(경로의 인라인 `--t0`/`--d`) ·
막대(아래) · 걷는 시점(`site.js` §12 의 WRITE). 하나만 고치면 어긋난다.
★여기 적힌 숫자를 믿지 말고 **세 곳을 실제로 읽는다** — 이 주석은 1.37s 라 적힌 채
실측 1.72s 로 두 라운드를 지났다. 주석은 굳지 않고 값은 굳는다.
2026-08-06 Seal *"로더길이는 좀 더 짧게해줘"* → 2.07s → 1.72s.
2026-08-06 Seal *"로더 길이는 0.9초로"* → **걷힘 1.90s → 0.90s** (계수 .47368).
쓰기 1.720 → **0.815s** · 막대 1.85 → **0.88s** · WRITE 1900 → **900**.
비율을 그대로 두고 통째로 줄인 것이라 획 순서·겹침·완급은 승인된 판 그대로다.
── 걷히는 방식 = **열린다** (2026-08-06 Seal) ──────────────────────
> *"페이드아웃으로 되어있는데 이렇게말고 열리는것처럼 해줘."*
판 둘이 위·아래로 갈라지며 면을 연다. 페이드는 **사라지는** 것이고 이건 **열리는** 것이다 —
덮개가 물러나면서 뒤에 있던 것이 드러나는 순서라 면이 처음부터 거기 있었던 것으로 읽힌다.
★로고는 판보다 먼저 꺼진다(.28s). 같이 열면 로고가 반으로 잘려 올라간다.
⚠ 판 높이를 50.4% 로 준다 — 정확히 50% 면 소수점 반올림에서 **가운데 한 줄이 비친다**. */
html.ldrun .ld, html.ldswap .ld{ display:block; position:fixed; inset:0; z-index:200; }
html.ldrun .ld.gone, html.ldswap .ld.gone{ pointer-events:none; }
/* 판 둘 */
.ld .ldp{ position:absolute; left:0; right:0; height:50.4%; background:var(--void);
transition:transform .78s cubic-bezier(.76,0,.24,1) .12s; }
/* ⚠ `:first-child`/`:last-child` 를 쓰면 안 된다 — `.ld` 의 마지막 자식은 **막대**이고
로고 SVG 도 중간에 끼어든다(JS 가 채운다). 처음에 그렇게 썼다가 **아래 판이 자리를
못 잡아 화면 아래 절반이 안 덮였다.** 판만 세는 `nth-of-type` 으로 짚는다.
★형제 구성이 바뀔 수 있는 자리에서 위치 선택자를 쓰지 않는다 —
`.fs--case` 의 `space-between` 이 자식 수에 기대다 뒤집힌 것과 같은 종류다. */
.ld .ldp:nth-of-type(1){ top:0 }
.ld .ldp:nth-of-type(2){ bottom:0 }
html.ldrun .ld.gone .ldp:nth-of-type(1),
html.ldswap .ld.gone .ldp:nth-of-type(1){ transform:translateY(-100%) }
html.ldrun .ld.gone .ldp:nth-of-type(2),
html.ldswap .ld.gone .ldp:nth-of-type(2){ transform:translateY(100%) }
/* 로고 — 판 위, 가운데 */
.ldw{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
width:min(560px,68vw); height:auto; overflow:visible; transition:opacity .28s ease; }
html.ldrun .ld.gone .ldw{ opacity:0 }
/* ⚠ 대시 간격을 `99999` 로 크게 준다 — `stroke-dasharray:L` 은 [선 L · 빈칸 L] 이라
패턴이 되풀이돼서 **경로 끝에 둥근 캡 점이 하나 찍힌다.** 아직 안 써진 글자 자리에
점이 떠 있는 것으로 보인다(실물에서 잡았다). 되풀이가 없으면 그 점이 안 생긴다. */
.ldw .pw{ stroke-dasharray:var(--l) 99999; stroke-dashoffset:var(--l); }
html.ldrun .ldw .pw{ animation:ldpw var(--d) linear var(--t0) forwards; }
@keyframes ldpw{ to{ stroke-dashoffset:0 } }
/* 진행 막대 — 얇은 강조선 하나. 퍼센트를 쓰지 않는다(모르는 숫자를 지어내는 것이다).
⚠ 판보다 위(z:2)에 두고 열릴 때 같이 끈다 — 안 끄면 아래 판을 따라 내려간다 */
.ld .ldbar{ position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
transition:opacity .22s ease; }
html.ldrun .ld.gone .ldbar{ opacity:0 }
html.ldrun .ld .ldbar{ animation:ldbar .88s cubic-bezier(.5,.02,.3,1) forwards; }
@keyframes ldbar{ to{ transform:scaleX(1) } }
@media(prefers-reduced-motion:reduce){
html.ldrun .ldw .pw, html.ldrun .ld .ldbar{ animation-duration:.01ms !important; }
}
/* ══ 언어 전환 — 같은 판을 닫는 방향으로 한 번 더 쓴다 (2026-08-06 Seal) ═══
> Seal: 언어를 바꿀때 새페이지가 로딩되면서 페이지의 처음으로 돌아가게하고 싶지
> 않은데 해결방법이있나? 언어를 바꾼 그 위치에서 언어만 바뀐것처럼 처리하고싶다.
★새 장치를 안 만든다. 로더의 판 둘을 그대로 쓰되 방향만 뒤집는다 —
`누르면 판이 닫힌다 → 이동 → 새 면이 판 닫힌 채로 뜬다 → 같은 절로 옮겨 놓고 연다.`
방문자가 보는 것은 판이 닫혔다 열리는 것뿐이고 면의 처음은 한 번도 안 보인다.
스크롤 복원은 판 뒤에서 일어나므로 보정이 몇 번이든 눈에 안 보인다.
⚠ 판 위치를 로더처럼 `.gone` 으로 잡는다. 붙이면 열리고 떼면 닫힌다 —
한 트랜지션을 양방향으로 쓰는 것이라 이징이 두 벌이 되지 않는다.
★길이는 방향마다 다르다. 닫힘은 결정이라 짧고 열림은 드러냄이라 길다.
CSS 트랜지션은 도착 상태의 값을 쓰므로 `.gone` 쪽에 열림 값을 둔다.
★2026-08-06 Seal *"전환길이 - 더 짧게."* → 닫힘 .42→**.30s** · 열림 .72→**.52s**.
⚠ 닫힘 값을 고치면 `site.js` §13 의 이동 지연도 같이 고친다. 두 값이 어긋나면
판이 다 닫히기 전에 떠나거나(깜빡임) 닫힌 채로 기다린다(멎은 것처럼 보인다).
⛔ 로고도 막대도 안 띄운다 (2026-08-06 Seal *"로고없이 지금처럼 좋다"*).
둘 다 `html.ldrun` 에만 걸려 있다 — 로고는 첫인상 장치지 통행료가 아니고,
0.3초짜리 판에 세우면 로딩 화면이 하나 더 된다. */
html.ldswap .ld .ldp{ transition-duration:.30s; transition-delay:0s; }
html.ldswap .ld.gone .ldp{ transition-duration:.52s; transition-delay:.04s; }
/* ⚠ `/film` 전시면은 `html.fr{scroll-snap-type:y mandatory}` 다. 스냅이 켜진 채로
위치를 넣으면 브라우저가 제 판단으로 끌어당겨 복원값이 밀린다. 판 뒤에 있는 동안만
끄고, 판이 열릴 때(`ldswap` 을 뗄 때) 저절로 돌아온다.
★특정도로 이긴다(0,2,1 대 0,1,1) — 파일 순서에 기대지 않는다. */
html.ldswap.fr{ scroll-snap-type:none; }
/* 모션을 끈 환경 — 판은 여전히 덮되 움직이지 않는다.
★여기서 판을 아예 빼면 안 된다. 덮개가 없으면 복원이 화면에서 튀는 것으로 보인다 —
모션을 끈 사람에게 필요한 것은 덮개가 없는 것이 아니라 움직임이 없는 것이다. */
@media(prefers-reduced-motion:reduce){
html.ldswap .ld .ldp{ transition:none; }
}
/* ══ 다른 작품으로 — 필름 스트립 (2026-08-06 Seal 확정) ═══════════════════
Seal: *"그냥 둘다 필름형식으로 통일하자"* — `/film` 7면 · `/work` 8면이 같은 폼을 쓴다.
★왜 `site.css` 인가 (규칙 19: 한 면에서 얻은 처방은 그 자리에서 척추로 올린다)
`case.css`(=/work)와 `film-case.css`(=/film)가 이미 갈려 있다. 어느 한쪽에 넣으면
다른 계열이 못 찾고, 양쪽에 넣으면 **두 곳을 고쳐야 하는 규칙**이 된다.
이 절은 두 계열이 처음으로 함께 쓰는 블록이라 밑판에 박는다.
★설계 근거는 `docs/superpowers/specs/2026-08-06-next-work-study.md` 실측이다:
레퍼런스 4곳 6면 중 **옆스크롤 0곳** · 있는 곳은 3셀(242~299px) · 제목은 15px 급.
그 위에 Seal 이 "한 편씩 · 필름 느낌 · 루프" 를 얹어 지금 폼이 됐다.
★v1(한 장이 통 폭을 다 먹음 · 869px/97vh)은 *"히어로세션 같다"* 로 반려됐다.
**재료가 아니라 판형이 성격을 정한다** — 프레임을 띠 안의 한 칸으로 줄이는 것이 핵심이다.
현재 475px / 53vh.
⚠ 규칙 6(연출을 그림에 얹지 않는다) — **필터는 0**. 퍼포레이션은 그림 밖이다.
아래쪽 스크림 한 겹만 있고 그것은 미감이 아니라 **가독의 최소치**다(밝은 프레임 위 흰 글자).
값은 전시면 `film-reel.css .fr-scrim` 에서 그대로 가져왔다 — 사이트가 이미 쓰는 문법이다. */
.nx{ position:relative; }
.nx-label{
display:flex; align-items:baseline; gap:14px; padding-bottom:16px;
font-family:var(--body-en); font-size:11px; letter-spacing:.24em; text-transform:uppercase;
color:var(--dim);
}
.nx-label i{ flex:1; height:1px; background:rgba(255,255,255,.16); font-style:normal; }
.nx-label .cnt{ margin-left:auto; font-size:10px; letter-spacing:.22em; }
/* 스트립은 통을 벗어나 화면 끝까지 간다 — **잘려 나가야** "계속된다"로 읽힌다 */
.nx-strip{
position:relative; background:#131313; isolation:isolate;
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
/* 아래위 — 퍼포레이션. 띠에 구멍이 뚫려 지면(검정)이 비친다.
★Seal 이 짚은 "아래위를 디자인해서" 가 정확히 이 자리다 —
필름의 실물은 그림이 아니라 **가장자리**가 만든다 */
.nx-perf{ height:22px; position:relative; overflow:hidden; }
.nx-perf::before{
content:""; position:absolute; left:0; right:0; top:6px; height:10px; border-radius:2px;
background:repeating-linear-gradient(90deg,#000 0 13px,transparent 13px 27px);
}
.nx-gate{ position:relative; overflow:hidden; padding:9px 0; background:#0B0B0B; }
.nx-reel{ display:flex; align-items:center; transition:transform .62s cubic-bezier(.22,.96,.26,1); }
/* 프레임 사이의 검은 띠(프레임 바)가 곧 이 여백이다.
★★폭이 곧 **집중**이다 (2026-08-06 Seal 반려).
*"3개의 영상이 너무 깨끗하게 뜨니까 중앙에만 집중이 안되잖아. 전체 크기를 좀 더 키우더라도
중앙에 하나만 온전히 보이고 양쪽은 잘려보이는 쪽으로 가야할거아니야."*
첫 판은 `42vw`(1440에서 560px)였다. 게이트의 **39%**밖에 안 돼서 양옆이 **76%씩 보였다** —
그건 잘린 것이 아니라 **세 장이 나란한 것**이다. 가운데가 이길 수가 없다.
→ `76vw`. 양옆은 **14~15%만 남는 조각**이 되고 가운데 한 장이 온전히 선다.
⚠ 상한을 **픽셀로** 걸지 않는다. `clamp(...,560px)` 처럼 고정 상한을 두면 넓은 화면에서
프레임만 멈추고 조각이 자라 비율이 도로 무너진다(1920에서 조각이 34%). 게이트가
`100vw` 라 **폭도 vw 여야 비율이 고정된다**.
⚠ 높이 상한은 **안전장치로만** 둔다(`150vh`). 한때 `116vh` 로 조였다가 넓은 화면에서
프레임이 먼저 멈춰 **조각이 25%까지 벌어졌다** — Seal 이 요구한 "잘려 보이는" 쪽이
도로 무너진다. 절이 한 화면을 조금 넘는 것은 받아들인다
(*"전체 크기를 좀 더 키우더라도"*). 상한은 아주 납작한 창에서만 걸린다.
★재는 자리 = 조각 폭 ÷ 프레임 폭. **14~15%** 면 "잘렸다"로 읽힌다. 76%면 그냥 세 장이다. */
.nx-frame{ flex:0 0 auto; width:min(76vw,150vh); margin-right:14px; position:relative; }
.nx-frame > a{ display:block; text-decoration:none; color:inherit; }
.nx-m{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.nx-m video, .nx-m img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 지금 칸 — 선 하나. 스크림도 흐림도 안 쓴다(여백과 선이 일한다) */
.nx-frame::after{
content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .5s;
}
.nx-frame.on::after{ box-shadow:inset 0 0 0 2px var(--accent); }
/* 제목은 **프레임 안**에 산다 (2026-08-06 Seal: *"설명을 빼고 제목만 영상박스 안에"*).
설명 한 줄은 없다. 킥커 슬롯은 계열이 가진 사실로 채운다 —
`/film` = 갈래·번호 · `/work` = 클라이언트. **같은 슬롯, 같은 장치**다 */
/* ★제목은 **모든 프레임**에 붙는다 (2026-08-06 Seal: *"제목도 전부 다 표기해놔. 중앙만 넣지말고."*)
전에는 가운데 칸에만 떴다. 조각으로 잘린 이웃도 제 이름을 달고 지나가야
**필름이 흐르는 것**으로 읽힌다 — 이름 없는 조각은 그냥 잘린 그림이다.
⚠ 조각(14%)에서는 제목이 잘려 보인다. 그것이 맞다 — 잘린 것은 프레임이지 규칙이 아니다.
가운데를 가리키는 것은 여전히 **선 하나**(강조색 테두리)와 온전한 폭이다. */
.nx-m::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(0deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.30) 32%,transparent 62%);
}
.nx-cap{
position:absolute; left:0; right:0; bottom:0; z-index:2; padding:0 22px 18px;
pointer-events:none;
}
/* ⛔ 왼쪽 조각의 제목이 화면 밖으로 잘린다고 **그 칸만 오른쪽 정렬로** 뒤집지 않는다.
2026-08-06 Seal: *"왼쪽칸은 그럼 안보여도 되지! 일관성을 무너뜨리지마"*
★한 번 시도했다가 되돌린 자리다. 자리에 따라 정렬이 갈리면 **같은 장치가 칸마다 다르게**
동작한다 — 그게 조판이 무너지는 방식이다. 잘리는 것은 프레임이지 규칙이 아니다.
제목은 전부 같은 자리(왼쪽 아래)에 있고, 보이는 만큼만 보인다. */
.nx-cap i{
display:block; font-style:normal; font-family:var(--body-en); font-size:10px;
letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.72);
margin-bottom:7px; text-shadow:0 1px 14px rgba(0,0,0,.75);
}
.nx-cap b{
display:block; font-family:var(--label-ko); font-weight:700;
font-size:clamp(17px,2vw,26px); letter-spacing:-.02em; line-height:1.16; color:var(--ink);
text-shadow:0 2px 26px rgba(0,0,0,.5);
}
/* 화살표 — 게이트 좌우 끝. ★어포던스를 미감으로 지우지 않는다(규칙 7)
⚠⚠ `z-index` 를 반드시 준다. `.nx-reel` 의 **transform 이 스택 컨텍스트를 만들어**
화살표와 같은 층이 되고, 같은 층에서는 DOM 순서가 이겨 **릴이 화살표를 덮는다.**
실측에서 `elementFromPoint(화살표 한가운데)` 가 `VIDEO` 를 돌려줬다 — 안 보이고 안 눌린다. */
.nx-arw{
position:absolute; top:0; bottom:0; z-index:3; width:clamp(48px,5vw,74px);
border:0; cursor:pointer; background:transparent; color:var(--ink);
display:flex; align-items:center; justify-content:center;
}
.nx-arw.l{ left:0 } .nx-arw.r{ right:0 }
.nx-arw::before{
content:""; position:absolute; inset:0; transition:opacity .35s;
background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,0));
}
.nx-arw.r::before{ background:linear-gradient(270deg,rgba(0,0,0,.72),rgba(0,0,0,0)); }
.nx-arw:hover::before{ opacity:.6; }
.nx-arw svg{
position:relative; width:22px; height:22px; stroke:currentColor; stroke-width:1.5; fill:none;
transition:transform .35s;
}
.nx-arw.l:hover svg{ transform:translateX(-4px); }
.nx-arw.r:hover svg{ transform:translateX(4px); }
.nx-arw:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
/* 필름이 물릴 때의 미세한 흔들림 — 게이트가 프레임을 잡는 순간. 2px 를 안 넘는다.
⚠ **`.nx-reel` 에 걸면 안 된다.** 릴은 `translateX` 를 인라인으로 들고 있는데
애니메이션의 `transform` 은 합성이 아니라 **교체**라, 흔드는 동안 릴이 첫 칸으로 튄다.
그래서 층을 하나 더 둔다(`.nx-weave`). */
@keyframes nxweave{ 0%{transform:translateY(0)} 22%{transform:translateY(-2px)}
55%{transform:translateY(1px)} 100%{transform:translateY(0)} }
.nx-weave.weave{ animation:nxweave .34s ease-out; }
.nx-all{
display:flex; align-items:baseline; gap:.8em; margin-top:26px; padding-top:20px;
border-top:1px solid rgba(255,255,255,.10); text-decoration:none; color:var(--ink);
font-family:var(--label-ko); font-size:15px; font-weight:700;
}
.nx-all small{
font-family:var(--body-en); font-size:10px; letter-spacing:.24em;
text-transform:uppercase; color:var(--dim);
}
.nx-all:hover{ color:var(--accent); }
@media (prefers-reduced-motion:reduce){
.nx-reel{ transition:none; } .nx-weave.weave{ animation:none; }
}
/* ⚠ 특정도를 올린 규칙은 **접는 자리도 같이 적는다**(규칙 13에서 밟은 자리) */
@media (max-width:760px){
.nx-frame{ width:78vw; margin-right:10px; }
.nx-arw{ width:40px; }
.nx-cap{ padding:0 14px 12px; }
}