/* ============================================================================ 공용 테마 토큰 — 사이트 전체(인덱스·모든 프로젝트)의 색을 여기서 결정합니다. 적용: (theme.js가 설정) 기본값(:root)은 dark — JS가 꺼져 있어도 화면이 깨지지 않습니다. 토큰 목록과 실제 색은 /demo/projects/styleguide/ 에서 눈으로 확인할 수 있습니다. ============================================================================ */ :root, [data-theme="dark"] { color-scheme: dark; --theme-name: "다크"; /* 바탕 */ --bg: #070b17; /* 페이지 배경 */ --stage: #0b1224; /* 덱 스테이지 / 시트 */ --surface: #111a31; /* 카드·패널 */ --surface-2: #16213d; /* 한 단계 밝은 패널 */ --surface-deep: #0a1020; /* 이미지·코드 바탕 (가장 어두운 면) */ /* 선 */ --line: #243252; /* 기본 경계선 */ --line-strong: #35507f; /* hover·강조 경계선 */ --hairline: rgba(255, 255, 255, .08); /* 유리 위 실선 */ --tint: rgba(255, 255, 255, .04); /* 아주 옅은 표면 강조 */ /* 글자 */ --text: #eaf0fb; --text-strong: #f4f7ff; --muted: #9db0d0; --dim: #6f82a6; --link: #bcd0ff; /* 액센트 (rgb 짝은 rgba(var(--accent-rgb), .12) 형태로 씁니다) */ --accent: #3fd6c6; --accent-rgb: 63, 214, 198; /* 주 액센트 */ --accent-2: #8b9cff; --accent-2-rgb: 139, 156, 255; /* 보조: 링크·화살표 */ --accent-3: #ffb95a; --accent-3-rgb: 255, 185, 90; /* 주의·콜아웃 */ --accent-4: #ff7d9d; --accent-4-rgb: 255, 125, 157; /* 강조·영상 출처 */ --on-accent: #06131c; /* 액센트 배경 위 글자색 */ /* 반투명 오버레이의 기준색 (자막·시작화면·목차) */ --scrim-rgb: 7, 11, 23; /* 배경 글로우 */ --glow-1: #16244a; --glow-2: #0f3b3c; /* 그림자 */ --shadow: 0 30px 80px rgba(0, 0, 0, .55); --shadow-soft: 0 18px 50px rgba(0, 0, 0, .45); /* 코드 */ --code-bg: #0a1020; --code-fg: #dbe6ff; --code-str: #ffd27a; --code-inline-fg: #bfe9ff; --code-inline-bg: rgba(139, 156, 255, .12); } [data-theme="light"] { color-scheme: light; --theme-name: "라이트"; --bg: #f5f7fb; --stage: #ffffff; --surface: #ffffff; --surface-2: #eef2f9; --surface-deep: #eaeff7; --line: #d8e0ec; --line-strong: #a9bad4; --hairline: rgba(16, 26, 48, .10); --tint: rgba(16, 26, 48, .04); --text: #16203a; --text-strong: #0b1222; --muted: #4d5f80; --dim: #74869f; --link: #3f52c4; --accent: #0d9488; --accent-rgb: 13, 148, 136; --accent-2: #4f5fd6; --accent-2-rgb: 79, 95, 214; --accent-3: #b26a06; --accent-3-rgb: 178, 106, 6; --accent-4: #cf3f68; --accent-4-rgb: 207, 63, 104; --on-accent: #ffffff; --scrim-rgb: 245, 247, 251; --glow-1: #dde7ff; --glow-2: #d6f0ec; --shadow: 0 24px 60px rgba(21, 33, 61, .16); --shadow-soft: 0 12px 32px rgba(21, 33, 61, .12); --code-bg: #eef2f8; --code-fg: #1f2937; --code-str: #a15c00; --code-inline-fg: #3b47a8; --code-inline-bg: rgba(79, 95, 214, .10); } [data-theme="sepia"] { color-scheme: light; --theme-name: "세피아"; --bg: #f3ebde; --stage: #fbf6ed; --surface: #fbf6ed; --surface-2: #efe4d2; --surface-deep: #ece0cc; --line: #dccdb5; --line-strong: #bda684; --hairline: rgba(59, 47, 34, .12); --tint: rgba(59, 47, 34, .05); --text: #3b2f22; --text-strong: #241c12; --muted: #6b5a44; --dim: #8b7961; --link: #4a55b8; --accent: #0f8a7e; --accent-rgb: 15, 138, 126; --accent-2: #5a5ac8; --accent-2-rgb: 90, 90, 200; --accent-3: #a2620f; --accent-3-rgb: 162, 98, 15; --accent-4: #b5445f; --accent-4-rgb: 181, 68, 95; --on-accent: #fffaf2; --scrim-rgb: 243, 235, 222; --glow-1: #ead9bd; --glow-2: #dfeadc; --shadow: 0 24px 60px rgba(71, 55, 33, .18); --shadow-soft: 0 12px 32px rgba(71, 55, 33, .13); --code-bg: #efe4d2; --code-fg: #33291d; --code-str: #8a4b00; --code-inline-fg: #4a55b8; --code-inline-bg: rgba(90, 90, 200, .12); } [data-theme="carbon"] { color-scheme: dark; --theme-name: "카본"; --bg: #0b0b0c; --stage: #131316; --surface: #17181b; --surface-2: #1f2126; --surface-deep: #0f0f11; --line: #2c2e34; --line-strong: #4a4d55; --hairline: rgba(255, 255, 255, .07); --tint: rgba(255, 255, 255, .035); --text: #ececee; --text-strong: #ffffff; --muted: #a3a6ad; --dim: #74777e; --link: #a5b4fc; --accent: #6ee7b7; --accent-rgb: 110, 231, 183; --accent-2: #a5b4fc; --accent-2-rgb: 165, 180, 252; --accent-3: #fcd34d; --accent-3-rgb: 252, 211, 77; --accent-4: #fda4af; --accent-4-rgb: 253, 164, 175; --on-accent: #07130d; --scrim-rgb: 11, 11, 12; --glow-1: #1a1c22; --glow-2: #14201c; --shadow: 0 30px 80px rgba(0, 0, 0, .7); --shadow-soft: 0 18px 50px rgba(0, 0, 0, .55); --code-bg: #0f0f11; --code-fg: #e4e6ea; --code-str: #fcd34d; --code-inline-fg: #6ee7b7; --code-inline-bg: rgba(165, 180, 252, .12); } [data-theme="contrast"] { color-scheme: dark; --theme-name: "고대비"; --bg: #000000; --stage: #000000; --surface: #0a0a0a; --surface-2: #161616; --surface-deep: #000000; --line: #767676; --line-strong: #ffffff; --hairline: rgba(255, 255, 255, .35); --tint: rgba(255, 255, 255, .10); --text: #ffffff; --text-strong: #ffffff; --muted: #e8e8e8; --dim: #c4c4c4; --link: #7fd8ff; --accent: #ffd400; --accent-rgb: 255, 212, 0; --accent-2: #00e5ff; --accent-2-rgb: 0, 229, 255; --accent-3: #ffa64d; --accent-3-rgb: 255, 166, 77; --accent-4: #ff8fb1; --accent-4-rgb: 255, 143, 177; --on-accent: #000000; --scrim-rgb: 0, 0, 0; --glow-1: #101010; --glow-2: #0a0a0a; --shadow: 0 0 0 1px #ffffff; --shadow-soft: 0 0 0 1px #767676; --code-bg: #000000; --code-fg: #ffffff; --code-str: #ffd400; --code-inline-fg: #00e5ff; --code-inline-bg: rgba(0, 229, 255, .15); } /* 예전 이름 호환 — 덱 템플릿 안의 인라인 스타일이 아직 이 이름을 씁니다. */ :root { --teal: var(--accent); --indigo: var(--accent-2); --amber: var(--accent-3); --rose: var(--accent-4); --panel: var(--surface); --panel2: var(--surface-2); } /* 테마 전환 시 색만 부드럽게 (레이아웃·애니메이션에는 영향 없음) */ @media (prefers-reduced-motion: no-preference) { html.theme-ready body { transition: background-color .25s ease, color .25s ease; } } /* --------------------------------------------------------------------------- 테마 선택 위젯 (theme.js가 삽입) — 모든 페이지 오른쪽 위 고정 --------------------------------------------------------------------------- */ .theme-fab { position: fixed; top: 14px; right: 14px; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; cursor: pointer; font: 600 13px/1 "Inter", "Noto Sans KR", system-ui, sans-serif; color: var(--muted); background: rgba(var(--scrim-rgb), .72); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: color .2s ease, border-color .2s ease; } .theme-fab:hover { color: var(--text); border-color: var(--line-strong); } .theme-fab .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .theme-pop { position: fixed; top: 54px; right: 14px; z-index: 901; width: 236px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-family: "Noto Sans KR", "Inter", system-ui, sans-serif; } .theme-pop[hidden] { display: none; } .theme-pop h6 { margin: 4px 6px 8px; font: 600 11px/1 "Inter", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); } .theme-pop button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; margin: 2px 0; border-radius: 10px; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--muted); font: 500 14px/1 inherit; text-align: left; } .theme-pop button:hover { background: var(--tint); color: var(--text); } .theme-pop button[aria-checked="true"] { color: var(--text); border-color: var(--line); background: var(--tint); } .theme-pop button[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); font-weight: 700; } .theme-pop .sw { width: 26px; height: 18px; border-radius: 5px; flex: none; border: 1px solid var(--hairline); background: linear-gradient(135deg, var(--sw-bg) 0 55%, var(--sw-ac) 55% 100%); } @media (max-width: 640px) { .theme-fab .label { display: none; } }