/* ───────────────────────────────────────────────────────────── 튜브워커 디자인 토큰 테마 전환 기본값은 OS 설정(prefers-color-scheme)을 따릅니다. 사용자가 🌙 버튼을 누르면 가 붙어 OS 설정을 이깁니다. 값은 light-dark(라이트, 다크) 로 한 번만 적습니다 — color-scheme 이 어느 쪽인지 결정하므로 다크 블록을 따로 복제하지 않습니다. 토큰을 추가할 때도 같은 형식을 쓰세요. 색을 새로 쓸 일이 생기면 여기에 토큰을 추가하고 화면에서는 var() 만 쓰세요. 토큰에서 파생되는 색(투명도만 다른 경우)은 color-mix(in srgb, var(--accent) N%, transparent). ───────────────────────────────────────────────────────────── */ :root { color-scheme: light dark; /* ── 배경 ── */ --bg: light-dark(#f7f2e9, #1c1a17); --bg-alt: light-dark(#efe7d8, #211f1b); --bg-sunken: light-dark(#efe7d8, #161411); --bg-glow: light-dark(rgba(176, 110, 52, .14), rgba(201, 139, 74, .16)); --bg-glow-soft: light-dark(rgba(176, 110, 52, .08), rgba(201, 139, 74, .10)); --bg-glow-strong: light-dark(rgba(176, 110, 52, .16), rgba(201, 139, 74, .18)); --bg-glow-pulse: light-dark(rgba(176, 110, 52, .22), rgba(201, 139, 74, .26)); /* ── 표면 (다크에서 3단계로 갈립니다) ── */ --surface: light-dark(#ffffff, #161411); /* 입력 필드 등 가장 낮은 면 */ --control-bg: light-dark(#ffffff, #26221d); /* 버튼·컨트롤 */ --surface-band: light-dark(#faf6ef, #2f2a23); /* 푸터처럼 구분되는 띠 */ --surface-bar: light-dark(rgba(247, 242, 233, .72), rgba(28, 26, 23, .72)); /* 상단바 */ --surface-raised: light-dark(#ffffff, transparent); --surface-subtle: light-dark(rgba(176, 110, 52, .08), rgba(201, 139, 74, .12)); --surface-muted: light-dark(#f4efe6, #2a2620); /* 번호 배지 · 콜아웃 */ --surface-warn: light-dark(#fbf1e9, #3a2c1f); /* 주의 안내 박스 */ /* 어두운 강조 블록(문의 채널 카드) — 라이트에서도 어둡습니다. */ --feature-bg: light-dark(#2b2620, #161411); --feature-bg2: light-dark(#3a332a, #211f1b); --feature-text: light-dark(#f7f2e9, #f3ede2); --feature-muted: #c8bda8; /* ── 글자 ── */ --text: light-dark(#2b2620, #f3ede2); --text-body: light-dark(#5c5449, #d8cfc0); /* 긴 문서 본문 — muted 보다 진합니다 */ --text-muted: light-dark(#6b6152, #b3ab9d); --text-faint: light-dark(#9a8f7c, #8f8778); --text-strong-link: light-dark(#4a4339, #e8e2d8); /* ── 강조 ── */ --accent: light-dark(#b06e34, #c98b4a); --accent-on: light-dark(#ffffff, #1c1a17); --accent-hover: light-dark(#e6bd86, #e0b47f); --accent-shadow: light-dark(rgba(176, 110, 52, .4), rgba(201, 139, 74, .4)); --accent-shadow-soft: light-dark(rgba(176, 110, 52, .28), rgba(201, 139, 74, .28)); --accent-quiet: light-dark(#8f5726, #e0b47f); /* ── 상태 (semantic) — 결제 성공/실패·해지 등 상태 표시 ── */ --danger: light-dark(#b0402a, #e8876a); --danger-soft: light-dark(#fbece7, #3d241d); --success: light-dark(#3f8f57, #7cc08c); /* ── 선 ── */ --border: light-dark(rgba(43, 38, 32, .10), rgba(255, 255, 255, .10)); --border-strong: light-dark(rgba(43, 38, 32, .18), rgba(255, 255, 255, .18)); --divider: light-dark(#c3b9a6, #4a4339); --slot-empty: light-dark(#c9beac, #5c554a); /* ── 브랜드 고정색 (테마 무관) ── */ /* 강조 버튼의 글자색. 원본이 라이트/다크 모두 흰색으로 고정합니다. (다크의 --accent 위 흰 글자는 대비가 낮은 편 — 디자인 결정을 따랐습니다) */ --accent-on-solid: #ffffff; --kakao: #FEE500; --kakao-on: rgba(0, 0, 0, .85); --kakao-shadow: rgba(254, 229, 0, .5); --font-sans: 'Noto Sans KR', system-ui, -apple-system, sans-serif; --font-serif: 'Noto Serif KR', Georgia, serif; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; } /* 사용자가 버튼으로 고정한 테마 — 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); -webkit-font-smoothing: antialiased; } a { color: inherit; } button { font-family: inherit; } /* ── 공용 컴포넌트 ── 테마 토글은 랜딩과 인증 화면이 똑같이 쓰므로 여기(모든 페이지가 읽는 레이어)에 둡니다. */ .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; }