/* BASIC css start */
/* 전체 폰트 설정 */
body, input, button, select, textarea {
    font-family: 'Pretendard', -apple-system, sans-serif !important;
    letter-spacing: -0.3px !important;
}

/* 섹션 제목 (베스트 신상슈즈 등) */
.mTit {
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.5px !important;
}

/* 상품명 */
.listName {
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: -0.3px !important;
}




/* 롤링배너 */
#mainVisual { position:relative; height:340px; overflow:hidden }
#mainVisual img { width:100% }
#mainVisual .bx-controls-direction {margin-top: -25px;position:absolute;top:50%;left:0;right:0; z-index: 51; }
#mainVisual .bx-controls-direction a {display:block;position:absolute;top:0;width: 50px;height: 50px;font-size: 30px;color:#111;text-align:center;line-height: 50px;}
#mainVisual .bx-controls-direction a.bx-prev { left:0 }
#mainVisual .bx-controls-direction a.bx-next { right:0 }

/* 메인 category */
.main .mnCate{border-top:1px solid #eee;}
.main .mnCate .listWrap{display:table;table-layout:fixed;width:100%;border-bottom:1px solid #eee;}
.main .mnCate .list{display:table-cell;width:20%;border-left:1px solid #eee;text-align:center;height: 32px;}
.main .mnCate .list:first-child{border-left:0;}
.main .mnCate .link{color:#555;font-size:0;padding: 5px 0;display:block;height:100%;}
.main .mnCate .link:after{content:"";display:inline-block;height:100%;vertical-align:middle;}
.main .mnCate .link .title{display:inline-block;vertical-align:middle;line-height:1.1;word-break:break-word;font-size:11px; font-weight: 600;}

.item-wrap {padding-top: 15px;} 


.mTit {
    font-size: 19px !important;
    font-weight: bold !important;
    color: #111 !important;
    margin-bottom: 20px !important;
    padding: 30px 0 8px !important;
    text-align: center !important;
    position: relative;
    display: block;
}

/* 제목 아래 얇은 무채색 선 */
.mTit:after {
    content: "";
    display: block;
    width: 25px;
    height: 1px;
    background: #333;
    margin: 10px auto 0;
}


/* 중간 배너 */
.bannerArea{position:relative;padding: 10px 4px 30px;}
.bannerArea:after{content:"";display:block;clear:both;}
.bannerArea .left, .bannerArea .right {position:relative;width: 50%;float:left;}
.bannerArea div a { display:block; padding: 0 4px;}
.bannerArea img {width:100%;}
.bannerArea .infoArea{text-align:center;}
.bannerArea .title{display:block;color:#1d1d1d;font-size: 20px;line-height:1;margin-top: 10px;font-weight: bold;}
.bannerArea .subTxt{color:#606060;font-size:12px;line-height:18px;}

/* 하단 이미지 배너 */
.btmbannerWrap { position:relative;padding: 10px 8px 30px; }
.btmbannerWrap img {width:100%;}


/*floatBtns*/
.floatBtns{position:absolute;bottom:15px;left:15px;z-index:100;} 
.floatBtns .list{}
.floatBtns .link{display:block;margin-top:5px;}
.floatBtns .icons{display:block;width:35px;height:35px;background:no-repeat;background-size:35px auto;}
.floatBtns .icon01{background-image: url('http://www.bymogu.com/design/mok701/tem126/m/ficon01.png');}
.floatBtns .icon02{background-image: url('http://www.bymogu.com/design/mok701/tem126/m/ficon02.png');}
.floatBtns .icon03{background-image: url('http://www.bymogu.com/design/mok701/tem126/m/ficon03.png')}


.ftInst{display:block !important}


/* 1. 상품 사진 모서리 둥글게 (모바일 감성) */
.listPic {
    border-radius: 12px !important; /* 모서리를 12px만큼 둥글게 */
    overflow: hidden !important;
}

/* 2. 상품 이름 정렬 */
.listName {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-top: 10px !important;
    line-height: 1.4 !important;
    /* 이름이 너무 길면 두 줄까지만 보여주고 생략 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
   height: auto !important;
    min-height: 38px !important;
}

/* 3. 가격 정보 디자인 (PC 버전과 통일) */
.listPrice {
    display: flex !important; /* 가로 정렬 시작 */
    align-items: center !important; /* 높낮이를 가운데로 딱 맞춤 */
    flex-wrap: wrap !important; /* 글자가 너무 많으면 다음 줄로 넘어가게 */
    justify-content: flex-start !important; /* 왼쪽부터 차곡차곡 */
    margin-top: 8px !important;
    gap: 6px !important; /* 원래 가격과 할인 가격 사이의 간격 */
}

/* HTML에 들어있는 줄바꿈(<br>) 강제로 없애기 */
.listPrice br {
    display: none !important;
}

/* 원래 가격(검정) 디자인 살짝 조정 */
.listPrice del {
    color: #111 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    order: 1; /* 순서: 원래 가격이 먼저 */
}

/* 할인 가격(빨강) 디자인 살짝 조정 */
.listPrice span {
    color: #e64a19 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    order: 2; /* 순서: 할인 가격이 나중에 */
}
/* 품절 표시 강조 */
.listSoldout {
    color: #999 !important;
    font-weight: bold !important;
    font-size: 12px !important;
}


/* 1. 메인 배너 높이 및 여백 조절 */
#mainVisual {
    height: auto !important; /* 고정 높이 해제 */
    margin-bottom: 20px !important;
    background: #f9f9f9;
}

#mainVisual .visualSlider li img {
    width: 100% !important;
    height: auto !important;
    display: block;
}


/* 3. 모바일에서는 화살표가 없는 게 더 깔끔하므로 숨기기 (터치로 넘기니까요) */
#mainVisual .bx-controls-direction {
    display: flex !important;
}


/* 1. 카테고리 전체 박스 정리 */
.main .mnCate {
    border: none !important;
    padding: 25px 10px 10px !important; /* 위쪽 여백을 줘서 배너와 거리 두기 */
    background: #fff !important;
}

/* 2. 가로 줄(ul) 간격 조절 */
.main .mnCate .listWrap {
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important; /* 버튼 사이 간격 */
    margin-bottom: 8px !important;
}

/* 3. 개별 메뉴 버튼 디자인 */
.main .mnCate .list {
    display: block !important;
    width: 25% !important; /* 한 줄에 4개씩 딱 맞게 */
    border: none !important;
    background: #f8f9fa !important; /* 아주 연한 회색 배경 */
    border-radius: 12px !important; /* 모서리 둥글게 */
    height: auto !important;
    transition: background 0.2s !important;
}

/* 4. 버튼 안의 글씨 디자인 */
.main .mnCate .link {
    padding: 12px 0 !important;
    height: auto !important;
}

.main .mnCate .link .title {
    font-size: 12px !important;
    color: #333 !important;
    font-weight: 600 !important; /* 글씨를 조금 더 진하게 */
    letter-spacing: -0.5px !important;
}

/* 버튼을 눌렀을 때 살짝 색이 변하는 효과 */
.main .mnCate .list:active {
    background: #eee !important;
}


/* 1. 중간 배너 영역 전체 정렬 */
.bannerArea {
    padding: 10px 10px 30px !important; /* 좌우 여백을 10px로 맞춰서 상품 리스트와 통일 */
    display: flex !important; /* 가로로 나란히 */
    gap: 10px !important; /* 배너 사이 간격 */
}

.bannerArea .left, 
.bannerArea .right {
    float: none !important; /* 옛날 방식 끄기 */
    width: 50% !important; /* 1:1 비율 */
    background: #fff !important;
    border: 1px solid #eee !important; /* 아주 연한 테두리 */
    border-radius: 8px !important; /* 카테고리 버튼과 비슷한 곡율 */
    overflow: hidden;
    padding-bottom: 15px !important; /* 아래쪽 글씨 공간 */
}

/* 2. 배너 이미지 조절 */
.bannerArea div a {
    padding: 0 !important; /* 이미지 꽉 차게 */
}

.bannerArea img {
    border-radius: 0 !important; /* 위쪽은 꽉 채우고 아래 글씨와 연결 */
}

/* 3. 배너 안의 글씨 디자인 (더 잘 보이게) */
.bannerArea .infoArea {
    padding: 0 10px !important;
    text-align: center !important;
}

.bannerArea .title {
    font-size: 15px !important; /* 제목 크기 */
    color: #111 !important;
    margin-top: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.bannerArea .subTxt {
    font-size: 11px !important; /* 설명 글씨 */
    color: #888 !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
}


/* 1. 인스타그램 영역: 브랜드 계정 강조 */
.ftInst {
    margin-top: 50px !important;
    padding: 30px 0 !important;
    border-top: 1px solid #f0f0f0 !important;
    background: #fafafa !important; /* 아주 연한 배경색으로 구분 */
}

.ftInst p {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #111 !important;
}

.ftInst p i {
    font-size: 20px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
}

/* 2. 하단(푸터) 전체 영역 정리 */
#footer {
    padding-top: 40px !important;
    padding-bottom: 80px !important; /* 하단 고정 탭 바 공간 확보 */
    background: #fff !important;
    border-top: 1px solid #eee !important;
}

/* 고객센터/은행정보 텍스트 가독성 */
#footer .infoArea {
    padding: 15px 20px !important;
    text-align: left !important; /* 모바일은 왼쪽 정렬이 읽기 편함 */
}

#footer .infoArea .tel {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
}

#footer .infoArea dd {
    font-size: 12px !important;
    color: #888 !important;
    line-height: 1.8 !important;
}

/* 회사 정보(주소 등)는 더 연하게 숨기기 */
.footerAddress {
    padding: 20px !important;
    font-size: 11px !important;
    color: #bbb !important;
    text-align: left !important;
}

.footerCopy {
    padding: 0 20px 20px !important;
    text-align: left !important;
    font-size: 10px !important;
    color: #ccc !important;
}

/* 3. 하단 고정 탭 바 (Bottom Tab) 스타일 업그레이드 */
.mobile_bottom_tab {
    background: rgba(255, 255, 255, 0.95) !important; /* 살짝 투명하게 */
    backdrop-filter: blur(10px) !important; /* 유리 효과 */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05) !important; /* 위로 은은한 그림자 */
    border-top: none !important;
}

.tab_item i {
    font-size: 22px !important; /* 아이콘 살짝 키움 */
    color: #333 !important;
}

.tab_item span {
    font-size: 10px !important;
    color: #666 !important;
    font-weight: 500 !important;
}



/* 상품 이미지 터치 확대 효과 */
.list_shopping2x .items li a figure {
    overflow: hidden !important;
    display: block !important;
}

.list_shopping2x .items li a figure img {
    transition: transform 0.3s ease !important;
}

.list_shopping2x .items li a:active figure img {
    transform: scale(1.05) !important;
}

/* ✅ 플로팅 버튼 터치영역 확대 */
.floatBtns .link {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* BASIC css end */