/* * 맵부심 디자인 토큰 — 단일 소스. (기획서 부록 D) * * 여기 있는 값만 쓴다. 색을 다른 곳에 하드코딩하면 화면마다 맵기 색이 * 어긋나고, 그 순간 이 서비스의 척도를 아무도 못 믿게 된다. * * 방향은 그대로 "위험 등급 표지" 다 — 소방·산업안전 픽토그램의 문법. * 다만 바탕을 흰색으로 옮겼다. 소화기·경고 표지판이 원래 흰 바탕에 * 빨강이라, 어두운 화면보다 오히려 이 문법에 더 가깝다. * 카카오 지도도 원래 밝은 색이라 뒤집지 않아도 된다. * * 이름이 뜻하는 것: * --paper 바탕 (흰색 계열) * --surface 그 위에 얹는 면 — 카드·시트 * --ink 글자 (검정 계열) * --smoke 눌러 둔 글자 * 예전에는 --ink 가 배경이고 --chalk 가 글자였다. 밝은 쪽으로 뒤집으면서 * 이름이 거짓말을 하게 돼 함께 바꿨다. */ :root { /* ── 베이스 ───────────────────────────────────────── 순백이 아니라 아주 옅은 웜 화이트. 순백은 화면에서 눈이 아프고, 열 스케일(노랑~빨강)과 온도대가 어긋난다. */ --paper: #FFFFFF; --paper-2: #FBF8F6; --surface: #FFFFFF; --surface-2: #F6F1ED; --surface-3: #EDE5DF; --ink: #1A1210; /* 본문 글자. 순검정 대신 붉은 기가 도는 먹색 */ --ink-dim: #4A3D38; --smoke: #6F645D; /* 보조 글자. 흰 바탕에서 4.5:1 을 넘기려면 이만큼 어두워야 한다 */ /* 선. 알파로 두면 어떤 면 위에 얹혀도 같은 세기로 보인다. */ --line: rgba(26, 18, 16, 0.10); --line-2: rgba(26, 18, 16, 0.16); --line-3: rgba(26, 18, 16, 0.28); /* ── 열 스케일 ────────────────────────────────────── 이 서비스의 정체성이자 데이터 구조 그 자체. 흰 바탕으로 옮기면서 1·2단계를 눌러 앉혔다. 원래 값(#FFC94A)은 흰색 위에서 거의 안 보인다 — 밝은 노랑은 흰 바탕과 명도가 붙는다. 칠 자체는 조금 밝게 두고, 글자로 쓸 때는 --lv-ink 로 더 어둡게 쓴다. Lv.5 는 여전히 '색'이 아니라 검정 + 경고 줄무늬다. 흰 바탕에서 검정은 가장 센 신호라 '한 단계 더'가 아니라 '다른 종류'로 읽힌다. */ --heat-1: #F5B72E; --heat-2: #F5851F; --heat-3: #E8481A; --heat-4: #C41B12; --heat-5: #17100E; --heat-5-line: #E01B1B; /* 글자로 쓸 때의 값. 흰 바탕에서 읽히려면 칠보다 어두워야 한다. */ --heat-1-ink: #A06A00; --heat-2-ink: #B4520A; --heat-3-ink: #C93A10; --heat-4-ink: #B01710; /* 열 스케일 전체를 한 줄로. 다이얼·게이지·구분선이 같은 그라디언트를 쓴다. */ --heat-ramp: linear-gradient(90deg, var(--heat-1) 0%, var(--heat-2) 26%, var(--heat-3) 52%, var(--heat-4) 78%, var(--heat-5) 100%); --heat-ramp-soft: linear-gradient(135deg, var(--heat-2), var(--heat-4)); /* 브랜드 빨강. 로고·주요 버튼·강조가 이 하나를 쓴다. */ --brand: #E01B1B; /* * 위험·경고 글자. * 예전에는 #FF8A72 였다 — 어두운 바탕에서 읽으라고 만든 살구색이라 * 밝은 테마로 오면서 옅은 분홍 위 살구색이 되어 1.6:1 까지 떨어졌다. * 사실상 안 보이는 글자였다. */ --danger-ink: #A81208; --brand-dark: #B31414; /* ── 신호 ─────────────────────────────────────────── 흰 바탕에서 노랑 글자는 안 읽힌다. 칠은 노랑, 글자는 갈색 쪽. */ --hazard: #F5C518; /* * 별 모양. 글자 ★ 대신 이걸 마스크로 쓴다. * 글자는 기기마다 모양이 다르고, 무엇보다 반 개를 못 그린다. */ --star-mask: url("data:image/svg+xml;utf8,"); /* 노란 바탕 위 글자. 9A6B00 은 옅은 노랑 위에서 4.3:1 이라 AA 를 못 넘었다. */ --hazard-ink: #7A5400; --safe: #1F6B42; --grey-pin: #7A6E68; /* 흰 글자가 읽히려면 이 정도는 어두워야 한다 */ /* ── 타이포 ───────────────────────────────────────── 레벨 숫자는 반드시 모노스페이스. 본문 서체로 쓰면 그냥 앱이 되고, 모노로 쓰면 계측 장비가 된다. */ --font-body: 'Pretendard Variable', Pretendard, -apple-system, 'Segoe UI', 'Noto Sans KR', system-ui, sans-serif; --font-display: 'Archivo', 'Pretendard Variable', Pretendard, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* * 타입 스케일. clamp 로 화면 폭을 따라 흐르게 한다. * 모바일·데스크톱에 두 벌을 두면 그 사이 폭(태블릿, 접는 화면)에서 * 늘 어느 한쪽이 어색해진다. */ --t-display: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); --t-h1: clamp(1.4rem, 1.2rem + 0.9vw, 1.85rem); --t-h2: clamp(1.05rem, 0.99rem + 0.28vw, 1.2rem); --t-body: 0.9375rem; --t-caption: 0.8125rem; --t-micro: 0.6875rem; --t-level: 1.25rem; /* 마커·배지 전용 */ /* ── 여백·모서리 ────────────────────────────────────*/ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ── 그림자 ───────────────────────────────────────── 흰 바탕에서는 검은 그림자가 제 몫을 한다. 어두운 화면에서는 거의 안 보여서 명도 단계로 깊이를 냈는데, 이제는 그림자가 띄운다. */ --sh-1: 0 1px 2px rgba(26, 18, 16, 0.06); --sh-2: 0 4px 14px rgba(26, 18, 16, 0.10); --sh-3: 0 12px 30px rgba(26, 18, 16, 0.13); --sh-4: 0 24px 56px rgba(26, 18, 16, 0.18); /* 위쪽 하이라이트는 어두운 화면의 장치였다. 흰 바탕에서는 아래쪽 옅은 선이 같은 일을 한다. */ --edge: inset 0 -1px 0 rgba(26, 18, 16, 0.05); --glow-hot: 0 0 0 1px rgba(232, 72, 26, 0.30), 0 6px 22px rgba(232, 72, 26, 0.18); --glow-hazard: 0 0 0 1px rgba(245, 197, 24, 0.45), 0 6px 20px rgba(245, 197, 24, 0.22); /* ── 움직임 ─────────────────────────────────────────*/ --ease: cubic-bezier(0.22, 0.8, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; /* ── 레이아웃 ───────────────────────────────────────*/ /* 58px 이었다. 지도 페이지에서만 48px 로 줄인다 (base.css 의 .map-page). */ --header-h: 58px; /* 58px 이었다. 지도를 화면의 80% 로 만들려고 6px 줄였다 — 손가락 표적은 44px 이 최소인데 아이콘 24 + 글자 11 로 아직 넉넉하다. */ --tabbar-h: 52px; --safe-b: env(safe-area-inset-bottom, 0px); --maxw: 1020px; --maxw-read: 720px; --z-head: 60; --z-tabbar: 70; --z-sheet: 80; --z-modal: 200; } /* 레벨별 색을 한 곳에서 꺼내 쓰기 위한 도우미. .lv-3 을 붙이면 --lv 가 그 레벨 색이 된다. --lv-on 그 색 위에 얹는 글자색 --lv-ink 흰 바탕에서 그 레벨을 '글자'로 쓸 때의 색. 칠 그대로 쓰면 1·2단계가 안 읽힌다. */ .lv-1 { --lv: var(--heat-1); --lv-on: #241800; --lv-ink: var(--heat-1-ink); } .lv-2 { --lv: var(--heat-2); --lv-on: #2A1200; --lv-ink: var(--heat-2-ink); } .lv-3 { --lv: var(--heat-3); --lv-on: #FFF3EF; --lv-ink: var(--heat-3-ink); } .lv-4 { --lv: var(--heat-4); --lv-on: #FFECEA; --lv-ink: var(--heat-4-ink); } .lv-5 { --lv: var(--heat-5); --lv-on: #FFE9E9; --lv-ink: var(--heat-5); } .lv-0 { --lv: var(--grey-pin); --lv-on: #FFFFFF; --lv-ink: var(--smoke); } /* Lv.5 전용 경고 줄무늬. 아끼지 않으면 의미가 사라지므로 Lv.5 에만 쓴다. 흰 바탕이라 사이 띠도 밝게 바꿨다 — 검정 위 검정은 줄무늬로 안 보인다. */ .hazard-stripes, .lv-5 .hazard-fill { background-image: repeating-linear-gradient( -45deg, var(--heat-5) 0 8px, #2B1E1B 8px 10px, var(--heat-5-line) 10px 12px, #2B1E1B 12px 14px ); }