/* ================================================================ 대성오토(주) Design System — Colors & Type ================================================================ */ /* Web fonts — Pretendard (모든 텍스트) + JetBrains Mono (레이블/숫자/캐프션) - Pretendard via jsdelivr CDN - JetBrains Mono via Google Fonts (400/500/600) ⚠️ Loaded via CDN — swap to self-hosted woff2 for production. */ @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=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* --------------------------------------------------------------- 1. BRAND COLORS --------------------------------------------------------------- */ --brand-navy: #14213d; /* Midnight Navy — primary, trust */ --brand-navy-deep: #0b1629; /* Ink — headers, footers */ --brand-navy-ink: #0b1629; /* Deepest — body on light */ --brand-navy-hover: #1f3558; /* Azurite — hover */ --brand-gold: #b8944a; /* Antique Gold — accent */ --brand-gold-soft: #d4b878; /* Champagne — soft, hover tint */ --brand-gold-deep: #8a6d2a; /* Bronze — pressed, ink */ /* --------------------------------------------------------------- 2. NEUTRALS — warm, document-paper feel --------------------------------------------------------------- */ --paper: #f4efe6; /* Parchment — main bg */ --paper-soft: #faf6ec; /* Ivory — subtle panel */ --paper-edge: #eae3d3; /* Linen — divider */ --paper-sand: #e7e2d6; /* Sand */ --white: #ffffff; /* Pearl White */ --alabaster: #f5f3ee; --stone-100: #d9d4c8; --stone-200: #b5ae9e; --stone-300: #847c6c; --stone-400: #4f4a42; /* Graphite */ --stone-500: #2a2823; /* Espresso */ --stone-900: #141210; /* Obsidian */ /* legacy aliases (kept for backwards compat in earlier files) */ --gray-50: var(--alabaster); --gray-100: var(--stone-100); --gray-200: var(--stone-100); --gray-300: var(--stone-200); --gray-400: var(--stone-300); --gray-500: var(--stone-400); --gray-600: var(--stone-400); --gray-700: var(--stone-500); --gray-800: var(--stone-500); --gray-900: var(--stone-900); /* --------------------------------------------------------------- 3. SEMANTIC FOREGROUND / BACKGROUND --------------------------------------------------------------- */ --fg-1: var(--brand-navy-ink); /* Primary text */ --fg-2: var(--gray-600); /* Secondary text */ --fg-3: var(--gray-500); /* Tertiary / meta */ --fg-muted: var(--gray-400); /* Disabled, captions */ --fg-inverse: var(--paper); /* Text on navy */ --fg-accent: var(--brand-gold-deep); /* Gold ink, links */ --bg-1: var(--paper); /* Main page bg */ --bg-2: var(--white); /* Card bg on paper */ --bg-3: var(--paper-soft); /* Subtle panel */ --bg-inverse: var(--brand-navy); /* Dark section bg */ --bg-inverse-deep: var(--brand-navy-deep); /* Footer bg */ --border-subtle: rgba(26, 42, 74, 0.08); --border-default: rgba(26, 42, 74, 0.14); --border-strong: rgba(26, 42, 74, 0.28); --border-gold: rgba(201, 168, 76, 0.45); --border-inverse: rgba(246, 242, 234, 0.14); /* --------------------------------------------------------------- 4. SEMANTIC STATUS (used sparingly — industrial tone) --------------------------------------------------------------- */ --success: #2e5d4a; /* muted forest */ --success-bg: #e8efea; --warning: #8a6d2a; /* bronze */ --warning-bg: #f3ecd9; --danger: #8c3a2e; /* burnt sienna */ --danger-bg: #f0e1dd; --info: var(--brand-navy); --info-bg: #e4e8ef; /* --------------------------------------------------------------- 5. TYPOGRAPHY — families - --font-sans: Pretendard — 제목/본문/버튼 등 모든 텍스트 - --font-mono: JetBrains Mono — eyebrow 라벨, 큰 숫자(bignum), 캐프션 --------------------------------------------------------------- */ --font-sans: 'Pretendard', 'Pretendard Variable', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* legacy aliases — 이전 파일들이 --font-body / --font-display 쓰고 있어서 유지 */ --font-body: var(--font-sans); --font-display: var(--font-sans); /* --------------------------------------------------------------- 6. TYPE SCALE — modular, optimized for Korean --------------------------------------------------------------- */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 38px; --fs-4xl: 48px; --fs-5xl: 64px; --fs-hero: 80px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; /* Korean body default */ --lh-relaxed: 1.75; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-kicker: 0.18em; /* Uppercase small labels */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* --------------------------------------------------------------- 7. SPACING SCALE — 4px base --------------------------------------------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* --------------------------------------------------------------- 8. RADII --------------------------------------------------------------- */ --r-0: 0; --r-1: 2px; /* Buttons — formal, angular */ --r-2: 4px; /* Cards, inputs */ --r-3: 8px; /* Larger containers */ --r-pill: 999px; /* Badges, tags */ /* --------------------------------------------------------------- 9. SHADOWS / ELEVATION --------------------------------------------------------------- */ --elev-0: none; --elev-1: 0 1px 2px rgba(26, 42, 74, 0.06), 0 1px 1px rgba(26, 42, 74, 0.04); --elev-2: 0 4px 12px rgba(26, 42, 74, 0.08), 0 2px 4px rgba(26, 42, 74, 0.05); --elev-3: 0 12px 32px rgba(26, 42, 74, 0.12), 0 4px 8px rgba(26, 42, 74, 0.06); --elev-4: 0 24px 64px rgba(26, 42, 74, 0.18); --glow-gold: 0 0 0 4px rgba(201, 168, 76, 0.18); --glow-gold-strong: 0 0 0 6px rgba(201, 168, 76, 0.28), 0 8px 24px rgba(201, 168, 76, 0.22); /* --------------------------------------------------------------- 10. MOTION --------------------------------------------------------------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 500ms; /* --------------------------------------------------------------- 11. LAYOUT --------------------------------------------------------------- */ --container: 1200px; --container-narrow: 960px; --prose: 680px; --header-h: 64px; /* Phone CTA — always golden pill */ --phone-cta-bg: var(--brand-gold); --phone-cta-bg-hover: var(--brand-gold-deep); --phone-cta-fg: var(--brand-navy-ink); } /* ================================================================ SEMANTIC ELEMENT STYLES ================================================================ */ html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; word-break: keep-all; /* Korean-friendly line breaking */ overflow-wrap: break-word; } body { font-size: var(--fs-base); line-height: var(--lh-normal); } /* Headline display — Pretendard, weighty, tight */ h1, .h1 { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: clamp(var(--fs-4xl), 5vw, var(--fs-hero)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; } h2, .h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-4xl)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0; } h3, .h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } h4, .h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--fg-1); margin: 0; } h5, .h5 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: var(--lh-snug); margin: 0; } p { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-1); margin: 0 0 var(--sp-4); } small, .caption { font-size: var(--fs-sm); color: var(--fg-2); line-height: var(--lh-snug); } /* Eyebrow / kicker — JetBrains Mono for an industrial, technical feel */ .kicker { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-xs); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--fg-accent); } /* Big numbers / metrics — JetBrains Mono, tabular */ .bignum { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--brand-navy); } .metric { font-family: var(--font-body); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; font-size: var(--fs-5xl); line-height: 1; letter-spacing: var(--ls-tight); color: var(--brand-navy); } a { color: var(--fg-accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease-standard); } a:hover { border-bottom-color: var(--brand-gold); } code, pre { font-family: var(--font-mono); font-size: 0.92em; } /* Reset helpers */ *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; display: block; }