/* -------------------------------------------------
  7) 장바구니 영역 (하단 40%)
------------------------------------------------- */
.cart-area {
  display: flex;
  flex-direction: column;
  background-color: #F5F5F5;
  border-top: 2px solid #D0D3D6;
  padding: 20px 24px;
  overflow: hidden;
  min-height: 370px ; /*!important;*/
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}


/* 배지 자체 */
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: #FF9800; /* 주황색 (#FF9800) */
  color: #FFFFFF;            /* 글자 흰색 */

  font-size: 1.2rem;
  font-weight: 700;

  width: 48px;               /* 원형 너비 */
  height: 48px;              /* 원형 높이 */
  border-radius: 50%;        /* 완전 원형 */
  margin-left: 8px;          /* ‘장바구니’ 텍스트와 간격 */
  line-height: 1;            /* 텍스트가 중앙에 오도록 */
  pointer-events: none;      /* 클릭 이벤트가 배지에 먹히지 않도록 */
}

/* 배지 값이 두 자리 이상일 때(예: 10 이상) 너비를 조금 늘리려면 */
.cart-badge[data-count="10"] {
  width: 56px;
}
.cart-badge[data-count="100"] {
  width: 64px;
}

.cart-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #212121;
}

.cart-controls {
  display: flex;
}

.cart-icon-btn {
  background-color: #F0F2F5;
  border: 2px solid #D0D3D6;
  color: #212121;
  font-size: 1.4rem;
  margin-left: 16px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 28px;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
  padding: 8px;
}

.cart-icon-btn:hover,
.cart-icon-btn:focus {
  background-color: #D0D3D6;
  border-color: #00796B; /* Teal 700 */
}

.cart-list {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  margin-bottom: 14px;
}

.cart-empty {
  text-align: center;
  color: #757575;
  font-size: 1.2rem;
  margin-top: 80px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #D0D3D6;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #212121;
  margin-bottom: 6px;
}

.item-price {
  font-size: 1.1rem;
  color: #616161;
}

/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-right: 14px;
}

.item-quantity button {
  background-color: #F0F2F5;
  border: 2px solid #D0D3D6;
  color: #212121;
  font-size: 2.0rem;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  margin: 0 8px;
  transition: background-color 0.2s, border-color 0.2s;
  cursor: pointer;
}

.item-quantity button:hover,
.item-quantity button:focus {
  background-color: #D0D3D6;
  border-color: #00796B; /* Teal 700 */
}

.item-quantity input {
  width: 64px;
  text-align: center;
  font-size: 1.2rem;
  border: 2px solid #CCCCCC;
  border-radius: 6px;
  padding: 0.4rem;
}

.remove-btn {
  background-color: #E53935; /* Red 600 */
  color: #F0F2F5;
  border: none;
  border-radius: 32px;
  padding: 0.6rem 1rem;
  font-size: 1.5rem;
  min-width: 100px;
  min-height: 56px;
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  margin-right: 24px;
}

.remove-btn:hover,
.remove-btn:focus {
  background-color: #C62828; /* Red 800 */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.cart-footer{
  display:inline-flex;
  justify-content:space-between;

  flex-wrap:nowrap;   /* ★ 행 절대 분리 금지 */
}

.cart-footer .cart-total,
.cart-footer button{   /* 필요 시 버튼 셀렉터 조정 */
  white-space:nowrap; /* ★ 텍스트 줄바꿈 금지 */
  min-width:0;        /* ★ 공간이 부족해도 한 줄 안에서 shrink */
  padding-bottom: 14px;
}

.cart-footer .cart-total {
  color: s;
}

/* 2) 금액 영역은 한 줄로 가로 전체를 차지 */
.cart-footer .cart-total .amount-wrapper {
  display: block;
  font-size: 1.4em;
  white-space: nowrap;        /* 금액+단위를 줄바꿈 방지 */
}

/* 3) 결제하기 버튼은 우측에 고정 */
.cart-footer .cart-btn-column {
  /* flex: none; 기본값 */
  margin-left: 1rem;          /* 금액과 간격 */
}

/* (선택) 모바일 축소 시 버튼 작게, 금액은 줄바꿈 방지 */
.cart-footer {
  flex-wrap: wrap;
}
.cart-footer .cart-btn-column {
  white-space: nowrap;
}


.cart-total {
  font-size: 2.0rem;
  font-weight: 700;
  color: #212121;
}

