/* 공통 스타일 — 명세서 3.2절 값 */
:root {
  --navy: #0b1030;
  --dot: #18215a;
  --gold: #ffd36b;
  --gold-dark: #e59a2e;
  --gold-light: #fff0b8;
  --sky: #cfe3ff;
  --blue: #26399a;
  --blue-2: #3a56b0;
  --purple: #3a1a52;
  --ink: #1a1033;
  --orange: #c0551f;
  --red: #ff5a4a;
  --green: #5fd38a;
  --grey: #8a90b0;
  --text: #f4f1ff;
  --font-title: 'Gugi', 'Do Hyeon', sans-serif;
  --font-body: 'Do Hyeon', sans-serif;
  --font-pixel: 'Press Start 2P', monospace;
  color-scheme: dark;
}
/* 게임은 밤하늘 화면 하나만 씁니다(밝은 모드에서도 같은 색). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #0b1030; } }
:root[data-theme="dark"] { --navy: #0b1030; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--navy);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 22px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
.dotted {
  background-color: var(--navy);
  background-image: radial-gradient(var(--dot) 2px, transparent 2px);
  background-size: 16px 16px;
}
svg.pixel { shape-rendering: crispEdges; image-rendering: pixelated; display: block; }

/* 버튼 (3.2절) */
.btn {
  font-family: var(--font-body);
  font-size: 26px;
  color: var(--ink);
  background: var(--gold);
  border: 6px solid var(--ink);
  box-shadow: inset -6px -6px 0 var(--gold-dark), inset 6px 6px 0 var(--gold-light), 8px 8px 0 #000;
  padding: 10px 26px;
  min-height: 64px;
  min-width: 64px;
  cursor: pointer;
  border-radius: 0;
}
.btn:active { transform: translate(4px, 4px); box-shadow: inset -6px -6px 0 var(--gold-dark), inset 6px 6px 0 var(--gold-light), 4px 4px 0 #000; }
.btn:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
.btn.small { font-size: 20px; min-height: 52px; padding: 6px 16px; border-width: 4px; box-shadow: inset -4px -4px 0 var(--gold-dark), inset 4px 4px 0 var(--gold-light), 5px 5px 0 #000; }
.btn.blue { background: var(--blue-2); color: var(--text); box-shadow: inset -6px -6px 0 var(--blue), inset 6px 6px 0 #6f8ae0, 8px 8px 0 #000; }
.btn.blue.small { box-shadow: inset -4px -4px 0 var(--blue), inset 4px 4px 0 #6f8ae0, 5px 5px 0 #000; }
.btn.red { background: var(--red); color: #fff; box-shadow: inset -6px -6px 0 #b32a1e, inset 6px 6px 0 #ffb0a6, 8px 8px 0 #000; }
.btn.red.small { box-shadow: inset -4px -4px 0 #b32a1e, inset 4px 4px 0 #ffb0a6, 5px 5px 0 #000; }

.panel {
  background: rgba(26, 16, 51, 0.92);
  border: 6px solid var(--ink);
  outline: 4px solid var(--blue-2);
  box-shadow: 8px 8px 0 #000;
  padding: 18px 22px;
}

input, select {
  font-family: var(--font-body);
  font-size: 26px;
  color: var(--ink);
  background: #fff8e0;
  border: 4px solid var(--ink);
  box-shadow: inset 3px 3px 0 #d8c99a;
  padding: 8px 12px;
  min-height: 56px;
  border-radius: 0;
  width: 100%;
  -webkit-user-select: text;
  user-select: text;
}
input:focus, select:focus { outline: 4px solid var(--gold); }
label { display: block; font-size: 20px; color: var(--sky); margin-bottom: 4px; }

.blink { animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hidden { display: none !important; }