/* 메인 */
/* 메인슬라이더 */
/* ─── 슬라이더 ─── */
.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: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
}


.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.4rem;
  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.5rem;
  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 {
    letter-spacing: -1.2px;
    text-align: center;
    font-size: 1.5rem;
}

/* li 전체 영역을 클릭 가능하게 */
.topBar_nav ul li a {
    display: block;
    padding: 1rem 0;
    color: inherit;
    text-decoration: none;
}

/* 1차 메뉴 active 스타일 */
.topBar_nav > ul:first-of-type li.active a {
  font-weight: 700;
  border-bottom: 2px solid #ED1B23;
  padding-bottom: calc(1rem - 2px); /* border 두께만큼 padding 줄임 */
}

/* 2차 메뉴 active 스타일 */
.topBar_nav .nav-line--secondary li.active a {
  font-weight: 700;
  border-bottom: 2px solid #ED1B23;
  padding-bottom: calc(1rem - 2px); /* border 두께만큼 padding 줄임 */
}



/* 1차 메뉴 (첫 번째 UL) */
.topBar_nav > ul:first-of-type {
  display: flex;
  list-style: none;
  margin: 0;
  justify-content: space-between;
  padding: 0 3.5rem 0 0.5rem;
}

/* 1차 메뉴 li - 균등 분배 */
.topBar_nav > ul:first-of-type li {
  flex: 1;
}

/* 2차 메뉴는 기본 숨김 */
.topBar_nav .nav-line--secondary {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 3.5rem 0 0.5rem;
  justify-content: space-between;
}

/* 2차 메뉴 li - 균등 분배 */
.topBar_nav .nav-line--secondary li {
  flex: 1;
}

/* 토글 버튼 위치 및 화살표 기본 */
.topBar_nav .nav-toggle {
  position: absolute;
  right: 1rem;
  top: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 10;
}
.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;
}


.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-info {
  font-size: 1.4rem;
  color: #666;
  line-height: 1.6;
  padding: 0 1rem;
  margin-bottom: 1.6rem;
}
.input-info p {
  margin: 0;
}
.input-id-find {
  text-align: right;
  font-size: 1.4rem;
  margin-left: auto;
}
.input-id label {
    display: inline-flex;      /* inline-block 대신 inline-flex */
    align-items: center;
}
.input-id label a {font-size: 1.4rem; color: #FD5E62;}

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

.sing_input .Logbtn {
    font-size: 1.6rem;
    padding: 1.5rem;
    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 {
  display: block;
  margin: 0 auto 2rem;
}
.main_ad_banner-1 img:last-child {
  margin-bottom: 0rem;
}
/* 메인광고배너2 */
.main_ad_banner-1.banner-2 img {
  margin-bottom: 1rem;
}

.main_ad_banner-2 .bottom-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* 이벤트 판촉사랑 섹션 */
.event-supply {
  display: flex;
  flex-direction: column;
}

.event-supply .event-main {
  width: 100%;
}

.event-supply .event-main img {
  width: 100%;
  height: auto;
  display: block;
}

.event-supply .event-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.event-supply .event-sub-item {
  width: 100%;
}

.event-supply .event-sub-item a {
  display: block;
  width: 100%;
}

.event-supply .event-sub-item img {
  width: 100%;
  height: auto;
  display: block;
}

.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.4rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  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;
  max-height: 500px;

  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;
  min-height: 0;
}

/* 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: 1rem;
  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 {
    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;
}
/* 고객센터 */
.contact-section {
  display: flex;
  padding: 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  border-radius: 1rem;
  border: 1px solid #DDD;
  background: #F9F8F7;
}
.contact-box,
.account-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}

.contact-title {
  font-size: 2.4rem;
  font-weight: 700;
}
.contact-title span {
  color: #e60012;
  font-size: 2.4rem;
}

.contact-time {
  font-size: 1.6rem;
  line-height: 1.5;
}
.contact-time strong{
  overflow: hidden;
  color: #333;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 120%; /* 1.92rem */
}
.contact-time span {
  overflow: hidden;
  color: #333;
  font-size: 1.4rem;
  line-height: 120%; 
}
.contact-time .holiday {
  color: #aaa;
  margin-top: 4px;
}

