@charset "UTF-8";
/*
 * VizenWeblog Modern UI Override
 * 기존 CSS 위에 덮어씌우는 모던 디자인 오버라이드
 * 2026-03-28
 */

/* ==========================================
   1. 디자인 토큰 (CSS 변수)
   ========================================== */
:root {
    --vz-primary: #2563eb;
    --vz-primary-hover: #1d4ed8;
    --vz-primary-light: rgba(37,99,235,0.1);
    --vz-success: #10b981;
    --vz-danger: #ef4444;
    --vz-warning: #f59e0b;
    --vz-orange: #f97316;

    --vz-bg: #f5f7fa;
    --vz-navbar: #1e2028;
    --vz-navbar-border: #2d2f3a;
    --vz-card-bg: #ffffff;
    --vz-card-border: #e5e7eb;
    --vz-card-shadow: 0 1px 3px rgba(0,0,0,0.04);

    --vz-text-primary: #000000;
    --vz-text-secondary: #000000;
    --vz-text-muted: #000000;
    --vz-border: #e5e7eb;
    --vz-border-light: #f0f1f3;
    --vz-input-border: #d1d5db;

    --vz-table-header-bg: #f8fafc;
    --vz-radius: 6px;
    --vz-radius-lg: 8px;
    --vz-transition: all 0.15s ease;
}


/* ==========================================
   2. 전역 배경
   ========================================== */
body { background-color: var(--vz-bg); }
.wrapper { background: var(--vz-bg); }


/* ==========================================
   3. 상단 네비게이션 바
   ========================================== */
