/* BASIC css start */
.section{margin-bottom:90px}
.sec_inner{padding:0 5%}
.section h2{text-align: center; font-size:21px; color:#000; font-weight:600; margin-bottom:40px;font-family: 'Noto Sans KR', sans-serif;}
.section h2.h2_bold{font-weight:800}
.swiper-button-disabled{opacity:.3}


#sec1{ margin-top: 25px;}
#sec1 .sec1_cont .swiper{padding-bottom: 15px;}
#sec1 .sec1_cont .swiper ul li{width:80%;}
#sec1 .sec1_cont .swiper ul li .ban_img a{display: block; width: 100%;border-radius: 20px; overflow: hidden;}
#sec1 .sec1_cont .swiper ul li .ban_img a img{width: 100%;}
#sec1 .sec1_cont .swiper ul li .ban_txt{width: 100%; padding: 25px 0;}
#sec1 .sec1_cont .swiper ul li .ban_txt p{text-align: center; font-family: 'Jost', 'Noto Sans KR', sans-serif; }
#sec1 .sec1_cont .swiper ul li .ban_txt p.big{font-size: 18px; color: #000; font-weight: 600; margin-bottom: 10px;}
#sec1 .sec1_cont .swiper ul li .ban_txt p.small{color: #999999;font-size: 13px; font-weight: 400;}
#sec1 .swiper .swiper-pagination{bottom: 0;}
.swiper .swiper-pagination-bullet-active{background-color: #000;}


#sec3 .sec_inner ul li{width:100%}
#sec3 .sec_inner ul li a{display: block;width: 100%;border-radius: 12px; overflow: hidden;}
#sec3 .sec_inner ul li a img{width: 100%; }


#sec4 .swiper{padding-bottom:10px}
#sec4 .swiper ul li{overflow:hidden; width:80%}
#sec4 .swiper ul li .info{padding:30px}
#sec4 .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height:3px; background-color: rgba(0,0,0,.09);width:90%; left:5%;}
#sec4 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #dc3737;}


#sec5 .sec_inner .sec5_cont .banner_img a{display: block;border-radius: 9px; overflow: hidden;  width: 100%;}
#sec5 .sec_inner .sec5_cont .banner_img a img{width: 100%;}
#sec5 .sec_inner .sec5_cont .item_cont ul{height: 100%; display: flex; flex-direction: row; justify-content: space-between; gap:10px; margin-top:10px; }
#sec5 .sec_inner .sec5_cont .item_cont ul li{width:33%;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .thumb a{display: block; width: 100%; height: 100%;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .thumb a img{width: 100%; height: 100%; object-fit: cover;}
#sec5 .sec_inner .sec5_cont .item_cont ul li .info p{font-size:13px;text-overflow: ellipsis; white-space:nowrap; overflow:hidden}


#sec6 .sec6_cate{ margin-bottom:45px;}
#sec6 .sec6_cate ul li{display: inline-block;  width:auto !important; margin:0 5px}
#sec6 .sec6_cate ul li:first-child{margin-left:5%}
#sec6 .sec6_cate ul li a{display:inline-block; border-radius:25px;margin:0 4px; width:100%; text-align:center; font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: -.3px; padding: 10px 15px; background-color:#f9f9f9; color:#999999}
#sec6 .sec6_cate ul li.on>a{ color:#fff !important; background-color:var(--main-color) }
#sec6 .sec6_prd>div{display: none;}
#sec6 .sec6_prd>div.show{display: block;}


#sec7 a{display: block; width: 100%;}
#sec7 a img{width: 100%;}


#sec8 .sec_inner .swiper{padding-bottom:40px}
#sec8 .sec_inner .sec8_cont>div{width:100%}
#sec8 .sec_inner .sec8_cont>div>ul{width: 100%;display: flex; flex-direction: column; gap: 20px;}
#sec8 .sec_inner .sec8_cont>div>ul>li{display: flex; width: 100%;}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child){height: 130px;}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .thumb{width: 130px; height: 130px;}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .info{flex-grow: 1;padding-left: 20px; display: flex; flex-direction: column; justify-content: center; max-width:285px}
#sec8 .sec_inner .sec8_cont>div>ul>li .thumb a{height: 100%;}
#sec8 .sec_inner .sec8_cont>div>ul>li .thumb a img{height: 100%; object-fit: cover;}
#sec8 .sec_inner .sec8_cont>div>ul>li:first-child .thumb{width: 100%; }
#sec8 .sec_inner .sec8_cont>div>ul>li:first-child .info{display: none;}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice{border-top:none; margin-top:2px; padding-top:0}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice strike{display:inline-block; }
#sec8 .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height:3px; background-color: rgba(0,0,0,.09);}
#sec8 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #dc3737;}


/* sec9 */
#sec9{padding:60px 0 50px}
#sec9 .sec9_review>div>ul>li{width:80%}
#sec9 .li_review .rv_main{ width: 100%;}
#sec9 .li_review .rv_main .thumb{width:100%;}
#sec9 .li_review .rv_main .thumb a{display: block; width: 100%; height: 100%; border-radius:8px; overflow:hidden;}
#sec9 .li_review .rv_main .thumb a img{width: 100%; height: 100%; object-fit: cover;}
#sec9 .li_review .rv_main .rv_main_cont{width: 100%; padding: 20px 0 15px; }
#sec9 .li_review .rv_main .rv_main_cont .rv_info{margin-bottom: 7px;color:#000; font-size: 15px;font-weight: 500;text-align:center;}
#sec9 .li_review .rv_main .rv_main_cont .rv_cont{font-size: 14px; text-overflow: ellipsis; overflow: hidden; font-weight:400; color:#999999; line-height:1.7; text-align:center;}
#sec9 .li_review .rv_mini{width: 100%; display: flex; align-items: center; justify-content: center; gap:15px;}
#sec9 .li_review .rv_mini ul { display:flex; flex-direction:column; gap:8px;}
#sec9 .li_review .rv_mini ul li{display:flex; align-items:center; font-size: 13px; color: #000;}
#sec9 .li_review .rv_mini ul li span {font-family: 'Jost', sans-serif;display:flex; align-items:center; color:#000; font-size:16px; font-weight: 500; }
#sec9 .li_review .rv_mini ul li span img{display:inline-block; margin-right:3px; transform:scale(.66); transform-origin:center center; }

/* 모바일 목록에서 찜/장바구니 버튼 숨김 */
.item_list .thumb .prd-wish{display:none !important}


/* =========================================================
   MO 메인 디자인 정리 — 이 아래가 최종 기준 (위 규칙을 덮어씀)
   ========================================================= */

/* ---------- 1. 공통 기준값 ---------- */
:root{
  --m-side:20px;          /* 좌우 여백 */
  --m-gap:72px;           /* 섹션 간 간격 */
  --m-text:#111;          /* 기본 글자색 */
  --m-sub:#888;           /* 보조 글자색 */
  --m-sale:#dc3737;       /* 할인율 전용 빨강 */
  --m-bg:#f5f5f5;         /* 상품 이미지 배경 */
  --m-radius:12px;        /* 배너 모서리 */
  --m-radius-sm:6px;      /* 상품 이미지 모서리 */
}
#contents, #contents .section h2, #sec1 .ban_txt p{font-family:'Pretendard Variable', Pretendard, 'Noto Sans KR', sans-serif !important}

/* ---------- 2. 섹션 간격 · 좌우 여백 ---------- */
.section{margin-bottom:var(--m-gap) !important}
.sec_inner{padding:0 var(--m-side) !important}
#sec1{margin-top:16px !important}

/* ---------- 3. 섹션 제목 ---------- */
.section h2{
  font-size:22px !important; font-weight:800 !important; color:var(--m-text) !important;
  letter-spacing:-0.6px !important; line-height:1.3 !important;
  margin-bottom:20px !important; text-align:center;}

/* ---------- 4. 슬라이드 도트 · 진행바 (검정으로 통일) ---------- */
#contents .swiper-pagination{bottom:0 !important; line-height:0}
#contents .swiper-pagination-bullet{
  width:6px; height:6px; margin:0 3px !important; border-radius:3px;
  background:#d5d5d5 !important; opacity:1 !important; transition:width .3s;}
#contents .swiper-pagination-bullet-active{width:18px; background:var(--m-text) !important}
#contents .swiper-pagination-progressbar{height:2px !important; background:#e5e5e5 !important}
#contents .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--m-text) !important}

/* ---------- 5. 배너 (sec1 · sec3 · sec5 · sec7) ---------- */
#sec1 .sec1_cont .swiper{padding-bottom:24px !important}
#sec1 .sec1_cont .swiper ul li .ban_img a{border-radius:16px !important}
#sec1 .sec1_cont .swiper ul li .ban_txt{padding:16px 4px 0 !important}
#sec1 .sec1_cont .swiper ul li .ban_txt p.big{font-size:17px !important; font-weight:700 !important; color:var(--m-text) !important; letter-spacing:-0.4px; margin-bottom:6px !important}
#sec1 .sec1_cont .swiper ul li .ban_txt p.small{font-size:13px !important; color:var(--m-sub) !important; letter-spacing:-0.2px}

#sec3 .sec_inner ul li a,
#sec5 .sec_inner .sec5_cont .banner_img a{border-radius:var(--m-radius) !important; overflow:hidden}
#sec5 .sec5_swiper{padding-bottom:20px}

#sec7{padding:0 var(--m-side) !important}
#sec7 a{border-radius:var(--m-radius); overflow:hidden}
/* 임시: 모바일 전용 이미지(750×500) 교체 시 아래 한 줄 삭제 */
#sec7 a img{display:block; width:100%; height:170px !important; object-fit:cover; object-position:center}

/* ---------- 6. 3열 상품 그리드 (sec2 신상품 · sec6 베스트) ---------- */
#sec2 .sec2_cont ul,
#sec6 .sec6_prd ul{display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px 10px; width:100% !important; margin:0 !important; padding:0 !important}
#sec2 .sec2_cont ul::before, #sec2 .sec2_cont ul::after,
#sec6 .sec6_prd ul::before, #sec6 .sec6_prd ul::after{display:none !important; content:none !important}
#sec2 .sec2_cont ul li.item_list,
#sec6 .sec6_prd ul li.item_list{width:auto !important; min-width:0; float:none !important; margin:0 !important; padding:0 !important}

/* 슬라이드 하단 여백 (sec6의 100px 과다 여백 수정) */
#sec2 .sec2_swiper,
#sec6 .sec6_prd>div .swiper.sec6_swiper{overflow:hidden; padding-bottom:32px !important}

/* ---------- 7. 상품 카드 공통 (sec2 · sec5 · sec6) ---------- */
#sec2 .item_list .thumb,
#sec5 .item_list .thumb,
#sec6 .item_list .thumb{width:100%; aspect-ratio:1/1; background:var(--m-bg); border-radius:var(--m-radius-sm); overflow:hidden}
#sec2 .item_list .thumb a, #sec5 .item_list .thumb a, #sec6 .item_list .thumb a{display:block; width:100%; height:100%}
#sec2 .item_list .thumb img,
#sec5 .item_list .thumb img,
#sec6 .item_list .thumb img{display:block; width:100% !important; height:100% !important; object-fit:contain}

#sec2 .item_list .info, #sec5 .item_list .info, #sec6 .item_list .info{padding:10px 0 0 !important; text-align:left}

/* 상품명: 2줄 고정 → 가격 라인이 항상 같은 높이에 정렬 */
#sec2 .item_list .info .prdname,
#sec5 .item_list .info .prdname,
#sec6 .item_list .info .prdname{
  font-size:12.5px !important; line-height:1.45 !important; font-weight:500 !important; color:#222 !important;
  letter-spacing:-0.3px; word-break:keep-all;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  white-space:normal !important; overflow:hidden !important; min-height:36px; margin:0 !important}
#sec2 .item_list .info .prdetc, #sec6 .item_list .info .prdetc,
#sec2 .item_list .info .prdcolor, #sec6 .item_list .info .prdcolor{display:none !important}

/* 가격: 정가(1줄) → 할인율 + 판매가(2줄) */
#sec2 .item_list .info .prdprice,
#sec5 .item_list .info .prdprice,
#sec6 .item_list .info .prdprice{
  display:flex !important; flex-wrap:wrap; align-items:baseline; gap:0 4px;
  border-top:none !important; padding-top:0 !important; margin-top:6px !important;
  font-size:14px !important; line-height:1.35 !important; white-space:normal !important; overflow:visible !important; color:var(--m-text)}
