/* Reset & Base */
/* 1. 스크롤바 항상 공간 차지 (화면 덜컥거림 방지) */
html {
  overflow-y: scroll;
}

/* 2. 다크 테마 스크롤바 디자인 (Webkit 브라우저용) */
::-webkit-scrollbar {
  width: 10px; /* 세로 스크롤바 너비 */
  height: 10px; /* 가로 스크롤바 높이 */
}

/* 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
  background: #0f172a; /* 페이지 배경색과 동일하게 */
  border-left: 1px solid #334155; /* 구분선 */
}

/* 스크롤바 핸들 (막대) */
::-webkit-scrollbar-thumb {
  background: #475569; /* 기본 회색 */
  border-radius: 5px; /* 둥글게 */
  border: 2px solid #0f172a; /* 핸들 주변 여백 효과 */
}

/* 핸들 호버 시 */
::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* 좀 더 밝게 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

table {
  letter-spacing: 0.09em; /* 적당히 넓게 늘림, 숫자 조정 가능 */
}

body {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  padding: 20px;
}

.container {
  max-width: 1800px;
  margin: 0 auto;
}

/* header 스타일을 찾아서 아래와 같이 수정 */
header {
  display: flex;
  justify-content: space-between; /* 👈 flex-start에서 변경 */
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.5);
  margin-bottom: 25px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  font-size: 32px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.logo h1 {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.refresh-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.refresh-btn:active {
  transform: translateY(0);
}

/* Filters */
.filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.5);
  flex-wrap: wrap;
  gap: 16px;
}

.brand-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-label {
  color: #94a3b8;
  font-size: 14px;
  /* font-weight: 600; */
  margin-right: 8px;
}

.brand-btn {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  /* font-weight: 500; */
  transition: all 0.2s;
}

.brand-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.brand-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Date Picker */
.date-picker-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-picker-container > label {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
}

.date-inputs {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ✨ 핵심: 자식 요소들을 좌우 끝으로 밀어냅니다. */
  /* gap 속성은 더 이상 필요 없으므로 제거합니다. */
}

.date-input {
  margin: 3px 0px;
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
  flex-grow: 1; /* ✨ 핵심: 두 input이 남는 공간을 똑같이 나누어 갖도록 합니다. */
  text-align: center; /* (선택사항) 날짜 텍스트를 중앙 정렬하여 보기 좋게 만듭니다. */
}

.date-input:hover {
  border-color: #3b82f6;
}

.date-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.date-separator {
  /* (선택사항) 화면이 줄어들 때 '~'가 찌그러지는 것을 방지합니다. */
  flex-shrink: 0;

  /* ✨ 핵심: 좌우에 12px(원하는 만큼)의 여백을 추가합니다. ✨ */
  margin-left: 12px;
  margin-right: 12px;

  /* 위 두 줄을 한 줄로 표현: */
  /* margin: 0 12px; */
}

.quick-buttons {
  display: flex;
  gap: 6px;
}

.quick-btn {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.quick-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.quick-btn.active {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

/* Table */
.table-container {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.5);
  /* overflow-x: auto; */
}

th,
td {
  padding: 16px;
  font-size: 14px;
  color: #cbd5e1;
  text-align: center;
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
  border-right: 1px solid rgba(51, 65, 85, 0.3);
}

th {
  font-size: 14px;
  /* font-weight: 600; */
  color: #94a3b8;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.8);
  /* position: sticky; */
  top: 0;
  z-index: 10;
  text-align: center;
}

.sticky-col {
  /* position: sticky; */
  left: 0;
  background: rgb(15, 23, 42, 0.8) !important;
  white-space: nowrap;
  /* z-index: 11; */
  /* 너비는 기본 CSS에서 지정, JS에서 제어하지 않도록 */
  width: 220px; /* 명확히 고정으로 지정 */
}

.sticky-col-2 {
  position: sticky;
  left: 220px;
  background: rgb(15, 23, 42) !important;
  white-space: nowrap;
  z-index: 11;
  min-width: 80px;
  max-width: 300px;
  text-align: center;
  font-size: 14px;
  /* font-weight: 600; */
  border-right: 1px solid rgba(51, 65, 85, 0.3);
  border-bottom: 1px solid rgba(51, 65, 85, 0.5);
}

/* 제품 정보 컬럼 (테이블 헤더 부분만 중앙 정렬 및 강조) */
thead th.sticky-col {
  text-align: center !important;
  font-size: 14px;
  /* font-weight: 600; */
}

/* 키워드 실제 텍스트 셀 */
.keyword-cell {
  font-size: 14px;
  /* font-weight: 600; */
  color: #cbd5e1;
  white-space: nowrap;
  text-align: center;
  overflow: visible;
  border: none;
}

/* 제품 그룹 행 아래쪽 얇은 선 */
.product-group-even td,
.product-group-odd td {
  border-bottom: 1px solid rgba(72, 94, 121, 0.4); /* 연한 푸른색 선 */
}

/* 제품 그룹 경계: 진한 파란색 두꺼운 상단 테두리 */
.product-group-odd + .product-group-even td,
.product-group-even + .product-group-odd td {
  border-top: 20px solid rgba(72, 94, 121, 0.4) !important; /* 진한 파란색, 주요 구분선 */
}

/* 호버 시 강조 색 */
/* tbody tr:hover td,
tbody tr:hover .sticky-col,
tbody tr:hover .sticky-col-2 {
  background: #36567a !important;
} */

/* 테이블 */
table {
  border-collapse: collapse;
  table-layout: auto; /* 추가 */
  width: auto; /* 추가 */
}

/* 날짜 컬럼 */
/* th:not(.sticky-col):not(.sticky-col-2) {
  width: 90px !important;
  min-width: 100px !important;

} */

td:not(.sticky-col):not(.sticky-col-2) {
  /* width: 90px !important; */
  /* min-width: 100px !important;
  max-width: 100px !important; */
  white-space: nowrap;
  overflow: hidden;
}

tbody tr {
  transition: background 0.2s;
}

/* tbody tr:hover {
  background: rgba(51, 65, 85, 0.3);
} */

/* 제품 정보 */
.product-info {
  display: inline-flex; /* 변경 */
  align-items: center;
  gap: 12px;
  white-space: nowrap; /* 추가 */
}

/* 제품 이미지 */
.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  background: #1e293b;
  flex-shrink: 0;
  border: 1px solid #334155;
}

