@charset "utf-8";

/* ==========================================================================
   2026-07-26 [전체적용] 이 파일은 전 분양몰 공용 스킨이다.
     · 위치 : /www/m/css/m_main_v2.css  (기존 /data/rroys/m/css/ 에서 승격)
     · 페이지 ASP 가 무조건 링크하며, /data/{siteID}/m/css/m_main_v2.css 가 있는 몰은
       그 파일이 뒤에 로드돼 덮어쓴다(몰별 커스터마이즈 용도).
     · 메인컬러는 몰마다 다르다 → --sitecolor1/2/3(관리자 디자인관리 cfgColor1/2/3) 승계.
       색이 섞인 그림자/틴트는 color-mix() 로 계산한다(하드코딩 금지).
     · 되돌리려면 이 파일만 지우면 된다(ASP 는 파일존재 확인 후 링크).
   ========================================================================== */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ==========================================================================
   rroys 모바일 카테고리/상품리스트 전용 스킨
   파일  : /m/css/m_main_v2.css
   대상  : /m/goods/main.asp   (html.page_m_main 이 있을 때만 적용)

   2026-07-25 페이지업그레이드
     1) 폰트   : Pretendard Variable (다이나믹 서브셋) 통일
     2) 라인색 : --rr-line 한 곳에서 관리
     3) 버튼   : 라운딩 + 음영 + hover/active 트랜지션
     4) 카드/여백/타이포/가격 표기 정돈, 2열 정렬 어긋남 해소

   ※ 모든 선택자는 html.page_m_main 으로 스코프해서 다른 모바일 페이지에
     영향이 가지 않게 한다. (공용 common.css 를 건드리지 않기 위함)
   ========================================================================== */

