:root{
  --bg:#0b1220;
  --panel:#0f1a2c;
  --panel2:#101c31;
  --line:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.55);
  --primary:#3b82f6;
  --primary2:#2563eb;
  --radius:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, rgba(59,130,246,.25), transparent 60%), var(--bg);
  color:var(--text);
}

.app{display:flex; min-height:100vh}

/* Sidebar */
.sidebar{
  width:260px;
  background: rgba(8,13,25,.92);
  border-right:1px solid var(--line);
  padding:16px 12px;
  position:sticky; top:0; height:100vh;
}
.brand{display:flex; align-items:center; gap:10px; padding:10px 10px 18px}
.brand__logo{width:34px;height:34px;display:grid;place-items:center;background:rgba(59,130,246,.18);border:1px solid var(--line);border-radius:6px}
.brand__name{font-weight:700;font-size:20px !important;}
.nav{display:flex; flex-direction:column; gap:6px}
.nav__item{
  padding:10px 12px;
  border-radius:6px;
  color:#fff;
  text-decoration:none;
  border:1px solid transparent;
}
.nav__item i {color:var(--muted);}
.nav__item:hover{background:rgba(255,255,255,.04); color:var(--text)}
.nav__item.is-active{background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.25); color:var(--text)}
.nav__divider{height:1px;background:var(--line); margin:10px 0}
.nav__section{font-size:16px; font-weight:bold;color:rgba(255,255,255,.8); padding:12px 16px;background: #0f1d39;border-radius: 6px;border:1px solid transparent;}

/* Main */
.main{flex:1; display:flex; flex-direction:column; min-width:0}
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid var(--line);
  background: linear-gradient(to bottom, rgba(15,26,44,.75), rgba(15,26,44,.35));
  position:sticky; top:0; z-index:10;
}
.topbar__left{display:flex; align-items:center; gap:10px; min-width:0}
.crumb__title{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__right{display:flex; align-items:center; gap:10px;font-size: 14px !important;}
.user{color:var(--muted)}
.icon-btn{
  background:transparent; border:1px solid var(--line); color:var(--text);
  height:36px; padding:0 10px; border-radius:12px; cursor:pointer;
}
.pill{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  height:36px;
  padding:0 12px;
  border-radius:999px;
  cursor:pointer;
}
.badge{
  margin-left:6px;
  background:var(--primary);
  color:white;
  border-radius:999px;
  padding:2px 6px;
  font-size:12px;
}
.hidden{display:none}

.content{padding:22px}

/* Page */
.page-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:16px}
.h1{margin:6px 0 6px; font-size:26px}
.h2{margin:18px 0 10px; font-size:16px; color:rgba(255,255,255,.86)}
.muted{color:var(--muted); font-size:13px}
.tag{
  display:inline-flex; align-items:center; height:24px;
  padding:0 10px; border-radius:999px;
  background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.25);
  font-size:12px; color:rgba(255,255,255,.82);
}
.actions{display:flex; gap:10px; align-items:center}

/* List & cards */
.list{display:flex; flex-direction:column; gap:12px}
.card-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius: var(--radius);
}
.icon{
  width:44px;height:44px; display:grid; place-items:center;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:12px;
}
.meta{min-width:0; flex:1}
.title{font-weight:700}
.sub{color:var(--muted); font-size:13px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.right{display:flex; align-items:center; gap:10px}
.date{color:rgba(255,255,255,.55); font-size:12px; min-width:72px; text-align:right}
.pill.small{height:26px; padding:0 10px; font-size:12px}

.btn{
  height:36px; padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.btn--primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  border-color:rgba(59,130,246,.35);
}
.btn--primary:hover{filter:brightness(1.05)}

/* Switch */
.switch{display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; border:1px solid var(--line); padding:6px 10px; border-radius:999px}
.switch input{accent-color: var(--primary);}

/* Modal */
.modal{position:fixed; inset:0; display:none; z-index:100}
.modal.show{display:block}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55)}
.modal__panel{
  position:relative;
  width:min(560px, calc(100% - 24px));
  margin:80px auto 0;
  background: rgba(15,26,44,.98);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.modal__header,.modal__footer{padding:14px 16px; border-bottom:1px solid var(--line)}
.modal__footer{border-bottom:none; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px}
.modal__header{display:flex; justify-content:space-between; align-items:center}
.modal__body{padding:14px 16px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field label{font-size:12px; color:rgba(255,255,255,.70)}
.field input,.field select{
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
  padding:0 12px;
}
.hint{font-size:12px;color:rgba(255,255,255,.45)}

/* Chat */
.chat{
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.chat__messages{
  height: calc(100vh - 260px);
  padding:14px;
  overflow:auto;
}
.msg{padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.03); margin-bottom:10px}
.msg__meta{display:flex; gap:10px; font-size:12px; color:rgba(255,255,255,.55); margin-bottom:6px}
.msg__name{color:rgba(255,255,255,.85); font-weight:700}
.msg__body{white-space:pre-wrap}
.chat__composer{
  display:flex; gap:10px; padding:12px; border-top:1px solid var(--line);
}
.chat__composer input{
  flex:1; height:40px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); color:var(--text); padding:0 12px;
}

/* Toast */
.toast-root{position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:10px; z-index:200}
.toast{
  opacity:0; transform:translateY(6px);
  background:rgba(15,26,44,.98);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  color:rgba(255,255,255,.88);
  transition:.2s ease;
}
.toast.show{opacity:1; transform:translateY(0)}

/* Field row */
.field-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.field-row input{flex:1; min-width:150px}

/* Card */
.card{
  padding:16px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:var(--radius);
  margin-bottom:16px;
}

/* Panel (알림) */
.panel{
  position:absolute;
  top:100%;
  right:0;
  margin-top:8px;
  width:320px;
  max-height:400px;
  background:rgba(15,26,44,.98);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.panel__head{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-weight:700;
  font-size:13px;
}
.panel__body{
  padding:8px;
  overflow-y:auto;
  max-height:350px;
}

/* Responsive */
.topbar__burger{display:none}
@media (max-width: 900px){
  .sidebar{position:fixed; left:-280px; transition:.2s; z-index:50; box-shadow:2px 0 12px rgba(0,0,0,.3)}
  .sidebar.is-open{left:0}
  .topbar__burger{display:inline-flex}
  .content{padding:16px}
  .right{flex-wrap:wrap; justify-content:flex-end}
  .page-head{flex-direction:column; align-items:stretch}
  .actions{flex-wrap:wrap}
  .field-row{flex-direction:column; align-items:stretch}
  .field-row input{min-width:auto}
  .card-row{flex-wrap:wrap}
  .card-row .right{margin-left:auto}
}
@media (max-width: 360px){
  .content{padding:12px}
  .card-row{padding:10px}
}