/* 랜덤 숫자 뽑기 (random-number-generator) — 2026-10-22. 라이브 intro 판의 설정판 | 결과판(종이 카드·점 무늬 판·마름모 눈금자·통계 3칸)을 saturn 토큰으로 옮김.
   작업면이 640px 이상이면 두 열 [설정 | 결과판] → [연출·제외·내 번호 | 번호판·기록], 아래는 한 열(설정 → 결과판 → 번호판·기록 → 연출·제외·내 번호). */
.rng{container:rng/inline-size;overflow:hidden}
.rng-in{display:grid;grid-template-columns:minmax(0,1fr)}
.rng-core,.rng-opts{background:color-mix(in srgb,var(--wash) 55%,var(--card))}
.rng-core{display:grid;gap:14px;align-content:start;padding:16px 18px 18px}
.rng-stage{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px 18px;border-top:1px solid var(--soft);background:var(--card)}
.rng-info{display:grid;gap:14px;align-content:start;min-width:0;padding:4px 18px 18px}
.rng-opts{display:grid;gap:16px;align-content:start;padding:16px 18px 18px;border-top:1px solid var(--soft)}
@container rng (min-width:640px){
  .rng-in{grid-template-columns:minmax(250px,292px) minmax(0,1fr);grid-template-areas:"core stage" "opts info";grid-template-rows:auto 1fr}
  .rng-core{grid-area:core;border-right:1px solid var(--soft)}
  .rng-stage{grid-area:stage;border-top:0;padding:16px 20px 14px}
  .rng-info{grid-area:info;padding:4px 20px 18px}
  .rng-opts{grid-area:opts;border-right:1px solid var(--soft)}
}
.rng-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rng-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.rng-help.is-error{color:var(--accent)}

/* ---------- 설정 ---------- */
.rng-presets{display:flex;flex-wrap:wrap;gap:6px}
.rng-chip{min-height:30px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;transition:border-color var(--ease),background var(--ease)}
.rng-chip:hover{border-color:var(--line);background:var(--btn)}
.rng-chip[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.rng-range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0 8px}
.rng-tilde{height:var(--v2-ctl);line-height:var(--v2-ctl);font-family:var(--sans);font-weight:700;color:var(--muted)}
.rng-range .v2-input input,.rng-kf .v2-input input{text-align:left}
.rng-kf{max-width:220px}
.rng-step{overflow:hidden}
.rng-step .rng-stepbtn{flex:0 0 40px;border:0;background:var(--btn);font-family:var(--sans);font-size:18px;font-weight:700;color:var(--ink);transition:background var(--ease)}
.rng-step .rng-stepbtn:hover{background:var(--btn-hover)}
.rng-step .rng-stepbtn:first-child{border-right:1px solid var(--soft)}
.rng-step .rng-stepbtn:last-child{border-left:1px solid var(--soft)}
.rng-kf .rng-step input{text-align:center;padding:0 4px}
.rng-step b{border-left:0;background:none;min-width:0;padding:0 8px 0 0}
.rng-method{display:grid;gap:9px;padding-top:12px;border-top:1px solid var(--soft)}
.rng-method .v2-switch{align-items:flex-start;line-height:1.45}
.rng-method .v2-switch i{margin-top:1px}
.rng-method .v2-switch.is-off{opacity:.5;cursor:not-allowed}
.rng-go{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.rng-draw{justify-content:center;font-size:15px}
.rng-sum{margin:-4px 0 0;min-height:2.9em;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--muted)}
.rng-sum.is-error{color:var(--accent)}

