라 위의 `html.is-mobile-static #intro-body p { font-size: 18px }` 가 우선순위로 이겨 인트로 카드만 18px/30px 로 커져 있었다(2026-08-31 채린 지적 "part1 과 동일하게"). 출처 줄·인용문에서 똑같이 당한 함정이다 — 이 지면에서
속성을 바꿀 땐 항상 여기부터 볼 것.
(0,3,0) < (1,1,2) 이지만 (1,2,1) 은 이긴다. */
html.is-mobile-static .article__meta,
html.is-mobile-static #intro-body .article__meta {
font-size: 15px;
letter-spacing: -0.04em;
/* ★ 머리줄 ~ 지면 제목 사이 ★ (2026-08-31 채린 지정. 80 → 60px. 데스크톱은 80 그대로)
⚠ 이 한 줄이 **다섯 지면 전부**를 움직인다(인트로 카드 "기업의 오늘을 금융에 담다" ·
파트 I~III 본문 제목). 한 지면만 바꾸려면 #intro-body 등으로 스코프할 것. */
margin: 0 0 60px;
line-height: 1.5; /* 15 × 1.5 = 22.5px — 파트 지면과 같은 값 */
}
/* ★ 연혁 머리글(= 파트 II 본문)의 제목도 파트 지면과 같은 값 ★ (2026-08-31 채린 "겁나 커")
⚠ `#history-intro .article__heading` 이 css/stage/article.css 에서 **id 로** 48px 을 주고
있어(모바일 min(13vw,48px)) 아래 클래스 규칙(0-3-1)으로는 못 이긴다. id 를 함께 적어
(1-3-1) 로 올려야 먹는다. 데스크톱 30px 은 그대로다. */
html.is-mobile-static #history-intro .article__heading {
font-size: 24px;
line-height: 30px;
margin-bottom: 16px; /* 2026-09-01 채린 — 파트 지면과 같은 값 */
}
/* ── 지면 제목 ──────────────────────────────────────────────────── */
html.is-mobile-static .article--card .article__title,
html.is-mobile-static .article--card .article__heading {
font-size: 24px;
letter-spacing: -0.01em;
word-break: normal;
}
/* ★ 제목·소제목 아래 틈은 **16px 로 통일** ★ (2026-09-01 채린)
내력: 제목 20 · 소제목 24 로 갈려 있던 것 → 20 으로 통일 → **16px**.
⚠ 소제목 **위** 여백(60px)은 그대로다 — 그건 앞 문단과의 사이라 뜻이 다르다.
⚠ 인트로 지면(#intro-body)은 손대지 않았다(채린 "제목 크기가 다르니 현행 유지").
⚠ 연혁 항목 제목(#history 안 h3)은 21px 로 따로 논다 — 연표 컴포넌트라 여기 규칙이 안 닿는다. */
html.is-mobile-static .article--card .article__title { line-height: 1.25; margin: 0 0 16px; }
html.is-mobile-static .article--card .article__heading { line-height: 1.4; margin: 60px 0 16px; }
/* 인트로 지면의 큰 제목은 구조가 달라 따로 적는다.
⚠ **부모 블록에도 같이 줘야 한다.** 제목이 인라인 이라 줄 간격을 span 에만 주면
부모 블록의 기준 줄높이(strut)가 최소값으로 버텨 안 좁혀진다
(실측: span 41.6px 인데 부모 61.6px 에 밀려 줄 사이가 61.6 으로 남았다). */
html.is-mobile-static .chapter-read__top,
html.is-mobile-static .chapter-read__chapter {
font-size: 32px;
line-height: 1.3;
word-break: normal;
}
/* ── 본문 글 ── 다섯 지면이 반드시 같은 값이어야 한다 ─────────────── */
html.is-mobile-static #intro-body p,
html.is-mobile-static .article--card .article__body {
font-size: 18px;
line-height: 30px;
letter-spacing: normal;
text-align: start;
max-width: none;
/* ⚠ 인트로 지면에는 원래 keep-all 이 박혀 있다(css/chapter-cover.css). 그래서 덮는다. */
word-break: normal;
/* ★★★ 오른쪽이 남던 진짜 원인 ★★★ (2026-08-31, 폰에서 사본 대조로 잡음)
* css/base.css 에 **`p { text-wrap: pretty }`** 가 전역으로 걸려 있다.
* `pretty` 는 "마지막 줄에 한두 글자만 남는 걸 피하려고 **앞줄들을 일부러 짧게** 만드는"
* 속성이다. 사파리 17.5+ 가 이걸 듣는데, **크롬은 한글에서 거의 티가 안 난다.**
* 그래서 크롬에서는 멀쩡하고 아이폰에서만 오른쪽이 24~44px 씩 남았다.
* 폰 실측 — 같은 문장·같은 315px 칸:
* text-wrap 물려받음 : 첫줄 287 (여백 28)
* 사본(all:initial) : 첫줄 307 (여백 12)
* ⚠ word-break 를 아무리 바꿔도 안 변했던 이유가 이것이다. 범인이 다른 속성이었다.
* ⚠ 데스크톱은 그대로 둔다 — 넓은 칸에서는 pretty 가 오히려 보기 좋다. */
text-wrap: wrap;
}
/* ── 인용문 형광펜 ──
실측: 안여백 3px 이면 띠 26px · 줄 간 25px 이라 1px 겹쳤다. 2px 이면 띠 24px → 1px 틈. */
html.is-mobile-static .article__mark,
html.is-mobile-static .chapter-read__mark {
padding: 2px 0;
}
/* ── 인용문 아래 출처 줄 (회색 글자) ── 16px (2026-08-31 채린 지정)
⚠ 두 부품이 클래스 이름이 다르다 — 둘 다 적어야 다섯 지면이 같아진다.
⚠⚠ **`#intro-body` 를 앞에 붙여야 한다.** 위의 본문 규칙이
`html.is-mobile-static #intro-body p { font-size: 18px }` 인데 **출처 줄도 ** 라,
id 가 든 그 규칙이 우선순위에서 이겨 16px 을 덮어 버린다(실제로 그래서 안 먹었다).
같은 이유로 인용문 본문(.chapter-read__quote)도 여기서 크기를 정한다. */
html.is-mobile-static #intro-body .chapter-read__source,
html.is-mobile-static .article--card .article__source2 {
font-size: 15px; /* 2026-08-31 채린 지정 (18 → 16 → 15) */
/* ★ 자간 ★ (2026-09-01 채린 "-0.01 로 통일")
⚠ **여기에도 적어야 한다.** 아래 본문 규칙의 `letter-spacing: normal` 이
출처 줄( )까지 잡아서, 데스크톱 값이 모바일에서만 풀린다.
크기(15px)·행간이 안 먹던 것과 똑같은 이유다. */
letter-spacing: -0.01em;
/* ★ 행간 ★ (2026-08-31 채린 지정 1.5 → 1.2 → 1.3)
⚠ 여기에도 적어야 한다. 위 본문 규칙의 `line-height: 30px` 이 **출처 줄( )까지**
잡아서, css/chapter-cover.css 의 1.2 가 모바일에서만 안 먹었다(채린 지적).
크기(16px)가 안 먹던 것과 똑같은 이유다. */
line-height: 1.3;
}
/* 인용문 본문은 본문과 같은 18px/30px 을 유지한다(위 규칙에 덮이지 않게 명시).
⚠ **행간도 함께 적어야 한다.** 크기만 적었더니 `.article--card .article__quote2` 의
`line-height: 1.47`(= 26.46px)이 그대로 남아, 파트 III·아웃트로만 줄이 좁았다.
그러면 **형광펜 띠가 서로 붙어 통짜로 보인다** — 인트로(30px)는 줄마다 4px 틈이 있어
띠가 따로 보이는데, 그 차이를 채린이 "형광펜이 인트로랑 다르다"로 읽었다(2026-08-31).
형광펜 **색**은 세 곳 모두 원래 같다: rgba(0,122,255,0.2). */
html.is-mobile-static #intro-body .chapter-read__quote,
html.is-mobile-static .article--card .article__quote2 {
font-size: 18px;
line-height: 30px;
/* ★ 자간 ★ (2026-09-01 채린 "-0.01 로 통일") — 위 출처 줄과 같은 이유로 여기에도 적는다.
그전에는 인트로 인용문만 모바일에서 normal 로 풀려 파트 지면과 달랐다. */
letter-spacing: -0.01em;
}
}
/* ⚠⚠ **숨겨진
은 띄어쓰기를 남기지 않는다** (2026-08-31 채린 "제안하는 (띄어쓰기)")
* `display:none` 은 줄바꿈만 없앨 뿐이라 앞뒤 낱말이 **그대로 붙는다**
* ("제안하는최고의", "기업의 오늘을금융에 담다"). 그래서 마크업에서 **br 앞에 공백을 하나 둔다** —
* `
`. br 이 보일 때는 줄 끝 공백이라 눈에 안 띄고, 숨을 때는 띄어쓰기가 된다.
* ⚠ 예외: 프리로더 제목 `DJ
Bank` 는 **공백이 있으면 안 된다**
* (붙여 쓴 "DJBank" 가 제목이다 — 공백을 넣으면 폭이 넓어져 --len 도 다시 잡아야 한다).
*
* ── 데스크톱에서만 줄을 끊는
── (2026-08-31)
* `
` 는 폰에서 사라진다. 한 문장에 데스크톱용·모바일용 줄바꿈이
* **따로** 필요할 때 br-mobile 과 짝으로 쓴다 (파트 III 본문 "AI CFO…" 소제목).
* ⚠ 짝으로 쓸 때 둘 다 보이면 세 줄이 된다 — 반드시 이 규칙과 함께 둘 것. */
.br-desktop { display: inline; }
@media (max-width: 767px) {
.br-desktop { display: none; }
}
/* ── 아주 좁은 폰(≤359px)에서만 줄을 끊는
── (2026-09-01 채린 "아래는 320 버전에서만")
* 320 짜리 화면에서 제목이 어색하게 접히는 자리를 손으로 잡아 준다.
* ⚠ 경계는 **359px** 이다 — 360·375·390 은 영향을 안 받는다.
* ⚠ 다른 br 들과 같은 규칙: **br 앞에 공백을 하나 둔다.** 숨은 br 은 띄어쓰기를 안 남긴다. */
.br-320 { display: none; }
@media (max-width: 359px) {
.br-320 { display: inline; }
}
/* ── 모바일에서만 줄을 끊는
──
* 마크업에 `
` 를 넣으면 모바일에서만 줄이 바뀐다.
* 쓰는 곳: 인트로 제목, Part I 소제목, Part I 간지 문구. */
.br-mobile { display: none; }
@media (max-width: 767px) {
.br-mobile { display: inline; }
}
/* ── 파트 I 본문 지면 배경이 스크롤을 따라 점점 물든다 ── (2026-08-31 채린 요청, 모바일만)
* 카드 **바깥** 지면 색이 회색(--cb-page #efefef) → **#ddf4ff**. 카드 자신은 흰색 그대로.
* 색은 js/mod-bgwash.js 가 `--wash-bg` 에 넣는다 — 스크롤 위치에 매여 있고 되감긴다.
* ★ 값(구간·색)을 고치는 곳은 그 파일의 TARGETS 다 ★
* ⚠ **transition 을 주면 안 된다** — 매 프레임 값이 바뀌어 스크롤을 못 따라온다.
* ⚠ 폴백을 꼭 남길 것 — JS 가 안 돌면 원래 회색이어야 한다.
* 내력: 카드 진입(is-inview) 0.7s → 소제목(tr-in) 1.8s → 스크롤 연동(지금). */
@media (max-width: 767px) {
/* ⚠ `background-color` 를 직접 주면 안 된다 — 카드 위 **배지 판**도 지면색을 봐야 한다
(배지 판은 위 절반이 --cb-page, 아래 절반이 흰색이라 두 배경에 각각 묻힌다).
직접 칠하면 판의 위 절반만 회색으로 남아 띠가 드러난다. 토큰을 바꾸면 둘 다 따라온다. */
#part-1-body {
--cb-page: var(--wash-bg, #efefef);
}
}
/* ── 파트 I 본문 배지 — **동전으로 원복** ── (2026-08-31 채린)
* 잠깐 노트북 그림(채린이 준 JPG)을 넣었다가 되돌렸다. 다시 쓰려면 아래 두 줄을 살리면 된다.
* 파일은 지우지 않고 남겨 뒀다: `assets/img/card-badge-part1.png` (240×240 투명).
* #part-1-body { --cb-badge-img: url("../assets/img/card-badge-part1.png?v=260918-1124"); }
* ★ 배지를 지면마다 다르게 주는 장치(--cb-badge-img)는 그대로 살아 있다 ★
* 다른 지면에 쓰려면 그 섹션에 한 줄만 선언하면 된다. 아무것도 안 주면 기본값(동전)이다. */
/* ── 파트 II 본문(#history-intro)의 6년 연표 도해 위 여백 ── (2026-08-31 채린 지정, 모바일만)
* 데스크톱은 css/stage/article.css 의 `#history-intro .article__figure { margin: 80px 0 0 }` 그대로.
* ⚠ 그 규칙이 id 를 갖고 있어(1-1-0) 클래스만으로는 못 이긴다 —
* `html.is-mobile-static` 를 앞에 붙여 (1-3-1) 로 올린다.
* ⚠ 아래가 0 인 이유는 그쪽 주석에 있다(도해 이미지 자체가 아래 빈칸을 갖고 있다). */
@media (max-width: 767px) {
html.is-mobile-static #history-intro .article__figure {
margin: 30px 0 0;
}
}
/* ── 사진 캡션(figcaption) 행간 ── (2026-08-31 채린 지정 1.4, 모바일만)
* 두 부품이 클래스가 다르다 — 본문 사진(.article__figure)과 연표 사진 쌍(.tl-pair).
* 둘 다 적어야 지면마다 캡션이 갈리지 않는다(출처 줄에서 겪은 것과 같은 이유).
* 데스크톱은 그대로다 — 본문 1.6 · 연표 1.5. */
@media (max-width: 767px) {
.article__figure figcaption,
.tl-pair figcaption {
line-height: 1.4;
}
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 — `text-wrap: pretty` 를 전 지면에서 끈다 (2026-08-31)
══════════════════════════════════════════════════════════════════════════
css/base.css 의 전역 `p { text-wrap: pretty }` 가 범인이다.
`pretty` 는 "마지막 줄에 한두 글자만 남는 걸 피하려고 **앞줄들을 일부러 짧게**" 만든다.
**사파리 17.5+ 는 강하게 듣고 크롬은 한글에서 거의 티가 안 난다** —
그래서 데스크톱 크롬은 멀쩡한데 아이폰에서만 오른쪽이 24~44px 씩 남는다.
⚠⚠ **word-break 를 아무리 바꿔도 안 변한다. 범인이 이 속성이다.**
2026-08-31 하루에 같은 걸 세 번 헤맸다 — 본문 지면 → 연혁 → 나머지 전부.
그래서 지면마다 따로 끄지 말고 **여기서 한 번에** 끈다. 새 지면이 생겨도 자동으로 걸린다.
⚠ 데스크톱은 그대로 둔다 — 넓은 칸에서는 pretty 가 오히려 보기 좋다. */
@media (max-width: 767px) {
p, h1, h2, h3, h4, h5, h6, figcaption, blockquote, li, dd {
text-wrap: wrap;
}
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 — 본문 그림 모서리 라운드 **10px** (2026-09-02 채린 "모바일은 이미지에 라운드 값 10정도")
══════════════════════════════════════════════════════════════════════════
데스크톱은 css/stage/article.css 의 `.article__figure img { border-radius: 4px }` 그대로다.
걸리는 그림 넷: 파트 I 도해 · 6년 연표 도해 · 파트 III 본문 사진 · 아웃트로 사진.
⚠ **배경으로 깔리는 사진은 일부러 뺐다** — 간지 사진(.partcover__bg / .partcover__figure)과
연표 배경 사진(.timeline__img)은 화면을 꽉 채우거나 화면 밖으로 물려 있어서,
모서리를 굴리면 잘린 자리에 둥근 귀퉁이가 떠 어색하다.
★ 여기에 더 넣으려면 ★ 연표 사진 짝(.tl-pair img)과 흐름에 놓인 사진
(`#history [data-media-place="below"] .timeline__img`)이 다음 후보다 — 둘 다 흐름 안의 그림이다. */
@media (max-width: 767px) {
html.is-mobile-static .article__figure img {
border-radius: 10px;
}
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 — 인트로 본문 끝 도해만 **카드 테두리에서 좌우 10px** (2026-09-02 채린)
══════════════════════════════════════════════════════════════════════════
이 지면의 다른 그림들은 그대로다(좌우 안여백 16px 안).
★ 조절하는 곳 ★ --cb-fig-inset (카드 **테두리 안쪽면에서** 그림까지의 거리)
0 이면 테두리에 딱 붙고, 16 이면 본문 문단과 같은 줄에 선다.
⚠ 계산은 카드의 좌우 안여백(--cb-pad-x)을 **음수 마진으로 되돌리는** 방식이다 —
그 값을 바꾸면 여기도 저절로 따라온다. 숫자를 두 곳에 따로 적지 말 것.
⚠ **카드 테두리(1px #111) 밖으로는 안 나간다.** 화면 끝까지 빼면 그 선을 덮어 카드가 깨져 보인다.
⚠ **라운드는 여기서 손대지 않는다** — 위쪽 `html.is-mobile-static .article__figure img` 의
**10px** 을 그대로 쓴다(모바일 본문 그림 공통). 내력: 10 → 0("라운드 값 없이") → **10 되돌림**.
각지게 하려면 여기에 `img { border-radius: 0 }` 을 다시 넣는다 — 라운드는 figure 가 아니라
**img** 에 줘야 한다(figure 에 주면 안쪽 img 가 그대로 둥글다). */
@media (max-width: 767px) {
html.is-mobile-static #intro-body .article__figure {
--cb-fig-inset: 10px;
margin-left: calc(var(--cb-fig-inset) - var(--cb-pad-x, 16px));
margin-right: calc(var(--cb-fig-inset) - var(--cb-pad-x, 16px));
}
}
/* ══════════════════════════════════════════════════════════════════════════
모바일 — 본문 그림이 **스크롤을 따라 스르륵** 나온다 (2026-09-02 채린)
══════════════════════════════════════════════════════════════════════════
연혁 글에 쓴 것과 같은 방식이다 — 값(`--fig-in` 0~1)을 js/mod-figure-in.js 가 매 프레임 넣고,
여기서는 그 값을 opacity 와 올라오는 거리로만 쓴다. **시간이 아니라 스크롤이 속도**다.
걸리는 그림 여섯: 인트로 끝 도해 · 파트 I 도해 · 6년 연표 도해 · 파트 III 본문 사진 ·
파트 III 끝 AI CFO 도해 · 아웃트로 사진.
⚠ **transition 을 주면 안 된다** — 매 프레임 값이 바뀌는데 전환까지 걸면 늘 뒤처져 늘어진다.
⚠ 기본값이 **1** 이라 스크립트가 죽어도 그림은 그냥 보인다. (숨기는 쪽을 JS 에 매지 않는다.)
⚠ 그림 자체(`img`)가 아니라 **figure** 에 준다 — img 에 주면 인트로 도해처럼 좌우로 펼친
음수 마진과 섞여 자리가 흔들린다.
⚠ 데스크톱은 그대로다(카드 자체의 등장 mod-reveal 만 쓴다).
★ 조절 ★ 올라오는 거리는 --fig-rise, 뜨는 구간은 js/mod-figure-in.js 의 FROM/TO. */
@media (max-width: 767px) {
html.is-mobile-static .article__figure {
--fig-rise: 16px;
opacity: var(--fig-in, 1);
translate: 0 calc((1 - var(--fig-in, 1)) * var(--fig-rise));
transition: none;
}
/* 움직임을 줄이는 설정이면 그냥 놓인 그림으로 둔다. */
@media (prefers-reduced-motion: reduce) {
html.is-mobile-static .article__figure {
opacity: 1;
translate: none;
}
}
}