/* 1. 최상위 래퍼: 게시판의 고유 너비인 1200px와 중앙 정렬을 명확히 정의 */
.mookhon-board-layout-wrap {
    position: relative;         /* 중요: 우측 뉴스가 이 1200px 틀을 기준으로 절대 좌표를 잡음 */
    max-width: 1200px;          /* 게시판 원본의 실제 최대 가로폭 규격 고정 */
    margin: 0 auto;             /* 화면 정중앙 배치 */
    width: 100%;
    box-sizing: border-box;
}

/* 2. 좌측 게시판 영역: 원본 디자인의 규격, 가로폭, 마진을 100% 원본 그대로 유지 */
.mookhon-board-layout-wrap .mookhon-board-container {
    width: 100% !important;     /* 부모가 1200px를 잡아주므로 안에서 원래대로 꽉 차게 둡니다 */
    max-width: none !important;
    margin: 0 !important;       /* 마진 충돌 방지 */
}

/* 3. 우측 뉴스 영역: 1200px 상자 내부 우측 끝에 '절대 좌표'로 고정 배치 (300x522) */
.side-news-wrapper {
    position: absolute;
    top: 0;                     /* 핵심: 왼쪽 흰색 상자의 시작 라인과 수평을 일치시킴 */
    left: 100%;                 /* 게시판 1200px 상자가 끝나는 우측 선에서 시작 */
    margin-left: 15px;          /* 게시판과의 밀착 간격 (20px) */
    
    width: 300px;
    height: 522px;
    min-width: 300px;
    background: #ffffff;
    /* border: 1px solid #e2e8f0; */  /* 테두리 1px */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 99;                /* 다른 컴포넌트에 묻히지 않게 레이어 우선순위 확보 */
}

/* 4. 뉴스 배너 이미지 박스 규격 및 Swiper 기본 레이아웃 제어 */
.side-news-wrapper .news-thumb-box.news-banner-swiper {
    position: relative;         /* 인디케이터 도트 위치 바인딩용 */
    width: 300px;
    height: 280px;
    background: #111;
    overflow: hidden;           /* 슬라이드가 박스 밖으로 깨져나가는 현상 방지 */
}
.side-news-wrapper .news-banner-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* [추가] Swiper 하단 도트(Pagination) 커스텀 스타일 정의 */
.side-news-wrapper .news-banner-swiper .swiper-pagination {
    bottom: 15px !important;    /* 하단에서 15px 위로 배치 */
    left: 50% !important;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 8px;
    width: auto !important;
}
/* 비활성화 상태 도트 (흰색 원본 형태) */
.side-news-wrapper .news-banner-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #ffffff !important;
    opacity: 0.8;
    margin: 0 !important;
    border-radius: 50%;
    transition: all 0.3s;
}
/* 활성화 상태 도트 (포인트 레드 컬러) */
.side-news-wrapper .news-banner-swiper .swiper-pagination-bullet-active {
    background: #e53e3e !important; 
    opacity: 1;
}

/* 5. 뉴스 텍스트 리스트 영역 */
.side-news-wrapper .news-list-box {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}
.side-news-wrapper .news-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #edf2f7;
    padding-bottom: 8px;
}
.side-news-wrapper .news-list-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1a202c;
    margin: 0;
}
.side-news-wrapper .news-list-header .btn-more {
    font-size: 18px;
    color: #a0aec0;
    text-decoration: none;
}

.side-news-wrapper .news-extract-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.side-news-wrapper .news-extract-list li {
    overflow: hidden;
}
.side-news-wrapper .news-extract-list li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #4a5568;
    font-size: 14px;
}
.side-news-wrapper .news-extract-list li a:hover .news-title {
    color: #000000;
    text-decoration: underline;
}
.side-news-wrapper .news-extract-list .news-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}
.side-news-wrapper .news-extract-list .icon-new {
    margin-left: 5px;
    height: 14px;
    width: auto;
}
.side-news-wrapper .news-extract-list .no-news {
    color: #a0aec0;
    font-size: 13px;
    text-align: center;
    padding-top: 20px;
}

/* 6. 모바일 및 해상도가 협소한 화면 처리 (display: none 처리) */
@media (max-width: 1844px) { 
    .side-news-wrapper {
        display: none !important; /* 모바일/태블릿 환경에서 완전히 숨김 */
    }
}