/* ============================================================= 홍다경 Portfolio — Design Tokens Theme: "유쾌한 환경 / 행동하는 청년" Font: Pretendard (Apple 기본체 느낌, 크로스플랫폼) Color: Lime accent + Deep-forest ink + Warm off-white + Coral ============================================================= */ /* ---- Web font (Pretendard, CDN) ----------------------------- Load once in before this file: ------------------------------------------------------------- */ :root { /* ---------- Brand palette ---------- */ --color-lime: #E9FF70; /* signature accent — 다경님 픽 */ --color-lime-deep: #CDE94B; /* hover / pressed state for lime */ --color-coral: #EF9E78; /* secondary accent — 발랄/하이텐션 */ --color-coral-deep: #E5835A; /* coral hover */ /* ---------- Neutral base ---------- */ --color-ink: #16201A; /* near-black w/ green undertone — 다크 섹션, 본문 */ --color-ink-soft: #243029; /* raised dark surfaces (cards on dark) */ --color-paper: #FBFBF4; /* warm off-white — 메인 배경 */ --color-paper-soft: #F2F2E8; /* subtle card / section tint on light */ --color-subtext: #5C6B60; /* gray-green secondary text */ --color-line: #E2E3D6; /* hairline borders on light */ --color-line-dark: #33402F; /* hairline borders on dark */ /* ---------- Text-on-color (contrast-safe) ---------- 라임/코랄 위에는 흰 글씨 금지(대비 탈락) → 다크 잉크만 */ --on-lime: var(--color-ink); --on-coral: var(--color-ink); --on-ink: var(--color-paper); /* ---------- Typography ---------- */ --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "Malgun Gothic", system-ui, sans-serif; /* type scale (1.25 ratio, 16px base) */ --fs-display: clamp(2.5rem, 6vw, 4.5rem); /* 랜딩 헤드라인 */ --fs-h1: clamp(2rem, 4vw, 3rem); --fs-h2: clamp(1.5rem, 3vw, 2.25rem); --fs-h3: 1.5rem; --fs-body: 1rem; --fs-small: 0.875rem; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.15; --lh-snug: 1.35; --lh-body: 1.7; --ls-tight: -0.02em; /* 큰 제목 자간 좁힘 */ /* ---------- Spacing / radius / shadow ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(22, 32, 26, 0.08); --shadow-md: 0 8px 24px rgba(22, 32, 26, 0.10); --container: 1200px; } /* ---------- Base reset / element defaults ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; /* sticky nav 보정 */ scroll-snap-type: y proximity; /* proximity: 양 끝에서 가두지 않음 (mandatory는 경계 트랩 발생) */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; scroll-snap-type: none; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); margin: 0 0 var(--space-4); } a { color: inherit; text-decoration: none; } /* ---------- Reusable accent helpers ---------- */ .accent-lime { color: var(--color-ink); background: var(--color-lime); } .accent-coral { color: var(--color-ink); background: var(--color-coral); } .section-dark { color: var(--color-paper); background: var(--color-ink); } /* highlight 텍스트 — 라임 형광펜 효과 */ .mark { background: linear-gradient(transparent 55%, var(--color-lime) 55%); padding: 0 0.1em; } /* CTA 버튼 (라임) */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); font-weight: var(--fw-semibold); border: none; cursor: pointer; transition: background-color .15s ease, transform .15s ease; } .btn-lime { background: var(--color-lime); color: var(--on-lime); } .btn-lime:hover { background: var(--color-lime-deep); transform: translateY(-1px); } .btn-coral { background: var(--color-coral); color: var(--on-coral); } .btn-coral:hover { background: var(--color-coral-deep); transform: translateY(-1px); } /* 다크 배경 위 outline 버튼 */ .btn-ghost { background: transparent; color: var(--color-paper); border: 1.5px solid var(--color-line-dark); } .btn-ghost:hover { border-color: var(--color-lime); color: var(--color-lime); }