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

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

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

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

/* 이 블록은 머리말의 검은 띠 바로 아래에 놓인다. 사이가 없으면 제목이
   띠에 붙어 보인다.

   아래쪽 사이는 그 다음에 오는 것이 배너라서 둔다. 배너는 제 여백을
   20px만 갖고 있어, 그것만으로는 영상 칸 바로 밑에 붙어 한 덩어리처럼
   보였다. */
.hottv-wrap {
    padding-top: 26px;
    padding-bottom: 24px;
}

/* ---------- 오늘의 핫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 안에만 걸려 있어 이쪽은 비어 있었다. VideoCards 가
   그리는 칸들은 제목을 코드에서 55자로 잘라 오므로 대개 두 줄에 들어갔지만,
   ListView 로 그리는 칸들(오늘의 핫TV·아하TV·유투버들의 '더보기' 화면)은
   제목을 통째로 내보내므로 길면 서너 줄이 되어 그 칸만 이웃보다 길어졌다. */
.newstv h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

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

/* ---------- 제목 밑의 날짜 ----------
   작고 흐리게. 제목보다 먼저 눈에 들어오면 안 되므로 두 단계 작은 글자에
   회색을 쓰고, 굵기는 주지 않는다.

   높이가 늘어나는 자리라 블록마다 다루는 법이 다르다. 아래 두 규칙이
   그것을 맞춘다. */
.hottv-date {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.2;
    color: #8a8a8a;
}

/* 오른쪽 네 줄에서는 날짜가 제목 아래, 사진 옆 글자 칸 안에 들어간다.
   제목 세 줄에 날짜 한 줄을 더해도 옆 사진(132px 폭의 16:9)보다 낮아서
   줄의 높이는 그대로다 - 즉 이 블록의 세 기둥은 어긋나지 않는다. */
.hottv-row .hottv-date {
    margin-top: 3px;
    font-size: 11px;
}

/* 가운데 큰 칸의 날짜는 기둥 바닥에 붙인다.
   ------------------------------------------------------------
   왼쪽 기둥은 칸이 둘이라 날짜 줄도 둘, 가운데는 하나뿐이다. 그냥 두면
   가운데 기둥이 한 줄만큼 짧게 끝나 아래끝이 어긋난다. 남는 자리를 날짜
   위로 몰아 주면 두 기둥의 아래끝이 예전처럼 같은 자리에서 만난다. */
.hottv-lead { display: flex; }

.hottv-lead .hottv-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hottv-lead .hottv-date { margin-top: auto; padding-top: 4px; }

/* 제목 색은 칸 종류가 아니라 블록 전체에 건다. 오른쪽 네 줄은 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;
}

/* ---------- 오른쪽 네 줄 ----------
   제목이 왼쪽, 사진이 오른쪽.

   전에는 flex 를 뒤집어(row-reverse) 이 자리를 만들었다. 이제 칸이 셋이라
   뒤집으면 날짜가 제목 왼편으로 떨어져 나가므로, 격자로 두고 자리를 하나씩
   짚어 준다: 사진은 오른쪽에서 두 줄을 걸치고, 제목과 날짜가 왼쪽에 위아래로
   놓인다. 읽는 차례는 그대로 지켜진다 - 화면 낭독기는 격자가 아니라 글의
   차례를 따라간다.

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

.hottv-row .hottv-thumb {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.hottv-row h2 { grid-column: 1; grid-row: 1; }

.hottv-row .hottv-date { grid-column: 1; grid-row: 2; }

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

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

/* 재생 단추 없이 사진 전체를 누르는 자리로 만드는 링크. 유투버들 칸에서
   쓴다 - 거기 칸들은 영상이 아니라 채널이라 재생 단추가 거짓말이 된다.
   글자가 없으므로 스스로는 크기가 없다. 사진 상자를 그대로 덮게 한다. */
.hottv-thumb .thumb-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* ---------- 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: grid;
        grid-template-columns: 130px 1fr;
        column-gap: 10px;
        align-items: start;
    }

    .newstv-card .hottv-thumb { grid-row: 1 / span 2; }

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

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


/* ---------- 제목 줄의 자리 고르개 ----------
   왼쪽에 제목과 '더보기', 오른쪽에 런던/토론토/전체.

   '더보기'가 이 블록에서만 제목 옆으로 온다. 다른 블록들은 그것을 오른쪽
   끝에 float 로 붙여 두는데, 여기서는 그 자리를 고르개가 쓴다. */
.hottv-titlebar h1 {
    display: flex;
    align-items: baseline;
}

.hottv-titlebar h1 a.hottv-more {
    float: none;
    margin-left: 16px;
}

/* 남는 자리를 모두 왼쪽으로 몰아 고르개를 오른쪽 끝으로 민다. */
.hottv-titlebar h1 .hottv-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-left: auto;
    padding-left: 20px;
    min-width: 0;
    /* 감싸개가 span 이라 style.css 의 '.title-section h1 span' 에 걸린다.
       그 규칙의 빨간 밑줄은 제목의 것이지 이 줄의 것이 아니다. */
    border-bottom: none;
    padding-bottom: 0;
}

/* 크기는 왼쪽의 제목·더보기와 같다(15px, style.css 의 .title-section h1).
   한 줄에 선 것들이 서로 다른 크기이면 어느 것이 더 중요한지를 두고
   눈이 잠깐 머뭇거린다.

   글자색도 제목과 같고 굵기만 다르다. 색까지 흐리면 누를 수 있는 것으로
   보이지 않는다 - 분류 고르개에서 같은 것을 겪었다. */
.hottv-titlebar h1 a.hottv-tab {
    color: #222222;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    /* 고르지 않은 것도 같은 자리를 차지한다. 밑줄이 생길 때 줄이 흔들리지
       않도록 여백을 미리 잡아 두고, 선만 투명하게 둔다. */
    padding-bottom: 16px;
    border-bottom: 1px solid transparent;
}

.hottv-titlebar h1 a.hottv-tab:hover { color: #f44336; }

/* 지금 보고 있는 자리. 제목이 제 밑에 긋는 것과 같은 빨간 줄을 긋는다 -
   이 줄은 이 화면에서 '지금 여기'를 뜻하는 표시이므로, 같은 뜻에 같은
   표시를 쓴다. 색만으로 말하지 않고 굵기도 함께 바꾼다. */
.hottv-titlebar h1 a.hottv-tab.is-on {
    color: #222222;
    font-weight: 700;
    border-bottom-color: #f44336;
}

/* 세 벌 가운데 하나만 선다. 나머지는 자리도 차지하지 않는다. */
.hottv-pane { display: none; }
.hottv-pane.is-on { display: block; }

.hottv-empty {
    margin: 24px 0 8px;
    color: #999999;
    font-size: 14px;
    text-align: center;
}

/* 좁은 화면에서는 제목 아래로 내려 앉는다. 세 이름은 짧아 감출 것까지는 없다. */
@media (max-width: 700px) {
    .hottv-titlebar h1 {
        flex-wrap: wrap;
    }
    .hottv-titlebar h1 .hottv-tabs {
        margin-left: 0;
        padding-left: 0;
        width: 100%;
        padding-top: 6px;
    }
}