:root {
    --bg-color: #1a1a1a;
    --primary-color: #ffffff;
    --secondary-color: #b3b3b3;
    --accent-color: #ffde59;
    --glow-color: rgba(255, 222, 89, 0.6);

    --font-family: 'Noto Sans KR', sans-serif;
    --font-weight-bold: 900;
    --font-weight-normal: 700;
    --font-weight-light: 400;

    --noise-url: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj4KICA8ZmlsdGVyIGlkPSJub2lzZSI+CiAgICA8ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9IjAuOCIgbnVtT2N0YXZlcz0iMSIgdHlwZT0iZnJhY3RhbE5vaXNlIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+CiAgICA8ZmVDb2xvck1hdHJpeCB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIwIi8+CiAgPC9maWx0ZXI+CiAgPHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMDMiLz4KPC9zdmc+');

    /* Form specific vars */
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(255, 255, 255, 0.1);
    --input-focus-bg: rgba(255, 222, 89, 0.1);

    /* Ticket specific vars (Default Dark Mode) */
    --ticket-bg: #2d2d2d;
    --ticket-shadow: rgba(0, 0, 0, 0.4);
    --ticket-glow: rgba(255, 255, 255, 0.05);
}

body.light-mode {
    --bg-color: #f0f0f0;
    --primary-color: #1a1a1a;
    --secondary-color: #666666;
    --accent-color: #ffde59; /* Keep accent same or darken slightly if needed */
    --glow-color: rgba(255, 222, 89, 0.4);
    
    --ticket-bg: #ffffff;
    --ticket-shadow: rgba(0, 0, 0, 0.1);
    --ticket-glow: rgba(0, 0, 0, 0.05);

    --input-bg: rgba(255, 255, 255, 0.8);
    --input-border: rgba(0, 0, 0, 0.1);
    --input-focus-bg: rgba(255, 222, 89, 0.2);
}

body {
    background-color: var(--bg-color);
    color: var(--primary-color);
    font-family: var(--font-family);
    margin: 0;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background-image: var(--noise-url);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.app-container {
    width: 100%;
    max-width: 800px;
    text-align: center;
    position: relative;
}

.app-header {
    margin-bottom: 3rem;
    position: relative;
}

.theme-toggle {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background-color: var(--input-bg);
    transform: rotate(15deg);
}

.app-title {
    font-size: 3.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -2px;
}


.app-subtitle {
    font-size: 1.25rem;
    font-weight: var(--font-weight-light);
    color: var(--secondary-color);
    margin-top: 0.5rem;
}

.controls {
    margin-bottom: 3rem;
}

.generate-button {
    background: var(--accent-color);
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 0 20px var(--glow-color), 0 0 30px var(--glow-color);
}

.generate-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--glow-color), 0 0 40px var(--glow-color), 0 4px 15px rgba(0,0,0,0.3);
}

.generate-button .feather {
    transition: transform 0.5s ease-in-out;
}

.generate-button:hover .feather {
    transform: rotate(360deg);
}

.results-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    justify-items: center;
}

lotto-ticket {
    width: 100%;
    max-width: 360px;
    display: block;
    /* Use variables defined in body/body.light-mode, falling back if not set */
}

/* We need to ensure the shadow DOM styles in main.js pick up these variables, 
   but since web components with shadow DOM have style isolation, we should pass them through.
   However, the component in main.js uses `var(--ticket-bg, #2d2d2d)`. 
   We just need to make sure the :host context receives them. 
   Since variables inherit, setting them on body or host works. 
*/


.section-divider {
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 4rem 0;
}

.contact-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto; /* Center the container */
    text-align: center;
    background: transparent; /* No separate background */
    border-radius: 16px;
    padding: 2rem 0;
}

.contact-header {
    margin-bottom: 2rem;
}

.contact-title {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -1px;
}

.contact-subtitle {
    font-size: 1.1rem;
    font-weight: var(--font-weight-light);
    color: var(--secondary-color);
    margin-top: 0.5rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    color: var(--primary-color);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    padding: 0.8rem 1rem;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--primary-color);
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    background-color: var(--input-focus-bg);
    outline: none;
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.submit-button {
    background: var(--accent-color);
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: var(--font-weight-normal);
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center; /* Center the button in the flex column */
    box-shadow: 0 0 20px var(--glow-color), 0 0 30px var(--glow-color);
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 25px var(--glow-color), 0 0 40px var(--glow-color), 0 4px 15px rgba(0,0,0,0.3);
}

.comments-container {
    width: 100%;
    max-width: 800px; /* Match app-container max-width */
    margin: 0 auto;
    padding: 2rem 0;
    min-height: 200px;
}

/* Info Section */
.info-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    text-align: left;
    margin-bottom: 2rem;
}

.info-block {
    background: var(--input-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--input-border);
    transition: transform 0.3s ease;
}

.info-block:hover {
    transform: translateY(-5px);
}

.info-block h3 {
    color: var(--accent-color);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.info-block p {
    color: var(--primary-color);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Footer */
.app-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.footer-nav {
    margin-top: 0.5rem;
}

.footer-nav a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-nav a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
    body {
        padding: 1rem;
    }
    .app-title {
        font-size: 2.5rem;
    }
    .app-subtitle {
        font-size: 1rem;
    }
    .generate-button {
        padding: 0.8rem 1.8rem;
        font-size: 1rem;
    }
    .results-container {
        grid-template-columns: 1fr;
    }

    .contact-title {
        font-size: 2rem;
    }
    .contact-subtitle {
        font-size: 0.9rem;
    }
    .contact-container {
        padding: 1.5rem 0;
    }
    .submit-button {
        padding: 0.8rem 1.8rem;
        font-size: 1rem;
    }
}