/* DraftLab 2.0 디자인 층.
   index.html의 기존 규칙(테스트가 고정한 모바일 레이아웃 포함)은 그대로 두고 그 위에 덮어쓴다.
   규칙: 글자색은 두 가지(#EEF1F7, #9AA3B8). 팀 색과 금색은 막대·테두리·버튼 채움에만.
   옆선이 있는 요소는 직각, 나머지는 2~4px. 글꼴은 Pretendard. */

:root {
  --bg: #07090E;
  --panel: #10141D;
  --panel-raised: #141925;
  --line: #1E2432;
  --line-strong: #252C3B;
  --text: #EEF1F7;
  --muted: #9AA3B8;
  --blue: #4A8CFF;
  --red: #F0505A;
  --gold: #F5C451;
  --radius: 4px;
}

body {
  background: var(--bg);
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}

/* 모드 배경: 로고를 화면 뒤에 은은하게. 화면 위 내용은 가리지 않음 */
body.worlds-mode::before,
body.lck-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body.worlds-mode::before {
  background: radial-gradient(ellipse 46% 220px at 50% 0, rgba(245, 196, 81, 0.1), transparent 72%);
}
body.lck-mode::before {
  background: radial-gradient(ellipse 46% 220px at 50% 0, rgba(238, 241, 247, 0.06), transparent 72%);
}
body.worlds-mode::after,
body.lck-mode::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
body.worlds-mode::after {
  width: min(620px, 80vw);
  height: min(636px, 82vw);
  background-image: url("assets/brand/worlds-emblem.svg");
}
body.lck-mode::after {
  width: min(720px, 86vw);
  height: min(511px, 61vw);
  background-image: url("assets/brand/lck-logo.svg");
}

/* 공통 표면 */
.app,
.landing {
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
}
.panel,
.team-card,
.panel-head {
  background: var(--panel);
  border-color: var(--line);
}
.small.muted,
.muted {
  color: var(--muted);
}
button {
  border-color: var(--line-strong);
  background: var(--panel);
}
button:hover:not(:disabled) {
  background: #171c28;
}
button.primary,
.landing-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #07090E;
  font-weight: 700;
}
button.primary:hover:not(:disabled) {
  background: #f7cf6b;
}
button.danger {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--text);
}
.chip,
.side-pill {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--muted);
}
.switch {
  border-radius: 4px;
  background: var(--panel);
  border-color: var(--line);
}
.switch button {
  border-radius: 2px;
  color: var(--muted);
}
.switch button.active,
.switch button[aria-pressed="true"] {
  background: var(--text);
  color: #07090E;
}
select,
input[type="search"],
input:not([type]),
input[type="text"],
input[type="number"] {
  background: var(--panel);
  border-color: var(--line-strong);
  color: var(--text);
  border-radius: 4px;
}

/* 상단 바: 아래 구분선 없음 */
header {
  border-bottom: 0;
  background: rgba(7, 9, 14, 0.86);
}
header h1 {
  font-size: 17px;
  font-weight: 800;
}
.topbar {
  gap: 16px;
}
.topbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.topbar .subtitle {
  display: none;
}
.data-patch-note {
  color: var(--muted);
}
.mode-tabs {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.mode-tabs button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.mode-tabs button[aria-pressed="true"] {
  background: var(--text);
  color: #07090E;
}
.mode-tabs button:disabled {
  opacity: 0.5;
}
.tabs {
  border-bottom: 0;
}
.tab {
  color: var(--muted);
}
.tab.active {
  color: var(--text);
  border-bottom-color: var(--gold);
}

/* 시리즈 점수 줄 */
.series-score strong,
.series-score strong.our,
.series-score strong.enemy {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
}
@media (max-width: 640px) {
  .series-score strong,
  .series-score strong.our,
  .series-score strong.enemy {
    font-size: 18px;
  }
}
.series-score i {
  color: var(--muted);
  font-style: normal;
}
.series-team-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.series-team-name .team-logo {
  width: 36px;
  height: 30px;
  object-fit: contain;
}

/* 밴픽 순서: 얇은 막대. 진영은 아래 선, 현재 턴은 금색 테두리 */
.phase-strip {
  border: 0;
  padding: 0;
  background: transparent;
}
.draft-step {
  height: 26px;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  color: var(--muted);
}
.draft-step.side-blue {
  box-shadow: inset 0 -2px 0 var(--blue);
}
.draft-step.side-red {
  box-shadow: inset 0 -2px 0 var(--red);
}
.draft-step.type-ban {
  height: 20px;
  margin-top: 3px;
}
.draft-step.current {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  background: #1b2130;
}
.draft-step .draft-step-side,
.draft-step .draft-step-action {
  font-size: 10px;
  color: var(--muted);
}

/* 팀 칸: 밴은 정사각형, 픽은 일러스트 카드. 옆선이 있으니 직각 */
.team-card h2 {
  font-size: 13px;
  color: var(--muted);
  padding: 0 0 8px;
  background: transparent;
  border: 0;
}
.team-card h2 .blue,
.team-card h2 .red {
  color: var(--muted);
}
.team-card .slots {
  padding: 0;
  gap: 10px;
}
.slot-group-title {
  color: var(--muted);
  font-size: 12px;
}
.ban-row {
  gap: 4px;
}
.ban-row .slot {
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
}
.ban-row .slot img,
.ban-row .slot .champ-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  filter: grayscale(1) brightness(0.5);
}
.ban-row .ban-icon-wrap {
  width: 100%;
  height: 100%;
}
.ban-row .slot.active,
.pick-list .slot.active {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  background: #1b2130;
}
.pick-list {
  gap: 4px;
}
.pick-list .slot {
  position: relative;
  min-height: 84px;
  border: 0;
  border-radius: 0;
  background: var(--panel) var(--art, none) center 22% / cover no-repeat;
  color: var(--muted);
  overflow: hidden;
}
.blue-team-card .pick-list .slot {
  border-left: 3px solid var(--blue);
}
.red-team-card .pick-list .slot {
  border-right: 3px solid var(--red);
  flex-direction: row-reverse;
  text-align: right;
}
.pick-list .slot[style*="--art"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 9, 14, 0.88) 0%, rgba(7, 9, 14, 0.35) 70%, rgba(7, 9, 14, 0.15) 100%);
}
.red-team-card .pick-list .slot[style*="--art"]::before {
  background: linear-gradient(270deg, rgba(7, 9, 14, 0.88) 0%, rgba(7, 9, 14, 0.35) 70%, rgba(7, 9, 14, 0.15) 100%);
}
.pick-list .slot[style*="--art"] > .champ-icon {
  display: none;
}
.pick-list .slot > * {
  position: relative;
}
.pick-list .slot .champ-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.pick-list .slot .pick-reassign {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  max-width: 100%;
}

/* 가운데: 지금 차례 */
.turn-command-panel:not(.enemy-turn) .dock-head {
  border-bottom-color: var(--gold);
}
.turn-command-kicker {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.turn-command-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.turn-command-guide {
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
}
.score-meaning-note {
  color: var(--muted);
}
.dock-tabs button {
  color: var(--muted);
}
.dock-tabs button.active {
  background: var(--text);
  color: #07090E;
}

/* 추천 카드: 손톱 모양(둥근 모서리 + 옆 색선) 대신 직선 테두리 */
.reco-card {
  border: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel);
  padding: 10px 12px;
}
.reco-card:hover {
  background: #171c28;
}
.reco-card .champ-name {
  color: var(--text);
  font-weight: 700;
}
.reco-card .slot-sub,
.reco-card .reason {
  color: var(--muted);
}
.reco-card .score b {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
}
.reco-card .score span {
  color: var(--muted);
}

