01. list.skin.php 파일을 열어 아래와 같이 <li class="order_list_item"> ... </li> 부분을 추가한다.

    <!-- 갯수, 전체선택, 글 정렬 { -->
    <ul class="rb_bbs_top">
       
        <?php if($board['bo_read_point'] || $board['bo_write_point'] || $board['bo_comment_point'] || $board['bo_download_point']) { ?>
        <li class="point_info_btns_wrap">
            <button type="button" class="point_info_btns" id="point_info_opens_btn">
            <i><svg width="14" height="14" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0ZM11.5 5H9C8.46957 5 7.96086 5.21071 7.58579 5.58579C7.21071 5.96086 7 6.46957 7 7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V12H11.5C12.4283 12 13.3185 11.6313 13.9749 10.9749C14.6313 10.3185 15 9.42826 15 8.5C15 7.57174 14.6313 6.6815 13.9749 6.02513C13.3185 5.36875 12.4283 5 11.5 5ZM11.5 7C11.8978 7 12.2794 7.15804 12.5607 7.43934C12.842 7.72064 13 8.10218 13 8.5C13 8.89782 12.842 9.27936 12.5607 9.56066C12.2794 9.84196 11.8978 10 11.5 10H9V7H11.5Z" fill="#09244B"/></svg></i>
            <span class="pc">포인트정책</span></button>
            
            <div class="point_info_opens">
                <h6><?php echo $board['bo_subject'] ?> 포인트 정책</h6>
                <ul>
                    <?php if($board['bo_read_point']) { ?>
                    <dl>
                        <dd>글읽기</dd>
                        <dd class="font-B"><?php echo number_format($board['bo_read_point']); ?>P</dd>
                    </dl>
                    <?php } ?>
                    <?php if($board['bo_write_point']) { ?>
                    <dl>
                        <dd>글쓰기</dd>
                        <dd class="font-B"><?php echo number_format($board['bo_write_point']); ?>P</dd>
                    </dl>
                    <?php } ?>
                    <?php if($board['bo_comment_point']) { ?>
                    <dl>
                        <dd>댓글</dd>
                        <dd class="font-B"><?php echo number_format($board['bo_comment_point']); ?>P</dd>
                    </dl>
                    <?php } ?>
                    <?php if($board['bo_download_point']) { ?>
                    <dl>
                        <dd>다운로드</dd>
                        <dd class="font-B"><?php echo number_format($board['bo_download_point']); ?>P</dd>
                    </dl>
                    <?php } ?>
                </ul>
            </div>
            
            <script>
                $(document).ready(function() {
                    $(document).click(function(event) {
                        if (!$(event.target).closest('#point_info_opens_btn, .point_info_opens').length) {
                            if ($('.point_info_opens').is(':visible')) {
                                $('.point_info_opens').hide();
                                $('#point_info_opens_btn').removeClass('act');
                            }
                        }
                    });

                    $('#point_info_opens_btn').click(function(event) {
                        event.stopPropagation(); 
                        $('.point_info_opens').toggle();
                        $(this).toggleClass('act');
                    });
                });
            </script>
            
            
        </li>
        <?php } ?>
        
        <?php if ($is_checkbox) { ?>
        <li>
            <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
            <label for="chkall"></label>
        </li>
        <?php } ?>
        
        <li class="cnts">
            전체 <?php echo number_format($total_count) ?>건 / <?php echo $page ?> 페이지
        </li>

        <li class="order_list_item"> 
            <div class="sort_select_wrap">
                <select name="sort_option" id="sort_option" onchange="changeSortOption(this.value)" class="select" style="width: 100%;">
                    <option value="wr_datetime desc" <?php echo ($sst == 'wr_datetime' && $sod == 'desc') ? 'selected' : ''; ?>>최신순</option>
                    <option value="wr_good desc" <?php echo ($sst == 'wr_good' && $sod == 'desc') ? 'selected' : ''; ?>>추천순</option>
                    <option value="wr_hit desc" <?php echo ($sst == 'wr_hit' && $sod == 'desc') ? 'selected' : ''; ?>>조회순</option>
                </select>
            </div>
        </li>
        
        <div class="cb"></div>
    </ul>
    <!-- } -->

02. list.skin.php 제일 하단에 아래의 스크립트 코드를 추가한다.

<script>
function changeSortOption(value) {
    var [sst, sod] = value.split(' ');
    var currentUrl = window.location.href;
    
    // URL에서 현재 정렬 파라미터 제거
    currentUrl = currentUrl.replace(/[?&]sst=[^&]+/, '').replace(/[?&]sod=[^&]+/, '');
    
    // 새로운 정렬 파라미터 추가
    var connector = currentUrl.includes('?') ? '&' : '?';
    var newUrl = currentUrl + connector + 'sst=' + sst + '&sod=' + sod;
    
    // 페이지 새로고침
    window.location.href = newUrl;
}
</script>

