/* 토너먼트 대진표 — '대진 운영판'. 색은 셸 토큰만, accent 는 고른 경기 한 곳(대진판 칸 테두리·사다리 점·들어가는 선). */
.tbk{container:tbk/inline-size;overflow:visible}

/* 요약 띠: 답(경기 수·우승) | 라운드 사다리 */
.tbk-sum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px 26px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--soft);border-radius:var(--radius) var(--radius) 0 0}
.tbk-cap{display:flex;align-items:center;gap:8px;margin:0 0 8px;min-width:0}
.tbk-cap .v2-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tbk-ex{flex:0 0 auto;padding:1px 7px;border:1px solid var(--line);border-radius:999px;font:600 10.5px/1.5 var(--sans);color:var(--muted);background:var(--paper)}
.tbk-big{flex-wrap:wrap;min-width:0}
.tbk-big b{font-weight:inherit;min-width:0;overflow-wrap:anywhere}
.tbk-big.is-champ b{font-size:38px;line-height:1.08}
.tbk-big.is-long b{font-size:26px}
.tbk-ans .v2-sub{margin-top:8px}
.tbk-ladder{list-style:none;margin:0;padding:0;display:grid;gap:7px;align-content:center}
.tbk-ladder li{display:grid;grid-template-columns:minmax(58px,max-content) minmax(0,1fr) auto;align-items:center;gap:10px}
.tbk-ladder li > span:first-child{font:600 11.5px/1.3 var(--sans);color:var(--muted);white-space:nowrap}
.tbk-ladder em{font:600 11px var(--mono);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.tbk-dots{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.tbk-dots i{width:11px;height:11px;border:1.5px solid color-mix(in srgb,var(--ink) 30%,var(--line));border-radius:50%;background:var(--paper);transition:background var(--ease),border-color var(--ease)}
.tbk-dots i.is-done{background:var(--ink);border-color:var(--ink)}
.tbk-dots i.is-bye{width:7px;height:7px;border-style:dashed;background:none;opacity:.7}
.tbk-dots i.is-sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash)}

