/* ============================================================ DRUMZONE · Design Tokens ------------------------------------------------------------ 컨셉: STAGE & PAPER — 무대(어둠)와 악보(종이) 테마가 두 개입니다. 둘 다 같은 컨셉의 다른 면입니다. · PAPER (기본) 종이가 바닥. 밝은 화면. · STAGE 무대가 바닥. 어두운 화면. 기본값은 PAPER 이고, 사용자가 헤더의 버튼으로 STAGE 를 고르면 가 붙습니다. 선택은 브라우저에 저장됩니다. (data-theme="dark" 도 같은 뜻으로 받습니다.) 컬러 규칙 3줄 — 이것만 지키면 톤이 흐트러지지 않습니다. 1) 악보가 보이는 자리에는 항상 종이(--dz-paper)를 깝니다. 테마가 바뀌어도 악보는 종이 위에 있습니다. 2) LIME 은 '누를 수 있는 것' 에만. 한 화면에 1~2개. 채움은 --dz-accent, 글자·아이콘·선은 --dz-accent-fg 입니다. (밝은 테마에서 라임을 글자색으로 쓰면 읽히지 않기 때문입니다.) 3) EMBER 는 '읽어야 할 것' 에만 — 신규·랭킹·한도초과. 버튼 아님. 강조 블록(추천 플랜·가격 배너·보조 CTA)은 --dz-invert 를 씁니다. '바닥의 반대' 라는 뜻이라, 밝은 테마에서는 검정 블록이 되고 어두운 테마에서는 종이 블록이 됩니다. 난이도 5단계는 LIME → EMBER 를 잇는 한 줄기 램프입니다. 색만으로 구분하지 않도록 항상 단계 이름을 함께 표기합니다. 이 파일의 값만 바꾸면 전체 화면의 톤이 일괄 변경됩니다. 폰트는 따로 — assets/css/fonts.css 와 아래 --dz-font-* 세 줄. ============================================================ */ /* ============================================================ PAPER — 기본 테마 (밝음) ============================================================ */ :root { /* ---------- Color · Ground ---------- */ --dz-bg: #FAF8F2; /* 페이지 배경 (따뜻한 종이색) */ --dz-bg-sunken: #F1ECE1; /* 푸터 등 한 단계 아래 */ --dz-bg-raised: #F5F2EA; /* 섹션 구분 배경 */ --dz-surface: #FFFFFF; /* 카드 · 패널 */ --dz-surface-2: #FBFAF6; /* 폼 그룹 · 테이블 컨테이너 */ --dz-surface-hover: #F2EEE4; /* 카드 hover */ --dz-surface-inset: #F4F1E9; /* 한 단계 파인 영역 */ --dz-chip: #EFEBE1; /* 메타 태그 배경 */ /* ---------- Color · Paper (악보 면) ---------- 테마와 무관하게 악보가 실제로 보이는 자리입니다. */ --dz-paper: #FCFAF3; --dz-paper-2: #F2EEE4; --dz-paper-ink: #16150F; /* 종이 위 본문 · 음표 */ --dz-paper-muted: #5C574A; /* 종이 위 보조 텍스트 */ --dz-paper-line: #A8A08D; /* 오선 — 악보로 읽혀야 하므로 장식선보다 진합니다 */ --dz-paper-bar: #8A8272; /* 마디선 */ /* 바닥 위에 깔리는 장식 오선 (히어로 배경) */ --dz-staff-line: #EAE4D6; --dz-staff-note: #DED7C6; /* ---------- Color · Invert (바닥의 반대) ---------- 추천 플랜 · 가격 배너 · 보조 CTA · 토스트. */ --dz-invert: #16150F; --dz-invert-hover: #2A2820; --dz-invert-ink: #F7F5EF; --dz-invert-muted: #B9B3A4; /* ---------- Color · Line ---------- */ --dz-line: #E4DED0; /* 기본 경계선 */ --dz-line-soft: #EFEAE0; /* 섹션 구분선 */ --dz-line-strong: #C9C1AE; /* hover · 강조 경계선 (장식) */ --dz-line-control: #8A8272; /* 테두리가 곧 컨트롤인 곳. 모든 면 위 3:1 이상 */ /* ---------- Color · Text ---------- */ --dz-text: #16150F; /* Primary */ --dz-text-2: #3B362B; /* Secondary strong */ --dz-text-3: #5C574A; /* Secondary (본문 보조) */ --dz-text-4: #6E6859; /* Tertiary (캡션·주석) */ --dz-text-disabled: #948D7C; /* ---------- Color · Action (LIME) ---------- */ --dz-accent: #C9F24D; /* 채움 전용 */ --dz-accent-ink: #16150F; /* accent 채움 위 글자색 */ --dz-accent-fg: #4E6B00; /* 글자 · 아이콘 · 밑줄 · 포커스링 */ --dz-accent-soft: rgba(201, 242, 77, 0.18); --dz-accent-border: rgba(78, 107, 0, 0.35); --dz-accent-panel: #F1F7DC; /* 선택된 카드 배경 */ --dz-accent-glow: 0 10px 24px -12px rgba(78, 107, 0, 0.45); /* ---------- Color · Signal (EMBER) ---------- */ --dz-ember: #C43C00; --dz-ember-ink: #FFFFFF; --dz-ember-soft: rgba(196, 60, 0, 0.10); --dz-ember-border: rgba(196, 60, 0, 0.35); /* ---------- Color · Status ---------- */ --dz-danger: #C21F36; --dz-warning: #8F5B00; --dz-success: #16794D; /* ---------- Color · 난이도 (LIME → EMBER 램프) ---------- 레벨 정의(어떤 연주 요소까지 포함하는지)는 운영팀 확정 필요. */ --dz-lv-1: #4E6B00; /* 초급 */ --dz-lv-2: #6E6200; /* 초·중급 */ --dz-lv-3: #8A5200; /* 중급 */ --dz-lv-4: #9A4A00; /* 고급 */ --dz-lv-5: #C43C00; /* 프로 */ /* ---------- Color · Control ---------- */ --dz-btn-bg: #EDE8DC; /* 보조 버튼 채움 */ --dz-btn-bg-hover: #E3DCCC; /* ---------- Elevation ---------- 그림자는 '떠 있음'을 말할 때만. 카드 구분은 경계선이 담당합니다. */ --dz-shadow-card: 0 18px 36px -22px rgba(40, 34, 22, 0.35); --dz-shadow-paper: 0 16px 34px -20px rgba(40, 34, 22, 0.28); --dz-shadow-toast: 0 14px 34px -12px rgba(40, 34, 22, 0.28); --dz-shadow-sheet: 0 -8px 28px rgba(40, 34, 22, 0.20); --dz-scrim: rgba(32, 28, 18, 0.45); /* ---------- Typography ---------- 한글에 맞춘 나눔 계열 한 벌입니다. 제목·본문·UI 나눔스퀘어 네오 (400 / 700 / 900) 숫자·영문 라벨 나눔고딕코딩 (400 / 700) 폰트 파일은 서버에 직접 담겨 있습니다 — assets/css/fonts.css 제목과 본문이 같은 가족이므로 위계는 크기와 굵기로만 만듭니다. 담긴 굵기는 400 / 700 / 900 세 개뿐이라, 500·600 을 지정하면 브라우저가 400 또는 700 으로 붙입니다. 중간 굵기는 쓰지 마세요. */ --dz-font-display: 'NanumSquare Neo', 'Apple SD Gothic Neo', sans-serif; --dz-font-body: 'NanumSquare Neo', 'Apple SD Gothic Neo', sans-serif; --dz-font-mono: 'Nanum Gothic Coding', 'NanumSquare Neo', ui-monospace, monospace; /* 제목 굵기 — 나눔스퀘어 네오는 Heavy(900)까지 있습니다. 700 으로 낮추면 본문 굵기와 가까워져 위계가 약해집니다. */ --dz-fw-display: 900; /* 모노 굵기 — 나눔고딕코딩은 400 / 700 두 굵기입니다. */ --dz-fw-mono: 700; --dz-fs-display: 72px; --dz-lh-display: 1.04; --dz-fs-h1: 46px; --dz-lh-h1: 1.1; --dz-fs-h2: 32px; --dz-lh-h2: 1.22; --dz-fs-h3: 20px; --dz-lh-h3: 1.4; --dz-fs-lg: 17px; --dz-fs-md: 15px; --dz-fs-sm: 14px; --dz-fs-xs: 13px; --dz-fs-2xs: 12px; --dz-fs-eyebrow: 11px; --dz-ls-eyebrow: 0.2em; /* 제목용 트래킹 — 커질수록 좁게 */ --dz-ls-display: -0.035em; --dz-ls-h1: -0.03em; --dz-ls-h2: -0.022em; /* ---------- Spacing (4px 배수) ---------- */ --dz-sp-1: 4px; --dz-sp-2: 8px; --dz-sp-3: 12px; --dz-sp-4: 16px; --dz-sp-5: 20px; --dz-sp-6: 24px; --dz-sp-8: 32px; --dz-sp-10: 40px; --dz-sp-12: 48px; --dz-sp-14: 56px; --dz-sp-18: 72px; --dz-sp-22: 88px; /* ---------- Radius ---------- 컨트롤은 알약, 면은 크게 둥글게. 두 가지만 씁니다. */ --dz-r-sm: 8px; --dz-r-md: 12px; --dz-r-lg: 16px; --dz-r-xl: 20px; --dz-r-2xl: 28px; --dz-r-full: 999px; /* ---------- Layout ---------- */ --dz-container: 1280px; /* 내용 최대폭 */ --dz-gutter: 80px; /* 데스크톱 좌우 여백 */ --dz-gutter-m: 20px; /* 모바일 좌우 여백 */ --dz-header-h: 72px; --dz-header-h-m: 56px; --dz-tabbar-h: 68px; /* 모바일 하단 탭바 */ /* ---------- Control size (터치 타깃 44px 이상) ---------- */ --dz-ctrl-sm: 36px; --dz-ctrl: 44px; --dz-ctrl-lg: 56px; /* ---------- Motion ---------- */ --dz-ease: cubic-bezier(0.2, 0.7, 0.25, 1); /* 기본 — 끝에서 부드럽게 */ --dz-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* 진입 · 리프트 */ --dz-dur-fast: 120ms; --dz-dur: 200ms; --dz-dur-slow: 420ms; color-scheme: light; } /* ============================================================ STAGE — 다크 테마 (사용자가 고른 경우에만) 색 계열만 덮어씁니다. 타이포·간격·라운드·모션은 공통입니다. ============================================================ */ :root[data-theme="stage"], :root[data-theme="dark"] { /* ---------- Color · Ground ---------- */ --dz-bg: #0A0A0C; --dz-bg-sunken: #070709; --dz-bg-raised: #0F0F12; --dz-surface: #16161A; --dz-surface-2: #121216; --dz-surface-hover: #1E1E24; --dz-surface-inset: #101014; --dz-chip: #1C1C22; /* ---------- Color · Paper (악보 면) ---------- */ --dz-paper: #F2EEE4; --dz-paper-2: #E6E1D3; --dz-paper-ink: #16150F; --dz-paper-muted: #5C574A; --dz-paper-line: #A29B8A; --dz-paper-bar: #6B6559; --dz-staff-line: #1B1B21; --dz-staff-note: #23232B; /* ---------- Color · Invert (바닥의 반대) ---------- */ --dz-invert: #F2EEE4; --dz-invert-hover: #FFFCF5; --dz-invert-ink: #16150F; --dz-invert-muted: #5C574A; /* ---------- Color · Line ---------- */ --dz-line: #26262E; --dz-line-soft: #1B1B21; --dz-line-strong: #3A3A45; --dz-line-control: #6A6975; /* ---------- Color · Text ---------- */ --dz-text: #F6F5F1; --dz-text-2: #D5D4CE; --dz-text-3: #A5A4AD; --dz-text-4: #86858F; --dz-text-disabled: #6E6D78; /* ---------- Color · Action (LIME) ---------- 어두운 바닥에서는 라임이 그대로 읽히므로 채움색과 전경색이 같습니다. */ --dz-accent: #C9F24D; --dz-accent-ink: #0A0A0C; --dz-accent-fg: #C9F24D; --dz-accent-soft: rgba(201, 242, 77, 0.10); --dz-accent-border: rgba(201, 242, 77, 0.38); --dz-accent-panel: #171B10; --dz-accent-glow: 0 10px 30px -10px rgba(201, 242, 77, 0.45); /* ---------- Color · Signal (EMBER) ---------- */ --dz-ember: #FF5A1F; --dz-ember-ink: #0A0A0C; --dz-ember-soft: rgba(255, 90, 31, 0.12); --dz-ember-border: rgba(255, 90, 31, 0.40); /* ---------- Color · Status ---------- */ --dz-danger: #FF6B7D; --dz-warning: #FFC24D; --dz-success: #5FD3A0; /* ---------- Color · 난이도 ---------- */ --dz-lv-1: #C9F24D; --dz-lv-2: #E8E24A; --dz-lv-3: #FFC847; --dz-lv-4: #FF9436; --dz-lv-5: #FF5A1F; /* ---------- Color · Control ---------- */ --dz-btn-bg: #1E1E24; --dz-btn-bg-hover: #292930; /* ---------- Elevation ---------- */ --dz-shadow-card: 0 20px 44px -24px rgba(0, 0, 0, 0.9); --dz-shadow-paper: 0 22px 48px -26px rgba(0, 0, 0, 0.85); --dz-shadow-toast: 0 16px 40px -12px rgba(0, 0, 0, 0.6); --dz-shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.55); --dz-scrim: rgba(5, 5, 6, 0.74); color-scheme: dark; } /* 태블릿 */ @media (max-width: 1200px) { :root { --dz-fs-display: 56px; --dz-fs-h1: 38px; --dz-fs-h2: 28px; } } /* 모바일 */ @media (max-width: 768px) { :root { --dz-fs-display: 38px; --dz-fs-h1: 30px; --dz-fs-h2: 24px; --dz-fs-h3: 17px; --dz-gutter: var(--dz-gutter-m); --dz-header-h: var(--dz-header-h-m); } } /* 모션 최소화 설정 존중 */ @media (prefers-reduced-motion: reduce) { :root { --dz-dur-fast: 0ms; --dz-dur: 0ms; --dz-dur-slow: 0ms; } }