/* ============================================================
   화면 맨 위 전체 폭 블록들의 공통 부분
   ------------------------------------------------------------
   업소록의 Business Event, 게시판의 Korean Job Bank, 커뮤니티의
   Our Community 가 함께 쓴다.

   여기 있는 것은 카드 한 장과 제목 줄뿐이다. 칸을 어떻게 늘어놓을지는
   각 화면의 파일에 남는다 - 세 화면의 격자가 서로 다르고, 그 다름이
   각 화면의 성격이기 때문이다.
   ============================================================ */

.feat-wrap,
.feat-wrap * { box-sizing: border-box; }

/* 위는 머리말의 검은 띠, 아래는 배너다. 사이가 없으면 둘 다 블록에 붙어
   한 덩어리처럼 보인다. */
.feat-wrap {
    padding-top: 26px;
    padding-bottom: 24px;
}

/* ---------- 제목 줄 ----------
   회색 줄은 이 상자의 아래 테두리라 폭을 다 쓰고, 빨간 줄은 글자만큼만
   넓은 h2 의 아래 테두리다. h2 를 1px 내려 둘이 같은 높이에서 만나므로
   글자 밑에서는 빨강이 회색을 덮고 그 오른쪽부터 회색이 이어진다. */
/* ---------- 제목 줄 ----------
   모양은 사이트의 title-section 이 그대로 갖고 있다(style.css). 여기서는
   '더보기'를 오른쪽 끝으로 보내는 것과, 제목 글자가 링크가 되어도 링크
   색으로 변하지 않게 하는 것 - 둘뿐이다.

   이 두 줄은 원래 이 블록들을 싣는 화면마다 제 <style> 안에 따로 적혀
   있었다. 한 군데로 모은다. */
.feat-titlebar h1 a.more { float: right; }

.feat-titlebar h1 a {
    color: inherit;
    text-decoration: none;
}

.feat-titlebar h1 a:hover span { color: #f44336; }

/* ---------- 카드 한 장 ---------- */
.feat-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.feat-card:hover { text-decoration: none; }

/* 사진이 옆에 붙는 줄. 기본은 사진이 위, 글이 아래다. */
.feat-card.is-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* ---------- 사진 ----------
   비율을 고정하는 까닭은 올라오는 사진이 가로 세로 제각각이라 그냥 두면
   칸마다 높이가 달라지기 때문이다. 잘라 맞추므로(cover) 어떤 사진이 와도
   줄은 맞고, 비율에 맞춰 올린 사진은 잘리는 곳 없이 그대로 들어간다. */
.feat-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    background: #eceff1;
    border-radius: 4px;
}

.feat-thumb::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
}

/* 비율은 카드에 붙인 이름으로 고른다. 안쪽 사진 상자에 직접 붙이지 않는
   까닭은 카드를 만드는 쪽이 이름을 하나만 건네기 때문이다. */
.feat-card.is-4x3  .feat-thumb::before { padding-top: 75%; }
.feat-card.is-16x10 .feat-thumb::before { padding-top: 62.5%; }

.feat-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.feat-card:hover .feat-thumb img { transform: scale(1.04); }

/* ---------- 재생 표시 ----------
   영상인 칸에만 붙는다. 어느 칸이 영상인지는 표지 사진의 이름으로 안다 -
   유튜브에서 내려받은 표지는 yt_ 로 시작한다.

   pointer-events:none 이 중요하다. 카드 전체가 하나의 링크인데 이 표시가
   그 위에 떠 있으므로, 마우스를 받으면 한가운데를 눌렀을 때 아무 일도
   일어나지 않는다.

   값은 VideoHotTV.css 의 .video-link 와 같다 - 같은 사이트에서 같은 뜻을
   가진 단추가 두 가지 모습으로 나오지 않게 한다. 그쪽을 고치면 여기도
   함께 고쳐야 한다. */
.feat-thumb .feat-play {
    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;
    z-index: 2;
    pointer-events: none;
    transition: background 0.15s ease;
}

.feat-card:hover .feat-thumb .feat-play { background: rgba(200, 16, 16, 0.85); }

/* 큰 칸과 작은 줄의 크기도 그쪽(.hottv-big, .newstv-card)과 같은 값이다. */
.feat-card.is-lead .feat-play {
    width: 76px;
    height: 76px;
    font-size: 42px;
}

.feat-card.is-row .feat-play {
    width: 34px;
    height: 34px;
    font-size: 20px;
}


/* 옆에 붙는 줄에서는 사진 폭을 고정한다. 그래야 여러 칸의 글이 같은
   자리에서 시작해 세로줄이 보인다. */
.feat-card.is-row .feat-thumb {
    flex: 0 0 116px;
}

/* ---------- 글 ----------
   min-width:0 이 없으면 끊어지지 않는 긴 낱말 하나가 칸을 넓혀 옆 칸들이
   어긋난다. */
.feat-text {
    display: block;
    min-width: 0;
}

.feat-card.is-row .feat-text { padding-top: 1px; }

