@charset "utf-8";

/* ==========================================================================
   2026-07-26 [전체적용] 이 파일은 전 분양몰 공용 스킨이다.
     · 위치 : /www/m/css/content_v2.css  (기존 /data/rroys/m/css/ 에서 승격)
     · 페이지 ASP 가 무조건 링크하며, /data/{siteID}/m/css/content_v2.css 가 있는 몰은
       그 파일이 뒤에 로드돼 덮어쓴다(몰별 커스터마이즈 용도).
     · 메인컬러는 몰마다 다르다 → --sitecolor1/2/3(관리자 디자인관리 cfgColor1/2/3) 승계.
       색이 섞인 그림자/틴트는 color-mix() 로 계산한다(하드코딩 금지).
     · 되돌리려면 이 파일만 지우면 된다(ASP 는 파일존재 확인 후 링크).
   ========================================================================== */
/* =========================================================================
   rroys · 모바일 상품상세 전용 스킨  (/m/goods/content.asp)
   - 적용 스코프 : html.mc_v2  (content.asp 에서 rroys 몰에만 클래스 부여)
   - 라인색/라운딩/음영/타이포를 이 파일 한 곳에서 관리
   - 2026-07-25 최초 작성
   ========================================================================= */

/* ------------------------------------------------------------------ 토큰 */
html.mc_v2{
	--mc-primary        : var(--sitecolor1, #FF0051);
	--mc-primary-2      : var(--sitecolor2, #FF66B3);
	--mc-primary-weak   : var(--sitecolor3, #FFF1F5);

	--mc-ink            : #17171C;   /* 본문 강조 */
	--mc-ink-2          : #55555F;   /* 본문 */
	--mc-ink-3          : #8E8E9A;   /* 보조/라벨 */

	--mc-line           : #ECECF1;   /* ★ 기본 라인색 (전 페이지 통일) */
	--mc-line-strong    : #DCDCE4;   /* 입력요소·아웃라인 버튼 */
	--mc-band           : #F5F5F8;   /* 섹션 구분 밴드 */
	--mc-surface        : #FFFFFF;

	--mc-r-sm           : 8px;
	--mc-r-md           : 12px;
	--mc-r-lg           : 16px;
	--mc-r-pill         : 999px;

	--mc-shadow-btn     : 0 6px 16px rgba(23,23,28,.16);
	--mc-shadow-brand   : 0 6px 16px rgba(23,23,28,.18);
	--mc-shadow-card    : 0 2px 10px rgba(23,23,28,.06);
	--mc-shadow-bar     : 0 -6px 18px rgba(23,23,28,.07);

	--mc-ease           : cubic-bezier(.2,.7,.3,1);
	--mc-font           : 'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif;
}
@supports (color: color-mix(in srgb, red 50%, transparent)){
	html.mc_v2{
		--mc-shadow-brand : 0 6px 16px color-mix(in srgb, var(--mc-primary) 30%, transparent);
	}
}

/* -------------------------------------------------------------- 타이포 */
html.mc_v2 body,
html.mc_v2 body *:not(i):not(.iconfont):not([class*="ftic-"]):not(.material-icons):not(.material-symbols-outlined){
	font-family: var(--mc-font);
}
/* 아이콘 폰트 원복(위 광역 규칙 방어) */
html.mc_v2 .iconfont,
html.mc_v2 .iconfont::before,
html.mc_v2 .iconfont::after,
html.mc_v2 [class*="ftic-"],
html.mc_v2 [class*="ftic-"]::before{ font-family:'iconfont' !important; }
html.mc_v2 .material-icons{ font-family:'Material Icons' !important; }
html.mc_v2 .material-symbols-outlined{ font-family:'Material Symbols Outlined' !important; }
/* 폰트를 하드코딩해 둔 기존 요소 */
html.mc_v2 .helpfulBtn > a{ font-family: var(--mc-font) !important; }

html.mc_v2 body{ color: var(--mc-ink-2); -webkit-font-smoothing: antialiased; }
html.mc_v2 input,
html.mc_v2 button,
html.mc_v2 select,
html.mc_v2 textarea{ font-family: var(--mc-font); }

/* 숫자(가격) 정렬 */
html.mc_v2 .prc_box,
html.mc_v2 .totalprice,
html.mc_v2 .price,
html.mc_v2 .prdInfoList dd{ font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------- 상단 고정바 */
html.mc_v2 .top_fix_head.good_desc_head{
	transition: background-color .25s var(--mc-ease), box-shadow .25s var(--mc-ease);
}
html.mc_v2 .top_fix_head.good_desc_head.-acf{ box-shadow: none; }

/* ------------------------------------------------------------ 상품 이미지 */
html.mc_v2 .detail_img{ background: var(--mc-band); }
html.mc_v2 .detail_img .swiper-slide img{ display:block; width:100%; }
html.mc_v2 .detail_img .detailimg_page{
	left:auto; right:12px; bottom:12px;
	width:auto; min-width:52px; padding:5px 12px;
	border-radius: var(--mc-r-pill);
	background: rgba(23,23,28,.55);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	color:#fff; font-size:12px; font-weight:600; line-height:1.4; letter-spacing:.2px;
}
html.mc_v2 .detail_img .detailimg_page .swiper-pagination-current{ color:#fff; }
html.mc_v2 .detail_img .detailimg_page .swiper-pagination-total{ color:rgba(255,255,255,.7); }

/* ------------------------------------------------------------- 상품 정보 */
html.mc_v2 .detail_txt.st1{ padding: 18px 20px 22px; }

html.mc_v2 .detail_txt .icons:empty{ display:none; }
html.mc_v2 .detail_txt .icons span,
html.mc_v2 .detail_txt .icons em{
	border-radius: var(--mc-r-sm);
	box-shadow: none;
}

html.mc_v2 .detail_txt .newdname.st1{
	margin-bottom:6px;
	font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
	color: var(--mc-primary);
}
html.mc_v2 .detail_txt h1,
html.mc_v2 .detail_txt h1.st1{
	padding-right:56px;
	font-size:20px; font-weight:700; line-height:1.35; letter-spacing:-.4px;
	color: var(--mc-ink); word-break: keep-all;
}
html.mc_v2 .detail_txt p.goods_subT{
	margin-top:6px;
	font-size:13px; line-height:1.5; color: var(--mc-ink-3);
}

/* 공유 버튼 */
html.mc_v2 .detail_txt h1 .SNSLayerIcon{
	top:-2px; right:0; width:40px; height:40px;
	border:1px solid var(--mc-line);
	border-radius:50%;
	background-size:38px;
	background-color:#fff;
	box-shadow: var(--mc-shadow-card);
	transition: transform .15s var(--mc-ease), box-shadow .15s var(--mc-ease);
}
html.mc_v2 .detail_txt h1 .SNSLayerIcon:active{ transform: scale(.93); box-shadow:none; }

/* 별점 */
html.mc_v2 .stars_cnt{ margin-top:10px; }

/* -------------------------------------------------------------- 가격 영역 */
html.mc_v2 .prc_box{
	margin-top:16px; padding-top:16px;
	border-top:1px solid var(--mc-line);
}
html.mc_v2 .prc_box dl.dataCell{ display:flex; align-items:baseline; }
html.mc_v2 .prc_box dl.dataCell.mt10{ margin-top:6px; }
html.mc_v2 .prc_box dl.dataCell dt{
	flex:0 0 66px; width:66px;
	font-size:12px; font-weight:500; color: var(--mc-ink-3);
}
html.mc_v2 .prc_box dl.dataCell.Market dd,
html.mc_v2 .prc_box dl.dataCell.Market dd span.zq{
	font-size:13px; color:#B0B0BA; text-decoration: line-through;
}
html.mc_v2 .prc_box dl.dataCell.selling dd{
	display:flex; align-items:baseline; gap:8px;
	font-size:24px; font-weight:800; letter-spacing:-.6px; color: var(--mc-ink);
}
html.mc_v2 .prc_box dl.dataCell.selling dd span.pct{
	font-size:20px; font-weight:800; color: var(--mc-primary);
}
html.mc_v2 .prc_box dl.dataCell.selling dd span.xz{
	font-size:24px; font-weight:800; color: var(--mc-ink);
}
html.mc_v2 .prc_box .couponWrap:empty{ display:none; }

/* --------------------------------------------------- 배송/상품정보 리스트 */
html.mc_v2 .option_section_wrap{ margin-top:18px; }
html.mc_v2 .option_section_wrap .prdInfoList{
	padding:14px 16px;
	border:1px solid var(--mc-line);
	border-radius: var(--mc-r-md);
	background: var(--mc-surface);
}
html.mc_v2 .prdInfoList dl{
	display:flex; align-items:flex-start;
	padding:6px 0; margin:0;
	border:0;
}
html.mc_v2 .prdInfoList dl + dl{ border-top:1px solid var(--mc-line); padding-top:10px; margin-top:4px; }
html.mc_v2 .prdInfoList dl dt{
	flex:0 0 76px; width:76px;
	font-size:12px; font-weight:500; line-height:1.6; color: var(--mc-ink-3);
}
html.mc_v2 .prdInfoList dl dd{
	flex:1 1 auto;
	font-size:13px; line-height:1.6; color: var(--mc-ink-2);
}
html.mc_v2 .option_section_wrap .margin_table{
	border:1px solid var(--mc-line);
	border-radius: var(--mc-r-sm);
	overflow:hidden;
}
html.mc_v2 .option_section_wrap .margin_table tr th,
html.mc_v2 .option_section_wrap .margin_table tr td{
	border-right-color: var(--mc-line);
	border-bottom-color: var(--mc-line);
}

/* ------------------------------------------------------------ 좋아요 버튼 */
html.mc_v2 .scrapPhase.st1{ margin:0 20px 4px; }
html.mc_v2 .scrapPhase .bottomTxt li{ width:100%; }
html.mc_v2 .scrapPhase .bottomTxt li a{
	display:flex; align-items:center; justify-content:center; gap:6px;
	height:46px;
	border:1px solid var(--mc-line-strong);
	border-radius: var(--mc-r-md);
	background:#fff;
	font-size:14px; font-weight:600; color: var(--mc-ink-2);
	box-shadow: var(--mc-shadow-card);
	transition: transform .12s var(--mc-ease), border-color .15s var(--mc-ease), color .15s var(--mc-ease);
}
html.mc_v2 .scrapPhase .bottomTxt li a:active{ transform: scale(.985); }
html.mc_v2 .scrapPhase .bottomTxt li a.on,
html.mc_v2 .scrapPhase .bottomTxt li.on a{
	border-color: var(--mc-primary);
	color: var(--mc-primary);
}

/* ------------------------------------------------------------- 구분 밴드 */
html.mc_v2 .contentRowLine{
	height:8px; margin:6px 0 0;
	border:0;
	background: var(--mc-band);
}

/* ----------------------------------------------------------------- 탭 */
html.mc_v2 ul.detail_tab{
	border-bottom:1px solid var(--mc-line);
	background:#fff;
}
html.mc_v2 ul.detail_tab li a{
	position:relative;
	font-size:13px; font-weight:600; color: var(--mc-ink-3);
	border-bottom:0 !important;
	transition: color .15s var(--mc-ease);
}
html.mc_v2 ul.detail_tab li a::after{
	content:''; position:absolute; left:50%; bottom:0;
	width:0; height:2px; border-radius:2px 2px 0 0;
	background: var(--mc-primary);
	transform: translateX(-50%);
	transition: width .22s var(--mc-ease);
}
html.mc_v2 ul.detail_tab li a.on{
	color: var(--mc-ink); font-weight:700;
}
html.mc_v2 ul.detail_tab li a.on::after{ width:calc(100% - 24px); }

/* ------------------------------------------------------- 상세 콘텐츠 영역 */
html.mc_v2 .detail_tabcont{ font-size:14px; line-height:1.65; color: var(--mc-ink-2); }
html.mc_v2 .detail_tabcont_img img{ max-width:100%; height:auto; }
html.mc_v2 #tbContent{ padding-left:0; padding-right:0; }

html.mc_v2 .helpfulBtn{
	width:calc(100% - 40px);
	border:1px solid var(--mc-line-strong) !important;
	border-radius: var(--mc-r-md);
	overflow:hidden;
	box-shadow: var(--mc-shadow-card);
}
html.mc_v2 .helpfulBtn > a{ height:44px; line-height:44px; font-size:13px; }
html.mc_v2 .helpfulBtn.active{ border-color: var(--mc-primary) !important; }

/* ------------------------------------------------------------ 리뷰 정렬 */
html.mc_v2 .rvArrgBtnBox{ height:auto; padding:14px 20px 6px; }
html.mc_v2 .rvArrgBtnBox ul{ display:flex; gap:8px; }
html.mc_v2 .rvArrgBtnBox ul li{
	flex:1 1 0; width:auto !important;
	border:1px solid var(--mc-line-strong);
	border-radius: var(--mc-r-pill);
	background:#fff !important;
	overflow:hidden;
	transition: border-color .15s var(--mc-ease), box-shadow .15s var(--mc-ease);
}
html.mc_v2 .rvArrgBtnBox ul li a{
	display:block; width:100%; height:38px; line-height:38px;
	text-align:center; font-size:13px; font-weight:600; color: var(--mc-ink-3);
}
html.mc_v2 .rvArrgBtnBox ul li a span{ color:inherit; }
html.mc_v2 .rvArrgBtnBox ul li.sitebg1{
	border-color: var(--mc-primary);
	background: var(--mc-primary) !important;
	box-shadow: var(--mc-shadow-brand);
}
html.mc_v2 .rvArrgBtnBox ul li.sitebg1 a,
html.mc_v2 .rvArrgBtnBox ul li.sitebg1 a span{ color:#fff; font-weight:700; }

/* --------------------------------------------------------- 판매자 정보 표 */
html.mc_v2 .cont_dealer.st1 table{
	border-collapse:separate; border-spacing:0;
	border:1px solid var(--mc-line);
	border-radius: var(--mc-r-md);
	overflow:hidden;
}
html.mc_v2 .cont_dealer.st1 table th,
html.mc_v2 .cont_dealer.st1 table td{
	border-color: var(--mc-line) !important;
	font-size:12px; line-height:1.6;
}
html.mc_v2 .cont_dealer.st1 table th{ color: var(--mc-ink-3); font-weight:600; background: var(--mc-band); }

/* --------------------------------------------------- 연관상품 롤링/타이틀 */
html.mc_v2 .detail_re .tit,
html.mc_v2 #area_rolling .tit,
html.mc_v2 .goodsRollTit{
	font-size:16px; font-weight:700; letter-spacing:-.3px; color: var(--mc-ink);
}
html.mc_v2 .detail_re img,
html.mc_v2 #area_rolling img{ border-radius: var(--mc-r-sm); }

/* -------------------------------------------------------------- 옵션 레이어 */
html.mc_v2 .fixed_option_box .btn.iconfont.ftic-next2{
	border-radius: var(--mc-r-lg) var(--mc-r-lg) 0 0;
	box-shadow: var(--mc-shadow-bar);
}
html.mc_v2 .fixed_option_box .fixed_option{
	border:0 !important;
	border-top:1px solid var(--mc-line) !important;
	border-radius:0;
	box-shadow: var(--mc-shadow-bar);
}
html.mc_v2 .fixed_option_box .fixed_option > h1{
	padding:16px 20px 8px;
	font-size:15px; font-weight:700; color: var(--mc-ink);
}
html.mc_v2 .fixed_option_box .fo_cont{ box-sizing:border-box; padding-left:20px; padding-right:20px; }

html.mc_v2 #trResultView > span,
html.mc_v2 .fixed_option_box .ui-selectmenu-button{
	height:48px !important; line-height:46px !important;
	margin-bottom:8px !important;
	padding:0 44px 0 14px !important;
	border:1px solid var(--mc-line-strong) !important;
	border-radius: var(--mc-r-md) !important;
	background-position: right 14px center !important;
	background-size:22px !important;
	font-size:14px; color: var(--mc-ink-2);
	box-shadow:none;
	transition: border-color .15s var(--mc-ease), box-shadow .15s var(--mc-ease);
}
html.mc_v2 .fixed_option_box .ui-selectmenu-button:active,
html.mc_v2 .fixed_option_box .ui-selectmenu-button-open{
	border-color: var(--mc-primary) !important;
	box-shadow: 0 0 0 3px var(--mc-primary-weak) !important;
}
html.mc_v2 .ui-selectmenu-menu .ui-menu{
	border:1px solid var(--mc-line-strong);
	border-radius: var(--mc-r-md);
	box-shadow: var(--mc-shadow-card);
	overflow:hidden;
}
html.mc_v2 .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper{ font-size:14px; }

html.mc_v2 .fixed_option_box .totalprice{
	font-size:13px; color: var(--mc-ink-3);
}
html.mc_v2 .fixed_option_box .totalprice strong,
html.mc_v2 .fixed_option_box .totalprice .sitecolor1{
	font-size:20px; font-weight:800; color: var(--mc-primary);
}

/* 옵션 레이어 하단 버튼 */
html.mc_v2 .fixed_option_box .btns{
	display:flex; gap:8px;
	box-sizing:border-box; width:100%;
	padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	background:#fff;
	border-top:1px solid var(--mc-line);
}
html.mc_v2 .fixed_option_box .btns > a{
	flex:1 1 0; width:auto !important; height:52px !important; line-height:52px !important;
	border-radius: var(--mc-r-md) !important;
	font-size:16px; font-weight:700;
	transition: transform .12s var(--mc-ease), box-shadow .15s var(--mc-ease);
}
html.mc_v2 .fixed_option_box .btns > a:active{ transform: scale(.985); }
html.mc_v2 .fixed_option_box .btns > a.incart{
	border:1px solid var(--mc-primary) !important;
	background:#fff !important;
	color: var(--mc-primary) !important;
	box-shadow:none;
}
html.mc_v2 .fixed_option_box .btns > a:not(.incart){
	border:0 !important;
	background: var(--mc-primary) !important;
	color:#fff !important;
	box-shadow: var(--mc-shadow-brand);
}

/* ------------------------------------------------------- 하단 고정 구매바 */
html.mc_v2 .fixed_optionbtns_box{
	box-sizing:border-box !important;
	height:auto !important;
	padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
	border-top:1px solid var(--mc-line);
	background: rgba(255,255,255,.94) !important;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: var(--mc-shadow-bar);
}
html.mc_v2 .fixed_optionbtns_box .btns{
	display:flex; align-items:center; gap:8px;
	height:52px; width:100% !important;
}
html.mc_v2 .fixed_optionbtns_box .btns > a#cartBtn,
html.mc_v2 .fixed_optionbtns_box .btns > a.blike{
	position:static !important; box-sizing:border-box !important;
	flex:0 0 52px; width:52px !important; height:52px !important;
	border:1px solid var(--mc-line-strong) !important;
	border-radius: var(--mc-r-md) !important;
	background:#fff !important;
	transition: transform .12s var(--mc-ease), border-color .15s var(--mc-ease);
}
html.mc_v2 .fixed_optionbtns_box .btns > a#cartBtn:active,
html.mc_v2 .fixed_optionbtns_box .btns > a.blike:active{ transform: scale(.94); }
html.mc_v2 .fixed_optionbtns_box .btns > a#cartBtn span.btn_detail_cart,
html.mc_v2 .fixed_optionbtns_box .btns > a.blike span.btn_detail_like{
	width:52px !important; height:52px !important;
}
html.mc_v2 .fixed_optionbtns_box .btns > a.buy{
	position:static !important;
	flex:1 1 auto; width:auto !important; height:52px !important;
	padding:0 !important; line-height:52px !important;
	border-radius: var(--mc-r-md) !important;
	font-size:16px !important; font-weight:700 !important; letter-spacing:-.2px;
	box-shadow: var(--mc-shadow-brand);
	transition: transform .12s var(--mc-ease), box-shadow .15s var(--mc-ease);
}
html.mc_v2 .fixed_optionbtns_box .btns > a.buy:active{
	transform: scale(.985);
	box-shadow: 0 3px 8px rgba(23,23,28,.16);
}
html.mc_v2 .fixed_optionbtns_box .btns > a#cartBtn .cartCnt{
	top:4px; right:4px;
	min-width:18px; height:18px; line-height:18px;
	border-radius: var(--mc-r-pill);
	font-size:11px; font-weight:700;
	box-shadow:0 0 0 2px #fff;
}
html.mc_v2 #m_wrap{ padding-bottom:12px; }

/* ------------------------------------------------------------ 플로팅 버튼 */
html.mc_v2 .float_btn_wrap.show{ bottom:88px; }
html.mc_v2 .float_btn_wrap li a{
	border-radius:50%;
	box-shadow: var(--mc-shadow-btn);
	overflow:hidden;
	transition: transform .12s var(--mc-ease);
}
html.mc_v2 .float_btn_wrap li a:active{ transform: scale(.92); }

/* --------------------------------------------------------- 공유 레이어 */
html.mc_v2 .shareLayer .shareLayerWrap{
	border-radius: var(--mc-r-lg) var(--mc-r-lg) 0 0;
	box-shadow: var(--mc-shadow-bar);
}
html.mc_v2 .shareLayer .shareLayerTit{
	font-size:15px; font-weight:700; color: var(--mc-ink);
}
html.mc_v2 .shareLayer .shareLayer-copy-link-url{
	height:44px;
	padding:0 12px;
	border:1px solid var(--mc-line-strong);
	border-radius: var(--mc-r-md);
	font-size:13px; color: var(--mc-ink-2);
}
html.mc_v2 .shareLayer .shareLayer-copy-link-button{
	border-radius: var(--mc-r-md);
	box-shadow: var(--mc-shadow-card);
}
html.mc_v2 .shareLayerClose{ border-radius: var(--mc-r-pill); }

/* ------------------------------------------------------------ 초대 레이어 */
html.mc_v2 .memInviteSec{ border-radius: var(--mc-r-md); box-shadow: var(--mc-shadow-card); }
html.mc_v2 .memInviteLayer .layerInner{ border-radius: var(--mc-r-lg) var(--mc-r-lg) 0 0; }
html.mc_v2 .memInviteLayer .layerInner .urlBtn,
html.mc_v2 .memInviteLayer .layerInner .closeBtn{
	border-radius: var(--mc-r-md);
	box-shadow: var(--mc-shadow-card);
}

/* --------------------------------------------------------- 공통 버튼 톤업 */
html.mc_v2 .btn_style3,
html.mc_v2 .m_reviewB a,
html.mc_v2 .m_reviewBn a,
html.mc_v2 .naverPayButton a{
	border-radius: var(--mc-r-md) !important;
	box-shadow: var(--mc-shadow-card);
	transition: transform .12s var(--mc-ease), box-shadow .15s var(--mc-ease);
}
html.mc_v2 .btn_style3:active,
html.mc_v2 .m_reviewB a:active,
html.mc_v2 .m_reviewBn a:active{ transform: scale(.985); box-shadow:none; }

/* 이 스킨에서 padding 을 새로 준 요소는 content-box 로 인한 가로 넘침을 막는다 */
html.mc_v2 .prdInfoList,
html.mc_v2 .rvArrgBtnBox,
html.mc_v2 .helpfulBtn,
html.mc_v2 .fixed_option_box .fixed_option > h1,
html.mc_v2 .fixed_option_box .fo_cont,
html.mc_v2 .fixed_option_box .btns,
html.mc_v2 .fixed_optionbtns_box{ box-sizing: border-box; }

/* 이미지 로딩 중 레이아웃 흔들림 방지 */
html.mc_v2 img[loading="lazy"]{ background: var(--mc-band); }

/* 접근성 : 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce){
	html.mc_v2 *,
	html.mc_v2 *::before,
	html.mc_v2 *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* =========================================================================
   2026-07-26 추가 (사용자 요청 4건)
   ① 페이지 중간 좋아요 버튼 제거(하단 고정바에 동일 기능 존재)
   ② '같은 카테고리 인기상품' 윗여백
   ③ 배송/교환·반품 탭의 배송정보 표 모바일 대응 + 폰트 통일
   ④ 옵션 레이어 : 버튼 가로 넘침 / 총 상품 금액 잘림
   * 전역 CSS 가 클래스 4개짜리 셀렉터를 쓰므로 스코프를 두 번 겹쳐 특이도를 올린다
   ========================================================================= */

/* ① 좋아요 버튼(중간) 숨김 — 상품평 쓰기(둘째 li)는 그대로 둔다 -------- */
html.mc_v2.mc_v2 .scrapPhase .bottomTxt > ul > li:first-child{ display:none; }
html.mc_v2.mc_v2 .scrapPhase .bottomTxt a.btn_scrap{ display:none; }
html.mc_v2.mc_v2 .scrapPhase.st1{ margin-bottom:0; }

/* ② 같은 카테고리 인기상품 · 연관 롤링 섹션 윗여백 --------------------- */
html.mc_v2.mc_v2 #area_rolling.st1{
	margin-top:18px;
	padding-top:26px;
	border-top:8px solid var(--mc-band);
}
html.mc_v2.mc_v2 #area_rolling.st1 .top_ul > li{ padding-top:0; }

/* ③ 배송정보 / 교환·반품 표 ------------------------------------------- */
/* 표가 화면을 넘지 않도록 (관리자에서 등록한 HTML 이라 폭이 고정된 경우가 있다) */
html.mc_v2.mc_v2 #tab4 table{ max-width:100%; }
html.mc_v2.mc_v2 #tab4 img{ max-width:100%; height:auto; }

/* 시스템이 그리는 배송정보 표 : 머리열이 36px 로 눌려 글자가 세로로 쌓이던 것 */
html.mc_v2.mc_v2 #tab4 table.trans_table{
	width:100%;
	table-layout:fixed;
	border-collapse:collapse;
	margin:6px 0 4px;
	border:1px solid var(--mc-line);
	border-radius: var(--mc-r-sm);
	overflow:hidden;
}
/* ※ th·td 에 인라인 style(width:6.9%·padding·border·돋움)이 박혀 있어 !important 가 필요하다 */
html.mc_v2.mc_v2 #tab4 table.trans_table th,
html.mc_v2.mc_v2 #tab4 table.trans_table td{
	box-sizing:border-box !important;
	padding:11px 12px !important;
	border:0 !important;
	border-bottom:1px solid var(--mc-line) !important;
	/* 폰트 크기를 배송정보 · 교환/반품 정보 본문(14px)과 동일하게 */
	font-size:14px !important;
	line-height:1.6 !important;
	font-family: var(--mc-font) !important;
	color: var(--mc-ink-2) !important;
	vertical-align:top !important;
	text-align:left !important;
	word-break:break-word;
	white-space:normal;
}
html.mc_v2.mc_v2 #tab4 table.trans_table th{
	width:96px !important;
	white-space:nowrap !important;
	font-weight:600 !important;
	color: var(--mc-ink) !important;
	background: var(--mc-band) !important;
	border-right:1px solid var(--mc-line) !important;
}
html.mc_v2.mc_v2 #tab4 table.trans_table tr:last-child th,
html.mc_v2.mc_v2 #tab4 table.trans_table tr:last-child td{ border-bottom:0 !important; }

/* 좁은 화면에서는 머리열을 더 줄인다 */
@media (max-width:400px){
	html.mc_v2.mc_v2 #tab4 table.trans_table th{ width:80px !important; }
	html.mc_v2.mc_v2 #tab4 table.trans_table th,
	html.mc_v2.mc_v2 #tab4 table.trans_table td{ padding:10px 9px !important; font-size:13px !important; }
}

/* ④-1 옵션 레이어 버튼이 모바일 가로영역을 넘어가던 문제 --------------- */
/*     .inbtn 에 걸린 margin:0 -70px 이 flex 여유폭을 늘려 각 버튼이 386px 로 커졌다 */
html.mc_v2.mc_v2 .fixed_option_box .btns > a{
	margin:0 !important;
	box-sizing:border-box !important;
	min-width:0;
	max-width:100%;
}

/* ④-2 총 상품 금액이 하단 버튼바에 가려 잘리던 문제 -------------------- */
/*     .totalprice 가 absolute 인데 기준이 .fixed_option_box(버튼바 포함) 였다 */
html.mc_v2.mc_v2 .fixed_option_box .fixed_option{
	position:relative;
	padding-bottom:58px;
}
html.mc_v2.mc_v2 .fixed_option_box .totalprice{
	top:auto;
	bottom:14px;
	left:0;
	right:0;
	width:auto;
	margin:0;
	padding:0 20px;
	text-align:right;
	line-height:1.4;
}


/* =========================================================================
   2026-07-26 추가 요청 4건
   ① 공유하기 : 링크복사 영역 흰 글자 + 복사 아이콘 노출 (얼럿 → 토스트는 ASP)
   ② 상세 아래 리뷰 정렬(베스트순/최신순/낮은평점순) 숨김
   ③ 장바구니·바로구매 바텀시트 리디자인
   ④ 상품명 위 "지금까지 N명이 관심을 보였어요" 배지 (PC 상세와 동일)
   * 전역 CSS 가 클래스 4개짜리 셀렉터를 쓰므로 스코프를 두 번 겹쳐 특이도를 올린다
   ========================================================================= */

/* ① 공유 레이어 ---------------------------------------------------------- */
/* 레이어 배경이 rgba(0,0,0,.7) 이라 어두운데 제목·링크 글자가 진한 회색이라 안 보였다 */
html.mc_v2.mc_v2 .shareLayer .shareLayerTit{
	margin-bottom:10px;
	font-size:15px; font-weight:700; letter-spacing:-.2px;
	color:#fff;
}
html.mc_v2.mc_v2 .shareLayer .shareLayer-item-anchor{ color:#fff; }

/* 링크복사 줄 : table → flex 로 정렬 */
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link{
	display:flex !important;
	align-items:center;
	gap:8px;
	width:100%;
	box-sizing:border-box;
	border:0 !important;
	background:transparent;
}
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-url{
	flex:1 1 auto;
	min-width:0;
	width:auto;
	height:46px;
	padding:0 14px;
	border:1px solid rgba(255,255,255,.34) !important;
	border-radius: var(--mc-r-md);
	background: rgba(255,255,255,.10) !important;
	font-size:13px;
	color:#fff !important;
	-webkit-text-fill-color:#fff;
	text-overflow:ellipsis;
}
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-url::placeholder{ color:rgba(255,255,255,.55); }
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-url:focus{
	outline:none;
	border-color:#fff !important;
	background: rgba(255,255,255,.16) !important;
}
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-button-wrapper{
	display:flex !important;
	flex:0 0 auto;
	width:auto !important;
	height:auto !important;
}
/* 아이콘이 아예 없어서 빈 칸으로 보이던 복사 버튼
   ※ 전역 CSS 가 text-indent:-9999px 로 라벨을 화면 밖으로 밀어내고 있었다 → 반드시 0 으로 되돌린다
   ※ iOS/안드로이드용 두 개 중 하나는 인라인 style="display:none" 이라 :not() 으로 제외해야 한다 */
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-button:not([style*="none"]){
	display:inline-flex !important;
}
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-button{
	text-indent:0 !important;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:auto !important;
	height:46px !important;
	padding:0 16px !important;
	border:0 !important;
	border-radius: var(--mc-r-md) !important;
	background:#fff !important;
	font-size:13px; font-weight:700; line-height:1;
	color: var(--mc-ink) !important;
	white-space:nowrap;
	box-shadow:0 4px 14px rgba(0,0,0,.28);
	transition: transform .12s var(--mc-ease), opacity .15s var(--mc-ease);
}
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-button:active{ transform: scale(.96); opacity:.9; }
html.mc_v2.mc_v2 .shareLayer .shareLayer-copy-link-button .mcCopyIco{
	display:block;
	width:17px; height:17px;
	background:no-repeat center/17px 17px url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317171C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11.5' height='11.5' rx='2.6'/%3E%3Cpath d='M5.2 15V5.6A2.4 2.4 0 0 1 7.6 3.2H15'/%3E%3C/svg%3E");
}
/* 닫기 */
html.mc_v2.mc_v2 .shareLayer .shareLayerClose{ opacity:.9; }

/* ② 상세 콘텐츠 아래 리뷰 정렬 버튼 숨김 ---------------------------------- */
html.mc_v2.mc_v2 .rvArrgBtnBox{ display:none !important; }

/* ③ 옵션 바텀시트 ------------------------------------------------------- */
/* 시트 뒤 딤(ASP 에서 #mcSheetDim 을 만들어 붙인다) */
html.mc_v2.mc_v2 #mcSheetDim{
	position:fixed;
	top:0; bottom:0;
	left:50%;
	transform: translateX(-50%);
	width:525px; max-width:100%;
	background: rgba(23,23,28,.5);
	opacity:0; visibility:hidden;
	transition: opacity .24s var(--mc-ease), visibility .24s var(--mc-ease);
	z-index:99996;
}
html.mc_v2.mc_v2 #mcSheetDim._on{ opacity:1; visibility:visible; }

/* 시트 본체 */
html.mc_v2.mc_v2 .fixed_option_box .fixed_option{
	height:auto !important;
	max-height:62vh !important;
	padding:0 0 56px !important;
	border:0 !important;
	border-radius:20px 20px 0 0 !important;
	background:#fff !important;
	box-shadow:0 -10px 30px rgba(23,23,28,.16) !important;
	overflow:hidden;
}
/* 상단 그랩바 */
html.mc_v2.mc_v2 .fixed_option_box .fixed_option::before{
	content:'';
	display:block;
	width:42px; height:4px;
	margin:10px auto 0;
	border-radius:999px;
	background: var(--mc-line-strong);
}
html.mc_v2.mc_v2 .fixed_option_box .fixed_option > h1{
	height:auto !important;
	padding:12px 20px 12px !important;
	border-bottom:1px solid var(--mc-line);
	font-size:16px !important; font-weight:700 !important; line-height:1.3 !important;
	letter-spacing:-.3px;
	color: var(--mc-ink) !important;
}
html.mc_v2.mc_v2 .fixed_option_box .fo_cont{
	height:auto !important;
	max-height:38vh;
	padding:16px 20px 8px !important;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
html.mc_v2.mc_v2 .fixed_option_box .fo_cont::-webkit-scrollbar{ width:0; }

/* 선택한 옵션 행(수량 조절 등)이 붙을 때의 카드 */
html.mc_v2.mc_v2 .fixed_option_box .fo_cont .optionSelectList > li,
html.mc_v2.mc_v2 .fixed_option_box .fo_cont .selOptWrap > li,
html.mc_v2.mc_v2 .fixed_option_box .fo_cont .option_sel_list > li{
	margin-top:8px;
	padding:12px 14px;
	border:1px solid var(--mc-line);
	border-radius: var(--mc-r-md);
	background: var(--mc-band);
}

/* 총 상품 금액 */
html.mc_v2.mc_v2 .fixed_option_box .totalprice{
	bottom:0 !important;
	left:0; right:0;
	padding:15px 20px !important;
	border-top:1px solid var(--mc-line);
	background:#fff;
	font-size:13px; font-weight:600;
	color: var(--mc-ink-3);
	text-align:right;
}
html.mc_v2.mc_v2 .fixed_option_box .totalprice em,
html.mc_v2.mc_v2 .fixed_option_box .totalprice strong,
html.mc_v2.mc_v2 .fixed_option_box .totalprice .sitecolor1{
	margin-left:6px;
	font-size:21px; font-weight:800; font-style:normal;
	letter-spacing:-.5px;
	color: var(--mc-primary);
	vertical-align:-1px;
}

/* 시트 상단 닫기 탭 */
html.mc_v2.mc_v2 .fixed_option_box > span.btn.ftic-next2{
	border-radius:14px 14px 0 0 !important;
	box-shadow:0 -6px 16px rgba(23,23,28,.14);
}

/* ④ 상품명 위 관심 배지 -------------------------------------------------- */
html.mc_v2.mc_v2 .detail_txt .goodsInterest{
	display:block;
	margin:0 0 10px;
	line-height:1;
	animation: mcFloat 2.6s ease-in-out infinite;
}
html.mc_v2.mc_v2 .detail_txt .goodsInterest > span{
	display:inline-flex;
	align-items:center;
	height:29px;
	padding:0 13px;
	border:1px solid var(--mc-line-strong);
	border-radius: var(--mc-r-pill);
	background:#fff;
	box-shadow: var(--mc-shadow-card);
	font-size:12px; font-weight:500; letter-spacing:-.2px;
	color: var(--mc-ink-2);
	white-space:nowrap;
}
html.mc_v2.mc_v2 .detail_txt .goodsInterest em{
	margin:0 2px;
	font-style:normal; font-weight:800;
	color: var(--mc-primary);
}
@keyframes mcFloat{
	0%,100%{ transform: translateY(0); }
	50%    { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce){
	html.mc_v2.mc_v2 .detail_txt .goodsInterest{ animation:none; }
}

/* =========================================================================
   2026-07-26 추가 요청 : 배송/교환·반품 탭 중복 제거
   상품(또는 입점사)에 등록된 안내(ul)에 이미 "배송정보 / 교환·반품 정보"가
   들어 있는데, 그 뒤에 사이트 기본 안내 표 2개가 또 붙어 같은 내용이 두 번 나왔다.
   → 앞의 등록 안내(ul)가 있을 때에 한해 뒤따라오는 기본 표를 숨긴다.
     (등록 안내가 없는 상품에서는 규칙이 걸리지 않아 기본 표가 그대로 나온다)
   ========================================================================= */
html.mc_v2.mc_v2 #tab4 > ul ~ table{ display:none !important; }