/* 이미지 로딩 실패 시 대체 아이콘 */
.product-image-fallback {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
  border: 1px solid #334155;
}

.product-details {
  display: inline-flex; /* 변경 */
  flex-direction: column;
  gap: 4px;
  white-space: nowrap; /* 추가 */
}

/* 제품명 */

.product-name {
  font-size: 14px;
  text-align: left;
  /* font-weight: 600; */
  color: #e2e8f0;
  white-space: nowrap;
  word-wrap: break-word;
  line-height: 20px;
  /* line-height:  1.4; */
  display: inline-block; /* 추가 */

  cursor: pointer; /* 손가락 모양 커서 */
  padding: 4px 4px; /* 호버 시 배경색이 너무 딱 붙지 않게 여백 */
  border-radius: 4px; /* 둥근 모서리 */
  transition: background-color 0s; /* 부드러운 전환 */
}

/* 호버 시 배경색 (재고 셀과 동일하게) */
.product-name:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* .keyword-cell {
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} */

/* Rank Display */
.rank-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #cbd5e1;
}

.rank-badge {
  font-size: 14px;
  /* font-weight: 500; */
  color: #cbd5e1;
}

/* ★★★ 요청하신 고정 크기 및 클릭 영역 설정 ★★★ */
.rank-badge[data-keyword] {
  display: inline-flex; /* 내부 컨텐츠(숫자)를 중앙 정렬하기 위해 flex 사용 */
  justify-content: center;
  align-items: center;
  width: 50px; /* 고정 너비 */
  height: 50px; /* 고정 높이 */
  cursor: pointer; /* 클릭 가능한 커서 모양 */
}

/* Loading */
.loading-spinner {
  text-align: center;
  padding: 60px;
  color: #64748b;
  font-size: 14px;
}

