/* 오디오클립 관리자 v4.3 - 활성 아이템 애니메이션 및 버튼 정렬 개선 */
:root {
    --acm-primary-color: #0073aa;
    --acm-light-gray-bg: #f8f9fa;
    --acm-highlight-bg: #eaf2ff; /* 하이라이트 배경색 변수 추가 */
    --acm-border-color: #e9ecef;
    --acm-text-color: #333;
    --acm-subtle-text-color: #6c757d;
}

/* === 플레이리스트 목록 === */
.acm-playlist-container {
    border: 1px solid var(--acm-border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2em;
  /*  background-color: #fff; *//* 배경색 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* === 플레이리스트 창길이  === */
.acm-playlist {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
}

.acm-playlist-item {
    padding: 15px 20px !important; /* 리스트 목록 상하간격 */
    border-bottom: 1px solid #bbb !important; /* 리스트 목록 상하 사이 */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 4px solid transparent;
    position: relative; /* 애니메이션을 위한 position 속성 추가 */
    overflow: hidden; /* 애니메이션을 위한 overflow 속성 추가 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 부드러운 이동 효과 */
}

/* ▼▼▼▼▼ 수정된 부분 ▼▼▼▼▼ */
/* 배경색을 채우는 애니메이션을 위한 가상 요소 */
.acm-playlist-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--acm-highlight-bg);
    transform: translateX(-100%); /* 기본 상태: 왼쪽에 숨김 */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: -1; /* 텍스트 뒤로 보냄 */
}

.acm-playlist-item:last-child {
    border-bottom: none;
}

.acm-playlist-item:hover {
     background-color: #f0f0f0;
    border-left-color: #f0f0f0; /* 배경색과 똑같이 맞춰줍니다. */
}

/* 활성화된 아이템 스타일 */
.acm-playlist-item.active {
    border-left-color: var(--acm-primary-color);
    transform: translateY(-2px); /* 살짝 위로 떠오르는 효과 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* 활성화 시, 배경색 채우기 애니메이션 실행 */
.acm-playlist-item.active::after {
    transform: translateX(0);
}

/* 기본 아이콘 (재생 표시) */
.acm-playlist-item::before {
    content: '▶';
    font-family: sans-serif;
    color: var(--acm-primary-color);
    font-size: 0.8em;
    opacity: 0.6;
    transition: all 0.2s ease;
}

/* 활성화 시 스피커 아이콘 제거 (해당 블록 삭제) */

/* ▲▲▲▲▲ 수정 완료 ▲▲▲▲▲ */


.acm-item-text-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.acm-item-title {
    font-size: 1em;
    color: var(--acm-text-color);
    font-weight: 500;
    line-height: 1.4;
}

.acm-playlist-item.active .acm-item-title {
    color: var(--acm-primary-color);
    font-weight: 600;
}

.acm-item-channel {
    font-size: 0.85em;
    color: var(--acm-subtle-text-color);
}


/* === 하단 고정 플레이어 === */
#acm-sticky-player-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background-color: #ffffff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
}

#acm-sticky-player-container.show {
    transform: translateY(0);
}

.acm-sticky-player-content {
    padding: 5px;
}

.acm-sticky-player-content iframe {
    display: block;
    border: none;
}


/* 닫기 버튼 스타일 */
#acm-close-sticky-player {
    position: absolute;
    top: -20px;      /* 1. 위로 이동된 위치 */
    left: 15px;      /* 2. 왼쪽 위치 */

    width: 40px;     /* 3. 커진 가로 크기 */
    height: 40px;    /* 4. 커진 세로 크기 */
    
    background-color: #333;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    opacity: 0.8;
    transition: opacity 0.2s, background-color 0.2s, transform 0.2s ease;
    
    /* Flexbox를 이용한 완벽한 중앙 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* 5. 커진 아이콘 크기 */
    line-height: 1;
    padding: 0;
    padding-bottom: 3px; /* 아래쪽에만 여백을 3px 주어 아이콘을 위로 밀어냅니다. */
}

#acm-close-sticky-player:hover {
    background-color: #e04f4f;
    opacity: 1;
    transform: rotate(90deg); /* 호버 시 회전 효과 추가 */
}

/* 플레이어가 활성화되었을 때, 페이지 하단 콘텐츠가 가려지지 않도록 body에 padding 추가 (JS로 제어) */
body.acm-player-active {
    padding-bottom: 180px; /* 플레이어 높이(160) + 여백(20) */
    transition: padding-bottom 0.4s ease-in-out;
}


/*
 * ----------------------------------------------------
 * 스크롤 영역 디자인 (Fading 효과)
 * ----------------------------------------------------
 */

/* 1. 기준점이 될 컨테이너에 position: relative 추가 */
.acm-playlist-container {
    position: relative;
}

/* 2. 컨테이너 상단에 덮어씌울 가상 요소(fading 효과) */
.acm-playlist-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px; /* 그라데이션 높이 */
    background: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
    z-index: 5; /* 다른 요소들 위로 올라오도록 설정 */
    pointer-events: none; /* 마우스 클릭이 방해되지 않도록 설정 */
}

/* 3. 컨테이너 하단에 덮어씌울 가상 요소(fading 효과) */
.acm-playlist-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px; /* 그라데이션 높이 */
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
    z-index: 5;
    pointer-events: none;
}


/*
 * ----------------------------------------------------
 * .acm-playlist 스크롤바 숨기기
 * ----------------------------------------------------
 */

.acm-playlist {
    /* Firefox에서 스크롤바 숨기기 */
    scrollbar-width: none;

    /* Internet Explorer/Edge 구버전에서 스크롤바 숨기기 */
    -ms-overflow-style: none; 
}

/* Chrome, Safari, Edge, Whale 등 WebKit/Blink 기반 브라우저에서 스크롤바 숨기기 */
.acm-playlist::-webkit-scrollbar {
    display: none;
}