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

   뿌리 : <div class="nxt nxt-roulette 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 ④-1 · ⑤ · ⑥ 의 돌림판 줄. 시안 페이지의 판 그림(svg)용 규칙은 옮기지 않았다(실제 판은 캔버스).
   [지운 것] 옛 규칙 전부 : .nxt-cols-stage, .wheel-stage · .pointer(.bounce) · .wheel-wrap · #wheelCanvas · .wheel-hub, .btn-spin, .result-line(.show), .action-row,
     .nxt-rl-count, .preset-row · .preset-chip, .manage-box · .item-list · .item-row(.swatch · .name · .weight-wrap · .del-btn) · .item-error · .add-row · .option-row,
     .burst-flash · .confetti-piece(색종이는 NxTool.confetti 가 그린다 - 자리 · 색을 인라인으로 준다).
   [색] 화면 부품은 --nxt-* 토큰만 쓴다. 이 파일에 16진수 색은 없다.
   [JS 가 그리는 색 - roulette.js]
     - 조각 색 = 고르는 색 12(PALETTE - tool-p2.css 의 --nxt-pick-1~12 와 같은 값), 조각 글자 #FFFFFF(700), 조각 사이 2px 흰 선, 바깥 흰 테 + 1px #CBD5E1.
       흰 글자 대비는 가장 낮은 조각(5번 #A16207)이 4.92:1, 받침(#EAF1FE) 위 조각의 비텍스트 대비는 가장 낮은 것이 4.34:1 이다(시안 노트 B 1.1 표).
       방문자가 색 고르개로 밝은 색을 고르면 그 조각만 글자가 #000000 이 된다(흰 글자 대비가 4.5 미만일 때 - 둘 중 하나는 늘 4.5 를 넘는다).
     - 항목이 0개일 때 : 판 #F5F7FB + 글자 #475569 "항목을 추가해 주세요"(7.1:1).
     - 직접 고른 색의 항목 줄 · 색 점 : style="--nxt-pick:#…" (그 줄에만). 고르지 않은 줄은 data-pick="1~12".
     - 캔버스의 인라인 transform(회전), 바늘의 튕김(element.animate - 움직임 줄이기 설정이면 하지 않는다).
   [규칙] 전부 .nxt-light.nxt-roulette 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 글꼴 굵기는 400 · 700 만. */

/* ============ ① 판 ============ */
/* <div class="nxt-stage-area">
     <div class="nxt-wheel">
       <svg class="nxt-wheel-pin" viewBox="0 0 32 38" aria-hidden="true" focusable="false"><path d="M3 3h26L16 35z"/></svg>     바늘(돌지 않는다. 틱마다 튕긴다)
       <div class="nxt-wheel-clip"><canvas class="nxt-wheel-disc" role="img" aria-label="돌림판: 짜장면, 짬뽕, …"></canvas></div>   판(JS 가 그리고 style.transform 으로 돌린다)
       <span class="nxt-wheel-hub" aria-hidden="true"></span>                                                                가운데 축
     </div></div>
   지름(--nxt-wheel - tool-p2.css ①) : PC 360~420px(화면 높이를 따라), 2단이 좁은 901~1199px 는 칸 폭까지, 900px 이하 min(칸 폭, 360px).
   캔버스 버퍼 = 표시 지름 × 기기 배율(roulette.js 의 fitCanvas - 감싸개 크기가 바뀌면 다시 맞추고 다시 그린다). 글자 = 지름의 5%(항목 11~16개 4.3%, 17개 이상 3.7%). */
.nxt-light.nxt-roulette .nxt-wheel{position:relative;width:min(100%,var(--nxt-wheel));aspect-ratio:1/1;margin-top:12px}
/* 둥글게 잘라 내는 감싸개 : 판(캔버스)을 transform:rotate 로 돌리면 네모 상자의 모서리가 판 밖으로 나가 375px 에서 문서에 가로 스크롤이 생긴다(시안 노트 B 10절).
   판만 이 안에 둔다. 바늘 · 축은 밖이다(바늘은 판 위로 12px 나와 있어 안에 두면 잘린다) */
.nxt-light.nxt-roulette .nxt-wheel-clip{position:absolute;inset:0;overflow:hidden;border-radius:50%}
.nxt-light.nxt-roulette .nxt-wheel-disc{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;border-radius:50%}
/* 바늘 : 진한 남색 + 3px 흰 테(조각 위에서는 흰 테가 경계를 만든다). 튕김은 위쪽 가운데를 축으로 돈다 */
.nxt-light.nxt-roulette .nxt-wheel-pin{position:absolute;top:-12px;left:50%;z-index:2;width:32px;height:38px;max-width:none;margin-left:-16px;transform-origin:50% 0}
.nxt-light.nxt-roulette .nxt-wheel-pin>path{fill:var(--nxt-text);stroke:var(--nxt-panel);stroke-width:3;stroke-linejoin:round}
.nxt-light.nxt-roulette .nxt-wheel-hub{position:absolute;top:50%;left:50%;z-index:1;width:16%;height:16%;border:2px solid var(--nxt-line-dk);border-radius:50%;background:var(--nxt-panel);transform:translate(-50%,-50%)}
.nxt-light.nxt-roulette .nxt-wheel-hub::after{content:"";position:absolute;inset:32%;border-radius:50%;background:var(--nxt-text)}

/* ============ ② 항목 줄 · 추가 줄 ============ */
/* 한 줄 44px : 색 점(누르면 색 고르기) · 이름 · (비율) · 삭제. 줄은 roulette.js 의 renderList 가 만든다
   <div class="nxt-rl-cols" aria-hidden="true" hidden><span>이름</span><span>비율 (1~20)</span></div>        "비율 다르게 주기"를 켰을 때만 hidden 을 뗀다
   <ul class="nxt-rl-items" aria-labelledby="…">
     <li class="nxt-rl-item" data-pick="1">                                                                    직접 고른 색이면 data-pick 대신 style="--nxt-pick:#…"
       <label class="nxt-rl-color"><input type="color" value="#1a56db" aria-label="짜장면 색"><i class="nxt-pick-dot" aria-hidden="true"></i></label>
       <div class="nxt-input nxt-rl-name"><input type="text" value="짜장면" maxlength="20" aria-label="항목 1 이름"></div>
       <div class="nxt-input nxt-rl-weight" hidden><input type="text" inputmode="numeric" value="1" maxlength="2" aria-label="짜장면 비율"></div>     켰을 때만 hidden 을 뗀다
       <button type="button" class="nxt-icon-btn" aria-label="짜장면 삭제"><i class="bi bi-x-lg" aria-hidden="true"></i></button></li>
   </ul>
   <div class="nxt-field nxt-rl-addfield">
     <div class="nxt-rl-add"><div class="nxt-input"><input type="text" placeholder="예: 김치찌개" aria-label="더할 항목 이름" maxlength="20"></div><button type="button" class="nxt-btn">추가</button></div>
     <p class="nxt-error" hidden></p>          31번째를 더하려 할 때(NxTool.fieldError 가 연다)
     <p class="nxt-hint">…</p></div> */
.nxt-light.nxt-roulette .nxt-rl-cols{display:flex;justify-content:space-between;margin:0 0 4px;padding:0 48px 0 48px;font-size:13px;line-height:1.5;color:var(--nxt-text-3)}
.nxt-light.nxt-roulette .nxt-rl-cols>span:last-child{width:72px;text-align:center}
.nxt-light.nxt-roulette .nxt-rl-items{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.nxt-light.nxt-roulette .nxt-rl-item{display:flex;align-items:center;gap:4px;min-width:0;min-height:44px}
/* 색 점 : 44 × 44 칸 안의 22px 점. 안의 색 고르개가 투명해서 포커스 링을 감싸개(label)에 그린다 */
.nxt-light.nxt-roulette .nxt-rl-color{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;margin:0;border-radius:var(--nxt-r);cursor:pointer}
.nxt-light.nxt-roulette .nxt-rl-color:hover{background:var(--nxt-soft)}
.nxt-light.nxt-roulette .nxt-rl-color:focus-within{outline:3px solid var(--nxt-focus);outline-offset:-3px}
.nxt-light.nxt-roulette .nxt-rl-color>input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.nxt-light.nxt-roulette .nxt-rl-color>.nxt-pick-dot{width:22px;height:22px;box-shadow:0 0 0 2px var(--nxt-panel),0 0 0 3px var(--nxt-line-dk)}
.nxt-light.nxt-roulette .nxt-rl-name{flex:1 1 auto}
.nxt-light.nxt-roulette .nxt-rl-weight{flex:0 0 72px}
.nxt-light.nxt-roulette .nxt-rl-weight>input{padding:0 6px;text-align:center}
/* 추가 줄 : 오류 글(.nxt-error)을 NxTool.fieldError 로 열려고 .nxt-field 로 감쌌다. 바로 아래가 "옵션 더 보기"(위 여백 16px)라 칸의 아래 여백은 없앤다 */
.nxt-light.nxt-roulette .nxt-rl-addfield{margin:0}
/* 줄의 모양(입력칸 + [추가])은 tool-parts.css 의 .nxt-add-row 다 - 여기는 항목 목록과의 사이만 */
.nxt-light.nxt-roulette .nxt-rl-add{margin:8px 0 0}

/* ============ ③ 최근 결과 ============ */
/* tool-parts.css 의 .nxt-history 그대로. 이름 앞에 그때의 조각 색 점, 아래 글은 시각, "당첨 항목 자동 제거"로 빠진 줄에는 꼬리표
   <ol class="nxt-history-list"><li class="nxt-history-item">
     <div class="nxt-history-main"><span class="nxt-history-name"><i class="nxt-pick-dot" data-pick="4" aria-hidden="true"></i>국밥</span><span class="nxt-history-sub">방금</span></div>
     <span class="nxt-badge">항목에서 뺌</span></li></ol> */
.nxt-light.nxt-roulette .nxt-history-name{display:inline-flex;align-items:center;gap:8px}
/* 꼬리표 뒤에 삭제 단추가 없는 목록이다 - 꼬리표의 오른쪽 여백은 tool-parts.css ③-6(.nxt-history-item>.nxt-badge:last-child)이 준다 */

/* ============ ④ 좁은 화면 ============ */
/* 901~1199px : 2단이 좁다(1000px 화면에서 무대 안쪽 약 333px). 받침의 옆 여백을 줄여 판이 칸 폭을 다 쓴다 */
@media (max-width:1199px){
	.nxt-light.nxt-roulette .nxt-p2 .nxt-stage-area{padding:16px 8px}
}
/* 900px 이하 : 받침의 옆 여백 0 - 판 = min(화면 폭 - 64px, 360px). 375px 에서 패널 테두리 2px 를 뺀 309px. 주 단추가 375 × 812 첫 화면 안에 온다 */
@media (max-width:900px){
	.nxt-light.nxt-roulette .nxt-p2 .nxt-stage-area{padding:8px 0}
}