/* ============================================================
   sec06 유튜브 latest 스킨 style.css
   ============================================================ */

/* ── 전체 래퍼 ── */
.sec06-yt-wrap {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    width: 100%;
    box-sizing: border-box;
}

/* ── 왼쪽: 메인 영상 ── */
.sec06-yt-main {
    flex: 0 0 60%;
    min-width: 0;
}

.sec06-yt-iframe-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.13);
}

.sec06-yt-iframe-box iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

.sec06-yt-nodata {
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    border-radius: 16px;
    color: #999;
    font-size: 15px;
}

/* ── 오른쪽: 썸네일 리스트 ── */
.sec06-yt-list {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

.sec06-yt-list::-webkit-scrollbar        { width: 4px; }
.sec06-yt-list::-webkit-scrollbar-thumb  { background: #ccc; border-radius: 4px; }
.sec06-yt-list::-webkit-scrollbar-track  { background: transparent; }

/* ── 개별 아이템 ── */
.sec06-yt-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-bottom: 1px solid #e4e4e4;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    min-width: 0; /* 자식 ellipsis 동작 필수 */
}

.sec06-yt-item:last-child { border-bottom: none; }
.sec06-yt-item:hover      { background: rgba(0,0,0,0.04); }

/* 활성 아이템 */
.sec06-yt-item.active { background: rgba(26,58,122,0.05); }
.sec06-yt-item.active .sec06-yt-thumb img {
    outline: 2px solid #1a3a7a;
    outline-offset: 2px;
}
.sec06-yt-item.active .sec06-yt-title { color: #1a3a7a; }

/* 썸네일 */
.sec06-yt-thumb {
    flex: 0 0 110px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}

.sec06-yt-thumb img {
    width: 100%;
    height: 65px;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s;
}

.sec06-yt-item:hover .sec06-yt-thumb img { opacity: 0.85; }

/* ── 텍스트 영역 ── */
.sec06-yt-info {
    flex: 1;
    min-width: 0; /* ellipsis 동작 필수 */
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
}

/* 제목: 1줄 말줄임 */
.sec06-yt-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #222;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

/* 내용: 1줄 말줄임 */
.sec06-yt-desc {
    margin: 0;
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 반응형 ── */
@media screen and (max-width: 1024px) {
    .sec06-yt-main  { flex: 0 0 55%; }
    .sec06-yt-thumb { flex: 0 0 90px; }
    .sec06-yt-thumb img { height: 54px; }
}

@media screen and (max-width: 768px) {
    .sec06-yt-wrap {
        flex-direction: column;
        gap: 20px;
    }

    .sec06-yt-main { width: 100%; flex: none; }

    /* 모바일: 5개 높이(아이템 1개 ≈ 78px)만큼 고정 후 스크롤 */
    .sec06-yt-list {
        width: 100%;
        max-height: calc(5 * 78px);
        overflow-y: auto;
    }

    .sec06-yt-thumb { flex: 0 0 100px; }
    .sec06-yt-thumb img { height: 60px; }
}

@media screen and (max-width: 480px) {
    .sec06-yt-thumb { flex: 0 0 80px; }
    .sec06-yt-thumb img { height: 48px; }
    .sec06-yt-list  { max-height: calc(5 * 68px); }
    .sec06-yt-title { font-size: 12.5px; }
    .sec06-yt-desc  { font-size: 11.5px; }
}