/* ============================================================ IdeaDrop — style.css 디자인 토큰(CSS 변수) + 전역 기본 규칙 spec.md 4-2, 4-3 기준 ============================================================ */ /* === 폰트 CDN 임포트 (HTML 에서 로드) === */ :root { /* ─── 폰트 패밀리 ─── */ --font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; /* ─── 폰트 크기 (rem 기반) ─── */ --font-size-xs: 0.8125rem; /* 13px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.125rem; /* 18px */ --font-size-lg: 1.375rem; /* 22px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 2.75rem; /* 44px — hero headline desktop */ /* ─── 행간 ─── */ --line-height-tight: 1.4; --line-height-base: 1.6; --line-height-loose: 1.8; --line-height-ui: 1.5; /* ─── 자간 ─── */ --letter-spacing-tight: -0.02em; --letter-spacing-base: 0; --letter-spacing-wide: 0.02em; /* ─── 텍스트 최대 너비 ─── */ --text-max-width: 60ch; /* ─── 브랜드 컬러 ─── */ --color-primary: #ffc200; /* 골드 — CTA 버튼 */ --color-primary-dark: #e6a800; /* 호버 */ --color-primary-light: #fff8e1; /* 배경 강조 */ --color-on-primary: #0d1b2a; /* 버튼 위 텍스트 */ --color-brand-navy: #0d1b2a; /* 히어로 배경 */ --color-brand-sky: #4dd0e1; /* 포인트 색상 */ /* ─── 텍스트 컬러 ─── */ --color-text: #1F2937; --color-text-body: #1F2937; /* --color-text 와 동일 (alias) */ --color-text-sub: #4B5563; --color-text-muted: #9CA3AF; --color-text-on-dark: #ffffff; --color-accent: #3B82F6; /* 포인트 색상 (blue-500) */ /* ─── 서피스 ─── */ --color-surface: #ffffff; --color-bg: #F9FAFB; --color-bg-alt: #F3F4F6; --color-border: #E5E7EB; --color-border-focus: #ffc200; /* ─── 상태 컬러 ─── */ --color-success: #16A34A; --color-warning: #D97706; --color-error: #DC2626; /* ─── 간격 ─── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ─── 버튼 패딩 ─── */ --btn-padding-y: 0.75rem; --btn-padding-x: 1.5rem; --btn-padding-y-sm: 0.5rem; --btn-padding-x-sm: 1rem; /* ─── 반경 ─── */ --radius-sm: 0.25rem; --radius-base: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-full: 9999px; /* ─── 그림자 ─── */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* ─── 레이아웃 ─── */ --container-max: 1200px; --container-padding: var(--space-4); } /* ============================================================ 전역 리셋 ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ============================================================ 기본 타이포그래피 ============================================================ */ html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-base); font-size: var(--font-size-base); line-height: var(--line-height-base); letter-spacing: var(--letter-spacing-tight); color: var(--color-text); background-color: var(--color-surface); word-break: keep-all; overflow-wrap: break-word; } p, li, dd, blockquote { max-width: var(--text-max-width); } h1, h2, h3, h4, h5, h6 { line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); } /* ============================================================ 링크 ============================================================ */ a { color: var(--color-on-primary); /* #0d1b2a — 모든 배경에서 충분한 대비 */ text-decoration: none; } a:hover { text-decoration: underline; } .section--dark a:not(.btn-primary):not(.btn-outline):not(.btn-sm), .site-footer a { color: var(--color-brand-sky); /* 어두운 배경에서만 하늘색 유지, 버튼 제외 */ text-decoration: none; } /* ============================================================ 이미지 ============================================================ */ img { max-width: 100%; height: auto; display: block; } /* ============================================================ 접근성 — 포커스 ============================================================ */ :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; } /* ============================================================ 레이아웃 유틸리티 ============================================================ */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); }