와 같은 처리). 없으면 모바일에서 "…금 / 융에 담다" 처럼 갈라진다. */ word-break: keep-all; } .chapter-read__chapter { color: var(--read-title-ink); } /* 글 단. 캔버스(=740px 가운데)를 그대로 쓴다. */ .chapter-read__col { padding-top: 5vh; /* 라벨(타이틀)과 본문 첫 줄 사이 (2026-08-29 채린 지정, 전 12vh) */ } /* ★ 활자는 파트2 본문(.article__body)과 **같은 값**이다 (2026-08-26 채린 요청) ★ 두 지면의 글자 크기가 다르면 같은 글인데 다른 문서처럼 읽힌다. 원본(eames)은 21px/30px 이었지만 이 사이트의 본문 규격을 따른다 — 바꿀 일이 생기면 css/stage/article.css 의 .article__body 와 **함께** 고칠 것. */ .chapter-read__col p { margin: 0 0 30px; font-family: var(--font-display); font-size: 18px; line-height: 30px; letter-spacing: 0; word-break: keep-all; /* 한글이 낱말 한가운데서 끊기지 않게 */ } .chapter-read__col p strong { font-weight: 700; } /* ── 인용문 + 말한 사람 ── (2026-08-28, 새 원고에 들어온 진옥동 회장 인용) 규격은 두 번째 본문(css/stage/article.css 의 .article__quote / .article__source)과 **같은 값**이다. ⚠ 색만 다르다 — 그쪽은 빨강(--article-quote, eames 원본 색)이고 여기서는 본문 잉크를 쓴다. ⚠ 선택자에 `.chapter-read__col` 을 붙여야 한다 — 그냥 `.chapter-read__quote`(0-1-0)로는 위쪽 `.chapter-read__col p`(0-1-1)를 못 이겨 크기·굵기가 본문 값으로 되돌아간다. */ /* ★ 왼쪽 세로 막대 ★ (2026-08-29 채린 요청) — 인용문과 출처를 한 상자로 감싸 막대를 세운다. ⚠ 막대는 **상자에** 준다.
두 개에 각각 주면 문단 사이 12px 에서 끊긴다. ⚠ 위아래 여백(40px)은 상자가 갖는다 — 안쪽
는 0 이다. 한쪽에만 두면 여백이 두 번 붙는다.
★ 막대 색 ★ --read-accent (#0046FF) */
.chapter-read__quotebox {
border-left: 4px solid var(--read-accent);
padding-left: 24px;
margin: 40px 0;
}
/* ★ 형광펜 ★ (2026-08-29 채린 요청) #007AFF 10%.
⚠ box-decoration-break: clone 이 있어야 **줄마다** 칠이 온전히 들어간다 —
없으면 여러 줄일 때 위아래 padding 이 첫 줄 위·마지막 줄 아래에만 붙는다.
⚠ 좌우 padding 은 주지 않는다 — 글이 그만큼 오른쪽으로 밀려 아래 출처 줄과 왼쪽 끝이 어긋난다.
⚠ 는 브라우저 기본값이 노란 배경·검정 글자라 둘 다 여기서 덮는다. */
.chapter-read__mark {
background-color: rgba(0, 122, 255, 0.2); /* 2026-08-30 채린 지정 (전 10%) */
color: inherit;
padding: 3px 0;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.chapter-read__col .chapter-read__quote {
font-family: var(--font-display);
font-weight: 600;
/* ★ 크기·행간은 본문(.chapter-read__col p)과 **같은 값** ★ (2026-08-30 채린 요청) */
font-size: 18px;
line-height: 30px;
letter-spacing: -0.01em;
color: inherit;
margin: 0 0 12px;
word-break: keep-all;
}
.chapter-read__col .chapter-read__source {
/* ★ 자간 −0.01em ★ (2026-09-01 채린 "-0.01 로 통일")
⚠ 이 줄이 없으면 **부모 의 자간이 px 그대로 상속**된다 —
blockquote 기본 크기가 52.66px 이라 −0.025em 이 −1.32px 로 굳어, 16px 글자에
−0.082em 이 걸렸다(채린 지적으로 발견). 상속을 끊으려면 값을 명시해야 한다. */
letter-spacing: -0.01em;
font-family: var(--font-display);
font-weight: 400;
font-size: 16px; /* 2026-08-30 채린 지정 (전 18px) */
line-height: 1.2; /* 2026-08-31 채린 지정 (전 1.5) — 두 줄로 접히는 모바일에서 티가 난다 */
color: var(--article-quiet, #777);
margin: 0;
word-break: keep-all;
}
@media (max-width: 767px) {
/* 데스크톱이 이미 한 단이라 여기서 펼 것은 없다(전에는 오른쪽 단을 폈다). */
/* 모바일에서도 파트2 본문과 같은 값이다(그쪽은 화면이 좁아져도 18px/30px 그대로다).
한쪽만 줄이면 같은 글이 지면마다 다른 크기로 읽힌다. */
.chapter-read__col p { margin-bottom: 24px; }
/* 모바일은 화면 폭에 맞춰 줄인다(데스크톱 48px). 13vw = 390 화면에서 50.7px 이라 48 에서 걸린다.
★ 모바일 제목 크기 ★ 여기 13vw 하나만 고치면 된다. */
.chapter-read__top { font-size: min(13vw, 44px); }
/* ★ 막대 ~ 글 사이 ★ 모바일 **20px** (2026-09-01 채린 지정. 데스크톱은 24px 그대로).
내력: 24 → 16px(글 폭이 342px 뿐이라 좁혔던 값) → **20px**.
⚠ 파트 II·III 본문 인용문(css/stage/article.css 의 .article__quotebox)도 같은 20px 이다 —
전에는 여기 16 · 그쪽 24 로 갈려 있었다. 한쪽만 고치면 세 지면이 다시 어긋난다.
⚠ 막대 굵기(4px)는 안 건드린다. */
.chapter-read__quotebox { padding-left: 20px; }
}
/* ── Outro 간지 색 ── (2026-08-30)
한때 **하늘색 바탕 + 검은 글자**로 뒤집어 봤다가, 채린이 "그냥 검정+하늘 조합으로" 라고 해서
되돌렸다. 지금은 인트로 표지(#chapter-intro)와 **똑같은 기본값**을 쓴다 —
검은 바탕(--cover-bg #0b0b0b) · 하늘색 큰 글자(--cover-num-ink #00AAFF) · 흰 라벨/기호.
그래서 여기에 #outro 전용 규칙이 없다. 다시 뒤집고 싶으면 아래 네 줄을 살리면 된다:
#outro { --cover-bg:#00AAFF; --cover-num-ink:#000; --cover-ink:#000; }
#outro .chapter-cover__icon { color:#fff; }
⚠ 그때는 마크업의 data-tone 도 "light" 로 바꿔야 옆 내비 글자색이 맞는다. */
/* 모바일 — 붙어 서는 화면이 보이는 화면 전체를 덮게 한다 (2026-08-30).
내력·이유는 css/partcover.css 의 같은 블록에 적어 뒀다(주소창 때문에 svh 가 90px 짧다). */
@media (max-width: 767px) {
.chapter-cover__sticky { height: 100lvh; }
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 표지 — 시안대로 (2026-08-30 채린 시안 `Frame 632470.png`)
══════════════════════════════════════════════════════════════════════════
폰에서는 표지가 **붙어 서지도, 가로로 흐르지도 않는다.** 그냥 지나가는 지면이다.
(연출을 끄는 건 js/mod-chapter-cover.js 의 is-mobile-static 가드가 한다.)
┌ 시안(390×700)에서 실측한 값 — 전부 '획' 기준이다 ────────────────────
│ 검은 블록 y 0 ~ 418
│ INTRO (하늘색 획) y 45 ~ 215 (획 높이 170) · x 36 ~ 355 (획 폭 319)
│ 0. (하늘색 획) y 332 ~ 503 (획 높이 171) · 가로 가운데
│ → '0.' 은 검은 블록 **아래로 84px 삐져나와** 밝은 바닥 위에 걸린다
│ 본문 카드 윗변 y 560
└──────────────────────────────────────────────────────────────────────
★ 시안 1px = --m ★ 폭에 비례해 함께 커지되 큰 폰에서 과하지 않게 상한을 뒀다.
390 → 1.00px · 320 → 0.82px · 430 이상 → 1.10px 고정.
⚠ 값을 옮길 때 **글자 상자가 아니라 획**을 맞춰야 한다. line-height 0.78 과
서체의 어센더(0.98)·캡높이(0.76) 때문에 상자 위끝과 획 위끝이 다르다.
그래서 위치는 padding 이 아니라 **--ink-top 보정값**으로 잡는다(아래 주석 참고). */
@media (max-width: 767px) {
html.is-mobile-static .chapter-cover {
--m: min(0.25641vw, 1.1px);
/* ★ 시안 수치 ★ 여기만 고치면 된다 */
--mc-black-h: 490; /* 검은 블록 높이 (2026-08-30 채린 지정. 시안 418 → 490) */
--mc-size: 225; /* 큰 글자 크기 (획 높이 170 ÷ 캡높이 0.76) */
--mc-line1-ink: 45; /* INTRO 획 위끝 */
/* 0. 획 위끝 — 검은 블록이 72 내려간 만큼 같이 내렸다(332 → 404).
그래서 '0.' 이 블록 아래로 삐져나오는 양은 85px 로 전과 같다. */
--mc-line2-ink: 404;
position: relative;
height: auto;
overflow: visible; /* '0.' 이 검은 블록 밖으로 나가야 한다 */
background: transparent;
}
/* ★ 인트로 간지만 검은 블록을 더 길게 ★ (2026-08-31 채린 지정. 490 → 580)
⚠ 아웃트로(#outro)는 490 그대로다 — 모바일에서 두 간지는 이미 따로 논다
(아래 색 규칙 참고). 둘을 다시 묶고 싶으면 위 .chapter-cover 블록의 값을 고칠 것.
⚠ 블록이 길어지면 '0.'(획 아래끝 575)이 블록 **안쪽**으로 들어온다 —
시안의 '밝은 바닥 위로 삐져나오는' 모양은 없어진다. 되살리려면 --mc-line2-ink 를
같은 만큼(+90 = 494) 내릴 것.
⚠ 본문 카드도 블록 높이만큼 함께 밀린다(90px). 카드 위 여백은 아래 padding-top 이 따로 잡는다. */
/* ★ 2026-09-02 채린 ★ 검은 블록 **460**(전 580), 기호도 위로.
기호 위끝은 `--mc-line2-ink` 가 정한다(아래 .chapter-cover__icons 의 margin-top 식이 이 값을 본다).
404 → **350**. 기호를 블록 **바닥에 바짝 붙인** 값이다(2026-09-02 채린 "좀 더 붙였으면").
실측 기준: INTRO 상자 아래끝 221 → 기호 301~420 → 블록 끝 440(**밑 여백 20**).
내력: 밑 여백 50(320) → **20(350)**.
⚠ 이 값과 블록 높이는 서로 안 묶여 있다 — 블록을 바꾸면 밑 여백이 그만큼 달라진다.
밑 여백을 유지하려면 두 값을 **같은 만큼** 옮길 것.
★ 조절하는 곳 ★ 기호를 올리려면 --mc-line2-ink 를 낮추고(1 낮추면 1px 올라간다),
블록 높이는 --mc-black-h 를 고친다. 둘은 서로 안 묶여 있으므로 블록을 바꾸면
밑 여백도 그만큼 달라진다 — 함께 볼 것.
⚠ 아웃트로(#outro)는 공통값(490 / 404)을 그대로 쓴다 — 여기 두 줄은 인트로 전용이다. */
html.is-mobile-static #chapter-intro {
--mc-black-h: 440;
--mc-line2-ink: 350;
}
/* 색 면. 붙어 서지 않고 그냥 흐름대로 지나간다.
★ 올라올 때 하늘색 → 자리 잡으면 검정 ★ (2026-08-30 채린 요청)
간지(.partcover)의 --pc-bg-rise 와 같은 장치다. 바뀌는 시점은 .is-in 이 붙는 때 =
지면이 60% 보이는 순간(js/mod-chapter-cover.js 의 IntersectionObserver).
⚠ **글자색도 함께 뒤집어야 한다** — 큰 글자가 하늘색이라 하늘색 바닥에서는 안 보인다.
그래서 올라오는 동안에는 검은 글자, 자리 잡으면 하늘색 글자가 된다.
★ 올라올 때 색 ★ --cover-bg-rise */
html.is-mobile-static .chapter-cover__sticky {
position: static;
height: calc(var(--mc-black-h) * var(--m));
overflow: visible;
background: var(--cover-bg-rise, #00aaff);
transition: background-color 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
html.is-mobile-static .chapter-cover.is-in .chapter-cover__sticky {
background: var(--cover-bg);
}
/* 글자는 배경과 반대로 — 하늘색 바닥에서는 검정, 검은 바닥에서는 하늘색 */
html.is-mobile-static .chapter-cover__num {
color: #000;
transition: color 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
html.is-mobile-static .chapter-cover.is-in .chapter-cover__num {
color: var(--cover-num-ink);
}
/* ★ 인트로는 처음부터 검정 ★ (2026-08-31 채린 요청)
하늘색으로 올라왔다 검정으로 뒤집히던 연출을 인트로에서만 걷었다. 바닥이 처음부터
검정이라 큰 글자도 처음부터 하늘색이다 — 뒤집을 게 없어 transition 도 끈다.
⚠ '0.' 이 스크롤에 맞춰 나오는 건 **그대로다** — 그건 색이 아니라 아래
`.chapter-cover__num:last-child` 의 opacity/translateY(.is-shown)가 한다.
⚠ id 선택자라 위의 .is-in 규칙들을 우선순위로 이긴다(0-3-1 < 1-2-1).
⚠ 아웃트로(#outro)는 손대지 않았다 — 거기는 JS 가 is-in 을 안 붙여
모바일에서 하늘색 바닥 + 검은 글자로 남아 있다. */
html.is-mobile-static #chapter-intro .chapter-cover__sticky {
background: var(--cover-bg);
transition: none;
}
/* ⚠⚠ 여기에 `transition: none` 을 쓰면 안 된다. id 선택자(1-2-1)라 아래
`.chapter-cover__num:last-child`(0-3-1) 의 **등장 전환까지 통째로 죽인다** —
'0.' 이 전환 없이 툭 켜졌다(2026-08-31 채린 "띡 나오게 하지 말고"). 색은 어차피
안 바뀌므로 끌 것이 없다. */
html.is-mobile-static #chapter-intro .chapter-cover__num {
color: var(--cover-num-ink);
}
/* 상단 라벨(DJ Bank / Intro)은 시안에 없다.
⚠ 지우지 말고 숨기기만 한다 — 데스크톱이 같은 마크업을 쓴다. */
html.is-mobile-static .chapter-cover__top { display: none; }
/* ★ 모바일 인트로: 둘째 줄이 '.' 이 아니라 **기호 두 개** ★ (2026-09-01 채린)
데스크톱과 같은 구성(INTRO 🏢₩ .)에서 마침표만 빼고 기호를 남긴 모양이다.
⚠ **아웃트로(#outro)는 아직 '.' 그대로다** — 채린이 인트로만 말했다. 맞추려면
아래 세 규칙의 `#chapter-intro` 를 떼면 두 표지가 같이 간다.
⚠ 자리(둘째 줄)는 '.' 이 쓰던 margin-top 식을 **그대로** 쓴다 — 값을 베껴 적지 말 것.
⚠ 크기는 큰 글자(--mc-size)에 매단다. 데스크톱 식(--cover-size × 0.17)을 그대로 쓰면
34vw × 0.17 = 5.8vw(390에서 23px)라 INTRO 옆에서 점처럼 작다. */
html.is-mobile-static #chapter-intro .chapter-cover__num:last-child { display: none; }
html.is-mobile-static #chapter-intro .chapter-cover__icons {
display: flex;
align-items: center;
justify-content: center;
margin-top: calc(
(var(--mc-line2-ink) - var(--mc-line1-ink) - var(--mc-size)) * var(--m)
);
}
html.is-mobile-static #chapter-intro .chapter-cover__icon {
width: calc(var(--mc-size) * var(--m) * 0.4);
}
/* 가로 한 줄 → **세로 두 줄**. INTRO 는 폭을 꽉 채우고, 0. 은 가운데. */
html.is-mobile-static .chapter-cover__years {
position: absolute;
left: 0;
right: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
white-space: nowrap;
/* JS 를 안 켜므로 인라인 transform 이 붙을 일이 없지만, 새로고침 전에 남아 있을 수 있다 */
transform: none !important;
}
html.is-mobile-static .chapter-cover__num {
font-size: calc(var(--mc-size) * var(--m));
line-height: 1;
display: block;
/* 시안의 INTRO 는 획 폭이 319 인데 이 서체를 기본 자간(-0.01em)으로 짜면 295 밖에 안 된다.
크기를 키우면 획 높이(170)가 어긋나므로 **자간으로만** 폭을 맞춘다.
4칸 × (0.026em × 225px) = 23px → 295 + 23 = 318. */
letter-spacing: 0.016em;
}
/* ── 획을 시안 위치에 앉힌다 ──
line-height:1 인 상자의 위끝에서 획(캡) 위끝까지는 (어센더 − 캡높이) × 글자크기 만큼
내려와 있다. Arges Trial 은 asc 0.98 · cap 0.76 → **0.22em**.
그래서 상자 위끝을 시안 획 위치보다 0.22em 위에 둔다. */
html.is-mobile-static .chapter-cover__num:first-child {
margin-top: calc((var(--mc-line1-ink) - var(--mc-size) * 0.22) * var(--m));
}
/* 둘째 줄도 '획 위끝' 기준이다. 두 상자의 보정값(0.22em)이 서로 상쇄되므로
사이 간격은 그냥 (획 간 거리 − 글자 크기) 다. */
html.is-mobile-static .chapter-cover__num:last-child {
margin-top: calc(
(var(--mc-line2-ink) - var(--mc-line1-ink) - var(--mc-size)) * var(--m)
);
}
}
/* ── 모바일 인트로: 순서대로 나타난다 ── (2026-08-30 채린 요청)
* 색 면(하늘색→검정) → **0.** → 본문 카드.
* 셋 다 **자기 자신이 화면에 들어오는 것**을 신호로 쓴다(js/mod-chapter-cover.js 의 watch).
* 그래서 시간이 아니라 스크롤을 따라 순서가 생긴다.
* ⚠ 숨기는 규칙을 html.is-mobile-static 안에만 둔 건 안전장치다 —
* 그 클래스는 JS 가 붙이므로, JS 가 죽으면 아무것도 안 숨겨진다(글이 사라지지 않는다).
* ★ 나오는 속도·거리 ★ 아래 transition 과 translateY 값. */
@media (max-width: 767px) {
/* ★ '0.' 도 아웃트로 기호처럼 **오른쪽에서 들어와 가운데서 멈춘다** ★ (2026-08-31 채린)
⚠ 아래의 '아래에서 올라오는' 규칙을 **덮어쓴다** — 뒤에 와야 이긴다(우선순위 같음).
⚠ 가로로 움직이므로 `#chapter-intro` 에도 **가로 넘침을 잘라야** 한다.
안 자르면 문서 폭이 늘어 모바일에서 fixed 인 프리로더가 그 폭을 따라가
**히어로가 통째로 오른쪽으로 밀린다**(아웃트로에서 실제로 그랬다). */
html.is-mobile-static #chapter-intro { overflow-x: clip; }
/* ★ '걸렸다 넘어가는' 움직임 ★ (2026-08-31 채린 "중간 지점에서 걸렸다가 넘어가듯이")
⚠ cubic-bezier 로는 못 만든다 — 그건 한 번에 매끄럽게 가는 곡선이라 **중간에 멈출 수가 없다**.
`linear()` 는 시간-값 짝을 여러 개 찍을 수 있어서 **중간에 평평한 구간(=걸림)** 을 만든다.
읽는 법: **18% 시간(0.11초)에 이미 95% 를 간다**(오른쪽에서 가운데까지 확 들어온다) →
52% 시간까지 그 자리에 머문다(가운데에서 '틱' 걸림) → 남은 5% 를 마저 간다.
⚠ 전체 0.62초. 내력 1.5초 → 1초 → **0.62초**(채린 "더 빠르게" 두 번).
⚠ 걸리는 지점은 **가운데(도착점 근처)** 여야 한다. 중간쯤(58%)에서 걸리게 했더니
"가운데로 온 게 아니라 어중간한 데서 멈췄다" 가 됐다(2026-08-31 채린 지적).
⚠ 크롬 113+ / 사파리 17.2+ 에서 듣는다. 못 알아듣는 브라우저는 그냥 선형으로 흐른다(깨지지 않는다). */
/* ★ '0.' 은 걸림 없이 **오른쪽에서 왼쪽으로 빠르게** 들어온다 ★ (2026-08-31 채린)
한때 아웃트로 기호처럼 가운데서 '틱' 걸리게 했다가 되돌렸다 — 아웃트로 기호에는 그대로 있다. */
html.is-mobile-static #chapter-intro .chapter-cover__num:last-child {
transform: translateX(var(--oi-from, 60vw));
transition:
transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.35s ease;
}
html.is-mobile-static #chapter-intro .chapter-cover__num:last-child.is-shown {
transform: none;
}
/* ★ 2026-09-02 채린 "인트로에서는 기호 나오는 인터랙션 없애줘" ★
기호 두 개는 **처음부터 제자리에 그냥 있다** — 오른쪽에서 미끄러져 들어오지도, 흐려졌다
나타나지도 않는다. 그래서 위 두 규칙에서 `.chapter-cover__icons` 를 뺐고, opacity 규칙도 지웠다.
⚠ 모바일 인트로에서는 '.'(:last-child)이 display:none 이라 위 규칙은 사실상 안 쓰인다 —
그래도 남겨 둔 건 기호를 다시 '.' 로 되돌릴 때를 위해서다.
⚠ js/mod-chapter-cover.js 는 여전히 기호에 `.is-shown` 을 붙인다. 이제 그 클래스에
걸린 규칙이 없어 아무 일도 안 일어난다 — JS 를 건드리지 않아도 연출이 꺼진다.
⚠ **아웃트로(#outro)의 기호는 그대로 미끄러져 들어온다** — 그건 아래 다른 규칙이 맡는다. */
/* '0.' — 아래에서 살짝 올라오며 나타난다.
★ 2026-08-31 채린 요청 "띡 말고 스르륵" ★ 0.5/0.6초 → **1.2/1.4초**, 올라오는 거리도
0.12 → 0.22em(글자가 225px 이라 0.12em = 27px 은 큰 화면에서 '툭 켜짐'으로 읽혔다).
⚠ **시간만 늘려서는 부족하다** — 신호를 주는 문턱도 함께 내렸다
(js/mod-chapter-cover.js 의 watch 0.35 → 0.12). 글자가 화면에 반쯤 들어온 뒤 시작하면
이미 잘 보이는 자리에서 켜져 아무리 느려도 '나중에 켜진' 티가 난다.
가감속은 뒤가 긴 곡선(0.22,1,0.36,1) — 처음에 붙고 끝에서 천천히 선다. */
html.is-mobile-static .chapter-cover__num:last-child {
opacity: 0;
transform: translateY(0.22em);
transition: opacity 1.2s ease-out, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
html.is-mobile-static .chapter-cover__num:last-child.is-shown {
opacity: 1;
transform: none;
}
/* 본문 카드 — 그다음에 올라온다.
⚠⚠ **지면(#intro-body)에 opacity 를 걸면 안 된다.** 투명도는 요소 **전체**(배경 포함)에
걸려서 그 지면의 회색 바탕(#efefef)까지 사라지고, 뒤의 **검은 body(rgb 11,11,11)** 가
그대로 드러난다 — 인트로에서 본문으로 넘어갈 때 **검정 영역**이 생기던 원인이다
(2026-08-31 채린 지적). 지면 높이가 2400px 이라 그 구간이 통째로 검게 보였다.
→ 지면은 배경만 두고, **연출은 안쪽 카드(.chapter-read__canvas)** 에 건다.
카드가 흐려졌다 나타나도 지면의 회색 바탕은 계속 칠해져 있다. */
html.is-mobile-static #intro-body {
opacity: 1;
transform: none;
}
html.is-mobile-static #intro-body .chapter-read__canvas {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.33, 0, 0, 1);
}
html.is-mobile-static #intro-body.is-shown .chapter-read__canvas {
opacity: 1;
transform: none;
}
}
/* ── '0.' 획 아래끝 ↔ 본문 카드 윗변 = 120px ── (2026-08-30 채린 지정. 130 → 120)
* 시안에서는 57 이었는데, 검은 블록을 418 → 490 으로 72 내리면서 130 으로 잡았다.
* ⚠ 이 값은 **실측으로 맞춘 것**이다. 카드 위 여백이 배지 크기(--cb-badge)와 지면
* 안여백에 함께 걸려 있어 식 하나로 안 떨어진다 —
* '0.' 은 밑선 아래로 살짝 넘치는 글자라(오버슈트), 획 아래끝을 캔버스로 실측해서 맞췄다.
* ⚠ **재는 시점을 조심할 것.** 본문 카드는 등장 전에 translateY(28px) 로 내려가 있어서,
* 그 상태에서 재면 28px 더 크게 나온다. 반드시 `.is-shown` 이 붙은 뒤(다 나온 뒤) 잰다 —
* 실제로 그렇게 한 번 틀렸다(등장 전 120 → 다 나오면 85).
* ⚠ **캔버스로 잴 때는 서체를 먼저 올려 둘 것.** document.fonts.load() 없이 재면
* 대체 글꼴로 재어 값이 27px 씩 튄다(실제로 그렇게 두 번 틀렸다).
* 내력: 뒤 숫자를 56.6(보이는 틈 120) → **120**(보이는 틈 183)으로 키웠다.
* ★ 채린이 부르는 값은 이 **뒤 숫자**다 ★ 보이는 틈이 아니라.
* ⚠ --cb-badge 나 --mc-line2-ink 를 바꾸면 이 값을 **다시 재야 한다.**
* 재는 법: '0.' 을 캔버스에 그려 잉크의 아래끝을 찾고, 카드 윗변(.chapter-read__canvas)
* 과의 거리를 잰다. 식으로는 안 떨어진다. */
@media (max-width: 767px) {
html.is-mobile-static #intro-body {
padding-top: calc(var(--cb-badge) + 10px); /* 2026-08-31 채린 지정 (120 → 10) —
검은 블록을 490 → 580 으로 키워 카드가 90px 밀려난 만큼 여백을 걷었다. */
}
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 Outro 간지 — 시안대로 (2026-08-31 채린 시안 `2.png`)
══════════════════════════════════════════════════════════════════════════
하늘색 면 · 검은 OUTRO · 그 아래 **검은 기호 두 개**.
기호는 **오른쪽에서 미끄러져 들어와 가운데서 멈춘다**(채린 요청).
┌ 시안(390) 실측 ─────────────────────────────────────────────────────
│ 하늘색 면 높이 572
│ OUTRO 획 x 17.3~372.3 · y 45~215.3 (획 높이 170 — 인트로와 같다)
│ 기호 두 개 x 97~284(폭 187) · y 443~531.7(높이 88.7) · 가운데
└──────────────────────────────────────────────────────────────────────
⚠ 기호 SVG 는 `fill: currentColor` 로 칠하고 **테·칸막이는 `--cover-bg` 로 파낸다.**
그래서 색을 바꿀 때 **둘 다** 손봐야 한다 — `color`(기호 색)와 `--cover-bg`(파낸 자리).
`--cover-bg` 를 지면색과 다르게 두면 파낸 자리가 엉뚱한 색으로 드러난다.
⚠ 모바일에서 `.chapter-cover__icons` 는 위쪽 블록이 `display:none` 으로 숨긴다(인트로 기준).
여기서 되살린다.
⚠ `#outro` 는 js/mod-chapter-cover.js 가 `is-in` 을 안 붙인다(그건 #chapter-intro 전용)
— 그래서 지면색은 `--cover-bg-rise`(하늘색)가 그대로 보인다. 그게 시안 색이라 그냥 둔다. */
@media (max-width: 767px) {
html.is-mobile-static #outro {
/* ⚠⚠ **가로 넘침을 반드시 잘라야 한다.** 기호가 등장 전에 `translateX(60vw)` 로
화면 밖에 서 있는데, 그걸 안 자르면 **문서 폭이 624px 이 된다**(실측).
그러면 모바일에서 `position: fixed` 인 프리로더가 그 폭을 따라가 **히어로가 통째로
오른쪽으로 밀린다** — 연표 사진에서 겪은 것과 똑같은 함정이다(css/history.css 참고).
⚠ `hidden` 이 아니라 **`clip`**: hidden 은 스크롤 컨테이너를 만들어 sticky 를 깨뜨린다. */
overflow-x: clip;
/* ★ 2026-09-02 채린 "아웃트로도 동일하게" ★ 하늘색 면 **440**(전 572, 시안값).
인트로 검은 면과 같은 높이다. 기호 자리(--oi-top)도 함께 내려 **밑 여백 20px** 로 맞췄다. */
--mc-black-h: 440;
--cover-bg: #00AAFF; /* ★ 기호에서 파낸 자리 = 지면색 ★ */
/* ★ 기호 ★ 크기·간격·자리 (시안 역산: 폭 187 = 0.75w + gap + 0.833w) */
--oi-size: 104;
--oi-gap: 0; /* 2026-08-31 채린 (23 → 8 → 0). 상자끼리 붙인다 —
그림 자체가 상자 안에서 여백을 갖고 있어 실제로는 살짝 떨어져 보인다. */
/* 기호 상자 위끝. 2026-09-02 채린 — 400 → **281**. 면 바닥에서 20px 만 남기고 붙인다
(기호 상자 높이 139 = --oi-size 104 × 64/48. 281 + 139 = 420, 면 끝 440).
⚠ 면 높이(--mc-black-h)를 바꾸면 이 값도 같은 만큼 옮겨야 밑 여백이 유지된다. */
--oi-top: 281;
--oi-from: 60vw; /* 오른쪽에서 들어오는 거리 */
}
/* ── 기호 두 개 ── 되살리고, 가운데에 세운다 */
html.is-mobile-static #outro .chapter-cover__icons {
display: flex;
position: absolute;
left: 0;
right: 0;
top: calc(var(--oi-top) * var(--m));
justify-content: center;
align-items: flex-start;
gap: calc(var(--oi-gap) * var(--m));
color: #000; /* ★ 기호 색 ★ (2026-08-31 채린 "아이콘도 검정색으로") */
/* ★ 오른쪽에서 들어와 가운데서 멈춘다 ★
⚠ `is-shown` 은 js/mod-chapter-cover.js 가 이 요소가 화면에 들어올 때 붙인다.
한 번 붙으면 안 뗀다 — 지나친 뒤 되돌아가면 오류로 읽힌다(다른 연출과 같은 판단). */
transform: translateX(var(--oi-from));
opacity: 0;
/* 중간에 한 번 걸렸다 넘어간다 — 인트로 '0.' 과 같은 곡선(위 주석 참고) */
transition:
transform 0.62s linear(0, 0.78 8%, 0.95 18%, 0.955 52%, 1),
opacity 0.6s ease;
}
html.is-mobile-static #outro .chapter-cover__icons.is-shown {
transform: none;
opacity: 1;
}
/* 기호 하나의 크기 — 위쪽 규칙은 큰 글자 크기에 비례시키는데, 여기서는 시안 값을 직접 준다 */
html.is-mobile-static #outro .chapter-cover__icon {
width: calc(var(--oi-size) * var(--m));
height: auto;
}
html.is-mobile-static #outro .chapter-cover__icon + .chapter-cover__icon {
margin-left: 0; /* 간격은 위 flex 의 gap 이 잡는다 */
}
}