/*
 * 코너로지스 고객사 어드민 — 밝은 테마 (2026-10 개편)
 * AdminLTE/Bootstrap4 위에 덧입히는 층이다. 화면별 마크업은 그대로 두고 여기서 모양만 바꾼다.
 * 색을 바꾸려면 아래 :root 의 값만 고치면 된다.
 */
:root {
  --cl-bg: #f5f6f8;
  --cl-surface: #ffffff;
  --cl-surface-2: #f8f9fb;
  --cl-border: #e7e9ee;
  --cl-border-strong: #d6dae1;
  --cl-text: #1b1f27;
  --cl-text-2: #5b6472;
  --cl-text-3: #8b93a1;

  --cl-primary: #2447d6;
  --cl-primary-hover: #1c38b0;
  --cl-primary-soft: #eef2ff;
  --cl-brand: #17288e;

  --cl-success: #12915a;
  --cl-success-soft: #e7f6ee;
  --cl-danger: #d92d20;
  --cl-danger-soft: #fdecea;
  --cl-warning: #b26a00;
  --cl-warning-soft: #fff4dc;
  --cl-info: #0e7490;
  --cl-info-soft: #e3f4f8;

  --cl-radius: 12px;
  --cl-radius-sm: 8px;
  --cl-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --cl-shadow-pop: 0 12px 32px rgba(16, 24, 40, .12);
  --cl-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}