.contact-btn {
display: flex;
padding: 1.5rem 0;
justify-content: center;
align-items: center;
gap: 0.4rem;
align-self: stretch;
border-radius: 1rem;
border: 1px solid #DDD;
background: #FFF;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
color: #333;
font-size: 1.6rem;
font-weight: 400;
line-height: 120%; /* 1.92rem */
}
.contact-btn:hover {
  background: #f7f7f7;
}
.contact-btn .arrow {
  font-size: 1.2rem;
}

.account-title {
  overflow: hidden;
  color: #333;
  font-feature-settings: 'dlig' on;
  text-overflow: ellipsis;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 120%; /* 2.88rem */
}
.account-title span {
  margin-left: 4rem;
  overflow: hidden;
  color: #999;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 120%; /* 1.92rem */
}
.account-title strong{
color: #333;
}
.account-list {
  list-style: none;
  padding: 0;
}
.account-list li {
  font-size: 1.6rem;
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.account-list li strong {
  min-width: 40px;
  font-weight: 600;
}
.account-list li span {
  color: #e60012;
  font-weight: 600;
}


/* FAQ */
#guide {padding: 2rem;}
#guide .guide__search form {
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  height: 4.8rem;
  padding: 0.6rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
#guide .guide__search input { flex: 1; border: none; outline: none; font-size: 1.4rem;}

#guide .guide__contact {
  display: flex;
  height: 5.4rem;
  padding: 1.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  border-radius: 0.8rem;
  margin-top: 1rem;
  background: #333;
  }
#guide .guide__contact span{
  color: #FFF;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 100%; /* 1.3rem */
}
#guide .guide__kakao {
  display: flex;
  height: 5.4rem;
  padding: 1.5rem 2rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-radius: 0.8rem;
  margin-top: 1rem;
background: #FEE500;
}
#guide .kakao-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
#guide .kakao-inner > p{
  color: #000;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 100%; /* 1.3rem */
  display: flex;
  align-items: center;
  gap: .4rem;
}
#guide .contact-right{
  color: #ED1B23;
  text-align: right;
  font-size: 2rem;
  font-weight: 700;
  line-height: 100%; /* 2rem */
}
#guide .btn-kakao{
  color: #000;
  text-align: right;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%; /* 1.6rem */
}
#guide .contact-left{display: flex;align-items: center;}
#guide .category-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr); margin-top: 2rem;
}
#guide .category-list .item { text-align: center; 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0;
  aspect-ratio: 1/1;
  border: 1px solid #DDD;
background: #F9F8F7;
height: 6.8rem;
}
#guide .guide__category .title{
  color: #333;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 130%; /* 1.95rem */
  letter-spacing: -0.06rem;
  margin: 2rem 0;
}
#guide .guide__category .title strong{color: #ED1B23; font-weight: 700;}
#guide .faq-list { margin-top: 2rem; border-top: 1px solid #eee; }
#guide .faq-item { border-bottom: 1px solid #eee; }
#guide .faq-item a { display: block; padding: 1.2rem 0; color: #333;font-size: 1.3rem;line-height: 1.5; letter-spacing: -.5px;}
#guide .faq-item .q { margin-right: 0.5rem; color: #ff4747; }

#guide .more { text-align: center; margin-top: 1.5rem; }
#guide .more a{display: flex;align-items: center;justify-content: center; gap: 0.4rem;color: #999;
font-size: 1.4rem;
font-weight: 400;
line-height: 100%; /* 1.4rem */}
/* 인쇄시안 */
.section-desc{
  color: #999;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 100%; /* 1.4rem */
}
/* 인쇄 시안 섹션 */
.print-preview {
  padding: 1rem 0rem;
  border-top: 1px solid #eee;
}

.print-preview .section-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.print-preview .section-title .red {
  color: #e60023; /* 포인트 레드 */
}


.print-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid #f0f0f0;
  margin: 0;
  margin-top: 1rem;
}

