@charset "utf-8";

:root { 
	--ball-size: 46px; 
	--ball-font: 1rem; 
	--lotto-primary: #667eea;
	--lotto-primary-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.lotto-viewer-wrapper { 
	max-width: 100%; 
	background: var(--bs-body-bg);
}

#nav-wrap { 
	background: var(--bs-body-bg); 
	padding: 1rem; 
	border: 1px solid var(--bs-border-color);
	margin-bottom: 10px; 
    position: sticky; 
    top: 0; 
	border-radius: 12px;
    z-index: 100; 
}

#nav-wrap select { 
	max-width:190px;
	font-weight:600;
}

@media (max-width: 576px) {
	#nav-wrap select { 
	max-width:90px;
	font-weight:600;
}
}

.nav-btn { 
    border-radius: 10px; 
    width: 30px; 
    height: 30px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

#badge-epsd { 
    background: var(--lotto-primary-grad) !important; 
    border-radius: 8px; 
    font-weight: 800; 
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}

/* ── 로또 볼 ── */
.ball {
    display: inline-flex;
	align-items: center;
	justify-content: center;
    width: var(--ball-size);
	height: var(--ball-size);
    border-radius: 50%;
	font-size: var(--ball-font);
	font-weight: 800;
	color: #fff;
    position: relative;
	flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset -2px -3px 5px rgba(0,0,0,0.2);
}

.ball::after {
    content: '';
	position: absolute;
	top: 15%;
	left: 20%;
    width: 25%;
	height: 15%;
	background: rgba(255,255,255,0.4);
    border-radius: 50%;
	transform: rotate(-30deg);
}

.ball-yellow { background: radial-gradient(circle at 30% 30%, #ffd93d, #f39c12); }
.ball-blue   { background: radial-gradient(circle at 30% 30%, #4facfe, #0061ff); }
.ball-red    { background: radial-gradient(circle at 30% 30%, #ff5f6d, #d63031); }
.ball-gray   { background: radial-gradient(circle at 30% 30%, #bdc3c7, #2d3436); }
.ball-green  { background: radial-gradient(circle at 30% 30%, #2ecc71, #218c74); }

.balls-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
	padding: 0 20px;
	flex-wrap: wrap;
}

.plus-sign {
	font-size: 1.4rem;
	font-weight: 800;
	color: #fff;
	opacity: 0.7;
}

@media (max-width: 576px) {
	.ball {
		width: 30px;
		height: 30px;
		font-size: 0.8rem;
	}
}

/* ── 메인 카드 ── */
.lotto-header-card {
    background: var(--lotto-primary-grad);
    border-radius: 12px;
	padding: 1.8rem 0 2rem;
    color: #fff;
	text-align: center;
	margin-bottom: 15px;
}

.round-badge {
	font-size: 2.2rem;
	font-weight: 900;
	letter-spacing: -1px;
}
  
/* ── 등위 리스트 (가로 한줄) ── */
.rank-grid {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-bottom: 15px;
}

.rank-box {
    display: grid;
	grid-template-columns: auto 1fr auto !important;
	align-items: center;
    background: var(--bs-tertiary-bg);
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
    border: 1px solid var(--bs-border-color);
	transition: transform 0.2s;
}

.rk-num {
	font-weight: 900;
	font-size: 1.05rem;
}

.rank-info-mid {
	padding-left: 1rem;
	text-align: left;
}

.rk-per {
	font-size: 1rem;
	font-weight: 800;
	color: var(--bs-emphasis-color);
	display: block;
}

.rk-count{
	font-size:0.75rem;
	opacity:0.6;
	line-height:1;
}

.rk-count span{
	display:block;
	margin-top:-2px;
}

.rk-total-wrap {
	text-align: right;
}

.rk-total-label {
	font-size: 0.65rem;
	opacity: 0.5;
	font-weight: 700;
}

.rk-total-val {
	font-size: 0.8rem;
	font-weight: 600;
	opacity: 0.9;
}

/* 등위별 포인트 */
.rk-num-1 { color: #f1c40f; } .rank-box-1 { border-left: 4px solid #f1c40f; }
.rk-num-2 { color: #3498db; } .rank-box-2 { border-left: 4px solid #3498db; }
.rk-num-3 { color: #95a5a6; } .rank-box-3 { border-left: 4px solid #95a5a6; }
.rk-num-4 { color: #e67e22; } .rank-box-4 { border-left: 4px solid #e67e22; }
.rk-num-5 { color: #9b59b6; } .rank-box-5 { border-left: 4px solid #9b59b6; }

/* ── 하단 요약 ── */
.summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
	padding: 0;
}

.summary-box { 
    background: var(--bs-tertiary-bg);
	border-radius: 14px; 
    padding: 1rem;
	border: 1px solid var(--bs-border-color);
	text-align: center; 
}

.s-label {
	font-size: 0.7rem;
	font-weight: 700;
	opacity: 0.5;
	margin-bottom: 0.3rem;
}

.s-val {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--bs-emphasis-color);
}

/* ── 애니메이션 & 로딩 ── */
@keyframes ballDrop {
    0% {
		transform: translateY(-15px) scale(0.8);
		opacity: 0;
	}
    100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

.ball.animate {
	animation: ballDrop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

#lotto-content.loading {
	opacity: 0.4;
	filter: grayscale(1);
	pointer-events: none;
}

#spinner-wrap {
	z-index: 1000;
	background: rgba(var(--bs-body-bg-rgb), 0.7);
	backdrop-filter: blur(2px);
}

@media (max-width: 480px) {
    :root { --ball-size: 38px; --ball-font: 0.9rem; }
    .round-badge { font-size: 1.8rem; }
    .rank-box { padding: 0.8rem 1rem; grid-template-columns: 45px 1fr auto; }
}