/* 전체 챔피언 */
.turn-search-disclosure > summary {
  color: var(--muted);
}
.champ-button {
  background: var(--panel);
  border-color: var(--line);
}
.champ-button.disabled {
  opacity: 1;
}
.champ-button.disabled .champ-icon {
  filter: grayscale(1) brightness(0.4);
}

/* 피어리스 기록 */

/* 데스크톱: 시안처럼 블루 팀 / 가운데 / 레드 팀 3열 */
@media (min-width: 1181px) {
  /* 3열에서는 카드 없이 화면 바탕 위에 바로 놓는다. 모바일은 패널 배경이 겹침을 가리므로 유지 */
  .team-card {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .blue-team-card,
  .red-team-card {
    box-shadow: none;
  }
  .turn-command-panel {
    background: transparent;
    border: 0;
  }
  .turn-command-panel .dock-head {
    background: transparent;
    border-bottom: 2px solid var(--line);
    padding: 4px 0 10px;
  }
  .turn-command-body {
    padding: 12px 0 0;
  }
  .fearless-history {
    background: transparent;
    border: 0;
  }
  .fearless-history .panel-head {
    background: transparent;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .series-bar {
    background: transparent;
    border-bottom: 0;
  }
  .draft-layout {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 300px);
    grid-template-areas:
      "bhead bhead bhead"
      "series series series"
      "timerset timerset timerset"
      "timerbar timerbar timerbar"
      "phase phase phase"
      "blue result red"
      "blue sim red"
      "blue dock red"
      "blue fear red";
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    max-width: 1560px;
    margin: 0 auto;
  }
  .draft-board-panel,
  .draft-board-panel > .panel-body.board,
  .draft-board-panel .team-board {
    display: contents;
  }
  .draft-board-panel > .panel-head {
    grid-area: bhead;
    background: transparent;
    border: 0;
    padding: 0 0 6px;
  }
  .draft-board-panel > .panel-head .panel-title {
    display: none;
  }
  #seriesBar {
    grid-area: series;
    padding: 4px 0 12px;
  }
  #seriesResultPanel {
    grid-area: result;
    margin-bottom: 16px;
  }
  #timerSettings {
    grid-area: timerset;
    margin-bottom: 8px;
  }
  #timerTopBar {
    grid-area: timerbar;
    margin-bottom: 8px;
  }
  #draftReadiness,
  #mobileDraftFlow {
    display: none;
  }
  #phaseStrip {
    grid-area: phase;
    margin-bottom: 18px;
  }
  #phaseStrip .phase-strip-legend {
    display: none;
  }
  .blue-team-card {
    grid-area: blue;
  }
  .red-team-card {
    grid-area: red;
  }
  .red-team-card h2 {
    flex-direction: row-reverse;
  }
  .recommend-dock {
    grid-area: dock;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .turn-command-collapse {
    display: none;
  }
  /* 가운데 열은 자체 스크롤 없이 페이지와 함께 내려간다 */
  .turn-command-panel,
  .turn-command-body,
  .turn-detail-panel,
  .turn-detail-body {
    max-height: none;
    overflow: visible;
  }
  .turn-command-panel .dock-head {
    position: static;
  }
  #gameSimulation {
    grid-area: sim;
    margin: 0 0 16px;
  }
  #fearlessHistoryPanel {
    grid-area: fear;
    margin-top: 16px;
  }
  .reco-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* 카드에는 이름, 역할, 점수, 이유 한 줄만. 세부 수치는 줄여서 글자 과다를 피함 */
  .reco-card .score-grid {
    display: none;
  }
  .reco-card .reason {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .draft-step .draft-step-side,
  .draft-step .draft-step-action {
    display: none;
  }
  /* 전체 챔피언은 항상 펼쳐 두고 아이콘만 촘촘하게 */
  .turn-search-disclosure[open] > summary {
    display: none;
  }
  .turn-command-results.champ-grid {
    max-height: 420px;
    overflow: auto;
    grid-template-columns: repeat(auto-fill, 50px);
    grid-auto-rows: 50px;
    align-content: start;
    gap: 4px;
  }
  .turn-command-results .champ-button {
    display: block;
    padding: 0;
    aspect-ratio: 1;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #0b0e15;
  }
  .turn-command-results .champ-button .champ-icon {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
  }
  .turn-command-results .champ-button .champ-info {
    display: none;
  }
  .turn-command-results .champ-button:hover:not(.disabled) {
    transform: translateY(-2px);
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }
}