.print-item {
  padding: 1.6rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.print-item .info-top {
  font-size: 1.3rem;
  color: #999;
  margin-bottom: 0.4rem;
}

.print-item .info-top .date {
  color: #999;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 100%; /* 1.1rem */
  letter-spacing: -0.0165rem;
}

.print-item .title {
font-size: 1.4rem;
font-weight: 600;
line-height: 150%; /* 2.1rem */
}

.print-item .desc {
color: #333;
font-size: 1.4rem;
font-weight: 400;
line-height: 130%; /* 1.82rem */
letter-spacing: -0.056rem;
}
/* 찜 */
/* 전체 페이지 */
.wishlist-page {
    padding: 2rem 1.6rem 9rem;
    background: #fff;
}

/* 섹션 헤더 */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.mb0{margin-bottom: 0 !important}
.sec-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.sec-total {
  color: #222;
  font-size: 1.5rem;
}
.sec-total b {
  color: #111;
}

/* 찜한 상품 리스트 */
.wish-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wish-item {
  border-top: 1px solid #eaeaea;
  padding: 1.6rem 0;
  border-bottom: 1px solid #DDD;

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

.wish-card {
  display: grid;
  grid-template-columns: 9.6rem 1fr;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}

/* 상품 이미지 */
.wish-card .thumb {
  display: block;
  width: 9.6rem;
  height: 9.6rem;
  overflow: hidden;
  border: 1px solid #eaeaea;
  background: #f7f7f7;
}
.wish-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 오른쪽 내용 */
.wish-card .cont {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.wish-card .name {
color: #333;
font-size: 1.4rem;
font-weight: 600;
line-height: 150%; /* 2.1rem */
}

/* 상품 코드, 수량 */
.meta {

}
.meta dt {
color: #999;
font-size: 1.2rem;
font-weight: 400;
line-height: 100%; /* 1.2rem */
}
.meta dd {
color: #333;
font-size: 1.2rem;
font-weight: 400;
line-height: 150%; /* 1.8rem */
letter-spacing: -0.0165rem;
}
.meta > div {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* 가격 */
.price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.4rem;
align-self: stretch;
}
.price-row .label {
  color: #333;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 120%; /* 1.68rem */
}
.price {
  color: #e60023;
  font-size: 1.9rem;
  font-weight: 800;
}
.price .won {
  font-size: 1.6rem;
  margin-left: .1rem;
}

/* 버튼 영역 */
.btn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  width: 100%;
}
.btn-bl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.4rem;
  border-radius: 10rem;
  font-size: 1.4rem;
  font-weight: 700;
  box-sizing: border-box;
}
.btn-outline-bl {
  display: flex;
  padding: 0.4rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  border-radius: 0.5rem;
  border: 1px solid #57AEFF;
  color: #57AEFF;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 100%; /* 1.2rem */
}
.btn-ghost {
  border-radius: 0.5rem;
  border: 1px solid #DDD;
  padding: 0 1.2rem;
  color: #999;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 100%; /* 1.2rem */
  display: flex;
  padding: 0.4rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

/* 더보기 버튼 */
.more-wrap {
  display: flex;
  justify-content: center;
  padding: 1.8rem 0 2.2rem;
}
.btn-more {
  font-size: 1.6rem;
  font-weight: 700;
  color: #333;
  background: none;
  border: none;
    display: flex;
  justify-content: center;
}
.btn-more .chev {
  display: inline-block;
  width: .9rem;
  height: .9rem;
  border-right: 2px solid #777;
  border-bottom: 2px solid #777;
  transform: rotate(45deg);
  margin-left: .4rem;
}
.btn-more.sm{
  color: #999;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 100%; /* 1.4rem */
}
/* 유의사항 박스 */
.notice-box {
  border: 1px solid #eaeaea;
  background: #fafafa;
  border-radius: .8rem;
  padding: 1.4rem 1.6rem;
}
.notice-box .ico {
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid #e60023;
  color: #e60023;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-box .ttl {
  color: #ED1B23;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 120%; /* 1.68rem */
}
.notice-box p {
color: #999;
font-size: 1.2rem;
font-weight: 500;
line-height: 140%; /* 1.68rem */
margin-top: 1rem;
}
.notice-top{display: flex; gap: 0.4rem; align-items: center;}

/* 주문조회 */
/* 주문 배송 조회 헤더 영역 */
/* 헤더 전체 */
.order-header {
  background: #fff;
  display: flex;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.order__sb{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.order-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.order-title .red {
  color: #e60023;
}

.order-desc {
color: #999;
font-size: 1.4rem;
font-weight: 400;
line-height: 100%; /* 1.4rem */
}

/* ✅ Select 디자인 */
.order-filter {
  display: flex;
  justify-content: flex-end;
}

.filter-select {
  appearance: none; /* iOS & Chrome 기본 화살표 제거 */
  -webkit-appearance: none;
  -moz-appearance: none;
display: flex;
height: 3.2rem;
padding: 0.8rem 2.4rem .8rem 1.2rem;
justify-content: space-between;
align-items: center;
color: #999;
font-size: 1.2rem;
font-weight: 400;
line-height: 100%; /* 1.2rem */
border-radius: 0.8rem;
border: 1px solid #DDD;
background: #FFF;
  position: relative;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 9.31638L4.07511 6.08305C4.04348 6.05643 4.00593 6.03538 3.96463 6.02113C3.92333 6.00687 3.8791 5.9997 3.8345 6.00001C3.7899 6.00032 3.74582 6.00812 3.70481 6.02295C3.66379 6.03779 3.62666 6.05936 3.59556 6.08642C3.56445 6.11348 3.54 6.1455 3.52361 6.18061C3.50722 6.21573 3.49921 6.25325 3.50006 6.291C3.50091 6.32875 3.51059 6.36599 3.52855 6.40055C3.54651 6.43511 3.57239 6.46631 3.60468 6.49235L7.76479 9.91911C7.82776 9.97098 7.91214 10 8 10C8.08786 10 8.17224 9.97098 8.23521 9.91911L12.3953 6.49235C12.4276 6.46631 12.4535 6.43511 12.4714 6.40055C12.4894 6.36599 12.4991 6.32875 12.4999 6.291C12.5008 6.25325 12.4928 6.21573 12.4764 6.18061C12.46 6.1455 12.4355 6.11348 12.4044 6.08642C12.3733 6.05936 12.3362 6.03779 12.2952 6.02295C12.2542 6.00812 12.2101 6.00032 12.1655 6.00001C12.1209 5.9997 12.0767 6.00687 12.0354 6.02113C11.9941 6.03538 11.9565 6.05643 11.9249 6.08305L8 9.31638Z' fill='%23999999' stroke='%23999999' stroke-width='0.5'/%3E%3C/svg%3E");


  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

/* 필터 버튼 */
.order-filter {
  display: flex;
  justify-content: flex-end;
}

.filter-btn {
  background: #fff;
  font-size: 1.5rem;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 2rem;
  padding: 0.6rem 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.filter-btn .arrow {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(45deg);
  margin-top: 0.2rem;
}


/* 날짜 그룹 헤더 */
.group-head{
  display: flex;
  height: 3.7rem;
  padding: 0.8rem 2rem 1.2rem 2rem;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid #DDD;  
  border-top: 1px solid #DDD;  
  background: #F5F5F5;
}
.group-date{color: #333;
font-size: 1.4rem;
font-weight: 600;
line-height: 100%; /* 1.4rem */}
.group-more{
  color: #999;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 100%; /* 1.3rem */
  letter-spacing: -0.065rem;
  display: flex;
  align-items: center;
}
.group-more .chev{

}

/* 리스트 */
.order-list{ list-style:none; margin:0; padding:0; }
.order-item{
  display:grid; grid-template-columns: 9.6rem 1fr;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
.order-item:last-child{ border-bottom:none; }

/* 썸네일 */
.thumb{ display:block; width:9.6rem; height:9.6rem; border-radius:8px; overflow:hidden; border:1px solid #eee; background:#f7f7f7; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 오른쪽 */
.info{ display:flex; flex-direction:column; gap:.6rem; }

/* 상단 라인: 상태 + 칩버튼 */
.row-top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.status{ color: #ED1B23;
font-size: 1.2rem;
font-weight: 500;
line-height: 100%; /* 1.2rem */ }
.status-cancel{ color:#e60023; } /* 취소완료도 레드 */
.chips{ display:flex; gap:.6rem; }
.chip{
  display: flex;
  height: 2rem;
  padding: 0.4rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #DDD;
  color: #999;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 100%; /* 1.2rem */
}
.chip-disabled{ opacity:.45; }

/* 상품명 */
.order-list .name{
  color: #333;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 150%; /* 2.1rem */
}

/* 메타 */
.meta{ display:flex; gap:1.2rem; }
.meta > div{ display:flex; align-items:center; }
.meta dt{ color: #999;
font-size: 1.2rem;
font-weight: 400;
line-height: 100%; /* 1.2rem */}
.meta dd{ color: #999;
font-size: 1.2rem;
font-weight: 400;
line-height: 100%; /* 1.2rem */}

/* 가격 */
.price{ margin-top:.2rem; color:#e60023; font-size:1.9rem; font-weight:800; }
.price .won{ font-size:1.6rem; margin-left:.1rem; }

/* 터치 영역 보정(선택) */
.order-item a, .chip{ -webkit-tap-highlight-color: rgba(0,0,0,0); }
/* 주문 상세 */
/* 전체 컨테이너 */
#order-detail {
  padding: 2rem 0rem 8rem;
  background: #fff;
  font-size: 1.4rem;
  color: #111;
  line-height: 1.4;
}
/* 카드 공통 */
#order-detail .card {
  display: flex;
  padding: 1.5rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  border-top: 1px solid #DDD;
  background: #FFF;
}
#order-detail .od-shipping.card{
  display: flex;
  padding: 1.5rem 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  background: #F5F5F5;
}
#order-detail .card-tit {
  color: #333;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%; /* 1.6rem */
  text-align: left;
}
.border__line{ width: 100%; height: 1px; border-top: 1px solid #DDD;}
/* 스크린리더 전용 숨김 */
#order-detail .sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----------------------
   주문 상단 정보
----------------------- */
#order-detail .od-summary {
  margin-bottom: 1rem;
}

#order-detail .od-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#order-detail .od-orderno {
  font-size: 1.8rem;
  font-weight: 700;
}
#order-detail .od-orderno b {
  color: #e60023;
}

#order-detail .od-desc {
  font-size: 1.3rem;
  color: #888;
  margin: 0.5rem 0 1.2rem;
}

/* 상태 선택 셀렉트 */
#order-detail .od-filter select {
  border: 1px solid #ddd;
  border-radius: 2rem;
  padding: 0.4rem 1rem;
  font-size: 1.3rem;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1rem;
}

/* 담당자 정보 */
#order-detail .od-manager {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.4rem;
}

#order-detail .od-badge {
  background: #f5f5f5;
  padding: 0.2rem 0.8rem;
  border-radius: 1.2rem;
  font-weight: 700;
}

