/* 메인 */
/* 메인슬라이더 */
/* ─── 슬라이더 ─── */
.carousel {
  position: relative; overflow: hidden;
  width: 100%; height: 278px; /* 높이는 필요에 맞춰 조정 */
}
.carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  height: 100%;
}
.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}
.slide-image {
  width:100%; height:100%;
  background-size: cover;
  background-position: center;
}


.slide-image-1 {background-image: url('../img/carousel-slide01.png');}
.slide-image-2 {background-image: url('../img/carousel-slide02.png'); }
.slide-image-3 {background-image: url('../img/carousel-slide03.png'); }
.slide-image-4 {background-image: url('../img/carousel-slide04.png'); }


.carousel-thumb-track .carousel-thumb .thumb-image {

}
/* … */


/* ─── 네비게이션 (우측 하단) ─── */
.carousel-nav {
  position: absolute;
  bottom: 13px;
  right: 23px;
  display: flex;
  align-items: center;
  gap:8px;
  background: rgba(0,0,0,0.4);
  color:#fff;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 1.4rem;
  cursor:pointer;
}
.carousel-menu {
  display: flex;
  flex-direction: column;
  gap:3px;
}
.carousel-menu div {
  width:11px; height:1px;
  background:#fff;
}

/* ─── 팝업 백그라운드 ─── */
.carousel-popup {
  display: none;
  position: fixed;
  z-index: 10;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  justify-content: center; align-items: center;
}
/* ─── 팝업 콘텐츠 ─── */
.carousel-popup-content {
  position: relative;
  background: #fff; padding:16px;
  max-width: 90%; max-height: 70%;
  overflow: hidden;
}
/* ─── 썸네일 트랙 ─── */
.carousel-thumb-track {
  display: flex; gap:8px; overflow-x: auto;
  padding-bottom: 8px;
}
.carousel-thumb {
  flex: 0 0 auto; width:80px; height:80px;
  cursor: pointer; border:2px solid transparent;
}
.carousel-thumb.active { border-color:#007bff; }
.thumb-image {
  width:100%; height:100%;
  background-size: cover;
  background-position: center;
}
/* ─── 팝업 닫기 버튼 ─── */
.carousel-popup-close {
  position: absolute; top:8px; right:8px;
  cursor: pointer; font-size:18px;
}




.cateBtnWrap h2.maintxt {
  font-size: 1.6rem;
  color: #333;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.cateBtnWrap h2.maintxt span {
  color: #ed1b23;
}






/* 카테고리 메뉴 */
.py30.cate {padding: 3rem 2rem 1rem 2rem !important;
border-bottom: none !important;}
.category-menu {
  width: 100%;
  background: #FFEFF0; /* 필요에 따라 배경색 조정 */
  padding: 2rem;
}

.category-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.category-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0; /* 이미지 로딩 전 배경색 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-label {
  font-size: 1.2rem;
  color: #333;
  white-space: nowrap;
}


















/* 상단바 */
.topBar {
    padding: 1.5rem 1.6rem 1rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

.topBar_main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}
.topBar_main a.mainLink {
    margin-right: auto;
}

.topBar_search {
    width: 100%;
    font-size: 1.4rem;
    position: relative;
}
.topBar_search input {
    width: 100%;
    border-radius: 10rem;
    border: 1px solid #ed1b23;
    padding: .9rem 1.5rem;
    font-size: 1.4rem;
}

.search-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 1rem;
}

.topBar_search input::placeholder {
  color: #999;
  font-size: 1.4rem;
}


/* 검색 x 버튼 없애기 */
/* 크롬, 사파리 등 WebKit 기반 브라우저용 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/* IE/Edge용 */
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
  display: none;
}






/* 메뉴 사이드바 */
.menuSideBarWrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
.menuSideBar {
  height: 100%;
  width: 190px;
  background-color: #f5f5f5;
  margin-left: auto;
  padding-right: 20px;
}
/* 스크롤 가능한 전체 메뉴 */
.sidebar-menu {
  height: 100%;
  overflow-y: auto;
}

/* 기본 ul reset */
.sidebar-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-title {
  width: 100%;
  padding: 15px 0 20px 20px;
}
.sidebar-title01 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.sidebar-title01 h2 {
  color: var(--red);
  font-size: 1.8rem;
  font-weight: bold;
  margin-right: auto;
}
.sidebar-title01 img.close {
  margin-left: 10px;
}

.sidebar-title02 {
  display: flex;
  justify-content: space-between;
}
.sidebar-title02 button {
  font-size: 1.4rem;
  width: 70px;
  border-radius: 30px;
  padding: 6px 0;
}
.sidebar-title02 button.log {
  background-color: var(--red);
  border: 1px solid var(--red);
  color: #fff;
}
.sidebar-title02 button.in {
  border: 1px solid #999;
  color: #999;
}
.sidebar-title03 {
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-top: 20px;
}




