/* BASIC css start */
/* =========================================================
   main2.css — main2.html 전용 스타일시트
   - main.css와 독립적으로 동작
   - main2.html의 단순화된 마크업(빈 <a> 제거, 인스타 클래스화)에 맞춤
   ========================================================= */

/* 공통 그리드 */
#contentWrapper .item-cont2 { display:flex; align-items:flex-start; flex-wrap:wrap; gap:20px; }
.itemList { width:calc(25% - 15px); margin-bottom:50px; }

/* 헤더 보정 */
#header { border-bottom:0 !important; }
#header.fixed,
#header.state-login.fixed { border-bottom:1px solid var(--000) !important; }

/* ============================================
   메인 비주얼 배너 (#mainBnr)
   ============================================ */
#mainBnr img { width:100%; }
#mainBnr .swiper-button-prev { opacity:0; background:url(//skin.makeshop.co.kr/skin/everyday/images/every_arr_l.png) no-repeat; height:32px; width:16px; background-size:contain; left:7%; }
#mainBnr .swiper-button-next { opacity:0; background:url(//skin.makeshop.co.kr/skin/everyday/images/every_arr_r.png) no-repeat; height:32px; width:16px; background-size:contain; right:7%; }
#mainBnr .swiper-button-next,
#mainBnr .swiper-button-prev { top:50% !important; transform:translateY(-50%); margin-top:0 !important; }
#mainBnr .swiper-button-next::after,
#mainBnr .swiper-button-prev::after { display:none; }
#mainBnr:hover .swiper-button-next,
#mainBnr:hover .swiper-button-prev { opacity:1; }
#mainBnr .swiper-pagination { bottom:0 !important; left:0; right:0; width:1600px; margin:0 auto; display:flex; justify-content:space-between; }
#mainBnr .swiper-pagination .swiper-pagination-bullet { background:var(--000); opacity:0.2; border-radius:0; margin:0; height:2px; width:auto; flex-grow:1; }
#mainBnr .swiper-pagination .swiper-pagination-bullet-active { opacity:1; }

/* ============================================
   메인 타이틀
   - main2.html에서는 일부 h1이 <a> 없이 텍스트만 들어가므로
     `.mainTitle h1`과 `.mainTitle h1 a` 양쪽에 동일 스타일 적용
   ============================================ */
.mainTitle { width:1600px; position:relative; margin:150px auto 25px; }
.mainTitle h1,
.mainTitle h1 a { font-size:var(--fs-xl); font-weight:700; display:inline-block; vertical-align:middle; }
.mainTitle h3 a { position:absolute; top:50%; transform:translateY(-50%); right:0; font-weight:500; text-transform:uppercase; font-size:var(--fs-base); }

/* ============================================
   아이템 슬라이드 공통
   ============================================ */
