@charset "utf-8";
/* ==========================================================
   전제품(SHOP) 페이지 전용 스타일 (www/shop/all/index.jsp)
   - 상품 카드 규격은 메인(main_page.css)과 동일: 350px × 4열, 컨텐츠 폭 1472px
   - 선택자는 #shop_all_page 로 스코프 한정
   ========================================================== */
#shop_all_page {font-family:'Noto Sans KR', sans-serif; font-size:14px; color:#2b2926; line-height:1.5;}
#shop_all_page a {color:inherit;}
#shop_all_page h2, #shop_all_page p, #shop_all_page ul {margin:0; padding:0;}
#shop_all_page img {max-width:100%;}
#shop_all_page .page_inner {max-width:1552px; margin:0 auto; padding:70px 40px 100px; box-sizing:border-box;}

/* ---------- 타이틀 ---------- */
#shop_all_page .page_tit {margin-bottom:56px; text-align:center; font-size:44px; font-weight:700; letter-spacing:0.02em; line-height:1.2;}

/* 헤더 검색 결과 타이틀 (?keyword=) — 검색어는 굵게 */
#shop_all_page .page_tit.search_tit {margin-bottom:0; font-size:32px; font-weight:400; letter-spacing:0; word-break:keep-all;}
#shop_all_page .page_tit.search_tit em {font-style:normal; font-weight:700;}

/* ---------- 카테고리 탭 ---------- */
#shop_all_page .cate_tab {display:flex; justify-content:center; flex-wrap:wrap; gap:0 44px; border-bottom:1px solid #e6e3df;}
#shop_all_page .cate_tab li a {display:block; padding:14px 0 16px; font-size:18px; color:#736d68; letter-spacing:0.02em; position:relative; transition:color 0.2s;}
#shop_all_page .cate_tab li a:hover {color:#2b2926;}
#shop_all_page .cate_tab li.on a {color:#2b2926; font-weight:500;}
#shop_all_page .cate_tab li.on a:after {content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:#2b2926;}

/* ---------- 목록 상단 (총 개수 / 정렬 / 뷰 모드) ---------- */
#shop_all_page .shop_list {margin-top:72px;}
/* 이벤트 페이지: 탭 없이 타이틀 바로 아래 목록 */
#shop_all_page.event_page .page_tit {margin-bottom:0;}
#shop_all_page.event_page .shop_list {margin-top:56px;}
#shop_all_page .list_head {display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;}
#shop_all_page .list_head .total {font-size:15px; color:#736d68;}
#shop_all_page .list_head .total b {font-weight:700; color:#2b2926;}
#shop_all_page .list_head .list_tools {display:inline-flex; align-items:center; gap:16px;}
#shop_all_page .list_head .sort {display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#2b2926;}

/* ---------- 뷰 모드 토글 버튼 (그리드형 / 목록형) ---------- */
#shop_all_page .view_toggle {display:inline-flex; align-items:center; gap:6px;}
#shop_all_page .view_toggle .btn_view {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border:1.5px solid #dcd8d3;
	border-radius:6px;
	background:#fff;
	color:#9c9691;
	cursor:pointer;
	padding:0;
	transition:border-color 0.2s, color 0.2s, background-color 0.2s;
	box-sizing:border-box;
}
#shop_all_page .view_toggle .btn_view svg {display:block;}
#shop_all_page .view_toggle .btn_view:hover {
	border-color:#736d68;
	color:#2b2926;
}
#shop_all_page .view_toggle .btn_view.active {
	border-color:#2b2926;
	color:#2b2926;
	cursor:default;
}