.checkout-btn {
  background-color: #00796B; /* Teal 700 */
  color: #F0F2F5;
  border: none;
  border-radius: 72px;
  padding: 0.75rem 1.5rem;
  font-size: 2.2rem;
  min-width: 200px;
  min-height: 80px;
  transition: background-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  align-self: center;
  margin-bottom: 14px;
}

.checkout-btn:hover,
.checkout-btn:focus {
  background-color: #004D40; /* Teal 900 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.cart-btn-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: end; 
}

/* 스크롤바 스타일 */
.cart-list::-webkit-scrollbar {
  width: 0.8rem;
}
.cart-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0.4rem;
}
.cart-list::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.08);
}
/* 상품 카드 안의 모든 후손 요소가 클릭을 가로채지 못하게 */
.product-item * {
  pointer-events: none;
}







/*───────────────────────────────────────────────
  주문 확인 모달  (90 vw, 가로 한 줄 리스트)
───────────────────────────────────────────────*/
.order-confirm-modal{
  position:fixed;inset:0;display:none;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);z-index:1000;
}
.order-confirm-modal.open{display:flex;}

.order-confirm-modal .modal-box{
  background:#FFF;border-radius:16px;
  width:90vw;
  padding:20px 24px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  text-align:center;
}

/* 제목 */
.order-confirm-modal .modal-title{
  margin:0 0 28px;font-size:3.4rem;font-weight:900;color:#004D40;
}

/* 리스트 */
.order-confirm-modal .modal-list{
  background-color: #F0F2F5;
  list-style:none;padding:8px 16px;margin:0 0 36px;max-height:420px;overflow-y:auto;
}
.order-confirm-modal .modal-item{
  display:flex;align-items:center;
  gap:24px;                             /* 항목 간 간격 */
  padding:18px 0;border-bottom:1px solid #E5E5E5;
  flex-wrap:nowrap;                     /* ★ 줄 바꿈 방지 */
}

/* 썸네일 */
.order-confirm-modal .thumb{
  width:80px ; /*!important;*/height:80px ; /*!important;*/               /* ★ 72 px로 줄임 */
  border-radius:10px;object-fit:cover;flex-shrink:0;
}

/* 설명(이름 + 수량) 전체 컨테이너 */
.order-confirm-modal .info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1 1 0;          /* 남은 공간 모두 차지 + 줄어들 수 있게 */
  min-width:0;         /* ★ flex 항목이 축소 가능하도록 */
}

/* 상품명 */
.order-confirm-modal .info .name{
  flex:1 1 0;          /* 유연 폭, 남는 만큼 사용 */
  min-width:0;         /* ★ 줄어들 여유 */
  font:700 1.9rem/1.3 "Pretendard", sans-serif;
  text-align:left;

  white-space:nowrap;          /* 줄바꿈 금지 */
  overflow:hidden;             /* 넘치면 잘림 */
  text-overflow:ellipsis;      /* 잘린 자리 … */
  color: #212121;
}

/* 수량 – 고정 폭 150px */
.order-confirm-modal .info .qty{
  flex:0 0 150px;      /* 고정 넓이 */
  font:600 1.5rem/1.3 "Pretendard", sans-serif;
  color:#666;
  text-align:right;
}

/* 소계 */
.order-confirm-modal .subtotal{
  flex-shrink:0;text-align:right;width:300px;
  font:700 2.2rem/1.2 "Pretendard",sans-serif;color:#212121;
  white-space:nowrap;
}

/* 총 합계 */
.order-confirm-modal .modal-total{
  font-size:2.4rem;margin-bottom:36px;color:#c0b7b7;
}
.order-confirm-modal .modal-total .amount{
  font-size:3.8rem;font-weight:900;color:crimson;text-shadow:0 0 4px rgba(0,0,0,.25);
}

/* 버튼 영역 */
.order-confirm-modal .actions{
  display:flex;gap:24px;
  position:sticky;bottom:0;background:#FFF;padding-top:28px;
  /* box-shadow:0 -6px 12px rgba(0,0,0,.12); */
}
.order-confirm-modal .btn{
  flex:1;padding:28px 0;font-size:2.2rem;font-weight:800;
  border:none;border-radius:12px;cursor:pointer;
  transition:.1s transform,.2s background-color;box-shadow:0 4px 8px rgba(0,0,0,.25);
}
.order-confirm-modal .btn:hover,
.order-confirm-modal .btn:focus{transform:scale(1.04);outline:4px solid #FFC107;}
.order-confirm-modal .btn.cancel {background:#9E9E9E;color:#FFF;}
.order-confirm-modal .btn.confirm{background:#00796B;color:#FFF;}
.order-confirm-modal .btn.confirm:hover{background:#004D40;}