@charset "UTF-8";

/********************************************************
■ 검색창 스타일 통일 (기준 : 공지사항 등 게시판 검색창 — theme.css 의 #bo_list .search-box)
  - 상품후기(itemuselist) · 상품문의(itemqalist) 의 검색창(.item_board_search)을
    같은 모양(둥근 입력칸 + 돋보기, 위 세로선)으로 맞춤
  - 기능(검색 항목 선택, 전체보기)은 그대로, 디자인만 변경
********************************************************/
.search-box .item_board_search { position:relative; display:flex; align-items:stretch; width:500px; max-width:100%; margin:0 auto; }

/* 검색 항목 : 둥근 입력칸의 왼쪽 부분 (스크립트가 없을 때의 기본 선택상자) */
.search-box .item_board_search select { flex:0 0 120px; width:120px; height:auto; margin:0; padding:10px 28px 10px 20px; border:1px solid #ccc; border-right:none; border-radius:99px 0 0 99px; background-color:#fff; font-size:.875rem; color:#333; }

/* 검색 항목 디자인 목록 (js/fs-search.js) : 원래 선택상자는 숨기고 값만 연동 */
.search-box .item_board_search .fs-select { position:relative; flex:0 0 120px; width:120px; }
.search-box .item_board_search .fs-select select.fs-select-native { position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.fs-select-btn { position:relative; display:block; width:100%; height:100%; padding:10px 30px 10px 20px; border:1px solid #ccc; border-right:none; border-radius:99px 0 0 99px; background:#fff; color:#333; font-size:.875rem; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.fs-select-btn:after { content:""; position:absolute; right:14px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:1.5px solid #555; border-bottom:1.5px solid #555; transform:rotate(45deg); transition:transform 200ms, margin-top 200ms; }
.fs-select.on .fs-select-btn:after { margin-top:-1px; transform:rotate(-135deg); }
.fs-select-btn:focus-visible,
.fs-select.on .fs-select-btn { outline:none; border-color:var(--main-color1, #5B412D); }

.fs-select-list { position:absolute; left:0; top:calc(100% + 6px); z-index:30; min-width:100%; margin:0; padding:6px; list-style:none; border:1px solid rgba(91,65,45,.15); border-radius:12px; background:#fff; box-shadow:0 10px 28px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity 180ms, visibility 180ms, transform 180ms; }
.fs-select.on .fs-select-list { opacity:1; visibility:visible; transform:translateY(0); }
.fs-select-list li { padding:9px 14px; border-radius:8px; color:#333; font-size:.875rem; white-space:nowrap; cursor:pointer; transition:background-color 150ms, color 150ms; }
.fs-select-list li:hover,
.fs-select-list li:focus { outline:none; background:rgba(91,65,45,.08); color:var(--main-color1, #5B412D); }
.fs-select-list li.is-selected { color:var(--main-color1, #5B412D); font-weight:700; }

/* 검색어 : 둥근 입력칸의 오른쪽 부분 + 돋보기 */
.search-box .item_board_search .sch_wr { position:relative; flex:1; width:auto; }
.search-box .item_board_search .sch_wr input { width:100%; height:100%; padding:10px 44px 10px 16px; border:1px solid #ccc; border-radius:0 99px 99px 0; font-size:.875rem; }
.search-box .item_board_search select:focus,
.search-box .item_board_search .sch_wr input:focus { outline:none; border-color:var(--main-color1, #5B412D); }
.search-box .item_board_search .sch_btn { right:6px; width:36px; height:36px; color:#333; font-size:1rem; }

/* 전체보기 : 입력칸 오른쪽의 작은 둥근 버튼 (입력칸은 가운데 유지) */
.search-box .item_board_search > a { position:absolute; left:100%; top:0; bottom:0; display:flex; align-items:center; margin-left:10px; padding:0 20px; /* 입력칸과 같은 높이 */ border:1px solid var(--main-color1, #5B412D); border-radius:99px; background:var(--main-color1, #5B412D); color:#fff !important; font-size:.875rem; font-weight:600; line-height:1.2; white-space:nowrap; transition:background-color 200ms, border-color 200ms; }
.search-box .item_board_search > a:hover { border-color:var(--main-color3, #795840); background:var(--main-color3, #795840); color:#fff !important; }

@media (max-width: 1024px) {
    /* 화면이 좁으면 전체보기를 입력칸 아래로 */
    .search-box .item_board_search { flex-wrap:wrap; }
    .search-box .item_board_search > a { position:static; height:40px; margin:10px auto 0; order:3; }
    .search-box .item_board_search .sch_wr { flex-basis:calc(100% - 120px); }
}

@media (max-width: 767px) {
    .search-box .item_board_search select,
    .search-box .item_board_search .fs-select { flex-basis:96px; width:96px; padding-left:14px; }
    .search-box .item_board_search .fs-select { padding-left:0; }
    .fs-select-btn { padding-left:14px; }
    .search-box .item_board_search .sch_wr { flex-basis:calc(100% - 96px); }
    .search-box .item_board_search .sch_wr input { padding-left:10px; }
}