:root {
  color-scheme: dark;
  --bg: #0b1220;
  --card: #111827;
  --muted: #9ca3af;
  --border: #1f2937;
  --text: #e5e7eb;
  --blue: #2563eb;
  --red: #e11d48;
  --amber: #f59e0b;
  --hover-glow: rgba(59,130,246,.4);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 화면 전체 75% 축소 */
body { zoom: 0.75; }
@supports not (zoom: 1) {
  :root { --ui-scale: .75; }
  .container {
    transform: scale(var(--ui-scale));
    transform-origin: top center;
    width: calc(100% / var(--ui-scale));
    max-width: calc(1800px / var(--ui-scale));
  }
}

/* === 전체 레이아웃 === */
.container {
  display: grid;
  grid-template-columns: 700px 1fr;
  gap: 16px;
  max-width: 1800px;
  margin: 24px auto;
  padding: 0 16px;
  align-items: start;
}
.history-wrap { align-self: start; }
.main-col {
  grid-column: 2;
  display: grid;
  gap: 16px;
  align-content: start;
}

/* === 카드 공통 === */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 16px 8px 16px;
  height: auto;
  min-height: unset;
}
h1 { margin: 0; font-size: 24px; }
h2 { margin: 0 0 8px 0; font-size: 18px; }

/* === 컨트롤 === */
.row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; gap: 12px; flex-wrap: wrap;
}
.controls-left, .controls-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode { margin-right: 4px; color: var(--muted); user-select: none; }

/* === 상태 메시지 === */
.status {
  min-height: unset; padding: 6px 12px;
  display: inline-block; border-radius: 12px;
  background: #0f172a; border: 1px solid var(--border);
}
.hidden { display: none; }