/* 밴픽 보드 보강 요소 (시안 02) */
.board-meta {
  font-size: 13px;
  color: var(--muted);
}
/* 지금 경기가 속한 곳: "자유 대전 · LCK", "월즈 토너먼트 · 8강 · IG전" */
.board-context {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #9AA3B8;
}
.board-context[hidden] {
  display: none;
}
.board-context-link {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #EEF1F7;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.board-context-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
/* 토너먼트 칸에서는 LCK·월즈를 바꾸지 않는다 */
body.tournament-session .mode-tabs {
  display: none;
}
/* 시리즈가 끝났을 때의 버튼 */
#seriesCompleteControls button {
  min-height: 44px;
}
.turn-command-kicker {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.turn-timer {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.turn-last {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  line-height: 1.5;
}
.turn-last b {
  color: var(--text);
  font-weight: 600;
}
.turn-last[hidden],
.board-pred[hidden],
.board-lock[hidden],
.board-scout[hidden] {
  display: none;
}
.board-pred {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
}
.board-pred-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.board-pred-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.board-pred-item img {
  width: 28px;
  height: 28px;
  flex: none;
}
.board-pred-item div {
  min-width: 0;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
}
.board-pred-item i {
  display: block;
  height: 3px;
  margin-top: 4px;
  background: var(--line);
  position: relative;
}
.board-pred-item i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: var(--muted);
}
.board-pred-item small {
  font-size: 12px;
  color: var(--muted);
}
.board-lock {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 0;
  border-radius: 4px;
  background: var(--gold);
  color: #07090E;
  font-size: 16px;
  font-weight: 700;
}
.board-lock:disabled {
  background: #1E2432;
  color: var(--muted);
}
.motion-preference { display:flex; align-items:center; gap:8px; margin:8px 0; color:var(--muted); font-size:13px; }
.motion-preference input { width:16px; height:16px; accent-color:var(--gold); }
.ai-thinking { position:relative; display:flex; align-items:center; gap:12px; overflow:hidden; margin:10px 0; padding:12px; border:1px solid var(--line-strong); background:var(--panel); }
.ai-thinking[hidden] { display:none; }
.ai-thinking > span:not(.ai-thinking-scan) { flex:1; min-width:0; }
.ai-thinking b, .ai-thinking small { display:block; }
.ai-thinking small { margin-top:4px; color:var(--muted); }
.ai-thinking button { position:relative; min-height:40px; font-size:13px; }
.ai-thinking-scan { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(245,196,81,.15),transparent); animation:ai-scan 1.2s ease-in-out infinite; }
.reco-card.reco-enter { animation:reco-reveal 280ms cubic-bezier(.16,1,.3,1) both; animation-delay:var(--reco-delay,0ms); }
.slot.motion-lock { animation:pick-lock 560ms cubic-bezier(.34,1.56,.64,1) both; }
.slot.motion-lock.motion-red { animation-name:pick-lock-red; }
.pick-list .slot.motion-lock::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.24) 50%,transparent 65%); animation:pick-sweep 700ms ease-out both; }
.slot.motion-ban { animation:ban-reveal 420ms cubic-bezier(.65,0,.35,1) both; }
@keyframes reco-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes pick-lock { 0% { opacity:.35; transform:translateX(-16px) scale(.96); } 65% { opacity:1; transform:translateX(0) scale(1.02); } 100% { transform:none; } }
@keyframes pick-lock-red { 0% { opacity:.35; transform:translateX(16px) scale(.96); } 65% { opacity:1; transform:translateX(0) scale(1.02); } 100% { transform:none; } }
@keyframes ban-reveal { from { opacity:.4; transform:scale(1.06); filter:grayscale(0); } to { opacity:1; transform:none; filter:grayscale(1); } }
@keyframes ai-scan { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@keyframes pick-sweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .reco-card.reco-enter, .slot.motion-lock, .slot.motion-lock.motion-red, .slot.motion-ban { animation:reduced-feedback 120ms ease-out both !important; }
  .ai-thinking-scan { animation:none; display:none; }
  .pick-list .slot.motion-lock::after { animation:none; display:none; }
}
@keyframes reduced-feedback { from { opacity:.65; } to { opacity:1; } }
.board-roles {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.board-roles button {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}
.board-roles button.on {
  background: var(--text);
  color: #07090E;
  border-color: var(--text);
  font-weight: 600;
}
.board-comp,
.board-scout {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}
.bc-head,
.bs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
}
.bc-head span,
.bs-head span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.bc-dmg {
  display: flex;
  height: 6px;
  background: var(--line);
  overflow: hidden;
}
.bc-dmg i { display: block; height: 100%; }
.bc-dmg .ad { background: var(--text); }
.bc-dmg .ap { background: var(--muted); opacity: 0.45; }
.bc-plan {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
}
.bc-plan span { font-size: 12px; color: var(--muted); }
.bc-plan b.dim { font-weight: 500; color: var(--muted); }
.bc-traits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.bc-tr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.bc-tr.low { color: var(--text); font-weight: 700; }
.bc-seg { display: flex; gap: 2px; }
.bc-seg i { flex: 1; height: 4px; background: var(--line); }
.bc-seg i.on { background: var(--muted); }
.bc-tr.low .bc-seg i { background: var(--gold); opacity: 0.35; }
.bs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.bs-l { width: 56px; flex: none; }
.bs-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.bs-i { position: relative; }
.bs-i img { width: 28px; height: 28px; display: block; }
.bs-i b {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  background: rgba(7, 9, 14, 0.9);
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: var(--text);
}
.phase-labels {
  display: flex;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.draft-step { position: relative; overflow: hidden; }
.draft-step-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.draft-step.type-ban .draft-step-icon { filter: grayscale(1) brightness(0.6); }
.champ-button { position: relative; }
.tier-badge {
  display: none;
}
.champ-button.on {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.reco-card.on {
  background: #1B2130;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.slot.board-preview {
  background-image: linear-gradient(90deg, rgba(7, 9, 14, 0.7), rgba(7, 9, 14, 0.2)), var(--pv);
  background-size: cover;
  background-position: center 22%;
  outline: 2px dashed rgba(245, 196, 81, 0.8);
  outline-offset: -2px;
}

@media (min-width: 1181px) {
  .board-head-controls #ourSideLabel,
  .board-head-controls #fearlessLabel,
  .board-head-controls #currentBadge,
  .team-card > h2 {
    display: none;
  }
  .reco-card .reco-apply {
    display: none;
  }
  .reco-card {
    cursor: pointer;
  }
  .turn-command-results .champ-button .tier-badge {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: rgba(7, 9, 14, 0.85);
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    font-weight: 800;
    color: var(--text);
  }
  .turn-command-results .champ-button .tier-badge.tier-S {
    background: var(--text);
    color: #07090E;
  }
  .turn-command-results .champ-button.disabled .tier-badge {
    display: none;
  }
}
@media (max-width: 1180px) {
  .board-comp,
  .board-scout,
  .board-roles {
    display: none;
  }
}

/* Keep the team board and the current decision in the same document flow on
   compact screens. The older fixed dock otherwise covers the draft itself. */
@media (max-width: 980px) {
  .board > .team-board { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .board > .phase-strip { display: none; }
  .board > .draft-readiness { display: none; }
  .mobile-draft-flow { display: none; }
  .draft-layout { display: flex; flex-direction: column; gap: 12px; }
  .draft-board-panel, .recommend-dock { width: 100%; min-width: 0; }
  .recommend-dock { position: static; inset: auto; order: 2; max-height: none; }
  .recommend-dock > .turn-command-panel { max-height: none; overflow: visible; box-shadow: none; }
  .turn-command-body, .dock-body { max-height: none; overflow: visible; }
  .turn-command-collapse { display: none; }
  .turn-command-panel.mobile-collapsed .turn-command-body { display: block; }
  .board-head-controls #undoStep { display: inline-flex; }
  .board-head-controls { flex-wrap: wrap; }
  .team-card { min-width: 0; padding: 12px; }
  .team-card h2 { display: flex; gap: 8px; justify-content: space-between; }
  .team-card .slots { display: flex; flex-direction: column-reverse; }
  .team-card .pick-list, .team-card .ban-row {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  }
  .team-card .pick-list .slot {
    min-width: 0; min-height: 0; aspect-ratio: 1; padding: 3px;
    justify-content: center; border-width: 0 0 2px; text-align: center; background-color: var(--panel-raised);
  }
  .team-card .pick-list .slot .champ-name { font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
  .team-card .pick-list .slot .pick-reassign { width: 100%; font-size: 10px; }
  .team-card .ban-row .slot { font-size: 9px; }
  .team-card .slot-group-title { margin-bottom: 5px; }
  .board-roles { display: flex; }
  .turn-command-results.champ-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (max-width: 640px) {
  .draft-layout { padding-bottom: 0; }
  .draft-board-panel > .panel-head { gap: 8px; }
  .board-head-controls #undoStep { min-height: 40px; }
  .series-bar { grid-template-columns: minmax(0, 1fr); }
  .series-score { grid-row: auto; grid-column: auto; }
  .series-status { justify-self: start; }
  .reco-list { grid-template-columns: 1fr; }
  .reco-card .reason { display: block; font-size: 13px; line-height: 1.5; }
  .turn-command-results.champ-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .turn-command-results .champ-button { min-width: 0; }
}

/* 시작 화면: 왼쪽 소개와 메타, 오른쪽 모드·팀·옵션 (시안 04) */
.landing {
  padding: 0;
  background: transparent;
  min-height: 100vh;
  /* hidden은 스크롤 컨테이너를 만들어 .lp-start-bar의 sticky가 화면 기준으로 동작하지 않는다 */
  overflow-x: clip;
}
.lp-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px 48px;
}
.lp-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.lp-mark {
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: var(--gold);
  color: #07090E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.lp-nav b {
  font-size: 18px;
}
.lp-sp {
  flex: 1;
}
.lp-nav a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}
.lp-nav a:hover {
  color: var(--text);
}
.lp-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}
.lp-copy {
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lp-copy > * {
  animation: lpRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.lp-copy > *:nth-child(2) { animation-delay: 0.06s; }
.lp-copy > *:nth-child(3) { animation-delay: 0.12s; }
.lp-copy > *:nth-child(4) { animation-delay: 0.18s; }
.lp-kick {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}
.lp-copy h1 {
  margin: 0;
  font-size: 46px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}
.lp-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.lp-sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.lp-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-card[hidden] {
  display: none;
}
.lp-card h3 {
  margin: 0;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.lp-card h3 span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.lp-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.lp-meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.lp-meta-row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  width: 56px;
  text-align: center;
}
.lp-meta-row .lp-champ {
  width: 44px;
  height: 44px;
  border-radius: 4px;
}
.lp-meta-row b {
  font-size: 13px;
  color: var(--text);
}
.lp-shift-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-shift-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.lp-shift-row .lp-champ {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}
.lp-shift-row b {
  width: 72px;
}
.lp-shift-row span {
  color: var(--muted);
}
.lp-shift-row em {
  font-style: normal;
  margin-left: auto;
  font-weight: 600;
}
.lp-picker {
  flex: 0 1 600px;
  min-width: 0;
  background: #10141D;
  border: 1px solid #1E2432;
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* 오른쪽 카드의 묶음: 작은 제목 + 내용 */
.lp-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.lp-group-teams,
.lp-group-opts {
  gap: 10px;
}
.lp-group[hidden],
.lp-note[hidden] {
  display: none;
}
.lp-label {
  color: #9AA3B8;
  font-size: 13px;
}
.lp-note {
  color: #9AA3B8;
  font-size: 12px;
}
.lp-resume-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-resume-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 14px;
  background: #141925;
  border: 1px solid #252C3B;
  border-radius: 4px;
  color: #EEF1F7;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.lp-resume-row:hover {
  border-color: #9AA3B8;
}
.lp-tag {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid #252C3B;
  font-size: 12px;
  font-weight: 600;
}
.lp-tag.gold {
  border-color: #F5C451;
}
.lp-resume-text {
  flex: 1;
  min-width: 0;
}
.lp-resume-row em {
  font-style: normal;
  color: #9AA3B8;
  font-size: 13px;
}
.lp-methods,
.lp-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lp-method,
.lp-mode {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid #252C3B;
  background: #10141D;
  color: #EEF1F7;
  text-align: left;
  cursor: pointer;
}
.lp-method {
  min-height: 88px;
}
.lp-method b {
  font-size: 17px;
}
.lp-method span {
  color: #9AA3B8;
  font-size: 13px;
  line-height: 1.5;
}
.lp-mode b {
  font-size: 15px;
}
.lp-mode span {
  font-size: 12px;
  color: #9AA3B8;
}
.lp-method.on,
.lp-mode.on {
  background: #141925;
  border-color: #F5C451;
}
.lp-method:disabled,
.lp-mode:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.lp-mono {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--line-strong);
  font-weight: 700;
  color: var(--text);
}
/* 팀 칸: 우리 팀·상대 팀. 고르는 중인 칸은 금색 테두리 */
.lp-steps {
  display: flex;
  gap: 10px;
}
.lp-slot {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 14px;
  border-radius: 4px;
  border: 1px solid #252C3B;
  background: #10141D;
  color: #EEF1F7;
  cursor: pointer;
}
.lp-slot.on {
  background: #141925;
  border-color: #F5C451;
}
.lp-slot-logo {
  flex: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.lp-slot .lp-mono {
  font-size: 11px;
}
.lp-slot-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.lp-slot-text span {
  color: #9AA3B8;
  font-size: 12px;
}
.lp-slot-text b {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-teams {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.lp-teams.w4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.lp-tm {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  background: var(--panel-raised);
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.16s;
}
.lp-tm:hover {
  transform: translateY(-2px);
  background: #171C28;
}
.lp-tm-logo {
  width: 60px;
  height: 40px;
  object-fit: contain;
}
.lp-tm .lp-mono {
  width: 64px;
  height: 36px;
  font-size: 15px;
}
.lp-tm span {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  line-height: 1.3;
}
.lp-tm small {
  font-size: 12px;
  color: var(--muted);
}
/* 시안 Home.dc.html: 우리 팀은 밝은 선, 상대 팀은 보조색 선. "우리/상대"는 바탕 없는 글자 */
.lp-tm.ours { box-shadow: inset 0 0 0 2px #EEF1F7; }
.lp-tm.enemy { box-shadow: inset 0 0 0 2px #9AA3B8; }
.lp-tm i {
  position: absolute;
  top: 6px;
  right: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #EEF1F7;
}
/* 옵션: 한 줄에 이름과 버튼 두 개. 진영은 진영색, 나머지는 금색 테두리 */
.lp-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-opt > span {
  flex: none;
  width: 84px;
  color: #9AA3B8;
  font-size: 13px;
}
.lp-opt button {
  height: 44px;
  min-width: 88px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid #252C3B;
  background: #141925;
  color: #EEF1F7;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.lp-opt button.on {
  background: #F5C45129;
  border-color: #F5C451;
}
.lp-opt button.on[data-tone="blue"] {
  background: #4A8CFF29;
  border-color: #4A8CFF;
}
.lp-opt button.on[data-tone="red"] {
  background: #F0505A29;
  border-color: #F0505A;
}
.lp-start-bar {
  /* 팀 목록이 길어도 시작 버튼은 오른쪽 카드 안에서 화면 아래에 붙어 있게 한다 */
  position: sticky;
  bottom: 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #10141D;
  box-shadow: 0 0 0 8px #10141D;
}
.lp-start {
  height: 56px;
  border: 0;
  border-radius: 4px;
  background: #F5C451;
  color: #07090E;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.lp-start:hover:not(:disabled) {
  background: #f7cf6b;
}
.lp-start:disabled {
  background: #1E2432;
  color: #9AA3B8;
  cursor: not-allowed;
}
.lp-start-note {
  color: #9AA3B8;
  font-size: 12px;
  text-align: center;
}
.landing .landing-source-note {
  margin-top: 56px;
  color: var(--muted);
}
@keyframes lpRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 720px) {
  .lp-wrap { padding: 24px 16px 40px; }
  .lp-teams, .lp-teams.w4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-copy h1 { font-size: 34px; }
  .lp-picker { flex-basis: 100%; padding: 16px; gap: 20px; }
  .lp-slot { gap: 8px; padding: 0 10px; }
  .lp-opt > span { width: 72px; }
  .lp-opt button { flex: 1; min-width: 0; padding: 0 8px; }
  /* 휴대폰에서는 시작 버튼을 화면 맨 아래에 붙인다 */
  .lp-start-bar { bottom: 0; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-copy > *, .lp-tm { animation: none; transition: none; }
}

/* 팀 선택 화면 */
.competition-switch button {
  border-radius: 4px;
  border-color: var(--line-strong);
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
}
.competition-switch button[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: #07090E;
}
.workflow-step-bar {
  background: transparent;
  border-color: var(--line);
}
.guide-note {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .turn-command-results .champ-button:hover:not(.disabled) {
    transform: none;
  }
}

/* ---- 시안 02·03 그대로 옮긴 층 (board.js가 만든 요소 포함) ---- */

/* 팀 선택은 시작 화면에서 한다. 보드 위 탭 줄은 시안에 없음 */
.app > nav.tabs {
  display: none;
}
header h1 a {
  color: inherit;
  text-decoration: none;
}
.board-saved,
.mobile-board {
  display: none;
}
.board-tbar[hidden],
.mb-tbar[hidden] {
  display: none;
}
.tier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #252C3B;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
}
.tier.s {
  background: var(--text);
  color: #07090E;
}
.shift {
  display: inline-flex;
  color: var(--muted);
}
.dots i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--muted);
  animation: board-dot 1s ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes board-dot { 0%, 100% { opacity: 0.3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes board-ghost { 0% { opacity: 0; transform: scale(0.9); } 20%, 40% { opacity: 0.85; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.04); } }
@keyframes board-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes board-pop { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes board-sweep { from { transform: translateX(-120%); } to { transform: translateX(260%); } }
@keyframes board-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 196, 81, 0); } 50% { box-shadow: 0 0 0 4px rgba(245, 196, 81, 0.2); } }
@keyframes board-scan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@keyframes board-sheet { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 1181px) {
  /* 상단 바: 모드, 기준 한 줄, 자동 저장, 되돌리기, 처음부터 */
  header {
    padding: 10px 24px;
  }
  .topbar {
    max-width: none;
  }
  #dataPatchNote,
  #saveStatus,
  #dataMenu {
    display: none;
  }
  header .actions,
  header .data-controls {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .board-saved {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--muted);
  }
  .board-tb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
  }
  .board-ib {
    width: 40px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--muted);
  }
  .board-ib:hover:not(:disabled) {
    color: var(--text);
  }
  main {
    max-width: none;
    padding: 0 24px 24px;
  }
  .draft-layout {
    max-width: none;
  }
  .draft-board-panel > .panel-head,
  #seriesBar {
    display: none;
  }

  /* 점수 줄: 양 팀 이름과 로고, 가운데 세트 점수 */
  #boardStrip {
    grid-area: series;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0 12px;
  }
  .bst-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .bst-team.right {
    justify-content: flex-end;
  }
  .bst-team img {
    width: 44px;
    height: 36px;
    object-fit: contain;
  }
  .bst-team .bar {
    width: 4px;
    height: 36px;
  }
  .bst-team.bl .bar { background: var(--blue); }
  .bst-team.rd .bar { background: var(--red); }
  .bst-team .nm {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .bst-team.right .nm {
    align-items: flex-end;
  }
  .bst-team b {
    font-size: 22px;
    font-weight: 800;
  }
  .bst-team .nm span {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  .bst-score {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 30px;
    font-weight: 800;
  }
  .bst-score i {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
  }
  #phaseStrip {
    margin-bottom: 14px;
  }

  /* 팀 열: 개수 줄 없이 칸만. 빈 밴은 번호, 빈 픽은 "Pick 1" */
  .slot-group-title {
    display: none;
  }
  .team-card .slots {
    gap: 4px;
  }
  .ban-row .slot.empty {
    font-size: 12px;
    color: rgba(154, 163, 184, 0.6);
  }
  .pick-list .slot.empty {
    justify-content: flex-start;
    padding: 0 14px;
    font-size: 13px;
    color: rgba(154, 163, 184, 0.6);
    text-transform: none;
    letter-spacing: 0;
  }
  .pick-list .slot .champ-name {
    font-size: 20px;
  }
  .pick-list .slot .pick-reassign {
    font-size: 13px;
  }
  .team-card .board-comp {
    margin-top: 4px;
  }

  /* 이번 턴: "우리 차례 30초" / "밴 1", 한 줄 안내, 금색 밑줄 위 타이머 */
  .turn-command-panel .dock-head {
    position: relative;
    align-items: flex-end;
  }
  #turnSub {
    display: none;
  }
  .turn-command-title {
    margin-top: 2px;
  }
  .app .dock-head #currentHint {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: var(--muted);
  }
  .app .dock-head #currentHint:empty {
    display: none;
  }
  /* 채울 자리: 우리 차례는 금색 테두리가 천천히 숨쉬고, AI 차례는 스캔 라인이 지나감 */
  .team-card .slot.active.board-me {
    animation: board-breathe 2s ease-in-out infinite;
  }
  .team-card .slot.active.board-ai {
    position: relative;
    overflow: hidden;
    outline: 0;
    background: var(--panel);
  }
  .team-card .slot.active.board-ai::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(238, 241, 247, 0.12), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: board-scan 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
  }
  /* 고르는 중: 점선 테두리 안에 흐린 일러스트와 이름 */
  .team-card .slot.active.board-preview {
    position: relative;
    background: var(--panel);
    outline: 2px dashed rgba(245, 196, 81, 0.8);
    outline-offset: -2px;
    color: transparent;
  }
  .team-card .slot.active.board-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pv) center 16% / cover no-repeat;
    opacity: 0.4;
    filter: saturate(0.4);
  }
  .pick-list .slot > .board-pv-txt {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .red-team-card .pick-list .slot > .board-pv-txt {
    left: auto;
    right: 14px;
    align-items: flex-end;
  }
  .board-pv-txt b {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
  }
  .board-pv-txt span {
    font-size: 13px;
    color: var(--muted);
  }
  /* 라인 배정은 밴픽이 끝난 뒤에만 바꿀 수 있다. 그 전에는 글자로만 보임 */
  .pick-list .slot .pick-reassign {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
  }
  .pick-list .slot .pick-reassign:disabled {
    opacity: 1;
    cursor: default;
  }
  .pick-list .slot .pick-reassign:not(:disabled) {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .board-tbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--line);
  }
  .board-tbar i {
    display: block;
    height: 100%;
    background: var(--gold);
  }
  .motion-preference,
  #skipAiMotion,
  .turn-detail-panel > .turn-section-head,
  .score-meaning-note {
    display: none;
  }
  .turn-command-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .turn-command-body > * {
    flex-shrink: 0;
  }
  .app .turn-command-body,
  .app .turn-detail-body,
  .app .turn-detail-body .dock-pane {
    padding-left: 0;
    padding-right: 0;
  }
  .turn-detail-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .board-pred {
    gap: 14px;
    padding: 8px 12px;
    margin: 0;
    flex-wrap: wrap;
  }
  .board-pred-item,
  .board-pred-item div {
    flex: none;
  }
  .board-pred-item i {
    width: 44px;
  }

  /* 세트가 끝나면 가운데는 경기 시뮬레이션과 결과 카드만 */
  .turn-command-panel.draft-done {
    display: none;
  }
  #seriesResultPanel {
    padding: 16px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: var(--panel);
  }

  /* 상대 차례: 카드 자리는 흐린 빈 틀로 기다리고, 확정 버튼 자리에 AI 감독 패널. 누르면 바로 공개 */
  .turn-command-panel.enemy-turn #boardLock {
    display: none;
  }
  .turn-command-panel.enemy-turn .reco-list {
    opacity: 0.5;
  }
  /* 예전 규칙은 상대 차례에 챔피언 목록을 위로 올리고 글자를 빨갛게 했다. 시안은 순서와 글자색이 그대로다 */
  .turn-command-panel.enemy-turn .turn-search-disclosure,
  .turn-command-panel.enemy-turn .turn-detail-panel {
    order: 0;
  }
  .turn-command-panel.enemy-turn .turn-command-kicker {
    color: var(--muted);
  }
  .ai-thinking {
    min-height: 64px;
    gap: 14px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    cursor: pointer;
  }
  .ai-thinking-scan {
    background: linear-gradient(90deg, transparent, rgba(238, 241, 247, 0.08), transparent);
  }
  .ai-thinking b {
    font-size: 16px;
    font-weight: 700;
  }
  .ai-thinking small {
    font-size: 13px;
  }
  .ai-ghosts {
    position: relative;
    width: 44px;
    height: 44px;
    flex: none;
  }
  .ai-ghosts img {
    position: absolute;
    inset: 0;
    width: 44px;
    height: 44px;
    opacity: 0;
    animation: board-ghost 1.8s ease-in-out infinite;
  }
  .ai-ghosts img:nth-child(2) { animation-delay: 0.6s; }
  .ai-ghosts img:nth-child(3) { animation-delay: 1.2s; }

  /* 추천 카드: 2열 4장. 점수 1개, 이득 1줄. 고른 카드만 비용과 근거를 펼침 */
  .reco-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .app .reco-list .reco-card:nth-child(n+5) {
    display: none;
  }
  .app .reco-card.rc {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px 10px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.16s;
  }
  .app .reco-card.rc:hover {
    transform: translateY(-2px);
    background: var(--panel-raised);
  }
  .app .reco-card.rc.on {
    background: #171C28;
    border-color: var(--gold);
    box-shadow: none;
  }
  .reco-card.rc .rc-img {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 0;
  }
  .rc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .rc-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .app .reco-card.rc .rc-top b {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
  }
  .rc-role {
    overflow: hidden;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .rc-why {
    overflow: hidden;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .rc-more {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--line-strong);
    font-size: 12px;
    color: var(--muted);
  }
  .reco-card.rc.on .rc-more {
    display: flex;
  }
  .rc-more .rc-cost {
    color: var(--text);
  }
  .app .reco-card.rc .rc-sc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
    padding: 0;
    border: 0;
    background: none;
  }
  .app .reco-card.rc .rc-sc b {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
  }
  .app .reco-card.rc .rc-sc small {
    font-size: 11px;
    color: var(--muted);
  }
  .board-lock {
    min-height: 50px;
    margin-top: 0;
    font-weight: 800;
  }

  /* 전체 챔피언: 머리줄, 역할 칩과 검색 한 줄, 14열 격자 */
  .turn-search-disclosure {
    border: 0;
    padding: 0;
    background: none;
  }
  .turn-search-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
  }
  .turn-search-section > .turn-section-head,
  #turnSearchStatus {
    display: none;
  }
  .board-pool-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .board-pool-h b {
    font-size: 14px;
  }
  .board-pool-h span {
    font-size: 12px;
    color: var(--muted);
  }
  .board-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .board-chips .board-roles {
    margin: 0;
  }
  .board-roles button {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: transparent;
    font-size: 13px;
    color: var(--muted);
  }
  .board-roles button.on {
    border-color: var(--text);
    background: var(--text);
    color: #07090E;
    font-weight: 700;
  }
  .board-chips .champ-search {
    display: block;
    margin: 0 0 0 auto;
    width: 200px;
  }
  .board-chips .champ-search select {
    display: none;
  }
  .board-chips #champSearch {
    width: 200px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: #0B0E15;
    font-size: 13px;
  }
  .board-chips #champSearch:focus {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }
  .turn-command-results.champ-grid {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    grid-auto-rows: auto;
    max-height: none;
    overflow: visible;
  }
}