#order-detail .od-manager__tel {
  color: #666;
  text-decoration: none;
}

/* ----------------------
   Key-Value Layout
----------------------- */
#order-detail .kv {
  display: flex;
  padding: 1.5rem 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  background: #FFF;
  width: 100%;
}
#order-detail .kv-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
#order-detail .kv-row dt {
  flex: 0 0 7rem;
  color: #888;
}
#order-detail .kv-row dd {
  flex: 1;
  margin: 0;
  color: #333;
}

/* ----------------------
   인쇄 시안 진행바
----------------------- */
#order-detail .stepbar {
  width: 100%;
  height: 1rem;
  flex-shrink: 0;
  border-radius: 9.9rem;
  background: #DDD;
  overflow: hidden;
}
#order-detail .stepbar__fill {
  height: 100%;
  background: #e60023;
  transition: width .4s;
  border-radius: 9.9rem;
}
#order-detail .steplist {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  font-size: 1.3rem;
  width: 100%;
}
#order-detail .steplist li {
  text-align: center;
}
#order-detail .steplist li.done {
  color: #e60023;
}
#order-detail .steplist li.active {
  color: #e60023;
  font-weight: 700;
}

/* ----------------------
   증빙자료 (라디오 영역)
----------------------- */
#order-detail .od-proof__type {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.4rem;
  margin-bottom: 1.6rem;
  border: none;
}
#order-detail .od-proof__type .radio {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ----------------------
   입력 폼
