/* ============================================
   Music Space V2 - Main Page Redesign
   Safe implementation with prefixed classes
   ============================================ */

/* Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* CSS Variables */
:root {
  --navbar-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --player-h-desktop: 64px; /* 80px → 64px로 축소 */
  --player-h-mobile: 52px; /* 60px → 52px로 축소 */
  --player-h: var(--player-h-desktop);
  --sidebar-w-md: 175px;
  --sidebar-w-lg: 175px;
  --title-gap-desktop: 14px;
  --title-gap-mobile: 6px;
  --sidebar-bg: #0f0f0f; /* 다크 모드 기본값 */
  --sidebar-border: rgba(255, 255, 255, 0.06); /* 다크 모드 기본값 */
}

/* 뷰포트 폭에 따라 플레이어 높이 자동 스위칭 */
@media (max-width: 480px) {
  :root {
    --player-h: var(--player-h-mobile);
  }
}

/* 테마별 사이드바 색상 변수 */
html[data-theme="light"] {
  --sidebar-bg: #ffffff;
  --sidebar-border: rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] {
  --sidebar-bg: #0f0f0f;
  --sidebar-border: rgba(255, 255, 255, 0.06);
}

/* 다크 모드에서 헤더 배경을 사이드바와 동일하게 */
html[data-theme="dark"] .main-v2-top-nav {
  background: var(--sidebar-bg);
}

/* 이모지 흑백 처리 (테두리만 표시) */
.main-v2-nav-brand,
.main-v2-panel-btn,
.main-v2-icon-btn,
.main-v2-global-search-icon {
  filter: grayscale(100%) contrast(1000%) brightness(200%);
  -webkit-filter: grayscale(100%) contrast(1000%) brightness(200%);
}

/* 호버 시 색상 복원 (옵션) */
.main-v2-nav-brand:hover,
.main-v2-panel-btn:hover,
.main-v2-icon-btn:hover {
  filter: grayscale(0%) contrast(100%) brightness(100%);
  -webkit-filter: grayscale(0%) contrast(100%) brightness(100%);
  transition: filter 0.3s ease;
}

/* Main Page V2 Container */
.main-v2-app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--player-h); /* Space for fixed audio player */
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden; /* Prevent horizontal scroll */
  width: 100%;
  max-width: 100vw;
}

.main-v2-app {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--player-h)); /* 호환성 가드 */
  min-height: calc(100dvh - var(--player-h)); /* Account for global-audio-player */
  background: var(--bg-primary);
  margin: 0;
  padding: 0;
}

/* 앵커 점프 보호 (고정 헤더 높이만큼 오프셋) */
html {
  scroll-padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-desktop));
}

@media (max-width: 480px) {
  html {
    scroll-padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-mobile));
  }
}

/* ============================================
   Top Navigation Bar - Fixed Position
   ============================================ */
/* z-index policy: 1000 backdrop < 1001 sidebar < 1002 player < 1100 navbar < 1200 dropdown/tooltip */

.main-v2-top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  height: var(--navbar-h);
  padding-top: var(--safe-top); /* iOS 노치 보정 */
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  gap: 20px;
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
  flex-wrap: nowrap; /* 같은 줄에 유지 */
  margin: 0;
  box-sizing: border-box;
  /* 선택적 그림자 효과 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.main-v2-nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 1; /* 공간 부족 시 축소 가능 */
  min-width: 0; /* flex 축소 허용 */
}

/* Hamburger Menu Button (Hidden on Desktop) */
.main-v2-hamburger-btn {
  display: none; /* Hidden by default */
  width: 44px; /* Touch-friendly size */
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all var(--transition-fast);
  margin-right: 10px;
}

.main-v2-hamburger-btn:hover {
  background: var(--bg-tertiary);
}

.main-v2-hamburger-btn:active {
  transform: scale(0.95);
}

.hamburger-icon {
  width: 24px;
  height: 24px;
  stroke: var(--text-primary);
}

.main-v2-nav-center {
  flex: 1;
  max-width: 600px;
}

.main-v2-nav-right {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-shrink: 0; /* 오른쪽 영역은 축소하지 않음 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.main-v2-nav-brand {
  font-size: 18px;
  font-weight: bold;
  color: #f1c40f;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s;
}

.main-v2-nav-brand:hover {
  color: #f39c12;
  text-decoration: none;
}

/* Home button removed - brand logo serves as home link
.main-v2-home-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.main-v2-home-btn:hover {
  background: #444;
  border-color: #f1c40f;
  color: #f1c40f;
  text-decoration: none;
}

.main-v2-home-btn span {
  font-size: 16px;
}
*/

.main-v2-global-search-wrapper {
  position: relative;
  width: 100%;
}

.main-v2-global-search-input {
  width: 100%;
  padding: 10px 40px 10px 15px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
}

.main-v2-global-search-input:focus {
  outline: none;
  border-color: #007bff;
}

.main-v2-global-search-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
}

.main-v2-icon-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  transition: transform 0.2s;
  color: #fff;
}

.main-v2-icon-btn:hover {
  transform: scale(1.1);
}

.main-v2-profile-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.main-v2-profile-menu span {
  color: var(--text-primary);
}

.main-v2-dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  margin-top: 10px;
  min-width: 150px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* REMOVED: Hover trigger - now using click-only via JavaScript */
/* .main-v2-profile-menu:hover .main-v2-dropdown-content { display: block; } */

.main-v2-dropdown-content a {
  display: block;
  padding: 10px 15px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.2s;
}

.main-v2-dropdown-content a:hover {
  background: var(--bg-tertiary);
}

.main-v2-nav-search {
  flex: 1;
  max-width: 500px;
}

.main-v2-nav-search input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 14px;
}

.main-v2-nav-search input:focus {
  outline: none;
  border-color: #007bff;
}

.main-v2-nav-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.main-v2-nav-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
}

.main-v2-nav-btn:hover {
  transform: scale(1.1);
}

.main-v2-nav-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

/* Main Content Area (컨테이너) */
/* NOTE: 상단 간격은 main-v2-main-content에서만 관리한다. content-area에는 padding-top 금지. */
.main-v2-content-area {
  display: flex;
  flex: 1;
  overflow: hidden;
  /* 네브바가 fixed이므로 높이 계산에서 제외 (padding-top은 main-v2-main-content에서 처리) */
  height: calc(100vh - var(--player-h)); /* 호환성 가드 */
  height: calc(100dvh - var(--player-h)); /* viewport - audio player */
  margin: 0;
  padding: 0;
  width: 100%; /* 전체 너비 명시 */
  max-width: 100%; /* 부모 너비를 초과하지 않도록 제한 (스크롤바 고려) */
  box-sizing: border-box; /* padding을 포함한 너비 계산 */
  background: var(--bg-primary); /* Ensure no white gaps */
}

/* Main Layout Container */
.main-v2-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Left Sidebar (Resizable) - 15% narrower (85% of original) */
/* 기본 스타일: 중간/기본 구간에서는 미디어쿼리에서 position: fixed로 덮어씀 */
.main-v2-sidebar {
  width: 213px; /* Desktop: 85% of 250px (widest) */
  min-width: 170px; /* 85% of 200px */
  max-width: 510px; /* 85% of 600px */
  background: var(--sidebar-bg); /* 테마 인식 배경색 */
  border-right: 1px solid var(--sidebar-border); /* 테마 인식 보더 */
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  gap: 0 !important; /* No gap between children */
  padding: 0;
  margin: 0 !important; /* No margin to prevent white gaps */
  padding-bottom: var(--player-h); /* Space for audio player */
  box-sizing: border-box;
  z-index: 2; /* Above main content (1) but below top nav (100) and dropdown (9999) */
  overflow-x: hidden !important; /* Always hide horizontal scrollbar regardless of login state */
  overflow-y: auto; /* Allow vertical scrolling */
  scrollbar-width: thin; /* Firefox: thin scrollbar */
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox: scrollbar color */
}

/* Hide horizontal scrollbar in Webkit browsers (Chrome, Safari, Edge) */
.main-v2-sidebar::-webkit-scrollbar:horizontal {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

/* Ensure sidebar children don't cause horizontal overflow */
.main-v2-sidebar > * {
  margin: 0 !important; /* No margin to prevent white gaps */
  max-width: 100%;
  overflow-x: hidden !important; /* Prevent horizontal overflow */
  box-sizing: border-box;
}

/* Force nav sections and guest notice to inherit theme background */
.main-v2-sidebar > .main-v2-nav-sections,
.main-v2-sidebar > .main-v2-guest-notice {
  background: transparent; /* Let parent background show through */
}

/* Resize Handle */
.main-v2-resize-handle {
  display: none; /* Resize handle disabled */
}

/* Panel Tabs */
.main-v2-panel-tabs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-bottom: 1px solid #444;
  flex-shrink: 0;
}

.main-v2-panel-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 14px;
}

.main-v2-panel-tab:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.main-v2-panel-tab.active {
  background: var(--accent-primary);
  color: var(--text-primary);
}

/* Panel Content Area */
.main-v2-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}

.main-v2-panel {
  display: none;
}

.main-v2-panel.active {
  display: block;
}

/* Main Content Area */
.main-v2-main-content {
  /* flex: 1 제거 - width로 명시적 제어 */
  width: 100%; /* 기본값: 전체 너비 (모바일 드로어 모드) */
  flex-shrink: 0; /* flexbox에서 자동 축소 방지 */
  background: var(--bg-primary); /* Theme-aware background */
  overflow-y: visible; /* Use browser scroll by default */
  overflow-x: hidden; /* 가로 스크롤 방지 */
  position: relative; /* Create stacking context */
  z-index: 1; /* Below top nav (1100) and dropdown (1200+) */
  padding: 0; /* 모든 패딩 제거 */
  /* 네브바 높이만큼 아래로 밀기 (노치 합산) - 기본값은 데스크톱 간격 */
  padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-desktop));
  padding-bottom: var(--player-h);
  box-sizing: border-box; /* padding을 포함한 너비 계산 */
  scrollbar-gutter: stable; /* 스크롤바 공간을 항상 확보 */
}

.main-v2-welcome {
  text-align: center;
  padding: 60px 20px;
  color: #888;
}

/* 공통 타이틀 규칙 - 상단 메뉴 ~ 페이지 제목 간격 최적화 */
.main-v2-welcome h1,
.page-header h1,
.page-title,
.page-description-row h1 {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 20px; /* 제목 아래 리듬값 */
  line-height: 1.2;
}

.main-v2-welcome h1 {
  color: #f1c40f;
  font-size: 32px;
}

.main-v2-welcome p {
  font-size: 16px;
}

/* Coming Soon Placeholder */
.main-v2-coming-soon {
  text-align: center;
  padding: 40px 20px;
  color: #888;
}

.main-v2-coming-soon h3 {
  color: #f1c40f;
  margin-bottom: 10px;
  font-size: 20px;
}

.main-v2-coming-soon p {
  margin: 10px 0;
}

.main-v2-coming-soon small {
  color: #666;
  font-style: italic;
}

/* Song List Styles */
.main-v2-song-item {
  background: var(--bg-tertiary);
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.main-v2-song-item:hover {
  background: var(--bg-elevated);
  transform: translateX(5px);
}

.main-v2-song-item.playing {
  background: var(--accent-primary);
  color: var(--text-primary);
}

.main-v2-song-icon {
  font-size: 18px;
}

.main-v2-song-info {
  flex: 1;
  min-width: 0;
}

.main-v2-song-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.main-v2-song-artist {
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Playlist Styles */
.main-v2-playlist-item {
  background: #2a2a2a;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.main-v2-playlist-item:hover {
  background: #333;
  transform: translateX(5px);
}

.main-v2-playlist-name {
  font-weight: 500;
  color: #fff;
  margin-bottom: 5px;
}

.main-v2-playlist-count {
  font-size: 12px;
  color: #aaa;
}

/* Button Styles */
.main-v2-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.main-v2-btn-primary {
  background: #007bff;
  color: #fff;
}

.main-v2-btn-primary:hover {
  background: #0056b3;
}

.main-v2-btn-secondary {
  background: #6c757d;
  color: #fff;
}

.main-v2-btn-secondary:hover {
  background: #5a6268;
}

/* Loading Indicator */
.main-v2-loading {
  text-align: center;
  padding: 20px;
  color: #888;
}

.main-v2-loading::after {
  content: '...';
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Empty State */
.main-v2-empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.main-v2-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 48px; /* 레거시 이모지 지원 */
}

.main-v2-empty-icon .icon-outline {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
}

.main-v2-empty-text {
  font-size: 16px;
  color: #888;
  margin-bottom: 32px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .main-v2-sidebar {
    /* width: 128px; 비활성화 - 768px 이하에서는 60px로 고정 (3641번째 줄 참조) */
    /* min-width: 100px; 비활성화 */
    overflow-x: hidden !important; /* Always hide horizontal scrollbar */
  }
  
  .main-v2-top-nav {
    flex-wrap: wrap;
    height: auto;
    padding: 10px;
  }
  
  .main-v2-nav-search {
    order: 3;
    width: 100%;
    max-width: none;
    margin-top: 10px;
  }
  
  .main-v2-welcome h1 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .main-v2-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.3s;
    overflow-x: hidden !important; /* Always hide horizontal scrollbar */
  }
  
  .main-v2-sidebar.mobile-open {
    transform: translateX(0);
  }
  
  
  .main-v2-nav-brand {
    font-size: 16px;
  }
}

/* ============================================
   Enhanced Search Panel Styles
   ============================================ */

/* Search Panel Header */
.main-v2-search-header {
  margin-bottom: 15px;
}

.main-v2-search-input-wrapper {
  position: relative;
  margin-bottom: 10px;
}

.main-v2-search-input {
  width: 100%;
  padding: 10px 35px 10px 12px;
  background: var(--bg-tertiary); /* 라이트: #f0f0f0, 다크: #2a2a2a */
  border: 1px solid var(--border-primary); /* 라이트: #ddd, 다크: #444 */
  border-radius: 6px;
  color: var(--text-primary); /* 라이트: #222, 다크: #fff */
  font-size: 14px;
  transition: all 0.2s;
}

.main-v2-search-input::placeholder {
  color: var(--text-tertiary); /* 라이트: #777, 다크: #888 */
}

.main-v2-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
  background: var(--bg-secondary); /* 라이트: #fff, 다크: #222 */
}

.main-v2-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

/* Autocomplete Dropdown */
.main-v2-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #2a2a2a;
  border: 1px solid #444;
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  display: none;
}

.main-v2-autocomplete.active {
  display: block;
}

