/* 페이징 모던 스타일 */
.modern-pagination .pg_wrap { display: flex; gap: 5px; }
.modern-pagination .pg { 
    display: inline-flex; justify-content: center; align-items: center; 
    width: 32px; height: 32px; border-radius: 50%; 
    background: #fff; border: 1px solid #ddd; color: #555; 
    text-decoration: none; font-size: 13px; transition: all 0.2s;
}
.modern-pagination .pg:hover { background: #eee; }
.modern-pagination .pg_current { 
    background: #333; color: #fff; border-color: #333; font-weight: bold; 
}
/* 1. UI 핵심 요소들 줄바꿈 절대 금지 */
/* 버튼(.btn), 뱃지(.badge), 입력창 라벨(.form-label), 체크박스 라벨, 탭 메뉴(.nav-link), 테이블 헤더(th) */
.btn, 
.badge, 
.form-label, 
.form-label-modern,
.form-check-label, 
.nav-link, 
.btn-modern-primary,
th {
    white-space: nowrap !important; /* 텍스트 줄바꿈 금지 */
    word-break: keep-all !important; /* 단어 중간 끊김 방지 */
}

/* 2. 게시판 목록(Table) 모바일 최적화 */
/* 좁은 화면에서 글자가 구겨지는 대신, 표 전체를 좌우로 스크롤하게 만듦 */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 테이블 안의 데이터(td) 중 날짜, 글쓴이 등도 줄바꿈 방지 */
.tbl_head01 td, 
.table td.text-center {
    white-space: nowrap !important;
}

/* 3. 제목이 너무 길 경우 ... 으로 처리 (줄바꿈 되어 레이아웃 깨짐 방지) */
.board-subject {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block;
    max-width: 100%; /* 부모 넓이에 맞춤 */
    vertical-align: middle;
}

/* 4. Flex 컨테이너 안의 아이템들이 찌그러지지 않게 방어 */
.d-flex > .btn, 
.d-flex > span, 
.d-flex > a {
    flex-shrink: 0 !important; /* 공간이 부족해도 사이즈 줄이지 않음 */
}

/* 5. 검색창, 입력창 그룹 줄바꿈 방지 */
.input-group, 
form.d-flex {
    flex-wrap: nowrap !important;
}

:focus-visible {
    outline: 3px solid #0056b3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.3) !important;
    z-index: 9999;
}

/* 2. 본문 바로가기 (Skip Navigation) */
/* Tab키를 처음 눌렀을 때 메뉴를 건너뛰고 본문으로 바로 가는 기능 (화면 밖 숨김 처리) */
#skip-to-content {
    position: absolute;
    top: -9999px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 10px 20px;
    z-index: 99999;
    text-decoration: none;
    border-radius: 0 0 10px 10px;
}
#skip-to-content:focus {
    top: 0; /* 포커스 받으면 화면 위에서 툭 튀어나옴 */
}

/* ==========================================================================
   [수정] 모바일 비즈니스 탭 활성화 시 텍스트 가독성 해결
   ========================================================================== */

/* 선택된(active) 비즈니스 카드의 텍스트와 아이콘을 무조건 흰색으로 변경 */
.business-item.active,
.business-card.active {
    color: #fff !important; /* 텍스트 흰색 */
    background-color: #333 !important; /* 배경 어둡게 (현재 색상 유지) */
}

/* 아이콘 색상도 흰색으로 강제 */
.business-item.active i,
.business-item.active .bi,
.business-card.active i,
.business-card.active .bi {
    color: #fff !important;
}

/* 제목(h3, h4 등) 색상도 흰색으로 강제 */
.business-item.active h3,
.business-item.active h4,
.business-card.active h3,
.business-card.active h4 {
    color: #fff !important;
}

/* 혹시 모를 내부 span 태그 등도 흰색으로 */
.business-item.active span,
.business-card.active span {
    color: #fff !important;
}