/* 아래 css 는 s_navi 영역 */

    /* ===== 네비 전체 ===== */
    .s_navi{
        width:100%;
        background:#0D0D0F !important;
        overflow:hidden;

        /* 추가 */
        border-bottom:none !important;
        box-shadow:none !important;
    }

    /* article */
    .s_navi article{
        width:1200px !important;
        max-width:1200px !important;

        /* 기존 중앙 정렬 유지 */
        margin:0 auto !important;

        /* 왼쪽으로 이동 */
        position:relative;

        padding:0 !important;

        /* 추가 */
        border-bottom:none !important;
        box-shadow:none !important;
    }

    /* wrap */
    .s_navi .wrap{
        width:100%;
        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        justify-content:flex-start !important;

        /* 추가 */
        border-bottom:none !important;
        box-shadow:none !important;
    }
    /* UL 완전 초기화 */
    .s_navi .wrap > ul{
        display:flex !important;

        flex-direction:row !important;
        flex-wrap:nowrap !important;

        justify-content:flex-start !important;
        align-items:stretch !important;

        gap:0 !important;

        /* width:auto !important; */  /* 메뉴 갯수 최대 5개, 1개 메뉴당 폭 고정 */
        width:100% !important;
        max-width:none !important;

        margin-left:0 !important;
        margin-right:auto !important;
        padding:0 !important;

        list-style:none !important;

        overflow:visible !important;

        /* 추가 */
        border-bottom:none !important;
        box-shadow:none !important;
    }

    /* LI 완전 초기화 */
    .s_navi .wrap > ul > li{
        all:unset;

        display:block !important;

        /*
        flex:0 0 auto !important;
        width:auto !important;
        */

        /* 메뉴 갯수 최대 5개, 1개 메뉴당 폭 고정 > 아래 2줄로 수정 */ 
        flex:0 0 20% !important;
        width:20% !important;

        min-width:0 !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;

        background:#17181d;

        border-right:2px solid #000;

        box-sizing:border-box;
    }

    .s_navi .wrap > ul:has(> li:nth-child(5):last-child) > li{
        flex:0 0 20% !important;
        width:20% !important;
    }


    /* 마지막 */
    .s_navi .wrap > ul > li:last-child{
        border-right:none;
    }

    /* 링크 */
    .s_navi .wrap > ul > li > a{
        display:flex !important;

        align-items:center;
        justify-content:center;

        height:58px !important;

        /*
        padding:0 70px !important;
        */
        padding:0 10px !important;
        width:100%;


        margin:0 !important;

        color:#fff !important;
        text-decoration:none !important;

        white-space:nowrap;

        font-size:16px;
        font-weight:500;

        background:#17181d;

        box-sizing:border-box;

        transition:.2s;

        /* 추가 */
        border-bottom:none !important;
        box-shadow:none !important;
    }

    /* 활성 */
    .s_navi .wrap > ul > li > a.active{
        background:linear-gradient(to bottom,#ff4338,#e03127);
        font-weight:700;
    }

    /* hover */
    .s_navi .wrap > ul > li > a:hover:not(.active){
        background:#25262b;
    }

    
    /* =========================
    모바일 대응
    ========================= */
    @media (max-width: 768px){

        /* 네비 전체 */
        .s_navi{
            overflow-x:auto !important;
            overflow-y:hidden !important;

            -webkit-overflow-scrolling:touch;

            /* 스크롤바 숨김 */
            scrollbar-width:none;
        }

        .s_navi::-webkit-scrollbar{
            display:none;
        }

        /* article 이동값 제거 */
        .s_navi article{
            width:max-content !important;
            max-width:none !important;

            left:0 !important;
            margin:0 !important;
        }

        /* wrap */
        .s_navi .wrap{
            width:max-content !important;
        }

        /* ul */
        .s_navi .wrap > ul{
            flex-wrap:nowrap !important;
            width:max-content !important;
            min-width:100%;
        }

        /* 메뉴 크기 축소 */
        .s_navi .wrap > ul > li > a{

            height:50px !important;

            padding:0 28px !important;

            font-size:14px !important;
        }
    }


    /* 아래 css 는 게시판이름 - 검색 게시판 SUB 카테고리 영역 */ 

    .mookhon-board-container {
        border-top: 0px solid #000000; /* 10px 두께의 검정색 띠 */
        margin-top: 0; /* s_navi와 딱 붙게 설정 */
        
        /* 기존 스타일 유지 */
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        width: 92%;
        background-color: #ffffff;
    }

    /* 1. 헤더 영역: 1120px 안에서만 선이 생기도록 설정 */
    .board-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        
        /* 핵심: 너비를 고정하고 가운데로 모음 */
        width: 1120px !important; 
        max-width: 1120px;
        margin: 0 auto !important; 
        
        /* 양 끝 3px 여백 및 하단 여백 */
        padding: 30px 3px 15px 3px !important; 
        
        background-color: transparent;
        /* 이 선이 1120px 영역에만 그려집니다 */
        border-bottom: 2px solid #363853 !important; 
        box-sizing: border-box;
    }

    /* 2. 게시판 본문 영역: 헤더와 동일한 너비로 정렬 */
    .board-main-content {
        width: 1120px !important;
        max-width: 1120px;
        margin: 0 auto !important;
        background-color: #ffffff;
        border-top: none !important; /* 위에서 선을 그었으므로 중복 제거 */
        padding-bottom: 40px;
        box-shadow: none !important; /* 그림자 제거 */
    }

    /* 3. 타이틀 폰트 높이 최적화 */
    /*
    .board-title {
        font-size: 28px;
        font-weight: 500;
        color: #363853;
        margin: 0;
        line-height: 1;
    }
    */
    
    /* 4. 카테고리 탭(전체, 잡담 등) 여백 맞춤 */
    .board-tabs {
        display: flex;
        list-style: none;
        padding: 20px 3px !important; /* 왼쪽 3px 여백에 수직 정렬 */
        margin: 0;
    }


    /* =========================
    모바일
    ========================= */
    /* =========================================
    1200 이하
    ========================================= */
    @media (max-width:1200px){

        .mookhon-board-container{
            width:100% !important;
        }

        .board-header{
            width:100% !important;
            max-width:100% !important;

            padding:30px 20px 15px !important;

            box-sizing:border-box;
        }

        .board-main-content{
            width:100% !important;
            max-width:100% !important;

            padding:0 20px 40px !important;

            box-sizing:border-box;
        }
    }

    /* =========================================
    900 이하
    ========================================= */
    @media (max-width:900px){

        .board-header{
            flex-direction:column !important;

            align-items:flex-start !important;

            gap:15px;
        }

        /* 검색영역 */
        .board-search,
        .search-wrap,
        .search-area{
            width:100% !important;
            max-width:100% !important;
        }

        /* 검색 폼 */
        .board-search form,
        .search-wrap form,
        .search-area form{
            width:100% !important;

            display:flex !important;

            gap:8px;
        }

        /* select */
        .board-search select,
        .search-wrap select,
        .search-area select{
            flex:0 0 110px;
            min-width:0;
        }

        /* input */
        .board-search input,
        .search-wrap input,
        .search-area input{
            flex:1 1 auto;

            width:auto !important;

            min-width:0 !important;

            box-sizing:border-box;
        }

        /* 검색 버튼 */
        .board-search button,
        .search-wrap button,
        .search-area button{
            flex:0 0 auto;
        }
    }

    /* =========================================
    모바일
    ========================================= */
    @media (max-width:768px){

        .board-header{
            padding:20px 15px 12px !important;
        }

        .board-main-content{
            padding:0 15px 30px !important;
        }

        .board-title{
            font-size:22px !important;
        }

        .board-tabs{
            overflow-x:auto;

            flex-wrap:nowrap;

            white-space:nowrap;

            scrollbar-width:none;

            -webkit-overflow-scrolling:touch;
        }

        .board-tabs::-webkit-scrollbar{
            display:none;
        }

        .board-search form,
        .search-wrap form,
        .search-area form{
            flex-wrap:wrap;
        }

        .board-search select,
        .search-wrap select,
        .search-area select{
            width:100% !important;
            flex:none;
        }

        .board-search input,
        .search-wrap input,
        .search-area input{
            width:100% !important;
            flex:none;
        }

        .board-search button,
        .search-wrap button,
        .search-area button{
            width:100%;
        }
    }

    /* naribi 260513 add > board_list 영역 margin, padding 제거 */
    .board-list{
        margin:0 !important;
        padding:0 !important;

        list-style:none !important;
    }

    /* naribi 260513 add > board_tab 영역은 15px 띄우고 시작 */
    .board-tabs{
        margin:0 !important;

        padding:20px 0 20px 15px !important;

        list-style:none !important;

        box-sizing:border-box;
    }


