@charset "utf-8";
/* ============================================================
   carat_portal_home.css — 포털 홈(index.php 포털 모드) 위계 레이어
   carat_portal / carat_naver 를 건드리지 않고 위에 얹는다.
   (carat_home.css 는 사이드바형 갤러리 레이아웃이라 별개 파일이다)

   위계  1순위 AI 시네마 (영화제 수상작)
         2순위 프롬프트 라이브러리
         3순위 AI 뉴스 · 공모전

   조치 순서 = 빼기 → 여백 → 크기 → 색. 색은 최소로만 쓴다.
   ============================================================ */

/* ── 섹션 순서 — 마크업을 옮기지 않고 order 로만 재배치 ──────
   ① 시네마 → ② 뉴스 → ③ 공모전 → ④ 프롬프트
   영상(nv_vsec)은 시네마와 성격이 겹쳐 프롬프트 뒤로 보낸다.        */
.nv_main { display: flex; flex-direction: column; }

.nv_main > .nv_cine--film { order: 1; }   /* AI 시네마 */
.nv_main > .nv_news2      { order: 2; }   /* AI 뉴스 — 기존 네이버 판형 유지 */
.nv_main > .nv_ctsec      { order: 3; }   /* 공모전 — 포스터 세로형 */
.nv_main > .nv_banner     { order: 4; }   /* 광고는 콘텐츠 사이로 */
.nv_main > .nv_psec       { order: 5; }   /* 프롬프트 */
.nv_main > .nv_vsec       { order: 6; }   /* AI 영상 */
.nv_main > script         { order: 99; }

/* 시네마가 비었을 때 — 영상이 1순위 자리를 대신 채운다.
   1순위 슬롯이 비면 홈 전체의 위계가 무너지기 때문. */
.nv_main > .nv_vsec--lead { order: 0; }

/* 섹션 간 여백 > 섹션 내부 여백 (최소 2배) */
.nv_main > section { margin-bottom: 40px; }
.nv_main > section:last-of-type { margin-bottom: 0; }

/* ── 1순위: AI 시네마 ──────────────────────────────────────── */
.nv_cine__desc {
    margin-left: 10px;
    font-size: 13px;
    font-weight: 400;
    color: var(--c-muted, #6b7280);
}

/* 히어로 — 위계는 크기로 만든다. 배지·포인트색을 더 얹지 않는다 */
.nv_cine__hero {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 24px;
    align-items: center;
    margin: 18px 0 28px;
    text-decoration: none;
    color: inherit;
}
.nv_cine__ht {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #0f1115;
}
.nv_cine__ht img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.nv_cine__hero:hover .nv_cine__ht img { transform: scale(1.03); }

.nv_cine__ht.is-empty::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1f2430, #0f1115);
}

.nv_cine__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 58px;
    height: 58px;
    padding-left: 4px;                  /* 광학적 중심 보정 */
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv_cine__cat {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 9px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    font-size: 11px;
    font-style: normal;
    color: #4b5563;
}

/* 제목:본문 = 26:14 ≈ 1.85배 */
.nv_cine__ht2 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    font-size: 26px;
    line-height: 1.32;
    letter-spacing: -.02em;
    font-weight: 700;
    color: #111827;
}

.nv_cine__dur {
    margin-left: 8px;
    font-style: normal;
    font-size: 12px;
    color: var(--c-muted, #6b7280);
}

/* 히어로(1) + 4 = 5 묶음. 전체로는 홀수를 유지한다 */
.nv_cine__grid { grid-template-columns: repeat(4, 1fr); }

/* ── 공모전 — 포스터 세로형 (4:5) ──────────────────────────────
   공모전 포스터는 세로가 길다. 16:9 로 자르면 제목·일정이 잘려나가
   목록에서 정보가 사라지므로 원본 비율에 가까운 4:5 로 잡는다.      */
/* 레일 — 가로 스크롤은 기존 .nv_rail(쇼츠와 공용)이 담당하고,
   여기서는 카드 폭과 스냅만 정한다. 화살표 JS 도 .nv_rail 로 함께 잡힌다. */
.nv_ctrail {
    gap: 16px;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
}
.nv_ctrail .nv_ctcard {
    flex: 0 0 auto;
    width: 190px;
    scroll-snap-align: start;
}

.nv_ctcard { display: block; text-decoration: none; color: inherit; }
.nv_ctcard.is-end { opacity: .5; }          /* 마감 건은 흐리게 */

.nv_ctcard__poster {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    border: 1px solid #ececf1;
}
.nv_ctcard__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.nv_ctcard:hover .nv_ctcard__poster img { transform: scale(1.04); }

/* 포스터 없는 공고 — 기관 공고는 텍스트만인 경우가 많다.
   빈 칸을 두면 그리드가 들쭉날쭉해지므로 대체 카드를 그린다 */
.nv_ctcard__none {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(150deg, #fff7ed, #f3f4f6);
    color: #b45309;
}
.nv_ctcard__none i  { font-size: 26px; opacity: .55; }
.nv_ctcard__none em {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
}

/* D-day — 카드에서 유일한 색 강조. 마감 임박만 눈에 띄게 한다 */
.nv_ctcard__dday {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: rgba(17, 24, 39, .78);
    backdrop-filter: blur(2px);
}
.nv_ctcard__dday.ct_dday_today { background: #dc2626; }
.nv_ctcard__dday.ct_dday_hot   { background: #ea580c; }
.nv_ctcard__dday.ct_dday_soon  { background: #d97706; }
.nv_ctcard__dday.ct_dday_end   { background: #9ca3af; }
.nv_ctcard__dday.ct_dday_none  { background: rgba(17, 24, 39, .55); }

.nv_ctcard__body { display: block; padding: 10px 2px 0; }

.nv_ctcard__t {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.42;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #191924;
}

/* 일정·대상·상금 — 라벨 간격을 좁게 묶어 한 덩어리로 읽히게 한다 */
.nv_ctcard__row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nv_ctcard__row i { width: 12px; flex: 0 0 auto; opacity: .7; text-align: center; }
.nv_ctcard__prize { color: #b45309; font-weight: 600; }

@media (max-width: 1024px) {
    .nv_ctrail { gap: 14px; }
    .nv_ctrail .nv_ctcard { width: 168px; }
}
@media (max-width: 640px) {
    /* 모바일은 손가락 스와이프가 자연스러우니 화살표를 숨기고 카드를 좁힌다 */
    .nv_ctsec .nv_rail__nav { display: none; }
    .nv_ctrail { gap: 12px; }
    .nv_ctrail .nv_ctcard { width: 144px; }
    .nv_ctcard__t { font-size: 13px; }
}

/* ── 반응형 ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .nv_cine__hero { grid-template-columns: 1fr; gap: 16px; }
    .nv_cine__ht2  { font-size: 21px; }
    .nv_cine__grid { grid-template-columns: repeat(2, 1fr); }
    .nv_main > section { margin-bottom: 32px; }
}

@media (max-width: 640px) {
    .nv_cine__ht2  { font-size: 19px; -webkit-line-clamp: 2; }
    .nv_cine__play { width: 46px; height: 46px; font-size: 16px; }
    .nv_cine__grid { grid-template-columns: 1fr; }
}