@charset "UTF-8";

#filterForm { min-width:0; max-width:100%; box-sizing:border-box; }
#filterForm .spo-subnav-shell {
  display:block !important;
  position:relative;
  clear:both;
  width:100%; max-width:100%; min-width:0;
  padding:12px 0 2px;
  box-sizing:border-box;
  overflow:hidden;
  contain:inline-size;
}
#filterForm .spo-league-nav {
  display:grid !important;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:6px;
  width:100%; max-width:100%; min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}
#filterForm .spo-league-nav.has-overflow {
  grid-template-columns:34px minmax(0,1fr) 34px;
}
#filterForm .spo-league-viewport {
  display:block;
  grid-column:1;
  min-width:0; max-width:100%; width:100%;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
  box-sizing:border-box;
}
#filterForm .spo-league-nav.has-overflow .spo-league-viewport { grid-column:2; }
#filterForm .spo-league-viewport::-webkit-scrollbar { display:none; }
#filterForm .spo-league-items {
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:8px;
  width:max-content;
  padding:2px 0;
  box-sizing:border-box;
}
#filterForm .spo-league-chip {
  display:inline-flex !important;
  flex:0 0 auto;
  position:relative;
  width:auto !important;
  margin:0 !important;
  white-space:nowrap;
  cursor:pointer;
}
#filterForm .spo-league-chip input {
  position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;
}
#filterForm .spo-league-chip span, #filterForm .spo-league-all {
  display:inline-flex;
  align-items:center; justify-content:center;
  flex:0 0 auto;
  min-height:34px;
  padding:6px 13px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  color:#475569;
  font-size:13px; font-weight:600; line-height:1.2;
  white-space:nowrap;
  box-sizing:border-box;
  cursor:pointer;
}
#filterForm .spo-league-chip input:checked + span, #filterForm .spo-league-all.is-active {
  background:#2563eb; color:#fff; border-color:#2563eb;
}
#filterForm .spo-league-chip input:focus-visible + span,
#filterForm .spo-league-all:focus-visible { outline:2px solid #2563eb; outline-offset:2px; }
#filterForm .spo-league-arrow {
  display:none !important;
  width:34px; height:34px;
  padding:0;
  border:1px solid #e2e8f0; border-radius:8px;
  background:#f8fafc; color:#334155;
  font-size:23px; font-weight:700;
  align-items:center; justify-content:center;
  cursor:pointer;
  box-sizing:border-box;
}
#filterForm .spo-league-nav.has-overflow .spo-league-arrow { display:inline-flex !important; }
#filterForm .spo-league-prev { grid-column:1; grid-row:1; }
#filterForm .spo-league-next { grid-column:3; grid-row:1; }
#filterForm .spo-league-nav .spo-league-viewport { grid-row:1; }
#filterForm .spo-league-arrow:disabled { opacity:.25; cursor:default; }
@media (max-width:600px) {
  #filterForm .spo-league-items {gap:6px;}
  #filterForm .spo-league-chip span, #filterForm .spo-league-all {font-size:12px; padding:6px 11px;}
  #filterForm .spo-league-nav.has-overflow {grid-template-columns:30px minmax(0,1fr) 30px;}
  #filterForm .spo-league-arrow {width:30px;}
}
@media (prefers-reduced-motion:reduce) {
  #filterForm .spo-league-viewport {scroll-behavior:auto;}
}

.sport-filter{
  border-bottom: 1px dashed var(--borderColor);
  padding-bottom: 1rem;
}

.filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:28px;
  font-weight:700;
  margin-bottom:15px;
}

.filter-title span{
  font-size:12px;
  background: var(--colorwhite);
  color: var(--colorred);
  border: 2px solid var(--colorred);
  padding:5px 10px;
  border-radius: var(--radius);
  font-weight: 500;
}

.filter-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.filter-row select,
.filter-row input{
  height:34px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius);
  background: var(--colorblue-row-bg);
  color: var(--colorblue-row-text);
  padding:0 14px;
  font-weight:500;
  outline:none;
  font-size: 12px;
}

.date-box{
  display:flex;
  align-items:center;
  gap:8px;
}

.date-box span{
  font-weight:900;
  color:#999;
}

.filter-reset{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 18px;
  border-radius: var(--radius);
  background: var(--colorblue-bg);
  color: var(--colorblue-text);
  text-decoration:none;
  font-size:12px;
  font-weight: 500;
}

/* 야구 리그 체크 필터 */
.baseball-filter{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:1rem;
}

