/* 미디어슬라이드 - product_media_slides : 탭 연동 이미지/비디오 슬라이더 */
/* 패딩/타이틀/간격은 product_card_slides 와 동일 기준 */
.product.detail .overview.product_media_slides .type {
    padding: 20rem 0;
    background: #000;
}
.product.detail .overview.product_media_slides .inner {
    max-width: calc(120rem + 16rem);
}
/* 타이틀 (가운데 정렬) - 공통 .overview .type .hgroup 의 width:120rem/margin:auto 덮어쓰기 */
.product.detail .overview.product_media_slides .hgroup {
    width: 100%;
    margin: 0;
    text-align: center;
}
.product.detail .overview.product_media_slides .hgroup h4 {
    line-height: 1.25;
    font-size: 3.6rem;
    font-weight: 800;
    color: #fff;
}

/* 슬라이더: 활성 슬라이드 화면 중앙 정렬, 좌우로 이전/다음 슬라이드가 딤 처리되어 살짝 보임 */
.product.detail .overview.product_media_slides .slide_view {
    position: relative;
    margin-top: 6rem;
}
/* 좌우 풀블리드: 이동 중인 슬라이드가 .inner 패딩에 잘리지 않고 화면 끝까지 보임 (활성 슬라이드는 화면 중앙에 정렬) */
.product.detail .overview.product_media_slides .slide_bleed {
    overflow: hidden;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 40rem);
}
.product.detail .overview.product_media_slides .slide_track {
    display: flex;
    gap: 2rem;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.product.detail .overview.product_media_slides .slide {
    position: relative;
    flex: 0 0 auto;
    width: 80rem;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
}
.product.detail .overview.product_media_slides .slide img,
.product.detail .overview.product_media_slides .slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}
/* 비활성 슬라이드 딤 (클릭하면 해당 슬라이드로 이동) */
.product.detail .overview.product_media_slides .slide .dim {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
.product.detail .overview.product_media_slides .slide:not(.on) {
    cursor: pointer;
}
.product.detail .overview.product_media_slides .slide:not(.on) .dim {
    opacity: 1;
}

/* 화살표 버튼 */
.product.detail .overview.product_media_slides .slide_view button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.6rem;
    height: 3.6rem;
    border: 0; /* common.css 의 button[class^="btn_"] 1px 테두리 제거 */
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    cursor: pointer;
    transition: background .2s;
}
.product.detail .overview.product_media_slides .slide_view button:hover {
    background: rgba(255, 255, 255, .35);
}
.product.detail .overview.product_media_slides .slide_view button[hidden] {
    display: none;
}
/* 활성 슬라이드가 화면 중앙(50%)이므로 버튼도 중앙 기준으로 좌우 대칭 배치 */
/* 활성 슬라이드 바깥(반폭 40rem + 간격 4rem = 44rem)에 위치해 이미지 위에 겹치지 않음 */
.product.detail .overview.product_media_slides .slide_view .btn_prev {
    left: auto;
    right: calc(50% + 44rem);
}
.product.detail .overview.product_media_slides .slide_view .btn_next {
    left: calc(50% + 44rem);
    right: auto;
}
.product.detail .overview.product_media_slides .slide_view button .arrow {
    display: block;
    width: .9rem;
    height: .9rem;
    margin: 0 auto;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateX(-.15rem) rotate(45deg);
}
.product.detail .overview.product_media_slides .slide_view .btn_prev .arrow {
    transform: translateX(.15rem) rotate(-135deg);
}

