/* dc.css — DC 인사이드 감성 + 반응형 테이블/탭 */
/* 기본 색상 변수 */
:root{
  --bg:#fff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e5e7eb;
  --chip:#f3f4f6;
  --accent:#2563eb; /* 포인트 블루 */
  --accent-weak:#dbeafe;
  --live:#ef4444;
}

html[data-theme="dark"] {
  --bg: #000;
  --surface: #0b0d10;
  --card: #101217;
  --text: #fff;
  --text2: #fff;
  --muted: #9aa6b2;
  --link: #fff;
  --link2: #fff;
  --border: #515151;
  --border2: #858585;
  --accent: #66a8ff;
  --gray: #0f1115;
  --gray2: #fff;
  --gray3: #0f1115;
  --gray4: #313131;
  --ibtn: rgba(255, 255, 255, .5) !important;
  --shadow: rgba(0,0,0,0.6);
  --line:#515151
}
html[data-theme="dark"] body { background:#000; }
html[data-theme="dark"] #leftLanking { border: 1px solid var(--line); }
html[data-theme="dark"] #leftLanking .cate .icon { background: linear-gradient(#000, #474747);border: var(--line) }
html[data-theme="dark"] #leftLanking tbody tr:hover { background:#212529;}
html[data-theme="dark"] #leftLanking thead th { background:#000;color:#fff; }
html[data-theme="dark"] #leftLanking dt a.on { background:#282828;color:var(--accent); }
html[data-theme="dark"] #leftLanking dt a { background:#000;color:#fff; }



body { letter-spacing: -0.5px; }
/* 리셋 보완 */
#leftLanking, #leftLanking * { box-sizing:border-box; }
#leftLanking img{ display:inline-block; vertical-align:middle; }

/* 컨테이너 */
#leftLanking{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  max-width:1080px;
  margin:0px auto;
}

/* 타이틀 */
#leftLanking > h2{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.2px;
  display:flex; align-items:center; gap:8px;
}
#leftLanking > h2::before{
  content:"";
  width:4px; height:14px; border-radius:2px;
  background:var(--accent);
  display:inline-block;
}

/* 종목 카테고리 아이콘 라인 (둥근 탭) */
#leftLanking .cate{
  list-style:none; padding:0; margin:0 0 12px;
  display:flex; gap:8px; flex-wrap:wrap;
}
#leftLanking .cate li{
  display:inline-flex;
}
#leftLanking .cate .icon{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line);
  background:linear-gradient(#fff,#fafafa);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  position:relative;
}
#leftLanking .cate .icon::after{
  /* 스포츠별 아이콘은 스프라이트/폰트 대신 이모지 대체 (필요시 배경이미지로 교체) */
  content:"⚽";
  font-size:16px; line-height:1;
}
#leftLanking .cate .icon.baseball::after{ content:"⚾"; }
#leftLanking .cate .icon.basketball::after{ content:"🏀"; }
#leftLanking .cate .icon.volleyball::after{ content:"🏐"; }
#leftLanking .cate .icon.icehockey::after{ content:"🏒"; }
#leftLanking .cate .icon.nfl::after{ content:"🏈"; }
#leftLanking .cate .icon.on{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);
  transform:translateY(-1px);
}

/* 탭 (리그) */
#leftLanking dl{ margin:0; }
#leftLanking dt{
  margin:0 0 8px;
  display:flex; flex-wrap:wrap; gap:8px;
}
#leftLanking dt a{
  display:inline-block;
  padding:8px 10px;
  font-size:13px;
  color:#374151;
  background:var(--chip);
  border:1px solid var(--line);
  border-radius:16px;
  text-decoration:none;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
#leftLanking dt a:hover{ background:#eef2ff; border-color:#dfe5ff; }
#leftLanking dt a.on{
  background:#fff;
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak) inset;
  font-weight:700;
}

/* 표 래퍼 */
#leftLanking dd{ margin:0; }

