@font-face {
  font-family: "MangoByeolbyeol";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/2405-3@1.1/MangoByeolbyeol.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "TmoneyRoundWindExtraBold";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindExtraBold.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "SUITE-Regular";
  src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
}

/* bounce 애니메이션 정의 */
@keyframes bounce {
  0% {
    transform: translateY(0); /* 초기 위치 */
  }
  40% {
    transform: translateY(-9px); /* 위로 튀는 효과 */
  }
}

/* 아이콘 스타일 */
.icon-small {
  width: 60px;
  height: auto;
  cursor: pointer;
}
/* 로고 컨테이너 */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
/* 사이트 제목 */
.site-title {
  font-family: "MangoByeolbyeol";
  font-weight: bold;
  font-size: 28px;
  color: #626262;
  display: inline-block; /* 애니메이션을 위해 inline-block 설정 */
  margin-left: 60px;
  position: absolute;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
    0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
    0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}

/* site-title의 각 글자에 bounce 애니메이션 적용 */
.site-title span {
  display: inline-block;
  position: relative; /* 독립적인 위치 설정 */
  animation: bounce 1.2s ease-in-out infinite; /* 애니메이션 적용 */
}

/* 순차적으로 딜레이 추가 */
.site-title span:nth-child(1) {
  animation-delay: 0s;
}
.site-title span:nth-child(2) {
  animation-delay: 0.2s;
}
.site-title span:nth-child(3) {
  animation-delay: 0.4s;
}
.site-title span:nth-child(4) {
  animation-delay: 0.6s;
}
.site-title span:nth-child(5) {
  animation-delay: 0.8s;
}
.site-title span:nth-child(6) {
  animation-delay: 1s;
}
.site-title span:nth-child(7) {
  animation-delay: 1.2s;
}
.site-title span:nth-child(8) {
  animation-delay: 1.4s;
}

/* 본문 스타일 */
body {
  font-family: "SUITE-Regular", Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 상단 헤더 */
.header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #a2d5ab;
  color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.header .button-group {
  display: flex;
  justify-content: flex-start; /* 버튼들을 왼쪽 정렬 */
  gap: 0px;
}

/* 검색 바 */
.search-container {
  display: fixed;
  align-items: center;
  width: 1000px;
  margin-left: 230px;
  justify-content: center;
}

.search-bar {
  width: 1000px;
  height: 40px;
  padding: 8px;
  border: none;
  border-radius: 5px;
}

.search-icon {
  margin-left: -30px;
  cursor: pointer;
}

/* 마이페이지, 로그인, 상품등록 버튼 */
.my-page,
.login-button,
.register,
.admin-button {
  font-size: 16px;
  background-color: #626262;
  color: white;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
  font-family: "SUITE-Regular";
  margin-right: 30px;
}

/* 버튼 순서 지정 */
.admin-button {
  order: 1; /* 관리자 페이지 버튼 */
}

.register {
  order: 2; /* 상품 등록 버튼 */
}

.login-button {
  order: 3; /* 로그인 버튼 */
}

.my-page {
  order: 4; /* 마이페이지 버튼 */
}

/* 폼 컨테이너 */
.form-container {
  width: 1000px;
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 50px;
}

header h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}
/* 입력 필드 */
input,
textarea,
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
}

textarea {
  resize: vertical;
  min-height: 80px;
}

.radio-group {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}
/* 등록 버튼 */
.register-button {
  width: 100%;
  background-color: #a2d5ab;
  color: #626262;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #a2d5ab;
}

/* 메인 박스 스타일 */
.main-content {
  display: fixed;
  width: 60%;
  margin-top: 20px;
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
}

.instructions {
  width: 75%;
  padding-right: 20px;
}

