/* ========================================================= DEERS SEDA — Colors & Typography Source: CI/PPT template (2020.04 graphic motif renewal) ========================================================= */ /* ---------- Web fonts ---------- */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&family=Noto+Sans:wght@300;400;500;600;700;900&display=swap'); :root { /* ===== BRAND PALETTE (from PPT template) ===== */ --ds-green: #427155; /* PRIMARY — used for capsule shapes, accents */ --ds-green-dark: #2D4F3B; /* hover / press / darker fills */ --ds-green-darker: #1E3527; /* deep, footer/header backgrounds */ --ds-green-light: #7AA98D; /* tints, dividers, disabled */ --ds-green-pale: #E5EFE9; /* surface tint */ --ds-cream: #F3EBD7; /* SECONDARY — paper / band */ --ds-cream-light: #FAF6EC; /* page background variant */ --ds-cream-dark: #E4D8BD; /* cream border / divider */ --ds-ink: #161A17; /* near-black text, with subtle green undertone */ --ds-black: #000000; /* pure black, used in logo */ --ds-white: #FFFFFF; /* Neutrals */ --ds-gray-900: #1F2520; --ds-gray-800: #2E3631; --ds-gray-700: #4A524C; --ds-gray-600: #6B736E; --ds-gray-500: #8C938F; --ds-gray-400: #B0B5B2; --ds-gray-300: #D2D5D3; --ds-gray-200: #E6E8E7; --ds-gray-100: #F2F3F2; --ds-gray-50: #F9FAF9; /* ===== SEMANTIC ROLES ===== */ /* Foreground */ --fg-1: var(--ds-ink); /* default text */ --fg-2: var(--ds-gray-700); /* secondary text */ --fg-3: var(--ds-gray-500); /* tertiary / meta */ --fg-inverse: var(--ds-white); --fg-brand: var(--ds-green); /* Background */ --bg-1: var(--ds-white); /* primary surface */ --bg-2: var(--ds-cream-light); /* page bg, soft */ --bg-3: var(--ds-cream); /* band, secondary surface */ --bg-brand: var(--ds-green); /* brand surface */ --bg-brand-soft: var(--ds-green-pale); /* Border */ --border-1: var(--ds-gray-200); --border-2: var(--ds-cream-dark); --border-strong: var(--ds-ink); /* Status (kept muted to fit B2B/industrial tone) */ --status-success: #427155; /* reuses brand */ --status-info: #3A6B8C; --status-warning: #C28A2E; --status-danger: #B04A3F; /* ===== TYPOGRAPHY ===== */ --font-kr: "Noto Sans KR", "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif; --font-en: "Noto Sans", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: var(--font-kr); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Weight scale — Noto Sans CJK is heavy at 700; 900 for display, 400 default */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 900; /* Type scale. Print/CI guidance: 제목 18–14pt 진하게, 본문 12–14pt. Screen scale is generous; slides use the dedicated --slide-* set below. */ --t-display-1: 88px; /* hero cover */ --t-display-2: 64px; --t-h1: 44px; --t-h2: 32px; --t-h3: 24px; --t-h4: 20px; --t-body-lg: 18px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 12px; --t-overline: 11px; /* Line heights (Korean glyphs need looser leading than Latin) */ --lh-tight: 1.15; /* headlines */ --lh-snug: 1.35; /* subheads */ --lh-normal:1.55; /* body Korean */ --lh-loose: 1.75; /* long-form Korean */ /* Letter-spacing — Korean rarely uses tracking; small negative for English heads */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.06em; /* caps eyebrows */ --ls-wider: 0.14em; /* Slide-only scale (designed for 1280×720 stage). */ --slide-display: 96px; --slide-title: 56px; --slide-subtitle:32px; --slide-body: 24px; --slide-caption: 18px; --slide-meta: 14px; /* ===== RADII ===== */ /* The capsule is the brand's defining shape. Use 999px liberally. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-capsule: 9999px; /* ===== SPACING ===== */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ===== ELEVATION (used sparingly — brand is flat-and-graphic) ===== */ --shadow-sm: 0 1px 2px rgba(22, 26, 23, 0.06), 0 1px 1px rgba(22, 26, 23, 0.04); --shadow-md: 0 6px 16px -4px rgba(22, 26, 23, 0.10), 0 2px 4px rgba(22, 26, 23, 0.06); --shadow-lg: 0 18px 40px -12px rgba(22, 26, 23, 0.18), 0 8px 16px -8px rgba(22, 26, 23, 0.10); --shadow-inset: inset 0 0 0 1px rgba(22, 26, 23, 0.08); /* ===== MOTION ===== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; } /* ========================================================= Semantic element styles — drop-in for body content. ========================================================= */ .ds-root { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; word-break: keep-all; /* Korean: avoid mid-word breaks */ overflow-wrap: break-word; } .ds-display-1 { font-family: var(--font-sans); font-weight: var(--w-black); font-size: var(--t-display-1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .ds-display-2 { font-family: var(--font-sans); font-weight: var(--w-black); font-size: var(--t-display-2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .ds-h1, h1.ds { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; } .ds-h2, h2.ds { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0; } .ds-h3, h3.ds { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--t-h3); line-height: var(--lh-snug); margin: 0; } .ds-h4, h4.ds { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-snug); margin: 0; } .ds-body { font-size: var(--t-body); line-height: var(--lh-normal); } .ds-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-normal); } .ds-body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); } .ds-caption { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-3); } .ds-overline { font-size: var(--t-overline); font-weight: var(--w-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--fg-2); } .ds-mono { font-family: var(--font-mono); } /* Capsule — the signature shape. */ .ds-capsule { display: inline-flex; align-items: center; padding: var(--s-2) var(--s-5); border-radius: var(--r-capsule); background: var(--bg-brand); color: var(--fg-inverse); font-weight: var(--w-bold); letter-spacing: var(--ls-wide); } /* Decorative half-capsule that bleeds off the left edge of a slide. */ .ds-capsule-bleed { position: absolute; left: -8%; height: 200px; width: 60%; background: var(--bg-brand); border-radius: 0 var(--r-capsule) var(--r-capsule) 0; }