/* =========================================
   [공통 및 기존 스타일 유지 영역]
========================================= */
/* 공통 박스 스타일 */
.box {
    display: flex;
/*    align-items: center;
    justify-content: center;*/
    font-weight: bold;
    /*color: #fff;*/
}

/* 아이템별 기본 설정 */
.item-a {
    grid-area: A;
    min-height: 980px; /* 전체 기준을 잡아주는 980px */
    min-width: 0;
    display: block;
    overflow: hidden;
}

.item-a .visualWrap,
.item-a .swiperVisualWrap,
.item-a .swiper-slide {
    width: 100%;
    height: 100%;
}

.item-a .swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.item-b {
    grid-area: B;
    box-sizing: border-box;
    padding: 25px;
    min-width: 0;
    overflow: hidden;
}

/* C와 D (비율 고정 해제, 부모 그리드 크기에 맞춰 꽉 차도록 설정) */
.item-c,
.item-d {
    width: 100%;  
    align-self: stretch; 
   /* display: block;*/
    min-width: 0;
    overflow: hidden;
}

.item-c section,
.item-d section,
.item-c .banner,
.item-d .banner {
    width: 100%;
    height: 100%;
    line-height: 0;
    font-size: 0;
}

.item-c .slick-list,
.item-c .slick-track,
.item-d .slick-list,
.item-d .slick-track,
.item-c .banner-item,
.item-d .banner-item {
    height: 100%;
}

.item-c article a,
.item-d article a {
    display: block;
    width: 100%;
    height: 100%;
}

.item-c img,
.item-d img {
    
    
}

/* =========================================
   [레이아웃 확인용 백그라운드 색상 추가 (C ~ G)]
========================================= */
.item-c { grid-area: C;  } /* 파랑 계열 */
.item-d { grid-area: D; } /* 초록 계열 */
.item-e { grid-area: E;  } /* 빨강 계열 */
.item-f { grid-area: F; background-color: #fff; } /* 보라 계열 */
.item-g { grid-area: G; background-color: #202124; } /* 다크 계열 */

/* =========================================
   1. 데스크탑 PC (기본: 1241px 이상)
   ★ 3단 Grid (A 좌측 / B,D,F 중앙 / C,E,G 우측)
========================================= */
.content-wrapper {
    flex-grow: 1;
    display: grid;
    grid-template-columns: 4fr 3fr 3fr; 
    grid-template-areas:
        "A B C"
        "A D E"
        "A F G"; 
        
    /* ▼ 각 행의 높이를 명시하여 980px을 정확하게 분배 ▼ */
    grid-template-rows: 
        380px  /* 1행 (B, C 영역) */
        340px  /* 2행 (D, E 영역) */
        260px; /* 3행 (F, G 영역) */
        
    gap: 0; 
    width: 100%;
}


/* ... (위쪽에 1. 데스크탑 PC 코드가 있음) ... */

/* =========================================
   추가. 작은 PC (1241px ~ 1480px)
   ★ A영역 상단 100% 배치 / 하단 박스들 2단 Grid
========================================= */
@media screen and (max-width: 1480px) {
    .content-wrapper {
        grid-template-columns: 1fr 1fr; /* 하단 5:5 분할 */
        grid-template-areas:
            "A A"  /* A영역이 100% 가로를 모두 차지 */
            "B C"
            "D E"
            "F G";
        
        /* A는 적절한 높이로 자동(auto), 나머지는 기존 지정 픽셀 유지 */
        grid-template-rows: auto 380px 340px 260px; 
    }

   .item-a {min-height: 352px;  }
}

/* =========================================
   2. 태블릿 (1240px 이하)
... (아래로 기존 태블릿 코드가 이어짐) ... */





/* =========================================
   3. 모바일 (768px 이하)
   ★ 각 박스 100% 세로 스태킹
========================================= */
@media screen and (max-width: 768px) {
    .content-wrapper {
        display: flex;
        flex-direction: column;
    }

    .box {
        display: block;
        width: 100%;
    }

    /* 모바일 환경에 맞게 순서(order) 및 높이 조정 */
    .item-a { order: 1; height: 300px; min-height: 300px; }
    .item-b { order: 2; height: auto; min-height: 200px; }
    .item-c { order: 3; min-height: auto; }
    .item-d { order: 4; }
    .item-e { order: 5; height: auto; min-height: 150px; }
    .item-f { order: 6; min-height: 100px; }
    .item-g { order: 7; min-height: 100px; }
}