/* ==========================================================================
   그누보드 최신글 스킨 - 상품/리뷰 슬라이더 CSS (화살표 정밀 보정 버전)
   ========================================================================== */

#product-slider {
    max-width: 1410px;
    margin: 20px auto;
    position: relative;
    box-sizing: border-box;
}

.splide__slide {
    display: block;
    padding: 15px 0;
    box-sizing: border-box;
}

.product_card {
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
}

.product_image_layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.product_link_overlay {
    display: block;
    width: 100%;
    height: 100%;
}

.product_text_layer {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 20px 30px 20px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.8) 55%, rgba(255, 255, 255, 0.0) 100%);
    text-align: center;
    box-sizing: border-box;
    font-size: 14px;
	
}

.product_title {
    padding: 0;
    margin: 0 0 12px 0;
    display: block;
}

.product_title a {
    color: #0066ff;
    font-size: 26px;
    font-weight: bold;
    text-decoration: none;
    word-break: keep-all;
    letter-spacing: -1px;
}

.product_desc_box {
    position: relative;
    border: 0;
    padding: 0;
}

.product_desc {
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

.product_desc a {
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    word-break: keep-all;
}





.product_arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    z-index: 10;
    cursor: pointer;
    
    /* 세로 영역 및 가로 터치 영역 선언 */
    width: 90px;
    height: 100px;            /* 세로 크기 100px 지정 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 화살표 외부 여백 위치 */
.product_prev { left: -80px; }
.product_next { right: -80px; }

.product_arrow_circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    transition: all 0.2s ease;
}

/* 내부 SVG 기호 - 높이를 100px 컨테이너에 맞춰 꽉 채우거나 길게 뽑아냄 */
.product_arrow_circle svg {
    width: 100%;
    height: 100%;             /* 부모인 100px 크기를 꽉 채워 위아래로 길게 늘림 */
    transition: all 0.2s ease;
}

/* 얇고 정밀한 선 매칭 스타일 */
.product_arrow_circle svg path {
    stroke: #555555 !important; 
    stroke-width: 0.5px !important; 
}

/* 호버 인터랙션 효과 */
.product_arrow_circle:hover svg path {
    stroke: #111111 !important; /* 마우스 호버 시 선명하게 강조 */
}

/* --------------------------------------------------------------------------
   반응형 모바일 미디어 쿼리 (화면 축소 대응)
   ========================================================================== */
@media (max-width: 768px) {
    #product-slider { padding: 0 35px; }
    .product_arrow {
        height: 60px;         /* 모바일에서는 너무 길지 않게 60px로 밸런스 조정 */
        width: 25px;
    }
    .product_prev { left: 5px; }
    .product_next { right: 5px; }
}

.product_controls_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}

.product_playback_buttons {
    text-align: center;
}

.product_playback_buttons button {
    background-color: #ffffff;
    border: 0;
    padding: 0;
    margin: 0 5px;
    cursor: pointer;
}

.splide { position: relative; visibility: hidden; }
.splide.is-initialized, .splide.is-rendered { visibility: visible; }
.splide__container { box-sizing: border-box; position: relative; }
.splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.splide.is-initialized:not(.is-active) .splide__list { display: block; }
.splide__track { overflow: hidden; position: relative; width: 100%; }
.splide__track--draggable { -webkit-touch-callout: none; user-select: none; }