.horizontal-container {
  width: 100%;
  display: flex; /* 플렉스박스 적용 */
  justify-content: flex-start; /* 자식 요소 간 간격을 균일하게 배치 */
  align-items: flex-start; /* 수직 방향으로 위쪽 정렬 */
  gap: 10px; /* 요소 간 간격 */
  padding: 20px 0; /* 전체 여백 추가 */
}

/* 메인 이미지 스타일 */
.main-image {
  width: auto;
  max-width: 800px;
  height: auto;
  object-fit: cover;
  margin-left: 0;
}
/* 왼쪽 섹션 스타일 */
.left-section {
  position: relative; /* 텍스트와 이미지를 겹치기 위해 relative 설정 */
  max-width: 700px;
  margin-left: 0;
  top: 50%;
  transform: translateY(30%);
}

/* 이미지 컨테이너 스타일 */
.image-container {
  position: relative; /* 텍스트와 이미지 간 포지션 관계 설정 */
  width: 100%;
  max-width: 700px; /* 이미지 최대 너비 설정 */
}

/* 이미지 스타일 */
.left-image {
  width: 550px; /* 이미지 크기를 컨테이너에 맞춤 */
  height: auto;
  border-radius: 10px;
  display: block;
  margin-left: 0;
}

/* 텍스트 오버레이 스타일 */
.overlay-text {
  position: absolute; /* 이미지를 기준으로 텍스트 위치 고정 */
  top: 55%; /* 이미지의 세로 중앙 */
  left: 40%; /* 이미지의 가로 중앙 */
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  color: black; /* 텍스트 색상 */
  font-family: "SUITE-Regular";
  font-size: 22px; /* 텍스트 크기 */
  font-weight: bold; /* 텍스트 굵기 */
  text-align: center; /* 텍스트 중앙 정렬 */

  padding: 10px 20px; /* 텍스트 패딩 */
  border-radius: 10px; /* 둥근 모서리 */
}

/* 왼쪽 여백 이미지 컨테이너 */
.left-sidebar {
  display: flex; /* 가로 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 10px; /* 이미지와 텍스트 사이 간격 */
  position: fixed; /* 화면 고정 */
  left: 20px; /* 왼쪽 여백 */
  top: 65%; /* 화면에서의 위치 */
  transform: translateY(90%); /* 정확히 중앙 정렬 */
  width: auto; /* 너비는 내용에 맞춤 */
  padding: 10px;
  border-radius: 0 10px 10px 0;
}

/* 이미지 스타일 */
.left-sidebar img {
  width: 80px; /* 이미지 크기 */
  height: auto; /* 비율 유지 */
  cursor: pointer; /* 클릭 가능 */
  transition: transform 0.2s ease-in-out; /* 부드러운 확대 효과 */
}
.left-sidebar img:hover {
  transform: translateY(-10px); /* 살짝 떠오르는 효과 */
}

/* 텍스트 박스 스타일 */
.left-sidebar .text-box {
  background-color: #fef5dc; /* 밝은 크림색 배경 */
  border: 1px solid #e9d8a6; /* 테두리를 부드러운 베이지 색상으로 설정 */
  border-radius: 10px; /* 둥근 모서리 */
  padding: 10px 15px; /* 내부 여백 */
  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.2); /* 은은한 노란색 그림자 */
  display: flex; /* 텍스트 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  justify-content: center; /* 가로 중앙 정렬 */
  transition: transform 0.2s, box-shadow 0.2s; /* 부드러운 효과 */
}

/* 깜빡이는 텍스트 스타일 */
.blink-text {
  font-size: 16px; /* 텍스트 크기 */
  font-weight: bold; /* 텍스트 굵게 */
  color: #d35400; /* 따뜻한 오렌지 색상 */
  animation: blink 1.5s infinite; /* 깜빡이는 애니메이션 */
  font-family: "SUITE-Regular", Arial, sans-serif; /* 텍스트 폰트 */
}

/* 깜빡이는 애니메이션 정의 */
@keyframes blink {
  0%,
  50% {
    opacity: 1; /* 보임 */
  }
  50.01%,
  100% {
    opacity: 0; /* 숨김 */
  }
}