html.page_m_main {
	/* 쇼핑몰 메인컬러(cfgColor1/2/3)를 그대로 승계 */
	--rr-primary:       var(--sitecolor1, #FF0051);
	--rr-primary-2:     var(--sitecolor2, #FF66B3);
	--rr-primary-soft:  var(--sitecolor3, #FBEFEF);

	--rr-ink:           #17181C;
	--rr-ink-2:         #4B5158;
	--rr-ink-3:         #8B9199;
	--rr-ink-4:         #B4B9C0;

	/* 전 페이지 공통 라인 색상 */
	--rr-line:          #E7E9ED;
	--rr-line-strong:   #D8DCE3;
	--rr-bg:            #FFFFFF;
	--rr-bg-soft:       #F7F8FA;

	--rr-radius:        14px;
	--rr-radius-sm:     10px;
	--rr-radius-pill:   999px;

	--rr-shadow-sm:     0 1px 2px rgba(23, 24, 28, .06);
	--rr-shadow:        0 2px 8px rgba(23, 24, 28, .08);
	--rr-shadow-md:     0 6px 18px rgba(23, 24, 28, .10);

	--rr-ease:          .18s cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------------------------
   1. 타이포 - Pretendard 통일
   -------------------------------------------------------------------------- */
html.page_m_main body,
html.page_m_main input,
html.page_m_main select,
html.page_m_main textarea,
html.page_m_main button,
html.page_m_main .top_fix_head,
html.page_m_main .newList,
html.page_m_main .most-view-wrap,
html.page_m_main .seltype_wrap,
html.page_m_main .shopFilter,
html.page_m_main .check_brand_wrap {
	font-family: 'Pretendard Variable', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', sans-serif;
	-webkit-font-smoothing: antialiased;
	letter-spacing: -.01em;
}
/* 2026-07-26 : body 에 background 를 주면 안 된다.
   PC 화면에서 좌우로 깔리는 쇼핑몰 배경이미지(/data/{몰}/banner/…)가 body 배경으로
   지정돼 있어서, 여기서 흰색을 덮으면 배경이 통째로 사라진다(실제로 사라졌음). 색상만 지정. */
html.page_m_main body { color: var(--rr-ink); }

/* Material Icons 는 아이콘 폰트라 위 규칙에서 제외 */
html.page_m_main .material-icons,
html.page_m_main .iconfont,
html.page_m_main [class*="ftic-"] { font-family: 'Material Icons', 'iconfont'; letter-spacing: normal; }

/* --------------------------------------------------------------------------
   2. 상단 고정 헤더 / 브레드크럼
   -------------------------------------------------------------------------- */
html.page_m_main .top_fix_head.sub_top_head {
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--rr-line);
	box-shadow: none;
}
html.page_m_main .top_fix_head .sub_title {
	font-size: 17px;
	font-weight: 600;
	color: var(--rr-ink);
	letter-spacing: -.02em;
}
html.page_m_main .top_fix_head .sub_title a { color: inherit; }
html.page_m_main .top_fix_head .btnLeft a,
html.page_m_main .top_fix_head .search_box {
	border-radius: var(--rr-radius-pill);
	transition: background var(--rr-ease);
}
html.page_m_main .top_fix_head .btnLeft a:active,
html.page_m_main .top_fix_head .search_box:active { background: var(--rr-bg-soft); }

/* 브레드크럼(대>중>소) - 제목과 중복돼 보이지 않도록 작고 옅게 */
html.page_m_main .catePosition.iV {
	padding: 14px 16px 2px;
	background: transparent;
	border: 0;
}
html.page_m_main .catePosition.iV h5,
html.page_m_main .catePosition.iV h5 span.de1 {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--rr-ink-3);
}
html.page_m_main .catePosition.iV h5 a { color: var(--rr-ink-3); }

/* --------------------------------------------------------------------------
   3. 하위 카테고리 칩
   -------------------------------------------------------------------------- */
html.page_m_main .cateBox_wrap.iV ul { gap: 8px; padding: 12px 16px 4px; }
html.page_m_main .cateBox_wrap.iV ul li {
	height: 40px;
	line-height: 38px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-pill);
	background: var(--rr-bg);
	box-shadow: var(--rr-shadow-sm);
	transition: border-color var(--rr-ease), box-shadow var(--rr-ease), transform var(--rr-ease);
}
html.page_m_main .cateBox_wrap.iV ul li:active { transform: translateY(1px); box-shadow: none; }
html.page_m_main .cateBox_wrap.iV ul li a {
	height: 38px;
	line-height: 38px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rr-ink-2);
}
html.page_m_main .cateBox_wrap.iV ul li:first-child {
	border-color: var(--rr-primary);
	background: var(--rr-primary-soft);
	box-shadow: none;
}
html.page_m_main .cateBox_wrap.iV ul li:first-child a { color: var(--rr-primary); font-weight: 700; }

/* --------------------------------------------------------------------------
   4. 정렬/보기방식 툴바 - 버튼 라운딩 + 음영 통일
   -------------------------------------------------------------------------- */
html.page_m_main .seltype_wrap.iV.goods {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px 14px;
	border: 0;
	background: var(--rr-bg);
}
html.page_m_main .seltype_wrap .seltypeBox { display: flex; align-items: center; gap: 8px; }

html.page_m_main .seltype_wrap .pd_wrap .sc_dtl.iV,
html.page_m_main .seltype_wrap .-selectStyle select.select1,
html.page_m_main .seltype_wrap .-selectStyle .jquery-ui-select,
html.page_m_main .seltype_wrap .-selectStyle .ui-select {
	height: 40px !important;
	min-width: 96px;
	padding: 0 14px;
	line-height: 38px;
	font-size: 13px;
	font-weight: 500;
	color: var(--rr-ink-2);
	background: var(--rr-bg);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow-sm);
	box-sizing: border-box;
	transition: border-color var(--rr-ease), box-shadow var(--rr-ease), transform var(--rr-ease);
}
html.page_m_main .seltype_wrap .pd_wrap .sc_dtl.iV { display: inline-block; cursor: pointer; }
html.page_m_main .seltype_wrap .pd_wrap .sc_dtl.iV:active,
html.page_m_main .seltype_wrap .-selectStyle select.select1:active { transform: translateY(1px); box-shadow: none; }
html.page_m_main .seltype_wrap .-selectStyle select.select1 {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 30px;
	background-image: linear-gradient(45deg, transparent 50%, var(--rr-ink-3) 50%), linear-gradient(135deg, var(--rr-ink-3) 50%, transparent 50%);
	background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* 보기방식 = 세그먼트 컨트롤 */
html.page_m_main .list_view_type.iV {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	margin: 0;
	background: var(--rr-bg-soft);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow-sm);
}
html.page_m_main .list_view_type.iV > a {
	width: 36px;
	height: 34px;
	line-height: 34px;
	margin: 0;
	text-align: center;
	color: var(--rr-ink-3);
	background: transparent;
	border: 0;
	border-radius: var(--rr-radius-pill);
	transition: background var(--rr-ease), color var(--rr-ease);
}
html.page_m_main .list_view_type.iV > a.on {
	color: var(--rr-ink);
	background: var(--rr-bg);
	box-shadow: var(--rr-shadow-sm);
}

/* --------------------------------------------------------------------------
   5. BEST(조회수 TOP) 가로 스와이퍼
   -------------------------------------------------------------------------- */
/* 2026-07-26 : 정렬 툴바에 바짝 붙어 있어 위쪽 여백을 넉넉히.
   commontotal.css 의 `.content-product-list .fix_gnbmenu .most-view-wrap`(클래스 3개)이
   padding:0 16px 로 눌러버리므로 .fix_gnbmenu 를 끼워 특이도를 올려야 먹는다.
   좌우 16px 는 상품목록(.newList 10px + li margin 6px)과 같은 값이라 그대로 둔다. */
html.page_m_main .fix_gnbmenu .most-view-wrap,
html.page_m_main .most-view-wrap {
	display: block;
	margin: 4px 0 24px;
	padding: 30px 16px 0;
	box-sizing: border-box;
}

/* 제목 h2 가 .hide(화면 밖으로 밀어내는 클래스)라 맥락 없는 이미지 띠로만 보였다.
   .hide 를 되살리면 접근성용 숨김 규칙과 싸우게 되므로 섹션 제목을 별도로 그린다. */
html.page_m_main .most-view-wrap::before {
	content: '지금 많이 보는 상품';
	display: block;
	margin: 0 0 12px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rr-ink);
}
/* 좌우 여백은 wrap 이 이미 갖고 있다. 여기서 또 주면 BEST 만 32px 로 밀려 목록과 어긋난다. */
html.page_m_main .fix_gnbmenu .most-view-container,
html.page_m_main .most-view-container { padding: 0; overflow: hidden; }
html.page_m_main .most-view-list .image-box {
	position: relative;
	border-radius: var(--rr-radius);
	overflow: hidden;
	background: var(--rr-bg-soft);
	box-shadow: var(--rr-shadow-sm);
}
html.page_m_main .most-view-list .image-box img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	transition: transform .3s ease;
}
html.page_m_main .most-view-list .image-box:active img { transform: scale(1.02); }
html.page_m_main .most-view-list .detail-box { padding: 10px 2px 0; }
html.page_m_main .most-view-list .title-link {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 34px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--rr-ink-2);
}
html.page_m_main .most-view-list .price-box { margin-top: 6px; }
html.page_m_main .most-view-list .discount-box { display: flex; align-items: baseline; gap: 5px; }
html.page_m_main .most-view-list .discount-rate { font-size: 15px; font-weight: 800; color: var(--rr-primary); }
html.page_m_main .most-view-list .discount-price { font-size: 15px; font-weight: 800; color: var(--rr-ink); }
html.page_m_main .most-view-list .price {
	display: inline-block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--rr-ink-4);
	text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   6. 상품 리스트(2열) - 카드 정돈 + 좌우 열 높이 어긋남 해소
   -------------------------------------------------------------------------- */
html.page_m_main .newList { padding: 0 10px; }
html.page_m_main .newList > .wrap-title {
	display: flex;
	align-items: center;
	padding: 6px 6px 14px;
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--rr-ink);
}
html.page_m_main .newList > .wrap-title:empty,
html.page_m_main .newList > .wrap-title .category:empty { display: none; }

html.page_m_main .newList ul.cont_list > li {
	width: calc(100% - 12px) !important;
	margin: 0 6px 26px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent;
	box-sizing: border-box;
}
html.page_m_main .newList ul.cont_list > li:empty { display: none; }

/* 썸네일 - 라운딩 + 눌림 피드백 */
html.page_m_main .newList li .positionWrap dl dt a.color_rel {
	border-radius: var(--rr-radius);
	overflow: hidden;
	background: var(--rr-bg-soft);
	box-shadow: var(--rr-shadow-sm);
}
html.page_m_main .newList li .positionWrap dl dt a.color_rel img.prodImg {
	transition: transform .3s ease;
}
html.page_m_main .newList li .positionWrap dl dt a.color_rel:active img.prodImg { transform: scale(1.02); }

/* 타임세일 배지: 이미지 위 블록 → 이미지 위에 겹치는 칩.
   (배지가 있는 카드만 46px 더 높아져서 좌/우 열이 통째로 어긋나 있었다) */
html.page_m_main .newList li .positionWrap .timerestBox_height.-list {
	position: absolute;
	top: 8px;
	right: 8px;
	left: auto;
	z-index: 3;
	width: auto;
	max-width: calc(100% - 16px);
	height: auto;
	text-align: right;
	background: none;
	pointer-events: none;
}
html.page_m_main .newList li .positionWrap .timerestBox_height .timerestBox {
	background: transparent;
	border: 0;
}
html.page_m_main .newList li .timeSaleWrap {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	padding: 5px 9px;
	background: rgba(255, 255, 255, .94);
	border: 0;
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
html.page_m_main .newList li .timeSaleWrap .ts_txt { display: inline-flex; align-items: center; }
html.page_m_main .newList li .timeSaleWrap .timeCount { font-size: 11px; font-weight: 600; }

/* 무료배송 뱃지 */
html.page_m_main .newList li .rgt_free:not(:empty) {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 3;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	color: var(--rr-ink);
	background: rgba(255, 255, 255, .94);
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow-sm);
}

/* 퀵버튼(장바구니/찜/바로구매)
   base.css 기본값이 `opacity:0; z-index:-1` 인 hover 오버레이라, 마우스가 없는 모바일에서는
   이 버튼들을 영영 누를 수 없었다. 썸네일 우하단에 상시 노출되는 원형 버튼으로 바꾼다. */
html.page_m_main .newList li .pdBtnBox {
	top: auto;
	right: 8px;
	bottom: 8px;
	left: auto;
	width: auto;
	height: auto;
	opacity: 1;
	z-index: 4;
	background: none;
}
html.page_m_main .newList li .pdBtnBox.hide { display: none; }
html.page_m_main .newList li .pdBtnBox ul {
	position: static;
	transform: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	width: auto;
	overflow: visible;
}
html.page_m_main .newList li .pdBtnBox ul li.qBtn {
	position: static;
	top: auto;
	width: 32px;
	max-width: none;
	margin: 0;
	padding: 0;
	opacity: 1;
	border-radius: var(--rr-radius-pill);
}
html.page_m_main .newList li .pdBtnBox ul li.qBtn a {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	max-width: none;
	max-height: none;
	background: rgba(255, 255, 255, .95);
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease);
}
html.page_m_main .newList li .pdBtnBox ul li.qBtn a::after { display: none; }
html.page_m_main .newList li .pdBtnBox ul li.qBtn a:active { transform: scale(.92); box-shadow: var(--rr-shadow-sm); }
html.page_m_main .newList li .pdBtnBox ul li.qBtn a span,
html.page_m_main .newList li .pdBtnBox ul li.qBtn a i {
	position: static;
	inset: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	line-height: 1;
	font-size: 18px;
	color: var(--rr-ink-2);
	background: none;
	border: 0;
	border-radius: var(--rr-radius-pill);
}
html.page_m_main .newList li .pdBtnBox ul li.qBtn a span.on { color: var(--rr-primary); }
html.page_m_main .newList li .pdBtnBox ul li.qBuy a span { color: #fff; }

/* 상품명 / 가격 */
html.page_m_main .newList li dl dd { padding: 12px 4px 0; }
html.page_m_main .newList li .brand {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	color: var(--rr-ink-3);
	text-transform: uppercase;
}
html.page_m_main .newList li span.tit {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 36px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--rr-ink-2);
}
html.page_m_main .newList li span.tit a { color: inherit; }

