:root{
  --bg:#0b0f19; --panel:#121a2a; --line:#24304a;
  --text:#e8edf7; --muted:#a8b3cc; --accent:#4da3ff;
}
*{ 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 30% 10%, #142042 0%, var(--bg) 55%);
  color:var(--text);
}
.wrap{ max-width: 980px; margin: 0 auto; padding: 24px 16px 40px; }
.top{ display:flex; flex-direction:column; gap:8px; margin-bottom: 14px; }
.title{ font-size: 22px; font-weight: 800; letter-spacing:-0.2px; }
.sub{ color:var(--muted); font-size: 14px; line-height: 1.5; }

.card{
  background: rgba(18, 26, 42, 0.85);
  border: 1px solid rgba(36, 48, 74, 0.9);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}
.card-h{ padding: 14px 14px 6px; border-bottom: 1px solid rgba(36, 48, 74, 0.9); }
.h-title{ font-weight: 800; font-size: 16px; }
.h-sub{ color:var(--muted); font-size: 12px; margin-top:6px; }

.search{ padding: 12px 14px; border-bottom: 1px solid rgba(36,48,74,0.9); }
.search input{
  width:100%; padding: 12px 12px; border-radius: 12px;
  border: 1px solid rgba(36,48,74,0.9);
  background: rgba(8, 12, 22, 0.6); color: var(--text);
  outline:none; font-size: 14px;
}
.grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px; padding: 14px;
}
@media (max-width: 720px){ .grid{ grid-template-columns: 1fr; } }

.item{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px; border-radius: 14px;
  border: 1px solid rgba(36,48,74,0.9);
  background: rgba(8,12,22,0.55);
  text-decoration:none; color: var(--text);
}
.item:hover{ border-color: rgba(77,163,255,0.7); }
.pill{
  padding: 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: rgba(77,163,255,0.15);
  border: 1px solid rgba(77,163,255,0.45);
  color: var(--accent);
}
.name{ font-weight: 750; flex: 1 1 auto; }
.go{
  font-size: 12px; color: var(--muted);
  border: 1px solid rgba(36,48,74,0.9);
  padding: 6px 10px; border-radius: 999px;
}
.footer{ margin-top: 12px; }
.link{ color: var(--muted); text-decoration:none; }
.link:hover{ color: var(--text); }