/* 레이아웃·반응형. 색상값 없음: 모든 색은 테마가 주입하는 CSS 변수로만 사용. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
kbd { font-family: ui-monospace, monospace; font-size: 11px; }

.screen { display: none; max-width: 1280px; margin: 0 auto; padding: 16px; }
body[data-screen="select"] #screen-select { display: block; max-width: 640px; }
body[data-screen="menu"] #screen-menu { display: block; max-width: 640px; }
body[data-screen="themes"] #screen-themes { display: block; max-width: 640px; }
body[data-screen="user"] #screen-user { display: block; max-width: 640px; }
body[data-screen="play"] #userbar { display: none; }
#userbar { max-width: 1280px; margin: 0 auto; }
body[data-screen="play"] #screen-play { display: block; }

.btn {
  border: 1px solid var(--grid-line);
  background: var(--panel);
  border-radius: var(--radius-button);
  padding: 10px 14px;
  min-height: 44px;
  white-space: nowrap;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; font-weight: 700; }
.btn.disabled { opacity: .5; }
.icon-btn { border: 0; background: transparent; min-width: 44px; min-height: 44px; font-size: 18px; border-radius: var(--radius-button); }
.icon-btn:hover, .btn:not(:disabled):hover { filter: brightness(1.06); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.panel { background: var(--panel); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.warning { background: var(--bad); color: var(--bg); padding: 8px 12px; border-radius: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px;
  max-width: calc(100vw - 32px); text-align: center; z-index: 50;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }