@charset "utf-8";

/* ==========================================================================
   2026-07-26 [전체적용] 이 파일은 전 분양몰 공용 스킨이다.
     · 위치 : /www/m/css/search_v2.css  (기존 /data/rroys/m/css/ 에서 승격)
     · 페이지 ASP 가 무조건 링크하며, /data/{siteID}/m/css/search_v2.css 가 있는 몰은
       그 파일이 뒤에 로드돼 덮어쓴다(몰별 커스터마이즈 용도).
     · 메인컬러는 몰마다 다르다 → --sitecolor1/2/3(관리자 디자인관리 cfgColor1/2/3) 승계.
       색이 섞인 그림자/틴트는 color-mix() 로 계산한다(하드코딩 금지).
     · 되돌리려면 이 파일만 지우면 된다(ASP 는 파일존재 확인 후 링크).
   ========================================================================== */
/* =====================================================================
   rroys 모바일 상품검색 전용 스킨  (html.msrch_v2)
   /m/css/search_v2.css   2026-07-25 페이지업그레이드
   - 버튼: 라운딩 + 음영 + 트랜지션
   - 라인색: CSS 변수(--sr-line) 로 전 페이지 통일
   - 폰트: Pretendard Variable (아이콘폰트는 자체 규칙 유지)
   - 메인컬러: var(--sitecolor1) 승계  (rroys = #ff0051)
   ===================================================================== */
html.msrch_v2{
	--sr-primary: var(--sitecolor1, #ff0051);
	--sr-primary-weak: color-mix(in srgb, var(--sitecolor1, #ff0051) 8%, transparent);
	--sr-line:#ececf0;
	--sr-line-strong:#e0e0e6;
	--sr-ink:#222;
	--sr-sub:#9a9aa2;
	--sr-bg:#f4f4f6;
	--sr-card:#fff;
	--sr-radius:14px;
	--sr-shadow:0 2px 10px rgba(20,20,40,.06);
	--sr-shadow-btn:0 3px 8px color-mix(in srgb, var(--sitecolor1, #ff0051) 24%, transparent);
}

/* ---- 타이포 (아이콘폰트는 각자 font-family 규칙이 있어 영향 없음) ---- */
html.msrch_v2 #mobile_wrap,
html.msrch_v2 #content,
html.msrch_v2 .fix_gnbmenu,
html.msrch_v2 .top_fix_head{
	font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif;
	-webkit-font-smoothing:antialiased;
	letter-spacing:-.01em;
}

html.msrch_v2 #content{ background:var(--sr-bg); padding-top:10px; }

/* =========================== 상단 검색바 =========================== */
html.msrch_v2 .top_fix_head.sitebg2{ background:#fff; box-shadow:0 1px 0 var(--sr-line); }
html.msrch_v2 .top_fix_head .showSearchText{
	background:var(--sr-bg);
	border-radius:22px;
	margin:6px 8px;
	box-sizing:border-box;
	transition:box-shadow .2s ease, background .2s ease;
}
html.msrch_v2 .top_fix_head .showSearchText:focus-within{
	background:#fff;
	box-shadow:0 0 0 2px var(--sr-primary) inset;
}
html.msrch_v2 .top_fix_head .showSearchText input{
	background:transparent !important;
	font-size:14px; color:var(--sr-ink);
}

/* ===================== 정렬 / 보기방식 바(GNB) ===================== */
html.msrch_v2 .fix_gnbmenu.st1{
	background:#fff;
	border-top:0;
	border-bottom:1px solid var(--sr-line);
	padding:9px 12px;
	box-sizing:border-box;
	display:flex; align-items:center; justify-content:space-between;
}
html.msrch_v2 .fix_gnbmenu.fix_mode{ box-shadow:var(--sr-shadow); }
html.msrch_v2 .fix_gnbmenu .seltype_wrap.search{ width:auto; height:auto; padding:0; }
html.msrch_v2 .total_search_txt{ font-size:13px; color:var(--sr-sub); font-weight:500; }
html.msrch_v2 .total_search_txt em{ color:var(--sr-primary); font-weight:800; font-style:normal; margin:0 1px; }

html.msrch_v2 .list_view_type{ display:flex; align-items:center; gap:6px; width:auto !important; margin:0 !important; }
html.msrch_v2 .list_view_type select.select1{
	-webkit-appearance:none; appearance:none;
	height:34px; line-height:34px;
	width:auto !important; min-width:104px;
	padding:0 30px 0 13px;
	border:1px solid var(--sr-line-strong);
	border-radius:18px;
	background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
	font-size:13px; font-weight:600; color:var(--sr-ink);
	box-shadow:0 1px 2px rgba(20,20,40,.04);
	transition:border-color .2s ease, box-shadow .2s ease;
	cursor:pointer;
}
html.msrch_v2 .list_view_type select.select1:focus{ outline:0; border-color:var(--sr-primary); box-shadow:0 0 0 2px var(--sr-primary-weak); }
html.msrch_v2 .list_view_type > a.iconfont{
	display:inline-flex; align-items:center; justify-content:center;
	width:34px; height:34px; margin:0;
	border:1px solid var(--sr-line-strong);
	border-radius:10px;
	background:#fff; color:#b3b3bb; font-size:18px;
	box-shadow:0 1px 2px rgba(20,20,40,.04);
	transition:all .18s ease;
}
html.msrch_v2 .list_view_type > a.iconfont:active{ transform:scale(.94); }
html.msrch_v2 .list_view_type > a.iconfont:hover{ color:var(--sr-primary); border-color:var(--sr-primary); }

/* =========================== 상품 카드 =========================== */
html.msrch_v2 .newList{ padding:12px 6px 24px; }
html.msrch_v2 .newList ul.cont_list{ width:50% !important; }
html.msrch_v2 .newList ul.cont_list.st3 > li{
	background:var(--sr-card) !important;
	border:1px solid var(--sr-line) !important;
	border-radius:var(--sr-radius);
	margin:0 6px 12px !important;
	width:auto !important;
	overflow:hidden;
	box-shadow:var(--sr-shadow);
	transition:transform .2s ease, box-shadow .2s ease;
}
html.msrch_v2 .newList ul.cont_list.st3 > li:active{ transform:translateY(1px); }

/* 썸네일 */
html.msrch_v2 .positionWrap dl{ margin:0; }
html.msrch_v2 .positionWrap dl dt{ position:relative; }
html.msrch_v2 .positionWrap dl dt > a.color_rel{ display:block; border-radius:0; overflow:hidden; background:#f6f6f8; }
html.msrch_v2 .positionWrap dl dt > a.color_rel img.prodImg,
html.msrch_v2 .positionWrap dl dt > a.color_rel img{
	border-radius:0; display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
}
html.msrch_v2 .positionWrap .rgt_free{
	position:absolute; top:8px; left:8px; z-index:3;
	background:rgba(0,0,0,.55); color:#fff; font-size:10px; font-weight:600;
	padding:3px 7px; border-radius:11px; line-height:1;
}
html.msrch_v2 .positionWrap .rgt_free:empty{ display:none; }  /* 무료배송 표기 없을 때 빈 배지 숨김 */

/* 카드 안 퀵버튼(.pdBtnBox)은 원본 전역 규칙(ul.cont_list li dl dt a{height:100%!important})으로
   높이 0 처리되어 노출되지 않는 레거시 마크업이다. 원본 동작 유지를 위해 스타일을 덧대지 않는다. */

/* 텍스트 영역 */
html.msrch_v2 .positionWrap dl dd{ padding:11px 12px 13px; }
html.msrch_v2 .positionWrap .brand{ font-size:11px; font-weight:700; color:var(--sr-sub); letter-spacing:.02em; margin-bottom:3px; }
html.msrch_v2 .positionWrap .tit a{
	display:block; font-size:13.5px; line-height:1.4; color:var(--sr-ink); font-weight:500;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
	min-height:2.8em;
}
html.msrch_v2 .btm_wrap{ margin-top:7px; }
html.msrch_v2 .price_wrap{ display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; }
html.msrch_v2 .price_wrap .per{ display:flex; align-items:baseline; gap:3px; }
html.msrch_v2 .price_wrap .per em{ color:var(--sr-primary); font-size:17px; font-weight:800; font-style:normal; }
html.msrch_v2 .price_wrap .per .per_icon{ color:var(--sr-primary); font-size:14px; font-weight:800; }
html.msrch_v2 .prcStyleBox{ font-size:16px; font-weight:800; color:var(--sr-ink); }
html.msrch_v2 .prcStyleBox em{ font-size:16px; font-weight:800; }
html.msrch_v2 .prcStyleBox .mwon{ font-size:12px; font-weight:600; margin-left:1px; }
html.msrch_v2 .pricebox del.prcStyleBox{ font-size:12px; font-weight:500; color:#b9b9c0; }
html.msrch_v2 .pricebox .prcStyleBox:not(del){ color:var(--sr-ink); }

/* 별점 */
html.msrch_v2 .star_wrap{ display:flex; align-items:center; gap:4px; margin-top:6px; }
html.msrch_v2 .star_wrap .total_score{ font-size:11px; font-weight:700; color:#f5a623; }
html.msrch_v2 .star_wrap .how_many{ font-size:11px; color:var(--sr-sub); }

/* 담기 버튼(리스트 하단, 노출되는 몰용) */
html.msrch_v2 .cartAddBtn{
	display:inline-flex; align-items:center; justify-content:center; gap:5px;
	margin-top:10px; width:100%; height:40px;
	border-radius:11px;
	background:var(--sr-primary) !important;
	color:#fff; font-size:13px; font-weight:700;
	box-shadow:var(--sr-shadow-btn);
	transition:transform .16s ease, filter .16s ease;
}
html.msrch_v2 .cartAddBtn:active{ transform:translateY(1px); filter:brightness(.96); }
html.msrch_v2 .cartAddBtn .material-icons{ font-size:18px; color:#fff; }

/* =========================== 검색결과 없음 =========================== */
html.msrch_v2 .noitem{
	background:#fff; margin:14px 12px; border-radius:var(--sr-radius);
	border:1px solid var(--sr-line); box-shadow:var(--sr-shadow);
	padding:46px 20px !important; text-align:center;
}
html.msrch_v2 .noitem .material-icons{ color:#dcdce2 !important; font-size:64px !important; }
html.msrch_v2 .noitem .sitecolor1{ color:var(--sr-primary); font-weight:800; font-size:15px; margin:12px 0 4px; }

/* '현재 인기있는 상품' 섹션 타이틀 */
html.msrch_v2 .noitemPhase{ margin-top:4px; }
html.msrch_v2 .noitemTitle{
	font-size:16px !important; font-weight:800 !important; color:var(--sr-ink);
	padding:20px 16px 4px !important;
}