/* ---- 모바일 밴픽 (시안 03): 팀 줄, 이번 차례 카드, 아래 시트 ---- */
@media (max-width: 1180px) {
  body:not(.landing-active) .app:has(#draftView.active) > header {
    display: none;
  }
  #draftView.active .recommend-dock,
  #draftView .draft-board-panel > :not(#seriesResultPanel):not(#gameSimulation) {
    display: none;
  }
  #draftView .draft-board-panel {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 16px;
  }
  #draftView .draft-layout {
    gap: 0;
  }
  body:not(.landing-active) .app:has(#draftView.active) main {
    padding: 0 0 24px;
  }
  .mobile-board {
    display: block;
    max-width: 640px;
    margin: 0 auto;
    color: var(--text);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    word-break: keep-all;
  }
  .mobile-board button {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    cursor: pointer;
  }
  .mobile-board .mb-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
  }
  .mobile-board .mb-brand {
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
  }
  .mobile-board .mb-mtag {
    min-height: 0;
    padding: 3px 8px;
    border: 0;
    border-radius: 999px;
    background: var(--text);
    color: #07090E;
    font-size: 12px;
    font-weight: 600;
  }
  .mobile-board .mb-tour {
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: #EEF1F7;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  .mobile-board .mb-meta {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mobile-board .mb-sp { flex: 1; }
  .mobile-board .mb-saved { display: flex; color: var(--muted); }
  .mobile-board .mb-ib {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
  }
  .mobile-board .mb-teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 0;
  }
  .mobile-board .mb-trow,
  .mobile-board .mb-brow {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mobile-board .mb-brow {
    margin-top: -4px;
  }
  .mobile-board .mb-tname {
    width: 40px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
  }
  .mobile-board .mb-tname::before {
    content: "";
    width: 4px;
    height: 16px;
    flex: none;
  }
  .mobile-board .mb-tname.bl::before { background: var(--blue); }
  .mobile-board .mb-tname.rd::before { background: var(--red); }
  .mobile-board .mb-brow > span {
    width: 40px;
    flex: none;
    font-size: 12px;
    color: var(--muted);
  }
  .mobile-board .mb-slots,
  .mobile-board .mb-bans {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }
  .mobile-board .mb-s {
    position: relative;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  .mobile-board .mb-s img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 15%;
  }
  .mobile-board .mb-s.b {
    height: 24px;
    border: 0;
  }
  .mobile-board .mb-s.b img {
    object-position: 50% 30%;
    filter: grayscale(1) brightness(0.75);
  }
  .mobile-board .mb-s.in img {
    animation: board-pop 0.56s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
  .mobile-board .mb-s.in::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: board-sweep 0.7s 0.15s ease-out both;
  }
  .mobile-board .mb-s.me {
    border: 2px solid var(--gold);
    animation: board-breathe 2s ease-in-out infinite;
  }
  .mobile-board .mb-s.gh {
    border: 2px dashed rgba(245, 196, 81, 0.8);
  }
  .mobile-board .mb-s.gh img {
    opacity: 0.4;
  }
  .mobile-board .mb-s.ai::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(238, 241, 247, 0.14), transparent);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: board-scan 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
  }
  .mobile-board .mb-turn {
    position: relative;
    margin: 14px 16px 0;
    padding: 14px 16px 0;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
  }
  .mobile-board .mb-turn.me {
    border-color: rgba(245, 196, 81, 0.55);
  }
  .mobile-board .mb-turn .mb-phase {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
  }
  .mobile-board .mb-secs {
    margin-left: 8px;
    color: var(--text);
  }
  .mobile-board .mb-turn h1 {
    margin: 2px 0 4px;
    font-size: 22px;
    font-weight: 800;
  }
  .mobile-board .mb-turn p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--muted);
  }
  .mobile-board .mb-tbar {
    height: 4px;
    margin: 0 -16px;
    background: var(--line);
  }
  .mobile-board .mb-tbar i {
    display: block;
    height: 100%;
    background: var(--gold);
  }
  .mobile-board .mb-sheet {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    margin-top: 14px;
    border-top: 1px solid var(--line-strong);
    border-radius: 18px 18px 0 0;
    background: var(--panel);
  }
  .mobile-board .mb-sheet.enter {
    animation: board-sheet 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .mobile-board .mb-grab {
    width: 40px;
    height: 4px;
    margin: 8px auto 6px;
    border-radius: 2px;
    background: #353E52;
  }
  .mobile-board .mb-tabs {
    display: flex;
    gap: 6px;
    padding: 4px 16px 10px;
  }
  .mobile-board .mb-tab {
    flex: 1;
    min-height: 40px;
    border-radius: 2px;
    border: 1px solid var(--line-strong);
    background: transparent;
    font-size: 14px;
    color: var(--muted);
  }
  .mobile-board .mb-tab.on {
    border-color: var(--text);
    background: var(--text);
    color: #07090E;
    font-weight: 600;
  }
  .mobile-board .mb-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 16px 12px;
  }
  .mobile-board .mb-rc {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--line-strong);
    background: var(--panel-raised);
    text-align: left;
  }
  .mobile-board .cards-in .mb-rc {
    animation: board-rise 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--d, 0ms);
  }
  /* 밴은 흑백으로 바뀌며 작아지고, 픽처럼 빛이 지나가지 않음 */
  .mobile-board .mb-s.b.in img {
    animation: board-ban 0.42s cubic-bezier(0.65, 0, 0.35, 1) both;
  }
  .mobile-board .mb-s.b.in::after {
    display: none;
  }
  .mobile-board .mb-lock:active:not(:disabled),
  .mobile-board .mb-ib:active,
  .mobile-board .mb-tab:active,
  .mobile-board .mb-chip:active,
  .mobile-board .mb-rc:active {
    transform: scale(0.98);
  }
  .mobile-board .mb-lock,
  .mobile-board .mb-ib,
  .mobile-board .mb-tab,
  .mobile-board .mb-chip,
  .mobile-board .mb-rc {
    transition: transform 0.09s ease-out;
  }
  .mobile-board .mb-rc.skeleton,
  .mobile-board .mb-pred.skeleton {
    align-items: center;
  }
  .mobile-board .mb-rc.on {
    background: #1B2130;
    box-shadow: inset 0 0 0 2px var(--gold);
  }
  .mobile-board .mb-rc > img {
    width: 48px;
    height: 48px;
    flex: none;
  }
  .mobile-board .mb-rc .mb-bd {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .mobile-board .mb-rc .mb-tp {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  .mobile-board .mb-rc .mb-tp b {
    font-size: 16px;
    white-space: nowrap;
  }
  .mobile-board .mb-rc .mb-tp > span:not(.tier):not(.shift) {
    overflow: hidden;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mobile-board .mb-g { font-size: 13px; }
  .mobile-board .mb-c { font-size: 13px; color: var(--muted); }
  .mobile-board .mb-scw {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
  }
  .mobile-board .mb-sc {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
  }
  .mobile-board .mb-scw small {
    font-size: 11px;
    color: var(--muted);
  }
  .mobile-board .mb-empty,
  .mobile-board .mb-sub {
    margin: 4px 0;
    font-size: 13px;
    color: var(--muted);
  }
  .mobile-board .mb-pred {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--panel-raised);
    font-size: 14px;
  }
  .mobile-board .mb-pred img {
    width: 36px;
    height: 36px;
  }
  .mobile-board .mb-pred b {
    flex: 1;
    font-weight: 600;
  }
  .mobile-board .mb-pred .pb {
    width: 64px;
    height: 3px;
    background: var(--line);
  }
  .mobile-board .mb-pred .pb i {
    display: block;
    height: 100%;
    background: var(--muted);
  }
  .mobile-board .mb-pred small {
    width: 36px;
    text-align: right;
    font-size: 13px;
    color: var(--muted);
  }
  .mobile-board .mb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .mobile-board .mb-chip {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: transparent;
    font-size: 13px;
    color: var(--muted);
  }
  .mobile-board .mb-chip.on {
    border-color: var(--text);
    background: var(--text);
    color: #07090E;
    font-weight: 700;
  }
  .mobile-board .mb-search {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: #0B0E15;
    color: var(--text);
    font-size: 14px;
  }
  .mobile-board .mb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 4px;
  }
  .mobile-board .mb-gi {
    position: relative;
    min-height: 0;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #0B0E15;
  }
  .mobile-board .mb-gi img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mobile-board .mb-gi b {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    background: rgba(7, 9, 14, 0.85);
    font-size: 11px;
    line-height: 15px;
    text-align: center;
  }
  .mobile-board .mb-gi.ts b {
    background: var(--text);
    color: #07090E;
  }
  .mobile-board .mb-gi.on {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
  }
  .mobile-board .mb-gi.x img {
    filter: grayscale(1) brightness(0.4);
  }
  .mobile-board .mb-gi.x b {
    display: none;
  }
  .mobile-board .mb-foot {
    position: sticky;
    bottom: 0;
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid #1A2030;
    background: var(--panel);
  }
  .mobile-board .mb-foot:empty {
    display: none;
  }
  .mobile-board .mb-lock {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 4px;
    background: var(--gold);
    color: #07090E;
    font-size: 16px;
    font-weight: 700;
  }
  .mobile-board .mb-lock.off {
    background: var(--line);
    color: var(--muted);
  }
  .mobile-board .mb-aiwait {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-board *,
  .mobile-board *::before,
  .mobile-board *::after,
  .ai-ghosts img,
  .dots i,
  .team-card .slot.active.board-me,
  .team-card .slot.active.board-ai::before {
    animation: none !important;
  }
  .ai-ghosts img:first-child {
    opacity: 0.85;
  }
}

/* ---- 대기·전환 동작 (시안 모션 시스템) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@keyframes board-ban { from { filter: none; transform: scale(1.08); } to { filter: grayscale(1) brightness(0.75); transform: scale(1); } }
@keyframes board-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes board-shimmer { from { background-position: -160px 0; } to { background-position: 320px 0; } }
@keyframes board-stage { 0% { transform: scale(1); } 30% { transform: scale(1.18); color: var(--gold); } 100% { transform: scale(1); } }

/* 서버가 계산하는 동안: 카드·예측·시뮬레이션 자리가 은은하게 빛남 */
.sk {
  display: block;
  border-radius: 2px;
  background: #171C28 linear-gradient(90deg, transparent, rgba(238, 241, 247, 0.06), transparent) no-repeat;
  background-size: 160px 100%;
  animation: board-shimmer 1.2s linear infinite;
}
.sk-img { width: 48px; height: 48px; flex: none; }
.sk-ico { width: 28px; height: 28px; flex: none; }
.sk-line { height: 12px; width: 70%; }
.sk-line.short { width: 45%; }
.sk-score { width: 34px; height: 30px; flex: none; }
.v4-score-details {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.reco-card.rc.skeleton {
  cursor: default;
  pointer-events: none;
}
.reco-card.rc.skeleton .rc-body,
.mobile-board .mb-rc.skeleton .mb-bd {
  gap: 8px;
}
.board-pred-item.sk-item {
  width: 110px;
}
.board-pred-item.sk-item .sk-line {
  width: 64px;
}
.mobile-board .mb-pred.skeleton .sk-line {
  flex: 1;
}
#gameSimulation .sim-skeleton {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
#gameSimulation .sim-skeleton span {
  height: 44px;
  border-radius: 2px;
  background: #171C28 linear-gradient(90deg, transparent, rgba(238, 241, 247, 0.06), transparent) no-repeat;
  background-size: 160px 100%;
  animation: board-shimmer 1.2s linear infinite;
}

/* 픽 확정: 빛이 지나간 뒤 이름이 드러남 */
.pick-list .slot.motion-lock .champ-name {
  animation: board-reveal 0.5s 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 세트 종료: 결과 카드는 천천히 올라오고, 세트 점수가 바뀌면 한 번 튐 */
/* backwards: 끝난 뒤 transform이 남으면 안의 하단 고정 버튼이 카드에 갇힌다 */
#seriesResultPanel:not([hidden]) {
  animation: board-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.bst-score.bump {
  animation: board-stage 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 누름 90ms, 카드 호버 시 초상화 1.04배 */
.board-tb,
.board-ib,
.board-lock,
.board-roles button {
  transition: transform 0.09s ease-out, background 0.16s;
}
.board-tb:active,
.board-ib:active,
.board-roles button:active,
.board-lock:active:not(:disabled) {
  transform: scale(0.97);
}
.reco-card.rc .rc-img {
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.app .reco-card.rc:hover .rc-img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .sk,
  #gameSimulation .sim-skeleton span,
  .pick-list .slot.motion-lock .champ-name,
  #seriesResultPanel:not([hidden]),
  .bst-score.bump,
  .mobile-board .mb-s.b.in img {
    animation: none !important;
  }
  #seriesResultPanel:not([hidden]) {
    animation: reduced-feedback 120ms ease-out both !important;
  }
}

/* 전체 챔피언: 기본 2줄, 아래는 흐리게 접고 "전체 보기"로 펼침 */
.turn-command-results.champ-grid.pool-folded,
.mobile-board .mb-grid.pool-folded {
  max-height: calc(var(--pool-cell, 50px) * 2.6 + 8px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--pool-cell, 50px) * 2 + 4px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(var(--pool-cell, 50px) * 2 + 4px), transparent);
}
.board-pool-more {
  display: block;
  position: relative;
  min-height: 32px;
  margin: -8px auto 0;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.09s ease-out;
}
.board-pool-more:active {
  transform: scale(0.97);
}
.board-pool-more[hidden] {
  display: none;
}

/* 우리 팀은 진영과 상관없이 왼쪽. 레드일 때 두 팀 열의 자리와 좌우 방향을 맞바꾼다 */
body.our-red .blue-team-card .pick-list .slot { border-left: 0; border-right: 3px solid var(--blue); flex-direction: row-reverse; text-align: right; }
body.our-red .red-team-card .pick-list .slot { border-right: 0; border-left: 3px solid var(--red); flex-direction: row; text-align: left; }
body.our-red .blue-team-card .pick-list .slot[style*="--art"]::before { background: linear-gradient(270deg, rgba(7, 9, 14, 0.88) 0%, rgba(7, 9, 14, 0.35) 70%, rgba(7, 9, 14, 0.15) 100%); }
body.our-red .red-team-card .pick-list .slot[style*="--art"]::before { background: linear-gradient(90deg, rgba(7, 9, 14, 0.88) 0%, rgba(7, 9, 14, 0.35) 70%, rgba(7, 9, 14, 0.15) 100%); }
@media (min-width: 1181px) {
  body.our-red .blue-team-card { grid-area: red; }
  body.our-red .red-team-card { grid-area: blue; }
  body.our-red .blue-team-card h2 { flex-direction: row-reverse; }
  body.our-red .red-team-card h2 { flex-direction: row; }
  body.our-red .blue-team-card .pick-list .slot > .board-pv-txt { left: auto; right: 14px; align-items: flex-end; }
  body.our-red .red-team-card .pick-list .slot > .board-pv-txt { left: 14px; right: auto; align-items: flex-start; }
}

/* 세트가 끝난 뒤 다음 행동 버튼은 첫 화면에 보여야 한다. 데스크톱은 결과 카드를 시뮬레이션 위에 두고,
   모바일은 밴픽 확정 버튼처럼 화면 아래에 고정한다 */
@media (max-width: 1180px) {
  /* 주 버튼만 화면 아래에 고정한다. "홈으로"(#seriesGoHome)와 결과 취소는 결과 카드 안에 남는다 */
  #seriesNextControls:not([hidden]) #startNextSet,
  #seriesCompleteControls:not([hidden]) #startNewSeries:not([hidden]),
  #seriesCompleteControls:not([hidden]) #returnTournament:not([hidden]) {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 40;
    width: auto;
    min-height: 52px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: var(--gold);
    color: #07090E;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 0 0 12px var(--panel);
  }
  #seriesNextControls:not([hidden]) #startNextSet:disabled {
    background: var(--line);
    color: var(--muted);
    opacity: 1;
  }
  body:has(#seriesNextControls:not([hidden]), #seriesCompleteControls:not([hidden])) .app {
    padding-bottom: 96px;
  }
  /* 세로로 쌓이면 데스크톱용 flex-basis 420px가 높이가 되어 버튼이 크게 늘어났다 */
  .series-next-settings {
    flex: 0 0 auto;
  }
}

