/* TaxLab 디자인 시스템 토큰 * * 톤: 밝은 신뢰·금융 정보톤 — 화이트 배경 + 네이비 + 틸 액센트. * 명리원(다크 명리톤)·beautypang(블루 정보톤)과 구분되는 정체성. * 타깃: 부동산 세금을 직접 계산하려는 일반 사용자. 빠르고 명확하게. * * 사용: * Pretendard는 CDN으로 page 에서 로드. */ :root { /* ─── Color ─────────────────────────────────────────────── */ --color-bg: #F7F9FC; /* 페이지 배경 (아주 옅은 블루그레이) */ --color-surface: #FFFFFF; /* 카드/패널 */ --color-surface-2: #EEF2F8; /* 입력 필드 배경 */ --color-text: #16202E; /* 본문 (딥 네이비 그레이) */ --color-text-dim: #5A6675; /* 보조 */ --color-text-mute: #8A93A1; /* 약한 보조 */ --color-primary: #14416B; /* 네이비 (브랜드 메인) */ --color-primary-hover: #1B5489; --color-accent: #0EA5A4; /* 틸 (강조·결과) */ --color-accent-soft: #0EA5A415; --color-border: #DCE3ED; --color-border-soft:#E9EEF5; --color-danger: #D14343; --color-success: #15803D; --color-warn: #B45309; --color-warn-bg: #FEF6E7; /* ─── Typography ────────────────────────────────────────── */ --font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.5rem; --lh-tight: 1.25; --lh-base: 1.6; /* ─── Spacing ───────────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ─── Radius / Shadow ───────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-soft: 0 1px 3px rgba(20,32,46,0.06), 0 1px 2px rgba(20,32,46,0.04); --shadow-card: 0 4px 16px rgba(20,32,46,0.08); /* ─── Layout ────────────────────────────────────────────── */ --container-narrow: 640px; --container-base: 860px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-lg); } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-hover); } /* ─── Components ─────────────────────────────────────────── */ .container { max-width: var(--container-base); margin: 0 auto; padding: 0 var(--space-5); } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); } .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .site-header .inner { max-width: var(--container-base); margin: 0 auto; padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .site-header .brand { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--color-primary); font-weight: 800; } .site-header .brand .mark { font-size: var(--fs-xl); } .site-header .brand .sub { font-size: var(--fs-sm); color: var(--color-text-mute); font-weight: 600; } .site-header nav a { color: var(--color-text-dim); font-size: var(--fs-sm); font-weight: 600; margin-left: var(--space-4); } .site-header nav a:hover { color: var(--color-primary); } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-soft); } .btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-family: inherit; font-size: var(--fs-base); font-weight: 700; border: none; cursor: pointer; transition: all 0.15s ease; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-hover); color: #fff; } .btn-accent { background: var(--color-accent); color: #fff; } label { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: var(--space-2); color: var(--color-text); } input[type="text"], input[type="number"], select { width: 100%; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); font-size: var(--fs-base); font-family: inherit; } input:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .notice { background: var(--color-warn-bg); border: 1px solid #F3D9A4; color: var(--color-warn); border-radius: var(--radius); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); } footer.site-footer { border-top: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-6) var(--space-5); text-align: center; color: var(--color-text-mute); font-size: var(--fs-sm); margin-top: var(--space-8); } footer.site-footer p { margin: var(--space-2) 0; }