/* ---------- 상품 카드 그리드 (메인과 동일 규격) ---------- */
#shop_all_page .prd_grid {display:grid; grid-template-columns:repeat(4, 350px); gap:56px 24px; justify-content:center;}
#shop_all_page .prd_grid li a {display:block; text-align:left;}
#shop_all_page .prd_grid .thumb {position:relative; width:100%; aspect-ratio:1/1; margin-bottom:14px; background:#f5f3f0; overflow:hidden;}
#shop_all_page .prd_grid .thumb img {display:block; width:100%; height:100%; object-fit:cover; transition:transform 0.4s;}
#shop_all_page .prd_grid .thumb.no_img {background:#fff; border:1px solid #f0ede9; box-sizing:border-box;} /* 이미지 없음: 로고를 잘리지 않게 가운데 표시 */
#shop_all_page .prd_grid .thumb.no_img img {object-fit:contain; padding:16%; box-sizing:border-box; opacity:0.85;}
#shop_all_page .prd_grid li a:hover .thumb img {transform:scale(1.04);}
#shop_all_page .prd_grid .name {margin-bottom:8px; font-size:16px; line-height:1.4;}
/* 좁은 화면에서 금액이 카드 폭을 넘치면 할인전 금액이 다음 줄로 흐르게 */
#shop_all_page .prd_grid .price {display:flex; flex-wrap:wrap; align-items:baseline; font-size:16px;}
#shop_all_page .prd_grid .price .dc {color:#d5442f; font-weight:700;}
#shop_all_page .prd_grid .price .now {margin-left:6px; font-weight:700;}
#shop_all_page .prd_grid .price .org {margin-left:6px; font-size:14px; color:#9c9691; text-decoration:line-through;}
/* 후기: 라벨 텍스트 없이 별점 + 후기 개수 (메인과 동일 12px) */
#shop_all_page .prd_grid .review {display:flex; align-items:center; gap:5px; margin-top:6px; font-size:12px; color:#8e8883;}
#shop_all_page .prd_grid .review .stars {color:#d5442f; letter-spacing:0.1em;}
#shop_all_page .prd_grid .review .stars.zero {color:#d9d5d0;}
#shop_all_page .prd_grid .badge {display:flex; gap:6px; margin-bottom:8px;}
#shop_all_page .prd_grid .badge span {display:inline-block; height:24px; padding:0 12px; border-radius:0; font-size:11px; font-weight:700; line-height:24px; letter-spacing:0.04em; color:#fff;}
#shop_all_page .prd_grid .badge .best {background:#6f4b3c;}
#shop_all_page .prd_grid .badge .new {background:#2b2926;}
#shop_all_page .prd_grid .badge .event {background:#d5442f;}
#shop_all_page .prd_grid .badge .cate, #shop_all_page .event_view .badge .cate {background:#f1ede8; color:#6f4b3c;} /* 이벤트 카테고리명 */
/* 이벤트 카테고리 필터 (진행상태 탭 아래) */
#shop_all_page .cate_filter {display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px;}
#shop_all_page .cate_filter li a {display:flex; align-items:center; justify-content:center; min-width:84px; height:40px; padding:0 20px; border:1px solid #e6e3df; box-sizing:border-box; font-size:14px; color:#736d68; transition:all 0.2s;}
#shop_all_page .cate_filter li a:hover {border-color:#2b2926; color:#2b2926;}
#shop_all_page .cate_filter li.on a {border-color:#2b2926; background:#2b2926; color:#fff;}
#shop_all_page .prd_grid .badge .sale {background:#d5442f;}
#shop_all_page .prd_grid .badge .md {background:#2b6b4f;}
#shop_all_page .prd_grid .badge .hot {background:#e65100;}

/* ---------- 상품 목록형 (가로 정렬 view_list) ---------- */
#shop_all_page .prd_grid.view_list {
	display:flex;
	flex-direction:column;
	gap:24px;
}
#shop_all_page .prd_grid.view_list li {
	width:100%;
	border-bottom:1px solid #eeebe7;
	padding-bottom:24px;
	box-sizing:border-box;
}
#shop_all_page .prd_grid.view_list li:last-child {
	border-bottom:none;
	padding-bottom:0;
}
#shop_all_page .prd_grid.view_list li.nodata {
	display:block;
	width:100%;
	border-bottom:none;
	padding:80px 0;
	text-align:center;
}
#shop_all_page .prd_grid.view_list li a {
	display:flex;
	align-items:center;
	gap:36px;
	text-align:left;
	width:100%;
}
#shop_all_page .prd_grid.view_list .thumb {
	flex-shrink:0;
	width:180px;
	height:180px;
	margin-bottom:0;
	border-radius:4px;
	background:#f5f3f0;
	overflow:hidden;
}
#shop_all_page .prd_grid.view_list .thumb img {
	width:100%;
	height:100%;
	object-fit:cover;
}
#shop_all_page .prd_grid.view_list .info_wrap {
	flex:1;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	gap:8px;
}
#shop_all_page .prd_grid.view_list .badge {
	margin-top:0;
	margin-bottom:2px;
}
#shop_all_page .prd_grid.view_list .name {
	font-size:18px;
	font-weight:600;
	color:#2b2926;
	margin-bottom:0;
	line-height:1.4;
	word-break:keep-all;
	transition:color 0.2s;
}
#shop_all_page .prd_grid.view_list li a:hover .name {
	color:#6f4b3c;
}
#shop_all_page .prd_grid.view_list .price {
	font-size:18px;
	margin-top:2px;
}
#shop_all_page .prd_grid.view_list .price .dc {
	font-size:18px;
}
#shop_all_page .prd_grid.view_list .price .now {
	font-size:18px;
}
#shop_all_page .prd_grid.view_list .price .org {
	font-size:15px;
}
#shop_all_page .prd_grid.view_list .review {
	margin-top:0;
	font-size:13px;
}

