/* N0731 */
: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 가 <html data-theme> 에 적는다) */
: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);
}

/* N0732 */
.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}
/* N0733 */
.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}
}