/* ============================================================ 이른둥이 (Ireundungi) Design System — Core Tokens Color + Type foundations sampled from the brand logo and 미숙아 지속관리 시범사업 (babyhealth.kr) program identity. Pretendard is loaded via CDN in the layout ; Cafe24 Ssurround is self-hosted under ../fonts/. ============================================================ */ @font-face { font-family: "Cafe24 Ssurround"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("../fonts/Cafe24Ssurround-v2.0.woff2") format("woff2"), url("../fonts/Cafe24Ssurround-v2.0.woff") format("woff"); } :root { /* ---------- Brand palette (sampled from logo) ---------- */ --brand-coral-50: #FFF4F1; --brand-coral-100: #FDE3DC; --brand-coral-200: #FBC4B8; --brand-coral-300: #F8A89A; --brand-coral-400: #F58989; /* logo ring */ --brand-coral-500: #EB7676; --brand-coral-600: #D85D5D; --brand-coral-700: #B84747; /* warm cream / peach — the "incubator glow" tone */ --brand-cream-50: #FFFCF8; --brand-cream-100: #FEF4EB; /* face fill */ --brand-cream-200: #FCE6D2; --brand-cream-300: #F7D2B0; --brand-cream-400: #EFB988; /* baby-cheek soft pink — secondary surface accent */ --brand-blush-100: #FFE9EA; --brand-blush-200: #FED7D8; /* cheeks */ --brand-blush-300: #FCB9BC; /* warm brown — used as ink instead of true black */ --brand-brown-100: #E8DCD2; --brand-brown-300: #AB8370; /* hair curl */ --brand-brown-500: #7A6A58; --brand-brown-700: #615545; /* logo wordmark */ --brand-brown-900: #3D352B; /* supporting hues — soft medical / nursery accents. Used sparingly for icon coding (growth = sky, dev = mint, alerts = amber). NEVER as large fields. */ --support-sky-100: #E4F1FA; --support-sky-400: #7FB6DD; --support-sky-600: #4F8FBE; --support-mint-100: #E1F2EC; --support-mint-400: #7DC6A7; --support-mint-600: #4DA37F; --support-amber-100: #FDF1D9; --support-amber-400: #E9B856; --support-amber-600: #C29030; /* ---------- Semantic surfaces ---------- */ --bg: #FFFCF8; /* page background — slightly warm */ --bg-alt: var(--brand-cream-100); /* nested cards / hover */ --bg-sunken: #FAF1E8; /* footers, side rails */ --surface: #FFFFFF; /* primary card */ --surface-warm: var(--brand-cream-50); /* ---------- Foreground / ink ---------- */ --fg1: var(--brand-brown-900); /* headlines */ --fg2: var(--brand-brown-700); /* body */ --fg3: var(--brand-brown-500); /* secondary text, captions */ --fg4: var(--brand-brown-300); /* placeholder, disabled */ --fg-on-coral: #FFFFFF; --fg-on-cream: var(--brand-brown-700); /* ---------- Lines & borders ---------- */ --border: #F1E4D5; --border-strong: #E5D2BD; --border-coral: var(--brand-coral-200); /* ---------- Semantic intents ---------- */ --primary: var(--brand-coral-400); --primary-hover: var(--brand-coral-500); --primary-press: var(--brand-coral-600); --primary-soft: var(--brand-coral-50); --success: var(--support-mint-600); --info: var(--support-sky-600); --warning: var(--support-amber-600); --danger: #C24A4A; /* ---------- Radii ---------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --radius: var(--radius-md); /* ---------- Spacing scale (4-pt rhythm) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ---------- Shadows — always warm, never neutral gray ---------- */ --shadow-xs: 0 1px 2px rgba(124, 84, 60, 0.06); --shadow-sm: 0 2px 6px rgba(124, 84, 60, 0.08); --shadow-md: 0 6px 18px rgba(124, 84, 60, 0.10); --shadow-lg: 0 14px 36px rgba(124, 84, 60, 0.14); --shadow-coral: 0 8px 24px rgba(245, 137, 137, 0.32); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5); /* ---------- Motion ---------- */ --ease-soft: cubic-bezier(0.32, 0.72, 0.34, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 380ms; /* ---------- Type families ---------- */ --font-display: "Cafe24 Ssurround", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; --font-sans: "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* ---------- Type scale ---------- */ --fs-display: 56px; --lh-display: 1.18; --fs-h1: 40px; --lh-h1: 1.22; --fs-h2: 30px; --lh-h2: 1.28; --fs-h3: 22px; --lh-h3: 1.36; --fs-h4: 18px; --lh-h4: 1.44; --fs-body: 16px; --lh-body: 1.7; --fs-small: 14px; --lh-small: 1.6; --fs-caption: 12px; --lh-caption: 1.5; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; } /* ============================================================ Semantic typography classes ============================================================ */ .display, h1.display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -0.01em; color: var(--fg1); } h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; color: var(--fg1); } h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--fg1); } h3, .h3 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--fg1); } h4, .h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--fg1); } p, .body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg2); } .small { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg3); } .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--fg3); letter-spacing: 0.01em; } .eyebrow { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-alt); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--fg2); } .prose p { text-wrap: pretty; max-width: 62ch; }