/* program-banner-section */
.program-banner-section {
    margin-top: clamp(30px, 10vw, 81px);
    transition: margin-top 0.3 ease;
}



/* 여백 초기화 */
.custom-pg-wrap {
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767.98px) {
    .custom-pg-wrap {
        margin-top: 20px;
    }
}


/*

    메뉴 /program/의 처음 6개 배너 처리 부분
    첫줄 3개의 배너 좌,우 양측 여백을 없애주는 부분
    부트스트랩으로만 할 경우 좌,우 여백 처리가 잘 안되서
    css flex로 처리함

    flex: <flex-grow> <flex-shrink> <flex-basis>;

    첫 번째 값 (flex-grow)
    남는 공간이 있을 때 이 요소가 얼마나 비율로 늘어날지.

    0이면 절대 안 늘어남.
    1이면 남는 공간을 균등하게 나눠 차지.

    두 번째 값 (flex-shrink)
    공간이 부족할 때 이 요소가 얼마나 줄어들 수 있는지.
    0이면 절대 안 줄어듦.
    1 이상이면 줄어들 수 있음.

    세 번째 값 (flex-basis)
    기본 크기(기준 크기).
    auto, px, %, calc() 등으로 설정 가능.
    width 대신 flexbox에서의 기본 폭이라고 보면 됨.    

*/
:root { --pg-gap: 16px; }

.custom-pg-wrap {
    gap: var(--pg-gap);
    display: flex;
    flex-wrap: wrap;
}

.custom-pg-wrap > div {
    flex: 0 0 calc(100%); /* 모바일 1칸 */
}

@media (min-width: 768px) {
    .custom-pg-wrap > div { 
        flex: 0 0 calc((100% - 2*var(--pg-gap)) / 3); 
    }
}

.program-banner img {
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .program-banner img:hover {
        _transform: scale(1.03);
    }
}

/* 각 배너 속성 (글자 크기,색깔 등) */
.program-banner p {
    font-size: 19px;
    color: #333;
    margin: 0 0 4px 0;    
}

.program-banner-section .row1 {
    padding-bottom: 68px;
}

@media (max-width: 767.98px) {
    .program-banner-section .row1 {
        padding-bottom: 0;
        margin-bottom: -3px;
    }
}






/* slide banner */
.latest-vod-section {
    margin-top: clamp(55px, 10vw, 114px);
    transition: margin-top 0.3 ease;        
}

.swiper {
    padding: 10px 0;
}

.swiper-slide {
    width: auto; /* 슬라이드 수동 지정 */
}

.slide-card {
    max-width: 350px;          /* 슬라이드 가로 크기 */
    height: auto;         /* 슬라이드 세로 크기 */
    position: relative;
    _overflow: hidden;
}

.slide-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease; /* 부드러운 전환 */
}


@media (min-width: 768px) {
    .swiper-slide:hover .slide-image {
        _transform: scale(1.05); /* 살짝 확대 (5%) */
    }
}


.banner-title {
    color: #333;
    font-weight: 700;
    padding: 6px 5px 6px 0;
    font-size: 18px;
}

@media (max-width: 767.98px) {
    .banner-title {
        color: #333;
        font-weight: 700;
        padding: 6px 5px 6px 0;
        font-size: 15px;
        line-height: 18px;
    }
}




/* slide photo */

.photo-section {
    margin-top: clamp(55px, 10vw, 114px);
    transition: margin-top 0.3 ease;        
}

.slide-photo-card {
    max-width: 450px;          /* 슬라이드 가로 크기 */
    height: auto;         /* 슬라이드 세로 크기 */
    position: relative;
    _overflow: hidden;
}




/*
    Bottom 여백
*/

.m-bottom {
    display: block;
     margin-bottom: 164px;
 }

@media (max-width: 767.98px) {
    .m-bottom {
        display: block;
        margin-bottom: 100px;
    }
}



/*
    게시판 보기
*/
/*
    Top 페이지 제목
*/
.category-bbs-title {
    color: #3B3F48;
    font-size: 23px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 20px;
    background-color: transparent;
    padding: 0px 15px 10px 2px;
    margin: 79px 0 0px 0; 
    border-bottom: 2px solid #3B3F48;
    width: 100%;    
}

/* 모바일: 전체 너비, 회색 배경, 흰색 또는 진한 텍스트 */
@media (max-width: 767.98px) {
    .category-bbs-title {
        display: block;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin: 0;
        background-color: #EBEEF3;
        color: #535A5E;
        font-size: 16px;
        padding: 10px 15px 10px 15px;
        border-bottom: 0;
    }
}


/*
    게시판 보기
*/
#bbs-note {
    display: block;               /* span을 block처럼 */
    white-space: normal;          /* 줄바꿈 허용 */
    word-break: break-word;       /* 긴 단어가 있으면 강제로 줄바꿈 */
    overflow-wrap: break-word;    /* 최신 브라우저용 */
}