/* ladder-game.css - 공개 도구 "사다리타기" 조각(WEB-INF/jsp/homepage/tool/ladderGame.jsp)의 스타일.
   2026.10.14 도구 개편 : P2 뽑기형 뼈대로 옮겼다(본보기 = roulette.css).

   뿌리 : <div class="nxt nxt-ladder-game nxt-normal nxt-light" …>
   걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → tool-p2.css(뽑기형 공통 : 색 토큰 · 무대 · [다시 만들기] 줄 · 켜고 끄는 단추 · 여러 줄 입력칸 · 색 점) → 이 파일
                 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다)

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 무대 카드 · 주 단추 · 행동 줄 · 칩 · 입력칸 · 안내 상자 · 표 · 토스트 · 안내 본문의 모양은
     tool-parts.css · tool-p2.css 가 정한다 - 여기 다시 적지 않는다.
     ① 판(이름표 줄 · 줄 · 표식 · 결과 칸 줄)   ② 결과 표   ③ 설정(입력 두 칸 · 개수 한 줄 · 안내 상자 · 소리 끄기)   ④ 저장 이미지
   [출처] docs/design/2026-10-14_tool_renewal_시안/renewal-p2.css ④-3. ⑤ · ⑥ 에 이 도구의 줄은 없다(줄 영역 높이 --nxt-ld-h 는 tool-p2.css ① 의 토큰이다).
   [시안에 더한 것] 줄을 감싸는 div.nxt-ld-track 과 HTML 표식(.nxt-ld-mark - 시안 노트 B 3.4 의 "표식은 svg 밖으로"), 열이 좁을 때 이름표를 위아래로 쌓는 규칙(@container),
     결과 칸의 닿은 사람 이름 줄임(.nxt-ld-end-name), 설정 패널 안내 상자의 바깥 여백, 저장 이미지 카드 안의 표 크기.
   [지운 것] 옛 규칙 전부 : .bg-sparkle · .spark, .container, .preset-row · .preset-label · .preset-chip, .field-row · .field · .field-hint · .setup-status · .field-error,
     .btn-main · .btn-sub, #playPhase · .play-toolbar, .ladder-board(어두운 받침) · .ladder-row-labels · .slot · .name-btn(.done) · .ladder-svg-wrap ·
     .vert-line · .rung-line · .trace-path · .trace-marker · .result-slot(.revealed) · .winner-badge(.show), .final-results · .final-list · .final-item · .fi-* · .final-actions,
     .burst-flash · .confetti-piece · .confetti-spark(색종이는 NxTool.confetti 가 그린다), 판 전용 토큰 --nxt-lg-*, !important 두 줄.
   [색] 화면 부품은 --nxt-* 토큰만 쓴다. 이 파일에 16진수 색은 없다.
     참가자 색 = 고르는 색 1~10(tool-p2.css 의 --nxt-pick-1~10). 스크립트는 색 값을 넣지 않는다 - 이름표 · 결과 칸 · 표의 줄 · 경로 · 표식에 data-pick="1~10" 만 달고
     여기 규칙이 var(--nxt-pick) 로 칠한다(인라인 색 없음).
   [명도 대비 - 시안 노트 B 1.1 · 1.3 표] 받침은 옅은 파랑 #EAF1FE.
     세로줄 · 가로줄 #475569 6.68(받침 위 비텍스트) · 지나간 경로 = 참가자 색 4.34(5번 황금) ~ 6.97(8번 남색) ·
     내려간 이름표의 흰 글자 / 참가자 색 4.92 ~ 7.90 · 닫힌 결과 칸의 점선 #64748B 4.76(흰 칸 위) · 닫힌 칸의 "?" #475569 / 흰 칸 7.58 ·
     열린 결과 칸의 테두리 = 참가자 색 4.92 이상(흰 칸 위) · 표식 = 참가자 색 원 + 2px 흰 테
   [JS 가 넣는 인라인 - ladder-game.js] 색은 없다. 판의 열 수 --nxt-ld-n(#ldBoard), 표식의 자리 left · top(%), 사라지는 경로 · 표식의 opacity · transition 뿐이다.
   [규칙] 전부 .nxt-light.nxt-ladder-game 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 글꼴 굵기는 400 · 700 만. */