.main-v2-autocomplete-item {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-v2-autocomplete-item:hover,
.main-v2-autocomplete-item.selected {
  background: #333;
}

/* Popular Tags */
.main-v2-popular-tags {
  margin-bottom: 15px;
}

.main-v2-section-title {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}

.main-v2-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.main-v2-tag {
  background: #2a2a2a;
  color: #aaa;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #444;
  transition: all 0.2s;
}

.main-v2-tag:hover {
  background: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Recent Searches */
.main-v2-recent-searches {
  margin-bottom: 15px;
}

.main-v2-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #2a2a2a;
  border-radius: 4px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.main-v2-recent-item:hover {
  background: #333;
}

.main-v2-recent-icon {
  color: #666;
  font-size: 14px;
}

.main-v2-recent-text {
  flex: 1;
  color: #aaa;
  font-size: 13px;
}

.main-v2-recent-remove {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 16px;
  transition: color 0.2s;
}

.main-v2-recent-remove:hover {
  color: #f44336;
}

/* Search Results Sections */
.main-v2-results-section {
  margin-bottom: 20px;
}

.main-v2-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #444;
}

.main-v2-results-title {
  font-size: 14px;
  font-weight: 600;
  color: #f1c40f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-v2-results-count {
  font-size: 12px;
  color: #666;
}

/* Enhanced Song Item */
.main-v2-song-item {
  background: #2a2a2a;
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.main-v2-song-item:hover {
  background: #333;
  transform: translateX(3px);
}

.main-v2-song-item.playing {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #fff;
}

.main-v2-song-item.playing .main-v2-song-artist {
  color: rgba(255, 255, 255, 0.8);
}

.main-v2-song-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.main-v2-song-info {
  flex: 1;
  min-width: 0;
}

.main-v2-song-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  font-size: 13px;
}

.main-v2-song-artist {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quick Action Buttons */
.main-v2-song-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.main-v2-song-item:hover .main-v2-song-actions {
  opacity: 1;
}

.main-v2-action-btn {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.main-v2-action-btn:hover {
  background: rgba(0, 123, 255, 0.8);
  transform: scale(1.1);
}

.main-v2-action-btn.play {
  background: rgba(0, 123, 255, 0.6);
}

/* Album/Artist Items */
.main-v2-album-item,
.main-v2-artist-item {
  background: var(--bg-tertiary); /* Theme-aware: #f0f0f0 (light) or #2a2a2a (dark) */
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border-primary); /* Theme-aware border */
}

.main-v2-album-item:hover,
.main-v2-artist-item:hover {
  background: var(--bg-elevated); /* Theme-aware: #e8e8e8 (light) or #333 (dark) */
  transform: translateX(3px);
  border-color: var(--border-hover); /* Theme-aware: #999 (light) or #666 (dark) */
}

.main-v2-album-cover,
.main-v2-artist-avatar {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.main-v2-artist-avatar {
  border-radius: 50%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.main-v2-album-info,
.main-v2-artist-info {
  flex: 1;
  min-width: 0;
}

.main-v2-album-name,
.main-v2-artist-name {
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
  font-size: 14px;
}

.main-v2-album-meta,
.main-v2-artist-meta {
  font-size: 12px;
  color: #888;
}

/* Song Detail View (Main Content) */
.main-v2-song-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Album Art Section - Top of Detail Page */
.main-v2-detail-album-art {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-v2-album-art-image {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-primary);
}

.main-v2-album-art-placeholder {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  background: var(--bg-tertiary);
  border: 2px dashed var(--border-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-art-icon {
  font-size: 120px;
  opacity: 0.5;
  color: var(--text-tertiary);
}

/* Friends Panel Song Detail View - Reuse main detail styles with theme awareness */
.main-v2-song-detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.main-v2-song-detail-cover {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.main-v2-song-detail-info {
  flex: 1;
}

.main-v2-song-detail-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary); /* Theme-aware: #222 (light) or #fff (dark) */
  margin-bottom: 10px;
}

.main-v2-song-detail-artist {
  font-size: 20px;
  color: var(--text-secondary); /* Theme-aware: #555 (light) or #aaa (dark) */
  margin-bottom: 20px;
}

.main-v2-song-detail-meta {
  font-size: 14px;
  color: var(--text-tertiary); /* Theme-aware: #777 (light) or #888 (dark) */
  line-height: 1.6;
}

.main-v2-detail-header {
  margin-bottom: 30px;
  text-align: center;
}

.main-v2-detail-cover {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.main-v2-detail-info {
  flex: 1;
}

.main-v2-detail-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary); /* Theme-aware: #222 (light) or #fff (dark) */
  margin-bottom: 10px;
}

.main-v2-detail-artist {
  font-size: 20px;
  color: var(--text-secondary); /* Theme-aware: #555 (light) or #aaa (dark) */
  margin-bottom: 20px;
}

.main-v2-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.main-v2-detail-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-v2-detail-btn.primary {
  background: #007bff;
  color: #fff;
}

.main-v2-detail-btn.primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.main-v2-detail-btn.secondary {
  background: var(--bg-tertiary); /* Theme-aware: #f0f0f0 (light) or #2a2a2a (dark) */
  color: var(--text-primary); /* Theme-aware: #222 (light) or #fff (dark) */
  border: 1px solid var(--border-primary); /* Theme-aware: #ddd (light) or #444 (dark) */
}

.main-v2-detail-btn.secondary:hover {
  background: var(--bg-elevated); /* Theme-aware: #e8e8e8 (light) or #333 (dark) */
  border-color: var(--border-hover); /* Theme-aware: #999 (light) or #666 (dark) */
}

.main-v2-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 30px;
  padding: 20px;
  background: var(--bg-tertiary); /* Theme-aware: #f0f0f0 (light) or #2a2a2a (dark) */
  border-radius: 8px;
  border: 1px solid var(--border-primary); /* Theme-aware border */
}

.main-v2-meta-item {
  text-align: center;
}

.main-v2-meta-label {
  font-size: 12px;
  color: var(--text-tertiary); /* Theme-aware: #777 (light) or #888 (dark) */
  text-transform: uppercase;
  margin-bottom: 5px;
  font-weight: 500;
}

.main-v2-meta-value {
  font-size: 18px;
  color: var(--text-primary); /* Theme-aware: #222 (light) or #fff (dark) */
  font-weight: 600;
}

/* Lyrics Section */
.main-v2-detail-lyrics {
  margin-top: 40px;
  padding: 20px;
  background: var(--bg-tertiary); /* Theme-aware */
  border-radius: 8px;
  border: 1px solid var(--border-primary); /* Theme-aware border */
}

.main-v2-lyrics-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary); /* Theme-aware */
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border-primary); /* Theme-aware border */
}

.main-v2-lyrics-content {
  margin-top: 15px;
}

.main-v2-lyrics-text {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-primary); /* Theme-aware */
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
}

.main-v2-lyrics-empty {
  font-size: 14px;
  color: var(--text-tertiary); /* Theme-aware */
  text-align: center;
  padding: 20px;
  font-style: italic;
}

/* ============================================
   Enhanced Playlist Panel Styles
   ============================================ */

/* Playlist Panel Header */
.main-v2-playlist-header {
  margin-bottom: 15px;
}

.main-v2-create-playlist-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  margin-bottom: 15px;
}

.main-v2-create-playlist-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Playlist List Items */
.main-v2-playlist-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

.main-v2-playlist-card:hover {
  border-color: var(--accent-primary);
}

.main-v2-playlist-card.expanded {
  background: var(--bg-elevated);
}

.main-v2-playlist-header-row {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.main-v2-playlist-header-row:hover {
  background: var(--bg-hover);
}

.main-v2-playlist-expand {
  background: transparent;
  border: 1px solid var(--border-primary);
  padding: 0;
  margin: 0;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.main-v2-playlist-expand:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: scale(1.1);
}

.main-v2-playlist-expand:hover .main-v2-playlist-expand-icon .icon-outline {
  color: var(--accent-primary);
}

.main-v2-playlist-expand:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.main-v2-playlist-expand-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  color: var(--text-primary);
}

.main-v2-playlist-expand-icon .icon-outline {
  width: 22px;
  height: 22px;
  color: var(--text-primary);
  stroke: currentColor;
}

/* Caret 아이콘은 별도 아이콘을 사용하므로 회전 불필요 */

.main-v2-playlist-number {
  flex-shrink: 0;
  margin-left: 8px;
  margin-right: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.main-v2-playlist-info {
  flex: 1;
  min-width: 0;
}

.main-v2-playlist-name-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.main-v2-playlist-name,
.main-v2-playlist-name-display {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
  flex: 1;
  min-width: 0;
}

.main-v2-playlist-edit-form[hidden] {
  display: none !important;
}

.main-v2-playlist-edit-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.playlist-edit-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.playlist-edit-input {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  flex: 1;
  min-width: 0;
}

.playlist-edit-input:focus,
.playlist-edit-input:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(63, 131, 248, 0.25);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.playlist-edit-input::placeholder {
  color: var(--text-secondary);
}

.playlist-edit-input.is-invalid {
  border-color: var(--accent-danger, #dc3545);
  box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.25);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-danger, #dc3545) 25%, transparent);
}

.playlist-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.playlist-edit-submit,
.playlist-edit-cancel {
  border-radius: 6px;
  border: 1px solid var(--border-primary);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  background: var(--bg-elevated);
  color: var(--text-primary);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.playlist-edit-submit[data-variant="primary"] {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.playlist-edit-submit[data-variant="primary"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.playlist-edit-cancel[data-variant="ghost"] {
  background: transparent;
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

.playlist-edit-cancel[data-variant="ghost"]:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.playlist-edit-submit:focus-visible,
.playlist-edit-cancel:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.playlist-edit-submit[disabled],
.playlist-edit-cancel[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.playlist-edit-submit[data-loading="true"]::after {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: var(--bg-primary);
  animation: spin 0.8s linear infinite;
}

.playlist-edit-submit[data-loading="true"] {
  gap: 6px;
}

.playlist-edit-submit[data-loading="true"]::after {
  margin-left: 4px;
}

.playlist-edit-submit[data-loading="true"] {
  pointer-events: none;
}

.main-v2-playlist-count {
  display: none;
}

/* Playlist selection modal */
.playlist-selection-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.playlist-selection-dialog {
  background: var(--bg-elevated);
  color: var(--text-primary);
  width: min(420px, 100%);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
  border: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  max-height: min(520px, 90vh);
}

.playlist-selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
}

.playlist-selection-header h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.playlist-selection-close {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.playlist-selection-close:hover,
.playlist-selection-close:focus-visible {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.playlist-selection-body {
  padding: 0 24px;
  overflow-y: auto;
}

.playlist-selection-instruction {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.playlist-selection-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
}

.playlist-selection-option {
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: inherit;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.playlist-selection-option:hover,
.playlist-selection-option:focus-visible {
  border-color: var(--accent-primary);
  transform: translateY(-1px);
  background: var(--bg-hover);
}

.playlist-selection-option.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* 이미 추가된 플레이리스트 비활성화 스타일 */
.playlist-selection-option--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-secondary);
}

.playlist-selection-option--disabled:hover {
  background-color: var(--bg-secondary);
  transform: none;
  border-color: var(--border-primary);
}

.playlist-selection-option-index {
  font-weight: 600;
  color: var(--text-secondary);
}

.playlist-selection-option-name {
  flex: 1;
  text-align: left;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.playlist-selection-option-count {
  font-size: 13px;
  color: var(--text-secondary);
}

/* 이미 추가됨 배지 */
.playlist-selection-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  background-color: var(--accent-color);
  color: var(--text-primary);
  opacity: 0.8;
}

.playlist-selection-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border-primary);
  display: flex;
  justify-content: flex-end;
}

.playlist-selection-cancel {
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.playlist-selection-cancel:hover,
.playlist-selection-cancel:focus-visible {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

@media (max-width: 480px) {
  .playlist-selection-dialog {
    border-radius: 12px;
    width: 100%;
    max-height: 85vh;
  }

  .playlist-selection-header,
  .playlist-selection-body,
  .playlist-selection-footer {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.main-v2-playlist-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.main-v2-playlist-header-row:hover .main-v2-playlist-actions {
  opacity: 1;
}

.main-v2-playlist-action-btn {
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s;
}

.main-v2-playlist-action-btn .icon-outline {
  width: 16px;
  height: 16px;
  color: var(--text-primary);
}

.main-v2-playlist-action-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: scale(1.1);
}

.main-v2-playlist-action-btn:hover .icon-outline {
  color: var(--accent-primary);
}

.main-v2-playlist-action-btn.delete:hover {
  background: var(--bg-hover);
  border-color: var(--accent-danger);
}

.main-v2-playlist-action-btn.delete:hover .icon-outline {
  color: var(--accent-danger);
}

/* Playlist Content (Songs) */
.main-v2-playlist-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  background: var(--bg-tertiary);
}

.main-v2-playlist-card.expanded .main-v2-playlist-content {
  max-height: 1000px; /* 고정값 대신 충분히 큰 값 */
  overflow-y: auto;
}

.main-v2-playlist-songs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
}

.main-v2-playlist-songs-header small {
  margin-left: 12px;
}

.main-v2-playlist-controls {
  display: flex;
  gap: 8px;
}

.main-v2-select-all-btn,
.main-v2-play-selected-btn,
.main-v2-delete-selected-btn {
  background: var(--bg-elevated);
  border: none;
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.2s;
}

.main-v2-select-all-btn:hover {
  background: var(--bg-tertiary);
}

.main-v2-play-selected-btn {
  background: #4caf50;
  color: #fff;
}

.main-v2-play-selected-btn:hover:not(:disabled) {
  background: #45a049;
}

.main-v2-play-selected-btn:disabled {
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: not-allowed;
  opacity: 0.5;
}

.main-v2-delete-selected-btn {
  background: #f44336;
}

.main-v2-delete-selected-btn:hover {
  background: #d32f2f;
}

.main-v2-delete-selected-btn:disabled {
  background: var(--bg-elevated);
  cursor: not-allowed;
  opacity: 0.5;
}

.main-v2-playlist-song-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-primary);
  transition: background 0.2s;
  cursor: pointer;
}

.main-v2-playlist-song-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.main-v2-playlist-song-item.selected {
  background: rgba(0, 123, 255, 0.2);
}

.main-v2-song-checkbox {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  margin-left: 20px;
  cursor: pointer;
}

.main-v2-playlist-song-info {
  flex: 1;
  min-width: 0;
}

.main-v2-playlist-song-title-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.main-v2-playlist-song-title {
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  max-width: fit-content;
}

.main-v2-playlist-song-separator {
  color: var(--text-secondary);
  font-size: 11px;
  margin: 0 4px;
  flex-shrink: 0;
}

.main-v2-playlist-song-artist {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.main-v2-playlist-song-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.main-v2-playlist-song-item:hover .main-v2-playlist-song-actions {
  opacity: 1;
}

/* Empty Playlist State */
.main-v2-playlist-empty {
  padding: 20px;
  text-align: center;
  color: #666;
}

.main-v2-playlist-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.main-v2-playlist-empty-text {
  font-size: 12px;
}

/* Playlist Detail View (Main Content) */
.main-v2-playlist-detail {
  max-width: 800px;
  margin: 0 auto;
}

.main-v2-playlist-detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.main-v2-playlist-detail-cover {
  width: 200px;
  height: 200px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.main-v2-playlist-detail-cover .icon-outline {
  width: 64px;
  height: 64px;
  color: var(--text-primary);
}

.playlist-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.playlist-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: 8px;
}

.playlist-cover-placeholder .icon-outline {
  width: 64px;
  height: 64px;
  color: var(--text-primary);
  opacity: 0.6;
}

.main-v2-playlist-detail-info {
  flex: 1;
}

.main-v2-playlist-detail-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary); /* Theme-aware: #222 (light) or #fff (dark) */
  margin-bottom: 10px;
}

.main-v2-playlist-detail-meta {
  font-size: 16px;
  color: var(--text-secondary); /* Theme-aware: #555 (light) or #aaa (dark) */
  margin-bottom: 20px;
}

.main-v2-playlist-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.main-v2-playlist-detail-songs {
  background: var(--bg-tertiary); /* Theme-aware: #f0f0f0 (light) or #2a2a2a (dark) */
  border: 1px solid var(--border-primary); /* Theme-aware border */
  border-radius: 8px;
  padding: 20px;
}

.main-v2-playlist-detail-songs h3 {
  margin-bottom: 15px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 600;
}

/* Playlist Detail Song Item */
.main-v2-result-song-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.main-v2-result-song-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateX(2px);
}

.main-v2-song-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

.main-v2-song-info-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.main-v2-song-info-wrapper .main-v2-song-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.main-v2-song-separator {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 0 4px;
  flex-shrink: 0;
}

.main-v2-song-info-wrapper .main-v2-song-artist {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

.main-v2-result-song-item .main-v2-song-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.main-v2-result-song-item:hover .main-v2-song-actions {
  opacity: 1;
}
  color: var(--brand-color); /* Theme-aware: #e6b800 (light) or #f1c40f (dark) */
}

/* ============================================
   Enhanced My Songs Panel Styles
   ============================================ */

/* My Songs Panel Header */
.main-v2-mysongs-header {
  margin-bottom: 15px;
}

.main-v2-mysongs-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.main-v2-mysongs-tab {
  flex: 1;
  padding: 10px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  text-align: center;
}

.main-v2-mysongs-tab:hover {
  background: #333;
  color: #fff;
}

.main-v2-mysongs-tab.active {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
  border-color: #f5576c;
}

/* Controls Row */
.main-v2-mysongs-controls {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.main-v2-mysongs-search {
  flex: 1;
  min-width: 150px;
}

.main-v2-mysongs-search input {
  width: 100%;
  padding: 8px 12px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
}

.main-v2-mysongs-search input:focus {
  outline: none;
  border-color: #f5576c;
}

.main-v2-mysongs-sort {
  position: relative;
}

.main-v2-sort-btn {
  padding: 8px 12px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
}

.main-v2-sort-btn:hover {
  background: #333;
  border-color: #f5576c;
}

.main-v2-sort-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  min-width: 180px;
  z-index: 100;
  display: none;
}

.main-v2-sort-dropdown.active {
  display: block;
}

.main-v2-sort-option {
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 13px;
  color: #fff;
}

.main-v2-sort-option:hover {
  background: #333;
}

.main-v2-sort-option.active {
  background: #f5576c;
  color: #fff;
}

.main-v2-view-toggle {
  display: flex;
  gap: 4px;
}

.main-v2-view-btn {
  padding: 8px 12px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s;
}

.main-v2-view-btn:hover {
  background: #333;
  color: #fff;
}

.main-v2-view-btn.active {
  background: #f5576c;
  color: #fff;
  border-color: #f5576c;
}

/* My Songs List */
.main-v2-mysongs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-v2-mysong-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #2a2a2a;
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
  gap: 12px;
}

