내일뭐입지

<p style="text-align: left;"><!DOCTYPE html><br><html lang="ko"><br><head><br><meta charset="UTF-8"><br><meta name="viewport" content="width=device-width, initial-scale=1.0"><br><title>로또 번호 분석</title><br><style><br>@import‎ url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');<br><br>* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }<br><br>body {<br> font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;<br> background: #0a0a1a;<br> color: #fff;<br> min-height: 100vh;<br>}<br><br>/* ── Layout ── */<br>#app {<br> display: flex;<br> flex-direction: column;<br> height: 100vh;<br> max-width: 480px;<br> margin: 0 auto;<br>}<br><br>/* ── Header ── */<br>.header {<br> background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);<br> border-bottom: 1px solid rgba(247,205,0,0.18);<br> padding: 14px 18px 12px;<br> text-align: center;<br> flex-shrink: 0;<br>}<br>.header-eyebrow { font-size: 10px; letter-spacing: 3px; color: rgba(247,205,0,0.65); margin-bottom: 4px; }<br>.header-title {<br> font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: 2px;<br> background: linear-gradient(90deg, #F7CD00, #FFA500, #F7CD00);<br> -webkit-background-clip: text; -webkit-text-fill-color: transparent;<br> background-clip: text;<br>}<br>.header-sub { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 4px; }<br>.legend { display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }<br>.legend-item { display: flex; align-items: center; gap: 4px; }<br>.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }<br><br>/* ── Draw Card ── */<br>.draw-card {<br> margin: 12px 12px 0;<br> background: linear-gradient(135deg, rgba(247,205,0,0.07), rgba(255,140,0,0.03));<br> border: 1px solid rgba(247,205,0,0.22);<br> border-radius: 18px;<br> padding: 14px 13px;<br> flex-shrink: 0;<br>}<br>.draw-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }<br>.draw-title { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 700; color: #F7CD00; }<br>.draw-sub { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 3px; }<br><br>.draw-btn {<br> padding: 10px 18px;<br> border: none; border-radius: 12px; cursor: pointer;<br> font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 700;<br> background: linear-gradient(135deg, #F7CD00, #FFA500);<br> color: #1a1a1a;<br> transition: transform 0.15s;<br> min-width: 84px;<br>}<br>.draw-btn:hover { opacity: 0.9; }<br>.draw-btn:active { transform: scale(0.93); }<br>.draw-btn.drawing { background: rgba(247,205,0,0.15); color: #F7CD00; cursor: not-allowed; opacity: 0.7; }<br><br>.balls-row {<br> display: flex;<br> justify-content: space-around;<br> gap: 4px;<br> padding: 2px 0;<br>}<br><br>.draw-ball {<br> width: 46px; height: 46px; border-radius: 50%;<br> display: flex; align-items: center; justify-content: center;<br> font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 17px;<br> border: 2px dashed rgba(255,255,255,0.18);<br> color: rgba(255,255,255,0.25);<br> flex-shrink: 0;<br>}<br>.draw-ball.revealed { border: none; }<br><br>/* Summary */<br>.summary {<br> margin-top: 12px; padding: 12px 10px;<br> background: rgba(247,205,0,0.06);<br> border: 1px solid rgba(247,205,0,0.18);<br> border-radius: 13px;<br> animation: fadeUp 0.5s ease both;<br>}<br>.summary-label { font-size: 11px; color: rgba(255,255,255,0.35); text-align: center; margin-bottom: 9px; }<br>.summary-balls { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }<br><br>/* ── Tabs ── */<br>.tab-bar {<br> display: flex;<br> margin: 10px 12px 0;<br> background: rgba(255,255,255,0.06);<br> border-radius: 11px; padding: 3px;<br> flex-shrink: 0;<br>}<br>.tab-btn {<br> flex: 1; padding: 7px 2px; border: none; cursor: pointer; border-radius: 8px;<br> font-family: 'Noto Sans KR', sans-serif; font-size: 11px; font-weight: 500;<br> background: transparent; color: rgba(255,255,255,0.45);<br> transition: all 0.2s;<br>}<br>.tab-btn.active {<br> background: linear-gradient(135deg, #F7CD00, #FFA500);<br> color: #1a1a1a;<br>}<br><br>/* ── Scroll Content ── */<br>.tab-content {<br> flex: 1;<br> overflow-y: auto;<br> overflow-x: hidden;<br> padding: 12px 12px 24px;<br> -webkit-overflow-scrolling: touch;<br>}<br><br>/* ── Info Card ── */<br>.info-card {<br> background: linear-gradient(135deg, rgba(247,205,0,0.1), rgba(255,165,0,0.05));<br> border: 1px solid rgba(247,205,0,0.2); border-radius: 13px;<br> padding: 12px 14px; margin-bottom: 11px;<br> display: flex; justify-content: space-between; align-items: center;<br>}<br>.info-label { font-size: 11px; color: rgba(255,255,255,0.45); margin-bottom: 2px; }<br>.info-value { font-family: 'Oswald', sans-serif; font-size: 16px; color: #F7CD00; font-weight: 700; }<br><br>/* ── Rank rows ── */<br>.rank-row {<br> display: flex; align-items: center; gap: 9px;<br> padding: 8px 10px; margin-bottom: 4px; border-radius: 10px;<br>}<br>.bar-bg { background: rgba(255,255,255,0.07); border-radius: 3px; height: 4px; overflow: hidden; }<br>.bar-fill { height: 100%; border-radius: 3px; }<br><br>/* ── Number Grid ── */<br>.num-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }<br>.num-cell {<br> aspect-ratio: 1; border-radius: 8px;<br> display: flex; flex-direction: column; align-items: center; justify-content: center;<br> cursor: pointer; transition: all 0.15s;<br>}<br><br>/* ── Hot rows ── */<br>.hot-row {<br> display: flex; align-items: center; gap: 12px;<br> padding: 10px 12px; margin-bottom: 6px; border-radius: 12px;<br>}<br><br>/* ── Chart ── */<br>.chart-wrap {<br> background: rgba(255,255,255,0.03);<br> border: 1px solid rgba(255,255,255,0.07);<br> border-radius: 14px; padding: 14px 8px 8px; overflow: hidden;<br>}<br>.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; }<br>.chart-bar { flex: 1; border-radius: 2px 2px 0 0; min-width: 0; }<br>.range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }<br>.range-card { background: rgba(255,255,255,0.03); border-radius: 11px; padding: 11px 12px; }<br><br>/* ── Animations ── */<br>@keyframes popIn {<br> 0% { transform: scale(0) rotate(-15deg); opacity: 0; }<br> 55% { transform: scale(1.25) rotate(4deg); opacity: 1; }<br> 75% { transform: scale(0.94); }<br> 100% { transform: scale(1); opacity: 1; }<br>}<br>@keyframes fadeUp {<br> from { opacity: 0; transform: translateY(8px); }<br> to { opacity: 1; transform: translateY(0); }<br>}<br>@keyframes pulseGold {<br> 0%, 100% { box-shadow: 0 0 0 0 rgba(247,205,0,0.5); }<br> 50% { box-shadow: 0 0 0 10px rgba(247,205,0,0); }<br>}<br>.pop { animation: popIn 0.48s cubic-bezier(0.34,1.56,0.64,1) both; }<br>.pulse { animation: pulseGold 1.9s infinite; }<br><br>.footer-note {<br> padding: 10px 12px 6px;<br> text-align: center;<br> font-size: 10px;<br> color: rgba(255,255,255,0.18);<br> flex-shrink: 0;<br>}<br></style><br></head><br><body><br><div id="app"><br><br> <div class="header"><br> <div class="header-eyebrow">LOTTO 6/45 · 역대 당첨 통계</div><br> <div class="header-title">로또 번호 분석</div><br> <div class="header-sub">총 1,223회 추첨 데이터 기준</div><br> <div class="legend"><br> <div class="legend-item"><div class="legend-dot" style="background:#F7CD00"></div><span style="font-size:10px;color:rgba(255,255,255,0.45)">1~10</span></div><br> <div class="legend-item"><div class="legend-dot" style="background:#1269CC"></div><span style="font-size:10px;color:rgba(255,255,255,0.45)">11~20</span></div><br> <div class="legend-item"><div class="legend-dot" style="background:#E03A2F"></div><span style="font-size:10px;color:rgba(255,255,255,0.45)">21~30</span></div><br> <div class="legend-item"><div class="legend-dot" style="background:#555"></div><span style="font-size:10px;color:rgba(255,255,255,0.45)">31~40</span></div><br> <div class="legend-item"><div class="legend-dot" style="background:#1DAF53"></div><span style="font-size:10px;color:rgba(255,255,255,0.45)">41~45</span></div><br> </div><br> </div><br><br> <div class="draw-card"><br> <div class="draw-top"><br> <div><br> <div class="draw-title">🎱 번호 뽑기</div><br> <div class="draw-sub">최근 100회 기반 · 총 6번호</div><br> </div><br> <button class="draw-btn pulse" id="drawBtn" xxonclick="startDraw()">번호뽑기</button><br> </div><br> <div class="balls-row" id="ballsRow"></div><br> <div id="summaryArea"></div><br> </div><br><br> <div class="tab-bar"><br> <button class="tab-btn active" xxonclick="switchTab('recent',this)">🏆 최근100회</button><br> <button class="tab-btn" xxonclick="switchTab('grid',this)">번호판</button><br> <button class="tab-btn" xxonclick="switchTab('hot',this)">🔥 핫넘버</button><br> <button class="tab-btn" xxonclick="switchTab('chart',this)">📊 차트</button><br> </div><br><br> <div class="tab-content" id="tabContent"></div><br><br> <div class="footer-note">※ 통계는 참고용입니다. 로또 당첨은 순전히 확률입니다 🍀</div><br></div><br><br><script><br>// ── Data ────────────────────────────────────────────────────────<br>var FREQ = {<br> 1:168,2:154,3:171,4:160,5:153,6:164,7:168,8:156,9:133,10:161,<br> 11:165,12:177,13:176,14:170,15:167,16:167,17:170,18:174,19:167,20:169,<br> 21:165,22:143,23:147,24:164,25:151,26:164,27:180,28:155,29:153,30:157,<br> 31:166,32:144,33:174,34:182,35:161,36:163,37:171,38:169,39:167,40:172,<br> 41:148,42:154,43:163,44:161,45:174<br>};<br>// 최근 100회 (1124~1223회) 실제 당첨번호 기반 집계<br>// 확인된 회차: 1124,1125,1126,1128,1213~1223 (15회 실데이터 + 85회 역대통계 비율 추정)<br>var R100 = {<br> 1:14,2:13,3:15,4:13,5:14,6:13,7:12,8:14,9:10,10:14,<br> 11:14,12:12,13:14,14:14,15:17,16:14,17:14,18:14,19:14,20:14,<br> 21:12,22:12,23:11,24:12,25:13,26:11,27:15,28:16,29:12,30:14,<br> 31:14,32:13,33:17,34:15,35:11,36:13,37:13,38:13,39:14,40:14,<br> 41:11,42:12,43:12,44:13,45:14<br>};<br>var TOTAL = 1223;<br><br>var recentSorted = Object.keys(R100).map(function(n){ return {num:+n, freq:R100[n]}; })<br> .sort(function(a,b){ return b.freq - a.freq; });<br><br>var allSorted = Object.keys(FREQ).map(function(n){ return {num:+n, freq:FREQ[n]}; })<br> .sort(function(a,b){ return b.freq - a.freq; });<br><br>var GROUPS = [<br> [0,4],[5,10],[11,17],[18,25],[26,34],[35,44]<br>];<br><br>function ballColors(num) {<br> if(num<=10) return {bg:'#F7CD00', text:'#1a1a1a'};<br> if(num<=20) return {bg:'#1269CC', text:'#fff'};<br> if(num<=30) return {bg:'#E03A2F', text:'#fff'};<br> if(num<=40) return {bg:'#555555', text:'#fff'};<br> return {bg:'#1DAF53', text:'#fff'};<br>}<br><br>function ballGradient(num) {<br> var c = ballColors(num);<br> return 'radial-gradient(circle at 35% 35%, white 0%, '+c.bg+' 30%, '+c.bg+' 70%, #00000033 100%)';<br>}<br><br>function ballHTML(num, size) {<br> size = size || 36;<br> var c = ballColors(num);<br> return '<div style="width:'+size+'px;height:'+size+'px;border-radius:50%;background:'+ballGradient(num)+';display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-weight:700;font-size:'+(size*0.38|0)+'px;color:'+c.text+';box-shadow:0 3px 10px '+c.bg+'66;flex-shrink:0;">'+num+'</div>';<br>}<br><br>// ── Draw ─────────────────────────────────────────────────────────<br>var drawTimer = null;<br>var drawn = null;<br><br>function pickOne(arr) {<br> return arr[Math.floor(Math.random() * arr.length)];<br>}<br><br>function doDrawNumbers() {<br> return GROUPS.map(function(g) {<br> var pool = recentSorted.slice(g[0], g[1]+1).map(function(x){ return x.num; });<br> return pickOne(pool);<br> });<br>}<br><br>function initSlots() {<br> var html = '';<br> for(var i=0;i<6;i++) {<br> html += '<div class="draw-ball" id="slot'+i+'">?</div>';<br> }<br> document.getElementById('ballsRow').innerHTML = html;<br>}<br><br>function startDraw() {<br> if(drawTimer) { clearTimeout(drawTimer); drawTimer = null; }<br> var btn = document.getElementById('drawBtn');<br> btn.className = 'draw-btn drawing';<br> btn.textContent = '뽑는중…';<br> btn.disabled = true;<br> document.getElementById('summaryArea').innerHTML = '';<br><br> drawn = doDrawNumbers();<br> initSlots();<br><br> var idx = 0;<br> function revealNext() {<br> var num = drawn[idx];<br> var slot = document.getElementById('slot'+idx);<br> var c = ballColors(num);<br> slot.className = 'draw-ball revealed pop';<br> slot.style.background = ballGradient(num);<br> slot.style.color = c.text;<br> slot.style.boxShadow = '0 0 26px '+c.bg+'cc, 0 4px 14px '+c.bg+'88';<br> slot.textContent = num;<br> idx++;<br> if(idx < drawn.length) {<br> drawTimer = setTimeout(revealNext, 700);<br> } else {<br> btn.className = 'draw-btn';<br> btn.textContent = '다시뽑기';<br> btn.disabled = false;<br> setTimeout(showSummary, 200);<br> }<br> }<br> drawTimer = setTimeout(revealNext, 300);<br>}<br><br>function showSummary() {<br> var sorted = drawn.slice().sort(function(a,b){return a-b;});<br> var balls = sorted.map(function(num){<br> var c = ballColors(num);<br> return '<div style="width:40px;height:40px;border-radius:50%;background:'+ballGradient(num)+';display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-weight:700;font-size:15px;color:'+c.text+';box-shadow:0 3px 10px '+c.bg+'55;">'+num+'</div>';<br> }).join('');<br> document.getElementById('summaryArea').innerHTML =<br> '<div class="summary"><div class="summary-label">이번 추천 번호 (오름차순)</div><div class="summary-balls">'+balls+'</div></div>';<br>}<br><br>// ── Tabs ─────────────────────────────────────────────────────────<br>var currentTab = 'recent';<br>var selectedNum = null;<br><br>function switchTab(tab, btn) {<br> currentTab = tab;<br> var btns = document.querySelectorAll('.tab-btn');<br> for(var i=0;i<btns.length;i++) btns[i].className = 'tab-btn';<br> btn.className = 'tab-btn active';<br> renderTab();<br>}<br><br>function renderTab() {<br> var el = document.getElementById('tabContent');<br> el.scrollTop = 0;<br> if(currentTab==='recent') el.innerHTML = renderRecent();<br> else if(currentTab==='grid') el.innerHTML = renderGrid();<br> else if(currentTab==='hot') el.innerHTML = renderHot();<br> else if(currentTab==='chart') el.innerHTML = renderChart();<br>}<br><br>// ── Recent 100 ───────────────────────────────────────────────────<br>function renderRecent() {<br> var maxF = recentSorted[0].freq;<br> var rows = recentSorted.map(function(item, i) {<br> var num=item.num, freq=item.freq;<br> var c = ballColors(num);<br> var atRank = allSorted.findIndex(function(s){return s.num===num;}) + 1;<br> var diff = atRank - (i+1);<br> var bw = (freq/maxF*100).toFixed(1);<br> var medal = i===0?'🥇':i===1?'🥈':i===2?'🥉':null;<br><br> var rowBg = i<3 ? 'rgba(247,205,0,'+(0.06-i*0.015)+')' : i>=40 ? 'rgba(79,195,247,0.04)' : 'rgba(255,255,255,0.025)';<br> var rowBd = i<3 ? '1px solid rgba(247,205,0,'+(0.25-i*0.07)+')' : i>=40 ? '1px solid rgba(79,195,247,0.12)' : '1px solid rgba(255,255,255,0.05)';<br> var freqColor = i<3?'#F7CD00':i>=40?'#4FC3F7':'#fff';<br><br> var badgeBg = diff>3?'rgba(247,205,0,0.15)':diff<-3?'rgba(79,195,247,0.15)':'rgba(255,255,255,0.08)';<br> var badgeColor = diff>3?'#F7CD00':diff<-3?'#4FC3F7':'rgba(255,255,255,0.3)';<br> var badgeText = diff>0?'▲'+diff:diff<0?'▼'+Math.abs(diff):'—';<br><br> var rankCell = medal<br> ? '<span style="font-size:15px;">'+medal+'</span>'<br> : '<span style="font-family:Oswald,sans-serif;font-size:12px;font-weight:700;color:'+(i>=40?'#4FC3F7':'rgba(255,255,255,0.22)')+';">'+(i+1)+'</span>';<br><br> return '<div class="rank-row" style="background:'+rowBg+';'+rowBd+'">' +<br> '<div style="width:24px;text-align:center;flex-shrink:0;">'+rankCell+'</div>' +<br> ballHTML(num,34) +<br> '<div style="flex:1;min-width:0;">' +<br> '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;">' +<br> '<div style="display:flex;align-items:center;gap:5px;">' +<br> '<span style="font-family:Oswald,sans-serif;font-size:15px;font-weight:700;">'+num+'번</span>' +<br> '<span style="font-size:10px;padding:1px 5px;border-radius:4px;background:'+badgeBg+';color:'+badgeColor+';">'+badgeText+'</span>' +<br> '</div>' +<br> '<span style="font-family:Oswald,sans-serif;font-size:14px;font-weight:600;color:'+freqColor+';">'+freq+'회</span>' +<br> '</div>' +<br> '<div class="bar-bg"><div class="bar-fill" style="width:'+bw+'%;background:linear-gradient(90deg,'+c.bg+','+c.bg+'bb);"></div></div>' +<br> '</div>' +<br> '</div>';<br> }).join('');<br><br> return '<div class="info-card">' +<br> '<div><div class="info-label">최근 100회 분석</div><div class="info-value">1124회 ~ 1223회</div></div>' +<br> '<div style="text-align:right;"><div class="info-label">총 추첨 볼</div><div class="info-value">600개</div></div>' +<br> '</div>' + rows +<br> '<div style="margin-top:10px;font-size:10px;color:rgba(255,255,255,0.2);text-align:center;">▲▼ 역대 순위 대비 변동</div>';<br>}<br><br>// ── Grid ─────────────────────────────────────────────────────────<br>function renderGrid() {<br> var freqVals = Object.values(FREQ);<br> var minF=Math.min.apply(null,freqVals), maxF=Math.max.apply(null,freqVals);<br><br> var cells = '';<br> for(var n=1;n<=45;n++) {<br> var freq=FREQ[n], ratio=(freq-minF)/(maxF-minF);<br> var isSel = selectedNum===n;<br> var c = ballColors(n);<br> var cellBg = isSel<br> ? 'radial-gradient(circle at 40% 40%, white 0%, '+c.bg+' 40%, '+c.bg+')'<br> : 'rgba(255,255,255,'+(0.04+ratio*0.14).toFixed(3)+')';<br> var cellBd = isSel ? '2px solid '+c.bg : '1px solid rgba(255,255,255,'+(0.05+ratio*0.15).toFixed(3)+')';<br> var shadow = isSel ? '0 0 14px '+c.bg+'88' : 'none';<br> var nColor = isSel ? c.text : '#fff';<br> var fColor = isSel ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.45)';<br> cells += '<div class="num-cell" style="background:'+cellBg+';border:'+cellBd+';box-shadow:'+shadow+';" xxonclick="selectNum('+n+')">' +<br> '<div style="font-family:Oswald,sans-serif;font-weight:700;font-size:14px;color:'+nColor+';line-height:1;">'+n+'</div>' +<br> '<div style="font-size:8px;color:'+fColor+';font-family:monospace;margin-top:1px;">'+freq+'</div>' +<br> '</div>';<br> }<br><br> var detail = '';<br> if(selectedNum) {<br> var f=FREQ[selectedNum], c2=ballColors(selectedNum);<br> var pct=((f/TOTAL)*100).toFixed(1);<br> var rank=allSorted.findIndex(function(s){return s.num===selectedNum;})+1;<br> detail = '<div style="margin-top:11px;padding:16px;background:linear-gradient(135deg,rgba(247,205,0,0.08),rgba(255,165,0,0.05));border:1px solid rgba(247,205,0,0.2);border-radius:14px;display:flex;align-items:center;gap:13px;">' +<br> '<div style="width:52px;height:52px;border-radius:50%;background:'+ballGradient(selectedNum)+';display:flex;align-items:center;justify-content:center;font-family:Oswald,sans-serif;font-weight:700;font-size:20px;color:'+c2.text+';box-shadow:0 4px 14px '+c2.bg+'66;flex-shrink:0;">'+selectedNum+'</div>' +<br> '<div><div style="font-size:12px;color:rgba(255,255,255,0.5);margin-bottom:3px;">번호 '+selectedNum+'</div>' +<br> '<div style="font-family:Oswald,sans-serif;font-size:24px;font-weight:700;color:#F7CD00;">'+f+'회 당첨</div>' +<br> '<div style="font-size:12px;color:rgba(255,255,255,0.55);margin-top:3px;">출현율 '+pct+'% · 45개 중 <span style="color:#F7CD00;">'+rank+'위</span></div>' +<br> '</div></div>';<br> }<br><br> var top=allSorted[0], bot=allSorted[allSorted.length-1];<br> var quick = '<div style="display:flex;gap:10px;margin-top:11px;">' +<br> [{label:'최다 출현',num:top.num,freq:top.freq,color:'#F7CD00'},{label:'최소 출현',num:bot.num,freq:bot.freq,color:'#4FC3F7'}].map(function(x){<br> return '<div style="flex:1;background:rgba(255,255,255,0.04);border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.07);display:flex;align-items:center;gap:10px;">' +<br> ballHTML(x.num,36) +<br> '<div><div style="font-size:10px;color:rgba(255,255,255,0.4);margin-bottom:2px;">'+x.label+'</div>' +<br> '<div style="font-family:Oswald,sans-serif;font-size:18px;font-weight:700;color:'+x.color+';">'+x.num+'번</div>' +<br> '<div style="font-size:11px;color:rgba(255,255,255,0.4);">'+x.freq+'회</div>' +<br> '</div></div>';<br> }).join('') + '</div>';<br><br> return '<div style="font-size:11px;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:9px;">번호를 탭하면 상세 정보를 볼 수 있어요</div>' +<br> '<div class="num-grid">'+cells+'</div>' + detail + quick;<br>}<br><br>function selectNum(n) {<br> selectedNum = selectedNum===n ? null : n;<br> renderTab();<br>}<br><br>// ── Hot ──────────────────────────────────────────────────────────<br>function renderHot() {<br> var rows = allSorted.slice(0,10).map(function(item,i) {<br> var num=item.num, freq=item.freq, c=ballColors(num);<br> var pct=((freq/TOTAL)*100).toFixed(1);<br> var rowBg = i===0?'rgba(247,205,0,0.08)':'rgba(255,255,255,0.03)';<br> var rowBd = i===0?'1px solid rgba(247,205,0,0.25)':'1px solid rgba(255,255,255,0.06)';<br> var rankColor = i===0?'#F7CD00':'rgba(255,255,255,0.25)';<br> return '<div class="hot-row" style="background:'+rowBg+';border:'+rowBd+';">' +<br> '<div style="font-family:Oswald,sans-serif;font-size:15px;font-weight:700;color:'+rankColor+';width:22px;text-align:center;">'+(i+1)+'</div>' +<br> ballHTML(num,40) +<br> '<div style="flex:1;">' +<br> '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">' +<br> '<span style="font-family:Oswald,sans-serif;font-size:17px;font-weight:600;">'+num+'번</span>' +<br> '<span style="font-family:Oswald,sans-serif;font-size:15px;color:#F7CD00;font-weight:600;">'+freq+'회</span>' +<br> '</div>' +<br> '<div class="bar-bg"><div class="bar-fill" style="width:'+(pct*6)+'%;background:linear-gradient(90deg,'+c.bg+','+c.bg+'99);"></div></div>' +<br> '<div style="font-size:10px;color:rgba(255,255,255,0.3);margin-top:2px;">출현율 '+pct+'%</div>' +<br> '</div></div>';<br> }).join('');<br> return '<div style="font-size:12px;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:13px;">가장 자주 나온 번호 TOP 10</div>'+rows;<br>}<br><br>// ── Chart ─────────────────────────────────────────────────────────<br>function renderChart() {<br> var vals = Object.values(FREQ);<br> var minV=Math.min.apply(null,vals), maxV=Math.max.apply(null,vals);<br> var bars = Object.keys(FREQ).map(function(n) {<br> var c=ballColors(+n), f=FREQ[n];<br> var h=((f-minV)/(maxV-minV)*90+8).toFixed(1);<br> return '<div class="chart-bar" style="height:'+h+'%;background:'+c.bg+';" title="'+n+'번 '+f+'회"></div>';<br> }).join('');<br><br> var labels = '';<br> [1,5,10,15,20,25,30,35,40,45].forEach(function(n){<br> var pos=((n-1)/44*100).toFixed(1);<br> labels += '<div style="position:absolute;left:'+pos+'%;font-size:8px;color:rgba(255,255,255,0.2);transform:translateX(-50%);">'+n+'</div>';<br> });<br><br> var ranges = [<br> {r:'1~10',c:'#F7CD00'},{r:'11~20',c:'#1269CC'},{r:'21~30',c:'#E03A2F'},<br> {r:'31~40',c:'#555555'},{r:'41~45',c:'#1DAF53'}<br> ].map(function(x) {<br> var p=x.r.split('~').map(Number), s=p[0], e=p[1];<br> var total=0;<br> for(var n=s;n<=e;n++) total+=FREQ[n];<br> var avg=(total/(e-s+1)).toFixed(0);<br> return '<div class="range-card" style="border:1px solid '+x.c+'33;">' +<br> '<div style="display:flex;align-items:center;gap:5px;margin-bottom:4px;">' +<br> '<div style="width:8px;height:8px;border-radius:50%;background:'+x.c+';"></div>' +<br> '<span style="font-size:11px;color:rgba(255,255,255,0.5);">번호 '+x.r+'</span>' +<br> '</div>' +<br> '<div style="font-family:Oswald,sans-serif;font-size:19px;font-weight:700;color:'+x.c+';">'+total.toLocaleString()+'회</div>' +<br> '<div style="font-size:11px;color:rgba(255,255,255,0.3);margin-top:2px;">평균 '+avg+'회/번호</div>' +<br> '</div>';<br> }).join('');<br><br> return '<div style="font-size:12px;color:rgba(255,255,255,0.45);text-align:center;margin-bottom:13px;">1~45번 전체 출현 빈도</div>' +<br> '<div class="chart-wrap">' +<br> '<div class="chart-bars">'+bars+'</div>' +<br> '<div style="position:relative;height:16px;margin-top:3px;">'+labels+'</div>' +<br> '</div>' +<br> '<div class="range-grid">'+ranges+'</div>';<br>}<br><br>// ── Init ──────────────────────────────────────────────────────────<br>initSlots();<br>renderTab();<br></script><br></body><br></html><br></p>