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

   뿌리 : <div class="nxt nxt-lotto nxt-wide nxt-light" …>
   걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → tool-p2.css(뽑기형 공통 : 공 색 토큰 · 무대 · 무대 안 설정 · 공) → 이 파일
                 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다)

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 무대 카드 · 주 단추 · 상태 안내 · 행동 줄 · 더하기 빼기 · 접이식 · 기록 목록의 틀 · 불러오는 중 · 표 · 토스트 · 안내 본문 · 공(.nxt-ball)의 모양은
     tool-parts.css · tool-p2.css 가 정한다 - 여기 다시 적지 않는다.
     ① 추첨기  ② 뽑은 번호  ③ 추첨 설정(제외번호 격자)  ④ 추첨 기록  ⑤ 이번주 · 지난주 카드  ⑥ 등수표  ⑦ 저장 이미지 카드 안  ⑧ 좁은 화면 · 움직임
   [출처] docs/design/2026-10-14_tool_renewal_시안/renewal-p2.css ④-2 · ⑤ 의 로또 줄, 색 · 치수는 design-notes-p2.md(시안 노트 B) 1.2 · 2절.
   [시안과 다른 곳] 추첨기 : 시안은 svg 한 장이다. 실제는 받침 · 관 · 등 · 통풍구만 svg(같은 좌표 240 × 270)이고, 구는 div(안에 캔버스 + 유리 빛),
     뽑힌 공은 span.nxt-ball 이다 - 구 안의 공을 캔버스가 그리고, 구만 떨리고, 뽑힌 공이 관으로 올라와야 해서다. 색 · 치수 · 겹치는 차례는 시안과 같다.
   [지운 것] 옛 규칙 전부 : .nxt-cols-stage, 어두운 받침(.nxt-stage-area 의 --nxt-inverse), .lotto-machine · .lm-*(반투명 흰 테두리 · 유리 반사) · .rolling-ball · .sparkle,
     .balls-container(:empty 안내) · .game-row · .game-label · .game-balls · .ball-wrapper · .ball(.show · .sorting) · .color-*(그라데이션 5 + 노랑 · 초록의 짙은 숫자 예외),
     .controls · .btn-draw · .btn-reset · .final-actions(.show) · .btn-action · .dh-link*, .draw-settings · .exclude-panel · .exclude-grid · .excl-num(.excluded) · .excl-count · .exclude-hint ·
     .game-count-row · .stepper-btn · .game-count-value, .history-*(.is-match · .is-bonus-match 의 고리와 체크 · "B" 딱지, .hit), .c-*(카드 · 표 · 남은 시간), .sr-only(공통이 한다).
   [색] 화면 부품은 --nxt-* 토큰만 쓴다. 이 파일의 16진수는 ① 의 "공 가장자리 색" 다섯 줄뿐이다(시안 노트 B 1.2 표의 "어두운 쪽" - 관으로 올라온 공에만 쓴다).
   [JS 가 그리는 색 - lotto.js 의 LottoMixer] 캔버스는 CSS 변수를 못 읽어 같은 값을 스크립트에도 적는다 :
     - 구 안의 공 = 공 색 5(tool-p2.css 의 --nxt-ball-1~5) + 가장자리만 "어두운 쪽", 공 위 흰 점은 20%(꾸밈).
     - 바람 기둥 = #BFD3FA(--nxt-tint-line 과 같은 값, 꾸밈).
     인라인 style 로 넣는 색은 없다 - 공의 색은 전부 data-band(1~5)로 준다.
   [명도 대비 - 시안 노트 B 1.2 · 1.3 의 값] 공 색 5 위의 흰 숫자 : 4.92(1~10 황금) · 6.18 · 6.47 · 4.76(31~40 회색) · 5.02 / 받침(#EAF1FE) 위의 공 색(비텍스트) : 가장 낮은 것 4.19.
     추첨기 윤곽선 #64748B : 흰 4.76 · 받침 위 4.19 / 켜진 등 #1A56DB : 받침 회색(#E2E8F0) 위 5.0 / 뺀 번호 : 흰 글자 / #334155 10.4 / 일치 테 #0F172A 17.9 / 남은 시간 숫자 #1A56DB / #EAF1FE 5.45
   [규칙] 전부 .nxt-light.nxt-lotto 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 글꼴 굵기는 400 · 700 만. 글자 최소 13px. */

/* ============ ① 추첨기 ============ */
/* <div class="nxt-stage-area">
     <div class="nxt-lt-machine" role="img" aria-label="추첨기" data-run="true">            data-run = 도는 중(등이 켜지고 구가 떨린다)
       <svg class="nxt-lt-body" viewBox="0 0 240 270" aria-hidden="true"> 받침 rect.nxt-lt-part · 관 rect.nxt-lt-part.nxt-lt-tube · 등 circle.nxt-lt-lamp · 통풍구 path.nxt-lt-vent </svg>
       <div class="nxt-lt-sphere"> <canvas class="nxt-lt-mix"></canvas> <svg class="nxt-lt-gloss" …><path class="nxt-lt-shine" …/></svg> </div>
       <span class="nxt-ball nxt-lt-out" data-band="5" data-out="true">44</span>                 뽑힌 공(관으로 올라온다)
     </div></div>
   높이 = --nxt-lt-h (tool-p2.css ① : PC 172~260px 를 화면 높이를 따라, 900px 이하 180px). 폭 = 높이 × 240 / 270. 안쪽 자리는 전부 시안 좌표(240 × 270)의 비율이다.
   겹치는 차례(아래 → 위) : 받침 · 관(svg) → 구(흰 유리 + 캔버스 + 유리 빛) → 뽑힌 공. */
.nxt-light.nxt-lotto .nxt-lt-machine{position:relative;flex:none;height:var(--nxt-lt-h);aspect-ratio:240/270;max-width:100%}
.nxt-light.nxt-lotto .nxt-lt-body{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.nxt-light.nxt-lotto .nxt-lt-part{fill:var(--nxt-line);stroke:var(--nxt-stage-line);stroke-width:3;stroke-linejoin:round}
.nxt-light.nxt-lotto .nxt-lt-tube{fill:var(--nxt-panel)}
.nxt-light.nxt-lotto .nxt-lt-vent{fill:none;stroke:var(--nxt-stage-line);stroke-width:3;stroke-linecap:round}
.nxt-light.nxt-lotto .nxt-lt-lamp{fill:var(--nxt-panel);stroke:var(--nxt-stage-line);stroke-width:3;transition:fill .2s ease}
.nxt-light.nxt-lotto .nxt-lt-machine[data-run="true"] .nxt-lt-lamp{fill:var(--nxt-primary)}
/* 구 : 시안의 원(가운데 120 · 124, 반지름 92, 3 굵기 선)과 같은 자리. 선의 바깥 끝(반지름 93.5)까지가 이 상자다 - 테두리는 높이의 1/90(= 270 중 3) */
.nxt-light.nxt-lotto .nxt-lt-sphere{position:absolute;top:11.2963%;left:11.0417%;width:77.9167%;aspect-ratio:1/1;border:calc(var(--nxt-lt-h)/90) solid var(--nxt-stage-line);border-radius:50%;background:var(--nxt-panel);overflow:hidden}
.nxt-light.nxt-lotto .nxt-lt-mix{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;border-radius:50%}
.nxt-light.nxt-lotto .nxt-lt-gloss{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none}
.nxt-light.nxt-lotto .nxt-lt-shine{fill:none;stroke:var(--nxt-tint-line);stroke-width:6;stroke-linecap:round}
.nxt-light.nxt-lotto .nxt-lt-machine[data-run="true"] .nxt-lt-sphere{animation:nxt-lotto-shake .28s linear infinite}
@keyframes nxt-lotto-shake{
	0%,100%{transform:translate(0,0)}
	25%{transform:translate(.7px,-.6px)}
	50%{transform:translate(-.6px,.5px)}
	75%{transform:translate(.4px,.7px)}
}
/* 뽑힌 공 : 시안의 원(가운데 120 · 26, 반지름 17). 평소에는 구 쪽에 숨어 있다가 data-out="true" 가 되면 관으로 솟는다.
   가운데는 번호대 색 그대로, 가장자리만 어두운 쪽(시안 노트 B 1.2 의 식). 숫자는 다섯 색 모두 흰색, 그림자 없음 */
.nxt-light.nxt-lotto .nxt-lt-out{position:absolute;top:3.3333%;left:50%;width:14.1667%;height:auto;aspect-ratio:1/1;
	background:radial-gradient(circle at 35% 30%,var(--nxt-ball,var(--nxt-text-3)) 0 55%,var(--nxt-ball-dk,var(--nxt-ball,var(--nxt-text-3))) 100%);
	font-size:max(13px,calc(var(--nxt-lt-h)*.055));
	opacity:0;transform:translate(-50%,60%) scale(.7);transition:opacity .15s ease,transform .15s ease}
.nxt-light.nxt-lotto .nxt-lt-out[data-out="true"]{opacity:1;transform:translate(-50%,0) scale(1);transition:opacity .12s ease,transform .5s cubic-bezier(.22,1.2,.36,1)}
/* 공 가장자리 색("어두운 쪽") : 번호대 1~5 */
.nxt-light.nxt-lotto .nxt-lt-out[data-band="1"]{--nxt-ball-dk:#854D0E}
.nxt-light.nxt-lotto .nxt-lt-out[data-band="2"]{--nxt-ball-dk:#1445B0}
.nxt-light.nxt-lotto .nxt-lt-out[data-band="3"]{--nxt-ball-dk:#991B1B}
.nxt-light.nxt-lotto .nxt-lt-out[data-band="4"]{--nxt-ball-dk:#475569}
.nxt-light.nxt-lotto .nxt-lt-out[data-band="5"]{--nxt-ball-dk:#166534}

/* ============ ② 뽑은 번호 (게임마다 한 줄) ============ */
/* <div class="nxt-lt-result">
     <p class="nxt-stage-wait">뽑은 번호가 여기에 나옵니다</p>                      추첨 전(줄이 생기면 hidden)
     <ol class="nxt-lt-games" aria-label="추첨한 번호">
       <li><span class="nxt-lt-tag">A<span class="sr-only">게임</span></span><span class="nxt-lt-balls"><span class="nxt-ball" data-band="1">3</span> ×6</span></li>
     </ol></div>
   추첨을 시작하면 게임 수만큼 줄과 빈 자리 6개(data-empty="true")를 먼저 깔고 하나씩 채운다 - 추첨하는 동안 높이가 바뀌지 않는다.
   다시 놓기 : data-flip="out"(뒤집히며 사라짐) → 번호를 작은 수부터 바꿔 넣고 data-flip="wait"(나올 자리에서 대기) → 속성을 떼면 차례로 나타난다.
   낭독기 알림은 따로 둔다 : <p class="sr-only" aria-live="polite" aria-atomic="true">  (공 하나마다 · 끝났을 때 한 문장) */
.nxt-light.nxt-lotto .nxt-lt-result{display:grid;justify-items:center;align-content:center;gap:8px;min-width:0;min-height:40px}
.nxt-light.nxt-lotto .nxt-lt-games{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nxt-light.nxt-lotto .nxt-lt-games>li{display:flex;align-items:center;gap:10px}
.nxt-light.nxt-lotto .nxt-lt-tag{flex:none;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--nxt-line-dk);border-radius:6px;background:var(--nxt-soft);font-size:13px;font-weight:700;line-height:1;color:var(--nxt-text-2)}
.nxt-light.nxt-lotto .nxt-lt-balls{display:flex;gap:8px}
.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball{transition:opacity .6s cubic-bezier(.34,1.56,.64,1),transform .6s cubic-bezier(.34,1.56,.64,1)}
.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball[data-flip="wait"]{opacity:0;transform:translateY(30px) scale(.8) rotate(-45deg);transition:none}
.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball[data-flip="out"]{opacity:0;transform:translateY(-20px) scale(.8) rotateY(90deg);transition:opacity .3s ease-in,transform .3s ease-in}

/* ============ ③ 추첨 설정 : 제외번호 격자 ============ */
/* 무대 카드 안 묶음(.nxt-stage-set) · 더하기 빼기(.nxt-stepper-row) · 접이식(.nxt-more)의 틀은 공통이다. 여기는 격자뿐이다.
   <div class="nxt-lt-nums" role="group" aria-label="이번 추첨에서 뺄 번호"><button type="button" class="nxt-lt-num" aria-pressed="false">1</button> … 45</div>
   칸 40px + 사이 4px(촘촘한 격자 예외 - 인수 조건 42). 누른 번호 = 뺀 번호 : 진한 바탕 + 흰 글자 + 가운데 줄(색 하나에 기대지 않는다).
   6개가 남으면 더 누를 수 없다(나머지 칸에 aria-disabled="true" + 누르면 토스트). 추첨하는 동안에는 칸 전부가 disabled 다 */
.nxt-light.nxt-lotto .nxt-lt-nums{display:grid;grid-template-columns:repeat(auto-fill,40px);justify-content:center;gap:4px;margin:0 0 10px}
.nxt-light.nxt-lotto .nxt-lt-num{width:40px;height:40px;margin:0;padding:0;border:1px solid var(--nxt-field-line);border-radius:50%;background:var(--nxt-panel);
	color:var(--nxt-text);font:inherit;font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;cursor:pointer}
.nxt-light.nxt-lotto .nxt-lt-num:hover{border-color:var(--nxt-primary);background:var(--nxt-tint)}
.nxt-light.nxt-lotto .nxt-lt-num[aria-pressed="true"]{border-color:var(--nxt-text-2);background:var(--nxt-text-2);color:var(--nxt-on-pick);text-decoration:line-through}
.nxt-light.nxt-lotto .nxt-lt-num[aria-disabled="true"],
.nxt-light.nxt-lotto .nxt-lt-num[disabled]{opacity:.45;cursor:not-allowed}
.nxt-light.nxt-lotto .nxt-lt-num:focus-visible{outline-offset:1px}
.nxt-light.nxt-lotto .nxt-stage-set .nxt-hint{margin:0 0 12px}
@media (min-width:1200px),(min-width:601px) and (max-width:900px){
	.nxt-light.nxt-lotto .nxt-lt-nums{grid-template-columns:repeat(9,40px)}      /* 9칸 × 5줄 */
}
/* 추첨하는 동안 접이식 머리를 disabled 로 잠근다. 못 누름 모양은 tool-parts.css ③-2 의 .nxt-more-head[disabled] 다(2026.10.15 공용으로 올림) */

/* ============ ④ 추첨 기록 ============ */
/* tool-parts.css 의 .nxt-history 에 줄 모양만 바꾼다(한 기록 = 머리 한 줄 + 게임 줄들). 줄은 lotto.js 가 만든다
   <ul class="nxt-history-list nxt-lt-list" tabindex="0" aria-label="추첨 기록 목록">        (안에서 굴러가므로 tabindex 를 준다. role 은 바꾸지 않는다 - 목록이다)
     <li class="nxt-history-item nxt-lt-rec">
       <div class="nxt-lt-rec-head"><span class="nxt-history-name">10.14 (수) 14:32 · 3게임</span>
         <button type="button" class="nxt-icon-btn" aria-label="10월 14일 14시 32분 기록 삭제"><i class="bi bi-x-lg" aria-hidden="true"></i></button></div>
       <ul class="nxt-lt-rec-games"><li><span class="nxt-lt-tag">A<span class="sr-only">게임</span></span>
         <span class="nxt-lt-balls"><span class="nxt-ball nxt-ball-sm" data-band="1" data-match="true">3<span class="sr-only"> 일치</span></span> ×6</span>
         <span class="nxt-badge" data-hit="true"><i class="bi bi-trophy" aria-hidden="true"></i>지난주 5등 · 3개 일치</span></li></ul></li></ul>
   지난주 당첨번호와 같은 번호 = data-match="true"(굵은 테) / 보너스 번호와 같음 = data-match="bonus"(점선 테) + 숨은 글. 테 모양은 tool-p2.css 의 .nxt-ball.
   배지 : 등수가 있으면 data-hit="true"(옅은 파랑 + 트로피 + "N등"), 없으면 "지난주 N개 일치", 당첨번호를 아직 못 받았으면 "지난주 대조 대기".
   목록은 340px 까지만 늘고 그 안에서 굴린다(이번주 · 지난주 카드가 늘 가까이 있게). 30건까지. */
.nxt-light.nxt-lotto .nxt-lt-list{max-height:340px;overflow-y:auto}
.nxt-light.nxt-lotto .nxt-lt-rec{display:block;min-height:0;padding:0 4px 12px 14px}       /* .nxt-history-item 의 가로 줄을 푼다 */
.nxt-light.nxt-lotto .nxt-lt-rec-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.nxt-light.nxt-lotto .nxt-lt-rec-head .nxt-icon-btn:focus-visible{outline-offset:-3px}
.nxt-light.nxt-lotto .nxt-lt-rec-games{display:grid;gap:8px;margin:0;padding:0 10px 0 0;list-style:none}
.nxt-light.nxt-lotto .nxt-lt-rec-games>li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.nxt-light.nxt-lotto .nxt-lt-rec-games .nxt-lt-balls{gap:6px}
.nxt-light.nxt-lotto .nxt-lt-rec-games .nxt-badge{min-height:26px;margin-left:auto;padding:2px 10px;border-color:var(--nxt-line-dk);font-size:13px;font-weight:400;color:var(--nxt-text-2)}
.nxt-light.nxt-lotto .nxt-lt-rec-games .nxt-badge[data-hit="true"]{border-color:var(--nxt-primary);background:var(--nxt-tint);font-weight:700;color:var(--nxt-primary-dk)}
.nxt-light.nxt-lotto .nxt-lt-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--nxt-text-3)}
.nxt-light.nxt-lotto .nxt-lt-legend>span{display:inline-flex;align-items:center;gap:8px}
.nxt-light.nxt-lotto .nxt-lt-legend .nxt-ball{--nxt-ball-size:14px}

/* ============ ⑤ 이번주 · 지난주 카드 ============ */
/* 늘 둘 다 보인다(탭으로 묶지 않는다)
   이번주(추첨 전) : <p class="nxt-lt-round">제1246회 · 2026.10.17 (토) 20:00 추첨 예정</p>
                     <div class="nxt-lt-count" role="timer" aria-label="…"><div class="nxt-lt-unit"><strong>3</strong><span>일</span></div> ×4</div>
                     <dl class="nxt-stats"><div class="nxt-stat nxt-stat-wide"><dt>1등 예상 총 당첨금</dt><dd>…</dd></div></dl><p class="nxt-basis">…</p>
   당첨번호 한 줄   : <p class="nxt-lt-win"><span class="nxt-ball nxt-ball-md" data-band="1">3</span> … <span class="nxt-lt-plus" aria-hidden="true">+</span>
                     <span class="nxt-ball nxt-ball-md" data-band="2">17<span class="sr-only"> (보너스)</span></span></p>
   불러오는 중 · 실패 = tool-parts.css 의 .nxt-state. 옆 칸의 카드라 최소 높이만 줄인다(공통은 200px) */
.nxt-light.nxt-lotto .nxt-state{min-height:144px;padding:16px}
.nxt-light.nxt-lotto .nxt-lt-round{margin:0 0 12px;font-size:15px;font-weight:700;line-height:1.5;color:var(--nxt-text)}
.nxt-light.nxt-lotto .nxt-lt-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
.nxt-light.nxt-lotto .nxt-lt-unit{display:grid;gap:2px;min-width:0;padding:10px 4px;border-radius:10px;background:var(--nxt-tint);text-align:center}
.nxt-light.nxt-lotto .nxt-lt-unit>strong{font-size:24px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--nxt-primary)}
.nxt-light.nxt-lotto .nxt-lt-unit>span{font-size:13px;line-height:1.4;color:var(--nxt-text-2)}
.nxt-light.nxt-lotto .nxt-lt-win{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 16px}
.nxt-light.nxt-lotto .nxt-lt-win-last{margin-bottom:0}
.nxt-light.nxt-lotto .nxt-lt-plus{flex:none;width:14px;font-size:18px;font-weight:700;line-height:1;text-align:center;color:var(--nxt-text-3)}
.nxt-light.nxt-lotto .nxt-lt-next>.nxt-basis{margin-top:8px}
.nxt-light.nxt-lotto .nxt-lt-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:8px 0 -12px;font-size:14px;color:var(--nxt-primary);text-decoration:underline;text-underline-offset:3px}
.nxt-light.nxt-lotto .nxt-lt-link:hover{color:var(--nxt-primary-dk)}
.nxt-light.nxt-lotto .nxt-lt-link>.bi{font-size:13px}

/* ============ ⑥ 등수표 ============ */
/* 5열 → 3열(순위 + 기준 / 당첨 게임 / 1게임당 + 총 당첨금). 1400px 화면의 옆 칸에서 가로 스크롤이 없다
   <div class="nxt-table-wrap"><table class="nxt-table nxt-lt-rank"><caption class="sr-only">…</caption>
     <thead><tr><th scope="col">순위</th><th scope="col">당첨 게임</th><th scope="col">1게임당 당첨금</th></tr></thead>
     <tbody><tr><th scope="row">1등<span class="nxt-lt-rule">6개번호 일치</span></th><td data-th="당첨 게임">12</td>
       <td data-th="1게임당 당첨금"><span class="nxt-lt-amt"><strong>2,201,538,188원</strong><small>총 26,418,458,256원</small></span></td></tr></tbody></table></div>
   기준 글(API 의 criteria)은 길 수 있어 그 칸만 줄바꿈을 허용한다. 칸이 좁은 폭(2단의 901~1199px, 600px 이하)에서는 줄마다 쌓는다(⑧). */
.nxt-light.nxt-lotto .nxt-lt-rank th,
.nxt-light.nxt-lotto .nxt-lt-rank td{vertical-align:top}
.nxt-light.nxt-lotto .nxt-lt-rule{display:block;margin-top:2px;font-size:13px;font-weight:400;white-space:normal;color:var(--nxt-text-3)}
.nxt-light.nxt-lotto .nxt-lt-amt{display:inline-grid;justify-items:end;gap:2px}
.nxt-light.nxt-lotto .nxt-lt-amt>strong{font-weight:700;color:var(--nxt-text)}
.nxt-light.nxt-lotto .nxt-lt-amt>small{font-size:13px;color:var(--nxt-text-3)}

/* ============ ⑦ 저장 이미지 카드 안 ============ */
/* NxTool.renderCard 가 lotto.js 의 buildCardSpec().body 를 카드(.nxt-shot, 720px - tool-parts.css ③-9) 안에 옮겨 찍는다. 밝은 카드 하나다(옛 어두운 남색 바탕은 없다).
   <div class="nxt-lt-shot"><ol class="nxt-lt-games"> 게임 줄(A~E 꼬리표 + 공 56px) </ol><p class="nxt-lt-shot-excl">제외번호 4, 13, 44</p></div>
   추첨기 그림 · 지난주 대조 배지는 담지 않는다(시안 노트 B 5절) */
.nxt-light.nxt-lotto .nxt-lt-shot{display:grid;justify-items:center;gap:16px;padding:8px 0}
.nxt-light.nxt-lotto .nxt-shot .nxt-lt-games{gap:12px}
.nxt-light.nxt-lotto .nxt-shot .nxt-lt-games>li{gap:16px}
.nxt-light.nxt-lotto .nxt-shot .nxt-lt-balls{gap:12px}
.nxt-light.nxt-lotto .nxt-shot .nxt-lt-games .nxt-ball{--nxt-ball-size:56px;font-size:22px}
.nxt-light.nxt-lotto .nxt-shot .nxt-lt-tag{width:32px;height:32px;background:var(--nxt-panel);font-size:16px}
.nxt-light.nxt-lotto .nxt-lt-shot-excl{margin:0;font-size:16px;line-height:1.5;text-align:center;color:var(--nxt-text-2)}

/* ============ ⑧ 좁은 화면 · 움직임 ============ */
/* 901~1199px : 2단이 좁다(1000px 화면에서 무대 안쪽 약 333px · 옆 칸 안쪽 약 270px). 당첨번호 한 줄(공 6 + 보너스)이 옆 칸에 한 줄로 들어오게 */
@media (min-width:901px) and (max-width:1199px){
	.nxt-light.nxt-lotto .nxt-lt-win .nxt-ball{--nxt-ball-size:28px;font-size:13px}
}
/* 901~999px : 무대 안쪽이 272~325px 다 - 뽑은 번호 한 줄(꼬리표 + 공 40px 6개 = 314px)이 넘친다(905px 에서 40px 넘치는 것을 실제 화면에서 쟀다. 시안은 1000px 만 계산했다).
   공 34px · 사이 6px 로 줄이면 한 줄이 266px 다 */
@media (min-width:901px) and (max-width:999px){
	.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball{--nxt-ball-size:34px;font-size:15px}
	.nxt-light.nxt-lotto .nxt-lt-games>li{gap:8px}
	.nxt-light.nxt-lotto .nxt-lt-games .nxt-lt-balls{gap:6px}
}
/* 등수표 : 칸이 좁은 폭에서는 줄마다 쌓는다(머리 줄은 숨기고 칸마다 data-th 를 앞에 적는다) */
@media (max-width:600px),(min-width:901px) and (max-width:1199px){
	.nxt-light.nxt-lotto .nxt-lt-rank thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
	.nxt-light.nxt-lotto .nxt-lt-rank,
	.nxt-light.nxt-lotto .nxt-lt-rank tbody,
	.nxt-light.nxt-lotto .nxt-lt-rank tr,
	.nxt-light.nxt-lotto .nxt-lt-rank th,
	.nxt-light.nxt-lotto .nxt-lt-rank td{display:block}
	.nxt-light.nxt-lotto .nxt-lt-rank tr{padding:10px 12px;border-bottom:1px solid var(--nxt-line)}
	.nxt-light.nxt-lotto .nxt-lt-rank tr:last-child{border-bottom:0}
	.nxt-light.nxt-lotto .nxt-lt-rank th,
	.nxt-light.nxt-lotto .nxt-lt-rank td{padding:2px 0;border:0;white-space:normal}
	.nxt-light.nxt-lotto .nxt-lt-rank td{display:flex;justify-content:space-between;gap:12px}
	.nxt-light.nxt-lotto .nxt-lt-rank td::before{content:attr(data-th);flex:none;color:var(--nxt-text-3)}
	.nxt-light.nxt-lotto .nxt-lt-rule{display:inline;margin:0 0 0 8px}
}
@media (max-width:600px){
	/* 뽑은 번호 : 공 36px. 제외번호 격자가 칸 폭을 다 쓴다(7칸) */
	.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball{--nxt-ball-size:36px;font-size:15px}
	.nxt-light.nxt-lotto .nxt-lt-games>li{gap:8px}
	.nxt-light.nxt-lotto .nxt-lt-games .nxt-lt-balls{gap:6px}
	.nxt-light.nxt-lotto .nxt-stage-set .nxt-more-body{padding-left:0;padding-right:0}
	.nxt-light.nxt-lotto .nxt-stage-set .nxt-more-body>.nxt-hint{padding:0 14px}
}
/* 360px 이하(무대 안쪽 294px 아래) : 공 36px 한 줄(278px)이 344px 화면부터 넘친다 → 공 30px(한 줄 242px, 320px 화면의 안쪽 254px 에 들어온다) */
@media (max-width:360px){
	.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball{--nxt-ball-size:30px;font-size:14px}
}
/* 움직임 줄이기 : 구가 떨리지 않고, 뽑힌 공 · 뽑은 번호가 움직이지 않고 그 자리에서 바뀐다(번호만 차례로 나온다). 캔버스의 공 섞임은 lotto.js 가 스스로 돌리지 않는다.
   전환(transition)은 tool-common.css ⑧ 이 이미 끈다 - 여기는 자리 · 투명도만 되돌린다 */
@media (prefers-reduced-motion:reduce){
	.nxt-light.nxt-lotto .nxt-lt-machine[data-run="true"] .nxt-lt-sphere{animation:none}
	.nxt-light.nxt-lotto .nxt-lt-out{transform:translate(-50%,0)}
	.nxt-light.nxt-lotto .nxt-lt-games .nxt-ball[data-flip]{opacity:1;transform:none}
}