.main-v2-mysong-item:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.main-v2-mysong-thumbnail {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  position: relative;
}

.main-v2-mysong-flag {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f1c40f;
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 600;
}

.main-v2-mysong-flag.new {
  background: #2ecc71;
}

.main-v2-mysong-flag.popular {
  background: #e74c3c;
  color: #fff;
}

.main-v2-mysong-info {
  flex: 1;
  min-width: 0;
}

.main-v2-mysong-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-v2-mysong-meta {
  font-size: 12px;
  color: #888;
  display: flex;
  gap: 8px;
  align-items: center;
}

.main-v2-mysong-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-v2-mysong-genre {
  padding: 2px 6px;
  background: rgba(241, 196, 15, 0.2);
  border-radius: 4px;
  font-size: 10px;
  color: #f1c40f;
}

.main-v2-mysong-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.main-v2-mysong-item:hover .main-v2-mysong-actions {
  opacity: 1;
}

.main-v2-mysong-action-btn {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.main-v2-mysong-action-btn:hover {
  background: #f5576c;
  transform: scale(1.1);
}

.main-v2-mysong-action-btn.play {
  background: #f5576c;
  font-size: 16px;
}

.main-v2-mysong-action-btn.play:hover {
  transform: scale(1.2);
}

/* Grid View (Alternative) */
.main-v2-mysongs-list.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.main-v2-mysongs-list.grid-view .main-v2-mysong-item {
  flex-direction: column;
  text-align: center;
  padding: 15px;
}

.main-v2-mysongs-list.grid-view .main-v2-mysong-thumbnail {
  width: 100%;
  height: 100px;
}

.main-v2-mysongs-list.grid-view .main-v2-mysong-info {
  width: 100%;
}

.main-v2-mysongs-list.grid-view .main-v2-mysong-actions {
  opacity: 1;
  justify-content: center;
  margin-top: 8px;
}

/* Stats Bar */
.main-v2-mysongs-stats {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(245, 87, 108, 0.1);
  border-radius: 6px;
  margin-bottom: 15px;
}

.main-v2-stat-item {
  text-align: center;
}

.main-v2-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #f5576c;
  display: block;
}

.main-v2-stat-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
}

/* ============================================
   Enhanced Friends Panel Styles
   ============================================ */

/* Friends Panel Header */
.main-v2-friends-header {
  margin-bottom: 15px;
}

.main-v2-friends-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}

.main-v2-friends-tab {
  flex: 1;
  padding: 10px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #aaa;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  text-align: center;
}

.main-v2-friends-tab:hover {
  background: #333;
  color: #fff;
}

.main-v2-friends-tab.active {
  background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  color: #fff;
  border-color: #48c6ef;
}

/* Friends Tab Badge */
.requests-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  background: var(--accent-primary);
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}

.requests-badge.received-badge {
  background: #ff4444; /* 빨간색 - 받은 요청 강조 */
  animation: pulse 2s infinite;
}

.requests-badge.sent-badge {
  background: var(--text-tertiary); /* 회색 - 보낸 요청 */
  opacity: 0.8;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.main-v2-friends-tab.active .requests-badge.received-badge {
  background: rgba(255, 255, 255, 0.3);
  color: white;
}

.main-v2-friends-tab.active .requests-badge.sent-badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Friend Search */
.main-v2-friend-search {
  margin-bottom: 15px;
}

.main-v2-friend-search input {
  width: 100%;
  padding: 8px 12px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
}

.main-v2-friend-search input:focus {
  outline: none;
  border-color: #48c6ef;
}

/* Friend List */
.main-v2-friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-v2-friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #2a2a2a;
  border-radius: 6px;
  transition: all 0.2s;
  cursor: pointer;
  gap: 12px;
}

.main-v2-friend-item:hover {
  background: #333;
  transform: translateX(5px);
}

.main-v2-friend-avatar {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.main-v2-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.main-v2-friend-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: 700;
}

.main-v2-friend-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #2a2a2a;
}

.main-v2-friend-status.online {
  background: #2ecc71;
}

.main-v2-friend-status.offline {
  background: #95a5a6;
}

.main-v2-friend-status.listening {
  background: #e74c3c;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.main-v2-friend-info {
  flex: 1;
  min-width: 0;
}

.main-v2-friend-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-v2-friend-activity {
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 5px;
}

.main-v2-friend-activity.listening {
  color: #48c6ef;
}

.main-v2-friend-activity .icon {
  font-size: 10px;
}

.main-v2-friend-actions {
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.main-v2-friend-item:hover .main-v2-friend-actions {
  opacity: 1;
}

.main-v2-friend-action-btn {
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
}

.main-v2-friend-action-btn:hover {
  background: #48c6ef;
  transform: scale(1.1);
}

/* Activity Feed */
.main-v2-activity-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.main-v2-activity-item {
  background: #2a2a2a;
  border-radius: 6px;
  padding: 12px;
  transition: all 0.2s;
  cursor: pointer;
}

.main-v2-activity-item:hover {
  background: #333;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(72, 198, 239, 0.2);
}

.main-v2-activity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.main-v2-activity-avatar {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.main-v2-activity-user {
  flex: 1;
}

.main-v2-activity-username {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.main-v2-activity-time {
  font-size: 11px;
  color: #888;
}

.main-v2-activity-action {
  font-size: 12px;
  color: #48c6ef;
  margin-bottom: 8px;
}

.main-v2-activity-content {
  display: flex;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.main-v2-activity-thumbnail {
  width: 45px;
  height: 45px;
  background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.main-v2-activity-details {
  flex: 1;
  min-width: 0;
}

.main-v2-activity-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-v2-activity-subtitle {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shared Items */
.main-v2-shared-item {
  background: #2a2a2a;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  transition: all 0.2s;
}

.main-v2-shared-item:hover {
  background: #333;
}

.main-v2-shared-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.main-v2-shared-by {
  font-size: 12px;
  color: #48c6ef;
}

.main-v2-shared-time {
  font-size: 11px;
  color: #888;
}

.main-v2-shared-content {
  display: flex;
  gap: 10px;
  cursor: pointer;
}

/* Friend Detail View */
.main-v2-friend-detail {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.main-v2-friend-detail-back {
  margin-bottom: 20px;
}

.main-v2-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.main-v2-back-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.main-v2-back-btn span {
  font-size: 18px;
  line-height: 1;
}

.main-v2-friend-detail-header {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.main-v2-friend-detail-avatar {
  width: 150px;
  height: 150px;
  background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  flex-shrink: 0;
  box-shadow: 0 8px 32px rgba(72, 198, 239, 0.3);
  position: relative;
  overflow: hidden;
}

.main-v2-friend-detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.main-v2-friend-detail-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: white;
  font-weight: 700;
}

.main-v2-friend-detail-status {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #1a1a1a;
}

.main-v2-friend-detail-info {
  flex: 1;
}

.main-v2-friend-detail-name {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary); /* Theme-aware: #222 (light) or #fff (dark) */
  margin-bottom: 8px;
}

.main-v2-friend-detail-username {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  font-weight: 400;
}

.main-v2-friend-detail-status-text {
  font-size: 16px;
  color: var(--accent-primary); /* Theme-aware accent color */
  margin-bottom: 20px;
}

.main-v2-friend-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.main-v2-friend-detail-section {
  background: var(--bg-tertiary); /* Theme-aware: #f0f0f0 (light) or #2a2a2a (dark) */
  border: 1px solid var(--border-primary); /* Theme-aware border */
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.main-v2-friend-detail-section h3 {
  margin-bottom: 15px;
  color: var(--accent-primary); /* Theme-aware accent color */
}

/* Empty State */
.main-v2-friends-empty {
  text-align: center;
  padding: 40px 20px;
  color: #666;
}

.main-v2-friends-empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.main-v2-friends-empty-text {
  font-size: 14px;
  margin-bottom: 20px;
}

.main-v2-add-friend-btn {
  background: linear-gradient(135deg, #48c6ef 0%, #6f86d6 100%);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.main-v2-add-friend-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(72, 198, 239, 0.4);
}

/* ============================================
   Accessibility & Keyboard Navigation
   ============================================ */

/* Focus Visible - Modern Browsers */
*:focus-visible {
  outline: 2px solid #f1c40f;
  outline-offset: 2px;
}

/* Focus for Keyboard Navigation */
.main-v2-panel-btn:focus-visible,
.main-v2-action-btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #f1c40f;
  outline-offset: 2px;
}

/* Skip to Content Link (Accessibility) */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: #f1c40f;
  color: #000;
  padding: 8px;
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
  top: 0;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .main-v2-panel-btn,
  .main-v2-action-btn,
  button {
    border: 2px solid currentColor;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .main-v2-friend-status.listening {
    animation: none;
  }
  
  /* 고정 사이드바/플레이어와 Drawer 모션 감소 */
  .main-v2-sidebar,
  .drawer-panel,
  .player-bar,
  #global-audio-player {
    transition: none !important;
  }
}

/* ============================================
   Responsive Layout Improvements
   ============================================ */

/* Desktop - Default (1200px+) - Already defined above */

/* Tablet - Medium (768px - 1199px) */
/* NOTE: 사이드바 width 규칙은 제거됨 - 새로운 미디어쿼리(481~1023px, ≥1024px)에서 처리 */
@media (max-width: 1199px) {
  /* 사이드바 width 규칙 제거 - 새로운 미디어쿼리와 충돌 방지 */
  /* .main-v2-sidebar width 규칙은 layout 레이어의 미디어쿼리에서 처리 */
  
  .main-v2-nav-center {
    flex: 0.5;
  }
}

/* Tablet - Small (576px - 767px) */
@media (max-width: 767px) {
  .main-v2-top-nav {
    flex-wrap: wrap;
    padding: 10px;
  }
  
  .main-v2-nav-left {
    flex: 1;
    gap: 10px;
  }
  
  .main-v2-nav-brand {
    font-size: 16px;
  }
  
  /* Home button removed
  .main-v2-home-btn {
    padding: 8px 12px;
    font-size: 13px;
  }
  */
  
  .main-v2-nav-center {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }
  
  .main-v2-nav-right {
    gap: 5px;
  }
  
  .main-v2-sidebar {
    /* width: 153px !important; 비활성화 - 768px 이하에서는 60px로 고정 (3641번째 줄 참조) */
    /* min-width: 128px; 비활성화 */
    overflow-x: hidden !important; /* Always hide horizontal scrollbar */
  }
  
  .main-v2-resize-handle {
    display: none; /* Disable resize on tablet */
  }
}

/* Mobile - Large (481px - 575px) - Keep for backward compatibility */
@media (max-width: 575px) {
  /* Show hamburger menu */
  .main-v2-hamburger-btn {
    display: flex;
  }
}

/* ============================================
   중간 구간 (481~768px): 사이드바 60px, 콘텐츠 영역 조정
   ============================================ */
/* z-index policy: 1000 backdrop < 1001 sidebar < 1002 player < 1100 navbar < 1200 dropdown/tooltip */
/* 참고: 768px 이하에서는 사이드바가 60px로 고정됨 (3641번째 줄 참조) */
@media (min-width: 481px) and (max-width: 768px) {
  .main-v2-sidebar {
    position: fixed;
    top: calc(var(--navbar-h) + var(--safe-top)); /* 네비게이션 바 아래로 */
    left: 0;
    width: 60px !important; /* 사이드바 너비 60px */
    min-width: 60px;
    max-width: 60px;
    height: calc(100dvh - var(--navbar-h) - var(--safe-top) - var(--player-h));
    overflow-y: auto;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1001;
    margin: 0 !important;
    padding-bottom: 0;
  }
  
  .main-v2-content-area {
    margin-left: 0; /* 기본 위치 유지 */
    width: 100%; /* 전체 너비 사용 */
  }
  
  .main-v2-main-content {
    margin-left: 60px !important; /* 사이드바 너비만큼 오른쪽으로 이동 */
    width: calc(100% - 60px); /* 부모 너비 - 사이드바 너비 (스크롤바 고려) */
    padding: 0; /* 모든 패딩 제거 */
    padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-desktop));
    padding-bottom: var(--player-h);
    min-height: calc(100dvh - var(--player-h)); /* 컨텐츠 영역 최소 높이 보장 */
    position: relative;
    z-index: 0;
    overflow-y: visible;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    box-sizing: border-box; /* padding을 포함한 너비 계산 */
  }
}

/* ============================================
   중간 구간 (769~1023px): 고정 사이드바
   ============================================ */
/* z-index policy: 1000 backdrop < 1001 sidebar < 1002 player < 1100 navbar < 1200 dropdown/tooltip */
/* 참고: 768px 이하에서는 사이드바가 60px로 고정됨 (3641번째 줄 참조) */
@media (min-width: 769px) and (max-width: 1023px) {
  .main-v2-sidebar {
    position: fixed;
    top: calc(var(--navbar-h) + var(--safe-top));
    left: 0;
    width: var(--sidebar-w-md) !important;
    min-width: var(--sidebar-w-md);
    max-width: var(--sidebar-w-md);
    height: calc(100dvh - var(--navbar-h) - var(--safe-top) - var(--player-h));
    overflow-y: auto;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1001;
    margin: 0 !important;
    padding-bottom: 0;
  }
  
  .main-v2-content-area {
    margin-left: 0; /* 기본 위치 유지 */
    width: 100%; /* 전체 너비 사용 */
  }
  
  .main-v2-main-content {
    margin-left: var(--sidebar-w-md) !important; /* 사이드바 너비만큼 오른쪽으로 이동 */
    width: calc(100% - var(--sidebar-w-md)); /* 부모 너비 - 사이드바 너비 (스크롤바 고려) */
    padding: 0; /* 모든 패딩 제거 */
    padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-desktop));
    padding-bottom: var(--player-h);
    min-height: calc(100dvh - var(--player-h)); /* 컨텐츠 영역 최소 높이 보장 */
    position: relative;
    z-index: 0;
    overflow-y: visible;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    box-sizing: border-box; /* padding을 포함한 너비 계산 */
  }
}

/* ============================================
   기본 구간 (≥1024px): 고정 사이드바
   ============================================ */
/* z-index policy: 1000 backdrop < 1001 sidebar < 1002 player < 1100 navbar < 1200 dropdown/tooltip */
@media (min-width: 1024px) {
  .main-v2-sidebar {
    position: fixed;
    top: calc(var(--navbar-h) + var(--safe-top));
    left: 0;
    width: var(--sidebar-w-lg) !important;
    min-width: var(--sidebar-w-lg);
    max-width: var(--sidebar-w-lg);
    height: calc(100dvh - var(--navbar-h) - var(--safe-top) - var(--player-h));
    overflow-y: auto;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    z-index: 1001;
    margin: 0 !important;
    padding-bottom: 0;
  }
  
  .main-v2-content-area {
    margin-left: 0; /* 기본 위치 유지 */
    width: 100%; /* 전체 너비 사용 */
  }
  
  .main-v2-main-content {
    margin-left: var(--sidebar-w-lg) !important; /* 사이드바 너비만큼 오른쪽으로 이동 */
    width: calc(100% - var(--sidebar-w-lg)); /* 부모 너비 - 사이드바 너비 (스크롤바 고려) */
    padding: 0; /* 모든 패딩 제거 */
    padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-desktop));
    padding-bottom: var(--player-h);
    min-height: calc(100dvh - var(--player-h)); /* 컨텐츠 영역 최소 높이 보장 */
    position: relative;
    z-index: 0;
    overflow-y: visible;
    overflow-x: hidden; /* 가로 스크롤 방지 */
    box-sizing: border-box; /* padding을 포함한 너비 계산 */
  }
}

