/* client/src/pages/common/ 폴더 내부 컴포넌트들의 공통 스타일 */

/* Topbar */
.topbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.topbar-category {
  font-weight: 500;
  cursor: pointer;
  color: #555;
}
.topbar-actions{
  display: flex;
}

.topbar-actions button {
  background-color: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 20px;
  color: #555;
}

.topbar-actions button:hover {
  color: #868e96;
}

/* SearchBar */
.searchbar-container {
  padding: 15px 20px 0px 20px; /* 변경: 하단 패딩 0으로 수정 */
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 15px;
}

.searchbar-location {
  font-weight: 500;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.searchbar-location svg {
  margin-left: 5px;
  width: 12px;
  height: 12px;
}

.searchbar-input-wrapper {
  flex-grow: 1;
  position: relative;
}

.searchbar-input {
  /* width: 1370px; */
  width: 100%;
  height: 50px;
  border: 2px solid #B57EDC;
  border-radius: 24px;
  padding-left: 15px;
  padding-right: 50px;   /* 40이였음*/
  outline: none;
  box-sizing: border-box;
}

.searchbar-input::placeholder {
  font-size: 18px;
  margin-left: 20px;
  color: #adb5bd;
}


.searchbar-button {
  width: 150px;
  height: 50px;
  padding: 10px 0px;
  padding-left: 20px;
  border: 1px solid #F5F3F3;
  border-radius: 24px;
  background-color: #F5F3F3;
  color: #555;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  align-items: center;
  gap: 8px;
}

.searchbar-button:hover {
  background-color: #e9ecef;
}

/* 추가: 검색창 드롭다운 스타일 */
.searchbar-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 24px;
  margin-right: 50px;
}

.selected-trade-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

.selected-trade-type svg {
  margin-left: 8px;
}

.dropdown-options {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  width: 150px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 24px;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.option-item {
  padding: 8px 12px;
  cursor: pointer;
}

.option-item:hover {
  background-color: #f0f0f0;
}
.dropdown-options .option-item:first-child:hover {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.dropdown-options .option-item:last-child:hover {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* 변경: 검색창 드롭다운용 점 스타일로 수정 */
.searchbar-button-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 8px;
  margin-right: auto;
  flex-shrink: 0;
}

.popular-keywords {
  padding: 0px 20px;
  color: #868e96;
  background-color: #fff;
  text-align: left;
  margin-left: 250px;
  margin-top: 1rem; /* 추가 */
}

.popular-keywords span {
  margin-right: 10px;
  cursor: pointer;
}

.popular-keywords span:hover {
  text-decoration: underline;
}

/* 추가: 전체 상품 레이아웃 */
.all-product-container {
  display: flex;
  flex-direction: row;
}

/* FilterSidebar */
.filter-sidebar-container {
  width: 15px; /* 변경 */
  min-width: 274px; /* 추가 */
  padding: 25px 20px;
  background-color: #fff;
}

.filter-section {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5f5f5;
}
.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.filter-title {
  text-align: left;
  font-weight: 700;
  color: #222;
}

.filter-reset-button {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 0;
}
.filter-reset-button:hover {
  text-decoration: underline;
}

.filter-checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  color: #333;
  cursor: pointer;
}

.filter-checkbox {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: #8A2BE2;
}

.filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.filter-list-item:last-child {
  margin-bottom: 0;
}

.filter-radio {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  accent-color: #8A2BE2;
  cursor: pointer;
}

.filter-label {
  color: #333;
  cursor: pointer;
}

.filter-more-button {
  background: none;
  border: none;
  color: #6f42c1;
  cursor: pointer;
  padding: 5px 0;
  margin-top: 5px;
}
.filter-more-button:hover {
  text-decoration: underline;
}

/* 가격 입력 부분*/
.price-input-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
}

.price-input {
  width: 70px;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: right;
}
.price-input::placeholder {
  color: #aaa;
  text-align: center;
}

.price-input-separator {
  color: #555;
}

.price-apply-button {
  padding: 8px 12px;
  background-color: #6f42c1;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.price-apply-button:hover {
  background-color: #5a37a0;
}

/* RecentViewed */
.recent-viewed-container {
  width: 310px;
  display: flex;
  justify-content: flex-end;
  margin-left: 5rem; /* 추가 */
}

.recent-viewed-box{
  width: 160px;
  height: 630px;
  padding: 10px;
  border-radius: 15px;
  background-color: #f8f9fa;
  justify-items: center;
  position: fixed; /* 추가: 스크롤 따라 고정 */
}