/* 팝업 전체 화면 */
.popup {
  display: none;
  position: fixed;
  top: 50%; /* 화면 중앙 */
  left: 50%; /* 화면 중앙 */
  transform: translate(-50%, -50%);
  background: #e9f7df; /* 밝은 배경 */
  padding: 40px; /* 충분한 내부 여백 */
  border-radius: 15px; /* 더 둥근 모서리 */
  width: 500px; /* 팝업 가로 크기 */
  height: 600px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  text-align: center;
}

/* 팝업 제목 */
.popup h2 {
  font-size: 26px; /* 제목 크기 확대 */
  font-weight: bold;
  color: #4caf50; /* 초록색으로 강조 */
  margin-bottom: 20px;
  font-family: "SUITE-Regular", Arial, sans-serif; /* 폰트 설정 */
}

/* 팝업 내용 */
.popup p,
.popup ul {
  font-size: 20px; /* 내용 크기 */
  color: #555; /* 중간 톤의 텍스트 색상 */
  line-height: 1.8; /* 줄 간격 조정 */
  text-align: left; /* 텍스트 왼쪽 정렬 */
  margin-bottom: 20px;
  font-family: "SUITE-Regular", Arial, sans-serif; /* 텍스트 폰트 */
}

.popup ul li {
  margin-bottom: 10px; /* 항목 간 간격 */
}

/* 닫기 버튼 */
.popup button {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  font-family: "SUITE-Regular", Arial, sans-serif;
  transition: background-color 0.3s ease;
}

.popup button:hover {
  background-color: #388e3c; /* 더 어두운 초록색으로 변경 */
}

/* 팝업 배경 */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 어두운 배경 */
  z-index: 999;
}

/* 랭킹 전체 컨테이너 */
.ranking {
  position: relative;
  margin-left: 100px;
  top: 70px; /* 상단에서 떨어진 위치 */
  width: 300px; /* 컨테이너 너비 */
  height: 450px;
  text-align: center; /* 중앙 정렬 */
  background-color: #e9f7df; /* 연한 초록색 파스텔톤 배경 */
  border-radius: 20px; /* 둥근 모서리 */
  padding: 20px; /* 내부 여백 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-height: 500px; /* 최대 높이 */
  font-family: "SUITE-Regular", Arial, sans-serif; /* 폰트 설정 */
}

/* 실시간 랭킹 제목 */
.ranking-title {
  font-size: 32px; /* 텍스트 크기 */
  font-weight: bold; /* 텍스트 굵기 */
  color: #4caf50; /* 초록색 텍스트 */
  margin-bottom: 20px; /* 제목과 목록 간 간격 */
}

/* 경매 물품 목록 */
#ranking-list {
  padding: 0; /* 기본 목록 스타일 제거 */
  margin: 0;
  list-style: none; /* 불릿 제거 */
  text-align: left; /* 목록을 왼쪽 정렬 */
}

/* 각 랭킹 물품 항목 */
.ranking-item {
  display: flex; /* 랭킹 번호와 텍스트 정렬 */
  width: 250px;
  justify-content: space-between; /* 텍스트와 별+숫자를 양쪽 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  background-color: #ffffff; /* 흰색 배경 */
  padding: 15px 20px; /* 내부 여백 */
  border-radius: 10px; /* 둥근 모서리 */
  margin-bottom: 15px; /* 항목 간 간격 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  transition: background-color 0.3s ease, transform 0.2s ease; /* 부드러운 효과 */
  font-size: 18px; /* 기존 16px에서 증가 */
  font-weight: bold;
}
/* 빨간색 별 아이콘 */
.like-icon {
  color: red !important;
  font-size: 20px; /* 별 크기 */
  margin-left: 5px; /* 텍스트와 간격 */
  vertical-align: middle; /* 텍스트와 수평 정렬 */
}