.item-wrap-slide { overflow-x:hidden; }
.item-wrap-slide .swiper-container { padding-bottom:57px !important; width:1380px; padding-right:100px; overflow:visible; }
.item-wrap-slide .swiper-container .swiper-pagination { bottom:0 !important; left:0; right:0; }
.item-wrap-slide .swiper-container .swiper-pagination .swiper-pagination-bullet { width:12px !important; height:12px !important; margin:0 7px !important; background:#eee !important; opacity:1 !important; }
.item-wrap-slide .swiper-container .swiper-pagination .swiper-pagination-bullet-active { background:var(--000) !important; }
.item-wrap-slide .swiper-button-prev { background:url(//skin.makeshop.co.kr/skin/everyday/images/slide_btn_l.png) no-repeat; height:48px; width:48px; background-size:contain; left:0; display:none; }
.item-wrap-slide .swiper-button-next { background:url(//skin.makeshop.co.kr/skin/everyday/images/slide_btn_r.png) no-repeat; height:48px; width:48px; background-size:contain; right:0; }
.item-wrap-slide .swiper-button-next,
.item-wrap-slide .swiper-button-prev { top:50% !important; transform:translateY(-50%); margin-top:-64px !important; }
.item-wrap-slide .swiper-button-next::after,
.item-wrap-slide .swiper-button-prev::after { display:none; }

/* 컬렉션(EVENT NOW) 슬라이드 */
.item-wrap-slide .collection_slide.swiper-container { padding-bottom:60px !important; width:1290px; padding-right:190px; overflow:visible; }
.item-wrap-slide .collection_slide.swiper-container .swiper-pagination { bottom:0 !important; left:0; right:0; width:1600px; margin:0 auto; display:flex; justify-content:space-between; }
.item-wrap-slide .collection_slide.swiper-container .swiper-pagination .swiper-pagination-bullet { background:var(--000) !important; opacity:0.2 !important; border-radius:0 !important; margin:0 !important; height:2px !important; width:auto !important; flex-grow:1; }
.item-wrap-slide .collection_slide.swiper-container .swiper-pagination .swiper-pagination-bullet-active { opacity:1 !important; }

/* 컬렉션 슬라이드 비활성 슬라이드 오버레이 */
.itemList.swiper-slide .thumb { position:relative; }
.itemList.swiper-slide .thumb::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:2; }
.swiper-slide-visible .thumb::after { display:none; }
.collection_slide .itemList .thumb { aspect-ratio:1 / 1; overflow:hidden; }
.collection_slide .itemList .thumb img { width:100%; height:100%; object-fit:cover; }

/* 서브젝트 (EVENT NOW 카드) */
.subject { font-size:var(--fs-md); font-weight:600; }

/* ============================================
   카테 탭 (Products)
   ============================================ */
.tabs { list-style-type:none; padding:0; display:inline-flex; cursor:pointer; margin-left:40px; gap:5px; z-index:2; }
.tab-link { padding:20px 40px 17px; font-size:var(--fs-sm); color:#666; text-align:center; }
.tab-link:hover { color:var(--000); text-shadow:0 0 1px #000; }
.tab-link.active { color:var(--000); font-weight:700; background:#fff; border:1px solid #000; border-bottom:0; }
.tab-link.tab-sale,
.tab-link.tab-sale.active { color:#b00; font-weight:700; }
.tab-content { width:1600px; margin:0 auto; position:absolute; visibility:hidden; opacity:0; pointer-events:none; z-index:-1; }
.tab-content.active { position:relative; visibility:visible; opacity:1; pointer-events:auto; z-index:1; }
.specialSale { width:1600px; margin:0 auto; }
.tab-content .item-cont2 .itemList { width:calc(20% - 16px); }
.tab-content .item-cont2 .itemList:nth-child(-n+3) { width:calc(33.33% - 14px); }
.tab-content .item-cont2 .itemList:nth-child(n+9) { position:absolute; left:-99999px; visibility:hidden; pointer-events:none; }
.tab-content.is-cate-expanded .item-cont2 .itemList:nth-child(n+9) { position:relative; left:auto; visibility:visible; pointer-events:auto; }

/* 카테 탭 타이틀 영역 */
.mainSection.cate .tab_title { background:#fff; padding:30px; max-width:100%; color:#333; font-size:30px; font-weight:bold; margin:-1px auto 10px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid #333; }
.mainSection.cate .tab_title a { color:#333; font-weight:normal; border:1px solid #333; padding:10px 50px; text-transform:uppercase; font-size:var(--fs-base); }
.cate .mainTitle { display:flex; margin-bottom:0; }
.cate .mainTitle h1,
.cate .mainTitle h1 a { margin-bottom:0; display:flex; align-items:center; }

/* ACCESSORY */
.accessory-content { width:1600px; margin:60px auto 0; }
.accessory-content .item-cont2 .itemList,
.accessory-content .item-cont2 .itemList:nth-child(-n+3) { width:calc(25% - 15px); }
.mainSection.cate .accessory-content .mainTitle { width:100%; margin:100px auto 25px; }

/* ============================================
   NEW IN 섹션 (featured / slide / more-list)
   ============================================ */
.new-featured { margin-bottom:50px; }
.new-featured .itemList { width:calc(33.33% - 14px); }
.mainSection.new .new-featured .itemList:nth-child(-n+3) { width:calc(33.33% - 14px); }

.new-more-list { display:none; margin-top:50px; }
.new-more-list.is-visible { display:block; }
.new-more-list .itemList,
.mainSection.new.is-new-expanded .new_slide .itemList,
.recmd-list .itemList { width:calc(25% - 15px); }

.mainSection.new:not(.is-new-expanded) .new_slide .new-prd-img-slider > a { display:none !important; }
.mainSection.new:not(.is-new-expanded) .new_slide .new-prd-img-slider > a:first-child { display:block !important; }
.mainSection.new.is-new-expanded .new_slide { width:1600px; padding-right:0; padding-bottom:0 !important; overflow:visible; }
.mainSection.new.is-new-expanded .new_slide .swiper-wrapper { display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px; transform:none !important; }
.mainSection.new.is-new-expanded .new_slide .swiper-button-next,
.mainSection.new.is-new-expanded .new_slide .swiper-button-prev,
.mainSection.new.is-new-expanded .new_slide .swiper-pagination { display:none !important; }

/* Best Items(recmd) 펼침 */
.recmd-list .itemList:nth-child(n+21) { position:absolute; left:-99999px; visibility:hidden; pointer-events:none; }
.mainSection.recmd.is-recmd-expanded .recmd-list .itemList:nth-child(n+21) { position:relative; left:auto; visibility:visible; pointer-events:auto; }

/* ============================================
   View More 버튼
   ============================================ */
.btn_vmore {
    width: 250px;
    padding: 1em 0;
    margin: 0 auto;
    border: 1px solid #222;
    text-align: center;
}
.btn_vmore a { font-size:14px; text-transform:uppercase; font-weight:500; }
.btn_vmore a:before { content:"\23F7"; }
.btn_vmore.is-link a:before { content:""; }
.btn_vmore.is-link a:after { content:" \25B6"; }

/* ============================================
   인스타그램 영역
   - main2.html에서 인라인 style 제거에 따른 신규 클래스 .instaInner / .instaCover
   ============================================ */
.instaWrap { margin:0 auto; }
.instaWrap .mainTitle { width:1600px; }
.instaWrap .mainTitle a { position:unset; transform:unset; text-transform:unset; }
.instaWrap .mainTitle a span { font-size:1.5em; margin-left:30px; }
.instaWrap .mainTitle > * { display:inline-block; }
.instaWrap .instaInner { position:relative; display:block; width:1600px; margin:0 auto; }
.instaWrap .instaCover { position:absolute; width:100%; height:100%; top:0; left:0; z-index:10; display:block; }
.snapwidget-widget { border:none; overflow:hidden; width:100%; aspect-ratio:9 / 4; }

/* BASIC css end */

