를 렌더한다. * (선택자가 [data-…] 로 느슨해지므로 반드시 wr-site 래퍼 안에서만 쓸 것) * * ⚠️ 디자인 함정(HANDOFF §9) 그대로 유지: * · body { overflow-x: clip } — hidden 으로 되돌리면 sticky 가 전부 죽는다 * · .thumb 의 aspect-ratio 는 여기 한 곳이 단일 소스 * · [hidden] { display:none !important } * ============================================================= */ /* ============================================================= * WriteRun 블로그 데모 — 공용 스타일 * ------------------------------------------------------------- * 1. 디자인 토큰 (CSS 커스텀 프로퍼티) * 2. 리셋 · 기본 타이포 * 3. 공용 컴포넌트 (버튼 · 배지 · 카드 · 토스트) * 4. 공개면 — 헤더 / 홈 / 콘텐츠 뷰 / 푸터 * 5. 관리자면 * 6. 반응형 (Tablet 768–1023 / Mobile ≤767) * * 디자인 토큰은 :root 에 정의되어 있고, 관리자 "디자인 수정"에서 * JS 로 이 변수들을 덮어써 실시간 미리보기를 구현합니다. * ============================================================= */ /* ============================================================= * 1. 디자인 토큰 * ============================================================= */ :root { /* --- 색 --------------------------------------------------- */ --brand-accent: #d9773f; --brand-accent-ink: #ffffff; /* 악센트 위 텍스트 */ --brand-accent-soft: rgba(217, 119, 63, 0.12); --brand-accent-hover: #c2642f; --bg: #fbfaf8; --surface: #ffffff; --surface-2: #f4f2ee; --text: #1f1d1b; --text-muted: #6b6560; --border: #e5e1da; --border-strong: #d3cec5; --success: #3f7d58; --warning: #b7791f; --danger: #b3453c; /* --- 타입 ------------------------------------------------- */ --font-sans: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; --font-serif: 'Nanum Myeongjo', 'Apple SD Gothic Neo', Georgia, 'Times New Roman', serif; --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; --font-body: var(--font-sans); --font-heading: var(--font-sans); --fs-base: 16px; --lh-base: 1.75; --lh-tight: 1.32; /* 본문 텍스트 3단계 — applyTheme() 가 덮어씁니다 */ --lh-prose: 1.85; /* 행간: 1.65 / 1.85 / 2.05 */ --tracking-prose: 0em; /* 자간: -0.012em / 0 / 0.022em */ /* --- 형태 ------------------------------------------------- */ /* 둥글기는 관리자에서 0 · 4 · 8 · 12 · 16px 5단계로 조절합니다. --radius-media 는 썸네일 · 커버 · 본문 이미지 전용입니다. */ --radius: 12px; --radius-sm: 7px; --radius-media: 12px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(31, 29, 27, 0.05); --shadow: 0 2px 4px rgba(31, 29, 27, 0.04), 0 8px 24px rgba(31, 29, 27, 0.06); --shadow-lg: 0 4px 8px rgba(31, 29, 27, 0.05), 0 16px 40px rgba(31, 29, 27, 0.1); /* --- 밀도 (관리자에서 조절) --------------------------------- */ --density: 1; /* compact .8 / comfortable 1 / spacious 1.25 */ --card-pad: calc(20px * var(--density)); --grid-gap: calc(24px * var(--density)); --section-gap: calc(64px * var(--density)); /* --- 레이아웃 --------------------------------------------- */ --container: 1180px; --reading-width: 700px; /* 본문 영역 3단계: 620 / 700 / 780 */ /* 로고 표시 높이(S 28 / M 40 / L 56). GNB 높이는 여기에 맞춰 자동 확장됩니다. */ --logo-h: 40px; --header-h: max(68px, calc(var(--logo-h) + 28px)); /* --- 모션 ------------------------------------------------- */ --t-fast: 120ms ease; --t: 200ms cubic-bezier(0.32, 0.72, 0, 1); } /* 그림자 프리셋 · 다크 보정 · 리스트형 레이아웃은 applyTheme() 가 생성하는 테마 CSS(