* {
    box-sizing: border-box;
    /* padding과 border를 포함한 크기 계산 */
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    margin: 50px 0px;
}

.search-box {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 930px;
    border: 4px solid #009EED;
    border-radius: 10px;
    background-color: #fff;
    position: relative;
}

.search-input {
    width:90%;
    flex-grow: 1; /* 입력창이 여백을 채울 수 있게 함 */
    flex-shrink: 0; /* 축소되지 않도록 설정 */
    padding: 10px;
    font-size: 20px;
    border: none;
    border-radius: 10px 0 0 10px;
    outline: none;
    box-sizing: border-box;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

    .search-input:focus {
        color: #000;
        background-color: #fff;
        box-shadow: none;
    }

.search-button {
    width: 10%; /* 돋보기 아이콘의 영역을 고정 */
    height: 100%;
    background-color: #009EED;
    border: none;
    cursor: pointer;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .search-button i {
        color: white;
        font-size: 20px;
    }

/* 콤보 박스 스타일 */
.sort-container {
    display: flex;
    justify-content: flex-end; /* 최우측으로 정렬 */
    width: 100%;
    max-width: 1340px;
    margin-bottom: 40px; /* 검색창 아래에 여백 */
}

.sort-container:focus{
    outline:none;
}

.sort-select {
    padding: 10px;
    font-size: 16px;
    border-radius: 10px;
    border: 4px solid #009EED; /* 검색창과 동일한 border width */
    background-color:white;
    width: 200px;
    box-sizing: border-box;
    appearance: auto; /* 기본 드롭다운 아이콘을 사용하도록 설정 */
    -webkit-appearance: auto; /* Safari 및 Chrome에서 동작하도록 설정 */
    -moz-appearance: auto; /* Firefox에서 동작하도록 설정 */
    color: black;
}

.sort-select:focus{
    outline:none;
}