/* ============ ① 판 ============ */
/* 이름표 줄 → 줄(svg) → 결과 칸 줄. 세 줄이 같은 열 폭을 쓴다(--nxt-ld-n = 참가자 수 - 스크립트가 #ldBoard 에 넣는다)
   <div class="nxt-stage-area">
     <p class="nxt-stage-wait" hidden>판이 여기에 나옵니다</p>            만들 수 있는 판이 없을 때만(참가자가 2명 미만 · 10명 초과인 값으로 열렸을 때)
     <div class="nxt-ld-scroll">                                          참가자가 많아 열이 48px 보다 좁아지면 이 안에서만 가로로 굴린다
       <div class="nxt-ld-board" style="--nxt-ld-n:4">
         <ul class="nxt-ld-names">
           <li data-pick="1"><button type="button" class="nxt-ld-name"><i class="nxt-pick-dot" aria-hidden="true"></i><span class="nxt-ld-name-text">나</span><span class="sr-only"> 내려가기</span></button></li>
           <li data-pick="2"><button type="button" class="nxt-ld-name" data-done="true"><i class="bi bi-check-lg" aria-hidden="true"></i><span class="nxt-ld-name-text">철수</span><span class="sr-only"> - 결과: 아이스크림. 다시 보기</span></button></li></ul>
         <div class="nxt-ld-track">
           <svg class="nxt-ld-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true" focusable="false">
             <path class="nxt-ld-v" d="…"/><path class="nxt-ld-h" d="…"/><path class="nxt-ld-path" data-pick="3" d="…"/></svg>
           <span class="nxt-ld-mark" data-pick="3" aria-hidden="true"></span></div>                                내려가는 표식(이름을 눌러 내려갈 때만)
         <ol class="nxt-ld-ends">
           <li><div class="nxt-ld-end"><span class="nxt-ld-q" aria-hidden="true">?</span><span class="sr-only">1번 칸, 아직 열지 않음</span></div></li>
           <li data-pick="1"><div class="nxt-ld-end" data-open="true"><strong>꽝</strong><span><i class="nxt-pick-dot" aria-hidden="true"></i><span class="nxt-ld-end-name">나</span></span></div></li></ol>
       </div></div></div>
   이름표 : 누르기 전 = 흰 바탕 + 색 점 / 내려간 뒤 = 참가자 색으로 채움 + 흰 글자 + 체크. 내려간 이름을 다시 누르면 경로를 다시 보여 준다.
   줄 : 세로줄 · 가로줄 3px, 지나간 경로 6px 참가자 색(끝 둥글게). 경로는 다 그린 뒤 사라진다. */
.nxt-light.nxt-ladder-game .nxt-ld-scroll{width:100%;min-width:0;overflow-x:auto}
.nxt-light.nxt-ladder-game .nxt-ld-board{display:grid;gap:6px;min-width:calc(var(--nxt-ld-n,4)*48px)}
.nxt-light.nxt-ladder-game .nxt-ld-names,
.nxt-light.nxt-ladder-game .nxt-ld-ends{display:grid;grid-template-columns:repeat(var(--nxt-ld-n,4),minmax(0,1fr));margin:0;padding:0;list-style:none}
.nxt-light.nxt-ladder-game .nxt-ld-names>li,
.nxt-light.nxt-ladder-game .nxt-ld-ends>li{min-width:0;padding:0 3px}
.nxt-light.nxt-ladder-game .nxt-ld-name{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin:0;padding:4px 6px;border:1px solid var(--nxt-field-line);border-radius:var(--nxt-r);background:var(--nxt-panel);
	color:var(--nxt-text);font:inherit;font-size:14px;font-weight:700;line-height:1.25;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}
.nxt-light.nxt-ladder-game .nxt-ld-name:hover{border-color:var(--nxt-pick);box-shadow:inset 0 0 0 1px var(--nxt-pick)}
/* 판 안이 가로로 굴러갈 수 있어 포커스 링은 안쪽에 그린다(바깥에 그리면 굴리는 상자에 잘린다) */
.nxt-light.nxt-ladder-game .nxt-ld-name:focus-visible{outline-offset:-3px}
.nxt-light.nxt-ladder-game .nxt-ld-name>.bi{flex:none;font-size:14px;line-height:1}
.nxt-light.nxt-ladder-game .nxt-ld-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxt-light.nxt-ladder-game .nxt-ld-name[data-done="true"]{border-color:var(--nxt-pick);background:var(--nxt-pick);color:var(--nxt-on-pick)}
/* 줄 : 0~100 좌표를 칸 크기로 늘려 쓴다(preserveAspectRatio="none"). 선 굵기는 vector-effect 로 지킨다.
   표식은 svg 밖의 HTML 요소다 - 늘린 svg 안의 원은 찌그러진다(시안 노트 B 3.4). 자리는 스크립트가 %로 준다 */