/* 랭킹 항목 텍스트 */
.ranking-item span {
  font-weight: bold;
  font-size: 20px;
  color: #4caf50; /* 초록색 */
  margin-right: 16px; /* 번호와 텍스트 간 간격 */
}

.ranking-item a {
  text-decoration: none;
  color: #333; /* 기본 텍스트 색상 */
  font-size: 18px; /* 텍스트 크기 */
}

.ranking-item:hover {
  background-color: #f1f8e9; /* 연한 초록색 배경 */
  transform: translateY(-3px); /* 살짝 떠오르는 효과 */
}

/* 마지막 항목 구분선 제거 */
.ranking-item:not(:last-child) {
  margin-bottom: 10px;
}

/* 카테고리 버튼들 */
.categories {
  display: flex;
  gap: 100px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 20px;
  max-width: 1200px; /* 부모 컨테이너 최대 너비 */
  width: 100%;
}

.category-button {
  background-color: transparent; /* 배경 제거 */
  border: none;
  cursor: pointer;
  width: 250px; /* 버튼 크기 */
  display: flex;
  flex-direction: column; /* 이미지를 위, 텍스트를 아래 배치 */
  align-items: center; /* 수평 중앙 정렬 */
  gap: 20px; /* 이미지와 텍스트 사이 간격 */
}

.button-image {
  width: 200px; /* 버튼 크기에 맞게 이미지 크기 조정 */
  height: 200px; /* 버튼 크기에 맞게 이미지 크기 조정 */
  object-fit: cover; /* 이미지 비율 유지하며 크기 조정 */
  border-radius: 50%; /* 동그라미 모양 */
  border: 2px solid #ddd; /* 선택: 이미지 테두리 추가 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 선택: 그림자 추가 */
}
.button-image:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* 마우스를 올렸을 때 회색 그림자 */
  border: 2px solid #bbb; /* 선택: 테두리 색상 변경 */
}

.button-text {
  font-family: "SUITE-Regular";
  font-size: 25px; /* 글자 크기 */
  color: black; /* 글자 색상 */
  font-weight: bold;
  text-decoration: underline; /* 밑줄 추가 */
}

.link-button {
  background: none; /* 버튼 배경 제거 */
  border: none; /* 버튼 테두리 제거 */
  cursor: pointer; /* 클릭할 수 있는 모양으로 변경 */
  padding: 0; /* 기본 padding 제거 */
  font-size: inherit; /* 버튼의 글자 크기를 주변 글자 크기에 맞춤 */
}

.container {
  position: relative;
  display: flex;
  max-width: 1500px;
  margin: 20px auto; /* 페이지 가운데 정렬 */
  gap: 20px;
  align-items: flex-start;
}

.product-container {
  flex: 1;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 가로로 4개 */
  gap: 20px;
}

.product-item {
  width: 200px;
  height: 350px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 15px;
  text-align: left; /* 텍스트 왼쪽 정렬 */
}

.product-item img {
  width: 100%;
  height: 200px;
  border-radius: 5px;
  margin-bottom: 5px;
}

/* 제목 스타일: 길면 잘리도록 설정 */
.product-item h3 {
  font-size: 14px;
  white-space: nowrap; /* 한 줄로 표시 */
  overflow: hidden; /* 넘치는 부분 숨김 */
  text-overflow: ellipsis; /* 잘린 부분에 '...' 표시 */
  margin: 5px 0;
}

/* 가격 스타일: 굵게 표시 */
.product-item .price {
  font-weight: bold; /* 글씨 굵게 */
  font-size: 18px; /* 약간 큰 글씨 */
  color: #333;
  margin: 5px 0;
}

/* 위치 스타일 */
.product-item .location {
  font-size: 14px;
  color: #666;
}

