/* ===== 사주 웹앱 디자인 토큰 v1 ===== - 토큰 이름은 개발자가 그대로 사용하므로 변경 금지(변경 시 docs/saju/20-design-system.md 변경 이력에 기록) - 기본 = 다크(KOBONG 사이트 톤: 검정 + 골드). 라이트는 prefers-color-scheme 또는 [data-theme="light"] - 수동 전환: . 속성이 없으면 OS 설정을 따른다. */ :root { /* --- 타이포 --- */ --font-sans: "Pretendard", -apple-system, "Malgun Gothic", sans-serif; --font-serif-ko: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif; /* 제목·한자 */ --font-serif-en: "Cormorant Garamond", "Times New Roman", serif; /* 사이트 공통 영문 */ --fs-xs: .75rem; /* 12 */ --fs-sm: .875rem; /* 14 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 */ --fs-2xl: 1.75rem; /* 28 */ --fs-hanja: 2rem; /* 원국 한자 */ --lh-tight: 1.3; --lh-body: 1.7; /* --- 간격 (4px 배수) --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; /* --- 라운드 / 크기 --- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --tap-min: 44px; --content-max: 480px; /* --- 모션 --- */ --ease: cubic-bezier(.2, .7, .2, 1); --dur: .25s; color-scheme: dark; } /* ---------- 다크(기본) ---------- */ :root, :root[data-theme="dark"] { --bg: #0a0908; --bg-alt: #100e0b; --surface: #17140f; --surface-2: #1f1b14; --line: rgba(238, 195, 90, .18); --line-strong: rgba(238, 195, 90, .4); --line-ui: #736a50; /* 입력창 테두리 (비텍스트 3:1, QA 조정) */ --text: #f4efe4; /* 대비 ~16:1 */ --text-muted: #b3ab9f; /* 대비 ~8:1 (surface 위) */ --accent: #eec35a; /* 골드 */ --accent-strong: #f7dc8c; --accent-ink: #120d05; /* 골드 배경 위 글자 */ --accent-grad: linear-gradient(100deg, #f7dc8c 0%, #eec35a 35%, #c98a2e 65%, #f0c860 100%); --danger: #ff8a7a; --focus: #f7dc8c; --shadow-card: 0 8px 30px rgba(0, 0, 0, .5); /* 오행 글자색 (surface 위 AA 4.5:1 이상) */ --el-wood: #6fcf8f; /* 木 */ --el-fire: #ff7d6e; /* 火 */ --el-earth: #dcaa45; /* 土 */ --el-metal: #d5dae3; /* 金 */ --el-water: #6db6ff; /* 水 */ /* 오행 배경 틴트 (칩·칸 배경) */ --el-wood-bg: rgba(111, 207, 143, .14); --el-fire-bg: rgba(255, 125, 110, .14); --el-earth-bg: rgba(220, 170, 69, .14); --el-metal-bg: rgba(213, 218, 227, .12); --el-water-bg: rgba(109, 182, 255, .14); } /* ---------- 라이트 ---------- */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --_light: 1; } } :root[data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f7f2e6; /* 한지 */ --bg-alt: #efe8d8; --surface: #fffdf7; --surface-2: #f5efe0; --line: rgba(90, 62, 20, .2); --line-strong: rgba(90, 62, 20, .45); --line-ui: #948569; --text: #211a10; --text-muted: #5f5443; /* surface 위 ~7:1 */ --accent: #8a5a00; /* 브론즈: 흰 배경 위 AA */ --accent-strong: #6b4500; --accent-ink: #fffdf7; --accent-grad: linear-gradient(100deg, #a8621a, #8a5a00 60%, #6b4500); --danger: #b3261e; --focus: #6b4500; --shadow-card: 0 6px 22px rgba(70, 48, 10, .12); --el-wood: #1c7241; --el-fire: #c0341f; --el-earth: #8a5a00; --el-metal: #4d5866; --el-water: #1b5aa3; --el-wood-bg: rgba(28, 114, 65, .10); --el-fire-bg: rgba(192, 52, 31, .09); --el-earth-bg: rgba(138, 90, 0, .10); --el-metal-bg: rgba(77, 88, 102, .10); --el-water-bg: rgba(27, 90, 163, .09); } } :root[data-theme="light"] { --bg: #f7f2e6; --bg-alt: #efe8d8; --surface: #fffdf7; --surface-2: #f5efe0; --line: rgba(90, 62, 20, .2); --line-strong: rgba(90, 62, 20, .45); --line-ui: #948569; --text: #211a10; --text-muted: #5f5443; --accent: #8a5a00; --accent-strong: #6b4500; --accent-ink: #fffdf7; --accent-grad: linear-gradient(100deg, #a8621a, #8a5a00 60%, #6b4500); --danger: #b3261e; --focus: #6b4500; --shadow-card: 0 6px 22px rgba(70, 48, 10, .12); --el-wood: #1c7241; --el-fire: #c0341f; --el-earth: #8a5a00; --el-metal: #4d5866; --el-water: #1b5aa3; --el-wood-bg: rgba(28, 114, 65, .10); --el-fire-bg: rgba(192, 52, 31, .09); --el-earth-bg: rgba(138, 90, 0, .10); --el-metal-bg: rgba(77, 88, 102, .10); --el-water-bg: rgba(27, 90, 163, .09); } /* 오행 유틸리티: 로 색·배경을 한 번에 */ .el-wood { --el: var(--el-wood); --el-bg: var(--el-wood-bg); } .el-fire { --el: var(--el-fire); --el-bg: var(--el-fire-bg); } .el-earth { --el: var(--el-earth); --el-bg: var(--el-earth-bg); } .el-metal { --el: var(--el-metal); --el-bg: var(--el-metal-bg); } .el-water { --el: var(--el-water); --el-bg: var(--el-water-bg); } @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } }