/* 대진표 만들기 */
.bk-info { margin: 0; text-align: center; font-weight: 700; font-size: 14.5px; color: var(--text-2); }
.bk-info.is-error { color: var(--danger); }
.bk-title { margin: 0; font-weight: 900; font-size: 17px; }

.bk-scroll {
  position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -4px; padding: 4px 4px 10px; border-radius: var(--radius-lg);
}
.bk-scroll:focus-visible { box-shadow: var(--focus); }
.bk-board {
  --cw: 156px; --g: 30px; --mh: 104px; --line: var(--border-strong);
  display: flex; align-items: stretch; width: max-content; min-width: 100%;
}
.bk-col { width: var(--cw); flex: none; display: flex; flex-direction: column; }
.bk-col + .bk-col { margin-left: var(--g); }
.bk-head {
  text-align: center; font-weight: 900; font-size: 14px; color: var(--text-2); padding: 6px 0; margin-bottom: 8px;
  border-radius: 999px; background: var(--surface-2);
}
.bk-col.is-champ .bk-head { background: color-mix(in srgb, #f5b700 22%, var(--surface-2)); color: var(--text); }
.bk-body { height: calc(var(--m) * var(--mh)); display: flex; flex-direction: column; }
.bk-mw { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; }

/* 연결선: 오른쪽으로 나가는 선 */
.bk-col:not(.is-champ) .bk-mw::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: calc(var(--g) / 2); border-top: 2px solid var(--line);
}
.bk-col:not(.is-champ) .bk-mw.is-done::after { border-top-color: var(--primary); }
/* 두 경기를 잇는 세로선 */
.bk-col:not(.is-final):not(.is-champ) .bk-mw::before {
  content: ""; position: absolute; left: calc(100% + var(--g) / 2 - 1px); border-left: 2px solid var(--line);
}
.bk-col:not(.is-final):not(.is-champ) .bk-mw:nth-child(odd)::before { top: 50%; bottom: 0; }
.bk-col:not(.is-final):not(.is-champ) .bk-mw:nth-child(even)::before { top: 0; bottom: 50%; }
/* 들어오는 선 */
.bk-col + .bk-col .bk-match::before, .bk-champ::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--g) / 2 + 2px); border-top: 2px solid var(--line);
}

.bk-match {
  position: relative; width: 100%; background: var(--surface); border: 1.5px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .2s;
}
.bk-match.is-playing { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 40%, transparent), var(--shadow-sm); }
.bk-match.is-auto { border-style: dashed; }
.bk-p {
  --c: var(--text-3); --ct: #fff;
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 0 10px;
  border: 0; background: transparent; color: var(--text); text-align: left; font-weight: 700; font-size: 14.5px;
  cursor: default; -webkit-tap-highlight-color: transparent; transition: background .15s;
}
.bk-p + .bk-p { border-top: 1px solid var(--border); }
.bk-p:first-child { border-radius: 10px 10px 0 0; }
.bk-p:last-child { border-radius: 0 0 10px 10px; }
.bk-p:disabled { opacity: 1; }
.bk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.bk-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-p.is-pick, .bk-p.is-locked { cursor: pointer; }
.bk-p.is-pick:hover { background: var(--surface-2); }
.bk-p.is-win { background: color-mix(in srgb, var(--c) 16%, var(--surface)); font-weight: 900; }
.bk-p.is-lose { color: var(--text-3); }
.bk-p.is-lose .bk-pn { text-decoration: line-through; }
.bk-p.is-lose .bk-dot { opacity: .35; }
.bk-p.is-bye .bk-pn, .bk-p.is-tbd .bk-pn { color: var(--text-3); font-weight: 600; font-size: 13px; }
.bk-mark {
  flex: none; font-size: 11.5px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: var(--c); color: var(--ct);
}
.bk-p.bk-in { animation: bk-in .45s cubic-bezier(.2, 1.3, .4, 1); }

/* 우승 */
.bk-champ {
  position: relative; width: 100%; min-height: 88px; padding: 8px; border-radius: 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--surface); border: 2px dashed var(--border-strong);
}
.bk-trophy { font-size: 28px; line-height: 1.1; }
.bk-cname { max-width: 100%; font-weight: 900; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.bk-champ.is-on { border: 2px solid #f5b700; background: linear-gradient(180deg, #fff6d6, #ffe39a); box-shadow: 0 8px 22px rgba(245, 183, 0, .35); }
.bk-champ.is-on .bk-cname { color: #5a4300; }

@keyframes bk-in {
  0% { transform: translateX(-14px); opacity: .2; }
  100% { transform: none; opacity: 1; }
}
@media (max-width: 520px) {
  .bk-board { --cw: 134px; --g: 22px; --mh: 100px; }
  .bk-p { font-size: 14px; padding: 0 8px; gap: 6px; }
}