/* ══════════════ 관리자 화면 ══════════════
   홈과 같은 어휘를 씁니다(style.css + home.css 를 먼저 불러옵니다).
   여기는 관리자에만 필요한 배치만 얹습니다. */
.admin {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 18px 56px;
}
.admin-card { margin-bottom: 18px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-title { margin: 0; font-size: 20px; font-weight: 900; color: var(--ink); }
.admin-desc {
  margin: 8px 0 16px;
  font-size: 13px; font-weight: 800; color: var(--ink-soft); line-height: 1.6;
}
.admin-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 3px solid var(--ink); border-radius: 14px;
  background: #fff;
  font: inherit; font-size: 15px; font-weight: 800; color: var(--ink);
}
.admin-input:focus { outline: none; border-color: var(--yellow-dk); }
.admin-submit { display: block; width: 100%; margin-top: 12px; }
.admin-msg {
  margin: 12px 0 0;
  font-size: 13px; font-weight: 800; color: var(--ink-soft);
  min-height: 19px;
}
.admin-msg.is-bad { color: var(--red); }

/* ── 게임 한 줄 ─────────────────────────────────────────
   이름 · id · 상태 · 스위치. 격자로 두면 이름 길이가 달라도 스위치가 한 줄로 섭니다. */
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 3px dashed var(--ink-soft); border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
}
.admin-row + .admin-row { margin-top: 8px; }
/* 열린 게임은 실선 — 닫힌 것(점선)과 한눈에 갈립니다. 홈의 카드와 같은 규칙입니다. */
.admin-row.is-open { border-style: solid; border-color: var(--ink); background: var(--cream); }
.admin-name { font-size: 14.5px; font-weight: 900; color: var(--ink); min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-id { font-size: 11px; font-weight: 800; color: var(--ink-soft); opacity: 0.7; }
.admin-state {
  font-size: 11px; font-weight: 900; letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 3px 8px; border-radius: 999px;
  background: rgba(58, 42, 24, 0.1);
  white-space: nowrap;
}
.admin-row.is-open .admin-state { color: #2f7a1e; background: rgba(116, 193, 66, 0.28); }
.admin-row button[disabled] { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 620px) {
  .admin { padding: 0 12px 40px; }
  /* 좁으면 id 를 접습니다 — 이름과 스위치가 먼저입니다 */
  .admin-id { display: none; }
  .admin-row { grid-template-columns: 1fr auto auto; gap: 8px; padding: 9px 10px; }
  .admin-name { font-size: 13.5px; }
}