/* Mobile - Drawer & Mini Player (≤480px) */
@media (max-width: 480px) {
  /* z-index 레이어링 재정의 */
  /* z-index policy: 1000 backdrop < 1001 sidebar < 1002 player < 1100 navbar < 1200 dropdown/tooltip */
  .player-bar,
  #global-audio-player {
    z-index: 1002; /* player (sidebar 1001 위) */
  }
  
  .drawer-backdrop,
  .mobile-sidebar-overlay {
    z-index: 1000; /* Drawer backdrop */
  }
  
  .drawer-panel,
  .main-v2-sidebar {
    z-index: 1001; /* Drawer panel */
  }
  
  .dropdown-menu,
  .tooltip {
    z-index: 1200; /* Dropdown/Tooltip (navbar 위에) */
  }
  
  /* DO NOT MODIFY (mobile mini sidebar): Drawer/Off-canvas only. No fixed positioning here. */
  /* Hide sidebar by default on mobile */
  .main-v2-sidebar {
    position: fixed;
    left: -280px; /* Hidden off-screen */
    /* 네브바가 fixed이므로 높이 계산 */
    top: calc(var(--navbar-h) + var(--safe-top)); /* Below top nav */
    bottom: var(--player-h); /* Above audio player */
    width: 280px !important;
    max-width: 80vw;
    height: auto !important;
    max-height: none !important;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-primary);
    border-bottom: none;
    transition: transform 0.25s ease;
    overflow-y: auto;
    overflow-x: hidden !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
  }
  
  /* Sidebar open state */
  .main-v2-sidebar.mobile-menu-open,
  .main-v2-sidebar.is-open {
    transform: translateX(0);
    left: 0;
  }
  
  /* Overlay when sidebar is open */
  .drawer-backdrop,
  .mobile-sidebar-overlay {
    position: fixed;
    /* 네브바가 fixed이므로 높이 계산 */
    top: calc(var(--navbar-h) + var(--safe-top));
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: block;
  }
  
  .drawer-backdrop[hidden],
  .mobile-sidebar-overlay[hidden] {
    display: none !important;
  }
  
  .drawer-backdrop.is-open,
  .mobile-sidebar-overlay.active,
  .mobile-sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Sidebar hidden 초기 상태 */
  .main-v2-sidebar[hidden] {
    display: block; /* hidden이어도 display는 block 유지 (transform으로 숨김) */
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .main-v2-sidebar,
    .drawer-backdrop,
    .mobile-sidebar-overlay,
    .main-v2-top-nav {
      transition: none !important;
    }
  }
  
  /* Main content takes full width */
  .main-v2-content-area {
    flex-direction: column;
  }
  
  .main-v2-main-content {
    flex: 1;
    width: 100%;
    margin-left: 0;
    padding-top: calc(var(--navbar-h) + var(--safe-top) + var(--title-gap-mobile));
    padding-bottom: var(--player-h);
  }
  
  /* 모바일 타이틀 여백 최적화 */
  .main-v2-welcome h1,
  .page-header h1,
  .page-title,
  .page-description-row h1 {
    margin-top: 4px;
    margin-bottom: 12px;
  }
  
  /* Navigation adjustments */
  .main-v2-nav-label-top {
    font-size: 16px;
  }
  
  .nav-label-top {
    display: inline; /* Keep text on mobile */
  }
  
  /* Touch-friendly icon buttons */
  .main-v2-nav-icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
  }
  
  .nav-icon-top {
    width: 20px;
    height: 20px;
  }
  
  /* Reduce top nav gap */
  .main-v2-top-nav {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    /* padding-top은 이미 env(safe-area-inset-top)으로 설정됨 */
  }
  
  .main-v2-nav-left {
    gap: 8px;
  }
  
  .main-v2-nav-right {
    gap: 6px;
  }
  
  /* Simplified panels for mobile */
  .main-v2-mysongs-controls,
  .main-v2-playlist-controls {
    flex-direction: column;
    gap: 8px;
  }
  
  .main-v2-mysongs-search,
  .main-v2-mysongs-sort {
    width: 100%;
  }
  
  /* Search panel mobile optimizations */
  .search-v2-result-item {
    padding: 12px;
  }
  
  .search-v2-play-btn {
    width: 44px; /* Touch-friendly */
    height: 44px;
  }
  
  .play-icon {
    width: 18px;
    height: 18px;
  }
  
  .search-v2-song-title {
    font-size: 15px;
  }
  
  .search-v2-song-artist {
    font-size: 13px;
  }
  
  .search-v2-meta-tag {
    font-size: 12px;
    margin-right: 10px;
  }
  
  .search-v2-action-btn {
    min-height: 44px; /* Touch-friendly */
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* Mobile - Extra Small (≤480px) */
@media (max-width: 480px) {
  /* Hamburger and home link adjustments */
  .main-v2-hamburger-btn {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
  
  .main-v2-top-nav {
    padding: 0 8px;
    gap: 6px;
  }
  
  .main-v2-nav-left {
    gap: 6px;
  }
  
  .main-v2-nav-right {
    gap: 4px;
  }
  
  /* Hide text labels, show icons only */
  .nav-label-top {
    display: none;
  }
  
  /* Smaller icons */
  .main-v2-nav-icon-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
  }
  
  .nav-icon-top {
    width: 18px;
    height: 18px;
  }
  
  /* Sidebar adjustments */
  .main-v2-sidebar {
    width: 260px !important;
    max-width: 85vw;
    overflow-x: hidden !important; /* Always hide horizontal scrollbar */
  }
  
  /* Search panel ultra-compact */
  .search-v2-result-item {
    padding: 10px;
    gap: 10px;
  }
  
  .search-v2-play-btn {
    width: 40px;
    height: 40px;
  }
  
  .play-icon {
    width: 16px;
    height: 16px;
  }
  
  .search-v2-song-title {
    font-size: 14px;
  }
  
  .search-v2-song-artist {
    font-size: 11px;
  }
  
  .search-v2-meta-tag {
    font-size: 11px;
    margin-right: 8px;
  }
  
  .search-v2-action-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  /* Compact song items */
  .main-v2-result-song-item,
  .main-v2-mysong-item,
  .main-v2-playlist-song-item {
    padding: 8px;
    font-size: 12px;
  }
  
  /* Hide less important elements */
  .main-v2-song-number,
  .main-v2-mysong-genre {
    display: none;
  }
}

/* Landscape Mobile (480px 이하만 적용 - 481~768px 구간 제외) */
@media (max-width: 480px) and (orientation: landscape) {
  .main-v2-sidebar {
    max-height: 50vh;
  }
}

/* ============================================
   Loading & Error States
   ============================================ */

.main-v2-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #888;
  font-size: 14px;
}

.main-v2-loading::before {
  content: '⏳';
  display: inline-block;
  margin-right: 8px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.main-v2-error {
  padding: 20px;
  background: rgba(244, 67, 54, 0.1);
  border: 1px solid #f44336;
  border-radius: 6px;
  color: #f44336;
  text-align: center;
}

.main-v2-success {
  padding: 20px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid #4caf50;
  border-radius: 6px;
  color: #4caf50;
  text-align: center;
}

/* ============================================
   Keyboard Navigation Hints
   ============================================ */

.main-v2-keyboard-hint {
  position: fixed;
  bottom: 100px;
  right: 20px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #f1c40f;
  border-radius: 8px;
  padding: 15px;
  z-index: 9999;
  max-width: 300px;
  display: none;
}

.main-v2-keyboard-hint.visible {
  display: block;
}

.main-v2-keyboard-hint h4 {
  color: #f1c40f;
  margin-bottom: 10px;
  font-size: 14px;
}

.main-v2-keyboard-hint ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-v2-keyboard-hint li {
  padding: 5px 0;
  font-size: 12px;
  color: #fff;
}

.main-v2-keyboard-hint kbd {
  background: #333;
  border: 1px solid #555;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 11px;
  color: #f1c40f;
  margin-right: 5px;
}

/* Scrollbar Styling */
.main-v2-panel-content::-webkit-scrollbar,
.main-v2-main-content::-webkit-scrollbar,
.main-v2-autocomplete::-webkit-scrollbar,
.main-v2-playlist-content::-webkit-scrollbar {
  width: 8px;
}

.main-v2-panel-content::-webkit-scrollbar-track,
.main-v2-main-content::-webkit-scrollbar-track,
.main-v2-autocomplete::-webkit-scrollbar-track,
.main-v2-playlist-content::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.main-v2-panel-content::-webkit-scrollbar-thumb,
.main-v2-main-content::-webkit-scrollbar-thumb,
.main-v2-autocomplete::-webkit-scrollbar-thumb,
.main-v2-playlist-content::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

.main-v2-panel-content::-webkit-scrollbar-thumb:hover,
.main-v2-main-content::-webkit-scrollbar-thumb:hover,
.main-v2-autocomplete::-webkit-scrollbar-thumb:hover,
.main-v2-playlist-content::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ============================================
   우측 메인 영역 스타일 (New Structure)
   ============================================ */

.main-v2-panel-view {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: visible; /* Allow horizontal overflow for scrollable content */
}

/* Allow dropdowns to extend beyond panel content area */
.main-v2-panel-content-area {
  width: 100%;
  overflow: visible;
}

.main-v2-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-primary); /* 테마 자동 전환 */
}

.main-v2-panel-header h2 {
  margin: 0;
  font-size: 24px;
  color: var(--text-primary); /* 라이트: #222, 다크: #fff */
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;  /* Allow title to grow and claim space */
  min-width: 0;     /* Allow text wrapping if absolutely needed */
}

.main-v2-panel-header h2 .icon-outline {
  width: 20px;
  height: 20px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.main-v2-search-controls {
  margin-bottom: 20px;
}

.main-v2-search-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-tertiary); /* 라이트: #f0f0f0, 다크: #2a2a2a */
  border: 1px solid var(--border-primary); /* 라이트: #ddd, 다크: #444 */
  border-radius: 8px;
  color: var(--text-primary); /* 라이트: #222, 다크: #fff */
  font-size: 16px;
  transition: all 0.2s;
}

.main-v2-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  background: var(--bg-secondary); /* 라이트: #fff, 다크: #222 */
}

.main-v2-panel-content-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Song Item (우측 메인 영역) */
.main-v2-song-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #2a2a2a;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.main-v2-song-item:hover {
  background: #333;
  border-color: #007bff;
  transform: translateY(-2px);
}

.main-v2-song-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.main-v2-song-info {
  flex: 1;
  min-width: 0;
}