/* Responsive */
@media (max-width: 1200px) {
  .container {
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-filters,
  .actions {
    width: 100%;
    justify-content: flex-start;
  }

  .date-inputs {
    flex-wrap: wrap;
  }

  .quick-buttons {
    flex-wrap: wrap;
  }
}

/* Time Filter Buttons */
.time-filter {
  display: flex;
  gap: 6px;
}

.time-btn {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.time-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.time-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Device Filter Buttons (디바이스 선택 버튼) */
.device-filter {
  display: flex;
  gap: 6px;
}

.device-btn {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.device-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}

.device-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.device-highlight {
  color: #09ff00; /* 선명한 파란색 */
  font-weight: 700;
}

.time-highlight {
  color: #00ffaa; /* 선명한 초록색 */
  font-weight: 700;
}

.sticky-col-2 {
  background: rgb(15, 23, 42) !important; /* 투명도 제거 */
}

.product-info {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}

.product-details {
  flex: 1;
  min-width: 0;
}

.favorite-btn {
  background: none;
  border: none;
  font-size: 24px; /* 아이콘 크기 증가 */
  cursor: pointer;
  color: #5d6f8a; /* 비활성 별 색상 */
  padding: 20px 20px; /* 클릭 영역 확보 */
  flex-shrink: 0;
  /* margin-left: 8px; */
  line-height: 1;
  transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.favorite-btn:hover {
  color: #e2e8f0; /* 호버 시 밝은 색상 */
  /* transform: scale(1.05); 호버 시 아이콘 확대 */
}

.favorite-btn.active {
  color: #cca952; /* 활성화 시 노란색 */
  text-shadow: 0 0 8px rgba(251, 253, 219, 0.3); /* 네온 효과 */
}

/* .favorite-btn:active {
  transform: scale(0.95); 클릭 시 아이콘 축소 (눌리는 효과)
  transition-duration: 0.1s;
} */

/* 활성화된 버튼을 클릭할 때의 스타일 */
.favorite-btn.active:active {
  color: #fceb00; /* 더 진한 노란색으로 변경 */
}

/* =============================
   MODAL POPUP + TABLE 최종 정돈본 (폰트·강조·헤더 중앙, 라운딩·색 일반 유지)
   ============================= */

/* --- Overlay --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(30, 41, 59, 0.68);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-fade-in 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modal-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* --- Modal Content --- */
.modal-content {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  border-radius: 16px;
  border: 1px solid rgba(51, 65, 85, 0.55);
  /* box-shadow: 0 8px 38px rgba(30, 41, 59, 0.32); */
  width: 95vw;
  max-width: 1260px;
  min-width: 430px;
  padding: 34px 40px 20px;
  color: #cbd5e1;
  font-size: 14px;
  overflow: hidden;
}

/* --- Modal Header --- */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 양끝 정렬 */
  position: relative; /* 제목 절대 위치를 위해 */
  border-bottom: 1px solid rgba(51, 65, 85, 0.35);
  padding-bottom: 8px;
  margin-bottom: 20px;
}
.header-left-group,
.header-right-group {
  display: flex;
  align-items: center;
  min-width: 120px; /* 최소 너비 확보 (EXP 뱃지 크기 고려) */
}
.modal-header h3 {
  flex: 1;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  color: inherit;
  background: none;
}
/* 우측 그룹은 오른쪽 정렬 */
.header-right-group {
  justify-content: flex-end;
}
.close-btn {
  font-size: 1.8rem;
  color: #94a3b8;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.close-btn:hover {
  color: #e2e8f0;
}

/* --- Modal Body --- */
.modal-body {
  /* 기존 스타일 유지 */
  max-height: 80vh;
  /* overflow-y: auto; */
  /* padding-right: 4px; */

  /* ★ 추가: 높이 자동 조절 및 불필요한 여백 제거 */
  height: auto;
  flex: 0 1 auto; /* ★ 수정: 1 -> 0 (내용물 크기만큼만 차지) */
}
/* 모달 내부 불필요한 여백 제거 */
.modal-body table {
  margin-bottom: 0;
}
.modal-body::-webkit-scrollbar {
  width: 10px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #35405b;
  border-radius: 8px;
}
.modal-body::-webkit-scrollbar-track {
  background: #232b3a;
}

.modal-content {
  /* 기존 스타일 유지 */
  max-height: 90vh;
  display: flex;
  flex-direction: column;

  /* ★ 추가: 내용물만큼만 커지도록 설정 */
  height: auto;
}

/* ★ 추가: 모달 바닥의 불필요한 여백 제거 */
/* .modal-body > :last-child {
  margin-bottom: 0 !important;
} */
/* =============================
   TABLE (라운드 효과 유지, 폰트·강조·헤더 중앙 일관)
   ============================= */
.detail-rank-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(30, 41, 59, 0.6);
  /* font-family: "Inter", "Noto Sans KR", sans-serif; */
  box-shadow: 0 2px 12px rgba(23, 28, 48, 0.1);

  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(51, 65, 85, 0.5);
  overflow-x: auto;
}

/* 폰트 크기·강조 일괄 통일 + 헤더 완전 중앙정렬 */
.detail-rank-table th,
.detail-rank-table td {
  padding: 12px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #343e56 !important;
  background: transparent;
  text-align: center !important;
  white-space: nowrap;
  vertical-align: middle !important;
}

/* 순위 컬럼: 현재 폭 그대로 유지 */
.detail-rank-table th.rank-col,
.detail-rank-table td.rank-col {
  min-width: 66px !important;
  width: 66px !important; /* 고정 폭 */
  text-align: center !important;
}

/* 가격 컬럼: 콘텐츠 너비에 맞춤 */
.detail-rank-table th.price-col,
.detail-rank-table td.price-col {
  width: auto !important; /* 내용에 맞게 자동 */
  max-width: none !important; /* 제한 해제 */
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}

/* 카테고리 컬럼: 콘텐츠 너비에 맞춤 */
.detail-rank-table th.category-col,
.detail-rank-table td.category-col {
  width: auto !important; /* 내용에 맞게 자동 */
  max-width: none !important;
  text-align: center !important;
}

/* 상품명 컬럼: 나머지 공간 전체 차지 */
.detail-rank-table th.prodname-col,
.detail-rank-table td.prodname-col {
  min-width: 120px !important;
  width: 100% !important; /* 남는 공간 모두 차지 */
  text-align: center !important;
}

/* 광고 row */
.detail-rank-table .my-ad-row {
  background: #2c3448 !important;
  color: #ffd755 !important;
  font-weight: 400 !important;
}

/* 행 hover */
.detail-rank-table tbody tr:hover {
  background: #283b58 !important;
  transition: background 0.16s;
}

/* 이미지 크게, 둥글기 그대로 */
.detail-rank-table td img {
  width: 65px !important;
  height: 65px !important;
  border-radius: 9px;
  object-fit: cover;
  margin-right: 12px;
  background: #282e3a;
  border: 1px solid #212843;
  vertical-align: middle;
}

/* 테이블 둥글게 효과 유지 */
.detail-rank-table thead th:first-child {
  border-top-left-radius: 10px;
}
.detail-rank-table thead th:last-child {
  border-top-right-radius: 10px;
}
.detail-rank-table tr:last-child td {
  border-bottom: 0 !important;
}
.detail-rank-table td:last-child,
.detail-rank-table th:last-child {
  border-right: 0 !important;
}

/* 헤더 sticky 모두 해제 */
.detail-rank-table th {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* 모든 칼럼 크기/굵기/폰트 완전 통레일 */
.detail-rank-table td,
.detail-rank-table th {
  /* font-family: "Noto Sans KR", "Inter", sans-serif !important; */
  font-size: 14px !important;
  font-weight: 400 !important;
  background: transparent;
}

.popup-product-name {
  color: #e2e8f0;
}
.detail-rank-table .my-ad-row td.prodname-col .popup-product-name {
  color: #ffd755 !important;
}

.detail-rank-table th {
  padding: 16px !important;
  background-color: rgb(15, 23, 42) !important;
}

#modalTitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
  width: auto;
  white-space: nowrap;
  margin-bottom: 14px;
}

.modal-content {
  padding: 40px 34px 34px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-spacer {
  width: 50px; /* 버튼 예상 너비와 동일하게 맞춤 */
  visibility: hidden; /* 공간만 차지, 실제로는 안 보임 */
}

.close-btn {
  width: 50px; /* 명확히 고정폭 설정 */
  padding-top: 3px;
  cursor: pointer;
}

#modalTitle {
  flex: 1;
  text-align: center; /* 확실한 중앙 정렬 */
  margin: 0;
}

/* ✨ (추가) header의 좌/우 영역 스타일 */
.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 20px; /* 기존 header의 gap 값을 여기에 적용 */
  height: 43px;
}

