/* ============================================================
   YouTV 첫 화면의 두 블록
   ------------------------------------------------------------
   오늘의 핫TV : 가운데 큰 한 편 + 왼쪽 두 칸 + 오른쪽 네 줄
   NEWS TV     : 한 줄에 세 칸, 두 줄

   VideoIntro.css 를 건드리지 않고 제 파일에 둔다. 그쪽은 이 화면의
   다른 칸들이 모두 기대고 있는 파일이라, 여기서 규칙 하나를 잘못
   고치면 손대지 않은 칸들까지 함께 어긋난다.
   ============================================================ */

.hottv,
.newstv { box-sizing: border-box; }

.hottv *,
.newstv * { box-sizing: border-box; }

/* 이 블록은 머리말의 검은 띠 바로 아래에 놓인다. 사이가 없으면 제목이
   띠에 붙어 보인다. */
.hottv-wrap { padding-top: 26px; }

/* ---------- 오늘의 핫TV ----------
   왼쪽 칸 - 가운데 큰 칸 - 오른쪽 줄.

   세 칸의 폭은 눈대중이 아니라 아래 높이를 맞춰서 나온 값이다. 사진이 모두
   16:9 이므로 칸의 높이는 폭에서 그대로 따라 나오고, 제목은 줄 수를 묶어
   두었으므로(아래 line-clamp) 높이가 정해져 있다. 그래서 이 비율에서 왼쪽
   두 장의 아래끝과 가운데 한 장의 아래끝이 같은 자리에서 만난다.
   비율을 건드리면 그 맞물림이 풀린다. */
.hottv {
    display: grid;
    grid-template-columns: 1fr 2.27fr 1.22fr;
    gap: 14px;
    margin-bottom: 26px;
}

/* space-between: 남는 자리가 생기면 칸 사이로 흩어 놓아 마지막 칸의 아래끝이
   기둥 바닥에 닿게 한다. 늘려서 채우면 사진 비율이 깨진다. */
.hottv-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.hottv-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}

/* 오른쪽 네 줄 사이의 가는 선. 줄 사이가 벌어져도 흩어져 보이지 않고
   목록으로 읽힌다. */
.hottv-list .hottv-row + .hottv-row {
    border-top: 1px solid #e5e5e5;
    padding-top: 12px;
}

/* ---------- 칸 하나 ---------- */
.hottv-card { position: relative; }

.hottv-thumb {
    position: relative;
    overflow: hidden;
    background: #eceff1;
}

/* 칸의 비율은 16:9 로 고정한다. 줄을 맞추려고 아무 비율이나 잡으면 안 된다:
   이 섬네일들은 글자가 그림 안에 박혀 있어서, 조금만 잘라도 낱말이 끊긴다.
   16:9 는 유튜브가 실제로 쓰는 비율이라 잘려 나가는 부분이 거의 없고,
   4:3 로 오는 hqdefault 에서는 위아래 검은 띠만 정확히 잘라 준다. */
.hottv-thumb::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.hottv-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 재생 단추는 사진 위 한가운데. 사진이 없는 기록에서도 누를 것이 남는다. */
.hottv-thumb .video-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s ease;
}

.hottv-thumb .video-link:hover { background: rgba(200, 16, 16, 0.85); }

/* 제목의 줄 수를 묶는다. 이것이 이 블록에서 가장 중요한 규칙이다: 줄 수가
   정해져 있어야 칸의 높이가 정해지고, 그래야 세 기둥의 바닥이 만난다.
   제목 길이는 영상마다 다르므로 묶어 두지 않으면 어느 날 한 기둥만 길어진다. */
.hottv h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hottv-side h2,
.hottv-lead h2 { -webkit-line-clamp: 2; }

.hottv-row h2 { -webkit-line-clamp: 3; }

.hottv-card h2 {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

/* 제목 색은 칸 종류가 아니라 블록 전체에 건다. 오른쪽 네 줄은 hottv-card 를
   달고 있지 않아서, .hottv-card 로 잡았을 때 그 넷만 링크 기본색인 파랑으로
   남아 있었다. */
.hottv h2 a,
.newstv h2 a {
    color: #222;
    text-decoration: none;
}

.hottv h2 a:hover,
.newstv h2 a:hover { text-decoration: underline; }

/* ---------- 가운데 큰 한 편 ---------- */
.hottv-big .hottv-thumb .video-link {
    width: 76px;
    height: 76px;
    font-size: 42px;
}

.hottv-big h2 {
    margin-top: 12px;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
}

/* ---------- 오른쪽 네 줄 ----------
   제목이 왼쪽, 사진이 오른쪽. row-reverse 로 뒤집는 까닭은 읽는 차례를
   지키기 위해서다 - 화면 낭독기와 글자만 읽는 기계에는 제목이 먼저 온다.

   제목이 길어도 칸을 밀지 않도록 글자 쪽에 min-width를 0으로 둔다. */
.hottv-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 9px;
}

.hottv-row .hottv-thumb {
    flex: 0 0 132px;
}

.hottv-row .hottv-thumb .video-link {
    width: 28px;
    height: 28px;
    font-size: 16px;
}

.hottv-row h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

/* ---------- NEWS TV ---------- */
.newstv {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 26px;
}

/* ---------- 좁은 화면 ----------
   한 줄로 편다. 큰 한 편이 맨 위에 그대로 남고, 왼쪽 두 칸이 그 아래,
   오른쪽 네 줄은 가로형 그대로 아래에 쌓인다 - 손가락으로 훑기 좋다. */
@media (max-width: 900px) {
    .hottv {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* 큰 한 편을 맨 위로 올린다. 표시 차례는 코드에서 바꾸지 않는다:
       넓은 화면에서는 가운데가 제자리이기 때문이다. */
    .hottv-lead { order: -1; }

    .hottv-side {
        flex-direction: row;
        gap: 12px;
    }

    .hottv-side .hottv-card { flex: 1 1 0; min-width: 0; }

    .newstv { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 560px) {
    .hottv-big h2 { font-size: 18px; }

    .hottv-big .hottv-thumb .video-link {
        width: 60px;
        height: 60px;
        font-size: 34px;
    }

    /* 두 칸이 나란히 서기엔 좁다 */
    .hottv-side { flex-direction: column; }

    .newstv { grid-template-columns: 1fr; }

    /* 한 칸짜리가 되면 사진이 너무 커진다. 목록처럼 가로로 눕힌다. */
    .newstv-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .newstv-card .hottv-thumb { flex: 0 0 130px; }

    .newstv-card .hottv-thumb .video-link {
        width: 34px;
        height: 34px;
        font-size: 20px;
    }

    .newstv-card h2 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
    }
}