*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* 두 게임(PIXEL RACE·DRAFT)과 같은 색 — 허브에서 게임으로 넘어갈 때 다른 사이트처럼 보이지 않게 */
:root {
  --bg: #0a0a2e;
  --bg-light: #141452;
  --neon-green: #00ff41;
  --pixel-yellow: #ffd700;
  --pixel-cyan: #00e5ff;
  --text: #e0e0e0;
  --text-dim: #9a9abe;
  --line: #2c2c6e;
}

@font-face {
  font-family: 'DungGeunMo';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html { -webkit-text-size-adjust: 100%; }

/* 본문은 DungGeunMo 로 — Press Start 2P 는 한글이 없고 긴 글에선 눈이 아프다. 제목·버튼만 영문 픽셀 글꼴 */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DungGeunMo', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: var(--pixel-cyan); }
a:hover { color: var(--pixel-yellow); }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

.pixel { font-family: 'Press Start 2P', 'DungGeunMo', monospace; }

/* ── 머리 ── */
.hero { text-align: center; padding: 56px 0 36px; }
.hero h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(28px, 7vw, 52px);
  color: var(--neon-green);
  text-shadow: 4px 4px 0 #003b10;
  letter-spacing: 2px;
}
.hero p { margin-top: 18px; color: var(--text-dim); font-size: 18px; }

/* ── 게임 카드 ── */
.games { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.card {
  background: var(--bg-light);
  border: 3px solid var(--neon-green);
  box-shadow: 6px 6px 0 #000;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card.draft, .card.draft img { border-color: var(--pixel-yellow); }
.card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 40 / 21;
  object-fit: cover;
  border-bottom: 3px solid var(--neon-green);
  image-rendering: pixelated;
}
.card-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card h2 { font-family: 'Press Start 2P', monospace; font-size: 18px; color: var(--neon-green); line-height: 1.4; }
.card.draft h2 { color: var(--pixel-yellow); }
.card h2 small { display: block; margin-top: 8px; font-family: 'DungGeunMo', sans-serif; font-size: 16px; color: var(--text-dim); }
.card h3 { font-size: 16px; color: var(--pixel-cyan); margin-top: 4px; }
.card ol, .card ul { padding-left: 22px; }
.card li { margin: 2px 0; }

/* 게임 사이트 버튼과 같은 조형: 3px 각진 테두리 + 4px 오프셋 그림자 */
.btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  font-family: 'Press Start 2P', 'DungGeunMo', monospace;
  font-size: 14px;
  padding: 14px 20px;
  background: var(--pixel-yellow);
  color: #1a1a1a;
  border: 3px solid #1a1a1a;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
}
.btn:hover { color: #1a1a1a; transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }

/* ── 본문 절 ── */
section.block { margin: 56px 0; }
section.block > h2 {
  font-family: 'Press Start 2P', 'DungGeunMo', monospace;
  font-size: 18px;
  color: var(--pixel-yellow);
  margin-bottom: 18px;
  line-height: 1.5;
}
.faq dt { color: var(--neon-green); margin-top: 16px; }
.faq dd { margin-left: 0; color: var(--text); }

/* ── 방침 문서 ── */
.doc { max-width: 760px; margin: 0 auto; padding: 40px 16px 24px; }
.doc h1 { font-family: 'Press Start 2P', 'DungGeunMo', monospace; font-size: 22px; color: var(--neon-green); line-height: 1.6; }
.doc h2 { font-size: 20px; color: var(--pixel-yellow); margin: 34px 0 10px; }
.doc p, .doc li { margin: 8px 0; }
.doc ul { padding-left: 22px; }
.doc code { font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: #000; padding: 1px 6px; overflow-wrap: anywhere; }
.doc .meta { color: var(--text-dim); margin-top: 10px; }
.back { display: inline-block; margin-bottom: 20px; }

/* ── 바닥글 ── */
footer {
  border-top: 2px solid var(--line);
  margin-top: 56px;
  padding: 24px 16px 40px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
}
footer a { margin: 0 6px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding: 40px 0 28px; }
  .games { grid-template-columns: 1fr; }
  .card h2 { font-size: 16px; }
  section.block > h2 { font-size: 15px; }
}