html.page_m_main .newList li .btm_wrap { margin-top: 8px; }
html.page_m_main .newList li .price_wrap .per.priceStyle1 {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
}
html.page_m_main .newList li .price_wrap .per.priceStyle1 em,
html.page_m_main .newList li .price_wrap .per.priceStyle1 .per_icon {
	font-size: 16px;
	font-weight: 800;
	font-style: normal;
	color: var(--rr-primary);
}
html.page_m_main .newList li .price_wrap .per.priceStyle1 .per_icon { font-size: 13px; margin-left: -2px; }
html.page_m_main .newList li .price_wrap .prcStyleBox {
	font-size: 16px;
	font-weight: 800;
	color: var(--rr-ink);
}
html.page_m_main .newList li .price_wrap .prcStyleBox .mwon { font-size: 12px; font-weight: 600; }
html.page_m_main .newList li .pricebox { margin-top: 2px; }
html.page_m_main .newList li .pricebox del.prcStyleBox {
	font-size: 12px;
	font-weight: 400;
	color: var(--rr-ink-4);
}
html.page_m_main .newList li .money_txt { margin-top: 4px; font-size: 11px; color: var(--rr-ink-3); }
html.page_m_main .newList li .money_txt .list_p {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 3px;
	line-height: 15px;
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
	background: var(--rr-ink-3);
	border-radius: var(--rr-radius-pill);
}

/* --------------------------------------------------------------------------
   7. 빈 결과 / 더보기 로딩
   -------------------------------------------------------------------------- */
html.page_m_main .loading { padding: 18px 0 26px; text-align: center; }
html.page_m_main .loading .loader img { width: 26px; height: 26px; opacity: .5; }

/* --------------------------------------------------------------------------
   8. 상세검색 / 필터 / 브랜드 레이어 - 버튼 통일
   -------------------------------------------------------------------------- */
/* 2026-07-26 : 상세검색의 "가격" · "결과 내 재검색" 항목 사이 구분선 제거 요청 */
html.page_m_main .sc_dtl_wrap .dtlsc_box dl { border: 0; }
html.page_m_main .sc_dtl_wrap .inwrap input.text,
html.page_m_main .shopFilter .secMid input.text {
	height: 44px;
	padding: 0 12px;
	font-size: 14px;
	color: var(--rr-ink);
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-sm);
	box-sizing: border-box;
	transition: border-color var(--rr-ease), box-shadow var(--rr-ease);
}
html.page_m_main .sc_dtl_wrap .inwrap input.text:focus {
	outline: 0;
	border-color: var(--rr-primary);
	box-shadow: 0 0 0 3px var(--rr-primary-soft);
}
html.page_m_main .btn_dtlsc .btnStyle1,
html.page_m_main .shopFilter .secBot .btnCp,
html.page_m_main .check_brand_wrap .check_brand_foot .btn_style1 {
	border-radius: var(--rr-radius-sm);
	box-shadow: var(--rr-shadow);
	font-weight: 600;
	letter-spacing: -.01em;
	transition: transform var(--rr-ease), box-shadow var(--rr-ease), filter var(--rr-ease);
}
html.page_m_main .btn_dtlsc .btnStyle1:active,
html.page_m_main .shopFilter .secBot .btnCp:active,
html.page_m_main .check_brand_wrap .check_brand_foot .btn_style1:active {
	transform: translateY(1px);
	box-shadow: var(--rr-shadow-sm);
	filter: brightness(.96);
}
html.page_m_main .shopFilter { border-radius: 0; }
html.page_m_main .shopFilter .secTop .tit { box-shadow: none; border-bottom: 1px solid var(--rr-line); }
html.page_m_main .shopFilter .secMid ul li .tit {
	background: var(--rr-bg-soft);
	color: var(--rr-ink-2);
	font-weight: 600;
	border-top: 1px solid var(--rr-line);
	border-bottom: 1px solid var(--rr-line);
}
html.page_m_main .shopFilter .secMid ul li .con label {
	padding: 7px 12px;
	border: 1px solid var(--rr-line);
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow-sm);
	transition: all var(--rr-ease);
}
html.page_m_main .shopFilter .secMid ul li .con label.on {
	color: var(--rr-primary);
	border-color: var(--rr-primary);
	background: var(--rr-primary-soft);
	font-weight: 600;
}
html.page_m_main .check_brand_wrap .check_brand_head h1 { font-size: 17px; font-weight: 600; }