/* 메뉴 항목 */
.sidemenu-item {
  margin-bottom: 20px;
}

/* 메뉴 링크 강조(활성화 시) */
.menu-link {
  border-left: 4px solid transparent;
  /* …기타 스타일… */
}
.sidemenu-item.active .menu-link {
  border-left-color: var(--red);
}
/* 버튼/링크 공통 스타일 */
.menu-link {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  position: relative;
  border-left: 4px solid transparent;
}
.sidemenu-item.active .menu-link {
  border-left-color: var(--red);
}

/* 화살표 */
.menu-link .arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .3s ease;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666;
  transform-origin: center;
}

/* 펼쳐진 상태의 화살표 (▼ → ▶) */
.sidemenu-item.active > .menu-link .arrow {
  transform: translateY(-50%) rotate(45deg);
}

.sidemenu-item.active .menu-link {color: var(--red);}

/* 서브메뉴 감추기 */
.sidebar-menu .submenu {
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 펼치면 충분히 큰 높이로 설정 */
/* active 클래스가 붙은 menu-item 직계 .submenu만 보이도록 */
.sidebar-menu .sidemenu-item.active > .submenu {
  display: block;
}


/* 서브메뉴 항목 스타일 */
.submenu-item a {
  display: block;
  padding: 5px 16px;
  font-size: 1.4rem;
  color: #999;
}
.submenu-item a:hover {
  color: #333;
}


/* 기본 위치는 화면 오른쪽 바깥 */
.menuSideBar {
  position: relative;
  width: 190px; height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s ease;
  margin-left: auto;
}
.menuSideBar.sidebar-open   { transform: translateX(0);   }
.menuSideBar.sidebar-closed { transform: translateX(100%); }














/* ───────────────────────────────────────── */
/* 컨테이너 기본 세팅 */
.topBar_nav {
  position: relative;
  font-size: 14px;
}

.topBar_nav ul li {
    width: 5.3rem;
    letter-spacing: -1.2px;
    text-align: center;
    padding: 1rem 0;
    font-size: 1.3rem;
}
.topBar_nav ul li.se {width: 5.7rem;}
/* 1차 메뉴 active 스타일 */
.topBar_nav > ul:first-of-type li.active {
  font-weight: 700;
  border-bottom: 2px solid #ED1B23;
  padding-bottom: 0.25rem; /* border 보이도록 여유 주기 */
}

/* 2차 메뉴 active 스타일 */
.topBar_nav .nav-line--secondary li.active {
  font-weight: 700;
  border-bottom: 2px solid #ED1B23;
  padding-bottom: 0.25rem; /* border 보이도록 여유 주기 */
}



/* 1차 메뉴 (첫 번째 UL) */
.topBar_nav > ul:first-of-type {
  display: flex;
  list-style: none;
  margin: 0;
}

/* 2차 메뉴는 기본 숨김 */
.topBar_nav .nav-line--secondary {
  display: none;
  list-style: none;
  margin: 0;
  padding: .5rem 1rem;
}

/* 토글 버튼 위치 및 화살표 기본 */
.topBar_nav .nav-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.topBar_nav .nav-toggle img {
  display: block;
  transition: transform .3s ease;
}

/* ───────────────────────────────────────── */
/* 1) .expanded 붙이면 2차 메뉴 보이기 + 화살표 회전 */
.topBar_nav.expanded .nav-line--secondary {
  display: flex;
}
.topBar_nav.expanded .nav-toggle img {
  transform: rotate(180deg);
}

/* 2) .hide-primary 붙이면 1차 메뉴 숨기기 */
.topBar_nav.hide-primary > ul:first-of-type {
  display: none;
}

/* 3) 두 클래스 조합 시
      - expanded + hide-primary : 2차 메뉴만
      - expanded only         : 1차+2차 메뉴
      - hide-primary only     : (JS 에서 이 경우 만들지 않으므로 처리 불필요)
      - 둘 다 없을 때        : 1차 메뉴만
*/










/* 컨텐츠 */
.content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}




/* 로그인화면 */
.content .login {
   box-sizing: border-box;
   background-color: #F5F5F5;
   display: flex;
   flex-direction: column;
   padding: 5rem 2rem 10rem 2rem;
   height: calc(100vh - 200px);
}


.sing_input {
    background-color: #fff;
    padding: 2.4rem;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--gray);
}