/* 입력: 참가자 목록 | 설정 */
.tbk-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:16px 22px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.tbk-names{display:flex;flex-direction:column;min-width:0}
.tbk-names textarea{flex:1 1 auto;width:100%;min-height:212px;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font:500 14.5px/1.55 var(--sans);color:var(--ink);outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
.tbk-names textarea:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.tbk-count{margin:7px 0 0;font:500 12.5px/1.45 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.tbk-count.is-error{color:var(--accent)}
.tbk-opt{display:flex;flex-direction:column;gap:14px;min-width:0}
.tbk-row{display:grid;gap:6px;min-width:0}
.tbk-row .v2-hint{margin:0;line-height:1.5}
.tbk-tin input{text-align:left}
.tbk-third{flex-wrap:wrap;row-gap:2px}
.tbk-third small{flex-basis:100%;padding-left:40px;line-height:1.4}
.tbk-acts{display:flex;flex-wrap:wrap;gap:8px}
.tbk-acts .v2-btn{white-space:nowrap}
.tbk-acts .v2-btn--primary{flex:1 1 auto;justify-content:center;min-width:112px}
.tbk-opt .v2-status{margin:-6px 0 0;min-height:1.2em;line-height:1.45}

/* 무대: 경기 기록판 + 대진판 */
.tbk-stage{position:relative;background:var(--card)}
.tbk-score{display:grid;gap:9px;padding:12px 18px 12px;border-bottom:1px solid var(--soft);background:var(--card);z-index:4}
.tbk-sc-head{display:flex;align-items:center;gap:10px;min-width:0}
.tbk-sc-label{flex:1 1 auto;min-width:0;font:700 13.5px/1.3 var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbk-sc-nav{display:flex;gap:6px;flex:0 0 auto}
.tbk-ico{width:32px;padding:0;justify-content:center}
.tbk-ico .i{transform:rotate(180deg)}
.tbk-fwd .i{transform:none}
.tbk-sc-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 10px 64px minmax(0,1fr);align-items:center;gap:8px}
.tbk-colon{font:700 18px var(--sans);font-style:normal;color:var(--muted);text-align:center}
.tbk-pt input{text-align:center;padding:0 4px}
.tbk-pick{display:flex;align-items:center;gap:8px;min-width:0;height:var(--v2-ctl);padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font:700 14.5px/1.2 var(--sans);color:var(--ink);text-align:left;transition:background var(--ease),color var(--ease),border-color var(--ease)}
.tbk-pick:hover:not(:disabled){background:var(--btn)}
.tbk-pick b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit}
.tbk-pick small{flex:0 0 auto;font:600 10.5px var(--mono);color:var(--muted)}
#tbkPB{flex-direction:row-reverse;text-align:right}
.tbk-pick[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.tbk-pick[aria-pressed="true"] small{color:inherit;opacity:.75}
.tbk-pick[aria-pressed="true"]::after{content:"";flex:0 0 auto;width:7px;height:12px;margin:-3px 2px 0;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.tbk-pick.is-lose b{opacity:.55}
.tbk-pick:disabled{opacity:.5;cursor:default}
.tbk-sc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.tbk-sc-foot .v2-btn{white-space:nowrap}
.tbk-sc-hint{flex:1 1 240px;min-width:0;margin:0;font:500 12.5px/1.45 var(--sans);color:var(--muted)}

.tbk-board{position:relative;overflow-x:auto;overflow-y:hidden;padding:12px 18px 18px;overscroll-behavior-x:contain}
.tbk-board.is-scroll{background:linear-gradient(to right,var(--card) 30%,transparent) left/24px 100% no-repeat local,linear-gradient(to left,var(--card) 30%,transparent) right/24px 100% no-repeat local,linear-gradient(to right,color-mix(in srgb,var(--ink) 12%,transparent),transparent) left/10px 100% no-repeat scroll,linear-gradient(to left,color-mix(in srgb,var(--ink) 12%,transparent),transparent) right/10px 100% no-repeat scroll}
.tbk-canvas{position:relative;margin:0 auto}
.tbk-lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.tbk-l{fill:none;stroke:color-mix(in srgb,var(--ink) 18%,var(--line));stroke-width:1.5;transition:stroke var(--ease)}
.tbk-l.is-on{stroke:color-mix(in srgb,var(--ink) 52%,var(--card))}
.tbk-l.is-champ{stroke:var(--ink);stroke-width:2.4}
.tbk-l.is-sel:not(.is-on){stroke:var(--accent);stroke-dasharray:3 3}
.tbk-l.is-trace{stroke:var(--ink);stroke-width:2.6}
.tbk-h{position:absolute;top:0;margin:0;font:600 11.5px/26px var(--sans);color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbk-tl{position:absolute;margin:0;font:600 11px/16px var(--sans);color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbk-m{position:absolute;display:grid;grid-template-rows:var(--rowH) var(--rowH);border:1px solid color-mix(in srgb,var(--ink) 16%,var(--line));border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease),box-shadow var(--ease)}
.tbk-m.is-done{border-color:color-mix(in srgb,var(--ink) 42%,var(--line))}
.tbk-m.is-bye{border-style:dashed;background:color-mix(in srgb,var(--paper) 60%,var(--card))}
.tbk-m.is-sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-wash);z-index:2}
.tbk-no{display:none;position:absolute;left:0;top:0;bottom:0;width:20px;place-items:center;border-right:1px solid var(--soft);font:500 10px var(--mono);font-style:normal;color:var(--muted)}
.tbk-m.has-no .tbk-no{display:grid}
.tbk-m.has-no .tbk-p{padding-left:27px}
.tbk-p{position:relative;display:flex;align-items:center;gap:5px;min-width:0;padding:0 8px;border:0;background:none;font:550 13px/1 var(--sans);color:var(--ink);text-align:left;cursor:pointer}
.tbk-p + .tbk-p{border-top:1px solid var(--soft)}
.tbk-p:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}
.tbk-p b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit}
.tbk-p small{flex:0 0 auto;font:600 10px var(--mono);color:var(--muted)}
.tbk-p em{flex:0 0 auto;font:600 12px var(--mono);font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums}
.tbk-p.is-win{font-weight:800}
.tbk-p.is-win em{color:var(--ink)}
.tbk-p.is-win::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:2px;background:var(--ink)}
.tbk-m.has-no .tbk-p.is-win::before{left:20px}
.tbk-p.is-lose b{color:var(--muted);font-weight:500}
.tbk-p.is-tbd b,.tbk-p.is-bye b{color:var(--muted);font-weight:400}
.tbk-p.is-tbd b{font-size:12px}
.tbk-p.is-bye b{font-style:italic}
.tbk-p.is-trace{background:var(--accent-wash)}
.tbk-champ{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:var(--muted)}
.tbk-champ svg{width:30px;height:30px;color:color-mix(in srgb,var(--ink) 25%,var(--line));transition:color var(--ease)}
.tbk-champ span{font:600 11px/1.3 var(--sans)}
.tbk-champ b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;font:800 14.5px/1.22 var(--sans);color:var(--muted);overflow:hidden;overflow-wrap:anywhere}
.tbk-champ:not(.is-on) b{font-size:12px;font-weight:550}
.tbk-champ.is-on svg,.tbk-champ.is-on b{color:var(--ink)}

