:root {
  --bg: #0b0c10;
  --card: #12131a;
  --text: #e8eaf0;
  --muted: #9aa0a6;
  --pri: #4f8cff;
  --pri-ghost: #2a3a5e;
  --border: #2a2d36;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, "Noto Sans KR", "Malgun Gothic", sans-serif; }
a { color: var(--pri); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1024px; margin: 0 auto; padding: 16px; }

.site-header { position: sticky; top:0; z-index: 50; background: rgba(11,12,16,0.9); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); }
.site-header .wrap { display:flex; align-items:center; gap:12px; }
.brand { font-weight: 700; font-size: 20px; padding:8px 0; margin-right: 8px; }
nav a { margin-right: 12px; color: var(--text); opacity: 0.9; }
nav a:hover { opacity: 1; }
.auth { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hello { color: var(--muted); font-size: 14px; }

.site-footer { border-top:1px solid var(--border); margin-top: 24px; }
.site-footer .links a { margin-right: 12px; color: var(--muted); }
.site-footer .muted { color: var(--muted); font-size: 13px; }

.card { background: var(--card); border:1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.35); margin-bottom: 16px; }
.card.small { padding: 8px; text-align:center; }
.hero h1 { margin: 0 0 6px 0; }
.muted { color: var(--muted); }

.btn { background: var(--pri); color:#fff; border:none; padding: 8px 12px; border-radius: 10px; font-weight: 600; cursor:pointer; }
.btn:hover { filter: brightness(1.05); }
.btn.ghost { background: var(--pri-ghost); color:#cfe1ff; }

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:10px; text-align:left; }
.table thead th { color: var(--muted); font-weight:600; }

.form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:12px 0; }
.form label { display:flex; flex-direction:column; gap:6px; font-size: 14px; }
.form input[type="number"], .form input[type="text"], .form input[type="password"] { background:#0f1117; color:#e9ecf2; border:1px solid var(--border); border-radius:8px; padding:8px; }

.grid { display:grid; grid-template-columns: repeat(9, 1fr); gap: 8px; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 780px){ .grid { grid-template-columns: repeat(5, 1fr);} .grid2{ grid-template-columns: 1fr; } }

.balls { display:flex; gap:8px; align-items:center; }
.ball { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; font-weight:700; background:#222; }
.ball.b0, .ball.b1 { background:#263238; }
.ball.b2 { background:#1b5e20; }
.ball.b3 { background:#004d40; }
.ball.b4 { background:#1565c0; }
.ball.b5 { background:#6a1b9a; }

.bar { width:100%; background: var(--pri); border-radius:4px; }

.alert { background:#3b1f1f; border:1px solid #5a2a2a; padding:8px 12px; border-radius:8px; margin:8px 0; }
.adsbygoogle { display:block; }

/* Utility */
code { background:#0f1117; padding:2px 6px; border-radius:6px; border:1px solid var(--border); }

/* 퍼센트 프로그레스 바 */
.pbar{
  position: relative;
  height: 10px;
  width: 100%;
  background: #0f1117;            /* 트랙 */
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.pbar > span{
  display:block;
  height:100%;
  width:0%;
  background: var(--pri);         /* 채움색 */
  border-right: 1px solid rgba(0,0,0,.2);
}