/* ═══════════════════════════════════════════════════════════
   포털 공통 레이아웃 — 상단 바 + 왼쪽 사이드바 + 본문
   (admin.html · teacher.html 공용. 색상·글꼴은 style.css)
   ═══════════════════════════════════════════════════════════ */
:root {
  --ad-side-w: 236px;
  --ad-top-h: 64px;
  --ad-side-bg: rgba(255,255,255,0.98);
}

/* ── 상단 바 (style.css의 nav 고정 스타일을 이어받음) ── */
nav.ad-top {
  padding:0 20px 0 16px; gap:14px; justify-content:flex-start;
}
.ad-menu-btn {
  display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border-soft);
  background:rgba(30,24,56,0.05); color:var(--off-white); font-size:18px; cursor:pointer; flex-shrink:0;
}
.ad-brand {
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--off-white); flex-shrink:0;
  width:calc(var(--ad-side-w) - 16px);
}
.ad-brand img { height:30px; width:30px; object-fit:contain; }
.ad-brand span { font-size:13px; font-weight:600; white-space:nowrap; }
.ad-top-title { font-size:15px; font-weight:700; color:var(--purple, #5B3FA6); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ad-top-right { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.ad-top-right .ad-top-who { font-size:12.5px; color:var(--muted); white-space:nowrap; }

/* ── 사이드바 ── */
.ad-side {
  position:fixed; top:var(--ad-top-h); left:0; bottom:0; width:var(--ad-side-w); z-index:90;
  background:var(--ad-side-bg); border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; overflow:hidden;
}
.ad-search { padding:14px 14px 8px; position:relative; }
.ad-search input {
  width:100%; padding:9px 12px 9px 34px; border-radius:9px; font-size:13px; font-family:inherit; outline:none;
  background:rgba(30,24,56,0.06); border:1px solid var(--border-soft); color:var(--off-white);
  transition:border-color .2s;
}
.ad-search input:focus { border-color:rgba(245,197,24,0.5); }
.ad-search input::-webkit-search-cancel-button { filter:none; }
.ad-search::before {
  content:'🔍'; position:absolute; left:25px; top:23px; font-size:12px; opacity:.6; pointer-events:none;
}
.ad-results { padding:0 10px 8px; }
.ad-results[hidden] { display:none; }
.ad-result {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--off-white);
}
.ad-result small { display:block; font-size:11px; color:var(--muted); }
.ad-result mark { background:none; color:var(--purple, #5B3FA6); }
.ad-result.active, .ad-result:hover { background:rgba(245,197,24,0.12); }
.ad-result-empty { padding:10px 12px; font-size:12.5px; color:var(--muted); }

.ad-groups[hidden] { display:block; visibility:hidden; }
.ad-groups { flex:1; overflow-y:auto; padding:4px 10px 16px; scrollbar-width:thin; }
.ad-groups::-webkit-scrollbar { width:6px; }
.ad-groups::-webkit-scrollbar-thumb { background:rgba(30,24,56,0.12); border-radius:3px; }
.ad-group { margin-bottom:2px; }
.ad-group[hidden] { display:none; }
.ad-group-btn {
  width:100%; display:flex; align-items:center; gap:10px; padding:10px 10px; border:none; border-radius:9px;
  background:none; color:var(--off-white); font-size:13.5px; font-weight:600; font-family:inherit; cursor:pointer; text-align:left;
  transition:background .15s;
}
.ad-group-btn:hover { background:rgba(30,24,56,0.05); }
.ad-group-btn .ic { width:22px; text-align:center; font-size:15px; flex-shrink:0; }
.ad-group-btn .lb { flex:1; }
.ad-group-btn .ct { font-size:11px; color:var(--muted); font-weight:500; }
.ad-group-btn .ar { font-size:10px; color:var(--muted); transition:transform .2s; }
.ad-group.open .ad-group-btn .ar { transform:rotate(90deg); }
.ad-group.has-active .ad-group-btn { color:var(--purple, #5B3FA6); }
.ad-group.single .ad-group-btn .ar { display:none; }
/* 항상 펼친 사이드바 (메뉴가 적은 페이지): 그룹 머리글은 라벨, 항목은 늘 보임 */
.ad-side.always-open .ad-group:not(.single) .ad-group-btn { cursor:default; padding:12px 10px 4px; font-size:11.5px; color:var(--muted); letter-spacing:.3px; }
.ad-side.always-open .ad-group:not(.single) .ad-group-btn:hover { background:none; }
.ad-side.always-open .ad-group-btn .ct, .ad-side.always-open .ad-group-btn .ar { display:none; }
.ad-side.always-open .ad-items { display:block; padding-left:0; }
.ad-side.always-open .ad-group.has-active .ad-group-btn { color:var(--muted); }
.ad-items { display:none; padding:2px 0 6px 8px; }
.ad-group.open .ad-items { display:block; }
.ad-sub { font-size:10.5px; color:var(--muted); letter-spacing:.5px; padding:8px 0 3px 26px; }
.ad-item {
  width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px 8px 26px; border:none; border-radius:8px;
  background:none; color:var(--muted); font-size:13px; font-family:inherit; cursor:pointer; text-align:left;
  position:relative; transition:color .15s, background .15s;
}
.ad-item:hover { color:var(--off-white); background:rgba(30,24,56,0.05); }
.ad-item.active { color:var(--purple, #5B3FA6); background:rgba(245,197,24,0.1); font-weight:600; }
.ad-item.active::before { content:''; position:absolute; left:12px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--gold); transform:translateY(-50%); }
.ad-item .badge { margin-left:auto; font-size:10.5px; padding:1px 7px; border-radius:10px; background:rgba(214,69,69,0.18); color:#D64545; font-weight:600; }
.ad-side-foot { padding:10px 14px; border-top:1px solid var(--border-soft); font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.ad-side-foot .role { padding:2px 8px; border-radius:10px; background:rgba(245,197,24,0.12); color:var(--purple, #5B3FA6); font-weight:600; }
.ad-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:89; }

/* ── 본문 ── */
.ad-main { margin-left:var(--ad-side-w); padding:calc(var(--ad-top-h) + 26px) 32px 96px; min-height:100vh; }
.ad-main > .tab-panel, .ad-main > .ad-crumb { max-width:1100px; margin-left:auto; margin-right:auto; }
.ad-crumb { font-size:12.5px; color:var(--muted); margin-bottom:16px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ad-crumb b { color:var(--off-white); font-weight:600; }
.ad-crumb .now { color:var(--purple, #5B3FA6); font-weight:700; }
.ad-crumb .sep { opacity:.5; }
.ad-crumb .desc { margin-left:6px; opacity:.8; }
#legacyTabs, #tnavLegacy { display:none !important; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── 반응형 ── */
@media (max-width:1023px) {
  :root { --ad-top-h:56px; }
  .ad-menu-btn { display:inline-flex; align-items:center; justify-content:center; }
  .ad-brand { width:auto; }
  .ad-brand span { display:none; }
  .ad-top-right .ad-top-who { display:none; }
  .ad-side { transform:translateX(-100%); transition:transform .22s ease; width:min(300px, 86vw); box-shadow:0 0 40px rgba(30,24,56,0.15); }
  body.ad-side-open .ad-side { transform:none; }
  body.ad-side-open .ad-backdrop { display:block; }
  body.ad-side-open { overflow:hidden; }
  .ad-main { margin-left:0; padding:calc(var(--ad-top-h) + 18px) 16px 80px; }
}
@media (max-width:768px) {
  nav.ad-top { height:56px; padding:0 12px; }
  .ad-top-right .btn { padding:6px 10px; }
}