/* 모든 화면 상단의 공통 바(topbar.js). 페이지마다 토큰이 달라서(가이드·손으로 쓴 페이지) 색은 여기서 직접 정한다 —
   바는 밝은 테마에서도 사이드바·홈 띠와 같은 남색이다. --tb-h 는 가이드의 붙박이 사이드바가 바 아래에서 시작하는 데 쓴다. */
:root{--tb-h:44px;--tb-bg:#1b2138;--tb-ink:#e9eaf3;--tb-mute:#9ea3bd;--tb-accent:#ea7900}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tb-bg:#0d1022;--tb-accent:#ff9a2e}}
:root[data-theme="dark"]{--tb-bg:#0d1022;--tb-accent:#ff9a2e}
html{scroll-padding-top:calc(var(--tb-h) + 12px)}
.tb{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:18px;height:var(--tb-h);margin:0;padding:0 clamp(12px,2.2vw,28px);
  background:var(--tb-bg);color:var(--tb-ink);border-bottom:1px solid rgba(255,255,255,.1);
  font:500 13px/1 "IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;white-space:nowrap}
.tb a{color:inherit;text-decoration:none}
.tb a:focus-visible{outline:2px solid var(--tb-accent);outline-offset:2px}
.tb-brand{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tb-mute)}
.tb-brand b{color:var(--tb-accent);letter-spacing:.02em;margin-right:6px}
.tb a.tb-brand:hover{color:#fff}
.tb-nav{display:flex;align-items:center;gap:2px;min-width:0}
.tb-nav a{padding:7px 9px;border-radius:6px;color:#c9cce0}
.tb-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.tb-nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--tb-accent);border-radius:6px 6px 0 0}
.tb-stat{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.tb-stat::-webkit-scrollbar{display:none}
.tb-pub,.tb-priv{display:flex;align-items:center;gap:6px}
.tb-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#c9cce0;font-size:12px}
.tb-chip b{font:500 12.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace;color:#fff;font-variant-numeric:tabular-nums}
.tb a.tb-chip:hover{background:rgba(234,121,0,.24);color:#fff}
.tb-chip.warn b{color:#ffb35e}
.tb-user{display:flex;align-items:center;flex:none}
.tb-me{display:inline-flex;align-items:center;gap:8px;color:#fff}
.tb-av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tb-accent);color:#fff;font-size:11.5px;font-weight:700;text-transform:uppercase}
.tb a.tb-login{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:7px;background:var(--tb-accent);color:#fff;font-weight:600}
.tb a.tb-login:hover{filter:brightness(1.08)}
@media (max-width:1180px){.tb-nav{display:none}}
@media (max-width:560px){.tb{gap:10px}.tb-me span:last-child{display:none}}
@media print{.tb{display:none}}