/* css/preferences.css */

.pref-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 30px 20px;
}

.pref-container {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    width: 100%;
    max-width: 600px; /* 로그인 창보다 조금 더 넓게 */
    padding: 40px;
    border-radius: var(--border-radius);
}

.header-text {
    text-align: center;
    margin-bottom: 30px;
}

.header-text h2 {
    font-size: 1.8rem;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.header-text p {
    color: #555;
    font-weight: 500;
}

.section-box {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.5);
}

.section-box h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    color: #333;
}

/* 프리셋 버튼 */
.preset-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preset-btn {
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-main);
    font-size: 0.9rem;
}

.preset-btn:hover {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.1), rgba(37, 117, 252, 0.1));
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* 장르 칩 버튼 */
.genre-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-main);
}

.chip-btn.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border: none;
    box-shadow: 0 4px 10px rgba(106, 17, 203, 0.3);
}

/* 슬라이더 디자인 (Range Input 커스텀) */
.slider-container {
    text-align: center;
}

.slider-values {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.range-sliders {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05);
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    margin-top: -6px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 하단 요약 바 */
.summary-bar {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 경계선도 은은하게 */
    text-align: center;
}

.summary-text {
    font-size: 0.95rem;
    color: #444; /* 글씨색은 공통 스타일 body에서 온 거라 유지 (필요시 스타일 추가) */
    margin-bottom: 20px;
    font-weight: 600;
}


/* --- 🚀 수정된 버튼 디자인: 글래스모피즘 보석 버튼 --- */
.btn-primary {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white; /* 하얀색 글씨로 고정 */
    cursor: pointer;
    text-align: center;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 글씨에도 은은한 빛 */
    text-decoration: none; /* a 태그일 경우 대비 */

    /* 🎨 색감 맞추기: 반투명 그라데이션 (파랑~보라) */
    background: linear-gradient(135deg, rgba(37, 117, 252, 0.6) 0%, rgba(106, 17, 203, 0.6) 100%);
    
    /* 💎 글래스 효과: 테두리와 흐림 효과 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* ✨ 빛나는 효과: 깊은 파랑과 초록빛 그라데이션 그림자 */
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3), /* 깊은 파랑 그림자 */
                0 0 10px rgba(0, 255, 200, 0.2),  /* 은은한 초록빛 glow */
                inset 0 1px 1px rgba(255, 255, 255, 0.3); /* 윗테두리 하이라이트 */

    /* ↩️ 둥글게: 각진 느낌 제거 */
    border-radius: 16px; /* 다른 컨테이너들과 동일하게 둥글게 */

    transition: all 0.3s ease; /* 모든 효과를 부드럽게 */
}

/* 마우스 올렸을 때 효과 */
.btn-primary:hover {
    transform: translateY(-3px); /* 위로 살짝 떠오르게 */
    background: linear-gradient(135deg, rgba(37, 117, 252, 0.8) 0%, rgba(106, 17, 203, 0.8) 100%); /* 더 진해진 색 */
    box-shadow: 0 6px 20px rgba(37, 117, 252, 0.5), /* 더 강해진 그림자 */
                0 0 15px rgba(0, 255, 200, 0.3); /* 더 강해진 glow */
}

/* 클릭 시 효과 */
.btn-primary:active {
    transform: translateY(-1px); /* 살짝 눌린 느낌 */
    box-shadow: 0 2px 10px rgba(37, 117, 252, 0.4), 
                0 0 10px rgba(0, 255, 200, 0.2);
}

/* --- 📱 모바일 반응형 (화면 폭 480px 이하) --- */
@media (max-width: 480px) {
    .pref-container {
        padding: 30px 15px;
    }

    .header-text h2 {
        font-size: 1.5rem;
    }

    .preset-btn, .chip-btn {
        padding: 8px 12px;
        font-size: 0.85rem; /* 버튼 글씨 크기 줄이기 */
    }

    .slider-values {
        font-size: 1rem;
    }
}