@charset "utf-8";

/* [HQ] /theme/Weblease-Simple_type-3/css/custom.css */
/* Version: v1.2.0 (Minor) */
/* Date: 2025-12-29 */
/* 고유식별코드: CSS-MTDAY-011 */
/* Author: Web-lease */
/* [변경 이력] */
/* - v1.1.9 : 메인 슬라이더 정렬 수정 */
/* - v1.2.0 : 사이드바 메뉴 폰트 가시성 확보 및 푸터 하단 배경색 통일 (User Request Fix) */
/* [기능 요약] */
/* 1. 사이드바 버튼(.side-btn) 텍스트 색상 White 강제 적용 */
/* 2. 푸터 최하단(#nt_footer) 배경색을 상단 영역과 동일하게 #171731로 통일 */

/* ==========================================================================
   Weblease-Simple_type-3 : 로얄클럽 리뉴얼 (Soft Dark + Unified Header)
   ========================================================================== */

:root {
  /* 1. Background System (v1.1.6 Soft Dark) */
  --bg-body: #202135; /* 메인 배경: 부드러운 딥 네이비 */
  --bg-header: #171731; /* [Header/Footer] 통합 배경 (가장 어두움) */
  --bg-container: #2b2c4e; /* 컨테이너 */
  --bg-element: #36375d; /* 위젯/카드 */
  --bg-input: #2f3052; /* 입력폼 */

  /* 2. Text Color System (White Base) */
  --text-main: #ffffff; /* 메인 텍스트 */
  --text-sub: #d0d0e0; /* 서브 텍스트 */
  --text-on-gold: #ffffff; /* 골드 버튼 위 텍스트 */

  /* 3. Border/Point Colors */
  --border-color: #4a4b70;
  --border-gold: #966e38;
  --color-gold: #af8943;
  --color-gold-light: #c2a25b;
  --color-gold-hover: #dcb356;

  /* 4. Gradients */
  --grad-gold: linear-gradient(150deg, #c2a25b 25%, #af8943 100%);
  --grad-text-gold: linear-gradient(150deg, #e0d3a8 0%, #af8943 100%);
}

/* ==========================================================================
   기본 레이아웃 및 배경
   ========================================================================== */
body {
  background-color: var(--bg-body) !important;
  color: var(--text-main);
  font-family: "Noto Sans KR", sans-serif;
}

.wrapper,
.nt-body,
.nt-container,
.boxed.wrapper {
  background-color: var(--bg-body) !important;
  box-shadow: none;
}

/* ==========================================================================
   헤더 영역 통합
   ========================================================================== */
#nt_header,
#nt_sticky_wrap,
#header_pc,
#nt_lnb {
  background-color: var(--bg-header) !important;
  border-bottom: 0 !important;
}

#nt_sticky_wrap {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#header_pc .nt-container,
#nt_lnb .nt-container {
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}

#nt_lnb {
  color: #cccccc !important;
  font-size: 0.9rem;
  padding-bottom: 5px;
}
#nt_lnb a {
  color: #e0e0e0 !important;
}
#nt_lnb .text-primary,
#nt_lnb i {
  color: var(--color-gold-light) !important;
}

#nt_menu .me-a {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1.1rem;
}
#nt_menu .me-li.on .me-a,
#nt_menu .me-li:hover .me-a {
  color: var(--color-gold-light) !important;
  text-shadow: 0 0 10px rgba(175, 137, 67, 0.6);
}

