/* 웹폰트 로드 — @import 는 stylesheet 최상단 필수 */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700&display=swap'); /* ============================================================ * HOMI CLUB — Design Tokens (globals/tokens.css) * ============================================================ * 단일 출처. 모든 색·간격·radius·폰트·z-index 는 var(--name) 으로 사용. * hex·magic number 직접 작성 ❌ * 출처: docs/HOMICLUB-DESIGN-BRIEF.md §3 + docs/design/prototype-slot.css * ============================================================ */ :root { /* ───────────────────────────────────────────────── * 1. 색 — 극미니멀 모노크롬 (흰·그레이·블랙 + 아이보리) * 4축(soil/sprout/diary/market)은 무채색으로 재매핑. * 의미 구분은 작은 점 전용색(--dot-*) 에서만. * ───────────────────────────────────────────────── */ /* 중성 (ink) — 그레이스케일 */ --ink-900: #1A1A1A; /* 본문·강조 */ --ink-700: #3F3F3F; /* 보조 */ --ink-500: #717171; /* 비활성·메타 */ --ink-300: #C9C9C9; /* 외곽선 */ --ink-200: #E5E5E5; --ink-100: #F4F4F4; /* 가벼운 배경 */ --ink-50: #FAFAFA; /* 배경·면 */ --bg-page: #F4F0E7; /* 페이지 배경 — 아이보리 */ --surface: #FFFFFF; /* 카드·패널 면 */ --hairline: rgba(0, 0, 0, .12); /* 선 구획 (가시성 ↑) */ /* 4축 → 무채색 재매핑 (UI 면·테두리·텍스트는 전부 그레이스케일) */ --soil-50: var(--ink-50); --soil-100: var(--ink-100); --soil-300: var(--ink-300); --soil-500: var(--ink-700); --soil-700: var(--ink-900); --sprout-50: var(--ink-50); --sprout-100: var(--ink-100); --sprout-300: var(--ink-300); --sprout-500: var(--ink-900); --sprout-700: var(--ink-900); --diary-50: var(--ink-50); --diary-100: var(--ink-100); --diary-300: var(--ink-300); --diary-500: var(--ink-700); --diary-700: var(--ink-900); --market-50: var(--ink-50); --market-100: var(--ink-100); --market-300: var(--ink-300); --market-500: var(--ink-700); --market-700: var(--ink-900); /* 의미 점 전용색 — 작은 dot 에만 사용 (8px 내외) */ --dot-soil: #8B6F47; --dot-sprout: #5AAA3E; --dot-diary: #C9A11B; --dot-market: #D87F2D; /* 시기 판정 5등급 — 무채색 (강조는 블랙) */ --grade-prime: var(--ink-900); --grade-early-ok: var(--ink-700); --grade-late-ok: var(--ink-700); --grade-too-early: var(--ink-500); --grade-too-late: var(--ink-500); /* ───────────────────────────────────────────────── * 2. 타이포 — 본문 명조, 제목·UI 고딕 (한국어 환경 가독성) * ───────────────────────────────────────────────── */ --font-body: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo', 'Apple Myungjo', 'Batang', serif; /* 본문 — 명조 */ --font-heading: 'Pretendard', 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, sans-serif; /* 제목·UI — 고딕 */ --font-display: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple Myungjo', serif; /* 슬롯머신 거대 숫자 — 명조 */ --font-mono: 'JetBrains Mono', 'Menlo', monospace; /* 자리표시자·코드 */ /* 폰트 크기 — 5단계로 정돈 (caption·body·title·heading·display). 기존 토큰명은 5단계 값으로 수렴(모듈 무수정). */ --fs-caption: 14px; /* 1단계: 메타·배지·캡션 */ --fs-body: 16px; /* 2단계: 본문·UI 기본 */ --fs-title: 18px; /* 3단계: 카드 제목·섹션 소제목 */ --fs-heading: 24px; /* 4단계: 페이지 제목 */ --fs-display: 40px; /* 5단계: 거대 숫자·히어로 */ /* 기존 토큰명 → 5단계 alias (모듈 CSS 무수정) */ --fs-tiny: var(--fs-caption); --fs-small: var(--fs-caption); --fs-meta: var(--fs-caption); --fs-text: var(--fs-body); /* 명조 본문도 16 */ --fs-lead: var(--fs-title); --fs-h3: var(--fs-title); --fs-h2: var(--fs-heading); --fs-h1: var(--fs-heading); --fs-display-sm: var(--fs-display); --fs-display-lg: var(--fs-display); /* line-height — 명조 본문은 lh-body 1.8로 (가독성 강화) */ --lh-tight: 1.2; --lh-snug: 1.4; --lh-body: 1.7; /* 명조 본문 (미니멀 정돈) */ --lh-loose: 1.9; /* letter-spacing — 명조는 좁히지 않음. 본문은 살짝 + 로 가독성 ↑ */ --tracking-tight: -0.04em; /* 거대 숫자 */ --tracking-display: -0.025em; /* 큰 제목 */ --tracking-normal: 0; --tracking-relax: 0.015em; /* ⭐ 명조 본문 (가독성 강화) */ --tracking-wide: 0.02em; /* ───────────────────────────────────────────────── * 3. 간격 (8px 기반 스케일) * ───────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; /* 모바일 좌우 패딩 기본 */ --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ───────────────────────────────────────────────── * 4. radius * ───────────────────────────────────────────────── */ --radius-sm: 3px; --radius-md: 6px; /* 버튼·입력 */ --radius-lg: 8px; /* 카드 (둥근 면 절제) */ --radius-xl: 10px; --radius-pill: 999px; /* ───────────────────────────────────────────────── * 5. 그림자 — 절제. 강한·다중 그림자 금지 * ───────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --shadow-md: 0 4px 12px rgba(0, 0, 0, .08); --shadow-lg: 0 18px 56px rgba(0, 0, 0, .10); /* ───────────────────────────────────────────────── * 6. 반응형 기준점 * ───────────────────────────────────────────────── */ --bp-mobile-min: 360px; /* Galaxy S 시리즈 + iPhone 12~16 */ --bp-mobile-max: 430px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-content-narrow: 720px; /* 긴 글 최대 폭 */ --bp-content-wide: 1200px; /* 그리드 최대 폭 */ /* ───────────────────────────────────────────────── * 7. z-index * ───────────────────────────────────────────────── */ --z-nav: 100; --z-fab: 200; --z-modal: 1000; --z-toast: 2000; /* ───────────────────────────────────────────────── * 8. 전환 * ───────────────────────────────────────────────── */ --t-fast: .15s; --t-base: .25s; --t-slow: .4s; --ease: cubic-bezier(.3, .7, .4, 1); } /* ============================================================ * 9. 접근성 — focus ring * ============================================================ */ :focus-visible { outline: 2px solid var(--sprout-500); outline-offset: 2px; } /* ============================================================ * 10. 모션 감소 * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ────────────────────────────────────────────── sitewide 톤 매핑 클래스 (2026-05-28 D) .tone-friendly — 호미클럽 친근체 합쇼체 (명조) .tone-scholar — 학술·인용·외부 증빙 평서체 (고딕) 각 페이지에서 자유 활용 ────────────────────────────────────────────── */ .tone-friendly { font-family: var(--font-body); } .tone-scholar { font-family: var(--font-heading); } /* 본문 default — 별도 클래스 없으면 명조 (호미클럽 기본 톤) */ body { font-family: var(--font-body); }