:root{--bg:#0b0f14;--card:#121821;--line:#223040;--fg:#e8edf3;--sub:#9aa8b8;--acc:#4ea1ff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font-family:Pretendard,'Malgun Gothic',sans-serif;line-height:1.6}
header{display:flex;align-items:center;gap:12px;padding:16px;max-width:1100px;margin:0 auto}
header img{height:36px}header b{font-size:15px}header span{color:var(--sub);font-size:13px;display:block}
main{max-width:1100px;margin:0 auto;padding:0 16px 40px}
h1{font-size:22px;margin:8px 0 6px}p{color:var(--sub);margin:0 0 14px}
.player{position:relative;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden;aspect-ratio:16/9}
.player video{width:100%;height:100%;display:block}.player .msg{position:absolute;inset:auto 0 0 0;padding:8px 12px;font-size:13px;color:var(--sub);background:#000a}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;color:inherit;text-decoration:none}
.card img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.card div{padding:10px 12px}.card b{display:block}.card small{color:var(--sub)}
nav{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}nav a{color:var(--acc);text-decoration:none;font-size:14px;border:1px solid var(--line);border-radius:6px;padding:4px 10px}
footer{color:var(--sub);font-size:12px;text-align:center;padding:20px}