/* 전체 화면 1400px 기준 중앙 정렬 */
#dynamicTabs,
.dashboard-container,
.container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

:root {
    --tab-border-color: #d0d4d9;
}

.app-sidebar .menu-open > a {
    background-color: rgba(255,255,255,0.08);
}


/* ============================================= */
/* 1. TAB 스타일 */
/* ============================================= */

.card.card-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px;
}

.inner-tab-card {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.inner-tab-card .card-header {
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
}

.inner-tab-card .nav-tabs {
    margin: 0 !important;
    padding: 0 12px !important;
    gap: 4px;
    border: none !important;
    border-bottom: 1px solid var(--tab-border-color) !important;
}

.inner-tab-card .nav-link {
    border: 1px solid var(--tab-border-color) !important;
    background: #f8f9fa !important;
    color: #6c757d !important;
    border-radius: 6px 6px 0 0 !important;
}

.inner-tab-card .nav-link.active {
    background: #fff !important;
    border: 1px solid var(--tab-border-color) !important;
    border-bottom-color: #fff !important;
    color: #0d6efd !important;
    font-weight: 600;
    z-index: 3;
}

.inner-tab-card .nav-link:not(.active):hover {
    background: #eceff1 !important;
    border-color: #bfc3c8 !important;
    color: #495057 !important;
}

.inner-tab-card .close-tab {
    cursor: pointer;
    margin-left: 6px;
    color: #dc3545;
}

.inner-tab-card .card-body {
    background: #fff !important;
    border: 1px solid var(--tab-border-color) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    margin-top: -1px !important;
    padding: 16px !important;
    position: relative;
    z-index: 1;
}

.inner-tab-card .tab-content {
    background: #fff !important;
    padding: 4px !important;
}

.card-header-tabs {
    border-bottom: none !important;
}

/* 완전 기본 .card 스타일 */
.card {
    border: none !important;
}

.card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-top: none;
}

/* ============================================= */
/* 2. 대시보드 카드 */
/* ============================================= */

.dashboard-container .card {
    border: 1px solid #d0d4d9 !important;
    border-radius: 8px !important;
    background: #fff !important;
}

.dashboard-container .card-body {
    border: none !important;
    padding: 16px !important;
    background: #fff !important;
}

.dashboard-container .card-header {
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid #d0d4d9 !important;
    padding: 12px 16px !important;
}

.dashboard-container canvas {
    display: block;
    padding: 4px;
}

/* ============================================= */
/* 3. 카드 공통 */
/* ============================================= */

.sinbi-card {
    border: 1px solid #d0d4d9 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden;
    margin-bottom: 16px !important;
}

.sinbi-card .card-header {
    background: #fff !important;
    padding: 10px 10px 0px 10px!important;
}

.sinbi-card .card-body {
    padding: 14px 16px !important;
    background: #fff !important;
    border: none !important;
}

.sinbi-card.no-body-padding .card-body {
    padding: 0 !important;
}


/* =============================== */
/* 검색 영역 - 한줄 정렬 */
/* =============================== */
.sinbi-search-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sinbi-search-inline label {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
}

.sinbi-search-inline .search-input {
    width: 220px;
    height: 32px;
    font-size: 13px;
}


/* ============================================= */
/* 4. 검색 버튼 그룹 */
/* ============================================= */

.sinbi-btn-group {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: nowrap;
}

.sinbi-btn-group .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 46px;
    font-size: 12px !important;
    padding: 4px 10px !important;
    white-space: nowrap;
}

/* ============================================= */
/* 5. 테이블 */
/* ============================================= */

.sinbi-table-wrap {
    border-radius: 0 0 8px 8px !important;
    overflow: hidden;
    border: none !important;
    padding: 10px 10px;
}

.sinbi-table {
    margin-bottom: 0 !important;
}

.sinbi-table th,
.sinbi-table td {
    font-size: 13px !important;
    vertical-align: middle !important;
    text-align: center;
}

.sinbi-table td.text-start {
    text-align: left !important;
}

/* ============================================= */
/* 6. 페이지네이션 */
/* ============================================= */