.input_log {
    margin-bottom: 2.4rem;
}
.MYP-06-radio {
    display: inline-flex;      /* inline-block 대신 inline-flex */
  align-items: center; 
  margin-right: 2rem;
  font-size: 1.4rem;
}
.MYP-06-radio input[type="radio"] {
  /* 체크된 라디오는 이 색으로 채워지고, 테두리도 이 색으로 바뀝니다 */
  accent-color: var(--red);
  margin-right: .5rem;
  font-size: 1.4rem;
}


.input-group input {
    padding: 1.4rem;
    font-size: 1.4rem;
    width: 30rem;
    border-radius: 1rem;
    border: 1px solid #EDF1F3;
    margin-bottom: 1.6rem;
}

.input-group input::placeholder {
  color: #999;
}


.input-id {
    font-size: 1.2rem;
        display: flex;
    align-items: center;
    justify-content: space-between;

      /* ★ 여기를 추가 ★ */
  width: 100%;      /* 부모 폭을 꽉 채워서 flex 여유 공간 발생 */
  box-sizing: border-box;
  padding: 0 1rem;  /* 필요하면 좌우 여백도 줘 보세요 */
  margin-bottom: 2.4rem;
}
.input-id-find {}
.input-id label {
    display: inline-flex;      /* inline-block 대신 inline-flex */
    align-items: center;
}
.input-id label a {font-size: 1.2rem; color: #FD5E62;}

.input-id input {margin-right: .8rem;}

.sing_input .Logbtn {
    font-size: 1.4rem;
    padding: 1rem;
    border-radius: 3rem;
    width: 14.6rem;
}
.sing_input .Logbtn.in {
    background-color: var(--red);
    color: #fff;
    
}
.sing_input .Logbtn.up {
    background-color: #ddd;
    color: #999;
}
.input-btn {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
}






/* 마이페이지 */
/* 1. 상단 헤더 */

.content_my {
  padding: 2rem 2rem 8.4rem 2rem;
  overflow-y: auto;
}
.mypage_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.mypage_header .highlight {
  color: var(--red);
}

.btn_setting {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
}

/* 2. 마이포인트 */
.my_point {
  background: #333;
  color: #fff;
  border-radius: 1.3rem;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.point_label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.6rem;
}

.point_label img {

}

.point_value {
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
}

.point_value .unit {
  margin-left: .4rem;

}

/* 3. 쇼핑MY 탭 */
.shopping_my_tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  border-radius: 1.3rem;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  font-size: 14px;
}

.tab_label {
  font-weight: bold;
  color: #333;
  font-weight: 1.4rem;
}

.tab_menu {
  display: flex;
  /* gap: 12px; */
  align-items: center;
  color: #333;
  font-weight: normal;
}
.tab_menu a {width: 7.7rem; text-align: center;}

.tab_menu .divider {
  color: #ccc;
}


/* 4. 기능 아이콘 메뉴 */
.icon_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  gap: 10px;
  margin-bottom: 2rem;
}

