/* ===== Sports List (isolated) ===== */
#sl-menu{
  /* 변수도 로컬로만 적용되어 외부에 영향 없음 */
  --sl-accent: #111;
  --sl-title:  #111;
  --sl-card-bg:#fff;
  --sl-radius: 14px;
  --sl-gap:    14px;
  --sl-shadow: 0 6px 16px rgba(0,0,0,.08);
  --sl-shadow-hover: 0 10px 22px rgba(0,0,0,.12);
}

#sl-menu .sl-header{
  display:flex; align-items:center; gap:12px;
  margin: 10px 0 14px;
}

#sl-menu .sl-title-icon{
  width: 28px; height: 28px; object-fit: contain; flex:0 0 28px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));
}

#sl-menu .sl-title{
  font-weight: 900;
  font-size: clamp(18px, 2.3vw, 28px);
  letter-spacing: .5px;
  color: var(--sl-title);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
}
#sl-menu .sl-title::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 52px; height: 3px;
  background: var(--sl-accent);
  border-radius: 2px;
}

/* 카드 그리드: 다른 .banner_4ea, li 등에 영향 X */
#sl-menu .sl-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sl-gap);
  justify-content: center;
}

/* li 인라인 스타일(width:25%)를 무시하고 싶다면 아래 한 줄로 로컬 상쇄 가능 */
#sl-menu .sl-card-item{
  width: 85% !important;     /* 각 카드 틀을 80%로 줄임 */
  margin: 0 auto;            /* 가운데 배치 */
}

#sl-menu .sl-card{
  display:block; background: var(--sl-card-bg);
  border-radius: var(--sl-radius); overflow:hidden;
  box-shadow: var(--sl-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  outline: 1px solid rgba(0,0,0,.05);
  position: relative;
}
#sl-menu .sl-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--sl-shadow-hover);
}
/* 상단 포인트 바(선택) */
#sl-menu .sl-card::before{
  content:"";
  display:block; height:4px; background: var(--sl-accent);
}

#sl-menu .sl-card img{
	width:100%; height:auto; display:block;
}

/* 반응형 */
@media (max-width: 1024px){
  #sl-menu .sl-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  #sl-menu .sl-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  #sl-menu .sl-title{ font-size: clamp(18px, 5vw, 24px); }
}