.wrapper.theme-2-active .navbar.navbar-inverse.navbar-fixed-top {
    background: var(--vz-navbar);
    border-bottom: 1px solid var(--vz-navbar-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.wrapper.theme-2-active .navbar.navbar-inverse.navbar-fixed-top .mobile-only-brand {
    background: var(--vz-navbar);
}
.mobile-only-brand .current_site_name {
    color: var(--vz-primary) !important;
}
.mobile-only-brand .current_site_url + button:hover {
    background-color: var(--vz-primary) !important;
}
.navbar.navbar-inverse.navbar-fixed-top .nav > li > a {
    border-radius: 4px;
    transition: var(--vz-transition);
}
.navbar.navbar-inverse.navbar-fixed-top .nav > li > a:hover {
    background: #363740 !important;
}
/* 비젠소프트방문 버튼 라인 정렬 */
.navbar.navbar-inverse.navbar-fixed-top .nav > li.go_vizen {
    border: none;
}
.navbar.navbar-inverse.navbar-fixed-top .nav > li.go_vizen > a {
    padding: 5px 15px;
    border: 1px solid #515155;
}
.navbar.navbar-inverse.navbar-fixed-top .nav > li.go_vizen > a > i {
    vertical-align: middle;
}
/* 서비스선택 버튼 상하좌우 가운데 정렬 */
.mobile-only-brand .current_site_url + button.btn-service-select {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1;
}
.mobile-only-brand .current_site_url + button.btn-service-select > i {
    margin-left: 0 !important;
    font-size: 14px !important;
    line-height: 1;
}
.mobile-only-brand .current_site_url + button.btn-service-select > i.fa {
    margin-right: 6px;
    position: relative;
    top: 2px;
}
.mobile-only-brand .current_site_url + button.btn-service-select > span {
    line-height: 1;
}
.mobile-only-brand .current_site_url + button.btn-service-select > i.zmdi {
    margin-left: 8px !important;
    position: relative;
    top: 2px;
}


/* ==========================================
   4. 좌측 사이드바
   ========================================== */
.fixed-sidebar-left {
    box-shadow: 1px 0 4px rgba(0,0,0,0.05);
}
.fixed-sidebar-left .nicescroll-bar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.fixed-sidebar-left .nicescroll-bar::-webkit-scrollbar {
    display: none;
}
.fixed-sidebar-left .side-nav > li {
    border-bottom: 1px solid #f0f0f2;
}
.fixed-sidebar-left .side-nav > li > a {
    transition: var(--vz-transition);
    border-radius: 0;
    margin: 0;
}
.fixed-sidebar-left .side-nav > li > a.active {
    background-color: var(--vz-primary) !important;
    border-radius: var(--vz-radius);
    margin: 4px 8px;
}
.wrapper.theme-2-active.pimary-color-blue .fixed-sidebar-left .side-nav > li > a.active {
    color: #fff;
}
.fixed-sidebar-left .side-nav > li > a:not(.active) {
    background-color: #f5f7fa;
}
.fixed-sidebar-left .side-nav > li > a:not(.active):hover {
    background-color: #edf0f4;
}
.fixed-sidebar-left .side-nav > li > ul > li a {
    padding-top: 12px;
    padding-bottom: 12px;
}
.fixed-sidebar-left .side-nav > li > ul > li {
    border-bottom: none;
    position: relative;
}
.fixed-sidebar-left .side-nav > li > ul > li::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #f0f0f2;
}
.fixed-sidebar-left .side-nav > li > ul > li:last-child::after {
    display: none;
}
.fixed-sidebar-left .side-nav > li > ul > li a:hover {
    color: var(--vz-primary);
}


/* ==========================================
   5. 카드 / 패널
   ========================================== */
.panel.panel-default.card-view {
    border: 1px solid var(--vz-card-border);
    border-radius: var(--vz-radius-lg);
    box-shadow: var(--vz-card-shadow);
    overflow: hidden;
    background: var(--vz-card-bg);
}
.panel-heading {
    border-bottom: 1px solid var(--vz-border-light);
}
h6, .panel-title {
    font-weight: 600;
    color: var(--vz-text-primary);
}
.panel-title span.dataST {
    color: var(--vz-text-secondary);
}
hr.light-grey-hr {
    border-color: var(--vz-border-light);
}


/* ==========================================
   6. 폼 요소
   ========================================== */
input[type="text"] {
    border: 1px solid var(--vz-input-border);
    border-radius: var(--vz-radius);
    transition: var(--vz-transition);
    color: var(--vz-text-primary);
}
input[type="text"]:focus {
    border-color: var(--vz-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--vz-primary-light);
}
select {
    border: 1px solid var(--vz-input-border) !important;
    border-radius: var(--vz-radius) !important;
    transition: var(--vz-transition);
    color: var(--vz-text-primary);
}
select:focus {
    border-color: var(--vz-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px var(--vz-primary-light);
}
.form-control {
    border-radius: var(--vz-radius);
}
.form-horizontal .row div > label.title {
    background-color: #f1f5f9;
    color: #374151;
    font-weight: 500;
}
.asterisk {
    color: var(--vz-primary);
}

/* 모든 검색 폼 라벨(1행, 2행 동일) 너비 140px로 고정 */
.form-horizontal .row div > label.title {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important; /* 입력창 높이와 일치시킴 */
}

/* 날짜 선택 영역 */
.input-daterange-datepicker {
    border-radius: var(--vz-radius);
}


/* ==========================================
   7. 버튼 스타일 (Phase 2)
   ========================================== */

/* 검색 버튼 (Primary) */
.form-horizontal .btn {
    height: 40px;
    padding: 0 20px;
    border-radius: var(--vz-radius);
    font-size: 14px;
    font-weight: 500;
    transition: var(--vz-transition);
    cursor: pointer;
    border: 1px solid var(--vz-primary);
    color: #fff;
    background-color: var(--vz-primary);
}
.form-horizontal .btn:hover {
    background-color: var(--vz-primary-hover);
    border-color: var(--vz-primary-hover);
    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}
.form-horizontal .btn:active {
    transform: translateY(1px);
}

/* 엑셀/PDF 버튼 (기존 위치 - 숨김 처리, Phase 3에서 이동) */
.form-horizontal .btn.excel_down_btn {
    display: none;
}

/* Export 툴바 버튼 (Phase 3) */
.export-toolbar-row {
    margin-top: -12px;
    margin-bottom: 0;
}
.export-toolbar {
    text-align: right;
    padding: 0 0 8px;
}
.export-toolbar .btn-export + .btn-export {
    margin-left: 8px;
}
.btn-export {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--vz-radius);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--vz-input-border);
    background: var(--vz-card-bg);
    color: #374151;
    cursor: pointer;
    transition: var(--vz-transition);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
}
.btn-export i {
    margin-right: 6px;
    font-size: 15px;
}
.btn-export:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.btn-export:active {
    transform: translateY(1px);
}
.btn-export.btn-excel i { color: var(--vz-success); }
.btn-export.btn-pdf i { color: var(--vz-danger); }

