/* ****************** 2칸 레이아웃  ****************** */

.layout_200521_ {clear:both; min-width:320px; max-width:1300px; margin:0 auto;}
.layout_200521_ > div {margin-left:-20px;}
.layout_200521_ > div:after {content:''; display:block; clear:both;}
.layout_200521_ > div > [class^=container_] {float:left; position:relative; width:100%; padding-left:20px; box-sizing:border-box;}
.layout_200521_ > div > .container_1 {width:75%;}
.layout_200521_ > div > .container_2 {width:25%;}

@media (max-width:1023px){
	.layout_200521_ > div > .container_1 { width:100%; }
	.layout_200521_ > div > .container_2 {clear:both; width:100%; padding-top:20px;}
}

@media \0screen{
	.layout_200521_ {min-width:1300px;}
}

/* ****************** 맞춤형 컨텐츠  ****************** */

.empty_200501_ {display:block;}
[id^=div_user_list] .empty_200501_ {display:block; border:0px dotted #f00;}
[id^=div_user_list] .empty_200501_:before {content:'유튜브 인기동영상'; padding:0 15px; font-size:13px; font-weight:normal; color:#f00;}

    .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 기본 3단 */
        gap: 20px;
        padding: 20px;
    }
    .video-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #ccc;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .thumbnail-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9; /* 16:9 비율 설정 */
        overflow: hidden;
    }
    .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지가 컨테이너를 채우도록 설정 */
    }
    /* 플레이 아이콘 스타일 */
    .thumbnail-container::after {
        content: '▶';
        font-size: 48px;
        color: rgba(255, 0, 0, 0.8);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .details {
        padding: 10px;
        text-align: center;
    }
    .title, .link {
        font-size: 16px;
        color: #000;
        font-weight: bold;
        text-decoration: none;
        display: block;
        margin: 10px 0;
    }
    .title:hover, .link:hover {
        color: #3498db;
    }
    .channel {
        font-size: 14px;
        color: #555;
    }

    /* 모바일용 스타일 - 화면 너비 768px 이하에서는 2단으로 표시 */
    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: repeat(2, 1fr); /* 2단으로 변경 */
        }
        .thumbnail-container::after {
            font-size: 24px; /* 아이콘 글꼴 크기를 50% 줄임 */
            width: 40px;     /* 흰색 원의 크기를 50% 줄임 */
            height: 40px;
        }
        .title, .link {
            font-size: 14px;
        }
          .channel {
        font-size: 12px;
        color: #555;
    }
    }

/* ****************** 맞춤형 컨텐츠  ****************** */

.empty_200551_ {display:block;}
[id^=div_user_list] .empty_200551_ {display:block; border:0px dotted #f00;}
[id^=div_user_list] .empty_200551_:before {content:'핫뉴스'; padding:0 15px; font-size:13px; font-weight:normal; color:#f00;}