/* ============================================================================ embolos 플랫폼 표면(surface) 토큰 — 다크 프리미엄 아이덴티티 (--pf-*) 사용: ---------------------------------------------------------------------------- • data-mood(테넌트 스토어 무드)와 **직교**한다. 무드 토큰(tokens-moods.css)은 불가침 — 이 파일은 별도 --pf-* 네임스페이스만 정의하므로 무드 --color-*와 충돌 없음. • 셀러 콘솔(data-surface="platform")이 이 토큰을 공유한다(UI_재구조 §2.1). 파일 맨 아래 html[data-surface][data-theme] 별칭 블록이 --color-*(콘솔·공용 컴포넌트가 이미 쓰는 토큰)를 --pf-*로 재정의한다 — 특이도(0,2,1)가 무드 다크 규칙(0,2,0)보다 높아 콘솔에서 이긴다 (선례: base.html store_accent 처리와 동일 기법). • 라이트/다크 둘 다 지원(콘솔 헤더 토글 유지) — 랜딩은 data-theme="dark" 고정이라 무영향(항상 다크 블록만 적용). • 브랜드 액센트(퍼플·시안)는 승인 프로토타입의 확정 hex(디자인 계약) — OKLCH 변환 시 드리프트 위험이 있어 hex 유지. 규칙 상세는 docs/디자인_시스템_플랫폼.md. ============================================================================ */ [data-surface="platform"] { /* ── 라이트/다크 공통(표면 무관) — 타이포·모션·리듬·형태·브랜드 hex ── */ --pf-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --pf-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "D2Coding", monospace; --pf-ease: cubic-bezier(0.16, 1, 0.3, 1); --pf-rhythm: clamp(72px, 12vw, 120px); /* 섹션 세로 리듬 */ --pf-wrap: 1200px; /* 콘텐츠 최대 폭 */ --pf-radius-card: 32px; --pf-radius-pill: 40px; /* ── 브랜드 액센트 — 승인된 확정 hex(라이트/다크 공통) ── */ --pf-purple: #7000ff; --pf-cyan: #00d4ff; --pf-gradient: linear-gradient(135deg, #7000ff, #00d4ff); /* 흰 텍스트가 얹히는 채움(버튼·배지)용 — 시안 끝을 어둡게(#0077aa) 낮춰 흰 글씨 대비 WCAG AA(≥4.5:1) 확보. 장식용 밝은 --pf-gradient(테두리·글로우·그라데이션 텍스트)와 구분. */ --pf-gradient-cta: linear-gradient(135deg, #7000ff, #0077aa); /* ── 종이(--paper-*) — 콘솔 "장부 책상"의 데이터 카드 계층(C0 신설, 시안 v3 계약). 다크 크롬 책상 위에 놓이는 흰 종이 — **테마 불변**(크롬이 무엇이든 종이는 항상 흰색)이라 라이트/다크 블록이 아닌 공통 블록에 둔다. 같은 브랜드 hex를 흰 배경 WCAG AA로 재조합한 값(= 위 라이트 팔레트 규칙 재사용). 대비(상대휘도 계산 검증): ink 19.09 · dim 6.64 · faint 4.58 · accent(퍼플) 6.70 · link(딥시안) 4.98 · ok 5.08 · gold 5.38 · danger 5.70. ── */ --paper: #ffffff; --paper-2: #f1eff9; /* 한 단 가라앉은 종이(줄무늬·hover) — 남보라 종이 고유값(2026-08-03 라이트가 "새벽 하늘"로 바뀌며 --pf-surface와의 동일값 계약은 해제, 종이 계층은 시안 v3 계약대로 테마·팔레트 불변) */ --paper-ink: #0d0d24; /* 잉크 — 다크 --pf-panel과 대칭(라이트 --pf-text 동일값) */ --paper-dim: #5c5a72; --paper-faint: #75738c; --paper-line: #e1def0; --paper-accent: var(--pf-purple); /* 종이 위 액센트 — 흰 배경 자체 AA(6.70) */ --paper-link: #0077aa; /* 종이 위 링크·포커스 — 순수 시안은 흰 배경 미달(1.8)이라 금지 */ --paper-ok: #1a7f37; --paper-gold: #8a6400; --paper-danger: #bf3129; } /* ── 다크(랜딩 기준값, 콘솔 다크 토글도 동일) ── */ [data-surface="platform"][data-theme="dark"] { color-scheme: dark; /* 표면 계층 — 순수 검정 금지, 남보라 틴트 */ --pf-bg: #030312; /* 페이지 바탕 */ --pf-panel: #0a0a1f; /* 카드·패널 1단 */ --pf-surface: #12122a; /* 카드·패널 2단(요금 밴드 등) */ --pf-border: #2c2c5e; /* 헤어라인·구분선 */ /* 텍스트 */ --pf-text: #ffffff; /* 본문·헤딩 (on bg ≈ 19:1) */ --pf-dim: #8e8e93; /* 보조 텍스트 (on bg ≈ 6.2:1, AA 본문) */ /* 상호작용 색 — 콘솔 --color-primary/-strong/-on-* 별칭이 참조 */ --pf-primary: var(--pf-cyan); /* 링크·아이콘·포커스 계열(밝은 배경 위 텍스트 아님, 다크 bg 위) */ --pf-primary-strong: #0077aa; /* 채움 버튼(흰 텍스트) — AA 확보 값 재사용 */ --pf-on-primary: var(--pf-text); --pf-on-accent: var(--pf-text); --pf-focus: var(--pf-cyan); /* 글래스(반투명 레이어) */ --pf-glass: rgba(255, 255, 255, 0.05); --pf-glass-border: rgba(255, 255, 255, 0.1); /* ── 라이트 개통(2026-08-03 "새벽 하늘")로 신설된 표면 파생 토큰 — 랜딩 CSS의 다크 하드코딩을 치환하기 위한 것. 브랜드 hex(--pf-purple/--pf-cyan/--pf-gradient)는 불변. ── */ --pf-accent-text: var(--pf-cyan); /* 텍스트·아이콘용 시안(다크에선 원색 그대로) */ --pf-nav-glass: rgba(3, 3, 18, 0.7); /* 고정 nav 글래스 */ --pf-gradient-text: var(--pf-gradient); /* 그라데이션 텍스트 클리핑용(다크=장식 원본) */ --pf-btn-primary-bg: #ffffff; /* 주 버튼 — 다크 위 흰 버튼 */ --pf-btn-primary-ink: #05050f; --pf-btn-primary-glow: rgba(255, 255, 255, 0.18); --pf-field-bg: rgba(0, 0, 0, 0.22); /* 폼 입력 우물(패널보다 -1단) */ --pf-danger-text: #ffd7dc; /* 폼 에러 — 다크 배경용 연분홍 */ --pf-glow-alpha: 0.22; /* 히어로·계산기 퍼플 글로우 강도 */ } /* ── 라이트 "새벽 하늘"(2026-08-03 확정 — 랜딩 기본 테마 + 콘솔 라이트 토글 공유) ── 시안 C안: 브랜드 시안(cyan) 축을 표면 틴트로 스며들게 한 쿨 라이트 — 다크 프리미엄의 라이트 번역(같은 세계관). 남보라 페이퍼(#f8f7fc 계열, 구 라이트)를 대체. 대비(상대휘도 검증): text ≈17:1 · dim ≈5.8:1 · purple ≈6.3:1 · primary ≈4.9:1 — 전부 AA. */ [data-surface="platform"][data-theme="light"] { color-scheme: light; --pf-bg: #f4f8fc; /* 시안 틴트 화이트 — "새벽 하늘"(순수 흰색 지양) */ --pf-panel: #ffffff; --pf-surface: #e9f2f9; --pf-border: #d3e2ee; --pf-text: #0b1626; /* 딥 네이비 잉크 — 다크 표면 계열과 대칭 */ --pf-dim: #51617a; /* on bg ≈ 5.8:1 */ /* 순수 --pf-cyan(#00d4ff)은 흰 배경 위 텍스트/포커스링 대비 미달(≈1.8:1) — 어둡힌 값 재사용. --pf-purple(#7000ff)은 흰 배경 위에서도 자체로 AA 충족(≈6.3:1)이라 그대로 accent 사용. */ --pf-primary: #0077aa; /* on bg(#f4f8fc) ≈ 4.9:1 */ --pf-primary-strong: #0077aa; --pf-on-primary: #ffffff; --pf-on-accent: #ffffff; --pf-focus: #0077aa; --pf-glass: rgba(11, 22, 38, 0.04); --pf-glass-border: rgba(11, 22, 38, 0.08); /* 라이트 파생 — 다크 공통 블록의 신설 토큰을 새벽 하늘 기준으로 재정의. 순수 시안(#00d4ff)은 밝은 배경 위 1.8:1이라 텍스트 축은 전부 딥시안(#0077aa)으로. */ --pf-accent-text: #0077aa; --pf-nav-glass: rgba(244, 248, 252, 0.75); --pf-gradient-text: var(--pf-gradient-cta); /* #7000ff→#0077aa — 흰 배경 판독 확보 */ --pf-btn-primary-bg: #0b1626; /* 반전 — 밝은 면 위 잉크 버튼 */ --pf-btn-primary-ink: #ffffff; --pf-btn-primary-glow: rgba(11, 22, 38, 0.18); --pf-field-bg: var(--pf-surface); /* 우물 = 표면 -1단(#e9f2f9) */ --pf-danger-text: #bf3129; /* --paper-danger 재사용(흰 배경 AA 5.7:1) */ --pf-glow-alpha: 0.09; /* 글로우는 은은한 새벽 빛으로 하향 */ } /* ── 콘솔 별칭 — 공용 컴포넌트(components.css/storefront.css/console.css)가 쓰는 --color-*를 --pf-*로 재정의. html[data-surface][data-theme] 특이도(0,2,1)가 무드 다크 규칙([data-mood] [data-theme="dark"], 0,2,0)보다 높아 콘솔에서 항상 이긴다. 랜딩은 --color-*를 쓰는 공용 컴포넌트를 로드하지 않아(platform-landing.css 전용) 무영향. ── */ html[data-surface="platform"][data-theme] { --color-bg: var(--pf-bg); --color-surface: var(--pf-panel); --color-surface-2: var(--pf-surface); --color-border: var(--pf-border); --color-ink: var(--pf-text); --color-ink-muted: var(--pf-dim); --color-ink-subtle: var(--pf-dim); --color-primary: var(--pf-primary); --color-primary-strong: var(--pf-primary-strong); --color-on-primary: var(--pf-on-primary); --color-accent: var(--pf-purple); --color-on-accent: var(--pf-on-accent); }