.icon_item {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.icon_item img {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: .5rem;
}

.icon_item span {
  font-size: 1.4rem;
  color: #999;
}

/* 수직 구분선 */
.icon_divider {
  width: 1px;
  height: 1.6rem;
  background-color: #e0e0e0;
}




/* 5. 배너 공통 */
.banner {
  width: 100%;
}
.banner img {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.banner img:last-child {margin-bottom: 0rem;}


/* 6. 최근주문내역조회 */
.order_filter {
  padding: 2rem 0 0 0;
}

.title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.title .red {
  color: var(--red);
}

/* 버튼 스타일 */
.date_range_buttons {
  display: flex;
  gap: .8rem;
  margin-bottom: 1rem;
}

.range_btn {
  flex: 1;
  border: 1px solid #ddd;
  background: #fff;
  padding: 1rem 0;
  font-size: 1.2rem;
  border-radius: .8rem;
  color: #999;
  cursor: pointer;
}

.range_btn.active {
  border: 1px solid var(--red);
  color: var(--red);
  font-weight: bold;
}

/* 날짜 선택 */
.date_picker_wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.date_input {
  flex: 1;
  position: relative;
}

.date_input input {
  width: 100%;
  padding: 1rem 2rem;
  border: 1px solid #ddd;
  border-radius: .8rem;
  font-size: 1.2rem;
  color: #999;
}

.date_input img {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  pointer-events: auto; /* 또는 아예 제거 */
  cursor: pointer;
}

.dash {
  font-size: 14px;
  color: #999;
}



.date_input input[type="date"] {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #ddd;
  border-radius: .8rem;
  font-size: 14px;
  color: #999;
  background-color: #fff;
}

/* 브라우저 기본 달력 아이콘 숨김 */
.date_input input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

.date_input input[type="date"]::-moz-calendar-picker-indicator {
  display: none;
}






/* 검색창 */
.search_wrap {
  display: flex;
  margin-bottom: 2rem;
  border: 1px solid #ddd;
  border-radius: .8rem;
  overflow: hidden;
}

.search_wrap input {
  flex: 1;
  padding: 10px 12px;
  font-size: 14px;
  border: none;
}
.search_wrap input::placeholder {
  color: #999; /* 원하는 색상으로 변경 */
}
.search_btn {
  background: #fff;
  border: none;
  padding: 0 1.5rem;
  cursor: pointer;
}

.search_btn img {
  width: 20px;
  height: 20px;
}


/* 주문섹션 */
.order_section {
  font-size: 1.4rem;
  color: #000;
}

.order_block {
  padding: .5rem 0;
}

.order_label {
  font-size: 1.2rem;
  color: #999;
  margin-bottom: 1rem;
}

.order_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.order_list li {
  padding: .8rem 0;
}

.order_list li a {
  color: #333;
  font-size: 1.6rem;
}

/* 구분선 */
.divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 2rem 0;
}



/* 장바구니 basket */
/* 장바구니랩 */
.content.bas {}
.basket-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 150px);
  
  box-sizing: border-box;
}
.basket-cart_title {

  padding: 16px;
  font-weight: bold;
  font-size: 2rem;
}
.basket-cart_title h2 {margin-bottom: 2rem;}
.basket-cart_title h2 span {color: var(--red);}
.basket-header_btns {
  display: flex;
  justify-content: space-between;
}
.basket-btn {
  width: 5rem;
  padding: 4px 0;
  font-size: 1.2rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
}
.basket-delete { border-color: #999; color: #999; }
.basket-select_all { border-color: var(--red); color: var(--red); }
.basket-cart_items_scroll {
  flex: 1;
  overflow-y: auto;
  background-color: #f5f5f5;
}

.basket-btn_modify {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}



/* 상품반복 */


/* ─── 전체 컨테이너: 썸네일(컬럼1) + 세로 스택(컬럼2) ─── */
.basketAdd-cart-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px solid #ddd;
  background: #fff;
  padding: 1.5rem 2rem;
  width: 100%;
}

/* ─── 왼쪽 썸네일 ─── */
.basketAdd-item-thumb {
  height: 60px;
  width: 60px;
  background: url('../img/basket-cart_item01.png') center/cover no-repeat;
  border: 1px solid #ddd;
}

/* ─── 오른쪽 세로 스택 ─── */
.basketAdd-item-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px; /* row 간격 */
  min-width: 0; /* 줄바꿈 방지 */
}

/* row1: 제목 + 체크박스 */
.basketAdd-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.basketAdd-item-name {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.3;
  word-break: break-word;
}
/* 체크박스 */
.basketAdd-checkbox {
  width: 15px; height: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.basketAdd-checkbox.basketAdd-checked {
  border: 1px solid var(--red);
}
.basketAdd-checkbox.basketAdd-checked::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 2px auto;  
  background: url('../img/check-red.png') no-repeat center/contain;
}

/* row2: 옵션 목록 */
.basketAdd-item-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.basketAdd-item-options div {
  font-size: 1.2rem;
  color: #999;
  word-break: break-word;
}
.basketAdd-item-options div.ss {
  color: #333;
  padding-top: 10px;
}

/* row3: 무료배송 라벨 */
.basketAdd-label-free {

}

/* row4: 금액 */
.basketAdd-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.basketAdd-price-label {
  font-size: 14px;
  color: #333;
}
.basketAdd-item-price {
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
}

/* row5: 수량 & 수정 버튼 */
.basketAdd-controls-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.basketAddBox {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100px;
  height: 25px;
  font-size: 1.2rem;
}
.basketAdd-minus,
.basketAdd-plus {
  width: 28px; height: 28px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 28%;
}
.basketAdd-count {
  min-width: 24px;
  text-align: center;
   border-left: 1px solid #ddd;
   border-right: 1px solid #ddd;
   width: 44%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}
.basketAdd-modify {

  border: 1px solid #ddd;
  border-radius: 5px;
  color: #999;
  cursor: pointer;
  white-space: nowrap;
  height: 25px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}

/* 비활성화 */
.basketAdd-btn.basketAdd-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* // 상품반복 끝 // */