.mypage-menu,
.filter {
  position: fixed;
  top: 100px; /* 위에서 100px 떨어진 위치 */
  left: 130px;
  width: 280px;
  margin: 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 15px;
  background-color: #f9f9f9;
  margin-top: 50px;
}

.mypage-menu h3,
.filter h3 {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.manual-price-filter {
  position: relative; /* 버튼 위치를 상대적으로 제어하기 위함 */
}

.manual-price-filter button:last-child {
  float: right; /* 마지막 버튼(초기화 버튼)을 오른쪽으로 정렬 */
  margin-top: 10px; /* 간격 추가 */
}

label {
  display: flex;
  justify-content: space-between; /* 텍스트와 체크박스를 양쪽으로 정렬 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

input[type="checkbox"] {
  margin-left: 10px; /* 체크박스 위치 간격 */
}

.mypage-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.mypage-menu li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.mypage-menu li:hover {
  background-color: #f0f0f0;
}

/* 내용 표시 영역 스타일 */
.content-area,
.product-container {
  flex: 1; /* 나머지 공간을 차지하도록 설정 */
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 50px;
}

.content-area h2,
.product-container h1 {
  font-size: 22px;
  margin-bottom: 15px;
}
#liked-products {
  list-style: none;
  padding: 0;
}

#liked-products li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

#liked-products li img {
  border-radius: 5px;
}

#liked-products li a {
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

#liked-products li span {
  font-size: 14px;
  color: #777;
}

/* 로그인 팝업 */
.login-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  width: 350px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* 팝업 내용 */
.popup-content {
  background: white;
  padding: 30px; /* 패딩을 늘려 내부 여유 공간 확보 */
  border-radius: 10px;
  width: 500px; /* 폭을 넓혀서 충분한 공간 제공 */
  height: 300px; /* 세로 크기 직접 설정 */
  text-align: center;
  position: relative;
  box-sizing: border-box; /* 패딩과 폭을 포함하여 계산 */
}

.login-popup .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
}

/* 입력 필드 스타일 */
.form-group {
  margin-bottom: 15px;
  position: relative;
}

input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box;
}

/* 비밀번호 토글 버튼 */
.password-group {
  position: relative;
}

.password-toggle {
  position: absolute;
  top: 12px;
  right: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #aaa;
}

.password-toggle:hover {
  color: #333;
}

/* 로그인 버튼 */
.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #a2d5ab;
  border: none;
  border-radius: 5px;
  color: #626262;
  font-size: 16px;
  cursor: pointer;
}

.login-btn:hover {
  background-color: #81b29a;
}

/* 하단 링크 섹션 */
.links {
  margin-top: 15px;
  font-size: 12px;
  color: #555;
}

.links a {
  font-size: 16px;
  text-decoration: none;
  color: #00a6f3;
  margin: 0 5px;
}

.links a:hover {
  text-decoration: underline;
}

/* 컨테이너의 배경과 여백 제거 */
.product-details-container {
  max-width: 800px; /* 고정 너비 */
  width: 100%; /* 화면 크기에 맞게 */
  margin: 0 auto; /* 중앙 정렬 */
  padding: 20px; /* 내부 여백 */
  background: #fff; /* 하얀색 배경 */
  border-radius: 10px; /* 둥근 모서리 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
  margin-top: 30px;
}

/* 이미지 스타일 */
.product-details-container img {
  max-width: 100%; /* 부모 요소 크기에 맞게 이미지 조정 */
  height: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

/* 상품명 스타일 */
.product-details-container h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* 텍스트 정렬 */
.product-details-container p {
  font-size: 20px;
  color: #555;
  margin-bottom: 10px;
}

/* 현재 가격 강조 */
#current-price {
  font-size: 20px;
  font-weight: bold;
  color: #d32f2f;
  margin-bottom: 20px;
}

/* 입찰 섹션 */
.product-details-bid-section {
  display: flex;
  justify-content: center; /* 중앙 정렬 */
  gap: 10px; /* 입력 필드와 버튼 간 간격 */
  margin-top: 20px;
}

.product-details-bid-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 200px;
}

