/* ============================================================
   App shell : 좌측 대메뉴 + 상단바 + 본문 (로그인 후 2분할 구조)
   ============================================================ */
#app{height:100%;}

.shell{
  display:grid;
  grid-template-columns:var(--nav-w) 1fr;
  grid-template-rows:100%;
  height:100vh;
  overflow:hidden;
  transition:grid-template-columns .18s ease;
}
.shell.is-collapsed{grid-template-columns:0 minmax(0,1fr);}
.shell.is-collapsed .sidenav{min-width:0;visibility:hidden;pointer-events:none;}

/* ---------- 좌측 네비게이션 ---------- */
.sidenav{
  background:var(--navy-700);
  color:var(--s-300);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  border-right:1px solid var(--navy-800);
}
.sidenav__brand{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--navy-600);
  min-height:var(--top-h);
}
.sidenav__title{min-width:0;}
.sidenav__title b{display:block;font-size:14px;color:#fff;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.shell.is-collapsed .sidenav__title{display:none;}


.sidenav__scroll{flex:1;padding:10px 0 16px;}
.navgrp{margin-bottom:2px;}
.navgrp__label{
  font-size:12px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--navy-400);padding:14px 18px 6px;font-weight:700;
}
.shell.is-collapsed .navgrp__label{opacity:0;height:10px;padding:8px 0 0;overflow:hidden;}

.navitem{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 16px;min-height:40px;font-size:14px;line-height:1.5;font-weight:600;color:var(--s-300);
  border-left:3px solid transparent;text-align:left;
  transition:background .12s ease,color .12s ease;
}
.navitem:hover{background:var(--navy-600);color:#fff;}
.navitem.is-active{background:var(--teal-700);color:#fff;font-weight:700;border-left-color:var(--teal-300);}
.navitem__ico{flex:0 0 18px;width:18px;height:18px;opacity:.85;display:grid;place-items:center;}
.navitem.is-active .navitem__ico{opacity:1;}
.navitem__txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.navitem__id{font-size:9.5px;color:var(--navy-400);font-family:var(--font-num);}
.navitem.is-active .navitem__id{color:var(--teal-200);}
.shell.is-collapsed .navitem__txt,
.shell.is-collapsed .navitem__id{display:none;}
.shell.is-collapsed .navitem{justify-content:center;padding:11px 0;}

.navsub{padding:2px 0 4px;}
.navsub .navitem{padding-left:44px;color:#a9b6c8;}
.navsub .navitem.is-active{padding-left:44px;}
.shell.is-collapsed .navsub{display:none;}

.sidenav__foot{
  padding:12px 16px;border-top:1px solid var(--navy-600);
  font-size:9.5px;line-height:1.6;color:var(--navy-400);
}
.shell.is-collapsed .sidenav__foot{display:none;}

/* ---------- 메인 ---------- */
.main{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--bg-app);}

.topbar{
  height:var(--top-h);flex:0 0 var(--top-h);
  background:var(--bg-surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:12px;padding:0 20px;
  box-shadow:var(--sh-1);z-index:20;
}
.topbar__spacer{flex:1;min-width:0;}
.topbar__right{display:flex;align-items:center;gap:8px;}

.iconbtn{
  width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  color:var(--text-muted);transition:background .12s,color .12s;
}
.iconbtn:hover{background:var(--bg-inset);color:var(--text);}
.iconbtn.is-on{background:var(--accent-soft);color:var(--accent);}

.whoami{
  display:flex;align-items:center;gap:9px;padding:4px 10px 4px 5px;border-radius:var(--r-full);
  border:1px solid var(--border);background:var(--bg-subtle);
}
.whoami:hover{border-color:var(--border-strong);background:var(--bg-inset);}
.avatar{
  width:26px;height:26px;border-radius:var(--r-full);flex:0 0 26px;display:grid;place-items:center;
  background:var(--navy-700);color:#fff;font-size:11px;font-weight:700;
}
.avatar.is-A{background:var(--amber-700);}
.avatar.is-M{background:var(--teal-700);}
.avatar.is-U{background:var(--s-500);}
.whoami__txt{text-align:left;line-height:1.25;}
.whoami__txt b{display:block;font-size:12px;font-weight:700;}
.whoami__txt span{display:block;font-size:10px;color:var(--text-muted);}

.page{flex:1;overflow-y:auto;overflow-x:hidden;}
.page__inner{padding:20px 24px 56px;max-width:1560px;margin:0 auto;}

.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.page-head__main{flex:1;min-width:260px;}
.page-head h2{font-size:19px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em;}
/* 제목 글자가 크므로 도움말 아이콘도 한 치수 키우고 글줄 가운데에 맞춘다. */
.page-head h2 .help{width:17px;height:17px;font-size:11px;margin-left:8px;vertical-align:3px;}
.page-head__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* 상세 화면의 머리는 아래 카드와 같은 폭으로 선다(app.js pageHead 의 opts.pane).
   .pane-w 는 screens.css 에 정의돼 있고 배너·규칙안내가 같은 값을 쓴다. */

@media (max-width:900px){
  .shell{grid-template-columns:var(--nav-w-collapsed) 1fr;}
  .page__inner{padding:16px 14px 48px;}
}