@charset "UTF-8";
/*
 * 세계 명사 / 추천 독자 목록 페이지 공통 (타이틀, 정렬, 검색, 검색 결과, 페이지 버튼)
 * - 크기는 카드와 같은 디자인 단위 --u (shelf_card.css, 스토리보드 값 × 1.4)
 */
/* 축소 기준 폭은 메인과 동일 */
.shelf_list.ms_shelf { --ms-base: 1064; }
.shelf_list .sl_wrap { max-width: calc(1000 * var(--u)); margin: 0 auto; }

/* 상단 타이틀 */
.shelf_list .sl_banner { padding: calc(34 * var(--u)) 0 calc(40 * var(--u)); background: #f6f3fa; }
.shelf_list .sl_banner h2 { font-size: calc(36.4 * var(--u)); font-weight: 700; line-height: 1.3; color: #000; }
.shelf_list .sl_banner h2 b { font-weight: inherit; color: #845f9a; }
.shelf_list .sl_banner p { margin-top: calc(10 * var(--u)); font-size: calc(16.8 * var(--u)); font-weight: 500; color: #484848; }

.shelf_list .sl_con { padding: calc(40 * var(--u)) 0 calc(60 * var(--u)); }

/* 정렬 + 검색 */
.shelf_list .sl_tool { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shelf_list .sl_tool_right { display: flex; align-items: center; gap: calc(10 * var(--u)); }

/* 정렬 - 아래로 펼쳐지는 목록 */
.shelf_list .sl_sort { position: relative; }
.shelf_list .sl_sort_btn,
.shelf_list .sl_sort_ls button { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: calc(14 * var(--u)); color: #6f6f6f; cursor: pointer; }
.shelf_list .sl_sort_btn { width: calc(120 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)); border: 1px solid #d4d4d4; border-radius: calc(8 * var(--u)); background: #fff; }
.shelf_list .sl_sort_btn::after { content: ""; width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-top: calc(-5 * var(--u)); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.shelf_list .sl_sort.on .sl_sort_btn::after { margin-top: calc(5 * var(--u)); transform: rotate(-135deg); }
.shelf_list .sl_sort_ls { display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; width: 100%; padding: calc(6 * var(--u)) 0; border: 1px solid #d4d4d4; border-radius: calc(8 * var(--u)); background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.shelf_list .sl_sort.on .sl_sort_ls { display: block; }
.shelf_list .sl_sort_ls button { padding: calc(8 * var(--u)) calc(14 * var(--u)); border: 0; background: none; text-align: left; }
.shelf_list .sl_sort_ls button.on { font-weight: 600; color: #8a689f; }

/* 검색 */
.shelf_list .sl_search { position: relative; display: flex; align-items: center; width: calc(245 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(38 * var(--u)); border: 1px solid #d4d4d4; border-radius: calc(8 * var(--u)); background: #fff; }
.shelf_list .sl_search_btn { position: absolute; top: 50%; left: calc(10 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%236f6f6f' stroke-width='1.8'/%3E%3Cpath d='M15.5 15.5L20 20' stroke='%236f6f6f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; cursor: pointer; }
.shelf_list .sl_search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font-size: calc(14 * var(--u)); color: #000; }
.shelf_list .sl_search input::placeholder { color: #878787; }
.shelf_list .sl_search_clear { flex-shrink: 0; width: calc(18 * var(--u)); height: calc(18 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: #d9d9d9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 6l6 6M12 6l-6 6' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100%; cursor: pointer; }

/* 검색 결과 + 검색 초기화 */
.shelf_list .sl_result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: calc(14 * var(--u)); }
.shelf_list .sl_result_txt { font-size: calc(16.8 * var(--u)); font-weight: 500; color: #6f6f6f; }
.shelf_list .sl_reset { padding: 0; border: 0; background: none; font-size: calc(16.8 * var(--u)); font-weight: 600; color: #a082b2; cursor: pointer; }

.shelf_list .sl_nodata { padding: calc(80 * var(--u)) 0; text-align: center; font-size: calc(16.8 * var(--u)); color: #878787; }

/* 페이지 버튼 */
.shelf_list .sl_pages { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); margin-top: calc(50 * var(--u)); }
.shelf_list .sl_pages button { min-width: calc(32 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(4 * var(--u)); border: 0; background: none; font-size: calc(15.4 * var(--u)); font-weight: 500; color: #878787; cursor: pointer; }
.shelf_list .sl_pages button.on { font-weight: 700; color: #8a689f; }
.shelf_list .sl_pages .sl_gap { min-width: calc(24 * var(--u)); text-align: center; font-size: calc(15.4 * var(--u)); color: #878787; }
.shelf_list .sl_pages .sl_arrow { position: relative; }
.shelf_list .sl_pages .sl_arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-top: 1.5px solid #878787; border-left: 1.5px solid #878787; }
.shelf_list .sl_pages .sl_arrow.prev::before { transform: translate(-30%, -50%) rotate(-45deg); }
.shelf_list .sl_pages .sl_arrow.next::before { transform: translate(-70%, -50%) rotate(135deg); }
.shelf_list .sl_pages .sl_arrow:disabled { cursor: default; }
.shelf_list .sl_pages .sl_arrow:disabled::before { border-color: #e5e5e5; }

/* 하단 배너 - 반대쪽 서재로 이동 */
.shelf_list .shelf_bottom_banner { display: flex; align-items: center; margin-top: 30px; padding: 22px 30px; border-radius: 5px; background: #f3f0f8; }
.shelf_list .shelf_bottom_banner::before { content: ""; flex: 0 0 auto; width: 34px; height: 29px; margin-right: 18px; background: url(../../img/ic_open_book.png) center / contain no-repeat; }
.shelf_list .banner_tit { font-size: 16px; color: #333; }
.shelf_list .banner_desc { margin-top: 6px; font-size: 13px; color: #767676; }
.shelf_list .shelf_bottom_banner .bt.rec { position: relative; width: auto; height: 36px; margin-left: auto; padding: 0 36px 0 20px; border-radius: 18px; background: #ac82b8; font-size: 14px; line-height: 36px; white-space: nowrap; }
.shelf_list .shelf_bottom_banner .bt.rec::after { content: "\2192"; position: absolute; right: 18px; }

.shelf_list button:focus-visible { outline: 2px solid #a082b2; outline-offset: 2px; }

@media (max-width: 1240px) {
	.shelf_list .inner { padding: 0 20px; }
}
/* 좁은 화면 - 정렬·검색은 아래 줄 전체 폭 */
@media (max-width: 600px) {
	.shelf_list .sl_tool { flex-wrap: wrap; }
	.shelf_list .sl_tool_right { width: 100%; }
	.shelf_list .sl_search { flex: 1; width: auto; }
	.shelf_list .shelf_bottom_banner { flex-wrap: wrap; padding: 20px; }
	.shelf_list .shelf_bottom_banner .bt.rec { width: 100%; margin: 16px 0 0; text-align: left; }
}