/* 사다리타기: 이름 칸, 사다리(SVG), 결과 칸이 같은 열 너비를 쓴다 */
.ladder-names, .ladder-outs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 4px; }
.ladder-names button, .ladder-outs span {
  min-height: 36px;
  padding: 6px 2px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ladder-names button { border: 1.5px solid var(--c); background: var(--surface); color: var(--c); cursor: pointer; }
.ladder-names button:hover, .ladder-names button.done { background: var(--c); color: #fff; }
.ladder-outs span { border: 1.5px dashed var(--line); color: var(--muted); }
.ladder-outs span.done { border: 1.5px solid var(--c); color: var(--c); background: var(--surface); }
#ladder { display: block; width: 100%; height: 300px; margin: 6px 0; }
#ladder line { stroke: #c4cad3; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
#ladder polyline { fill: none; stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ladder-tip { text-align: center; margin: 0 0 10px; }
.ladder-summary { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ladder-summary li { font-size: 14px; padding: 6px 10px; border-left: 4px solid var(--c); background: var(--surface-2); border-radius: 6px; }
.ladder-summary li:empty { display: none; }
@media (min-width: 560px) { #ladder { height: 360px; } }