/* 1. 모달 레이아웃 */
.auction-overlay {
  display: flex;
  justify-content: center;
  align-items: baseline;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  padding: 120px 0 0 0;
}

.auction-dialog {
  width: 900px;
  height: 800px;
  /* 높이를 살짝 늘려 여유 확보 */
  background: var(--card-bg);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* 2. 헤더 영역 */
.auction-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--header-bg);
  flex-shrink: 0;
}

.auction-header h3 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.1rem;
}

.btn-auction-close {
  background: none;
  border: none;
  color: var(--text-sub);
  font-size: 1.2rem;
  cursor: pointer;
}

/* 3. 바디 레이아웃 */
.auction-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}

/* 4. 좌측: 리스트 영역 */
.auction-left-panel {
  width: 350px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  min-height: 0;
}

.auction-search-box {
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);
  flex-shrink: 0;
}

.auction-search-label {
  margin-bottom: 8px;
  color: var(--text-sub);
  font-size: 0.85rem;
}

.auction-input-keyword {
  flex: 1;
  height: 50px;
  padding: 0 15px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-color);
  color: var(--text-main);
  font-size: 1.4rem;
  font-weight: bold;
  width: 100px;
}

/* [수정 4] 검색 결과 헤더 스타일 (테이블 헤더와 통일) */
.auction-list-header {
  background: var(--header-bg);
  /* 헤더 배경색 */
  border-bottom: 2px solid var(--border-color);
  /* 헤더 하단 굵은 선 */
  padding: 12px 15px;
  color: var(--text-sub);
  font-size: 0.9rem;
  font-weight: bold;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.auction-list-container {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.auction-list-item {
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}

.auction-item-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.auction-item-icon img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.auction-item-info {
  flex: 1;
  overflow: hidden;
}

.auction-item-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--text-main);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auction-item-price {
  font-size: 0.8rem;
  color: var(--text-sub);
  display: flex;
  justify-content: space-between;
}

.price-highlight {
  color: var(--accent-gold);
  font-weight: bold;
}

/* 5. 우측: 계산기 영역 */
.auction-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-color);
  overflow: hidden;
  min-height: 0;
}