/* ✨ (추가) 네이버쇼핑/파워링크 버튼 그룹 스타일 */
.search-type-filter {
  display: flex;
  gap: 6px;
}

/* ✨ (추가) 네이버쇼핑/파워링크 버튼 개별 스타일 */
.search-type-btn {
  background: #1e293b;
  color: #e2e8f0;
  border: 1px solid #334155;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}

.search-type-btn:hover {
  background: #2563eb;
  border-color: #2563eb;
}

/* 활성화된 버튼에는 주황색 계열 그라데이션 적용 */
.search-type-btn.active {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-color: transparent;
  /* box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3); */
}

/* History Button */
.simple-btn {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
}
.simple-btn:hover {
  background: #334155;
  color: white;
  border-color: #64748b;
}

/* Group Divider (유통기한 시작 컬럼 왼쪽 선 강조) */
.group-start {
  border-left: 2px solid rgba(71, 85, 105, 0.6) !important;

  /* 너비 강제 적용을 위한 3단 콤보 */
  width: 140px !important;
  min-width: 140px !important;
  max-width: 140px !important; /* 고정폭을 원할 경우 max-width까지 */

  /* 내용이 넘칠 경우 처리 (선택사항) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 컬럼 너비 강제 제어 예시 */
.col-date {
}

.col-dday {
  width: 92px;
  min-width: 92px;
}

.col-stock {
  width: 90px;
  min-width: 90px;
}

.col-history {
  width: 60px;
  min-width: 60px;
}

/* Status Background Colors (남은일수 셀 전용) */
/* 기존 순위 페이지의 'rank-badge' 컬러톤과 조화롭게 */
.bg-danger {
  /* background-color: rgba(220, 38, 38, 0.2) !important; */
  color: #972929;
  font-weight: 700;
} /* Red */
.bg-warning {
  /* background-color: rgba(234, 88, 12, 0.2) !important; */
  color: #d4c70b;
  font-weight: 300;
} /* Orange */
.bg-safe {
  /* background-color: rgba(22, 163, 74, 0.2) !important; */
  color: #19aa4e;
} /* Green */
.bg-infinity {
  color: #cbd5e1;
} /* Gray */
.bg-disuse {
  color: #6e4c4c;
} /* Gray */

/* 타입 구분선 (MAIN과 GIFT 사이) */
.type-divider td {
  border-top: 20px solid rgba(72, 94, 121, 0.4) !important;
}

/* (참고) Sticky 컬럼도 같이 내려가야 하므로 sticky-col에도 적용 */
.type-divider .sticky-col {
  border-top: 20px solid rgba(72, 94, 121, 0.4) !important;
  background-clip: padding-box; /* 배경색이 border 영역 침범 방지 */
}

/* 사유 선택 메뉴 */
/* .reason-menu {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  padding: 8px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reason-header {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
  text-align: center;
}
.reason-btn {
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}
.reason-btn:hover {
  background: #334155;
}
.reason-btn.cancel {
  color: #f87171;
  border-top: 1px solid #334155;
  margin-top: 4px;
} */

/* 일반 셀의 클릭 감도 높이기 */
#inventoryTable td:not(.sticky-col) {
  position: relative;
  z-index: 5; /* 헤더(10)보다는 낮게, 바닥보다는 높게 */
}

/* 재고 숫자 래퍼 (클릭 타겟) */
.stock-val {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 24px; /* 클릭 영역 확보 */
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  transition: background-color 0s; /* 부드러운 전환 */
}
.stock-val:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 호버 효과 */
}