.main-v2-song-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-v2-song-artist {
  font-size: 14px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-v2-song-genre {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* Playlist Card (우측 메인 영역) - 중복 제거됨, 1332번 줄 참조 */

.main-v2-playlist-header {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  cursor: pointer;
}

.main-v2-playlist-number {
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.main-v2-playlist-info {
  flex: 1;
  min-width: 0;
}

.main-v2-playlist-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-v2-playlist-meta {
  font-size: 14px;
  color: var(--text-secondary);
}

.main-v2-playlist-actions {
  display: flex;
  gap: 8px;
}

/* Welcome Message */
/* Enhanced Welcome Section */
/* .main-v2-welcome-message 제거됨 - welcome-container로 대체 */

.welcome-container {
  display: flex;
  flex-direction: row !important; /* 명시적으로 가로 배치 - 중요도 높임 */
  align-items: flex-start; /* 상단 정렬로 변경하여 제목이 이미지 옆에 오도록 */
  justify-content: flex-start; /* 중앙 정렬 제거 - 좌측 정렬 */
  gap: 40px;
  max-width: 100%; /* 부모 너비를 초과하지 않도록 제한 */
  width: 100%; /* 전체 너비 사용 */
  min-width: 0; /* flexbox에서 축소 가능하게 함 */
  min-height: 100%;
  padding: 40px 0; /* 상하 패딩만 유지, 좌우는 제거 */
  overflow-x: hidden; /* 가로 스크롤 방지 */
  overflow-y: auto; /* 세로 스크롤 허용 */
  box-sizing: border-box; /* padding을 포함한 너비 계산 */
  background: var(--bg-primary); /* 바깥 배경과 동일하게 설정 */
}

.welcome-profile {
  flex-shrink: 0;
  min-width: 0; /* flexbox에서 축소 가능하게 함 */
  display: flex;
  flex-direction: row; /* 이미지와 제목을 가로로 배치 */
  align-items: center; /* 수직 중앙 정렬 */
  gap: 20px; /* 이미지와 제목 사이 간격 */
  max-width: 90%; /* 너비를 10% 줄임 */
  width: auto; /* 내용에 맞게 너비 조정 */
  margin-left: 5%; /* 오른쪽으로 5% 이동 (10%에서 5%로 조정) */
}

.welcome-profile-img {
  width: 160.38px; /* 145.8px의 110% (10% 증가) */
  height: 160.38px; /* 145.8px의 110% (10% 증가) */
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--brand-color, #f1c40f);
  box-shadow: 0 8px 24px rgba(241, 196, 15, 0.3);
  box-sizing: border-box; /* border를 너비에 포함 */
  flex-shrink: 0; /* 이미지 축소 방지 */
}

.welcome-content {
  flex: 1;
  min-width: 0; /* flexbox에서 축소 가능하게 함 */
  text-align: left;
  overflow-wrap: break-word; /* 긴 텍스트 줄바꿈 */
  word-break: break-word; /* 단어 단위로 줄바꿈 */
  max-width: 100%; /* 부모 너비를 초과하지 않도록 제한 */
  overflow: hidden; /* 넘치는 내용 숨김 */
  display: flex;
  flex-direction: column; /* 제목, 부제목 등을 세로로 배치 */
  padding: 16px; /* 기본 패딩 */
}

.welcome-title {
  font-size: 47.52px; /* 43.2px의 110% (10% 증가) */
  font-weight: 700;
  color: var(--brand-color, #f1c40f);
  margin: 0; /* 모든 마진 제거 - 이미지와 같은 줄에 배치 */
  line-height: 1.2;
  /* 제목은 welcome-profile 안에 이미지 옆에 배치됨 */
}

.welcome-subtitle {
  font-size: 20px;
  color: var(--text-secondary, #aaa);
  margin: 24px 0 16px 0; /* 상단 마진 추가하여 아래로 내림 */
  line-height: 1.5;
  text-align: center; /* 가운데 정렬 */
  width: 100%; /* 전체 너비 사용하여 중앙 정렬 가능하게 함 */
}

/* Responsive adjustments */
/* 데스크톱/태블릿에서 gap 줄이기 */
@media (min-width: 769px) and (max-width: 1200px) {
  .welcome-container {
    gap: 24px; /* 40px에서 24px로 줄임 */
    padding: 32px 0; /* 패딩도 약간 줄임 */
  }
  
  .welcome-profile-img {
    width: 140px; /* 이미지 크기 약간 줄임 */
    height: 140px;
  }
  
  .welcome-title {
    font-size: 40px; /* 제목 크기 약간 줄임 */
  }
  
  .welcome-subtitle {
    font-size: 18px; /* 부제목 크기 약간 줄임 */
  }
}

/* 큰 화면에서도 gap 조정 */
@media (min-width: 1201px) {
  .welcome-container {
    gap: 32px; /* 40px에서 32px로 약간 줄임 */
  }
  
  .welcome-content {
    padding: 24px; /* 큰 화면 패딩 */
  }
}

/* 데스크톱 화면 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .welcome-content {
    padding: 20px; /* 데스크톱 패딩 */
  }
}

/* 큰 데스크톱 화면 (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .welcome-content {
    padding: 22px; /* 큰 데스크톱 패딩 */
  }
}

@media (max-width: 768px) {
  .welcome-container {
    flex-direction: row !important; /* 가로 배치 유지 - 제목과 이미지 같은 줄 */
    align-items: flex-start; /* 상단 정렬 */
    text-align: left; /* 좌측 정렬 유지 */
    gap: 24px;
    padding: 24px 0; /* 패딩도 줄임 */
  }
  
  .welcome-content {
    text-align: left; /* 좌측 정렬 유지 */
    padding: 12px; /* 태블릿 패딩 */
  }
  
  .welcome-profile-img {
    width: 126px;
    height: 126px;
  }
  
  .welcome-title {
    font-size: 36px;
  }
  
  .welcome-subtitle {
    font-size: 16px;
  }

  .welcome-guest-notice {
    justify-content: center;
  }

  .welcome-guest-card {
    align-items: center;
  }

  .welcome-guest-text {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .welcome-container {
    padding: 20px 0; /* 상하 패딩만 유지, 좌우는 제거 */
  }
  
  .welcome-content {
    padding: 8px; /* 모바일 패딩 */
  }
  
  .welcome-profile-img {
    width: 90px;
    height: 90px;
  }
  
  .welcome-title {
    font-size: 28px;
  }
  
  .welcome-subtitle {
    font-size: 14px;
  }
}

/* Welcome Area Guest Notice - New location */
.welcome-guest-notice {
  display: flex;
  flex-direction: column; /* 세로 배치 */
  align-items: center; /* 중앙 정렬 */
  justify-content: center; /* 중앙 정렬 */
  margin-top: 32px; /* 아래로 더 내림 (24px → 32px) */
  padding: 0;
  width: 100%;
}

.welcome-guest-card {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 작은 화면에서 줄바꿈 허용 */
  align-items: center;
  justify-content: center; /* 중앙 정렬 */
  gap: 16px;
  padding: 0;
  max-width: 100%; /* 부모 너비를 초과하지 않도록 제한 */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  width: auto; /* 내용에 맞게 너비 조정 */
  margin: 0 auto; /* 중앙 정렬을 위한 마진 */
  box-sizing: border-box;
}

.welcome-guest-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  text-align: left;
  flex-shrink: 1; /* 축소 가능하게 함 */
  min-width: 0; /* flexbox에서 축소 가능하게 함 */
  overflow-wrap: break-word; /* 긴 텍스트 줄바꿈 */
}

.welcome-gift-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--text-primary);
  color: var(--text-primary);
}

.welcome-guest-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--brand-color, #f1c40f);
  color: var(--bg-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  transition: all var(--transition-fast);
  min-width: 90px;
  flex-shrink: 0;
}

.welcome-guest-link:hover {
  background: var(--brand-color-hover, #e6b800);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(241, 196, 15, 0.4);
}

/* Responsive adjustments for welcome guest notice */
@media (max-width: 768px) {
  .welcome-guest-notice {
    margin-top: 20px;
    padding: 0;
  }

  .welcome-guest-card {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .welcome-guest-text {
    font-size: 16px;
    text-align: center;
    flex: none;
  }

  .welcome-guest-link {
    padding: 8px 16px;
    font-size: 14px;
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .welcome-guest-notice {
    margin-top: 16px;
    padding: 0;
  }

  .welcome-guest-card {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .welcome-guest-text {
    font-size: 14px;
    text-align: center;
    flex: none;
  }

  .welcome-guest-link {
    padding: 8px 16px;
    font-size: 13px;
    min-width: 90px;
    width: 100%;
    max-width: 180px;
  }
}

/* Guest Benefits Section */
.guest-benefits-section {
  width: 100%;
  margin-bottom: 8px;
}

@media (min-width: 1025px) {
  .guest-benefits-section {
    margin-bottom: 12px;
  }
}

.guest-benefits-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 16px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}

@media (min-width: 1025px) {
  .benefits-grid {
    margin-bottom: 12px;
  }
}

.benefit-card {
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.benefit-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  color: var(--accent-primary, var(--text-primary)); /* 원래 색상으로 복원 */
}

.benefit-icon svg {
  width: 100%;
  height: 100%;
}

/* benefit-card 안의 아이콘만 황금색으로 */
.benefit-card[data-benefit="unlimited"] .benefit-icon svg,
.benefit-card[data-benefit="playlists"] .benefit-icon svg,
.benefit-card[data-benefit="personalized"] .benefit-icon svg {
  color: var(--brand-color, #f1c40f) !important;
  stroke: var(--brand-color, #f1c40f) !important;
}

.benefit-card h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.benefit-card p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Guest Search Hint */
.guest-search-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  margin: 0 0 12px 0; /* 하단 여백 줄임 (24px → 12px) */
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.guest-search-hint:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
  transform: translateY(-1px);
}

.guest-search-hint:active {
  transform: translateY(0);
}

.guest-search-icon {
  width: 20px;
  height: 20px;
  color: var(--accent-primary, var(--text-primary));
  flex-shrink: 0;
}

.guest-search-hint-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  text-align: center;
}

@media (min-width: 1025px) {
  .guest-search-hint {
    padding: 20px 24px;
    margin: 0 0 16px 0; /* 하단 여백 줄임 (32px → 16px) */
  }
  
  .guest-search-icon {
    width: 24px;
    height: 24px;
  }
  
  .guest-search-hint-text {
    font-size: 16px;
  }
}

/* Guest CTA Section */
.guest-cta-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 20px;
  border-top: 1px solid var(--border-primary);
  margin-top: 12px; /* 상단 여백 줄임 (24px → 12px) */
}

@media (min-width: 1025px) {
  .guest-cta-section {
    padding: 32px 24px;
    margin-top: 16px; /* 상단 여백 줄임 (32px → 16px) */
  }
}

/* 작은 화면에서는 세로 배치 */
@media (max-width: 768px) {
  .guest-cta-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .guest-cta-text {
    width: 100%;
  }
  
  .guest-cta-buttons {
    width: 100%;
    justify-content: flex-start;
  }
}

.guest-cta-text {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  text-align: right;
}

.guest-cta-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-signup-primary {
  display: inline-block;
  padding: 8px 20px; /* 두께 줄임 (12px → 8px) */
  background: var(--bg-card, var(--bg-secondary)); /* guest-search-hint와 동일한 배경색 */
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  margin: 0; /* margin-right 제거 (gap으로 처리) */
}

/* 라이트 모드에서 버튼 배경 및 텍스트 색상 */
[data-theme="light"] .btn-signup-primary {
  background: var(--bg-card, var(--bg-secondary)); /* guest-search-hint와 동일한 배경색 */
  color: var(--text-primary);
}

.btn-signup-primary:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05)); /* 호버 시 배경색 변경 */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .btn-signup-primary:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05)); /* 호버 시 배경색 변경 */
}

.guest-signin-link {
  display: inline-block;
  padding: 12px 24px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--transition-fast);
}

.guest-signin-link:hover {
  color: var(--text-primary);
}

/* Header Sign Up Button */
.main-v2-nav-signup-btn {
  display: none; /* 기본 숨김, showGuestMode()에서 표시 */
  padding: 6px 12px;
  background: var(--bg-secondary); /* 기본 배경색 */
  color: var(--text-primary);
  border: 1px solid transparent; /* 기본 상태에서는 외곽선 없음 */
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px; /* 폰트 크기 증가 (12px → 13px) */
  margin-left: 8px;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* 다크 모드에서 헤더 배경과 동일하게 */
html[data-theme="dark"] .main-v2-nav-signup-btn {
  background: var(--sidebar-bg); /* 헤더와 동일한 배경색 */
}

/* 라이트 모드에서 버튼 배경 및 텍스트 색상 */
[data-theme="light"] .main-v2-nav-signup-btn {
  background: var(--bg-secondary); /* 헤더 배경색과 동일 */
  color: var(--text-primary);
  border: 1px solid transparent; /* 기본 상태에서는 외곽선 없음 */
}

.main-v2-nav-signup-btn:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05)); /* 호버 시 배경색 변경 */
  border: 1px solid var(--border-primary); /* 호버 시에만 외곽선 표시 */
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .main-v2-nav-signup-btn:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.05)); /* 호버 시 배경색 변경 */
  border: 1px solid var(--border-primary); /* 호버 시에만 외곽선 표시 */
}

/* Enhanced Guest CTA in Panels */
.guest-cta-enhanced {
  text-align: center;
  padding: 32px 24px;
}

.guest-cta-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.guest-cta-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.guest-cta-benefit {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.guest-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* 게스트 모드 안내 메시지 */
.guest-notice-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-left: auto;
}

/* 게스트 모드 플레이리스트 카드 */
.guest-mode .main-v2-playlist-card {
  cursor: default;
}

/* 게스트 모드 노래 아이템 (재생은 가능) */
.guest-song-item .main-v2-playlist-song-info {
  cursor: pointer;
}

.guest-song-item .main-v2-playlist-song-info:hover {
  background: var(--bg-hover);
}

/* 게스트 모드에서 체크박스와 버튼 표시 */
.guest-mode .main-v2-song-checkbox,
.guest-mode .main-v2-play-selected-btn,
.guest-mode .main-v2-select-all-btn {
  display: inline-block !important;
}

/* 게스트 모드에서 삭제 버튼만 숨김 */
.guest-mode .main-v2-delete-selected-btn {
  display: none !important;
}

/* 게스트 모드에서 액션 버튼 영역 숨김 (편집/공유/삭제 버튼) */
.guest-mode .main-v2-playlist-actions,
.guest-mode .main-v2-playlist-song-actions {
  display: none !important;
}

/* 플레이리스트 이름 클릭 가능 스타일 */
.guest-mode .main-v2-playlist-name-display.clickable {
  cursor: pointer;
  user-select: none;
}

.guest-mode .main-v2-playlist-name-display.clickable:hover {
  color: var(--accent-primary);
}

/* Responsive */
@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .btn-signup-primary,
  .guest-signin-link {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .main-v2-nav-signup-btn {
    padding: 6px 12px;
    font-size: 12px;
    margin-left: 8px;
  }
}

/* 좌측 패널 버튼 스타일 */
.main-v2-panel-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 10px;
}

