/* ============================================================================ spideyPizza · 테마 파일 ---------------------------------------------------------------------------- 디자인을 바꾸고 싶으면 이 파일만 고치면 됩니다. 여기 값들이 화면 전체에 적용됩니다. (레이아웃 구조는 app.css, 문구는 config.js 에 있습니다) 수정 후에는 브라우저 새로고침만 하면 바로 반영됩니다. 서버 재시작 필요 없습니다. ========================================================================= */ :root { /* --- 브랜드 색 ------------------------------------------------------ */ --c-red: #E11D2E; /* 스파이디 레드 — 강조, 개인 피자집 핀 */ --c-red-dark: #A50F1E; --c-blue: #1B4FD8; /* 스파이디 블루 — 브랜드 매장 핀 */ --c-blue-dark: #10339B; --c-cheese: #F5B335; /* 치즈 옐로 — 포인트 */ /* --- 배경 / 표면 ---------------------------------------------------- */ --c-bg: #0A0D14; /* 가장 어두운 바탕 */ --c-surface: #141A26; /* 패널·바 배경 */ --c-surface-2: #1D2534; /* 입력창 등 한 단계 밝은 면 */ --c-line: #2C3648; /* 경계선 */ /* --- 글자 ------------------------------------------------------------ */ --c-text: #F2EFE9; /* 기본 글자 */ --c-text-dim: #97A0B2; /* 보조 글자 */ --c-text-ink: #0A0D14; /* 밝은 배경 위 글자 */ /* --- 글꼴 ------------------------------------------------------------ */ /* 웹폰트를 쓰고 싶으면 index.html 에 를 추가하고 이름만 앞에 끼워 넣으세요 */ --font-body: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif; --font-head: var(--font-body); --head-weight: 900; /* 제목 굵기 */ --head-tracking: -0.02em; /* 제목 자간 */ --head-skew: -6deg; /* 제목 기울임 — 코믹 느낌. 0deg 로 하면 반듯해집니다 */ --head-upper: uppercase; /* 영문 대문자화. none 으로 끌 수 있습니다 */ /* --- 형태 ------------------------------------------------------------ */ --radius: 10px; /* 기본 모서리 */ --radius-lg: 16px; --border-w: 2px; /* 코믹 스타일 두꺼운 테두리 */ --border-c: #000; --shadow-hard: 3px 3px 0 rgba(0,0,0,.85); /* 코믹 특유의 딱 떨어지는 그림자 */ --shadow-soft: 0 8px 28px rgba(0,0,0,.45); /* --- 지도 위 요소 ---------------------------------------------------- */ --pin-w: 34px; /* 피자집 핀 크기 */ --pin-h: 42px; --cluster-bg: var(--c-red); --cluster-bg-mid: #C4162A; --cluster-bg-big: var(--c-blue); --cluster-text: #fff; --me-color: #35C4F0; /* 내 위치 점 */ /* --- 배경 무늬 -------------------------------------------------------- */ --web-opacity: .45; /* 헤더 거미줄 무늬 진하기 (0 = 끄기) */ --halftone-opacity: .10; /* 망점(halftone) 무늬 진하기 (0 = 끄기) */ --halftone-size: 9px; /* --- 지도 타일 보정 ---------------------------------------------------- */ /* VWorld midnight 타일을 쓰면 이미 어둡습니다. OSM 폴백일 때만 어둡게 뒤집습니다. 밝은 지도를 원하면 --tile-filter-osm: none; 으로 바꾸세요 */ --tile-filter-osm: invert(1) hue-rotate(185deg) saturate(.55) brightness(.82) contrast(1.05); --tile-filter-vworld: none; /* --- 바 높이 ---------------------------------------------------------- */ --bar-h: 62px; } /* --------------------------------------------------------------------------- 밝은 테마로 쓰고 싶을 때: 를 주면 아래 값이 덮어씁니다. ------------------------------------------------------------------------ */ body.light { --c-bg: #FAF7F2; --c-surface: #FFFFFF; --c-surface-2: #F1EDE6; --c-line: #E0D9CE; --c-text: #16181D; --c-text-dim: #6B6660; --web-opacity: .07; --halftone-opacity: .05; --tile-filter-osm: none; }