/*
버튼 클래스 font-size (rem) font-size (px)    padding (rem)     padding (px)
btn-lg             1.25rem          17.5px      0.5rem 1rem         7px 14px
btn                   1rem            14px 0.375rem 0.75rem    5.25px 10.5px
btn-sm            0.875rem         12.25px   0.25rem 0.5rem        3.5px 7px
btn-xs             0.75rem          10.5px    0.2rem 0.4rem      2.8px 5.6px
btn-xxs           0.625rem          8.75px   0.15rem 0.3rem      2.1px 4.2px
*/
/*
  rem 값    px 값    (14px 기준) 설명
  0.1rem    1.4px    14px의 10%
  0.2rem    2.8px
 0.25rem    3.5px
  0.3rem    4.2px
  0.4rem    5.6px
  0.5rem      7px    14px의 50%
  0.6rem    8.4px
0.625rem   8.75px
  0.7rem    9.8px
 0.75rem   10.5px
  0.8rem   11.2px
0.875rem  12.25px
    1rem     14px    HTML 기본 font-size
  1.1rem   15.4px
  1.2rem   16.8px
 1.25rem   17.5px
  1.3rem   18.2px
  1.4rem   19.6px
  1.5rem     21px
  1.6rem   22.4px
  1.7rem   23.8px
  1.8rem   25.2px
  1.9rem   26.6px
    2rem     28px
  2.1rem   29.4px
  2.2rem   30.8px
  2.3rem   32.2px
  2.4rem   33.6px
  2.5rem     35px
  2.6rem   36.4px
  2.7rem   37.8px
  2.8rem   39.2px
  2.9rem   40.6px
    3rem     42px
  3.1rem   43.4px
  3.2rem   44.8px
  3.3rem   46.2px
  3.4rem   47.6px
  3.5rem     49px
  3.6rem   50.4px
*/

/*
class xx-1 의 1은 0.25rem / 3.5px 간격
p-1: 0.25rem / 3.5px
p-2: 0.5rem / 7px
*/

/* 기본 폰트 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/******************************************************************/
/* 기본 레이아웃 및 구조 */
html {
    position: relative;
    min-height: 100%;
    font-size: 14px; /*기본 폰트사이즈*/
}

body {
    font-family: "Noto Sans KR", "Noto Sans CJK KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji;
    min-height: 100vh;
    /* background-color: initial; */
}

/******************************************************************/
/* 네비게이션 및 헤더 */
.navbar {
    padding: 0.2rem 0;
}

.nav-link {
    font-weight: bolder;
}

.navbar-brand, .navbar-user {
    display: flex;
    align-items: center;
    font-size: unset;
    font-weight: bolder;
    gap: 0.75rem;
}

.navbar-user {
    padding-right: unset !important;
}

.navbar-toggler {
    padding: unset;
    border: unset;
}

/******************************************************************/
/* 타이포그래피 */
h1 { font-size: 1.75rem !important; }
h2 { font-size: 1.5rem !important; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1rem !important; }
h5 { font-size: 0.875rem !important; }
h6 { font-size: 0.75rem !important; }

a, .btn-link {
    text-decoration: none;
}

/******************************************************************/
/* 메인 컨텐츠 영역 */
.card {
    background-color: unset;
}

/*템플릿 레이아웃에서 Grid로 작성된 페이지의 좌우 여백을 Header와 수직정렬되도록 맞춤*/
.adjust_grid_padding {
    padding-left: calc(var(--bs-gutter-x)* -0.5);
    padding-right: calc(var(--bs-gutter-x)* -0.5);
}

/******************************************************************/
/* 폼 및 입력 컨트롤 */
.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;
}

textarea:hover, input:hover, textarea:active, input:active, textarea:focus, input:focus,
button:focus, button:active, button:hover, select:focus, label:focus, .btn:active, .btn.active {
    outline: 0 !important;
    box-shadow: none !important;
}

/******************************************************************/
/* 버튼 및 폰트 유틸리티 */
.validation-summary-errors,
.field-validation-error {
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity));
    font-size: 0.875rem;
}

.fs-7 {
    font-size: 0.875rem;
}

.fs-8 {
    font-size: 0.75rem;
}

.btn-xs {
    padding: 0.15rem 0.3rem;
    font-size: 0.75rem;
    line-height: initial;
    border-radius: 0.2rem;
}

.btn-xxs {
    padding: 0.05rem 0.2rem;
    font-size: 0.5rem;
    line-height: initial;
    border-radius: 0.2rem;
}

/******************************************************************/
/* 테이블 및 DataTable 커스텀 */
table th {
    font-weight: normal;
}