/* --------------------------------------------------------------------------
   9. 라인 색상 통일 - 남아있는 회색 테두리들을 --rr-line 으로 수렴
   -------------------------------------------------------------------------- */
html.page_m_main .fix_gnbmenu,
html.page_m_main .seltype_wrap,
html.page_m_main .cateBox_wrap,
html.page_m_main .catemenus,
html.page_m_main .rgt_menu .rgt_menu_cont h1,
html.page_m_main .rgt_menu .rgt_menu_cont .depth1_in_T,
html.page_m_main .rgt_menu .rgt_menu_cont .depth1_in_T .depth2 li { border-color: var(--rr-line); }

/* --------------------------------------------------------------------------
   10. 하단 플로팅 / 상단이동 버튼
   -------------------------------------------------------------------------- */
html.page_m_main .float_btn_wrap a,
html.page_m_main .conf_cart {
	border-radius: var(--rr-radius-pill);
	box-shadow: var(--rr-shadow-md);
	transition: transform var(--rr-ease), box-shadow var(--rr-ease);
}
html.page_m_main .float_btn_wrap a:active,
html.page_m_main .conf_cart:active { transform: translateY(1px); box-shadow: var(--rr-shadow); }

/* --------------------------------------------------------------------------
   11. 1열 보기(listCol=D) 가격 표기 — 2열과 동일한 디자인
   1열은 goods_list.inc.asp 가 .newList 를 만들지 않아 상품이 ul.cont_list.D 에
   그대로 남는다. 그래서 위(6장)의 2열 규칙이 적용되지 않아 할인율이 50px 진회색,
   판매가가 12px 보통 굵기로 나오고 있었다. 같은 값으로 맞춘다.
   -------------------------------------------------------------------------- */
/* 2열은 price_wrap 이 세로 정렬(할인율+판매가 → 그 아래 할인전가격)인데
   1열만 가로 정렬이라 할인전가격이 판매가 오른쪽 위에 떠 있었다. 2열과 같은 세로 정렬로. */
html.page_m_main ul.cont_list.D li dl dd .price_wrap {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}
html.page_m_main ul.cont_list.D > li .price_wrap .per.priceStyle1 {
	display: flex;
	align-items: baseline;
	gap: 4px;
	flex-wrap: wrap;
}
html.page_m_main ul.cont_list.D > li .price_wrap .per.priceStyle1 em,
html.page_m_main ul.cont_list.D > li .price_wrap .per.priceStyle1 .per_icon {
	font-size: 16px;
	font-weight: 800;
	font-style: normal;
	line-height: 1.2;
	color: var(--rr-primary);
}
html.page_m_main ul.cont_list.D > li .price_wrap .per.priceStyle1 .per_icon {
	font-size: 13px;
	margin-left: -2px;
}
html.page_m_main ul.cont_list.D > li .price_wrap .prcStyleBox {
	display: inline-block;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--rr-ink);
}
html.page_m_main ul.cont_list.D > li .price_wrap .prcStyleBox .mwon { font-size: 12px; font-weight: 600; }
html.page_m_main ul.cont_list.D > li .pricebox { margin-top: 2px; }
/* commontotal.css 의 `ul.cont_list.D li dl dd .price_wrap > div.pricebox .priceStyle1`(14px)이
   더 구체적이라 같은 형태로 맞춰 특이도를 넘긴다. */
