/* ───────────────────────────────────────────────────────────── 튜브워커 디자인 토큰 — v3 (퍼플 리브랜드) 시안: Tubeworker Landing v3 (claude.ai/design). Accent #6C3EF4, 화이트 배경, Pretendard 본문 + Jua 디스플레이. 시안의 다크모드는 filter:invert 해킹이지만 우리는 아래처럼 data-theme 토큰으로 제대로 된 다크값을 파생시킵니다. 테마 전환 기본값은 OS 설정(prefers-color-scheme)을 따릅니다. 사용자가 토글을 누르면 가 붙어 OS 설정을 이깁니다. 값은 light-dark(라이트, 다크) 로 한 번만 적습니다 — color-scheme 이 어느 쪽인지 결정하므로 다크 블록을 따로 복제하지 않습니다. 토큰을 추가할 때도 같은 형식을 쓰세요. ★ 토큰 이름은 v2 와 동일하게 보존합니다 — 페이지 CSS 를 안 건드려도 색이 갈아끼워집니다. 화면에서는 var() 만 쓰고, 투명도 파생색은 color-mix(in srgb, var(--accent) N%, transparent). ───────────────────────────────────────────────────────────── */ :root { color-scheme: light dark; /* ── 배경 ── */ --bg: light-dark(#ffffff, #0f0e14); --bg-alt: light-dark(#f6f5fb, #16141d); --bg-sunken: light-dark(#f3f1fa, #0b0a10); --bg-glow: light-dark(rgba(108, 62, 244, .12), rgba(139, 108, 248, .16)); --bg-glow-soft: light-dark(rgba(108, 62, 244, .07), rgba(139, 108, 248, .10)); --bg-glow-strong: light-dark(rgba(108, 62, 244, .16), rgba(139, 108, 248, .20)); --bg-glow-pulse: light-dark(rgba(108, 62, 244, .22), rgba(139, 108, 248, .28)); /* ── 표면 (다크에서 단계로 갈립니다) ── */ --surface: light-dark(#ffffff, #16141d); /* 입력 필드 등 가장 낮은 면 */ --control-bg: light-dark(#ffffff, #1e1b28); /* 버튼·컨트롤 */ --surface-band: light-dark(#f6f5fb, #16141d); /* 푸터처럼 구분되는 띠(시안 #f6f5fb) */ --surface-bar: light-dark(rgba(255, 255, 255, .8), rgba(15, 14, 20, .82)); /* 상단바(반투명+blur) */ --surface-raised: light-dark(#ffffff, #1c1926); --surface-subtle: light-dark(rgba(108, 62, 244, .06), rgba(139, 108, 248, .12)); --surface-muted: light-dark(#f4f2fb, #201d2b); /* 번호 배지 · 콜아웃 */ --surface-warn: light-dark(#fff6f0, #33241c); /* 주의 안내 박스 */ /* 어두운 강조 블록(문의 채널 카드 등) — 라이트에서도 어둡습니다. */ --feature-bg: light-dark(#161320, #100e16); --feature-bg2: light-dark(#241f33, #1a1726); --feature-text: light-dark(#f7f5fd, #f3f1f7); --feature-muted: #b8b2c8; /* ── 글자 ── */ --text: light-dark(#0a0a0a, #f3f1f7); --text-body: light-dark(#4b4756, #c9c4d6); /* 긴 문서 본문 — muted 보다 진합니다 */ --text-muted: light-dark(#6a6676, #a8a3b6); --text-faint: light-dark(#8a8797, #7d7a8c); --text-strong-link: light-dark(#2e2b38, #e6e2ee); /* ── 강조 ── */ --accent: light-dark(#6c3ef4, #8f6cf8); --accent-on: light-dark(#ffffff, #ffffff); /* 강조면 위 글자 */ --accent-hover: light-dark(#5a2fe0, #a487fb); --accent-shadow: light-dark(rgba(108, 62, 244, .4), rgba(139, 108, 248, .4)); --accent-shadow-soft: light-dark(rgba(108, 62, 244, .26), rgba(139, 108, 248, .28)); --accent-quiet: light-dark(#5a2fe0, #b6a0fb); /* ── 상태 (semantic) — 결제 성공/실패·해지 등 ── */ --danger: light-dark(#d43a2a, #f0876a); --danger-soft: light-dark(#fdece9, #3a221d); --success: light-dark(#2fa85a, #6fd08c); /* ── 선 ── */ --border: light-dark(rgba(10, 10, 10, .10), rgba(255, 255, 255, .10)); --border-strong: light-dark(rgba(10, 10, 10, .14), rgba(255, 255, 255, .18)); --divider: light-dark(#e4e1f0, #2b2838); --slot-empty: light-dark(#d8d4e6, #4a4658); /* ── 브랜드 고정색 (테마 무관) ── */ /* 강조 버튼·브랜드 마크의 글자색·바탕. 시안이 라이트/다크 모두 이 값으로 고정합니다. */ --accent-on-solid: #ffffff; --brand: #6c3ef4; /* 브랜드 마크 'T' 바탕·로고 글자 — 두 테마 공통 퍼플 */ --naver: #03c75a; /* 네이버(디하클) 카페 배지 */ --naver-on: #ffffff; --kakao: #FEE500; --kakao-on: rgba(0, 0, 0, .85); --kakao-shadow: rgba(254, 229, 0, .5); /* ── 타이포 ── */ --font-sans: 'Pretendard Variable', Pretendard, -apple-system, system-ui, 'Noto Sans KR', sans-serif; --font-display: 'Jua', var(--font-sans); /* 히어로·랜딩 섹션 대제목(선택 적용) */ /* v3 는 serif 를 쓰지 않습니다. 과거 제목들이 참조하던 --font-serif 를 sans 로 repoint 해 기능 페이지(결제·정책·인증·환불·연동·위저드) 제목을 한 번에 Pretendard 로 통일합니다. */ --font-serif: var(--font-sans); /* ── 형태 ── */ --radius-sm: 8px; /* 브랜드 마크·배지 */ --radius-md: 10px; /* 소형 버튼 */ --radius-lg: 12px; /* 주요 버튼 */ --radius-xl: 16px; /* 카드 */ --radius-pill: 999px;/* 알약형 토글·태그 */ /* ── 레이아웃 ── */ --nav-h: 64px; --container: 1120px; /* 네비·푸터 */ --container-narrow: 1000px; /* 본문 섹션 */ --container-hero: 840px; /* 히어로 */ /* ── 자간(시안 기준) ── */ --tracking-body: -.012em; --tracking-tight: -.03em; --tracking-tighter: -.04em; } /* 사용자가 버튼으로 고정한 테마 — OS 설정보다 우선합니다. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; } /* ── 리셋 ── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--accent); color: var(--accent-on-solid); } /* ── 공용 컴포넌트 ── 테마 토글은 모든 화면이 똑같이 쓰므로 여기(모든 페이지가 읽는 레이어)에 둡니다. */ .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--control-bg); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s ease; } .theme-toggle:hover { border-color: var(--accent); } /* JS 가 없으면 토글이 동작하지 않으므로 감춥니다(OS 설정은 그대로 적용됨). */ .no-js .theme-toggle { display: none; } /* ── 공용 버튼 (.btn) ────────────────────────────────────────── 시안 v3 의 버튼은 전부 퍼플 solid, 크기만 다릅니다. POST 액션 버튼도 같은 클래스로 모양만 맞추고