/* tool-p2.css - 공개 도구 프로그램(/tool/{이름}.do) 조각 가운데 뽑기형(P2) 4개의 공통 규칙 (밝은 테마 전용). 도구 16개 개편. 쓰는 도구 : 돌림판 roulette · 로또 lotto · 사다리 ladder-game · 제비뽑기 lottery-draw 담는 것 : ① 토큰(고르는 색 12 · 공 색 5 · 무대 선 · 판 치수) + 색을 고르는 속성(data-pick · data-band) ② P2 뼈대에서 고친 값(무대 고정을 푸는 조건) ③ P2 공통 부품(결과 자리 · 주 단추 옆 보조 단추 · 무대 안 설정 · [다시 만들기] 줄 · 켜고 끄는 단추 · 여러 줄 입력칸 · 예시 묶음 · 색 점 · 공) ④ 좁은 화면(공통 부품의 것만) 뿌리 :
[거는 순서] tool-common.css → tool-parts.css → tool-p2.css → {이름}.css → 뿌리 마크업 → tool-common.js → {이름}.js 순서를 바꾸면 안 된다 - ① 의 토큰 블록(.nxt.nxt-light)이 앞 두 파일의 같은 선택자 뒤에 더해지고, ③ 의 .nxt-side .nxt-more 와 ④ 의 .nxt-p2 .nxt-stage-area 가 tool-parts.css 의 값을 덮는다(그 줄에 주석). 전환한 조각에는 tool-calc.css · sols-tool-guide.css 를 걸지 않는다. [닿는 곳] 이 파일은 전환한 뽑기 도구 조각만 건다 - 미전환 도구 · 계산형 · 이미지형에는 닿지 않는다. [출처] docs/design/2026-10-14_tool_renewal_시안/renewal-p2.css ①②③ + ⑤ · ⑥ 가운데 공통 부품의 것 (④ 도구별 규칙과 ⑤ · ⑥ 의 도구별 줄은 각 도구 CSS 로 간다 : .nxt-light.nxt-{이름} …) 치수 · 색 표 · 마크업 계약 = 같은 폴더 design-notes-p2.md(시안 노트 B) 1 ~ 3절, 배정 = docs/design/2026-10-14_tool_renewal_배정서.md 1절 (a) [시안에서 옮기지 않은 줄] tool-parts.css 가 이미 그 값이라 다시 덮지 않는다(시안 노트 B 7절 1 ~ 3) : .nxt-stage.nxt-sticky 의 max-height:none · overflow:visible → tool-parts.css ② 의 .nxt-sticky:where(:not(.nxt-stage)) .nxt-p2 .nxt-stage-area 의 min-height:0 · padding:16px → tool-parts.css ③-8 의 .nxt-stage-area .nxt-stage-run>.nxt-stage-main 의 flex:1 1 120px → tool-parts.css ③-8 의 .nxt-stage-main 시안 페이지의 판 그림(svg)에만 쓰는 규칙(.nxt-wheel-rim · -slice · -label)은 어디에도 옮기지 않았다 - 실제 판은 캔버스다. [시안에서 고친 값] .nxt-stage-result>strong 에 vertical-align:top 을 더했다(결과 줄이 36px 가 아니라 41px 로 나오던 것 - ③ 의 그 줄에 까닭). [이름] tool-parts.css 와 같다. 전부 nxt- 접두, 상태는 클래스가 아니라 속성으로 그린다. [aria-pressed] 켬 · [aria-busy] 진행 중 · [aria-disabled] 못 누름 · [hidden] 숨김 · [data-sticky="off"] 고정 풀기 · [data-pick="1~12"] 고르는 색 · [data-band="1~5"] 공 색 · [data-empty] 빈 공 자리 · [data-match] 지난주와 같은 번호 (도구가 쓰는 것 : [data-done] 사다리 이름표 · [data-open] 사다리 결과 칸 · [data-state] 제비 카드 3상태 - 규칙은 그 도구 CSS) [범위] 선택자는 .nxt-light … 로 시작한다(토큰만 .nxt.nxt-light). 틀 선택자(.bbs-*, .nxf-*, body, main)를 쓰지 않는다. 도구 하나만의 규칙을 두지 않는다(→ {이름}.css). [토큰] 색 값은 ① 에만 있다. 그 밖의 규칙은 --nxt-* 만 읽는다. [굵기] 400 과 700 만. 글자 최소 13px. [명도 대비 - 상대휘도 계산. 글자 4.5:1 / 비텍스트 3:1] 바탕은 흰색 #FFFFFF 와 무대 받침 #EAF1FE 두 가지다. 고르는 색 12 (흰 바탕 = 그 색 위 흰 글자의 대비 / 옅은 파랑 받침 위 비텍스트) 1 #1A56DB 6.18 / 5.45 2 #C2410C 5.18 / 4.56 3 #0F766E 5.47 / 4.82 4 #BE185D 6.04 / 5.32 5 #A16207 4.92 / 4.34 6 #7C3AED 5.70 / 5.02 7 #15803D 5.02 / 4.42 8 #4338CA 7.90 / 6.97 9 #B91C1C 6.47 / 5.70 10 #0E7490 5.36 / 4.72 11 #A21CAF 6.32 / 5.57 12 #4D7C0F 4.99 / 4.40 공 색 5 1~10 #A16207 4.92 / 4.34 · 11~20 #1A56DB 6.18 / 5.45 · 21~30 #B91C1C 6.47 / 5.70 · 31~40 #64748B 4.76 / 4.19 · 41~45 #15803D 5.02 / 4.42 무대 선 윤곽 #64748B 4.76 / 4.19 · 사다리 줄 #475569 7.58 / 6.68 켜고 끄는 단추 끔 : 받침 #CBD5E1(꾸밈, 1.5) · 손잡이 #475569 7.6 / 켬 : 받침 #1A56DB 6.2 포커스 링 #E8590C : 흰 바탕 3.6 / 옅은 파랑 받침 3.2 2026.10.14 최초 생성 (시안 renewal-p2.css ①②③ 이식) */ /* ========================================================================================== ① 토큰 ========================================================================================== */ .nxt.nxt-light{ /* 고르는 색 12 : 돌림판 조각(1~12 차례로) · 사다리 참가자(1~10 차례로). 이웃한 번호끼리 색상이 멀다. 전부 흰 글자를 얹는 진한 색이다 - 그 위 글자는 --nxt-on-pick 하나. 캔버스에 그리는 도구는 JS 의 색 배열을 이 값과 같게 둔다(roulette.js 의 PALETTE) */ --nxt-pick-1:#1A56DB; --nxt-pick-2:#C2410C; --nxt-pick-3:#0F766E; --nxt-pick-4:#BE185D; --nxt-pick-5:#A16207; --nxt-pick-6:#7C3AED; --nxt-pick-7:#15803D; --nxt-pick-8:#4338CA; --nxt-pick-9:#B91C1C; --nxt-pick-10:#0E7490; --nxt-pick-11:#A21CAF; --nxt-pick-12:#4D7C0F; /* 공 색 5 : 로또 번호대. 1~10 황금 · 11~20 파랑 · 21~30 빨강 · 31~40 회색 · 41~45 초록. 숫자는 흰색 */ --nxt-ball-1:#A16207; --nxt-ball-2:#1A56DB; --nxt-ball-3:#B91C1C; --nxt-ball-4:#64748B; --nxt-ball-5:#15803D; --nxt-on-pick:#FFFFFF; /* 고르는 색 · 공 색 위의 글자 */ --nxt-stage-line:#64748B; /* 무대 위 그림의 윤곽선(추첨기 · 안 뽑힌 카드 · 닫힌 결과 칸) */ --nxt-stage-ink:#475569; /* 사다리의 세로줄 · 가로줄 */ /* 판 치수 : 무대 카드가 화면 높이 안에 들어오게 높이를 따라 줄어든다(계산은 시안 노트 B 2절) */ --nxt-wheel:clamp(360px,calc(100vh - var(--nxt-sticky-top) - 314px),420px); /* 돌림판 지름 */ --nxt-lt-h:clamp(172px,calc(100vh - var(--nxt-sticky-top) - 589px),260px); /* 추첨기 높이 (3게임 결과까지 들어오는 값). 아래 끝 172px : 180px 로는 1400 × 800 에서 2게임 결과가 3px 넘쳐 무대 고정이 풀렸다(2026.10.15 묶음 5) */ --nxt-ld-h:220px; /* 사다리 줄 영역 높이 */ --nxt-lot-w:92px; /* 제비 카드 폭 (높이 = 폭 × 4/3) */ } @media (max-width:900px){ .nxt.nxt-light{--nxt-wheel:360px;--nxt-lt-h:180px;--nxt-ld-h:180px;--nxt-lot-w:88px} } /* 제비 카드 : 375 × 812 첫 화면에서 주 단추 아래 끝이 817 로 5px 넘었다(카드 88px · 두 줄). 600px 이하는 76px (메인 세션이 시안을 실제 브라우저로 띄워 고친 값) */ @media (max-width:600px){ .nxt.nxt-light{--nxt-lot-w:76px} } /* 색을 고르는 속성 : 색은 속성으로만 준다(인라인 색 금지). 사용자가 돌림판 색을 직접 고른 항목만 style="--nxt-pick:#…" 을 쓴다. 조상에 달면 안쪽의 색 점 · 테두리 · 경로가 함께 받는다 */ .nxt-light [data-pick="1"]{--nxt-pick:var(--nxt-pick-1)} .nxt-light [data-pick="2"]{--nxt-pick:var(--nxt-pick-2)} .nxt-light [data-pick="3"]{--nxt-pick:var(--nxt-pick-3)} .nxt-light [data-pick="4"]{--nxt-pick:var(--nxt-pick-4)} .nxt-light [data-pick="5"]{--nxt-pick:var(--nxt-pick-5)} .nxt-light [data-pick="6"]{--nxt-pick:var(--nxt-pick-6)} .nxt-light [data-pick="7"]{--nxt-pick:var(--nxt-pick-7)} .nxt-light [data-pick="8"]{--nxt-pick:var(--nxt-pick-8)} .nxt-light [data-pick="9"]{--nxt-pick:var(--nxt-pick-9)} .nxt-light [data-pick="10"]{--nxt-pick:var(--nxt-pick-10)} .nxt-light [data-pick="11"]{--nxt-pick:var(--nxt-pick-11)} .nxt-light [data-pick="12"]{--nxt-pick:var(--nxt-pick-12)} .nxt-light [data-band="1"]{--nxt-ball:var(--nxt-ball-1)} .nxt-light [data-band="2"]{--nxt-ball:var(--nxt-ball-2)} .nxt-light [data-band="3"]{--nxt-ball:var(--nxt-ball-3)} .nxt-light [data-band="4"]{--nxt-ball:var(--nxt-ball-4)} .nxt-light [data-band="5"]{--nxt-ball:var(--nxt-ball-5)} /* ========================================================================================== ② P2 뼈대에서 고친 값 ========================================================================================== */ /* ---------- 무대 고정을 푸는 조건 ---------- 무대(.nxt-stage.nxt-sticky)는 카드 안에서 굴리지 않는다(tool-parts.css ② - 판과 주 단추가 카드 안에서 굴러가면 안 된다). 대신 ① 판이 화면 높이를 따라 줄어들고(① 토큰) ② 그래도 넘치면 고정을 푼다 - 화면보다 큰 채로 붙으면 아래쪽(로또의 추첨 설정)에 닿을 수 없다. 푸는 조건 : 화면 높이 761px 이하(CSS) 또는 무대 높이가 보이는 높이보다 클 때 (NxTool.stageSticky(무대)가 data-sticky="off" 를 붙이고 뗀다 - 게임 수 4~5, 제외번호 펼침, 참가자 많은 사다리). (.nxt-sticky 를 덮으므로 클래스 둘로 적는다) */ .nxt-light .nxt-stage.nxt-sticky[data-sticky="off"]{position:static} @media (min-width:901px) and (max-height:761px){ .nxt-light .nxt-stage.nxt-sticky{position:static} } /* ========================================================================================== ③ P2 공통 부품 ========================================================================================== */ /* ---------- 무대의 결과 자리 ---------- 결과가 나오기 전에도 자리를 지킨다(주 단추 아래가 덜컹거리지 않게). 그동안은 작은 회색 글 한 줄.

결과가 여기에 나옵니다

결과: 국밥

*/ .nxt-light .nxt-stage-wait{margin:0;font-size:14px;font-weight:400;line-height:1.5;color:var(--nxt-text-3)} /* vertical-align:top - inline-flex 상자의 기준선은 첫 칸(글자 없는 색 점)의 아래 끝이라, 그대로 두면 상자가 기준선 아래로 밀려 줄 높이가 36 → 41px 로 는다. 그 5px 때문에 화면 높이 762 ~ 822px 에서 무대가 보이는 높이를 넘어 고정이 풀렸다(시안의 계산은 36px - 시안 노트 B 2절). 줄 위에 맞추면 36px 그대로다 */ .nxt-light .nxt-stage-result>strong{display:inline-flex;align-items:center;gap:8px;font-weight:700;vertical-align:top} /* 주 단추 옆의 보조 단추(사다리 [다시 섞기], 제비 [모두 뒤집기]). 로또의 [바로 결과 보기]는 tool-parts.css 의 .nxt-stage-skip */ .nxt-light .nxt-stage-sub{flex:0 1 auto} /* ---------- 무대 카드 안의 설정 (로또 : 게임 수 · 제외번호) ---------- 무대 카드의 맨 아래 묶음. 주 단추 · 결과 아래라 펼쳐도 주 단추 자리가 바뀌지 않는다.

추첨 설정

…
…
*/ .nxt-light .nxt-stage-set{display:grid;gap:8px;min-width:0;margin-top:4px;padding-top:12px;border-top:1px solid var(--nxt-line)} .nxt-light .nxt-stage-set-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px} .nxt-light .nxt-stage-set-title{margin:0;font-size:15px;font-weight:700;line-height:1.4;color:var(--nxt-text)} .nxt-light .nxt-stage-set-head>.nxt-reset{margin-right:-8px} .nxt-light .nxt-stage-set>.nxt-stepper-row, .nxt-light .nxt-stage-set>.nxt-more{margin:0} /* ---------- [다시 만들기] 줄 (사다리 · 제비 : 설정을 고친 뒤) ---------- 판 바로 위. 이 줄이 보이는 동안 판은 흐려지고 눌리지 않는다(JS 는 판에 inert 도 건다). 주 단추는 aria-disabled. */ .nxt-light .nxt-stage-stale{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:8px 8px 8px 14px;border:1px solid var(--nxt-warn-line);border-radius:var(--nxt-r);background:var(--nxt-warn-50);color:var(--nxt-warn-dk)} .nxt-light .nxt-stage-stale>p{flex:1 1 200px;display:flex;align-items:flex-start;gap:8px;min-width:0;margin:0;font-size:14px;font-weight:700;line-height:1.5} .nxt-light .nxt-stage-stale>p>.bi{flex:none;margin-top:3px;font-size:15px;line-height:1} .nxt-light .nxt-stage-stale>.nxt-btn{flex:none} .nxt-light .nxt-stage-stale:not([hidden])~.nxt-stage-area{opacity:.45;pointer-events:none} /* ---------- 켜고 끄는 단추 ---------- 옵션 하나를 켜고 끈다(소리 끄기 · 비율 다르게 주기 · 당첨 항목 자동 제거)
켬 = 채운 받침 + 오른쪽으로 간 손잡이(색 하나에 기대지 않는다). 이름은 "켰을 때 일어나는 일"로 적는다. 잇기 : NxTool.toggle(그 단추, onChange) - 값은 boolean. set() 은 onChange 를 부르지 않는다 */ .nxt-light .nxt-toggles{display:grid;margin:0 0 12px} .nxt-light .nxt-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;margin:0;padding:6px 0;border:0;border-top:1px solid var(--nxt-line);border-radius:0;background:none; color:var(--nxt-text);font:inherit;font-size:15px;font-weight:700;line-height:1.4;text-align:left;cursor:pointer} .nxt-light .nxt-toggle:first-child{border-top:0} .nxt-light .nxt-toggle-text{display:grid;gap:2px;min-width:0} .nxt-light .nxt-toggle-text>small{font-size:13px;font-weight:400;line-height:1.5;color:var(--nxt-text-3)} .nxt-light .nxt-toggle-track{flex:none;position:relative;width:46px;height:26px;border:1px solid var(--nxt-field-line);border-radius:999px;background:var(--nxt-panel);transition:background .15s ease,border-color .15s ease} .nxt-light .nxt-toggle-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--nxt-text-3);transition:transform .15s ease,background .15s ease} .nxt-light .nxt-toggle:hover .nxt-toggle-track{border-color:var(--nxt-primary)} .nxt-light .nxt-toggle[aria-pressed="true"] .nxt-toggle-track{border-color:var(--nxt-primary);background:var(--nxt-primary)} .nxt-light .nxt-toggle[aria-pressed="true"] .nxt-toggle-track::after{background:var(--nxt-panel);transform:translateX(20px)} .nxt-light .nxt-toggle[disabled]{opacity:.45;cursor:not-allowed} /* ---------- 여러 줄 입력칸 (사다리 참가자 · 결과, 제비 항목 : 한 줄에 하나) ----------
*/ .nxt-light .nxt-textarea{display:block;width:100%;min-height:150px;margin:0;padding:10px 12px;border:1px solid var(--nxt-field-line);border-radius:var(--nxt-r);background:var(--nxt-panel); color:var(--nxt-text);font:inherit;font-size:16px;font-weight:700;line-height:1.6;resize:vertical;box-shadow:var(--nxt-field-shadow)} .nxt-light .nxt-textarea:hover{border-color:var(--nxt-field-line-hover,#94A3B8)} .nxt-light .nxt-textarea:focus{border-color:var(--nxt-primary)} .nxt-light .nxt-textarea::placeholder{color:var(--nxt-placeholder);font-weight:400;opacity:1} /* ---------- 예시 불러오기 묶음 · 패널 제목 옆 개수 ----------
예시 불러오기
누르면 지금 항목을 덮고 되돌리기 토스트(5초)를 띄운다.

항목5개

*/ .nxt-light .nxt-ex{min-width:0;margin:0 0 16px} .nxt-light .nxt-ex>.nxt-chips{margin:0} .nxt-light .nxt-panel-title>.nxt-count{font-size:14px;font-weight:400;color:var(--nxt-text-3)} /* 옆 패널의 "옵션 더 보기" : 패널의 마지막이라 아래 여백이 없다 (tool-parts.css 의 .nxt-more 를 덮는다 - 클래스 둘) */ .nxt-light .nxt-side .nxt-more{margin:16px 0 0} /* ---------- 색 점 ---------- 항목 · 참가자의 색. 이름과 함께만 쓴다(색만으로 가르지 않는다) (조상에 data-pick 이 있으면 속성 없이) */ .nxt-light .nxt-pick-dot{flex:none;display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--nxt-pick,var(--nxt-text-3))} /* ---------- 공 ---------- 로또 번호 하나. 색은 번호대(data-band 1~5), 숫자는 흰색 17 40px(추첨 결과) 17 34px(당첨번호 카드) 17 26px(추첨 기록) 아직 안 나온 자리 : data-empty="true" (점선 동그라미) 지난주 당첨번호와 같은 번호 : data-match="true"(굵은 테) / 보너스 번호와 같음 : data-match="bonus"(점선 테) + 숨은 글 */ .nxt-light .nxt-ball{flex:none;display:inline-grid;place-items:center;width:var(--nxt-ball-size,40px);height:var(--nxt-ball-size,40px);border-radius:50%;background:var(--nxt-ball,var(--nxt-text-3)); color:var(--nxt-on-pick);font-size:16px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .nxt-light .nxt-ball-md{--nxt-ball-size:34px;font-size:14px} .nxt-light .nxt-ball-sm{--nxt-ball-size:26px;font-size:13px} .nxt-light .nxt-ball[data-empty="true"]{border:2px dashed var(--nxt-line-dk);background:none} .nxt-light .nxt-ball[data-match="true"]{box-shadow:0 0 0 1.5px var(--nxt-panel),0 0 0 3.5px var(--nxt-text)} .nxt-light .nxt-ball[data-match="bonus"]{outline:2px dashed var(--nxt-text);outline-offset:1.5px} /* ========================================================================================== ④ 좁은 화면 (공통 부품의 것만 - 도구별 줄은 각 도구 CSS 의 끝) ========================================================================================== */ /* 900px 이하 : 무대 → 주 단추 → 결과 · 행동 줄 → 항목 → 옵션 → 기록(마크업 순서 그대로). 주 단추가 375 × 812 첫 화면 안에 오게 받침 여백을 줄인다. (tool-parts.css 의 .nxt-stage-area 16px 를 덮는다 - .nxt-p2 를 붙여 무겁게 적는다. 도구가 더 줄이려면 .nxt-light.nxt-{이름} .nxt-p2 .nxt-stage-area) */ @media (max-width:900px){ .nxt-light .nxt-p2 .nxt-stage-area{padding:8px} } /* 칸이 좁은 폭(2단의 901~1199px, 600px 이하) : 주 단추 줄의 안 여백 · 보조 단추 글자를 줄여 보조 단추([바로 결과 보기] · [다시 섞기] · [모두 뒤집기])가 옆에 서도 한 줄에 들어오게 한다(높이 52px 는 그대로) */ @media (max-width:600px),(min-width:901px) and (max-width:1199px){ .nxt-light .nxt-stage-run>.nxt-btn-lg{padding:10px 14px} .nxt-light .nxt-stage-run>.nxt-stage-skip, .nxt-light .nxt-stage-run>.nxt-stage-sub{font-size:15px} } /* tool-p2.css : 이식 끝 (1C) */