.nt-menu .sub-1div,
.nt-menu .sub-2div {
  background-color: var(--bg-element) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.nt-menu .sub-1da,
.nt-menu .sub-2da {
  color: var(--text-sub) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nt-menu .sub-1dli:hover .sub-1da {
  background-color: var(--bg-container) !important;
  color: var(--color-gold-light) !important;
}

/* ==========================================================================
   위젯 & 리스트 (Dark Style)
   ========================================================================== */
.na-card,
.widget-box,
.list-box,
.cs-box {
  background-color: var(--bg-element) !important;
  border: 1px solid var(--border-color) !important;
  color: #e0e0e0 !important;
}

.na-card .card-title,
.na-card .card-text,
.na-card div,
.na-card span,
.na-card p,
.na-list a,
.widget-box ul li a {
  color: #ffffff !important;
}

.na-list a:hover,
.widget-box ul li a:hover {
  color: var(--color-gold-light) !important;
  text-decoration: underline;
}

.na-card .text-dark,
.widget-box .text-dark,
.na-card .text-muted,
.widget-box .text-muted,
.na-list .text-muted {
  color: #b0b0d0 !important;
}

.na-info,
.na-date,
.sr-only {
  color: #8888aa !important;
}

.na-card .btn {
  color: #ffffff !important;
  border-color: var(--border-color) !important;
  background-color: transparent;
}
.na-card .btn:hover {
  color: var(--color-gold-hover) !important;
  border-color: var(--color-gold) !important;
}

/* 타이틀 기본 스타일 */
h3.h3,
.f-lg {
  color: var(--text-main);
  letter-spacing: -0.5px;
}
hr.hr {
  background: var(--grad-gold);
  height: 2px;
  border: 0;
  opacity: 0.8;
}

/* ==========================================================================
   [수정 v1.2.0] 사이드바 버튼 폰트 가시성 강화
   ========================================================================== */

/* 1. 사이드바 메뉴 버튼 (기본 상태에서 흰색 텍스트 강제) */
.side-btn {
  background-color: var(--bg-element);
  border: 1px solid var(--border-gold);
  color: #ffffff !important; /* [Fix] 기존 골드색 -> 흰색으로 변경 */
  font-weight: 700;
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  text-align: center;
  transition: all 0.3s ease;
  font-size: 1.1rem;
  border-radius: 4px;
}

/* 호버 시 스타일 */
.side-btn:hover {
  background: var(--grad-gold);
  color: #fff !important;
  border-color: var(--color-gold-light);
  box-shadow: 0 0 15px rgba(175, 137, 67, 0.4);
  transform: translateY(-2px);
}

/* 텔레그램 버튼 */
.side-btn.btn-telegram {
  border-color: #0088cc;
  color: #0088cc !important; /* 텔레그램만 고유색 유지 */
}
.side-btn.btn-telegram:hover {
  background: linear-gradient(150deg, #0088cc 0%, #005f8f 100%);
  border-color: #0088cc;
  color: #fff !important;
}

/* 사이드바 위젯 타이틀 */
.col-md-3 h3.h3,
.col-md-3 .f-lg,
.col-md-3 h3 a {
  color: #ffffff !important;
  font-weight: bold;
}

/* 사이드바 리스트 링크 */
.col-md-3 ul li a,
.col-md-3 .widget-box a {
  color: #e0e0e0 !important;
}
.col-md-3 ul li a:hover {
  color: var(--color-gold-light) !important;
  padding-left: 5px;
  transition: 0.3s;
}

.cs-box {
  background-color: var(--bg-container);
  border: 1px solid var(--border-color);
  padding: 25px 20px;
  text-align: center;
  margin-bottom: 30px;
  border-radius: 4px;
}
.cs-tel {
  font-size: 1.6rem;
  color: var(--color-gold-light);
  font-weight: 800;
  display: block;
  margin: 15px 0;
  font-family: "Roboto", sans-serif;
  letter-spacing: 1px;
}

/* ==========================================================================
   메인 페이지 전용 스타일
   ========================================================================== */

/* 1. 상단 타이틀 */
.main-title-container {
  text-align: center;
  padding: 2rem 0;
  background: radial-gradient(circle at center, #36375d 0%, var(--bg-body) 70%);
  color: #fff;
  border-radius: 15px;
  margin-bottom: 2rem;
}
.main-page-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.main-page-subtitle {
  font-size: 1.1rem;
  color: var(--color-gold-light);
  margin-top: 10px;
  font-weight: 500;
}

/* 2. 퀵 메뉴 버튼 */
.main-menu-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0 40px;
}
.main-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  background: linear-gradient(145deg, #36375d, #2b2c4e);
  border: 1px solid var(--border-color);
  border-radius: 15px;
  color: var(--text-sub) !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.main-button:hover {
  transform: translateY(-5px);
  border-color: var(--color-gold);
  background: var(--bg-element);
  color: #fff !important;
  box-shadow: 0 0 15px rgba(175, 137, 67, 0.3);
}
.main-button img {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  filter: brightness(0.9);
  transition: 0.3s;
}
.main-button:hover img {
  filter: brightness(1.1);
}

/* 3. 프리미엄 파트너 위젯 */
#main-premium .na-card {
  background: linear-gradient(145deg, #36375d 0%, #2b2c4e 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}
#main-premium .na-card:hover {
  transform: translateY(-10px);
  border-color: var(--color-gold);
  box-shadow: 0 10px 25px rgba(175, 137, 67, 0.2);
}
#main-premium .na-card img {
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  transition: 0.5s;
}
#main-premium .na-card:hover img {
  transform: scale(1.05);
}
#main-premium .card-body {
  padding: 15px;
}
#main-premium .card-title a {
  color: #fff !important;
}