.main-v2-panel-btn {
  background: transparent;
  border: none;
  color: #aaa;
  padding: 12px 15px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.main-v2-panel-btn:hover {
  background: #2a2a2a;
  color: #fff;
}

.main-v2-panel-btn.active {
  background: #007bff;
  color: #fff;
}

/* Responsive - 우측 메인 영역 */
@media (max-width: 768px) {
  .main-v2-panel-view {
    padding: 15px;
  }
  
  .main-v2-panel-header h2 {
    font-size: 20px;
  }
  
  .main-v2-song-item {
    padding: 12px;
    gap: 12px;
  }
  
  .main-v2-song-title {
    font-size: 14px;
  }
  
  .main-v2-song-artist {
    font-size: 13px;
  }
  
  /* Playlist header for mobile - actions overlay on hover */
  .main-v2-playlist-header-row {
    position: relative;
  }
  
  .main-v2-playlist-actions {
    position: absolute;
    right: 40px;
    background: var(--bg-elevated);
    padding: 4px;
    border-radius: 4px;
    z-index: 10;
  }
}

/* ============================================
   Enhanced Sidebar with Theme Support
   ============================================ */

/* Theme colors applied above - removed duplicate */

/* Top nav styling already defined above - removed duplicate */

/* Sidebar styling already defined above - removed duplicate */

.main-v2-main-content {
  background: var(--bg-primary);
}

/* Theme Toggle Section */
.main-v2-theme-toggle-section {
  padding: 15px;
  border-bottom: 1px solid var(--border-primary);
}

.main-v2-theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 15px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.main-v2-theme-toggle:hover {
  background: var(--bg-elevated);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.main-v2-theme-toggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.theme-icon {
  width: 20px;
  height: 20px;
  stroke: var(--stroke-color);
  transition: stroke var(--transition-fast);
}

.main-v2-theme-toggle:hover .theme-icon {
  stroke: var(--stroke-hover);
}

.theme-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.theme-icon.hidden {
  display: none;
}

/* Navigation Sections */
.main-v2-nav-sections {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden !important; /* Always hide horizontal scrollbar */
  padding: 0;
  margin: 0 !important; /* No margin to prevent white gaps */
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  background: transparent; /* Inherit theme from parent */
  box-sizing: border-box;
  border: none !important; /* Remove all borders */
}

/* Disable any pseudo-elements that might create white lines */
.main-v2-nav-sections::before,
.main-v2-nav-sections::after {
  display: none !important;
  content: none !important;
}

/* Remove any space between nav-sections and guest-notice */
.main-v2-nav-sections + .main-v2-guest-notice {
  margin-top: 0 !important;
}

/* No box/card style - clean minimal design */
.main-v2-nav-section {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  margin: 0 !important; /* No margin to prevent white gaps */
  background: transparent !important; /* Transparent to show parent theme background */
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--border-primary); /* Theme-aware border */
  transition: all var(--transition-fast);
}

.main-v2-nav-section:last-child {
  border-bottom: none;
}

.main-v2-nav-section:hover {
  background: transparent;
  border-bottom-color: var(--border-hover);
}

/* Nav Item (Button) - Minimal style */
.main-v2-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.main-v2-nav-item:hover {
  color: var(--text-primary);
}

.main-v2-nav-item:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Active State - No box, color only */
.main-v2-nav-item.active {
  color: var(--accent-primary);
  font-weight: 600;
}

.main-v2-nav-item.active .nav-icon {
  stroke: var(--accent-primary);
  stroke-width: 2.5;
}

/* Active section - minimal highlight */
.main-v2-nav-section:has(.main-v2-nav-item.active) {
  background: transparent;
  border-bottom-color: var(--accent-primary);
  border-bottom-width: 2px;
}

/* Nav Icon (SVG) - Minimal */
.nav-icon {
  width: 22px;
  height: 22px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.main-v2-nav-item:hover .nav-icon {
  stroke: var(--text-primary);
  stroke-width: 2.5;
}

.main-v2-nav-item.active .nav-icon {
  stroke: var(--accent-primary);
}

/* Nav Label - Minimal */
.nav-label {
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-v2-nav-item.active .nav-label {
  color: var(--accent-primary);
  font-weight: 600;
}

/* Action Button (Small +) - Minimal */
.main-v2-action-btn-small {
  width: 28px;
  height: 28px;
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.main-v2-action-btn-small:hover:not(:disabled) {
  color: var(--accent-primary);
  transform: scale(1.1);
}

.main-v2-action-btn-small:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.main-v2-action-btn-small:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.main-v2-action-btn-small svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  transition: stroke var(--transition-fast);
}

.main-v2-action-btn-small:hover:not(:disabled) svg {
  stroke: var(--accent-primary);
  stroke-width: 2.5;
}

.main-v2-action-btn-small:disabled svg {
  stroke: var(--stroke-disabled);
}

/* Guest Notice - DEPRECATED: Moved to welcome area
   Keeping for backward compatibility, but no longer used in sidebar */
/*
.main-v2-guest-notice {
  overflow-x: hidden !important;
  margin: 0 !important;
  margin-top: auto !important;
  padding: 20px;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.guest-notice-text {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
  text-align: center;
}

.guest-notice-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: transparent !important;
  color: var(--brand-color);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--brand-color);
  border-radius: 4px;
  transition: all var(--transition-fast);
}

.guest-notice-link:hover {
  background: var(--brand-color) !important;
  color: var(--bg-primary) !important;
}
*/

/* Responsive - Mobile */
@media (max-width: 768px) {
  .main-v2-sidebar {
    width: 60px !important; /* 85% of 70px */
    min-width: 60px; /* 85% of 70px */
    padding-bottom: 0; /* 481~768px 구간은 플레이어 높이로 커버되어 추가 패딩 불필요 */
    scrollbar-width: none; /* Hide vertical scrollbar */
  }
  
  .main-v2-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .main-v2-content-area {
    height: calc(100vh - 55px - var(--player-h)); /* 호환성 가드 */
    height: calc(100dvh - 55px - var(--player-h)); /* viewport - smaller top nav (55px) - audio player */
  }
  
  .main-v2-nav-section {
    padding: 16px 10px;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  
  .main-v2-nav-item {
    justify-content: center;
    width: 100%;
  }
  
  .nav-label {
    display: none;
  }
  
  .main-v2-action-btn-small {
    width: 24px;
    height: 24px;
  }
  
  .main-v2-action-btn-small svg {
    width: 16px;
    height: 16px;
  }
  
  /* DEPRECATED: Sidebar guest notice styles - moved to welcome area */
  /*
  .main-v2-guest-notice {
    margin: 6px 4px 12px 4px;
    padding: 6px 0;
    gap: 6px;
  }
  
  .guest-notice-text {
    font-size: 12px;
  }
  
  .guest-notice-link {
    font-size: 12px;
    padding: 4px 10px;
  }
  */
}

/* Extra small mobile */
@media (max-width: 480px) {
  .main-v2-sidebar {
    padding-bottom: calc(var(--player-h) + 8px); /* Maintain minimal clearance above player */
    scrollbar-width: none; /* Ensure scrollbar stays hidden on extra small devices */
  }
  
  .main-v2-sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  
  .main-v2-content-area {
    height: calc(100vh - 50px - var(--player-h)); /* 호환성 가드 */
    height: calc(100dvh - 50px - var(--player-h)); /* viewport - even smaller top nav (50px) - audio player */
  }
  
  /* DEPRECATED: Sidebar guest notice styles - moved to welcome area */
  /*
  .main-v2-guest-notice {
    margin: 6px 4px 10px 4px;
    padding: 4px 0;
    gap: 4px;
  }
  
  .guest-notice-text {
    font-size: 11px;
  }
  
  .guest-notice-link {
    font-size: 11px;
    padding: 3px 8px;
  }
  */
}

/* DEPRECATED: Sidebar guest notice height-based styles - moved to welcome area */
/*
@media (max-height: 700px) {
  .main-v2-guest-notice {
    margin: 2px 4px 2px 4px !important;
    padding: 2px 0 !important;
    gap: 2px !important;
  }

  .guest-notice-text {
    font-size: 10px !important;
  }

  .guest-notice-link {
    font-size: 10px !important;
    padding: 2px 8px !important;
  }
}
*/

/* Ultra-short viewports (e.g., folded devices) */
@media (max-height: 600px) {
  .main-v2-sidebar {
    padding-bottom: 4px;
  }

  .main-v2-nav-section {
    padding: 12px 4px;
    gap: 6px;
  }

  /* DEPRECATED: Sidebar guest notice - moved to welcome area */
  /*
  .main-v2-guest-notice {
    display: none;
  }
  */
}

/* Keyboard Navigation Hints */
.keyboard-shortcut {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-primary);
}

/* Remove old emoji filter */
.main-v2-nav-brand,
.main-v2-panel-btn,
.main-v2-icon-btn,
.main-v2-global-search-icon {
  filter: none !important;
  -webkit-filter: none !important;
}

/* ============================================
   Top Navigation Enhanced Styles
   ============================================ */

/* Remove old styles */
.main-v2-nav-brand {
  display: none !important;
}

.main-v2-global-search-wrapper,
.main-v2-global-search-input,
.main-v2-global-search-icon {
  display: none !important;
}

.main-v2-icon-btn {
  display: none !important;
}

/* Top Nav Sections */
.main-v2-nav-left {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
}

.main-v2-nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-v2-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: auto;
  flex-shrink: 0; /* 오른쪽 영역은 축소하지 않음 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* Home Link - Aligned with sidebar */
.main-v2-home-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 0;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
}

.main-v2-home-link:hover {
  opacity: 0.8;
}

.nav-label-top {
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-color);
  line-height: 1;
}

/* Top Navigation Icons */
.nav-icon-top {
  width: 22px;
  height: 22px;
  stroke: var(--stroke-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: all var(--transition-fast);
}

.main-v2-home-link .nav-icon-top {
  stroke: var(--brand-color);
}

.main-v2-home-link:hover .nav-icon-top {
  stroke: var(--brand-hover);
  stroke-width: 2.5;
}

/* Icon Buttons */
.main-v2-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.main-v2-nav-icon-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.main-v2-nav-icon-btn:hover .nav-icon-top {
  stroke: var(--stroke-hover);
  stroke-width: 2.5;
}

.main-v2-nav-icon-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Theme Toggle Top - No Label */
#theme-toggle-top {
  /* Same as other icon buttons */
}

.sun-icon-top,
.moon-icon-top {
  width: 22px;
  height: 22px;
  stroke: var(--stroke-color);
}

.sun-icon-top.hidden,
.moon-icon-top.hidden {
  display: none;
}

/* Profile Menu Enhanced */
.main-v2-profile-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-username {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}

.main-v2-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}

/* Show dropdown when active class is added (via JS click) */
.main-v2-dropdown-content.active {
  display: block;
}

.main-v2-dropdown-content a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border-bottom: 1px solid var(--border-primary);
}

.main-v2-dropdown-content a:last-child {
  border-bottom: none;
}

/* Sign in option - emphasized */
.main-v2-dropdown-content .dropdown-signin {
  color: var(--brand-color);
  font-weight: 600;
}

.main-v2-dropdown-content .dropdown-signin:hover {
  background: var(--brand-color);
  color: #222;
}

.main-v2-dropdown-content .dropdown-signin:hover svg {
  stroke: #222;
}

/* Profile and Logout options */
.main-v2-dropdown-content .dropdown-profile:hover,
.main-v2-dropdown-content .dropdown-logout:hover {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
}

.main-v2-dropdown-content a svg {
  width: 18px;
  height: 18px;
  stroke: var(--stroke-color);
  stroke-width: 2;
  flex-shrink: 0;
}

.main-v2-dropdown-content .dropdown-profile:hover svg,
.main-v2-dropdown-content .dropdown-logout:hover svg {
  stroke: var(--accent-primary);
}

/* Remove old theme toggle styles from sidebar */
.main-v2-theme-toggle-section,
.main-v2-theme-toggle,
.theme-icon,
.theme-label {
  display: none !important;
}

/* Right-aligned Controls Order */
.main-v2-nav-right {
  /* Ensure right alignment even with flex */
  justify-content: flex-end;
}

/* Right-aligned icon order - FIXED SELECTORS */
#notifications-btn {
  order: 1;
}

#theme-toggle-top {
  order: 2;
}

#language-menu-container {
  order: 3;
}

#profile-menu-container {
  order: 4;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .main-v2-top-nav {
    padding: 0 15px;
    height: 55px;
    gap: 12px;
  }
  
  .nav-label-top {
    font-size: 14px;
  }
  
  .main-v2-nav-icon-btn {
    width: 36px;
    height: 36px;
    padding: 6px;
  }
  
  .nav-icon-top {
    width: 20px;
    height: 20px;
  }
  
  .nav-username {
    display: none;
  }
  
  .main-v2-nav-right {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .main-v2-top-nav {
    padding: 0 10px;
    height: 50px;
    gap: 10px;
    flex-wrap: nowrap; /* 같은 줄에 유지 */
  }
  
  .nav-label-top {
    display: none;
  }
  
  .main-v2-nav-icon-btn {
    width: 32px;
    height: 32px;
    padding: 5px;
  }
  
  .nav-icon-top {
    width: 18px;
    height: 18px;
  }
  
  .main-v2-nav-right {
    gap: 6px;
  }
  
  .main-v2-nav-left {
    gap: 8px; /* 작은 화면에서 gap 줄임 */
  }
}

/* 379px 이하에서도 같은 줄 유지 */
@media (max-width: 379px) {
  .main-v2-top-nav {
    padding: 0 8px;
    gap: 6px;
    flex-wrap: nowrap; /* 같은 줄에 유지 */
  }
  
  .main-v2-nav-left {
    gap: 6px;
  }
  
  .main-v2-nav-right {
    gap: 4px;
  }
  
  .main-v2-nav-icon-btn {
    width: 28px;
    height: 28px;
    padding: 4px;
  }
  
  .nav-icon-top {
    width: 16px;
    height: 16px;
  }
  
  .main-v2-nav-signup-btn {
    padding: 5px 10px;
    font-size: 12px; /* 폰트 크기 증가 (11px → 12px) */
    margin-left: 4px;
  }
  
  .main-v2-hamburger-btn {
    width: 36px;
    height: 36px;
    padding: 8px;
    margin-right: 4px;
  }
}

/* ============================================
   Enhanced Right-Aligned Controls
   ============================================ */

/* Visual Separator between controls */
.main-v2-nav-right::before {
  content: '';
  display: none; /* Hidden by default, can enable if needed */
  width: 1px;
  height: 24px;
  background: var(--border-primary);
  margin: 0 8px;
}

/* Consistent button sizing for right controls */
.main-v2-nav-right .main-v2-nav-icon-btn {
  /* All right control buttons have consistent size */
  width: 40px;
  height: 40px;
}

/* Hover effects for all right controls */
.main-v2-nav-right .main-v2-nav-icon-btn:hover {
  transform: scale(1.05);
}

/* Active state for theme toggle */
#theme-toggle-top:active {
  transform: scale(0.95);
}

/* Profile dropdown alignment */
.main-v2-profile-menu .main-v2-dropdown-content {
  /* Ensure dropdown aligns to right edge */
  right: 0;
  left: auto;
}

/* Notification badge (future enhancement) */
#notifications-btn::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
  display: none; /* Show when there are notifications */
}

#notifications-btn.has-notifications::after {
  display: block;
}

/* Focus styles for keyboard navigation */
.main-v2-nav-right .main-v2-nav-icon-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .main-v2-nav-icon-btn {
    border: 1px solid var(--border-primary);
  }
  
  .nav-icon-top {
    stroke-width: 3;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .main-v2-nav-icon-btn,
  .nav-icon-top {
    transition: none;
  }
  
  .main-v2-nav-icon-btn:hover {
    transform: none;
  }
}

/* Print styles */
@media print {
  .main-v2-top-nav {
    display: none;
  }
}

/* ============================================
   Fix Audio Player Overlap Issue
   ============================================ */

/* Guest Notice z-index is already defined above in main style */

/* Ensure sidebar scrolling works properly with player space */
.main-v2-nav-sections {
  /* Sections already have flex: 1 and overflow-y: auto */
  /* This ensures scrolling respects the bottom padding */
}

