/* BackStage 공통 상단 바: 무대·설명서 페이지(web/src/styles/app.css .topbar)와 같은 모양.
   보드 원본 CSS는 건드리지 않고, 보드 테마(밝음/어두움)와 상관없이 BackStage 색을 쓴다. */
:root{--site-h:52px}
.site-bar{height:var(--site-h);display:flex;align-items:center;gap:14px;padding:0 14px;background:#16181d;border-bottom:1px solid #2a2e37;color:#e8e9ec;font:14px/1.5 "Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif}
.site-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;font-weight:800;font-size:16px;letter-spacing:.01em}
.site-brand img{border-radius:6px}
.site-pages{display:flex;gap:2px;margin-left:8px}
.site-pages a{text-decoration:none;color:#9097a3;padding:6px 10px;border-radius:6px}
.site-pages a:hover{color:#e8e9ec;background:#1d2027}
.site-pages a.on{color:#e8e9ec;background:#1d2027;box-shadow:inset 0 -2px 0 #e5383b}
.site-pages a:focus-visible{outline:2px solid #e5383b;outline-offset:1px}

/* 보드 화면을 상단 바 높이만큼 아래로 */
.layout{height:calc(100vh - var(--top-h) - var(--site-h))}
.busy{top:calc(var(--top-h) + var(--site-h) + 12px)}
@media (max-width: 1000px){
  .rail{top:calc(var(--top-h) + var(--site-h))}
}