.sinbi-pagination {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

/* ============================================= */
/* 7. 입력폼 */
/* ============================================= */

.sinbi-form-label {
    margin-bottom: 4px;
    font-weight: 500;
}

.sinbi-form-group {
    margin-bottom: 8px;
}

/* ============================================= */
/* 8. 전체 폰트 & 레이아웃 */
/* ============================================= */

html, body, .content {
    font-size: 13px !important;
}

.content {
    padding: 16px 0px !important;
}

.container-fluid {
    padding: 0 !important;
}

/* ============================================= */
/* 검색 영역 겹침 방지 */
/* ============================================= */

.sinbi-search-area {
    margin-bottom: 20px !important;
}

/* 검색 영역 내부 정렬 */
.sinbi-search-area .row {
    align-items: center;
}

/* 상시여부 체크박스 수직 정렬 개선 */
.sinbi-search-area .form-check {
    margin-top: 6px;
}

/* 날짜 입력 영역 공통 스타일 */
.sinbi-search-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* input-group 안에서 입력창이 눌리는 문제 해결 */
.sinbi-search-date .form-control {
    min-height: 32px;
}

/* 라벨 줄 간격 개선 */
.sinbi-form-label {
    display: inline-block;
    line-height: 1.4;
}

/* 검색 카드 내부에서 버튼을 우측 하단에 고정 */
.sinbi-search-area {
    position: relative;
    padding-bottom: 20px !important; /* 버튼이 겹치지 않도록 여백 확보 */
}

.sinbi-btn-bottom-right {
    position: absolute !important;
    right: 16px;
    bottom: -10px;
    margin: 0;
    width: auto !important;
    display: flex;
    justify-content: flex-end;
}

.sinbi-btn-bottom-right .sinbi-btn-group {
    display: flex;
    gap: 6px;
}

.sinbi-search-date .input-group-text {
    cursor: pointer;
}

.sinbi-section-header {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background-color: #fff;
}

.sinbi-section-title {
    padding-left: 10px;
    border-left: 4px solid #007bff; /* 파란 세로선 */
    font-weight: 600;
    font-size: 15px;
}

.sinbi-form-table tbody th {
    width: 160px;
    background-color: #f7f7f7;  /* 1번 이미지처럼 라벨 컬럼 회색 */
    vertical-align: middle;
}

.sinbi-form-table tbody td {
    vertical-align: middle;
}

/* 공통: 라벨 th 오른쪽 정렬 */
.sinbi-form-table th {
  text-align: right;
  vertical-align: middle !important;
  padding-right: 12px;
}

/* 카드 타이틀 앞 파란 세로선 */
.sinbi-card .card-header .card-title {
  padding-left: 10px;
  border-left: 4px solid #0d6efd; /* AdminLTE4 기본 primary 색상 계열 */
  font-weight: 600;
}

/* 옵션 카드의 행추가/행삭제 사이 흰색 얇은 구분선 */
.sinbi-row-btn-group .btn + .btn {
  border-left: 1px solid rgba(255, 255, 255, 0.7);
}

/* 상단/하단 버튼 그룹 간격 */
.sinbi-top-btn-group .btn,
.sinbi-bottom-btn-group .btn {
  min-width: 60px;
}

.sinbi-bottom-btn-group {
  margin-bottom: 1rem;      /* 컨텐츠와 너무 붙지 않게 */
}

/* 카드 테이블 스타일 살짝 */
.sinbi-form-table tbody th {
  background-color: #f7f7f7;
}

/* 대시보드 차트 높이 통일 */
.dashboard-container canvas {
    max-height: 260px !important;
    height: 260px !important;
}

/* 검색/목록 카드 통일감 */
.sinbi-card .card-header {
    background-color: #f8fafc;
}

/* 버튼 그룹 간격 */
.sinbi-btn-group .btn {
    min-width: 72px;
}

/* 테이블 라인 조금 더 부드럽게 */
.sinbi-table tbody tr:hover {
    background-color: #f5f7fb;
    cursor: pointer;
}

.sinbi-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sinbi-search-item label {
    width: 80px;            /* 라벨 고정 폭 → 세로 라벨처럼 보이게 */
    text-align: right;      /* 오른쪽 정렬 */
    font-weight: 500;
    margin: 0;
}

.sinbi-search-item .form-select {
    width: 200px;           /* 입력창 넓이 */
    height: 32px;
    font-size: 13px;
}

/* Datetimepicker 위젯을 input 내부가 아닌 body 기준으로 띄우기 */
.bootstrap-datetimepicker-widget {
    position: absolute !important;
    top: auto !important;
    bottom: 40px !important;   /* 아이콘 바로 위에 위치하도록 */
    z-index: 99999 !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    display: block; /* 중복 위젯 보임 문제 제거 */
}

/* 자료 다운로드 테이블 th 고정 폭 및 정렬 */
.sinbi-form-table th {
    width: 140px;
    background-color: #f7f7f7;
    font-weight: 600;
    text-align: right;
    padding-right: 14px;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* 다운로드 버튼 열 고정 */
.download-col {
    width: 120px;
    vertical-align: middle !important;
}

/* 입력창 통일된 높이 */
.input-lg {
    width: 200px;
    height: 32px;
    font-size: 13px;
}

.input-md {
    width: 150px;
    height: 32px;
    font-size: 13px;
}

/* 날짜 사이의 ~ 표시 스타일 */
.download-table span {
    display: inline-block;
    padding: 0 4px;
}

/* 각 항목 내부 라벨 스타일 */
.sinbi-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #444;
}

/* 제목과 테이블 간격 */
.sinbi-card .card-header {
    margin-bottom: 12px !important;
}

/* ==============TreeView CSS Start============== */
/* 기본 UL 스타일 제거 */
.treeview-list {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}

/* 각 항목 row */
.tree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
}