/* ---------- 기본 ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--cl-font);
  font-size: 14px;
  color: var(--cl-text);
  background: var(--cl-bg);
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}
.wrapper, .content-wrapper { background: var(--cl-bg) !important; }
a { color: var(--cl-primary); }
a:hover { color: var(--cl-primary-hover); text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--cl-font); font-weight: 700; letter-spacing: -.02em; color: var(--cl-text); }
label { font-weight: 600; color: var(--cl-text-2); font-size: 13px; margin-bottom: .4rem; }
label:not(.form-check-label):not(.custom-file-label) { font-weight: 600; }
.text-muted { color: var(--cl-text-3) !important; }
::selection { background: #dbe4ff; }

/* ---------- 상단바 ---------- */
.main-header.navbar {
  background: var(--cl-surface);
  border-bottom: 1px solid var(--cl-border);
  min-height: 56px;
  padding: 0 1rem;
  box-shadow: none;
}
.main-header .nav-link { color: var(--cl-text-2); height: auto; padding: .45rem .7rem; border-radius: var(--cl-radius-sm); }
.main-header .nav-link:hover { color: var(--cl-text); background: var(--cl-surface-2); }
.cl-page-title { font-size: 16px; font-weight: 700; color: var(--cl-text); margin: 0 0 0 .35rem; letter-spacing: -.02em; }
.cl-user { display: flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--cl-border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--cl-text); background: var(--cl-surface); margin: 0 .35rem; white-space: nowrap; }
.cl-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--cl-primary-soft); color: var(--cl-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.cl-sso { font-size: 12px; color: var(--cl-warning); background: var(--cl-warning-soft); border-radius: 999px; padding: .25rem .7rem; font-weight: 600; }
.navbar-badge { font-size: 10px; font-weight: 700; padding: 2px 5px; top: 4px; right: 2px; border-radius: 999px; }
.navbar-badge.badge-success { background: var(--cl-primary); }

/* ---------- 사이드바 ---------- */
.main-sidebar {
  background: var(--cl-surface) !important;
  border-right: 1px solid var(--cl-border);
  box-shadow: none !important;
}
.main-sidebar .brand-link {
  border-bottom: 1px solid var(--cl-border) !important;
  height: 56px;
  display: flex; align-items: center; gap: .6rem;
  padding: 0 1rem;
  color: var(--cl-text) !important;
}
.main-sidebar .brand-link .brand-image { float: none; width: 30px; height: 30px; max-height: 30px; margin: 0; opacity: 1 !important; box-shadow: none !important; }
.main-sidebar .brand-link .brand-text { font-weight: 800; font-size: 14.5px; letter-spacing: .02em; color: var(--cl-brand); }
.main-sidebar .sidebar { padding: .5rem .6rem 1rem; overflow-y: auto; }
.layout-fixed .main-sidebar .sidebar { height: calc(100vh - 56px); }
.nav-sidebar .nav-header { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cl-text-3); padding: 1rem .7rem .35rem; text-transform: none; }
.nav-sidebar .nav-item { margin-bottom: 2px; }
.nav-sidebar > .nav-item > .nav-link,
.nav-sidebar .nav-treeview > .nav-item > .nav-link {
  color: var(--cl-text-2);
  border-radius: var(--cl-radius-sm);
  padding: .55rem .7rem;
  font-weight: 500;
  display: flex; align-items: center;
  box-shadow: none !important;
}
.nav-sidebar .nav-link p { margin: 0; white-space: nowrap; }
.nav-sidebar .nav-link .nav-icon { width: 1.4rem; margin: 0 .55rem 0 0; font-size: 14px; color: var(--cl-text-3); text-align: center; }
.nav-sidebar > .nav-item > .nav-link:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--cl-primary-soft) !important;
  color: var(--cl-primary) !important;
  font-weight: 700;
}
.nav-sidebar .nav-link.active .nav-icon { color: var(--cl-primary); }
/* 접힌 사이드바(아이콘만) */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-header { visibility: hidden; height: 12px; padding: 0; overflow: hidden; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-text { display: none; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link { justify-content: center; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link .nav-icon { margin: 0; }
.sidebar-mini.sidebar-collapse .main-sidebar:hover { box-shadow: var(--cl-shadow-pop) !important; }

/* ---------- 본문 여백 ---------- */
.content-wrapper > .content-header, .content-wrapper > section.content-header { padding: 1.1rem 1.25rem .25rem; }
.content-wrapper > .content, .content-wrapper > section.content { padding: .6rem 1.25rem 1.25rem; }
.content-header h1 { font-size: 20px; font-weight: 700; }
.breadcrumb { background: transparent; font-size: 12.5px; padding: 0; margin: 0; }
.breadcrumb-item.active { color: var(--cl-text-3); }

/* ---------- 카드 ---------- */
.card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-radius);
  box-shadow: var(--cl-shadow);
  margin-bottom: 1rem;
}
.card-header { background: transparent; border-bottom: 1px solid var(--cl-border); padding: .9rem 1.1rem; border-radius: var(--cl-radius) var(--cl-radius) 0 0 !important; }
.card-body { padding: 1.1rem; }
.card-footer { background: var(--cl-surface-2); border-top: 1px solid var(--cl-border); border-radius: 0 0 var(--cl-radius) var(--cl-radius) !important; }
.card-title { font-size: 15px; font-weight: 700; color: var(--cl-text); }
.card.card-outline, .card.card-primary.card-outline { border-top: 1px solid var(--cl-border); }
.card-primary:not(.card-outline) > .card-header, .card-secondary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header, .card-success:not(.card-outline) > .card-header {
  background: transparent; color: var(--cl-text); border-bottom: 1px solid var(--cl-border);
}
.card-primary:not(.card-outline) > .card-header a, .card-primary:not(.card-outline) > .card-header .card-title { color: var(--cl-text); }

/* ---------- 버튼 ---------- */
.btn { font-weight: 600; font-size: 13.5px; border-radius: var(--cl-radius-sm); padding: .45rem .9rem; box-shadow: none !important; transition: background-color .12s, border-color .12s, color .12s; }
.btn-sm { font-size: 12.5px; padding: .3rem .65rem; border-radius: 7px; }
.btn-xs { font-size: 12px; padding: .15rem .5rem; border-radius: 6px; }
.btn-lg { font-size: 15px; padding: .6rem 1.2rem; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(36, 71, 214, .18) !important; }
.btn-primary { background: var(--cl-primary); border-color: var(--cl-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background: var(--cl-primary-hover); border-color: var(--cl-primary-hover); }
.btn-outline-primary { color: var(--cl-primary); border-color: #c5d0f7; background: var(--cl-surface); }
.btn-outline-primary:hover, .btn-outline-primary.active, .btn-outline-primary:not(:disabled):not(.disabled).active { background: var(--cl-primary-soft); color: var(--cl-primary); border-color: var(--cl-primary); }
.btn-secondary, .btn-default {
  background: var(--cl-surface); color: var(--cl-text); border: 1px solid var(--cl-border-strong);
}
.btn-secondary:hover, .btn-default:hover, .btn-secondary:focus, .btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--cl-surface-2); color: var(--cl-text); border-color: #c3c8d1;
}
.btn-secondary:disabled, .btn-secondary.disabled { background: var(--cl-surface-2); color: var(--cl-text-3); border-color: var(--cl-border); }
.btn-success { background: var(--cl-success); border-color: var(--cl-success); }
.btn-success:hover, .btn-success:focus { background: #0e7a4b; border-color: #0e7a4b; }
.btn-info { background: var(--cl-info); border-color: var(--cl-info); color: #fff; }
.btn-info:hover, .btn-info:focus { background: #0b5f76; border-color: #0b5f76; color: #fff; }
.btn-danger { background: var(--cl-danger); border-color: var(--cl-danger); }
.btn-warning { background: #f5a524; border-color: #f5a524; color: #3b2a00; }
.btn-outline-secondary { color: var(--cl-text-2); border-color: var(--cl-border-strong); background: var(--cl-surface); }
.btn-outline-secondary:hover { background: var(--cl-surface-2); color: var(--cl-text); border-color: #c3c8d1; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: var(--cl-radius-sm) 0 0 var(--cl-radius-sm); }
.btn-group > .btn:last-child { border-radius: 0 var(--cl-radius-sm) var(--cl-radius-sm) 0; }
.btn-app { border-radius: var(--cl-radius-sm); border-color: var(--cl-border); background: var(--cl-surface); color: var(--cl-text-2); }

/* ---------- 입력 ---------- */
.form-control, .custom-select, .custom-file-label {
  border: 1px solid var(--cl-border-strong);
  border-radius: var(--cl-radius-sm);
  font-size: 13.5px;
  color: var(--cl-text);
  height: calc(2.25rem + 2px);
  box-shadow: none;
}
textarea.form-control { height: auto; }
.form-control-sm, .custom-select-sm { height: calc(1.9rem + 2px); font-size: 12.5px; border-radius: 7px; }
.form-control::placeholder { color: var(--cl-text-3); }
.form-control:focus, .custom-select:focus, .custom-file-input:focus ~ .custom-file-label {
  border-color: var(--cl-primary);
  box-shadow: 0 0 0 3px rgba(36, 71, 214, .14);
}
.form-control:disabled, .form-control[readonly] { background: var(--cl-surface-2); color: var(--cl-text-2); }
.input-group-text { background: var(--cl-surface-2); border: 1px solid var(--cl-border-strong); color: var(--cl-text-3); font-size: 13px; border-radius: var(--cl-radius-sm); }
.input-group > .form-control:not(:first-child), .input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child), .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-prepend > .btn, .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-append > .btn, .input-group-append > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.custom-file, .custom-file-input { height: calc(2.25rem + 2px); }
.custom-file-label { line-height: 1.6; color: var(--cl-text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 5.5rem; }
.custom-file-label::after { height: calc(2.25rem); background: var(--cl-surface-2); color: var(--cl-text-2); font-weight: 600; font-size: 13px; border-left: 1px solid var(--cl-border-strong); line-height: 1.6; }
.form-check-label, .custom-control-label { font-weight: 500; color: var(--cl-text); font-size: 13.5px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--cl-primary); }
.form-group { margin-bottom: .9rem; }

/* ---------- 표 ---------- */
.table { color: var(--cl-text); font-size: 13.5px; margin-bottom: 0; }
.table thead th {
  background: var(--cl-surface-2);
  color: var(--cl-text-2);
  font-size: 12.5px;
  font-weight: 700;
  border-top: 1px solid var(--cl-border) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  padding: .65rem .75rem;
  vertical-align: middle;
  white-space: nowrap;
}
.table td { padding: .7rem .75rem; vertical-align: middle; border-top: 1px solid var(--cl-border); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--cl-border); }
.table-bordered th, .table-bordered td { border-left: 0; border-right: 0; }
.table-bordered { border-left: 0; border-right: 0; }
.table-hover tbody tr:hover { background: #f7f9ff; color: var(--cl-text); }
.table-striped tbody tr:nth-of-type(odd) { background: #fafbfc; }
.table-sm th, .table-sm td { padding: .45rem .6rem; }
.subRow { background: var(--cl-surface-2) !important; }
.card-body > .table:first-child thead th, .card-body.p-0 .table thead th { border-top: 0 !important; }
.table-responsive { border-radius: var(--cl-radius-sm); }

/* DataTables */
.dataTables_wrapper .dataTables_info { color: var(--cl-text-3); font-size: 12.5px; padding-top: 1rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .7rem; }
.dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { border: 1px solid var(--cl-border-strong); border-radius: 7px; height: 32px; }
table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; border-collapse: collapse !important; }
table.dataTable thead .sorting::before, table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc::after { opacity: .35; }
.dataTables_empty { color: var(--cl-text-3); padding: 2.2rem 0 !important; }

/* 페이지 번호 */
.pagination { gap: 4px; }
.page-item .page-link { border: 1px solid var(--cl-border); border-radius: 7px !important; color: var(--cl-text-2); font-size: 13px; font-weight: 600; padding: .35rem .7rem; margin: 0; }
.page-item .page-link:hover { background: var(--cl-surface-2); color: var(--cl-text); }
.page-item.active .page-link { background: var(--cl-primary); border-color: var(--cl-primary); color: #fff; }
.page-item.disabled .page-link { color: #c2c7d0; background: var(--cl-surface); }

/* ---------- 배지 ---------- */
.badge { font-weight: 600; font-size: 11.5px; padding: .3em .6em; border-radius: 999px; letter-spacing: 0; }
.badge-primary { background: var(--cl-primary-soft); color: var(--cl-primary); }
.badge-success { background: var(--cl-success-soft); color: var(--cl-success); }
.badge-danger { background: var(--cl-danger-soft); color: var(--cl-danger); }
.badge-warning { background: var(--cl-warning-soft); color: var(--cl-warning); }
.badge-info { background: var(--cl-info-soft); color: var(--cl-info); }
.badge-secondary, .badge-light { background: #eef0f3; color: var(--cl-text-2); }
.badge-dark { background: #2b303b; color: #fff; }
.navbar-badge.badge-success { color: #fff; }

/* ---------- 탭 ---------- */
.nav-tabs { border-bottom: 1px solid var(--cl-border); }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--cl-text-2); font-weight: 600; padding: .6rem .9rem; border-radius: 0; }
.nav-tabs .nav-link:hover { color: var(--cl-text); border-color: transparent; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--cl-primary); background: transparent; border-bottom: 2px solid var(--cl-primary); }
.nav-pills .nav-link { border-radius: var(--cl-radius-sm); font-weight: 600; color: var(--cl-text-2); }
.nav-pills .nav-link.active { background: var(--cl-primary); }

/* ---------- 모달·드롭다운·알림창 ---------- */
.modal-content { border: 0; border-radius: 14px; box-shadow: var(--cl-shadow-pop); }
.modal-header { border-bottom: 1px solid var(--cl-border); padding: 1rem 1.25rem; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--cl-border); padding: .85rem 1.25rem; }
.modal-backdrop.show { opacity: .35; }
.dropdown-menu { border: 1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-pop); font-size: 13.5px; }
.dropdown-header { font-weight: 700; color: var(--cl-text); font-size: 13px; }
.dropdown-item { border-radius: 6px; }
.alert { border: 0; border-radius: var(--cl-radius-sm); font-size: 13.5px; }
.alert-info { background: var(--cl-info-soft); color: var(--cl-info); }
.alert-warning { background: var(--cl-warning-soft); color: var(--cl-warning); }
.alert-danger { background: var(--cl-danger-soft); color: var(--cl-danger); }
.alert-success { background: var(--cl-success-soft); color: var(--cl-success); }
.swal2-popup { border-radius: 14px !important; font-family: var(--cl-font) !important; font-size: 14px !important; }
.swal2-styled.swal2-confirm { background: var(--cl-primary) !important; border-radius: var(--cl-radius-sm) !important; font-weight: 600 !important; }
.swal2-styled.swal2-cancel { border-radius: var(--cl-radius-sm) !important; font-weight: 600 !important; }
.blockUI.blockOverlay { background: rgba(255, 255, 255, .7) !important; opacity: 1 !important; }
.blockUI.blockMsg { color: var(--cl-primary) !important; }

/* ---------- 날짜 선택 ---------- */
.daterangepicker { border: 1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow-pop); font-family: var(--cl-font); }
.daterangepicker td.active, .daterangepicker td.active:hover { background: var(--cl-primary); }
.daterangepicker td.in-range { background: var(--cl-primary-soft); }
.daterangepicker .drp-buttons .btn { font-size: 12.5px; }
.datepicker { border-radius: var(--cl-radius); font-family: var(--cl-font); padding: 8px; }
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td span.active { background: var(--cl-primary) !important; border-color: var(--cl-primary) !important; }

/* ---------- 요약 상자(대시보드) ---------- */
.small-box { border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); border: 1px solid var(--cl-border); background: var(--cl-surface) !important; color: var(--cl-text) !important; }
.small-box > .inner { padding: 1rem 1.1rem; }
.small-box h3 { font-size: 24px; font-weight: 800; color: var(--cl-text); }
.small-box p { color: var(--cl-text-2); font-size: 13px; font-weight: 600; margin: 0; }
.small-box .icon { color: var(--cl-primary); opacity: .18; }
.small-box > .small-box-footer { background: var(--cl-surface-2); color: var(--cl-text-2); border-top: 1px solid var(--cl-border); border-radius: 0 0 var(--cl-radius) var(--cl-radius); font-size: 12.5px; font-weight: 600; }
.small-box > .small-box-footer:hover { background: var(--cl-primary-soft); color: var(--cl-primary); }
.info-box { border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); border: 1px solid var(--cl-border); }
.progress { border-radius: 999px; background: #eef0f3; }
.progress-bar { background: var(--cl-primary); }

/* ---------- 하단 ---------- */
.main-footer { background: transparent; border-top: 0; color: var(--cl-text-3); font-size: 12px; padding: .9rem 1.25rem; }
.main-footer a { color: var(--cl-text-3); font-weight: 600; }

/* ---------- 탭형 프레임(iframe 모드) ---------- */
.content-wrapper.iframe-mode .navbar-nav { background: var(--cl-surface); }
.content-wrapper.iframe-mode .nav-link { color: var(--cl-text-2); }
.content-wrapper.iframe-mode .nav-link.active { color: var(--cl-primary); background: var(--cl-surface); font-weight: 700; }

/* ---------- 로그인 ---------- */
body.cl-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #f5f6f8 0%, #eef2ff 100%); }
.cl-login-box { width: 380px; max-width: calc(100vw - 32px); }
.cl-login-brand { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-bottom: 1.4rem; }
.cl-login-brand img { width: 56px; height: 56px; }
.cl-login-brand .name { font-size: 20px; font-weight: 800; letter-spacing: .02em; color: var(--cl-brand); }
.cl-login-brand .sub { font-size: 13px; color: var(--cl-text-3); margin-top: -.45rem; }
.cl-login-card { background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 16px; box-shadow: 0 8px 28px rgba(16, 24, 40, .06); padding: 1.6rem; }
.cl-login-card .form-control { height: 44px; font-size: 14.5px; }
.cl-login-card .btn { height: 44px; font-size: 15px; }
.cl-login-error { background: var(--cl-danger-soft); color: var(--cl-danger); border-radius: var(--cl-radius-sm); padding: .6rem .8rem; font-size: 13px; font-weight: 600; margin-bottom: 1rem; }
.cl-login-foot { text-align: center; color: var(--cl-text-3); font-size: 12px; margin-top: 1.1rem; }

/* ---------- 보정 ---------- */
.main-sidebar .nav-sidebar .nav-link > .nav-icon,
.main-sidebar .nav-sidebar .nav-link > .nav-icon.fas,
.main-sidebar .nav-sidebar .nav-link > .nav-icon.far { font-size: 14px; width: 1.35rem; margin: 0 .6rem 0 .1rem; color: var(--cl-text-3); }
.main-sidebar .nav-sidebar .nav-link.active > .nav-icon { color: var(--cl-primary); }
.nav-sidebar .nav-link p { font-size: 14px; }
.btn.form-control { height: calc(2.25rem + 2px); }
.btn-primary.form-control, .btn-primary.form-control:focus { color: #fff; border-color: var(--cl-primary); }
.btn-success.form-control, .btn-info.form-control, .btn-danger.form-control { color: #fff; }
.btn-group .btn, .btn { white-space: nowrap; }
.blockUI.blockMsg h2, .blockUI.blockMsg .display-4 { font-size: 30px; color: var(--cl-primary); margin: 0; }
.dataTables_wrapper .dataTables_length { color: var(--cl-text-3); font-size: 12.5px; margin-bottom: .6rem; }
.dataTables_wrapper .dataTables_length select { margin: 0 .3rem; padding: 0 1.6rem 0 .5rem; min-width: 72px; }
/* 탭형 프레임 머리줄(화면 이름이 상단바에 이미 있으므로 얇게) */
.content-wrapper.iframe-mode > .nav.navbar { background: var(--cl-surface); border-bottom: 1px solid var(--cl-border) !important; padding: 0 .5rem; min-height: 38px; }
.content-wrapper.iframe-mode > .nav.navbar .nav-link { padding: .5rem .8rem; font-size: 13px; }
.content-wrapper.iframe-mode > .nav.navbar .nav-link.bg-light, .content-wrapper.iframe-mode > .nav.navbar .bg-light { background: transparent !important; color: var(--cl-text-3) !important; }
.content-wrapper.iframe-mode > .nav.navbar .bg-danger { background: transparent !important; color: var(--cl-text-3) !important; }
/* 탭이 처음의 목록 하나뿐이면 탭 줄을 감춘다(화면 이름은 상단바에 있다) — 상세를 열어 탭이 둘이 되면 다시 보인다(목록으로 돌아오는 길).
   전체 화면 모드에서는 감추지 않는다(나가는 단추가 이 줄에 있다). :has 를 모르는 옛 브라우저에서는 예전처럼 늘 보인다 */
body:not(.iframe-mode-fullscreen) .content-wrapper.iframe-mode > .nav.navbar:not(:has(.navbar-nav > .nav-item + .nav-item)) { display: none; }

/* ---------- 홈 ---------- */
.cl-home-hello { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: .4rem 0 .2rem; }
.cl-home-sub { color: var(--cl-text-2); font-size: 14px; margin-bottom: 1.2rem; }
.cl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.cl-tile { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.15rem; background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); color: var(--cl-text); transition: border-color .12s, box-shadow .12s, transform .12s; }
.cl-tile:hover { border-color: #c5d0f7; box-shadow: 0 6px 18px rgba(36, 71, 214, .10); color: var(--cl-text); transform: translateY(-1px); }
.cl-tile-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--cl-primary-soft); color: var(--cl-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.cl-tile-title { font-size: 15px; font-weight: 700; }
.cl-tile-desc { font-size: 12.5px; color: var(--cl-text-3); line-height: 1.5; }

/* 사내 IP 에서만 보이는 메뉴 표시 */
.cl-menu-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--cl-warning); background: var(--cl-warning-soft); border-radius: 999px; padding: 1px 7px; line-height: 1.6; }
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .cl-menu-tag { display: none; }

/* =====================================================================
 * 목록 화면 공통 — 검색 영역·목록 머리줄은 고정, 목록만 스크롤 (2026-10 개편)
 * 쓰는 법: 화면의 <div class="content-wrapper"> 에 cl-fixed 를 붙인다.
 *  - section.content-header : 검색 영역(고정)
 *  - section.content > .card(마지막 카드) : 목록 카드. card-header(고정) + card-body(목록이 차지)
 *  - 목록 본문은 .cl-scroll(스크롤) + .cl-foot(쪽 번호, 고정). DataTables 는 기본 dom 이 같은 구조를 만든다
 * 화면이 좁거나(가로 992px 미만) 낮으면(세로 560px 미만) 예전처럼 화면 전체가 스크롤된다.
 * ===================================================================== */
@media (max-width: 767.98px) {
  .cl-search-fields .cl-search-row:last-child { padding-right: 0; }
  .cl-search-actions { position: static; margin-top: .6rem; justify-content: flex-end; }
}
@media (min-width: 992px) and (min-height: 560px) {
  body.cl-fixed-page { overflow: hidden; }
  body.cl-fixed-page .main-footer { display: none; }
  .content-wrapper.cl-fixed {
    height: calc(100vh - 57px);
    min-height: 0 !important;
    display: flex; flex-direction: column; overflow: hidden;
  }
  .cl-fixed > .content-header { flex: 0 0 auto; }
  .cl-fixed > .content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: .9rem; }
  .cl-fixed > .content > .card:last-of-type { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  .cl-fixed > .content > .card:last-of-type > .card-header { flex: 0 0 auto; }
  .cl-fixed > .content > .card:last-of-type > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
  .cl-fixed .cl-scroll, .cl-fixed .dataTables_wrapper .cl-dt-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .cl-fixed .dataTables_wrapper { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .cl-fixed .cl-scroll thead th, .cl-fixed .cl-dt-scroll thead th { position: sticky; top: 0; z-index: 3; box-shadow: inset 0 -1px 0 var(--cl-border); }
  .cl-fixed .cl-dt-scroll tfoot th, .cl-fixed .cl-dt-scroll tfoot td { position: sticky; bottom: 0; z-index: 2; background: var(--cl-surface-2); box-shadow: inset 0 1px 0 var(--cl-border); }
  /* 탭형(iframe) 화면: 탭 머리줄 아래 첫 탭이 남은 높이를 차지 */
  .content-wrapper.cl-fixed.iframe-mode > .tab-content { flex: 1 1 auto; min-height: 0; height: auto !important; }
  .content-wrapper.cl-fixed.iframe-mode > .tab-content > .tab-pane.active { height: 100%; display: flex; flex-direction: column; }
  .content-wrapper.cl-fixed.iframe-mode > .tab-content > .tab-pane > .content-header { flex: 0 0 auto; }
  .content-wrapper.cl-fixed.iframe-mode > .tab-content > .tab-pane > .content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: .9rem; }
  .content-wrapper.cl-fixed.iframe-mode > .tab-content > .tab-pane > .content > .card:last-of-type { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-bottom: 0; }
  .content-wrapper.cl-fixed.iframe-mode > .tab-content > .tab-pane > .content > .card:last-of-type > .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
}
/* 목록 본문 안쪽 여백(고정이 아닐 때도 같은 모양) */
.cl-scroll > .table, .cl-dt-scroll > .table { margin: 0 !important; }
/* 머리줄 고정(sticky)은 border-collapse:collapse 에서 크롬이 위쪽에 글자 조각을 남긴다 → separate 로 */
.cl-scroll > .table, .cl-dt-scroll > .table { border-collapse: separate !important; border-spacing: 0; }
.cl-scroll > .table > tbody > tr:first-child > td, .cl-dt-scroll > .table > tbody > tr:first-child > td { border-top: 0; }
.cl-foot, .dataTables_wrapper .cl-dt-foot {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem 1rem; border-top: 1px solid var(--cl-border); background: var(--cl-surface);
  border-radius: 0 0 var(--cl-radius) var(--cl-radius);
}
.cl-foot .pagination, .cl-dt-foot .pagination { margin: 0; }
.cl-foot-info, .dataTables_wrapper .cl-dt-foot .dataTables_info { color: var(--cl-text-3); font-size: 12.5px; padding: 0 !important; white-space: nowrap; }
.dataTables_wrapper .cl-dt-foot .dataTables_paginate { padding: 0 !important; }
.dataTables_wrapper .cl-dt-top:empty { display: none; }
.dataTables_wrapper .cl-dt-top { display: flex; justify-content: space-between; padding: .6rem 1rem 0; }
.cl-dt-scroll .table thead th:first-child, .cl-scroll .table thead th:first-child,
.cl-dt-scroll .table td:first-child, .cl-scroll .table td:first-child { padding-left: 1rem; }
.cl-dt-scroll .table thead th { border-top: 0 !important; }

/* ---------- 검색 영역(촘촘하게) ---------- */
.content-wrapper > .content-header.cl-search-wrap { padding: .85rem 1.25rem 0; }
.cl-search { margin-bottom: 0; }
/* 검색 버튼은 마지막 줄 오른쪽 끝에 — 첫 줄이 폭을 다 쓰게 해 좁은 화면에서도 두 줄로 끝나게 한다 */
.cl-search-form { position: relative; padding: .8rem 1rem; }
.cl-search-fields .cl-search-row:last-child { padding-right: 210px; }
.cl-search-fields { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.cl-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1.5rem; }
.cl-f { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cl-f-grow { flex: 1 1 300px; }
.cl-f-label { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--cl-text-2); min-width: 52px; display: inline-flex; align-items: center; gap: .25rem; }
.cl-search .form-control, .cl-search .custom-select { height: 34px; font-size: 13px; }
.cl-search .cl-key { width: auto; min-width: 104px; flex: 0 0 auto; }
.cl-search .cl-word { min-width: 160px; flex: 1 1 auto; }
.cl-search-actions { position: absolute; right: 1rem; bottom: .8rem; display: flex; align-items: center; gap: .4rem; }
.cl-btn-search { height: 36px; padding: 0 1.25rem; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: .45rem; border-radius: 9px; }
.cl-btn-reset { height: 36px; padding: 0 .8rem; color: var(--cl-text-2); }
/* 날짜 */
.cl-date { position: relative; width: 200px; flex: 0 0 auto; }
.cl-date > i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--cl-text-3); font-size: 13px; pointer-events: none; }
.cl-date > .form-control { padding-left: 2rem; }
/* 둘 중 하나(세그먼트) */
.cl-seg { display: inline-flex; background: var(--cl-surface-2); border: 1px solid var(--cl-border-strong); border-radius: 9px; padding: 2px; flex: 0 0 auto; }
.cl-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cl-seg label { margin: 0; padding: .3rem .7rem; font-size: 12.5px; font-weight: 600; color: var(--cl-text-2); border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cl-seg input:checked + label { background: var(--cl-surface); color: var(--cl-primary); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.cl-seg input:focus-visible + label { outline: 2px solid var(--cl-primary); outline-offset: 1px; }
/* 기간 빠른 선택 */
.cl-quick { display: inline-flex; gap: 4px; flex: 0 0 auto; }
.cl-quick .btn { height: 30px; padding: 0 .65rem; font-size: 12.5px; border-radius: 7px; }
.cl-quick .btn.active, .cl-quick .btn.btn-outline-secondary:not(:disabled):not(.disabled).active { background: var(--cl-primary-soft); color: var(--cl-primary); border-color: var(--cl-primary); }
/* 칩 체크박스 */
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip { margin: 0; cursor: pointer; }
.cl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cl-chip span {
  display: inline-flex; align-items: center; gap: .3rem; height: 28px; padding: 0 .7rem;
  border: 1px solid var(--cl-border-strong); border-radius: 999px; background: var(--cl-surface);
  font-size: 12.5px; font-weight: 600; color: var(--cl-text-2); transition: background-color .12s, border-color .12s, color .12s;
}
.cl-chip span::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; display: none; }
.cl-chip:hover span { border-color: #c3c8d1; color: var(--cl-text); }
.cl-chip input:checked + span { background: var(--cl-primary-soft); border-color: var(--cl-primary); color: var(--cl-primary); }
.cl-chip input:checked + span::before { display: inline; }
.cl-chip input:focus-visible + span { outline: 2px solid var(--cl-primary); outline-offset: 1px; }
.cl-help { border: 0; background: transparent; color: var(--cl-text-3); padding: 0 2px; font-size: 14px; line-height: 1; cursor: pointer; }
.cl-help:hover, .cl-help:focus { color: var(--cl-primary); outline: none; }

/* ---------- 목록 머리줄 ---------- */
.card-header.cl-toolbar::after { display: none; }
.card-header.cl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem; min-height: 56px; }
.cl-toolbar-l, .cl-toolbar-r { display: flex; align-items: center; gap: .5rem 1.1rem; flex-wrap: wrap; }
.cl-toolbar-r { gap: .4rem; margin-left: auto; }
form.cl-toolbar-r { margin-bottom: 0; }
.cl-toolbar .cl-upload { width: 330px; flex-wrap: nowrap; }
.cl-toolbar .cl-upload .custom-file, .cl-toolbar .cl-upload .custom-file-input, .cl-toolbar .cl-upload .custom-file-label { height: 32px; }
.cl-toolbar .cl-upload .custom-file-label { font-size: 12.5px; line-height: 1.5; padding-top: .3rem; }
.cl-toolbar .cl-upload .custom-file-label::after { height: 30px; line-height: 1.5; padding-top: .3rem; font-size: 12.5px; }
.cl-toolbar .cl-upload .btn { height: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cl-kpi { display: inline-flex; align-items: baseline; gap: .45rem; font-size: 12.5px; color: var(--cl-text-3); font-weight: 600; white-space: nowrap; }
.cl-kpi b { font-size: 17px; font-weight: 800; color: var(--cl-text); letter-spacing: -.02em; }
.cl-kpi b.text-primary { color: var(--cl-primary) !important; }
.cl-kpi + .cl-kpi { padding-left: 1.1rem; border-left: 1px solid var(--cl-border); }
.cl-toolbar .btn { height: 32px; display: inline-flex; align-items: center; gap: .35rem; font-size: 12.5px; padding: 0 .75rem; }
.cl-toolbar .custom-select { height: 32px; font-size: 12.5px; width: auto; padding-right: 1.8rem; }
.cl-selbar { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .35rem .25rem .75rem; background: var(--cl-primary-soft); border: 1px solid #c5d0f7; border-radius: 10px; font-size: 13px; color: var(--cl-primary); font-weight: 600; }
.cl-selbar[hidden] { display: none; }
.cl-selbar b { font-weight: 800; }
.cl-selbar .btn-link { color: var(--cl-text-2); font-weight: 600; padding: 0 .4rem; }

/* ---------- 큰 체크박스 ---------- */
.cl-check { position: relative; display: inline-flex; margin: 0; cursor: pointer; vertical-align: middle; }
.cl-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cl-check-box {
  width: 20px; height: 20px; border: 1.5px solid #b9c0cc; border-radius: 6px; background: var(--cl-surface);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.cl-check-box::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.cl-check:hover .cl-check-box { border-color: var(--cl-primary); }
.cl-check input:checked + .cl-check-box { background: var(--cl-primary); border-color: var(--cl-primary); }
.cl-check input:checked + .cl-check-box::after { opacity: 1; }
.cl-check input:indeterminate + .cl-check-box { background: var(--cl-primary); border-color: var(--cl-primary); }
.cl-check input:indeterminate + .cl-check-box::after { opacity: 1; width: 10px; height: 0; border-left: 0; transform: none; }
.cl-check input:focus-visible + .cl-check-box { box-shadow: 0 0 0 3px rgba(36, 71, 214, .2); }
.cl-check input:disabled + .cl-check-box { background: var(--cl-surface-2); border-color: var(--cl-border); cursor: not-allowed; }
.cl-check.is-disabled { cursor: not-allowed; }
.cl-col-chk { width: 44px; text-align: center; }

/* ---------- 상품 목록 ---------- */
.cl-table { font-size: 13px; }
.cl-table td { padding: .45rem .7rem; white-space: nowrap; }
.cl-table td.cl-col-goods { white-space: normal; }
.cl-table thead th { padding: .55rem .7rem; }
.cl-table tbody tr.is-selected { background: #f3f6ff; }
.cl-table tbody tr:hover { background: #f8f9fc; }
.cl-table tbody tr.is-selected:hover { background: #edf1ff; }
.cl-goods { display: flex; align-items: center; gap: .7rem; min-width: 220px; }
.cl-thumb { position: relative; flex: 0 0 auto; width: 52px; height: 66px; padding: 0; border: 1px solid var(--cl-border); border-radius: 8px; overflow: hidden; background: var(--cl-surface-2); cursor: zoom-in; }
.cl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.cl-thumb:hover img { transform: scale(1.06); }
.cl-thumb:focus-visible { outline: 2px solid var(--cl-primary); outline-offset: 1px; }
.cl-thumb-none { display: flex; align-items: center; justify-content: center; color: var(--cl-text-3); font-size: 16px; cursor: default; }
.cl-goods-no { font-size: 12px; color: var(--cl-text-3); font-weight: 600; }
.cl-goods-name { font-weight: 600; color: var(--cl-text); line-height: 1.35; margin-top: 1px; }
.cl-nosale { display: inline-block; margin-left: .35rem; font-size: 11px; font-weight: 700; color: var(--cl-danger); background: var(--cl-danger-soft); border-radius: 999px; padding: 1px 7px; }
.cl-price { width: 104px; height: 30px !important; font-size: 13px !important; text-align: right; }
/* 재고상태 배지 */
.cl-st { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; background: #eef0f3; color: var(--cl-text-2); }
.cl-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.cl-st-in_storage { background: var(--cl-success-soft); color: var(--cl-success); }
.cl-st-product_processing { background: var(--cl-info-soft); color: var(--cl-info); }
.cl-st-wait_out_storage { background: var(--cl-primary-soft); color: var(--cl-primary); }
.cl-st-out_storage { background: #eef0f3; color: #6b7280; }
.cl-st-b2b_out { background: #f1ecff; color: #6d3fd1; }
.cl-st-returning { background: var(--cl-warning-soft); color: var(--cl-warning); }
.cl-st-wait_removal { background: #fff0e8; color: #c2410c; }
.cl-st-removal { background: #e9eaed; color: #374151; }
.cl-st-lost { background: var(--cl-danger-soft); color: var(--cl-danger); }
/* 목록 불러오는 중 */
.cl-list-card { position: relative; }
.cl-loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55); border-radius: var(--cl-radius); }
.cl-loading[hidden] { display: none; }
.cl-loading-box { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; background: var(--cl-surface); border: 1px solid var(--cl-border); border-radius: 12px; box-shadow: var(--cl-shadow-pop); font-weight: 600; font-size: 13.5px; color: var(--cl-text-2); }
.cl-spinner { width: 18px; height: 18px; border: 2.5px solid var(--cl-primary-soft); border-top-color: var(--cl-primary); border-radius: 50%; animation: cl-spin .7s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.cl-empty { padding: 3.5rem 1rem !important; text-align: center; color: var(--cl-text-3); }
.cl-empty i { display: block; font-size: 26px; margin-bottom: .6rem; color: #c7ccd5; }

/* ---------- 사진 보기 창 ---------- */
.cl-gallery .modal-dialog { max-width: min(960px, calc(100vw - 2rem)); }
.cl-gallery .modal-body { padding: 0; background: #0f1115; border-radius: 0 0 14px 14px; }
.cl-gallery .modal-header { align-items: center; }
.cl-gal-sub { font-size: 13px; color: var(--cl-text-3); font-weight: 600; margin-left: .5rem; }
.cl-gal-stage { position: relative; height: min(68vh, 640px); display: flex; align-items: center; justify-content: center; }
.cl-gal-stage img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.cl-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .12s; }
.cl-gal-nav:hover { background: rgba(255, 255, 255, .26); }
.cl-gal-nav:disabled { opacity: .25; cursor: default; }
.cl-gal-prev { left: 14px; }
.cl-gal-next { right: 14px; }
.cl-gal-kind { position: absolute; left: 14px; top: 14px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: .2rem .65rem; }
.cl-gal-strip { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 14px; background: #171a20; border-radius: 0 0 14px 14px; }
.cl-gal-strip button { flex: 0 0 auto; width: 58px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #22262e; opacity: .6; cursor: pointer; transition: opacity .12s, border-color .12s; }
.cl-gal-strip button:hover { opacity: .9; }
.cl-gal-strip button.active { border-color: #fff; opacity: 1; }
.cl-gal-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-gal-msg { color: #c9ced8; font-size: 14px; }

/* ---------- 재고상태 설명 창 ---------- */
#statusHelpModal .modal-dialog { max-width: 600px; }
.cl-help-list { list-style: none; margin: 0; padding: 0; }
.cl-help-list li { display: grid; grid-template-columns: 108px 1fr; gap: .9rem; align-items: start; padding: .7rem 0; border-top: 1px solid var(--cl-border); }
.cl-help-list li:first-child { border-top: 0; padding-top: 0; }
.cl-help-list .cl-st { justify-self: start; margin-top: 1px; }
.cl-help-list p { margin: 0; font-size: 13.5px; color: var(--cl-text); line-height: 1.55; }
.cl-help-list small { display: block; color: var(--cl-text-3); font-size: 12.5px; margin-top: .15rem; }