@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Pretendard:wght@600;800&display=swap');

:root {
    --bg-gradient: radial-gradient(circle at center, #4c0505 0%, #000000 100%);
    --card-bg: #1a0000;
    --text-main: #ffffff;
    --text-sub: #fecaca;
    --row-bg: rgba(255, 255, 255, 0.05);
    --border-color: #ff4d4d;
}

.light-mode {
    --bg-gradient: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
    --card-bg: #ffffff;
    --text-main: #1f2937;
    --text-sub: #4b5563;
    --row-bg: #f9fafb;
    --border-color: #ef4444;
}

body { 
    font-family: 'Pretendard', sans-serif; 
    background: var(--bg-gradient);
    color: var(--text-main);
    transition: background 0.5s ease;
}

.title-font { font-family: 'Black Han Sans', sans-serif; }

.fire-border {
    position: relative;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.ball {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 32px; height: 32px; color: white; border-radius: 50%;
    font-weight: bold; font-size: 0.8rem; margin: 1px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform: scale(0) rotate(-180deg);
}
.ball.show { transform: scale(1) rotate(0deg); }

.bg-lotto-1 { background: linear-gradient(135deg, #ffd700, #ff8c00); color: #4c0505; }
.bg-lotto-11 { background: linear-gradient(135deg, #ff4d4d, #b30000); }
.bg-lotto-21 { background: linear-gradient(135deg, #ff1a1a, #800000); }
.bg-lotto-31 { background: linear-gradient(135deg, #666666, #333333); }
.bg-lotto-41 { background: linear-gradient(135deg, #22c55e, #166534); }

.bonus-plus { color: var(--border-color); font-weight: bold; margin: 0 4px; opacity: 0; }
.bonus-plus.show { opacity: 1; }

.row-container { 
    opacity: 0; transform: translateX(-20px); transition: all 0.6s ease-out; 
    background: var(--row-bg);
}
.row-container.appear { opacity: 1; transform: translateX(0); }

.mode-toggle {
    position: absolute; top: 20px; right: 20px;
    background: var(--row-bg); border: 1px solid var(--border-color);
    padding: 8px; border-radius: 50%; cursor: pointer; z-index: 10;
}

/* 캡쳐 시 버튼들 숨기기 위한 클래스 */
.no-capture { transition: opacity 0.3s; }