.baseball-filter label{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding: 0.5rem 1rem;
  border-radius:var(--radius);
  background:var(--colorblue-row-bg);
  border:1px solid var(--borderColor);
  font-size:13px;
  font-weight:500;
  color:var(--colorblue-row-text);
  cursor:pointer;
  transition:.2s;
}

.baseball-filter input{
  width:0;
  height:0;
}

.baseball-filter label:has(input:checked){
  background:var(--colorpulple-grad);
  color: var(--colorwhite);
}

.game-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.game-card{
  background: var(--colorwhite);
  border-radius: var(--radius);
  border:1px solid var(--borderColor);
  transition:.2s;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.game-card:hover{
  transform:translateY(-1.5px);
  box-shadow:0 18px 40px rgba(0,0,0,.1);
}

.league-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--borderColor);
  background: var(--colorgray-bg);
}

.league-bar span {
  font-weight: 700;
}
.league-bar b{
  font-size: 12px;
  font-weight: 500;
  color: var(--con-sub);
}

.match-center{
  display:grid;
  grid-template-columns:1fr 120px 1fr;
  align-items:center;
  gap:15px;
  padding: 1rem 1.5rem;
}

.team-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.team-box strong{
  font-size: 18px;
  font-weight: 700;
}

.logo-wrap{
  width:80px;
  height:80px;
  border-radius: 50rem;
  background:var(--colorgray-bg);
  display:flex;
  align-items:center;
  justify-content:center;
}

.team-logo{
  width:55px;
  height:55px;
  object-fit:contain;
}

.score-box{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align:center;
}

.vs{
  font-size:28px;
  font-weight:700;
}

.score {
  font-size:28px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.score span {
  color:#aaa;
}

.score b {
  font-weight: 700;
}

.status{
  font-weight: 600;
}
.Not {
  color: var(--con-sub);
}
.end {
  color: var(--colorred);
}

.game-pick-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#00b67a,#009d6d);
  border-radius: var(--radius);
  color: var(--colorwhite) !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
  text-decoration:none;
  box-shadow:	0 10px 25px rgba(0,157,109,.25), inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  transition:.25s;
  padding: 0.5rem 0;
}

.game-pick-btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:80%;
  height:100%;
  background:linear-gradient(	90deg, transparent, rgba(255,255,255,.25), transparent);
  transform:skewX(-25deg);
  transition:.8s;
}

.game-pick-btn:hover::before{
  left:140%;
}

.game-pick-btn:hover{
  transform:translateY(-2px);
  box-shadow:	0 16px 35px rgba(0,157,109,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

.game-pick-btn::after{
  content:'→';
  margin-left: 5px;
  font-size: 15px;
  font-weight:600;
}

.game-pick-btn.disabled{
  display: none;
}

.analysis-box{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--borderColor);
}

.analysis-box>div{
  background:var(--colorgray-bg);
  border-radius: var(--radius);
  padding:14px 8px;
  text-align:center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.analysis-box span{
  font-weight: 700;
}

.recent-form{
  display:flex;
  justify-content: center;
  gap:4px;
}

.recent-form i{
  width:20px;
  height:20px;
  border-radius: var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-style:normal;
  font-weight: bold;
  background:#ddd;
}

.recent-form .W{
  background:#2ecc71;
  color:#fff;
}

.recent-form .L{
  background:#e74c3c;
  color:#fff;
}

.recent-form .D{
  background:#95a5a6;
  color:#fff;
}

.paging{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:25px;
}

.paging a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius);
  background: var(--colorwhite);
  border: 1px solid var(--borderColor);
  text-decoration:none;
  color:#333;
}

.paging a:hover{
  background: var(--bg-in-color);
  color: var(--colorwhite);
}

.paging a.active{
  background: var(--bg-in-color);
  color: var(--colorwhite);
  border-color: var(--bg-in-color);
}

.paging .prev,
.paging .next{
  font-size:16px;
}

@media(max-width:700px){
  .filter-title {
    font-size: 18px;
  }
  .filter-title span {
    font-size: 10px;
  }
  .filter-row{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .date-box{
    grid-column:1/3;
  }
  .date-box input {
    width: 100%;
  }

  .filter-reset{
    grid-column:1/3;
  }

  .match-center{
    grid-template-columns:1fr 70px 1fr;
    gap:5px;
    padding: 1rem;
  }

  .logo-wrap{
    width:60px;
    height:60px;
  }

  .team-logo{
    width:42px;
    height:42px;
  }

  .team-box strong{
    font-size:12px;
  }

  .analysis-box{
    grid-template-columns:1fr;
    padding: 1rem;
  }

  .game-pick-btn {
    font-size: 12px;
  }
  .game-pick-btn::after {
    content: '';
    margin: 0;
  }
  .get-player {
    display: none;
  }
}