.nxt-light.nxt-ladder-game .nxt-ld-track{position:relative;min-width:0}
.nxt-light.nxt-ladder-game .nxt-ld-lines{display:block;width:100%;height:var(--nxt-ld-h);max-width:none;overflow:visible}
.nxt-light.nxt-ladder-game .nxt-ld-v,
.nxt-light.nxt-ladder-game .nxt-ld-h{fill:none;stroke:var(--nxt-stage-ink);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.nxt-light.nxt-ladder-game .nxt-ld-path{fill:none;stroke:var(--nxt-pick,var(--nxt-stage-ink));stroke-width:6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* 표식 : 지름 14px 참가자 색 원 + 2px 흰 테 */
.nxt-light.nxt-ladder-game .nxt-ld-mark{position:absolute;top:0;left:0;z-index:1;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--nxt-pick,var(--nxt-stage-ink));box-shadow:0 0 0 2px var(--nxt-panel);pointer-events:none}
.nxt-light.nxt-ladder-game .nxt-ld-end{display:grid;align-content:center;justify-items:center;gap:1px;min-height:48px;padding:4px;border:1px dashed var(--nxt-stage-line);border-radius:var(--nxt-r);background:var(--nxt-panel);
	font-size:13px;line-height:1.3;text-align:center;color:var(--nxt-text-3)}
.nxt-light.nxt-ladder-game .nxt-ld-end[data-open="true"]{border:2px solid var(--nxt-pick);padding:3px;color:var(--nxt-text-2)}
.nxt-light.nxt-ladder-game .nxt-ld-end>strong{max-width:100%;overflow:hidden;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap;color:var(--nxt-text)}
.nxt-light.nxt-ladder-game .nxt-ld-end>span{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%}
/* 닿은 사람의 이름 : 칸보다 길면 줄인다(온전한 이름은 이름표의 title 과 아래 표에 있다) */
.nxt-light.nxt-ladder-game .nxt-ld-end-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nxt-light.nxt-ladder-game .nxt-ld-end .nxt-pick-dot{width:8px;height:8px}
.nxt-light.nxt-ladder-game .nxt-ld-q{font-size:18px;font-weight:700;line-height:1;color:var(--nxt-text-3)}
/* 열이 좁을 때(칸 안쪽 88px 이하 - 1400px 화면의 6명부터, 375px 화면의 4명부터) : 이름표를 색 점 위 · 이름 아래로 쌓아 이름이 칸 폭을 다 쓰게 한다.
   옆으로 놓으면 색 점이 18px 를 먹어 세 글자 이름이 "홍길…"로 잘린다. 결과 칸의 닿은 사람 줄은 색 점을 뺀다(칸의 테두리가 그 사람 색이다).
   칸 폭을 보고 바꾸려고 li 를 컨테이너로 둔다(@container 를 모르는 브라우저에서는 옆으로 놓은 채다 - 깨지지 않고 이름만 더 줄어든다) */
.nxt-light.nxt-ladder-game .nxt-ld-names>li,
.nxt-light.nxt-ladder-game .nxt-ld-ends>li{container-type:inline-size}
@container (max-width:88px){
	.nxt-light.nxt-ladder-game .nxt-ld-name{flex-direction:column;gap:2px;padding:3px 1px;font-size:13px}
	.nxt-light.nxt-ladder-game .nxt-ld-name-text{max-width:100%}
	.nxt-light.nxt-ladder-game .nxt-ld-end{padding:4px 2px}
	.nxt-light.nxt-ladder-game .nxt-ld-end[data-open="true"]{padding:3px 1px}
	.nxt-light.nxt-ladder-game .nxt-ld-end>span>.nxt-pick-dot{display:none}
}

/* ============ ② 결과 표 ============ */
/* 판 아래에 늘 있다. 아직 안 내려간 사람은 "?". 긴 결과 글은 줄을 바꿔 전부 보인다
   <div class="nxt-table-wrap"><table class="nxt-table nxt-ld-table"><caption class="sr-only">참가자별 결과</caption>
     <thead><tr><th scope="col">참가자</th><th scope="col">결과</th></tr></thead>
     <tbody><tr data-pick="1"><th scope="row"><i class="nxt-pick-dot" aria-hidden="true"></i>나</th><td>꽝</td></tr>
            <tr data-pick="2"><th scope="row">…철수</th><td><span class="nxt-ld-q" aria-hidden="true">?</span><span class="sr-only">아직 열지 않음</span></td></tr></tbody></table></div>
   (tool-parts.css 의 .nxt-table 은 숫자 표라 오른쪽 정렬 · 한 줄이다 - 글 표로 덮는다. 클래스 둘) */
.nxt-light.nxt-ladder-game .nxt-ld-table th,
.nxt-light.nxt-ladder-game .nxt-ld-table td{text-align:left;white-space:normal}
.nxt-light.nxt-ladder-game .nxt-ld-table tbody th{width:40%}
.nxt-light.nxt-ladder-game .nxt-ld-table tbody th>.nxt-pick-dot{margin-right:8px}
.nxt-light.nxt-ladder-game .nxt-ld-table td{font-weight:700;color:var(--nxt-text)}

/* ============ ③ 설정 ============ */
/* 참가자 · 결과 두 칸 + 개수 한 줄
   <div class="nxt-ld-fields"><div class="nxt-field">…참가자…</div><div class="nxt-field">…결과…</div></div>
   <p class="nxt-ld-count" aria-live="polite"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>참가자 4명 · 결과 4개</span></p>
   <div class="nxt-note nxt-note-info" role="note" hidden><i class="bi bi-info-circle-fill" aria-hidden="true"></i><p>참가자 5명 · 결과 4개입니다. 모자란 1칸은 다시 만들 때 '꽝'으로 채웁니다.</p></div>
   개수가 같으면 위의 한 줄, 다르면 아래 안내 상자(둘 중 하나만 보인다) */
.nxt-light.nxt-ladder-game .nxt-ld-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.nxt-light.nxt-ladder-game .nxt-ld-fields>.nxt-field{margin-bottom:8px}
.nxt-light.nxt-ladder-game .nxt-ld-count{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:14px;font-weight:700;line-height:1.5;color:var(--nxt-text-2)}
.nxt-light.nxt-ladder-game .nxt-ld-count>.bi{flex:none;color:var(--nxt-ok)}
/* 설정 패널의 안내 상자 둘(받은 참가자가 10명을 넘음 · 개수가 다름) : tool-parts.css 의 .nxt-note 는 바깥 여백이 없다(결과 영역의 gap 이 띄운다) - 여기서는 직접 띄운다.
   공통 후보 : 옆 패널(.nxt-side) 안에 놓는 안내 상자의 아래 여백(tool-p2.css 에 .nxt-side .nxt-note{margin:0 0 12px} 로 올릴 만하다) */
.nxt-light.nxt-ladder-game .nxt-side .nxt-note{margin:0 0 12px}
.nxt-light.nxt-ladder-game .nxt-side .nxt-ld-fields~.nxt-note{margin:0 0 4px}
/* 소리 끄기 : 패널의 마지막 줄. 위에 선을 긋는다 */
.nxt-light.nxt-ladder-game .nxt-side .nxt-toggles{margin:16px 0 0;padding-top:4px;border-top:1px solid var(--nxt-line)}

/* ============ ④ 저장 이미지 ============ */
/* NxTool.renderCard 의 카드(.nxt-shot, 720px) 안에 열린 줄만 담은 결과 표를 넣는다. 카드가 화면의 표보다 넓어 글자 · 여백 · 색 점을 키운다.
   공통 후보 : 저장 카드 안의 표 크기(tool-parts.css ③ 의 .nxt-shot 묶음에 .nxt-shot .nxt-table 의 글자 18px · 칸 여백 14px 18px 로 올릴 만하다 - N빵 · 로또도 표 · 목록을 넣는다) */
.nxt-light.nxt-ladder-game .nxt-shot .nxt-table{font-size:18px}
.nxt-light.nxt-ladder-game .nxt-shot .nxt-table th,
.nxt-light.nxt-ladder-game .nxt-shot .nxt-table td{padding:14px 18px}
.nxt-light.nxt-ladder-game .nxt-shot .nxt-ld-table tbody th>.nxt-pick-dot{width:14px;height:14px;margin-right:10px}