/* gallery / skin_2 — 슬라이드형 */

.section-gallery-skin-2 {
    width: 100%;
    box-sizing: border-box;
}

.section-gallery-skin-2 .section-gallery__inner {
    max-width: var(--inner-width);
    margin: 0 auto;
   
    box-sizing: border-box;
    position: relative;
}

.section-gallery-skin-2 .section-gallery__title {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
}

.section-gallery-skin-2 .section-gallery__desc {
    margin: 0;
    line-height: 1.6;
    word-break: keep-all;
}

/* 슬라이드는 그리드와 동일 너비(inner 풀폭) — 화살표는 콘텐츠 박스 바깥(좌우)으로 빼냄 */
.section-gallery-skin-2 .section-gallery-s2__nav-wrap {
    position: relative;
    padding: 0;
}

.section-gallery-skin-2 .section-gallery-s2__swiper {
    width: 100%;
    overflow: hidden;
}

.section-gallery-skin-2 .section-gallery__slide {
    height: auto;
    min-width: 0;
}

/* ── Swiper 필수 레이아웃 자체 정의 ──────────────────────────────
   빌더 미리보기 등에서 swiper-bundle.css가 로드되지 않으면 .swiper-wrapper(flex)·
   .swiper-slide 기본 레이아웃이 사라져 슬라이드 폭/위치가 틀어진다.
   그 핵심 규칙만 스코프 내에 복제해 로드 여부와 무관하게 레이아웃을 보장한다.
   (실제 페이지의 swiper-bundle.css와 동일 규칙이라 충돌·중복 영향 없음) */
.section-gallery-skin-2 .swiper {
    position: relative;
    overflow: hidden;
}
.section-gallery-skin-2 .swiper-wrapper {
    position: relative;
    display: flex;
    box-sizing: content-box;
}
.section-gallery-skin-2 .swiper-slide {
    flex-shrink: 0;
    position: relative;
}
/* Swiper JS가 아직(또는 끝내) 초기화되지 않은 상태(빌더/사이트 미리보기 등):
   · 슬라이드 폭은 render.php 스코프 스타일에서 "칸 폭"(컬럼 수 기준)으로 지정 →
     실제 사이트의 그리드와 동일하게 보임 (Swiper 미로드여도 안 틀어짐)
   · 항목이 적으면 가운데 정렬 → 한두 장일 때 왼쪽에 치우쳐 보이는 문제 방지
   초기화되면 :not(.swiper-initialized)가 풀려 Swiper가 폭/정렬을 직접 제어한다. */
.section-gallery-skin-2 .section-gallery-s2__swiper:not(.swiper-initialized) .swiper-wrapper {
    justify-content: center;
}

/* 트리거 공통 */
.section-gallery-skin-2 .section-gallery__item-link {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: inherit;
    text-decoration: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.section-gallery-skin-2 div.section-gallery__item-link {
    cursor: default;
}

/* 미디어 */
.section-gallery-skin-2 .section-gallery__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f4f4f5;
}

.section-gallery-skin-2 .section-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.section-gallery-skin-2 .section-gallery__item-link:hover .section-gallery__img {
    transform: scale(1.06);
}

.section-gallery-skin-2 .section-gallery__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4c4c8;
}