html.page_m_main ul.cont_list.D li dl dd .price_wrap > div.pricebox del.prcStyleBox,
html.page_m_main ul.cont_list.D li dl dd .price_wrap > div.pricebox .priceStyle1 {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--rr-ink-4);
}
html.page_m_main ul.cont_list.D li dl dd .price_wrap > div.pricebox del.prcStyleBox .mwon { font-size: 12px; font-weight: 400; }

/* --------------------------------------------------------------------------
   12. 좁은 화면 보정
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
	html.page_m_main .seltype_wrap .pd_wrap .sc_dtl.iV,
	html.page_m_main .seltype_wrap .-selectStyle select.select1 { min-width: 84px; padding: 0 10px; font-size: 12px; }
	html.page_m_main .newList li span.tit { font-size: 12px; height: 34px; }
	html.page_m_main .newList li .price_wrap .prcStyleBox,
	html.page_m_main .newList li .price_wrap .per.priceStyle1 em { font-size: 15px; }
}

/* ==========================================================================
   2026-07-26  수정요청 3건 (모바일 실측 기준, 아이프레임 390px 뷰포트로 검증)
     ① 썸네일 ↔ 상품명 여백 축소
        원인 : dt 안의 a.color_rel 가 inline-block 이라 글자 baseline 아래 여백(5px)이
               썸네일 밑에 남고, 거기에 dd 상단 패딩 12px 이 더해져 17px 이었다.
               폰에서는 카드 폭이 작아(166px) 같은 17px 이 상대적으로 더 크게 보인다.
        조치 : a 를 블록으로 바꿔 baseline 여백을 없애고 dd 상단 패딩을 10px 로.
     ② 시중가(취소선) 색을 중성 회색(#999)으로 통일 — 기존은 푸른기 도는 옅은 회색(#B4B9C0)
     ③ 카테고리 제목 ↔ 첫 썸네일 여백 축소
        원인 : 전역 CSS 의 .newList ul.cont_list { padding-top:24px } + wrap-title 하단 14px = 38px
   ========================================================================== */

/* ① 썸네일 밑 baseline 여백 제거 + 상품명까지의 간격 축소 */
html.page_m_main .newList li .positionWrap dl dt,
html.page_m_main ul.cont_list.D > li .positionWrap dl dt {
	display: block;
}
html.page_m_main .newList li .positionWrap dl dt a.color_rel,
html.page_m_main ul.cont_list.D > li .positionWrap dl dt a.color_rel {
	display: block;
}
html.page_m_main .newList li .positionWrap dl dt img.prodImg,
html.page_m_main ul.cont_list.D > li .positionWrap dl dt img.prodImg {
	display: block;
	vertical-align: top;
}
html.page_m_main .newList li dl dd,
html.page_m_main ul.cont_list.D > li dl dd { padding-top: 10px; }

/* ② 시중가 취소선 - 중성 회색 */
html.page_m_main .newList li .pricebox del.prcStyleBox,
html.page_m_main .newList li .pricebox del.prcStyleBox .mwon,
html.page_m_main ul.cont_list.D > li .pricebox del.prcStyleBox,
html.page_m_main ul.cont_list.D > li .pricebox del.prcStyleBox .mwon,
html.page_m_main .newList li del.prcStyleBox,
html.page_m_main .newList li del.prcStyleBox .mwon,
html.page_m_main .most-view-list .price {
	color: #999 !important;
	text-decoration-color: #999;
}

/* ③ 카테고리 제목 ↔ 첫 썸네일 여백 (38px -> 14px) */
html.page_m_main .newList ul.cont_list { padding-top: 4px; }
html.page_m_main .newList > .wrap-title { padding-bottom: 10px; }
html.page_m_main .cateBox_wrap.iV ul { padding-bottom: 0; }