/*
  site.css — 웹폰트와 다크 모드.
  stylesheet.css(dinky 테마) 다음에 읽혀 색만 토큰으로 바꿔 끼운다.
  레이아웃은 건드리지 않는다.
*/

:root {
  --font-sans: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'Helvetica Neue', 'Apple SD Gothic Neo', Arial, sans-serif;

  --bg-page:      #f2f2f2;
  --bg-card:      #ffffff;
  --bg-soft:      #f9f9f9;
  --bg-chip:      #e0e0e0;
  --bg-tint:      #f7f9fc;

  --ink:          #373737;
  --ink-strong:   #222222;
  --ink-mute:     #555555;
  --ink-faint:    #888888;

  --rule:         #dddddd;
  --rule-soft:    #eeeeee;
  --rule-card:    #cfd8e3;

  --accent:       #007edf;
  --accent-hover: #005fa3;
  --accent-soft:  #eaf2fb;
  --on-accent:    #ffffff;

  --shadow:       rgba(0, 0, 0, 0.1);

  --band:         linear-gradient(#373737, #212121);
  --band-ink:     #ffffff;
  --band-ink-2:   #f2f2f2;
  --band-edge:    #111111;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:      #14171a;
    --bg-card:      #1b2026;
    --bg-soft:      #20262d;
    --bg-chip:      #2b333c;
    --bg-tint:      #1e242b;

    --ink:          #d7dde3;
    --ink-strong:   #e9eef3;
    --ink-mute:     #a8b2bc;
    --ink-faint:    #7d8892;

    --rule:         #2c343d;
    --rule-soft:    #232a31;
    --rule-card:    #37424e;

    --accent:       #57a9e8;
    --accent-hover: #86c3f2;
    --accent-soft:  #16303f;
    --on-accent:    #0b1116;

    --shadow:       rgba(0, 0, 0, 0.45);

    --band:         linear-gradient(#1a1e22, #101316);
    --band-ink:     #eef2f6;
    --band-ink-2:   #cbd3db;
    --band-edge:    #0a0d10;
  }
}

/* ── 활자 ─────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
th {
  font-family: var(--font-sans);
}
body {
  color: var(--ink);
  letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--ink-strong);
  letter-spacing: -0.02em; /* 원본 -1px는 한글에서 자모가 붙는다 */
}

/* ── 바탕과 띠 ───────────────────────────────── */
#main_content_wrap {
  background: var(--bg-page);
  border-top: 1px solid var(--band-edge);
  border-bottom: 1px solid var(--band-edge);
}
#header_wrap,
#footer_wrap {
  background: var(--band);
}
#header_wrap,
#header_wrap h1,
#header_wrap h2,
#footer_wrap {
  color: var(--band-ink);
}
footer p { color: var(--band-ink-2); }
footer a { color: var(--band-ink-2); }

a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-hover); }

/* ── 본문 요소 ───────────────────────────────── */
pre, code {
  color: var(--ink-strong);
  background-color: var(--bg-card);
  box-shadow: 0 0 10px var(--shadow);
}
blockquote {
  color: var(--ink-mute);
  border-left: 3px solid var(--rule);
}
th {
  background: var(--bg-chip);
  color: var(--ink-strong);
}
td { border: 1px solid var(--rule); }
form { background: var(--bg-soft); }
hr { border-color: var(--rule); }

/* 어두울 때는 밝은 선 이미지가 보이지 않는다 */
@media (prefers-color-scheme: dark) {
  h2 {
    background: none;
    border-bottom: 1px solid var(--rule);
  }
  img.company-logo { filter: none; }
}