/* 4. 정보 카드 */
.info-card {
  background-color: var(--bg-element);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  height: 100%;
  margin-bottom: 20px;
  transition: 0.3s;
}
.info-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-3px);
}
.card-header-title {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.card-header-title i {
  font-size: 1.5rem;
  color: var(--color-gold);
  margin-right: 10px;
}
.card-header-title h3 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
  margin: 0;
}
.card-sub-item {
  background-color: rgba(0, 0, 0, 0.2);
  border-left: 3px solid var(--color-gold);
  padding: 10px 15px;
  margin-top: 15px;
  border-radius: 4px;
}
.card-sub-item h4 {
  font-size: 1rem;
  color: var(--color-gold-light);
  margin-bottom: 5px;
  font-weight: bold;
}
.card-sub-item p {
  font-size: 0.9rem;
  color: var(--text-sub);
  margin: 0;
}

/* 5. FAQ */
.faq-card {
  background-color: var(--bg-element) !important;
  border: 1px solid var(--border-color) !important;
  margin-bottom: 10px;
}
.faq-card .card-header {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 15px;
}
.faq-card .card-header h4 {
  font-size: 1rem;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-card .answer-btn {
  font-size: 0.8rem;
  padding: 2px 10px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  color: var(--text-sub);
}
.faq-card .card-body {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--text-sub);
  border-top: 1px solid var(--border-color);
  padding: 20px;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* 6. 요약 박스 */
.summary-box {
  background: linear-gradient(to right, var(--bg-element), var(--bg-container));
  border-left: 5px solid var(--color-gold);
  padding: 25px;
  color: var(--text-sub);
  line-height: 1.8;
  margin: 30px 0;
}

/* 7. 메인 섹션 헤딩 */
.main-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(175, 137, 67, 0.3);
  position: relative;
}
.main-heading::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100px;
  height: 3px;
  background: var(--grad-gold);
}
.main-heading h3 {
  font-size: 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  background: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}
.main-heading .text-highlight {
  background: var(--grad-text-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.main-heading .more-btn {
  font-size: 0.85rem;
  color: var(--text-sub);
  text-decoration: none;
  transition: 0.3s;
}
.main-heading .more-btn:hover {
  color: var(--color-gold-light);
}

/* ==========================================================================
   [수정 v1.2.0] 푸터 (Footer) 배경색 통일
   ========================================================================== */
#nt_footer {
  background-color: var(
    --bg-header
  ) !important; /* 상단과 동일한 #171731 적용 */
  border-top: 1px solid var(--border-color);
  color: var(--text-sub);
}
#nt_footer a {
  color: var(--text-sub);
}

/* ==========================================================================
   게시판 (Board)
   ========================================================================== */
.na-table {
  color: #e0e0e0 !important;
}
.na-table thead th {
  background-color: rgba(0, 0, 0, 0.2) !important;
  color: #ffffff !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: 2px solid var(--color-gold) !important;
}
.na-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.na-table a {
  color: #e0e0e0 !important;
}

#bo_v_title .bo_v_tit {
  color: #ffffff !important;
}
#bo_v_con {
  color: #e0e0e0 !important;
}
#bo_v_info {
  color: #a0a0c5 !important;
  border-bottom: 1px solid var(--border-color) !important;
}
#bo_v_link,
#bo_v_file {
  border: 1px solid var(--border-color) !important;
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.pagination .page-link {
  background-color: var(--bg-element) !important;
  border-color: var(--border-color) !important;
  color: #a0a0c5 !important;
}
.pagination .page-item.active .page-link {
  background-color: var(--color-gold) !important;
  border-color: var(--color-gold) !important;
  color: #fff !important;
}