/* 탭 (알약형) */
.product.detail .overview.product_media_slides .tabs_area {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.product.detail .overview.product_media_slides .tabs_area::-webkit-scrollbar {
    display: none;
}
.product.detail .overview.product_media_slides .pill_tabs {
    display: inline-flex;
    flex: 0 0 auto;
    padding: .3rem;
    border-radius: 10rem;
    background: #131313;
}
.product.detail .overview.product_media_slides .pill_tabs button {
    height: 4.8rem;
    padding: 0 4rem;
    border-radius: 10rem;
    line-height: 1.25;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: background .3s;
}
.product.detail .overview.product_media_slides .pill_tabs button.on {
    background: #f00;
}

/* 설명: 슬라이드와 함께 좌우로 이동 (설명창 폭 67rem 안에서만 슬라이드) */
.product.detail .overview.product_media_slides .descs {
    overflow: hidden;
    max-width: 67rem;
    margin: 3rem auto 0;
}
.product.detail .overview.product_media_slides .descs .desc_track {
    display: flex;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.product.detail .overview.product_media_slides .descs .txt {
    flex: 0 0 100%;
    line-height: 1.6;
    font-size: 1.8rem;
    text-align: center;
    color: #fff;
    opacity: .7;
}

@media (max-width: 1919px) {
    .product.detail .overview.product_media_slides .type {
        padding: calc(100vw * (200 / 1919)) 0;
    }
    .product.detail .overview.product_media_slides .inner {
        max-width: calc(calc(100vw * (1200 / 1919)) + calc(100vw * (160 / 1919)));
    }
    .product.detail .overview.product_media_slides .hgroup h4 {
        font-size: calc(100vw * (36 / 1919));
    }
    .product.detail .overview.product_media_slides .slide_view {
        margin-top: calc(100vw * (60 / 1919));
    }
    .product.detail .overview.product_media_slides .slide_track {
        gap: calc(100vw * (20 / 1919));
    }
    .product.detail .overview.product_media_slides .slide_bleed {
        padding-left: calc(50vw - (100vw * (400 / 1919)));
    }
    .product.detail .overview.product_media_slides .slide {
        width: calc(100vw * (800 / 1919));
    }
    .product.detail .overview.product_media_slides .slide_view button {
        width: calc(100vw * (36 / 1919));
        height: calc(100vw * (36 / 1919));
    }
    .product.detail .overview.product_media_slides .slide_view .btn_prev {
        left: auto;
        right: calc(50% + (100vw * (440 / 1919)));
    }
    .product.detail .overview.product_media_slides .slide_view .btn_next {
        left: calc(50% + (100vw * (440 / 1919)));
        right: auto;
    }
    .product.detail .overview.product_media_slides .slide_view button .arrow {
        width: calc(100vw * (9 / 1919));
        height: calc(100vw * (9 / 1919));
    }
    .product.detail .overview.product_media_slides .tabs_area {
        margin-top: calc(100vw * (40 / 1919));
    }
    .product.detail .overview.product_media_slides .pill_tabs {
        padding: calc(100vw * (3 / 1919));
    }
    .product.detail .overview.product_media_slides .pill_tabs button {
        height: calc(100vw * (48 / 1919));
        padding: 0 calc(100vw * (40 / 1919));
        font-size: calc(100vw * (20 / 1919));
    }
    .product.detail .overview.product_media_slides .descs {
        max-width: calc(100vw * (670 / 1919));
        margin-top: calc(100vw * (30 / 1919));
    }
    .product.detail .overview.product_media_slides .descs .txt {
        font-size: calc(100vw * (18 / 1919));
    }
}
@media (max-width: 1180px) {
    .product.detail .overview.product_media_slides .type {
        padding: calc(100vw * (160 / 1180)) 0;
    }
    /* 1919 구간의 max-width(화면의 ~70%)가 그대로 내려오면 슬라이드가 컨테이너를 넘쳐 버튼이 잘림 → 전체 폭 사용 */
    .product.detail .overview.product_media_slides .inner {
        max-width: 100%;
    }
    .product.detail .overview.product_media_slides .hgroup h4 {
        font-size: calc(100vw * (40 / 1180));
    }
    .product.detail .overview.product_media_slides .slide_view {
        margin-top: calc(100vw * (60 / 1180));
    }
    .product.detail .overview.product_media_slides .slide_track {
        gap: calc(100vw * (16 / 1180));
    }
    .product.detail .overview.product_media_slides .slide_bleed {
        padding-left: calc(50vw - (100vw * (380 / 1180)));
    }
    .product.detail .overview.product_media_slides .slide {
        width: calc(100vw * (760 / 1180));
    }
    .product.detail .overview.product_media_slides .slide_view button {
        width: calc(100vw * (44 / 1180));
        height: calc(100vw * (44 / 1180));
    }
    .product.detail .overview.product_media_slides .slide_view .btn_prev {
        left: auto;
        right: calc(50% + (100vw * (420 / 1180)));
    }
    .product.detail .overview.product_media_slides .slide_view .btn_next {
        left: calc(50% + (100vw * (420 / 1180)));
        right: auto;
    }
    .product.detail .overview.product_media_slides .slide_view button .arrow {
        width: calc(100vw * (11 / 1180));
        height: calc(100vw * (11 / 1180));
    }
    .product.detail .overview.product_media_slides .tabs_area {
        margin-top: calc(100vw * (40 / 1180));
    }
    .product.detail .overview.product_media_slides .pill_tabs {
        padding: calc(100vw * (3 / 1180));
    }
    .product.detail .overview.product_media_slides .pill_tabs button {
        height: calc(100vw * (52 / 1180));
        padding: 0 calc(100vw * (36 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }
    .product.detail .overview.product_media_slides .descs {
        max-width: calc(100vw * (670 / 1180));
        margin-top: calc(100vw * (30 / 1180));
    }
    .product.detail .overview.product_media_slides .descs .txt {
        font-size: calc(100vw * (20 / 1180));
    }
}
@media (max-width: 767px) {
    .product.detail .overview.product_media_slides .type {
        padding: calc(100vw * (160 / 767)) 0;
    }
    .product.detail .overview.product_media_slides .hgroup h4 {
        font-size: calc(100vw * (44 / 767));
    }
    .product.detail .overview.product_media_slides .slide_view {
        margin-top: calc(100vw * (50 / 767));
    }
    .product.detail .overview.product_media_slides .slide_track {
        gap: calc(100vw * (16 / 767));
    }
    /* 모바일: 활성 슬라이드 화면 중앙 + 좌우 슬라이드 살짝 노출 */
    .product.detail .overview.product_media_slides .slide_bleed {
        padding-left: calc(50vw - (100vw * (300 / 767)));
    }
    .product.detail .overview.product_media_slides .slide {
        width: calc(100vw * (600 / 767));
    }
    .product.detail .overview.product_media_slides .slide_view button {
        width: calc(100vw * (56 / 767));
        height: calc(100vw * (56 / 767));
    }
    /* 모바일: 중앙 정렬된 활성 슬라이드 바깥(좌우 peek 영역)에 대칭 배치 */
    .product.detail .overview.product_media_slides .slide_view .btn_prev {
        left: auto;
        right: calc(50% + (100vw * (320 / 767)));
    }
    .product.detail .overview.product_media_slides .slide_view .btn_next {
        left: calc(50% + (100vw * (320 / 767)));
        right: auto;
    }
    .product.detail .overview.product_media_slides .slide_view button .arrow {
        width: calc(100vw * (14 / 767));
        height: calc(100vw * (14 / 767));
    }
    .product.detail .overview.product_media_slides .tabs_area {
        justify-content: flex-start;
        margin-top: calc(100vw * (40 / 767));
    }
    .product.detail .overview.product_media_slides .pill_tabs {
        margin: 0 auto;
        padding: calc(100vw * (4 / 767));
    }
    .product.detail .overview.product_media_slides .pill_tabs button {
        height: calc(100vw * (72 / 767));
        padding: 0 calc(100vw * (40 / 767));
        font-size: calc(100vw * (28 / 767));
    }
    .product.detail .overview.product_media_slides .descs {
        max-width: 100%;
        margin-top: calc(100vw * (30 / 767));
    }
    .product.detail .overview.product_media_slides .descs .txt {
        font-size: calc(100vw * (28 / 767));
    }
}