#sec2 .item_list .prdprice strike,
#sec5 .item_list .prdprice strike,
#sec6 .item_list .prdprice strike{order:0; flex-basis:100%; font-size:11px !important; color:#b5b5b5 !important; font-weight:400}
#sec2 .item_list .prdprice .percent,
#sec5 .item_list .prdprice .percent,
#sec6 .item_list .prdprice .percent{order:1; display:inline; font-size:13px !important; font-weight:700 !important; color:var(--m-sale) !important}
#sec2 .item_list .prdprice .price,
#sec5 .item_list .prdprice .price,
#sec6 .item_list .prdprice .price{order:2; font-size:14px !important; font-weight:700 !important; color:var(--m-text) !important; letter-spacing:-0.2px}

/* sec5 트렌드 랭킹 상품 간격 */
#sec5 .sec_inner .sec5_cont .item_cont ul{gap:10px !important; margin-top:16px !important}
#sec5 .sec_inner .sec5_cont .item_cont ul li{width:auto !important; flex:1 1 0; min-width:0}

/* ---------- 8. 베스트 랭킹 탭 ---------- */
#sec6 .sec6_cate{margin-bottom:20px !important}
#sec6 .sec6_cate ul li{margin:0 3px !important}
#sec6 .sec6_cate ul li:first-child{margin-left:var(--m-side) !important}
#sec6 .sec6_cate ul li:last-child{margin-right:var(--m-side) !important}
#sec6 .sec6_cate ul li a{
  margin:0 !important; padding:8px 16px !important; border-radius:20px !important;
  font-size:13px !important; font-weight:500 !important; letter-spacing:-0.3px;
  background:#fff !important; color:#666 !important; border:1px solid #e3e3e3; box-sizing:border-box}
