/* lottery-draw.css - 공개 도구 "제비뽑기" 조각(WEB-INF/jsp/homepage/tool/lotteryDraw.jsp)의 스타일. 2026.10.14 도구 개편 : P2 뽑기형 뼈대로 옮겼다(본보기 = roulette.css). 뿌리 :
걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품) → tool-p2.css(뽑기형 공통 : 무대 · [다시 만들기] 줄 · 여러 줄 입력칸 · 카드 폭 토큰 --nxt-lot-w) → 이 파일 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다) [이 파일에 두는 것] 이 도구만의 것뿐이다. 무대 카드 · 주 단추 · 행동 줄 · 칩 · 입력칸 · 더하기 빼기 · 토스트 · 안내 본문의 모양은 tool-parts.css · tool-p2.css 가 정한다 - 여기 다시 적지 않는다. ① 카드 격자 · 카드 3상태 ② 결과 줄 ③ 저장 이미지 ④ 좁은 화면 [출처] docs/design/2026-10-14_tool_renewal_시안/renewal-p2.css ④-4 + ⑤ 의 제비뽑기 줄. ⑥ 의 "600px 이하 카드 폭 76px"는 tool-p2.css ① 의 토큰에 이미 들어 있다. [시안에 더한 것] 항목 글의 줄 수 제한(카드 높이가 글 길이에 따라 달라지지 않게), 곧 저절로 열릴 덮인 카드의 모양([aria-disabled] - 떠오르지 않는다), 저장 이미지 카드 안의 글자 크기. [시안에서 고친 값] 받침의 옆 여백 16 → 8px(PC). 1400px 화면에서 예시 5장이 한 줄에 서게 한 것이다(① 의 그 줄에 까닭). [지운 것] 옛 규칙 전부 : 틀의 .card 되돌리기, .bg-sparkle · .spark, .container, .preset-row · .preset-label · .preset-chip, .field · .field-hint · .field-error, .count-row · .stepper-btn · #drawCountInput · .count-max-hint, .btn-main · .btn-sub, #playPhase · .play-toolbar, #resultCapture · .draw-status · .result-strip · .result-chip · .rank, .card-grid(.done · .shuffling) · .card(.used · .missed · .disabled · .flipped · .flip-mid) · .card-face · .card-back · .card-front, .final-actions, .burst-flash · .confetti-piece · .confetti-spark(색종이는 NxTool.confetti 가 그린다), 카드 그림 전용 토큰 --nxt-ld-*. [색] 화면 부품은 --nxt-* 토큰만 쓴다. 이 파일에 16진수 색은 없다(덮인 카드에 올렸을 때의 그림자 rgba 하나만 있다). [명도 대비 - 시안 노트 B 1.3 표] 받침은 옅은 파랑 #EAF1FE. 카드 뒷면 #1A56DB / 받침 5.45(비텍스트) · 뒷면의 흰 숫자 6.18 · 뽑힌 카드 : 흰 앞면 + 2px 파란 테(받침 위 5.45) + "N번째" #1445B0 / 흰 8.4 + 항목 #0F172A / 흰 17.9 · 안 뽑힌 카드 : #F5F7FB 앞면 + 점선 #64748B(받침 위 4.19) + 글자 #475569 / #F5F7FB 7.1 세 모양은 색 · 테두리 모양(실선 / 굵은 실선 / 점선) · 글자("N번째" / "안 뽑힘") 세 가지로 가른다. [JS 가 넣는 인라인 - lottery-draw.js] 색은 없다. 뒤집기 · 섞는 모션은 element.animate(끝나면 남지 않는다)다. [규칙] 전부 .nxt-light.nxt-lottery-draw 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 글꼴 굵기는 400 · 700 만. */ /* ============ ① 카드 격자 · 카드 3상태 ============ */ /* 카드는 단추다(Tab · Enter · Space). 세 가지 모양 : 덮인 카드 data-state="back" 파란 뒷면 + 카드 번호 → 누르면 뒤집는다 뽑힌 카드 data-state="picked" 흰 앞면 + 굵은 파란 테 + "N번째" + 항목 → aria-disabled="true" 안 뽑힌 카드 data-state="open" 회색 앞면 + 점선 테 + "안 뽑힘" + 항목 → aria-disabled="true" ([모두 뒤집기] 또는 다 뽑은 뒤 저절로)
만들 수 있는 카드가 없을 때만(항목이 2개 미만 · 30개 초과인 값으로 열렸을 때)
뒤집힌 카드도 disabled 가 아니라 aria-disabled 다 - Tab 으로 돌며 무엇이었는지 다시 읽을 수 있다. 카드 폭 --nxt-lot-w(tool-p2.css ①) : PC 92px, 900px 이하 88px, 600px 이하 76px. 항목이 13개 이상이면 격자에 data-size="sm"(64px). */ .nxt-light.nxt-lottery-draw .nxt-stage-area{min-height:200px} /* 받침의 옆 여백 16 → 8px : 1400px 화면에서 받침 안쪽이 499px 라 예시 5장(92 × 5 + 사이 10 × 4 = 500px)이 1px 모자라 4 + 1장으로 꺾였다(시안의 계산은 539px). (tool-parts.css 의 .nxt-stage-area 를 덮는다 - .nxt-p2 를 붙여 무겁게 적는다. 900px 이하의 8px 는 ④ 에 다시 적는다) */ .nxt-light.nxt-lottery-draw .nxt-p2 .nxt-stage-area{padding:16px 8px} .nxt-light.nxt-lottery-draw .nxt-lot-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin:0;padding:0;list-style:none} .nxt-light.nxt-lottery-draw .nxt-lot-grid>li{flex:0 0 var(--nxt-lot-w);min-width:0} .nxt-light.nxt-lottery-draw .nxt-lot-grid[data-size="sm"]{--nxt-lot-w:64px;gap:8px} .nxt-light.nxt-lottery-draw .nxt-lot-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;aspect-ratio:3/4;margin:0;padding:6px;border:2px solid var(--nxt-primary);border-radius:12px; background:var(--nxt-panel);color:var(--nxt-text);font:inherit;line-height:1.3;text-align:center;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease} .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="back"]{background:var(--nxt-primary);color:var(--nxt-on-pick)} .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="back"]:hover{background:var(--nxt-primary-dk);border-color:var(--nxt-primary-dk);box-shadow:0 8px 16px rgba(15,23,42,.18);transform:translateY(-3px)} /* 뽑을 개수를 다 채운 뒤 곧 저절로 열릴 덮인 카드 : 눌리지 않는다 - 떠오르지 않게 한다 */ .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="back"][aria-disabled="true"]{cursor:default} .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="back"][aria-disabled="true"]:hover{border-color:var(--nxt-primary);background:var(--nxt-primary);box-shadow:none;transform:none} .nxt-light.nxt-lottery-draw .nxt-lot-no{display:grid;place-items:center;width:40px;height:40px;border:2px solid currentColor;border-radius:50%;font-size:17px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums} .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="picked"]{box-shadow:inset 0 0 0 1px var(--nxt-primary);cursor:default} .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="open"]{border:2px dashed var(--nxt-stage-line);background:var(--nxt-soft);color:var(--nxt-text-3);cursor:default} .nxt-light.nxt-lottery-draw .nxt-lot-ord{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--nxt-primary-dk)} .nxt-light.nxt-lottery-draw .nxt-lot-card[data-state="open"] .nxt-lot-ord{font-weight:400;color:var(--nxt-text-3)} /* 항목 글 : 세 줄까지만(작은 카드는 두 줄). 넘치면 줄인다 - 카드 높이가 글 길이를 따라 늘지 않게. 온전한 글은 카드의 title 과 결과 줄에 있다 */ .nxt-light.nxt-lottery-draw .nxt-lot-name{display:-webkit-box;max-width:100%;overflow:hidden;font-size:15px;font-weight:700;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3} .nxt-light.nxt-lottery-draw .nxt-lot-grid[data-size="sm"] .nxt-lot-name{font-size:13px;-webkit-line-clamp:2;line-clamp:2} .nxt-light.nxt-lottery-draw .nxt-lot-grid[data-size="sm"] .nxt-lot-no{width:32px;height:32px;font-size:14px} /* ============ ② 결과 줄 ============ */ /* 뽑은 순서대로. "N등"이 아니라 "N번째"다

1번째초밥2번째피자

이 도구만 결과 줄이 주 단추 "위"에 있다 - 카드를 누르는 것이 뽑기이고 주 단추는 [다시 뽑기]라서다. 결과 줄은 한 줄 높이(36px - tool-parts.css)를 늘 지켜 주 단추 자리가 덜컹거리지 않는다. 여러 개를 뽑아 두 줄이 되면 그만큼 내려간다 */ .nxt-light.nxt-lottery-draw .nxt-stage-result{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;font-size:20px} .nxt-light.nxt-lottery-draw .nxt-lot-pick{display:inline-flex;align-items:baseline;gap:6px;min-width:0} .nxt-light.nxt-lottery-draw .nxt-lot-pick>small{flex:none;font-size:14px;font-weight:700;color:var(--nxt-primary-dk)} /* ============ ③ 저장 이미지 ============ */ /* NxTool.renderCard 의 카드(.nxt-shot, 720px) : 주 결과 상자(.nxt-hero)에 "1번째 초밥"을 줄마다, 그 아래 "항목 5개" 한 줄(.nxt-rows). tool-parts.css 의 저장 카드 숫자(56px)는 금액용이다 - 항목 글은 길 수 있어 크기를 줄인다. 줄바꿈 허용은 공용 규칙이 한다(tool-parts.css ③-9, 2026.10.15) */ .nxt-light.nxt-lottery-draw .nxt-shot .nxt-hero-num{font-size:40px;letter-spacing:0} .nxt-light.nxt-lottery-draw .nxt-shot .nxt-hero-2 .nxt-hero-num{font-size:30px} .nxt-light.nxt-lottery-draw .nxt-shot .nxt-hero-pre{flex:none;font-size:20px;color:var(--nxt-primary-dk)} .nxt-light.nxt-lottery-draw .nxt-shot .nxt-rows dt{flex:none;font-size:16px} .nxt-light.nxt-lottery-draw .nxt-shot .nxt-rows dd{font-size:16px;font-weight:400;overflow-wrap:anywhere} /* ============ ④ 좁은 화면 ============ */ /* 900px 이하 : 받침의 최소 높이를 풀고 여백을 뽑기형 공통 값(8px - tool-p2.css ④)으로 맞춘다(주 단추가 375 × 812 첫 화면 안에 오게) */ @media (max-width:900px){ .nxt-light.nxt-lottery-draw .nxt-stage-area{min-height:0} .nxt-light.nxt-lottery-draw .nxt-p2 .nxt-stage-area{padding:8px} } /* 600px 이하 : 카드가 7장부터는 작은 카드(64px, 한 줄 4장)로 - 12장까지 주 단추가 첫 화면 안에 남는다. (:has 를 모르는 브라우저에서는 큰 카드 그대로다 - 깨지지 않고 주 단추만 더 아래로 간다) */ @media (max-width:600px){ .nxt-light.nxt-lottery-draw .nxt-lot-grid:has(>li:nth-child(7)){--nxt-lot-w:64px;gap:8px} .nxt-light.nxt-lottery-draw .nxt-lot-grid:has(>li:nth-child(7)) .nxt-lot-name{font-size:13px;-webkit-line-clamp:2;line-clamp:2} .nxt-light.nxt-lottery-draw .nxt-lot-grid:has(>li:nth-child(7)) .nxt-lot-no{width:32px;height:32px;font-size:14px} }