/* ---------- 결과판 ---------- */
.rng-shead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.rng-stitle{flex:1 1 180px;min-width:0;margin:0;display:grid;gap:2px}
.rng-round{overflow-wrap:break-word;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rng-shead .v2-seg button:disabled{opacity:.45;cursor:not-allowed}
.rng-box{position:relative;flex:1 0 auto;container-type:inline-size;display:grid;place-items:center;min-width:0;min-height:206px;padding:22px 14px;border:1px solid var(--soft);background-color:var(--wash);background-image:radial-gradient(var(--line) .6px,transparent .7px);background-size:12px 12px;outline:0}
.rng-box::before,.rng-box::after{content:"";position:absolute;left:10px;right:10px;border-top:1px solid var(--soft);pointer-events:none}
.rng-box::before{top:6px}
.rng-box::after{bottom:6px}
.rng-box[data-state="filled"] .rng-empty{display:none}
.rng-empty{display:grid;justify-items:center;gap:10px;text-align:center}
.rng-empty p{margin:0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.rng-q{display:grid;place-items:center;width:92px;height:92px;border:1px dashed var(--line);background:var(--paper);font-family:var(--sans);font-size:48px;font-weight:800;color:var(--line)}
.rng-cards{display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:10px;width:100%;margin-inline:auto;min-width:0;max-height:430px;margin-block:0;padding:4px 6px 8px;list-style:none;overflow:auto;scrollbar-width:thin}
.rng-card{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-width:64px;padding:12px 14px 9px;border:1px solid var(--line);background:var(--paper);box-shadow:3px 4px 0 var(--soft);cursor:default}
.rng-card::after{content:"";position:absolute;top:-1px;right:-1px;width:11px;height:11px;background:linear-gradient(225deg,var(--wash) 0 50%,var(--soft) 50% 100%);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.rng-n{min-width:var(--w,2ch);font-family:var(--sans);font-size:30px;font-weight:800;line-height:1.05;text-align:center;letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;color:var(--ink)}
.rng-card small{font-family:var(--sans);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rng-cards.is-one .rng-card{min-width:min(100%,220px);min-height:168px;padding:18px 30px 12px}
.rng-cards.is-one .rng-n{font-size:clamp(18px,calc(70cqi / var(--wn,2)),104px);line-height:1}
.rng-cards.is-some .rng-card{min-width:0;padding:10px 9px 8px}
.rng-cards.is-some .rng-n{font-size:clamp(12px,calc(((100cqi - 28px) / var(--k,4) - 30px) / (.62 * var(--wn,2))),44px)} /* k 장이 한 줄에 들어가는 크기(카드 = 글자 폭 + 안쪽 여백 22 + 간격 10 + 그림자) */
.rng-cards.is-many{gap:7px}
.rng-cards.is-many .rng-card{min-width:52px;padding:7px 8px 5px;box-shadow:2px 2px 0 var(--soft)}
.rng-cards.is-many .rng-card::after{display:none}
.rng-cards.is-many .rng-n{font-size:18px}
.rng-cards.is-many small{font-size:9.5px}
.rng-cards.is-lots{gap:4px;justify-content:flex-start}
.rng-cards.is-lots .rng-card{min-width:0;padding:3px 7px;box-shadow:none}
.rng-cards.is-lots .rng-card::after,.rng-cards.is-lots small{display:none}
.rng-cards.is-lots .rng-n{font-size:13.5px;font-weight:700}
.rng-card.is-hidden{cursor:pointer;background:color-mix(in srgb,var(--paper) 70%,var(--wash))}
.rng-card.is-hidden .rng-n,.rng-card.is-roll .rng-n{color:var(--muted)}
.rng-card.is-next{border-color:var(--accent);box-shadow:3px 4px 0 var(--accent-wash),0 0 0 1px var(--accent)}
.rng-card.is-active{border-color:var(--ink)}
.rng-card.is-hit{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--paper))}
.rng-card.is-hit .rng-n{color:var(--accent)}
.rng-card.is-pop{animation:rng-pop .32s cubic-bezier(.2,.9,.3,1.3)}
.rng-card.is-flip{animation:rng-flip .36s ease-out}
@keyframes rng-pop{0%{transform:translateY(-6px) scale(1.07)}100%{transform:none}}
@keyframes rng-flip{0%{transform:perspective(500px) rotateY(80deg)}100%{transform:none}}
.rng-countdown{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:var(--wash);font-family:var(--sans);font-size:clamp(72px,22cqi,128px);font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.rng-countdown[hidden]{display:none}
.rng-fx{position:absolute;left:50%;top:45%;z-index:4;pointer-events:none}
.rng-fx span{position:absolute;width:7px;height:11px;margin:-5px 0 0 -3px;animation:rng-burst 1s cubic-bezier(.1,.7,.3,1) forwards}
.rng-fx .is-a{background:var(--accent)}
.rng-fx .is-b{background:var(--ink)}
.rng-fx .is-c{background:var(--line);width:9px;height:9px}
.rng-fx .is-d{background:var(--fill);height:6px}
@keyframes rng-burst{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 40px)) rotate(var(--r));opacity:0}}
.rng-reveal{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rng-reveal[hidden]{display:none}
.rng-left{font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 눈금자: 범위 안 어디에 떨어졌나 */
.rng-ruler{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:10px;min-width:0}
.rng-rend{font-family:var(--sans);font-size:12px;font-weight:700;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rng-track{position:relative;height:14px;min-width:0;border-bottom:1px solid var(--line);background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:10% 5px;background-repeat:repeat-x;background-position:0 100%}
.rng-track::after{content:"";position:absolute;right:0;bottom:0;height:5px;border-right:1px solid var(--line)}
.rng-exr{position:absolute;bottom:0;height:12px;background:repeating-linear-gradient(135deg,var(--line) 0 1.5px,transparent 1.5px 5px);opacity:.7}
.rng-dot{position:absolute;bottom:3px;width:9px;height:9px;margin-left:-4.5px;border:1px solid var(--paper);background:var(--accent);transform:rotate(45deg)}
.rng-track.is-dense .rng-dot{bottom:0;width:1px;height:12px;margin-left:0;border:0;transform:none;opacity:.8}

/* 통계 3칸 */
.rng-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--soft)}
.rng-stats > div{min-width:0;padding:9px 12px 10px;border-left:1px solid var(--soft)}
.rng-stats > div:first-child{border-left:0;padding-left:0}
.rng-stats dt{font-family:var(--sans);font-size:11.5px;line-height:1.35;color:var(--muted)}
.rng-stats dd{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:4px 0 0;font-family:var(--sans);font-size:19px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.rng-mini{padding:0;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rng-mini[hidden]{display:none}
.rng-out{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rng-out .v2-status{flex:1 1 100%}
.rng-out .v2-status:empty{display:none}
.rng-fullhint{display:none;margin:0;font-family:var(--sans);font-size:13px;color:var(--muted);text-align:center}

/* ---------- 번호판 ---------- */
.rng-pad{margin:0;display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--soft)}
.rng-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0}
.rng-headnote{font-family:var(--sans);font-size:12px;color:var(--muted)}
.rng-grid{display:grid;grid-template-columns:repeat(var(--cols,10),minmax(0,1fr));gap:3px}
.rng-c{height:28px;min-width:0;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow:hidden;white-space:nowrap;transition:background var(--ease),border-color var(--ease)}
.rng-grid.is-few .rng-c{height:40px;font-size:15px}
.rng-c:hover{border-color:var(--line)}
.rng-c:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rng-c.is-mine{box-shadow:inset 0 -3px 0 var(--accent)}
.rng-c[data-s="now"]{background:var(--accent);border-color:var(--accent);color:var(--paper);font-weight:800}
.rng-c[data-s="gone"]{background:var(--soft);border-color:var(--soft);color:var(--muted);text-decoration:line-through}
.rng-c.was-now{border:2px solid var(--accent)}
.rng-c[data-s="ex"]{background:repeating-linear-gradient(135deg,var(--soft) 0 2px,transparent 2px 5px);color:var(--muted)}
.rng-grid.is-bins{grid-template-columns:auto repeat(10,minmax(0,1fr));align-items:center}
.rng-row{padding-right:6px;font-family:var(--sans);font-size:10.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rng-b{position:relative;display:block;height:22px;border:1px solid var(--soft);background:var(--paper);overflow:hidden}
.rng-b .x,.rng-b .g{position:absolute;left:0;right:0;bottom:0}
.rng-b .x{height:calc(var(--x,0) * 100%);background:repeating-linear-gradient(135deg,var(--line) 0 1.5px,transparent 1.5px 4px);opacity:.6}
.rng-b .g{bottom:calc(var(--x,0) * 100%);height:calc(var(--g,0) * 100%);background:var(--soft)}
.rng-b b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--sans);font-size:10px;font-weight:800;color:var(--paper)}
.rng-b.is-now{border-color:var(--accent);background:var(--accent)}
.rng-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.rng-legend li{display:inline-flex;align-items:center;gap:6px}
.rng-legend li::before{content:"";width:12px;height:12px;border:1px solid var(--soft);background:var(--paper)}
.rng-legend .is-now::before{background:var(--accent);border-color:var(--accent)}
.rng-legend .is-gone::before{background:var(--soft)}
.rng-legend .is-mine{display:none}
.rng-grid:has(.is-mine) + .rng-legend .is-mine{display:inline-flex}
.rng-legend .is-mine::before{box-shadow:inset 0 -3px 0 var(--accent)}
.rng-legend .is-ex::before{background:repeating-linear-gradient(135deg,var(--line) 0 1.5px,transparent 1.5px 4px)}

/* 기록 */
.rng-hist{border-top:1px solid var(--soft);padding-top:10px}
.rng-hist summary{display:flex;align-items:baseline;gap:8px;cursor:pointer;list-style:none}
.rng-hist summary::-webkit-details-marker{display:none}
.rng-hist summary::before{content:"+";width:12px;font-family:var(--mono);font-weight:700;color:var(--accent)}
.rng-hist[open] summary::before{content:"−"}
.rng-hist summary b{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.rng-histlist{max-height:248px;margin:10px 0 0;padding:0;list-style:none;overflow:auto}
.rng-histlist li{display:grid;gap:2px;padding:7px 0;border-top:1px solid var(--soft)}
.rng-histlist span{font-family:var(--sans);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rng-histlist b{font-family:var(--sans);font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rng-histbtns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}

/* ---------- 연출·제외·내 번호 ---------- */
.rng-anim{display:grid;gap:8px}
.rng-animseg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rng-animseg button{height:auto;min-height:34px;padding:4px;line-height:1.2}
.rng-tf .v2-input input{text-align:left;font-weight:500}
.rng-tf .rng-help{margin-top:6px}
.rng-hyper{margin:10px 0 0;display:grid;gap:6px}
.rng-hyper[hidden]{display:none}
.rng-hbars{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));align-items:end;gap:3px;height:92px;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.rng-hbars:empty{display:none}
.rng-hbars li{display:grid;grid-template-rows:1fr auto;height:100%;min-width:0}
.rng-hbars i{align-self:end;display:block;background:var(--line)}
.rng-hbars span{padding-top:3px;font-family:var(--sans);font-size:10.5px;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.rng-hbars .is-got i{background:var(--accent)}
.rng-hbars .is-got span{color:var(--accent);font-weight:800}
.rng-nojs{padding:12px 18px}

/* ---------- 크게 보기(R46): 결과판만 화면을 채움. Fullscreen API 가 없으면 고정 보기 ---------- */
.rng-stage:fullscreen,.rng-stage.is-full{grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:2vmin;width:100%;height:100%;padding:3vmin 4vmin;background:var(--paper);overflow:auto}
.rng-stage.is-full{position:fixed;inset:0;z-index:1000}
html.rng-noscroll{overflow:hidden}
.rng-stage:fullscreen .rng-stats,.rng-stage.is-full .rng-stats,.rng-stage:fullscreen .rng-out,.rng-stage.is-full .rng-out{display:none}
.rng-stage:fullscreen .rng-fullhint,.rng-stage.is-full .rng-fullhint{display:block}
.rng-stage:fullscreen .rng-box,.rng-stage.is-full .rng-box{min-height:0;height:100%;container-type:size}
.rng-stage:fullscreen .rng-cards,.rng-stage.is-full .rng-cards{max-height:100%;align-content:center;height:100%}
.rng-stage:fullscreen .rng-cards.is-one .rng-n,.rng-stage.is-full .rng-cards.is-one .rng-n{font-size:min(40cqh,30cqi,300px)}
.rng-stage:fullscreen .rng-cards.is-one .rng-card,.rng-stage.is-full .rng-cards.is-one .rng-card{padding:4cqh 8cqi 2cqh}
.rng-stage:fullscreen .rng-cards.is-some .rng-n,.rng-stage.is-full .rng-cards.is-some .rng-n{font-size:min(16cqh,10cqi,140px)}
.rng-stage:fullscreen .rng-cards.is-many .rng-n,.rng-stage.is-full .rng-cards.is-many .rng-n{font-size:min(6cqh,4cqi,48px)}
.rng-stage:fullscreen .rng-q,.rng-stage.is-full .rng-q{width:24vmin;height:24vmin;font-size:12vmin}

@container rng (max-width:420px){
  .rng-stats > div{padding:8px 8px 9px}
  .rng-stats dd{font-size:16px}
  .rng-cards.is-one .rng-card{min-height:140px}
}
@media (prefers-reduced-motion:reduce){
  .rng-card.is-pop,.rng-card.is-flip{animation:none}
  .rng-fx{display:none}
}