/* 퀵 슬라이더 */
.quick-slider-wrap {
  margin-bottom: 3rem;
}
.quick-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.quick-slider-head h3 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 !important;
  line-height: 1;
}
.quick-slider-head .more-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #aaa;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  transition: 0.3s;
  white-space: nowrap;
}
.quick-slider-head .more-btn:hover {
  background: var(--color-gold);
  color: #fff;
  text-decoration: none;
}
.owl-carousel .owl-nav button {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px !important;
  font-size: 16px !important;
  margin: 0 5px;
}
.owl-carousel .owl-nav button:hover {
  background: var(--color-gold) !important;
}

/* ==========================================================================
   [2025-12-30 추가] 가시성 긴급 수정 및 다크모드 스타일 통합 (Start)
   ========================================================================== */

/* 1. [강제 적용] 컬러 시스템 재정의 (기존 설정 덮어쓰기) */
:root {
  --bg-header: #171731; /* 헤더/푸터 배경 */
  --bg-element: #2a2a4a; /* 위젯/박스 배경 */
  --bg-input: #3e3e65; /* 입력폼 배경 */
  --bg-hover: #45456b; /* 호버 배경 */
  --text-main: #ffffff; /* 메인 텍스트 */
  --text-sub: #a0a0c5; /* 서브 텍스트 */
  --color-gold: #af8943;
  --color-gold-light: #c2a25b;
  --border-color: #4a4b70;
  --border-light: rgba(255, 255, 255, 0.1);
}

/* 2. [가시성 해결] 게시판 목록 및 전체 개수 (노란 박스 영역) */
/* 전체 게시물 수 텍스트 */
#bo_list_total,
.bo_total,
.bo_current,
.bo_style {
  color: #ffffff !important;
  font-weight: bold;
}

/* 게시물 제목 링크 */
.na-table .bo_tit a,
.tbl_head01 .td_subject a,
.na-list a.na-subject {
  color: #ffffff !important;
  font-weight: 500;
}