/* 기타 버튼 */
.modal-footer .btn.btn-success {
    background: var(--vz-primary);
    border-color: var(--vz-primary);
    border-radius: var(--vz-radius);
    color: #fff;
}
.modal-footer .btn.btn-success:hover {
    background: var(--vz-primary-hover);
    border-color: var(--vz-primary-hover);
}
.btn.btn-danger {
    border-radius: var(--vz-radius);
}
.btn.btn-default {
    border-radius: var(--vz-radius);
}

/* inflow 영역 내 검색 버튼은 동일 스타일 */
.inflow .btn {
    border-radius: var(--vz-radius);
}


/* ==========================================
   8. 데이터 테이블
   ========================================== */
.data_table_wrap table {
    border-top: 2px solid var(--vz-primary) !important;
}
table.dataTable {
    border-top: 2px solid var(--vz-primary) !important;
}
.data_table_wrap table th,
table.dataTable > thead:first-child > tr:first-child > th {
    background-color: var(--vz-table-header-bg);
    font-weight: 600;
    color: var(--vz-text-primary);
}
.data_table_wrap table td {
    color: #374151;
}
.data_table_wrap table td,
.data_table_wrap table th {
    border-color: var(--vz-border) !important;
}
.data_table_wrap table td.data_up { color: var(--vz-success); }
.data_table_wrap table td.data_down { color: var(--vz-danger); }
.data_table_wrap table tfoot th {
    background-color: var(--vz-table-header-bg);
    font-weight: 600;
}

/* 테이블 탭 */
.data_table_wrap .table_tab ul li a {
    border-radius: var(--vz-radius) var(--vz-radius) 0 0;
    transition: var(--vz-transition);
    border-color: var(--vz-input-border);
}
.data_table_wrap .table_tab ul li.active a {
    border-color: var(--vz-primary);
    color: var(--vz-primary);
    background: #eff6ff;
}
.data_table_wrap .table_tab ul li a:hover {
    background: #f9fafb;
}

/* DataTables 페이지네이션 */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--vz-radius) !important;
    transition: var(--vz-transition);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border-color: var(--vz-primary) !important;
    color: var(--vz-primary) !important;
    background: #eff6ff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border-color: var(--vz-primary) !important;
    color: var(--vz-primary) !important;
    background: #f0f5ff !important;
}

/* 상세보기 링크 */
.data_table_wrap table td.data_detail_view a {
    border-radius: var(--vz-radius);
    transition: var(--vz-transition);
    border-color: var(--vz-input-border);
    color: var(--vz-text-primary);
}
.data_table_wrap table td.data_detail_view a:hover {
    border-color: var(--vz-primary);
    color: var(--vz-primary);
    background: #eff6ff;
}


/* ==========================================
   9. 날짜 선택기 (Daterangepicker)
   ========================================== */
.daterangepicker {
    border-radius: var(--vz-radius-lg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-color: var(--vz-border);
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--vz-primary) !important;
}
.daterangepicker .ranges li.active {
    background-color: var(--vz-primary);
}
.daterangepicker .btn-info,
.daterangepicker .btn-success {
    background: var(--vz-primary);
    border-color: var(--vz-primary);
    border-radius: var(--vz-radius);
}
.daterangepicker .btn-info:hover,
.daterangepicker .btn-success:hover {
    background: var(--vz-primary-hover);
    border-color: var(--vz-primary-hover);
}