/* Visual indicator for scrollable area */
/* Sidebar scroll indicator disabled */
.main-v2-sidebar::after {
  display: none !important;
}

/* Ensure audio player stays on top */
.global-audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* Above everything except modals */
}

/* Safety margin applied above - removed duplicate */


/* Print layout - hide audio player */
@media print {
  .global-audio-player {
    display: none;
  }
  
  .main-v2-app-container {
    padding-bottom: 0;
  }
  
  .main-v2-sidebar {
    padding-bottom: 0;
  }
}

/* ============================================
   Alignment Fix: Top Logo & Left Menu
   ============================================ */

/* Ensure top nav and sidebar have same baseline alignment */
.main-v2-top-nav {
  /* Already set to height: 60px */
  /* Add explicit vertical alignment */
  box-sizing: border-box;
}

.main-v2-home-link {
  /* Remove any padding that might misalign */
  margin: 0;
  height: auto;
}

.main-v2-home-link .nav-icon-top {
  /* Match sidebar icon size exactly */
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Sidebar first item alignment */
.main-v2-nav-section:first-child {
  /* Remove extra top padding/margin */
  margin-top: 0;
}

/* Ensure consistent icon sizes throughout */
.nav-icon-top,
.nav-icon {
  width: 22px;
  height: 22px;
  display: block;
}

/* Top nav and sidebar should share same icon/text baseline */
.nav-label-top,
.nav-label {
  font-size: 15px; /* Make top nav slightly smaller to match sidebar better */
  line-height: 1.2;
  vertical-align: middle;
}

/* Update top nav label to match sidebar */
.nav-label-top {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* Remove any conflicting styles */
.main-v2-nav-left {
  /* Ensure no extra padding throws off alignment */
  padding: 0;
}

/* Visual guide for debugging (optional, can be removed) */
/* 
.main-v2-top-nav::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: red;
  opacity: 0.3;
}

.main-v2-sidebar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 1px;
  background: blue;
  opacity: 0.3;
}
*/

/* ============================================
   Language Switcher Styles
   ============================================ */

/* Language Menu Container */
.main-v2-language-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* Language Dropdown */
.main-v2-language-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  z-index: 1000;
  overflow: hidden;
}

/* Show language dropdown when active class is added (via JS click) */
.main-v2-language-dropdown.active {
  display: block;
}

/* Language Options */
.language-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 14px;
}

.language-option:last-child {
  border-bottom: none;
}

.language-option:hover {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
}

.language-option.active {
  background: var(--bg-tertiary);
  color: var(--accent-primary);
}

/* Checkmark icon (hidden by default) */
.language-option svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent-primary);
  stroke-width: 2;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.language-option.active svg {
  opacity: 1;
}

.language-option:hover svg {
  stroke: var(--accent-primary);
}

/* Focus styles for accessibility */
.language-option:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .main-v2-language-dropdown {
    min-width: 140px;
  }
  
  .language-option {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .main-v2-language-dropdown {
    min-width: 120px;
  }
  
  .language-option {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ============================================
   OLD DROPDOWN STYLES REMOVED
   Now using dropdown-system.css instead
   ============================================ */

/* ============================================
   Search Panel V2 - Theme-Aware & Responsive
   ============================================ */

/* Panel Title */
.search-v2-panel-title {
  margin: 0;
  font-size: 28px;
  color: var(--text-primary);
  font-weight: 600;
}

/* Search Results Grid */
.search-v2-results-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Search Result Item - Hybrid Card-Grid */
.search-v2-result-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 16px;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.search-v2-result-item:hover {
  border: 1px solid var(--accent-primary) !important;
  box-shadow: 0 4px 12px var(--shadow-md);
  transform: translateY(2px);
}

/* Desktop: 3-column Grid Layout */
@media (min-width: 768px) {
  .search-v2-result-item {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    gap: 20px;
    align-items: center;
  }
}

/* Tablet: Adjust spacing */
@media (min-width: 768px) and (max-width: 1199px) {
  .search-v2-result-item {
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 16px;
    padding: 14px;
  }
}

/* Mobile: Vertical Card */
@media (max-width: 767px) {
  .search-v2-result-item {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
}

/* Main Info */
.search-v2-main-info {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* 앨범 이미지 스타일 */
.search-v2-album-art {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
}

.search-v2-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent; /* 배경 제거 */
  border: 2px solid var(--accent-primary); /* 파란색 외곽선 */
  color: var(--accent-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.search-v2-play-btn:hover {
  border-width: 3px; /* 호버 시 두께만 증가 */
  transform: scale(1.05);
  background: rgba(0, 123, 255, 0.05); /* 호버 시 약간의 배경 */
}

.search-v2-play-btn:active {
  transform: scale(0.95);
}

.search-v2-play-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Play SVG Icon */
.play-icon {
  width: 20px;
  height: 20px;
  stroke: var(--accent-primary); /* 파란색 아이콘 */
  fill: none;
}

/* 작은 재생 버튼 스타일 (액션 영역용) */
.search-v2-play-btn-small {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-width: 1.5px;
}

.search-v2-play-btn-small .play-icon {
  width: 14px;
  height: 14px;
}

.search-v2-song-details {
  flex: 1;
  min-width: 0;
}

.search-v2-song-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-v2-song-artist {
  font-size: 14px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Meta Info */
.search-v2-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.search-v2-meta-tag {
  display: inline-flex;
  align-items: center;
  padding: 0; /* padding 제거 */
  margin-right: 12px; /* 간격 */
  background: transparent;
  border: none; /* 테두리 제거 */
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.search-v2-genre-tag {
  color: var(--text-primary); /* 검정색 (라이트: #222, 다크: #fff) */
  font-weight: 500;
}

/* Actions */
.search-v2-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 767px) {
  .search-v2-actions {
    justify-content: stretch;
  }
  
  .search-v2-action-btn {
    flex: 1;
  }
  
  .search-v2-play-btn-small {
    flex: 0 0 auto; /* 재생 버튼은 크기 고정 */
  }
}

.search-v2-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px; /* 버튼 스타일 padding */
  background: var(--bg-tertiary); /* 배경 추가 */
  border: 1px solid var(--border-primary); /* 테두리 추가 */
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px; /* 터치 영역 유지 */
}

.search-v2-action-btn:hover:not(.search-v2-disabled) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.search-v2-action-btn:active:not(.search-v2-disabled) {
  transform: translateY(0);
}

.search-v2-action-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.search-v2-action-btn.search-v2-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}

.search-v2-btn-text {
  font-weight: 500;
}

@media (max-width: 480px) {
  .search-v2-btn-text {
    display: none;
  }
  
  .search-v2-action-btn {
    padding: 8px 12px;
  }
}

/* Empty State */
.search-v2-empty-text {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-size: 16px;
}

/* ============================================
   Lyrics Modal
   ============================================ */

.search-v2-lyrics-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.search-v2-lyrics-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.search-v2-lyrics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--border-primary);
}

.search-v2-lyrics-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--text-primary);
  font-weight: 600;
}

.search-v2-modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: none;
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.search-v2-modal-close-btn:hover {
  background: var(--border-primary);
}

.search-v2-modal-close-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.search-v2-lyrics-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.search-v2-lyrics-body pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-primary);
}

/* ============================================
   My Songs Panel - Additional Styles
   ============================================ */

/* Checkbox styles */
.song-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Bulk toolbar */
.bulk-toolbar {
    background: var(--bg-secondary);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bulk-count {
    font-weight: 600;
    color: var(--text-primary);
}

.bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all var(--transition-fast);
}

.bulk-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.bulk-btn.danger {
    color: var(--accent-danger);
    border-color: var(--accent-danger);
}

.bulk-btn.danger:hover {
    background: var(--accent-danger);
    color: white;
}

/* Privacy badge */
.privacy-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.privacy-badge.public {
    background: var(--accent-success);
    color: white;
}

.privacy-badge.private {
    background: var(--accent-secondary);
    color: white;
}

/* Panel controls (Select All / Deselect All buttons) */
.panel-controls {
    display: flex;
    gap: 8px;
}

.main-v2-action-btn {
    padding: 12px 48px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    white-space: nowrap;
}

.main-v2-action-btn .icon-outline {
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    flex-shrink: 0;
}

.main-v2-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.main-v2-action-btn:hover .icon-outline {
    color: var(--accent-primary);
}

.main-v2-action-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* ============================================
   My Songs - Add/Edit Song Modal
   ============================================ */

.mysongs-song-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mysongs-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mysongs-modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    max-width: 700px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.mysongs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.mysongs-modal-header h3 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
    font-weight: 600;
}

.mysongs-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    line-height: 1;
}

.mysongs-modal-close:hover {
    background: var(--border-primary);
    transform: scale(1.1);
}

.mysongs-modal-close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.mysongs-song-form {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-field label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-field label .required {
    color: var(--accent-error, #e53e3e);
}

.form-field label .optional {
    color: var(--text-secondary);
    font-weight: normal;
    font-size: 12px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-field input[type="text"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.form-field input[type="text"]:focus,
.form-field input[type="file"]:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.1);
}

.form-field input[type="file"] {
    padding: 8px;
    cursor: pointer;
}

.form-field textarea {
    resize: vertical;
    min-height: 100px;
    font-family: inherit;
}

.field-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: -4px;
}

.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.mysongs-btn-primary,
.mysongs-btn-secondary {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.mysongs-btn-primary {
    background: var(--accent-primary);
    color: white;
}

.mysongs-btn-primary:hover:not(:disabled) {
    background: var(--accent-primary-hover, var(--accent-primary));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.3);
}

.mysongs-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mysongs-btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.mysongs-btn-secondary:hover {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

.mysongs-btn-primary:focus-visible,
.mysongs-btn-secondary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mysongs-modal-content {
        max-width: 95%;
        max-height: 95vh;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .mysongs-song-form {
        padding: 16px;
    }
}

/* ============================================
   My Songs - Search & Filter UI
   ============================================ */

/* Outline music note icon */
.mysongs-icon-outline {
    display: inline-block;
    font-style: normal;
    color: var(--text-primary);
    font-size: 1.2em;
    line-height: 1;
    -webkit-text-stroke: 1.5px currentColor;
    text-stroke: 1.5px currentColor;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-weight: 400;
    margin-right: 4px;
}

.mysongs-search-filters {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 0;
    flex-wrap: wrap;
}

.mysongs-search-divider {
    width: 1px;
    height: 24px;
    background: var(--border-primary);
    margin: 0 4px;
    flex-shrink: 0;
}

.mysongs-action-btn {
    padding: 10px 16px;
    border: 1px solid rgba(163, 196, 243, 0.3);
    border-radius: 8px;
    background: #A3C4F3; /* Soft pastel blue */
    color: #1a3a5e; /* Dark blue-gray for contrast */
    font-size: 13px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Pretendard", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.mysongs-action-btn:hover:not(:disabled) {
    background: #B5D2F5; /* Lighter pastel blue on hover */
    border-color: rgba(163, 196, 243, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(163, 196, 243, 0.25);
}

.mysongs-action-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(163, 196, 243, 0.2);
}

.mysongs-action-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.mysongs-action-btn:disabled,
.mysongs-action-btn-disabled {
    background: #E0E7ED; /* Muted gray pastel */
    color: #7A8FA3; /* Muted text color */
    border-color: rgba(163, 196, 243, 0.2);
    cursor: not-allowed;
    opacity: 0.6;
}

.mysongs-action-btn:disabled:hover,
.mysongs-action-btn-disabled:hover {
    background: #E0E7ED;
    transform: none;
    box-shadow: none;
}

.mysongs-play-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    color: inherit;
    flex-shrink: 0;
}

/* Legacy class names for backward compatibility */
.mysongs-add-song-btn {
    /* Inherits from .mysongs-action-btn */
}

.mysongs-play-selected-btn {
    /* Inherits from .mysongs-action-btn */
}

.mysongs-search-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mysongs-search-input-wrapper {
    flex: 1;
    min-width: 200px;
}

.mysongs-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.mysongs-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.1);
}

.mysongs-filter-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.mysongs-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 120px;
}

.mysongs-filter-select:hover {
    border-color: var(--accent-primary);
}

.mysongs-filter-clear {
    padding: 10px 16px;
    border: 1px solid rgba(163, 196, 243, 0.3);
    border-radius: 8px;
    background: #A3C4F3; /* Soft pastel blue - same as action buttons */
    color: #1a3a5e; /* Dark blue-gray for contrast */
    font-size: 13px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Pretendard", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.mysongs-filter-clear:hover {
    background: #B5D2F5; /* Lighter pastel blue on hover */
    border-color: rgba(163, 196, 243, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(163, 196, 243, 0.25);
}

.mysongs-filter-clear:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(163, 196, 243, 0.2);
}

.mysongs-filter-clear:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.mysongs-filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.1);
}

/* ============================================
   Skip to content link (접근성)
   ============================================ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 1200;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1200;
}

/* ============================================
   모션 감소 배려 (전역)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .main-v2-top-nav {
    transition: none !important;
  }
}

@media (max-width: 768px) {
    .mysongs-search-filters {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .mysongs-action-btn,
    .mysongs-search-divider,
    .mysongs-search-input-wrapper,
    .mysongs-filter-select {
        width: 100%;
        min-width: auto;
    }
    
    .mysongs-search-divider {
        display: none; /* Hide divider on mobile */
    }
}

/* ============================================
   Light Mode Hover Effects for Playlist Cards
   ============================================ */

/* Light mode hover effects for playlist cards */
[data-theme="light"] .main-v2-playlist-header-row:hover {
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .main-v2-playlist-song-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ============================================
   Playlist Create Button - Icon + Label
   ============================================ */

.playlist-create-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  min-width: 0;
  margin-left: auto;  /* Push to right on desktop */
  flex-shrink: 0;     /* Don't compress the button */
}

.playlist-create-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-v2-action-btn-icon {
  background: var(--bg-elevated); /* 라이트: #e8e8e8, 다크: #333 */
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
}

.main-v2-action-btn-icon .icon-outline {
  width: 18px;
  height: 18px;
  color: var(--text-primary);
}

.main-v2-action-btn-icon:hover {
  background: var(--bg-tertiary);
  transform: scale(1.05);
  border-color: var(--accent-primary);
}

.main-v2-action-btn-icon:hover .icon-outline {
  color: var(--accent-primary);
}

.main-v2-action-btn-icon:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.main-v2-action-btn-icon span {
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playlist-create-label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
}

.playlist-create-form[hidden] {
  display: none !important;
}

.playlist-create-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: clamp(260px, 32vw, 360px);
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-primary);
  background: var(--bg-elevated);
  box-shadow: 0 18px 32px -18px rgba(15, 23, 42, 0.35);
  transform-origin: top right;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