.product-details-bid-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #388e3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.product-details-bid-button:hover {
  background-color: #2e7d32;
}

/* 상품 이름과 찜 버튼을 포함하는 컨테이너 */
.product-title-container {
  display: flex; /* Flexbox로 구성 */
  justify-content: space-between; /* 좌우 정렬 */
  align-items: center; /* 수직 중앙 정렬 */
  margin-bottom: 10px; /* 아래 여백 */
}

/* 상품 이름 스타일 */
.product-title {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
  color: #333;
}

/* 찜 버튼 스타일 */
.like-button {
  font-size: 24px;
  cursor: pointer;
  color: gray;
  margin-left: 10px; /* 이름과 찜 버튼 사이 간격 */
}

.like-button.active {
  color: red;
}

/* 뒤로가기 링크를 감싸는 컨테이너 */
.back-link-container {
  display: flex; /* Flexbox 사용 */
  justify-content: center; /* 가운데 정렬 */
  margin-top: 20px; /* 위쪽 여백 */
}

/* 뒤로가기 링크 */
.back-link-container a {
  font-size: 16px;
  color: #3f51b5;
  text-decoration: none;
  padding: 10px 20px; /* 버튼처럼 보이게 여백 추가 */
  border: 1px solid #3f51b5; /* 외곽선 추가 */
  border-radius: 5px; /* 둥근 모서리 */
  text-align: center; /* 텍스트 가운데 정렬 */
  transition: background-color 0.3s, color 0.3s; /* 부드러운 효과 */
}

/* 링크에 마우스 올렸을 때 효과 */
.back-link-container a:hover {
  background-color: #3f51b5;
  color: white;
}

#countdown-timer {
  font-size: 18px; /* 글자 크기 조정 */
  color: #ff0000; /* 빨간색 강조 */
  font-weight: bold; /* 굵은 글씨 */

  margin-left: 20px; /* 경매 종료 시간과의 간격 조정 */
  display: inline-block; /* 오른쪽 배치 */
}

.quiz-footer {
  display: flex;
  justify-content: center; /* 가운데 정렬 */
  align-items: center;
  margin-top: 30px; /* 실시간 랭킹 아래 여백 추가 */
  right: 120px;
  position: absolute; /* 정렬 */
  top: 700px; /* 랭킹과 적절히 떨어지도록 설정 */
  background: linear-gradient(135deg, #f3f3f3, #e0e0e0); /* 배경에 그라데이션 */
  border-radius: 10px; /* 둥근 모서리 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
  width: 230px; /* 컨테이너 크기 */
  height: 100px;
  transition: transform 0.2s ease-in-out; /* 호버 애니메이션 */
  cursor: pointer; /* 클릭 가능 표시 */
}

.quiz-footer:hover {
  transform: translateY(-3px); /* 호버 시 살짝 위로 이동 */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* 호버 시 그림자 강화 */
}

.quiz-icon {
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease; /* 아이콘 애니메이션 */
}

.quiz-footer:hover .quiz-icon {
  transform: scale(1.1); /* 호버 시 확대 */
}

.quiz-text {
  font-size: 20px;
  font-weight: bold;
  color: #333; /* 텍스트 색상 */
  padding: 8px 12px;
}

.quiz-option {
  display: flex;
  align-items: center; /* 라디오 버튼과 텍스트를 수직으로 정렬 */
  margin-bottom: 10px;
}

/* 팝업 스타일 */
.quiz-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.quiz-popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 30px;
  border-radius: 10px;
  width: 400px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  text-align: center;
}

.quiz-popup h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 10px;
}

.quiz-popup p {
  margin-bottom: 15px;
}

.quiz-popup form {
  margin-bottom: 20px;
}

.quiz-popup button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.quiz-popup button:hover {
  background-color: #388e3c;
}

