/* ============================================================ 내돈내셈 — 디자인 토큰 Your money. Your math. 무드 : Modern Calm (딥그린 + 차가운 초록빛 뉴트럴) 기준일 : 2026-07-09 검증 : WCAG 2.1 AA 대비 계산으로 전 항목 통과 (라이트/다크) ⚠️ 규칙 1. 컴포넌트는 semantic 토큰만 소비한다. primitive를 직접 참조하지 않는다. ⚠️ 규칙 2. 다크모드는 색 반전이 아니라 semantic 재매핑이다. ============================================================ */ :root { /* ── primitive ───────────────────────────────────────────── 리터럴 값이 사는 유일한 곳. 컴포넌트에서 직접 쓰지 말 것. */ /* 그린 (시그니처) */ --green-50: #E4EFEA; --green-100: #C6DED3; --green-400: #57A882; --green-500: #2E7358; --green-600: #1E5A46; /* base — Case 2 Deep Green */ --green-700: #164636; --green-800: #14523E; /* 뉴트럴 — 초록빛을 살짝 머금은 회색 (시그니처 hue로 채색) */ --neutral-0: #FFFFFF; --neutral-25: #F7F9F8; --neutral-50: #EDF1EF; --neutral-100: #DDE4E1; --neutral-300: #87938D; --neutral-500: #5A6660; --neutral-700: #2C3833; --neutral-800: #1B2420; --neutral-900: #121815; /* 장식 전용 (텍스트·버튼 금지 — 대비 미달) */ --teal-decor: #7DA79A; /* 신호색 */ --amber-600: #8A6100; --amber-400: #D9A441; --clay-600: #9C3A31; /* Warm Mahogany 계열. 소방차 빨강 아님 */ --clay-400: #E08279; /* ── semantic (라이트) ──────────────────────────────────── UI 코드는 여기서부터만 읽는다. */ --bg: var(--neutral-25); /* 60% — 오프화이트 */ --surface: var(--neutral-0); /* 30% — 카드 */ --surface-2: var(--neutral-50); /* 광고 회색 띠 */ --text-primary: var(--neutral-800); --text-secondary: var(--neutral-500); --border-subtle: var(--neutral-100); /* 카드 구분선 (비인터랙티브) */ --border-strong: var(--neutral-300); /* 입력창 테두리 — 3:1 확보 */ --accent: var(--green-600); /* 10% 이하 — CTA·링크 */ --accent-hover: var(--green-700); --accent-bg: var(--green-50); /* 보조 버튼 배경 */ --on-accent: var(--neutral-0); /* accent 위 글자 */ --result: var(--green-800); /* 결과 숫자 */ --decor: var(--teal-decor); /* 아이콘 배경·장식 전용 */ --caution: var(--amber-600); /* D-day 배지 */ --danger: var(--clay-600); /* 경고 */ --focus-ring: var(--green-600); /* ── 타이포 ────────────────────────────────────────────── 패밀리 1개. 세리프 디스플레이 금지 (숫자 가독성). */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; /* base 16px × 1.25 (Major third) */ --fs-caption: 0.8125rem; /* 13 */ --fs-body: 1rem; /* 16 */ --fs-lead: 1.25rem; /* 20 */ --fs-h3: 1.5rem; /* 24 */ --fs-h2: 1.75rem; /* 28 */ --fs-h1: 1.9375rem; /* 31 */ --fs-result: clamp(2.5rem, 7vw, 3.25rem); /* 결과 숫자만 압도적으로 */ /* 한글 튜닝: 행간 높이고 자간 좁힌다 */ --lh-body: 1.65; --lh-heading: 1.25; --ls-display: -0.02em; /* ── 간격 (8px 그리드) ─────────────────────────────────── 13px·17px 같은 임의값 금지. */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-12: 3rem; /* 48 ← 광고 위아래 최소 여백 */ --space-16: 4rem; /* 64 */ --space-24: 6rem; /* 96 */ --container: 44rem; /* 704px — 중앙 1컬럼 */ --measure: 66ch; /* 가이드 아티클 본문 */ /* ── 라운드 (단일 스케일) ────────────────────────────────── */ --radius-btn: 8px; --radius-card: 12px; --radius-lg: 16px; --radius-pill: 9999px; /* ── 엘리베이션 ────────────────────────────────────────── 평면이 기본. 결과 카드 하나만 살짝 상승. 깊이는 그림자 대신 보더·배경 톤 차이로 만든다. */ --shadow-card: 0 1px 2px rgb(18 24 21 / 0.04); --shadow-lift: 0 4px 16px -6px rgb(18 24 21 / 0.10), 0 1px 3px -1px rgb(18 24 21 / 0.06); } /* ── semantic 재매핑 (다크) ──────────────────────────────── 색을 반전하지 않는다. 같은 이름에 다른 primitive를 가리킨다. 다크에선 accent가 밝아지므로 그 위 글자는 어두운 잉크를 쓴다. */ :root[data-theme="dark"] { --bg: var(--neutral-900); --surface: #1A221E; --surface-2: #212B26; --text-primary: #E6EBE8; --text-secondary: #9AA6A0; --border-subtle: var(--neutral-700); --border-strong: #6B7872; --accent: var(--green-400); --accent-hover: #6FBF9A; --accent-bg: #1B2E26; --on-accent: #0B1310; /* ← 흰색 아님 */ --result: #6FBF9A; --caution: var(--amber-400); --danger: var(--clay-400); --focus-ring: var(--green-400); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lift: 0 4px 16px -6px rgb(0 0 0 / 0.6), 0 1px 3px -1px rgb(0 0 0 / 0.4); } /* ============================================================ 대비 검증 결과 [측정 — 파이썬 계산] 라이트 다크 본문 on 배경 15.05:1 14.92:1 보조 on 배경 5.67:1 7.14:1 글자 on accent버튼 8.06:1 6.57:1 결과숫자 on 카드 9.11:1 7.43:1 accent링크 on 배경 7.62:1 6.28:1 입력테두리 on 카드 3.19:1 3.53:1 caution on 배경 5.24:1 8.00:1 danger on 배경 6.48:1 6.54:1 → WCAG 2.1 AA 전 항목 통과 (텍스트 4.5:1, 비텍스트 3:1) ⚠️ --decor(#7DA79A)는 대비 2.53:1로 텍스트·버튼에 쓸 수 없다. 아이콘 배경, 구분 장식에만 사용할 것. ============================================================ */ /* ── 광고 슬롯: CLS 방지를 위한 높이 예약 ────────────────── 광고가 늦게 떠서 아래 내용이 밀리면 오클릭을 유발하고 CLS 점수를 깎는다. 목표 CLS < 0.1 */ .ad-slot { min-height: 280px; /* 모바일 */ margin-block: var(--space-12); /* 위아래 48px 이상 */ padding: var(--space-4); background: var(--surface-2); /* 회색 띠로 격리 */ border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; } .ad-slot::before { content: "광고"; position: absolute; transform: translate(-50%, -160%); font-size: 0.625rem; letter-spacing: 0.08em; color: var(--text-secondary); } @media (min-width: 768px) { .ad-slot { min-height: 250px; } } /* ── 기본 리셋 ────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* 숫자는 표에서 자릿수가 흔들리지 않게 */ .num { font-variant-numeric: tabular-nums; }