/* 가로 해상도에 따라 변경*/
@media ( max-width : 1600px) {
    #contents {
        max-width: 1600px !important;
    }
}

@media ( max-width : 1366px) {
    #contents {
        max-width: 1366px !important;
    }
}

@media ( max-width : 1279px) {
    #contents {
        max-width: 1279px !important;
    }
}

@media ( max-width : 1024px) {
    #contents {
        max-width: 1024px !important;
    }
}

@media ( max-width : 768px ) {
    #contents {
        max-width: 768px !important;
    }
}

@media ( max-width : 480px ) {
    #contents {
        max-width: 480px !important;
    }
}

@media ( max-width : 360px ) {
    #contents {
        max-width: 360px !important;
    }
}

/* Tabulator Custom Theme */

/* 기본 설정 */
.tabulator {
    font-family: "Noto Sans CJK KR", "Noto Sans KR", "notokr", '맑은 고딕', 'Malgun Gothic', sans-serif !important;
    font-size: .850rem;
    color: #333333;
    background-color: #ffffff;
    border: none;
    border-top: 1px solid #575c9b;
    border-bottom: 1px solid #575c9b;
    overflow: visible;
    /* border: 1px solid #e6e6e6;
    border-radius: 4px; */
}

.with-searchbar {
    --header-searchbar-height: 3.86rem;
}

.with-title {
    --header-title-height: 30px;
}

.with-title .grid-title{
    position: sticky;
    top: calc(var(--header-height, 0px) + 1px + var(--header-searchbar-height, 0px));
    z-index: 10;
    background-color: #ffffff;
}

.darkmode .with-title .grid-title{
    background-color: #323248;;
}

.tabulator .tabulator-tableholder .tabulator-table {
  color: #232327;
  padding: 0px !important;
}

.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{
    color: #232327;
    font-size: .8rem;
    font-weight: 500;
}

/* 헤더 스타일 */
.tabulator .tabulator-header {
    background-color: #004c8f;
    color: #ffffff;
    font-weight: bold;
    border-bottom: 2px solid #e6e6e6;
    position: sticky;
    top: calc(var(--header-height, 0px) + var(--header-title-height, 0px) + var(--header-searchbar-height, 0px));
    z-index: 10; /* 헤더가 데이터 위로 올라오도록 */
}

/*.tabulator .tabulator-header .tabulator-col {*/
/*    border-right: none;*/
/*}*/

.tabulator-header .tabulator-col {
    /*height: clamp(35px, 1.5vw, 45px);*/
    font-weight: 500 !important;
    background-color: rgb(107, 112, 179) !important;
/*    font-size: 0.933rem; */
    color: rgb(255, 255, 255) !important;
    text-align: center;
}

.tabulator .tabulator-header .tabulator-col {
    text-align: center;
    justify-content: center;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title
{
    padding-right: 2px;
    white-space: normal;
    word-break: break-word;
}
/* 기본적으로 소팅 버튼 숨김 */
.tabulator-col-sorter {
/*    display: none !important;*/
}

/* 행 스타일 */
.tabulator-row {
    background-color: #ffffff;
    border-bottom: 1px solid #e6e6e6;
    transition: background-color 0.2s ease;
    will-change: transform; /* 브라우저 최적화 힌트 */
}

/* 짝수행 백그라운드 색깔 추가 */
.tabulator-row:nth-child(even) {
    background-color: #f8fbff;
}

.tabulator-row:hover {
    background-color: #e6f2ff;
}

/* 선택된 행 스타일 */
.tabulator-row.tabulator-selected {
    background-color: #cce5ff;
    color: #004c8f;
}

.tabulator-row .tabulator-cell.tabulator-row-header {
    background: none;
    border-bottom: none;
    border-right: 1px solid #E5E5E5;
    padding: 0px;
}

.tabulator-row .tabulator-responsive-collapse {
    border-top: 1px solid #E5E5E5;
}

.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {
    background: #2D316C;
}

.tabulator-row .tabulator-responsive-collapse .collapse-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    white-space: normal;
    gap: 4px;
}

.tabulator-row .tabulator-responsive-collapse .collapse-contents {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    color: #444;
    font-size: 0.9rem;
    font-weight: 400;
    flex: 1;
}

/* 셀 스타일 */
.tabulator-cell {
    font-weight: 500;
    text-align: left;
    white-space: normal;
    overflow: visible;
    min-height: 25px;

}

.tabulator-cell.keep-space {
    white-space: pre !important;
}

.tabulator-cell.empty-merge {
  border-top: none;
}

.tabulator-row .tabulator-cell {
    border-right: 1px solid #E5E5E5;
    align-content: center;
    white-space: normal;
    word-break: break-word;
    padding: 5px;
}

.tabulator-row .tabulator-cell .link {
  color: #105da9;
  text-decoration: underline;
  cursor: pointer;
}

.tabulator-row .tabulator-cell .multiline-cell {

    width: calc(100% + 10px);
    position: relative;
    left: -5px;
}
.tabulator-row .tabulator-cell .multiline-cell >div {
    min-height: 1.5rem;
    font-size: 0.8rem;
    border-bottom:1px solid #E5E5E5;
    align-content: center;
}

.tabulator-row .tabulator-cell .multiline-cell >div:last-child{
    border-bottom:none;
}

.no-collapse-padding .tabulator-responsive-collapse {
    padding: 0 !important;
}

