/* 사다리 타기 전용 */
#ld-out .bar .btn { width: auto; }
.ld-tip { margin-bottom: 10px; font-size: 14px; color: var(--ink-3); }
.ld-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.ld-board { min-width: calc(var(--n, 4) * 64px); padding: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ld-heads, .ld-goals { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.ld-heads button { justify-self: center; max-width: calc(100% - 8px); min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--fill); font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; overflow-wrap: anywhere; }
.ld-heads button:hover, .ld-heads button:focus-visible { border-color: var(--c, var(--blue)); outline: 0; }
.ld-heads button.run, .ld-heads button.done { border-color: var(--c, var(--blue)); background: #fff; color: var(--c, var(--blue)); }
.ld-svgbox { height: 300px; margin: 8px 0; }
.ld-svgbox svg { display: block; width: 100%; height: 100%; }
.ld-v, .ld-h { stroke: #b8c3cf; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ld-path { fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ld-goals span { justify-self: center; max-width: calc(100% - 8px); min-height: 40px; display: grid; place-items: center; padding: 6px 8px; border-radius: 8px; background: var(--blue-bg); font-size: 14px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.ld-goals span.shut { min-width: 40px; color: var(--ink-3); }
.ld-goals span.hit { background: #fff; border: 1px solid var(--c, var(--blue)); color: var(--c, var(--blue)); font-weight: 700; }
@media (max-width: 720px) {
	.ld-board { min-width: calc(var(--n, 4) * 54px); }
	.ld-svgbox { height: 260px; }
	.ld-heads button, .ld-goals span { padding: 6px; font-size: 13px; }
}