@media screen and (max-width: 870px) {
    /* 1. 최상위 박스: 가로폭은 화면에 고정하고, 넘치는 메뉴는 스크롤이 되도록 설정 */
    .s_navi {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        background: #0D0D0F !important;
        
        /* ⭐ 핵심: 부모 박스가 같이 늘어나지 않게 가로 스크롤을 여기에 직접 부여 */
        overflow-x: auto !important; 
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch; /* 모바일 부드러운 스크롤 */

        /* 브라우저별 기본 스크롤바 디자인은 숨김 */
        -ms-overflow-style: none !important;         
        scrollbar-width: none !important;  
    }

    /* 크롬, 사파리, 엣지용 스크롤바 숨김 */
    .s_navi::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. 내부 박스들: 메뉴가 늘어난 만큼 우측 끝까지 검은색 배경이 늘어나도록 max-content 적용 */
    .s_navi article,
    .s_navi .wrap {
        width: max-content !important; 
        min-width: 100% !important;
        background: #0D0D0F !important; 
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. 메뉴 리스트 확장 및 스크롤 간섭 제거 */
    .s_navi .wrap > ul {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        border: none !important;
        overflow: visible !important; /* 스크롤 기능은 최상위 .s_navi가 담당하므로 여기선 visible 처리 */
    }

    /* 4. 원래 있던 메뉴 아이템(li)의 간격 및 구조 (2px 검정 공백) */
    .s_navi .wrap > ul > li {
        display: block !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: none !important;
        
        margin: 0 !important;
        margin-right: 2px !important; 
        padding: 0 !important;
    }

    /* 마지막 메뉴 뒤 공백 리셋 */
    .s_navi .wrap > ul > li:last-child {
        margin-right: 0 !important;
    }
}