/* ===================================================================== blog-theme.css — Lucky Blog 공용 디자인 토큰 (라이트 종이/매거진) --------------------------------------------------------------------- 목적: 블로그(인덱스 + 개별 글 + chrome)의 색·타이포·간격을 한 파일에 모아 "한 사이트로 보이는" 일관된 읽기 경험을 만든다. 게임(홈)의 우주· 네온 다크 테마와는 의도적으로 분리된 "Read" 모드. 설계 기준 (사용자 요청: "세련되고 전세계 남녀노소가 편하게") - 라이트 베이스: 웜 오프화이트 종이 톤. 신문·매거진처럼 눈이 편하고 국적·연령 불문 신뢰감. (앤트로픽 시리즈의 베이지 책 테마를 정제·승격) - 차분한 잉크 액센트: 네온 대신 딥 그린·블루. 카테고리 색은 라이트 배경에서 텍스트로 읽히는 어두운 톤으로 재조정. - 제목 serif + 본문 sans: 권위 있는 헤드라인 + 가독성 높은 본문. - measure 70~75자: 장문 분석 글이 편하게 읽히는 단 폭. 사용법 - 토큰(변수)만 정의한다. 컴포넌트 규칙은 각 페이지/override 시트에서 이 변수를 var() 로 참조한다. (daily.css 가 :root 를 덮는 패턴과 동일) - 색을 바꾸려면 이 파일의 변수 한 곳만 고치면 전 페이지에 반영된다. - 다크모드: 라이트가 기본. prefers-color-scheme:dark 일 때 surface/ink 계열만 뒤집어 자동 대응(액센트 색조는 유지). color-scheme inject 로 light 고정된 글에는 영향 없음. ===================================================================== */ :root { /* ---------- 표면 (밝은 → 어두운) ---------- */ --lb-bg: #FBFAF6; /* 페이지 배경 — 웜 오프화이트 */ --lb-surface: #FFFFFF; /* 카드·인용 박스 배경 */ --lb-surface-2: #F4F1E9; /* 보조 표면(테이블 헤더·사이드바) */ --lb-tint: #F7F4EC; /* 강조 박스 옅은 종이 틴트 */ /* ---------- 텍스트 (진한 → 옅은) ---------- */ --lb-ink: #20242B; /* 본문 — 부드러운 near-black */ --lb-ink-soft: #434A54; /* 부제·리드 */ --lb-ink-dim: #6B727D; /* 메타·캡션·출처 */ --lb-ink-faint: #99A0AB; /* 비활성·플레이스홀더 */ /* ---------- 선 ---------- */ --lb-line: #E7E2D6; /* 기본 구분선·hairline */ --lb-line-soft: #EFEADF; /* 옅은 구분선 */ --lb-line-strong: #D8D2C4; /* 강조 테두리 */ /* ---------- 액센트 (차분한 잉크 톤) ---------- */ --lb-accent: #1A6E55; /* 메인 — 딥 그린(차분·신뢰). CTA·읽기링크 */ --lb-accent-ink: #12503D; /* 액센트 텍스트(짙은) */ --lb-accent-soft: #E5F0EA; /* 액센트 옅은 배경 */ --lb-link: #185FA5; /* 본문 인라인 링크 — 클래식 블루 */ --lb-link-hover: #0C447C; /* ---------- 타이포 ---------- */ /* 제목: serif — 권위 있는 헤드라인. 본문: sans — 다국어 가독성. */ --lb-serif: 'Noto Serif KR','Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif; --lb-sans: -apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard Variable','Pretendard','Inter','Noto Sans KR','Noto Sans JP','Noto Sans SC',sans-serif; --lb-mono: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* 본문 리듬 */ --lb-fs-body: 16.5px; /* 본문 기본 크기 */ --lb-lh-body: 1.78; /* 본문 행간 */ --lb-measure: 720px; /* 단 최대 폭(읽기 영역) */ /* ---------- 반경 ---------- */ --lb-r-sm: 8px; --lb-r-md: 12px; --lb-r-lg: 16px; /* ---------- 카테고리 색 (라이트 배경용 — 텍스트로 읽히는 어두운 톤) ---------- 각 카테고리: 메인(텍스트/좌측바), -soft(배경 틴트), -line(테두리). 게임 홈/인덱스 다크판의 형광 색을 라이트 배경 대비 4.5:1 이상으로 재조정. */ --cat-space-tech: #1F6FB2; --cat-space-tech-soft: #E7F0F9; --cat-space-tech-line: #C4DCF0; --cat-robotics: #C2540C; --cat-robotics-soft: #FBEDE2; --cat-robotics-line: #F0D3BD; --cat-ai-tech: #A8316B; --cat-ai-tech-soft: #FAEAF1; --cat-ai-tech-line: #F0C9DA; --cat-stocks: #1A6E55; --cat-stocks-soft: #E5F0EA; --cat-stocks-line: #C3E0D2; --cat-industry: #92590F; --cat-industry-soft: #F7EFDD; --cat-industry-line: #E8D5AE; --cat-football: #5B4AB7; --cat-football-soft: #ECEAF8; --cat-football-line: #D2CBEF; --cat-baseball: #B23046; --cat-baseball-soft: #FAE9EC; --cat-baseball-line: #F0C7CF; --cat-gaming-history: #8A6D12; --cat-gaming-history-soft: #F7F1DC; --cat-gaming-history-line: #E7DAAB; } /* ===================================================================== 다크모드 — opt-in 만. (자동 prefers-color-scheme 반전 금지) --------------------------------------------------------------------- 블로그 정체성은 "라이트 종이/매거진"이다. OS 다크모드에 따라 자동으로 배경이 뒤집히면 의도한 종이 톤이 깨지고, 글마다 light 고정한 글과 안 한 글이 섞여 비일관해진다(CLAUDE.md 의 force-dark 사고와 같은 함정). 그래서 다크는 로 명시 선택했을 때만 적용한다. 기본 토큰(위 :root)이 곧 라이트이며, OS 설정과 무관하게 항상 라이트다. ===================================================================== */ :root.lb-dark { --lb-bg: #14161B; --lb-surface: #1B1E25; --lb-surface-2: #23272F; --lb-tint: #1E222A; --lb-ink: #E8EAEE; --lb-ink-soft: #B6BCC6; --lb-ink-dim: #8A919C; --lb-ink-faint: #636A75; --lb-line: #2A2F38; --lb-line-soft: #232830; --lb-line-strong: #3A404B; /* 액센트는 어두운 배경에서 한 톤 밝게 */ --lb-accent: #4FC79C; --lb-accent-ink: #8FE0C2; --lb-accent-soft: #16302A; --lb-link: #5FA8E8; --lb-link-hover: #8AC2F0; /* 카테고리 색 — 다크 배경에서 밝게(원래 형광 톤에 가깝게) */ --cat-space-tech: #5DC1FF; --cat-space-tech-soft: #14222F; --cat-space-tech-line: #1E3A52; --cat-robotics: #FF8C42; --cat-robotics-soft: #2A1C12; --cat-robotics-line: #4A301B; --cat-ai-tech: #FF66CC; --cat-ai-tech-soft: #2A1422; --cat-ai-tech-line: #4A2240; --cat-stocks: #3DD68C; --cat-stocks-soft: #122A20; --cat-stocks-line: #1E4A36; --cat-industry: #E0A33E; --cat-industry-soft: #2A2212; --cat-industry-line: #4A3B1B; --cat-football: #A78BFA; --cat-football-soft: #1E1A2E; --cat-football-line: #352D52; --cat-baseball: #F43F5E; --cat-baseball-soft: #2A1218; --cat-baseball-line: #4A1E2A; --cat-gaming-history: #FFE066; --cat-gaming-history-soft: #2A2612; --cat-gaming-history-line: #4A431B; } /* ===================================================================== 공용 푸터(siteFooter.js) 라이트 override --------------------------------------------------------------------- siteFooter.js 는 게임(다크)과 공유되는 모듈이라 흰 텍스트가 기본값이다. 이 시트(blog-theme.css)는 블로그 페이지에만 로드되므로 여기서 푸터를 라이트로 덮어도 게임 푸터에는 영향이 없다. siteFooter 의 동적 주입