/*  상단 설정 영역 패딩 및 간격 확보 */
.auction-calc-config {
  display: flex;
  flex-direction: row !important;
  gap: 30px;
  align-items: flex-start;
  padding: 15px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

/*  좌측 금액 영역 비율 축소 */
.config-section-price {
  flex: 1.2;
}

/*  우측 파티 영역 비율 확대 */
.config-section-party {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.auction-label-title {
  display: block;
  margin-bottom: 10px;
  color: var(--text-sub);
  font-size: 0.9rem;
  font-weight: bold;
}

.party-control-row {
  display: flex;
  gap: 10px;
  height: 50px;
}

.party-input-box {
  flex: 1;
  height: 100%;
}

.party-input-box input {
  height: 100%;
  font-size: 1.4rem;
  text-align: center;
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: var(--bg-color);
  color: var(--text-main);
  font-weight: bold;
  /* padding: 0 0 0 20px; */
}

.party-btn-stack {
  display: flex;
  justify-content: space-between;
  width: 120px;
}

/* [수정 2, 3] 파티 인원 버튼 스타일 (크고 진하게) */
.party-btn-stack .tool-btn {
  height: 100%;
  width: 100% !important;
  padding: 0;
  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  color: var(--text-sub);
  background: var(--bg-color);
  transition: all 0.2s;
}

/* [수정 3] 파티 인원 선택 시 시각화 (Active State) */
.party-btn-stack .tool-btn.active {
  background-color: rgba(255, 215, 0, 0.15);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}

/* 금액 아이콘/입력창 스타일 */
.auction-price-icon-wrap {
  width: 50px;
  height: 50px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.auction-price-input {
  width: 100%;
  height: 50px;
  padding: 0 35px 0 15px;
  font-size: 1.4rem;
  font-weight: bold;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  text-align: right;
  color: var(--text-main);
  background: var(--bg-color);
}

/* 6. 결과 테이블 */
.auction-result-box {
  flex: 1;
  background: var(--bg-color);
  padding: 15px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.auction-table {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.auction-table thead tr {
  background: var(--header-bg);
  border-bottom: 2px solid var(--border-color);
  color: var(--text-sub);
  font-size: 0.9rem;
}

.auction-table th {
  padding: 12px 15px;
  text-align: left;
  font-size: 1.5rem;
}

.auction-table tbody {
  font-size: 1rem;
  color: var(--text-main);
}

.auction-table td {
  padding: 10px 15px;
  align-content: baseline;
}

.auction-table .row-border {
  border-bottom: 1px solid var(--border-color);
}

.auction-table .bg-light {
  background: rgba(0, 0, 0, 0.02);
}

.auction-table .bg-highlight {
  background: rgba(65, 105, 225, 0.1);
}

.auction-table .text-left-bold {
  text-align: left;
  font-weight: bold;
}

.auction-table .text-sub-small {
  font-size: 1rem;
  color: #e1ba41;
  font-weight: normal;
}

.auction-table>tbody>tr>td div.text-sub-small
, .auction-table>tbody>tr>td div.copy-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.auction-table tbody>tr>td div.text-sub-small>span {
  padding-left: 34px;
}

.auction-table tbody>tr>td div.text-sub-small>span:hover {
  font-style: italic;
  text-decoration: underline;
}
.auction-table tbody>tr>td div.text-sub-small>span>i.fa-gavel {
  color: #e1ba41
}

.text-category {
  color: #bdc3c7;
  width: 140px;
}

.text-sell {
  color: #e74c3c;
  width: 160px;
}

.text-use {
  color: #27ae60;
  width: 160px;
}

.text-primary-color {
  color: var(--primary-color);
}

.auction-empty-state {
  padding: 40px;
  text-align: center;
  color: var(--text-sub);
}

/* 조회 버튼 스타일 (찌그러짐 방지 및 정렬 수정) */
.btn-search-auction {
  cursor: pointer;
  height: 50px;
  /* 입력창과 높이 동일하게 */
  padding: 0 20px;
  /* 좌우 여백 */
  font-size: 1.1rem;
  font-weight: bold;
  color: #fdff00;
  background: var(--header-bg);
  border: 1px solid var(--border-color);
  border-radius: 4px;

  /* [핵심] 내부 요소(아이콘, 글자) 가로 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 아이콘과 글자 사이 간격 */
  gap: 8px;

  /* [핵심] 버튼이 찌그러지지 않도록 크기 고정 */
  flex-shrink: 0;
  white-space: nowrap;
}

.copy-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  cursor: pointer;
  padding: 2px 0px;
  border-radius: 4px;
  transition: all 0.2s;
}

.copy-wrapper:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.copy-wrapper:active {
  transform: scale(0.98);
}

.copy-icon,
.copy-icon+span {
  font-size: 1.5rem;
  color: var(--text-sub);
}

.copy-wrapper:hover .copy-icon,
.copy-wrapper:hover .copy-icon+span {
  color: var(--primary-color);
}

/* 토스트 메시지 스타일 (애니메이션 및 위치) */
.auction-toast {
  position: fixed;
  z-index: 10005;

  /* 디자인 유지 */
  background-color: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.85rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  white-space: nowrap;

  /* [핵심 변경] 전체 시간 1.2s -> 2.0s로 변경 */
  /* 등장(0.1s) + 대기(0.9s) + 퇴장(1.0s) = 총 2.0s */
  animation: toast-up-fade 1.2s ease-out forwards;

  /* 기본 위치 */
  transform: translate(-50%, -100%);
}

/* [수정] 애니메이션 키프레임 재조정 */
@keyframes toast-up-fade {

  /* 1. 바로 나타남 (0% ~ 5% : 0.1초) */
  0% {
    opacity: 0;
    transform: translate(-50%, -80%);
  }

  5% {
    opacity: 1;
    transform: translate(-50%, -100%);
  }

  /* 2. 유지 (5% ~ 50% : 0.9초) */
  50% {
    opacity: 1;
    transform: translate(-50%, -100%);
  }

  /* 3. 천천히 사라짐 (50% ~ 100% : 1.0초) */
  100% {
    opacity: 0;
    transform: translate(-50%, -150%);
    /* 위로 더 올라가며 사라짐 */
  }
}

.toast-highlight {
  color: var(--accent-gold);
  font-weight: bold;
}



/* 부모 요소는 relative여야 자식(말풍선) 위치를 잡을 수 있음 */
.custom-tooltip {
  position: relative;
  cursor: help; /* 마우스 커서를 물음표로 변경 (선택사항) */
}

/* 마우스를 올렸을 때(hover) 가상 요소(::after) 생성 */
.custom-tooltip:hover::after {
  content: attr(data-tooltip); /* data-tooltip 속성의 값을 가져와서 찍음 */
  
  /* 말풍선 디자인 */
  position: absolute;
  bottom: 100%; /* 요소의 바로 위쪽 */
  left: 50%;
  transform: translateX(-50%); /* 정확히 중앙 정렬 */
  
  background-color: #333; /* 검은색 배경 */
  color: #fff;            /* 흰색 글씨 */
  padding: 5px 10px;      /* 내부 여백 */
  border-radius: 4px;     /* 둥근 모서리 */
  font-size: 1.2rem;        /* 글자 크기 */
  white-space: nowrap;    /* 줄바꿈 방지 */
  z-index: 1000;          /* 다른 요소보다 위에 뜨게 */
  
  /* 살짝 띄우기 */
  margin-bottom: 5px;
}