/* youtube-playlist-popup/assets/style.css (최종 수정본) */

/*
 * ----------------------------------------------------
 * 목록 컨테이너
 * ----------------------------------------------------
 */
.ytpp-list-container {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee; 
    padding: 10px 20px;
    border-radius: 10px;
    overflow: hidden;

    /* 스크롤바 숨기기 코드 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ▼▼▼ 그림자 효과를 위한 새로운 클래스 추가 ▼▼▼ */
.ytpp-list-container.has-shadow {
    background-color: #fcfcfc;
    box-shadow: inset 0px 4px 8px -4px rgba(0, 0, 0, 0.1), 
                inset 0px -4px 8px -4px rgba(0, 0, 0, 0.1);
}

/* 스크롤바 숨기기 (Chrome, Safari, Opera) */
.ytpp-list-container::-webkit-scrollbar {
    display: none;
}


/*
 * ----------------------------------------------------
 * 목록 아이템 (링크)
 * ----------------------------------------------------
 */
.ytpp-list-container a.ytpp-video-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    line-height: 1.5;
    transition: background 0.2s ease;
    border-bottom: 1px solid #eee;
    /* padding 속성은 PHP 숏코드의 padding_top, padding_bottom 속성으로 제어됩니다. */
}

/* 목록의 마지막 아이템에서는 아래쪽 테두리 제거 */
.ytpp-list-container a.ytpp-video-link:last-child {
    border-bottom: none;
}

.ytpp-list-container a.ytpp-video-link:hover {
    background-color: #f5f5f5;
}


/*
 * ----------------------------------------------------
 * 아이콘 및 텍스트 스타일 (기존과 동일)
 * ----------------------------------------------------
 */
.ytpp-list-container a.ytpp-video-link::before {
    content: "►"; 
    color: #4a80c2;
    font-size: 0.7em;
    margin-right: 1em;
}

.ytpp-title-wrapper {
    display: flex;
    flex-direction: column;
}

.ytpp-video-title {
    font-weight: 500;
    font-size: 1em; 
    color: inherit; 
}

.ytpp-channel-title {
    font-size: 0.85em; 
    font-weight: 400;
    opacity: 0.8; 
    margin-top: 2px;
}