@charset "utf-8";

/* ==========================================================================
   AUTO SPORTS PLUGIN - DARK THEME ONLY (style.dark.css)
   Target Color: #2c3e50 (Prime)
   ========================================================================== */

:root {
  /* [다크 전용 컬러 팔레트] */
  --sp-primary: #2c3e50; /* 프라임 컬러 (네이비) */
  --sp-accent: #e74c3c; /* 강조 컬러 (레드) */

  --sp-bg-body: #121212; /* 전체 배경 (아주 어두움) */
  --sp-bg-card: #1f1f1f; /* 카드/박스 배경 */
  --sp-bg-element: #2b2b2b; /* 버튼/입력창 배경 */

  --sp-border: #444; /* 테두리 색상 */
  --sp-text-main: #eee; /* 본문 텍스트 (흰색에 가까움) */
  --sp-text-sub: #aaa; /* 보조 텍스트 (회색) */

  /* 승무패 색상 */
  --sp-win: #e74c3c;
  --sp-draw: #7f8c8d;
  --sp-lose: #3498db;
}

/* 1. 컨테이너 및 공통 텍스트 */
.sp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px;
  font-family: "Noto Sans KR", sans-serif;
  color: var(--sp-text-main);
}

/* 2. 상단 내비게이션 & 헤더 */
.sp-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
.sp-nav a {
  text-decoration: none;
  color: var(--sp-text-main);
  font-weight: bold;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--sp-bg-element);
  border: 1px solid var(--sp-border);
  transition: 0.2s;
}
.sp-nav a:hover {
  background: var(--sp-primary); /* 프라임 컬러 */
  border-color: var(--sp-primary);
  color: #fff;
}
.sp-date {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

/* 3. [핵심] 탭 버튼 (가시성 완벽 해결) */
.sp-tabs {
  margin-bottom: 20px;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 5px;
}
.sp-tab {
  display: inline-block;
  padding: 10px 20px;
  margin-right: 6px;
  border-radius: 4px; /* 라운드 약간 줄임 (모던함) */

  /* [기본 상태] 어두운 회색 배경 + 밝은 글씨 */
  background-color: var(--sp-bg-element) !important;
  color: var(--sp-text-sub) !important;
  border: 1px solid var(--sp-border) !important;

  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* [선택된 상태] 프라임 컬러 or 레드 */
.sp-tab.active {
  background-color: var(--sp-accent) !important; /* 활성탭은 붉은색으로 강조 */
  color: #fff !important;
  border-color: var(--sp-accent) !important;
  font-weight: bold;
}

/* [마우스 오버] 프라임 컬러 */
.sp-tab:hover {
  background-color: var(--sp-primary) !important; /* 프라임 컬러 */
  color: #fff !important;
  border-color: var(--sp-primary) !important;
}

/* 4. 경기 리스트 테이블 (카드형) */
.sp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* 카드 간격 벌림 */
}
.sp-row {
  background: var(--sp-bg-card); /* 카드 배경 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid var(--sp-border); /* 테두리 명확하게 */
}
.sp-row td {
  padding: 15px 10px;
  border: none; /* 내부 선 제거 (깔끔하게) */
  vertical-align: middle;
  color: var(--sp-text-main);
}
/* 첫번째/마지막 셀 둥글게 */
.sp-row td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.sp-row td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* 5. 내부 요소 스타일 */
.info-box {
  text-align: center;
  min-width: 60px;
}
.sp-time {
  display: block;
  font-size: 13px;
  color: var(--sp-accent); /* 시간은 붉은색 or 밝은색 */
  margin-bottom: 5px;
  font-family: "Roboto", sans-serif;
}
.sp-sport-badge {
  display: inline-block;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  color: #fff;
  background: var(--sp-primary); /* 뱃지에 프라임 컬러 적용 */
}

/* 팀 이름 */
.team-box {
  text-align: left;
  padding-left: 15px;
  border-left: 1px solid var(--sp-border);
}
.sp-league {
  font-size: 11px;
  color: var(--sp-text-sub);
  display: block;
  margin-bottom: 6px;
}
.sp-team-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sp-team-name {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
} /* 팀명 완전 흰색 */
.sp-score {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: var(--sp-accent);
}

/* 배당률 버튼 */
.odds-container {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.odds-btn {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
  background: var(--sp-bg-element); /* 버튼 배경 */
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.odds-btn:hover {
  background: var(--sp-primary); /* 호버 시 프라임 컬러 */
  border-color: var(--sp-primary);
}
.od-label {
  font-size: 11px;
  color: var(--sp-text-sub);
}
.odds-btn:hover .od-label {
  color: #ccc;
} /* 호버 시 라벨 밝게 */
.od-rate {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}

/* 분석 아이콘 */
.anal-box {
  text-align: center;
}
.btn-anal {
  font-size: 22px;
  color: var(--sp-text-sub);
  transition: 0.3s;
}
.btn-anal.on {
  color: var(--sp-lose);
} /* 완료 시 파란색 */
.btn-anal:hover {
  color: var(--sp-accent);
  transform: scale(1.1);
}

/* 6. 안내 박스 */
.user-guide-box {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-primary); /* 안내 박스 테두리를 프라임 컬러로 */
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 25px;
  color: var(--sp-text-sub);
}
.user-guide-box h4 {
  color: #fff;
  margin-top: 0;
}
.user-guide-box strong {
  color: var(--sp-accent);
}

/* 7. 베팅 슬립 (하단) */
#bet_slip_layer {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-primary);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
  color: #fff;
}
.slip-header {
  background: var(--sp-primary);
  color: #fff;
}
.slip-content {
  background: var(--sp-bg-element);
}
.slip-item {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
}
.slip-item-title {
  color: var(--sp-text-sub);
}
.slip-input {
  background: var(--sp-bg-element);
  color: #fff;
  border: 1px solid var(--sp-border);
}
.btn-bet-submit {
  background: var(--sp-accent);
  color: #fff;
}

/* 8. 모바일 대응 */
@media (max-width: 768px) {
  .sp-row td {
    display: block;
    width: 100% !important;
    padding: 8px;
    text-align: center;
    border: 0;
  }
  .team-box {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
    padding: 10px 0;
    margin: 10px 0;
  }
  .sp-team-row {
    justify-content: center;
    gap: 15px;
  }
}