/*
// [HQ] /theme/tdosa_simple/css/tdosa-custom.css
// Version: v12.5.0 (Notice Ticker & Hot Matches Added)
// Date: 2026-02-26
// 고유식별코드: TD-CSS-CUSTOM-V125
*/

:root {
  --fs-navy: #00141e;
  --fs-green: #00ffaa;
  --fs-bg-body: #f5f5f5;
  --fs-bg-white: #ffffff;
  --fs-bg-gray: #eeeeee;
  --fs-border: #e0e0e0;
  --fs-text-black: #2d2d2d;
  --fs-text-gray: #5f5f5f;
  --fs-red: #d20a2c;
}

/* 1. 글로벌 헤더 강제 스타일링 */
#header,
.na-header,
.header-wrap,
.nt-header {
  background-color: var(--fs-navy) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
#tnb,
.na-tnb {
  background-color: var(--fs-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#header a,
.na-header a,
.na-header .logo,
#tnb a,
.na-tnb a,
.navbar-nav > li > a {
  color: #ffffff !important;
  text-decoration: none !important;
}
#header a:hover,
.na-header a:hover,
.navbar-nav > li > a:hover {
  color: var(--fs-green) !important;
  background: transparent !important;
}
.logo img {
  filter: brightness(0) invert(1) !important;
}
.navbar-toggler,
.na-menu-btn {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}
.na-header a,
.gnb-ul li a,
.navbar-nav > li > a,
.na-menu a {
  font-weight: 700 !important;
}
.logo img,
.na-logo img,
a.navbar-brand img {
  filter: brightness(0) invert(1) !important;
}
.na-header i,
.btn-search,
.na-search-btn {
  color: #ffffff !important;
}

/* 2. 스포츠 네비게이션 & 레이아웃 */
body {
  background-color: #f5f5f5 !important;
}
.fs-sports-nav {
  background: var(--fs-bg-white);
  border-bottom: 1px solid #ddd;
  padding: 0;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.fs-nav-list {
  display: flex;
  max-width: 1160px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.fs-nav-item {
  padding: 15px 20px;
  color: var(--fs-text-gray);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 0.2s;
}
.fs-nav-item:hover,
.fs-nav-item.active {
  color: #000;
  border-bottom-color: var(--fs-red);
}

.fs-layout-grid {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  align-items: flex-start;
  padding-bottom: 50px;
}
.fs-sidebar-left {
  width: 200px;
  flex-shrink: 0;
  display: none;
}
@media (min-width: 992px) {
  .fs-sidebar-left {
    display: block;
  }
}
.fs-sidebar-right {
  width: 280px;
  flex-shrink: 0;
  display: none;
}
@media (min-width: 1200px) {
  .fs-sidebar-right {
    width: 300px;
    display: block;
  }
}
.fs-main-content {
  flex: 1;
  min-width: 0;
  background: var(--fs-bg-white);
  border: 1px solid var(--fs-border);
  border-radius: 8px;
  overflow: hidden;
}

/* 3. 메인 컨텐츠 영역 */
.fs-menu-group h5 {
  font-size: 11px;
  font-weight: 800;
  color: var(--fs-text-gray);
  margin-bottom: 10px;
  padding-left: 10px;
  text-transform: uppercase;
}
.fs-menu-list a {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fs-text-black);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}
.fs-menu-list a:hover {
  background: #e9e9e9;
}
.fs-sub-filter {
  background: var(--fs-bg-white);
  padding: 15px;
  border-bottom: 1px solid var(--fs-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fs-league-header {
  background: #e8e8e8;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 700;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ccc;
}

.fs-match-row {
  background: var(--fs-bg-white);
  padding: 10px 15px;
  border-bottom: 1px solid var(--fs-border);
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 60px;
  transition: background 0.1s;
  margin-bottom: 2px;
  border-radius: 4px;
}
.fs-match-row:hover {
  background: #f9f9f9;
}
.fs-col-time {
  width: 60px;
  font-size: 11px;
  color: var(--fs-text-gray);
  text-align: center;
  line-height: 1.2;
  border-right: 1px solid #f5f5f5;
}
.fs-col-info {
  flex: 1;
  padding: 0 15px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-main-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.team-side {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.team-side.home {
  justify-content: flex-end;
  text-align: right;
}
.team-side.away {
  justify-content: flex-start;
  text-align: left;
}
.team-name {
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
.score-center {
  width: 80px;
  text-align: center;
  font-family: "Roboto";
  font-weight: 900;
  font-size: 18px;
  color: var(--fs-red);
  margin: 0 10px;
  background: #fff5f5;
  border-radius: 4px;
}

.fs-prediction-box {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
.fs-prediction-bar {
  display: flex;
  height: 4px;
  background: #eee;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 2px;
}
.bar-h {
  background: #ff4646;
}
.bar-d {
  background: #999;
}
.bar-a {
  background: #3498db;
}
.prob-text {
  font-size: 9px;
  color: #999;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.fs-col-odds {
  display: flex;
  gap: 4px;
  padding-right: 15px;
}
.fs-odd-btn {
  width: 55px;
  height: 32px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #333;
  font-weight: 600;
  margin-left: 4px;
  transition: 0.2s;
  cursor: pointer;
}
.fs-odd-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}
.blink-up {
  background-color: #00aa77 !important;
  color: #fff !important;
  transition: 1.5s;
}
.blink-down {
  background-color: #ff4646 !important;
  color: #fff !important;
  transition: 1.5s;
}

.btn-pin-team {
  cursor: pointer;
  color: #ddd;
  font-size: 14px;
  transition: all 0.2s;
}
.btn-pin-team:hover {
  color: #aaa;
  transform: scale(1.2);
}
.btn-pin-team.pinned-team {
  color: #f5a623 !important;
}
.fs-menu-list .fa-heart {
  font-size: 11px;
}
.fs-ad-box {
  background: #fff;
  border: 1px solid #ddd;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 12px;
  margin-bottom: 20px;
}

/* 4. 사이드바 리그 순위표 전용 스타일 */
.rank-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  margin-bottom: 0;
}
.rank-table th {
  background: #fdfdfd;
  padding: 8px;
  border-bottom: 1px solid #eee;
  color: #888;
  position: sticky;
  top: 0;
  z-index: 2;
}
.rank-table td {
  padding: 8px;
  border-bottom: 1px solid #f5f5f5;
  text-align: center;
  color: #444;
}
.rank-table tr:hover td {
  background: #f8f9fa;
}
.rank-num {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  background: #e0e0e0;
  color: #555;
  border-radius: 50%;
  font-size: 10px;
  font-weight: bold;
}
.rank-num.top-rank {
  background: #3498db;
  color: #fff;
}

.std-tab-btn {
  cursor: pointer;
  transition: 0.2s;
  border-bottom: 2px solid transparent;
  font-weight: bold;
}
.std-tab-btn:hover {
  background: #f1f3f5;
}
.std-tab-btn.active {
  color: #3498db !important;
  border-bottom: 2px solid #3498db;
  background: #fff;
}

.adsense-placeholder {
  background-color: #f8f9fa;
  border: 1px dashed #ced4da;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  min-height: 250px;
  margin-bottom: 20px;
  border-radius: 4px;
  width: 100%;
}

.std-content-wrap {
  max-height: none;
  overflow-y: hidden;
}

/* 5. [NEW] 공지사항 티커 (Ticker) 애니메이션 */
.fs-notice-ticker {
  background: #fff;
  border: 1px solid var(--fs-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  margin: -5px auto 25px auto;
  max-width: 1200px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}
.ticker-title {
  background: var(--fs-navy);
  color: #fff;
  padding: 10px 15px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticker-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #fafafa;
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker-scroll 25s linear infinite;
}
.ticker-track:hover {
  animation-play-state: paused;
}
.ticker-item {
  font-size: 12px;
  color: var(--fs-text-black);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 30px;
  display: inline-block;
  transition: 0.2s;
}
.ticker-item:hover {
  color: var(--fs-red);
  text-decoration: underline;
}
.ticker-badge {
  background: var(--fs-red);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  margin-right: 5px;
  vertical-align: middle;
}
@keyframes ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* 6. [NEW] 핫 매치업 (Hot Matches) 카드 그리드 */
.hot-section-wrap {
  padding: 20px;
  background: #fafafa;
  border-bottom: 1px solid var(--fs-border);
}
.hot-header {
  font-size: 14px;
  font-weight: 800;
  color: #000;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.hot-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.2s,
    border-color 0.2s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.hot-card:hover {
  transform: translateY(-3px);
  border-color: var(--fs-red);
}
.hot-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #d20a2c, #ff4646);
}
.hot-league {
  font-size: 10px;
  color: #888;
  margin-bottom: 10px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 800;
  font-size: 13px;
  color: #222;
}
.hot-vs {
  font-size: 10px;
  color: var(--fs-red);
  background: #fff5f5;
  padding: 3px 6px;
  border-radius: 4px;
}
.hot-odds-wrap {
  display: flex;
  gap: 6px;
}
.hot-odd-btn {
  flex: 1;
  text-align: center;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  transition: 0.2s;
}
.hot-odd-btn:hover {
  background: #e9ecef;
  border-color: #bbb;
}
.hot-odd-label {
  display: block;
  font-size: 9px;
  color: #aaa;
  margin-bottom: 2px;
  font-weight: normal;
}

@media (max-width: 768px) {
  .fs-layout-grid {
    flex-direction: column;
  }
  .fs-main-content {
    width: 100%;
    border: none;
    border-radius: 0;
  }
  .fs-sub-filter {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .std-content-wrap {
    max-height: 215px;
    overflow-y: auto;
  }
  .std-content-wrap::-webkit-scrollbar {
    width: 4px;
  }
  .std-content-wrap::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 2px;
  }
  .std-content-wrap::-webkit-scrollbar-track {
    background: #f8f9fa;
  }

  .hot-grid {
    grid-template-columns: 1fr;
  }
}