
/* 섹션 바깥 여백 없음: 피그마(1920x1080) 기준으로 타이틀 위 120px 등
   모든 여백이 배경사진 안쪽에 포함된 풀블리드 디자인 (오버뷰(Full)과 동일) */
.product.detail .overview.product_overview_list .banner_list {
    display: grid;
    grid-template-columns: 100%;
}
.product.detail .overview.product_overview_list .bg,
.product.detail .overview.product_overview_list .bg-mo,
.product.detail .overview.product_overview_list .inner_wrap {
    min-width: 0;
    max-width: 100%;
}
.product.detail .overview.product_overview_list .bg,
.product.detail .overview.product_overview_list .bg-mo {
    grid-area: 1 / 1;
}
.product.detail .overview.product_overview_list .bg img,
.product.detail .overview.product_overview_list .bg-mo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product.detail .overview.product_overview_list .bg-mo {
    display: none;
}
.product.detail .overview.product_overview_list .inner_wrap {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 피그마: 타이틀은 배너 상단 120px 아래 시작.
       아래 패딩 150px은 리스트(margin auto 세로 중앙) 중심을
       피그마 위치(배너 높이의 55.9% 지점)로 맞추는 보정값 */
    padding: 12rem 0 15rem;
    pointer-events: none;
}

/* 타이틀/설명 : 오버뷰(Boxed) hgroup과 동일 크기, 중앙 정렬 */
.product.detail .overview.product_overview_list .title_area {
    width: 120rem;
    max-width: 100%;
    margin-bottom: 6rem; 
    text-align: center;
}
.product.detail .overview.product_overview_list .title_area h4 {
    line-height: 1.25;
    font-size: 3.6rem;
    font-weight: 800;
    color: var(--title-color, #fff);
}
.product.detail .overview.product_overview_list .title_area .txt {
    margin-top: 2.4rem;
    line-height: 1.6;
    font-size: 1.8rem;
    color: var(--title-color, #fff);
    opacity: .8;
}

/* 리스트 : 타이틀 아래 남는 공간에서 세로 가운데(등록 개수와 무관), 내부 텍스트는 좌측 정렬 */
.product.detail .overview.product_overview_list .list_area {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    margin-top: auto;
    margin-bottom: auto;
    width: 54rem;
    text-align: left;
}
/* 리스트 위치: 본문 폭(120rem) 좌측/우측 끝에 정렬 */
.product.detail .overview.product_overview_list.left .list_area {
    align-self: flex-start;
    margin-left: calc(50% - 60rem);
}
.product.detail .overview.product_overview_list.right .list_area {
    align-self: flex-end;
    margin-right: calc(50% - 60rem);
}
/* 항목 : 카드슬라이드(아이폰) 카드 타이틀/불릿과 동일 크기 */
.product.detail .overview.product_overview_list .list_area li .title {
    display: block;
    line-height: 1.25;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--list-color, #fff);
}
.product.detail .overview.product_overview_list .list_area li .desc {
    margin-top: 1.6rem;
    line-height: 1.6;
    font-size: 1.8rem;
    color: var(--list-color, #fff);
    opacity: .8;
}

@media (max-width: 1919px) {
    .product.detail .overview.product_overview_list .inner_wrap {
        padding: calc(100vw * (120 / 1919)) 0 calc(100vw * (150 / 1919));
    }
    .product.detail .overview.product_overview_list .title_area {
        width: calc(100vw * (1200 / 1919));
        margin-bottom: calc(100vw * (60 / 1919));
    }

    .product.detail .overview.product_overview_list .title_area h4 {
        font-size: max(calc(100vw * (36 / 1919)), 22px);
    }
    .product.detail .overview.product_overview_list .title_area .txt {
        margin-top: calc(100vw * (24 / 1919));
        font-size: max(calc(100vw * (18 / 1919)), 13px);
    }
    .product.detail .overview.product_overview_list .list_area {
        gap: max(calc(100vw * (60 / 1919)), 28px);
        width: max(calc(100vw * (540 / 1919)), 280px);
    }
    .product.detail .overview.product_overview_list.left .list_area {
        margin-left: calc(50% - calc(100vw * (600 / 1919)));
    }
    .product.detail .overview.product_overview_list.right .list_area {
        margin-right: calc(50% - calc(100vw * (600 / 1919)));
    }
    .product.detail .overview.product_overview_list .list_area li .title {
        font-size: max(calc(100vw * (24 / 1919)), 15px);
    }
    .product.detail .overview.product_overview_list .list_area li .desc {
        margin-top: max(calc(100vw * (16 / 1919)), 10px);
        font-size: max(calc(100vw * (18 / 1919)), 13px);
    }
}

@media (max-width: 767px) {
    /* 모바일: PC 배경 대신 모바일 배경 노출
       (모바일 사진 미등록 시 767:1200 비율 컨테이너에 PC 사진 가운데 크롭) */
    .product.detail .overview.product_overview_list .bg {
        display: none;
    }
    .product.detail .overview.product_overview_list .bg-mo {
        display: block;
    }
    .product.detail .overview.product_overview_list .inner_wrap {
        padding: calc(100vw * (120 / 767)) calc(100vw * (40 / 767));
    }
    .product.detail .overview.product_overview_list .title_area {
        width: 100%;
        margin-bottom: calc(100vw * (60 / 767));
    }
    .product.detail .overview.product_overview_list .title_area h4 {
        font-size: calc(100vw * (44 / 767));
    }
    .product.detail .overview.product_overview_list .title_area .txt {
        margin-top: calc(100vw * (20 / 767));
        font-size: calc(100vw * (30 / 767));
    }
    /* 모바일: 좌/우 구분 없이 좌측 배치 */
    .product.detail .overview.product_overview_list.left .list_area,
    .product.detail .overview.product_overview_list.right .list_area {
        align-self: flex-start;
        margin-left: 0;
        margin-right: 0;
        gap: calc(100vw * (50 / 767));
        width: calc(100vw * (590 / 767));
    }
    .product.detail .overview.product_overview_list .list_area li .title {
        font-size: calc(100vw * (36 / 767));
    }
    .product.detail .overview.product_overview_list .list_area li .desc {
        margin-top: calc(100vw * (24 / 767));
        font-size: calc(100vw * (28 / 767));
    }
}