/* ==========================================
   10. 모달
   ========================================== */
.modal-content {
    border-radius: var(--vz-radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 1px solid var(--vz-border);
}
.modal-header {
    border-bottom: 1px solid var(--vz-border-light);
}
.modal-footer {
    border-top: 1px solid var(--vz-border-light);
}


/* ==========================================
   11. 서비스선택 모달
   ========================================== */
#currentsite .modal-content {
    border-radius: 12px;
    overflow: hidden;
}
#currentsite .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--vz-border-light);
    background: var(--vz-table-header-bg);
}
#currentsite .modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--vz-text-primary);
}
#currentsite .modal-title > i {
    color: var(--vz-primary);
    margin-right: 6px;
}
#currentsite .close {
    font-size: 22px;
    opacity: 0.5;
    transition: var(--vz-transition);
}
#currentsite .close:hover {
    opacity: 1;
}
#currentsite .modal-body {
    padding: 12px 20px;
}
#currentsite .service-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
#currentsite .service-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin: 0;
    border: 1px solid var(--vz-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--vz-transition);
    font-weight: 400;
    line-height: 1.4;
    background: #fafbfc;
}
#currentsite .service-item:last-child {
    margin-bottom: 0;
}
#currentsite .service-item:hover {
    border-color: var(--vz-primary);
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.1);
}
#currentsite .service-item input[type="radio"] {
    margin: 0 14px 0 0;
    width: 18px;
    height: 18px;
    accent-color: var(--vz-primary);
    flex-shrink: 0;
}
#currentsite .service-item input[type="radio"]:checked ~ .service-name {
    color: var(--vz-primary);
    font-weight: 600;
}
#currentsite .service-item .service-name {
    font-size: 15px;
    color: var(--vz-text-primary);
    font-weight: 500;
}
#currentsite .service-item .service-url {
    font-size: 12px;
    color: var(--vz-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 12px;
    flex-shrink: 0;
}
#currentsite .service-item .service-url::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--vz-text-muted);
    margin-right: 8px;
    vertical-align: middle;
}
#currentsite .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--vz-border-light);
    text-align: right;
}
#currentsite .modal-footer .btn {
    height: 38px;
    padding: 0 20px;
    border-radius: var(--vz-radius);
    font-size: 14px;
    font-weight: 500;
    transition: var(--vz-transition);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
#currentsite .modal-footer .btn-default {
    border: 1px solid var(--vz-input-border);
    background: var(--vz-card-bg);
    color: var(--vz-text-secondary);
}
#currentsite .modal-footer .btn-default:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
#currentsite .modal-footer .btn-success {
    background: var(--vz-primary) !important;
    border-color: var(--vz-primary) !important;
    color: #fff;
}
#currentsite .modal-footer .btn-success:hover {
    background: var(--vz-primary-hover) !important;
    border-color: var(--vz-primary-hover) !important;
    box-shadow: 0 2px 6px rgba(37,99,235,0.3);
}


/* ==========================================
   12. 차트 영역 (Phase 4 CSS)
   ========================================== */
.panel-body > div[id^="e_chart"] {
    padding: 10px 15px;
}

/* 차트 툴박스 아이콘 */
.panel.card-view .panel-heading .zmdi-fullscreen {
    color: var(--vz-text-muted);
    transition: var(--vz-transition);
}
.panel.card-view .panel-heading .zmdi-fullscreen:hover {
    color: var(--vz-primary);
}


/* ==========================================
   12. 스크롤바 커스텀
   ========================================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}


/* ==========================================
   13. 로그인 페이지 모던화
   ========================================== */