/* 이력 테이블 */
.history-table {
  width: 100%;
  border-collapse: collapse;
  /* margin-top: 10px; */
  font-size: 13px;
}

.history-table th {
  background: #0f172a;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 16px;
  color: #94a3b8;
  text-align: center;

  /* 상단/하단/우측 보더 */
  /* border-top: 1px solid #475569; */
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  border-right: 1px solid rgba(51, 65, 85, 0.35); /* 세로선 아주 연하게 */
}

.history-table td {
  padding: 14px;
  text-align: center;
  vertical-align: middle;

  /* 하단/우측 보더 */
  border-bottom: 1px solid rgba(51, 65, 85, 0.35);
  border-right: 1px solid rgba(51, 65, 85, 0.35);
}

/* ★★★ 맨 오른쪽 세로선 제거 ★★★ */
.history-table th:last-child,
.history-table td:last-child {
  border-right: none;
}

/* 테이블 마지막 행 하단 보더 강조 */
.history-table tr:last-child td {
  border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
}

/* 수량 색상 */
.text-blue {
  color: #5798e7;
} /* 파랑 */
.text-red {
  color: #e47053;
} /* 빨강 */

/* 모달 바디 스크롤바 커스텀 (선택사항) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 4px;
}

/* 페이지네이션 컨테이너 */
.pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 32px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* 페이지 버튼 */
.page-btn {
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: #94a3b8;
  min-width: 30px;
  height: 30px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.page-btn:hover {
  background: #334155;
  color: #e2e8f0;
}

.page-btn.active {
  background: #0f172a;
  border-color: rgb(68 88 117);
  color: #e2e8f0;

  font-weight: bold;
}

/* 주문번호 링크 스타일 */
.order-link {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s;
}

.order-link:hover {
  color: #60a5fa; /* 호버 시 파란색 하이라이트 */
  text-decoration: underline;
  cursor: pointer;
}

/* 주문번호 링크 스타일 */
.order-link2 {
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.2s;
}

.order-link2:hover {
  color: #60a5fa; /* 호버 시 파란색 하이라이트 */
  text-decoration: underline;
  cursor: pointer;
}

.popup-menu {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 12px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
}

/* 사유 선택 통합 팝업 */
.reason-menu {
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  padding: 12px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reason-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reason-btn {
  background: transparent;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  /* transition: all 0.05s; */
}

.reason-btn:hover {
  background: #334155;
  color: #fff;
}

/* 선택된 사유 강조 */
.reason-btn.selected {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
  font-weight: bold;
}

/* 비고 입력창 */
.reason-note-input {
  width: 100%;
  background: #0f172a;
  border: 1px solid #475569;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  font-size: 12px;
  outline: none;
}
.reason-note-input:focus {
  border-color: #60a5fa;
}

/* 하단 액션 버튼 */
.reason-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.action-btn {
  flex: 1;
  padding: 6px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  border: none;
  font-weight: bold;
}

.action-btn.confirm {
  background: #3b82f6;
  color: white;
}
.action-btn.cancel {
  background: #334155;
  color: #94a3b8;
}

/* 수정 가능한 셀 래퍼 */
.editable-cell {
  display: block; /* 한 줄 전체 차지 */
  width: 100%; /* 부모 요소의 가로폭을 모두 사용 */
  min-width: 20px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  /* transition: background-color 0.2s; */
}

.editable-cell:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 호버 효과 */
}

/* 달력 그리드 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-top: 15px;
}
.cal-day-header {
  text-align: center;
  font-weight: bold;
  color: #94a3b8;
  padding: 5px;
}
.cal-cell {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 6px;
  min-height: 80px; /* 높이 확보 */
  padding: 5px;
  cursor: pointer;
  transition: background 0.2s;
}
.cal-cell:hover {
  background: #334155;
}
.cal-cell.today {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.cal-dot {
  font-size: 12px;
  color: #60a5fa;
  margin-top: 4px;
}

/* 달력 컨트롤 */
.calendar-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* 빈 날짜 칸 숨기기 */
.cal-cell.empty {
  background: transparent;
  border: none;
  pointer-events: none; /* 클릭 방지 */
  cursor: default;
}

/* 탭 버튼 스타일 */
.view-type-btn {
  background: #1e293b;
  color: #94a3b8;
  border: 1px solid #475569;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  /* font-weight: bold; */
  transition: all 0.2s;
}
.view-type-btn:hover {
  background: #334155;
  color: #fff;
}
.view-type-btn.active {
  background: linear-gradient(135deg, #346fce 0%, #194fa5 100%);
  border-color: #3371d4;
  color: white;
}

/* 대형 달력 스타일 */
.calendar-wrapper {
  background: #1e293b;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #334155;
  min-height: 80vh;
}

.cal-header-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.cal-header-controls h2 {
  color: #fff;
  margin: 0;
}
.cal-nav-btn {
  background: transparent;
  border: 1px solid #475569;
  color: #fff;
  padding: 5px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* 그리드 확장 */
.calendar-grid-large {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: #475569; /* 그리드 선 색상 */
  border: 1px solid #475569;
}

.cal-day-header {
  background: #0f172a;
  color: #94a3b8;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.cal-cell-large {
  background: #1e293b;
  min-height: 120px; /* 높이 시원하게 */
  padding: 10px;
  cursor: pointer;
  transition: background 0.2s;
  position: relative;
}
.cal-cell-large:hover {
  background: #334155;
}
.cal-cell-large.today {
  background: rgba(59, 130, 246, 0.1);
}
.cal-cell-large.empty {
  background: #162030;
  cursor: default;
  pointer-events: none;
}

.date-num {
  font-size: 14px;
  font-weight: bold;
  color: #e2e8f0;
  margin-bottom: 5px;
}
.count-badge {
  display: block;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
  text-align: center;
}

/* 날짜 컨트롤바 */
.history-filters {
  justify-content: center; /* 중앙 정렬 */
  gap: 30px;
}

.date-control {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0f172a;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #334155;
}

.date-input-large {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
}
.date-input-large::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.nav-btn,
.today-btn {
  background: #1e293b;
  border: 1px solid #475569;
  color: #e2e8f0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-btn:hover,
.today-btn:hover {
  background: #334155;
  color: #fff;
}

/* 상단 요약 뱃지 (흔들림 방지) */
.summary-badge {
  font-size: 14px;
  color: #94a3b8;
  background: #1e293b;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #334155;

  /* ★★★ [추가] 너비 고정 및 정렬 ★★★ */
  min-width: 240px; /* 내용이 적어도 이만큼 공간 차지 */
  text-align: center; /* 텍스트 중앙 정렬 */
  display: inline-block; /* 너비 적용을 위해 */
  white-space: nowrap; /* 줄바꿈 방지 */
}

/* 날짜 컨트롤바 레이아웃 고정 */
.history-filters {
  justify-content: center;
  gap: 30px;
  /* 요소들이 수직 중앙 정렬되도록 확실하게 */
  align-items: center;
}

/* 메인 히스토리 테이블 */
.history-table-main {
  width: 100%;
  border-collapse: collapse;
}
.history-table-main th {
  /* background: #1e293b99; */
  /* position: sticky; */
  top: 0;
}

/* 타입 뱃지 (ORDER, RESTOCK 등) */
.type-badge {
  font-size: 11px;
  padding: 4px 8px; /* 조금 더 여유 있게 */
  border-radius: 4px;
  font-weight: bold; /* 글자 강조 */
  background: #334155; /* 기본값 */
  color: #cbd5e1;
  display: inline-block;
  min-width: 40px;
  text-align: center;
}

/* 빛이 지나가는 애니메이션 정의 */
@keyframes shineEffect {
  0% {
    left: -100%; /* 시작 */
  }
  /* 계산식: (0.7초 / 12.6초) * 100 ≈ 4.76% 
     0.6초 동안 이동하고 나머지 12초는 대기합니다.
  */
  5.55% {
    left: 200%; /* 이동 완료 */
  }
  100% {
    left: 200%; /* 나머지 대기 */
  }
}

.type-ORDER {
  border: 0px solid transparent;
  /* [배경색] */
  background: #251a00;
  color: #f7e07a;

  /* [테두리 대체 - box-shadow] */
  box-shadow: inset 0 0 0 1px #e6c200, 0 0 10px rgba(255, 237, 133, 0.3),
    inset 0 0 5px rgba(255, 237, 133, 0.154);

  /* [필수 속성] */
  position: relative;
  overflow: hidden;
  font-weight: 400 !important;

  /* [크기/패딩 고정] */
  height: 26px !important;
  width: 41.13px !important;
  padding: 0 8px !important;

  /* [레이아웃 정렬] */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  box-sizing: border-box;
  line-height: 2;
}

/* 빛줄기 (가상 요소) */
.type-ORDER::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: skewX(-25deg);

  /* 애니메이션 실행 시간 (12.6s), 딜레이 (0.2s), 반복 횟수 (1회), 종료 상태 유지 (forwards), 타이밍 함수 (linear) */
  animation: shineEffect 12.6s 0.1s 1 forwards linear;
}

/* 2. 입고 (RESTOCK) - 신뢰의 파란색 */
.type-RESTOCK {
  background: rgba(59, 130, 246, 0.2); /* Blue-500 tint */
  color: #60a5fa; /* Blue-400 text */
  border: 1px solid rgba(59, 130, 246, 0.3);

  /* [추가] 수직/수평 정렬을 위한 필수 설정 */
  display: inline-flex; /* 내부 요소를 flex로 제어 + 본인은 inline처럼 배치 */
  align-items: center; /* ✨ 수직 중앙 정렬 핵심 */
  justify-content: center; /* (선택사항) 가로도 중앙 정렬 하려면 추가 */
  height: 26px;
  /* [추가] 폰트 자체의 위아래 여백 제거 (선택사항) */
  /* 이걸 넣어야 align-items: center가 시각적으로 더 정확해집니다 */
  line-height: 1;
  padding-bottom: 5px;
}

/* 2. 사은품 (GIFT) - 특별함의 보라 */
.type-GIFT {
  background: rgba(34, 197, 94, 0.2); /* Green-500 tint */
  color: #4ade80; /* Green-400 text */
  border: 1px solid rgba(34, 197, 94, 0.3);

  /* [추가] 수직/수평 정렬을 위한 필수 설정 */
  display: inline-flex; /* 내부 요소를 flex로 제어 + 본인은 inline처럼 배치 */
  align-items: center; /* ✨ 수직 중앙 정렬 핵심 */
  justify-content: center; /* (선택사항) 가로도 중앙 정렬 하려면 추가 */
  height: 26px;
  /* [추가] 폰트 자체의 위아래 여백 제거 (선택사항) */
  /* 이걸 넣어야 align-items: center가 시각적으로 더 정확해집니다 */
  line-height: 1;
  padding-bottom: 5px;
}
/* .type-GIFT {
  background: rgba(20, 184, 166, 0.2); 
  color: #2dd4bf; 
  border: 1px solid rgba(20, 184, 166, 0.3);
} */
/* 4. 반품 (RETURN) - 주의의 주황색 */
.type-RETURN {
  background: rgba(247, 124, 36, 0.2); /* Orange-500 tint */
  color: #fb923c; /* Orange-400 text */
  border: 1px solid rgba(249, 115, 22, 0.3);

  /* [추가] 수직/수평 정렬을 위한 필수 설정 */
  display: inline-flex; /* 내부 요소를 flex로 제어 + 본인은 inline처럼 배치 */
  align-items: center; /* ✨ 수직 중앙 정렬 핵심 */
  justify-content: center; /* (선택사항) 가로도 중앙 정렬 하려면 추가 */
  height: 26px;
  /* [추가] 폰트 자체의 위아래 여백 제거 (선택사항) */
  /* 이걸 넣어야 align-items: center가 시각적으로 더 정확해집니다 */
  line-height: 1;
  padding-bottom: 5px;
}

/* 5. 손실 (LOSS) - 경고의 빨간색 */
.type-LOSS {
  background: rgba(239, 68, 68, 0.2); /* Red-500 tint */
  color: #f87171; /* Red-400 text */
  border: 1px solid rgba(239, 68, 68, 0.3);

  /* [추가] 수직/수평 정렬을 위한 필수 설정 */
  display: inline-flex; /* 내부 요소를 flex로 제어 + 본인은 inline처럼 배치 */
  align-items: center; /* ✨ 수직 중앙 정렬 핵심 */
  justify-content: center; /* (선택사항) 가로도 중앙 정렬 하려면 추가 */
  height: 26px;
  /* [추가] 폰트 자체의 위아래 여백 제거 (선택사항) */
  /* 이걸 넣어야 align-items: center가 시각적으로 더 정확해집니다 */
  line-height: 1;
  padding-bottom: 5px;
}

/* 6. 조정 (ADJUST) - 중립적인 회색 */
.type-ADJUST {
  background: rgba(100, 116, 139, 0.2); /* Slate-500 tint */
  color: #94a3b8; /* Slate-400 text */
  border: 1px solid rgba(100, 116, 139, 0.3);

  /* [추가] 수직/수평 정렬을 위한 필수 설정 */
  display: inline-flex; /* 내부 요소를 flex로 제어 + 본인은 inline처럼 배치 */
  align-items: center; /* ✨ 수직 중앙 정렬 핵심 */
  justify-content: center; /* (선택사항) 가로도 중앙 정렬 하려면 추가 */
  height: 26px;
  /* [추가] 폰트 자체의 위아래 여백 제거 (선택사항) */
  /* 이걸 넣어야 align-items: center가 시각적으로 더 정확해집니다 */
  line-height: 1;
  padding-bottom: 5px;
}

/* 탭 뷰 컨테이너 */
.main-view {
  width: 100%;
  animation: fadeIn 0.3s ease-in-out;
}

/* @keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

/* (기존 코드에 이미 있지만 확인) */
.container {
  max-width: 1800px;
  margin: 0 auto;
  /* padding-bottom: 50px;  여백 추가 */
}

/* 모달 헤더 유통기한 뱃지 */
.exp-badge {
  font-size: 13px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #334155;
  white-space: nowrap;
}

/* 총재고 상세 보기 버튼 */
.stock-detail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4px;
  min-height: 24px; /* 클릭 영역 확보 */
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0s; /* 부드러운 전환 */
}

.stock-detail-btn:hover {
  background-color: #ffffff1a;
}

/* 기본 행 스타일 (배경색 통일, 테두리 연하게) */
.history-table tr {
  background-color: transparent;
}
.history-table td {
  border-top: 1px solid rgba(51, 65, 85, 0.3); /* 아주 연한 기본선 */
}

/* 그룹 구분선 (하단) */
.group-end-row td {
  /* 두께 2px -> 3px로 키움, 색상도 더 명확하게 */
  border-bottom: 1px solid rgba(72, 94, 121, 0.4) !important;
}

/* tbody tr:last-child.group-end-row td {
  border-bottom: 1px solid rgba(51, 65, 85, 0.5) !important;
} */

/* 특정 테이블에만 더 연한 테두리 적용 */
#dailyHistoryTable th,
#dailyHistoryTable td {
  border-bottom: 1px solid rgba(51, 65, 85, 0.3); /* 0.5 -> 0.3 */
  border-right: 1px solid rgba(51, 65, 85, 0.3);
}

/* 마지막 행 보더 처리도 이 테이블에만 적용 */
/* #dailyHistoryTable tbody tr:last-child.group-end-row td {
  border-bottom: 0px solid rgba(51, 65, 85, 0.3) !important;
} */

table tbody tr:last-child td {
  border-bottom: 0px solid rgba(51, 65, 85, 0.5) !important;
}

/* --- [수정] 타입 선택 버튼 그룹 --- */
.type-edit-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: #1e293b;
  padding: 6px;
  border: 1px solid #475569;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  z-index: 100;

  /* ★★★ 위치 제어는 여기서 합니다 ★★★ */
  position: absolute; /* 둥둥 뜨게 설정 */

  /* 1. 뱃지 바로 아래 중앙에 띄우기 */

  /* 2. (대안) 뱃지 바로 오른쪽에 띄우기 */

  margin-top: 30px;
  margin-left: -48px;
}

