/* ====================================================================
  ★★★ 일부 통합 쇼핑몰 css style은 custom-common-integrated.css에 적용함
==================================================================== */

/* ===========================================================
  공통 = 컬러 css
=========================================================== */
.offcanvas{color: var(--main);}
.insio-bg{background-color: #D41367 !important;}
.cart-gray{color: #b4b4b4 !important;}
.insio-c, .insio-cart-price{color: #D41367 !important;}
.insio-cart-price02{color: #ee458f !important;}
.txet-insio-black{color: #41414d !important;}
.bg-dark-subtle02{background-color: #F6F6F6 !important;}
.bg-insio-c{background-color: #FDF2F7 !important;}

/* ===========================================================
  공통 = css
=========================================================== */
.container-1280{width: 100% !important; max-width: 80rem !important; margin: 0 auto !important; padding: 0 0.9375rem !important;}
.cursor-pointer{cursor: pointer !important;}
.icon-fs-7{font-size: 0.4375rem !important; margin-left: 0.3125rem;}
.icon-fs-8{font-size: 0.5rem !important;}
.mb-12px{margin-bottom: 0.75rem !important;}

label{color: #333 !important;}
.form-control:focus, .form-select:focus{box-shadow: none !important;}
.form-select:focus{border-color: none !important;}
.field-input>input{border-radius: var(--bs-border-radius) !important;}
.form-select{font-size: 0.9375rem !important;}
input[type="text"].form-control, input[type="password"].form-control, input[type="date"].form-control
{border: 1px solid var(--text-3) !important; padding: 0.5rem 0.75rem !important; font-size: 0.9375rem !important; color: var(--main) !important;}
input[type=text].border-0{border: 0 !important;}

/* input의 placeholder = select의 안내문구 색상 */
.form-control::placeholder,
.form-select:invalid{color: #89898a !important; opacity: 1;}

/* 선택해서 값이 생기면(valid) 컬러 변경 */
.form-select:valid{color: var(--main) !important;}
.form-select option{color: var(--main) !important;}

/* ===== 체크박스 커스텀 ===== */
.custom-checkbox{display: none;}
.checkbox-label{cursor: pointer; font-size: 1.125rem; user-select: none;}
.checkbox-icon{
  display: inline-block; width: 1.25rem; height: 1.25rem;
  border-radius: 50%; border: 1px solid #cecece; background-color: #fff;
  position: relative; cursor: pointer; transition: all 0.2s ease;
}
.checkbox-icon::after{
  content: '✓';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: #cecece; 
  font-size: 0.875rem; font-weight: bold;
}

/* .custom-checkbox:checked + .checkbox-label .checkbox-icon{background-color: #D41367; border-color: #D41367;} */
/* .custom-checkbox:checked + .checkbox-label .checkbox-icon{background-color: #ec2e81; border-color: #ec2e81;} */
.custom-checkbox:checked + .checkbox-label .checkbox-icon{background-color: #1d1d1d; border-color: #1d1d1d;}
.custom-checkbox:checked + .checkbox-label .checkbox-icon::after{color: #fff;}

/* ===== 네모 체크박스 ===== */
.form-check-input.insio-check {
  appearance: none; 
  -webkit-appearance: none;
  width: 1.25rem; height: 1.25rem;
  border: 1px solid #cecece !important; background-color: #fff !important;
  border-radius: 4px !important;
  position: relative; cursor: pointer; margin-top: 0.15rem; box-shadow: none !important;
}
.form-check-input.insio-check::after{
  content: '✓';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #cecece; font-size: 0.875rem; font-weight: bold;
  transition: all 0.2s ease;
}
.form-check-input.insio-check:checked{
  background-color: #1d1d1d !important;
  border-color: #1d1d1d !important;
}
.form-check-input.insio-check:checked::after{color: #fff;}


/* ===== Go top ===== */
#goTop{
  position: fixed; padding: 0; bottom: 5.625rem; right: 2.5rem;
  width: 2.375rem; height: 2.375rem;
  background: var(--white); color: var(--main);
  font-size: 1.25rem; line-height: 3.125rem;
  text-align: center; cursor: pointer;
  border: 1px solid #d9d9d9; border-radius: 50% !important;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
#goTop .icon{font-size: 0.625rem;;}


/* ===========================================================
  ★★★★★★ 통합몰 헤더 영역(가맹점몰하고 다름) ★★★★★★
  
  (통합)unified-main-bar
=========================================================== */
.unified-main-bar{height: 7.5rem;}
#main_category{fill: #303030;}
.unified-logo-category{gap: 1.3rem !important}

/* (통합)검색바 */
.unified-search-form{max-width: 28.125rem;}
.unified-search-form input[type="text"].form-control{height: 3.1rem; border: 2px solid #D41367 !important; border-radius: 6px; font-size: 1rem;}
.unified-search-form .btn svg{stroke: #D41367;}

/* (통합)마이&장바구니 */
.unified-icon{width: 1.75rem; height: 1.75rem; /* transition: fill 0.2s ease; */}
.unified-menu-label{font-size: 0.875rem; margin-top: 0.375rem; font-weight: 500;}

/* (통합)장바구니 배지 */
.cart-count-m2 {
  position: absolute; top: -0.0625rem; right: 0.625rem; transform: translateX(50%);
  min-width: 1.3125rem; height: 1.3125rem; padding: 0 0.3125px; border-radius: 1.2rem; 
  display: flex; align-items: center; justify-content: center;
  background: #D41367; border: 1px solid #fff; color: #fff;
  font-size: 0.625rem; font-weight: 500; line-height: 1; white-space: nowrap;
}

/* (M)insio 고정 상단바 */
.m-top-btn{
  display: inline-flex; align-items: center; gap: 0.875rem; 
  border-color: #ddd !important; font-size: 0.875rem; font-family: 500;
  padding: 0.3125rem 0.625rem !important; color: #707070;
}
.m-top-btn>.unified-icon{width: 0.875rem; height: 0.875rem;}


/* ===========================================================
  공통 = main-header(top) 
=========================================================== */
header#header{top: 0 !important; z-index: 9999 !important;}
#header{transition: box-shadow 0.3s ease; background: #fff !important;}
#header.scrolled{
  background-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  border-bottom: none !important;
}
.wrapper-top-header{min-height: 2.5rem !important;}
.wrapper-top-header-m{min-height: 3.5rem !important;}
.logo-header img{width: 38px;}
.logo-header img.logo.pc-logo[src$="pv_main.svg"]{width: 76px;}
.m-Toplogo{width: 25px;}

/* ===== (PC)insio 고정 상단바 ===== */ 
.top-menu{list-style: none; margin: 0; padding: 0; gap: .8rem;} 
.top-menu a{color: #707070;}
.top-menu .top-link{display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 500;}
.top-menu .btn-login{padding: 0.0625rem 0.4375rem; border: 1px solid #cecece; border-radius: 4px;}
/* .top-menu .btn-login:hover{background: #f7f7f7; color: var(--main);} */
.cart-count{
  background: #D41367; color: var(--white);
  border-radius: 999px; padding: 0.1875rem 0.375rem; font-size: 0.6875rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ===== (M)insio 고정 상단바 ===== */
.store-brand{display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0;}
.brand-display{display: flex; align-items: center; max-width: 100%; overflow: hidden;}

/* 로고 텍스트&이미지 버전 */
.brand-text{font-size: 1.125rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.brand-image{height: 24px; width: auto; display: block; max-width: 80px; object-fit: contain;}


/* ===== (M)top 메뉴 아이콘 ===== */
.nav-icon-item{width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;}
.insio-icon{position: relative;}
.insio-icon svg{width: 100%; height: 100%;}
.insio-icon path{fill: var(--main);}

/* 장바구니 카운트 배지 */
.cart-count-m{
  position: absolute; top: -0.0625rem; right: -0.5625rem; 
  width: 1.1875rem; height: 1.1875rem; 
  line-height: 1.1875rem; font-size: 0.625rem; font-weight: 500; 
  display: flex; align-items: center; justify-content: center;
  background: #D41367; border: 1px solid #fff; color: var(--white);
  border-radius: 50%;
}

/* ===========================================================
  공통 = Brand header - (PC)insio 가맹점 브랜드바
=========================================================== */
.brand-header-inner{position: relative; height: 8.125rem;}

/* 로고 위치 */
.brand-center{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
}

/* 로고 텍스트&이미지 버전 */
.brand-name-pc{font-weight: 600; color: var(--main);}
/* .brand-logo-pc{width: auto; height: 34px; display: block;} */

.brand-logo-pc {
  max-width: 400px; max-height: 90px;  
  width: auto; height: auto;
  display: block; object-fit: contain;
}

/* ===== 가맹점 검색바 ===== */
.brand-search{position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 13.75rem;}
.brand-search-input{font-size: 0.875rem; height: 2.5rem; border-radius: 6px !important; padding: 0.75rem 1rem !important;}
.brand-search-btn{
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.svg-icon path{fill: #8E8E8E;}          
.svg-icon{pointer-events: none;}

/* ===========================================================
  공통 = Brand header - (PC)카테고리 GNB
=========================================================== */
#category-bar{transition: height 0.3s ease-out;}
#category-bar>.container-1280{padding: 0 !important;}

#category-list-wrapper{
  height: 3.75rem; min-height: 3.75rem; overflow: hidden; 
  padding: 1.4375rem 0; 
  /* transition: height 0.3s ease-out; */
  transition: height 0.4s ease-in-out;
}

/* ===== 카테고리 펼쳐진 상태 ===== */
#category-list-wrapper.expanded{height: auto; padding: 1.4375rem 0; overflow: visible;}
#category-list{min-height: 3.75rem; margin-bottom: 0; padding-left: 0; column-gap: 0.75rem;}
#category-list > li{margin-bottom: 0; /*position:static;*/}

/* 메뉴 스타일 */
.category-link{
  min-width: 3.125rem; height: 100%; line-height: 1; 
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; font-weight: 500; white-space: nowrap; transition: color 0.2s;

  /* 폰트 16px 기준: 위 0px, 아래 23px 패딩으로 닫힌 상태 60px 높이 내에서 정렬 */
  padding: 0 0.625rem 1.4375rem 0.625rem; 
}
.category-link:hover{color: #547792;}

/* 고정 메뉴 */
.fixed-menu{color: var(--text-2) !important;}

/* ===== 하위메뉴 더보기 버튼 ===== */
#toggle-area{
  width: 7.5rem; height: 3.75rem; padding-right: 0.9375rem;
  position: absolute; top: 0; right: 0; z-index: 10;
  display: flex; justify-content: flex-end; align-items: center;
}
#toggle-button{border: none !important; font-size: 0.9375rem; padding: 0 !important;}
#toggle-button:hover{color: #547792;}

/* === 펼쳐진 상태일 때의 메뉴 스타일 조정 (줄 간격 최소화) === */
#category-list-wrapper.expanded #category-list{align-items: flex-start; min-height: auto;}
#category-list-wrapper.expanded .category-link{padding-top: 0px; padding-bottom: 1.4375rem;}
#category-list-wrapper.expanded .last-row-item .category-link{padding-bottom: 0px !important; }

/* padding 강제 제거 */
#category-list.temp-no-button-area{padding-right: 0 !important;}

/* ===== 서브 메뉴 스타일 ===== */
.sub-menu{
  display: none; position: absolute;
  width: 11.5625rem; height: 11.25rem; padding: 0px 0; margin-top: -1px; 
  border: 1px solid #c0c0c0; background-color: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  z-index: 9999;
}
.sub-menu li{display: block; width: 100%; position: relative !important;}
.sub-menu li a{
  display: block !important; 
  height: auto !important; line-height: normal !important; padding: 0.75rem 0.9375rem !important; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   
}
.sub-menu li a:hover{background-color: #F9F8F6; color: #547792 !important;}

.sub-menu a.sub2-dflex{display: flex !important; align-items: center !important; justify-content: space-between !important;}
.sub-menu-2{
  display: none; position: absolute !important; left: 100% !important;
  width: 11.5625rem; height: 11.25rem; margin-bottom: 0; padding: 0.3125rem 0;
  background-color: #fff; box-shadow: 0 6px 6px -2px rgba(0,0,0,0.1);
  z-index: 10001;
}

/* .sub-menu 스크롤바 커스텀 */
.sub-menu::-webkit-scrollbar{width: 6px;}
.sub-menu::-webkit-scrollbar-track{background: var(--bg-scrollbar-track); border-radius: 15px;}
.sub-menu::-webkit-scrollbar-thumb{background: var(--bg-scrollbar-thumb); border-radius: 15px;}
.sub-menu::-webkit-scrollbar-thumb:hover{background: #999999;}

/* ===========================================================
  main-slider
=========================================================== */
.tf-slideshow{height: 28.125rem; overflow: hidden;}
.tf-slideshow .swiper{height: 28.125rem;}
.tf-slideshow .swiper-wrapper{height: 28.125rem;}
.tf-slideshow .swiper-slide{height: 28.125rem;}
.tf-slideshow .wrap-slider{width:100%; height: 28.125rem; overflow: hidden;}
.tf-slideshow .wrap-slider img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.tf-slideshow .wrap-pagination{position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 50;}
.tf-slideshow .swiper{position: relative; z-index: 10;}
.tf-slideshow .wrap-pagination .sw-dots{pointer-events: auto;}

/* ===========================================================
  공통 = Product 영역 (비율 상관없이)
=========================================================== */
/* ===== hover&icon : 찜&장바구니 ===== */
/* 품절 상품용(.is-soldout) */
.product-img.is-soldout::before {
  content: "품절";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.39); 
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem; z-index: 2;
}

.card-product.style-3 .custom-hover-btns{
  display: flex !important; flex-direction: row !important;  gap: 0.625rem !important;
  position: absolute !important; bottom: 1.875rem !important; left: 50% !important;
  inset: auto auto 1.875rem 50% !important; 
  transform: translateX(-50%) translateY(15px) !important;
  z-index: 3 !important; opacity: 0 !important;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
}
.card-product.style-3 .custom-hover-btns .box-icon{
  transition: none !important; transform: none !important; opacity: 1 !important; 
  width: 2.8125rem !important; height: 2.8125rem !important;
  background-color: rgba(255, 255, 255, 0.9) !important; 
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.card-product:hover .custom-hover-btns{opacity: 1 !important; transform: translateX(-50%) translateY(0) !important;}
.list-product-btn .box-icon:hover{color: #D41367 !important;}
.list-product-btn .box-icon .product-icon{font-size: 1.125rem; height: 1.0625rem;}

/* ===== 상품 숫자(순위) 배지 ===== */
.tf-sw-product-sell{counter-reset: product-rank;}

/* 숫자 1씩 증가 */
.tf-sw-product-sell .swiper-slide{counter-increment: product-rank; position: relative;}

/* 숫자 표시 */
.tf-sw-product-sell .swiper-slide::before{
  content: counter(product-rank); position: absolute;
  top: 0; left: 0; z-index: 99999;
  
  background-color: #000; color: #fff;
  font-size: 1rem; font-weight: 700;
  width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
}

/* ===== 텍스트 영역 ===== */
.card-product-info .title{font-size: 0.9375rem !important; line-height: 1.45 !important; font-weight: normal !important;}
.price-box{display: flex; flex-direction: column; gap: 0.125rem;}
.original-price{font-size: 0.875rem; color: #868686; line-height: normal; text-decoration-color: #868686;}
.special-price{display: flex; align-items: center; gap: 0.375rem;}
.discount-rate{font-size: 0.9375rem; color: var(--red_1); font-weight: 600;}
.final-price{font-size: 1rem; font-weight: 800;}

/* ===== ALL&그리드 레이아웃 영역일 때 간격 ===== */
.flat-seller .grid-layout{row-gap: 1.25rem !important;}

/* ===========================================================
  BEST Product 영역 (3:4 비율)
=========================================================== */
/* ===== 이미지 비율 3:4 ===== */
.flat-spacing-11.py-70-70{padding: 4.375rem 0 4.375rem 0 !important;}
.card-product .best-product{position: relative !important; border-radius: 0 !important; aspect-ratio: 3 / 4 !important;}


/* ===========================================================
  NEW Product 영역 (1:1 비율)
=========================================================== */
/* ===== 이미지 비율 1:1 ===== */
.flat-spacing-5.py-30-50{padding: 1.875rem 0 3.125rem 0 !important;}
.card-product .new-product{position: relative !important; border-radius: 0 !important; aspect-ratio: 1 / 1 !important;}


/* ===========================================================
  ALL Product 영역 (1:1 비율)
=========================================================== */
.flat-spacing-5.py-50-70{padding: 3.125rem 0 4.375rem 0 !important;}
.card-product .all-product{position: relative !important; border-radius: 0 !important; aspect-ratio: 1 / 1 !important;}

/* ===== hover&icon : 찜&장바구니 ===== */
.card-product.fl-item .custom-hover-btns{
  display: flex !important; flex-direction: row !important;  gap: 0.625rem !important;
  position: absolute !important; bottom: 1.875rem !important; left: 50% !important;
  inset: auto auto 1.875rem 50% !important; 
  transform: translateX(-50%) translateY(15px) !important;
  z-index: 3 !important; opacity: 0 !important;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out !important;
}
.card-product.fl-item .custom-hover-btns .box-icon{
  transition: none !important; transform: none !important; opacity: 1 !important; 
  width: 2.8125rem !important; height: 2.8125rem !important;
  background-color: rgba(255, 255, 255, 0.9) !important; 
  border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.card-product.fl-item:hover .custom-hover-btns{opacity: 1 !important; transform: translateX(-50%) translateY(0) !important;}

/* ===== 더보기 버튼 ===== */
.tf-loading-default.style-2{height: 2.875rem; min-width: 12.5rem !important;}
.tf-loading-default{border: 1px solid #8E8E8E !important; border-radius: 6px !important;}
.tf-loading-default .text{color: #8E8E8E !important;} 

.tf-loading-default.style-2:hover{border-color: var(--main) !important;}
.tf-loading-default.style-2.loading{border-color: var(--main) !important;}
.tf-loading-default.style-2.loading::before{border: solid 2px var(--main); opacity: 1; animation-play-state: running;}
.tf-loading-default.style-2:hover .text{color: var(--main) !important;}

/* ===========================================================
  장바구니&주문결제 페이지 일부 style(최종결제정보)
=========================================================== */
/* ===== 최종 결제정보 ===== */
.final-amount{font-size: 1.375rem;}
.tf-cart-footer-inner{position: sticky; top: 7.8125rem; transition: top 0.3s ease;}
.tf-page-cart-checkout{border-color: #707070 !important; padding: 1.25rem; background-color: #fff; max-width: 28.125rem;}
.tf-page-cart-checkout hr{opacity: 0.2;}

.tf-cart-totals-discounts{display: block !important; width: 100%;}
.total-item, .total-item-num{font-size: 1rem;}

.cart-checkout-btn>a{border-radius: 6px !important; min-height: 3rem;}
.btn-buy-immediately:hover{background-color: #000000 !important; border: 1px solid #000000 !important;}


/* ===========================================================
  공통 = Footer
=========================================================== */
#footer{background-color: #f8f9fa; color: #777; font-size: 0.875rem; font-weight: 500 !important;}
#footer .footer-wrap .footer-body{padding-top: 1.25rem !important; padding-bottom: 1.25rem !important;}

.footer-sub-menu>a.f-menu-link{color: #777 !important;}
.f-menu-link{transition: color 0.2s; margin-right: 1.2rem;}
.f-menu-link:last-child{margin-right: 0;}
a.f-menu-link:hover{color: #3a3a3a !important;}

.f-title{font-size: 1.0625rem;}
.biz-info-text .f-item{display: flex; align-items: center; font-size: 0.875rem; line-height: 1.55;}



/* ===========================================================
  ★★★★★★ 주문수정 모달 style css ★★★★★★
=========================================================== */
.crystal-modal .modal-content{
  max-height: 65vh;
  display: flex; flex-direction: column;
  padding: 0.75rem 0 0.9375rem 0 !important;
}
.crystal-modal .modal-header{
  display: flex; justify-content: space-between; align-items: center; 
  padding: 0px 1.0625rem 10px 0.9375rem;
}
.modal-header-m-iconP{display: none;}
.crystal-modal .modal-body{flex: 1 1 auto; overflow-y: auto;}
.crystal-modal .variant-label{font-size: 0.875rem; font-weight: 600;}

/* 옵션 결과값 */
.selected-option-box{position: relative;}
.opt-quantity-area{width: 5.5rem !important; height: 1.75rem !important; overflow: hidden;}

/* 수량 조절 버튼 (-, +) */
.qty-btn{
  width: 1.75rem !important; height: 1.75rem !important; color: #868686; 
  display: flex; align-items: center; justify-content: center;
  font-size: 0.813rem; transition: all 0.2s ease; user-select: none;
}
.qty-btn:hover{color: #D41367 !important; }

/* 수량 입력창 */
.qty-input {
  width: 2rem !important; height: 1.75rem !important; 
  padding: 0 0.25rem !important; 
  font-size: 0.813rem; 
  outline: none; background-color: transparent; border: none;
}

.op-divider{color: #ccc;}
.option-price-unit{text-align: right;}

/* ===== modal footer ===== */
.modal-footer-custom-fixed{padding: 0 0.9375rem;}
.modal-btn>button{min-height: 3rem; border-radius: 6px !important; font-weight: 600; justify-content: center; font-size: 1rem;}
.modal-btn .btn-change{border: none; background-color: #1d1d1d !important;}
.modal-btn .btn-outline{background-color: #ffffff !important; color: var(--main) !important;border: 1px solid #8E8E8E  !important;}





/* ===========================================================
  추가 반응형
=========================================================== */
@media (max-width: 74.99875rem){ /* (max-width: 74.99875rem) */
  /* ===========================================================
    공통 = Brand header - (PC)카테고리 GNB
  =========================================================== */
  /* ===== 하위메뉴 더보기 버튼 ===== */
  #toggle-area{width: 6.25rem;}
}

/* ==== special section ==== */
@media (min-width: 62rem) and (max-width: 74.99875rem){ /*(min-width: 992px) and (max-width: 1199.98px) */
  /* ===========================================================
    ALL Product 영역 (1:1 비율)
  =========================================================== */
  .all-product-grid[data-grid=grid-5]{grid-template-columns: repeat(4, 1fr);}
}

@media (min-width: 48rem) and (max-width: 74.9375rem){ /* (min-width: 768px) and (max-width: 1199px) */
  /* ===========================================================
    공통 = Product 영역 (비율 상관없이)
  =========================================================== */
  /* ===== swiper 레이아웃 커스텀 ===== */
  .tf-sw-product-sell .swiper-slide, .tf-sw-collection .swiper-slide{margin-right: 0.9375rem !important;}
  .all-product-grid[data-grid=grid-5]{gap: 0.9375rem !important;}
  .flat-seller .grid-layout{row-gap: 1.25rem !important;}
}

@media (max-width: 71.8125rem){ /* (max-width: 1149px) */
  /* ===========================================================
    공통 = Product 영역 (비율 상관없이)
  =========================================================== */
  .flat-spacing-11.py-70-70{padding: 3.75rem 0 3.125rem 0 !important;}
  .flat-spacing-5.py-30-50{padding: 1.25rem 0 1.875rem 0 !important;}
  .flat-spacing-5.py-50-70{padding: 1.25rem 0 3.125rem 0 !important;}

  /* ===========================================================
    ALL Product 영역 (1:1 비율)
  =========================================================== */
  /* ===== 더보기 버튼 ===== */
  .tf-pagination-wrap{padding-top: 1.875rem !important;}

  /* ===========================================================
    장바구니&주문결제 페이지 일부 style(최종결제정보)
  =========================================================== */
  /* ===== 최종 결제정보 ===== */
  .tf-page-cart-footer{width: 100% !important;}
  .tf-page-cart-checkout{padding: 1.5rem; max-width: 100%;}
  .total-item, .total-item-num{font-size: 1rem;}
  .cart-checkout-btn{display: none;}
}

@media (max-width: 61.99875rem){ /* (max-width: 991.98px) */
  /* ===========================================================
    공통 = header bottom - (M)카테고리 GNB
  =========================================================== */
  .canvas-mb .mb-canvas-content{padding-bottom: 2.5rem !important;}
  .nav-mb-item{padding: 0 0.625rem 0 0.5rem!important;}
  .nav-mb-item > a.mb-menu-link{font-weight: 500; width: 100%; padding: 0.9375rem 0; font-size: 0.9375rem !important; font-weight: 500;}
  .m-item-icon .icon-arrow-down{display: inline-block; transition: transform 0.3s ease;}

  /* ===== 아코디언 토글 ===== */
  .nav-mb-item.is-open{background-color: #fbfbfb;}
  .nav-mb-item.is-open > a.mb-menu-link .m-item-icon .icon-arrow-down{transform: rotate(180deg); transition: transform 0.3s ease; color: #547792 !important;}
  .m-sub-list li.is-open > a.m-sub-link .m-item-icon .icon-arrow-down{transform: rotate(180deg); transition: transform 0.3s ease; color: #547792 !important;}

  /* ===== 서브 메뉴 스타일 ===== */
  .m-sub-list{overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out;}
  /* .m-sub-list > li{border-bottom: 1px solid #dbdbdb;} */
  .m-sub-list > li > a.m-sub-link{
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 0.9375rem 0.625rem 0.9375rem 0.9375rem; font-size: 0.9375rem;
  }
  .m-sub-list.m-sub-level-2 .m-sub-link{padding: 0.5rem 0.625rem 0.5rem 1.375rem; color: var(--text-2);}
  .m-fixation-name{color: var(--text-2) !important;}

  .m-sub-list > li:last-child{border-bottom: none !important;}
  .nav-mb-item.is-open > .m-sub-list > li{border-bottom: 1px solid #dbdbdb;}
  .m-sub-list > li:first-child{border-top: 1px solid #dbdbdb;}

  /* ===========================================================
    main-slider
  =========================================================== */
  .tf-slideshow, .tf-slideshow .swiper, .tf-slideshow .swiper-wrapper, .tf-slideshow .swiper-slide, .tf-slideshow .wrap-slider{height: 22.5rem;}

  /* ===========================================================
    공통 = Product 영역 (비율 상관없이)
  =========================================================== */
  /* ===== 상품 숫자(순위) 배지 ===== */
  /* 숫자 표시 */
  .tf-sw-product-sell .swiper-slide::before{font-size: 0.875rem; width: 2.1875rem; height: 2.1875rem;}
}

@media (max-width: 47.99875rem){ /* (max-width: 767.98px) */
  /* ===========================================================
    공통 = Product 영역 (비율 상관없이)
  =========================================================== */
  /* ===== swiper 레이아웃 커스텀 ===== */
  .tf-sw-product-sell .swiper-slide, .tf-sw-collection .swiper-slide{margin-right: 0.75rem !important;}

  .all-product-grid[data-grid=grid-5]{gap: 0.9375rem !important;}
  .flat-seller .grid-layout{row-gap: 1.25rem !important;}

  /* ===========================================================
    ALL Product 영역 (1:1 비율)
  =========================================================== */
  .all-product-grid[data-grid=grid-5]{grid-template-columns: repeat(3, 1fr);}
}

/* ==== special section ==== */
@media (max-width: 37.49875rem){ /* (max-width: 599.98px) */
  /* ===========================================================
    ALL Product 영역 (1:1 비율)
  =========================================================== */
  .all-product-grid[data-grid=grid-5]{grid-template-columns: repeat(2, 1fr) !important;}

  /* ===========================================================
    ★★★★★★ 주문수정 모달 style css ★★★★★★
  =========================================================== */
  .crystal-modal{
    width: 100%; border-radius: 0 !important;
    --bs-modal-width: 100%;
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-margin: 0;
  }
  .crystal-modal .modal-content{
    height: 100%; max-height: 100vh; margin: 0 !important;
    padding: 15px 0 15px 0 !important; border-radius: 0 !important; border: none;
  }
  .modal-header>.icon-close{display: none;}
  .modal-header-m-iconP{display: block;}
  .modalDemo .modal-dialog{width: 100% !important; max-width: none !important; margin: 0 !important; height: calc(100vh - 0px) !important;}
  .crystal-modal .modal-body{height: calc(100% - 170px); }
}

/* ==== special section ==== */
@media (min-width: 36rem){ /* (min-width: 576px) */
  /* ===========================================================
    공통 = Footer
  =========================================================== */
  .biz-info-text .f-item{display: inline-flex; align-items: center;}
  .biz-info-text .f-item::after{content: "|"; color: #c0c0c0; font-size: 0.75rem; margin: 0 0.5rem; font-weight: normal; line-height: 1;}
  .biz-info-text .f-item.f-last::after{display: none;}
}

/* ==== special section ==== */
@media (max-width: 36rem){ /* (max-width: 576px) */
  /* ===========================================================
    공통 = css
  =========================================================== */
  /* ===== Go top ===== */
  #goTop{bottom: 6rem; right: 1.5625rem;}
  

  /* ===========================================================
    main-slider
  =========================================================== */
  .tf-slideshow, .tf-slideshow .swiper, .tf-slideshow .swiper-wrapper, .tf-slideshow .swiper-slide, .tf-slideshow .wrap-slider{height: 17.1875rem;}

  /* ===========================================================
    공통 = Product 영역 (비율 상관없이)
  =========================================================== */
  .flat-spacing-11.py-70-70{padding: 1.875rem 0 !important;}
  .flat-spacing-5.py-30-50{padding: 1.25rem 0 1.875rem 0 !important;}
  .flat-spacing-5.py-50-70{padding: 1.25rem 0 3.125rem 0 !important;}
  
  /* ===== 텍스트 영역 ===== */
  .card-product .card-product-info{gap: 0.375rem;}
  .card-product-info .title{font-size: 0.875rem !important; line-height: 1.4 !important;}
  .price-box{gap: 0.0625rem;}
  .original-price{font-size: 0.875rem;}
  .special-price{gap: 0.375rem;}
  .discount-rate{font-size: 0.875rem;}
  .final-price{font-size: 0.9375rem;}
}

@media (max-width: 35.99875rem){ /* (max-width: 575.98px) */
  .mb-12px{margin-bottom: 10px !important;}

  /* ===========================================================
    장바구니&주문결제 페이지 일부 style(최종결제정보)
  =========================================================== */
  /* ===== 최종 결제정보 ===== */
  .tf-page-cart-checkout{padding: 1.25rem !important;}
  .final-amount{font-size: 1rem;}
  .tf-page-cart-checkout> hr{margin: 0.5rem 0 !important;}
  .tf-cart-totals-discounts{margin-top: 0.875rem !important;}
  .tf-cart-totals-discounts>div{margin-bottom: 0.25rem !important;}
  .tf-cart-totals-discounts>div:last-child{margin-bottom: 0.875 !important;}
  .total-item, .total-item-num{font-size: 0.875rem;}

  /* ===========================================================
    공통 = Footer
  =========================================================== */
  #footer{font-size: 0.8125rem;}
  .footer-sub-menu{font-size: 0.8125rem;}
  .f-menu-link{margin-right: 1.2rem;}
  .f-title{font-size: 1rem; margin-bottom: 0.7rem !important;}
  .biz-info-text .f-item{display: block; font-size: 0.8125rem; line-height: 1.55;}
  .biz-info-text .f-item::after{content: none;}
}