@charset "utf-8";
/* ============================================================
   메인 Portfolio 최신글 스킨 (latest) — Swiper / pf-list 카드
   ============================================================ */

.pf_latest{ --pf-point:#6633ee; --pf-point2:#6a4cf0; --pf-card:#121113; --pf-sub:#8d8d97; position:relative; }
/* 좌우 패딩 없음: 카드가 상단 탭과 같은 라인 / 정확히 4개 */
.pf_latest, .pf_latest *{ box-sizing:border-box; }
.pf_latest a{ text-decoration:none; color:inherit; }
.pf_latest .sound_only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Swiper 컨테이너 */

/* ---- Swiper 핵심 레이아웃 (스코프 한정, CSS 미로드 대비) ---- */
.pf_latest .swiper{ margin-left:auto; margin-right:auto; position:relative; overflow:hidden; list-style:none; padding:0; z-index:1; }
.pf_latest .swiper-wrapper{ position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; box-sizing:content-box; }
.pf_latest .swiper-slide{ flex-shrink:0; width:100%; height:100%; position:relative; transition-property:transform; }
.pf_latest .swiper-slide{ box-sizing:border-box; }

.pf_latest .pf_swiper{ position:relative; overflow:hidden; }
.pf_latest .pf-list-latest{
    list-style:none; margin:0; padding:0;
}
/* swiper-slide 는 Swiper 가 너비를 계산하므로 별도 width 지정 안 함 */
.pf_latest .pf_li{ height:auto; }

/* ---------- 카드 (게시판 list 와 동일 디자인) ---------- */
.pf_latest .pf-card{
    position:relative; border-radius:8px; overflow:hidden;
    background:var(--pf-card);
    transition:transform .4s ease, box-shadow .4s ease;
}
/* .pf_latest .pf-card:hover{ transform:translateY(-8px); box-shadow:0 18px 40px rgba(102,51,238,.25); } */

.pf_latest .pf-thumb{ display:block; position:relative; }
.pf_latest .pf-thumb img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.pf_latest .pf-thumb .no_imgbox{ width:100%; aspect-ratio:3/4; background:#161416; display:flex; align-items:center; justify-content:center; }
.pf_latest .pf-thumb .no_imgbox img{ width:60%; aspect-ratio:auto; opacity:.4; }

/* 오버레이 */
.pf_latest .pf-overlay{
    position:absolute; left:0; right:0; bottom:0; padding:2.2em 1.6em 1.6em;
    display:flex; flex-direction:column; gap:.55em;
    font-family:'Presentation', sans-serif;
    background:linear-gradient(to top, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 35%, rgba(0,0,0,.55) 70%, rgba(0,0,0,0) 100%);
    opacity:0; transform:translateY(12px); transition:all .4s ease;
}
.pf_latest .pf-card:hover .pf-overlay{ opacity:1; transform:translateY(0); }
.pf_latest .pf-cate{
    font-family:'Presentation', sans-serif;
    font-size:.95em; font-weight:600; color:#fff; opacity:.7; font-style:normal;
    letter-spacing:.02em; text-transform:uppercase;
}
.pf_latest .pf-tit{
    font-family:'Presentation', sans-serif;
    font-size:1.45em; font-weight:700; line-height:1.35; color:#fff;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pf_latest .pf-tit strong{ font-weight:700; }

/* 여분필드 메타 (수행기간 / 총괄연출 / 불꽃디자인) */
.pf_latest .pf-meta{
    display:flex; flex-direction:column; gap:.3em;
    margin-top:.4em; padding-top:.7em;
    border-top:1px solid rgba(255,255,255,.18);
    font-family:'Presentation', sans-serif;
}
.pf_latest .pf-meta-row{
    display:flex; align-items:flex-start; gap:.6em;
    font-size:.9em; line-height:1.4; color:#fff;
}
.pf_latest .pf-meta-row b{
    flex:0 0 auto; min-width:4.6em;
    color:#a99bff; font-weight:600; opacity:.95;
}
.pf_latest .pf-meta-row i{
    font-style:normal; color:#fff; opacity:.92; min-width:0;
}

/* 빈 목록 */
.pf_latest .pf_empty{
    width:100%; text-align:center; padding:4em 0; color:var(--pf-sub);
    background:var(--pf-card); border-radius:8px;
}

/* ---------- 좌우 화살표 (4개 초과 시에만 마크업 출력됨) ---------- */
.pf_latest .pf_nav{
    position:absolute; top:50%; transform:translateY(-50%); z-index:10;
    width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
    background:rgba(18,17,19,.8); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    transition:background .25s ease, opacity .25s ease, transform .25s ease;
}
.pf_latest .pf_nav:hover{ background:var(--pf-point); }
.pf_latest .pf_prev{ left:-24px; }
.pf_latest .pf_next{ right:-24px; }
/* 화살표 아이콘 (SVG mask, 흰색) */
.pf_latest .pf_nav::before{
    content:""; width:18px; height:18px; background:#fff;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4-4.6-4.6z'/%3E%3C/svg%3E") no-repeat center/contain;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M15.4 7.4 14 6l-6 6 6 6 1.4-1.4-4.6-4.6z'/%3E%3C/svg%3E") no-repeat center/contain;
}
.pf_latest .pf_next::before{ transform:rotate(180deg); }
/* Swiper 가 끝에서 비활성화한 버튼 */
.pf_latest .pf_nav.swiper-button-disabled{ opacity:.35; cursor:default; }
.pf_latest .pf_nav.swiper-button-lock{ display:none; }

/* 반응형 */
@media (max-width:1024px){
    .pf_latest .pf_prev{ left:-24px; }
    .pf_latest .pf_next{ right:-24px; }
}
@media (max-width:768px){
    .pf_latest .pf-tit{ font-size:1.2em; }
    .pf_latest .pf-meta-row{ font-size:.82em; }
    .pf_latest .pf-meta-row b{ min-width:4.2em; }
    .pf_latest .pf_nav{ width:40px; height:40px; }
}