/* =====================================================
   portfolio_view.css  —  구축사례 상세페이지 전용 스타일
   prefix : pvn__  (portfolio-view-new)
   피그마 기준: 752:1200  (20260428)
===================================================== */

/* ─────────────────────────────────────────────────
   0. CSS 변수
───────────────────────────────────────────────── */
.pvn {
    --pvn-blue     : #2F6BFF;
    --pvn-navy     : #012062;
    --pvn-green    : #00D084;
    --pvn-icon-bg  : #C5E8DC;
    --pvn-black    : #111111;
    --pvn-dark     : #333333;
    --pvn-gray     : #666666;
    --pvn-line     : #E4E7ED;
    --pvn-bg       : #F8F9FB;
    --pvn-radius-lg: 20px;
    --pvn-radius-md: 12px;
    --pvn-radius-pill: 30px;
    --pvn-content-max: 1520px;
    --pvn-px       : 200px;
    --pvn-gap      : 50px;
}

/* ─────────────────────────────────────────────────
   1. 레이아웃 기본
───────────────────────────────────────────────── */
.pvn {
    display: block;
    width: 100%;
    background: #fff;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--pvn-dark);
}

/* 내부 콘텐츠 래퍼 (헤더·갤러리·바디·네비) */
.pvn__inner {
    max-width: var(--pvn-content-max);
    margin: 0 auto;
    padding: 150px var(--pvn-px) 100px;
    display: flex;
    flex-direction: column;
    gap: var(--pvn-gap);
}

/* ─────────────────────────────────────────────────
   2. 스크롤 페이드인
───────────────────────────────────────────────── */
.pvn__fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s ease;
}
.pvn__fade.is-visible {
    opacity: 1;
    transform: none;
}

/* ─────────────────────────────────────────────────
   3. 프로젝트 헤더: 제목 + 메타
───────────────────────────────────────────────── */
.pvn__header {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.pvn__title {
    font-size: 40px;
    font-weight: 700;
    color: var(--pvn-black);
    line-height: 1.25;
    letter-spacing: -0.8px;
    margin: 0;
}

/* 메타 행: Client / Category / Date */
.pvn__meta {
    display: flex;
    align-items: flex-start;
    gap: 100px;
    margin: 0;
    padding: 0;
}

.pvn__meta-group {
    display: flex;
    flex-direction: column;   /* 라벨 위, 값 아래 */
    gap: 10px;
}

.pvn__meta dt {
    font-size: 18px;
    font-weight: 700;
    color: var(--pvn-dark);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pvn__meta dd {
    font-size: 18px;
    font-weight: 500;
    color: var(--pvn-dark);
    margin: 0;
}

/* ─────────────────────────────────────────────────
   4. 갤러리: 메인 이미지 + 우측 썸네일 3장
───────────────────────────────────────────────── */
.pvn__gallery {
    display: flex;
    align-items: stretch;
    gap: 20px;
}

.pvn__gallery-main {
    flex: 1 0 0;
    min-width: 0;
    height: 568px;
    border-radius: var(--pvn-radius-lg);
    overflow: hidden;
    background: #eee;
}
.pvn__gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.pvn__gallery-main img:hover { transform: scale(1.02); }

.pvn__gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
}

.pvn__thumb {
    display: block;
    width: 217px;
    height: 127px;
    border-radius: var(--pvn-radius-lg);
    overflow: hidden;
    background: #eee;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color .25s, box-shadow .25s;
    flex-shrink: 0;
}
.pvn__thumb:hover,
.pvn__thumb.is-active {
    border-color: var(--pvn-green);
    box-shadow: 0 0 0 2px rgba(0,208,132,.2);
}
.pvn__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 비디오 썸네일 */
.pvn__thumb--video { position: relative; }

.pvn__thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.38);
    border-radius: inherit;
    color: #fff;
    pointer-events: none;
}

.pvn__thumb-vempty {
    width: 100%;
    height: 100%;
    background: #1a1a2e;
}

