/* 이 스타일은 오직 .unique-dark-theme-content 내부 요소에만 적용됩니다. */
.unique-dark-theme-content {
	/* 컨테이너 자체에는 기본 스타일 불필요 */
}
/* 모든 섹션 공통 스타일 */
.unique-dark-theme-content div[id$="-section"] {
	/* ID가 "-section"으로 끝나는 div */
	min-height:0vh;
	/* 최소 높이 (스크롤 테스트용) */
	padding:0px 0px;
	/* 상하,좌우 패딩 */
	border-bottom:1px solid #3a3a3a;
	/* 섹션 구분선 */
	color:#b3b3b3;
	/* 기본 텍스트 색상 */
	box-sizing:border-box;
	/* 패딩/보더가 너비/높이에 포함되도록 */
    /* 이 규칙에서는 scroll-margin-top을 설정하지 않습니다. 아래에서 특정 섹션에만 적용합니다. */
}

/* ▼▼▼ 차트 관련 3개 섹션을 "제외한" 나머지 모든 섹션에 scroll-margin-top 적용 ▼▼▼ */
.unique-dark-theme-content div[id$="-section"]:not(#charts-section):not(#popular-tracks-section):not(#realtime-chart-section) {
    scroll-margin-top: 70px; /* 중요: 이 값은 실제 고정 헤더 높이에 맞게 조정해주세요 (예: 60px, 65px, 75px 등) */
}


/* 마지막 섹션은 하단 보더 제거 */
.unique-dark-theme-content div[id$="-section"]:last-of-type {
	border-bottom:none;
	min-height: 85vh;
	/* 마지막 섹션 높이 약간 더 확보 */
}
/* 섹션별 배경색 (번갈아 적용) -> 모두 투명하게 변경 */
.unique-dark-theme-content #home-section,
.unique-dark-theme-content #new-albums-section,
.unique-dark-theme-content #artists-section,
.unique-dark-theme-content #realtime-chart-section, /* 이 섹션은 위 :not() 규칙에서 제외되었으므로 배경색은 그대로 적용됨 */
.unique-dark-theme-content #your-albums-section {
	background-color: transparent; /* 배경을 투명하게 변경 */
	color:#e0e0e0;
	/* 밝은 텍스트 */
}
.unique-dark-theme-content #popular-tracks-section, /* 이 섹션은 위 :not() 규칙에서 제외되었으므로 배경색은 그대로 적용됨 */
.unique-dark-theme-content #playlists-section,
.unique-dark-theme-content #charts-section, /* 이 섹션은 위 :not() 규칙에서 제외되었으므로 배경색은 그대로 적용됨 */
.unique-dark-theme-content #your-songs-section,
.unique-dark-theme-content #your-artists-section {
	background-color: transparent; /* 배경을 투명하게 변경 */
	color:#b3b3b3;
	/* 중간 텍스트 */
}

/* 섹션 제목 (H2) 스타일 */
.unique-dark-theme-content div[id$="-section"]:not(#home-section) > h2,
.unique-dark-theme-content div[id$="-section"]:not(#home-section) > h3 {
	color:#ffffff;
	padding-bottom:12px;
	margin-top:10px;
	margin-bottom:20px; 
	font-size:24px;
	font-weight:600;
	letter-spacing:-0.02em;
    border-bottom: 1px solid #2a2a2a; 
}

/* home-section 전용 H2 (탭 위에 오는 제목) */
.unique-dark-theme-content #home-section > h2 {
    color:#ffffff;
	padding-bottom:12px;
	margin-top:30px;
	margin-bottom:15px; /* 탭 네비게이션과의 간격 */
	font-size:24px;
	font-weight:600;
	letter-spacing:-0.02em;
    /* border-bottom: 1px solid #2a2a2a; */ /* 필요시 주석 해제 */
}


.unique-dark-theme-content div[id$="-section"]:not(#home-section) > h2 i,
.unique-dark-theme-content div[id$="-section"]:not(#home-section) > h3 i {
	margin-right:12px;
	color:#b3b3b3;
}
.unique-dark-theme-content #home-section > h2 i.fa-home {
	color: #1DB954;
}