.basket-summary {
  padding: 15px 20px;
  background: #F5F5F5;
  margin-bottom: 6rem;
}
.basket-subtotal {
  color: #999;
  font-size: 1.4rem;
  display: flex;
  justify-content: flex-end;
  padding: 1rem 0;
  border-bottom: 1px solid #ddd;
}
.basket-subtotal .to {
  color: #333;
  margin-right: auto;
}
.basket-subtotal .amount {
    font-weight: 700;
}
.basket-subtotal .tax {
  display: flex;
  align-items: center;
  font-weight: 700;
}
.basket-subtotal .tax b {
  font-size: 1.2rem;
  font-weight: normal;
}
.basket-subtotal .plus {margin: 0 5px;}

.basket-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  font-size: 1.6rem;
}

.basket-total {
  font-weight: bold;
  font-size: 16px;
}
.basket-total .amount {
  color: var(--red);
  font-weight: 900;
}
.basket-total .amount b {
  font-size: 1.2rem;
  color: #333;
  font-weight: normal;
  margin-left: 5px;
}
.basket-cart_bottom {
  background: #fff;
  position: sticky;
  bottom: 6.4rem;
  padding: 15px 20px;
}
.basket-cart_btns { display: flex; justify-content: space-between; gap: 8px; }
.basket-cart_btns button {
  height: 34px;
  border-radius: 30px;
  font-size: 1.4rem;
}

.basket-select_del {
  width: 25%;
  background-color: #ddd;
  color: #999;
}
.basket-select_order {
  border: 1px solid #ED1B23;
  color: var(--red);
  width: 35%;
}
.basket-full_order {
  background: var(--red);
  color: #fff;
  width: 35%;
}








/* 메인광고배너1 */
.main_ad_banner-1 {
  width: 100%;
  height: auto;
  padding: 2rem;
}
.main_ad_banner-1 img {
  margin-bottom: 2rem;
}
.main_ad_banner-1 img:last-child {
  margin-bottom: 0rem;
}
/* 메인광고배너2 */
.main_ad_banner-1.banner-2 img {
  margin-bottom: 1rem;
}


.product.St01 {width: 380px;}
.productContainer.main {
  padding: 2rem;
}

.productContainer.main .product-contens {padding: 2rem 0;}

.productContainer.main .pd_title {
  font-size: 2rem;
  font-weight: bold;
}
.productContainer.main .pd_title b {margin-right: 5px;}
.productContainer.main button {
  font-size: 1.2rem;
  color: #999;
  padding: .5rem 1rem;
  border-radius: 50px;
  border: 1px solid #ddd;
}


.productContainer_cate {
  padding: 20px 0 10px 0;
}
.productContainer_cate .pd_title {
  color: #999;
  gap: 5px;
}

.product-contens.expanded .pd_Swiper.imgArea.th {width:100%; max-width:390px;} 
.product-contens.expanded .pd_Swiper.imgArea.th img {border: none;} 

.product_table {
  border-top: 1px solid #EFEFEF;
  border-bottom: 1px solid #EFEFEF;
  margin: 10px 0;
}
.product_table .product_table_txt {
  width: 100%;
  height: auto !important;
  font-size: 1.2rem;
  color: #858585;
  font-weight: normal;
  padding: 10px 0;
  display: flex !important;
  justify-content: space-between;
}
.product_table .product_table_txt span {
  display: inline-flex;
}