.login_wrap .top {
    background-color: var(--vz-navbar);
}
.login_wrap .top h2 {
    border-bottom-color: var(--vz-navbar-border);
}
.login_wrap .top span {
    color: var(--vz-primary);
}
.login_wrap .bottom .loginBtn {
    background-color: var(--vz-primary);
    border-radius: 0 var(--vz-radius) var(--vz-radius) 0;
    transition: var(--vz-transition);
}
.login_wrap .bottom .loginBtn:hover {
    background-color: var(--vz-primary-hover);
}
.login_wrap .bottom .infoBox dl {
    border-color: var(--vz-border);
    border-radius: var(--vz-radius);
}
.login_wrap .bottom .infoBox dl:last-of-type {
    border-radius: var(--vz-radius);
}


/* ==========================================
   14. 추이 팝업 페이지 (chu_pop, *_pop)
   ========================================== */
.trend_pop_wrap .btn {
    border-radius: var(--vz-radius);
}


/* ==========================================
   15. 기타 유틸리티
   ========================================== */
/* 체크박스 라벨 */
.checkbox label {
    color: var(--vz-text-primary);
}

/* 알림/토스트 */
.jq-toast-wrap .jq-toast-single {
    border-radius: var(--vz-radius);
}

/* 로딩 프리로더 */
.preloader-it .la-anim-1 {
    color: var(--vz-primary);
}


/* ==========================================
   16. 상세보기 버튼 스타일
   ========================================== */
.list_table table td a.tabBtn,
.data_table_wrap table td.data_detail_view a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--vz-primary) !important;
    border-radius: var(--vz-radius);
    color: var(--vz-primary) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: var(--vz-transition);
    background: transparent;
    white-space: nowrap;
    width: auto !important;
}
.list_table table td a.tabBtn:hover,
.data_table_wrap table td.data_detail_view a:hover {
    background: var(--vz-primary);
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}


/* ==========================================
   17. 환경설정 목록 페이지 여백 축소
   ========================================== */
.list_table.data_table_wrap .panel.panel-default.card-view > .panel-heading {
    padding-bottom: 10px !important;
}
.list_table.data_table_wrap .panel.panel-default.card-view > .panel-wrapper > .panel-body {
    padding-top: 0 !important;
}
.list_table.data_table_wrap .table-responsive {
    margin-top: 0 !important;
}

/* 환경설정 페이징 가운데 정렬 + 상단 라인 제거 */
table.numTT {
    float: none !important;
    display: block !important;
    text-align: center;
    border-top: 0 !important;
    margin: 20px auto 0 !important;
}
table.numTT tbody,
table.numTT tr {
    display: inline-block;
}
table.numTT td {
    border-top: 0 !important;
}


/* ==========================================
   17. 사이드바 전체펼침/전체닫힘 버튼
   ========================================== */
.side-nav-toggle-btns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    padding: 10px 10px 6px;
    border-bottom: 1px solid #f0f0f2;
}
.side-nav-toggle-btns .btn-nav-toggle {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--vz-input-border);
    border-radius: var(--vz-radius);
    background: var(--vz-card-bg);
    color: var(--vz-text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--vz-transition);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1;
}
.side-nav-toggle-btns .btn-nav-toggle i {
    margin-right: 4px;
    font-size: 13px;
}
.side-nav-toggle-btns .btn-nav-toggle:hover {
    background: #f1f5f9;
    border-color: var(--vz-primary);
    color: var(--vz-primary);
}


/* ==========================================
   17. 반응형 디자인 (Phase 5)
   ========================================== */
@media (max-width: 1400px) {
    .fixed-sidebar-left .side-nav > li > a.active {
        margin: 2px 4px;
    }
    /* 사이드바 축소시 펼침/닫힘 버튼 숨김 */
    .side-nav-toggle-btns-wrap {
        display: none;
    }
    .sidebar-hover .side-nav-toggle-btns-wrap {
        display: list-item;
    }
}

@media (max-width: 1024px) {
    .export-toolbar {
        padding: 10px 15px;
    }
}

@media (max-width: 768px) {
    .export-toolbar {
        padding: 8px 10px;
    }
    .btn-export {
        padding: 0 12px;
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .export-toolbar {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 6px;
    }
    .btn-export {
        width: 100%;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 40px;
    }
    .panel.panel-default.card-view {
        border-radius: var(--vz-radius);
    }
}