table th, table td {
    white-space: nowrap;
}

table th:nth-child(1), table td:nth-child(1) {
    padding-left: 0.75rem;
}

tr.child td {
    padding: 0 1.5rem;
}

/*정렬 화살표 크기 조절*/
table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, 
table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, 
table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, 
table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, 
table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, 
table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, 
table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, 
table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, 
table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, 
table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {
    font-size: .5em !important;
}

/* table-sm 스타일과 어울리도록 페이지네이션 버튼 크기 조정 */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin: 0;
    padding: 0 !important;
    font-size: 0.875rem;
    line-height: 1.5;
}

.dataTables_wrapper .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

span.dtr-title {
    font-weight: revert !important;
}

/******************************************************************/
/* 반응형 미디어 쿼리 */
@media (max-width: 992px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 100%;
    }
}


/******************************************************************/
/* 푸터 */
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 2rem;
    background-color: var(--primary);
}

@media (max-width: 768px) {
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 1.5rem;
    }
}

/******************************************************************/
/* 유틸리티 컴포넌트 */
.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 2rem;
    height: 2rem;
    text-align: center;
    color: #fff;
    background: rgba(90, 92, 105, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

    .scroll-to-top:focus, .scroll-to-top:hover {
        color: white;
    }

    .scroll-to-top:hover {
        background: #5a5c69;
    }

/******************************************************************/
/* 배지 및 버튼 텍스트 가독성 개선 - CSS 변수 활용 */

/* 배지: Solar 테마의 밝은 색상에 대한 텍스트 색상 */
.badge.bg-success {
    color: var(--bs-success-contrast, #fff) !important;
}

.badge.bg-warning {
    color: var(--bs-warning-contrast, #000) !important;
}

.badge.bg-info {
    color: var(--bs-info-contrast, #000) !important;
}

/* Light/Dark 배지: 테마에 따라 적절한 텍스트 색상 적용 */
.badge.bg-light {
    color: #000 !important;
}

.badge.bg-dark {
    color: #fff !important;
}

/* 테두리 배지: Light/Dark 배지의 텍스트 색상 (배경이 투명하므로 테마에 따라 변경) */
/* Light 테두리 배지: Light 테마에서는 검은색, Dark 테마에서는 흰색 */
[data-bs-theme=light] .badge.border.border-light.text-light {
    color: #000 !important;
}

[data-bs-theme=dark] .badge.border.border-light.text-light {
    color: #fff !important;
}

/* Dark 테두리 배지: Light 테마에서는 검은색, Dark 테마에서는 흰색 */
[data-bs-theme=light] .badge.border.border-dark.text-dark {
    color: #000 !important;
}

[data-bs-theme=dark] .badge.border.border-dark.text-dark {
    color: #fff !important;
}

/* 버튼: Solar 테마의 밝은 색상에 대한 텍스트 색상 */
.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    color: var(--bs-success-contrast, #fff) !important;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    color: var(--bs-warning-contrast, #000) !important;
}

.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    color: var(--bs-info-contrast, #000) !important;
}

/* Light 버튼: 배경이 항상 밝은 색이므로 텍스트는 항상 검은색 */
.btn-light,
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #000 !important;
}

/* Dark 버튼: 항상 흰색 텍스트 (어두운 배경이므로) */
.btn-dark,
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff !important;
}

/* 테두리 버튼: Light 버튼의 텍스트 색상 */
/* 기본 상태: 배경이 투명하므로 테마에 따라 텍스트 색상 변경 */
[data-bs-theme=light] .btn-outline-light {
    color: #000 !important;
}

[data-bs-theme=dark] .btn-outline-light {
    color: #fff !important;
}

/* Hover/Focus/Active 상태: 배경이 밝은 색이므로 항상 검은색 텍스트 */
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light.active,
.btn-outline-light:active,
.btn-check:checked + .btn-outline-light,
.btn-check:checked + .btn-outline-light:hover {
    color: #000 !important;
}

/* 테두리 버튼: Dark 버튼의 텍스트 색상 */
/* 기본 상태: 배경이 투명하므로 테마에 따라 텍스트 색상 변경 */
[data-bs-theme=light] .btn-outline-dark {
    color: #000 !important;
}

[data-bs-theme=dark] .btn-outline-dark {
    color: #fff !important;
}

/* Hover/Focus/Active 상태: 배경이 어두운 색이므로 항상 흰색 텍스트 */
.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark.active,
.btn-outline-dark:active,
.btn-check:checked + .btn-outline-dark,
.btn-check:checked + .btn-outline-dark:hover {
    color: #fff !important;
}