/* ============================================================
   블랙박스 GPS 뷰어 — 디자인 규칙 (데모)
   따뜻한 크림 바탕 · 잉크 블랙 알약 버튼 · 큰 모서리 · 아껴 쓰는 오렌지
   ============================================================ */
:root{
  /* 바탕 */
  --canvas:#F3F0EE;      /* 페이지 바탕 (흰색 대신) */
  --lifted:#FCFBFA;      /* 바탕 위에 한 겹 올린 면 */
  --white:#FFFFFF;       /* 떠 있는 메뉴, 안내 카드 */
  --whisper:#E8E2DA;     /* 아주 옅은 구분선·배경 글자 */
  --line:rgba(20,20,19,.12);
  /* 글자 */
  --ink:#141413;         /* 제목·본문·주요 버튼 */
  --muted:#696969;       /* 보조 글자 */
  --link:#3860BE;
  /* 강조 (아껴 쓰기) */
  --route:#F37338;       /* 지도 경로선, 점 표시 */
  --signal:#CF4500;      /* 경고·동의 같은 특별한 경우만 */
  /* 버튼 */
  --btn-bg:var(--ink); --btn-text:var(--canvas);
  /* 하단 영역 */
  --foot-bg:#141413; --foot-text:#F3F0EE; --foot-muted:rgba(243,240,238,.6);
  /* 모서리: 작게(6) · 버튼(20) · 큰 면(40) · 알약(999) */
  --r-s:6px; --r-btn:20px; --r-xl:40px; --r-pill:999px;
  /* 그림자: 넓고 옅게 */
  --sh-1:0 4px 24px rgba(0,0,0,.04);
  --sh-2:0 24px 48px rgba(0,0,0,.08);
  /* 글꼴: 영문·숫자 Sofia Sans, 한글 Pretendard */
  --font:"Sofia Sans","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
}
/* 어두운 화면: 따뜻한 검정 바탕, 버튼은 크림색으로 뒤집기 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#161514; --lifted:#1F1E1C; --white:#262523; --whisper:#2C2A27; --line:rgba(243,240,238,.12);
    --ink:#F3F0EE; --muted:#A39E98; --link:#8FA9F0;
    --btn-bg:#F3F0EE; --btn-text:#141413;
    --foot-bg:#0D0C0C;
    --sh-1:0 4px 24px rgba(0,0,0,.35); --sh-2:0 24px 48px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --canvas:#161514; --lifted:#1F1E1C; --white:#262523; --whisper:#2C2A27; --line:rgba(243,240,238,.12);
  --ink:#F3F0EE; --muted:#A39E98; --link:#8FA9F0;
  --btn-bg:#F3F0EE; --btn-text:#141413;
  --foot-bg:#0D0C0C;
  --sh-1:0 4px 24px rgba(0,0,0,.35); --sh-2:0 24px 48px rgba(0,0,0,.45);
}

/* 카드 테두리·그림 액자 (밝은 화면) */
:root{ --card-line:transparent; --frame:#0f0f0e; --frame-line:transparent; }
/* 어두운 화면: 카드와 바탕 차이를 키우고, 액자·카드에 옅은 테두리, 보조 글자 밝게 */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --lifted:#22211F; --card-line:rgba(243,240,238,.08); --frame:#2A2826; --frame-line:rgba(243,240,238,.14); --muted:#BAB4AD; --whisper:#24221F; }
}
:root[data-theme="dark"]{ --lifted:#22211F; --card-line:rgba(243,240,238,.08); --frame:#2A2826; --frame-line:rgba(243,240,238,.14); --muted:#BAB4AD; --whisper:#24221F; }
:root{ --code-bg:#E8E2DA; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --code-bg:rgba(243,240,238,.14); } }
:root[data-theme="dark"]{ --code-bg:rgba(243,240,238,.14); }