<<<<<<< HEAD
/* ====== 푸터 ====== */
=======
/* 페이지 전체 기본 구조 (다른 페이지와 동일하게) */
html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}


main.cart-page {
  flex: 1;  /* 본문이 남는 공간 다 채움 */
}

/* === 푸터만 하단 고정 === */
>>>>>>> 5bdb02764fee832de8efe9b5966aae4a0736b77b
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
<<<<<<< HEAD
  border-top: 1px solid #ffffff;
  text-align: center;
  padding: 15px 0;
  z-index: 50;
}

/* ====== 카트 페이지 ====== */
.cart-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 180px; /* 하단 버튼 + 푸터 공간 확보 */
  box-sizing: border-box;
}

/* ====== 제목 ====== */
.cart-page h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 90px 30px 25px; /* 좌우 여백 살짝 늘림 */
}

/* ====== 상품 리스트 ====== */
#cartItems {
  flex: 1;
  overflow-y: auto;
  padding: 0 80px 40px; /* 양옆 여백 30px로 확장 */
  background: #fff;
  box-shadow: inset 0 1px 0 #eee, inset 0 -1px 0 #eee;
  border-radius: 8px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 10px; /* 이미지와 텍스트 간격 살짝 늘림 */
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

/* ====== 썸네일 크기 확대 ====== */
.cart-thumb {
  width: 100px; /* ✅ 기존 80px → 100px */
  height: 100px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #ddd;
}

/* ====== 상품 정보 ====== */
.cart-info p {
  margin: 5px 0;
  font-size: 15px;
  color: #333;
}
.cart-info p:first-child {
  font-weight: 600;
  color: #111;
}

/* ====== 합계 + 버튼 ====== */
.cart-summary {
  position: fixed;
  bottom: 70px;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid #f9f3f3;
  box-shadow: 0 -3px 15px rgba(0, 0, 0, 0.06);
  padding: 18px 30px 20px; /* 좌우 여백도 동일하게 */
  z-index: 80;
}

/* 합계 */
.cart-total {
  text-align: right;
  margin-right: 38px;  /* ← 지금보다 살짝 왼쪽 이동 */
  margin-top: 15px;
  font-weight: 500;
}

.cart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-right: 32px;  /* ← 총합계와 동일한 이동 거리 */
  margin-top: 8px;
}

.cart-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.cart-actions button:first-child {
  background: #e4e3e3;
}
.cart-actions button:first-child:hover {
  background: #e8e8e8;
}
.cart-actions button:last-child {
  background: #000;
  color: #fff;
}
.cart-actions button:last-child:hover {
  background: #222;
}

/* ====== 삭제 버튼 ====== */
.remove-btn {
  background: none;
  border: none;
  color: #777;
  font-size: 20px;
  margin-left: auto;
  cursor: pointer;
  transition: color 0.2s ease;
}
.remove-btn:hover {
  color: #e00;
}

/* ====== 스크롤바 ====== */
#cartItems::-webkit-scrollbar {
  width: 8px;
}
#cartItems::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
=======
  border-top: 1px solid #eee;
  padding: 15px 0;
  text-align: center;
  z-index: 100;
}

/* 본문이 푸터에 가려지지 않게 살짝 띄워줌 */
.cart-page {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 16px;
  }
  
  .cart-page h1 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 600;
  }
  
  .cart-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
  }
  
  .cart-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
  }
  
  .cart-info p {
    margin: 4px 0;
    font-size: 14px;
  }
  
  .cart-info p:first-child {
    font-weight: 500;
  }
  
  .cart-total {
    text-align: right;
    font-size: 18px;
    font-weight: 600;
    margin-top: 20px;
  }
  
  .cart-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
  
  .cart-actions button {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
  }
  
  .cart-actions button:first-child {
    background: #f0f0f0;
  }
  
  .cart-actions button:last-child {
    background: #000;
    color: #fff;
  }
  .cart-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid #eee;
    border-radius: 6px;
  }
  .remove-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
  }
  .remove-btn:hover {
    color: red;
  }
  .continue-btn {
    background: #f5f5f5;
    border: 1px solid #ccc;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  
  .continue-btn:hover {
    border: 2px solid #000;
    background: #fff;
    color: #000;
    transform: scale(1.05);
  }
  
  
>>>>>>> 5bdb02764fee832de8efe9b5966aae4a0736b77b