.recent-viewed-title {
  font-weight: 500;
  margin-bottom: 15px;
}

.recent-viewed-items {

}

.recent-item-placeholder {
  width: 120px;
  height: 120px;
  background-color: #E0E0E0;
  border-radius: 7px;
  margin-bottom: 10px;
}

/* 개별 상품 목록 항목의 크기 설정 */
.recent-viewed-items .recent-item {
  width: 120px; /* 플레이스홀더와 동일한 너비 */
  height: 120px; /* 플레이스홀더와 동일한 높이 */
  margin-bottom: 10px; /* 플레이스홀더와 동일한 아래 여백 */
  
  /* 내부 콘텐츠(이미지와 텍스트)를 배치하기 위한 설정 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 수평 가운데 정렬 */
  justify-content: flex-start; /* 상단부터 채우기 */
  overflow: hidden; /* 영역을 벗어나는 내용 숨김 */
}

/* 상품 이미지 스타일 */
.recent-item img {
  width: 120px; /* 컨테이너 너비에 맞춤 */
  height: 120px; /* 컨테이너 높이에 맞춤 */
  object-fit: cover; /* 이미지가 잘리더라도 영역을 꽉 채우도록 설정 */
  border-radius: 7px; /* 플레이스홀더와 동일한 둥근 모서리 */
}

