/* ============================================================
   화면 맨 위 전체 폭 블록들의 공통 부분
   ------------------------------------------------------------
   업소록의 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 내려 둘이 같은 높이에서 만나므로
   글자 밑에서는 빨강이 회색을 덮고 그 오른쪽부터 회색이 이어진다. */
/* 이름은 왼쪽, 더보기는 오른쪽, 둘 다 회색 줄 위에 앉는다.

   float 로 밀지 않고 양끝에 붙이는 까닭은 아래쪽을 맞추기 위해서다.
   두 글자의 크기가 다르므로 float 로는 밑선이 어긋나는데, flex-end 로
   두면 크기를 바꿔도 둘 다 같은 줄 위에 선다. */
.feat-titlebar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
}

/* 두 글자 모두 1px 내려앉아(margin-bottom:-1px) 제 빨간 줄로 회색 줄을
   덮는다. 그래서 글자 밑에서는 빨강이, 그 사이에서는 회색이 보인다. */
.feat-titlebar h2,
.feat-titlebar .feat-more {
    margin: 0 0 -1px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f44336;
    line-height: 1.2;
    text-decoration: none;
}

.feat-titlebar h2 {
    color: #222222;
    font-size: 17px;
    font-weight: 700;
}

/* 아래 다른 칸들의 '더보기...'와 같은 모양이라야 한 화면에서 같은 것으로
   읽힌다 - 그쪽은 검은 굵은 글씨다. */
.feat-titlebar .feat-more {
    color: #222222;
    font-size: 15px;
    font-weight: 700;
}

.feat-titlebar .feat-more:hover { 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); }

/* 옆에 붙는 줄에서는 사진 폭을 고정한다. 그래야 여러 칸의 글이 같은
   자리에서 시작해 세로줄이 보인다. */
.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; }
}