/* ============================================================
   관리자 — 앱 본 디자인과 별개 (design.md 8-4)
   흰 바탕 + 검정 글씨, 강조는 빨강만, 모서리는 전부 둥근 사각형(사선 금지)
   ============================================================ */
.admin, .admin-gate { --slant: 0px; }
/* 공통 컴포넌트의 사선을 관리자에서는 전부 끔 */
.admin .chip, .admin .btn, .admin .title2 .t-sub, .admin .title2 .t-main,
.admin .subtitle .t-sub, .admin .subtitle .t-main, .admin .para, .admin .strip,
.admin-gate .chip, .admin-gate .btn { clip-path: none !important; border-radius: 8px; }
.admin .chip { background: var(--panel); color: var(--ink); }
.admin .chip.is-on { background: var(--ink); color: #fff; }
.admin .chip.danger { background: var(--live); color: #fff; }

/* ---------- 관리자 로그인 ---------- */
.admin-gate { display: grid; place-items: center; background: var(--panel); }
.gate-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.gate-card .chip { align-self: flex-start; }
.gate-card h1 { margin: 0; font-size: 26px; font-weight: 800; }
.admin-btn { background: var(--ink); color: #fff; border-radius: 10px; }
.gate-back { color: var(--ink-3); font-weight: 600; padding: 6px; }

/* ---------- 대시보드 ---------- */
.admin { flex-direction: column; gap: 0; padding: var(--pad); background: var(--paper); }
.admin-nav {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 0 0 14px; border-bottom: 1px solid var(--line);
}
.admin-logo { font-size: 20px; font-weight: 800; line-height: 1.1; margin-right: 18px; }
.admin-logo small { display: block; font-size: 10px; letter-spacing: 3px; color: var(--ink-3); font-weight: 700; }
.admin-nav button {
  display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--panel); color: var(--ink-2); font-size: 14px; font-weight: 700;
}
.admin-nav button svg { width: 16px; height: 16px; }
.admin-nav button.is-on { background: var(--ink); color: #fff; }
.admin-logout { margin-left: auto; background: none !important; color: var(--ink-3) !important; }

.admin-main { padding: var(--gap) 0 0; display: flex; flex-direction: column; gap: var(--gap); }
.admin-main .panel { display: flex; flex-direction: column; gap: var(--gap); }
.admin-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.admin-head .muted { margin-top: 2px; }
.admin .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; }

/* 표 */
.table-card { padding: 6px; overflow: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; color: var(--ink-3); font-size: 12px; font-weight: 700; padding: 10px 12px; background: var(--panel); }
.admin-table th:first-child { border-radius: 8px 0 0 8px; }
.admin-table th:last-child { border-radius: 0 8px 8px 0; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table tr.is-done td { background: #fafafb; }
.admin-table.compact td, .admin-table.compact th { padding: 8px 10px; }
.vs { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.score { width: 48px; height: 36px; text-align: center; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-weight: 800; font-size: 16px; }
.score:focus { outline: none; border-color: var(--ink); border-width: 2px; }
.result-btns { display: flex; gap: 6px; }
.result-btns button { height: 36px; padding: 0 12px; border-radius: 8px; background: var(--panel); font-weight: 700; font-size: 14px; }
.result-btns button.is-on { background: var(--live); color: #fff; }   /* 되돌릴 수 없는 확정 = 빨강 */
.result-btns .reset { color: var(--ink-3); background: none; }

/* 숫자 카드 */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap); }
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.kpi small { color: var(--ink-3); font-weight: 700; font-size: 12px; }
.kpi strong { font-size: 30px; font-weight: 800; }
.kpi span { color: var(--ink-2); font-size: 13px; }
.admin-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: start; }
.admin-2col h3 { margin-bottom: 10px; font-size: 16px; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: grid; grid-template-columns: 32px 1fr auto; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.rank-list b { font-weight: 800; }
.rank-list em { font-style: normal; font-weight: 800; }
.admin-filter { align-self: flex-start; }
.admin .seg { background: var(--panel); border-radius: 10px; padding: 4px; }
.admin .seg button { height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 700; color: var(--ink-2); }
.admin .seg button.is-on { background: var(--ink); color: #fff; }
.admin-post-actions { margin-top: 8px; }

/* 설정 */
.settings { display: flex; flex-direction: column; padding: 6px 20px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting b { display: block; }
.setting small { color: var(--ink-3); }
.setting input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--ink); }
.setting input[type="number"] { width: 72px; height: 38px; text-align: center; border-radius: 8px; border: 1px solid var(--line); font-weight: 800; }
.setting input[type="datetime-local"] { height: 38px; border-radius: 8px; border: 1px solid var(--line); padding: 0 10px; font: inherit; }
.settings h3 { margin: 14px 0 2px; font-size: 16px; }
.champion-pick { justify-content: flex-start; flex-wrap: wrap; }

/* 달팽이 관리 */
.snail-admin-teams { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 14px; }
.snail-admin-teams > div { display: grid; grid-template-columns: 48px 1fr 220px; align-items: center; gap: 12px; }
.snail-admin-teams b { color: var(--ink); }
.snail-admin-teams .bar { height: 10px; border-radius: 99px; background: var(--panel-2); overflow: hidden; }
.snail-admin-teams .bar i { display: block; height: 100%; background: var(--c); }
.snail-admin-teams small { color: var(--ink-2); }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.btn-dark { height: 38px; padding: 0 16px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 800; }
.btn-dark.is-danger { background: var(--live); }
.inline-field { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-2); }
.inline-field input, .input-sm { height: 38px; border-radius: 8px; border: 1px solid var(--line); padding: 0 10px; font: inherit; font-weight: 700; background: #fff; }
.inline-field input { width: 90px; text-align: center; }
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; }
.plain-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.plain-list small { color: var(--ink-3); }
.admin .card h3 { margin: 0 0 4px; }
.cell-sub { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.prior-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.prior-cell .cell-sub { flex-basis: 100%; margin: 0; }
.score.prior { width: 52px; }
.score.prior::placeholder { color: var(--ink-3); font-weight: 600; }

/* 관리자 화면의 직관인증 피드는 목록형으로 (사진 카드 대신) */
.admin .feed { display: flex; flex-direction: column; gap: 10px; }
.admin .post { min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 12px 120px; }
.admin .post-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 104px; height: auto; border-radius: 10px 0 0 10px; }
.admin .post-en { position: static; display: inline-block; background: var(--panel); color: var(--ink-2); margin-bottom: 4px; }
.admin .post-foot { position: static; background: none; color: var(--ink); padding: 0; }
.admin .post-foot small, .admin .post-time { color: var(--ink-3); }

@media (orientation: portrait) {
  .admin-nav { flex-wrap: wrap; }
  .admin-logo { display: none; }
  .admin-2col { grid-template-columns: 1fr; }
  .snail-admin-teams > div { grid-template-columns: 40px 1fr; }
}

/* 우승 반 확정 버튼 — 되돌릴 수 없으니 빨강 */
.champion-pick [data-champion].is-on { background: var(--live); color: #fff; }
.champion-pick [data-champion] { height: 38px; padding: 0 16px; border-radius: 8px; background: var(--panel); font-weight: 700; margin-right: 6px; }
