html {
    /* height: 100% 추가 (기존 min-height와 함께) */
    height: 100%; /* 화면 높이를 확실히 100%로 만듭니다. */
    min-height: 100%;
    font-size: 14px;
    position: relative;
}

.header1-fixed-height {
    height: 20px;
}
.header2-fixed-height {
    height: 18px;
}
.header3-fixed-height {
    height: 13px;
}

html, body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    overflow-y: auto;
}

body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; /* 뷰포트 높이 전체를 차지하도록 설정 */
    margin: 0 !important; /* body의 기본 마진을 제거 */
    padding-top: 60px !important;
}

.main-view-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-list-area {
    /* 9/12 = 75% 너비 지정 */
    width: 75%;
    /*float: left;*/ /* 옆으로 나란히 배치 */
}

main {
    flex-grow: 1; /* Main 콘텐츠가 남은 모든 수직 공간을 채웁니다. */
    /* 기존 pb-3 클래스가 main에 있다면 유지합니다. */
}
.main-list-area dd {
    margin-left: 15px;
    padding-left: 0;
}

.sidebar-ad-area {
    /* 3/12 = 25% 너비 지정 */
    width: 25%;
    /*float: left;*/ /* 옆으로 나란히 배치 */
}

.footer {
    position: static;
    bottom: auto;
    height: auto; /* 고정 높이 대신 콘텐츠 크기에 맞게 */
    flex-shrink: 0; /* Main이 확장될 때 Footer는 줄어들지 않도록 고정 */
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px; /* 기존 10px 유지 */
    padding-right: 2px;
    line-height: 1.2 !important;
    font-size: 1rem;
    width: 100%;
}

/* 푸터 내부 컨테이너의 패딩도 함께 제거 */
.footer .container {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
}

/* 4. 링크에 의한 불필요한 여백도 최소화 */
.footer a {
    line-height: 1.2 !important;
}

@media (max-width: 900px) {
    /* 2-1. 사이드바 숨김 */
    .sidebar-ad-area {
        display: none !important;
    }

    /* 2-2. 메인 콘텐츠 영역을 100%로 확장 */
    .main-list-area {
        width: 100% !important; /* 100%로 확장 */
        float: none !important; /* float 속성 해제 */
    }
}
@media (min-width: 768px) {
    h1 {
        font-size: 1.8rem !important; /* h1은 더 크게 */
        margin-bottom: 8px !important;
    }

    h2 {
        font-size: 1.4rem !important; /* h2는 중간 크기 */
        margin-bottom: 5px !important;
    }

    h3 {
        font-size: 1.2rem !important; /* h3은 작게 */
        margin-bottom: 3px !important;
    }
}
@media (max-width: 575.98px) {
    /* 모바일에서만 적용되는 CSS */
    .navbar .container-fluid {
        /* 타이틀, 아이콘, 햄버거 메뉴가 잘 정렬되도록 Flexbox 사용 */
        display: flex;
        align-items: center;
        justify-content: space-between; /* 양쪽 끝 정렬 */
    }
}

/* 햄버거 메뉴 버튼 전체의 크기를 80%로 축소 */
.navbar-toggler {
    transform: scale(0.7); /* 80% 크기로 축소 */
    padding: 0.25rem 0.5rem; /* 버튼 주변의 패딩을 줄여서 크기 조절 */
}

.navbar-brand {
    /* 부트스트랩 기본값보다 작은 값으로 상하 패딩(여백)을 조절 */
    padding-top: 0.1rem; /* 상단 여백을 줄임 */
    padding-bottom: 0.1rem; /* 하단 여백을 줄임 */
    font-size: 1rem; /* 필요하다면 글자 크기도 조금 줄일 수 있습니다. */
}

.navbar {
    min-height: 30px; /* 네비게이션 바의 최소 높이를 설정 */
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* btn-sm 클래스의 높이와 패딩을 더 작게 재정의 */
.btn-sm {
    padding: 0.1rem 0.3rem !important; /* 상하좌우 패딩을 줄여 버튼 크기를 줄임 */
    min-height: 24px !important; /* 버튼의 최소 높이를 강제 지정하여 정렬 */
    line-height: 1 !important; /* 버튼 내부 텍스트 및 아이콘의 높이를 조절 */
}

/* btn-sm 클래스 안에 있는 Material Symbols 아이콘 크기를 조정 */
.btn-sm .material-symbols-outlined {
    font-size: 16px !important; /* 원하는 크기로 변경 (기본 24px) */
    line-height: 1.2; /* 아이콘과 버튼 크기를 맞추기 위해 줄 높이 조정 */
}

/* btn-sm 안에 있는 Bootstrap 아이콘 크기를 강제로 조정 */
.btn-sm i.bi {
    font-size: 12px !important; /* 원하는 크기 (예: 16px) */
    line-height: 1; /* 수직 정렬을 돕기 위해 추가 */
}

/* 버튼을 앞 요소에 1px 겹치게 하여 테두리 간격을 제거합니다. */
.btn-join-left {
    margin-left: -1px !important;
}

/* 검색 입력란과 버튼 그룹 전체의 너비를 픽셀로 고정 */
.search-group-width {
    width: 120px !important; /* 원하는 너비(예: 300px)로 변경 */
}

/* 페이지 크기 드롭다운 리스트만 타겟팅하여 높이를 강제 조정 */
#pageSizeSelect {
    /* 높이를 페이지네이션 버튼과 비슷하게 맞춥니다. (약 30px) */
    height: 20px !important;
    /*width: 60px !important;*/
    /* 상하 패딩을 줄여서 높이를 더 낮춥니다. */
    padding-top: 0px !important; /*0.2rem !important;*/
    padding-bottom: 0px !important; /*0.2rem !important;*/
    /* 폰트 크기가 커서 높이가 늘어나는 것을 방지 (이미 btn-sm이 작다면 덮어쓰지 않아도 됨) */
    font-size: 12px !important; /* Bootstrap의 btn-sm 또는 pagination-sm의 기본 폰트 크기 */
    line-height: 1; /* 수직 정렬을 돕기 위해 추가 */
    margin: 0 !important;
    margin-right: -1px !important;
}

