/* 모바일 셀렉트 박스 스타일 수정 */
select {
    color: #333 !important; /* 모든 환경에서 검정색 텍스트 적용 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8.825l-4.9-4.9c-.3-.3-.3-.77 0-1.07s.77-.3 1.07 0L6 6.685l3.83-3.83c.3-.3.77-.3 1.07 0s.3.77 0 1.07l-4.9 4.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.5rem; /* 화살표를 위한 여백 추가 */
}

/* 모바일 환경에서 특별히 강화된 스타일 */
@media (max-width: 768px) {
    select {
        -webkit-appearance: none !important; /* iOS 기본 스타일 제거 */
        -moz-appearance: none !important; /* Firefox 기본 스타일 제거 */
        appearance: none !important; /* 기본 스타일 제거 */
        color: #333 !important; /* 모바일에서도 검정색 강제 적용 */
    }
    
    /* iOS에서 상세 설정 */
    select::-ms-expand {
        display: none; /* IE에서 기본 화살표 숨기기 */
    }
    
    /* Android에서 추가 설정 */
    select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #333;
    }
}