#sec6 .sec6_cate ul li.on>a{background:var(--m-text) !important; border-color:var(--m-text); color:#fff !important}

/* ---------- 9. sec4 브랜드 (버켄스탁) ---------- */
#sec4 .swiper{padding-bottom:20px !important}
#sec4 .swiper ul li .thumb{border-radius:var(--m-radius); overflow:hidden; background:var(--m-bg)}
#sec4 .swiper ul li .info{padding:14px 2px 0 !important; text-align:left}
#sec4 .swiper ul li .info .prdname{font-size:14px !important; font-weight:600 !important; color:var(--m-text) !important; line-height:1.4 !important}
#sec4 .swiper ul li .info .prdetc{font-size:12px !important; color:var(--m-sub) !important; margin-top:2px}
#sec4 .swiper ul li .info .prdprice{border-top:none !important; padding-top:0 !important; margin-top:6px !important; font-size:15px !important}
#sec4 .swiper ul li .info .prdprice .percent{color:var(--m-sale) !important; font-weight:700}
#sec4 .swiper .swiper-pagination-progressbar{width:calc(100% - 40px) !important; left:20px !important}

/* ---------- 10. sec8 당신을 위한 추천 ---------- */
#sec8 .sec_inner .swiper{padding-bottom:28px !important}
#sec8 .sec_inner .sec8_cont>div>ul{gap:14px !important}
#sec8 .sec_inner .sec8_cont>div>ul>li:first-child .thumb{border-radius:var(--m-radius); overflow:hidden}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child){height:110px !important}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .thumb{width:110px !important; height:110px !important; flex-shrink:0; border-radius:var(--m-radius-sm); overflow:hidden; background:var(--m-bg)}
#sec8 .sec_inner .sec8_cont>div>ul>li:not(:first-child) .info{padding-left:14px !important; max-width:none !important}
#sec8 .sec_inner .sec8_cont>div>ul>li .info .prdname{font-size:13px !important; font-weight:500 !important; color:#222 !important; line-height:1.45 !important;
  display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; white-space:normal !important}
#sec8 .sec_inner .sec8_cont>div>ul>li .info .prdetc{font-size:12px !important; color:var(--m-sub) !important; margin-top:2px}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice{margin-top:6px !important; font-size:14px !important}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice strike{font-size:11px; color:#b5b5b5; margin-right:4px}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice .percent{display:inline; color:var(--m-sale) !important; font-weight:700; margin-left:4px}
#sec8 .sec_inner .sec8_cont>div>ul>li.item_list .info .prdprice .price{font-weight:700; color:var(--m-text)}
/* BASIC css end */