.product_table_scroll {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch; /* iOS에서 스무스한 스크롤을 위해 */
  white-space: nowrap; /* 내용이 줄바꿈되지 않도록 */

  display: block;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.product_table_scroll table {
  font-size: 1.2rem;
  width: auto; /* 테이블이 내용에 맞게 자동으로 너비 조정 */
  min-width: 100%; /* 최소 너비를 컨테이너에 맞춤 */
  border-collapse: collapse;
  table-layout: fixed;
}

.product_table_scroll thead {background-color: #f5f5f5;}

.product_table_scroll th, .product_table_scroll td {
  min-width: 50px; /* 셀의 최소 너비 설정 */
  max-width: 50px;
  height: 32px;
  text-align: center;
  border: 1px solid #DDDDDD;
  font-weight: normal;

  word-break: break-all;
  box-sizing: border-box;
}

.product_table_scroll .head {
  background-color: #2A3E65;
  color: #fff;
  border-color: #2A3E65;
  font-weight: 600;
}

.product_table_scroll .head.red {
  background-color: #ED1B23;
  border-color: #ED1B23;
}


.boxBanner_pink {
  border: 1px dotted #FF3366;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  padding: 5px 0;
}
.boxBanner_pink p {
  font-size: 1.3rem;
  color: #999;
  font-weight: normal;
  height: auto !important;
}
.boxBanner_pink p span {
 color: #FF3366; 
 font-weight: bold;
}
.boxBanner_pink p button {
  color: #FF3366;
  border: 1px solid #FF3366;
  background-color: rgba(255, 51, 102, 0.1);
  padding: 3px 10px;
  font-size: 1.2rem;
  border-radius: 50px;
  margin-left: 10px;
}


.spacing {width: 100%; height: 8px; background-color: #EFEFEF;}


.maintab.detail > li a {
  font-size: 1.2rem !important;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}
.maintab.detail > li a span {
  font-size: .8rem;
  margin-top: .5rem;
}


.panel-detailInfo.plus {
  width: 100%;
  padding: 2rem;
}



/* 상세보기 탭 09.product_detail.html */
/* CSS */
.panel-detail-wrapper {
  padding: 40px 20px 30px 20px;
  background: #fff;
  font-size: 1.2rem;
  color: #333;
}

.panel-detail-table-wrap {
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}

.panel-detail-table {
  width: 100%;   /* 필요에 따라 조절 */
  border-collapse: collapse;
  font-size: 1.2rem;
}

.panel-detail-table th,
.panel-detail-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
}

.panel-detail-table th {
  width: 30%;
  text-align: center;
  font-weight: normal;
  color: #333;
  background-color: #f5f5f5;
  white-space: pre-line;  /* 줄바꿈 허용 */
}
.panel-detail-notice {
  border-bottom: 1px solid #ddd;
}
.panel-detail-notice-title {
  padding: 0.75rem;
  background: #fafafa;
  text-align: center;
  color: #FF3366;
  border-bottom: 1px solid #ddd;
}

.panel-detail-notice-list {
  margin: 1rem 0 1rem .8rem;  /* 좌측 들여쓰기 */
  list-style: disc;
}

.panel-detail-notice-list li {
  margin-bottom: 0.5rem;
  color: #333;
  line-height: 1.4;
}
.panel-detail-notice-list li.pink {
  color: #FF3366;
}











/* header */
.prd-review__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  padding: 10px 20px;
}
.prd-review__Box {display: flex; align-items: center;}

.prd-review__title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

.prd-review__count {
  font-size: 1.2rem;
  font-weight: normal;

}

/* tabs */
.prd-review__tabs ul {
  display: flex;
  align-items: center;
  
}
.prd-review__tabs ul div {
  width: 1px;
  height: 10px;
  background-color: #999;
}
.prd-review__tabs button {
  background: none;
  border: none;
  padding: 0.25rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
  /* border-right: 1px solid #999; */
}

.prd-review__tabs .active button {
  font-weight: bold;
  color: #333;
}

/* sort */
.prd-review__sort {
  position: relative;
}

.sort-toggle {
  background: none;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 2px 5px;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: #999;
}

.sort-list {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  margin-top: 0.25rem;
  
}

.sort-list.show { display: block; }
.sort-list li button {
  display: block;
  width: 100%;
  padding: 0.5rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 1.1rem;
  color: #999;
}









.review.det {padding: 15px 20px;}
.reply.det {padding: 15px 20px;}
.re-text.det b {font-size: 1.5rem; font-weight: 500;}
.star.det i {width: 14px;}

.tabcon_overView {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 1.4rem;
  padding: 8px 0;

  cursor: pointer;
}
.more-arrow {
  transition: transform 0.3s ease;
}
.more-arrow.rotated {
  transform: rotate(180deg);
}








/* CSS 제품안내 안내박스 >  */
.proDet_info_accordion {
  width: 100%;
  padding: 20px;
}

.proDet_info_accordion-item + .proDet_info_accordion-item {
  margin-top: 8px;
}

.proDet_info_accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  background: #f7f7f7;
  border: 1px solid #ddd;
  cursor: pointer;
  user-select: none;
}

.proDet_info_label {
  font-size: 1.4rem;
  color: #333;
  display: flex;
  align-items: center;
}
.proDet_info_label img {
  margin-right: 5px;
}

.proDet_info_icon-arrow {
  transition: transform 0.3s ease;
  font-size: 1.2rem;
  color: #666;
}

/* 열림 상태에서 화살표 위로 회전 */
.proDet_info_accordion-header.active .proDet_info_icon-arrow {
  transform: rotate(180deg);
}

.proDet_info_accordion-content {
  display: none;
  padding: 0.8rem 1.5rem;
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
}














/* 많이 찾는 브랜드 */
.product-contens.fa {
  grid-template-columns:  repeat(4, 1fr);
}

.product-contens.fa .product .imgArea img {
  border: none;
  border-radius: 0px;
}


/* 이벤트 판촉사랑 */
.productContainer.main .event {
  padding: 2rem 0;
}
.productContainer.main .event p {
  font-size: 1.6rem;
  margin-top: 15px;
}






/* ── 고객센터 카드 ── */
.customer-centerWrap {
  padding: 0 2rem;
}

