.product-detail-page-container {
    /* 전체 컨테이너 스타일 필요하면 */



  }
  
  .product-detail-layout {
    display: flex;
    margin: 0 auto; 
  }
  
 
.product-main-content {
  flex-grow: 1;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
  background-color: #fff;
  max-width: 1100px;
}

  
  .breadcrumb {
    font-size: 13px;
    color: #868e96;
    margin-bottom: 10px;
    text-align: left;
  }
  
  .product-info-container {
    display: flex;
    gap: 60px; 
  }
  
  .product-image-section {
    width: 530px; 
    /* 이미지 슬라이더나 큰 이미지 하나가 들어갈 수 있음 */
  }
  
  .product-image-placeholder {
    width: 530px;
    height: 500px;
    background-color: #e9ecef;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    /* 실제로는 <img> 태그 사용 */
  }
  
  .product-details-section {
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  
  .product-title {
    font-size: 24px; 
    font-weight: 700; 
    margin-bottom: 8px;
    color: #212529;
  }
  
  .product-location{
  }

  .product-meta-info {
    font-size: 14px;
    color: #868e96;
    margin-bottom: 15px;
  }
  
  .product-price {
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
  }
  
  .product-description {
    font-size: 15px;
    line-height: 1.7; /* 줄 간격 늘림 */
    color: #495057;
    margin-bottom: 25px;
    white-space: pre-line; 
    min-height:15rem;
  }
  
  .product-seller-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  
  .seller-avatar-placeholder {
    width: 40px;
    height: 40px;
    background-color: #ced4da;
    border-radius: 50%;
    margin-right: 12px;
  }
  
  .seller-name {
    font-weight: 500;
    font-size: 15px;
    color: #333;
  }

  /* Trust Gauge 스타일 */
  .seller-trust-gauge { 
    margin-left: auto; 
    font-size: 13px;
    color: #007bff; 
    font-weight: 500;
  }
  
  .chat-button {
    width: 100%; 
    padding: 12px 20px;
    background-color: #845EF7; 
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .chat-button:hover {
    background-color: #7148e4; /* 호버 시 약간 어둡게 */
  }
  
  .product-map-container {
    width: 100%;
    height: 300px; 
    background-color: #e9ecef; 
    border-radius: 8px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
  }
  
  .trade-location-title {
    font-weight: 500;

    margin-top: 30px; /* 위쪽 여백 추가 */
    color: #333;
  }


  /* 경매 페이지*/
  .auction-container {
    width: 510px;
    margin: 0 auto;
    font-family: sans-serif;
  }
  
  .price-display-area {
    border: 1px solid #D9D9D9;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
  }
  
  .price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: bold;
    align-items: center;
  }
  
  .price-row:last-of-type {
      margin-bottom: 0;
  }
  
  
  .current-bid {
    color: #ff0000;
  }
  
  .separator {
    border: none;
    border-top: 0.5px solid #d3cce3;
    margin: 15px 0;
  }
  
  .bid-input-area {
    display: flex;
    align-items: center; 
    border: 1px solid #d3cce3; 
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    transition: border-color 0.2s ease-in-out;
  }

  .bid-input-area:focus-within {
    border-color: #673AB7; 
  }
  
  .bid-input-label {
      margin-right: 10px;
      white-space: nowrap;
  }
  
  .bid-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 1rem;
  }
  
  
  .buttons-area {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  
  .buttons-area button {
    width: 240px;
    padding: 15px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.2s ease;
  }
  
  .bid-button {
    background-color: #8F8F8F;
    color: #ffffff;
  }
  
  .contact-button {
    background-color: #673AB7;
    color: #ffffff;
  }
  
  .buttons-area button:hover {
      opacity: 0.9;
  }

  /* 이미지 슬라이더 컨테이너 */
  .image-slider-container {
    width: 100%;
    height: 500px; /* 대표 이미지 영역의 높이와 동일하게 설정 */
    position: relative;
    overflow: hidden; /* 영역 밖으로 나간 이미지 숨김 */
    border-radius: 15px;
    background-color: #f0f0f0;
  }

  /* 모든 이미지를 가로로 나열하는 wrapper */
  .slider-images {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* 부드러운 슬라이드 효과 */
  }

  /* 개별 이미지 컨테이너 */
  .slider-image {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
  }

  .slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 좌/우 버튼 */
  .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
  }

  .prev-btn {
    left: 10px;
  }

  .next-btn {
    right: 10px;
  }

  /* 이미지 카운터 */
  .image-counter {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 14px;
  }



  /* 판매자 프로필 (사진 + 닉네임) */
  .seller-profile {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .seller-avatar-placeholder {
    width: 50px;
    height: 50px;
    background-color: #ced4da;
    border-radius: 50%;
    overflow: hidden; /* 이미지가 원을 벗어나지 않도록 */
  }

  .seller-avatar-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .seller-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
  }

  /* 신뢰도 게이지 */
  .trust-gauge-container {
    width: 150px; /* 게이지 너비 고정 */
  }

  .trust-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
  }

  .trust-percent {
    color: #673AB7; /* 보라색 포인트 */
    font-weight: bold;
  }

  .trust-bar {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
  }

  .trust-fill {
    height: 100%;
    background: linear-gradient(to right, #DAD9F4, #B57EDC);
    border-radius: 4px;
    transition: width 0.5s ease-in-out;
  }

.action-buttons-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.sellerChatBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 55px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  border: 2px solid #673AB7 !important;
  background-color: #673AB7 !important;
  color: white !important;
}

