@font-face { font-family: 'Galmuri11'; src: url('/fonts/Galmuri11.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Galmuri11'; font-weight: 700; src: url('/fonts/Galmuri11-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Galmuri9'; src: url('/fonts/Galmuri9.woff2') format('woff2'); font-display: swap; }

:root {
  --night: #0a0d16;
  --night-2: #111624;
  --line: #232a3d;
  --ink: #c7cedd;
  --ink-dim: #7d879c;
  --ink-faint: #4a5368;
  --lamp: #f0b25a;
  --lamp-dim: #8a6634;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--night); color: var(--ink); }
body {
  font-family: 'Galmuri11', system-ui, sans-serif;
  font-size: 13px; line-height: 1.7; letter-spacing: 0.01em;
  min-height: 100dvh;
  -webkit-font-smoothing: none;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }

/* 픽셀식 버튼: 두꺼운 테두리, 누르면 1px 내려감 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; min-height: 44px;
  background: var(--night-2); border: 2px solid var(--line);
  box-shadow: 0 3px 0 #05070c;
  cursor: pointer; text-decoration: none; user-select: none;
  transition: border-color .15s, color .15s;
}
.btn:hover { border-color: var(--ink-faint); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #05070c; }
.btn.primary { border-color: var(--lamp-dim); color: var(--lamp); }
.btn.primary:hover { border-color: var(--lamp); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; gap: 12px;
}
.topbar a.back { text-decoration: none; color: var(--ink-dim); }
.topbar a.back:hover { color: var(--ink); }
.credit { font-family: 'Galmuri9', sans-serif; font-size: 10px; color: var(--ink-faint); }
.credit a { color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}