/* 메인 영역 iframe (동영상 재생) */
.pvn__gallery-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ─────────────────────────────────────────────────
   5. 텍스트 본문 (설명 / 핵심포인트 / 구축제품)
───────────────────────────────────────────────── */
.pvn__body {
    display: flex;
    flex-direction: column;
    gap: var(--pvn-gap);
}

/* 공통 섹션 제목 */
.pvn__section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvn-dark);
    line-height: 1.4;
    margin: 0 0 10px;
}

/* 설명 텍스트 */
.pvn__section { display: flex; flex-direction: column; gap: 10px; }

.pvn__desc-summary {
    font-size: 24px;
    font-weight: 700;
    color: var(--pvn-dark);
    line-height: 1.4;
    margin: 0;
}

.pvn__desc-body {
    font-size: 18px;
    font-weight: 400;
    color: var(--pvn-dark);
    line-height: 1.5;
    margin: 0;
}

/* ─────────────────────────────────────────────────
   7. 핵심 포인트 — 가로 행, 원형 아이콘
───────────────────────────────────────────────── */
.pvn__key-points { display: flex; flex-direction: column; gap: 10px; }

.pvn__points-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

.pvn__point-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1;
}

/* 원형 아이콘 배경 */
.pvn__point-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--pvn-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pvn__point-icon svg {
    width: 66px;
    height: 66px;
}

/* 텍스트: 중앙 정렬 */
.pvn__point-texts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.pvn__point-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pvn-dark);
    line-height: 1.4;
    margin: 0;
    text-align: center;
}

.pvn__point-desc {
    font-size: 18px;
    font-weight: 500;
    color: var(--pvn-dark);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

/* 구분선: 수직 선 */
.pvn__point-divider {
    width: 1px;
    height: 160px;
    background: var(--pvn-line);
    flex-shrink: 0;
    align-self: center;
    margin: 0 calc((100% - 3 * 200px) / 4);  /* fallback */
    margin: 0;
}

/* ─────────────────────────────────────────────────
   8. 구축제품 그리드
───────────────────────────────────────────────── */
.pvn__products { display: flex; flex-direction: column; gap: 10px; }

.pvn__prod-grid {
    display: flex;
    gap: 20px;
}

.pvn__prod-item {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pvn__prod-img-wrap {
    height: 241px;
    border-radius: var(--pvn-radius-lg);
    overflow: hidden;
    background: #eee;
    flex-shrink: 0;
}
.pvn__prod-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.pvn__prod-img-wrap:hover img { transform: scale(1.04); }

.pvn__prod-texts {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pvn__prod-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--pvn-dark);
    line-height: 1.4;
    margin: 0;
}

.pvn__prod-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: var(--pvn-dark);
    line-height: 1.5;
    margin: 0;
}

/* ─────────────────────────────────────────────────
   9. Prev / List / Next 네비게이션
───────────────────────────────────────────────── */
.pvn__nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.pvn__nav-divider {
    height: 1px;
    background: var(--pvn-line);
}

.pvn__nav-links {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* ← 피그마: space-between */
    height: 45px;
}

/* PREV / NEXT: 테두리 없음, 텍스트+아이콘만 */
.pvn__nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pvn-navy);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity .2s;
    text-transform: uppercase;
    white-space: nowrap;
}
.pvn__nav-btn:hover { opacity: .7; text-decoration: none; }
.pvn__nav-btn svg { flex-shrink: 0; }

/* LIST 버튼만 테두리 pill */
.pvn__nav-list {
    border: 1px solid var(--pvn-navy);
    border-radius: var(--pvn-radius-pill);
    padding: 10px 20px;
    gap: 10px;
    transition: background .25s, color .25s;
}
.pvn__nav-list:hover {
    background: var(--pvn-navy);
    color: #fff;
    opacity: 1;
}

.pvn__nav-disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────
   11. PC 좌우 패딩 — GNB 여백 기준
   1201~1624px : GNB와 동일한 50px
   1625px 이상  : 0 (max-width 1520px 컨테이너 활용)