/* 페이지 그리드 칸이 경기 연표(최소 720px) 폭을 따라 늘어나 모바일 화면이 옆으로 넓어지던 문제.
   연표는 자기 가로 스크롤 안에서만 넓어진다 */
.app > main {
  min-width: 0;
}

/* 추천 카드 라벨(카운터, 주도권 픽 등). 점수 1위 카드의 "밸류 최고"는 금색 테두리. */
.rc-labels {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.rc-labels .rc-why,
.rc-labels .rc-why-m {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-labels .rc-why-m {
  color: var(--muted);
}
.rc-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  background: #1B2130;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.rc-label.top {
  border-color: var(--gold);
}

/* 다음 세트 진영·순서 버튼: 고를 수 있는 버튼이 글자처럼 보이지 않게 테두리와 바탕을 준다(2026-10-30). */
#seriesNextControls .switch { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(72px, 1fr); gap: 6px; padding: 0; background: none; border: 0; border-radius: 0; }
#seriesNextControls .switch button { min-height: 40px; padding: 0 14px; border: 1px solid #353E52; border-radius: 4px; background: #141925; color: #EEF1F7; font-size: 14px; font-weight: 600; box-shadow: none; cursor: pointer; }
#seriesNextControls .switch button:hover:not(:disabled) { background: #1B2130; border-color: #4A5470; }
#seriesNextControls .side-choice button[data-side="BLUE"].active { background: rgba(74, 140, 255, 0.18); border-color: #4A8CFF; color: #EEF1F7; }
#seriesNextControls .side-choice button[data-side="RED"].active { background: rgba(240, 80, 90, 0.18); border-color: #F0505A; color: #EEF1F7; }
#seriesNextControls .order-choice button.active { background: rgba(245, 196, 81, 0.16); border-color: #F5C451; color: #EEF1F7; }
/* 상대가 이미 고른 쪽: 고른 값은 또렷하게, 남은 값은 흐리게 */
#seriesNextControls .switch button:disabled { cursor: default; opacity: 0.4; }
#seriesNextControls .switch button:disabled.active { opacity: 1; }
#seriesNextControls .series-next-option > span:first-child { color: #9AA3B8; font-size: 12px; }
#startNextSet, #startNewSeries, #returnTournament { min-height: 44px; }
#undoSetResult, #seriesGoHome { min-height: 44px; border: 1px solid #353E52; background: #141925; color: #EEF1F7; }
@media (max-width: 700px) {
  #seriesNextControls .switch { display: grid; width: 100%; }
}

/* 원딜·서폿 카드의 짝 한 줄(최근 프로 기록) */
.rc-duo, .mobile-board .mb-duo { display: block; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }

/* 밴픽연구소 브랜드 마크 */
header h1 a,
.mobile-board .mb-brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { flex: 0 0 auto; width: 22px; height: 22px; }
img.lp-mark { display: block; object-fit: contain; border-radius: 0; background: none; }