.customer-center {
  background: #F9F8F7;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 2rem;
  margin-bottom: 40px;
  font-family: inherit;
}

/* 상단 헤더 */
.cs-header { margin-bottom: 16px; }
.cs-header .sunday {
  font-size: 1.6rem;
  color: #999;
}
.cs-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: #333;
  margin-bottom: 10px;
}
.cs-phone {
  color: var(--red);
}

/* 운영시간 리스트 */
.cs-hours {
  font-size: 1.6rem;
  display: flex;
}
.cs-hours .tit {font-weight: bold; margin-right: 10px;}
.cs-hours .box {
  display: flex;
  margin-bottom: 1rem;
  color: #333;
}
.cs-hours .box h2 {
  width: 50px; margin-right: 5px;
}

.cs-hours .box h2 span {
  display: inline-block;            /* inline → inline-block 으로 변경 */

  white-space: nowrap;              /* 한 줄로 유지 */
  text-align: justify;              /* 양쪽 정렬 */
  text-align-last: justify;         /* 마지막(그리고 유일한) 줄도 정렬 */
  -webkit-text-align-last: justify; /* 사파리 지원용 */
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}



/* 버튼 */
.cs-button {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin: 20px 0;
  background-color: #fff;
  border-radius: 10px;
  font-size: 1.6rem;
  color: #333;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* 계좌 안내 */
.account-info { }
.account-title {
  font-size: 2.4rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.account-owner {
  display: inline-block;
  font-size: 1.6rem;
}
.account-owner span {
  color: #999;
}
.account-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.6rem;
}
.account-list li {
  font-size: 1.6rem;
  color: #333;
  margin-bottom: 10px;
}
.account-list li:last-child {
  margin-bottom: 0;
}
.account-list .number {
  color: var(--red);
  font-weight: 600;
  margin-left: 4px;
}






/* 15. 판촉사랑 모바일 - 이벤트 */
.tabcon.event {
  margin-bottom: 64px;
}
.tabcon.event img {
  margin-bottom: 10px;
}
.tabcon.event img:last-child {
  margin-bottom: 0;
}

.tabcon.event.more {
  display: none;
  
  margin-bottom: 10px;
}
.tabcon.event button {
  width: 100%;
  font-size: 1.4rem;
  color: #999;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0;
}






/* 7. 판촉사랑 모바일 - 검색 수정 */
/* 인기 카테고리 */
.proDet_popcat_popcat {
  max-width: 360px;
  padding: 20px;
  margin-bottom: 64px;
}

/* 선택된 필터 */
.proDet_popcat_filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.proDet_popcat_filter-item {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 1.4rem;
  color: #999;
}
.proDet_popcat_filter-remove {
  background: none;
  border: none;
  margin-left: 4px;
  font-size: 1.8rem;
  font-weight: 200;
  line-height: 1;
  cursor: pointer;
  color: #999;
}

/* 리스트 제목 */
.proDet_popcat_list-title {
  display: inline-block;
  font-weight: 500;
  color: #fff;
  background-color: #ED1B23;
  margin-bottom: 8px;
  font-size: 1.4rem;
  padding: 8px 15px;
  border-radius: 34px;
}

/* 카테고리 리스트 */
.proDet_popcat_list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}
.proDet_popcat_list-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #eee;

}
.proDet_popcat_list-item:first-child { border-top: none; }

.proDet_popcat_list-num {
  font-size: 1.4rem;
  margin-right: 20px;
  color: #999;
  font-weight: 500;
}
.proDet_popcat_list-text {
  flex: 1;
  font-size: 1.6rem;
  color: #333;
  font-weight: normal;
}

/* 활성(인기) 항목 */
.proDet_popcat_list-item.active .proDet_popcat_list-num {
  color: #ed1b23;
}














/* 9. 판촉사랑 모바일 - 상품상세(2)수정 */
/* 3. CSS 스타일 */
.order_page_overlay {
  display: none;
  width: 100%;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 50;
}

.order_page_bottom-sheet {
  position: fixed;
  max-width: 390px;
  width: 100%;
  left: 50%;
    transform: translateX(-50%);
  right: 0;
  bottom: -120%;
  margin-bottom: 75px;
  
  background: #fff;
  border-radius: 12px 12px 0 0;
  transition: bottom 0.3s;
  z-index: 90;
  display: flex;
  flex-direction: column;
}

.order_page_sheet-header,
.order_page_sheet-footer {
  padding: 20px;
  /* border-bottom: 1px solid #eee; */
}