.inquiry-form-container {
  width: 500px; /* 전체 폼 너비를 늘림 */
  margin: 20px auto; /* 위쪽 여백 추가 및 중앙 정렬 */
  padding: 30px; /* 폼 내부 여백 증가 */
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 폼에 그림자 추가 */
}

.inquiry-form-container h2 {
  text-align: center;
}

#inquiry-form input,
#inquiry-form textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#inquiry-form button {
  width: 100%;
  padding: 10px;
  background-color: #88c089;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.inquiry-history-container {
  max-width: 1000px; /* 컨테이너의 너비를 넓혀 가로 배치를 지원 */
  margin: 20px auto;
  padding: 20px;
  display: flex; /* flexbox로 변경 */
  flex-wrap: wrap; /* 행을 넘으면 새 줄로 이동 */
  gap: 20px; /* 카드 간 간격 */
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.answered-inquiries,
.unanswered-inquiries {
  margin-bottom: 30px;
}

.answered-inquiries h3,
.unanswered-inquiries h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
}

.inquiry-item {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 0 1 calc(30% - 20px); /* 카드 크기를 유동적으로 설정 */
  max-width: 400px; /* 카드의 최대 너비를 400px로 설정 */
  box-sizing: border-box; /* 패딩과 보더 포함 계산 */
}

.answer-completed {
  color: green;
  font-weight: bold;
}

.answer-pending {
  color: red;
  font-weight: bold;
}

.admin-container h1 {
  text-align: center;
  margin-bottom: 20px;
}

#inquiry-list {
  display: flex; /* 플렉스 컨테이너로 설정 */
  flex-wrap: wrap; /* 카드가 화면 너비를 넘으면 다음 줄로 이동 */
  gap: 20px; /* 카드 간격 설정 */
  justify-content: center; /* 카드들을 중앙 정렬 */
}

.inquiry-item {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 0 1 calc(33.333% - 20px); /* 카드 크기: 3개씩 배치 (화면 크기에 따라 자동 조정) */
  width: 600px; /* 카드 최대 너비 설정 */
  box-sizing: border-box; /* 박스 크기 포함 계산 */
}

.inquiry-item p {
  margin: 5px 0;
}

.inquiry-item strong {
  color: #333;
}

.inquiry-item textarea {
  width: 95%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.inquiry-item button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.inquiry-item button:hover {
  background-color: #45a049;
}

/* 스타일 전체 적용 */
.personal-info-container {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.personal-info-container h2 {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}

.personal-info-container h3 {
  font-size: 1.2em;
  margin-top: 20px;
  color: #444;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.info-item label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #555;
}

.info-item span {
  background-color: #f0f0f0;
  padding: 8px;
  border-radius: 5px;
  color: #333;
  display: inline-block;
}

.info-item input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1em;
  color: #333;
}

.info-item input:disabled {
  background-color: #e9e9e9;
  color: #888;
}

.custom-button-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.custom-button-group button {
  padding: 8px 12px;
  font-size: 0.9em;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.custom-button-group button:hover {
  opacity: 0.9;
}

.custom-button-group button:nth-child(1) {
  background-color: #007bff;
  color: #fff;
}

.custom-button-group button:nth-child(2) {
  background-color: #28a745;
  color: #fff;
}

.custom-button-group button:nth-child(3) {
  background-color: #ffc107;
  color: #fff;
}

/* 전체 섹션 스타일 */
.find-section {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  justify-content: center;
}

/* 아이디 찾기와 비밀번호 찾기 박스 스타일 */
.find-id, .find-password {
  width: 400px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.find-id h2, .find-password h2 {
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
  color: #333;
}

/* 입력 필드 스타일 */
.find-id input, .find-password input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/* 버튼 스타일 */
.find-btn {
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}

.find-btn:hover {
  background-color: #388e3c;
}

/* 라벨 스타일 */
.find-id label, .find-password label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}