/* 문단 (P) 스타일 */
.unique-dark-theme-content p {
	font-size:15px;
	line-height:1.7;
	margin-top:0;
	margin-bottom:18px;
}
.unique-dark-theme-content p em {
	color:#777;
	font-style:normal;
}

/* "Your Music" 구분자 스타일 */
.unique-dark-theme-content .your-music-divider {
	padding:25px 20px;
	text-align:center;
	background-color: transparent; /* 배경을 투명하게 변경 */
	border-bottom:1px solid #333;
	border-top:1px solid #333;
}
.unique-dark-theme-content .your-music-divider h3 {
	margin:0;
	font-size:1.6em;
	color:#ffffff;
	font-weight:500;
	letter-spacing: 0.02em;
}

/* 링크 스타일 (필요시 추가) */
.unique-dark-theme-content a {
	color:#1DB954;
	text-decoration:none;
}
.unique-dark-theme-content a:hover {
	text-decoration: underline;
}

/* === Widget Tabs Styles START === */

/* #home-section 내부의 탭 네비게이션 컨테이너 */
.unique-dark-theme-content #home-section #widget-tabs-nav {
    display: flex;
    margin-bottom: 20px; 
    border-bottom: 1px solid #303030;
    overflow-x: auto;   
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 5px; 

    scrollbar-width: thin; 
    scrollbar-color: #555 transparent; /* 스크롤바 트랙 배경 투명하게 변경 */
}

.unique-dark-theme-content #home-section #widget-tabs-nav::-webkit-scrollbar {
    height: 6px;
}
.unique-dark-theme-content #home-section #widget-tabs-nav::-webkit-scrollbar-track {
    background: transparent; /* 스크롤바 트랙 배경 투명하게 변경 */
    border-radius: 3px;
}
.unique-dark-theme-content #home-section #widget-tabs-nav::-webkit-scrollbar-thumb {
    background-color: #4d4d4d;
    border-radius: 3px;
}
.unique-dark-theme-content #home-section #widget-tabs-nav::-webkit-scrollbar-thumb:hover {
    background-color: #666666;
}

/* #home-section 내부의 개별 탭 버튼 */
.unique-dark-theme-content #home-section .widget-tab-button {
    padding: 12px 22px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: #a0a0a0;
    font-size: 15px;
    font-weight: 500;
    margin-right: 3px;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.unique-dark-theme-content #home-section .widget-tab-button:hover {
    color: #ffffff;
}

.unique-dark-theme-content #home-section .widget-tab-button.active {
    color: #ffffff;
    font-weight: 600;
    border-bottom-color: #1DB954; 
}

/* #home-section 내부의 각 탭 콘텐츠(위젯 감싸는 div) */
.unique-dark-theme-content #home-section .widget-tab-pane {
    display: none; 
}

.unique-dark-theme-content #home-section .widget-tab-pane.active {
    display: block; 
}

/* ============================================== */
/* 모바일 화면을 위한 미디어 쿼리 (가장 아래에 추가) */
/* ============================================== */

/* 화면 너비가 768px 이하일 때 (일반적인 모바일 기기 기준) */
@media (max-width: 768px) {

    /* 
     * 기존에 좌우 25px 여백을 주던 섹션의 여백을
     * 모바일에서는 좌우 5px로 덮어씁니다.
     */
    .unique-dark-theme-content div[id$="-section"] {
        padding-left: 0px;
        padding-right: 0px;
    }

    /* 
     * 섹션 제목(H2)의 폰트 크기도 모바일에서는 약간 줄여주는 것이
     * 보기 좋을 수 있습니다. (선택 사항)
     */
    .unique-dark-theme-content div[id$="-section"]:not(#home-section) > h2,
    .unique-dark-theme-content div[id$="-section"]:not(#home-section) > h3,
    .unique-dark-theme-content #home-section > h2 {
        font-size: 20px; /* 기존 24px에서 20px로 조정 */
    }

    /*
     * 이전에 위젯에 직접 추가했던 음수 마진 코드가 있다면,
     * 모바일에서는 더 이상 필요 없으므로 초기화합니다.
     * (이 코드를 추가했었다면 꼭 남겨두세요)
     */
    .m1-intro-widget {
        margin-left: 0;
        margin-right: 0;
    }
}