/* 게시물 내용 텍스트 (작성자, 날짜 등) */
.na-table td,
.tbl_head01 td {
  color: #e0e0e0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 테이블 헤더 */
.na-table thead th,
.tbl_head01 thead th {
  background-color: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  border-top: 2px solid var(--color-gold) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* 3. [가시성 해결] 게시판 본문 (View) 텍스트 */
#bo_v_con,
#bo_v_con .view_content {
  color: #e0e0e0 !important;
  line-height: 1.8;
}
/* 본문 내 제목 태그 강제 스타일링 */
.view_content h1,
.view_content h2,
.view_content h3,
.view_content h4 {
  color: #fff !important;
  border-bottom-color: var(--border-color) !important;
}
/* 댓글 내용 */
.cmt_contents {
  color: #ffffff !important;
}

/* 4. [스타일 통합] 스포츠 분석 플러그인 (style.dark.css 변환 적용) */
/* 상단 경기 정보 박스 */
.view_content > div[style*="background:#2c3e50"] {
  background: var(--bg-hover) !important;
  border: 1px solid var(--border-color);
  color: #fff;
}
.view_content > div[style*="background:#2c3e50"] h1 {
  color: #fff !important;
}

/* 배당률 클릭 박스 */
.view_content > div[style*="background:#f8f9fa"] {
  background: var(--bg-element) !important;
  border-color: var(--border-color) !important;
  color: #e0e0e0;
}
.view_content h4[style*="color:#2c3e50"] {
  color: #fff !important;
}

/* 배당 버튼 스타일 */
.btn-action-bet {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: #fff !important;
}
.btn-action-bet:hover {
  background: var(--bg-hover) !important;
  border-color: #fff !important;
}
/* 승무패 색상 유지 */
.btn-action-bet div[style*="color:#e74c3c"] {
  color: #e74c3c !important;
} /* 승 */
.btn-action-bet div[style*="color:#2c3e50"] {
  color: #aaa !important;
} /* 무 */
.btn-action-bet div[style*="color:#3498db"] {
  color: #3498db !important;
} /* 패 */

/* AI 데이터 분석표 (테이블) */
.view_content table {
  border-color: var(--border-color) !important;
  background: var(--bg-element) !important;
  color: #e0e0e0 !important;
}
/* 테이블 헤더 */
.view_content table tr[style*="background:#34495e"] {
  background: var(--bg-hover) !important;
  color: #fff !important;
}
.view_content table th,
.view_content table td {
  border-color: var(--border-color) !important;
}
/* 셀 내부 강조 색상 */
.view_content table td[style*="color:#e74c3c"] {
  color: #e74c3c !important;
}
.view_content table td[style*="color:#3498db"] {
  color: #3498db !important;
}

/* 기타 박스 (흰색/하늘색 배경 제거) */
.view_content div[style*="background:#fff"],
.view_content div[style*="background:#fcfcfc"] {
  background: var(--bg-element) !important;
  border-color: var(--border-color) !important;
  color: #e0e0e0;
}
.view_content div[style*="background:#eef7fd"] {
  background: #1a2634 !important; /* 아주 어두운 파랑 */
  border-color: #2c3e50 !important;
  color: #e0e0e0;
}

/* 5. [레이아웃] 헤더/푸터 및 컨테이너 고정 */
#nt_header,
#nt_sticky_wrap,
#header_pc,
#nt_lnb,
#nt_footer {
  background-color: var(--bg-header) !important;
  border-bottom: 0 !important;
}
.nt-container,
.wrapper .nt-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.side-btn {
  color: #fff !important; /* 사이드바 버튼 글씨 흰색 */
  background-color: var(--bg-input);
  border: 1px solid var(--border-light);
}
.side-btn:hover {
  background: linear-gradient(135deg, #c2a25b 0%, #af8943 100%);
  border-color: var(--color-gold);
}

/* ==========================================================================
   [2025-12-30 추가] 가시성 긴급 수정 및 다크모드 스타일 통합 (End)
   ========================================================================== */

/* ==========================================================================
   [2025-12-30 긴급 패치] 게시판 상세페이지(View) 가시성 강제 보정
   (기존 플러그인 스타일 무시하고 강제 적용)
   ========================================================================== */

/* 1. 게시물 제목 (가장 크게) */
#bo_v_title .bo_v_tit {
  color: #ffffff !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 2. 본문 내용 전체 기본 컬러 설정 */
#bo_v_con,
.view_content {
  color: #e0e0e0 !important; /* 밝은 회색 */
  line-height: 1.8;
}

/* 3. [중요] 경기 프리뷰 등 본문 내 모든 텍스트 강제 화이트 */
/* 플러그인이 div나 p태그에 직접 색을 넣는 것을 방지 */
.view_content p,
.view_content div,
.view_content span,
.view_content li,
.view_content font {
  color: #e0e0e0 !important;
  background-color: transparent !important; /* 배경 흰색 되는 것 방지 */
}

/* 4. AI 정밀 분석 등 '표(Table)' 내부 텍스트 */
.view_content table,
.view_content table tr,
.view_content table td {
  background-color: transparent !important; /* 표 배경 투명화 */
  color: #ffffff !important; /* 글씨 완전 흰색 */
  border-color: rgba(255, 255, 255, 0.1) !important; /* 테두리 연하게 */
}

/* 표의 헤더 (항목 제목) */
.view_content table th {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #af8943 !important; /* 골드 색상으로 강조 */
  font-weight: bold;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. 배당률 등 박스형 컨텐츠 가시성 */
/* 배경이 너무 밝아서 글씨가 안 보이는 경우 대비해 박스 배경을 어둡게 */
.view_content .box-container,
.view_content div[style*="background-color"],
.view_content div[style*="background"] {
  background-color: #2a2a4a !important; /* 위젯 배경색과 통일 */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

/* 6. 본문 내 강조(Bold/Strong) 텍스트 */
.view_content strong,
.view_content b {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: underline;
  text-decoration-color: #af8943;
}

/* 7. 댓글 입력창 */
#bo_vc_w textarea {
  background-color: #3e3e65 !important;
  color: #fff !important;
  border: 1px solid #4a4b70 !important;
}
#bo_vc_w textarea::placeholder {
  color: #aaa !important;
}

/* ==========================================================================
   [2025-12-30 추가] 토도사 스타일 (경기일정/강승부) 통합 (v5.0.0)
   ========================================================================== */

/* 1. 토도사 전용 변수 (기존 테마 색상과 매칭) */
:root {
  --td-panel: #2b3038;
  --td-line: #3a404c;
  --td-accent: #ff5a3d;
  --td-text: #e9ecef;
  --td-muted: #a3adb8;
}

/* 2. 카드/박스 스타일 */
.td-card {
  background: var(--bg-element); /* 테마 위젯 배경 사용 */
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-box);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-title i {
  color: var(--color-gold);
}

/* 3. 경기 일정 테이블 */
.td-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.td-table th {
  background: rgba(0, 0, 0, 0.2);
  color: var(--td-muted);
  font-weight: 600;
  padding: 14px 10px;
  font-size: 0.95rem;
  text-align: center;
  border-bottom: 2px solid var(--border-color);
}
.td-table td {
  padding: 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
  vertical-align: middle;
}
.td-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* 경기 정보 텍스트 */
.match-name {
  font-weight: bold;
  font-size: 1.05rem;
  display: block;
  margin-bottom: 4px;
  color: #fff;
}
.league-name {
  font-size: 0.8rem;
  color: #aaa;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 5px;
}

/* 승리 배지 (Win Mark) */
.td-winmark {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 80px;
  height: 42px;
  border-radius: 6px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  background: #444;
  border: 1px solid rgba(255, 255, 255, 0.1);
  line-height: 1.1;
  margin: 0 auto;
}
.td-winmark .side {
  font-size: 0.7rem;
  opacity: 0.9;
  margin-bottom: 2px;
}
.td-winmark .pct {
  font-size: 0.95rem;
  font-family: "Roboto", sans-serif;
}

.td-winmark.home {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  border-color: #e74c3c;
}
.td-winmark.away {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-color: #3498db;
}
.td-winmark.draw {
  background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
  border-color: #95a5a6;
}

/* 4. 강승부 (Hot Picks) 슬라이더 */
.hot-picks-wrap {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 5px 5px 15px 5px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* 스크롤바 숨김 */
}
.hot-picks-wrap::-webkit-scrollbar {
  display: none;
}

.hot-card {
  flex: 0 0 280px; /* 고정 너비 */
  width: 280px;
  background: linear-gradient(145deg, #2b3038, #22262d);
  border: 1px solid var(--color-gold); /* 골드 테두리 */
  border-radius: 12px;
  padding: 20px;
  position: relative;
  box-shadow: 0 4px 15px rgba(175, 137, 67, 0.15);
  transition: transform 0.2s;
}
.hot-card:hover {
  transform: translateY(-3px);
}

.hot-card::before {
  content: "HOT";
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-gold);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px 0 10px 0;
}

.hot-card .league {
  font-size: 0.8rem;
  color: #aaa;
  margin-bottom: 10px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.hot-card .teams {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-align: center;
}
.hot-card .prob-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.hot-card .prob-label {
  font-size: 0.85rem;
  color: var(--color-gold-hover);
  margin-bottom: 2px;
}
.hot-card .prob-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  font-family: "Roboto";
}

.hot-card .btn-go {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
  color: #fff;
  background: #333;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #444;
  transition: 0.3s;
}
.hot-card .btn-go:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* 분석/베팅 버튼 */
.btn-action-sm {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #ccc;
  font-size: 0.8rem;
  text-decoration: none;
  transition: 0.2s;
}
.btn-action-sm:hover {
  background: var(--color-gold);
  color: #fff;
  border-color: var(--color-gold);
}
.btn-action-sm.analyzed {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}

/* 모바일 전용 목록 */
.td-odds-mobile {
  display: none;
}
.td-mrow {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
}
.td-mrow .kick {
  color: var(--color-gold);
  font-weight: bold;
  font-size: 0.9rem;
}
.td-mrow .match {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 10px;
  font-weight: bold;
}
.td-mrow .go {
  display: block;
  background: var(--bg-input);
  color: #fff;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  font-weight: bold;
}

@media (max-width: 767px) {
  .td-odds-desktop {
    display: none;
  }
  .td-odds-mobile {
    display: block;
  }
  .hot-card {
    width: 240px;
    flex: 0 0 240px;
  }
}