/* ============================================================ DESIGN TOKENS — MuseCat "Audio" design system Warm gallery palette: cream paper, deep-green forest, gold. Single light theme (the brand commits to one warm look). Legacy token names are kept as aliases so faq/blog pages inherit the new palette without per-rule edits. ============================================================ */ /* 폰트는 @import 로 불러오지 않는다. CSS @import 는 직렬화되어 tokens.css 를 받아 파싱한 뒤에야 폰트 스타일시트를 "발견"한다. 그 3홉이 전부 렌더 차단이었다. Playfair(디스플레이)는 자체 호스팅한다 — Google Fonts 동적 임베드는 방문자 IP 를 구글로 보내고, 로케일 10개 중 5개가 EU(de·fr·it·es·pt)다. 베트남어 서브셋은 사이트 로케일에 없어 제외했다. 6파일 162KB. Pretendard(본문)는 jsdelivr 유지하되 HTML 로 옮겨 워터폴을 없앴다. 전체 variable 이 2MB 인데 대부분 한글 글리프이고 이 사이트엔 한국어 로케일이 없다. 라틴 전용 폰트로 교체하는 편이 맞지만 본문 서체가 바뀌는 디자인 변경이라 별도 판단으로 남긴다. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/playfair-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/playfair-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/playfair-normal-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/fonts/playfair-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/fonts/playfair-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/fonts/playfair-italic-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { /* ---- New brand palette ---- */ --paper: #FAF8F3; /* base background */ --paper-2: #F3EFE6; /* recessed / alt background */ --forest: #2F4F43; /* primary green */ --forest-dark: #243d34; /* hover green */ --forest-tint: #E5EBE6; /* light green surface */ --gold: #D4AF37; /* accent / highlights */ --gold-deep: #C9A24B; --ink: #1F1F1F; /* primary text */ --slate: #4E5F56; /* secondary text (green-tinted) */ --stone: #6E6A60; /* muted text */ --stone-2: #8A857B; /* softer muted */ --stone-3: #9A958A; /* softest muted */ --line: rgba(82, 82, 91, 0.08); /* hairline */ --line-2: rgba(82, 82, 91, 0.14); /* stronger hairline */ /* Semantic */ --red: #EF1026; --red-soft: #FEE8EA; --green: #2F4F43; --green-soft: #E5EBE6; /* Pure */ --white: #ffffff; --black: #000000; /* ---- Legacy aliases (used by components/patterns/faq/blog) ---- */ --blue: var(--forest); --blue-dark: var(--forest-dark); --blue-soft: var(--forest-tint); --blue-tint: #EDF2ED; --blue-bright: var(--gold); --amber: var(--gold); /* 본문 텍스트는 --stone 이상만 사용한다. --stone-2(#8A857B)는 paper 위에서 3.46:1, --stone-3(#9A958A)는 약 2.9:1 로 WCAG AA 본문 기준(4.5:1)에 미달한다. --stone(#6E6A60)은 5.08:1 로 통과. --stone-2 / --stone-3 는 텍스트가 아닌 장식 용도로만 쓸 것. */ --muted: var(--stone); --border: #E8E2D6; --border-soft: #F0EBE0; --bg: var(--paper); --bg-soft: var(--paper-2); --bg-card: #ffffff; --bg-tinted: var(--forest-tint); --border-tinted: rgba(47, 79, 67, 0.22); --bg-overlay: rgba(31, 31, 31, 0.55); /* ---- Type ---- */ --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-head: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* UI / labels */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; /* display headings */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 38px; --text-4xl: 44px; --leading-tight: 1.15; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7; --tracking-tight: -1px; --tracking-snug: -0.5px; --tracking-wide: 0.08em; /* ---- Radius ---- */ --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 28px; --radius-pill: 9999px; --radius-full: 9999px; /* ---- Spacing ---- */ --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; --space-24: 96px; /* ---- Shadow (green-tinted) ---- */ --shadow-sm: 0 4px 20px rgba(31, 31, 31, 0.06); --shadow-blue: 0 12px 28px rgba(47, 79, 67, 0.24); --shadow-blue-hover: 0 16px 34px rgba(47, 79, 67, 0.30); --shadow-blue-lg: 0 12px 28px rgba(47, 79, 67, 0.24); --shadow-blue-lg-hover: 0 18px 40px rgba(47, 79, 67, 0.32); --shadow-gold: 0 12px 28px rgba(212, 175, 55, 0.34); --shadow-card: 0 18px 44px rgba(47, 79, 67, 0.10); --shadow-modal: 0 24px 48px rgba(31, 31, 31, 0.22); /* ---- Transitions ---- */ --t-fast: 0.15s; --t-base: 0.2s; --t-slow: 0.3s; --t-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* ---- Layout ---- */ --container: 1160px; --container-narrow: 880px; --container-prose: 720px; }