----------------------- */
.od-form.grid{
  display: flex;
  padding: 1.5rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid #DDD;
  background: #F5F5F5;
  width: 100%;
}
#order-detail .grid .frow {
  display: flex;
  align-items: center;
  gap: .4rem;
  align-self: stretch;
  width: 100%;
  flex-wrap: wrap;
}

#order-detail .grid .frow label {
  display: -webkit-box;
  min-width: 9rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: left;
}
#order-detail .grid .frow input[type="date"]{
  width: 100%;
  max-width: 12rem;
}
#order-detail .grid .frow .MYP-06-radio{
  min-width: auto;
  margin-right: 0;
}
#order-detail input[type="text"],
#order-detail input[type="email"],
#order-detail input[type="date"],
#order-detail select {
  height: 3.2rem;
  padding: 0.8rem 1.5rem;
  align-items: center;
  font-size: 1.4rem;
  border-radius: 0.8rem;
  border: 1px solid #DDD;
  background: #FFF;
  width: 100%;
  max-width: 20rem;
}

/* 이메일 입력 묶음 */
#order-detail .email-wrap {
  display: flex;
  align-items: center;
  gap: .4rem;
}
#order-detail .email-wrap input {
  flex: 1;
}
#order-detail .email-wrap .at {
  padding: 0 .3rem;
  color: #666;
}