.sellerChatBtn:hover {
  background-color: white !important;
  color: #673AB7 !important;
}

.product-actions {
  display: flex;
  width: 100%;
  gap: 10px;
}

.action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-decoration: none;
  border: 2px solid #d5c8e1;
  background-color: #f5f5f5;
  color: #737373;
}

.action-btn:hover {
  border: 2px solid #673AB7;
  background-color: white;
  color: #673AB7;
}
.btn-delete:hover {
  border: 2px solid #ff0000;
  background-color: white;
  color: #ff0000;
}

.chat-wish-wrapper {
  display: flex;
  width: 100%;
  gap: 10px;
}


.sellerChatBtn {
  flex-grow: 1;
}


/* 위시리스트 버튼 */
.wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 55px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;

  background-color: white;
  border: 2px solid #DEDEDE;
}

.wishlist-btn svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
  transition: all 0.2s ease;

  fill: white;
  stroke: #DEDEDE;
}

.wishlist-btn:hover {
  border-color: #ffffff;
  background-color: #ffdada;
}
.wishlist-btn:hover svg {
  stroke: #ffffff;
}


.wishlist-btn.active {
  background-color: #E46363;
  border-color: #E46363;
}

.wishlist-btn.active svg {
  fill: white;
  stroke: white;
}

.sellProduct{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 530px;
  height: 55px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  border: 2px solid #673AB7 !important;
  background-color: #673AB7 !important;
  color: white !important;
  background-color: white !important;
  color: #673AB7 !important;
}

.report-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #666;
  font-size: 15px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.report-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform 0.25s ease, color 0.25s ease;
}

/* 호버 시 강조 효과 */
.report-btn:hover {
  color: #ff4b4b;
  border-color: #ff4b4b;
  background-color: #fff0f0;
  transform: translateY(-1px);
}

.report-btn:hover svg {
  transform: scale(1.1);
}

/* 모달 전체 배경 */
.report-modal-overlay {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px); /* 배경 블러 처리 */
}

/* 모달 컨텐츠 박스 */
.report-modal-content {
    background: #fff;
    width: 100%;
    max-width: 420px;
    padding: 70px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.report-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.report-modal-header h3 { font-size: 20px; font-weight: 700; margin: 0; }

.report-close-modal {
    background: none; border: none; font-size: 28px; color: #999; cursor: pointer;
}

.report-guide { font-size: 13px; color: #777; margin-bottom: 20px; }

/* 라디오 버튼 스타일링 */
.report-reasons { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.reason-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.reason-item:hover { background-color: #f9f9f9; }

.reason-item input[type="radio"] {
    accent-color: #FF4D4F; /* 라디오 버튼 포인트 컬러 */
    width: 18px; height: 18px;
}

/* 텍스트 영역 */
#reportDetail {
    width: 100%; height: 100px;
    padding: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    resize: none;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 20px;
}

#reportDetail:focus { outline: none; border-color: #FF4D4F; }

/* 하단 버튼 */
.modal-footer { display: flex; gap: 10px; }

.btn-cancel, .btn-submit {
    flex: 1; padding: 14px; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s;
}

.btn-cancel { background: #f0f0f0; color: #666; }
.btn-submit { background: #FF4D4F; color: #fff; }

.btn-cancel:hover { background: #e5e5e5; }
.btn-submit:hover { background: #E03E3E; transform: translateY(-1px); }

.small-text {
    margin-top: 10px;
    font-size: 13px;
    color: #777;
    background: #f5f5f5;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
    width: 250px;
}

.up-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;   /* 버튼이랑 텍스트 간격 */
}