/* ============================================================================ Design Tokens — 라이트 프리미엄 (2026) · non-AI 에디토리얼/엔지니어링 톤 랜딩 전용 셸(site_base.html)에서 로드. lessons.css 와 독립. 다크(prefers-color-scheme)·reduced-motion 대비 구조를 미리 포함(후속 확산용). ============================================================================ */ /* 폰트: Gowun Batang(제목·세리프)+Pretendard(본문)+JetBrains Mono(라벨) — base.html 에서 CDN 로드. 패밀리·역할·폴백은 아래 Typography 토큰 참조. */ :root { color-scheme: light; /* --- Palette: 웜 페이퍼 + 잉크 블랙 + 헤어라인 --- */ --paper: #FBFAF8; --surface: #FFFFFF; --surface-2: #F4F2ED; --ink: #0A0A0A; --ink-2: #2A2723; --muted: #6B6660; --faint: #9A948C; --line: rgba(10, 10, 10, .09); --line-strong:rgba(10, 10, 10, .16); /* 배경 셰이더(hero.js) 전용 듀오톤 — UI 토큰과 분리(셰이더는 베이스에 치우쳐 렌더되므로 별도 튜닝). 라이트: 밝은 종이 위 어두운 잉크가 흐른다. */ --bg-base: #FBFAF8; /* 셰이더 베이스(대부분 면적) */ --bg-ink: #0E1728; /* 흐름 리지 톤 (라이트: 밝은 종이에 어두운 잉크) */ --bg-amt: 1; /* 흐름 강도(대비) 배율 */ /* --- Brand: 단일 절제 액센트 (트랙별 2색) --- */ --brand: #0B5CFF; /* 부트캠프 */ --brand-ink: #0642BE; --brand-2: #0E9F6E; /* 심화 */ --brand-2-ink:#0A7A54; --brand-3: #7C3AED; /* 로테이션 3 (violet) */ --brand-4: #D97706; /* 로테이션 4 (amber) */ --brand-wash: rgba(11, 92, 255, .07); --brand-line: rgba(11, 92, 255, .22); --brand-2-wash: rgba(14, 159, 110, .09); --brand-2-line: rgba(14, 159, 110, .24); --brand-3-wash: rgba(124, 58, 237, .07); --brand-3-line: rgba(124, 58, 237, .22); --brand-4-wash: rgba(217, 119, 6, .08); --brand-4-line: rgba(217, 119, 6, .24); /* --- Typography --- 한글 폰트 시스템(CDN, base.html 로드) — 딱딱함을 덜기 위해 제목에 세리프: · --font-display : Gowun Batang(고운바탕, 세리프) — 제목·히어로 (따뜻·에디토리얼) · --font-sans : Pretendard — 본문·UI 기본 (한글 웹 표준) · --font-mono : JetBrains Mono — 라벨·카운트·코드 (한글은 Pretendard 폴백) CDN 미로드 시 --font-system 시스템 스택으로 자연 폴백. */ --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", Roboto, sans-serif; /* 폴백 시스템 스택 */ --font-sans: "Pretendard Variable", Pretendard, var(--font-system); /* 본문·UI */ --font-display: "Do Hyeon", "Gowun Batang", "Nanum Myeongjo", var(--font-sans); /* 제목·디스플레이 — 최초 기본 배민 도현 */ --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --t-display: clamp(2.75rem, 6.5vw, 5rem); --t-h1: clamp(2rem, 4.4vw, 3.25rem); --t-h2: clamp(1.5rem, 3vw, 2.125rem); --t-h3: 1.375rem; --t-body: 1.0625rem; /* 17px */ --t-sm: 0.875rem; --t-xs: 0.75rem; --lh-tight: 1.08; --lh-snug: 1.35; --lh-body: 1.65; --tracking-tight: -0.022em; /* --- Spacing (8pt) --- */ --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; --sp-10: 128px; /* --- Radius: 절제·각진 프로페셔널 (둥근 AI 톤 배제. pill 은 상태점 등 극히 제한적으로만) --- */ --r-xs: 2px; --r-sm: 3px; --r-md: 5px; --r-lg: 7px; --r-xl: 10px; --r-pill: 999px; /* --- Shadow: 타이트·크리스프 (넓은 글로우 대신 헤어라인+얕은 그림자) --- */ --shadow-sm: 0 1px 2px rgba(10,10,10,.06); --shadow-md: 0 2px 8px -2px rgba(10,10,10,.10), 0 1px 2px rgba(10,10,10,.06); --shadow-lg: 0 16px 40px -22px rgba(10,10,10,.24), 0 2px 8px -4px rgba(10,10,10,.10); /* --- Motion --- */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-1: .18s; --dur-2: .34s; --dur-3: .6s; /* --- Layout --- */ --nav-h: 68px; --maxw: min(1200px, 82vw); /* 와이드=1200px 유지, 좁은 화면=82vw → 좌우 여백(플로우) 비례 확보 */ --gutter: clamp(20px, 5vw, 64px); /* --- Control height (버튼·칩·토글 등 인터랙티브 컨트롤 공유 높이 — 일관성) --- */ --control-h: 40px; /* 기본(nav 등) */ --control-h-lg: 46px; /* 큰 컨텍스트(히어로 CTA·블록 버튼·드로어) */ } /* 다크 테마 — 팔레트만 오버라이드하면 var(--paper)/var(--ink) 등을 쓰는 셸·컴포넌트 전체가 적응. 적용 방식: theme.js(+ base.html 인라인 프리페인트 스크립트)가 사용자 선택(시스템/라이트/다크)을 해석해 항상 를 부여한다. '시스템'은 prefers-color-scheme 로 해석. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #0B0C0E; --surface: #141619; --surface-2: #1B1E22; --ink: #F4F3F0; --ink-2: #D6D3CD; --muted: #9A948C; --faint: #6B6660; --line: rgba(255, 255, 255, .10); --line-strong:rgba(255, 255, 255, .18); /* 다크: 베이스를 순검정(--paper #0B0C0E)이 아니라 살짝 들뜬 다크 네이비 표면으로 → 배경이 '검정 void'가 아니라 어두운 표면으로 읽히고, 그 위로 더 밝은 네이비 잉크가 흐른다(리지 가시성 확보). */ --bg-base: #10141C; /* 다크: 어두운 표면(순검정 아님) */ --bg-ink: #DCE6F5; /* 다크: 라이트의 반전 — 어두운 표면에 '흰색(쿨 화이트) 잉크'가 흐른다 */ --bg-amt: 1.5; /* 다크는 흐름 리지가 sparse 해 강도를 올려 또렷하게 */ --brand: #4C82FF; --brand-ink: #9DBBFF; --brand-2: #34D399; --brand-2-ink:#6EE7B7; --brand-3: #A78BFA; --brand-4: #FBBF24; --brand-wash: rgba(76, 130, 255, .12); --brand-line: rgba(76, 130, 255, .30); --brand-2-wash: rgba(52, 211, 153, .14); --brand-2-line: rgba(52, 211, 153, .30); --brand-3-wash: rgba(167, 139, 250, .12); --brand-3-line: rgba(167, 139, 250, .30); --brand-4-wash: rgba(251, 191, 36, .12); --brand-4-line: rgba(251, 191, 36, .30); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 2px 8px -2px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); --shadow-lg: 0 28px 56px -20px rgba(0,0,0,.6), 0 10px 24px -14px rgba(0,0,0,.5); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: .001s; --dur-2: .001s; --dur-3: .001s; } html { scroll-behavior: auto !important; } } * { box-sizing: border-box; }