/* 마우스 hover (Windows Explorer 같은 느낌) */
.tree-row:hover {
    background: #eef3fa;
    border-radius: 4px;
}

/* 들여쓰기 */
.tree-children {
    list-style: none;
    margin: 2px 0 2px 22px;   /* Windows 스타일 들여쓰기 */
    padding: 0;
    display: none;
}

/* 펼친 경우 */
.tree-item.open > .tree-children {
    display: block;
}

/* 좌측 화살표 기본 */
.caret {
    font-size: 12px;
}

/* 펼친 경우 caret 방향 변경 */
.tree-item.open > .tree-row .caret {
    transform: rotate(90deg);
}

/* 최상위 폴더 너무 커 보이지 않게 */
.tree-row i.bi-folder,
.tree-row i.bi-folder2-open {
    font-size: 15px;
}

/* row 전체 박스처럼 보이지 않도록 */
.tree-row {
    border: none;
}

/* child 항목 더 얇게 */
.tree-item.child .tree-row {
    padding: 2px 8px;
    font-size: 13px;
}

/* 클릭해서 선택된 항목 */
.tree-row.active {
    background: #eef3fa;      /* hover와 동일하게 */
    border-radius: 4px;
    /* 선택 느낌 더 주고 싶으면 추가 */
    font-weight: 600;
    border-left: 3px solid #0d6efd;
}
/* ==============TreeView CSS End============== */

.card-tools {
    gap: 6px;
}

/* 날짜 input-group 통일 스타일 */
.flatpickr-group {
    width: 150px;
    min-width: 150px;
}

/* input-group 높이 맞추기 */
.flatpickr-group .form-control,
.flatpickr-group .input-group-text {
    height: 38px;
    padding: 6px 10px;
    box-sizing: border-box;
}

/* 아이콘 크기 통일 */
.flatpickr-group .input-group-text i {
    font-size: 18px;
    line-height: 1;
}

/* input과 아이콘을 하나처럼 보이도록 */
.flatpickr-group .input-group-text {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 날짜 range 전체 row 간격 통일 */
.sinbi-date-range {
    gap: 6px !important;
}

/* ~ 표시 간격 조정 */
.sinbi-date-range span.mx-1 {
    margin-left: 6px !important;
    margin-right: 6px !important;
}

.chart-range-btn-group .btn {
    min-width: 80px;             /* 버튼 길이 통일 → 디자인 완성도 상승 */
    font-size: 12px;
    padding: 2px 8px;
}

.chart-range-btn-group .btn.active {
    background-color: #0d6efd;
    color: white;
}

/* ================================ */
/* 광고계정 행추가/행삭제 버튼 스타일 */
/* ================================ */
.ads-table-btn-group {
    margin-left: 0;
    margin-right: auto;   /* ✅ 왼쪽 고정 */
}

.ads-table-btn-group .btn {
    background-color: #6c757d !important;   /* ✅ 회색 */
    border-color: #6c757d !important;
    color: #fff !important;
    min-width: 70px;
    font-size: 12px;
}

.ads-table-btn-group .btn:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

/* ================================ */
/* 팝업 하단 선택/닫기 버튼 여백 */
/* ================================ */
.sinbi-bottom-btn-group {
    padding-right: 16px;   /* ✅ 오른쪽 테두리에서 띄우기 */
    padding-bottom: 12px;  /* ✅ 하단 테두리에서 띄우기 */
}

.sinbi-bottom-btn-group .btn {
    min-width: 90px;
}