/* --- [수정] 개별 선택 버튼 (기존 뱃지 스타일 상속) --- */
.type-select-btn {
  /* 기존 .type-badge 스타일과 동일하게 맞춤 */
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  min-width: 40px;
  text-align: center;
  cursor: pointer;

  /* 2. ★핵심★ 배경과 테두리를 제거해야 
       함께 붙는 클래스(type-ORDER, type-LOSS 등)의 색상이 보입니다. */
  /* background: transparent; */
  /* border는 type-ORDER 등의 클래스에서 1px solid ... 로 정의되어 있으므로 여기선 건드리지 않거나 inherit */
  /* border: 1px solid transparent; */

  /* 기본 버튼 스타일 초기화 */
  appearance: none;
  -webkit-appearance: none;

  transition: transform 0.1s ease, filter 0.1s ease;
}

/* 호버 효과 */
.type-select-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.1); /* 살짝 밝게 */
}

/* 현재 선택된 타입 강조 (하얀 테두리) */
.type-select-btn.active {
  box-shadow: 0 0 0 1.5px #fff;
  z-index: 1;
}

/* 취소 버튼 (X) */
.type-cancel-btn {
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 11px;
  margin-left: 4px;
}
.type-cancel-btn:hover {
  background: #334155;
  color: #fff;
}