/* 파일 첨부 */
#order-detail .fileline , #order-detail .d-flex{
  display: flex;
  align-items: center;
  gap: .4rem;
}
#order-detail .fileline input[type="file"] {
  flex: 1;
}
#order-detail .btn-sub {
  display: flex;
  height: 2rem;
  padding: 0.4rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #DDD !important;
  color: #999;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 100%; /* 1.2rem */
}
.input-file input{display: none;}
.input-file button{
  display: flex;
  width: 8rem;
  padding: 0.8rem 0;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  border-radius: 0.8rem;
  background: #DDD;
  color: #999;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 100%; /* 1.2rem */
}

/* 안내 텍스트 */
#order-detail .help {
  font-size: 1.2rem;
  color: #888;
}
#order-detail .warn {
  font-size: 1.2rem;
  color: #e60023;
  text-align: left;
}

/* ----------------------
   하단 버튼
----------------------- */
#order-detail .od-bottom {
  padding: 0 2rem;
}
#order-detail .od-bottom__row{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
#order-detail .btn-ghost {
  display: flex;
  height: 3.4rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
  border-radius: 3rem;
  background: #DDD;
  color: #999;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 100%; /* 1.4rem */
}
#order-detail .btn-ghost-wh {
  display: flex;
  height: 3.4rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex: 1 0 0;
  border-radius: 3rem;
  background: #8B8B8B;
  color: #FFF;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 100%; /* 1.4rem */
}
#order-detail .btn-line {
  display: block;
  width: 100%;
  border: 1px solid #e60023;
  background: #fff;
  color: #e60023;
  border-radius: 6rem;
  padding: 1rem;
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

#order-detail .btn-primary {
  width: 100%;
  background: #e60023;
  color: #fff;
  border: none;
  border-radius: .6rem;
  padding: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  height: 4rem;
  border-radius: 99px;
  
}
#order-detail .od-submit {
  margin-top: 1rem;
}

/* 상품평 */
#review-write {
  padding: 0px 2rem 8rem;
}
#review-write .card{

}
#review-write .section-title{ font-size:20px; font-weight:800; color:#ED1B23; margin:6px 0 12px; }
#review-write .desc{ color:#777; font-size:14px; }
#review-write .kv{ display:grid; gap:8px; }
#review-write .kv-row{ display:flex; gap:12px; }
#review-write .kv-row dt{ width:84px; color:#777; font-size:14px; }
#review-write .kv-row dd{ flex:1; font-size:14px; }

#review-write .notice{
  display: flex;
  padding: 1.5rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
  border: 1px solid #DDD;
  background: #F5F5F5;
  font-size: 1.4rem;

}
#review-write .notice .tit{
  color: #333;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 120%; /* 1.68rem */
}
#review-write .notice ul{
  color: #F36;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 140%; /* 1.68rem */
}

