/* ══════════════════════════════════════════════════════════
   공통 토큰 & 기본 요소 — 도감/플레이어가 함께 사용
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#f3f5f9; --card:#fff; --line:#e6eaf2; --line2:#eff2f7;
  --text:#1e2430; --muted:#6b7789; --faint:#98a3b5;
  --accent:#3b6ef5; --amber:#f0a020; --band:#e6f6ec;
  --ok:#16a34a; --bad:#d4483b;
  --code-bg:#101827; --code-head:#0a1120;
  --dur:360ms;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--text); min-height:100vh;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
.mono{font-family:"JetBrains Mono","D2Coding",Consolas,monospace}

.card{background:var(--card); border:1px solid var(--line); border-radius:16px;
      box-shadow:0 1px 3px rgba(24,34,54,.05)}

/* 로고와 저작권 표시 — 크기·위치는 각 화면의 css 에서 정한다 */
.logo{display:block; width:auto; user-select:none}
.copy{font-size:11.5px; font-weight:600; color:var(--faint); white-space:nowrap}

button{background:#fff; color:var(--text); border:1px solid #dde3ec; border-radius:9px;
       padding:8px 14px; font-size:14px; font-weight:700; cursor:pointer;
       font-family:inherit; transition:.14s; white-space:nowrap}
button:hover:not(:disabled){background:#f4f7fb; border-color:#c9d3e2}
button:disabled{opacity:.32; cursor:default}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; min-width:100px}
button.primary:hover:not(:disabled){background:#2c5ce0; border-color:#2c5ce0}
button.ghost{background:transparent; border-color:transparent; color:var(--muted); padding:8px 10px}
button.ghost:hover:not(:disabled){background:#f1f4f9; color:var(--text)}

label{font-size:13px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:8px}
input[type=range]{accent-color:var(--accent); cursor:pointer; height:18px}