:root {
    --bg-color: oklch(98% 0.02 240);
    --container-bg: oklch(100% 0 0);
    --text-color: oklch(45% 0.25 240);
    --btn-bg: oklch(65% 0.25 240);
    --btn-hover-bg: oklch(70% 0.28 240);
    --number-bg: oklch(95% 0.05 150);
    --number-text: oklch(40% 0.2 150);
    --shadow-color: oklch(0% 0 0 / 10%);
}

[data-theme='dark'] {
    --bg-color: oklch(20% 0.02 240);
    --container-bg: oklch(25% 0.03 240);
    --text-color: oklch(90% 0.05 240);
    --btn-bg: oklch(55% 0.2 240);
    --btn-hover-bg: oklch(60% 0.22 240);
    --number-bg: oklch(40% 0.1 150);
    --number-text: oklch(95% 0.05 150);
    --shadow-color: oklch(0% 0 0 / 30%);
}

body {
    font-family: 'Pretendard', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: var(--bg-color);
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%" height="100%" filter="url(%23n)" opacity="0.1"/%3E%3C/svg%3E');
    transition: background-color 0.3s ease;
}

.container {
    text-align: center;
    padding: 40px;
    background-color: var(--container-bg);
    border-radius: 16px;
    box-shadow: 0 10px 20px var(--shadow-color), 0 6px 6px var(--shadow-color);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: 2px solid var(--text-color);
    color: var(--text-color);
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--text-color);
    color: var(--container-bg);
}

h1 {
    color: var(--text-color);
    margin-bottom: 24px;
    transition: color 0.3s ease;
}

#generator-btn {
    background-color: var(--btn-bg);
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 1.2em;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--btn-bg);
}

#generator-btn:hover {
    background-color: var(--btn-hover-bg);
    box-shadow: 0 6px 20px var(--btn-bg);
    transform: translateY(-2px);
}

.lotto-numbers {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.lotto-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: inset -3px -3px 6px rgba(0,0,0,0.2), 0 4px 8px var(--shadow-color);
    transition: all 0.3s ease;
}

/* 로또 번호대별 색상 */
.ball-10 { background: radial-gradient(circle at 30% 30%, #fbc400, #ff8c00); } /* 1-10: 노란색 */
.ball-20 { background: radial-gradient(circle at 30% 30%, #69c8f2, #0077b6); } /* 11-20: 파란색 */
.ball-30 { background: radial-gradient(circle at 30% 30%, #ff7272, #d90429); } /* 21-30: 빨간색 */
.ball-40 { background: radial-gradient(circle at 30% 30%, #aaaaaa, #495057); } /* 31-40: 회색 */
.ball-45 { background: radial-gradient(circle at 30% 30%, #b0d840, #52b788); } /* 41-45: 초록색 */

.set-container {
    padding: 15px;
    border-bottom: 1px dashed var(--shadow-color);
    animation: fadeIn 0.5s ease-out;
}

.set-container:last-child {
    border-bottom: none;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}