/* ═══════════════════════════════════════════════════════════════════════ Ryan Brand Tokens — v2.1.3 (2026-09-21) SSOT for Creative Lab · Creator OS · Contents Accelerator ─────────────────────────────────────────────────────────────────────── 기준: ✦ 트윈 마크 (마크 D, 2026-09-13 확정) 라이트 = 종이(#faf7ef) 바탕 + 레드(#9c2618) 마크 다크 = 레드 바탕 + 종이 마크 워드마크 = Newsreader 500, 둘째 단어 이탤릭 (Creative *Lab* / Creator *OS* / Contents *Accelerator*) 이탤릭 규칙 (라이언 2026-09-13): · UI 크롬(버튼·라벨·메타·탭·뱃지)의 한글에는 이탤릭을 쓰지 않는다 — 한글 페이스엔 이탤릭이 없어 브라우저가 억지로 기울인 «가짜 기울임» 이 된다. · 글 본문의 «인용» 은 예외다 — blockquote·독자 고민 인용·곁말(em)은 이탤릭으로 둔다. 뉴스레터가 오래 써 온 처리이고, 세리프 + 왼쪽 선과 함께 읽으면 인용으로 잘 읽힌다. · 영문 라벨(ISSUE 01 · 2026 EDITION 류)은 Newsreader 이탤릭 페이스가 있어 자유롭다. 부제 = by moment.ryan 레이아웃 철학: Lenny's Newsletter — 680px 읽기 컬럼, 헤어라인 보더, 그림자 최소, 장식은 ✦ 하나. 색은 4개(배경·종이·잉크·레드)로 끝낸다. 사용: (기본. 생략 가능) (OS 설정 따라감) 구 테마명 editorial-paper / editorial-paper-dark 도 그대로 동작한다 (Creator OS Studio 호환). 규칙: - 컴포넌트·화면 CSS 에 hex 를 쓰지 않는다. 전부 var(--…) 로. - 이 파일은 «값» 만 정의한다. 셀렉터 스타일은 components.css. - 폰트는 여기서 @import 하지 않는다 (렌더 블로킹). README 의 스니펫을 쓴다. ═══════════════════════════════════════════════════════════════════════ */ /* ── 0. 테마 무관 토큰 ─────────────────────────────────────────────────── */ :root { /* 서체 — 영문 세리프가 앞, 한글 명조가 폴백. 본문은 Pretendard. */ --font-display: 'Newsreader', 'Noto Serif KR', Georgia, 'Times New Roman', serif; --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* 호환 별칭 (Studio / 뉴스레터 / Creative Lab 이 쓰던 이름) */ --font-serif: var(--font-display); --font-serif-en: var(--font-display); --font-serif-display: var(--font-display); --serif: var(--font-display); --sans: var(--font-sans); --mono: var(--font-mono); --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-display: 500; /* 헤드라인·워드마크. 600 이상은 쓰지 않는다 */ /* 타입 스케일 — 16px 기준, 1.125~1.2 단계. 한 화면에 3단계까지만. */ --text-2xs: 0.6875rem; /* 11 — 캡션 최소 */ --text-xs: 0.75rem; /* 12 — 뱃지·메타 */ --text-sm: 0.875rem; /* 14 — 보조 */ --text-base: 1rem; /* 16 — UI 본문 */ --text-prose: 1.125rem; /* 18 — 읽기 본문 (Lenny 18~19) */ --text-md: 1.125rem; /* 18 — 리드 */ --text-lg: 1.25rem; /* 20 — 소제목·워드마크 */ --text-xl: 1.5rem; /* 24 — 섹션 제목 */ --text-2xl: 1.875rem; /* 30 — 페이지 제목 */ --text-3xl: 2.25rem; /* 36 — 히어로 */ --text-display: 2.75rem; /* 44 — 랜딩 히어로 */ --text-display-sm: var(--text-2xl); --text-display-md: var(--text-3xl); --text-display-lg: var(--text-display); --leading-none: 1; --leading-display: 1.1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.75; --tracking-display: -0.015em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.06em; --tracking-mono: 0.02em; /* 간격 — 4px 그리드 */ --space-0: 0; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-3); --space-lg: var(--space-4); --space-xl: var(--space-6); --space-2xl: var(--space-8); --space-3xl: var(--space-12); /* 컴포넌트 내부 리듬 */ --gap-label-control: var(--space-2); --gap-control-hint: var(--space-1); --gap-group: var(--space-4); --gap-section: var(--space-10); /* 모서리 — 플랫 에디토리얼. 카드 12, 버튼·입력 8, 칩 full. */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; /* 여러 줄로 자라는 입력칸용 — 한 줄(46px)에서는 브라우저가 높이의 절반(23px)으로 클램프해 알약과 똑같이 보이고, 여러 줄로 커져도 `--radius-full` 처럼 양끝이 부풀지 않는다. (2026-09-20 채팅 입력칸: 9999px 로 두니 5줄에서 곡선이 글자를 23.7px 먹었다) */ --radius-3xl: 24px; --radius-full: 9999px; /* 모션 — 스프링 없음. 진입 ease-out, 퇴장 ease-in. 300ms 넘기지 않는다. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-default: var(--ease-out); --ease-spring: var(--ease-out); /* 호환 별칭 — 스프링은 쓰지 않는다 */ --duration-instant: 60ms; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 280ms; --duration-spring: var(--duration-slow); --press-scale: 0.98; --hover-lift: 0px; /* 들어올리지 않는다 — 보더 강조로 호버를 표현 */ --hover-opacity: 0.85; --focus-ring-width: 2px; --focus-ring-offset: 2px; /* 레이어 */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-panel: 500; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-alert: 1200; /* 레이아웃 */ --measure: 680px; /* 읽기 컬럼 (Lenny) */ --page-max-width: 1180px; /* 앱·대시보드 */ --page-padding: 22px; --header-height: 56px; --panel-width: 360px; --touch-target: 44px; --touch-gap: 8px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* 컴포넌트 치수 */ --btn-height: 44px; --btn-height-sm: 36px; --btn-height-lg: 52px; --btn-padding-x: 20px; --btn-radius: var(--radius-md); --btn-font-size: 0.9375rem; /* 15 */ --btn-font-weight: var(--font-weight-medium); --input-height: 44px; --input-radius: var(--radius-md); --input-padding-x: 14px; --input-font-size: 1rem; /* 16 — iOS 포커스 확대 방지 */ --card-radius: var(--radius-lg); --card-padding: 22px; --card-gap: var(--space-4); --badge-radius: var(--radius-full); --badge-font-size: var(--text-xs); --badge-padding: 2px 9px; --chip-height: 36px; --chip-radius: var(--radius-full); --table-cell-padding: 10px 12px; --table-font-size: var(--text-sm); --modal-width: min(92vw, 520px); --modal-radius: var(--radius-xl); --modal-padding: 28px; --modal-blur: 8px; --toast-radius: var(--radius-md); --toast-duration: 2600ms; --progress-height: 4px; --nav-blur: 10px; --brand-mark-size: 24px; --wordmark-size: var(--text-lg); --divider-glyph: "✦"; } /* ── 1. 라이트 (기본) — 종이 위 잉크, 레드 하나 ────────────────────────── */ :root, [data-theme="light"], [data-theme="editorial-paper"] { color-scheme: light; --bg-base: #f4f0e6; /* 페이지 배경 */ --bg-surface: #faf7ef; /* 종이 — 카드·입력·내비 */ --bg-elevated: #ede8db; /* 한 단 올린 면 — 코드·표 헤더·호버 */ --bg-elevated-2: #e3dcca; --bg-inverse: #171717; --text-primary: #171717; --text-secondary: rgba(23,23,23,0.70); --text-tertiary: rgba(23,23,23,0.58); /* 종이 위 4.9:1 */ --text-ghost: rgba(23,23,23,0.32); --text-inverse: #faf7ef; --color-accent: #9c2618; --accent-hover: #7e1d12; --accent-active: #6a1710; --on-accent: #faf7ef; /* 규칙: 레드 위에는 언제나 종이. 잉크(검정)를 올리지 않는다 (라이언 2026-09-13) */ --accent-text: #9c2618; /* 링크·강조 글자 (종이 위 7.2:1) */ --accent-bg: rgba(156,38,24,0.08); --accent-bg-strong: rgba(156,38,24,0.14); --accent-glow: none; --color-accent-soft: #c4503f; /* 시맨틱 — 종이 톤에 맞춘 저채도. 위험 = 브랜드 레드 (파괴 액션은 확인 단계로 구분) */ --color-success: #3f6b4c; --success-text: #3f6b4c; --success-bg: rgba(63,107,76,0.10); --success-line: rgba(63,107,76,0.30); --color-warning: #8a5a00; --warning-text: #8a5a00; --warning-bg: rgba(138,90,0,0.10); --warning-line: rgba(138,90,0,0.32); --color-danger: var(--color-accent); --danger-text: var(--accent-text); --danger-bg: var(--accent-bg); --danger-line: rgba(156,38,24,0.30); --color-info: #3b5f8a; --info-text: #3b5f8a; --info-bg: rgba(59,95,138,0.10); --info-line: rgba(59,95,138,0.30); --success-hover: #335a3f; --color-success-strong: #335a3f; --color-danger-strong: var(--accent-hover); --border-subtle: rgba(23,23,23,0.10); --border-emphasis: rgba(23,23,23,0.18); --border-strong: rgba(23,23,23,0.32); --border-focus: rgba(156,38,24,0.40); --shadow-sm: 0 1px 2px rgba(23,23,23,0.05); --shadow-md: 0 4px 16px rgba(23,23,23,0.08); --shadow-lg: 0 16px 40px rgba(23,23,23,0.14); --shadow-glow: none; --overlay: rgba(23,23,23,0.48); --nav-bg: rgba(244,240,230,0.88); --gradient-accent: none; --gradient-surface: none; --noise-opacity: 0; --chart-primary: #9c2618; --chart-secondary: #c4503f; --chart-tertiary: rgba(23,23,23,0.30); /* 브랜드 마크 색 (로고 규칙과 동일) */ --brand-mark: var(--color-accent); --brand-ink: var(--text-primary); /* 짧은 별칭 — 뉴스레터(styles.py)·Creative Lab 호환 */ --paper-bg: var(--bg-base); --paper: var(--bg-surface); --ink: var(--text-primary); --red: var(--color-accent); --red-dark: var(--accent-hover); --line: var(--border-emphasis); --line-soft: var(--border-subtle); } /* ── 2. 다크 — 잉크 위 종이, 레드는 한 단 들어올림 ────────────────────── */ [data-theme="dark"], [data-theme="editorial-paper-dark"] { color-scheme: dark; --bg-base: #141210; --bg-surface: #1c1915; --bg-elevated: #262119; --bg-elevated-2: #312a20; --bg-inverse: #faf7ef; --text-primary: #f0ebe0; --text-secondary: rgba(240,235,224,0.72); --text-tertiary: rgba(240,235,224,0.58); --text-ghost: rgba(240,235,224,0.32); --text-inverse: #171717; --color-accent: #b8402e; /* 종이 글자 5.1:1 */ --accent-hover: #c94a37; --accent-active: #a83828; --on-accent: #faf7ef; /* 다크도 동일 — 레드 위 종이 (5.1:1) */ --accent-text: #e0705c; /* 잉크 위 5.9:1 */ --accent-bg: rgba(224,112,92,0.12); --accent-bg-strong: rgba(224,112,92,0.20); --accent-glow: none; --color-accent-soft: #d76955; --color-success: #7fb58e; --success-text: #7fb58e; --success-bg: rgba(127,181,142,0.12); --success-line: rgba(127,181,142,0.32); --color-warning: #d6a24a; --warning-text: #d6a24a; --warning-bg: rgba(214,162,74,0.12); --warning-line: rgba(214,162,74,0.34); --color-danger: var(--color-accent); --danger-text: var(--accent-text); --danger-bg: var(--accent-bg); --danger-line: rgba(224,112,92,0.32); --color-info: #7fa3d1; --info-text: #7fa3d1; --info-bg: rgba(127,163,209,0.12); --info-line: rgba(127,163,209,0.32); --success-hover: #94c4a1; --color-success-strong: #94c4a1; --color-danger-strong: var(--accent-hover); --border-subtle: rgba(240,235,224,0.10); --border-emphasis: rgba(240,235,224,0.18); --border-strong: rgba(240,235,224,0.32); --border-focus: rgba(224,112,92,0.45); /* 다크의 높이는 그림자가 아니라 면 밝기(bg-elevated) 로 표현 */ --shadow-sm: none; --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 16px 40px rgba(0,0,0,0.5); --shadow-glow: none; --overlay: rgba(0,0,0,0.60); --nav-bg: rgba(20,18,16,0.86); --gradient-accent: none; --gradient-surface: none; --noise-opacity: 0; --chart-primary: #e0705c; --chart-secondary: #c4503f; --chart-tertiary: rgba(240,235,224,0.30); --brand-mark: var(--text-primary); /* 다크 로고 = 종이 마크 */ --brand-ink: var(--text-primary); --paper-bg: var(--bg-base); --paper: var(--bg-surface); --ink: var(--text-primary); --red: var(--color-accent); --red-dark: var(--accent-hover); --line: var(--border-emphasis); --line-soft: var(--border-subtle); } /* ── 3. auto — OS 설정을 따른다 (명시 opt-in) ─────────────────────────── */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --bg-base: #141210; --bg-surface: #1c1915; --bg-elevated: #262119; --bg-elevated-2: #312a20; --bg-inverse: #faf7ef; --text-primary: #f0ebe0; --text-secondary: rgba(240,235,224,0.72); --text-tertiary: rgba(240,235,224,0.58); --text-ghost: rgba(240,235,224,0.32); --text-inverse: #171717; --color-accent: #b8402e; --accent-hover: #c94a37; --accent-active: #a83828; --on-accent: #faf7ef; --accent-text: #e0705c; --accent-bg: rgba(224,112,92,0.12); --accent-bg-strong: rgba(224,112,92,0.20); --color-accent-soft: #d76955; --color-success: #7fb58e; --success-text: #7fb58e; --success-bg: rgba(127,181,142,0.12); --success-line: rgba(127,181,142,0.32); --color-warning: #d6a24a; --warning-text: #d6a24a; --warning-bg: rgba(214,162,74,0.12); --warning-line: rgba(214,162,74,0.34); --danger-line: rgba(224,112,92,0.32); --color-info: #7fa3d1; --info-text: #7fa3d1; --info-bg: rgba(127,163,209,0.12); --info-line: rgba(127,163,209,0.32); --success-hover: #94c4a1; --color-success-strong: #94c4a1; --border-subtle: rgba(240,235,224,0.10); --border-emphasis: rgba(240,235,224,0.18); --border-strong: rgba(240,235,224,0.32); --border-focus: rgba(224,112,92,0.45); --shadow-sm: none; --shadow-md: 0 4px 16px rgba(0,0,0,0.35); --shadow-lg: 0 16px 40px rgba(0,0,0,0.5); --overlay: rgba(0,0,0,0.60); --nav-bg: rgba(20,18,16,0.86); --chart-primary: #e0705c; --chart-secondary: #c4503f; --chart-tertiary: rgba(240,235,224,0.30); --brand-mark: var(--text-primary); } } /* ── 4. 접근성 — 모션 감쇄 / 고대비 ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0.01ms; --duration-fast: 0.01ms; --duration-normal: 0.01ms; --duration-slow: 0.01ms; --duration-spring: 0.01ms; --press-scale: 1; } } @media (prefers-contrast: more) { :root, [data-theme] { --border-subtle: var(--border-emphasis); --border-emphasis: var(--border-strong); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; } }