/* =========================
   Vars
   ========================= */
:root{
  --header-h:56px;
  --sidebar-w:240px;
  --border:#e6e9ef;
  --brand:#333;
  --accent:#0b5cff;
  --panel:#fff;
  --muted:#727b87;
}

/* =========================
   Changelog block (뷰 내부 카드)
   ========================= */
.changelog-scope{
  margin:20px; padding:20px; background:#f9f9f9; color:#333;
  border:1px solid #ddd; border-radius:6px; font-family:'Noto Sans',sans-serif;
}
.changelog-scope h2{ text-align:center; color:#222; margin-bottom:20px; }
.changelog-scope .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.changelog-scope .box{ flex:1 1 48%; background:#fff; padding:15px; border-radius:8px; border:1px solid #eee; }
.changelog-scope pre{ background:#f5f5f5; color:#444; padding:12px; border-radius:6px; font-size:14px; white-space:pre-wrap; word-wrap:break-word; }
.changelog-scope .date{ font-weight:bold; margin-top:10px; border-bottom:1px solid #ccc; padding-bottom:4px; color:#555; }
@media (max-width:768px){ .changelog-scope .box{ flex-basis:100%; } }

/* =========================
   Fixed Header + Fixed Sidebar (스크롤 영향 없음)
   ========================= */
html,body{ height:100%; }
html{ scrollbar-gutter:stable both-edges; }    /* 스크롤바 유무에 따른 흔들림 방지 */
body{ margin:0; padding-top:var(--header-h); background:var(--panel); }

/* Header */
header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background:#fff; border-bottom:1px solid var(--border); z-index:1000;
}
header .brand{ font-weight:700; color:var(--brand); }
header .spacer{ flex:1; }                        /* ← 우측 정렬 핵심 */
#btnLogin,#btnLogout{ margin-left:6px; }
.btn.icon{ padding:6px 10px; line-height:1; }

/* Sidebar */
nav.sidenav{
  position:fixed; top:var(--header-h); left:0; bottom:0; width:var(--sidebar-w);
  overflow:auto; padding:12px; background:#fff;
  border-right:1px solid var(--border); z-index:900;
  transition:transform .2s ease;
}
nav.sidenav a{
  display:block; padding:10px 12px; text-decoration:none; color:#111; border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
nav.sidenav a:hover{ background:#f5f7fb; color:var(--accent); }
nav.sidenav a.active{ background:#eef3ff; color:var(--accent); font-weight:600; }

/* Content (viewer) */
.layout{ display:block; }                        /* grid/sticky 제거, 고정 레이아웃 */
#app{
  margin-left:var(--sidebar-w);
  padding:16px;                                  /* 기본 여백 */
  padding-top:16px;                              /* 첫 요소 margin-top 겹침 방지 */
  min-width:0;                                   /* 잘림 방지 */
  background:var(--panel);
}

/* Collapsed sidebar (토글 시) */
body.sidebar-collapsed nav.sidenav{ transform:translateX(-100%); }
body.sidebar-collapsed #app{ margin-left:0; }

/* View container card */
.view-scope{
  background:#fff; border:1px solid var(--border);
  border-radius:10px; padding:16px; margin-top:0;
}

/* Anchor offset so header doesn't cover anchored scroll */
html{ scroll-padding-top:var(--header-h); }

/* =========================
   (선택) 좁은 화면에서 사이드바 자동 접기
   ========================= */
@media (max-width: 900px){
  body:not(.sidebar-collapsed) nav.sidenav{ transform:translateX(-100%); }
  body:not(.sidebar-collapsed) #app{ margin-left:0; }
}



/* ===== Sidebar Tree (collapsible) ===== */
.js-collapsible-root { padding-right: 4px; }
.js-collapsible-root li{
  position: relative;
  list-style: none;
  padding-left: 1.2em;
}
.js-collapsible-root li.has-children > ul{
  margin: 0.25em 0 0.25em 0.6em;
  padding-left: 0.8em;
  border-left: 1px dashed var(--border, #e6e9ef);
}
.js-collapsible-root li.has-children:not(.open) > ul{ display:none; }
.js-collapsible-root li.has-children > button.toggle{
  position:absolute;
  left:0; top:0.05em;
  width:1.1em;
  line-height:1;
  font-weight:800;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  user-select:none;
}

/* Optional: link styling inside tree */
nav.sidenav a{
  display:block;
  padding:8px 10px;
  text-decoration:none;
  color:#111;
  border-radius:10px;
}
nav.sidenav a:hover{ background:#f5f7fb; color:var(--accent); }
nav.sidenav a.active{ background:#eef3ff; color:var(--accent); font-weight:600; }