/* ===================================================================== MIND LINKER — Design System Tokens "정신건강을 챙기는 것은 힙한 것" Sage-green rooted signature gradient · trust × trendy · light + dark v2 — 전면 OKLCH · 배경 인식(weight) 타이포 · 컬러 다층 그림자 ===================================================================== */ /* ---- Fonts ---- */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css'); @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); :root { /* ============ BRAND RAMPS (OKLCH) ============ */ /* Primary — Sage / Mint Green (trust, calm, the root) */ --green-50: oklch(97.1% 0.021 161.5); --green-100: oklch(92.9% 0.047 161.8); --green-200: oklch(87.3% 0.079 162.5); --green-300: oklch(79.9% 0.112 162.6); --green-400: oklch(72.2% 0.135 162.7); --green-500: oklch(64.7% 0.134 162.2); /* primary */ --green-600: oklch(56.3% 0.116 162.8); --green-700: oklch(48.0% 0.095 164.2); --green-800: oklch(40.9% 0.078 164.6); --green-900: oklch(32.4% 0.057 166.0); /* Secondary — Emerald / Teal (the lift toward trendy) */ --teal-50: oklch(97.2% 0.022 186.5); --teal-100: oklch(93.0% 0.052 184.4); --teal-200: oklch(87.2% 0.087 185.7); --teal-300: oklch(80.1% 0.115 186.0); --teal-400: oklch(72.2% 0.119 187.2); --teal-500: oklch(62.5% 0.104 194.0); --teal-600: oklch(53.6% 0.089 197.9); --teal-700: oklch(45.2% 0.074 200.0); --teal-800: oklch(38.5% 0.061 203.0); --teal-900: oklch(31.0% 0.047 203.8); /* Tertiary — Cyan (the trendy edge) */ --cyan-50: oklch(96.8% 0.019 217.2); --cyan-100: oklch(92.4% 0.047 218.5); --cyan-200: oklch(86.6% 0.082 216.7); --cyan-300: oklch(79.3% 0.116 219.1); --cyan-400: oklch(71.7% 0.130 224.5); --cyan-500: oklch(61.8% 0.122 232.1); --cyan-600: oklch(52.5% 0.106 234.6); --cyan-700: oklch(44.6% 0.087 235.0); --cyan-800: oklch(38.8% 0.072 236.1); --cyan-900: oklch(31.8% 0.051 229.0); /* Accent — Electric Lime (used VERY sparingly: hype pops) */ --lime: oklch(90.3% 0.208 122.9); --lime-soft: oklch(93.3% 0.158 119.7); --lime-ink: oklch(32.5% 0.079 122.5); /* ============ SEMANTIC — CORAL (v1.1) ============ 파괴적(되돌릴 수 없는) 동작·다정한 경고 전용. 브랜드 그린과 보색으로 조화. 주의: 감정 데이터("가라앉음" 등)에는 절대 쓰지 않음 — 감정은 부정적이어도 채도 낮은 브랜드 컬러(cyan/teal)로 표현합니다. */ --coral: oklch(63.5% 0.166 27.5); --coral-600: oklch(56.0% 0.150 27.8); --coral-soft: oklch(94.2% 0.038 30.0); --coral-ink: oklch(43.5% 0.118 29.0); --coral-line: oklch(86.0% 0.064 30.0); /* ============ SIGNATURE GRADIENT ============ */ --sig-a: oklch(84.8% 0.109 156.5); /* mint-sage */ --sig-b: oklch(72.0% 0.128 172.5); /* emerald */ --sig-c: oklch(64.1% 0.116 223.4); /* cyan-teal */ --sig-d: oklch(55.3% 0.144 248.6); /* deep cyan */ --grad-signature: linear-gradient(115deg, var(--sig-a) 0%, var(--sig-b) 46%, var(--sig-c) 82%, var(--sig-d) 100%); --grad-signature-soft: linear-gradient(115deg, oklch(88.5% 0.086 158.2) 0%, oklch(77.6% 0.110 173.5) 50%, oklch(70.1% 0.111 220.9) 100%); --grad-vert: linear-gradient(180deg, var(--sig-a) 0%, var(--sig-c) 100%); --grad-radial: radial-gradient(120% 120% at 18% 12%, oklch(87.3% 0.097 157.9) 0%, oklch(72.0% 0.128 172.5) 42%, oklch(64.1% 0.116 223.4) 76%, oklch(55.3% 0.144 248.6) 100%); --grad-mesh: radial-gradient(60% 80% at 12% 16%, oklch(84.8% 0.109 156.5 / .95) 0%, oklch(84.8% 0.109 156.5 / 0) 60%), radial-gradient(55% 75% at 88% 14%, oklch(71.7% 0.130 224.5 / .85) 0%, oklch(71.7% 0.130 224.5 / 0) 58%), radial-gradient(70% 90% at 76% 92%, oklch(55.3% 0.144 248.6 / .9) 0%, oklch(55.3% 0.144 248.6 / 0) 60%), radial-gradient(60% 80% at 22% 90%, oklch(72.0% 0.128 172.5 / .9) 0%, oklch(72.0% 0.128 172.5 / 0) 62%), linear-gradient(120deg, oklch(64.7% 0.134 162.2), oklch(62.5% 0.104 194.0) 55%, oklch(61.8% 0.122 232.1)); --grad-iris: conic-gradient(from 210deg at 50% 50%, var(--sig-a), var(--sig-b), var(--sig-c), var(--sig-d), var(--sig-b), var(--sig-a)); /* Metallic chrome sheet (emerald-tinted) */ --grad-metal: linear-gradient(160deg, oklch(97.1% 0.021 161.5) 0%, oklch(89.9% 0.051 166.0) 18%, oklch(77.1% 0.098 170.0) 38%, oklch(92.1% 0.041 164.7) 52%, oklch(62.1% 0.101 176.9) 70%, oklch(88.9% 0.050 174.2) 84%, oklch(52.2% 0.089 176.5) 100%); --grad-metal-cyan: linear-gradient(160deg, oklch(96.9% 0.018 218.4) 0%, oklch(89.6% 0.053 217.5) 20%, oklch(77.0% 0.102 218.4) 40%, oklch(93.7% 0.032 216.2) 54%, oklch(61.3% 0.119 233.5) 72%, oklch(86.5% 0.056 219.4) 86%, oklch(46.5% 0.084 227.9) 100%); /* ============ TYPE ============ */ --font-display: 'Space Grotesk', 'Pretendard', sans-serif; --font-body: 'Pretendard', 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; /* ---- Raw weight scale ---- */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ---- Background-aware weight roles (LIGHT default) ---- 어두운 배경에서 밝은 글자는 광학적으로 굵어 보입니다(halation/irradiation). 라이트 테마는 표기 weight 그대로, 다크 테마(아래)는 한 단계 낮춰 "흰 배경의 세미볼드 = 검은 배경의 미디엄"이 광학적으로 일치하도록 보정합니다. 역할 토큰만 쓰면 테마 전환 시 자동으로 광학 보정됩니다. */ --fw-body: var(--w-regular); /* 본문 L400 / D400 */ --fw-label: var(--w-medium); /* 라벨·캡션 강조 L500 / D400 */ --fw-strong: var(--w-semibold); /* UI 강조·버튼·칩 L600 / D500 ← 핵심 케이스 */ --fw-heading: var(--w-semibold); /* 소제목 L600 / D500 */ --fw-display: var(--w-bold); /* 디스플레이 L700 / D600 */ --fw-mono: var(--w-bold); /* 모노 마이크로 라벨 (트래킹·소형이라 보정 제외) */ /* ---- Type scale ---- 하나의 모듈러 스케일. 큰 단계일수록 fluid(clamp)로 뷰포트에 반응하고, 작은 단계는 고정합니다. 위계는 "크기로 먼저, 굵기로 나중"이 원칙입니다. */ --fs-micro: 11px; /* 모노 마이크로 라벨 */ --fs-cap: 13px; /* 캡션·내비·보조 라벨 */ --fs-sm: 14.5px; /* 작은 본문·버튼 */ --fs-base: 17px; /* 본문 */ --fs-lg: 20px; /* 리드·강조 본문 */ --fs-xl: 26px; /* 소제목 */ --fs-2xl: clamp(30px, 3.4vw, 38px); /* 섹션 타이틀 */ --fs-3xl: clamp(40px, 5vw, 54px); /* 디스플레이 */ --fs-4xl: clamp(52px, 7.5vw, 82px); /* 히어로 */ --lh-tight: 1.04; --lh-snug: 1.22; --lh-body: 1.62; --tr-tight: -0.03em; --tr-label: 0.16em; /* ============ SPACE / RADII ============ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; --r-2xl: 44px; --r-pill: 999px; /* ============ MOTION (v1.1) ============ transform 기반. 무한 장식 루프는 머티리얼 데모(sheen/drift) 외 금지. prefers-reduced-motion 존중 — 진입 애니메이션은 미디어 쿼리로 게이트. */ --ease: cubic-bezier(.22,.61,.36,1); /* 기본 — 호버·색·이동 */ --ease-spring: cubic-bezier(.22,.8,.28,1); /* 등장 — 시트·카드 rise */ --dur-fast: 120ms; /* 프레스·탭 피드백 */ --dur-base: 200ms; /* 호버·색·테두리 */ --dur-slow: 420ms; /* 등장·시트·화면 전환 */ /* ============ LIGHT THEME (default) ============ */ --bg: oklch(96.0% 0.007 160.1); --bg-tint: oklch(93.5% 0.012 162.0); --surface: oklch(100% 0 160); --surface-2: oklch(97.6% 0.004 157.2); --ink: oklch(25.8% 0.035 173.6); --ink-2: oklch(41.8% 0.041 170.0); --ink-3: oklch(60.6% 0.040 169.3); --line: oklch(90.2% 0.016 160.6); --line-soft: oklch(94.2% 0.011 158.8); /* Glass */ --glass-bg: oklch(100% 0 160 / 0.55); --glass-stroke: oklch(100% 0 160 / 0.7); --glass-blur: 22px; /* Neumorphism (light) */ --neu-bg: oklch(94.2% 0.010 155.1); --neu-light: oklch(100% 0 160); --neu-dark: oklch(85.1% 0.018 164.6); --neu-out: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light); --neu-in: inset 6px 6px 13px var(--neu-dark), inset -6px -6px 13px var(--neu-light); /* ============ COLORED MULTI-LAYER SHADOWS ============ 회색/검정 그림자 금지. 브랜드 그린→시안 색조를 깊이에 따라 겹겹이 쌓아(2~4겹) 입체감과 브랜드감을 동시에 냅니다. 깊어질수록 hue가 그린(165)→시안(205)으로 미세하게 흐릅니다. */ --sh-1: 0 1px 2px oklch(48.0% 0.095 164.2 / 0.10), 0 2px 6px oklch(52.0% 0.100 168.0 / 0.10), 0 5px 14px oklch(56.0% 0.105 178.0 / 0.07); --sh-2: 0 1px 2px oklch(48.0% 0.095 164.2 / 0.10), 0 5px 12px oklch(52.0% 0.100 170.0 / 0.12), 0 12px 26px oklch(57.0% 0.108 188.0 / 0.11), 0 22px 44px oklch(60.0% 0.105 200.0 / 0.08); --sh-3: 0 1px 3px oklch(48.0% 0.095 164.2 / 0.13), 0 8px 20px oklch(52.0% 0.102 172.0 / 0.14), 0 20px 44px oklch(57.0% 0.108 192.0 / 0.15), 0 38px 76px oklch(60.0% 0.100 208.0 / 0.11); /* Glow — colored, multi-layer (primary green / cyan) */ --sh-glow: 0 2px 6px oklch(56.3% 0.116 162.8 / 0.28), 0 8px 22px oklch(64.7% 0.134 162.2 / 0.34), 0 16px 44px oklch(64.7% 0.134 162.2 / 0.26); --sh-glow-cyan: 0 2px 6px oklch(52.5% 0.106 234.6 / 0.30), 0 8px 22px oklch(61.8% 0.122 232.1 / 0.36), 0 16px 46px oklch(61.8% 0.122 232.1 / 0.28); color-scheme: light; } [data-theme="dark"] { /* ---- Semantic coral — 다크에서 살짝 밝혀 가독 유지 ---- */ --coral: oklch(67.0% 0.165 27.0); --coral-600: oklch(60.0% 0.150 27.5); --coral-soft: oklch(31.0% 0.072 28.0 / 0.55); --coral-ink: oklch(82.0% 0.090 30.0); --coral-line: oklch(40.0% 0.085 28.0); /* ---- Background-aware weights: 한 단계씩 낮춰 광학 보정 ---- */ --fw-body: var(--w-regular); /* 400 (본문은 최저 단계 유지) */ --fw-label: var(--w-regular); /* 500 → 400 */ --fw-strong: var(--w-medium); /* 600 → 500 ← 흰 배경 세미볼드와 광학적 일치 */ --fw-heading: var(--w-medium); /* 600 → 500 */ --fw-display: var(--w-semibold); /* 700 → 600 */ --fw-mono: var(--w-bold); /* 모노는 유지 */ --bg: oklch(17.0% 0.018 175.3); --bg-tint: oklch(20.2% 0.024 171.6); --surface: oklch(22.7% 0.025 173.2); --surface-2: oklch(24.3% 0.025 173.5); --ink: oklch(96.3% 0.015 164.7); --ink-2: oklch(81.7% 0.035 170.5); --ink-3: oklch(63.0% 0.043 171.8); --line: oklch(30.6% 0.034 170.8); --line-soft: oklch(26.1% 0.031 160.2); --glass-bg: oklch(28.0% 0.030 172.0 / 0.42); --glass-stroke: oklch(84.8% 0.109 156.5 / 0.18); --glass-blur: 24px; --neu-bg: oklch(21.5% 0.023 170.9); --neu-light: oklch(28.6% 0.034 177.0); --neu-dark: oklch(14.9% 0.015 171.2); --neu-out: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light); --neu-in: inset 6px 6px 13px var(--neu-dark), inset -6px -6px 13px var(--neu-light); /* Dark elevation — 깊은 그린·시안 색조의 다층 그림자 (검정 대신 색을 씀) */ --sh-1: 0 1px 2px oklch(12.0% 0.020 172.0 / 0.55), 0 2px 8px oklch(11.0% 0.030 185.0 / 0.45), 0 6px 16px oklch(10.0% 0.040 205.0 / 0.40); --sh-2: 0 1px 3px oklch(12.0% 0.020 172.0 / 0.55), 0 6px 16px oklch(11.0% 0.032 185.0 / 0.50), 0 14px 32px oklch(10.0% 0.042 200.0 / 0.45), 0 26px 52px oklch(9.0% 0.045 212.0 / 0.38); --sh-3: 0 1px 3px oklch(12.0% 0.020 172.0 / 0.55), 0 10px 26px oklch(11.0% 0.034 188.0 / 0.52), 0 24px 52px oklch(10.0% 0.044 200.0 / 0.50), 0 44px 88px oklch(9.0% 0.046 214.0 / 0.42); --sh-glow: 0 2px 6px oklch(48.0% 0.070 165.0 / 0.30), 0 8px 20px oklch(58.0% 0.082 172.5 / 0.22), 0 16px 40px oklch(58.0% 0.082 172.5 / 0.14); --sh-glow-cyan: 0 2px 6px oklch(46.0% 0.066 232.0 / 0.32), 0 8px 20px oklch(57.0% 0.080 226.0 / 0.24), 0 16px 42px oklch(57.0% 0.080 226.0 / 0.15); color-scheme: dark; }