/* 페이지 링크(버튼 내부)도 너비와 높이를 부모와 일치시킵니다. */
.pagination-sm .page-link {
    width: 100%;
    height: 100%;
    text-align: center; /* 번호를 중앙에 정렬 */
    padding-left: 0; /* 불필요한 좌우 패딩 제거 */
    padding-right: 0; /* 불필요한 좌우 패딩 제거 */
    font-size: 12px !important; /*0.85rem !important;*/ /* 폰트 크기를 0.8rem(약 12px)로 작게 고정 */
    overflow: hidden; /* 텍스트가 버튼을 넘칠 경우 숨김 처리 */
    /*text-overflow: ellipsis;*/
}

/* 페이지네이션 정보와 관련된 텍스트의 굵기를 일반(normal)로 강제 설정 */
.pagination-info-text {
    font-weight: bold !important; /*normal !important;*/
    font-size: 12px !important; /* 폰트 크기를 0.8rem(약 12px)로 작게 고정 */
}

/* 페이지네이션 버튼 항목의 너비와 높이를 고정합니다. */
.pagination-sm .page-item {
    /* 너비 고정: 예시로 30px 설정. 필요에 따라 조정하세요. */
    width: 22px !important;
    /* 줄 바꿈을 방지하여 너비가 강제로 늘어나는 것을 막습니다. */
    white-space: nowrap;
}
.sort-link {
    color: #212529 !important; /* 검정색 글씨 */
    font-weight: bold; /* 글씨를 볼드로 */
}

table {
    border-collapse: collapse;  /*셀 테두리를 하나로 합침*/ 
    width: 100%;
}

td, th {
    /*border: 1px solid black;*/
    padding: 8px;
    line-height: 1;
}

.table td, .table th {
    /* 부트스트랩 기본 패딩(보통 0.5rem)을 더 작은 값으로 재정의합니다. */
    padding-top: 0.1rem;
    padding-bottom: 0.1rem; /* !important를 사용하면 부트스트랩 기본값을 확실히 덮어쓸 수 있습니다. */
    padding: 0.3rem !important; /* (좌우 패딩도 줄이려면 이 코드를 사용) */
}

.column-CheckBox {
    font-size: 16px !important;
    width: 5px !important;
    height: 12px !important;
}

.column-NoHead.fixed-width-column {
    font-size: 16px !important;
    width: 20px !important;
    height: 12px !important;
}

.column-No.fixed-width-column {
    font-size: 14px !important;
    width: 20px !important;
    height: 12px !important;
}

.column-NameHead.fixed-width-column {
    font-size: 16px !important;
    width: 80px !important;
    height: 12px !important;
}

.column-Name.fixed-width-column {
    font-size: 14px !important;
    width: 80px !important;
    height: 12px !important;
}

.column-NumberHead.fixed-width-column {
    font-size: 16px !important;
    width: 120px !important;
    height: 12px !important;
}

.column-Number.fixed-width-column {
    font-size: 14px !important;
    width: 120px !important;
    height: 12px !important;
}

.column-AddressHead.fixed-width-column {
    font-size: 16px !important;
    width: 300px !important;
    height: 12px !important;
}

.column-Address.fixed-width-column {
    font-size: 12px !important;
    width: 300px !important;
    height: 12px !important;
}

.column-SocialHead.fixed-width-column {
    font-size: 16px !important;
    width: 20px !important;
    height: 12px !important;
}

.column-Social.fixed-width-column {
    font-size: 14px !important;
    width: 20px !important;
    height: 12px !important;
}

.column-Social a {
    text-decoration: none !important;
}

.column-Social i {
    text-decoration: none !important;
}

.column-DateTimeHead.fixed-width-column {
    font-size: 16px !important;
    width: 90px !important;
    height: 12px !important;
}

.column-DateTime.fixed-width-column {
    font-size: 14px !important;
    width: 90px !important;
    line-height: 1.2 !important;
}

.column-CommandHead.fixed-width-column {
    font-size: 16px !important;
    width: 20px !important;
    height: 12px !important;
}

.column-Command.fixed-width-column {
    font-size: 14px !important;
    width: 20px !important;
    height: 12px !important;
}