/* ==========================================================
   base.css — 세 화면이 함께 쓰는 색·글꼴 토큰

   style.css · news.css · invest.css 보다 먼저 읽혀야 합니다.
   각 HTML 의 <link> 순서를 바꾸지 마세요.

   여기 한 곳만 고치면 사이트 전체 색이 바뀝니다.
   예전에는 style.css 와 news.css 가 같은 값을 따로 들고 있어
   한쪽만 고치면 두 화면 톤이 어긋났습니다.
   ========================================================== */

:root{
  --paper:#E9ECE6;          /* 바탕 */
  --surface:#FFFFFF;        /* 카드 · 학습지 */
  --ink:#171E1B;
  --ink-soft:#5C6862;
  --ink-dim:#8C968F;
  --line:#D3D9D0;
  --mark:#D6F24B;           /* 형광펜 */
  --mark-deep:#AFCC2A;
  --mark-soft:#F2F8D8;
  --danger:#A8402B;
  --danger-bg:#F6E4DF;
  --danger-line:#E3C4BB;
  --good:#4A5B18;
  --good-bg:#EDF6D9;
  --good-line:#D7E6AE;

  /* 모의투자 — 국내 관행대로 오르면 빨강, 내리면 파랑 */
  --up:#C0392B;
  --down:#1F5FA8;

  --radius:14px;
  --head:56px;              /* 뉴스 머리줄 한 줄 높이 기준 */

  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --display:"Bricolage Grotesque","Pretendard Variable",sans-serif;
  /* 학습지 본문만 세리프 — 인쇄해서 읽는 글이라 남겨 두었습니다 */
  --read:"Newsreader",Georgia,serif;

  color-scheme:light;
}

/* ==========================================================
   어두운 화면

   밤에 폰으로 볼 때를 위한 것입니다. 색만 바꿔치기하므로
   각 화면의 레이아웃 규칙은 하나도 건드리지 않습니다.
   인쇄(학습지 PDF)는 항상 밝은 색을 씁니다 — news.css 의 @media print 참고.
   ========================================================== */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#141815;
    --surface:#1E241F;
    --ink:#E7EDE6;
    --ink-soft:#9AA69D;
    --ink-dim:#6E7B72;
    --line:#333D36;
    --mark:#9FBF1F;
    --mark-deep:#B9D93B;
    --mark-soft:#2A3320;
    --danger:#E08A73;
    --danger-bg:#3A241E;
    --danger-line:#5A3A30;
    --good:#B9D93B;
    --good-bg:#26301A;
    --good-line:#3D4A28;

    --up:#E4695A;
    --down:#6FA6E8;

    color-scheme:dark;
  }
}