#review-write .prd { display:flex; gap:12px; align-items:flex-start; }
/* #review-write .thumb{ width:70px; height:70px; overflow:hidden; border-radius:8px; flex:0 0 70px; background:#f2f2f2; } */
#review-write .thumb img{ width:100%; height:100%; object-fit:cover; }
#review-write .prd-body{ flex:1; }
/* #review-write .chip{ display:inline-block; font-size:12px; color:#ED1B23; margin-bottom:4px; } */
#review-write .badge{ margin-left:auto; border:1px solid #ddd; border-radius:999px; padding:2px 8px; color:#999; font-size:12px; }
#review-write .prd-top{ display:flex; align-items:center; gap:8px; }
#review-write .prd-title{ font-weight:700; color:#111; line-height:1.4; }
#review-write .prd-meta{ color:#9aa0a6; font-size:12px; margin-top:4px; }
#review-write .prd-price{ color:#ED1B23; font-weight:800; }
#review-write .order-item {
  display: grid;
  grid-template-columns: 9.6rem 1fr;
  padding: 0rem;
  padding-bottom: 2rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;

}
#review-write .field{ display:grid; gap:8px; margin-top:16px; }
#review-write label{
  color: #333;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 100%; /* 1.4rem */
  letter-spacing: -0.0165rem;
}
#review-write input[type="text"],
#review-write input[type="email"],
#review-write input[type="date"],
#review-write textarea{
  width:100%; border:1px solid #e5e5e5; border-radius:8px; padding:12px; font-size:14px; background:#fff;
}
#review-write textarea{ min-height:120px; resize:vertical; }

#review-write .radio-row{ display:flex; gap:16px; align-items:center; }
#review-write .radio{ display:inline-flex; gap:6px; align-items:center; font-size:14px; }
#review-write .fileline{ display:flex; gap:4px; }
#review-write .btn-file{ white-space:nowrap; border-radius:8px; padding:0 14px; border:0; background:#ED1B23; color:#fff; height:44px;
  color: #FFF;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 100%; /* 1.2rem */}
#review-write .btn-file:disabled{ background:#ccc; }
#review-write .fileline input[type="text"]{ flex:1; }

#review-write .rate-wrap{ padding:16px 0 0; }
#review-write .rate-title{
  color: #333;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 100%; /* 1.6rem */
}
#review-write .rate-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
#review-write .rate-row .label{width: 8rem;
  color: #333;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 100%; /* 1.4rem */
  letter-spacing: -0.0165rem;
}
#review-write .stars{ display:flex; gap:6px; }
#review-write .star { width:28px; height:28px; position:relative; cursor:pointer; }
#review-write .star input{ position:absolute; inset:0; opacity:0; }
#review-write .star svg{ width:28px; height:28px; display:block; }
#review-write .star svg .fill{ fill:#FFD054; }
#review-write .star svg .line{ stroke:#F0B84F; }
#review-write .stars.readonly .star{ pointer-events:auto; } /* keep clickable */

#review-write details{
  width: 100%;
}
#review-write summary{ list-style: none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; font-size: 1.6rem; font-weight:700}
#review-write summary::after{ content:"▾"; color:#999; }
#review-write details[open] summary::after{ content:"▴"; }
#review-write .terms{ margin-top:16px; font-size:13px; max-height:180px; overflow:auto; }

#review-write .agree-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  padding: 2rem 0;
}
#review-write .agree-wrap span{
font-size: 1.4rem;
font-weight: 600;
line-height: 140%; /* 1.96rem */
}
#review-write .agree-wrap .radio{ font-size:14px; }
#review-write .radio_wrap{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
#review-write .radio_wrap .MYP-06-radio{
  margin-right: 0;
}
#review-write .btn-primary{ width:100%; height:52px; border-radius:999px; background:#ED1B23; color: #FFF;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.0165rem;}
#review-write .btn-primary:disabled{ background:#ccc; }
#review-write .acco-card{
  display: flex;
  padding: 1.5rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
  border: 1px solid #DDD;
  background: #F5F5F5;
}
/* section spacing */
#review-write .gap16{ height:16px; }
#review-write .hr{ height:10px; }

