:root {
  --bg:#0b1020; --panel:#121a31; --panel2:#17223d; --text:#edf2ff; --muted:#aab6d3;
  --border:rgba(255,255,255,.08); --accent:#6ea8fe; --green:#30d158; --red:#ff6b6b;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,Pretendard,Noto Sans KR,sans-serif; background:linear-gradient(180deg,#0b1020,#10182d); color:var(--text); }
.wrap { max-width:1240px; margin:0 auto; padding:40px 20px 80px; }
.hero,.card { background:rgba(18,26,49,.94); border:1px solid var(--border); border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.hero { padding:32px; margin-bottom:22px; background:linear-gradient(135deg, rgba(110,168,254,.16), rgba(48,209,88,.08)); }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.card { grid-column:span 12; padding:22px; }
.span-4 { grid-column:span 4; } .span-6 { grid-column:span 6; } .span-8 { grid-column:span 8; } .span-12 { grid-column:span 12; }
h1 { margin:0 0 10px; font-size:34px; } h2 { margin:0 0 14px; font-size:22px; } h3 { margin:0 0 8px; font-size:18px; }
p, li { line-height:1.6; } ul { margin:10px 0 0 18px; }
a { color:#93c5fd; text-decoration:none; } a:hover { text-decoration:underline; }
.chip { display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--muted); font-size:13px; }
.muted { color:var(--muted); }
.list { display:flex; flex-direction:column; gap:12px; }
.item { padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--border); }
.kv { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.badge { display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; background:rgba(110,168,254,.14); color:#cfe2ff; margin-right:6px; }
.footer { margin-top:30px; color:var(--muted); font-size:13px; }
@media (max-width:900px){ .span-4,.span-6,.span-8 { grid-column:span 12; } .kv { grid-template-columns:1fr; } h1 { font-size:28px; } }