/* ============================================================
   KARA Campus AI Agent — 레이아웃 (셸 · 사이드바 · 상단바 · 뷰)
   ============================================================ */

/* ---------- 레이아웃 ---------- */
#app{display:flex;min-height:100vh}
.sidebar{width:var(--sb-w);flex:0 0 var(--sb-w);background:var(--surface);border-right:1px solid var(--line);color:var(--ink-2);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30}
.main{margin-left:var(--sb-w);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}

/* ---------- 브랜드 ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px}
.brand-mark-img{height:31px;width:52px;object-fit:fill;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-size:15px;color:var(--ink);letter-spacing:-.3px;font-weight:800}
.brand-text span{font-size:11px;color:var(--ink-3)}

/* ---------- 네비 ---------- */
.nav{padding:6px 12px;flex:1;overflow:auto}
.nav-group{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;padding:14px 10px 6px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--ink-2);font-size:13.5px;font-weight:500;margin-bottom:2px;transition:.15s;position:relative}
.nav-item .ni-ic{width:18px;text-align:center;opacity:.7;font-size:13px;color:var(--ink-3)}
.nav-item .ni-tag{margin-left:auto;font-size:9.5px;font-style:normal;font-weight:700;color:var(--ink-3);background:var(--surface-2);padding:2px 6px;border-radius:6px;letter-spacing:.02em}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item:hover .ni-ic{opacity:1;color:var(--ink-2)}
.nav-item.active{background:var(--primary-50);color:var(--primary);font-weight:700}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--primary)}
.nav-item.active .ni-ic{opacity:1;color:var(--primary)}
.nav-item.active .ni-tag{color:var(--primary);background:#fff}

.sidebar-foot{padding:14px 16px;border-top:1px solid var(--line)}
.pill-status{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#0f7a44;background:var(--ok-50);padding:5px 10px;border-radius:20px;font-weight:600}
.pill-status .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(21,160,90,.18)}
.muted-xs{font-size:11px;color:var(--ink-3);margin-top:8px}

/* ---------- 상단바 ---------- */
.topbar{height:var(--tb-h);background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 22px}
.tb-left{display:flex;align-items:center;gap:14px}
.crumb{font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.crumb b{color:var(--ink);font-weight:700}
.crumb i{font-style:normal;color:var(--ink-3)}
.tb-right{display:flex;align-items:center;gap:14px}
.icon-btn{width:38px;height:38px;border-radius:9px;color:var(--ink-2);font-size:16px;display:grid;place-items:center;position:relative;transition:.15s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .badge{position:absolute;top:5px;right:5px;background:var(--danger);color:#fff;font-size:9px;font-style:normal;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;font-weight:700;padding:0 3px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:0 12px;height:38px;width:260px;color:var(--ink-3)}
.search input{border:none;background:none;outline:none;width:100%;color:var(--ink)}
.user{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.user-meta{display:flex;flex-direction:column;line-height:1.25}
.user-meta strong{font-size:13px}
.user-meta span{font-size:11px;color:var(--ink-3)}

/* ---------- 뷰 ---------- */
.view{padding:24px 28px 64px;max-width:1320px;width:100%;margin:0 auto;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:22px;font-weight:800;letter-spacing:-.4px}
.page-head .sub{color:var(--ink-2);font-size:13.5px;margin-top:4px}
.page-head .req{font-size:11px;font-weight:700;color:var(--primary);background:var(--primary-50);padding:3px 9px;border-radius:6px;margin-left:8px;vertical-align:middle}

/* ---------- 반응형 ---------- */
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:.2s;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .search{display:none}
}