03. style.css 파일을 열어 아래와 같이 수정한다.

 -. 수정할 부분

.rb_bbs_wrap {position: relative;}
.rb_bbs_wrap .rb_bbs_top {
    margin-top: -55px; /* 상단 여백 조절 */
    margin-bottom: 30px; /* 하단 여백 조절 */
    display: flex; /* ul 자체를 flex 컨테이너로 만듦 */
    justify-content: flex-end; /* 모든 li 항목을 우측으로 정렬 */
    align-items: center; /* 세로 중앙 정렬 (li 항목들의 높이가 다를 경우) */
    flex-wrap: wrap; /* 공간이 부족하면 줄바꿈 되도록 설정 */
}
.rb_bbs_wrap .rb_bbs_top li {
    /* float:right; /* 기존 float 속성은 flexbox와 함께 사용하지 않음 */
    /* flexbox가 알아서 정렬하므로 float은 제거합니다. */
    margin-left: 10px; /* 각 li 항목 사이에 간격 추가 (필요에 따라 조절) */
    /* 다른 li 항목의 기본 스타일은 여기에 유지 */
}
.rb_bbs_wrap .rb_bbs_top li.cnts {
    margin-right: 10px; /* 전체 게시물 수 텍스트의 우측 여백 */
    margin-top: 0; /* flexbox 사용 시 수직 정렬을 위해 margin-top 제거 */
    font-size: 12px;
    color:#999;
    /* 다른 li 항목보다 내용이 길기 때문에 순서 조절을 위해 order 속성을 줄 수도 있습니다. */
    /* order: 1; */
}

추가할 부분

/* 정렬 선택 박스 (새로 추가한 li) 스타일 */
.rb_bbs_wrap .rb_bbs_top li.order_list_item {
    /* 이 li는 다른 li들과 동일하게 우측에 정렬됩니다. */
    /* width: auto; 또는 flex-basis를 사용하여 너비를 조절할 수 있습니다. */
    /* flex-basis: 150px; /* 예시: 고정 너비 설정 */
    /* 또는 flex-basis: auto; 로 내용에 맞춰 조절 */
    /* 다른 li 항목과 동일하게 margin-left가 적용됩니다. */
    /* 추가적인 스타일이 필요하면 여기에 정의 */
}

.sort_select_wrap {
    /* select 박스를 감싸는 div의 스타일 */
    flex-basis: auto; /* 내용 너비에 맞춰 자동 조절 */
    width: 100px; /* 셀렉트 박스의 고정 너비를 설정할 수도 있습니다. (예시) */
    /* max-width: 100%; /* 부모 li.order_list_item의 너비를 넘지 않도록 */
}

/* 셀렉트 박스 높이 및 텍스트 정렬 조절 */
.sort_select_wrap select {
    height: 36px; /* 원하는 높이로 조절 (예: 30px, 36px 등) */
    padding: 4px 18px; /* 위아래 패딩을 줄여서 높이를 조절 */
    line-height: 1.5; /* 텍스트가 중앙에 오도록 라인 높이 조절 (필요시) */
    box-sizing: border-box; /* 패딩이 높이에 포함되도록 설정 */
    
    /* 텍스트 가운데 정렬 추가 */
    text-align: left; 
    text-align-last: left; /* Internet Explorer/Edge에서 드롭다운 화살표 옆 텍스트 정렬 */

    -webkit-appearance: none; /* 웹킷 브라우저의 기본 스타일 제거 (선택 사항) */
    -moz-appearance: none;    /* 모질라 브라우저의 기본 스타일 제거 (선택 사항) */
    appearance: none;         /* 기본 스타일 제거 (선택 사항) */
    /* background-image: url('경로/화살표_이미지.svg'); /* 기본 화살표 제거 시 커스텀 화살표 추가 (선택 사항) */
    /* background-repeat: no-repeat; */
    /* background-position: right 8px center; */
    /* background-size: 10px; */
}

@media (max-width: 1024px) {
    .sort_select_wrap {flex-basis: auto; width: 120px;} /* 반응형 너비 조절 */
}
@media (max-width: 768px) {
    .sort_select_wrap {flex-basis: auto; width: 100px;} /* 반응형 너비 조절 */
}
@media (max-width: 480px) {
    .sort_select_wrap {flex-basis: auto; width: 90px;} /* 반응형 너비 조절 */
}

/* .cb 클래스는 float를 해제하는 용도였으나, flexbox 사용 시에는 불필요할 수 있습니다. */
/* ul에 flexbox를 적용하면 자식 li 요소들이 자동으로 가로로 정렬되므로 .cb는 제거해도 됩니다. */
.cb { clear: both; } /* 혹시 모를 상황을 대비해 일단 유지 */