.recent-viewed-more-button {
  color: #868e96;
  margin-top: 15px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.recent-viewed-more-button:hover {
  text-decoration: underline;
}

/* 변경 및 추가: 로그인 후 헤더 & 카테고리 드롭다운 css */
.loginHeader {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  font-size: 1rem;
}

.logoButton {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  background-image: url("/image/딜온로고.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 120px;
  height: 60px;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.signIn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.left-header-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.category-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 10px;
  font-size: 16px;
  color: #333;
}

.category-text {
  background-color: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 20px;
  color: #555;
  text-decoration: none;
}

/* 유지: 판매하기 모달 */
.sell-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.sell-modal-content {
  width: 560px;
  height: 200px;
  background: white;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  outline: none;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sell-modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  color: #aaa;
  padding: 0;
}
.sell-modal-close-btn:hover {
  color: #333;
}


.sell-modal-title {
  font-weight: bold;
  color: #333;
}

.sell-modal-buttons {
  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: center;
}

.sell-option-button {
  width: 245px;
  height: 90px;
  border-radius: 23px;
  font-weight: bold;
  cursor: pointer;
  border: 2px solid #f2f2f2;
  transition: all 0.2s ease-in-out;
  background-color: #f2f2f2;
  color: #555;
}

.sell-option-button:hover {
  background-color: #F4F0FF;
  border-color: #B57EDC;
  color: #673AB7;
}

/* 모달 배경 */
.modal {
    display: none; /* 기본은 숨김 */
    position: fixed;
    z-index: 1000;
    left: 0; 
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* 반투명 배경 */
}

/* 모달 내용 박스 */
.modal-content {
    background: #fff;
    width: 400px;
    margin: 10% auto;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 로고 */

.logo {
	margin-top: 20px;
	max-height: 6rem;
}
.modal-content .logo {
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    /* margin-bottom: -6rem; */
}

/* 입력 필드 */
.input-field {
    width: 100%;
    padding: 12px;
    /* margin: 8px 0; */
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 1rem;
}

/* 로그인 버튼 */
.login-btn {
    width: 100%;
    padding: 12px;
    margin: 12px 0;
    background-color: #6a1b9a; /* 보라색 */
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}
.login-btn:hover {
    background-color: #4a148c;
}

/* 링크 */
.links {
    margin: 10px 0;
    font-size: 13px;
}
.links a {
    color: #555;
    text-decoration: none;
    margin: 0 5px;
}
.links a:hover {
    text-decoration: underline;
}

/* 소셜 로그인 버튼 */
.social-btn {
    width: 100%;
    padding: 12px;
    margin: 6px 0;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
}
.kakao_button {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.kakao_image {
  margin-Right: 8px;
  width: 18rem;
  vertical-Align: middle;
}
/* 구글 로그인 버튼 CSS*/

.gsi-material-button {
  /* -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none; */
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 4px;
  border-radius: 7px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 44px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: 18rem;
  max-width: 400px;
  min-width: min-content;
  margin-left: 3.2rem;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}



/* 돋보기 버튼 스타일 추가/수정 */
.search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 6px;
  
  /* 👇 **[핵심 수정]** 버튼을 입력창 우측에 정확히 배치 */
  position: absolute; /* ✅ 추가: 부모(.searchbar-input-wrapper) 기준 절대 위치 */
  right: 15px; /* ✅ 설정: 오른쪽으로부터의 거리 */
  top: 50%; /* ✅ 설정: 상단에서 50% 위치 */
  transform: translateY(-50%); /* ✅ 설정: 정확히 수직 중앙 정렬 */
  z-index: 10; /* ✅ 설정: 입력창보다 위로 오도록 */
}

/* common.css 또는 해당 헤더의 CSS 파일에 추가 */

.notification-icon-container {
    position: relative;
    align-items: center;
    justify-content: center;
    height: 40px; /* 버튼 높이와 유사하게 설정 */
    width: 40px; 
    padding: 0;
    margin-right: 15px; /* 채팅하기 버튼과의 간격 */
    color: #333; /* 아이콘 색상 */
    transition: color 0.2s;
    display: flex;
    cursor: pointer;
}

.notification-icon-container:hover {
    color: #6a0dad; /* 마우스 오버 시 색상 변경 */
}

.notification-icon {
    width: 28px; /* 아이콘 크기 */
    height: 28px;
}

.notification-badge {
    position: absolute;
    top: 18px; /* 아이콘 우측 상단으로 이동 */
    right: -10px;
    background-color: #ff4d4f; /* 빨간색 배경 */
    color: white;
    font-size: 10px; /* 작은 폰트 크기 */
    font-weight: bold;
    border-radius: 50%; /* 원형 모양 */
    padding: 2px 5px; /* 패딩 조정 */
    min-width: 18px; /* 최소 너비 지정 */
    text-align: center;
    line-height: 14px;
    height: 18px;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
    display: none; /* JS로 0보다 클 때만 표시 */
}

/* 모달 전체 배경 (검은 반투명 배경) */
.chat-modal-overlay {
    position: fixed;
    inset: 0; /* top, bottom, left, right 0 */
    background-color: rgba(0, 0, 0, 0.4);
    display: none; /* 기본 숨김 */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* 모달 본체 */
.chat-modal {
    background-color: #fff;
    width: 90%;
    max-width: 640px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 24px;
}

/* 모달 상단 영역 */
.chat-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* 제목 */
.chat-modal-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937; /* text-gray-900 비슷한 색 */
}

/* 닫기 버튼 */
.chat-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #9ca3af; /* gray-400 */
    cursor: pointer;
    transition: color 0.2s ease;
}

.chat-modal-close:hover {
    color: #4b5563; /* gray-600 */
}

/* 리스트 컨테이너 */
.chat-list-container {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chat-list-container li + li {
    margin-top: 16px; /* space-y-4 */
}

/* 확인 버튼 */
.chat-modal-confirm {
    width: 100%;
    margin-top: 24px;
    background-color: #7e22ce; /* purple-600 */
    color: white;
    padding: 12px 0;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.chat-modal-confirm:hover {
    background-color: #6b21a8; /* purple-700 */
}

/* hidden 클래스 (공통적으로 display:none 처리) */
.hidden {
    display: none;
}

.chat-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.chat-left {
  display: flex;
  align-items: flex-start;
  gap: 10px; /* space-x-3 대체 */
}

.chat-checkbox {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  accent-color: #7e3af2; /* 보라색 체크박스 */
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.chat-text {
  display: flex;
  flex-direction: column;
}

.chat-title {
  font-size: 16px;
  font-weight: bold;
  color: #6b21a8; /* 보라색 계열 */
  margin: 0;
}

.chat-desc {
  font-size: 13px;
  color: #777;
  margin-top: 4px;
}

.chat-close {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
}

.chat-close:hover {
  color: #555;
}

/* 🔔 알림 모달 배경 */
.notification-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.4);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px;
  z-index: 1000;
}

/* 🔔 알림 모달 본체 */
.notification-modal {
	z-index: 9999;
  background-color: #fff;
  width: 46rem;
  min-height: 46rem;
  max-height: 80vh;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  overflow-y: auto;
  margin-top: 111px;
  margin-right: 220px;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 상단 헤더 */
.notification-modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 18px;
  position: relative;
}

.notification-modal-header h2 {
  margin: 0;
  color: #222;
}

.notification-modal-close {
  position: absolute;
  right: 16px;
  top: 10px;
  border: none;
  background: none;
  font-size: 22px;
  color: #777;
  cursor: pointer;
}

.notification-modal-close:hover {
  color: #444;
}

/* 리스트 기본 구조 */
.notification-list {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
}

/* 각 알림 항목 */
.notification-item {
  background-color: rgba(222, 214, 227, 0.3);
  border-radius: 21px;
  padding: 0px 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
  text-align: left; /* 좌측 정렬 */
  margin-left: 20px;
  margin-right: 20px;
  
}

.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/*!* 후기 도착 (보라 톤) *!*/
/*.notification-item.type-review-received {*/
/*  padding: 41px 0px;*/
/*  background-color: #f9f8fb;*/
/*  border: 1px solid #ebe4ff;*/
/*}*/

/*!* 거래 완료 (밝은 회색) *!*/
/*.notification-item.type-transaction-complete {*/
/*  padding: 41px 0px;*/
/*  background-color: #f9f8fb;*/
/*  border: 1px solid #e8e6ee;*/
/*}*/

/* 닫기 버튼 */
.notification-item button {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
}

.notification-item button:hover {
  color: #666;
}

/* 알림 내용 */
.notification-content {
  display: flex;
  justify-content: space-between; /* 좌우 공간 분배 */
  align-items: flex-start; /* 상단 정렬 */
  gap: 10px;
  padding: 15px 15px 15px 40px;
}

.notification-left {
  /* ⚠️ 추가: 왼쪽 영역 (닉네임 + 메시지)이 차지하는 비율 */
  flex-basis: 45%; 
  min-width: 0;
}

.notification-right {
  /* ⚠️ 추가: 오른쪽 영역 (후기 내용)이 차지하는 비율 */
  flex-basis: 55%; 
  min-width: 0;
  padding-left: 10px; /* 구분선처럼 보이도록 좌측 패딩 추가 */
  border-left: 1px solid #eee; /* 좌우 내용 분리를 위한 구분선 */
}

.notification-left .main-text {
  font-size: 28px;
  line-height: 1.4;
  color: #222;
}

.notification-right .detail-text {
  margin: 0; /* 불필요한 마진 제거 */
  font-size: 20px;
  color: #878787;
  line-height: 1.5;
  word-break: keep-all;

}

/* 닉네임 강조 */
.user-nickname {
  color: #9966CC;
  font-weight: 400;
}

/* 알림 없을 때 */
.notification-empty-item {
  text-align: center;
  color: #999;
  padding: 20px;
  font-style: italic;
  font-size: 14px;
}

/* 스크롤바 */
.notification-modal::-webkit-scrollbar {
  width: 6px;
}

.notification-modal::-webkit-scrollbar-thumb {
  background-color: #d0c8ff;
  border-radius: 10px;
}

.notification-right .detail-text.buyer-prompt {
    padding: 28px 0px;
}

/* 닫기 버튼 */
.notification-item .close-notification-item {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  transition: color 0.2s;
}

/* 추가된 .flex 클래스 */
.flex {
	display: flex;	
}

/* 메시지 박스 기본 스타일 */
.message-box {
    position: fixed;
    bottom: 20px;            /* bottom-4 */
    left: 50%;               /* left-1/2 */
    transform: translateX(-50%); /* -translate-x-1/2 */
    background-color: #000;  /* bg-black */
    color: #fff;             /* text-white */
    padding: 16px 32px;      /* py-4 px-8 */
    border-radius: 8px;      /* rounded-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    z-index: 1000;           /* z-50 보다 안전하게 높임 */
    
    /* 애니메이션 설정 */
    opacity: 0;              /* opacity-0 */
    transition: opacity 0.3s ease; /* transition-opacity duration-300 */
    pointer-events: none;    /* 평소에는 클릭 방해 안 하게 설정 */
}

/* 활성화 상태 */
.message-box.show {
    opacity: 1;              /* opacity-100 */
    pointer-events: auto;
}

/*.admin-button{*/
/*	background: none;*/
/*    border: none;*/
/*    padding: 0;*/
/*    cursor: pointer;*/
/*    margin-right: 8rem;*/
/*	*/
/*}*/

.about-container{

    max-width:1200px;
    margin:80px auto;
    padding:40px;
    text-align:center;

}

.about-title{

    font-size:36px;
    font-weight:700;
    margin-bottom:10px;

}

.about-desc{

    color:#666;
    margin-bottom:60px;

}

.team-grid{

    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;

}

.team-card{

    width:260px;
    background:white;
    border-radius:12px;
    padding:30px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    transition:0.3s;

}

.team-card:hover{

    transform:translateY(-6px);

}

.dev-img{

    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin-bottom:15px;

}

.role{

    color:#888;
    font-size:14px;
    margin-bottom:10px;

}

.intro{

    font-size:14px;
    color:#555;
    margin-bottom:20px;

}

.github-btn{

    display:inline-block;
    padding:8px 16px;
    background:#24292e;
    color:white;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;

}