@charset "UTF-8";

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

.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;
  }
}