/* ===== H7 HYBRID — dark canvas + lime accent ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0B0B0E; --bg-elev: #15151A; --bg-elev-hi: #1C1C22; --fg: #F2F2F5; --muted: #B5B5BC; --subtle: #8E8E96; --border: rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16); --accent: #C9F23A; --accent-hover: #B5DE2C; --accent-fg: #0B0B0E; --danger: #FF7A8A; --success: #6FE3A2; /* ★--warn 은 «쓰이고 있었는데 정의가 없었다» — .legal-empty-title 과 .dl-msg-warn 이 var(--warn) 을 부르지만 값이 없어 «그냥 물려받은 색»으로 떠 있었다(경고로 안 보인다). 짝인 테두리 rgba(255,209,102,…) 가 원래 의도한 색을 그대로 말해준다 → #FFD166. */ --warn: #FFD166; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --width: 680px; --radius: 10px; /* ── 타이포 스케일 ────────────────────────────────────────── px 를 흩뿌리지 않고 여기서만 정의해 다른 페이지도 같은 축을 쓰게 한다. ★2026-08-07 척도 교체. 이전 축(본문 15 / 눈꺼풀 11 / 최솟값 8)은 «이뻐 보이지만 안 읽힌다»는 지적을 받았다. 실제로 12px 미만이 40곳 넘게 깔려 있었다. 코덱스(openai.com/codex) 실측값을 축으로 삼는다: H1 64 · H2 48 · H3 30 · 리드 22 · 본문 17 · 보조 15 · 캡션 14(최솟값) ★14px 가 바닥이다. 법적 고지·푸터도 예외 없다 — 읽으라고 있는 글이다. */ --fs-hero: clamp(40px, 6vw, 64px); /* 페이지 제목 */ --fs-h2: clamp(32px, 4.4vw, 48px); /* 섹션 제목 */ --fs-h3: clamp(24px, 2.6vw, 30px); /* 구간 소제목 */ --fs-lead: 22px; /* 태그라인·리드 */ --fs-body: 17px; /* 본문 */ --fs-sm: 15px; /* 보조 설명 */ --fs-xs: 14px; /* 캡션·눈꺼풀 라벨 — 바닥 */ /* 읽는 축(폭). 섹션마다 다르면 스크롤할 때 좌우로 흔들린다 */ --read: 720px; /* 넓은 축 — 큰 시각물(영상·스크린샷)과 카드 격자가 쓴다 */ --wide: 1040px; --sp-section: 84px; /* 구간 사이 여백 — 리듬을 여기 하나로 모은다 */ } html { scroll-behavior: smooth; background: var(--bg); font-size: 100%; } /* ★body 에 본문 크기를 «명시»한다. 전에는 html 이 80%(=12.8px)라 클래스가 안 붙은 글자(버튼·b·설명 없는 p)가 전부 12.8px 로 떨어졌다. 토큰을 아무리 올려도 그 글자들은 안 따라온다 — 바닥을 여기서 세운다. */ /* ★word-break: keep-all — 한글은 기본값이 «아무 글자 사이에서나» 줄바꿈이라 「예시예요」가 「예시예 / 요」로 잘린다. 어절(띄어쓰기) 단위로만 끊게 한다. 대신 끊을 데가 없는 긴 문자열(URL·이메일)은 overflow-wrap 으로 받아준다. */ body { background: var(--bg); color: var(--fg); font-family: var(--font); -webkit-font-smoothing: antialiased; font-size: var(--fs-body); line-height: 1.6; text-align: center; word-break: keep-all; overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: var(--accent-fg); } /* ===== NAV ===== */ header { position: sticky; top: 0; z-index: 100; background: rgba(11,11,14,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* ★`nav` 가 아니라 `header nav` 다 — 고디터 전용 내비도