/* 표 */
#leftLanking table{
  width:100%;
  border-collapse:collapse;
  border-top:2px solid var(--accent);
  font-size:14px;
}
#leftLanking thead th{
  background:#f8fafc;
  color:#0f172a;
  border-bottom:1px solid var(--line);
  padding:10px 1px;
  font-weight:700;
  text-align:center;
  position:sticky; top:0; z-index:1; /* 모바일에서 헤더 고정 */
}
#leftLanking tbody tr{
  border-bottom:1px solid var(--line);
  transition:background .08s ease;
}
#leftLanking tbody tr:hover{ background:#fbfdff; }
#leftLanking th, #leftLanking td{
  padding:10px 8px;
  text-align:center;
  white-space:nowrap;
}
#leftLanking td.left{
  text-align:left;
}
#leftLanking td.left img{
  width:20px; height:20px; object-fit:contain; margin-right:6px;
}

/* 서브리그 타이틀 행 */
#leftLanking .sub_league_title{
  background:#f3f4f6;
  border:1px solid var(--line);
  border-radius:6px;
  padding:6px 10px;
}
#leftLanking .sub_league_title h3{
  margin:0; font-size:13px; color:#111827; letter-spacing:-0.2px;
}

/* 빈 데이터 대비 */
#leftLanking tbody#artc_list:empty::after{
  content:"데이터를 불러오는 중…";
  display:block; padding:24px 0; color:var(--muted); text-align:center;
}

/* 배지/점 표시(필요 시 사용) */
.badge-live{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; padding:3px 8px; border-radius:999px;
  background:#fee2e2; color:#991b1b; border:1px solid #fecaca;
}
.badge-live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--live);
  animation:blink 1s infinite;
}
@keyframes blink{ 50%{ opacity:.2; } }

/* 접근성: 포커스 */
#leftLanking a:focus, #leftLanking .icon:focus{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* 스크롤바(웹킷) */
#leftLanking ::-webkit-scrollbar{ height:10px; width:10px; }
#leftLanking ::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
#leftLanking ::-webkit-scrollbar-track{ background:transparent; }

/* 반응형 -------------------------------------------------- */

/* 모바일: 표를 가로 스크롤 카드처럼 */
@media (max-width: 640px){
  #leftLanking{
    padding:12px; border-radius:6px;
  }
  #leftLanking > h2{ font-size:16px; }

  /* 테이블을 래핑해 스크롤 */
  #leftLanking dd{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    border:1px solid var(--line);
    border-radius:6px;
  }
  #leftLanking table{
    /* min-width:720px;가로 스크롤 */
    font-size:13px;
  }
  #leftLanking th, #leftLanking td{ padding:9px 1px; }
  #leftLanking .cate .icon{ width:34px; height:34px; }
}

/* 태블릿: 간격 조정 */
@media (min-width: 641px) and (max-width: 1024px){
  #leftLanking{ padding:14px; }
  #leftLanking table{ font-size:13.5px; }
}

/* 데스크톱: 좁은 화면 대응 */
@media (min-width: 1025px){
  #leftLanking{ padding:16px 18px; }
}

/* 고감도 사용자 환경(애니메이션 최소화) */
@media (prefers-reduced-motion: reduce){
  #leftLanking .cate .icon{ transition:none; }
  .badge-live::before{ animation:none; }
}

/* 다크모드(선택): body에 .theme-dark 추가 시 */
.theme-dark #leftLanking{
  --bg:#0b1020;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --line:#1f2937;
  --chip:#111827;
  --accent:#5392ff;
  --accent-weak:#0b1b38;
  background:var(--bg); color:var(--text); border-color:var(--line);
}
.theme-dark #leftLanking thead th{ background:#0f172a; color:#e5e7eb; border-bottom-color:#1f2937; }
.theme-dark #leftLanking tbody tr{ border-bottom-color:#1f2937; }
.theme-dark #leftLanking .sub_league_title{ background:#111827; border-color:#1f2937; color:#e5e7eb; }
.theme-dark #leftLanking dt a{ background:#0f172a; color:#cbd5e1; border-color:#1f2937; }
.theme-dark #leftLanking dt a.on{ background:#0b1020; color:#bfd7ff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(83,146,255,.15) inset; }
.theme-dark #leftLanking .cate .icon{ background:linear-gradient(#0b1020,#0d1324); border-color:#1f2937; }
.theme-dark #leftLanking tbody tr:hover{ background:#0d1324; }