/* ---------- 페이징 (공통 .paging_wrap .page 구조, 사이트 톤으로 오버라이드) ---------- */
#shop_all_page .paging_wrap {margin-top:64px; text-align:center;}
#shop_all_page .paging_wrap .page {display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:0;}
#shop_all_page .paging_wrap .page a,
#shop_all_page .paging_wrap .page strong {display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid transparent; border-radius:0; font-size:14px; font-weight:400; color:#736d68; line-height:1; transition:all 0.2s;}
#shop_all_page .paging_wrap .page a:hover {border-color:#2b2926; color:#2b2926;}
#shop_all_page .paging_wrap .page strong {background:#2b2926; border-color:#2b2926; color:#fff; font-weight:500;}
/* 화살표: 공통 출력의 <img> 는 숨기고 Font Awesome 아이콘으로 표시 (이전/다음/처음/끝) */
#shop_all_page .paging_wrap .page a.next {border:0; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:12px; color:#9c9691;}
#shop_all_page .paging_wrap .page a.next:hover {color:#2b2926;}
#shop_all_page .paging_wrap .page a.next img {display:none;}
#shop_all_page .paging_wrap .page a.next:before {content:'\f054';}
#shop_all_page .paging_wrap .page a.next:has(img[src*='li_prev_b']):before {content:'\f053';}
#shop_all_page .paging_wrap .page a.next.no02:before {content:'\f100';}
#shop_all_page .paging_wrap .page a.next.no03:before {content:'\f101';}

/* ---------- 반응형 ---------- */
@media all and (max-width:1551px){
	#shop_all_page .prd_grid {grid-template-columns:repeat(4, minmax(0,1fr));}
}
@media all and (max-width:1024px){
	#shop_all_page .page_inner {padding:48px 24px 80px;}
	#shop_all_page .page_tit {margin-bottom:36px; font-size:34px;}
	#shop_all_page .cate_tab {gap:0 28px;}
	#shop_all_page .cate_tab li a {font-size:16px; padding:12px 0 14px;}
	#shop_all_page .shop_list {margin-top:60px;}
	#shop_all_page .prd_grid {grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 20px;}
	#shop_all_page .prd_grid.view_list li a {gap:24px;}
	#shop_all_page .prd_grid.view_list .thumb {width:150px; height:150px;}
	#shop_all_page .prd_grid.view_list .name {font-size:16px;}
	#shop_all_page .prd_grid.view_list .price {font-size:16px;}
}
@media all and (max-width:768px){
	#shop_all_page .page_tit {font-size:28px;}
	/* 카테고리 탭: 가운데 정렬, 적절한 사이간격(22px), 1줄 스크롤바/회색 박스 제거 */
	#shop_all_page .cate_tab {justify-content:center !important; gap:0 22px !important; overflow-x:auto !important; flex-wrap:nowrap !important; white-space:nowrap !important; scrollbar-width:none !important; -ms-overflow-style:none !important; border-bottom:1px solid #e6e3df !important;}
	#shop_all_page .cate_tab::-webkit-scrollbar {display:none !important; width:0 !important; height:0 !important;}
	#shop_all_page .cate_tab li a {font-size:14px !important; padding:10px 0 12px !important; letter-spacing:-0.01em !important;}
	#shop_all_page .shop_list {margin-top:44px;}
	#shop_all_page .prd_grid {grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 16px;}
	#shop_all_page .prd_grid.view_list {gap:18px;}
	#shop_all_page .prd_grid.view_list li {padding-bottom:18px;}
	#shop_all_page .prd_grid.view_list li a {gap:18px;}
	#shop_all_page .prd_grid.view_list .thumb {width:110px; height:110px;}
	#shop_all_page .prd_grid.view_list .name {font-size:15px;}
	#shop_all_page .prd_grid.view_list .price {font-size:15px;}
	#shop_all_page .prd_grid.view_list .info_wrap {gap:5px;}
	#shop_all_page .list_tools {gap:10px;}
	#shop_all_page .view_toggle .btn_view {width:30px; height:30px;}
}
@media all and (max-width:480px){
	#shop_all_page .page_inner {padding:36px 16px 60px;}
	#shop_all_page .prd_grid {gap:28px 12px;}
	#shop_all_page .prd_grid.view_list {gap:14px;}
	#shop_all_page .prd_grid.view_list li {padding-bottom:14px;}
	#shop_all_page .prd_grid.view_list li a {gap:12px;}
	#shop_all_page .prd_grid.view_list .thumb {width:96px; height:96px;}
	#shop_all_page .prd_grid.view_list .name {font-size:14px;}
	#shop_all_page .prd_grid.view_list .price {font-size:14px;}
	#shop_all_page .prd_grid.view_list .badge span {height:20px; line-height:20px; padding:0 8px; font-size:10px;}
	#shop_all_page .paging_wrap {margin-top:40px;}
}