/* ============================================================ HONORS & PARTNERS AM — Design Tokens 색상은 명함에서 추출, 반드시 준수. 골드는 포인트로만. ============================================================ */ /* ---- Fonts (CDN — see README for substitution notes) ---- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Noto+Serif+KR:wght@300;400;500;600;700&display=swap'); :root { /* ============ COLOR — RAW PALETTE (명함 추출) ============ */ --green-900: #0F2A21; /* 더 어두운 음영/그라데이션, 푸터 */ --green-800: #163A2E; /* 메인 딥그린 — 헤더, 풀블록, 푸터 */ --green-700: #1E4A3A; /* 그린 카드/호버 위 단계 */ --green-600: #2A5A47; /* 보더/디바이더 위 그린 */ --gold-600: #B08E45; /* 골드 음영 (텍스트 대비 보강용) */ --gold-500: #C5A45D; /* 골드 포인트 — 로고, 구분선, 강조, CTA */ --gold-400: #D8BE82; /* 골드 라이트 — 호버, 보조 강조 */ --gold-200: #E8D9B5; /* 아주 옅은 골드 — 미세 테두리/배경 틴트 */ --cream: #F4EFE5; /* 크림 배경 — 밝은 섹션 */ --ivory: #FBF8F2; /* 아이보리 — 가장 밝은 배경/카드 */ --ink: #2B2B2B; /* 본문 텍스트 (밝은 배경 위) */ --ink-soft: #5A5750; /* 보조 본문 / 캡션 */ --ink-faint: #8B867C; /* 메타 / 비활성 */ /* ============ SEMANTIC — SURFACES ============ */ --bg-light: var(--cream); --bg-lightest: var(--ivory); --bg-dark: var(--green-800); --bg-darkest: var(--green-900); --surface-card: var(--ivory); --surface-card-dk: var(--green-700); /* ============ SEMANTIC — TEXT ============ */ --fg1: var(--ink); /* 주요 본문 (밝은 배경) */ --fg2: var(--ink-soft); /* 보조 본문 */ --fg3: var(--ink-faint); /* 메타/캡션 */ --fg-on-dark: var(--cream); /* 그린 위 본문 */ --fg-on-dark-soft: #C9CFC4; /* 그린 위 보조 본문 */ --fg-accent: var(--gold-500); /* 강조 텍스트 (밝은 배경) */ --fg-accent-on-dark: var(--gold-400); /* 그린 위 골드 강조 */ /* ============ SEMANTIC — LINES / BORDERS ============ */ --line: rgba(43,43,43,0.12); /* 밝은 배경 위 미세 구분선 */ --line-strong: rgba(43,43,43,0.22); --line-gold: var(--gold-500); /* 골드 구분선/프레임 */ --line-gold-soft: rgba(197,164,93,0.45); /* 옅은 골드 보더 */ --line-on-dark: rgba(244,239,229,0.16); /* 그린 위 구분선 */ /* ============ TYPE — FAMILIES ============ */ --font-serif-ko: 'Noto Serif KR', serif; /* 한글 제목 (명조) */ --font-serif-en: 'Cormorant Garamond', 'EB Garamond', serif; /* 영문 제목 */ --font-serif-en-text: 'EB Garamond', serif; /* 영문 본문 세리프 */ --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* 본문 */ /* ============ TYPE — WEIGHTS ============ */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; /* ============ TYPE — TRACKING (격식: 넓은 자간) ============ */ --track-brand: 0.34em; /* 브랜드명 영문 대문자 */ --track-label: 0.22em; /* 섹션 라벨 / 오버라인 */ --track-en-h: 0.04em; /* 영문 세리프 제목 */ --track-tight: -0.01em; /* 한글 큰 제목 살짝 조임 */ /* ============ SPACING SCALE (8px 기반) ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-section: 120px; /* 섹션 상하 여백 (넉넉하게) */ /* ============ RADII (절제된 라운딩, 거의 직각) ============ */ --radius-none: 0px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; /* ============ ELEVATION (낮고 부드럽게, 묵직하게) ============ */ --shadow-sm: 0 1px 2px rgba(15,42,33,0.06); --shadow-md: 0 8px 24px rgba(15,42,33,0.08); --shadow-lg: 0 24px 60px rgba(15,42,33,0.12); --shadow-gold-glow: 0 0 0 1px var(--line-gold-soft), 0 18px 40px rgba(15,42,33,0.14); /* ============ LAYOUT ============ */ --maxw: 1200px; /* 컨텐츠 최대폭 */ --maxw-text: 720px; /* 본문 가독 폭 */ --gutter: 32px; /* ============ MOTION (느린 페이드, 절제) ============ */ --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 240ms; --dur-base: 480ms; --dur-slow: 900ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ /* 영문 브랜드 / 오버라인 라벨 */ .eyebrow { font-family: var(--font-serif-en); font-weight: var(--w-medium); font-size: 0.8125rem; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-accent); } .brand-wordmark { font-family: var(--font-serif-en); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: var(--track-brand); } /* 한글 디스플레이 / 슬로건 */ .display { font-family: var(--font-serif-ko); font-weight: var(--w-regular); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.28; letter-spacing: var(--track-tight); color: var(--fg1); text-wrap: balance; } /* 영문 디스플레이 */ .display-en { font-family: var(--font-serif-en); font-weight: var(--w-regular); font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.04; letter-spacing: var(--track-en-h); color: var(--fg1); } h1, .h1 { font-family: var(--font-serif-ko); font-weight: var(--w-medium); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.32; letter-spacing: var(--track-tight); color: var(--fg1); } h2, .h2 { font-family: var(--font-serif-ko); font-weight: var(--w-medium); font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.38; color: var(--fg1); } h3, .h3 { font-family: var(--font-serif-ko); font-weight: var(--w-semibold); font-size: 1.375rem; line-height: 1.45; color: var(--fg1); } .lead { font-family: var(--font-body); font-weight: var(--w-light); font-size: 1.25rem; line-height: 1.7; color: var(--fg2); } p, .body { font-family: var(--font-body); font-weight: var(--w-regular); font-size: 1rem; line-height: 1.8; color: var(--fg1); } .body-sm { font-family: var(--font-body); font-weight: var(--w-regular); font-size: 0.875rem; line-height: 1.7; color: var(--fg2); } .caption { font-family: var(--font-body); font-weight: var(--w-regular); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.02em; color: var(--fg3); } /* 큰 수치 (실적/신뢰지표) */ .stat-num { font-family: var(--font-serif-en); font-weight: var(--w-regular); font-size: clamp(3rem, 5vw, 4.5rem); line-height: 1; letter-spacing: var(--track-en-h); color: var(--fg-accent); }