/* 메인 검색창(main_search.block.php) — 모양은 main_search.css, 여기는 큰 이미지 하단에 겹치는 위치 + 입력 중 미리보기 */
/* 블록은 #main_visual 바깥(</section> 바로 뒤)에 둔다 — #main_visual 이 overflow:hidden 이라 안에 두면 미리보기 목록이 이미지 끝에서 잘린다.
   높이 0 자리에서 검색창 높이 + 50px 만큼 위로 올려 이미지 하단에 겹친다. */
#main_search.in_visual{position:relative;z-index:20;height:0;padding:0 20px;background:none;}
#main_search.in_visual .inner{transform:translateY(calc(-100% - 50px));}
#main_search.in_visual form{border-color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25);}

/* 입력 중 상품 미리보기 (js/main_search.js) — 검색창 바로 아래에 펼친다 */
#main_search .inner{position:relative;}
#main_search .ms_suggest{position:absolute;left:20px;right:20px;top:calc(100% + 6px);background:#fff;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden;text-align:left;}
#main_search .ms_suggest ul{margin:0;padding:6px 0;list-style:none;}
#main_search .ms_suggest a{display:flex;align-items:center;gap:14px;padding:8px 18px;color:#222;text-decoration:none;}
#main_search .ms_suggest a:hover,#main_search .ms_suggest a:focus{background:#eef7fc;outline:none;}
#main_search .ms_img{flex:none;width:60px;height:60px;border-radius:6px;overflow:hidden;background:#f5f5f5;}
#main_search .ms_img img{width:60px;height:60px;object-fit:cover;display:block;}
#main_search .ms_name{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#main_search .ms_price{flex:none;font-size:15px;font-weight:700;color:#0093d7;}
#main_search .ms_empty{margin:0;padding:18px;font-size:15px;color:#666;text-align:center;}

@media (max-width:768px){
	#main_search.in_visual{padding:0 16px;}
	#main_search.in_visual .inner{transform:translateY(calc(-100% - 20px));}
	#main_search .ms_suggest{left:0;right:0;}
	#main_search .ms_suggest a{gap:10px;padding:8px 12px;}
	#main_search .ms_img,#main_search .ms_img img{width:48px;height:48px;}
	#main_search .ms_name,#main_search .ms_price{font-size:14px;}
}