.section-gallery-skin-2 .section-gallery__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.2s, transform 0.2s;
}
.section-gallery-skin-2 .section-gallery__play svg { margin-left: 3px; }
.section-gallery-skin-2 .section-gallery__item-link:hover .section-gallery__play {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

.section-gallery-skin-2 .section-gallery__item-title {
    margin: 0;
    line-height: 1.4;
    word-break: keep-all;
}

/* swiper pagination/navigation */
.section-gallery-skin-2 .section-gallery-s2__pagination {
    position: relative;
    margin-top: 20px;
    text-align: center;
}

.section-gallery-skin-2 .swiper {
    /* navigation 버튼이 잘리지 않게 좌우 약간 패딩 */
    position: relative;
}

.section-gallery-skin-2 .section-gallery-s2__prev,
.section-gallery-skin-2 .section-gallery-s2__next {
    /* nav-wrap 좌우 끝에 위치 — 슬라이드 영역과 겹치지 않음
       디자인은 board/gallery 모달의 화살표와 동일 통일 (44px 원형, 어두운 반투명 + 흰 글리프) */
    position: absolute !important;
    top: 50% !important;
    --swiper-navigation-size: 16px;
    width: 44px !important;
    height: 44px !important;
    margin-top: -22px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    color: #fff;
    z-index: 10;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
    cursor: pointer;
    overflow: hidden;
}
.section-gallery-skin-2 .section-gallery-s2__prev:hover,
.section-gallery-skin-2 .section-gallery-s2__next:hover {
    background: rgba(0, 0, 0, 0.65) !important;
}
/* PC (>=1320px): 화살표를 콘텐츠 박스 바깥에 위치 — 슬라이드 영역은 그리드와 동일 풀폭 */
.section-gallery-skin-2 .section-gallery-s2__prev {
    left: -56px !important;
    right: auto !important;
}
.section-gallery-skin-2 .section-gallery-s2__next {
    right: -56px !important;
    left: auto !important;
}

/* 중간 화면 (768~1320px): 화살표가 viewport를 넘지 않도록 안쪽으로 살짝 들임 */
@media (max-width: 1320px) and (min-width: 768px) {
    .section-gallery-skin-2 .section-gallery-s2__prev {
        left: 8px !important;
    }
    .section-gallery-skin-2 .section-gallery-s2__next {
        right: 8px !important;
    }
}

/* 모바일: 슬라이드 위에 작은 화살표 떠 있음 (사용자 의도상 허용) */
@media (max-width: 767px) {
    .section-gallery-skin-2 .section-gallery-s2__prev {
        left: 8px !important;
    }
    .section-gallery-skin-2 .section-gallery-s2__next {
        right: 8px !important;
    }
}
@media (max-width: 767px) {
    .section-gallery-skin-2 .section-gallery-s2__prev,
    .section-gallery-skin-2 .section-gallery-s2__next {
        width: 38px !important;
        height: 38px !important;
        margin-top: -19px !important;
    }
}
@media (max-width: 480px) {
    .section-gallery-skin-2 .section-gallery-s2__prev,
    .section-gallery-skin-2 .section-gallery-s2__next {
        width: 38px !important;
        height: 38px !important;
        margin-top: -19px !important;
    }
    .section-gallery-skin-2 .section-gallery-s2__prev svg,
    .section-gallery-skin-2 .section-gallery-s2__next svg {
        width: 14px;
        height: 14px;
    }
}
/* swiper 기본 폰트 글리프(::after) 완전 제거 — SVG로 대체 */
.section-gallery-skin-2 .section-gallery-s2__prev::after,
.section-gallery-skin-2 .section-gallery-s2__next::after {
    content: '' !important;
    display: none !important;
    font-size: 0 !important;
}
.section-gallery-skin-2 .section-gallery-s2__prev svg,
.section-gallery-skin-2 .section-gallery-s2__next svg {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill:none
}

.section-gallery-skin-2 .section-gallery-s2__prev.swiper-button-disabled,
.section-gallery-skin-2 .section-gallery-s2__next.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* 페이지네이션 — swiper 컨테이너 밖에 별도 출력되므로 static + 정중앙 정렬 */
.section-gallery-skin-2 .section-gallery-s2__pagination {
    position: static !important;
    bottom: auto !important;
    width: 100%;
    text-align: center;
    line-height: 0;
}
.section-gallery-skin-2 .section-gallery-s2__pagination .swiper-pagination-bullet {
    display: inline-block;
    vertical-align: middle;
}

.section-gallery-skin-2 .section-gallery__empty {
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 14px;
}

@media (max-width: 767px) {

    .section-gallery-skin-2 .section-gallery__play {
        width: 44px;
        height: 44px;
    }
}

/* 분류(category) 배지 — skin_1과 동일 디자인 (색/크기/패딩은 render.php가 주입) */
.section-gallery-skin-2 .section-gallery__cat {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 8px;
    background-color: #f3f4f6;
    color: #374151;
    font-size: 12px;
    border-radius: 4px;
    line-height: 1.4;
}

/* 분류 필터바 — skin_1과 동일 */
.section-gallery-skin-2 .section-gallery__cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.section-gallery-skin-2 .section-gallery__cat-filter-btn {
    border: 0;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
    font: inherit;
    line-height: 1.2;
}
.section-gallery-skin-2 .section-gallery__cat-filter-btn:hover { opacity: 0.75; }
.section-gallery-skin-2 .section-gallery__cat-filter-btn.is-active { opacity: 1; }
.section-gallery-skin-2 .section-gallery__cat-select {
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
    min-width: 120px;
}