/* ✅ 다른 위젯들과 통일된 외곽선 및 상단 1/3 포인트 라인 */
.nowplay-widget {
  position: relative;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bs-body-bg);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.nowplay-widget::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 33%;
  height: 3px;
  background-color: rgba(var(--bs-primary-rgb), 1);
  z-index: 10;
}

.nowplay-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.01);
}

.nowplay-tab {
  padding: .6rem 1rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--bs-body-color) !important;
}
/* ✅ 기존 코드에서 color 속성 제거 또는 기본값으로 변경 */
.nowplay-tab.active{
  /* color: rgba(var(--bs-primary-rgb), 1); 이 줄을 삭제하거나 아래처럼 변경 */
  color: var(--bs-body-color) !important;
  border-top-color: rgba(var(--bs-primary-rgb), 1);
}

.nowplay-empty { padding: 1rem; }

.nowplay-list { display: block; }
.nowplay-row {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: .5rem .5rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.nowplay-row:first-child { border-top: 0; }

/* 랭킹 영역 전체 너비를 최소화하여 화살표를 밀착시킴 */
.nowplay-rank {
    width: auto; /* 고정 너비 해제 */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px; /* 숫자와 화살표 사이의 간격 (조절 가능) */
    margin-right: 12px; /* 썸네일과의 전체 간격 */
}

/* 랭킹 영역: 전체 가로폭을 줄이고 오른쪽 여백을 최소화 */
.nowplay-rank {
    width: 28px; /* 가로폭을 더 줄임 */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 6px !important; /* 썸네일과의 간격을 10px에서 6px로 단축 */
    gap: 0;
}

/* 등수 배지: 화살표와 더 밀착 */
.nowplay-rnum.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 800;
    border-radius: 5px;
    margin-bottom: 1px !important; /* 화살표와의 간격을 1px로 더 밀착 */
}

/* 변동 영역: 높이를 줄여 배지 밑으로 바짝 붙임 */
.nowplay-delta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10px; /* 높이를 더 줄임 */
    font-size: 0.7rem;
    line-height: 1;
    margin: 0 !important;
}

/* 썸네일: 배지 쪽으로 붙도록 마진 제거 확인 */
.nowplay-thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-left: 0; 
}

/* 화살표 아이콘 크기 미세 조정 */
.nowplay-chg {
    font-size: 0.65rem;
    line-height: 1;
}

/* 변동 숫자 간격 제거 */
.nowplay-chgnum {
    display: inline-block;
    min-width: auto;
    margin-left: 1px;
}

.nowplay-chg { display: inline-block; }
.nowplay-chg.eq { color: rgba(0,0,0,.35); }
.nowplay-chg.up { color: #dc3545; }   /* 상승: red */
.nowplay-chg.down { color: #0d6efd; } /* 하락: blue */
.nowplay-chg.new { color: rgba(var(--bs-primary-rgb), 1); }

.nowplay-chgnum { display: inline-block; min-width: 1ch; text-align: left; }

.nowplay-thumb {
  width: 42px; height: 42px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(0,0,0,.06);
}
.nowplay-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nowplay-thumb.no { background: transparent; }

.nowplay-main { min-width: 0; flex: 1 1 auto; }
.nowplay-title { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nowplay-meta {
  margin-top: .2rem;
  font-size: .8rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nowplay-ico { display: inline-block; width: 14px; height: 14px; margin-right: .35rem; vertical-align: -2px; background-size: contain; background-repeat: no-repeat; opacity: .75; }
.nowplay-ico.yt { background-image: linear-gradient(transparent,transparent); }
.nowplay-ico.au { background-image: linear-gradient(transparent,transparent); }

.nowplay-meta-ico { display: inline-block; width: 12px; height: 12px; margin-right: .25rem; vertical-align: -2px; opacity: .55; background-size: contain; background-repeat: no-repeat; }
.nowplay-meta-ico.play { background-image: linear-gradient(transparent,transparent); }
.nowplay-meta-ico.clock { background-image: linear-gradient(transparent,transparent); }

@media (max-width: 576px) {
  .nowplay-rnum { font-size: 1.05rem; }
  .nowplay-row { padding: .5rem .6rem; }
}

/* ----------------------------------------------------
   🌙 다크모드(Dark Mode) 전용 오버라이드 🌙
---------------------------------------------------- */
html[data-bs-theme="dark"] .nowplay-widget {
  border-color: rgba(255, 255, 255, 0.1);
}
html[data-bs-theme="dark"] .nowplay-tabs {
  background-color: rgba(255, 255, 255, 0.02);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-bs-theme="dark"] .nowplay-row {
  border-top-color: rgba(255, 255, 255, 0.06);
}
html[data-bs-theme="dark"] .nowplay-delta,
html[data-bs-theme="dark"] .nowplay-chg.eq {
  color: rgba(255, 255, 255, 0.4);
}
html[data-bs-theme="dark"] .nowplay-chg.up {
  color: #ff6b6b; /* 상승: 밝은 빨강 */
}
html[data-bs-theme="dark"] .nowplay-chg.down {
  color: #5dade2; /* 하락: 밝은 파랑 */
}
html[data-bs-theme="dark"] .nowplay-thumb {
  background: rgba(255, 255, 255, 0.1);
}