/* MCSUBPC 2026-11-01 정희찬(PRO4) : 메타셀럽 솔루션(메타셀럽 트리 전 사이트) 서브페이지 PC(930px 이상) 반응형
   · 붙는 곳 : /m/_include/pc_bg.asp 가 정해진 화면에서만 html 에 mcSubW(+mcSubW-list / mcSubW-detail) 또는 mcSubS 를 붙이고 이 파일을 부른다.
   · 모바일(929px 이하)은 한 줄도 안 바뀐다 — 모든 규칙이 아래 @media 안.
   · mcSubW  : 525px 모바일 단을 «가운데 넓은 단»(최대 1280px)으로 넓힌다. 목록=그리드 칸 수 늘림, 상품상세=사진 왼쪽·정보 오른쪽 2단.
   · mcSubS  : 숏폼(스토리) 상세 — 세로 플레이어는 그대로 525px 가운데, 뒷배경만 어둡게.
   · 되돌리기 : pc_bg.asp 의 MCSUBPC 블록에서 pcSubMode = "off" (또는 블록 삭제). */
@media (min-width:930px){
html.mcSubW{--msW:min(1280px,calc(100% - 48px))}

/* ── 공통 셸 : 배경 흰색, 왼쪽 PC 장식칼럼 숨김, 단 넓히기 ── */
html.mcSubW,html.mcSubW body,html.mcSubW:root body.body{background:#fff none !important;background-image:none !important}
html.mcSubW body .labangBackground,html.mcSubW body .mI18nBarWrap{display:none !important}
html.mcSubW body .mobileDomWrap .mobileDomInner{position:relative !important;left:auto !important;right:auto !important;top:auto !important;float:none !important;transform:none !important;display:block !important;width:var(--msW) !important;max-width:none !important;margin:0 auto !important;background:#fff !important}
html.mcSubW body #m_wrap,html.mcSubW body #mobile_wrap,html.mcSubW body .head_top{max-width:none !important}
/* 서브 헤더(로고+아이콘 / 뒤로+제목) : 단 폭 그대로 */
html.mcSubW body .top_fix_head.sitebg2,html.mcSubW body .top_fix_head.sub_top_head{left:auto !important;right:auto !important;margin:0 !important;transform:none !important;width:auto !important;max-width:none !important}
html.mcSubW body #mcHead.mcSubHead{max-width:none !important}
/* 고정요소 : 하단메뉴 = 가운데 떠 있는 독, 맨위로 = 단 오른쪽, 드로어·언어시트 = 화면 기준 */
html.mcSubW body .mcGnb.mcFixed{left:50% !important;right:auto !important;width:525px !important;margin:0 0 0 -262.5px !important;bottom:16px;border-radius:22px;padding-bottom:8px;box-shadow:0 10px 30px rgba(17,17,19,.16),inset 0 0 0 1px var(--mc-line,#ececef)}
html.mcSubW body .mcFab.mcFixed{left:auto !important;right:max(24px,calc(50% - 640px + 16px)) !important;width:44px !important;margin:0 !important;bottom:112px}
html.mcSubW body .mcFab .in{margin:0}
html.mcSubW body .mcDrw.mcFixed{left:0 !important;right:0 !important;width:auto !important;margin:0 !important}
html.mcSubW body .mcI18nSheet{left:50% !important;right:auto !important;width:520px !important;margin-left:-260px !important}

/* ── 목록형 공통 : 상품 목록(카테고리·브랜드) ── */
/* 2열(기본)·3열 보기 : ul 두세 개에 번갈아 담긴 상품을 한 그리드로(순서는 mc_sub_pc.js 가 order 로 맞춤) */
html.mcSubW body .newList:has(>ul.cont_list>li){display:grid !important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 20px;width:auto !important;padding:20px 16px 8px !important;align-items:start}
html.mcSubW body .newList:has(>ul.cont_list._3rd>li){grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
html.mcSubW body .newList:has(>ul.cont_list>li)>ul.cont_list{display:contents !important}
html.mcSubW body .newList>ul.cont_list>li{width:auto !important;min-width:0;margin:0 0 24px !important;float:none !important}
/* 1열 보기(listCol=D) : 큰 카드 3~4열 */
html.mcSubW body ul.cont_list.D{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 24px;padding:20px 16px 0 !important;width:auto !important}
html.mcSubW body ul.cont_list.D>li{width:auto !important;min-width:0;margin:0 0 32px !important;float:none !important}
/* 카테고리 탭줄·정렬줄 : 넓은 단에 맞춰 */
html.mcSubW body .mainPageWrap .fix_gnbmenu{max-width:none !important;width:auto !important}
html.mcSubW body .mainPageWrap .fix_gnbmenu .seltype_wrap.goods{flex:1 1 auto}
html.mcSubW body .mainPageWrap .fix_gnbmenu .seltype_wrap.goods .mcSel{flex:0 1 320px}

/* ── 상품 검색결과(/m/goods/search.asp) ── */
html.mcSubW body #mcgList.mcgList{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) !important;gap:8px 20px}
html.mcSubW body #mcgList.mcgList>li{min-width:0}

/* ── 셀럽 검색(/m/goods/unni_search_total.asp) : 세로 한 줄 목록 → 3~4열 카드 ── */
html.mcSubW body .totalsearch_warp{max-width:760px;margin:0 auto}
html.mcSubW body .searchBodyDOM.storyDom{height:auto !important}
html.mcSubW body .searchBodyDOM.storyDom>ul{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px 16px;height:auto !important;width:auto !important;padding:0 20px !important}
html.mcSubW body .searchBodyDOM.storyDom>ul>li{position:relative !important;left:auto !important;top:auto !important;width:auto !important;margin:0 !important;padding:12px 14px !important;border-radius:16px;box-shadow:inset 0 0 0 1px var(--mc-line,#ececef);box-sizing:border-box;transition:box-shadow .15s}
html.mcSubW body .searchBodyDOM.storyDom>ul>li:hover{box-shadow:inset 0 0 0 1px var(--mc-line,#ececef),0 6px 18px rgba(17,17,19,.08)}
html.mcSubW body .recoTop5Rail{justify-content:flex-start}

/* ── 상품상세(/m/goods/content.asp) : 사진 왼쪽 · 정보 오른쪽, 상세설명은 가운데 860px ── */
html.mcSubW-detail{--msHalf:calc(min(1280px,100% - 48px) / 2)}
html.mcSubW-detail body #mobile_wrap.contents{padding-top:64px !important}
html.mcSubW-detail.mcTopOn body #mobile_wrap.contents{padding-top:8px !important}
html.mcSubW-detail body .good_desc_head.top_fix_head{position:fixed !important;left:0 !important;right:0 !important;width:auto !important;max-width:none !important;margin:0 !important;transform:none !important;height:56px;background:#fff !important;box-shadow:inset 0 -1px 0 0 var(--mc-line,#ececef);opacity:1 !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .btn_back_pst{left:max(24px,calc(50% - 640px + 8px)) !important;color:var(--mc-ink,#111) !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .mcIb{background:transparent !important;backdrop-filter:none !important;box-shadow:none !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .mcIb:hover{background:var(--mc-fill,#f4f4f6) !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .mcIb svg{stroke:var(--mc-ink,#111) !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .search_box.mcIb{right:calc(max(24px,50% - 640px + 8px) + 92px) !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .mcIbHome{right:calc(max(24px,50% - 640px + 8px) + 46px) !important}
html.mcSubW-detail body .good_desc_head.top_fix_head .goodsTopCart.mcIb{right:max(24px,calc(50% - 640px + 8px)) !important}
html.mcSubW-detail body #content>.detail_img{float:left;width:calc(50% - 12px);margin:8px 0 24px 0;border-radius:16px;overflow:hidden}
html.mcSubW-detail body #content>.detail_txt,html.mcSubW-detail body #content>.naverPayButton,html.mcSubW-detail body #content>.couponTxtWrap,html.mcSubW-detail body #content>.scrapPhase{margin-left:calc(50% + 20px) !important;width:auto !important}
html.mcSubW-detail body #content>.detail_txt{padding-top:8px}
html.mcSubW-detail body #content>.detail_txt .goodsTitle{font-size:24px;line-height:1.4}
html.mcSubW-detail body #content>.scrapPhase~*{clear:both}
html.mcSubW-detail body #content>.detail_tab{width:100% !important;max-width:none;margin-top:24px}
html.mcSubW-detail body #content>.detail_tabcont,html.mcSubW-detail body #content>.detail_re{max-width:860px;margin-left:auto !important;margin-right:auto !important;box-sizing:border-box}
html.mcSubW-detail body #content>#mcRecm,html.mcSubW-detail body #content>#area_rolling{clear:both}
/* 하단 구매바·옵션창 : 오른쪽(정보) 칼럼 아래에 붙인다 */
html.mcSubW-detail body .mobileDomWrap .fixed_optionbtns_box,html.mcSubW-detail body .fixed_optionbtns_box{left:calc(50% + 20px) !important;right:auto !important;width:calc(var(--msHalf) - 20px) !important;max-width:none !important;margin:0 !important;transform:none !important;bottom:16px !important}
html.mcSubW-detail body .fixed_optionbtns_box .btns{border-radius:18px;box-shadow:0 10px 30px rgba(17,17,19,.14),inset 0 0 0 1px var(--mc-line,#ececef);background:#fff}
html.mcSubW-detail body .mobileDomWrap .fixed_option_box{left:calc(50% + 20px) !important;right:auto !important;width:calc(var(--msHalf) - 20px) !important;max-width:none !important;margin:0 !important}
html.mcSubW-detail body #content>.btnNotifyWrap{max-width:860px;margin:0 auto 120px}

/* ── 숏폼(스토리) 상세 : 플레이어는 525px 그대로 가운데, 뒷배경만 극장처럼 어둡게 ── */
html.mcSubS,html.mcSubS body,html.mcSubS:root body.body{background:#0d0d10 none !important;background-image:none !important}
html.mcSubS body .labangBackground{display:none !important}
}
@media (min-width:930px){
/* 검색결과 화면은 바탕이 연분홍(--mc-bg) 캔버스 → 바깥 여백도 같은 색으로 */
html.mcSubW:root body.body:has(#mcgWrap),html.mcSubW body:has(#mcgWrap) .mobileDomWrap .mobileDomInner{background:var(--mc-bg,#FAF5F9) !important}
}
@media (min-width:930px){
html.mcSubW-detail body #content>.scrapPhase .btn_scrap{width:100% !important;box-sizing:border-box}
}
@media (min-width:930px){
/* 상품상세 「연관 스토리 & TV」 : 2열 masonry(절대배치) → 4~5열 그리드 */
html.mcSubW-detail body #area_rolling .story_area_Wrap{height:auto !important}
html.mcSubW-detail body #area_rolling ul.story_area{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;height:auto !important;align-items:start}
html.mcSubW-detail body #area_rolling ul.story_area>.grid-sizer{display:none !important}
html.mcSubW-detail body #area_rolling ul.story_area>li.formWrap{position:relative !important;left:auto !important;top:auto !important;width:auto !important;min-width:0;margin:0 !important;transform:none !important}
}
@media (min-width:930px){
/* 숏폼 상세 : 단이 «오른쪽 50%-500px» 기준이라 930~1050px 에서 가로 스크롤이 생기던 것(원래 있던 문제) → 정확히 가운데 */
html.mcSubS body .mobileDomWrap .mobileDomInner{left:50% !important;right:auto !important;float:none !important;transform:none !important;margin:0 0 0 -262.5px !important}
}
@media (min-width:930px){
/* ══ 2026-11-01 2차 : 나머지 서브페이지 ══ */
/* 라이브 목록(/m/goods/labanglist.asp) · 공구일정(/m/gb_schedule.asp) · 베스트(/m/goods/best.asp) : 넓은 단 + 그리드 */
html.mcSubW body #lvVodGrid.lv-grid,html.mcSubW body .dd-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;gap:24px 16px}
html.mcSubW body .mcb-hero{max-width:none}
html.mcSubW body ol.mcb-top{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;height:auto !important}
html.mcSubW body ol.mcb-top>li{min-width:0;margin:0 !important}
html.mcSubW body ol.mcb-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;gap:8px 16px}
html.mcSubW body .mcb-cats{padding-left:16px;padding-right:16px}

/* ── 중간 단(mcSubM) : 고객센터·장바구니·주문/결제·가입·약관·게시판·마이 등 폼/글 화면 — 기능은 그대로, 단만 860px 가운데 ── */
html.mcSubM{--msW:min(860px,calc(100% - 48px))}
html.mcSubM body .mcFab.mcFixed{right:max(24px,calc(50% - 430px + 16px)) !important}
}
@media (min-width:930px){
/* ── 좁은 카드 단(mcSubN) : 로그인·회원가입 — 폼은 넓히지 않고 600px 가운데 ── */
html.mcSubN{--msW:min(600px,calc(100% - 48px))}
html.mcSubN body .mcFab.mcFixed{right:max(24px,calc(50% - 300px + 16px)) !important}
}

/* ── 카테고리 목록 왼쪽 메뉴 (MCCATSIDE, mc_sub_pc.js 짝) ── */
#mcCatSide{display:none}
@media (min-width:930px){
html.mcCatSideOn body #mobile_wrap{position:relative}
html.mcCatSideOn body #mobile_wrap>form.goods_height{padding-left:264px !important;box-sizing:border-box}
html.mcCatSideOn body #mcCatSide{display:block;position:absolute;z-index:5;left:0;top:72px;width:240px;box-sizing:border-box;padding:0 8px 24px 16px;font-family:Pretendard,"Pretendard Variable",-apple-system,"Malgun Gothic",sans-serif}
html.mcCatSideOn #mcCatSide .hd{padding:6px 12px 12px;font-size:17px;font-weight:800;color:#111;border-bottom:1px solid var(--mc-line,#ececef);margin-bottom:6px}
html.mcCatSideOn #mcCatSide ul{list-style:none;margin:0;padding:0}
html.mcCatSideOn #mcCatSide li>a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;line-height:20px;color:#37383c;text-decoration:none;word-break:keep-all}
html.mcCatSideOn #mcCatSide li>a:hover{background:#f6f6f8;color:#111}
html.mcCatSideOn #mcCatSide li.open>a{font-weight:700;color:#111}
html.mcCatSideOn #mcCatSide li>a.on{background:var(--mc-soft,#FFF2F9);color:var(--mc-brand,#FA4BAB);font-weight:700}
html.mcCatSideOn #mcCatSide ul ul{margin:2px 0 6px 10px;padding-left:6px;border-left:2px solid var(--mc-line,#ececef)}
html.mcCatSideOn #mcCatSide ul ul li>a{font-size:13px;padding:7px 10px;color:#55565c}
html.mcCatSideOn #mcCatSide ul ul ul li>a{font-size:12.5px}
}

/* 탑메뉴(mcTopOn)가 붙으면 목록 헤더 막대(56px)가 사라지므로 왼쪽 카테고리 메뉴도 위로 */
@media (min-width:930px){
html.mcTopOn.mcCatSideOn body #mcCatSide{top:16px}
}