@charset "UTF-8";

.survey-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(5, 5, 8, 0.9); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.5s ease;
}

.survey-overlay.active { 
    opacity: 1; 
    visibility: visible; 
}

.survey-container {
    background: #FFFFFF; 
    width: 90%; 
    max-width: 500px; 
    padding: 3rem 2rem;
    border: 1px solid var(--electric-blue, #0033FF); 
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 51, 255, 0.2);
    text-align: center;
    transition: background 0.3s ease, border 0.3s ease;
}

.survey-container.dark-mode {
    background: #0a0a0c;
    border: 1px solid #333;
    padding: 0;
}

.survey-title { 
    font-size: 1.5rem; 
    font-weight: 900; 
    margin-bottom: 2rem; 
    color: #111; 
    line-height: 1.4; 
}

.survey-title .highlight { 
    color: #0033FF; /* 네온그린 대신 기존 메인 컬러 사용 */
    font-family: 'Orbitron', sans-serif; 
}

.survey-step { 
    display: none; 
    animation: fadeIn 0.5s ease forwards; 
}

.survey-step.active { 
    display: block; 
}

.survey-q { 
    font-size: 1.1rem; 
    font-weight: 700; 
    margin-bottom: 1.5rem; 
    color: #111; 
    line-height: 1.5;
    word-break: keep-all;
}

.survey-btn {
    display: block; 
    width: 100%; 
    padding: 1.2rem 1rem; 
    margin-bottom: 0.8rem;
    background: transparent; 
    border: 1px solid #ddd;
    font-family: 'Noto Sans KR', sans-serif; 
    font-size: 1rem; 
    font-weight: 500;
    color: #333; 
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.survey-btn:hover { 
    background: var(--electric-blue, #0033FF); 
    color: #FFF; 
    border-color: var(--electric-blue, #0033FF); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0, 51, 255, 0.15);
}

.loading-spinner { 
    font-family: 'Orbitron', sans-serif; 
    color: var(--electric-blue, #0033FF); 
    font-size: 1.2rem; 
    font-weight: 700; 
    font-style: italic; 
    animation: pulse 1s infinite; 
}

/* Close button for survey */
.close-survey-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #111;
    cursor: pointer;
    font-weight: 300;
    z-index: 10;
    transition: color 0.3s;
}

.survey-container.dark-mode .close-survey-btn {
    color: #fff;
}

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

@keyframes pulse { 
    0% { opacity: 0.5; } 
    50% { opacity: 1; } 
    100% { opacity: 0.5; } 
}