를 고르고 이 값을 바꾸면 된다.
⚠ 제목은 원래 **화면 폭에 맞춰** 잡힌 크기라(좌우 40px 여백까지 계산에 들어 있다)
1 을 넘기면 그 여백부터 먹고 들어간다. 1440 에서 실측한 여유는 이렇다:
1 제목 폭 1153 (좌우 여백 143px)
1.15 제목 폭 1326 (좌우 여백 57px) ← 여기까지가 시원하다
1.25 제목 폭 1442 (화면 1440 — **넘친다**)
즉 **1.24 가 안 잘리는 상한**이다. 390(모바일)은 두 줄로 접혀서 1.34 까지 여유가 있다.
더 키우고 싶으면 마크업의 `--len`(index.html 의 .ttf 두 곳, 지금 15.6)을 **줄이는**
방법도 있다 — 그쪽은 '글자수' 기준이라 화면 안에 맞춘 채로 커진다.
⚠ 캡션이 제목에 붙는 거리는 --cap-gap(캡션 크기 기준 em)이라 **저절로 따라온다.**
따로 맞출 필요 없다. 확대 순간 바뀌는 문구도 줄 크기의 배수(1.1875em)라 함께 커진다.
⚠ 제목 크기를 재서 쓰는 값들(--logo-height / --ink-height / --title-shift)은
js/preloader/boot.js 가 **화면에 그려진 것을 실측**한다 — 배율을 바꿔도 알아서 맞는다. */
--dj-title-scale: 1.07; /* 2026-09-01 채린 지정 (1.12 → 1.07) */
--dj-cap-scale: 1.3; /* 2026-09-01 채린 지정 (1.5 → 1.3) */
/* ★ 제목과 캡션 사이 틈 ★ (2026-08-31 채린 "좀만 붙여줘")
**작을수록 붙는다. 음수도 된다**(제목 획 안쪽으로 파고든다).
단위(em)는 **캡션 글자 크기 기준**이라, --dj-cap-scale 을 키우면 틈도 같이 커진다 —
캡션을 1.5 배로 키운 지금은 옛 0.7em 이 예전 1.05em 만큼 벌어져 보였다. 그래서 줄였다.
1440·캡션 1.5배에서 잰 값(제목 상자 아래끝 → 캡션 상자 위끝):
0.7em 18px · 0.3em 8px · **0em 1px (지금)** · -0.4em −9px(획에 걸침)
⚠ 모바일은 아래 @media 안에 따로 있다 — 거기는 진행도를 안 곱해서 같은 값이라도 더 파고든다.
음수를 주면 캡션이 제목 글자를 가로지른다(2026-08-26 에 겪었다). */
--cap-gap: 0em; /* 2026-08-31 채린 지정 (0.7 → 0.3 → 0) */
/* ★★ 더 커지지 않는 화면 폭 ★★ (2026-08-31 채린 "1920 이 마지노선")
제목과 캡션은 둘 다 화면 폭에 비례해 커진다. 넓은 모니터에서 글자만 계속 부풀어
지면이 답답해져서, **폭이 이 값일 때의 크기**를 상한으로 둔다.
여기보다 넓은 화면에서는 제목·캡션이 **같이** 멈춘다(한쪽만 멈추면 균형이 깨진다).
⚠ 쓰는 곳이 두 군데다 — `.boot .ttf`(제목)와 `.boot__line`(캡션). 둘 다 이 변수를 본다.
⚠ 캡션 쪽 식의 0.0111111111 은 --brem(1.11111111vw)의 vw 계수다. 같은 값이라
1920 에서 두 식이 정확히 만나 **단차가 없다**. --brem 을 바꾸면 여기도 같이 볼 것. */
--dj-max-w: 1920px;
/* 영상 위 검은 막의 진하기 (0~1, 0 이면 끔). 스크롤 뒤 히어로의
--hero-video-scrim(css/tokens.css)과 **같은 값이어야** 이어져 보인다.
2026-08-28 채린 지정: 0.4 → 0.5 → 0.6. */
--boot-video-scrim: 0.6;
/* 프리로더 전용 rem. 버전1의 html { font-size } 를 이 안으로 옮겨 온 것이다. */
--brem: 1.11111111vw;
/* 버전1 base.css 의 토큰 중 프리로더가 실제로 쓰는 것만. */
--boot-white: #fff;
--boot-accent: #00cfff; /* START 버튼 */
--boot-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
color: var(--boot-white);
font-family: var(--boot-body);
font-size: 16px;
line-height: 1.5;
}
/* ⚠⚠ **경계는 767 이다, 768 이 아니다** (2026-09-02에 고침).
이 사이트의 모바일 경계는 어디나 `max-width: 767px` 이고 js/boot.js 의 `is-mobile-static` 도 767 이다.
여기만 768 이었던 탓에 **정확히 768px(아이패드 세로)에서** `--brem` 만 모바일 값을 받아
좌우 캡션이 그대로인 채 글자가 11.6px → **40.96px** 로 튀고 오른쪽 캡션이 화면 밖 322px 까지 나갔다.
⚠ 경계를 새로 적을 일이 생기면 **767** 로 적을 것. 한 곳만 어긋나도 그 1px 폭에서만 깨진다. */
@media (max-width: 767px) {
.boot { --brem: 4.1025641vw; }
}
/* ★ 스크롤이 시작되면 프리로더는 **영상 층만** 넘긴다 ★
프리로더 전체를 투명하게 만들면 그 안에 있는 DJBank 글자까지 같이 사라진다.
그런데 DJBank 는 스크롤을 따라 '작아지며' 사라져야 하고, 그동안 밑의 히어로 타이틀
두 줄이 올라오는 게 보여야 한다 — 즉 **영상은 밑엣것으로 넘기고 글자 층만 남겨야 한다.**
(두 영상은 같은 파일·같은 크기·같은 재생 위치라 바뀌는 게 안 보인다)
⚠ 배경색도 함께 걷어야 한다. #101010 이 남으면 밑의 히어로가 안 보인다. */
.boot.is-video-passed {
background: transparent;
}
.boot.is-video-passed .boot__frames,
.boot.is-video-passed .boot__scrim,
.boot.is-video-passed .boot__vignette {
opacity: 0;
visibility: hidden;
}
/* ★ 프리로더 구간 동안 무대의 핀을 화면에 붙들어 둔다 ★
무대 트랙은 `.sc`(스크롤 길이) 뒤에서 시작하므로, 이 구간에서 히어로는 아직 화면 **밖**이다.
그런데 프리로더 위에서 DJBank 가 사라지는 동안 그 자리에 히어로의 타이틀 두 줄이
올라오는 게 보여야 한다 — 그래서 잠시 fixed 로 붙들어 화면에 세워 둔다.
진행도가 끝나면 스크롤이 정확히 트랙 시작점에 닿으므로, sticky 로 되돌려도 위치가 같다.
⚠ 되돌리는 시점이 어긋나면 화면이 한 번 튄다. js/preloader/main.js 의 `is-prestage` 참고. */
html.is-prestage .stage__pin {
position: fixed;
top: 0;
left: 0;
right: 0;
}
/* 진행도가 끝까지 가면(=밑의 히어로가 완전히 드러나면) 클릭을 통과시킨다.
opacity 는 JS 가 매 프레임 인라인으로 넣는다 — 여기서 transition 을 주면 안 된다
(스크롤을 따라가야 하는데 뒤늦게 쫓아온다). */
.boot.is-through { pointer-events: none; }
/* ══════════════════════════════════════════════════════════════════════════
★ 모바일 히어로는 **배율을 안 받는다** ★ (2026-08-31 채린 "이전으로 돌려놔")
══════════════════════════════════════════════════════════════════════════
--dj-title-scale / --dj-cap-scale 은 채린이 **PC 화면을 보면서** 정한 값이다(2026-09-01 기준 1.07 / 1.3).
그런데 그 배율이 모바일 제목·캡션에도 그대로 곱해져서, 채린이 앞서 맞춰 둔 폰 크기가
함께 커져 버렸다(390 에서 제목 213 → 238.6px). 폰은 원래 크기를 지킨다.
⚠ 폰만 따로 키우고 싶어지면 여기 두 값을 1 대신 원하는 배수로 주면 된다 —
데스크톱과 **따로 논다**. */
@media (max-width: 767px) {
.boot {
--dj-title-scale: 1;
--dj-cap-scale: 1;
}
}
/* 스크롤 길이만 만드는 빈 구간. 프리로더가 fixed 라 문서 높이에 기여하지 않으므로 이게 필요하다.
★ 연출 속도 ★ 이 높이 하나로 정해진다. 크게 하면 천천히, 작게 하면 빨리 넘어간다. */
/* ⚠ 모바일에서는 뷰포트 단위를 쓰면 안 된다 — 카카오 인앱 브라우저가 툴바를 따라
vh 를 바꿔서 이 길이가 숨쉬고, 그 아래 내용이 통째로 밀린다(js/boot.js 의 --vh100 참고). */
.sc { height: 90vh; }
@media (max-width: 767px) {
/* ★ 폰에서 프리로더 → 히어로 전환 길이 ★ (2026-08-31 채린 "스크롤 2번 하고 넘어가는 느낌")
0.9 화면(760px)이었는데 **연출은 400px 에서 이미 끝나** 있었다 — 남은 360px 은
아무 변화 없이 스크롤만 먹는 구간이었다. 그 여유를 걷었다.
★ 조절하는 곳 ★ 아래 배수 하나(작을수록 빨리 넘어간다). */
/* ⚠ 2026-09-02 에 0.45 → 0.85 로 늘려 **멈춤 구간**을 만들었다가 **되돌렸다**
(채린 "라이브 페이지 타이밍처럼"). 늘린 트랙은 js/preloader/main.js 의 raw→p 재매핑과
**한 쌍**이었다 — 다시 하려면 둘을 함께 되살릴 것(그쪽 주석에 방법을 적어 뒀다).
⚠ 무대(스월) 쪽 길이·속도와는 무관하다. */
.sc { height: calc(var(--vh100, 90vh) * 0.45); }
}
/* 사진 창. 처음엔 가운데 16.5×11(--brem) 만 뚫려 있다.
★ 기준은 **50%**(이 요소의 상자)다. `50vh` 가 아니다 ★ (2026-09-01 채린 신고로 고침)
⚠ 슬랙·카카오 같은 **인앱 브라우저에서는 `100vh` 와 이 요소의 높이가 다르다.**
`.boot` 는 `position: fixed; inset: 0` 이라 **보이는 영역**만큼 서는데, iOS 의 `vh` 는
툴바가 접힌 **큰 화면** 기준이다. 그 차이만큼 위아래가 더 깎여서
창이 납작한 띠로 보였다(채린 실측 사진: 폭은 맞고 높이만 뭉갬).
헤드리스 재현 — 요소 높이 700 · 100vh 844 일 때 창 높이 **176 → 32px**.
⚠ 안쪽 칸(.boot__frame)은 `inset: 0` + flex 가운데라 **요소 상자**를 따른다.
그러니 창도 같은 기준(%)이어야 둘의 가운데가 맞는다.
⚠ 짝: js/preloader/boot.js 의 openClip 도 **같은 식**을 쓴다. 한쪽만 고치면 창이 튄다. */
.boot__frames {
position: absolute;
inset: 0;
z-index: 10;
pointer-events: none;
clip-path: inset(calc(50% - 5.5 * var(--brem)) calc(50% - 8.25 * var(--brem)));
will-change: clip-path;
}
.boot__frame {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.boot__frame-in {
position: absolute;
top: 50%;
left: 50%;
width: calc(16.5 * var(--brem));
height: calc(11 * var(--brem));
transform: translate(-50%, -50%);
clip-path: inset(0 0 100% 0);
/* transform 도 함께 적는다 — 확대를 scale 로 굴리므로(js/preloader/boot.js) 미리 제 층에 올린다. */
will-change: clip-path, transform;
}
.boot__frame-in img,
.boot__frame-in video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 가장자리를 눌러 가운데로 시선을 모은다. 사진 위·글자 아래에 놓여야
사진만 어두워지고 제목은 원색을 지킨다. */
.boot__vignette {
position: absolute;
inset: 0;
z-index: 11;
pointer-events: none;
background: radial-gradient(68.78% 68.78% at 50% 50%, #0a0a0a33 0, #0a0a0ab3);
transition: opacity 0.5s var(--boot-ease-out-cubic);
}
/* ★ 확대가 시작되면(2.6초) 비네트를 걷는다 ★ (2026-08-28 채린 요청)
스크롤 뒤 히어로에는 비네트가 없고 평평한 40% 막만 있다. 두 화면은 같은 영상이
이어지는 것처럼 보여야 하므로, **확대된 영상 위에 얹히는 것도 40% 막 하나뿐이어야 한다.**
비네트를 남기면 프리로더 쪽만 가장자리가 더 눌려 인계 순간 밝기가 바뀐다.
작은 창으로 사진이 차오르는 구간(0~2.6초)에는 그대로 남는다 — 원래 연출이다. */
.boot.is-zooming .boot__vignette { opacity: 0; }
/* 영상 위에 평평하게 까는 검은 막. 비네트가 가장자리만 누르는 것과 달리 고르게 덮는다.
★ 진하기 ★ 아래 --boot-video-scrim (0~1). 2026-08-28 채린 지정 0.6.
비네트와 같은 z:11 에 두되 DOM 순서가 뒤라 그 위에 얹힌다. 글자(z:20)는 안 눌린다.
⚠ 스크롤 뒤 히어로에도 같은 값이 있다(css/tokens.css 의 --hero-video-scrim).
같은 영상이 이어지는 것처럼 보여야 하므로 **두 값을 함께 고칠 것.** */
.boot__scrim {
position: absolute;
inset: 0;
z-index: 11;
pointer-events: none;
background: rgb(0 0 0 / var(--boot-video-scrim, 0.6));
/* ★ 맨 처음(사진이 작은 창에 차오르는 구간)에는 깔지 않는다 ★ (2026-08-28 채린 요청)
확대가 시작되는 순간(2.6초, `.boot.is-zooming`)부터 켜서 **커지는 영상부터** 눌린다.
켜지는 시간(0.5초)은 확대 시간(0.64초) 안쪽이라 커지는 동안 자연스럽게 얹힌다. */
opacity: 0;
transition: opacity 0.5s var(--boot-ease-out-cubic);
}
.boot.is-zooming .boot__scrim { opacity: 1; }
/* DJ Bank 로고(크레스트). 버전1에서 빼 둔 상태 그대로 가져왔다 —
아래 display:none 한 줄만 지우면 다시 나온다(JS 는 그대로라 숨겨진 채 opacity 만 바뀐다).
★ 2026-08-26 채린 요청: 이 지면에서는 DJ Bank 로고를 일단 전부 뺀다.
8990 쪽 헤더 로고도 같은 이유로 마크업에서 주석 처리했다. */
.boot__crest {
display: none;
position: absolute;
top: 3.33333vh;
left: 50%;
z-index: 20;
height: 3.8vh;
aspect-ratio: 200 / 57;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
}
.boot__crest img { width: 100%; height: 100%; object-fit: contain; }
/* 투명도를 줄 일이 생기면 여기(바깥)에 준다. 안쪽 .boot__logo-in 은 JS 가 등장 연출로
0 → 1 을 쓰고 있어서 거기에 박으면 연출이 덮어써 버린다. */
/* ⚠ 스크롤 축소는 **이 바깥 층**에 준다. 안쪽 .boot__logo-in 은 프리로더 연출이
scaleY 를 쓰고 있어서, 거기에 겹치면 서로 덮어쓴다. */
.boot__logo {
position: absolute;
transform-origin: center center;
inset: 0;
z-index: 20;
color: var(--boot-white);
pointer-events: none;
transition: color 0.6s var(--boot-ease-out-cubic);
}
/* 제목은 **흰색 그대로 간다.** 2026-08-28 에 '다 펴지고 2초 뒤 #0046ff 로 물들이기'를 넣었다가
같은 날 채린이 되돌리라고 해서 뺐다(버전1에서도 한 번 넣었다 뺀 연출이다).
되살리려면 이 두 줄 + js/preloader/boot.js 의 TL.tint 를 되돌린다:
--boot-brand: #0046ff; (위 .boot 블록)
.boot.is-tinted .boot__logo { color: var(--boot-brand); }
⚠ 색은 `.boot__logo`(제목 층)에만 준다 — `.boot` 전체에 주면 캡션 네 줄까지 물든다.
(위 `.boot__logo` 의 `transition: color` 는 그때 쓰던 것이 남아 있는 것이다.) */
/* --title-shift 는 제목 글자를 세로 가운데로 앉히는 보정값이다(JS 가 px 로 넣는다).
글자 상자의 가운데와 **글자 획의 가운데**는 다르다 — 상자는 어센더~디센더로 잡히는데
대문자만 있는 문구는 획이 baseline 위에만 있어서, 상자를 가운데 두면 글자가 위로 뜬다.
제목과 캡션은 한 덩어리로 움직여야 하므로 둘 다 같은 값만큼 내린다. */
.boot__logo-box {
position: absolute;
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
/* ⚠ --title-nudge 에 --progress 를 곱한다 (2026-08-28 채린 지적).
첫 구간(사진이 작은 창에 차오르는 동안)에는 제목이 아직 없고 **사진 창이 화면 정가운데**다.
그때도 올려 버리면 캡션만 위로 떠서 창과 어긋난다 — 진행도 0 이면 올림도 0 이 되어
원래 자리(가운데)에 앉고, 제목이 펴지는 동안(2.6~3.08초) 함께 올라간다.
--title-shift(획 중심 보정)는 곱하지 않는다 — 그건 늘 필요한 값이다. */
transform: translate(-50%, calc(-50% + var(--title-shift, 0px)
- var(--title-nudge, 0px) * var(--progress)));
}
.boot__logo-in {
opacity: 0;
transform: scaleY(0);
transform-origin: center center;
}
/* 크기를 재기 위한 복제본. 변형이 걸린 쪽은 재도 변형된 값이 나온다. */
.boot__logo-sizer {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 화면 하나를 통째로 채우는 큰 활자 ─ 글자수(--len)에 맞춰 가로/세로 중
먼저 걸리는 쪽에 맞춘다. 버전1 type.css 의 .ttf 를 .boot 안으로 옮겨 온 것이다. */
.boot .ttf {
--len: 10;
--ttf-gap: 40px;
display: inline-block;
width: max-content;
font-family: var(--boot-title);
/* ★ 크기 배율은 .boot 의 --dj-title-scale ★ (2026-08-31) 여기 식은 건드리지 않는다 */
/* ★ 1920 부터는 더 안 커진다 ★ (2026-08-31 채린 "1920 이 마지노선")
제목은 원래 화면 폭에 비례해 끝없이 커졌다(2560 에서 1103px). 넓은 모니터에서 글자만
계속 부풀어 지면이 답답해진다 — 그래서 **폭이 1920 일 때의 크기**를 상한으로 둔다.
아래 세 번째 줄이 그 상한이다: 같은 식에서 100vw 자리에 1920px 을 넣은 것뿐이라
--len(마크업)이나 --ttf-gap 을 바꿔도 저절로 따라온다. 1920 에서 두 값이 정확히 같아
이어지는 지점에 **단차가 없다**(825.6px).
★ 마지노선을 옮기려면 ★ .boot 의 --dj-max-w 한 곳만 고친다(캡션도 함께 따라온다). */
font-size: calc(
min(
100svh - var(--ttf-gap-y, var(--ttf-gap)) * 2,
(100vw - var(--ttf-gap-x, var(--ttf-gap)) * 2) / var(--len) * 7,
(var(--dj-max-w) - var(--ttf-gap-x, var(--ttf-gap)) * 2) / var(--len) * 7
) * var(--dj-title-scale, 1)
);
line-height: 0.8;
padding-top: 0.05lh;
vertical-align: top;
}
/* 캡션은 확대가 시작돼도 그대로 남는다(.is-zooming 은 JS 가 계속 붙이지만 여기서 안 쓴다).
다시 감추려면 `.boot.is-zooming .boot__texts { opacity: 0 }` 을 넣으면 된다. */
.boot__texts {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
padding-inline: calc(11.875 * var(--brem));
/* 캡션은 제목과 한 덩어리로 움직인다 — 같은 만큼, **같은 박자로** 올라간다.
(첫 구간에는 --progress 가 0 이라 화면 정가운데 = 사진 창과 같은 높이) */
transform: translateY(calc(-1 * var(--title-nudge, 0px) * var(--progress)));
transition: opacity 0.4s var(--boot-ease-out-cubic);
}
.boot__line {
/* ★ 캡션 기본 크기 ★ --brem(화면 폭 비례)의 배수. **원본 그대로 1 이다**
(1440 16px · 1920 21.3px · 2560 28.4px).
⚠ 2026-08-28 채린 요청으로 **첫 시작 캡션은 이 원래 크기를 지킨다.**
커진 것은 확대 순간 바뀌는 문구(.boot__swap-in--next)뿐이다 — 아래 그 규칙 참고. */
/* ★ 1920(--dj-max-w)부터는 더 안 커진다 ★ (2026-08-31 채린 "캡션도 너무 커진다")
제목과 **같은 마지노선**을 본다. 1920 에서 21.33px 로 멈춘다(배율 1.5 면 32px).
⚠ min() 은 배율 **밖**에 있어야 한다 — 안에 넣으면 배율까지 상한에 걸려 캡션을
키우는 --dj-cap-scale 이 넓은 화면에서 안 먹는다.
⚠ 모바일(≤768)은 아래 @media 가 이 줄을 통째로 덮는다 — 거기는 상한이 없다
(채린 "모바일은 안 고쳐도 됨"). 모바일 --brem 은 4.1vw 라 상한을 걸면 오히려 작아진다. */
font-size: calc(
min(1 * var(--brem), var(--dj-max-w) * 0.0111111111) * var(--dj-cap-scale, 1)
);
line-height: 1;
/* 캡션은 **전부 대문자**로 그린다(원본 LMC 때부터의 규칙).
⚠ 2026-09-01 잠깐 `none` 으로 두어 적은 대로 보이게 했다가 채린 요청으로 되돌렸다. */
text-transform: uppercase;
margin: 0;
/* 진행도에 따라 제목 획의 절반만큼 위아래로 벌어져, 제목 위아래 끝 바깥에 맞물린다.
기준은 글자 상자(--logo-height)가 아니라 **획**(--ink-height)이다.
상자로 맞추면 대문자만 있는 제목에서 캡션이 획 안쪽으로 들어온다. */
/* 캡션과 제목 획 사이의 틈은 **.boot 의 --cap-gap 한 곳**에서 정한다 (2026-08-31).
전에는 이 줄에 0.7em 이 박혀 있었는데, 크기 배율과 함께 조절하는 값이라 위로 올렸다.
내력: 0.4em(원본) → -0.8em(너무 붙음) → -0.1em → 0.7em(2026-08-27 서체 교체) → **0.3em**. */
/* 왼쪽 캡션을 제목 'D' 의 오른쪽 끝에 맞추는 값. JS(boot.js measure)가 D 폭을 재서 넣는다. */
--cap-shift-l: 0px;
/* 오른쪽 캡션을 제목 'k' 의 **획 끝**에 맞추는 값 (2026-09-01 채린 요청).
JS(boot.js measure)가 제목과 캡션의 잉크 끝을 캔버스로 재서 넣는다 — 자세한 건 그쪽 주석.
1440 에서 +10.5px 쯤 된다. 0 이면 예전 자리(제목 폭의 99% 상자 오른끝). */
--cap-shift-r: 0px;
}
/* ── 확대되는 순간의 문구 교체 (2026-08-26 채린 요청) ────────────────────
`.boot.is-zooming` 은 js/preloader/boot.js 가 확대 시작(2.6초)에 붙인다.
· 위 두 줄 → 사라진다
· 아래 두 줄 → 겹쳐 둔 새 문구로 바뀐다
첫 번째 .boot__swap-in 이 흐름에 남아 **상자 폭·높이를 정한다.**
두 번째(--next)는 그 위에 절대 배치로 겹쳐 두고 투명도만 교차시킨다.
왼쪽 덩어리는 왼쪽 끝에, 오른쪽 덩어리는 오른쪽 끝에 맞춘다. */
.boot__line { transition: opacity 0.4s var(--boot-ease-out-cubic); }
.boot.is-zooming .boot__line--top { opacity: 0; }
/* ⚠ 두 문구를 **같은 칸에 겹쳐** 둔다(inline-grid). 예전에는 두 번째를 absolute 로 띄웠는데,
바뀐 문구가 첫 문구보다 커지자 상자 밖으로 삐져나갔고 — 캡션 줄은 등장 연출(rise)을 위해
`overflow: hidden` 이라 — **글자가 잘렸다**("THE FIRST…" 의 T 가 사라짐, 2026-08-28).
같은 칸에 겹쳐 두면 상자가 **넓은 쪽에 맞춰지고** 두 문구 다 안 잘린다.
좌우 정렬은 `.boot__side--l/r .boot__line` 의 text-align 이 그대로 맡는다. */
/* ★ 처음 네 줄만 작게 ★ (2026-09-01 채린 "그 부분만 캡션 폰트 사이즈 줄여줘")
대문자로 되돌리니 문장이 길어 커 보였다. **0.85배**(1440 20.8 → 17.7px).
⚠ 확대 뒤 문구(.boot__swap-in--next, 1.1875em)는 건드리지 않는다 — 그건 표제라 큰 게 맞다.
그래서 `:not(--next)` 로 첫 문구만 고른다. 줄(.boot__line)에 주면 둘 다 작아진다.
⚠ **줄(.boot__line--top)이 아니라 그 안의 `> span` 에 준다.** 줄에 주면 `.boot__line` 의
calc() 크기를 덮어써서 em 이 **부모(.boot__side)** 기준이 된다 — 16 × 0.85 = 13.6px 가 돼
아래 줄(17.68px)과 크기가 갈렸다(실제로 한 번 그랬다).
★ 조절하는 곳 ★ 아래 0.85. */
.boot__line--top > span,
.boot__swap-in:not(.boot__swap-in--next) { font-size: 0.85em; }
.boot__swap { position: relative; display: inline-grid; }
.boot__swap-in {
grid-area: 1 / 1;
display: block;
white-space: nowrap;
transition: opacity 0.35s var(--boot-ease-out-cubic);
}
.boot__swap-in--next {
opacity: 0;
/* ★ 바뀐 뒤 캡션 크기 ★ (2026-08-28 채린) 줄의 기본 크기 대비 배수다.
1 → 1.125("2560 기준 32") → 1.25("좀만 더") → **1.1875**("좀만 줄여") =
2560 33.8px · 1920 25.3px · 1440 19px · 390 16.6px.
⚠ **줄(.boot__line)이 아니라 이 span 에만** 준다 — 줄에 주면 첫 시작 캡션까지 커진다.
캡션이 벌어지는 거리와 --cap-gap 은 줄의 크기(원본)를 기준으로 잡히므로,
이 문구는 제자리에 앉은 채 글자만 커진다.
⚠ 모바일은 처음부터 이 문구만 보인다(위 @media 의 opacity 교대) — 값이 그대로 적용된다. */
font-size: 1.1875em;
}
/* 쉼표 뒤 띄어쓰기. 이 서체는 기본 공백이 좁아 'NOW, DJBANK' 가 붙어 보인다.
★ 간격 조절 ★ 아래 width 하나 (기본 공백은 약 0.25em, 여기서는 0.45em). */
.boot__gap { display: inline-block; width: 0.45em; }
.boot.is-zooming .boot__swap-in { opacity: 0; }
.boot.is-zooming .boot__swap-in--next { opacity: 1; }
/* ★ 왼쪽 캡션(DYNAMIC JOURNEY)을 오른쪽으로 밀어 두는 값 ★ (2026-08-26 채린 요청)
캡션 좌우 위치는 JS(measure)가 제목 글자 폭에 맞춰 잡는다 — 그 기준은 그대로 두고
왼쪽 덩어리만 이만큼 오른쪽으로 옮긴다. 0 이면 원래 자리(제목 왼쪽 끝).
translate 라 자리 계산에는 영향을 주지 않는다. */
/* ⚠ 기본값은 `.boot`(위쪽 블록)에 둔다. `.boot__texts` 에 직접 선언하면 **자기 선언이
상속값을 이겨서** JS 가 넣어 준 값이 안 먹는다(실제로 그래서 정렬이 안 됐다). */
.boot__side--l { transform: translateX(var(--cap-shift-l)); }
/* 오른쪽 덩어리도 같은 방식으로 민다 — 값의 뜻은 위 --cap-shift-r 주석 참고.
⚠ 세로 이동(줄 벌어짐)은 `.boot__line--top/--bottom` 이 맡는다. 층이 달라서 안 부딪힌다. */
.boot__side--r { transform: translateX(var(--cap-shift-r)); }
/* ★ 시작 구간 캡션은 살짝 투명하다 ★ (2026-09-02 채린) 확대 전(=.is-zooming 붙기 전)만 0.9.
⚠ `.boot__texts` 에 주면 안 된다 — js/preloader/main.js 가 그 요소의 opacity 를 인라인으로
쥐고 있어서(스크롤 진행도) 규칙이 진다. 한 층 안쪽인 `.boot__side` 는 아무도 안 건드린다.
⚠ 확대가 시작되면 1 로 돌아온다 — 그때 남는 두 줄은 표제(DYNAMIC JOURNEY 등)라 또렷한 게 맞다. */
.boot:not(.is-zooming) .boot__side { opacity: 0.9; }
.boot__side--l .boot__line { text-align: left; }
.boot__side--r .boot__line { text-align: right; }
.boot__line--top {
transform: translate3d(0, calc((var(--ink-height, 0px) * -0.5 - var(--cap-gap) - 50%) * var(--progress)), 0);
}
.boot__line--bottom {
transform: translate3d(0, calc((var(--ink-height, 0px) * 0.5 + var(--cap-gap) + 50%) * var(--progress)), 0);
}
/* 캡션 등장 — 버전1 reveal.css 의 rise 하나만. 상자 안에서 안쪽을 밀어올린다. */
.boot [data-rv='rise'] {
--rv-delay: 0s;
--rv-y: 110%;
display: block;
overflow: hidden;
margin-block: -0.2lh;
}
.boot [data-rv='rise'] > * {
display: block;
padding-block: 0.2lh;
transform: translate3d(0, var(--rv-y), 0);
transition: transform 0.5s var(--boot-ease-out-cubic) var(--rv-delay);
}
.boot [data-rv='rise'].is-in > * {
transform: translate3d(0, 0, 0);
transition-duration: 1.2s;
}
/* ⚠ 선택자를 `.boot .boot__start` 로 쓴다(그냥 `.boot__start` 가 아니라).
아래 `.boot .ul`(밑줄)이 `position: relative` 를 주는데, 한 파일로 합치면서
그쪽 우선순위가 더 높아져 **버튼이 absolute 를 잃고 화면 밖(y −47px)에 그려졌다.**
버전1에서는 .ul 이 type.css, .boot__start 가 boot.css 에 따로 있어서 우선순위가
같았고 파일 순서로 버튼이 이겼다 — 합치면서 깨진 것이다.
⚠ 이 버그는 **JS 로 클릭하는 검증에는 안 잡힌다** — 화면 밖 버튼도 click() 은 먹는다.
실제 좌표를 찍어 보거나 사람이 눌러 봐야 드러난다. */
.boot .boot__start {
/* 자리는 안쪽 .hero__cta 가 잡는다(bottom: 2.4rem — 두 번째 화면과 같은 값).
이 층은 화면 전체를 덮고 보이기/숨기기만 맡는다. */
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none; /* 누르는 게 아니라 '스크롤하라'는 안내다 */
opacity: 0;
visibility: hidden;
transition: opacity 0.36s ease, visibility 0.36s ease;
}
.boot .boot__start.is-shown { opacity: 1; visibility: visible; }
/* ★ '↓ Scroll for more' 색 ★ (2026-08-28 채린 지정: #0046FF → **#00AAFF**)
어두운 영상(검은 막 60%) 위라 진한 파랑은 잘 안 읽혔다 — 밝은 하늘색으로 올렸다.
글자와 화살표가 함께 물든다 — 화살표 SVG 가 `fill: currentColor` 라서다.
⚠ **프리로더 것에만** 준다(`.boot` 로 감쌌다). 두 번째 화면의 안내는 지금 `hidden` 이지만
되살리면 영상 위에 뜨는 것이라 크림색이 맞다 — 규격은 css/stage/hero.css 의
`.scene--hero .hero__cta-inner`(0-2-0) 이고, 이 규칙(0-3-0)이 그 위에 얹힌다. */
.boot .boot__start .hero__cta-inner { color: #00aaff; }
/* 밑줄은 오른쪽에서 접혔다가 왼쪽에서 다시 그어진다(버전1 type.css 의 .ul).
⚠ 원본 `.ul` 에 있던 `position: relative` 는 **일부러 뺐다.**
이 지면에서 .ul 을 쓰는 건 START 버튼 하나뿐인데 그 버튼은 이미 absolute 라
::after 의 기준이 된다. relative 를 그대로 두면 같은 우선순위(0-2-0)에서 이 규칙이
뒤에 온다는 이유만으로 버튼의 absolute 를 덮어써 **버튼이 화면 밖으로 나간다.**
(실제로 그 일이 있었다 — 2026-08-26)
.boot 안에서 .ul 을 다른 요소에 쓸 일이 생기면, 그 요소에 position 을 직접 줄 것. */
.boot .ul { text-decoration: none; }
.boot .ul::after {
content: '';
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 1px;
background: currentColor;
transform-origin: right center;
transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.boot .ul:hover::after { animation: boot-ul-redraw 1s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes boot-ul-redraw {
0% { transform: scaleX(1); transform-origin: right center; }
49% { transform: scaleX(0); transform-origin: right center; }
50% { transform: scaleX(0); transform-origin: left center; }
100% { transform: scaleX(1); transform-origin: left center; }
}
/* 프리로더가 도는 동안에는 스크롤을 막는다. START 를 누르면 JS 가 걷는다.
Lenis 는 mod-hero-video.js 가 자기 인트로 동안 따로 멈춘다 — 여기서는
프리로더 구간(그 모듈이 아직 안 붙은 시간)만 책임진다. */
html.is-boot-locked, html.is-boot-locked body {
overflow: hidden;
height: 100%;
}
/* ⚠ 경계 **767**(위 --brem 주석 참고. 여기도 768 이었다) */
@media (max-width: 767px) {
/* ★ 2026-09-02 부터 모바일도 **데스크톱과 같은 교대**를 한다 ★
처음 네 줄(ACCOUNTS… / ALL INSIDE THE ERP. / TO RESHAPE… / A DYNAMIC JOURNEY BEGINS.)이
보이다가, 확대되는 순간 아래 두 줄이 DYNAMIC JOURNEY · THE FIRST ERP BANKING 으로 바뀐다.
⚠ 그전에는 위 두 줄을 `display:none` 으로 없애고 바뀐 문구만 처음부터 띄웠다
(2026-08-26 ~ 09-02). 되돌리려면 아래 두 줄을 `display:none` / `opacity:0` 으로 되돌린다. */
.boot .boot__line--top { display: block; }
.boot .boot__swap-in { opacity: 1; }
.boot .boot__swap-in--next {
opacity: 0;
/* ★ 확대 뒤(= 'DJ Bank' 가 커진 화면) 두 줄의 크기 ★ **4.8vw** (2026-09-02 채린, 390 에서 18.7px).
이 두 줄은 창 위·아래 모서리에 걸치는 표제라 시작 캡션(16px)보다 조금 크다.
⚠ 옛 값은 1em 이었다. 그전 좌우 배치 시절에는 키우면 좌우 캡션이 부딪혔는데
(390 에서 2px 겹침, 2026-08-28), 지금은 위·아래로 나뉘어 있어 그 걱정이 없다.
⚠ 데스크톱은 위쪽 블록의 1.1875em 그대로다. */
font-size: 4.8vw;
}
.boot__texts {
padding-inline: calc(1.25 * var(--brem));
}
.boot__line {
/* ★ 글자 크기 ★ (2026-09-02 채린) 0.875 → 1.15("너무 작아") → 1.0("이번엔 너무 커졌어", 390 에서 16px)
→ 0.9375(2026-09-04 채린 "15 정도로, 390 기준") → **0.907**(같은 날 "430 기준 16") —
430 에서 16px · 390 에서 14.5px · 375 에서 14px.
계산: 계수 = 원하는px ÷ (기준폭 × 0.041025641). 430 기준이면 ÷ 17.64, 390 기준이면 ÷ 16.
⚠ 아래 `> span` 규칙도 함께 봐야 한다 — 데스크톱은 처음 네 줄만 0.85배로 줄이는데,
폰에서는 그 축소를 **끈다**(안 끄면 16 × 0.85 = 13.6px 로 다시 작아진다). */
font-size: calc(0.907 * var(--brem) * var(--dj-cap-scale, 1)); /* 배율은 .boot 의 --dj-cap-scale */
/* 두 줄 사이 간격. 전역 규칙은 1(딱 붙는다) — 폰은 문장이라 조금 벌린다.
2026-09-02 채린: 1.45 → 1.2 → 1.05 → **1.06** (390 에서 16.96px). */
line-height: 1.06;
/* ⚠ 모바일은 음수를 주면 안 된다. 데스크톱과 달리 **진행도를 곱하지 않고 처음부터
벌어져 있는** 공식이라(아래 --top/--bottom 참고) 같은 값이라도 훨씬 위로 파고든다.
-0.8em 을 줬다가 캡션이 제목 글자 한가운데를 가로질렀다(2026-08-26). */
--cap-gap: 0.75em; /* ⚠ 모바일은 그대로 둔다 (2026-08-31 채린 "모바일은 안 고쳐도 됨") */
}
/* 데스크톱에서 처음 네 줄만 0.85 배로 줄이는 규칙을 **폰에서는 끈다** (2026-09-02). */
.boot .boot__line--top > span,
.boot .boot__swap-in:not(.boot__swap-in--next) { font-size: 1em; }
/* ★ 'DJ Bank' 가 커지는 구간에서는 캡션을 숨긴다 ★ (2026-09-02 채린 "그냥 숨겨줘")
확대가 시작되면(.is-zooming) 네 줄이 함께 사라지고 큰 글자와 창만 남는다.
⚠ **`!important` 가 꼭 필요하다.** js/preloader/main.js 가 스크롤 진행도로
`texts.style.opacity` 를 **인라인으로** 넣는데(스크롤 전에는 그 값이 1),
인라인은 보통 규칙을 이긴다 — 처음엔 0 으로 내려갔다가 곧 1 로 되돌아왔다(실측).
⚠ 한때 확대 뒤에도 남겨 봤다: 창 **밖** 30px(커진 글자와 겹쳐 둘 다 안 읽힘) →
창 **안쪽** → 창 **경계선에 반반 걸침**(시안대로). 지금은 그 셋을 다 걷고 숨긴다.
되살리려면 이 자리에 --portal-cy / --portal-now-h 를 쓰던 규칙을 다시 넣으면 된다
(js/preloader/boot.js 는 그 두 값을 계속 넘겨 주고 있다). */
.boot.is-zooming .boot__texts {
opacity: 0 !important;
/* 기본은 0.4s 인데, 그동안 **두 벌이 겹쳐 뭉개진다** — 처음 문구가 아직 안 사라졌는데
바뀐 문구(--next)가 켜져서다(채린이 보낸 화면 기록 6.2초에 그대로 잡혔다).
폰에서는 확대되면 어차피 캡션이 사라지므로 **빨리 걷는다**. */
transition: opacity 0.16s ease !important;
}
/* ★ 폰에서는 문구 교대를 아예 안 한다 ★ (2026-09-02)
확대 뒤 캡션이 안 보이므로 DYNAMIC JOURNEY / THE FIRST ERP BANKING 로 갈아탈 이유가 없다.
교대를 켜 두면 사라지는 0.16초 동안 두 문구가 겹쳐 지저분하다. */
.boot.is-zooming .boot__swap-in { opacity: 1; }
.boot.is-zooming .boot__swap-in--next { opacity: 0; }
}
/* ── 히어로 로고: 흰(크림) 배경 구간에서만 ────────────────────────────────
(2026-08-26 채린 요청) 8990 원본은 로고가 처음부터 화면 맨 위에 떠 있는데,
버전3에서는 프리로더·영상 위에 로고를 안 두기로 했다. 대신 **영상이 줄어들며
배경이 밝아지는 구간**에서만 뜬다.
`.is-on-light` 는 문서 맨 아래 인라인 스크립트가 붙인다(LIGHT_FROM 부터,
스월 씬이 살아 있는 동안). 그 클래스가 흰 로고↔컬러 로고 교차도 함께 맡는다.
★ 뜨는 시점을 바꾸려면 ★ 그 스크립트의 LIGHT_FROM (무대 윗변 기준 화면 배수) */
/* ⚠ 선택자에 `html.js` 를 붙여야 한다. css/motion.css 에 `html.js .hero__logo { opacity: 0 }`
가 있어서(원래는 인트로가 켜 주던 값) 그냥 `.hero__logo.is-on-light` 로는 못 이긴다.
버전3은 그 인트로를 안 쓰므로 여기서 직접 켠다. */
.hero__logo {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s cubic-bezier(0.215, 0.61, 0.355, 1),
visibility 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
/* `.is-lit` = 두 줄 타이틀이 올라오는 구간(영상 위) — **흰 로고**
`.is-on-light` = 배경이 크림으로 밝아진 뒤 — **컬러 로고**(교체는 stack.css 가 한다) */
html.js .hero__logo.is-lit,
html.js .hero__logo.is-on-light {
opacity: 1;
visibility: visible;
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 첫 화면 — DJ / BANK 두 줄 (2026-08-30 채린 시안 `Frame 632471.png`)
══════════════════════════════════════════════════════════════════════════
┌ 시안(390) 실측 — 전부 '획' 기준 ────────────────────────────────────
│ DJ 획 y 117.3~322.3 · 폭 160.7
│ BANK 획 y 350.7~554.0 · 폭 351.7 (좌우 여백 22px)
│ 획 높이 204.5 (두 줄 같음) → 글자 크기 204.5 / 0.76(캡높이) = **269px**
│ 획 간 거리 233.4 → 줄 높이 233.4 / 269 = **0.868**
│ 캡션 줄 y 567.3 — BANK 획 아래끝(554)에서 13.3 아래
└────────────────────────────────────────────────────────────────────
⚠ 줄바꿈은 마크업의 `
` 가 한다 — 데스크톱에서는 display:none 이라
한 줄('DJ Bank')로 남는다. 대문자도 모바일에서만 준다.
⚠ 캡션이 벌어지는 거리는 js/preloader/boot.js 가 **상자를 실측해** --ink-height 로 넘긴다.
두 줄이 되면 그 값이 저절로 커지므로 여기서 따로 손댈 게 없다.
★ 크기 ★ 390 에서 269px → 269 / 3.9 = 68.974vw */
@media (max-width: 767px) {
.boot .ttf {
font-size: calc(68.974vw * var(--dj-title-scale, 1)); /* 배율은 .boot 의 --dj-title-scale */
line-height: 0.868;
/* ⚠ 대문자로 바꾸지 않는다 — **'DJ Bank' 그대로** 적는다 (2026-08-31 채린 지정).
한때 text-transform: uppercase 로 'DJ BANK' 가 되게 했다가 되돌렸다. */
/* 두 줄이라 정렬이 필요하다 — 짧은 'DJ' 가 왼쪽에 붙지 않고 **가운데**에 선다
(2026-08-30 채린 지적). 'BANK' 는 폭을 거의 다 써서 정렬해도 자리가 그대로다. */
text-align: center;
}
/* ★ 2026-09-02 채린 시안 ★ 모바일 캡션은 **사진 창 위·아래에 두 줄씩, 가운데 정렬**이다.
데스크톱은 창 좌우에 붙지만 폰은 폭이 좁아 그 배치가 안 된다 — 그래서 세로로 쌓는다.
창 위 : ACCOUNTS, TRANSFERS, LOANS. / ALL INSIDE THE ERP. (= .boot__side--l)
창 아래: TO RESHAPE CORPORATE BANKING, / A DYNAMIC JOURNEY BEGINS. (= .boot__side--r)
⚠ 2026-08-30 ~ 09-02 사이에는 이 상자를 통째로 `display:none` 으로 감춰 뒀었다.
★ 창 크기와 묶여 있다 ★ 창 반높이는 `.boot__frames` 의 clip-path 와 **같은 식**(5.5 × --brem)을
쓴다. 창 크기를 바꾸면 여기 5.5 도 함께 고쳐야 캡션이 창에 붙어 따라간다.
★ 창과의 거리 ★ 아래 --cap-away (지금 3 × --brem = 390 에서 48px). */
/* ★ 확대가 끝난 화면을 세로 가운데로 ★ (2026-09-02 채린 "중간에 딱 위치하게", 시안 ㄷㄷㄷㄷ.png)
`--title-nudge` 는 확대되는 동안 글자와 창을 **함께** 위로 올리는 값이다(--progress 를 곱한다).
7vh(59px)면 다 커진 뒤 덩어리 중심이 화면 중심보다 32px 위에 선다(실측 390×844).
폰은 3.2vh 로 낮춰 중심을 맞췄다가, 2026-09-02 채린 "조금만 위로" 로 **4.5vh** 가 됐다
(27 → 38px, 11px 위로). 제목·창·캡션이 **한 덩어리로** 올라간다 — 캡션은 창의 실제 중심
(--portal-cy)을 보고 있어서 저절로 따라온다.
⚠ 확대 **전**에는 --progress 가 0 이라 이 값이 안 쓰인다 — 시작 캡션 자리는 그대로다.
⚠ 데스크톱은 7vh 그대로(채린 지정값). ⚠ 화살표는 화면 아래에 따로 붙어 있어 안 따라온다. */
.boot { --title-nudge: 4.5vh; }
.boot__texts {
display: block; /* 좌우 flex 배치를 버리고 절대배치 두 덩어리로 간다 */
padding-inline: calc(1.25 * var(--brem));
/* 창 가장자리에서 캡션까지. 2026-09-02 채린: 3 → 1.5("너무 멀어") → **1.875**(390 에서 30px).
⚠ --brem 비례라 큰 폰에서는 비율대로 함께 넓어진다(430 에서 33px). */
--cap-away: calc(1.875 * var(--brem));
--cap-win: calc(5.5 * var(--brem)); /* 창 반높이 (.boot__frames clip-path 와 같은 식) */
}
.boot__side {
position: absolute;
left: 0;
right: 0;
/* ⚠ 데스크톱의 좌우 밀기(--cap-shift-l/r)를 **꺼야 한다** — 그건 제목 글자 끝에 맞추는
값이라 폰에서는 가운데 정렬을 깨뜨린다. JS(measure)가 계속 값을 넣지만 안 쓴다. */
transform: none;
}
.boot__side--l { bottom: calc(50% + var(--cap-win) + var(--cap-away)); }
.boot__side--r { top: calc(50% + var(--cap-win) + var(--cap-away)); }
/* 네 줄 모두 가운데 정렬 (데스크톱은 왼쪽/오른쪽 정렬) */
.boot__side--l .boot__line,
.boot__side--r .boot__line { text-align: center; }
/* ⚠ 데스크톱은 두 줄을 위아래로 **벌려** 놓는다(--cap-gap). 여기서는 그냥 두 줄이 붙어야
하므로 그 이동을 끈다 — 안 끄면 위 줄이 창 쪽으로 파고든다. */
.boot__line--top,
.boot__line--bottom { transform: none; }
/* ★ 영상 위 검은 막 — 모바일만 옅게 ★ (2026-08-30 채린 "영상 좀만 더 밝게". 0.6 → 0.5)
⚠ 짝이 되는 --hero-video-scrim(css/tokens.css 의 모바일 블록)과 **같은 값이어야** 한다.
한쪽만 고치면 프리로더 → 히어로로 넘어가는 순간 밝기가 툭 바뀐다.
⚠ 이 선언은 반드시 **boot.css 안**에 있어야 한다. tokens.css 에 `.boot { … }` 로 적었더니
안 먹었다 — 우선순위가 같으면 뒤에 실린 파일이 이기는데 boot.css 가 뒤다. */
.boot { --boot-video-scrim: 0.5; }
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 히어로 — 포털 구성 (2026-08-31 채린 시안 `Frame 632479.png`)
══════════════════════════════════════════════════════════════════════════
과거 사진이 차오른 뒤 **화면을 가득 채우지 않고**, 가운데서 창이 포털처럼 열린다.
그 위아래로 DJ / Bank 가 서고, 뒤에는 파란 빛줄기 배경이 깔린다.
(참고: eladiodieste.com/en 모바일 — 이름을 위/아래로 갈라 화면 끝까지 붙이는 구성)
화면을 가득 채우는 일은 **스크롤**이 맡는다 → js/preloader/main.js
┌ 시안(390) 실측 ─────────────────────────────────────────────────────
│ DJ 획 y 42.0 ~ 210.0 (높이 168) 가운데
│ 창 x 24 ~ 366 · y 229 ~ 457 → **342 × 228 (3:2)**
│ Bank 획 y 487.7 ~ 660.0 (높이 172) 가운데
│ → 글자 크기 168 / 0.79(Arges 캡비) = **213px** = 54.62vw
│ → 줄 간 거리 445.7 / 213 = **2.092**
└──────────────────────────────────────────────────────────────────────
⚠ 창 크기는 CSS 가 아니라 **js/preloader/boot.js 의 portalW/portalH** 가 정한다
(확대가 그 크기에서 멈춘다). 좌우 여백 24px·비율 3:2 를 바꾸려면 그쪽을 고칠 것.
⚠ 데스크톱은 예전 그대로다 — 이 블록은 767px 이하에서만 산다. */
@media (max-width: 767px) {
/* ── 제목 ── 두 줄이 창을 위아래로 감싸도록 줄 간격을 벌린다
⚠⚠ **폭만 보고 크기를 정하면 안 된다.** 시안은 390×700 인데, 실제 폰(특히 카카오
인앱 브라우저)은 위아래 툴바에 가려 **보이는 높이가 660px 안팎**이다. 폭 기준(54.62vw)
으로만 잡으면 두 줄의 획 span 이 618px 이라 그 안에 안 들어가 **DJ 윗머리가 잘린다**
(2026-08-31 채린 실측 스크린샷). 그래서 **높이도 함께 본다**.
획 span = 줄간격(2.092em) + 획높이(0.79em) = 2.882em. 시안은 그게 화면의 88% 였다
→ 글자 크기 ≤ 화면높이 × 0.88 / 2.882 = **화면높이 × 0.305**.
⚠ 여기서 쓰는 `svh` 는 **툴바가 보일 때의 화면 높이**다 — 우리가 맞춰야 할 '보이는 영역'이
바로 그것이다. (`--vh100` 은 반대로 '본 것 중 가장 큰 높이'라 여기엔 못 쓴다.) */
/* ★★ 검사창에서 바로 조절하는 값 ★★
크롬 검사 → Elements 에서 `
` 를 고르고 Styles 패널의 이 규칙에 적으면
즉시 반영된다. ⚠ 새로고침하면 사라진다 — 마음에 드는 숫자를 알려주면 파일에 박아 둔다.
--t-size-w 폭 기준 글자 크기 (기본 54.62vw)
--t-size-h 높이 기준 글자 크기 (기본 30.5svh) ← **둘 중 작은 쪽이 이긴다**
--t-gap 두 줄 사이 거리 (기본 2.092 = 글자 크기의 배수. 키우면 창 자리가 넓어진다)
--title-nudge 구성 전체를 위로 올리는 양 (기본 6vh) */
.boot {
/* ★ 2026-08-31 채린이 검사창에서 직접 잡은 값 ★ (시안 기본값 → 조정 결과)
--t-size-h 30.5 → 31.5svh · --t-gap 2.092 → 1.92
--title-y 0 → -20px · --hint-y 0 → -33px · --portal-y 0 → -30px (음수 = 아래로) */
--t-size-w: 54.62vw;
--t-size-h: 31.5svh;
--t-gap: 1.98;
/* ★ 영문 자간 ★ (2026-08-31 채린 "영문 폰트 자간 넓혀줘")
Arges 는 초압축 서체라 기본(normal)으로는 글자가 서로 붙어 보인다.
⚠ 자간을 키우면 **글자 폭이 늘어난다** — 'Bank' 는 이미 폭을 거의 다 쓰므로
너무 키우면 좌우로 넘친다. 넘치면 --t-size-w 를 함께 낮출 것. */
--t-track: 0.04em;
/* ★ 창 자리 ★ 기본 0. **양수 = 위로**, 음수 = 아래로 (예: 20px, -12px)
★ 창 좌우 ★ --portal-x (양수 = 오른쪽)
★ 창 크기 ★ --portal-w-em / --portal-h-em (글자 크기의 배수)
⚠ 크기는 CSS 만 고쳐서는 안 바뀐다 — JS 가 계산해 px 로 박아 넣기 때문이다.
고친 뒤 **스크롤을 아주 조금 움직였다 되돌리면** 그때 새 값으로 다시 그려진다. */
/* ★ 글자 자리 ★ --title-y / --title-x — **글자만** 움직인다(창은 그대로).
⚠ `--title-nudge` 와 다르다: 그건 **글자와 창을 함께** 올린다(둘 사이 간격 유지).
· 구성 전체를 올리고 싶다 → --title-nudge
· 글자만 올리고 싶다 → --title-y
· 창만 올리고 싶다 → --portal-y
· DJ↔Bank 만 벌리고 싶다 → --t-gap
양수 = 위로 / 오른쪽. */
--title-y: -20px;
--title-x: 0px;
/* ★ 'Scroll for more' 자리 ★ 양수 = 위로 / 오른쪽
★ 화살표 크기 ★ --hint-size (기본 1.3rem = 28px @390) */
--hint-y: -33px;
--hint-x: 0px;
--hint-size: 1.7rem;
--portal-y: -30px;
--portal-x: 0px;
--portal-w-em: 1.606;
--portal-h-em: 1.070;
}
.boot .ttf {
font-size: calc(min(var(--t-size-w), var(--t-size-h)) * var(--dj-title-scale, 1)); /* 배율은 .boot 의 --dj-title-scale */
line-height: var(--t-gap);
letter-spacing: var(--t-track, 0);
/* ⚠ 자간을 주면 **마지막 글자 뒤에도** 그만큼 붙어 가운데 정렬이 왼쪽으로 밀린다.
그만큼 오른쪽으로 되밀어 준다. */
text-indent: var(--t-track, 0);
}
/* ── 제목을 **보이는 영역** 가운데에 놓는다 ──
`.boot` 는 `inset: 0` 이라 레이아웃 화면(툴바에 가린 부분까지 포함) 기준이다.
그 한가운데에 맞추면 위쪽이 툴바 뒤로 밀려 잘린다(채린 실측: DJ 윗머리가 잘렸다).
⚠ **`.boot__frames` 에는 주면 안 된다** — 그 안의 칸이 나중에 화면 전체를 덮는 영상이
되는데, 100svh 기준으로 가운데를 잡으면 툴바가 접혔을 때 아래가 안 덮인다. */
.boot__logo {
inset: 0 0 auto 0;
height: 100svh;
/* ⚠ `transform` 이 아니라 **`translate` 속성**으로 옮긴다 — 이 층의 transform 은
js/preloader/main.js 가 스크롤 축소(scale)에 쓰고 있어서, transform 을 여기서 주면
그 값을 덮어써 버린다. translate 는 transform 과 따로 합성된다. */
translate: var(--title-x, 0px) calc(-1 * var(--title-y, 0px));
}
/* ── 창을 제목의 획 가운데에 맞춰 위로 올린다 ──
칸은 `.boot__frames`(레이아웃 화면) 한가운데에 서는데, 제목은 보이는 영역 기준이라
둘의 가운데가 어긋난다. 그대로 두면 **창이 'Bank' 글자를 파고든다**(실측 −19px).
시안에서는 창 아래끝 ~ Bank 획 위끝이 30.7px 떨어져 있다.
★ 보정량 ★ 글자 크기의 0.244배 (390·844 에서 52px)
⚠ 창이 커져 화면을 채울 때는 이 보정이 **0 으로 풀려야** 한다 —
js/preloader/main.js 의 ⑥ 이 `--portal-shift` 를 직접 0 까지 몰고 간다. */
.boot__frame-in--hero {
/* ★ 보정량 ★ 두 조각의 합이다.
① `--title-nudge` — 제목을 위로 올리는 양(6vh). 화면 높이에 매여 있어 **화면마다 달라진다**.
창은 그만큼 같이 따라 올라가야 제목과의 간격이 유지된다.
(이걸 빼먹고 고정 em 으로만 줬더니 844 에서는 맞고 661 에서는 창이 DJ 에 붙었다.)
② 글자 크기 × 0.0056 — 시안에서 창 가운데가 획 가운데보다 8px 위에 있던 몫.
⚠ `--title-nudge` 를 바꾸면 여기가 저절로 따라온다 — 값을 베껴 적지 말 것. */
--portal-shift: calc(
var(--title-nudge, 6vh) + min(var(--t-size-w), var(--t-size-h)) * 0.0056
+ var(--portal-y, 0px)
);
/* --portal-shift-k 는 **0~1 배율**이다(기본 1). 창이 커지는 동안 JS 가 1 → 0 으로 몰고 간다.
⚠ 길이(px)를 직접 덮어쓰게 하면 안 된다 — %로 주면 translate 의 %는 **요소 크기 기준**이라
전혀 다른 값이 된다. 그래서 길이는 CSS 가 갖고, JS 는 배율만 넘긴다. */
transform: translate(
calc(-50% + var(--portal-x, 0px)),
calc(-50% - var(--portal-shift) * var(--portal-shift-k, 1))
);
}
/* ── 뒤에 깔리는 파란 빛줄기 ──
⚠ 처음부터 보이면 안 된다. 사진이 차오르는 앞 구간은 **검은 화면**이고,
확대(포털 열림)가 시작될 때 함께 떠오른다 — 그래서 `.is-zooming` 에 건다.
⚠ `.boot` 자신의 background 를 갈아 끼우지 않고 **층을 하나 더** 깐다.
배경을 직접 바꾸면 앞 구간의 검은 바탕까지 같이 사라진다. */
.boot::before {
content: "";
position: absolute;
inset: 0;
z-index: 0; /* 사진 칸(z:10)·제목(z:20)보다 뒤 */
background: #000 url("../assets/img/hero-bg-m.jpg?v=260923-1154") center / cover no-repeat;
opacity: 0;
transition: opacity 0.9s ease;
pointer-events: none;
}
.boot.is-zooming::before { opacity: 1; }
/* ── 뒷배경 영상 ── (2026-08-31 채린) js/preloader/boot.js 가 **폰에서만** 만들어 넣는다.
위 `.boot::before`(정지 이미지)와 **같은 시점에** 뜨고 걷힌다 — 그 이미지는 이 영상의
poster 이자 대비책이라 지우지 않는다.
⚠ z-index 0 — 사진 칸(10)·제목(20)보다 뒤. */
.boot__bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.9s ease;
pointer-events: none;
}
.boot.is-zooming .boot__bg { opacity: 1; }
.boot.is-video-passed .boot__bg { opacity: 0; }
/* 영상 층을 히어로에게 넘길 때 배경도 함께 걷는다 —
안 그러면 밑의 히어로 위로 빛줄기가 남아 두 겹이 된다. */
.boot.is-video-passed::before { opacity: 0; }
/* ── 폰에서는 **화살표만** 남긴다 ── (2026-08-31 채린 요청)
⚠ 마크업에서 지우지 말고 숨기기만 한다 — 데스크톱이 같은 마크업을 쓴다.
⚠ 글자를 빼면 안내 상자가 화살표 폭만큼만 남아 **가운데 정렬이 어긋난다** →
상자를 그대로 화면 폭으로 두고 안쪽만 가운데로 모은다. */
.boot .boot__start .hero__cta-label { display: none; }
/* ★ 화살표를 조금 더 아래로 ★ (2026-09-02 채린 "Bank 랑 너무 붙은 느낌")
⚠ **`bottom` 으로는 안 움직인다.** `.hero__cta` 에 transform 이 걸려 있어서
bottom 을 50 → 28.5px 로 낮춰도 화살표는 1px 밖에 안 내려갔다(실측).
그래서 **안쪽 상자를 직접 내린다**. ★ 조절하는 곳 ★ 아래 10px.
⚠ 지금도 화살표 아래에 14px 밖에 안 남는다 — 더 떼려면 화살표를 내리는 대신
제목을 올려야 한다(--title-nudge). */
.boot .boot__start .hero__cta-inner { transform: translateY(10px); }
/* ★ 화살표를 조금 크게 ★ (2026-08-31 채린) 1.3rem → --hint-size(1.7rem).
⚠ 원 규칙(css/stage/hero.css 의 `.scene--hero .hero__cta-icon`)은 데스크톱이 함께 쓰므로
건드리지 않고 여기서만 덮는다. */
.boot .boot__start .hero__cta-icon {
width: var(--hint-size, 1.3rem);
height: var(--hint-size, 1.3rem);
}
.boot .boot__start .hero__cta-inner {
justify-content: center;
/* ★ 화살표 색 ★ 흰색 (2026-08-31 채린). 화살표 SVG 가 `fill: currentColor` 라 이 색을 따른다.
⚠ **데스크톱은 #00AAFF 그대로다** — 2026-08-28 에 흰색 → #0046FF → #00AAFF 로 정한 값이라
모바일에서만 덮는다(위쪽 `.boot .boot__start .hero__cta-inner` 규칙은 그대로 둔다). */
color: #ffffff;
}
/* ── 'Scroll for more' 자리 ──
⚠ 실제 자리는 안쪽 `.hero__cta`(bottom: 2.4rem)가 잡는다. 그 층을 옮긴다.
⚠ `.boot .boot__start` 는 화면 전체를 덮는 층이라 여기에 주면 안 옮겨진다.
⚠ `transform` 말고 `translate` 를 쓴다 — 화살표·글자에 걸린 다른 연출과 안 부딪히게. */
.boot .boot__start .hero__cta {
translate: var(--hint-x, 0px) calc(-1 * var(--hint-y, 0px));
}
/* ── 창 모서리 ── 시안의 둥근 사각형
⚠ `overflow: hidden` 이 함께 있어야 한다 — 안쪽