.feat-eyebrow {
    display: block;
    color: #8a949c;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feat-note {
    display: block;
    margin-top: 2px;
    color: #1f8a70;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 두 줄로 묶는다. 제목 긴 칸 하나 때문에 그 줄의 다른 칸들까지 길어지는
   것을 막는다. */
.feat-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 3px;
    color: #222222;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.feat-card:hover .feat-title { color: #f44336; }

/* 사진이 위에 오는 칸은 사진과 글 사이가 필요하다. */
.feat-card:not(.is-row) .feat-text { margin-top: 8px; }

/* 큰 칸. */
.feat-card.is-lead .feat-title { font-size: 18px; }

/* ---------- 흔한 격자 ----------
   한 줄에 셋. 가운데 칸 안에서도 쓰이므로 minmax(0, 1fr) 이다 - 1fr 은
   '적어도 내용만큼'이라는 뜻이라 긴 낱말 하나가 제 기둥을 넓힌다. */
/* 아래 여백은 이 격자가 가운데 칸 안에서 쓰이기 때문이다. 그 칸에서는
   바로 다음에 또 다른 칸의 제목이 오는데, 사이가 없으면 두 칸이 한
   덩어리로 읽힌다. 전체 폭 블록들은 제 바깥 상자에 여백이 있어 이것이
   더해져도 표가 나지 않는다. */
.feat-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 30px;
}

@media (max-width: 640px) {
    .feat-grid-3 { grid-template-columns: 1fr; }
}

/* 보여 줄 것이 없을 때. 빈 화면보다 한 줄이라도 있는 편이 낫다 - 없는
   것인지 고장난 것인지 읽는 사람이 알 수 있다. */
.feat-empty {
    margin: 40px 0 60px;
    color: #8a949c;
    text-align: center;
}

/* ---------- 줄로 늘어놓는 목록 ----------
   첫 화면 아래쪽 오늘의 TOPIC. 위쪽 블록이 다섯을 가져가고 남은 것들이 여기
   줄줄이 선다.

   격자가 아니라 줄인 까닭은 이 자리가 가운데 칸이라 좁기 때문이다. 좁은 폭에
   격자를 넣으면 사진이 우표만 해지고 제목이 서너 줄로 접힌다. 한 줄에 하나면
   사진을 크게 두고도 글이 편히 눕는다. */
.feat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.feat-list > li {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #eceff1;
}

.feat-list > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* 옆에 붙는 줄의 넓은 판. 기본 116px 은 여러 칸이 나란히 설 때의 크기다.
   여기서는 한 줄에 하나뿐이라 사진에 자리를 더 줄 수 있다. */
.feat-card.is-row.is-wide .feat-thumb {
    flex: 0 0 200px;
}

.feat-card.is-row.is-wide {
    gap: 16px;
}

/* ---------- 글쓴이 줄을 바닥에 붙인다 ----------
   미리보기가 없거나 한 줄뿐인 글이 섞여 있다. 그대로 두면 그 칸에서만 글쓴이와
   날짜가 위로 딸려 올라가고, 목록을 훑는 눈이 줄마다 다른 높이에서 그것을
   만난다. 줄이 흐트러져 보이는 까닭이 이것이다.

   글 상자에 사진만큼의 높이를 주고(200px 의 16:9 = 112px) 글쓴이 줄을 아래로
   밀어 둔다. 미리보기가 길어 상자가 더 자라면 그만큼 함께 내려가므로, 어느
   칸이든 글쓴이 줄은 늘 맨 아래에 선다. */
.feat-card.is-row.is-wide .feat-text {
    display: flex;
    flex-direction: column;
    min-height: 112px;
    /* 남은 폭을 다 차지한다. 이것이 없으면 상자가 글자 길이만큼만 넓어지고,
       그 안에서 양 끝으로 미는 날짜가 제목이 끝나는 자리에 가서 선다 - 줄마다
       날짜가 다른 곳에 놓이는 까닭이 이것이었다. */
    flex: 1 1 auto;
}

.feat-card.is-row.is-wide .feat-meta {
    margin-top: auto;
}

@media (max-width: 560px) {
    .feat-card.is-row.is-wide .feat-thumb { flex-basis: 130px; }

    /* 사진이 작아진 만큼 글 상자도 낮춘다 - 아니면 사진 아래에 빈 자리가 남는다. */
    .feat-card.is-row.is-wide .feat-text { min-height: 73px; }
}

/* ---------- 미리보기 두 줄 ----------
   제목만으로는 무슨 글인지 모르는 것들이 있다. 두 줄이면 짐작이 서고, 그보다
   길면 목록이 아니라 글이 된다. */
.feat-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    color: #6b757d;
    font-size: 13px;
    line-height: 1.6;
}

/* 글쓴이와 날짜. 가장 옅게 - 이 줄에서 눈이 먼저 닿아야 하는 것은 제목이다. */
.feat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    color: #9aa7b2;
    font-size: 12px;
}

.feat-meta .fa {
    margin-right: 5px;
}

.feat-date {
    font-variant-numeric: tabular-nums;
}

/* 좁은 화면에서는 미리보기를 뺀다. 사진과 제목이 자리를 다 쓰므로 두 줄이 더
   들어오면 칸 하나가 화면 하나만큼 길어진다. */
@media (max-width: 480px) {
    .feat-desc { display: none; }
}

/* ---------- 목록과 쪽 번호 사이 ----------
   마지막 칸과 쪽 번호가 붙어 있어 번호들이 그 칸 안에 든 것처럼 보였다.
   목록이 끝났다는 것이 눈에 보여야 다음 쪽으로 넘어가는 단추도 제 몫으로
   읽힌다.

   .pagination-box 는 다른 화면들도 쓰므로 이름만으로 걸지 않는다 - 이 목록
   바로 뒤에 오는 것에만 붙인다. */
.feat-list + .pagination-box {
    margin-top: 30px;
    padding-top: 4px;
}