.playlist-create-form[data-state="open"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.playlist-create-input-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.playlist-create-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.playlist-create-input:focus,
.playlist-create-input:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(63, 131, 248, 0.25);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

.playlist-create-input::placeholder {
  color: var(--text-secondary);
}

.playlist-create-input.is-invalid {
  border-color: var(--accent-danger, #dc3545);
  box-shadow: 0 0 0 2px rgba(217, 45, 32, 0.25);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-danger, #dc3545) 25%, transparent);
}

.playlist-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.playlist-create-submit,
.playlist-create-cancel {
  border-radius: 8px;
  border: 1px solid var(--border-primary);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  background: var(--bg-elevated);
  color: var(--text-primary);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.playlist-create-submit[data-variant="primary"] {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-primary);
}

.playlist-create-submit[data-variant="primary"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.playlist-create-cancel[data-variant="ghost"] {
  background: transparent;
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

.playlist-create-cancel[data-variant="ghost"]:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.playlist-create-submit:focus-visible,
.playlist-create-cancel:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.playlist-create-submit[disabled],
.playlist-create-cancel[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.playlist-create-submit[data-loading="true"]::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-top-color: var(--bg-primary);
  animation: spin 0.8s linear infinite;
}

.playlist-create-submit[data-loading="true"] {
  gap: 10px;
}

.playlist-create-submit[data-loading="true"]::after {
  margin-left: 6px;
}

.playlist-create-submit[data-loading="true"] {
  pointer-events: none;
}

@media (max-width: 992px) {
  .playlist-create-wrapper {
    align-items: flex-end;
  }

  .playlist-create-form {
    width: clamp(260px, 50vw, 360px);
  }
}

@media (max-width: 768px) {
  .playlist-create-wrapper {
    align-items: stretch;
    gap: 10px;
  }

  .playlist-create-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .playlist-create-form {
    width: 100%;
    transform-origin: top center;
    box-shadow: 0 14px 28px -20px rgba(15, 23, 42, 0.4);
  }

  .playlist-create-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 520px) {
  .playlist-create-trigger {
    justify-content: flex-start;
    gap: 10px;
  }

  .playlist-create-wrapper .playlist-create-label {
    display: none;
  }

  .playlist-create-wrapper .main-v2-action-btn-icon {
    width: 32px;
    height: 32px;
  }

  .playlist-create-form {
    padding: 12px;
    border-radius: 8px;
  }
}

/* ============================================
   Emoji Outline Style
   ============================================ */

/* 이모티콘 외곽선 스타일 */
/* SVG 아이콘 스타일 (아웃라인) */
.icon-outline {
  display: inline-block;
  vertical-align: middle;
  color: var(--text-primary);
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.icon-outline.icon-inline {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* 아이콘 크기 조정 */
.icon-outline svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 레거시 이모지 아웃라인 스타일 (하위 호환성) */
.emoji-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--text-primary);
  text-stroke: 1.5px var(--text-primary);
  -webkit-text-fill-color: transparent;
  filter: grayscale(100%) brightness(0) invert(1);
  display: inline-block;
  line-height: 1;
}

/* 다크 모드에서 invert 유지 (흰색 외곽선) */
[data-theme="dark"] .emoji-outline,
html:not([data-theme]) .emoji-outline {
  filter: grayscale(100%) brightness(0) invert(1);
  -webkit-text-stroke: 1.5px var(--text-primary);
  text-stroke: 1.5px var(--text-primary);
}

/* 라이트 모드에서 invert 제거 (검은색 외곽선) */
[data-theme="light"] .emoji-outline {
  filter: grayscale(100%) brightness(0);
  -webkit-text-stroke: 1.5px var(--text-primary);
  text-stroke: 1.5px var(--text-primary);
}

/* ============================================
   Playlist Detail Responsive Styles
   ============================================ */

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
  .main-v2-playlist-detail-cover {
    width: 150px;
    height: 150px;
  }
  
  .main-v2-playlist-detail-cover .icon-outline {
    width: 48px;
    height: 48px;
  }
  
  .main-v2-playlist-detail-header {
    gap: 20px;
  }
  
  .main-v2-playlist-detail-title {
    font-size: 24px;
  }
  
  .main-v2-playlist-detail-meta {
    font-size: 14px;
  }
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
  .main-v2-playlist-detail-cover {
    width: 100px;
    height: 100px;
  }
  
  .main-v2-playlist-detail-cover .icon-outline {
    width: 36px;
    height: 36px;
  }
  
  .main-v2-playlist-detail-header {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
  }
  
  .main-v2-playlist-detail-info {
    width: 100%;
  }
  
  .main-v2-playlist-detail-title {
    font-size: 20px;
  }
  
  .main-v2-playlist-detail-meta {
    font-size: 13px;
  }
  
  .main-v2-playlist-detail-actions {
    justify-content: center;
  }
}

/* ============================================
   Add Songs Section
   ============================================ */

.main-v2-playlist-add-songs-section {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.add-songs-search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.add-songs-search-header h4 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.add-songs-close-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.add-songs-close-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.add-songs-search-input-wrapper {
  margin-bottom: 16px;
}

.add-songs-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s;
}

.add-songs-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.add-songs-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  margin-bottom: 12px;
  gap: 16px;
}

.add-songs-select-all-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.add-songs-select-all-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

.add-songs-bulk-add-btn {
  padding: 8px 16px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  white-space: nowrap;
}

.add-songs-bulk-add-btn:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: scale(1.02);
}

.add-songs-bulk-add-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.add-songs-results {
  max-height: 400px;
  overflow-y: auto;
}

.add-songs-results-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.add-songs-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--border-primary);
  transition: all 0.2s;
}

.add-songs-result-item:last-child {
  border-bottom: none;
}

.add-songs-result-item:hover {
  background: var(--bg-hover);
}

.add-songs-checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.add-songs-checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent-primary);
  margin: 0;
}

.add-songs-result-info {
  flex: 1;
  min-width: 0;
}

.add-songs-result-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-songs-result-meta {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Removed .add-songs-add-btn - replaced with bulk selection */

.add-songs-loading,
.add-songs-empty,
.add-songs-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}

.add-songs-error {
  color: #ef4444;
}

@media (max-width: 768px) {
  .main-v2-playlist-add-songs-section {
    padding: 16px;
  }
  
  .add-songs-results {
    max-height: 300px;
  }
  
  .add-songs-results-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .add-songs-select-all-wrapper {
    justify-content: center;
  }
  
  .add-songs-bulk-add-btn {
    width: 100%;
    justify-content: center;
  }
  
  .add-songs-result-item {
    gap: 8px;
  }
}

/* ==========================================
   공유 플레이리스트 스타일
   ========================================== */

/* 공유 플레이리스트 컨테이너 */
.shared-playlist-view {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.shared-playlist-header {
  margin-bottom: 24px;
}

.shared-playlist-header h2 {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.shared-playlist-header .playlist-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 게스트 안내 메시지 */
.guest-notice {
  padding: 16px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  margin-bottom: 24px;
  color: #78350f;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

[data-theme="dark"] .guest-notice {
  background: linear-gradient(135deg, #451a03 0%, #78350f 100%);
  color: #fbbf24;
  border-left-color: #fbbf24;
}

/* 공유 곡 목록 */
.shared-songs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.shared-song-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.shared-song-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shared-song-item .song-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.shared-song-item .song-title {
  font-weight: 500;
  font-size: 15px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.shared-song-item .song-artist {
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}

.shared-song-item .song-meta {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  flex-shrink: 0;
}

.shared-song-item .song-meta-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

/* 무료 전곡 배지 */
.playlist-free-badge {
  display: inline-block;
  padding: 6px 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* 미리듣기 배지 */
.playlist-preview-badge {
  display: inline-block;
  padding: 6px 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border-primary);
}

/* 공유 재생 버튼 */
.shared-play-btn {
  padding: 10px 20px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shared-play-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  transform: scale(1.05);
}

.shared-play-btn:active {
  transform: scale(0.95);
}

/* CTA 버튼 영역 */
.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 24px 0;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cta-buttons .btn-primary {
  background: var(--accent-primary);
  color: white;
}

.cta-buttons .btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.cta-buttons .btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.cta-buttons .btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
}

/* 플레이리스트 저장 버튼 */
.btn-save-playlist {
  margin-top: 15px;
  padding: 12px 24px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-save-playlist .save-icon-hover {
  display: none;
}

.btn-save-playlist:hover .save-icon-default {
  display: none;
}

.btn-save-playlist:hover .save-icon-hover {
  display: inline-block;
}

.btn-save-playlist:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.btn-save-playlist:active {
  transform: translateY(0);
}

.shared-playlist-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

/* 로그인 유도 모달 */
.login-cta-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.login-cta-modal .modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.login-cta-modal .modal-content {
  position: relative;
  background: var(--bg-primary);
  padding: 32px;
  border-radius: 16px;
  max-width: 440px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.login-cta-modal h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.login-cta-modal p {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.login-cta-modal .modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}

.login-cta-modal .btn-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  padding: 8px 16px;
  transition: color 0.2s ease;
}

.login-cta-modal .btn-close:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* 태블릿 반응형 */
@media (max-width: 1024px) {
  .shared-song-item .song-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .shared-song-item .song-meta {
    flex-wrap: wrap;
  }
}

/* 모바일 반응형 */
@media (max-width: 768px) {
  .shared-playlist-view {
    padding: 16px;
  }
  
  .shared-playlist-header h2 {
    font-size: 22px;
  }
  
  .shared-song-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .shared-song-item .song-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .shared-song-item .song-title,
  .shared-song-item .song-artist {
    white-space: normal;
  }
  
  .shared-song-item .song-meta {
    flex-wrap: wrap;
  }
  
  .playlist-free-badge,
  .playlist-preview-badge {
    align-self: flex-start;
  }
  
  .shared-play-btn {
    width: 100%;
  }
  
  .cta-buttons {
    flex-direction: column;
  }
  
  .cta-buttons .btn-primary,
  .cta-buttons .btn-secondary {
    width: 100%;
  }
  
  .login-cta-modal .modal-content {
    padding: 24px;
  }
  
  .login-cta-modal .modal-buttons {
    flex-direction: column;
  }
  
  .login-cta-modal .btn-primary,
  .login-cta-modal .btn-secondary {
    width: 100%;
  }
}

/* ============================================
   Battle Panel Styles
   ============================================ */

.battle-panel {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.battle-header {
  margin-bottom: 30px;
}

.battle-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.battle-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

.battle-section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 30px 0 20px 0;
}

/* Active Battle Card */
.battle-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 30px;
}

.battle-card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
  text-align: center;
}

.battle-timer,
.battle-participants {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 14px;
}

.timer-icon,
.participants-icon {
  color: var(--accent-primary);
}

/* Battle Tracks Container */
.battle-tracks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: start;
}

.battle-track {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-primary);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.battle-track:hover {
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.battle-track.voted {
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.1);
}

.track-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.track-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.voted-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.track-album-art {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--bg-primary);
}

.track-album-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.track-info {
  margin-bottom: 16px;
}

.track-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.track-artist {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 4px 0;
}

.track-genre {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

.track-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-play-track,
.btn-vote-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-play-track {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

.btn-play-track:hover {
  background: var(--bg-tertiary);
  transform: translateY(-1px);
}

.btn-vote-track {
  background: var(--accent-primary);
  color: white;
}

.btn-vote-track:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
}

/* VS Divider */
.battle-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}

.vs-text {
  font-size: 32px;
  font-weight: 900;
  color: var(--accent-primary);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Voted Notice */
.battle-voted-notice {
  margin-top: 20px;
  padding: 16px;
  background: rgba(var(--accent-primary-rgb), 0.1);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  border-radius: 8px;
  text-align: center;
}

.battle-voted-notice p {
  margin: 0;
  color: var(--text-primary);
  font-size: 14px;
}

/* Empty States */
.battle-empty,
.battle-empty-small {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.battle-empty-small {
  padding: 40px 20px;
}

.empty-icon {
  margin-bottom: 16px;
  color: var(--text-tertiary);
}

.battle-empty h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}

.battle-empty p {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

/* Battle History */
.battle-history-section {
  margin-top: 40px;
}

.battle-history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.battle-history-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
}

.battle-history-item:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.history-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.history-date {
  font-size: 12px;
  color: var(--text-tertiary);
}

.history-tracks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.history-track {
  padding: 12px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.history-track.winner {
  border-color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.05);
}

.track-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.history-track .track-artist {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.track-votes {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
}

.votes-count {
  font-weight: 600;
  color: var(--text-primary);
}

.votes-percentage {
  font-size: 12px;
  color: var(--text-secondary);
}

.history-vs {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
}

.history-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  background: var(--bg-tertiary);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.history-result.winner {
  color: var(--accent-primary);
  background: rgba(var(--accent-primary-rgb), 0.1);
}

.history-result.tie {
  color: var(--text-secondary);
}

/* Loading & Error States */
.battle-loading,
.battle-error {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.battle-error {
  color: var(--error-color);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .battle-tracks {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .battle-vs {
    padding: 0;
    margin: -8px 0;
  }
  
  .vs-text {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .battle-panel {
    padding: 16px;
  }
  
  .battle-title {
    font-size: 24px;
  }
  
  .battle-card {
    padding: 16px;
  }
  
  .battle-track {
    padding: 16px;
  }
  
  .track-title {
    font-size: 16px;
  }
  
  .history-tracks {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .history-vs {
    margin: -6px 0;
  }
}

/* ============================================
   Guest Modal Styles
   ============================================ */

.guest-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

.guest-modal-content {
  background: var(--bg-primary, #1a1a1a);
  border-radius: 12px;
  padding: 32px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  animation: slideUp 0.3s ease-out;
}

.guest-modal-content h2 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
}

.guest-modal-message {
  margin: 0 0 24px 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary, #b3b3b3);
}

.guest-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn-guest-signup {
  padding: 10px 24px;
  background: var(--accent-color, #1db954);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-guest-signup:hover {
  background: var(--accent-color-hover, #1ed760);
}

.btn-guest-cancel {
  padding: 10px 24px;
  background: transparent;
  color: var(--text-secondary, #b3b3b3);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-guest-cancel:hover {
  background: var(--bg-secondary, #2a2a2a);
  color: var(--text-primary, #ffffff);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Disabled button styles */
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-disabled[aria-disabled="true"] {
  pointer-events: auto;
  cursor: pointer;
}

/* ============================================
   Charts Panel Styles
   ============================================ */

.charts-period-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary, #b3b3b3);
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.chart-item {
  position: relative;
  background: var(--bg-secondary, #1a1a1a);
  border-radius: 8px;
  padding: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.chart-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chart-rank {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent-color, #1db954);
  color: #ffffff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
}

.chart-rank-hidden {
  display: none;
}

.chart-artwork {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--bg-tertiary, #2a2a2a);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chart-album-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 8px;
  background: transparent;
}

.chart-info {
  margin-bottom: 12px;
}

.chart-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-artist {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary, #b3b3b3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.btn-play-chart,
.btn-add-to-playlist {
  flex: 1;
  padding: 8px;
  background: var(--bg-tertiary, #2a2a2a);
  border: none;
  border-radius: 6px;
  color: var(--text-primary, #ffffff);
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-play-chart:hover,
.btn-add-to-playlist:hover {
  background: var(--accent-color, #1db954);
}

/* Responsive Charts */
@media (max-width: 768px) {
  .charts-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .chart-item {
    padding: 12px;
  }

  .guest-modal-content {
    padding: 24px;
    max-width: 90%;
  }
}