@charset "UTF-8";

/* 섹션 공통 패딩 (HTML 인라인 스타일 제거 후 CSS로 제어) */
.section-padding-discover {
  /* #discover-section */
  padding: 0.5rem 1.5rem;
  min-height: 100vh;
}
.section-padding-recent {
  /* #your-recent-section */
  padding: 2rem 1.5rem 2rem 1.5rem;
  min-height: 100vh;
  padding-top: 4rem; /* !important 제거, 구체성으로 해결되거나 값 조정 필요시 */
  margin-top: 0;
}

/* Recent 섹션 스타일 개선 */
.recent-section-header,
.your-music-header {
  /* Added .your-music-header */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem; /* 타이틀 제거 후에도 이 마진은 유지될 수 있음, 필요시 조정 */
  padding: 0; /* 기존 0rem 에서 0으로 변경 */
  position: relative;
}

/* .recent-section-title, .your-music-title 관련 스타일 제거 */

/* ========================================================== */
/* ▼▼▼ Your Songs, Artists 섹션 스타일 (PC/모바일) ▼▼▼ */
/* ========================================================== */

#your-songs-section,
#your-artists-section {
  padding: 3.5rem 1.5rem;
  min-height: 100vh;
}

/* ========================================================== */
/* ▲▲▲ Your Songs, Artists 섹션 스타일 끝 ▲▲▲         */
/* ========================================================== */

#search-history-container {
  margin-top: -5px; /* 미세 조정 */
}

.recent-section-nav,
.your-music-actions {
  /* Added .your-music-actions */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto; /* 타이틀이 없으므로, 이 부분이 헤더의 전체 너비를 차지하게 될 수 있음 */
  flex-shrink: 0;
}

.recent-nav-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.recent-nav-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.05);
}

.recent-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.recent-nav-btn:active {
  transform: scale(0.95);
}

.search-history-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  cursor: pointer;
}

.search-history-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.search-history-content {
  flex-grow: 1;
  cursor: pointer;
}

.search-history-query {
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.3rem;
}

.search-history-date {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.search-history-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.btn-search-again {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-search-again:hover {
  transform: scale(1.05);
}

.btn-delete-history,
.btn-delete-song {
  /* Added .btn-delete-song */
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.4rem;
  font-size: 0.8rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-delete-history:hover,
.btn-delete-song:hover {
  /* Added .btn-delete-song hover */
  background: rgba(255, 99, 99, 0.2);
  color: #ff6b6b;
}

/* .content-navigation-wrapper 스타일은 onlycss.css 로 통합 */
/* 이퀄라이저 버튼 관련 스타일은 onlycss.css 로 통합 */

/* 모바일 반응형 */
@media (max-width: 768px) {
  /* #left-sidebar, #app-container, body padding-bottom 등은 onlycss.css에서 처리 */

  /* ▼▼▼ 수정된 부분 ▼▼▼ */
  /* Recent 섹션의 모바일 좌우 여백 조정 */
  .section-padding-recent {
    padding-left: 0.5rem; /* 모바일에서 좌측 여백 줄임 */
    padding-right: 0.5rem; /* 모바일에서 우측 여백 줄임 */
  }
  /* ▲▲▲ 여기까지 수정 ▲▲▲ */

  /* Your Songs, Artists 섹션의 모바일 좌우 여백만 제거 */
  #your-songs-section,
  #your-artists-section {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  /* 모바일에서 네비게이션 버튼 크기 조정 */
  .recent-nav-btn {
    width: 32px;
    height: 32px;
  }

  /* 모바일에서 헤더 간격 조정 */
  .recent-section-header,
  .your-music-header {
    margin-bottom: 1rem;
  }

  /* 모바일에서 섹션 제목 스타일은 onlycss.css의 반응형 부분에서 공통으로 처리 (현재는 삭제됨) */
}