/* Timer pulse */
@keyframes pulse { 0%,100%{transform:scale(1);color:#e5e7eb;} 50%{transform:scale(1.2);color:var(--amber);} }
.status.pulse { animation: pulse 0.6s ease-in-out; }
@keyframes pulse-danger { 0%,100%{transform:scale(1);color:#fff;} 50%{transform:scale(1.3);color:var(--red);} }
.status.pulse-danger { animation: pulse-danger 0.4s ease-in-out; }

/* === 버튼 === */
.controls-left .mode {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #0f172a;
  font-size: 15px;
}
.controls-left .mode:hover { background: #1e293b; box-shadow: 0 0 6px var(--hover-glow); }
.controls-left input[type="radio"]:checked,
.controls-left input[type="checkbox"]:checked { accent-color: var(--blue); transform: scale(1.1); }

#btnStart, .ghost {
  padding: 10px 20px; border: 1px solid var(--border); border-radius: 14px;
  background: #0f172a; color: var(--text); cursor: pointer; transition: all .2s ease;
  font-size: 15px;
}
#btnStart:hover, .ghost:hover { box-shadow: 0 0 8px var(--hover-glow); transform: translateY(-1px); }
#btnStart:disabled { opacity: .6; cursor: not-allowed; }
.ghost { background: transparent; }
.ghost:hover { background: #0f172a; }

/* === 팀/시리즈 === */
.grid {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  gap: 16px;
  align-items: start;
}
.vs { display: grid; place-items: center; color: var(--muted); gap: 8px; }
.series { background:#0f172a; border:1px solid var(--border); border-radius:12px; padding:4px 8px; font-size:12px; color:#cbd5e1; }
.team-title { font-weight: 700; margin-bottom: 8px; }
.team-title.blue { color: var(--blue); }
.team-title.red  { color: var(--red); }
.mini-label { font-size: 12px; color: #cbd5e1; margin: 6px 0 6px 2px; opacity: .85; }
.mini-label.ban { color: var(--amber); }
.mini-label.pick { color: var(--muted); }

/* === BAN / PICK 슬롯 === */
.picks, .bans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.slot {
  height: 64px;
  border: 1px solid var(--border);
  background: #0f172a;
  border-radius: 12px;
  display: grid; place-items: center;
  color: #cbd5e1; font-size: 13px;
  box-shadow: inset 0 0 6px #1f2937;
}
.slot.staged { border-style: dashed; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2) inset; }
.slot img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: block; background: #111827;
  opacity: 0; animation: fadeIn 0.3s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* VS 버튼 */
.vsbtn { width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:#0f172a; color:#fff; cursor:pointer; font-size:15px; }
.vsbtn:hover { background:#111b35; }
.vsbtn:disabled { opacity:.5; cursor:not-allowed; }
.vsbtn.danger { border-color:#3b1f27; background:#2a0f16; }
.vsbtn.danger:hover { background:#3a1520; }

/* === 챔피언 풀 === */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.title-and-filters {
  display: flex;
  align-items: center;
  gap: 12px;
}
.role-filters {
  display: flex;
  gap: 6px;
  margin: 0;
}

.search {
  width: 320px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 15px;
}
.search:focus { outline:none; border-color:var(--blue); box-shadow:0 0 6px var(--hover-glow); }
.search::placeholder { color:#9ca3af; font-style:italic; }

#pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  justify-items: center;
}

#pool button {
  width: 88px;
  height: 88px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
#pool button:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.35);
  border-color: #3b82f6;
}
#pool button img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
#pool button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

#pool .meta { display:grid; gap:6px; min-width:0; }
#pool .name { font-size:14px; line-height:1.2; color:#e5e7eb; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:none; }

/* === 히스토리 === */
/* === 히스토리 (가로형 카드) === */
/* === 히스토리 (가로형 카드) === */
.history {
  background:#0f172a;
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  font-size:14px;
}

.history .set { padding:10px 6px; }
.history .set-title {
  font-weight:700;
  color:#cbd5e1;
  margin:6px 0 10px 0;
}

.history .row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  width:100%;
}

.history .team-line {
  background:#0c1424;
  border:1px solid #1d2737;
  border-radius:12px;
  padding:14px 12px;              /* ← 여백 */
  display:flex;
  flex-direction:column;
  gap:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}

.history .team-name.blue,
.history .team-name.red {
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  margin-bottom:6px;              /* ← 팀명 아래 여백 */
  letter-spacing:.2px;
  font-weight:700;
}

.history .team-name.blue {
  color:var(--blue);
  background:rgba(37,99,235,.35);
}
.history .team-name.red {
  color:var(--red);
  background:rgba(225,29,72,.35);
}

.history .list {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  color:#cbd5e1;
}
.history .list span {
  min-width:48px;
  text-align:right;
  font-weight:700;
  opacity:.95;
}

.history .imgs {
  display:flex;
  flex-direction:row;
  gap:10px;
}
.history .imgs img {
  width:48px;
  height:48px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #243047;
  background:#111827;
}



/* 안내바 */
.notice-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background-color: #222;
  color: #fff;
  text-align: center;
  padding: 10px;
  font-size: 14px;
  z-index: 1000;
}
.notice-bar a {
  color: #4da6ff;
  text-decoration: none;
  font-weight: bold;
}
.notice-bar a:hover { text-decoration: underline; }
body { margin-top: 50px; }

/* 역할 필터 버튼 */
.role-filters button {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  font-size: 15px;
}
.role-filters button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 6px rgba(59,130,246,0.5);
  border-color: var(--blue);
}
.role-filters button img { width: 26px; height: 26px; }
.role-filters button[data-role="ALL"] {
  width: auto;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 600;
  color: white;
}

/* 언어 토글 버튼 */
.lang-toggle {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #0f172a;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-toggle:hover {
  background: #1e293b;
  box-shadow: 0 0 6px var(--hover-glow);
}
.lang-toggle.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* BanPick History 위치 조정 */
:root { --history-left-nudge: -120px; }
@media (min-width: 1601px) { .history-wrap { margin-left: var(--history-left-nudge); } }
@media (max-width: 1199px) { .history-wrap { margin-left: 0; } }
@media (max-width: 1600px) { .history-wrap { margin-left: -80px; } }
@media (max-width: 1400px) { .history-wrap { margin-left: -40px; } }
@media (max-width: 1200px) { .history-wrap { margin-left: 0; } }
@media (min-width: 1200px) {
  .container { gap: clamp(16px, 1.2vw, 28px); }
}