/* 별점 */
/* === Stars: checkbox version (scoped) === */
#review-write .stars.stars--checkbox{
  display:flex; gap:6px; align-items:center;
}
#review-write .stars.stars--checkbox .star{
  display:inline-flex; width:28px; height:27px; cursor:pointer;
}
#review-write .stars.stars--checkbox .star input{
  position:absolute; opacity:0; pointer-events:none;
}
#review-write .stars.stars--checkbox .star .star-box{
  width:28px; height:27px; display:block; background-repeat:no-repeat; background-size:contain;
  /* 기본: 회색(off) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="27" viewBox="0 0 28 27" fill="none"><path d="M12.2038 0.869333C12.9982 -0.289812 14.7088 -0.289813 15.5033 0.869332L19.0942 6.10895C19.3543 6.48841 19.7372 6.76662 20.1784 6.89669L26.2713 8.69275C27.6192 9.09008 28.1478 10.717 27.2909 11.8307L23.4174 16.8651C23.1368 17.2296 22.9906 17.6798 23.0032 18.1397L23.1778 24.4893C23.2165 25.894 21.8325 26.8995 20.5085 26.4287L14.5236 24.3004C14.0902 24.1463 13.6169 24.1463 13.1834 24.3004L7.19852 26.4287C5.8745 26.8995 4.49055 25.894 4.52918 24.4893L4.70382 18.1397C4.71647 17.6798 4.5702 17.2296 4.28968 16.8651L0.416173 11.8307C-0.440753 10.717 0.0878685 9.09008 1.43577 8.69275L7.5286 6.89669C7.96985 6.76662 8.35277 6.48841 8.61283 6.10895L12.2038 0.869333Z" fill="%23D9D9D9"/></svg>');
}
#review-write .stars.stars--checkbox .star input:checked + .star-box{
  /* 체크: 그라데이션(on) */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="27" viewBox="0 0 28 27" fill="none"><path d="M12.2038 0.869333C12.9982 -0.289812 14.7088 -0.289813 15.5033 0.869332L19.0942 6.10895C19.3543 6.48841 19.7372 6.76662 20.1784 6.89669L26.2713 8.69275C27.6192 9.09008 28.1478 10.717 27.2909 11.8307L23.4174 16.8651C23.1368 17.2296 22.9906 17.6798 23.0032 18.1397L23.1778 24.4893C23.2165 25.894 21.8325 26.8995 20.5085 26.4287L14.5236 24.3004C14.0902 24.1463 13.6169 24.1463 13.1834 24.3004L7.19852 26.4287C5.8745 26.8995 4.49055 25.894 4.52918 24.4893L4.70382 18.1397C4.71647 17.6798 4.5702 17.2296 4.28968 16.8651L0.416173 11.8307C-0.440753 10.717 0.0878685 9.09008 1.43577 8.69275L7.5286 6.89669C7.96985 6.76662 8.35277 6.48841 8.61283 6.10895L12.2038 0.869333Z" fill="url(%23paint0_linear_18142_2281)"/><defs><linearGradient id="paint0_linear_18142_2281" x1="13.8535" y1="-1.53784" x2="13.8535" y2="30.4622" gradientUnits="userSpaceOnUse"><stop stop-color="%23FFD74A"/><stop offset="1" stop-color="%23FFAB10"/></linearGradient></defs></svg>');
}

/* (선택 사항) 클릭 시 살짝 확대되는 피드백 */
#review-write .stars.stars--checkbox .star:active .star-box{
  transform:scale(0.96);
}

#agreeBtn {
    border: 1px solid #3f3f3f;
    padding: 4px;
    border-radius: 5px;
    font-size: 12px;
    background: #f44336;
    color: #FFFFFF;
}
/* ===== Top ��ư (��ũ�� �� ǥ��) ===== */
.scroll-top-btn {
  position: fixed;
  right: 20px;
  bottom: 80px; /* bottomBar(60px)���� �� */
  width: 50px;
  height: 50px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.scroll-top-btn.show {
  display: flex;
}

.scroll-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.scroll-top-btn img {
  width: 24px;
  height: 24px;
}
.no-data {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}