───────────────────────────────────────────────── */
@media (min-width: 1201px) and (max-width: 1624px) {
    .pvn__inner {
        padding-left: 50px;
        padding-right: 50px;
    }
}
@media (min-width: 1625px) {
    .pvn__inner {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ─────────────────────────────────────────────────
   13. 반응형 — 1400px
───────────────────────────────────────────────── */
@media (max-width: 1400px) {
    .pvn {
        --pvn-px: 100px;
    }
}

/* ─────────────────────────────────────────────────
   14. 반응형 — 1200px (태블릿 PC)
───────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .pvn {
        --pvn-px: 60px;
        --pvn-gap: 40px;
    }

    .pvn__inner { padding: 120px var(--pvn-px) 80px; }

    .pvn__title { font-size: 34px; }

    .pvn__meta { gap: 60px; }

    .pvn__gallery-main { height: 444px; }
    .pvn__thumb { width: 160px; height: 96px; }

}

/* ─────────────────────────────────────────────────
   15. 반응형 — 960px (태블릿)
───────────────────────────────────────────────── */
@media (max-width: 960px) {
    .pvn {
        --pvn-px: 40px;
        --pvn-gap: 36px;
    }

    .pvn__inner { padding: 90px var(--pvn-px) 60px; }

    .pvn__title { font-size: 28px; }

    .pvn__meta { gap: 40px; }
    .pvn__meta dt,
    .pvn__meta dd { font-size: 16px; }

    /* 갤러리: 세로 전환 */
    .pvn__gallery { flex-direction: column; }
    .pvn__gallery-main { flex: none; width: 100%; height: auto; aspect-ratio: 16/9; }
    .pvn__gallery-thumbs { flex-direction: row; }
    .pvn__thumb { width: auto; height: 80px; flex: 1; }

    /* 핵심포인트 */
    .pvn__points-grid { gap: 30px; }

    /* 구축제품: 2열 */
    .pvn__prod-grid { flex-wrap: wrap; }
    .pvn__prod-item { flex-basis: calc(50% - 10px); }
    .pvn__prod-img-wrap { height: 180px; }

}

/* ─────────────────────────────────────────────────
   16. 반응형 — 768px (모바일)
───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pvn {
        --pvn-px: 24px;
        --pvn-gap: 32px;
    }

    .pvn__inner { padding: 72px var(--pvn-px) 48px; }

    .pvn__title { font-size: 24px; letter-spacing: -.4px; }

    .pvn__meta { flex-wrap: wrap; gap: 16px 32px; justify-content: flex-start; }
    .pvn__meta dt,
    .pvn__meta dd { font-size: 14px; }

    /* 핵심포인트 세로 전환 */
    .pvn__points-grid { flex-direction: column; align-items: center; gap: 32px; }
    .pvn__point-divider { width: 120px; height: 1px; }

    /* 구축제품 1열 */
    .pvn__prod-item { flex-basis: 100%; }
    .pvn__prod-img-wrap { height: 220px; }

    /* 구축제품 텍스트 */
    .pvn__desc-summary,
    .pvn__section-title { font-size: 20px; }
    .pvn__desc-body,
    .pvn__point-title,
    .pvn__point-desc,
    .pvn__prod-title,
    .pvn__prod-subtitle { font-size: 15px; }

    /* 네비 */
    .pvn__nav-btn { font-size: 15px; }
    .pvn__nav-list { padding: 8px 16px; }

}

/* ─────────────────────────────────────────────────
   17. 반응형 — 480px (소형 모바일)
───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .pvn { --pvn-px: 16px; }

    .pvn__title { font-size: 22px; }

    .pvn__gallery-thumbs { gap: 8px; }
    .pvn__thumb { height: 60px; }

    .pvn__prod-img-wrap { height: 180px; }

    .pvn__nav-links { gap: 8px; }
    .pvn__nav-btn { font-size: 14px; gap: 6px; }
}