/* === Global Styles & Variables === */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #f8f9fa;
    --surface-color: #ffffff;
    --text-color: #212529;
    --hot-color: #ff4757;
    --cold-color: #3742fa;
    --heading-font: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --body-font: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --box-shadow: 0 6px 15px rgba(0, 0, 0, 0.09);
    --border-radius: 16px;
}

body {
    font-family: var(--body-font);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    line-height: 1.7;
    transition: background-color 0.3s, color 0.3s;
}

/* === Dark Mode === */
body.dark-mode {
    --background-color: #1a1a1a;
    --surface-color: #2b2b2b;
    --text-color: #e0e0e0;
    --secondary-color: #a0a0a0;
    --box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* === Structure: Header & Footer === */
header { background-color: var(--surface-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); padding: 1rem 2rem; position: sticky; top: 0; z-index: 100; }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.site-title { font-family: var(--heading-font); font-size: 1.8rem; font-weight: 700; color: var(--primary-color); text-decoration: none; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; }
nav a { text-decoration: none; color: var(--secondary-color); font-weight: 500; font-size: 1rem; transition: color 0.2s; }
nav a:hover, nav a.active { color: var(--primary-color); }
footer { text-align: center; padding: 2rem; margin-top: 4rem; font-size: 0.9rem; color: var(--secondary-color); }

/* === Main Content & Layout === */
main { padding: 1rem; }
.hero { text-align: center; max-width: 800px; margin: 1rem auto 3rem auto; }
.hero h1 { font-size: 2.8rem; font-weight: 700; margin-bottom: 0.5rem; }
.hero .subtitle { font-size: 1.2rem; color: var(--secondary-color); }

/* === General Container === */
.container { max-width: 800px; margin: 2rem auto; background-color: var(--surface-color); padding: 2rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); }
.container h2 { font-weight: 700; margin-top: 0; margin-bottom: 1.5rem; text-align: center; }

/* === Lotto Ball Styles === */
.lotto-numbers { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.lotto-ball { width: 48px; height: 48px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; font-weight: 700; color: white; box-shadow: inset -3px -3px 5px rgba(0,0,0,0.25); transition: transform 0.2s; }

/* === Draw Info, Countdown, & Prizes === */
.draw-details { display: grid; grid-template-columns: 1fr 1.5fr 1.5fr; align-items: center; gap: 2rem; text-align: center; }
.draw-details h3 { color: var(--secondary-color); font-size: 1.1rem; margin-bottom: 0.5rem; }
#countdown { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); }

#prize-list { list-style: none; padding: 0; margin: 0; text-align: left; font-size: 1rem; }
#prize-list li { margin-bottom: 0.5rem; }
#prize-list span { font-weight: 700; color: var(--primary-color); }

/* === Advanced Generator: Number Selectors === */
.number-settings { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.setting-group label { font-weight: 600; display: block; margin-bottom: 10px; text-align: left; }
.number-selector { display: flex; flex-wrap: wrap; gap: 6px; background-color: var(--background-color); padding: 10px; border-radius: 10px; }
.num-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background-color: var(--surface-color); color: var(--text-color); cursor: pointer; transition: all 0.2s; font-size: 0.9rem; }
.num-btn.selected { background-color: var(--primary-color); color: white; border-color: var(--primary-color); font-weight: bold; transform: scale(1.1); }
.num-btn:hover:not(.selected) { background-color: #e0e0e0; }
body.dark-mode .num-btn:hover:not(.selected) { background-color: #444; }

/* === Generated Sets & Actions === */
#lotto-generator-sets { margin-bottom: 1.5rem; display: grid; gap: 1rem; }
.lotto-set { padding: 10px; border-radius: 10px; background-color: var(--background-color); }
.generator-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* === Action Buttons (Generate, Save, etc.) === */
#generate-btn, #theme-toggle-btn, #save-btn, #check-win-btn {
    color: white; padding: 14px 28px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; flex-grow: 1; min-width: 160px; text-align: center; }
#generate-btn { background: linear-gradient(45deg, #28a745, #218838); }
#generate-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
#theme-toggle-btn { background-color: var(--secondary-color); }
#save-btn { background-color: var(--primary-color); }
#check-win-btn { background-color: #17a2b8; }
button:disabled { background-color: #ccc; cursor: not-allowed; }

/* === Stats Chart === */
.chart-container canvas { max-height: 400px; }

/* === Saved Numbers Section === */
#saved-sets-display { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.saved-set { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 10px; background-color: var(--background-color); }
.saved-set .lotto-numbers { margin: 0; }
.delete-set-btn { background: #dc3545; color: white; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; font-size: 0.8rem; }
.win-result { font-weight: 700; font-size: 1.1rem; margin-left: 1rem; }
.saved-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }


/* === Responsive Design === */
@media (max-width: 768px) {
    main { padding: 0.5rem; }
    .header-container { flex-direction: column; gap: 1rem; }
    .hero h1 { font-size: 2rem; }
    .container { padding: 1.5rem; }
    .draw-details { grid-template-columns: 1fr; gap: 1.5rem; }
    #countdown { font-size: 1.5rem; }
    .lotto-ball { width: 38px; height: 38px; font-size: 1rem; }
    .number-selector { gap: 4px; }
    .num-btn { width: 32px; height: 32px; font-size: 0.8rem; }
    .generator-actions, .saved-actions { flex-direction: column; }
}