.order_page_sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order_page_sheet-body {
  padding: 0 20px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

/* show 클래스 적용 시 활성화 */
.order_page_overlay.show {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.order_page_bottom-sheet.show {
  bottom: 0;
}

.basketAdd-controls-row.order_page_quantity {
  justify-content: flex-start;
  font-size: 1.6rem;
  margin-bottom: 20px;
}

.basketAdd-controls-row.order_page_quantity .order_page_sample-order {
  margin-left: auto;
  font-size: 1.2rem;
  color: #FF3366;
  border: 1px solid #FF3366;
  padding: 6px 4px;
  border-radius: 2px;
}

.order_page_options {margin-bottom: 20px;}
.order_page_section-title {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.order_page_option-select {
  width: 230px;
  height: 32px;
  border-color: #ddd;
  border-radius: 8px;
  color: #999;        /* 선택된 옵션 텍스트 색 */
  font-size: 1.2rem;    /* 선택된 옵션 폰트 크기 */
  margin-right: 10px;
}
.order_page_option-select:invalid {
  color: #999;        /* 플레이스홀더 텍스트 색 */
  font-size: 1.2rem;    /* 플레이스홀더 폰트 크기 */
  
}



.order_page_option-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.order_page_option-row .order_page_option-label {
  width: 60px;
  font-size: 1.4rem;
}

.order_page_option-extra {
  width: 50px;
  text-align: center;
  font-size: 1.2rem;
  color: #999;
  padding: 2px 0;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 2px;
}

/* 금액 */
.order_page_price-line {
  display: flex;
}
.order_page_price-line>span {
  width: 55px;
  margin-right: 10px;
  font-size: 1.4rem;
}
.order_page_price-value {
  font-size: 1.4rem;
  color: #999;
  font-weight: 600;
  width: 60px;
}
.order_page_price-note {
  color: #999;

}
.order_page_shipping-note {
  font-size: .8rem;
  color: #999;
  margin-top: 3px;
  line-height: 1.2;
}

.order_page_discount {
  padding-bottom: 20px;
  border-bottom: 1px solid #EFEFEF;
  margin-bottom: 20px;
}
.order_page_discount .countPlus {
  font-size: 1.4rem;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 10px;
}

.order_page_discount .countPlus .order_page_discount-note {
  color: #FF3366;
  font-size: 1rem;
  background-color: #FFF5EA;
  text-align: center;
}
.order_page_discount-group {
  display: flex;
  gap: 20px;
}
.order_page_discount-group label {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 1.4rem;
}

.order_page_discount-group input[type="radio"] {
  /* 원하는 색상 코드로 변경하세요 */
  accent-color: #FF3366;
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.order_page_total-amount {font-weight: bold;}











/* 하단바 위 마진값 */
.tabcontents.det {
  margin-bottom: 30px;
}
/* 하단 장바구니/주문하기바 */
/* 흰색 하트가 기본 */
.proDet_info_heart-btn {
  width: 20px;
  
  background: url('../img/heart-white.svg') no-repeat center/contain;
  border: none;
  padding: 0;
  cursor: pointer;
  
}
/* active 시 빨간 하트로 변경 */
.proDet_info_heart-btn.active {
  background-image: url('../img/heart-red.svg');
}
.proDet_info_cart-btn, .proDet_info_order-btn {
  width: 150px;
  padding: 10px 0;
  font-size: 1.4rem;
  color: #999;
  border-radius: 30px;
  border: 1px solid #999;
}
.proDet_info_order-btn {
  width: 156px;
  padding: 10px 0;
  font-size: 1.4rem;
  color: #fff;
  background-color: #ED1B23;
  border-radius: 30px;
  border: 1px solid #ED1B23;
}







/* 하단바 */
.bottomBar {
    max-width: 410px;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    padding: 2rem 2.2rem;
    background-color: #fff;
    z-index: 200;
}
/* 기존 .bottomBar 그대로 두시고, 아래만 추가하세요 */

/* 1) 링크를 기준으로 이미지 겹치기 */
/* 1) 링크를 기준으로 이미지 겹치기 */
.bottomBar a {
  position: relative;
  display: block;
   width: 24px;
  height: 24px;
}

/* 첫 번째, 두 번째 아이콘 모두 크기 맞추기 */
.bottomBar a > img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 부모(24×24) 기준으로 중앙 정렬 */
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 2) 기본(default) 아이콘 */
.bottomBar a > img:nth-of-type(1) {
  display: block;
}

/* 3) 활성(active) 아이콘 */
.bottomBar a > img:nth-of-type(2) {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 4) active 상태일 때 토글 */
.bottomBar a.active > img:nth-of-type(1) {
  display: none !important;
}
.bottomBar a.active > img:nth-of-type(2) {
  display: block !important;
}



/* 푸터 */
footer {
    padding: 4rem 2rem 8.4rem 2rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: #333;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}
.footerInfo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}