/* 푸터 스타일 */
.tabulator-footer {
    background-color: #004c8f;
    color: #ffffff;
    border-top: 2px solid #e6e6e6;
    padding: 10px;
    text-align: center;
}

/* 페이지네이션 버튼 스타일 */
.tabulator-paginator button {
    border: 1px solid #004c8f;
    background-color: #004c8f;
    color: #ffffff;
    padding: 5px 10px;
    margin: 0 2px;
    border-radius: 4px;
    cursor: pointer;
}

.tabulator-paginator button:hover {
    background-color: #003366;
}

.tabulator-paginator button[disabled] {
    border: 1px solid #cccccc;
    background-color: #cccccc;
    cursor: not-allowed;
}

.tabulator-footer-more-btn {

    display: inline-block;
    background-color: #6b78b5;   /* 헤더와 유사한 톤 */
    color: white;                /* 대비용 텍스트 색 */
    font-size: 0.9rem;
    padding: 4px 12px;
    border-radius: 20px;
    text-align: center;
    margin: 8px auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-weight: 500;
    user-select: none;
}
.tabulator-footer-more-btn.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
}

/* 다크모드 */
.darkmode .tabulator {
    color: #e6e6e6;
    background-color: #1e1e2f;
    border: 1px solid #444;
}

.darkmode .tabulator-header {
    background-color: #003366;
    color: #ffffff;
    border-bottom: 2px solid #444;
}

.darkmode .tabulator-header .tabulator-col {
    background-color: #4D4D65 !important;
    border-color: #6f6f85 !important;
}

.darkmode .tabulator-row {
    background-color: #323248;
    color: #ffffff;
    border-bottom: 1px solid #444;
}

.darkmode .tabulator-row:nth-child(even) {
    background-color: #323248;
}

.darkmode .tabulator-row:hover {
    background-color: #2a2a3a;
}

.darkmode .tabulator-row.tabulator-selected {
    background-color: #004c8f;
    color: #ffffff;
}

.darkmode .tabulator-row .tabulator-cell {
    border-right: 1px solid #6f6f85;
}

.darkmode .tabulator-footer {
    background-color: #003366;
    color: #ffffff;
    border-top: 2px solid #444;
}

.darkmode .tabulator-paginator button {
    border: 1px solid #004c8f;
    background-color: #004c8f;
    color: #ffffff;
}

.darkmode .tabulator-paginator button:hover {
    background-color: #003366;
}

.darkmode .tabulator-paginator button[disabled] {
    border: 1px solid #555;
    background-color: #555;
    cursor: not-allowed;
}

.darkmode .tabulator-footer-more-btn {

    background-color: #3a3f63; /* 어두운 블루/그레이 계열 */
    color: #e0e0e0;            /* 부드러운 밝은 회색 텍스트 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.darkmode .tabulator-footer-more-btn.disabled {
    background-color: #555555;
    color: #999999;
}

.darkmode .tb-footer {
    background-color: #323248;
}

.darkmode .tb-footer .more-btn-outer {
    background-color: #323248;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.darkmode .tb-footer .more-btn-inner {
    background-color: #4D4D65;
    border: 3px solid #A3A6BF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.darkmode .tb-footer .more-btn-icon {
  filter: invert(71%) sepia(19%) saturate(277%) hue-rotate(196deg) brightness(92%) contrast(88%);
}

.more-btn-outer {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: white;
  border-radius: 40px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 3px 25px 3px 3px;
  cursor: pointer;
  margin: 5px;
}

.more-btn-inner {
  background-color: #6B70B3;
  color: white;
  font-weight: bold;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.9rem;
  line-height: 1;
  border: 3px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  margin-right: 8px;
}

.arrow-count {
  font-size: 0.9rem;
  font-weight: bold;
  color: #232327;
  margin-right: 8px;
}

.more-btn-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  filter: invert(44%) sepia(44%) saturate(484%) hue-rotate(198deg) brightness(93%) contrast(91%);
}

/* print  */
.tabulator-print-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Noto Sans CJK KR", "Noto Sans KR", "notokr", '맑은 고딕', 'Malgun Gothic', sans-serif;
  font-size: 0.9rem;
  color: #333333;
  background-color: #ffffff;
}

.tabulator-print-table thead {
  background-color: #004c8f;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
}

.tabulator-print-table thead th {
  padding: 10px;
  border: 1px solid #e6e6e6;
  background-color: rgb(107, 112, 179);
  color: white;
}

.tabulator-print-table tbody td {
  padding: 10px;
  border: 1px solid #e6e6e6;
  text-align: left;
}

.tabulator-print-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

.tabulator-print-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.tabulator-print-table tbody tr:hover {
  background-color: #e6f2ff;
}

/* 선택된 행 스타일 (print 시점에는 선택 여부 구분 어려움) */
.tabulator-print-table tbody tr.tabulator-selected {
  background-color: #cce5ff;
  color: #004c8f;
}

/***** contents.css 로 이관예정  ***/
/* 버튼 스타일 */
.top-btn {
	position: fixed !important;
	bottom: 15vh;
	right: 100px;
	width: 30px;
	height: 30px;
	border-radius: 20%;
	background: #6b70b3;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: background 0.2s;
	display:none;
	z-index: 999999;
	text-align: center;
	align-content: center;
}
.top-btn:hover {
     background: #0066cc;
}