/* 부자열전 — 신문·경제지 지면 + 큰 초상 (docs/DESIGN.md 8절에서 확정). 정본은 `scripts/make_mockups.py` 의 `4-hybrid` 목업이다. 색·간격을 바꾸면 목업도 같이 고친다. 모바일 1단이 기본이고 넓은 화면에서 단(段)이 늘어난다. */ :root { --paper: #f2efe7; /* 종이 */ --ink: #202020; /* 먹 */ --mut: #6b6659; /* 캡션·보조 */ --sub: #5c5850; /* 본문 보조 */ --line: #ddd6c6; /* 가는 괘선 */ --rule: #cdc6b6; /* 굵은 구분 */ --accent:#8a3f32; /* 적갈 — 이 사이트의 유일한 포인트색 */ --title: "Gowun Batang", "Nanum Myeongjo", serif; --body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --gutter: 20px; /* famousbros 공용 부품(fb.css) 값 — 기존 토큰을 가리킨다(G:\workspace\DESIGN.md '토큰'). 라이트 전용(다크 없음). 실측(2026-10-16, WCAG): --ink 종이 위 14.18 · --mut 종이 위 4.98 · 종이색 글자 on --accent 6.44. */ --fb-bg: var(--paper); --fb-surface: var(--paper); --fb-ink: var(--ink); --fb-muted: var(--mut); --fb-line: var(--line); --fb-accent: var(--accent); --fb-on-accent: var(--paper); --fb-display: var(--title); --fb-max: 900px; /* .pg 와 같은 폭 */ } * { box-sizing: border-box; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.85 var(--body); word-break: keep-all; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* 키보드 포커스 — 이 사이트에는 링이 없었다(hover 색만 바뀌어 위치를 못 찾는다). --accent 는 종이 바탕에서 6.44 로 그래픽 3:1 을 넘는다(새 색이 아니라 포인트색 재사용). */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } p, ul, ol, h1, h2, h3, h4 { margin: 0; } h1, h2, h3 { font-family: var(--title); line-height: 1.3; } /* 본문 폭. 공개 쪽
은 클래스 없이 둔다 — export_app_pages 조각이 '
' 으로 시작해야 한다(test_app_api). */ .pg, body > main { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter) 72px; } /* ── 머리 — 틀은 fb.css 의 .fb-nav(떠 있는 유리 막대, 폰에서는 링크가 아래 탭바) ── 2026-10-16 디자인 v2 전의 지면 제호(.mast, 전 쪽 h1)는 로고로 바꿨다. 그래서 인물·일화·인물 목록은 자기 제목이 h1 이다(전에는 h2·h3 였다). 제호의 자간(.22em)만 로고에 남긴다. */ .fb-nav__logo { font-family: var(--title); letter-spacing: .12em; } .fb-foot .fb-nav__logo { color: var(--ink); } /* ── 1면 머리기사 ───────────────────────────── */ .lead { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; padding: 30px 0; border-bottom: 1px solid var(--rule); } .lead h2 { font: 700 38px/1.28 var(--title); margin-bottom: 12px; letter-spacing: -.01em; } .lead h2 a:hover { color: var(--accent); } .lead p { color: #3d3a33; } .kicker { font: 600 11px/1 var(--body); letter-spacing: .2em; color: var(--accent); margin-bottom: 14px; } /* hybrid — 지면은 그대로 두고 초상만 키운다 */ .lead--big { grid-template-columns: 1fr 1.05fr; align-items: center; padding: 38px 0; } .lead--big h2 { font-size: 44px; } /* ── 인물 사진 ──────────────────────────────── */ .pic { margin: 0; } .pic img { filter: grayscale(1) contrast(1.06); border: 1px solid var(--rule); width: 100%; } .lead--big .pic img, .hub--big .pic img { aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%; } .pic__none { aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; background: #e6e0d2; border: 1px solid var(--rule); font: 700 46px/1 var(--title); color: var(--accent); } /* 저작자·라이선스 표기는 선택이 아니다 — CC BY 계열의 이용 조건이다. */ .cap { font-size: 11px; line-height: 1.5; color: var(--mut); margin-top: 6px; padding-left: 8px; border-left: 2px solid var(--accent); } /* ── 단 제목 ────────────────────────────────── */ .colhead { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 0; border-bottom: 1px solid var(--ink); padding-bottom: 6px; } .colhead h1, .colhead h3 { font: 700 14px/1 var(--body); letter-spacing: .2em; } .colhead span { font-size: 11px; color: var(--mut); margin-left: auto; } .colhead a:hover { color: var(--accent); } /* ── 일화 목록 ──────────────────────────────── */ .rows { list-style: none; padding: 0; } .rows li { display: grid; grid-template-columns: 52px 1fr 92px; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); position: relative; } .rows .n { font: 700 15px/1.3 var(--title); color: var(--accent); letter-spacing: .04em; } .rows .t { font: 700 19px/1.5 var(--title); } .rows .t:hover { color: var(--accent); } /* 줄 전체가 링크다(UIUX.md Fitts). HTML 을 바꾸지 않고 제목 앵커를 줄 위에 겹쳐 펼친다 — 앵커의 박스를 키우지 않으므로 grid 의 baseline 정렬이 그대로 남는다. 줄 안에 다른 링크·버튼이 생기면 그것들에 position: relative 를 줘서 겹침 위로 올린다. */ .rows .t::after { content: ""; position: absolute; inset: 0; } .rows .h { display: block; font: 400 13.5px/1.6 var(--body); color: var(--sub); margin-top: 2px; } /* 사실성 배지 — 색이 아니라 글자가 먼저 읽혀야 한다(색맹 접근성). */ .rows .v { font: 500 11px/1.5 var(--body); color: var(--accent); letter-spacing: .06em; text-align: right; } /* ── 인물 목록 ──────────────────────────────── */ .people { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); margin-top: 34px; } .people > div { padding: 16px 14px; border-right: 1px solid var(--line); } .people > div:last-child { border-right: 0; } .people img, .people .pic__none { filter: grayscale(1) contrast(1.06); aspect-ratio: 3/4; object-fit: cover; object-position: top; border: 1px solid var(--rule); margin-bottom: 10px; } .people b { display: block; font: 700 17px/1.3 var(--title); } .people a:hover b { color: var(--accent); } .people small { display: block; font-size: 11.5px; color: var(--mut); margin-top: 3px; line-height: 1.55; } .filter { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 0; font-size: 13px; color: var(--mut); border-bottom: 1px solid var(--line); } /* 나라·시대 필터는 탭이다 — 글자 높이(24px)만으로는 폰에서 못 누른다. */ .filter a { display: inline-flex; align-items: center; min-height: 44px; } .filter a:hover { color: var(--accent); } .filter a.on { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); } /* ── 인물 허브 ──────────────────────────────── */ .hub { display: grid; grid-template-columns: 230px 1fr; gap: 38px; padding: 30px 0; border-bottom: 1px solid var(--rule); } .hub h1 { font: 700 34px/1.3 var(--title); margin-bottom: 6px; } .hub .who { font-size: 12px; letter-spacing: .14em; color: var(--accent); margin-bottom: 14px; } .hub p { color: #3d3a33; } .hub--big { grid-template-columns: 440px 1fr; align-items: center; gap: 46px; padding: 38px 0; } .hub--big h1 { font-size: 42px; } /* ── 일화 본문 ──────────────────────────────── */ .art { padding: 30px 0 4px; } .art h1 { font: 700 40px/1.26 var(--title); margin-bottom: 10px; max-width: 22ch; } .art .dek { font: 400 18px/1.7 var(--title); color: var(--sub); margin-bottom: 18px; max-width: 46ch; } .art .by { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11.5px; letter-spacing: .1em; color: var(--mut); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 8px 0; } .art .by .v { color: var(--accent); font-weight: 600; } .art .by a:hover { color: var(--accent); } .body { column-count: 2; column-gap: 34px; margin-top: 22px; } .body p { margin-bottom: 14px; } /* ⚠️ 드롭캡(::first-letter)을 쓰지 않는다. 본문이 숫자로 시작하면 첫 글자를 떼어내 "1971년 …" 이 "971년 …" 으로 읽힌다(2026-09-16 거북선 일화에서 실제로 그랬다). 연도가 틀려 보이는 것은 이 사이트에서 가장 피해야 할 오류라 첫 문단을 키우는 것으로 대신한다. */ .body p:first-child { font-size: 17.5px; line-height: 1.8; } .srcs { margin-top: 26px; border-top: 1px solid var(--ink); padding-top: 12px; } .srcs h4 { font: 600 11px/1 var(--body); letter-spacing: .2em; margin-bottom: 10px; } .srcs ol { padding-left: 18px; font-size: 13px; color: var(--sub); } .srcs li { margin-bottom: 4px; } .srcs a { border-bottom: 1px solid var(--line); } .srcs a:hover { color: var(--accent); } .srcs span { color: var(--accent); } /* ── 일화 영상 ──────────────────────────────── */ /* 영상이 없으면 이 블록 자체가 나오지 않는다(_video.html). 지면 톤을 깨지 않게 괘선만 쓴다. */ .vid { margin: 22px 0 6px; border-top: 1px solid var(--ink); padding-top: 16px; } .vid video { width: 100%; max-width: 420px; background: #000; border: 1px solid var(--rule); } /* 🔥 유튜브 경로(`.vid__yt`)에는 규칙이 아예 없어서 iframe 이 **기본 300×150** 으로 나왔다 (2026-09-30). 자체