/* 추첨·진출·우승 움직임(R45). 동작 줄이기면 모두 끔 */
@keyframes tbk-in{from{opacity:0;transform:translateY(7px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tbk-pop{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:none}}
@keyframes tbk-draw{to{stroke-dashoffset:0}}
@keyframes tbk-cup{0%{transform:translateY(8px) scale(.7)}60%{transform:translateY(-3px) scale(1.12)}100%{transform:none}}
.tbk-canvas.is-draw .tbk-r0 .tbk-p b,.tbk-canvas.is-draw .tbk-r0 .tbk-p small{animation:tbk-in .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.tbk-p.is-new b{animation:tbk-pop .42s cubic-bezier(.2,.8,.2,1) .18s both}
.tbk-l.is-new{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:tbk-draw .45s ease-out forwards}
.tbk-champ.is-new svg{animation:tbk-cup .7s cubic-bezier(.2,.8,.2,1) .25s both}
.tbk-champ.is-new b{animation:tbk-in .45s .4s both}
@media (prefers-reduced-motion:reduce){.tbk *,.tbk *::before,.tbk *::after{animation:none !important;transition:none !important}}

/* 내보내기 */
.tbk-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px 14px;border-top:1px solid var(--soft)}
.tbk-out .v2-status{flex:1 1 160px;min-width:0}

/* 전체 화면(API 없으면 고정 보기) */
.tbk-stage.is-fs{position:fixed;inset:0;z-index:1000}
.tbk-stage.is-full{display:flex;flex-direction:column;overflow:hidden;background:var(--card)}
.tbk-stage.is-full .tbk-score{position:relative;top:auto;flex:none}
.tbk-stage.is-full .tbk-board{flex:1 1 auto;min-height:0;display:flex;overflow:auto;background:none}
.tbk-stage.is-full .tbk-canvas{flex:none;margin:auto} /* 배율(zoom)은 tool.js fitFull */
@media (min-width:900px){ /* 전체 화면의 기록판은 한 줄: 경기 이름·이동 | 이름·점수 | 단추·안내 */
  .tbk-stage.is-full .tbk-score{grid-template-columns:minmax(0,1fr) minmax(380px,1.5fr) minmax(0,1fr);align-items:center;column-gap:18px;padding:10px 18px}
  .tbk-stage.is-full .tbk-sc-foot{justify-content:flex-end}
  .tbk-stage.is-full .tbk-sc-hint{order:2;flex-basis:100%;text-align:right;font-size:12px}
}
html.tbk-noscroll{overflow:hidden}

/* 넓은 화면: 기록판을 대진판 위에 붙여 둔다(64명 대진처럼 길 때) */
@media (min-width:761px){.tbk-score{position:sticky;top:calc(var(--hd-h,56px) + 6px)}}

@container tbk (max-width:620px){
  .tbk-sum{grid-template-columns:minmax(0,1fr);gap:12px}
  .tbk-in{grid-template-columns:minmax(0,1fr)}
  .tbk-names textarea{min-height:170px}
}
@container tbk (max-width:460px){
  .tbk-sum,.tbk-in,.tbk-score,.tbk-out{padding-left:12px;padding-right:12px}
  .tbk-board{padding:10px 12px 14px}
  .tbk-sc-row{grid-template-columns:minmax(0,1fr) 50px 8px 50px minmax(0,1fr);gap:5px}
  .tbk-pick{padding:0 8px;font-size:13.5px;gap:5px}
  .tbk-pick small{display:none}
  .tbk-big.is-champ b{font-size:30px}
  .tbk-sc-hint{flex-basis:100%}
  #tbkFull span{display:none}
}