:root {
    --app-bg: #FFFFFF;
    --text-main: #1D1D1F;
    --text-sub: #86868B;
    --border-color: rgba(0, 0, 0, 0.12);
}

body {
    font-family: 'Pretendard', sans-serif;
    background-color: var(--app-bg);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    border-radius: 32px;
}

/* Typography & Titles */
.section-title { 
    font-size: 13px; 
    font-weight: 800; 
    color: var(--text-sub); 
    margin-bottom: 12px; 
}

/* Slider Customization */
input[type=range] { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 6px; 
    background: #F2F2F7; 
    border-radius: 10px; 
    outline: none; 
}
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    border: 4px solid #fff;
    background: var(--active-color, #EEE); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    cursor: pointer; 
    transition: transform 0.1s, background 0.3s;
}
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.1); }

.scale-container { position: relative; width: 100%; padding: 0 14px; margin-top: 6px; }
.scale-numbers { display: flex; width: 100%; justify-content: space-between; }
.scale-numbers span { width: 0; display: flex; justify-content: center; font-size: 10px; font-weight: 800; color: #C7C7CC; white-space: nowrap; }

/* Modals */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 100; align-items: center; justify-content: center; padding: 20px; }
.modal-content { background: white; width: 100%; max-width: 480px; border-radius: 28px; padding: 32px; box-shadow: 0 30px 60px rgba(0,0,0,0.15); max-height: 85vh; overflow-y: auto; }

/* Footer */
footer { margin-top: 40px; padding-bottom: 40px; text-align: center; border-top: 1px solid rgba(0,0,0,0.05); padding-top: 20px; }
.footer-links { display: flex; justify-content: center; gap: 15px; font-size: 11px; color: var(--text-sub); }
.footer-link { text-decoration: underline; cursor: pointer; }