/* ══════════════════════════════════
   siteLink 위젯 (Swiper 기반)
   ══════════════════════════════════ */

/* ── 컨테이너 ── */
.jdh-sitelink-wrap {
    width: 100%;
    margin: 10px 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

/* ── Swiper: 기본 전체 너비 ── */
.jdh-sitelink-wrap .swiper {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

/* ── has-nav (PC auto): 버튼 공간 확보 ── */
.jdh-sitelink-wrap.has-nav .swiper {
    width: calc(100% - 80px);
    margin: 0 auto;
}

/* ── 슬라이드 아이템 ── */
.jdh-sitelink-wrap .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.jdh-sitelink-wrap .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.jdh-sitelink-wrap .swiper-slide img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: #fff;
}

.jdh-sitelink-wrap .bannertitle {
    text-align: center;
    margin-top: 8px;
    color: #333;
    font-size: 13px;
    display: none;
}

.jdh-sitelink-wrap .noimage {
    background: url('../img/noimage.png') no-repeat center;
}

/* ── 좌우 버튼 ── */
.jdh-sitelink-wrap .swiper-button-prev,
.jdh-sitelink-wrap .swiper-button-next {
    width: 32px;
    height: 44px;
    margin-top: -22px;
    border: 0px solid #ddd;
    border-radius: 5px;
    background: #fff;
    transition: background 0.2s, border-color 0.2s;
}

.jdh-sitelink-wrap .swiper-button-prev::after,
.jdh-sitelink-wrap .swiper-button-next::after {
    font-size: 15px;
    font-weight: bold;
    color: #999;
}

.jdh-sitelink-wrap .swiper-button-prev:hover,
.jdh-sitelink-wrap .swiper-button-next:hover {
    background: #eee;
    border-color: #bbb;
}
.jdh-sitelink-wrap .swiper-button-prev:hover::after,
.jdh-sitelink-wrap .swiper-button-next:hover::after {
    color: #555;
}

.jdh-sitelink-wrap .swiper-button-prev { left: 4px; }
.jdh-sitelink-wrap .swiper-button-next { right: 4px; }

/* PC: 버튼 기본 숨김, has-nav일 때만 표시 */
.jdh-sitelink-wrap .jdh-nav-btn { display: none; }
.jdh-sitelink-wrap.has-nav .jdh-nav-btn { display: flex; }


/* ── 모바일: @media + JS .is-mobile 이중 대응 ── */

/* media query 방식 */
@media screen and (max-width: 768px) {
    .jdh-sitelink-wrap .jdh-nav-btn { display: flex; }
    .jdh-sitelink-wrap .swiper {
        width: calc(100% - 96px) !important;
        margin: 0 auto !important;
    }
    .jdh-sitelink-wrap .swiper-button-prev,
    .jdh-sitelink-wrap .swiper-button-next {
        width: 38px;
        height: 52px;
        margin-top: -26px;
        border: 0px solid #ccc;
        border-radius: 6px;
        background: #fff;
    }
    .jdh-sitelink-wrap .swiper-button-prev::after,
    .jdh-sitelink-wrap .swiper-button-next::after {
        font-size: 13px;
    }
    .jdh-sitelink-wrap .swiper-button-prev:active,
    .jdh-sitelink-wrap .swiper-button-next:active {
        background: #e0e0e0;
        border-color: #aaa;
    }
    .jdh-sitelink-wrap .swiper-button-prev { left: 2px; }
    .jdh-sitelink-wrap .swiper-button-next { right: 2px; }
}

/* JS .is-mobile 클래스 방식 (viewport meta 없는 사이트 대비) */
.jdh-sitelink-wrap.is-mobile .jdh-nav-btn { display: flex; }
.jdh-sitelink-wrap.is-mobile .swiper {
    width: calc(100% - 96px) !important;
    margin: 0 auto !important;
}
.jdh-sitelink-wrap.is-mobile .swiper-button-prev,
.jdh-sitelink-wrap.is-mobile .swiper-button-next {
    width: 38px;
    height: 52px;
    margin-top: -26px;
    border: 0px solid #ccc;
    border-radius: 6px;
    background: #fff;
}
.jdh-sitelink-wrap.is-mobile .swiper-button-prev::after,
.jdh-sitelink-wrap.is-mobile .swiper-button-next::after {
    font-size: 13px;
}
.jdh-sitelink-wrap.is-mobile .swiper-button-prev:active,
.jdh-sitelink-wrap.is-mobile .swiper-button-next:active {
    background: #e0e0e0;
    border-color: #aaa;
}
.jdh-sitelink-wrap.is-mobile .swiper-button-prev { left: 2px; }
.jdh-sitelink-wrap.is-mobile .swiper-button-next { right: 2px; }