/* 토지 고고 — 공통 지면색 한 벌 (2026-09-12 지시 "추천대로 모두 진행"). * * 왜 만들었나. 랜딩·가이드·게시판·계정·지도앱이 각각 제 팔레트를 갖고 * 있었습니다. 바탕이 흰색(#FFFFFF)·따뜻한 종이(#FAF7F3)·차가운 회색 * (#F6F7F9) 셋이었고, 강조색은 모래(#C9A47C)·갈색(#8A6547)·청회색 * (#3F5B77) 셋이었습니다. 같은 제품의 세 페이지가 아니라 세 제품처럼 * 보였고, 지도앱 안에서는 **로고는 갈색인데 단추는 청회색**이었습니다. * * 갈색으로 모읍니다. 로고·파비콘·랜딩이 이미 갈색이고, 청회색은 지도앱 * 한 곳이었습니다. 반대로 갔다면 로고부터 다시 그려야 합니다. * * 여기 있는 것은 **지면색**뿐입니다 — 바탕·글자·테두리·강조. * 뜻이 있는 색(용도지역, 거래 종류, 교통량 구간, 거리 밴드)은 지도앱의 * style.css 에 그대로 둡니다. 그 색들은 '서로 구별되는 것' 이 임무라 * 브랜드와 붙어 있으면 안 됩니다. * * 어두운 값은 --d-* 로 **한 번만** 적습니다. 아래 두 선택자(OS 설정 · * 손으로 고른 테마)는 그것을 옮겨 담기만 합니다. 예전에는 두 곳에 값을 * 따로 적어 두었다가 어긋났습니다 — 지도앱의 거리 밴드가 한쪽에서는 * 보라·분홍·청록인데 다른 쪽에서는 다섯 개가 전부 회색이었습니다. */ :root{ color-scheme:light; --ground:#FAF7F3; --surface:#FFFFFF; --surface-2:#F3EDE5; --ink:#1C1611; --muted:#6B5E52; --faint:#7A6B5C; --border:#E7DDD1; --border-strong:#CDBDAB; --accent:#8A6547; --accent-soft:#F4E9DD; --on-accent:#FFFFFF; --brand-warm:#C9A47C; /* 로고의 모래색. 점·띠 같은 장식에만 */ --warn:#B45309; --warn-soft:#FDF5E6; --block:#B3261E; --block-soft:#FBEAE8; --ok:#0B7A43; --ok-soft:#E4F3EA; --danger:#B3261E; --shadow:0 1px 2px rgba(28,22,17,.06), 0 8px 24px -18px rgba(28,22,17,.30); /* 어두운 한 벌 — 값은 여기가 유일한 자리 */ --d-ground:#12100D; --d-surface:#1C1915; --d-surface-2:#26221D; --d-ink:#F0EAE3; --d-muted:#A79A8C; --d-faint:#8A7D70; --d-border:#332D26; --d-border-strong:#4A4239; --d-accent:#D8B18C; --d-accent-soft:#2A2019; --d-on-accent:#1A120B; --d-brand-warm:#E0BE98; --d-warn:#DDA23C; --d-warn-soft:#2A2011; --d-block:#E8796C; --d-block-soft:#2B1614; --d-ok:#4FC084; --d-ok-soft:#11251B; --d-danger:#F0837A; --d-shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.8); } /* OS 가 어둡게 — 단, 사람이 '밝게' 를 고르면 따르지 않는다 */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ground:var(--d-ground); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --ink:var(--d-ink); --muted:var(--d-muted); --faint:var(--d-faint); --border:var(--d-border); --border-strong:var(--d-border-strong); --accent:var(--d-accent); --accent-soft:var(--d-accent-soft); --on-accent:var(--d-on-accent); --brand-warm:var(--d-brand-warm); --warn:var(--d-warn); --warn-soft:var(--d-warn-soft); --block:var(--d-block); --block-soft:var(--d-block-soft); --ok:var(--d-ok); --ok-soft:var(--d-ok-soft); --danger:var(--d-danger); --shadow:var(--d-shadow); } } /* 사람이 '어둡게' 를 골랐다 (theme.js 가 에 적는다) */ :root[data-theme="dark"]{ color-scheme:dark; --ground:var(--d-ground); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --ink:var(--d-ink); --muted:var(--d-muted); --faint:var(--d-faint); --border:var(--d-border); --border-strong:var(--d-border-strong); --accent:var(--d-accent); --accent-soft:var(--d-accent-soft); --on-accent:var(--d-on-accent); --brand-warm:var(--d-brand-warm); --warn:var(--d-warn); --warn-soft:var(--d-warn-soft); --block:var(--d-block); --block-soft:var(--d-block-soft); --ok:var(--d-ok); --ok-soft:var(--d-ok-soft); --danger:var(--d-danger); --shadow:var(--d-shadow); } /* ── 공통 머리띠 ────────────────────────────────────────────── * 가이드·게시판이 각각 다른 머리띠를 쓰고 있었습니다. 게시판에만 * 전역 메뉴가 있었고, 가이드는 '← 서비스로' 한 줄, 계정은 로고뿐이라 * **지도에서 게시판·내 계정으로 가는 길이 화면에 없었습니다.** * * 계정(/account)은 그대로 로고만 둡니다 — 관문에 막혀 온 사람에게 * 돌아다닐 길을 주면 가입을 안 하고 돌아갑니다. 그것은 의도입니다. */ .sitebar{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .sitebar-inner{ max-width:52rem; margin:0 auto; padding:.6rem 1.25rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } .sitebar-inner.wide{max-width:70rem} /* 가이드 쪽 본문은 링크에 밑줄(border-bottom)을 단다. 머리띠는 본문이 아니므로 그 줄을 걷어낸다 — 안 그러면 메뉴가 네모 상자처럼 보인다. */ .sitebar a, .sitebar a:hover{border-bottom:0} .sitebar-brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.95rem; color:var(--ink); text-decoration:none; } .sitebar-brand img{display:block; border-radius:.3rem} .sitebar-crumb{font-size:.82rem; color:var(--faint)} .sitebar-nav{ display:flex; align-items:center; gap:.15rem; margin-left:auto; flex-wrap:wrap; } .sitebar-nav a{ font-size:.85rem; color:var(--muted); text-decoration:none; padding:.35rem .6rem; border-radius:.4rem; } .sitebar-nav a:hover{background:var(--surface-2); color:var(--ink)} .sitebar-nav a[aria-current="page"]{color:var(--accent); font-weight:600} .sitebar-nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px} /* ── 테마 단추 (자동 · 밝게 · 어둡게) ───────────────────────── */ .theme-switch{ font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .6rem; border-radius:999px; background:none; border:1px solid var(--border-strong); color:var(--muted); } .theme-switch:hover{background:var(--surface-2); color:var(--ink)} .theme-switch:focus-visible{outline:2px solid var(--accent); outline-offset:2px} .theme-switch-mark{font-size:.9em; line-height:1} @media (max-width:34rem){ .sitebar-inner{gap:.4rem .6rem; padding:.5rem .9rem} .sitebar-crumb{display:none} .sitebar-nav a{padding:.3rem .45rem; font-size:.8rem} .theme-switch-label{display:none} }