/* 🎨 1. 나리야 표준 위젯 외곽선 및 1/3 상단 포인트 라인 */
.music-top10-widget {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.music-top10-widget::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 33%; height: 3px;
    background-color: rgba(var(--bs-primary-rgb), 1);
    z-index: 10;
}

/* 🎨 2. 위젯 상단 타이틀 영역 (설정 버튼 우측 배치용) */
.mt10-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: rgba(0,0,0,.01);
}
.mt10-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    text-decoration: none;
}
.mt10-title:hover { color: var(--bs-body-color); }
.mt10-setup-btn {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    text-decoration: none;
    display: flex; align-items: center; gap: 4px;
}
.mt10-setup-btn:hover { color: var(--bs-primary); }

/* 🎨 3. 리스트 영역 패딩 및 아이템 설정 */
.mt10-list { display: flex; flex-direction: column; gap: 8px; padding: 15px; }
.mt10-item {
    display: flex; align-items: center; padding: 8px; border-radius: 10px;
    transition: all 0.2s ease; cursor: pointer; position: relative;
    background: transparent; border: 1px solid transparent;
}
.mt10-item:hover {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 순위 숫자 & 변동(▲▼) */
.mt10-rank-box { width: 32px; text-align: center; flex-shrink: 0; margin-right: 8px; }
.mt10-rank { font-size: 1.05rem; font-weight: 900; font-style: italic; color: var(--bs-secondary-color); line-height: 1; margin-bottom: 4px; }
.mt10-item:nth-child(1) .mt10-rank { color: #dc3545; font-size: 1.4rem; } 
.mt10-item:nth-child(2) .mt10-rank { color: #fd7e14; font-size: 1.2rem; } 
.mt10-item:nth-child(3) .mt10-rank { color: #ffc107; font-size: 1.2rem; } 

.mt10-delta { font-size: 0.65rem; font-weight: 700; line-height: 1; }
.mt10-delta.up { color: #dc3545; }
.mt10-delta.down { color: #0d6efd; }
.mt10-delta.new { color: var(--bs-primary); }
.mt10-delta.eq { color: var(--bs-tertiary-color); }

/* 썸네일 */
.mt10-thumb { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.05); }
.mt10-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.mt10-item:hover .mt10-thumb img { filter: brightness(0.6) blur(1px); transform: scale(1.05); }

/* 마우스 올리면 나타나는 플레이 버튼 */
.mt10-play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
    color: #fff; font-size: 1.5rem; opacity: 0; transition: 0.2s ease; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mt10-item:hover .mt10-play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 곡 정보 */
.mt10-info { flex-grow: 1; min-width: 0; margin-left: 12px; }
.mt10-subj { font-size: 0.95rem; font-weight: 700; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.mt10-name { font-size: 0.75rem; color: var(--bs-secondary-color); }

/* 🌙 다크모드 대응 */
html[data-bs-theme="dark"] .mt10-header { background-color: rgba(255, 255, 255, 0.02); border-bottom-color: rgba(255, 255, 255, 0.06); }
html[data-bs-theme="dark"] .mt10-delta.up { color: #ff6b6b; }
html[data-bs-theme="dark"] .mt10-delta.down { color: #5dade2; }
html[data-bs-theme="dark"] .mt10-thumb { border-color: transparent; }